petite / src / routes / +page.svelte

<script lang="ts">
  import type { LettaCompletionMessage } from "$lib/rust/LettaCompletionMessage";
  import { Channel, invoke } from "@tauri-apps/api/core";
  import { flip } from "svelte/animate";
  import { fade, fly } from "svelte/transition";

  interface TranscriptionWord {
    word: string;
    start: number;
    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 placeholder = $state(textPlaceholder);
  let isRecording = $state(false);
  let isDrafting = $state(false);
  let draft = $state("");
  let isCompleting = $state(false)
  let agentResponse = $state("")
  let history = $state(new Array<Message>());

  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 onEvent = new Channel<LettaCompletionMessage>()

      let lastType = ""
      onEvent.onmessage = (e) => {
        if (e.message_type !== lastType && agentResponse) {
          let content = agentResponse

          agentResponse = ""
          lastType = e.message_type;

          history.push({
            id: crypto.randomUUID(),
            from: "letta",
            content
          })
        } else if (!lastType) {
          lastType = e.message_type
        }

        switch (e.message_type) {
          case "assistant_message":
            agentResponse += e.content.map(c => c.type === "text" ? c.text : "").join("")
            break;
          case "reasoning_message":
            agentResponse += e.reasoning
            break;
          default:
            console.log("unsupported message:", e)
        }
      }

      (async function () {
        isCompleting = true;
        await invoke("start_llm_completion", { message: draft, onEvent })
        isCompleting = false;
      })();

      const id = crypto.randomUUID();
      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) => {
        draft += word.word;
      };

      invoke("start_stt", { onEvent });
    }
  }

  function handleClear() {
    history = []
  }
</script>

<!-- 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",
    ]}
  >
    <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={[
          "size-6",
          isDrafting
            ? "icon-[tabler--send]"
            : "icon-[tabler--microphone]",
          isRecording && "animate-wiggle"
        ]}
      ></span>
    </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={[
          "size-4",
          isDrafting
            ? isRecording
              ? "icon-[tabler--player-pause-filled]"
              : "icon-[tabler--trash-x-filled]"
            : "icon-[tabler--edit]",
        ]}
      ></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>

<!-- 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}

  {#if agentResponse && history.length > 0}
    <div
      in:fly={{x: -20 }} 
    class={[
      "flex",
      history[history.length - 1].from === "letta" ? "mt-1" : "mt-3",
      "pr-6 justify-start",
    ]}>
      <div class={[
          "py-3 px-4 rounded-t-xl leading-snug border border-rose-pine-muted/20",
          "bg-rose-pine-base rounded-br-xl"
        ]}
      >
        {agentResponse}
      </div>
    </div>
  {/if}

  {#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>