OpenAI API calls be like

Previous Versions (not embedded)


6/10 Version

<html>

<head>

  <title>My Text File as HTML</title>

  <style id="userStyles">

    .escapeKey {

      display: inline-block;

      white-space: pre-wrap;

      word-wrap: break-word;

      padding: 10px;

      color: #fff;

      border: 1px solid #ddd;

      background-color: #333;

      border-radius: 5px;

      margin-bottom: 10px;

    }

    

    .userInput,

    .assistantOutput,

    .systemInput {

      display: inline-block;

      white-space: pre-wrap;

      word-wrap: break-word;

      padding: 10px;

      color: #000;

      border: 1px solid #ddd;

      background-color: #f5f5f5;

      border-radius: 5px;

      margin-bottom: 10px;

    }

        

    .messageBox,

    .assistantOutput {

      white-space: pre-wrap;

      word-wrap: break-word; 

      padding: 10px;

      border: 1px solid #ddd;

      background-color: #f5f5f5;

      border-radius: 5px;

      margin-bottom: 10px;

      width: 100%;

      box-sizing: border-box;

    }

    

    .assistantMessage {

      color: #006400;

    }

    

    .systemMessage {

      color: #8b0000;

    }

    

    .userMessage {

      color: #0000ff;

    }

    

    .messageBox pre {

      white-space: pre-wrap;

    }

  </style>

</head>

<body>

  <p>User Input: <span id="userInputPreview" class="userInput messageBox escapeKey" contenteditable="true"></span></p>

  <p>Selected Assistant Messages: <span id="selectedAssistantMessages" class="assistantOutput" contenteditable="true"></span></p>


  <p>System Input: <span id="systemInputPreview" class="systemInput messageBox escapeKey" contenteditable="true"></span></p>

  <div>

    <label for="modelSelect">Select Model:</label>

    <select id="modelSelect">

      <option value=modelSelect>gpt-3.5-turbo</option>

      <option value=modelSelect>gpt-4</option>

      <option value=modelSelect>gpt-4-0314</option>

      <option value=modelSelect>gpt-4-32k</option>

      <option value=modelSelect>gpt-4-32k-0314</option>      

      <option value=modelSelect>gpt-3.5-turbo-0301</option>

    </select>

  </div>

  

  <p>This correctly displays and spans accordingly to theme.</p>

  <input type="text" id="userInput" placeholder="Enter your question">

  <input type="text" id="systemInput" placeholder="Enter system role content">

  <button onclick="sendUserInput()">Submit</button>

  <div id="output"></div>

  <input type="file" id="completionsFile" accept=".json, .txt" />

  <button onclick="loadCompletionsFromFile()">Load Completions</button>

  <button onclick="saveConversations()">Save Conversations</button>

  <div id="abstractionsSection">

    <h2>Abstractions</h2>

  </div>

  <div>

    <label for="abstractionName">Abstraction Name:</label>

    <input type="text" id="abstractionName" placeholder="Enter Abstraction Name">

  </div>

  <div>

    <label for="abstractionContent">Abstraction Content:</label>

    <textarea id="abstractionContent" placeholder="Enter Abstraction Content"></textarea>

  </div>

  <button id="saveAbstraction" onclick="saveAbstraction()">Save Abstraction</button>

  <button id="deleteAbstraction" onclick="deleteAbstraction()">Delete Abstraction</button>



  <div>

    <h2>Enter your CSS:</h2>

    <textarea id="cssInput" style="width: 100%; height: 200px;"></textarea>

    <button id="applyButton">Apply CSS</button>

    <button id="defaultThemeButton">Load Default Theme</button>

    <button id="darkThemeButton">Load Dark Theme</button>

    <button id="loadCustomThemeButton">Load Custom Theme</button>

    <button id="saveCustomThemeButton">Save Custom Theme</button>

  </div>


  <script>

    const apiKey = "sk-Redacted";

    const abstractions = {};


    function callOpenAI(input, model) {

      const requestOptions = {

        method: 'POST',

        headers: {

          'Content-Type': 'application/json',

          'Authorization': `Bearer ${apiKey}`

        },

        body: JSON.stringify({

          model: model,

          messages: input

        })

      };


      fetch('https://api.openai.com/v1/chat/completions', requestOptions)

        .then(response => response.json())

        .then(data => {

          const response = data.choices[0];

          saveCompletion(input, response);

        })

        .catch(error => {

          console.error('Error:', error);

        });

    }


    function sendUserInput(event) {

  const userInput = document.getElementById('userInputPreview');

  const systemInput = document.getElementById('systemInputPreview');

  const selectedOutputs = appendOutputsToPrompt();

  const modelSelect = document.getElementById('modelSelect');

  const selectedModel = modelSelect.value;

  const customThemeCss = cssInput.value;


  // Check if the spacebar key is pressed

  if (event && event.keyCode === 32) {

    const userInputContent = userInput.textContent;

    const lastWord = userInputContent.trim().split(' ').pop();


    // Check if the last word matches any abstraction and replace it with a box

    Object.entries(abstractions).forEach(([name, content]) => {

      if (lastWord === content) {

        userInput.innerHTML = userInputContent.slice(0, -lastWord.length) + `<div class="abstractionBox" onclick="editAbstraction('${name}', '${content}')">${name}</div> `;

      }

    });

  }


  // Append the selected outputs to the conversation

  const conversation = [

    { role: 'system', content: systemInput.textContent },

    ...selectedOutputs,

    { role: 'user', content: userInput.textContent }

  ];


  // Include the customThemeCss in the user input if it is not empty

  if (customThemeCss.trim() !== '') {

    conversation.push({ role: 'user', content: customThemeCss });

  }


  document.getElementById('userInput').value = userInput.textContent;

  document.getElementById('systemInput').value = systemInput.textContent;


  callOpenAI(conversation, selectedModel);

}



    function saveCompletion(input, response) {

      const customThemeCss = input.find(item => item.role === 'user' && item.content !== undefined)?.content;


      const completion = {

        input: input,

        response: response,

        customThemeCss: customThemeCss

      };

      const previousCompletions = getCompletionsFromStorage();

      const updatedCompletions = [...previousCompletions, completion];

      setCompletionsToStorage(updatedCompletions);

      displayCompletions(updatedCompletions);

    }


    function getCompletionsFromStorage() {

      const completionsString = sessionStorage.getItem('completions');

      return completionsString ? JSON.parse(completionsString) : [];

    }


    function setCompletionsToStorage(completions) {

      sessionStorage.setItem('completions', JSON.stringify(completions));

    }


    function loadCompletionsFromFile() {

      const fileInput = document.getElementById('completionsFile');

      const file = fileInput.files[0];

      const reader = new FileReader();


      reader.onload = function (e) {

        const contents = e.target.result;

        const completionsData = JSON.parse(contents);


        if (Array.isArray(completionsData)) {

          // File without custom themes

          setCompletionsToStorage(completionsData);

          displayCompletions(completionsData);

        } else {

          // File with custom themes

          const completions = completionsData.conversations;

          setCompletionsToStorage(completions);

          displayCompletions(completions);


          // Load the custom theme if present in the data

          const customThemeCss = completionsData.customThemeCss;

          if (customThemeCss) {

            cssInput.value = customThemeCss;

            userStyles.textContent = customThemeCss;

            localStorage.setItem('customThemeCss', customThemeCss); // Store the custom theme in localStorage

            alert('Custom theme loaded successfully!');

          } else {

            cssInput.value = ''; // Clear the CSS input field

            userStyles.textContent = ''; // Clear the userStyles element

          }

        }

      };


      reader.readAsText(file);

    }


    function displayAbstractions() {

      const abstractionsSection = document.getElementById('abstractionsSection');

      const abstractionsList = Object.entries(abstractions).map(([name, content]) => {

        return `<div class="abstractionBox" onclick="editAbstraction('${name}', '${content}')">${name}</div>`;

      });

      abstractionsSection.innerHTML = `<h2>Abstractions</h2>${abstractionsList.join('')}`;

      document.getElementById('userInputPreview').innerHTML = `<span>${document.getElementById('userInput').value}</span>`;

      document.getElementById('selectedAssistantMessages').innerHTML = `<span>${document.getElementById('selectedAssistantMessages').textContent}</span>`;

      document.getElementById('systemInputPreview').innerHTML = `<span>${document.getElementById('systemInput').value}</span>`;

    }


    function editAbstraction(name, content) {

      document.getElementById('abstractionName').value = name;

      document.getElementById('abstractionContent').value = content;

    }


    function saveAbstraction() {

      const name = document.getElementById('abstractionName').value;

      const content = document.getElementById('abstractionContent').value;

      if (name && content) {

        abstractions[name] = content;

        displayAbstractions();

        clearAbstractionInputs();

      }

    }


    function deleteAbstraction() {

      const name = document.getElementById('abstractionName').value;

      if (name && abstractions.hasOwnProperty(name)) {

        delete abstractions[name];

        displayAbstractions();

        clearAbstractionInputs();

      }

    }


    function clearAbstractionInputs() {

      document.getElementById('abstractionName').value = '';

      document.getElementById('abstractionContent').value = '';

    }


    function displayCompletions(conversations) {

  const outputElement = document.getElementById('output');

  outputElement.innerHTML = '';


  conversations.forEach((conversation, index) => {

    const input = conversation.input || [];

    const response = conversation.response || '';

    const assistantMessage = response.message?.content || '';


    let formattedCompletion = `<input type="checkbox" id="output${index}" onchange="updatePreview(event, ${index})">`;


    input.forEach((item) => {

      let content = item.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');


      if (item.role === 'user') {

        // Check if the content matches any abstraction and replace it with a box

        Object.entries(abstractions).forEach(([name, abstractionContent]) => {

          const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

          content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

        });


        formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="userMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;

      } else if (item.role === 'assistant') {

        // Check if the content matches any abstraction and replace it with a box

        Object.entries(abstractions).forEach(([name, abstractionContent]) => {

          const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

          content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

        });


        formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="assistantMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;

      } else {

        // Check if the content matches any abstraction and replace it with a box

        Object.entries(abstractions).forEach(([name, abstractionContent]) => {

          const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

          content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

        });


        formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="systemMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;

      }

    });


    let assistantContent = assistantMessage.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');

    

    // Check if the assistant content matches any abstraction and replace it with a box

    Object.entries(abstractions).forEach(([name, abstractionContent]) => {

      const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

      assistantContent = assistantContent.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

    });

    

    formattedCompletion += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: ${assistantContent}</pre></div><br>`;


    outputElement.innerHTML += formattedCompletion;

  });

}



    function appendOutputsToPrompt() {

      const completionArray = getCompletionsFromStorage();

      let appendedOutputs = [];

      let selectedAssistantMessages = '';


      completionArray.forEach((completion, index) => {

        if (document.getElementById(`output${index}`).checked) {

          const user = completion.input.find(item => item.role === 'user')?.content || '';

          const assistant = completion.input.find(item => item.role === 'assistant')?.content || '';

          const system = completion.input.find(item => item.role === 'system')?.content || '';


          if (user) {

            appendedOutputs.push({ role: 'user', content: user });

          }

          if (assistant) {

            appendedOutputs.push({ role: 'assistant', content: assistant });

          }

          if (system) {

            appendedOutputs.push({ role: 'system', content: system });

          }


          // Update the selected Assistant Messages

          selectedAssistantMessages += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: <span>${assistant}</span></pre></div><br>`;

        }

      });


      // Update the selected Assistant Messages box content

      document.getElementById('selectedAssistantMessages').innerHTML = selectedAssistantMessages;


      return appendedOutputs;

    }


    function updatePreview(event, index) {

  const checked = event.target.checked;

  const userInput = document.getElementById('userInputPreview');

  const systemInput = document.getElementById('systemInputPreview');

  const selectedAssistantMessages = document.getElementById('selectedAssistantMessages');


  if (checked) {

    const completion = getCompletionsFromStorage()[index];

    const assistantMessage = completion.response.message?.content || '';


    // Append user input to the user input preview

    const user = completion.input.find(item => item.role === 'user');

    if (user) {

      let content = user.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');


      // Check if the content matches any abstraction and replace it with a box

      Object.entries(abstractions).forEach(([name, abstractionContent]) => {

        const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

        content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

      });


      userInput.innerHTML += `<div class="${user.role} messageBox assistantOutput"><pre class="userMessage">${user.role.charAt(0).toUpperCase() + user.role.slice(1)}: ${content}</pre></div>`;

    }


    // Append system input to the system input preview

    const system = completion.input.find(item => item.role === 'system');

    if (system) {

      let content = system.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');


      // Check if the content matches any abstraction and replace it with a box

      Object.entries(abstractions).forEach(([name, abstractionContent]) => {

        const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

        content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

      });


      systemInput.innerHTML += `<div class="${system.role} messageBox assistantOutput"><pre class="systemMessage">${system.role.charAt(0).toUpperCase() + system.role.slice(1)}: ${content}</pre></div>`;

    }


    // Append assistant message to the selected assistant messages

    selectedAssistantMessages.innerHTML += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: ${assistantMessage}</pre></div><br>`;

  } else {

    // Clear the selected Assistant Messages and reset the user/system input previews

    selectedAssistantMessages.innerHTML = '';

    userInput.textContent = '';

    systemInput.textContent = '';

  }

}



    function saveConversations() {

      const completions = getCompletionsFromStorage();


      const data = {

        conversations: completions

      };


      const customThemeCss = localStorage.getItem('customThemeCss');

      if (customThemeCss) {

        data.customThemeCss = customThemeCss;

      }


      const fileData = JSON.stringify(data, null, 2);

      const fileName = 'completions.json';

      const blob = new Blob([fileData], { type: 'application/json' });


      if (navigator.msSaveBlob) {

        // IE 10+

        navigator.msSaveBlob(blob, fileName);

      } else {

        const link = document.createElement('a');

        if (link.download !== undefined) {

          // Browsers that support HTML5 download attribute

          const url = URL.createObjectURL(blob);

          link.setAttribute('href', url);

          link.setAttribute('download', fileName);

          link.style.visibility = 'hidden';

          document.body.appendChild(link);

          link.click();

          document.body.removeChild(link);

        }

      }

    }


    defaultThemeButton.addEventListener('click', function () {

      var defaultThemeCss = `

        body {

          background-color: #ffff;

          color: #000;

        }


        .escapeKey {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #fff;

          border: 1px solid #ddd;

          background-color: #333;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .userInput,

        .assistantOutput,

        .systemInput {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #000;

          border: 1px solid #ddd;

          background-color: #f5f5f5;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .messageBox,

        .assistantOutput {

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          border: 1px solid #ddd;

          background-color: #f5f5f5;

          border-radius: 5px;

          margin-bottom: 10px;

          width: 100%;

          box-sizing: border-box;

        }


        .assistantMessage {

          color: #006400;

        }


        .systemMessage {

          color: #8b0000;

        }


        .userMessage {

          color: #0000ff;

        }


        .messageBox pre {

          white-space: pre-wrap;

        }

      `;

      cssInput.value = defaultThemeCss;

      try {

        userStyles.textContent = defaultThemeCss;

        document.body.classList.remove('darkTheme');

        alert('Default theme applied successfully!');

      } catch (e) {

        alert('Invalid CSS. Please check your input.');

      }

    });


    darkThemeButton.addEventListener('click', function () {

      var darkThemeCss = `

        body {

          background-color: #222;

          color: #fff;

        }


        .escapeKey {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #fff;

          border: 1px solid #ddd;

          background-color: #555;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .userInput,

        .assistantOutput,

        .systemInput {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #fff;

          border: 1px solid #ddd;

          background-color: #555;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .messageBox,

        .assistantOutput {

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          border: 1px solid #ddd;

          background-color: #555;

          border-radius: 5px;

          margin-bottom: 10px;

          width: 100%;

          box-sizing: border-box;

        }


        .assistantMessage {

          color: #fff;

        }


        .systemMessage {

          color: #fff;

        }


        .userMessage {

          color: #fff;

        }


        .messageBox pre {

          white-space: pre-wrap;

        }

      `;

      cssInput.value = darkThemeCss;

      userStyles.textContent = darkThemeCss;

      document.body.classList.add('darkTheme');

    });


    loadCustomThemeButton.addEventListener('click', function () {

      var customThemeCss = localStorage.getItem('customThemeCss');

      if (customThemeCss) {

        cssInput.value = customThemeCss;

        try {

          userStyles.textContent = customThemeCss;

          alert('Custom theme loaded successfully!');

        } catch (e) {

          alert('Invalid CSS. Please check your input.');

        }

      } else {

        alert('No custom theme found. Please save a custom theme first.');

      }

    });


    saveCustomThemeButton.addEventListener('click', function () {

      var customThemeCss = cssInput.value;

      localStorage.setItem('customThemeCss', customThemeCss);

      alert('Custom theme saved successfully!');

    });


const userInputPreview = document.getElementById('userInputPreview');

userInputPreview.addEventListener('keydown', sendUserInput);



    // Display the stored completions on page load

    const storedCompletions = getCompletionsFromStorage();

    displayCompletions(storedCompletions);


    // Display the stored abstractions on page load

    displayAbstractions();

  </script>

</body>

</html>



6/7 Version

<head>

  <title>My Text File as HTML</title>

  <style id=&quot;userStyles&quot;>

    .escapeKey {

      display: inline-block;

      white-space: pre-wrap;

      word-wrap: break-word;

      padding: 10px;

      color: #fff;

      border: 1px solid #ddd;

      background-color: #333;

      border-radius: 5px;

      margin-bottom: 10px;

    }

    

    .userInput,

    .assistantOutput,

    .systemInput {

      display: inline-block;

      white-space: pre-wrap;

      word-wrap: break-word;

      padding: 10px;

      color: #000;

      border: 1px solid #ddd;

      background-color: #f5f5f5;

      border-radius: 5px;

      margin-bottom: 10px;

    }

        

    .messageBox,

    .assistantOutput {

      white-space: pre-wrap;

      word-wrap: break-word; 

      padding: 10px;

      border: 1px solid #ddd;

      background-color: #f5f5f5;

      border-radius: 5px;

      margin-bottom: 10px;

      width: 100%;

      box-sizing: border-box;

    }

    

    .assistantMessage {

      color: #006400;

    }

    

    .systemMessage {

      color: #8b0000;

    }

    

    .userMessage {

      color: #0000ff;

    }

.messageBox pre {

  white-space: pre-wrap;

}

  </style>

</head>

<body>

  <p>User Input: <span id=&quot;userInputPreview&quot; class=&quot;userInput messageBox escapeKey&quot; contenteditable=&quot;true&quot;></span></p>

  <p>Selected Assistant Messages: <span id=&quot;selectedAssistantMessages&quot; class=&quot;assistantOutput&quot; contenteditable=&quot;true&quot;></span></p>


  <p>System Input: <span id=&quot;systemInputPreview&quot; class=&quot;systemInput messageBox escapeKey&quot; contenteditable=&quot;true&quot;></span></p>

<div>

    <label for=&quot;modelSelect&quot;>Select Model:</label>

    <select id=&quot;modelSelect&quot;>

      <option value=modelSelect>gpt-3.5-turbo</option>

      <option value=modelSelect>gpt-4</option>

      <option value=modelSelect>gpt-4-0314</option>

      <option value=modelSelect>gpt-4-32k</option>

      <option value=modelSelect>gpt-4-32k-0314</option>      

      <option value=modelSelect>gpt-3.5-turbo-0301</option>

    </select>

  </div>

  

  <p>This correctly displays and spans accordingly to theme.</p>

  <input type=&quot;text&quot; id=&quot;userInput&quot; placeholder=&quot;Enter your question&quot;>

  <input type=&quot;text&quot; id=&quot;systemInput&quot; placeholder=&quot;Enter system role content&quot;>

  <button onclick=&quot;sendUserInput()&quot;>Submit</button>

  <div id=&quot;output&quot;></div>

  <input type=&quot;file&quot; id=&quot;completionsFile&quot; accept=&quot;.json, .txt&quot; />

  <button onclick=&quot;loadCompletionsFromFile()&quot;>Load Completions</button>

  <button onclick=&quot;saveConversations()&quot;>Save Conversations</button>


  <div>

  <h2>Enter your CSS:</h2>

  <textarea id=&quot;cssInput&quot; style=&quot;width: 100%; height: 200px;&quot;></textarea>

  <button id=&quot;applyButton&quot;>Apply CSS</button>

  <button id=&quot;defaultThemeButton&quot;>Load Default Theme</button>

  <button id=&quot;darkThemeButton&quot;>Load Dark Theme</button>

  <button id=&quot;loadCustomThemeButton&quot;>Load Custom Theme</button>

  <button id=&quot;saveCustomThemeButton&quot;>Save Custom Theme</button>

</div>


  <script>

    const apiKey = &quot;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&quot;;


    function callOpenAI(input, model) {

      const requestOptions = {

        method: 'POST',

        headers: {

          'Content-Type': 'application/json',

          'Authorization': `Bearer ${apiKey}`

        },

        body: JSON.stringify({

          model: model,

          messages: input

        })

      };


      fetch('https://api.openai.com/v1/chat/completions', requestOptions)

        .then(response => response.json())

        .then(data => {

          const response = data.choices[0];

          saveCompletion(input, response);

        })

        .catch(error => {

          console.error('Error:', error);

        });

    }


    function sendUserInput() {

  const userInput = document.getElementById('userInputPreview').textContent;

  const systemInput = document.getElementById('systemInputPreview').textContent;

  const selectedOutputs = appendOutputsToPrompt();

  const modelSelect = document.getElementById('modelSelect');

  const selectedModel = modelSelect.value;

  const customThemeCss = cssInput.value; // Get the current customThemeCss value


  // Append the selected outputs to the conversation

  const conversation = [

    { role: 'system', content: systemInput },

    ...selectedOutputs,

    { role: 'user', content: userInput }

  ];


  // Include the customThemeCss in the user input if it is not empty

  if (customThemeCss.trim() !== '') {

    conversation.push({ role: 'user', content: customThemeCss });

  }


  document.getElementById('userInput').value = userInput;

  document.getElementById('systemInput').value = systemInput;


  callOpenAI(conversation, selectedModel);

}

    function saveCompletion(input, response) {

  const customThemeCss = input.find(item => item.role === 'user' &amp;&amp; item.content !== undefined)?.content;


  const completion = {

    input: input,

    response: response,

    customThemeCss: customThemeCss

  };

  const previousCompletions = getCompletionsFromStorage();

  const updatedCompletions = [...previousCompletions, completion];

  setCompletionsToStorage(updatedCompletions);

  displayCompletions(updatedCompletions);

}


    function getCompletionsFromStorage() {

      const completionsString = sessionStorage.getItem('completions');

      return completionsString ? JSON.parse(completionsString) : [];

    }


    function setCompletionsToStorage(completions) {

      sessionStorage.setItem('completions', JSON.stringify(completions));

    }


    function loadCompletionsFromFile() {

  const fileInput = document.getElementById('completionsFile');

  const file = fileInput.files[0];

  const reader = new FileReader();


  reader.onload = function (e) {

    const contents = e.target.result;

    const completionsData = JSON.parse(contents);


    if (Array.isArray(completionsData)) {

      // File without custom themes

      setCompletionsToStorage(completionsData);

      displayCompletions(completionsData);

    } else {

      // File with custom themes

      const completions = completionsData.conversations;

      setCompletionsToStorage(completions);

      displayCompletions(completions);


      // Load the custom theme if present in the data

      const customThemeCss = completionsData.customThemeCss;

      if (customThemeCss) {

        cssInput.value = customThemeCss;

        userStyles.textContent = customThemeCss;

        localStorage.setItem('customThemeCss', customThemeCss); // Store the custom theme in localStorage

        alert('Custom theme loaded successfully!');

      } else {

        cssInput.value = ''; // Clear the CSS input field

        userStyles.textContent = ''; // Clear the userStyles element

        

      }

    }

  };


  reader.readAsText(file);

}


    function displayCompletions(conversations) {

  const outputElement = document.getElementById('output');

  outputElement.innerHTML = '';


  conversations.forEach((conversation, index) => {

    const input = conversation.input || [];

    const response = conversation.response || '';

    const assistantMessage = response.message?.content || '';


    let formattedCompletion = `<input type=&quot;checkbox&quot; id=&quot;output${index}&quot; onchange=&quot;updatePreview(event, ${index})&quot;>`;


    input.forEach((item) => {

      let content = item.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class=&quot;escapeKey&quot;><div class=&quot;embeddedBox&quot;>$2</div></div>');


      if (item.role === 'user') {

        formattedCompletion += `<div class=&quot;${item.role} messageBox assistantOutput&quot;><pre class=&quot;userMessage&quot;>${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;

      } else if (item.role === 'assistant') {

        formattedCompletion += `<div class=&quot;${item.role} messageBox assistantOutput&quot;><pre class=&quot;assistantMessage&quot;>${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;

      } else {

        formattedCompletion += `<div class=&quot;${item.role} messageBox assistantOutput&quot;><pre class=&quot;systemMessage&quot;>${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;

      }

    });


    let assistantContent = assistantMessage.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class=&quot;escapeKey&quot;><div class=&quot;embeddedBox&quot;>$2</div></div>');

    formattedCompletion += `<div class=&quot;assistantOutput messageBox&quot;><pre class=&quot;assistantMessage&quot;>Assistant: ${assistantContent}</pre></div><br>`;


    outputElement.innerHTML += formattedCompletion;

  });

}




    function appendOutputsToPrompt() {

      const completionArray = getCompletionsFromStorage();

      let appendedOutputs = [];

      let selectedAssistantMessages = '';


      completionArray.forEach((completion, index) => {

        if (document.getElementById(`output${index}`).checked) {

          const user = completion.input.find(item => item.role === 'user')?.content || '';

          const assistant = completion.response.message?.content || '';


          appendedOutputs.push({ role: 'user', content: user });

          appendedOutputs.push({ role: 'assistant', content: assistant });


          // Update the selected Assistant Messages

          selectedAssistantMessages += `<div class=&quot;assistantOutput messageBox&quot;><pre class=&quot;assistantMessage&quot;>Assistant: <span>${assistant}</span></pre></div><br>`;

        }

      });


      // Update the selected Assistant Messages box content

      document.getElementById('selectedAssistantMessages').innerHTML = selectedAssistantMessages;


      return appendedOutputs;

    }


    function updatePreview(event, index) {

  const checked = event.target.checked;

  const userInput = document.getElementById('userInputPreview');

  const systemInput = document.getElementById('systemInputPreview');

  const selectedAssistantMessages = document.getElementById('selectedAssistantMessages');


  if (checked) {

    const completion = getCompletionsFromStorage()[index];

    const assistantMessage = completion.response.message?.content || '';


    // Append user input to the user input preview

    const user = completion.input.find(item => item.role === 'user');

    if (user) {

      userInput.innerHTML += `<div class=&quot;${user.role} messageBox assistantOutput&quot;><pre class=&quot;userMessage&quot;>${user.role.charAt(0).toUpperCase() + user.role.slice(1)}: ${user.content}</pre></div>`;

    }


    // Append system input to the system input preview

    const system = completion.input.find(item => item.role === 'system');

    if (system) {

      systemInput.innerHTML += `<div class=&quot;${system.role} messageBox assistantOutput&quot;><pre class=&quot;systemMessage&quot;>${system.role.charAt(0).toUpperCase() + system.role.slice(1)}: ${system.content}</pre></div>`;

    }


    // Append assistant message to the selected assistant messages preview

    selectedAssistantMessages.innerHTML += `<div class=&quot;assistantOutput messageBox&quot;><pre class=&quot;assistantMessage&quot;>Assistant: ${assistantMessage}</pre></div><br>`;

  } else {

    // Remove the corresponding elements from the previews

    const completion = getCompletionsFromStorage()[index];

    const assistantMessage = completion.response.message?.content || '';


    // Remove user input from the user input preview

    const user = completion.input.find(item => item.role === 'user');

    if (user) {

      userInput.innerHTML = userInput.innerHTML.replace(`<div class=&quot;${user.role} messageBox assistantOutput&quot;><pre class=&quot;userMessage&quot;>${user.role.charAt(0).toUpperCase() + user.role.slice(1)}: ${user.content}</pre></div>`, '');

    }


    // Remove system input from the system input preview

    const system = completion.input.find(item => item.role === 'system');

    if (system) {

      systemInput.innerHTML = systemInput.innerHTML.replace(`<div class=&quot;${system.role} messageBox assistantOutput&quot;><pre class=&quot;systemMessage&quot;>${system.role.charAt(0).toUpperCase() + system.role.slice(1)}: ${system.content}</pre></div>`, '');

    }


    // Remove assistant message from the selected assistant messages preview

    selectedAssistantMessages.innerHTML = selectedAssistantMessages.innerHTML.replace(`<div class=&quot;assistantOutput messageBox&quot;><pre class=&quot;assistantMessage&quot;>Assistant: ${assistantMessage}</pre></div><br>`, '');

  }

}


function saveConversations() {

  const completions = getCompletionsFromStorage();

  const customThemeCss = document.getElementById('cssInput').value;


  const conversationsData = {

    customThemeCss: customThemeCss,

    conversations: completions

  };


  const element = document.createElement('a');

  const fileContent = JSON.stringify(conversationsData, null, 2);

  const file = new Blob([fileContent], { type: 'application/json' });

  element.href = URL.createObjectURL(file);

  element.download = 'conversations.json';

  element.click();

}



    var cssInput = document.getElementById('cssInput');

  var userStyles = document.getElementById('userStyles');

  var applyButton = document.getElementById('applyButton');

  var defaultThemeButton = document.getElementById('defaultThemeButton');

  var darkThemeButton = document.getElementById('darkThemeButton');

  var loadCustomThemeButton = document.getElementById('loadCustomThemeButton');

  var saveCustomThemeButton = document.getElementById('saveCustomThemeButton');


    

    applyButton.addEventListener('click', function() {

      var css = cssInput.value;

      try {

        userStyles.textContent = css;

        alert('CSS applied successfully!');

      } catch (e) {

        alert('Invalid CSS. Please check your input.');

      }

    });


    defaultThemeButton.addEventListener('click', function() {

      var defaultThemeCss = `

        body {

          background-color: #ffff;

          color: #000;

        }

        

        .escapeKey {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #fff;

          border: 1px solid #ddd;

          background-color: #333;

          border-radius: 5px;

          margin-bottom: 10px;

        }

        

        .userInput,

        .assistantOutput,

        .systemInput {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #000;

          border: 1px solid #ddd;

          background-color: #f5f5f5;

          border-radius: 5px;

          margin-bottom: 10px;

        }

            

        .messageBox,

        .assistantOutput {

          white-space: pre-wrap;

          word-wrap: break-word; 

          padding: 10px;

          border: 1px solid #ddd;

          background-color: #f5f5f5;

          border-radius: 5px;

          margin-bottom: 10px;

          width: 100%;

          box-sizing: border-box;

        }

        

        .assistantMessage {

          color: #006400;

        }

        

        .systemMessage {

          color: #8b0000;

        }

        

        .userMessage {

          color: #0000ff;

        }

.messageBox pre {

  white-space: pre-wrap;

}

      `;

      cssInput.value = defaultThemeCss;

      try {

        userStyles.textContent = defaultThemeCss;

        document.body.classList.remove('darkTheme');

        alert('Default theme applied successfully!');

      } catch (e) {

        alert('Invalid CSS. Please check your input.');

      }

    });


    darkThemeButton.addEventListener('click', function() {

      var darkThemeCss = `

        body {

          background-color: #222;

          color: #fff;

        }


        .escapeKey {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #fff;

          border: 1px solid #ddd;

          background-color: #555;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .userInput,

        .assistantOutput,

        .systemInput {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #fff;

          border: 1px solid #ddd;

          background-color: #555;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .messageBox,

        .assistantOutput {

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          border: 1px solid #ddd;

          background-color: #555;

          border-radius: 5px;

          margin-bottom: 10px;

          width: 100%;

          box-sizing: border-box;

        }

        

        .assistantMessage {

          color: #fff;

        }

        

        .systemMessage {

          color: #fff;

        }

        

        .userMessage {

          color: #fff;

        }

.messageBox pre {

  white-space: pre-wrap;

}

      `;

      cssInput.value = darkThemeCss;

      userStyles.textContent = darkThemeCss;

      document.body.classList.add('darkTheme');



loadCustomThemeButton.addEventListener('click', function() {

    var customThemeCss = localStorage.getItem('customThemeCss');

    if (customThemeCss) {

      cssInput.value = customThemeCss;

      try {

        userStyles.textContent = customThemeCss;

        alert('Custom theme loaded successfully!');

      } catch (e) {

        alert('Invalid CSS. Please check your input.');

      }

    } else {

      alert('No custom theme found. Please save a custom theme first.');

    }

  });


  saveCustomThemeButton.addEventListener('click', function() {

    var customThemeCss = cssInput.value;

    localStorage.setItem('customThemeCss', customThemeCss);

    alert('Custom theme saved successfully!');

  });


    });

  </script>

</body>

</html>



6/5 Version


<!DOCTYPE html>

<html>

<head>

  <title>My Text File as HTML</title>

  <style id="userStyles">

    .escapeKey {

      display: inline-block;

      white-space: pre-wrap;

      word-wrap: break-word;

      padding: 10px;

      color: #fff;

      border: 1px solid #ddd;

      background-color: #333;

      border-radius: 5px;

      margin-bottom: 10px;

    }

    

    .userInput,

    .assistantOutput,

    .systemInput {

      display: inline-block;

      white-space: pre-wrap;

      word-wrap: break-word;

      padding: 10px;

      color: #000;

      border: 1px solid #ddd;

      background-color: #f5f5f5;

      border-radius: 5px;

      margin-bottom: 10px;

    }

        

    .messageBox {

      white-space: pre-wrap;

      word-wrap: break-word; 

      padding: 10px;

      border: 1px solid #ddd;

      background-color: #f5f5f5;

      border-radius: 5px;

      margin-bottom: 10px;

    }


  </style>

</head>

<body>

  <p>User Input: <span id="userInputPreview" class="userInput messageBox escapeKey" contenteditable="true"></span></p>

  <p>Selected Assistant Messages: <span id="selectedAssistantMessages" class="assistantOutput" contenteditable="true"></span></p>


  <p>System Input: <span id="systemInputPreview" class="systemInput messageBox escapeKey" contenteditable="true"></span></p>


  <p>This correctly displays and spans accordingly to theme.</p>

  <input type="text" id="userInput" placeholder="Enter your question">

  <input type="text" id="systemInput" placeholder="Enter system role content">

  <button onclick="sendUserInput()">Submit</button>

  <div id="output"></div>

  <input type="file" id="completionsFile" accept=".json" />

  <button onclick="loadCompletionsFromFile()">Load Completions</button>

  <button onclick="saveConversations()">Save Conversations</button>


  <div>

    <h2>Enter your CSS:</h2>

    <textarea id="cssInput" style="width: 100%; height: 200px;"></textarea>

    <button id="applyButton">Apply CSS</button>

    <button id="defaultThemeButton">Load Default Theme</button>

    <button id="darkThemeButton">Load Dark Theme</button>

    <button id="lightThemeButton">Load Light Theme</button>

    <button id="solarizedDarkButton">Load Solarized Dark</button>

    <button id="solarizedLightButton">Load Solarized Light</button>

  </div>


  <script>

    const apiKey = "sk-REDACTED";


    function callOpenAI(input) {

      const requestOptions = {

        method: 'POST',

        headers: {

          'Content-Type': 'application/json',

          'Authorization': `Bearer ${apiKey}`

        },

        body: JSON.stringify({

          model: 'gpt-3.5-turbo',

          messages: input

        })

      };


      fetch('https://api.openai.com/v1/chat/completions', requestOptions)

        .then(response => response.json())

        .then(data => {

          const response = data.choices[0];

          saveCompletion(input, response);

        })

        .catch(error => {

          console.error('Error:', error);

        });

    }


    function sendUserInput() {

      const userInput = document.getElementById('userInputPreview').textContent;

      const systemInput = document.getElementById('systemInputPreview').textContent;

      const selectedOutputs = appendOutputsToPrompt();


      // Append the selected outputs to the conversation

      const conversation = [

        { role: 'system', content: systemInput },

        ...selectedOutputs,

        { role: 'user', content: userInput }

      ];


      document.getElementById('userInput').value = userInput;

      document.getElementById('systemInput').value = systemInput;


      callOpenAI(conversation);

    }


    function saveCompletion(input, response) {

      const completion = {

        input: input,

        response: response

      };

      const previousCompletions = getCompletionsFromStorage();

      const updatedCompletions = [...previousCompletions, completion];

      setCompletionsToStorage(updatedCompletions);

      displayCompletions(updatedCompletions);

    }


    function getCompletionsFromStorage() {

      const completionsString = sessionStorage.getItem('completions');

      return completionsString ? JSON.parse(completionsString) : [];

    }


    function setCompletionsToStorage(completions) {

      sessionStorage.setItem('completions', JSON.stringify(completions));

    }


    function loadCompletionsFromFile() {

      const fileInput = document.getElementById('completionsFile');

      const file = fileInput.files[0];

      const reader = new FileReader();


      reader.onload = function(e) {

        const contents = e.target.result;

        const completions = JSON.parse(contents);

        setCompletionsToStorage(completions);

        displayCompletions(completions);

      };


      reader.readAsText(file);

    }


   


 function displayCompletions(conversations) {

  const outputElement = document.getElementById('output');

  outputElement.innerHTML = '';


  conversations.forEach((conversation, index) => {

    const input = conversation.input || [];

    const response = conversation.response || '';

    const assistantMessage = response.message?.content || '';


    let formattedCompletion = `<input type="checkbox" id="output${index}" onchange="updatePreview(event, ${index})">`;


    input.forEach((item) => {

      let content = item.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');

      formattedCompletion += `<div class="${item.role} messageBox"><pre>${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;

    });


   let assistantContent = assistantMessage.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');

formattedCompletion += `<div class="messageBox assistantOutput"><pre>Assistant: ${assistantContent}</pre></div><br>`;


    outputElement.innerHTML += formattedCompletion;

  });

}


    function appendOutputsToPrompt() {

  const completionArray = getCompletionsFromStorage();

  let appendedOutputs = [];

  let selectedAssistantMessages = '';


  completionArray.forEach((completion, index) => {

    if (document.getElementById(`output${index}`).checked) {

      const user = completion.input.find(item => item.role === 'user')?.content || '';

      const assistant = completion.response.message?.content || '';


      appendedOutputs.push({ role: 'user', content: user });

      appendedOutputs.push({ role: 'assistant', content: assistant });


      // Update the selected Assistant Messages

      selectedAssistantMessages += `<div class="assistantOutput messageBox"><pre>Assistant: ${assistant}</pre></div><br>`;

    }

  });


  // Update the selected Assistant Messages box content

  document.getElementById('selectedAssistantMessages').innerHTML = selectedAssistantMessages;


  return appendedOutputs;

}



    function updatePreview(event, index) {

      const checked = event.target.checked;

      const userInput = document.getElementById('userInputPreview');

      const systemInput = document.getElementById('systemInputPreview');


      if (checked) {

        const completion = getCompletionsFromStorage()[index];

        const input = completion.input || [];

        const user = input.find(item => item.role === 'user');

        const assistant = input.find(item => item.role === 'assistant');


        if (user) {

          userInput.textContent += ` User: ${user.content} |`;

        }

        if (assistant) {

          systemInput.textContent += ` Assistant: ${assistant.content} |`;

        }

      } else {

        const completion = getCompletionsFromStorage()[index];

        const input = completion.input || [];

        const user = input.find(item => item.role === 'user');

        const assistant = input.find(item => item.role === 'assistant');


        if (user) {

          userInput.textContent = userInput.textContent.replace(` User: ${user.content} |`, '');

        }

        if (assistant) {

          systemInput.textContent = systemInput.textContent.replace(` Assistant: ${assistant.content} |`, '');

        }

      }

    }


    function saveConversations() {

      const completions = getCompletionsFromStorage();

      const element = document.createElement('a');

      const fileContent = JSON.stringify(completions, null, 2);

      const file = new Blob([fileContent], {


type: 'application/json'});

      element.href = URL.createObjectURL(file);

      element.download = 'conversations.json';

      element.click();

    }


    const previousCompletions = getCompletionsFromStorage();

    displayCompletions(previousCompletions);


    document.getElementById('userInput').addEventListener('input', function() {

      const userInput = this.value;

      document.getElementById('userInputPreview').textContent = userInput;

    });


    document.getElementById('systemInput').addEventListener('input', function() {

      const systemInput = this.value;

      document.getElementById('systemInputPreview').textContent = systemInput;

    });


    var cssInput = document.getElementById('cssInput');

    var userStyles = document.getElementById('userStyles');

    var applyButton = document.getElementById('applyButton');

    var defaultThemeButton = document.getElementById('defaultThemeButton');

    var darkThemeButton = document.getElementById('darkThemeButton');

    var lightThemeButton = document.getElementById('lightThemeButton');

    var solarizedDarkButton = document.getElementById('solarizedDarkButton');

    var solarizedLightButton = document.getElementById('solarizedLightButton');

    

    applyButton.addEventListener('click', function() {

      var css = cssInput.value;

      try {

        userStyles.textContent = css;

        alert('CSS applied successfully!');

      } catch (e) {

        alert('Invalid CSS. Please check your input.');

      }

    });


    defaultThemeButton.addEventListener('click', function() {

      var defaultThemeCss = `

        body {

          background-color: #ffff;

          color: #000;

        }

        

        .userInput,

        .assistantOutput,

        .systemInput {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

        }

        

        .messageBox {

white-space: pre-wrap;

 word-wrap: break-word; 

          background-color: #f5f5f5;

          border: 1px solid #ddd;

          padding: 10px;

          margin-bottom: 10px;

          border-radius: 5px;

        }


        

      `;

      cssInput.value = defaultThemeCss;

      try {

        userStyles.textContent = defaultThemeCss;

        document.body.classList.remove('darkTheme', 'lightTheme', 'solarizedDark', 'solarizedLight');

        alert('Default theme applied successfully!');

      } catch (e) {

        alert('Invalid CSS. Please check your input.');

      }

    });


    darkThemeButton.addEventListener('click', function() {

      var darkThemeCss = `

        body {

          font-family: Arial, sans-serif;

          background-color: #222;

          color: #fff;

        }


        .escapeKey {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #fff;

          border: 1px solid #ddd;

          background-color: #333;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .userInput,

        .assistantOutput,

        .systemInput {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          border: 1px solid #444;

          background-color: #333;

          color: #fff;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .messageBox {

white-space: pre-wrap;

 word-wrap: break-word; 

          background-color: #444;

          border: 


1px solid #555;

          padding: 10px;

          margin-bottom: 10px;

          border-radius: 5px;

        }


        

          

        }

      `;


      cssInput.value = darkThemeCss;

      userStyles.textContent = darkThemeCss;

    });


    lightThemeButton.addEventListener('click', function() {

      var lightThemeCss = `

        body {

          background-color: #fff;

          color: #000;

          font-family: Arial, sans-serif;

        }

        

        .lightTheme .userInput,

        .lightTheme .assistantOutput,

        .lightTheme .systemInput {

          background-color: #ddd;

          color: #000;

        }


        

      `;

      cssInput.value = lightThemeCss;

      try {

        userStyles.textContent = lightThemeCss;

        document.body.classList.add('lightTheme');

        alert('Light theme applied successfully!');

      } catch (e) {

        alert('Invalid CSS. Please check your input.');

      }

    });


    solarizedDarkButton.addEventListener('click', function() {

      var solarizedDarkCss = `

        body {

          background-color: #002b36;

          color: #839496;

          font-family: Arial, sans-serif;

        }

        

        .solarizedDark .userInput,

        .solarizedDark .assistantOutput,

        .solarizedDark .systemInput {

          background-color: #073642;

          color: #839496;

        }


        

      `;

      cssInput.value = solarizedDarkCss;

      try {

        userStyles.textContent = solarizedDarkCss;

        document.body.classList.add('solarizedDark');

        alert('Solarized Dark theme applied successfully!');

      } catch (e) {

        alert('Invalid CSS. Please check your input.');

      }

    });


    solarizedLightButton.addEventListener('click', function() {

      var solarizedLightCss = `

        body {

          background-color: #fdf6e3;

          color: #657b83;

          font-family: Arial, sans-serif;

        }

        

        .solarizedLight .userInput,

        .solarizedLight .assistantOutput,

        .solarizedLight .systemInput {

          background-color: #eee8d5;

          color: #657b83;

        }


       

      `;

      cssInput.value = solarizedLightCss;

      try {

        userStyles.textContent = solarizedLightCss;

        document.body.classList.add('solarizedLight');

        alert('Solarized Light theme applied successfully!');

      } catch (e) {

        alert('Invalid CSS. Please check your input.');

      }

    });

    

  </script>

</body>

</html>


6/2 Version

<!DOCTYPE html>

<html>

<head>

  <title>My Text File as HTML</title>

</head>

<body>

  <p>User Input: <span id="userInputPreview"></span></p>

  <p>System Input: <span id="systemInputPreview"></span></p>


  <script>

    document.addEventListener('DOMContentLoaded', (event) => {

      fetch('https://34.94.226.228:3000/constant')

        .then(response => response.json())

        .then(data => {

          const constantValueElement = document.getElementById('constantValue');

          constantValueElement.textContent = data.constant;

        })

        .catch(error => {

          console.error('Error:', error);

        });

    });

  </script>


  <p>This is the content of my text file as a snapshot from 6/2.</p>

  <input type="text" id="userInput" placeholder="Enter your question">

  <input type="text" id="systemInput" placeholder="Enter system role content">

  <button onclick="sendUserInput()">Submit</button>

  <div id="output"></div>

  <input type="file" id="completionsFile" accept=".txt" />

  <button onclick="loadCompletionsFromFile()">Load Completions</button>

  <button onclick="saveConversations()">Save Conversations</button>


  <script>

    const apiKey = "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";


    function callOpenAI(input, systemInput) {

      const requestOptions = {

        method: 'POST',

        headers: {

          'Content-Type': 'application/json',

          'Authorization': `Bearer ${apiKey}`

        },

        body: JSON.stringify({

          model: 'gpt-3.5-turbo',

          messages: [

            { role: 'system', content: systemInput },

            { role: 'user', content: input }

          ]

        })

      };


      fetch('https://api.openai.com/v1/chat/completions', requestOptions)

        .then(response => response.json())

        .then(data => {

          const response = data.choices[0];

          saveCompletion(input, systemInput, response);

        })

        .catch(error => {

          console.error('Error:', error);

        });

    }


    function sendUserInput() {

      const userInput = document.getElementById('userInput').value;

      const systemInput = document.getElementById('systemInput').value;

      callOpenAI(userInput, systemInput);

    }


    function saveCompletion(input, systemInput, response) {

      const completion = {

        userInput: input,

        systemInput: systemInput,

        response: response

      };

      const previousCompletions = getCompletionsFromStorage();

      const updatedCompletions = [...previousCompletions, completion];

      setCompletionsToStorage(updatedCompletions);

      displayCompletions(updatedCompletions);

    }


    function getCompletionsFromStorage() {

      const completionsString = sessionStorage.getItem('completions');

      return completionsString ? JSON.parse(completionsString) : [];

    }


    function setCompletionsToStorage(completions) {

      sessionStorage.setItem('completions', JSON.stringify(completions));

    }


    function loadCompletionsFromFile() {

      const fileInput = document.getElementById('completionsFile');

      const file = fileInput.files[0];

      const reader = new FileReader();


      reader.onload = function(e) {

        const contents = e.target.result;

        const completions = JSON.parse(contents);

        setCompletionsToStorage(completions);

        displayCompletions(completions);

      };


      reader.readAsText(file);

    }


    function displayCompletions(conversations) {

      const outputElement = document.getElementById('output');

      outputElement.innerHTML = '';


      conversations.forEach((conversation, index) => {

        const userInput = conversation.userInput || '';

        const systemInput = conversation.systemInput || '';

        const response = conversation.response || '';

        const assistantMessage = response.message?.content || '';


        const formattedCompletion = `<input type="checkbox" id="output${index}" onchange="updatePreview(event, ${index})"><pre>User Input: ${userInput}</pre><pre>System Input: ${systemInput}</pre><pre>Assistant Response: ${assistantMessage}</pre><br>`;

        outputElement.innerHTML += formattedCompletion;

      });

    }


    function appendOutputsToPrompt() {

      const completionArray = getCompletionsFromStorage();

      let appendedOutputs = "";


      completionArray.forEach((completion, index) => {

        if (document.getElementById(`output${index}`).checked) {

          const userInput = completion.userInput || '';

          const systemInput = completion.systemInput || '';

          const assistantResponse = completion.response.message?.content || '';


          appendedOutputs += `User: ${userInput}\nAssistant: ${assistantResponse}\n`;

        }

      });


      return appendedOutputs;

    }


    function sendUserInput() {

      const userInput = document.getElementById('userInput').value;

      const systemInput = document.getElementById('systemInput').value;


      document.getElementById('userInputPreview').textContent = userInput;

      document.getElementById('systemInputPreview').textContent = systemInput;


      callOpenAI(userInput, systemInput);

    }


    function saveConversations() {

      const completions = getCompletionsFromStorage();

      const element = document.createElement('a');

      const fileContent = JSON.stringify(completions, null, 2);

      const file = new Blob([fileContent], {type: 'application/json'});

      element.href = URL.createObjectURL(file);

      element.download = 'conversations.json';

      element.click();

    }


    const previousCompletions = getCompletionsFromStorage();

    displayCompletions(previousCompletions);


    document.getElementById('userInput').addEventListener('input', function() {

      const userInput = this.value;

      document.getElementById('userInputPreview').textContent = userInput;

    });


    document.getElementById('systemInput').addEventListener('input', function() {

      const systemInput = this.value;

      document.getElementById('systemInputPreview').textContent = systemInput;

    });


    function updatePreview(event, index) {

      const checked = event.target.checked;

      const userInput = document.getElementById(`userInputPreview`);

      const systemInput = document.getElementById(`systemInputPreview`);

      

      if (checked) {

        const completion = getCompletionsFromStorage()[index];

        const user = completion.userInput || '';

        const assistant = completion.response.message?.content || '';

        userInput.textContent += ` User: ${user} |`;

        systemInput.textContent += ` Assistant: ${assistant} |`;

      } else {

        const completion = getCompletionsFromStorage()[index];

        userInput.textContent = userInput.textContent.replace(` User: ${completion.userInput} |`, '');

        systemInput.textContent = systemInput.textContent.replace(` Assistant: ${completion.response.message?.content} |`, '');

      }

    }

  </script>

</body>

</html>


<html>

<head>

  <title>My Text File as HTML</title>

  <style id="userStyles">

    .escapeKey {

      display: inline-block;

      white-space: pre-wrap;

      word-wrap: break-word;

      padding: 10px;

      color: #fff;

      border: 1px solid #ddd;

      background-color: #333;

      border-radius: 5px;

      margin-bottom: 10px;

    }

    

    .userInput,

    .assistantOutput,

    .systemInput {

      display: inline-block;

      white-space: pre-wrap;

      word-wrap: break-word;

      padding: 10px;

      color: #000;

      border: 1px solid #ddd;

      background-color: #f5f5f5;

      border-radius: 5px;

      margin-bottom: 10px;

    }

        

    .messageBox,

    .assistantOutput {

      white-space: pre-wrap;

      word-wrap: break-word; 

      padding: 10px;

      border: 1px solid #ddd;

      background-color: #f5f5f5;

      border-radius: 5px;

      margin-bottom: 10px;

      width: 100%;

      box-sizing: border-box;

    }

    

    .assistantMessage {

      color: #006400;

    }

    

    .systemMessage {

      color: #8b0000;

    }

    

    .userMessage {

      color: #0000ff;

    }

    

    .messageBox pre {

      white-space: pre-wrap;

    }

  </style>

</head>

<body>

  <p>User Input: <span id="userInputPreview" class="userInput messageBox escapeKey" contenteditable="true"></span></p>

  <p>Selected Assistant Messages: <span id="selectedAssistantMessages" class="assistantOutput" contenteditable="true"></span></p>

  <p>System Input: <span id="systemInputPreview" class="systemInput messageBox escapeKey" contenteditable="true"></span></p>

  <div>

    <label for="modelSelect">Select Model:</label>

    <select id="modelSelect">

      <option value=modelSelect>gpt-3.5-turbo</option>

      <option value=modelSelect>gpt-4</option>

      <option value=modelSelect>gpt-4-0314</option>

      <option value=modelSelect>gpt-4-32k</option>

      <option value=modelSelect>gpt-4-32k-0314</option>      

      <option value=modelSelect>gpt-3.5-turbo-0301</option>

    </select>

  </div>

  

  <p>This correctly displays and spans accordingly to theme.</p>

  <input type="text" id="userInput" placeholder="Enter your question">

  <input type="text" id="systemInput" placeholder="Enter system role content">

  <button onclick="sendUserInput()">Submit</button>

  <div id="output"></div>

  <input type="file" id="completionsFile" accept=".json, .txt" />

  <button onclick="loadCompletionsFromFile()">Load Completions</button>

  <button onclick="saveConversations()">Save Conversations</button>

  <div id="abstractionsSection">

    <h2>Abstractions</h2>

  </div>

  <div>

    <label for="abstractionName">Abstraction Name:</label>

    <input type="text" id="abstractionName" placeholder="Enter Abstraction Name">

  </div>

  <div>

    <label for="abstractionContent">Abstraction Content:</label>

    <textarea id="abstractionContent" placeholder="Enter Abstraction Content"></textarea>

  </div>

  <button id="saveAbstraction" onclick="saveAbstraction()">Save Abstraction</button>

  <button id="deleteAbstraction" onclick="deleteAbstraction()">Delete Abstraction</button>



  <div>

    <h2>Enter your CSS:</h2>

    <textarea id="cssInput" style="width: 100%; height: 200px;"></textarea>

    <button id="applyButton">Apply CSS</button>

    <button id="defaultThemeButton">Load Default Theme</button>

    <button id="darkThemeButton">Load Dark Theme</button>

    <button id="loadCustomThemeButton">Load Custom Theme</button>

    <button id="saveCustomThemeButton">Save Custom Theme</button>

  </div>


  <script>

    const apiKey = "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";

    const abstractions = {};


   function callOpenAI(input) {

       const modelSelect = document.getElementById('modelSelect');

    const selectedModel = modelSelect.value;

    const requestOptions = {

      method: 'POST',

      headers: {

        'Content-Type': 'application/json',

        'Authorization': `Bearer ${apiKey}`

      },

      body: JSON.stringify({

        model: modelSelect,

        messages: input

      })

    };


    fetch('https://api.openai.com/v1/chat/completions', requestOptions)

        .then(response => response.json())

        .then(data => {

          const response = data.choices[0];

          saveCompletion(input, response);

        })

        .catch(error => {

          console.error('Error:', error);

        });

    }


  function sendUserInput() {

    const userInputPreview = document.getElementById('userInputPreview');

    const systemInputPreview = document.getElementById('systemInputPreview');

    const userInput = userInputPreview.textContent.trim();

    const systemInput = systemInputPreview.textContent.trim();

    const selectedOutputs = appendOutputsToPrompt();

    

    const conversation = [

      { role: 'system', content: systemInput },

      ...selectedOutputs,

      { role: 'user', content: userInput }

    ];


    callOpenAI(conversation);

  }


    function saveCompletion(input, response) {

      const customThemeCss = input.find(item => item.role === 'user' && item.content !== undefined)?.content;


      const completion = {

        input: input,

        response: response,

        customThemeCss: customThemeCss

      };

      const previousCompletions = getCompletionsFromStorage();

      const updatedCompletions = [...previousCompletions, completion];

      setCompletionsToStorage(updatedCompletions);

      displayCompletions(updatedCompletions);

    }


    function getCompletionsFromStorage() {

      const completionsString = sessionStorage.getItem('completions');

      return completionsString ? JSON.parse(completionsString) : [];

    }


    function setCompletionsToStorage(completions) {

      sessionStorage.setItem('completions', JSON.stringify(completions));

    }


    function loadCompletionsFromFile() {

      const fileInput = document.getElementById('completionsFile');

      const file = fileInput.files[0];

      const reader = new FileReader();


      reader.onload = function (e) {

        const contents = e.target.result;

        const completionsData = JSON.parse(contents);


        if (Array.isArray(completionsData)) {

          // File without custom themes

          setCompletionsToStorage(completionsData);

          displayCompletions(completionsData);

        } else {

          // File with custom themes

          const completions = completionsData.conversations;

          setCompletionsToStorage(completions);

          displayCompletions(completions);


          // Load the custom theme if present in the data

          const customThemeCss = completionsData.customThemeCss;

          if (customThemeCss) {

            cssInput.value = customThemeCss;

            userStyles.textContent = customThemeCss;

            localStorage.setItem('customThemeCss', customThemeCss); // Store the custom theme in localStorage

            alert('Custom theme loaded successfully!');

          } else {

            cssInput.value = ''; // Clear the CSS input field

            userStyles.textContent = ''; // Clear the userStyles element

          }

        }

      };


      reader.readAsText(file);

    }


    function displayAbstractions() {

      const abstractionsSection = document.getElementById('abstractionsSection');

      const abstractionsList = Object.entries(abstractions).map(([name, content]) => {

        return `<div class="abstractionBox" onclick="editAbstraction('${name}', '${content}')">${name}</div>`;

      });

      abstractionsSection.innerHTML = `<h2>Abstractions</h2>${abstractionsList.join('')}`;

      document.getElementById('userInputPreview').innerHTML = `<span>${document.getElementById('userInput').value}</span>`;

      document.getElementById('selectedAssistantMessages').innerHTML = `<span>${document.getElementById('selectedAssistantMessages').textContent}</span>`;

      document.getElementById('systemInputPreview').innerHTML = `<span>${document.getElementById('systemInput').value}</span>`;

    }


    function editAbstraction(name, content) {

      document.getElementById('abstractionName').value = name;

      document.getElementById('abstractionContent').value = content;

    }


    function saveAbstraction() {

      const name = document.getElementById('abstractionName').value;

      const content = document.getElementById('abstractionContent').value;

      if (name && content) {

        abstractions[name] = content;

        displayAbstractions();

        clearAbstractionInputs();

      }

    }


    function deleteAbstraction() {

      const name = document.getElementById('abstractionName').value;

      if (name && abstractions.hasOwnProperty(name)) {

        delete abstractions[name];

        displayAbstractions();

        clearAbstractionInputs();

      }

    }


    function clearAbstractionInputs() {

      document.getElementById('abstractionName').value = '';

      document.getElementById('abstractionContent').value = '';

    }


    function displayCompletions(conversations) {

  const outputElement = document.getElementById('output');

  outputElement.innerHTML = '';


  conversations.forEach((conversation, index) => {

    const input = conversation.input || [];

    const response = conversation.response || '';

    const assistantMessage = response.message?.content || '';


    let formattedCompletion = `<input type="checkbox" id="output${index}" onchange="updatePreview(event, ${index})">`;


    input.forEach((item) => {

      let content = item.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');


      if (item.role === 'user') {

        // Check if the content matches any abstraction and replace it with a box

        Object.entries(abstractions).forEach(([name, abstractionContent]) => {

          const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

          content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

        });


        formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="userMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;

      } else if (item.role === 'assistant') {

        // Check if the content matches any abstraction and replace it with a box

        Object.entries(abstractions).forEach(([name, abstractionContent]) => {

          const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

          content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

        });


        formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="assistantMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;

      } else {

        // Check if the content matches any abstraction and replace it with a box

        Object.entries(abstractions).forEach(([name, abstractionContent]) => {

          const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

          content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

        });


        formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="systemMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;

      }

    });


    let assistantContent = assistantMessage.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');

    

    // Check if the assistant content matches any abstraction and replace it with a box

    Object.entries(abstractions).forEach(([name, abstractionContent]) => {

      const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

      assistantContent = assistantContent.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

    });

    

    formattedCompletion += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: ${assistantContent}</pre></div><br>`;


    outputElement.innerHTML += formattedCompletion;

  });

}



    function appendOutputsToPrompt() {

  const completionArray = getCompletionsFromStorage();

  const appendedOutputs = [];


  completionArray.forEach((completion, index) => {

    if (document.getElementById(`output${index}`).checked) {

      const input = completion.input || [];

      const output = completion.response || '';


      input.forEach((item) => {

        let content = item.content.replace(/<div class="escapeKey">([\s\S]*?)<\/div>/g, '$1'); // Remove escape key elements


        if (item.role === 'user' || item.role === 'assistant') {

          const abstractionRegex = /<div class="abstractionBox" onclick="editAbstraction\('(.*?)', '(.*?)'\)">(.*?)<\/div>/g;

          content = content.replace(abstractionRegex, '$2'); // Replace abstractions with their content

        }


        appendedOutputs.push({ role: item.role, content: content });

      });


      let assistantContent = output.message?.content || '';

      assistantContent = assistantContent.replace(/<div class="escapeKey">([\s\S]*?)<\/div>/g, '$1'); // Remove escape key elements


      appendedOutputs.push({ role: 'assistant', content: assistantContent });

    }

  });


  return appendedOutputs;

}



    function updatePreview(event, index) {

  const checked = event.target.checked;

  const userInput = document.getElementById('userInputPreview');

  const systemInput = document.getElementById('systemInputPreview');

  const selectedAssistantMessages = document.getElementById('selectedAssistantMessages');


  if (checked) {

    const completion = getCompletionsFromStorage()[index];

    const assistantMessage = completion.response.message?.content || '';


    // Append user input to the user input preview

    const user = completion.input.find(item => item.role === 'user');

    if (user) {

      let content = user.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');


      // Check if the content matches any abstraction and replace it with a box

      Object.entries(abstractions).forEach(([name, abstractionContent]) => {

        const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

        content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

      });


      userInput.innerHTML += `<div class="${user.role} messageBox assistantOutput"><pre class="userMessage">${user.role.charAt(0).toUpperCase() + user.role.slice(1)}: ${content}</pre></div>`;

    }


    // Append system input to the system input preview

    const system = completion.input.find(item => item.role === 'system');

    if (system) {

      let content = system.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');


      // Check if the content matches any abstraction and replace it with a box

      Object.entries(abstractions).forEach(([name, abstractionContent]) => {

        const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');

        content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);

      });


      systemInput.innerHTML += `<div class="${system.role} messageBox assistantOutput"><pre class="systemMessage">${system.role.charAt(0).toUpperCase() + system.role.slice(1)}: ${content}</pre></div>`;

    }


    // Append assistant message to the selected assistant messages

    selectedAssistantMessages.innerHTML += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: ${assistantMessage}</pre></div><br>`;

  } else {

    // Clear the selected Assistant Messages and reset the user/system input previews

    selectedAssistantMessages.innerHTML = '';

    userInput.textContent = '';

    systemInput.textContent = '';

  }

}



    function saveConversations() {

  const completions = getCompletionsFromStorage();


  const catShemPresets = {

    customCssThemes: [],

    abstractions: []

  };


  const data = {

    catShemPresets,

    conversations: completions,

  };


  const customThemeCss = localStorage.getItem('customThemeCss');

  if (customThemeCss) {

    data.catShemPresets.customCssThemes.push(customThemeCss);

  }


  const abstractionsData = JSON.parse(localStorage.getItem('abstractionsData'));

  if (abstractionsData) {

    data.catShemPresets.abstractions.push(abstractionsData);

  }


  const fileData = JSON.stringify(data, null, 2);

  const fileName = 'completions.json';

  const blob = new Blob([fileData], { type: 'application/json' });


  if (navigator.msSaveBlob) {

    // IE 10+

    navigator.msSaveBlob(blob, fileName);

  } else {

    const link = document.createElement('a');

    if (link.download !== undefined) {

      // Browsers that support HTML5 download attribute

      const url = URL.createObjectURL(blob);

      link.setAttribute('href', url);

      link.setAttribute('download', fileName);

      link.style.visibility = 'hidden';

      document.body.appendChild(link);

      link.click();

      document.body.removeChild(link);

    }

  }

}



    defaultThemeButton.addEventListener('click', function () {

      var defaultThemeCss = `

        body {

          background-color: #ffff;

          color: #000;

        }


        .escapeKey {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #fff;

          border: 1px solid #ddd;

          background-color: #333;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .userInput,

        .assistantOutput,

        .systemInput {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #000;

          border: 1px solid #ddd;

          background-color: #f5f5f5;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .messageBox,

        .assistantOutput {

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          border: 1px solid #ddd;

          background-color: #f5f5f5;

          border-radius: 5px;

          margin-bottom: 10px;

          width: 100%;

          box-sizing: border-box;

        }


        .assistantMessage {

          color: #006400;

        }


        .systemMessage {

          color: #8b0000;

        }


        .userMessage {

          color: #0000ff;

        }


        .messageBox pre {

          white-space: pre-wrap;

        }

      `;

      cssInput.value = defaultThemeCss;

      try {

        userStyles.textContent = defaultThemeCss;

        document.body.classList.remove('darkTheme');

        alert('Default theme applied successfully!');

      } catch (e) {

        alert('Invalid CSS. Please check your input.');

      }

    });


    darkThemeButton.addEventListener('click', function () {

      var darkThemeCss = `

        body {

          background-color: #222;

          color: #fff;

        }


        .escapeKey {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #fff;

          border: 1px solid #ddd;

          background-color: #555;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .userInput,

        .assistantOutput,

        .systemInput {

          display: inline-block;

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          color: #fff;

          border: 1px solid #ddd;

          background-color: #555;

          border-radius: 5px;

          margin-bottom: 10px;

        }


        .messageBox,

        .assistantOutput {

          white-space: pre-wrap;

          word-wrap: break-word;

          padding: 10px;

          border: 1px solid #ddd;

          background-color: #555;

          border-radius: 5px;

          margin-bottom: 10px;

          width: 100%;

          box-sizing: border-box;

        }


        .assistantMessage {

          color: #fff;

        }


        .systemMessage {

          color: #fff;

        }


        .userMessage {

          color: #fff;

        }


        .messageBox pre {

          white-space: pre-wrap;

        }

      `;

      cssInput.value = darkThemeCss;

      userStyles.textContent = darkThemeCss;

      document.body.classList.add('darkTheme');

    });


    loadCustomThemeButton.addEventListener('click', function () {

      var customThemeCss = localStorage.getItem('customThemeCss');

      if (customThemeCss) {

        cssInput.value = customThemeCss;

        try {

          userStyles.textContent = customThemeCss;

          alert('Custom theme loaded successfully!');

        } catch (e) {

          alert('Invalid CSS. Please check your input.');

        }

      } else {

        alert('No custom theme found. Please save a custom theme first.');

      }

    });


    saveCustomThemeButton.addEventListener('click', function () {

      var customThemeCss = cssInput.value;

      localStorage.setItem('customThemeCss', customThemeCss);

      alert('Custom theme saved successfully!');

    });


const userInputPreview = document.getElementById('userInputPreview');

userInputPreview.addEventListener('keydown', sendUserInput);



    // Display the stored completions on page load

    const storedCompletions = getCompletionsFromStorage();

    displayCompletions(storedCompletions);


    // Display the stored abstractions on page load

    displayAbstractions();

  </script>

</body>

</html>