iris-chatbot 0.2.4

package/template/src/components/ChatView.tsx

@@ -0,0 +1,1537 @@
+"use client";
+
+import { ArrowDown } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type {
+  ChatCitationSource,
+  ModelConnection,
+  ChatStreamChunk,
+  MemoryContextPayload,
+  MessageNode,
+  Settings,
+  Thread,
+  ToolApproval,
+  ToolEvent,
+} from "../lib/types";
+import {
+  appendUserAndAssistant,
+  createThreadFromMessage,
+  deleteThread as deleteThreadById,
+} from "../lib/data";
+import { buildPath, embedSourcesInContent, splitContentAndSources } from "../lib/utils";
+import { db } from "../lib/db";
+import {
+  buildMemoryContextForPrompt,
+  captureMemoriesFromUserTurn,
+  markMemoriesUsed,
+} from "../lib/memory";
+import { useUIStore } from "../lib/store";
+import { toChatConnectionPayload } from "../lib/connections";
+import MessageCard from "./MessageCard";
+import Composer from "./Composer";
+
+const SYSTEM_PROMPT =
+  "You are a helpful assistant. Always return valid Markdown. Use ATX headings (##, ###), bold labels, lists, and tables when useful.";
+
+const EMPTY_PROMPTS = [
+  "What are you working on?",
+  "What should we tackle today?",
+  "What do you want to build next?",
+  "What are we solving right now?",
+  "What is on your agenda today?",
+  "Where should we start?",
+];
+
+const MAX_SIBLING_THREADS_FOR_CONTEXT = 4;
+const MAX_MESSAGES_PER_SIBLING_THREAD = 8;
+const MAX_MESSAGE_CHARS_FOR_CONTEXT = 320;
+const MAX_CONTEXT_CHARS_TOTAL = 8000;
+const STREAM_TYPING_FRAME_MS = 16;
+const STREAM_TYPING_CHARS_PER_FRAME_MIN = 1;
+const STREAM_TYPING_CHARS_PER_FRAME_MAX = 24;
+const STREAM_TYPING_FIRST_PAINT_CHARS = 2;
+const STREAM_DB_FLUSH_MS = 120;
+const VOICE_SILENCE_AUTOSEND_MS = 1300;
+
+type SpeechRecognitionAlternativeLike = {
+  transcript?: string;
+};
+
+type SpeechRecognitionResultLike = {
+  isFinal?: boolean;
+  [index: number]: SpeechRecognitionAlternativeLike;
+};
+
+type SpeechRecognitionEventLike = {
+  resultIndex?: number;
+  results?: ArrayLike<SpeechRecognitionResultLike>;
+};
+
+type SpeechRecognitionErrorEventLike = {
+  error?: string;
+};
+
+type SpeechRecognitionLike = {
+  continuous: boolean;
+  interimResults: boolean;
+  lang: string;
+  onresult: ((event: SpeechRecognitionEventLike) => void) | null;
+  onerror: ((event: SpeechRecognitionErrorEventLike) => void) | null;
+  onend: (() => void) | null;
+  start: () => void;
+  stop: () => void;
+};
+
+type SpeechRecognitionCtor = new () => SpeechRecognitionLike;
+
+function getSpeechRecognitionCtor(): SpeechRecognitionCtor | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const w = window as Window & {
+    SpeechRecognition?: SpeechRecognitionCtor;
+    webkitSpeechRecognition?: SpeechRecognitionCtor;
+  };
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
+}
+
+function normalizeSpeechText(input: string): string {
+  return input.replace(/\s+/g, " ").trim();
+}
+
+function compactTextForContext(input: string, maxChars = MAX_MESSAGE_CHARS_FOR_CONTEXT) {
+  const compact = splitContentAndSources(input).content.replace(/\s+/g, " ").trim();
+  if (!compact) {
+    return "(empty)";
+  }
+  return compact.length > maxChars ? `${compact.slice(0, maxChars)}…` : compact;
+}
+
+function shouldIncludeSiblingThreadContext(input: string): boolean {
+  const text = input.toLowerCase();
+  return (
+    /\b(other thread|another thread|across threads|between threads|all threads|both threads)\b/.test(
+      text,
+    ) ||
+    /\b(compare|contrast|summarize)\b[\s\S]{0,40}\bthread/.test(text)
+  );
+}
+
+function buildSiblingThreadsContext(params: {
+  allThreads: Thread[];
+  activeThread: Thread;
+  messageMap: Map<string, MessageNode>;
+}): string | null {
+  const siblingThreads = params.allThreads
+    .filter(
+      (thread) =>
+        thread.conversationId === params.activeThread.conversationId &&
+        thread.id !== params.activeThread.id,
+    )
+    .sort((a, b) => b.updatedAt - a.updatedAt)
+    .slice(0, MAX_SIBLING_THREADS_FOR_CONTEXT);
+
+  if (siblingThreads.length === 0) {
+    return null;
+  }
+
+  let context = "Sibling thread context from this same conversation:\n";
+
+  for (const thread of siblingThreads) {
+    const path = buildPath(thread.headMessageId, params.messageMap)
+      .filter((message) => message.role === "user" || message.role === "assistant")
+      .slice(-MAX_MESSAGES_PER_SIBLING_THREAD);
+
+    if (path.length === 0) {
+      continue;
+    }
+
+    let threadBlock = `\n[${thread.title}]\n`;
+    for (const message of path) {
+      const speaker = message.role === "assistant" ? "Assistant" : "User";
+      threadBlock += `${speaker}: ${compactTextForContext(message.content)}\n`;
+    }
+
+    if (context.length + threadBlock.length > MAX_CONTEXT_CHARS_TOTAL) {
+      break;
+    }
+    context += threadBlock;
+  }
+
+  if (context === "Sibling thread context from this same conversation:\n") {
+    return null;
+  }
+
+  return context.trim();
+}
+
+function normalizeAliasMemoryText(input: string): string {
+  return input
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function shouldLearnMusicAlias(alias: string, target: string): boolean {
+  const normalizedAlias = normalizeAliasMemoryText(alias);
+  const normalizedTarget = normalizeAliasMemoryText(target);
+  if (!normalizedAlias || !normalizedTarget || normalizedAlias === normalizedTarget) {
+    return false;
+  }
+  if (normalizedAlias.length < 2 || normalizedAlias.length > 48) {
+    return false;
+  }
+  if (normalizedAlias.split(" ").length > 5) {
+    return false;
+  }
+  if (/\b(song|track|album|playlist|by)\b/i.test(alias)) {
+    return false;
+  }
+  return true;
+}
+
+function extractMessageRecipientAliasFromPrompt(prompt: string): string | null {
+  const text = prompt.replace(/\s+/g, " ").trim();
+  if (!text) {
+    return null;
+  }
+
+  const patterns = [
+    /^\s*(?:text|message)\s+(.+?)\s+(?:that\s+)?(.+)$/i,
+    /^\s*send\s+(?:a\s+)?(?:text(?:\s+message)?|message)\s+to\s+(.+?)\s+(?:that\s+)?(.+)$/i,
+    /^\s*send\s+(.+?)\s+(?:a\s+)?(?:text(?:\s+message)?|message)\s+(?:that\s+)?(.+)$/i,
+  ];
+
+  const quotedSendMatch = text.match(/^\s*send\s+["'“”](.+?)["'“”]\s+to\s+(.+?)\s*$/i);
+  if (quotedSendMatch?.[2]) {
+    return quotedSendMatch[2]
+      .trim()
+      .split(/\s*,\s*|\s+and\s+/i)[0]
+      ?.trim()
+      ?.replace(/[,:;]+$/g, "")
+      ?.replace(/^['"]|['"]$/g, "") || null;
+  }
+
+  for (const pattern of patterns) {
+    const match = text.match(pattern);
+    if (!match?.[1] || !match?.[2]) {
+      continue;
+    }
+    const alias = match[1]
+      .replace(/^to\s+/i, "")
+      .split(/\s*,\s*|\s+and\s+/i)[0]
+      ?.trim()
+      ?.replace(/[,:;]+$/g, "")
+      ?.replace(/^['"]|['"]$/g, "");
+    if (!alias) {
+      return null;
+    }
+    return alias;
+  }
+  return null;
+}
+
+function extractMusicAliasFromPrompt(prompt: string): string | null {
+  const match = prompt.match(/^\s*play\s+(.+?)(?:\s+at\s+\d{1,3}\s*%|\s+volume|\s*$)/i);
+  if (!match?.[1]) {
+    return null;
+  }
+  return match[1]
+    .replace(/\bvia apple music app\b/gi, "")
+    .replace(/\bon apple music\b/gi, "")
+    .trim()
+    .replace(/^['"]|['"]$/g, "")
+    .replace(/[.?!]+$/g, "");
+}
+
+function resolveMessageTargetFromResult(result: unknown): string | null {
+  if (!result || typeof result !== "object") {
+    return null;
+  }
+  const payload = result as {
+    recipients?: Array<{ name?: string | null; input?: string; handle?: string }>;
+  };
+  const first = payload.recipients?.[0];
+  if (!first) {
+    return null;
+  }
+  return first.handle?.trim() || first.name?.trim() || first.input?.trim() || null;
+}
+
+function resolveMusicTargetFromResult(result: unknown): string | null {
+  if (!result || typeof result !== "object") {
+    return null;
+  }
+  const payload = result as {
+    playlistName?: string | null;
+    title?: string | null;
+    artist?: string | null;
+  };
+  if (typeof payload.playlistName === "string" && payload.playlistName.trim()) {
+    return payload.playlistName.trim();
+  }
+  const title = typeof payload.title === "string" ? payload.title.trim() : "";
+  const artist = typeof payload.artist === "string" ? payload.artist.trim() : "";
+  if (!title) {
+    return null;
+  }
+  return artist ? `${title} by ${artist}` : title;
+}
+
+function toApprovalStatus(decision: "approve" | "deny" | "timeout") {
+  if (decision === "approve") {
+    return "approved" as const;
+  }
+  if (decision === "deny") {
+    return "denied" as const;
+  }
+  return "timeout" as const;
+}
+
+type MicMode = "off" | "dictation";
+type MicState = "idle" | "listening" | "processing";
+
+export default function ChatView({
+  thread,
+  messages,
+  toolEvents,
+  toolApprovals,
+  settings,
+  connection,
+  model,
+  threads,
+  activeThreadId,
+  onSelectThread,
+  onOpenSettings,
+}: {
+  thread: Thread | null;
+  messages: MessageNode[];
+  toolEvents: ToolEvent[];
+  toolApprovals: ToolApproval[];
+  settings: Settings | null;
+  connection: ModelConnection | null;
+  model: string;
+  threads: Thread[];
+  activeThreadId: string | null;
+  onSelectThread: (threadId: string) => void;
+  onOpenSettings: () => void;
+}) {
+  const [input, setInput] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [streamingByThread, setStreamingByThread] = useState<Record<string, string>>({});
+  const [streamDraftByMessageId, setStreamDraftByMessageId] = useState<Record<string, string>>({});
+  const [approvalBusyIds, setApprovalBusyIds] = useState<Record<string, boolean>>({});
+  const [showJumpToBottom, setShowJumpToBottom] = useState(false);
+  const [micMode, setMicMode] = useState<MicMode>("off");
+  const [micState, setMicState] = useState<MicState>("idle");
+  const focusedMessageId = useUIStore((state) => state.focusedMessageId);
+  const setFocusedMessageId = useUIStore((state) => state.setFocusedMessageId);
+  const chatScrollRef = useRef<HTMLDivElement | null>(null);
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+  const isUserNearBottomRef = useRef(true);
+  const shouldStickToBottomRef = useRef(true);
+  const pendingSendScrollThreadIdRef = useRef<string | null>(null);
+  const followScrollRafRef = useRef<number | null>(null);
+  const lastFollowScrollAtRef = useRef(0);
+  const smoothFollowUntilRef = useRef(0);
+  const abortControllersRef = useRef<Map<string, AbortController>>(new Map());
+  const inflightThreadIdsRef = useRef<Set<string>>(new Set());
+  const micModeRef = useRef<MicMode>("off");
+  const micStateRef = useRef<MicState>("idle");
+  const currentInputRef = useRef("");
+  const recognitionRef = useRef<SpeechRecognitionLike | null>(null);
+  const recognitionBaseInputRef = useRef("");
+  const recognitionFinalTranscriptRef = useRef("");
+  const recognitionInterimTranscriptRef = useRef("");
+  const micSilenceTimerRef = useRef<number | null>(null);
+  const handleSendRef = useRef<(overrideInput?: string) => Promise<void>>(async () => {});
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
+    const container = chatScrollRef.current;
+    if (container) {
+      container.scrollTo({ top: container.scrollHeight, behavior });
+      return;
+    }
+    bottomRef.current?.scrollIntoView({ behavior, block: "end" });
+  }, []);
+
+  const updateBottomVisibility = useCallback(() => {
+    const container = chatScrollRef.current;
+    if (!container) {
+      setShowJumpToBottom(false);
+      isUserNearBottomRef.current = true;
+      shouldStickToBottomRef.current = true;
+      return;
+    }
+
+    const distanceFromBottom =
+      container.scrollHeight - container.scrollTop - container.clientHeight;
+    const isNearBottom = distanceFromBottom <= 48;
+    isUserNearBottomRef.current = isNearBottom;
+    shouldStickToBottomRef.current = isNearBottom;
+    setShowJumpToBottom(!isNearBottom);
+  }, []);
+
+  const maybeAutoScrollToBottom = useCallback(() => {
+    if (!shouldStickToBottomRef.current) {
+      return;
+    }
+    if (followScrollRafRef.current !== null) {
+      return;
+    }
+    followScrollRafRef.current = requestAnimationFrame(() => {
+      followScrollRafRef.current = null;
+      const container = chatScrollRef.current;
+      const now = performance.now();
+      const smoothActive = now < smoothFollowUntilRef.current;
+      if (!container) {
+        scrollToBottom(smoothActive ? "smooth" : "auto");
+        lastFollowScrollAtRef.current = now;
+        return;
+      }
+      const distanceFromBottom =
+        container.scrollHeight - container.scrollTop - container.clientHeight;
+      if (distanceFromBottom <= 2) {
+        return;
+      }
+      const elapsed = now - lastFollowScrollAtRef.current;
+      const behavior: ScrollBehavior = smoothActive || elapsed > 180 ? "smooth" : "auto";
+      container.scrollTo({ top: container.scrollHeight, behavior });
+      lastFollowScrollAtRef.current = now;
+    });
+  }, [scrollToBottom]);
+
+  const messageMap = useMemo(
+    () => new Map(messages.map((message) => [message.id, message])),
+    [messages]
+  );
+
+  const threadMessages = useMemo(() => {
+    if (!thread?.headMessageId) return [];
+    return buildPath(thread.headMessageId, messageMap);
+  }, [thread?.headMessageId, messageMap]);
+
+  const emptyPrompt = useMemo(() => {
+    if (!thread?.id) return EMPTY_PROMPTS[0];
+    let hash = 0;
+    for (let i = 0; i < thread.id.length; i += 1) {
+      hash = (hash * 31 + thread.id.charCodeAt(i)) >>> 0;
+    }
+    return EMPTY_PROMPTS[hash % EMPTY_PROMPTS.length];
+  }, [thread?.id]);
+
+  const threadsInConversation = useMemo(
+    () =>
+      threads.filter(
+        (item) => item.conversationId === thread?.conversationId
+      ),
+    [threads, thread?.conversationId]
+  );
+
+  const threadsByMessage = useMemo(() => {
+    const map = new Map<string, Thread[]>();
+    const getThreadNumber = (title: string) => {
+      const match = title.match(/Thread\s+(\d+)/i);
+      return match ? Number(match[1]) : Number.POSITIVE_INFINITY;
+    };
+    threadsInConversation.forEach((item) => {
+      if (!item.forkedFromMessageId) return;
+      const list = map.get(item.forkedFromMessageId) || [];
+      list.push(item);
+      map.set(item.forkedFromMessageId, list);
+    });
+    map.forEach((list, key) => {
+      list.sort((a, b) => {
+        const aNum = getThreadNumber(a.title);
+        const bNum = getThreadNumber(b.title);
+        if (aNum !== bNum) return aNum - bNum;
+        return a.updatedAt - b.updatedAt;
+      });
+      map.set(key, list);
+    });
+    return map;
+  }, [threadsInConversation]);
+
+  const baseThreadByMessage = useMemo(() => {
+    const result = new Map<string, string>();
+    const threadById = new Map(
+      threadsInConversation.map((item) => [item.id, item])
+    );
+
+    threadsInConversation.forEach((item) => {
+      let cursor = item.headMessageId;
+      while (cursor) {
+        const currentBaseId = result.get(cursor);
+        if (!currentBaseId) {
+          result.set(cursor, item.id);
+        } else {
+          const currentBase = threadById.get(currentBaseId);
+          const currentIsForkAtNode =
+            currentBase?.forkedFromMessageId === cursor;
+          const candidateIsBaseAtNode = item.forkedFromMessageId !== cursor;
+          if (currentIsForkAtNode && candidateIsBaseAtNode) {
+            result.set(cursor, item.id);
+          }
+        }
+
+        cursor = messageMap.get(cursor)?.parentId ?? null;
+      }
+    });
+
+    return result;
+  }, [threadsInConversation, messageMap]);
+
+  const activeStreamingMessageId = useMemo(() => {
+    if (!thread?.id) {
+      return null;
+    }
+    return streamingByThread[thread.id] ?? null;
+  }, [streamingByThread, thread?.id]);
+  const micSupported = getSpeechRecognitionCtor() !== null;
+
+  const toolEventsByMessage = useMemo(() => {
+    const map = new Map<string, ToolEvent[]>();
+    for (const event of toolEvents) {
+      const list = map.get(event.assistantMessageId) || [];
+      list.push(event);
+      map.set(event.assistantMessageId, list);
+    }
+    map.forEach((list, key) => {
+      list.sort((a, b) => a.createdAt - b.createdAt);
+      map.set(key, list);
+    });
+    return map;
+  }, [toolEvents]);
+
+  const toolApprovalsByMessage = useMemo(() => {
+    const map = new Map<string, ToolApproval[]>();
+    for (const approval of toolApprovals) {
+      const list = map.get(approval.assistantMessageId) || [];
+      list.push(approval);
+      map.set(approval.assistantMessageId, list);
+    }
+    map.forEach((list, key) => {
+      list.sort((a, b) => a.requestedAt - b.requestedAt);
+      map.set(key, list);
+    });
+    return map;
+  }, [toolApprovals]);
+
+  const clearMicSilenceTimer = useCallback(() => {
+    if (micSilenceTimerRef.current !== null) {
+      window.clearTimeout(micSilenceTimerRef.current);
+      micSilenceTimerRef.current = null;
+    }
+  }, []);
+
+  const stopMicRecognitionSession = useCallback(() => {
+    clearMicSilenceTimer();
+    const recognition = recognitionRef.current;
+    recognitionRef.current = null;
+    if (!recognition) {
+      return;
+    }
+    recognition.onresult = null;
+    recognition.onerror = null;
+    recognition.onend = null;
+    try {
+      recognition.stop();
+    } catch {
+      // best-effort stop
+    }
+  }, [clearMicSilenceTimer]);
+
+  const applyRecognitionInput = useCallback(() => {
+    const parts = [
+      normalizeSpeechText(recognitionBaseInputRef.current),
+      normalizeSpeechText(recognitionFinalTranscriptRef.current),
+      normalizeSpeechText(recognitionInterimTranscriptRef.current),
+    ].filter(Boolean);
+    setInput(parts.join(" ").trim());
+  }, []);
+
+  useEffect(() => {
+    const controllers = abortControllersRef.current;
+    const inflightThreadIds = inflightThreadIdsRef.current;
+    return () => {
+      if (followScrollRafRef.current !== null) {
+        cancelAnimationFrame(followScrollRafRef.current);
+        followScrollRafRef.current = null;
+      }
+      stopMicRecognitionSession();
+      controllers.forEach((controller) => controller.abort());
+      controllers.clear();
+      inflightThreadIds.clear();
+    };
+  }, [stopMicRecognitionSession]);
+
+  useEffect(() => {
+    currentInputRef.current = input;
+  }, [input]);
+
+  useEffect(() => {
+    micModeRef.current = micMode;
+  }, [micMode]);
+
+  useEffect(() => {
+    micStateRef.current = micState;
+  }, [micState]);
+
+  const handleBranch = useCallback(
+    async (message: MessageNode) => {
+      const resolvedThread =
+        thread || (activeThreadId ? await db.threads.get(activeThreadId) : null);
+      if (!resolvedThread) return;
+      try {
+        await createThreadFromMessage(message.id, resolvedThread.conversationId);
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : "Unable to add thread.";
+        setError(message);
+      }
+    },
+    [thread, activeThreadId]
+  );
+
+  const handleDeleteBranch = useCallback(
+    async (threadId: string, fallbackThreadId: string | null) => {
+      await deleteThreadById(threadId);
+      if (activeThreadId === threadId) {
+        if (fallbackThreadId) {
+          onSelectThread(fallbackThreadId);
+          return;
+        }
+        const resolvedThread =
+          thread || (activeThreadId ? await db.threads.get(activeThreadId) : null);
+        if (resolvedThread) {
+          onSelectThread(resolvedThread.id);
+        }
+      }
+    },
+    [activeThreadId, onSelectThread, thread]
+  );
+
+  const handleStop = useCallback(() => {
+    const threadId = thread?.id || activeThreadId;
+    if (!threadId) {
+      return;
+    }
+    const controller = abortControllersRef.current.get(threadId);
+    controller?.abort();
+    abortControllersRef.current.delete(threadId);
+    setStreamingByThread((current) => {
+      if (!current[threadId]) {
+        return current;
+      }
+      const next = { ...current };
+      delete next[threadId];
+      return next;
+    });
+  }, [thread?.id, activeThreadId]);
+
+  const handleApprovalDecision = useCallback(
+    async (approvalId: string, decision: "approve" | "deny") => {
+      setApprovalBusyIds((current) => ({
+        ...current,
+        [approvalId]: true,
+      }));
+
+      try {
+        const response = await fetch("/api/tool-approval", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ approvalId, decision }),
+        });
+
+        if (!response.ok) {
+          const payload = await response.json().catch(() => ({}));
+          throw new Error(payload.error || "Failed to resolve approval.");
+        }
+
+        await db.toolApprovals.update(approvalId, {
+          status: toApprovalStatus(decision),
+          resolvedAt: Date.now(),
+        });
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : "Unable to resolve approval.";
+        setError(message);
+      } finally {
+        setApprovalBusyIds((current) => {
+          if (!current[approvalId]) {
+            return current;
+          }
+          const next = { ...current };
+          delete next[approvalId];
+          return next;
+        });
+      }
+    },
+    []
+  );
+
+  const startMicRecognitionSession = useCallback(
+    (mode: Exclude<MicMode, "off">) => {
+      const RecognitionCtor = getSpeechRecognitionCtor();
+      if (!RecognitionCtor) {
+        setError("Voice input is not supported in this browser.");
+        setMicMode("off");
+        setMicState("idle");
+        return false;
+      }
+
+      clearMicSilenceTimer();
+      stopMicRecognitionSession();
+      recognitionBaseInputRef.current = normalizeSpeechText(currentInputRef.current);
+      recognitionFinalTranscriptRef.current = "";
+      recognitionInterimTranscriptRef.current = "";
+      setMicMode(mode);
+      setMicState("listening");
+      setError(null);
+
+      const recognition = new RecognitionCtor();
+      recognition.continuous = true;
+      recognition.interimResults = true;
+      recognition.lang = typeof navigator !== "undefined" ? navigator.language || "en-US" : "en-US";
+
+      recognition.onresult = (event) => {
+        const results = event.results ?? [];
+        const startIndex = Math.max(0, Number(event.resultIndex ?? 0));
+
+        let appendedFinal = "";
+        let interim = "";
+        for (let index = startIndex; index < results.length; index += 1) {
+          const item = results[index];
+          const transcript = normalizeSpeechText(item?.[0]?.transcript ?? "");
+          if (!transcript) {
+            continue;
+          }
+          if (item?.isFinal) {
+            appendedFinal += `${transcript} `;
+          } else {
+            interim += `${transcript} `;
+          }
+        }
+
+        if (appendedFinal.trim()) {
+          recognitionFinalTranscriptRef.current = normalizeSpeechText(
+            `${recognitionFinalTranscriptRef.current} ${appendedFinal}`,
+          );
+        }
+        recognitionInterimTranscriptRef.current = normalizeSpeechText(interim);
+        applyRecognitionInput();
+
+        if (!recognitionFinalTranscriptRef.current) {
+          return;
+        }
+
+        clearMicSilenceTimer();
+        micSilenceTimerRef.current = window.setTimeout(() => {
+          const prompt = normalizeSpeechText(
+            [recognitionBaseInputRef.current, recognitionFinalTranscriptRef.current].join(" "),
+          );
+          if (!prompt) {
+            return;
+          }
+          void handleSendRef.current(prompt);
+        }, VOICE_SILENCE_AUTOSEND_MS);
+      };
+
+      recognition.onerror = (event) => {
+        if (event.error === "no-speech" || event.error === "aborted") {
+          return;
+        }
+        if (event.error === "not-allowed" || event.error === "service-not-allowed") {
+          setError("Microphone access was denied. Allow mic access to use voice input.");
+          setMicMode("off");
+          setMicState("idle");
+          stopMicRecognitionSession();
+          return;
+        }
+        setError("Voice input failed. Please try again.");
+      };
+
+      recognition.onend = () => {
+        if (micModeRef.current !== mode || micStateRef.current !== "listening") {
+          recognitionRef.current = null;
+          return;
+        }
+        window.setTimeout(() => {
+          if (micModeRef.current !== mode || micStateRef.current !== "listening") {
+            recognitionRef.current = null;
+            return;
+          }
+          try {
+            recognition.start();
+            recognitionRef.current = recognition;
+          } catch {
+            recognitionRef.current = null;
+            setMicState("idle");
+          }
+        }, 120);
+      };
+
+      recognitionRef.current = recognition;
+      try {
+        recognition.start();
+        applyRecognitionInput();
+        return true;
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Could not start voice input.";
+        setError(message);
+        setMicMode("off");
+        setMicState("idle");
+        stopMicRecognitionSession();
+        return false;
+      }
+    },
+    [
+      applyRecognitionInput,
+      clearMicSilenceTimer,
+      stopMicRecognitionSession,
+    ],
+  );
+
+  const stopMicMode = useCallback(() => {
+    clearMicSilenceTimer();
+    stopMicRecognitionSession();
+    recognitionBaseInputRef.current = normalizeSpeechText(currentInputRef.current);
+    recognitionFinalTranscriptRef.current = "";
+    recognitionInterimTranscriptRef.current = "";
+    setMicMode("off");
+    setMicState("idle");
+  }, [clearMicSilenceTimer, stopMicRecognitionSession]);
+
+  const handleMicToggle = useCallback(() => {
+    if (micModeRef.current !== "off") {
+      stopMicMode();
+      return;
+    }
+
+    if (!micSupported) {
+      setError("Voice input is not supported in this browser.");
+      return;
+    }
+
+    startMicRecognitionSession("dictation");
+  }, [micSupported, startMicRecognitionSession, stopMicMode]);
+
+  const handleSend = useCallback(async (overrideInput?: string) => {
+    const resolvedThread =
+      thread || (activeThreadId ? await db.threads.get(activeThreadId) : null);
+    if (!resolvedThread) return;
+    const trimmed = (overrideInput ?? input).trim();
+    if (!trimmed) return;
+    const sendTriggeredByMic =
+      typeof overrideInput === "string" || micModeRef.current !== "off";
+    const stopMicAfterValidationFailure = () => {
+      if (!sendTriggeredByMic) {
+        return;
+      }
+      stopMicMode();
+    };
+
+    if (!settings) {
+      setError("Settings not loaded yet.");
+      stopMicAfterValidationFailure();
+      return;
+    }
+
+    if (!connection) {
+      setError("Select a model connection before sending a message.");
+      onOpenSettings();
+      stopMicAfterValidationFailure();
+      return;
+    }
+
+    const connectionPayload = toChatConnectionPayload(connection, settings);
+    const requiresApiKey =
+      connectionPayload.kind === "builtin" &&
+      (connectionPayload.provider === "openai" ||
+        connectionPayload.provider === "anthropic" ||
+        connectionPayload.provider === "google");
+    if (requiresApiKey && !connectionPayload.apiKey) {
+      setError("Add an API key in Settings before sending a message.");
+      onOpenSettings();
+      stopMicAfterValidationFailure();
+      return;
+    }
+
+    if (!model) {
+      setError("Select a model before sending a message.");
+      stopMicAfterValidationFailure();
+      return;
+    }
+
+    if (sendTriggeredByMic) {
+      clearMicSilenceTimer();
+      stopMicRecognitionSession();
+      recognitionBaseInputRef.current = "";
+      recognitionFinalTranscriptRef.current = "";
+      recognitionInterimTranscriptRef.current = "";
+      setMicState("processing");
+    }
+
+    if (
+      streamingByThread[resolvedThread.id] ||
+      inflightThreadIdsRef.current.has(resolvedThread.id)
+    ) {
+      setError("This thread is already responding.");
+      return;
+    }
+
+    inflightThreadIdsRef.current.add(resolvedThread.id);
+    setError(null);
+    setInput("");
+    setFocusedMessageId(null);
+    pendingSendScrollThreadIdRef.current = resolvedThread.id;
+    isUserNearBottomRef.current = true;
+    shouldStickToBottomRef.current = true;
+    setShowJumpToBottom(false);
+    smoothFollowUntilRef.current = performance.now() + 1200;
+    scrollToBottom("smooth");
+
+    const { userMessage, assistantMessage } = await appendUserAndAssistant({
+      thread: resolvedThread,
+      content: trimmed,
+      provider: connection.kind === "builtin" ? connection.provider ?? connection.id : connection.id,
+      model,
+    });
+    const memoryEnabled = settings.memory?.enabled !== false;
+    const memoryAutoCaptureEnabled =
+      memoryEnabled && settings.memory?.autoCapture !== false;
+    const messageAliasCandidate = memoryEnabled
+      ? extractMessageRecipientAliasFromPrompt(trimmed)
+      : null;
+    const musicAliasCandidate = memoryEnabled
+      ? extractMusicAliasFromPrompt(trimmed)
+      : null;
+    let learnedMessageAlias = false;
+    let learnedMusicAlias = false;
+    if (memoryEnabled) {
+      void captureMemoriesFromUserTurn({
+        text: trimmed,
+        conversationId: resolvedThread.conversationId,
+        settingsMemory: settings.memory,
+      }).catch(() => {
+        // Memory capture is best-effort and must not block chat.
+      });
+    }
+
+    setStreamingByThread((current) => ({
+      ...current,
+      [resolvedThread.id]: assistantMessage.id,
+    }));
+    setStreamDraftByMessageId((current) => ({
+      ...current,
+      [assistantMessage.id]: "",
+    }));
+    requestAnimationFrame(() => scrollToBottom("smooth"));
+
+    const map = new Map(messageMap);
+    map.set(userMessage.id, userMessage);
+    map.set(assistantMessage.id, assistantMessage);
+    const history = buildPath(userMessage.id, map);
+    const payloadMessages: Array<{ role: "system" | "user" | "assistant"; content: string }> = [];
+    let memoryPayload: MemoryContextPayload | undefined;
+
+    if (memoryEnabled) {
+      try {
+        const memoryContext = await buildMemoryContextForPrompt({
+          query: trimmed,
+          conversationId: resolvedThread.conversationId,
+          enabled: true,
+          toolInfluence: settings.memory?.toolInfluence !== false,
+        });
+        if (memoryContext.systemMessage) {
+          payloadMessages.push({
+            role: "system",
+            content: memoryContext.systemMessage,
+          });
+        }
+        memoryPayload = memoryContext.payload;
+        void markMemoriesUsed(memoryContext.usedEntryIds);
+      } catch {
+        // Memory context retrieval is best-effort and must not block chat.
+      }
+    }
+
+    const siblingThreadsContext = shouldIncludeSiblingThreadContext(trimmed)
+      ? buildSiblingThreadsContext({
+          allThreads: threads,
+          activeThread: resolvedThread,
+          messageMap: map,
+        })
+      : null;
+    if (siblingThreadsContext) {
+      payloadMessages.push({
+        role: "system",
+        content:
+          "You may use sibling-thread context when the user refers to other threads or asks for summaries across threads.\n\n" +
+          siblingThreadsContext,
+      });
+    }
+
+    payloadMessages.push(
+      ...history
+      .filter((message) => message.role !== "system")
+      .map((message) => ({ role: message.role, content: message.content })),
+    );
+
+    const controller = new AbortController();
+    abortControllersRef.current.set(resolvedThread.id, controller);
+
+    try {
+      const response = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          connection: connectionPayload,
+          model,
+          system: SYSTEM_PROMPT,
+          messages: payloadMessages,
+          stream: true,
+          localTools: settings.localTools,
+          memory: memoryPayload,
+          enableWebSources: settings.enableWebSources,
+          meta: {
+            threadId: resolvedThread.id,
+            conversationId: resolvedThread.conversationId,
+            assistantMessageId: assistantMessage.id,
+          },
+        }),
+        signal: controller.signal,
+      });
+
+      if (!response.ok || !response.body) {
+        const text = await response.text();
+        throw new Error(
+          text || `Failed to start streaming response (${response.status}).`
+        );
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let assembled = "";
+      let rendered = "";
+      let receivedSources: ChatCitationSource[] = [];
+      let pendingTokens = "";
+      let drainTimer: number | null = null;
+      let lastPersistAt = 0;
+      const queueDbWrite = (operation: Promise<unknown>) => {
+        void operation.catch(() => {
+          // Persisting tool metadata is best-effort and must not block response streaming.
+        });
+      };
+      const toolEventIdForCall = (callId: string) => `${assistantMessage.id}:${callId}`;
+      const upsertSources = (incoming: ChatCitationSource[]) => {
+        const next = new Map<string, ChatCitationSource>();
+        for (const source of [...receivedSources, ...incoming]) {
+          const url = typeof source.url === "string" ? source.url.trim() : "";
+          if (!url) {
+            continue;
+          }
+          const title =
+            typeof source.title === "string" && source.title.trim()
+              ? source.title.trim()
+              : undefined;
+          const existing = next.get(url);
+          if (!existing || (!existing.title && title)) {
+            next.set(url, { url, title });
+          }
+        }
+        receivedSources = [...next.values()];
+      };
+      const renderWithSources = (value: string) => embedSourcesInContent(value, receivedSources);
+      const pushRendered = () => {
+        const nextContent = renderWithSources(rendered);
+        setStreamDraftByMessageId((current) => {
+          if (current[assistantMessage.id] === nextContent) {
+            return current;
+          }
+          return {
+            ...current,
+            [assistantMessage.id]: nextContent,
+          };
+        });
+        maybeAutoScrollToBottom();
+      };
+      const persistRendered = async (force = false) => {
+        const now = Date.now();
+        if (!force && now - lastPersistAt < STREAM_DB_FLUSH_MS) {
+          return;
+        }
+        lastPersistAt = now;
+        await db.messages.update(assistantMessage.id, { content: rendered });
+      };
+      const scheduleDrain = () => {
+        if (drainTimer !== null) {
+          return;
+        }
+        drainTimer = window.setTimeout(() => {
+          drainTimer = null;
+          if (!pendingTokens) {
+            return;
+          }
+          const charsThisFrame = Math.min(
+            STREAM_TYPING_CHARS_PER_FRAME_MAX,
+            Math.max(
+              STREAM_TYPING_CHARS_PER_FRAME_MIN,
+              Math.ceil(pendingTokens.length / 4),
+            ),
+          );
+          const nextSlice = pendingTokens.slice(0, charsThisFrame);
+          pendingTokens = pendingTokens.slice(nextSlice.length);
+          rendered += nextSlice;
+          pushRendered();
+          void persistRendered(false);
+          if (pendingTokens.length > 0) {
+            scheduleDrain();
+            return;
+          }
+        }, STREAM_TYPING_FRAME_MS);
+      };
+      const enqueueToken = (value: string) => {
+        if (!value) {
+          return;
+        }
+        assembled += value;
+        pendingTokens += value;
+        if (!rendered && drainTimer === null) {
+          const firstSlice = pendingTokens.slice(0, STREAM_TYPING_FIRST_PAINT_CHARS);
+          pendingTokens = pendingTokens.slice(firstSlice.length);
+          rendered += firstSlice;
+          pushRendered();
+        }
+        scheduleDrain();
+      };
+      const waitForDrain = async () => {
+        while (pendingTokens.length > 0 || drainTimer !== null) {
+          await new Promise((resolve) => window.setTimeout(resolve, STREAM_TYPING_FRAME_MS));
+        }
+      };
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const parts = buffer.split("\n\n");
+        buffer = parts.pop() || "";
+
+        for (const part of parts) {
+          const line = part.trim();
+          if (!line.startsWith("data:")) continue;
+          const json = line.replace(/^data:\s*/, "");
+          if (!json) continue;
+          const chunk = JSON.parse(json) as ChatStreamChunk;
+
+          if (chunk.type === "token") {
+            enqueueToken(chunk.value ?? "");
+            continue;
+          }
+
+          if (chunk.type === "sources") {
+            upsertSources(chunk.items ?? []);
+            pushRendered();
+            continue;
+          }
+
+          if (chunk.type === "tool_call") {
+            queueDbWrite(db.toolEvents.put({
+              id: toolEventIdForCall(chunk.callId),
+              conversationId: resolvedThread.conversationId,
+              threadId: resolvedThread.id,
+              assistantMessageId: assistantMessage.id,
+              toolCallId: chunk.callId,
+              toolName: chunk.name,
+              stage: "call",
+              payloadJson: JSON.stringify(chunk.args ?? {}),
+              createdAt: Date.now(),
+            }));
+            maybeAutoScrollToBottom();
+            continue;
+          }
+
+          if (chunk.type === "tool_progress") {
+            queueDbWrite(db.toolEvents.put({
+              id: toolEventIdForCall(chunk.callId),
+              conversationId: resolvedThread.conversationId,
+              threadId: resolvedThread.id,
+              assistantMessageId: assistantMessage.id,
+              toolCallId: chunk.callId,
+              toolName: chunk.name,
+              stage: "progress",
+              message: chunk.message,
+              createdAt: Date.now(),
+            }));
+            maybeAutoScrollToBottom();
+            continue;
+          }
+
+          if (chunk.type === "tool_result") {
+            queueDbWrite(db.toolEvents.put({
+              id: toolEventIdForCall(chunk.callId),
+              conversationId: resolvedThread.conversationId,
+              threadId: resolvedThread.id,
+              assistantMessageId: assistantMessage.id,
+              toolCallId: chunk.callId,
+              toolName: chunk.name,
+              stage: "result",
+              message: chunk.ok ? "success" : "failure",
+              payloadJson: JSON.stringify(chunk.result ?? {}),
+              createdAt: Date.now(),
+            }));
+            if (chunk.ok && memoryAutoCaptureEnabled) {
+              if (!learnedMessageAlias && chunk.name === "messages_send") {
+                const alias = messageAliasCandidate;
+                const target = resolveMessageTargetFromResult(chunk.result);
+                if (
+                  alias &&
+                  target &&
+                  normalizeAliasMemoryText(alias) !== normalizeAliasMemoryText(target)
+                ) {
+                  learnedMessageAlias = true;
+                  void captureMemoriesFromUserTurn({
+                    text: `when I say ${alias} text ${target}`,
+                    conversationId: resolvedThread.conversationId,
+                    settingsMemory: settings.memory,
+                  }).catch(() => {
+                    // Alias learning is best-effort and must not block chat.
+                  });
+                }
+              }
+
+              if (!learnedMusicAlias && chunk.name === "music_play") {
+                const alias = musicAliasCandidate;
+                const target = resolveMusicTargetFromResult(chunk.result);
+                if (
+                  alias &&
+                  target &&
+                  shouldLearnMusicAlias(alias, target)
+                ) {
+                  learnedMusicAlias = true;
+                  void captureMemoriesFromUserTurn({
+                    text: `when I say ${alias} play ${target}`,
+                    conversationId: resolvedThread.conversationId,
+                    settingsMemory: settings.memory,
+                  }).catch(() => {
+                    // Alias learning is best-effort and must not block chat.
+                  });
+                }
+              }
+            }
+            maybeAutoScrollToBottom();
+            continue;
+          }
+
+          if (chunk.type === "approval_requested") {
+            queueDbWrite(db.toolApprovals.put({
+              id: chunk.approvalId,
+              conversationId: resolvedThread.conversationId,
+              threadId: resolvedThread.id,
+              assistantMessageId: assistantMessage.id,
+              toolCallId: chunk.callId,
+              toolName: chunk.name,
+              argsJson: JSON.stringify(chunk.args ?? {}),
+              reason: chunk.reason,
+              status: "requested",
+              requestedAt: Date.now(),
+            }));
+            maybeAutoScrollToBottom();
+            continue;
+          }
+
+          if (chunk.type === "approval_resolved") {
+            queueDbWrite((async () => {
+              const existing = await db.toolApprovals.get(chunk.approvalId);
+              if (existing) {
+                await db.toolApprovals.update(chunk.approvalId, {
+                  status: toApprovalStatus(chunk.decision),
+                  resolvedAt: Date.now(),
+                });
+              }
+            })());
+            maybeAutoScrollToBottom();
+            continue;
+          }
+
+          if (chunk.type === "error") {
+            if (drainTimer !== null) {
+              window.clearTimeout(drainTimer);
+              drainTimer = null;
+            }
+            pendingTokens = "";
+            assembled = `**Error:** ${chunk.error || "Unknown error"}`;
+            rendered = assembled;
+            pushRendered();
+            await db.messages.update(assistantMessage.id, { content: assembled });
+            setError(chunk.error || "Unknown error");
+            maybeAutoScrollToBottom();
+            continue;
+          }
+
+          if (chunk.type === "done") {
+            continue;
+          }
+        }
+      }
+      await waitForDrain();
+      if (assembled && rendered !== assembled) {
+        rendered = assembled;
+        pushRendered();
+      }
+      const finalizedContent = renderWithSources(assembled || rendered);
+      if (assembled || receivedSources.length > 0) {
+        await db.messages.update(assistantMessage.id, { content: finalizedContent });
+      } else {
+        await persistRendered(true);
+      }
+    } catch (err) {
+      if ((err as Error).name === "AbortError") {
+        return;
+      }
+      const message = err instanceof Error ? err.message : "Unknown error";
+      setStreamDraftByMessageId((current) => ({
+        ...current,
+        [assistantMessage.id]: `**Error:** ${message}`,
+      }));
+      await db.messages.update(assistantMessage.id, {
+        content: `**Error:** ${message}`,
+      });
+      setError(message);
+    } finally {
+      inflightThreadIdsRef.current.delete(resolvedThread.id);
+      abortControllersRef.current.delete(resolvedThread.id);
+      setStreamingByThread((current) => {
+        if (!current[resolvedThread.id]) {
+          return current;
+        }
+        const next = { ...current };
+        delete next[resolvedThread.id];
+        return next;
+      });
+      window.setTimeout(() => {
+        setStreamDraftByMessageId((current) => {
+          if (!(assistantMessage.id in current)) {
+            return current;
+          }
+          const next = { ...current };
+          delete next[assistantMessage.id];
+          return next;
+        });
+      }, 1200);
+
+      if (sendTriggeredByMic) {
+        if (micModeRef.current === "off") {
+          setMicState("idle");
+        } else {
+          const resumed = startMicRecognitionSession("dictation");
+          if (!resumed) {
+            setMicState("idle");
+          }
+        }
+      }
+    }
+  }, [
+    thread,
+    input,
+    settings,
+    connection,
+    model,
+    threads,
+    activeThreadId,
+    onOpenSettings,
+    streamingByThread,
+    scrollToBottom,
+    setFocusedMessageId,
+    maybeAutoScrollToBottom,
+    clearMicSilenceTimer,
+    stopMicRecognitionSession,
+    startMicRecognitionSession,
+    stopMicMode,
+    messageMap,
+  ]);
+
+  useEffect(() => {
+    handleSendRef.current = handleSend;
+  }, [handleSend]);
+
+  useEffect(() => {
+    const pendingThreadId = pendingSendScrollThreadIdRef.current;
+    if (!pendingThreadId || pendingThreadId !== thread?.id) {
+      return;
+    }
+    if (threadMessages.length === 0 && !activeStreamingMessageId) {
+      return;
+    }
+    pendingSendScrollThreadIdRef.current = null;
+    requestAnimationFrame(() => {
+      scrollToBottom("smooth");
+    });
+  }, [thread?.id, threadMessages.length, activeStreamingMessageId, scrollToBottom]);
+
+  useEffect(() => {
+    if (!focusedMessageId || !threadMessages.length) return;
+    const target = document.querySelector<HTMLElement>(
+      `[data-message-id="${focusedMessageId}"]`
+    );
+    if (!target) return;
+    requestAnimationFrame(() => {
+      target.scrollIntoView({ behavior: "smooth", block: "center" });
+      setFocusedMessageId(null);
+    });
+  }, [focusedMessageId, threadMessages, setFocusedMessageId]);
+
+  useEffect(() => {
+    maybeAutoScrollToBottom();
+  }, [toolEvents.length, toolApprovals.length, maybeAutoScrollToBottom]);
+
+  useEffect(() => {
+    const rafId = requestAnimationFrame(() => {
+      updateBottomVisibility();
+    });
+    const handleResize = () => updateBottomVisibility();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [threadMessages, activeThreadId, updateBottomVisibility]);
+
+  const renderedThreadRows = useMemo(
+    () =>
+      threadMessages.map((message) => {
+        const shelfThreads = threadsByMessage.get(message.id) || [];
+        const baseThreadId = baseThreadByMessage.get(message.id) || null;
+        const messageToolEvents = toolEventsByMessage.get(message.id) || [];
+        const messageApprovals = toolApprovalsByMessage.get(message.id) || [];
+
+        return (
+          <div
+            key={message.id}
+            data-message-id={message.id}
+            className={`message-row ${message.role}`}
+          >
+            <MessageCard
+              message={
+                streamDraftByMessageId[message.id] === undefined
+                  ? message
+                  : { ...message, content: streamDraftByMessageId[message.id] }
+              }
+              onAddThread={handleBranch}
+              threads={shelfThreads}
+              baseThreadId={baseThreadId}
+              activeThreadId={activeThreadId}
+              onSelectThread={onSelectThread}
+              onDeleteThread={handleDeleteBranch}
+              isStreaming={activeStreamingMessageId === message.id}
+              toolEvents={messageToolEvents}
+              approvals={messageApprovals}
+              onResolveApproval={handleApprovalDecision}
+              approvalBusyIds={approvalBusyIds}
+            />
+          </div>
+        );
+      }),
+    [
+      threadMessages,
+      threadsByMessage,
+      baseThreadByMessage,
+      handleBranch,
+      activeThreadId,
+      onSelectThread,
+      handleDeleteBranch,
+      activeStreamingMessageId,
+      toolEventsByMessage,
+      toolApprovalsByMessage,
+      handleApprovalDecision,
+      approvalBusyIds,
+      streamDraftByMessageId,
+    ]
+  );
+
+  return (
+    <div className="relative flex h-full flex-col">
+      <div
+        ref={chatScrollRef}
+        onScroll={updateBottomVisibility}
+        className={`chat-scroll flex-1 overflow-y-auto px-6 py-8${
+          threadMessages.length === 0 ? " empty" : ""
+        }`}
+      >
+        {threadMessages.length === 0 ? (
+          <div className="empty-hero">
+            <h1 className="empty-hero-title text-2xl font-semibold text-[var(--text-primary)]">
+              {emptyPrompt}
+            </h1>
+            <div className="empty-composer">
+              <Composer
+                value={input}
+                onChange={setInput}
+                onSend={() => {
+                  void handleSend();
+                }}
+                onStop={handleStop}
+                isStreaming={Boolean(activeStreamingMessageId)}
+                onMicToggle={handleMicToggle}
+                micState={micState}
+                micDisabled={Boolean(activeStreamingMessageId)}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="mx-auto flex w-full max-w-3xl flex-col gap-5 pb-28">
+            {renderedThreadRows}
+          </div>
+        )}
+        <div ref={bottomRef} className="h-2" />
+      </div>
+      {threadMessages.length > 0 ? (
+	        <>
+	          {showJumpToBottom ? (
+            <div className="pointer-events-none absolute bottom-24 right-8 z-30">
+              <button
+	                className="pointer-events-auto inline-flex h-11 w-11 items-center justify-center rounded-full border border-[var(--border-strong)] bg-[var(--panel)] text-[var(--text-primary)] shadow-[var(--shadow)] transition hover:translate-y-[1px] hover:border-[var(--accent)]"
+	                onClick={() => {
+                    shouldStickToBottomRef.current = true;
+                    setShowJumpToBottom(false);
+                    smoothFollowUntilRef.current = performance.now() + 900;
+	                  bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+	                }}
+	                aria-label="Jump to latest message"
+                title="Jump to latest"
+              >
+                <ArrowDown className="h-5 w-5" />
+              </button>
+            </div>
+          ) : null}
+
+        <div className="composer-bar px-6 py-4">
+          <div className="mx-auto w-full max-w-3xl">
+            {error ? (
+              <div className="mb-3 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-xs text-[var(--danger)]">
+                {error}
+              </div>
+            ) : null}
+            <Composer
+              value={input}
+              onChange={setInput}
+              onSend={() => {
+                void handleSend();
+              }}
+              onStop={handleStop}
+              isStreaming={Boolean(activeStreamingMessageId)}
+              onMicToggle={handleMicToggle}
+              micState={micState}
+              micDisabled={Boolean(activeStreamingMessageId)}
+            />
+          </div>
+        </div>
+        </>
+      ) : null}
+    </div>
+  );
+}