Update ui

src/App.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Canvas from './lib/Canvas.svelte';
   import Editor from './lib/Editor.svelte';
-  import LLM from './lib/LLM.svelte';
 
   let shaderSource = `
 #version 300 es
@@ -46,24 +45,12 @@ void main() {
 
 <main>
   <Canvas {shaderSource} />
-  <div id="llm-editor-container">
-    <Editor bind:shaderSource />
-    <LLM bind:shaderSource />
-  </div>
+  <Editor bind:shaderSource />
 </main>
 
 <style>
   :global(body) {
     height: 100%;
     width: 100%;
   }
-  #llm-editor-container {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 25%;
-    min-width: 300pt;
-    z-index: 999;
-  }
 </style>

src/lib/CodeEditor.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { AceEditor } from 'svelte-ace';
+  import 'brace/mode/glsl';
+  import 'brace/theme/pastel_on_dark';
+
+  // Module state.
+  export let shaderSource: string;
+</script>
+
+<AceEditor
+  width="100%"
+  height="400px"
+  lang="glsl"
+  theme="pastel_on_dark"
+  bind:value={shaderSource}
+/>

src/lib/Editor.svelte

@@ -1,16 +1,31 @@
 <script lang="ts">
-  import { AceEditor } from 'svelte-ace';
-  import 'brace/mode/glsl';
-  import 'brace/theme/pastel_on_dark';
+  import CodeEditor from './CodeEditor.svelte';
+  import LLM from './LLM.svelte';
+
+  // TODO:
+  // - Make the editor container collapsible to the left
+  // - Add a reset button
+  // - Move the revert logic here instead?
+  //   Needs to be matched with the messages though
 
   // Module state.
   export let shaderSource: string;
 </script>
 
-<AceEditor
-  width="100%"
-  height="400px"
-  lang="glsl"
-  theme="pastel_on_dark"
-  bind:value={shaderSource}
-/>
+<div id="editor-container">
+  <CodeEditor bind:shaderSource />
+  <LLM bind:shaderSource />
+</div>
+
+<style>
+  #editor-container {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 25%;
+    min-width: 300pt;
+    z-index: 999;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+</style>

src/lib/LLM.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
   import { OpenAI } from 'openai';
-  import { AssistantMessage, UserMessage, fetchLLMResponse, getInitialMessages } from './llm';
   import { Ok } from 'ts-results';
+  import { AssistantMessage, UserMessage, fetchLLMResponse, getInitialMessages } from './llm';
+  import spinner from '../assets/spinner.gif';
+
+  const availableModels = ['gpt-4-turbo', 'gpt-3.5-turbo'];
 
   // Module state.
   let openai: OpenAI;
   let apiKey: string;
   let llmModel: string;
   let messages = getInitialMessages();
   let messageInput: HTMLTextAreaElement;
+  let messageSpinner: HTMLImageElement;
   export let shaderSource: string;
 
   function onApikeyChange(event: { target: { value: string } }): void {
@@ -27,7 +31,9 @@
   }
 
   async function sendUserMessage(userMessage: string): Promise<void> {
+    // TODO: svelte has some await directives to handle this toggling instead
     messageInput.readOnly = true;
+    messageSpinner.style.visibility = 'visible';
     const llmResponse = await fetchLLMResponse(
       openai,
       llmModel,
@@ -36,6 +42,7 @@
       userMessage
     );
     messageInput.readOnly = false;
+    messageSpinner.style.visibility = 'hidden';
     messageInput.value = '';
     llmResponse.andThen((llmResponse) => {
       shaderSource = llmResponse.shaderSource;
@@ -74,22 +81,29 @@
         {/if}
       {/each}
     </div>
-    <textarea
-      id="llm-msg-input"
-      bind:this={messageInput}
-      placeholder="Enter message here"
-      on:keydown={onMessageInputKeyDown}
-    />
+
+    <div id="llm-msg-input-container">
+      <textarea
+        id="llm-msg-input"
+        bind:this={messageInput}
+        placeholder="Enter message here"
+        on:keydown={onMessageInputKeyDown}
+      />
+      <img id="llm-msg-input-spinner" bind:this={messageSpinner} src={spinner} alt="spinner" />
+    </div>
+
     <select bind:value={llmModel}>
-      <option value="gpt-4-turbo">gpt-4-turbo</option>
-      <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
+      {#each availableModels as model}
+        <option value={model}>{model}</option>
+      {/each}
     </select>
   {/if}
 </div>
 
 <style>
   #llm-api-key {
     width: 100%;
+    box-sizing: border-box;
   }
 
   #llm-msg-history {
@@ -119,9 +133,23 @@
     border-radius: 1em 1em 1em 1em;
   }
 
+  #llm-msg-input-container {
+    position: relative;
+  }
+
   #llm-msg-input {
-    margin-top: 25px;
     width: 100%;
     height: 100px;
+    resize: none;
+    box-sizing: border-box;
+  }
+
+  #llm-msg-input-spinner {
+    position: absolute;
+    width: 1em;
+    height: 1em;
+    bottom: 1em;
+    right: 1em;
+    visibility: hidden;
   }
 </style>