GenAI tweaks (#22756)

* add DictAsYamlField for genai provider and runtime options

* regenerate config translations

* chat tweaks

- add page title
- scroll if near bottom
- add tool call group that dynamically updates as tool calls are made
- add bouncing loading indicator and other UI polish

* tool call grouping

frigate/config/camera/genai.py

@@ -59,11 +59,11 @@ class GenAIConfig(FrigateBaseModel):
         default={},
         title="Provider options",
         description="Additional provider-specific options to pass to the GenAI client.",
-        json_schema_extra={"additionalProperties": {"type": "string"}},
+        json_schema_extra={"additionalProperties": {}},
     )
     runtime_options: dict[str, Any] = Field(
         default={},
         title="Runtime options",
         description="Runtime options passed to the provider for each inference call.",
-        json_schema_extra={"additionalProperties": {"type": "string"}},
+        json_schema_extra={"additionalProperties": {}},
     )

web/package-lock.json

@@ -52,6 +52,7 @@
         "i18next-http-backend": "^3.0.1",
         "idb-keyval": "^6.2.1",
         "immer": "^10.1.1",
+        "js-yaml": "^4.1.1",
         "konva": "^10.2.3",
         "lodash": "^4.17.23",
         "lucide-react": "^0.577.0",
@@ -90,6 +91,7 @@
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.9",
         "@testing-library/jest-dom": "^6.6.2",
+        "@types/js-yaml": "^4.0.9",
         "@types/lodash": "^4.17.12",
         "@types/node": "^20.14.10",
         "@types/react": "^19.2.14",
@@ -5494,6 +5496,13 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
+      "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -6132,7 +6141,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/aria-hidden": {
@@ -9178,10 +9186,9 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"

web/package.json

@@ -61,6 +61,7 @@
     "i18next-http-backend": "^3.0.1",
     "idb-keyval": "^6.2.1",
     "immer": "^10.1.1",
+    "js-yaml": "^4.1.1",
     "konva": "^10.2.3",
     "lodash": "^4.17.23",
     "lucide-react": "^0.577.0",
@@ -99,6 +100,7 @@
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.9",
     "@testing-library/jest-dom": "^6.6.2",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.17.12",
     "@types/node": "^20.14.10",
     "@types/react": "^19.2.14",

web/public/locales/en/config/global.json

@@ -527,7 +527,7 @@
     },
     "roles": {
       "label": "Roles",
-      "description": "GenAI roles (tools, vision, embeddings); one provider per role."
+      "description": "GenAI roles (chat, descriptions, embeddings); one provider per role."
     },
     "provider_options": {
       "label": "Provider options",

web/public/locales/en/views/chat.json

@@ -1,4 +1,5 @@
 {
+  "documentTitle": "Chat - Frigate",
   "title": "Frigate Chat",
   "subtitle": "Your AI assistant for camera management and insights",
   "placeholder": "Ask anything...",

web/src/components/chat/ChatMessage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useTranslation } from "react-i18next";
@@ -6,6 +6,7 @@ import copy from "copy-to-clipboard";
 import { toast } from "sonner";
 import { FaCopy, FaPencilAlt } from "react-icons/fa";
 import { FaArrowUpLong } from "react-icons/fa6";
+import { LuCheck } from "react-icons/lu";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import {
@@ -50,13 +51,17 @@ export function MessageBubble({
     }
   }, [isEditing]);
 
-  const handleCopy = () => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
     const text = content?.trim() || "";
     if (!text) return;
     if (copy(text)) {
+      setCopied(true);
       toast.success(t("button.copiedToClipboard", { ns: "common" }));
+      setTimeout(() => setCopied(false), 2000);
     }
-  };
+  }, [content, t]);
 
   const handleEditClick = () => {
     setDraftContent(content);
@@ -93,7 +98,7 @@ export function MessageBubble({
           value={draftContent}
           onChange={(e) => setDraftContent(e.target.value)}
           onKeyDown={handleEditKeyDown}
-          className="min-h-[80px] w-full resize-y rounded-lg bg-primary px-3 py-2 text-primary-foreground placeholder:text-primary-foreground/60"
+          className="min-h-[80px] w-full resize-y rounded-2xl bg-primary px-4 py-3 text-primary-foreground placeholder:text-primary-foreground/60"
           placeholder={t("placeholder")}
           rows={3}
         />
@@ -124,44 +129,49 @@ export function MessageBubble({
   return (
     <div
       className={cn(
-        "flex flex-col gap-1",
+        "flex max-w-[85%] flex-col gap-1",
         isUser ? "items-end self-end" : "items-start self-start",
       )}
     >
       <div
         className={cn(
-          "rounded-lg px-3 py-2",
+          "rounded-2xl px-4 py-3",
           isUser ? "bg-primary text-primary-foreground" : "bg-muted",
         )}
       >
         {isUser ? (
           content
         ) : (
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            components={{
-              table: ({ node: _n, ...props }) => (
-                <table
-                  className="my-2 w-full border-collapse border border-border"
-                  {...props}
-                />
-              ),
-              th: ({ node: _n, ...props }) => (
-                <th
-                  className="border border-border bg-muted/50 px-2 py-1 text-left text-sm font-medium"
-                  {...props}
-                />
-              ),
-              td: ({ node: _n, ...props }) => (
-                <td
-                  className="border border-border px-2 py-1 text-sm"
-                  {...props}
-                />
-              ),
-            }}
-          >
-            {content}
-          </ReactMarkdown>
+          <>
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                table: ({ node: _n, ...props }) => (
+                  <table
+                    className="my-2 w-full border-collapse border border-border"
+                    {...props}
+                  />
+                ),
+                th: ({ node: _n, ...props }) => (
+                  <th
+                    className="border border-border bg-muted/50 px-2 py-1 text-left text-sm font-medium"
+                    {...props}
+                  />
+                ),
+                td: ({ node: _n, ...props }) => (
+                  <td
+                    className="border border-border px-2 py-1 text-sm"
+                    {...props}
+                  />
+                ),
+              }}
+            >
+              {content}
+            </ReactMarkdown>
+            {!isComplete && (
+              <span className="ml-1 inline-block h-4 w-0.5 animate-pulse bg-foreground align-middle" />
+            )}
+          </>
         )}
       </div>
       <div className="flex items-center gap-0.5">
@@ -194,7 +204,11 @@ export function MessageBubble({
                 disabled={!content?.trim()}
                 aria-label={t("button.copy", { ns: "common" })}
               >
-                <FaCopy className="size-3" />
+                {copied ? (
+                  <LuCheck className="size-3" />
+                ) : (
+                  <FaCopy className="size-3" />
+                )}
               </Button>
             </TooltipTrigger>
             <TooltipContent>

web/src/components/chat/ChatStartingState.tsx

@@ -75,7 +75,7 @@ export function ChatStartingState({ onSendMessage }: ChatStartingStateProps) {
         </div>
       </div>
 
-      <div className="flex w-full max-w-2xl flex-row items-center gap-2 rounded-xl bg-secondary p-4">
+      <div className="flex w-full max-w-2xl flex-row items-center gap-2 rounded-xl bg-secondary p-3">
         <Input
           className="h-12 w-full flex-1 border-transparent bg-transparent text-base shadow-none focus-visible:ring-0 dark:bg-transparent"
           placeholder={t("placeholder")}

web/src/components/chat/ToolCallBubble.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/components/ui/collapsible";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import { LuChevronDown, LuChevronRight } from "react-icons/lu";
 
 type ToolCallBubbleProps = {
   name: string;
@@ -34,7 +34,7 @@ export function ToolCallBubble({
   return (
     <div
       className={cn(
-        "rounded-lg px-3 py-2",
+        "rounded-2xl px-3 py-2",
         isLeft
           ? "self-start bg-muted"
           : "self-end bg-primary text-primary-foreground",
@@ -51,9 +51,9 @@ export function ToolCallBubble({
             )}
           >
             {open ? (
-              <ChevronDown size={12} className="shrink-0" />
+              <LuChevronDown className="size-3 shrink-0" />
             ) : (
-              <ChevronRight size={12} className="shrink-0" />
+              <LuChevronRight className="size-3 shrink-0" />
             )}
             <span className="break-words font-medium">
               {isLeft ? t("call") : t("result")} {normalizedName}

web/src/components/chat/ToolCallsGroup.tsx

@@ -0,0 +1,103 @@
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { LuChevronsUpDown } from "react-icons/lu";
+import type { ToolCall } from "@/types/chat";
+
+type ToolCallsGroupProps = {
+  toolCalls: ToolCall[];
+};
+
+function normalizeName(name: string): string {
+  return name
+    .replace(/_/g, " ")
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+}
+
+export function ToolCallsGroup({ toolCalls }: ToolCallsGroupProps) {
+  const grouped = useMemo(() => {
+    const map = new Map<string, ToolCall[]>();
+    for (const tc of toolCalls) {
+      const existing = map.get(tc.name);
+      if (existing) {
+        existing.push(tc);
+      } else {
+        map.set(tc.name, [tc]);
+      }
+    }
+    return map;
+  }, [toolCalls]);
+
+  if (toolCalls.length === 0) return null;
+
+  return (
+    <div className="flex flex-col items-start gap-2">
+      {[...grouped.entries()].map(([name, calls]) => (
+        <ToolCallRow key={name} name={name} calls={calls} />
+      ))}
+    </div>
+  );
+}
+
+type ToolCallRowProps = {
+  name: string;
+  calls: ToolCall[];
+};
+
+function ToolCallRow({ name, calls }: ToolCallRowProps) {
+  const { t } = useTranslation(["views/chat"]);
+  const [open, setOpen] = useState(false);
+  const displayName = normalizeName(name);
+  const label =
+    calls.length > 1 ? `${displayName} (\u00d7${calls.length})` : displayName;
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="flex items-center gap-3 rounded-xl bg-muted px-4 py-3 text-sm text-secondary-foreground transition-colors hover:bg-muted/80">
+        <span className="font-medium">{label}</span>
+        <LuChevronsUpDown className="size-4 shrink-0 text-muted-foreground" />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="mt-1 space-y-3 rounded-xl bg-muted/40 px-4 py-3">
+          {calls.map((tc, idx) => (
+            <div
+              key={idx}
+              className={
+                calls.length > 1
+                  ? "space-y-1 border-l-2 border-border pl-3"
+                  : "space-y-1"
+              }
+            >
+              {tc.arguments && Object.keys(tc.arguments).length > 0 && (
+                <div className="text-xs">
+                  <div className="font-medium text-muted-foreground">
+                    {t("arguments")}
+                  </div>
+                  <pre className="scrollbar-container mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-background/50 p-2 text-[10px]">
+                    {JSON.stringify(tc.arguments, null, 2)}
+                  </pre>
+                </div>
+              )}
+              {tc.response && tc.response !== "" && (
+                <div className="text-xs">
+                  <div className="font-medium text-muted-foreground">
+                    {t("response")}
+                  </div>
+                  <pre className="scrollbar-container mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-background/50 p-2 text-[10px]">
+                    {tc.response}
+                  </pre>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

web/src/components/config-form/section-configs/genai.ts

@@ -5,6 +5,7 @@ const genai: SectionConfigOverrides = {
     sectionDocs: "/configuration/genai/config",
     advancedFields: ["*.base_url", "*.provider_options", "*.runtime_options"],
     hiddenFields: ["genai.enabled_in_config"],
+    restartRequired: [],
     uiSchema: {
       "ui:options": { disableNestedCard: true },
       "*": {
@@ -36,14 +37,10 @@ const genai: SectionConfigOverrides = {
         "ui:options": { size: "xs" },
       },
       "*.provider_options": {
-        additionalProperties: {
-          "ui:options": { size: "lg" },
-        },
+        "ui:field": "DictAsYamlField",
       },
       "*.runtime_options": {
-        additionalProperties: {
-          "ui:options": { size: "lg" },
-        },
+        "ui:field": "DictAsYamlField",
       },
     },
   },

web/src/components/config-form/theme/fields/DictAsYamlField.tsx

@@ -0,0 +1,112 @@
+import type { FieldPathList, FieldProps } from "@rjsf/utils";
+import yaml from "js-yaml";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+function formatYaml(value: unknown): string {
+  if (
+    value == null ||
+    (typeof value === "object" &&
+      !Array.isArray(value) &&
+      Object.keys(value as Record<string, unknown>).length === 0)
+  ) {
+    return "";
+  }
+  try {
+    return yaml.dump(value, { indent: 2, lineWidth: -1 }).trimEnd();
+  } catch {
+    return "";
+  }
+}
+
+function parseYaml(text: string): {
+  value: Record<string, unknown> | undefined;
+  error: string | undefined;
+} {
+  const trimmed = text.trim();
+  if (trimmed === "") {
+    return { value: {}, error: undefined };
+  }
+  try {
+    const parsed = yaml.load(trimmed);
+    if (
+      typeof parsed !== "object" ||
+      parsed === null ||
+      Array.isArray(parsed)
+    ) {
+      return { value: undefined, error: "Must be a YAML mapping" };
+    }
+    return { value: parsed as Record<string, unknown>, error: undefined };
+  } catch (e) {
+    const msg = e instanceof yaml.YAMLException ? e.reason : "Invalid YAML";
+    return { value: undefined, error: msg };
+  }
+}
+
+export function DictAsYamlField(props: FieldProps) {
+  const { formData, onChange, readonly, disabled, idSchema, schema } = props;
+
+  const emptyPath = useMemo(() => [] as FieldPathList, []);
+  const fieldPath =
+    (props as { fieldPathId?: { path?: FieldPathList } }).fieldPathId?.path ??
+    emptyPath;
+
+  const [text, setText] = useState(() => formatYaml(formData));
+  const [error, setError] = useState<string>();
+
+  useEffect(() => {
+    setText(formatYaml(formData));
+    setError(undefined);
+  }, [formData]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const raw = e.target.value;
+      setText(raw);
+      const { value, error: parseError } = parseYaml(raw);
+      setError(parseError);
+      if (value !== undefined) {
+        onChange(value, fieldPath);
+      }
+    },
+    [onChange, fieldPath],
+  );
+
+  const handleBlur = useCallback(
+    (_e: React.FocusEvent<HTMLTextAreaElement>) => {
+      // Reformat on blur if valid
+      const { value } = parseYaml(text);
+      if (value !== undefined) {
+        setText(formatYaml(value));
+      }
+    },
+    [text],
+  );
+
+  const id = idSchema?.$id ?? props.name;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {schema.title && (
+        <label htmlFor={id} className="text-sm font-medium">
+          {schema.title}
+        </label>
+      )}
+      <Textarea
+        id={id}
+        className={cn("font-mono text-sm", error && "border-destructive")}
+        value={text}
+        disabled={disabled || readonly}
+        placeholder={"key: value"}
+        rows={Math.max(3, text.split("\n").length + 1)}
+        onChange={handleChange}
+        onBlur={handleBlur}
+      />
+      {error && <p className="text-xs text-destructive">{error}</p>}
+      {schema.description && (
+        <p className="text-xs text-muted-foreground">{schema.description}</p>
+      )}
+    </div>
+  );
+}

web/src/components/config-form/theme/frigateTheme.ts

@@ -48,6 +48,7 @@ import { LayoutGridField } from "./fields/LayoutGridField";
 import { DetectorHardwareField } from "./fields/DetectorHardwareField";
 import { ReplaceRulesField } from "./fields/ReplaceRulesField";
 import { CameraInputsField } from "./fields/CameraInputsField";
+import { DictAsYamlField } from "./fields/DictAsYamlField";
 
 export interface FrigateTheme {
   widgets: RegistryWidgetsType;
@@ -103,5 +104,6 @@ export const frigateTheme: FrigateTheme = {
     DetectorHardwareField: DetectorHardwareField,
     ReplaceRulesField: ReplaceRulesField,
     CameraInputsField: CameraInputsField,
+    DictAsYamlField: DictAsYamlField,
   },
 };

web/src/pages/Chat.tsx

@@ -1,12 +1,13 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { FaArrowUpLong } from "react-icons/fa6";
+import { LuCircleAlert } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
 import axios from "axios";
 import { ChatEventThumbnailsRow } from "@/components/chat/ChatEventThumbnailsRow";
 import { MessageBubble } from "@/components/chat/ChatMessage";
-import { ToolCallBubble } from "@/components/chat/ToolCallBubble";
+import { ToolCallsGroup } from "@/components/chat/ToolCallsGroup";
 import { ChatStartingState } from "@/components/chat/ChatStartingState";
 import type { ChatMessage } from "@/types/chat";
 import {
@@ -20,6 +21,21 @@ export default function ChatPage() {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    document.title = t("documentTitle");
+  }, [t]);
+
+  // Auto-scroll to bottom when messages change, but only if near bottom
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const isNearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 150;
+    if (isNearBottom) {
+      el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+    }
+  }, [messages]);
 
   const submitConversation = useCallback(
     async (messagesToSend: ChatMessage[]) => {
@@ -77,7 +93,7 @@ export default function ChatPage() {
   );
 
   return (
-    <div className="flex size-full justify-center p-2">
+    <div className="flex size-full justify-center p-2 md:p-4">
       <div className="flex size-full flex-col xl:w-[50%] 3xl:w-[35%]">
         {messages.length === 0 ? (
           <ChatStartingState
@@ -87,83 +103,83 @@ export default function ChatPage() {
             }}
           />
         ) : (
-          <div className="scrollbar-container flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto">
-            {messages.map((msg, i) => {
-              const isStreamingPlaceholder =
-                i === messages.length - 1 &&
-                msg.role === "assistant" &&
-                isLoading &&
-                !msg.content?.trim() &&
-                !(msg.toolCalls && msg.toolCalls.length > 0);
-              if (isStreamingPlaceholder) {
-                return <div key={i} />;
-              }
-              return (
-                <div key={i} className="flex flex-col gap-2">
-                  {msg.role === "assistant" && msg.toolCalls && (
-                    <>
-                      {msg.toolCalls.map((tc, tcIdx) => (
-                        <div key={tcIdx} className="flex flex-col gap-2">
-                          <ToolCallBubble
-                            name={tc.name}
-                            arguments={tc.arguments}
-                            side="left"
-                          />
-                          {tc.response && (
-                            <ToolCallBubble
-                              name={tc.name}
-                              response={tc.response}
-                              side="right"
-                            />
-                          )}
-                        </div>
-                      ))}
-                    </>
-                  )}
-                  <MessageBubble
-                    role={msg.role}
-                    content={msg.content}
-                    messageIndex={i}
-                    onEditSubmit={
-                      msg.role === "user" ? handleEditSubmit : undefined
-                    }
-                    isComplete={
-                      msg.role === "user" ||
-                      !isLoading ||
-                      i < messages.length - 1
-                    }
-                  />
-                  {msg.role === "assistant" &&
-                    (() => {
-                      const isComplete = !isLoading || i < messages.length - 1;
-                      if (!isComplete) return null;
-                      const events = getEventIdsFromSearchObjectsToolCalls(
-                        msg.toolCalls,
-                      );
-                      return <ChatEventThumbnailsRow events={events} />;
-                    })()}
-                </div>
-              );
-            })}
-            {(() => {
-              const lastMsg = messages[messages.length - 1];
-              const showProcessing =
-                isLoading &&
-                lastMsg?.role === "assistant" &&
-                !lastMsg.content?.trim() &&
-                !(lastMsg.toolCalls && lastMsg.toolCalls.length > 0);
-              return showProcessing ? (
-                <div className="self-start rounded-lg bg-muted px-3 py-2 text-muted-foreground">
-                  {t("processing")}
-                </div>
-              ) : null;
-            })()}
-            {error && (
-              <p className="self-start text-sm text-destructive" role="alert">
-                {error}
-              </p>
-            )}
-          </div>
+          <>
+            <div
+              ref={scrollRef}
+              className="scrollbar-container flex min-h-0 w-full flex-1 flex-col gap-3 overflow-y-auto"
+            >
+              {messages.map((msg, i) => {
+                const isLastAssistant =
+                  i === messages.length - 1 && msg.role === "assistant";
+                const isComplete =
+                  msg.role === "user" || !isLoading || !isLastAssistant;
+                const hasToolCalls = msg.toolCalls && msg.toolCalls.length > 0;
+                const hasContent = !!msg.content?.trim();
+                const showProcessing =
+                  isLastAssistant && isLoading && !hasContent;
+
+                // Hide empty placeholder only when there are no tool calls yet
+                if (
+                  isLastAssistant &&
+                  isLoading &&
+                  !hasContent &&
+                  !hasToolCalls
+                )
+                  return (
+                    <div
+                      key={i}
+                      className="flex items-center gap-2 self-start rounded-2xl bg-muted px-5 py-4"
+                    >
+                      <span className="size-2.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.32s]" />
+                      <span className="size-2.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.16s]" />
+                      <span className="size-2.5 animate-bounce rounded-full bg-muted-foreground/60" />
+                    </div>
+                  );
+
+                return (
+                  <div key={i} className="flex flex-col gap-2">
+                    {msg.role === "assistant" && hasToolCalls && (
+                      <ToolCallsGroup toolCalls={msg.toolCalls!} />
+                    )}
+                    {showProcessing ? (
+                      <div className="flex items-center gap-2 self-start rounded-2xl bg-muted px-5 py-4">
+                        <span className="size-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.3s]" />
+                        <span className="size-2 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.15s]" />
+                        <span className="size-2 animate-bounce rounded-full bg-muted-foreground/60" />
+                      </div>
+                    ) : (
+                      <MessageBubble
+                        role={msg.role}
+                        content={msg.content}
+                        messageIndex={i}
+                        onEditSubmit={
+                          msg.role === "user" ? handleEditSubmit : undefined
+                        }
+                        isComplete={isComplete}
+                      />
+                    )}
+                    {msg.role === "assistant" &&
+                      isComplete &&
+                      (() => {
+                        const events = getEventIdsFromSearchObjectsToolCalls(
+                          msg.toolCalls,
+                        );
+                        return <ChatEventThumbnailsRow events={events} />;
+                      })()}
+                  </div>
+                );
+              })}
+              {error && (
+                <p
+                  className="flex items-center gap-1.5 self-start text-sm text-destructive"
+                  role="alert"
+                >
+                  <LuCircleAlert className="size-3.5 shrink-0" />
+                  {error}
+                </p>
+              )}
+            </div>
+          </>
         )}
         {messages.length > 0 && (
           <ChatEntry
@@ -202,7 +218,7 @@ function ChatEntry({
   };
 
   return (
-    <div className="flex w-full flex-col items-center justify-center rounded-xl bg-secondary p-2">
+    <div className="mt-2 flex w-full flex-col items-center justify-center rounded-xl bg-secondary p-3">
       <div className="flex w-full flex-row items-center gap-2">
         <Input
           className="w-full flex-1 border-transparent bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent"