From e46cbeb2bf6d2d9064ca1cb5ee1bda7bc8eae27e Mon Sep 17 00:00:00 2001
From: Benson Wong <mostlygeek+git@gmail.com>
Date: Sun, 28 Jun 2026 04:16:23 +0000
Subject: [PATCH] ui: refocus message input after chat generation completes

- Add ref prop to ExpandableTextarea to expose the underlying textarea
- Track streaming state transitions in ChatInterface and refocus the
  input via $effect when isStreaming flips to false
---
 .../src/components/playground/ChatInterface.svelte     | 10 ++++++++++
 .../components/playground/ExpandableTextarea.svelte    |  3 +++
 2 files changed, 13 insertions(+)

diff --git a/ui-svelte/src/components/playground/ChatInterface.svelte b/ui-svelte/src/components/playground/ChatInterface.svelte
index f3471b75..6b0e260b 100644
--- a/ui-svelte/src/components/playground/ChatInterface.svelte
+++ b/ui-svelte/src/components/playground/ChatInterface.svelte
@@ -37,6 +37,7 @@
   let reasoningStartTime = $state<number>(0);
   let abortController = $state<AbortController | null>(null);
   let messagesContainer: HTMLDivElement | undefined = $state();
+  let inputRef: HTMLTextAreaElement | null = $state(null);
   let showSettings = $state(false);
   let attachedImages = $state<string[]>([]);
   let fileInput = $state<HTMLInputElement | null>(null);
@@ -49,6 +50,14 @@
     playgroundStores.chatStreaming.set(isStreaming);
   });
 
+  let wasStreaming = $state(false);
+  $effect(() => {
+    if (wasStreaming && !isStreaming) {
+      inputRef?.focus();
+    }
+    wasStreaming = isStreaming;
+  });
+
   function handleMessagesScroll() {
     if (!messagesContainer) return;
     const { scrollTop, scrollHeight, clientHeight } = messagesContainer;
@@ -454,6 +463,7 @@
         />
 
         <ExpandableTextarea
+          bind:ref={inputRef}
           bind:value={userInput}
           placeholder="Type a message..."
           rows={3}
diff --git a/ui-svelte/src/components/playground/ExpandableTextarea.svelte b/ui-svelte/src/components/playground/ExpandableTextarea.svelte
index e7a287e7..e049b33c 100644
--- a/ui-svelte/src/components/playground/ExpandableTextarea.svelte
+++ b/ui-svelte/src/components/playground/ExpandableTextarea.svelte
@@ -6,6 +6,7 @@
 
   interface Props {
     value: string;
+    ref?: HTMLTextAreaElement | null;
     placeholder?: string;
     rows?: number;
     disabled?: boolean;
@@ -14,6 +15,7 @@
 
   let {
     value = $bindable(),
+    ref = $bindable(null),
     placeholder = "",
     rows = 3,
     disabled = false,
@@ -57,6 +59,7 @@
 <div class="group relative flex min-h-0 flex-1 items-stretch">
   <Textarea
     class="resize-none pr-10"
+    bind:ref
     {placeholder}
     {rows}
     bind:value