Improve chat composer typing performance

web/src/App.tsx

@@ -7,7 +7,6 @@ import {
   LoaderCircle,
   Menu,
   MessageSquare,
-  Paperclip,
   Pencil,
   Plus,
   Rabbit,
@@ -23,6 +22,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Separator } from "@/components/ui/separator";
 import { AuthScreen } from "@/components/auth/auth-screen";
 import { ChatAttachmentList } from "@/components/chat/chat-attachment-list";
+import { ChatComposer } from "@/components/chat/chat-composer";
 import { ChatMessagesPanel } from "@/components/chat/chat-messages-panel";
 import { SearchResultsPanel } from "@/components/search/search-results-panel";
 import { SybilCharacter } from "@/components/sybil-character";
@@ -925,7 +925,7 @@ export default function App() {
   const [pendingChatStates, setPendingChatStates] = useState<Record<string, PendingChatState>>({});
   const [runningSearchStates, setRunningSearchStates] = useState<Record<string, SearchDetail>>({});
   const [activeRuns, setActiveRuns] = useState<ActiveRunsState>(EMPTY_ACTIVE_RUNS);
-  const [composer, setComposer] = useState("");
+  const [composerDraftRevision, setComposerDraftRevision] = useState(0);
   const [pendingAttachments, setPendingAttachments] = useState<ChatAttachment[]>([]);
   const [isComposerDropActive, setIsComposerDropActive] = useState(false);
   const [provider, setProvider] = useState<Provider>("openai");
@@ -977,6 +977,7 @@ export default function App() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const dragDepthRef = useRef(0);
   const pendingAttachmentsRef = useRef<ChatAttachment[]>([]);
+  const composerDraftRef = useRef("");
   const selectedItemRef = useRef<SidebarSelection | null>(null);
   const pendingTitleGenerationRef = useRef<Set<string>>(new Set());
   const chatStreamAbortRefs = useRef<Map<string, AbortController>>(new Map());
@@ -1050,13 +1051,10 @@ export default function App() {
     });
   };
 
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    const textarea = document.getElementById("composer-input") as HTMLTextAreaElement | null;
-    if (!textarea) return;
-    textarea.style.height = "0px";
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  }, [composer]);
+  const replaceComposerDraft = (value: string) => {
+    composerDraftRef.current = value;
+    setComposerDraftRevision((current) => current + 1);
+  };
 
   useEffect(() => {
     pendingAttachmentsRef.current = pendingAttachments;
@@ -1096,7 +1094,7 @@ export default function App() {
     }
     searchRunAbortRefs.current.clear();
     searchRunCountersRef.current.clear();
-    setComposer("");
+    replaceComposerDraft("");
     setPendingAttachments([]);
     setIsChatSettingsOpen(false);
     setIsSavingChatSettings(false);
@@ -2967,7 +2965,7 @@ export default function App() {
     try {
       const chat = await createChatFromSearch(sourceSearch.id);
       setDraftKind(null);
-      setComposer("");
+      replaceComposerDraft("");
       setPendingAttachments([]);
       setChats((current) => {
         const withoutExisting = current.filter((existing) => existing.id !== chat.id);
@@ -3126,7 +3124,7 @@ export default function App() {
       });
 
       setDraftKind(null);
-      setComposer("");
+      replaceComposerDraft("");
       setPendingAttachments([]);
       setIsQuickQuestionOpen(false);
       setProvider(selection.provider);
@@ -3167,8 +3165,8 @@ export default function App() {
     }
   };
 
-  const handleSend = async () => {
-    const content = composer.trim();
+  const handleSend = async (draft: string) => {
+    const content = draft.trim();
     const attachments = pendingAttachments;
     if ((!content && !attachments.length) || isActiveSelectionSending) return;
     if (isSearchMode && attachments.length) {
@@ -3176,7 +3174,7 @@ export default function App() {
       return;
     }
 
-    setComposer("");
+    replaceComposerDraft("");
     setPendingAttachments([]);
     setError(null);
 
@@ -3201,7 +3199,7 @@ export default function App() {
       }
 
       if (!sentAsSearch && (!sentTarget || isCurrentSelection(sentTarget))) {
-        setComposer(content);
+        replaceComposerDraft(content);
         setPendingAttachments(attachments);
       }
 
@@ -3246,11 +3244,11 @@ export default function App() {
 
   return (
     <div className="app-grid-surface app-safe-frame h-full">
-      <div className="flex h-full w-full overflow-hidden bg-transparent md:gap-2">
+      <div className="workspace-shell flex h-full w-full overflow-hidden bg-transparent md:gap-2">
         {isMobileSidebarOpen ? (
           <button
             type="button"
-            className="fixed inset-0 z-30 bg-black/70 backdrop-blur-sm md:hidden"
+            className="workspace-sidebar-backdrop fixed inset-0 z-30 bg-black/70 backdrop-blur-sm md:hidden"
             onClick={() => setIsMobileSidebarOpen(false)}
             aria-label="Close sidebar"
           />
@@ -3258,7 +3256,7 @@ export default function App() {
 
         <aside
           className={cn(
-            "glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none md:rounded-2xl md:border",
+            "workspace-sidebar glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none md:rounded-2xl md:border",
             isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
           )}
         >
@@ -3401,7 +3399,7 @@ export default function App() {
         </aside>
 
         <main
-          className="glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden border-violet-300/18 md:touch-auto md:rounded-2xl md:border"
+          className="workspace-content glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden border-violet-300/18 md:touch-auto md:rounded-2xl md:border"
           onTouchStart={handleMobileWorkspaceTouchStart}
           onTouchMove={handleMobileWorkspaceTouchMove}
           onTouchEnd={handleMobileWorkspaceTouchEnd}
@@ -3413,7 +3411,7 @@ export default function App() {
                 type="button"
                 size="icon"
                 variant="ghost"
-                className="-ml-1 h-8 w-8 md:hidden"
+                className="workspace-sidebar-trigger -ml-1 h-8 w-8 md:hidden"
                 onClick={() => setIsMobileSidebarOpen(true)}
                 aria-label="Open sidebar"
               >
@@ -3521,52 +3519,22 @@ export default function App() {
                   </div>
                 </div>
               ) : null}
-              <Textarea
-                id="composer-input"
-                rows={1}
-                value={composer}
-                onInput={(event) => {
-                  const textarea = event.currentTarget;
-                  textarea.style.height = "0px";
-                  textarea.style.height = `${textarea.scrollHeight}px`;
-                  setComposer(textarea.value);
-                }}
+              <ChatComposer
+                draftRef={composerDraftRef}
+                draftRevision={composerDraftRevision}
+                error={error}
+                isSearchMode={isSearchMode}
+                isSending={isActiveSelectionSending}
+                pendingAttachmentCount={pendingAttachments.length}
+                attachmentButtonDisabled={
+                  isActiveSelectionSending || pendingAttachments.length >= MAX_CHAT_ATTACHMENTS
+                }
+                onOpenAttachmentPicker={handleOpenAttachmentPicker}
                 onPaste={(event) => {
                   void handleComposerPaste(event);
                 }}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter" && !event.shiftKey) {
-                    event.preventDefault();
-                    void handleSend();
-                  }
-                }}
-                placeholder={isSearchMode ? "Search the web" : "Enter prompt..."}
-                className="max-h-40 min-h-0 resize-none overflow-y-auto border-0 bg-transparent px-3 py-3 text-base text-violet-50 shadow-none placeholder:text-violet-200/45 focus-visible:ring-0"
-                disabled={isActiveSelectionSending}
+                onSend={handleSend}
               />
-              <div className={cn("flex items-center gap-3 px-2 pb-1", error ? "justify-between" : "justify-end")}>
-                {error ? <p className="min-w-0 truncate text-xs text-rose-300">{error}</p> : null}
-                {!isSearchMode ? (
-                  <Button
-                    className="h-10 w-10 rounded-lg"
-                    onClick={handleOpenAttachmentPicker}
-                    size="icon"
-                    variant="secondary"
-                    disabled={isActiveSelectionSending || pendingAttachments.length >= MAX_CHAT_ATTACHMENTS}
-                    aria-label="Attach files"
-                  >
-                    <Paperclip className="h-4 w-4" />
-                  </Button>
-                ) : null}
-                <Button
-                  className="h-10 w-10 rounded-lg"
-                  onClick={() => void handleSend()}
-                  size="icon"
-                  disabled={isActiveSelectionSending || (!composer.trim() && !pendingAttachments.length)}
-                >
-                  {isSearchMode ? <Search className="h-4 w-4" /> : <SendHorizontal className="h-4 w-4" />}
-                </Button>
-              </div>
             </div>
           </footer>
         </main>

web/src/components/chat/chat-composer.tsx

@@ -0,0 +1,140 @@
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
+import { Paperclip, Search, SendHorizontal } from "lucide-preact";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+type MutableValueRef = {
+  current: string;
+};
+
+type Props = {
+  draftRef: MutableValueRef;
+  draftRevision: number;
+  error: string | null;
+  isSearchMode: boolean;
+  isSending: boolean;
+  pendingAttachmentCount: number;
+  attachmentButtonDisabled: boolean;
+  onOpenAttachmentPicker: () => void;
+  onPaste: (event: ClipboardEvent) => void;
+  onSend: (draft: string) => void | Promise<void>;
+};
+
+const MIRROR_SENTINEL = "\u200b";
+const HAS_NON_WHITESPACE = /\S/;
+
+export function ChatComposer({
+  draftRef,
+  draftRevision,
+  error,
+  isSearchMode,
+  isSending,
+  pendingAttachmentCount,
+  attachmentButtonDisabled,
+  onOpenAttachmentPicker,
+  onPaste,
+  onSend,
+}: Props) {
+  // The draft stays in the DOM/ref so typing never schedules a render of the workspace transcript.
+  const textareaContainerRef = useRef<HTMLDivElement>(null);
+  const mirrorRef = useRef<HTMLDivElement>(null);
+  const [hasDraft, setHasDraft] = useState(() => HAS_NON_WHITESPACE.test(draftRef.current));
+  const hasDraftRef = useRef(hasDraft);
+
+  const getTextarea = () => textareaContainerRef.current?.querySelector("textarea") ?? null;
+
+  const updateMirror = (value: string) => {
+    // The overlapping mirror lets normal layout size the textarea without synchronous scrollHeight reads.
+    if (mirrorRef.current) mirrorRef.current.textContent = `${value}${MIRROR_SENTINEL}`;
+  };
+
+  const updateHasDraft = (value: string) => {
+    const nextHasDraft = HAS_NON_WHITESPACE.test(value);
+    if (nextHasDraft !== hasDraftRef.current) {
+      hasDraftRef.current = nextHasDraft;
+      setHasDraft(nextHasDraft);
+    }
+  };
+
+  useLayoutEffect(() => {
+    const value = draftRef.current;
+    const textarea = getTextarea();
+    if (textarea && textarea.value !== value) {
+      textarea.value = value;
+    }
+    updateMirror(value);
+    updateHasDraft(value);
+  }, [draftRevision]);
+
+  const submit = () => {
+    const textarea = getTextarea();
+    const draft = textarea?.value ?? draftRef.current;
+    const canSend = HAS_NON_WHITESPACE.test(draft) || (!isSearchMode && pendingAttachmentCount > 0);
+    if (isSending || !canSend) return;
+
+    draftRef.current = "";
+    if (textarea) textarea.value = "";
+    updateMirror("");
+    updateHasDraft("");
+    void onSend(draft);
+  };
+
+  return (
+    <>
+      <div ref={textareaContainerRef} className="grid max-h-40 min-h-0 overflow-hidden">
+        <div
+          ref={mirrorRef}
+          className="pointer-events-none invisible col-start-1 row-start-1 max-h-40 min-h-0 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words px-3 py-3 text-base"
+          aria-hidden="true"
+        />
+        <Textarea
+          id="composer-input"
+          rows={1}
+          onInput={(event) => {
+            const value = event.currentTarget.value;
+            draftRef.current = value;
+            updateMirror(value);
+            updateHasDraft(value);
+          }}
+          onPaste={(event) => {
+            onPaste(event);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+              event.preventDefault();
+              submit();
+            }
+          }}
+          placeholder={isSearchMode ? "Search the web" : "Enter prompt..."}
+          className="col-start-1 row-start-1 h-full max-h-40 min-h-0 resize-none overflow-y-auto border-0 bg-transparent px-3 py-3 text-base text-violet-50 shadow-none placeholder:text-violet-200/45 focus-visible:ring-0"
+          disabled={isSending}
+        />
+      </div>
+      <div className={cn("flex items-center gap-3 px-2 pb-1", error ? "justify-between" : "justify-end")}>
+        {error ? <p className="min-w-0 truncate text-xs text-rose-300">{error}</p> : null}
+        {!isSearchMode ? (
+          <Button
+            className="h-10 w-10 rounded-lg"
+            onClick={onOpenAttachmentPicker}
+            size="icon"
+            variant="secondary"
+            disabled={attachmentButtonDisabled}
+            aria-label="Attach files"
+          >
+            <Paperclip className="h-4 w-4" />
+          </Button>
+        ) : null}
+        <Button
+          className="h-10 w-10 rounded-lg"
+          onClick={submit}
+          size="icon"
+          disabled={isSending || (!hasDraft && (isSearchMode || pendingAttachmentCount === 0))}
+          aria-label={isSearchMode ? "Search" : "Send message"}
+        >
+          {isSearchMode ? <Search className="h-4 w-4" /> : <SendHorizontal className="h-4 w-4" />}
+        </Button>
+      </div>
+    </>
+  );
+}

web/src/index.css

@@ -131,6 +131,45 @@ textarea {
   }
 }
 
+@media (horizontal-viewport-segments: 2) {
+  .app-safe-frame {
+    padding:
+      max(0.5rem, var(--safe-area-top))
+      max(0.5rem, var(--safe-area-right))
+      max(0.5rem, var(--safe-area-bottom))
+      max(0.5rem, var(--safe-area-left));
+  }
+
+  .workspace-shell {
+    display: grid;
+    grid-template-columns:
+      calc(env(viewport-segment-width 0 0) - max(0.5rem, var(--safe-area-left)))
+      calc(env(viewport-segment-width 1 0) - max(0.5rem, var(--safe-area-right)));
+    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
+  }
+
+  .workspace-sidebar {
+    position: static;
+    width: 100%;
+    max-width: none;
+    transform: none;
+    border-width: 1px;
+    border-radius: 1rem;
+  }
+
+  .workspace-content {
+    min-width: 0;
+    border-width: 1px;
+    border-radius: 1rem;
+    touch-action: auto;
+  }
+
+  .workspace-sidebar-backdrop,
+  .workspace-sidebar-trigger {
+    display: none;
+  }
+}
+
 .glass-panel {
   background:
     linear-gradient(180deg, hsl(243 42% 12% / 0.88), hsl(236 48% 5% / 0.92)),

web/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/pwa.ts","./src/root-router.tsx","./src/vite-env.d.ts","./src/components/sybil-character.tsx","./src/components/auth/auth-screen.tsx","./src/components/chat/chat-attachment-list.tsx","./src/components/chat/chat-messages-panel.tsx","./src/components/markdown/markdown-content.tsx","./src/components/search/search-results-panel.tsx","./src/components/ui/button.tsx","./src/components/ui/input.tsx","./src/components/ui/scroll-area.tsx","./src/components/ui/separator.tsx","./src/components/ui/textarea.tsx","./src/hooks/use-session-auth.ts","./src/lib/api.ts","./src/lib/chat-model-selection.ts","./src/lib/sidebar-selection.ts","./src/lib/utils.ts","./src/pages/search-route-page.tsx"],"version":"5.9.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/pwa.ts","./src/root-router.tsx","./src/vite-env.d.ts","./src/components/sybil-character.tsx","./src/components/auth/auth-screen.tsx","./src/components/chat/chat-attachment-list.tsx","./src/components/chat/chat-composer.tsx","./src/components/chat/chat-messages-panel.tsx","./src/components/markdown/markdown-content.tsx","./src/components/search/search-results-panel.tsx","./src/components/ui/button.tsx","./src/components/ui/input.tsx","./src/components/ui/scroll-area.tsx","./src/components/ui/separator.tsx","./src/components/ui/textarea.tsx","./src/hooks/use-session-auth.ts","./src/lib/api.ts","./src/lib/chat-model-selection.ts","./src/lib/sidebar-selection.ts","./src/lib/utils.ts","./src/pages/search-route-page.tsx"],"version":"5.9.3"}