redesign chat interface

src-tauri/Cargo.toml

···
 futures-util = "0.3.31"
 tokio = "1.47.1"
 dasp = { version = "0.11.0", features = ["all"] }
-keyring = { version = "3.6.3", features = ["apple-native", "windows-native", "sync-secret-service"] }
-strum = {version = "0.27.2", features = ["derive"] }
+keyring = { version = "3.6.3", features = [
+  "apple-native",
+  "windows-native",
+  "sync-secret-service",
+] }
+strum = { version = "0.27.2", features = ["derive"] }
 tauri-plugin-store = "2"
 tauri-plugin-http = "2"
 reqwest = { version = "0.12.23", features = ["json"] }
···
 tauri-plugin-positioner = "2"
 tauri-plugin-single-instance = "2"
 tauri-plugin-window-state = "2"
-

src-tauri/src/letta/mod.rs

···
         {
             Ok(api_key) => {
                 let base_url = self.base_url.lock().await.to_owned();
-                let agent_id = self.base_url.lock().await.to_owned();
+                let agent_id = self.agent_id.lock().await.to_owned();
+                let body = &json!({
+                    "messages": [
+                        {
+                            "role": "user",
+                            "content": [{
+                                "type": "text",
+                                "text": msg,
+                            }]
+                        }
+                    ],
+                    "stream_tokens": true
+                });
+
+                println!("body: {:?}", body);
+
                 let req = self
                     .http_client
                     .post(format!("{base_url}/v1/agents/{agent_id}/messages/stream"))
                     .header("Authorization", format!("Bearer {api_key}"))
                     .header("Content-Type", "application/json")
-                    .json(&json!({
-                        "messages": [
-                            {
-                                "role": "user",
-                                "content": [ msg ]
-                            }
-                        ],
-                        "stream_tokens": true
-                    }));
+                    .json(body);
 
                 let mut source =
                     EventSource::new(req).expect("could not convert request to event source");

src/app.css

···
   --color-rose-pine-highlight-high: hsl(248deg, 13%, 36%);
 
   --font-sans: "Recursive Variable";
+
+  --font-cursive: "Recursive Variable";
+  --font-cursive--font-variation-settings: "CRSV" 1, "CASL" 1;
+
+  --font-mono: "Recursive Variable";
+  --font-mono--font-variation-settings: "MONO" 1;
+
   --font-skeleton: "Flow Block";
 
   --animate-wiggle: wiggle 1s ease-in-out infinite;

src/lib/forms/dropdown.svelte

···
   }: DropdownProps = $props();
 
   let value = $state("loading");
-  let err = $state("")
+  let err = $state("");
   let isLoading = $derived(!Array.isArray(options));
 
   $effect(() => {
     Promise.allSettled([
       Promise.resolve(initialOption),
-      Promise.resolve(options)
+      Promise.resolve(options),
     ]).then(([init, opts]) => {
       if (init.status === "fulfilled") {
-        value = init.value
+        value = init.value;
       }
 
       if (opts.status === "rejected") {
-        err = opts.reason
+        err = opts.reason;
       }
 
-      isLoading = false
-    })
+      isLoading = false;
+    });
   });
 </script>
 
···
       bind:value
       class={[
         "bg-rose-pine-surface px-3 py-2 w-full flex-1 border-1 border-rose-pine-muted/20 rounded-sm focus:ring-2 ring-rose-pine-iris text-rose-pine-text placeholder:text-rose-pine-subtle",
-       isLoading && "font-skeleton animate-pulse", props.class,
-        
+        isLoading && "font-skeleton animate-pulse",
+        props.class,
       ]}
       onchange={(e) => onSelect(e.currentTarget.value)}
     >
···
             isLoading
               ? "icon-[svg-spinners--90-ring-with-bg] text-rose-pine-text"
               : value
-                ? "icon-[tabler--circle-check-filled] text-rose-pine-foam"
-                : "icon-[tabler--exclamation-circle] text-rose-pine-love"
+              ? "icon-[tabler--circle-check-filled] text-rose-pine-foam"
+              : "icon-[tabler--exclamation-circle] text-rose-pine-love",
           ]}
         ></span>
       </div>

src/lib/forms/input.svelte

···
   let value = $state("loading");
   let initial = $state("loading");
   let isDirty = $derived(value !== initial);
-  let isLoading = $state(typeof initialValue === "object" && "then" in initialValue)
+  let isLoading = $state(
+    typeof initialValue === "object" && "then" in initialValue,
+  );
 
   $effect(() => {
     Promise.resolve(initialValue)
-      .then(str => {value = str; initial = str; isLoading = false})
-  })
+      .then((str) => {
+        value = str;
+        initial = str;
+        isLoading = false;
+      });
+  });
 
   async function onsubmit() {
-    isLoading = true
+    isLoading = true;
     await Promise.resolve(onSave(value));
-    isLoading = false
+    isLoading = false;
   }
 </script>
 
···
       </button>
     {:else if required || isLoading}
       <div class="flex items-center justify-center">
-        <span class={[
-          "size-6",
-          isLoading
-            ? "icon-[svg-spinners--90-ring-with-bg] text-rose-pine-text"
-            : value
+        <span
+          class={[
+            "size-6",
+            isLoading
+              ? "icon-[svg-spinners--90-ring-with-bg] text-rose-pine-text"
+              : value
               ? "icon-[tabler--circle-check-filled] text-rose-pine-foam"
-              : "icon-[tabler--exclamation-circle-filled] text-rose-pine-love"
-        ]}></span>
+              : "icon-[tabler--exclamation-circle-filled] text-rose-pine-love",
+          ]}
+        ></span>
       </div>
     {/if}
   </form>

src/routes/+layout.svelte

···
 <script lang="ts">
   import "@fontsource-variable/recursive/full.css";
-  import "@fontsource/flow-block/400.css"
+  import "@fontsource/flow-block/400.css";
   import "../app.css";
 
   let { children } = $props();
 </script>
 
-<div class="flex flex-col-reverse justify-start gap-2 h-full">
+<div class="flex flex-col-reverse justify-start gap-3 h-full overflow-hidden">
   {@render children()}
 </div>

src/routes/+page.svelte

···
 <script lang="ts">
-  import { Channel, invoke } from "@tauri-apps/api/core";
-  import Warning from "$lib/warning.svelte";
+    import { Channel, invoke } from "@tauri-apps/api/core";
+  import { flip } from "svelte/animate";
+  import { fade, fly } from "svelte/transition";
 
   interface TranscriptionWord {
     word: string;
···
     end: number;
   }
 
+  interface Message {
+    from: "user" | "letta"
+    id: string,
+    content: string
+  }
+
+  const textPlaceholder = "Draft your message...";
+  const recordingPlaceholder = "Listening...";
+
+  const testMessages = [
+    {
+      id: "1",
+      from: "user",
+      content: "Hey, can you do this thing for me?"
+    },
+    {
+      id: "2",
+      from: "letta",
+      content: "Sure, I'll do that thing. Let me get started."
+    },
+    {
+      id: "3",
+      from: "letta",
+      content: "Alright, here are the results of me doing that thing that you asked me to do. I needed to fill a lot of space to test reflowing, so there are a lot of words in this message."
+    }
+  ] 
+
   let isRecording = $state(false);
+  let isDrafting = $state(false);
+  let isCompleting = $state(false)
+  let placeholder = $state(textPlaceholder);
   let draft = $state("");
-  let history = $state(new Array<string>());
-  let keyInvocation = $state(
-    invoke("has_secret", { name: "cartesia_api_key" }),
-  );
+  let history = $state(new Array<Message>());
 
-  $effect(() => {
+  async function handleCompose() {
     if (isRecording) {
+      // Cancel recording, but don't submit
+      await invoke("stop_stt")
+      isRecording = false;
+    } else if (isDrafting) {
+      // Clear draft and close dialog
+      draft = "";
+      isDrafting = false;
+    } else {
+      // Show textarea without starting STT
+      placeholder = textPlaceholder;
+      isDrafting = true;
+    }
+  }
+
+  async function handlePushToTalk() {
+    if (isDrafting) {
+      if (isRecording) {
+        await invoke("stop_stt")
+        isRecording = false;
+      }
+
+      const id = crypto.randomUUID();
+      invoke("start_llm_completion", { message: draft })
+
+      history.push({ id, from: "user", content: draft })
+
+      draft = ""
+      isDrafting = false
+      placeholder = textPlaceholder
+    } else if (!isRecording) {
+      placeholder = recordingPlaceholder
+      isDrafting = true;
+      isRecording = true;
+
       const onEvent = new Channel<TranscriptionWord>();
 
       onEvent.onmessage = (word) => {
···
       };
 
       invoke("start_stt", { onEvent });
-    } else {
-      invoke("stop_stt").then(() => {
-        if (draft) {
-          history.unshift(draft);
-          draft = "";
-        }
-      });
     }
-  });
+  }
+
+  function handleClear() {
+    history = []
+  }
 </script>
 
-<div
-  class="p-2 bg-rose-pine-base rounded-md flex items-center justify-between text-xs shadow-xl"
->
-  <a
-    href="/settings"
-    class="flex items-center gap-1 group text-rose-pine-subtle hover:text-rose-pine-iris"
+<!-- Push-to-talk, draft input, and nav -->
+<div class="flex items-end justify-end gap-2">
+  {#if isDrafting}
+    <div class="grid grid-cols-1 flex-1 min-h-full text-rose-pine-text">
+      <textarea
+        bind:value={draft}
+        {placeholder}
+        transition:fly={{ y: 20}}
+        contenteditable="true"
+        class="p-3 col-start-1 col-end-2 row-start-1 row-end-2 font-cursive text-rose-pine-text bg-rose-pine-surface rounded-md border border-rose-pine-muted/20 placeholder-rose-pine-muted focus:ring-0 focus:border-rose-pine-iris -z-10 leading-tight resize-none text-wrap overflow-hidden"
+      >{draft}</textarea>
+      <p
+        class="p-3 font-cursive leading-tight invisible border-2 grid whitespace-pre-wrap col-start-1 col-end-2 row-start-1 row-end-2 wrap-anywhere"
+        aria-hidden="true"
+      >
+        {draft}
+      </p>
+    </div>
+  {/if}
+  <div
+    class={[
+      "col-start-2 grid grid-cols-2 rounded-md border border-rose-pine-muted/20",
+    ]}
   >
-    <span class="icon-[tabler--settings-filled] size-4"></span>
-    <span class="leading-none group-[:hover]:underline">
-      Settings
-    </span>
-  </a>
-</div>
-
-<div class="bg-rose-pine-base rounded-md p-3 flex gap-3 shadow-xl">
-  {#await keyInvocation}
-    <div class="flex items-center justify-center w-full">
+    <button
+      class={[
+        "p-4 col-span-3 flex items-center justify-center transition rounded-t-md border-b-2 border-rose-pine-muted/20",
+        isDrafting
+          ? isRecording
+            ? "text-rose-pine-highlight-low"
+            : "text-rose-pine-subtle hover:bg-rose-pine-foam hover:text-rose-pine-highlight-low"
+          : "bg-rose-pine-surface text-rose-pine-subtle hover:bg-rose-pine-love hover:text-rose-pine-highlight-low",
+        isRecording ? "animate-pulse bg-rose-pine-love" : "bg-rose-pine-surface"
+      ]}
+      onclick={handlePushToTalk}
+      aria-label="push-to-talk"
+    >
       <span
-        class="icon-[svg-spinners--180-ring-with-bg] text-rose-pine-muted"
+        class={[
+          "size-6",
+          isDrafting
+            ? "icon-[tabler--send]"
+            : "icon-[tabler--microphone]",
+          isRecording && "animate-wiggle"
+        ]}
       ></span>
-    </div>
-  {:then hasKey}
-    {#if hasKey}
-      <button
+    </button>
+    <button
+      class={[
+        "p-2 flex items-center justify-center bg-rose-pine-surface text-rose-pine-subtle transition hover:text-rose-pine-highlight-low rounded-bl-md border-r-[1px] border-rose-pine-muted/20",
+        isDrafting
+          ? isRecording
+            ? "hover:bg-rose-pine-gold"
+            : "hover:bg-rose-pine-rose"
+          : "hover:bg-rose-pine-foam",
+      ]}
+      aria-label="compose message"
+      onclick={handleCompose}
+    >
+      <span
         class={[
-          "p-4 w-full flex items-center justify-center rounded-2xl transition",
-          isRecording
-            ? "bg-rose-pine-rose text-rose-pine-highlight-low"
-            : "bg-rose-pine-surface text-rose-pine-subtle hover:bg-rose-pine-overlay hover:text-rose-pine-text",
+          "size-4",
+          isDrafting
+            ? isRecording
+              ? "icon-[tabler--player-pause-filled]"
+              : "icon-[tabler--trash-x-filled]"
+            : "icon-[tabler--edit]",
         ]}
-        onclick={() => isRecording = !isRecording}
-        aria-label="push-to-talk"
-      >
-        {#if isRecording}
-          <span
-            class="icon-[tabler--microphone-off] size-6 animate-wiggle"
-          ></span>
-        {:else}
-          <span class="icon-[tabler--microphone] size-6"></span>
-        {/if}
-      </button>
-    {:else}
-      <Warning>
-        Set your Cartesia API key in <a href="/settings" class="underline"
-        >Settings</a> to get started
-      </Warning>
-    {/if}
-  {:catch err}
-    <p>{err}</p>
-  {/await}
+      ></span>
+    </button>
+    <button
+      class="p-2 flex items-center justify-center bg-rose-pine-surface text-rose-pine-subtle transition border-x-[1px] border-rose-pine-muted/20 hover:text-rose-pine-highlight-low not-disabled:hover:bg-rose-pine-pine disabled:text-rose-pine-muted/50"
+      aria-label="clear conversation"
+      disabled={history.length === 0}
+      onclick={handleClear}
+    >
+      <span
+        class="size-4 icon-[tabler--message-x]"
+      ></span>
+    </button>
+    <a
+      href="/settings"
+      class="p-2 flex items-center justify-center bg-rose-pine-surface text-rose-pine-subtle rounded-br-md transition border-l-[1px] border-rose-pine-muted/20 hover:bg-rose-pine-iris hover:text-rose-pine-highlight-low"
+      aria-label="settings"
+    >
+      <span class="icon-[tabler--settings-filled] size-4"></span>
+    </a>
+  </div>
 </div>
 
-{#if draft}
-  <div
-    class="bg-rose-pine-surface text-rose-pine-subtle italic rounded-md p-3 flex gap-3 shadow-xl"
-  >
-    {draft}
-  </div>
-{/if}
+<!-- Chat history -->
+
+<div class="grid row-span-full">
+  {#each history as message, i (message.id)}
+    <div
+      animate:flip
+      in:fly={{x: message.from === "user" ? 20 : -20 }} 
+      out:fade
+    class={[
+      "flex",
+      i !== 0 && history[i - 1].from === "letta" && message.from === "letta" ? "mt-1" : "mt-3",
+      message.from === "user"
+        ? "pl-6 justify-end" : "pr-6 justify-start",
+    ]}>
+      <div class={[
+          "py-3 px-4 rounded-t-xl leading-snug border border-rose-pine-muted/20",
+          message.from === "user"
+            ? "bg-rose-pine-iris font-cursive text-rose-pine-highlight-low rounded-bl-xl italic font-semibold"
+            : "bg-rose-pine-base rounded-br-xl"
+        ]}
+      >
+        {message.content}
+      </div>
+    </div>
+  {/each}
 
-{#each history as text}
-  <div class="bg-rose-pine-base rounded-md p-3 flex gap-3 shadow-xl">
-    {text}
-  </div>
-{/each}
+  {#if isCompleting}
+    <div class="flex">
+      <div class="mt-1 px-3 flex items-center justify-start bg-rose-pine-base text-rose-pine-subtle rounded-t-xl rounded-br-xl">
+        <span class="icon-[svg-spinners--3-dots-move] size-6"></span>
+      </div>
+    </div>
+  {/if}
+</div>

src/routes/settings/letta-settings.svelte

···
   let baseUrl = $state(fetchBaseUrl());
   let agentId = $state(fetchAgentId());
 
-  let lettaAgents: Promise<LettaAgentOption[]> = $state(Promise.resolve([]));
+  let lettaAgents: Promise<LettaAgentOption[]> = $state(
+    Promise.resolve([]),
+  );
 
   let allowAgentEdit = $derived.by(async () => {
     const [hasKey, url] = await Promise.all([
···
 
     const canEdit = Boolean(hasKey && url);
 
-    if (canEdit) lettaAgents = getLettaAgents()
+    if (canEdit) lettaAgents = getLettaAgents();
 
-    return canEdit
+    return canEdit;
   });
 </script>