Add GenAI Backend Streaming and Chat (#22152)

* Add basic chat page with entry

* Add chat history

* processing

* Add markdown

* Improvements

* Adjust timing format

* Reduce fields in response

* More time parsing improvements

* Show tool calls separately from message

* Add title

* Improve UI handling

* Support streaming

* Full streaming support

* Fix tool calling

* Add copy button

* Improvements to UI

* Improve default behavior

* Implement message editing

* Add sub label to event tool filtering

* Cleanup

* Cleanup UI and prompt

* Cleanup UI bubbles

* Fix loading

* Add support for markdown tables

* Add thumbnail images to object results

* Add a starting state for chat

* Clenaup

web/src/App.tsx

@@ -27,6 +27,7 @@ const Settings = lazy(() => import("@/pages/Settings"));
 const UIPlayground = lazy(() => import("@/pages/UIPlayground"));
 const FaceLibrary = lazy(() => import("@/pages/FaceLibrary"));
 const Classification = lazy(() => import("@/pages/ClassificationModel"));
+const Chat = lazy(() => import("@/pages/Chat"));
 const Logs = lazy(() => import("@/pages/Logs"));
 const AccessDenied = lazy(() => import("@/pages/AccessDenied"));
 
@@ -106,6 +107,7 @@ function DefaultAppView() {
               <Route path="/logs" element={<Logs />} />
               <Route path="/faces" element={<FaceLibrary />} />
               <Route path="/classification" element={<Classification />} />
+              <Route path="/chat" element={<Chat />} />
               <Route path="/playground" element={<UIPlayground />} />
             </Route>
             <Route path="/unauthorized" element={<AccessDenied />} />

web/src/components/chat/ChatEventThumbnailsRow.tsx

@@ -0,0 +1,42 @@
+import { useApiHost } from "@/api";
+
+type ChatEventThumbnailsRowProps = {
+  events: { id: string }[];
+};
+
+/**
+ * Horizontal scroll row of event thumbnail images for chat (e.g. after search_objects).
+ * Renders nothing when events is empty.
+ */
+export function ChatEventThumbnailsRow({
+  events,
+}: ChatEventThumbnailsRowProps) {
+  const apiHost = useApiHost();
+
+  if (events.length === 0) return null;
+
+  return (
+    <div className="flex min-w-0 max-w-full flex-col gap-1 self-start">
+      <div className="scrollbar-container min-w-0 overflow-x-auto">
+        <div className="flex w-max gap-2">
+          {events.map((event) => (
+            <a
+              key={event.id}
+              href={`/explore?event_id=${event.id}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="relative aspect-square size-32 shrink-0 overflow-hidden rounded-lg"
+            >
+              <img
+                className="size-full object-cover"
+                src={`${apiHost}api/events/${event.id}/thumbnail.webp`}
+                alt=""
+                loading="lazy"
+              />
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/chat/ChatMessage.tsx

@@ -0,0 +1,208 @@
+import { useState, useEffect, useRef } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useTranslation } from "react-i18next";
+import copy from "copy-to-clipboard";
+import { toast } from "sonner";
+import { FaCopy, FaPencilAlt } from "react-icons/fa";
+import { FaArrowUpLong } from "react-icons/fa6";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type MessageBubbleProps = {
+  role: "user" | "assistant";
+  content: string;
+  messageIndex?: number;
+  onEditSubmit?: (messageIndex: number, newContent: string) => void;
+  isComplete?: boolean;
+};
+
+export function MessageBubble({
+  role,
+  content,
+  messageIndex = 0,
+  onEditSubmit,
+  isComplete = true,
+}: MessageBubbleProps) {
+  const { t } = useTranslation(["views/chat", "common"]);
+  const isUser = role === "user";
+  const [isEditing, setIsEditing] = useState(false);
+  const [draftContent, setDraftContent] = useState(content);
+  const editInputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    setDraftContent(content);
+  }, [content]);
+
+  useEffect(() => {
+    if (isEditing) {
+      editInputRef.current?.focus();
+      editInputRef.current?.setSelectionRange(
+        editInputRef.current.value.length,
+        editInputRef.current.value.length,
+      );
+    }
+  }, [isEditing]);
+
+  const handleCopy = () => {
+    const text = content?.trim() || "";
+    if (!text) return;
+    if (copy(text)) {
+      toast.success(t("button.copiedToClipboard", { ns: "common" }));
+    }
+  };
+
+  const handleEditClick = () => {
+    setDraftContent(content);
+    setIsEditing(true);
+  };
+
+  const handleEditSubmit = () => {
+    const trimmed = draftContent.trim();
+    if (!trimmed || onEditSubmit == null) return;
+    onEditSubmit(messageIndex, trimmed);
+    setIsEditing(false);
+  };
+
+  const handleEditCancel = () => {
+    setDraftContent(content);
+    setIsEditing(false);
+  };
+
+  const handleEditKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleEditSubmit();
+    }
+    if (e.key === "Escape") {
+      handleEditCancel();
+    }
+  };
+
+  if (isUser && isEditing) {
+    return (
+      <div className="flex w-full max-w-full flex-col gap-2 self-end">
+        <Textarea
+          ref={editInputRef}
+          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"
+          placeholder={t("placeholder")}
+          rows={3}
+        />
+        <div className="flex items-center gap-2 self-end">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-muted-foreground hover:text-foreground"
+            onClick={handleEditCancel}
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            variant="select"
+            size="icon"
+            className="size-9 rounded-full"
+            disabled={!draftContent.trim()}
+            onClick={handleEditSubmit}
+            aria-label={t("send")}
+          >
+            <FaArrowUpLong size="16" />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-1",
+        isUser ? "items-end self-end" : "items-start self-start",
+      )}
+    >
+      <div
+        className={cn(
+          "rounded-lg px-3 py-2",
+          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>
+        )}
+      </div>
+      <div className="flex items-center gap-0.5">
+        {isUser && onEditSubmit != null && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7 text-muted-foreground hover:text-foreground"
+                onClick={handleEditClick}
+                aria-label={t("button.edit", { ns: "common" })}
+              >
+                <FaPencilAlt className="size-3" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {t("button.edit", { ns: "common" })}
+            </TooltipContent>
+          </Tooltip>
+        )}
+        {isComplete && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7 text-muted-foreground hover:text-foreground"
+                onClick={handleCopy}
+                disabled={!content?.trim()}
+                aria-label={t("button.copy", { ns: "common" })}
+              >
+                <FaCopy className="size-3" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {t("button.copy", { ns: "common" })}
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/components/chat/ChatStartingState.tsx

@@ -0,0 +1,89 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { FaArrowUpLong } from "react-icons/fa6";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import type { StartingRequest } from "@/types/chat";
+
+type ChatStartingStateProps = {
+  onSendMessage: (message: string) => void;
+};
+
+export function ChatStartingState({ onSendMessage }: ChatStartingStateProps) {
+  const { t } = useTranslation(["views/chat"]);
+  const [input, setInput] = useState("");
+
+  const defaultRequests: StartingRequest[] = [
+    {
+      label: t("starting_requests.show_recent_events"),
+      prompt: t("starting_requests_prompts.show_recent_events"),
+    },
+    {
+      label: t("starting_requests.show_camera_status"),
+      prompt: t("starting_requests_prompts.show_camera_status"),
+    },
+  ];
+
+  const handleRequestClick = (prompt: string) => {
+    onSendMessage(prompt);
+  };
+
+  const handleSubmit = () => {
+    const text = input.trim();
+    if (!text) return;
+    onSendMessage(text);
+    setInput("");
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-6 p-8">
+      <div className="flex flex-col items-center gap-2">
+        <h1 className="text-4xl font-bold text-foreground">{t("title")}</h1>
+        <p className="text-muted-foreground">{t("subtitle")}</p>
+      </div>
+
+      <div className="flex w-full max-w-2xl flex-col items-center gap-4">
+        <p className="text-center text-sm text-muted-foreground">
+          {t("suggested_requests")}
+        </p>
+        <div className="flex w-full flex-wrap justify-center gap-2">
+          {defaultRequests.map((request, idx) => (
+            <Button
+              key={idx}
+              variant="outline"
+              className="max-w-sm text-sm"
+              onClick={() => handleRequestClick(request.prompt)}
+            >
+              {request.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex w-full max-w-2xl flex-row items-center gap-2 rounded-xl bg-secondary p-4">
+        <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")}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+        <Button
+          variant="select"
+          className="size-10 shrink-0 rounded-full"
+          disabled={!input.trim()}
+          onClick={handleSubmit}
+        >
+          <FaArrowUpLong size="18" />
+        </Button>
+      </div>
+    </div>
+  );
+}

web/src/components/chat/ToolCallBubble.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ChevronDown, ChevronRight } from "lucide-react";
+
+type ToolCallBubbleProps = {
+  name: string;
+  arguments?: Record<string, unknown>;
+  response?: string;
+  side: "left" | "right";
+};
+
+export function ToolCallBubble({
+  name,
+  arguments: args,
+  response,
+  side,
+}: ToolCallBubbleProps) {
+  const { t } = useTranslation(["views/chat"]);
+  const [open, setOpen] = useState(false);
+  const isLeft = side === "left";
+  const normalizedName = name
+    .replace(/_/g, " ")
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg px-3 py-2",
+        isLeft
+          ? "self-start bg-muted"
+          : "self-end bg-primary text-primary-foreground",
+      )}
+    >
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <CollapsibleTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              "h-auto w-full min-w-0 justify-start gap-2 whitespace-normal p-0 text-left text-xs hover:bg-transparent",
+              !isLeft && "hover:text-primary-foreground",
+            )}
+          >
+            {open ? (
+              <ChevronDown size={12} className="shrink-0" />
+            ) : (
+              <ChevronRight size={12} className="shrink-0" />
+            )}
+            <span className="break-words font-medium">
+              {isLeft ? t("call") : t("result")} {normalizedName}
+            </span>
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="mt-2 space-y-2">
+            {isLeft && args && Object.keys(args).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-muted/50 p-2 text-[10px]">
+                  {JSON.stringify(args, null, 2)}
+                </pre>
+              </div>
+            )}
+            {!isLeft && response && response !== "" && (
+              <div className="text-xs">
+                <div className="font-medium opacity-80">{t("response")}</div>
+                <pre className="scrollbar-container mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-primary/20 p-2 text-[10px]">
+                  {response}
+                </pre>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

web/src/hooks/use-navigation.ts

@@ -6,7 +6,7 @@ import { isDesktop } from "react-device-detect";
 import { FaCompactDisc, FaVideo } from "react-icons/fa";
 import { IoSearch } from "react-icons/io5";
 import { LuConstruction } from "react-icons/lu";
-import { MdCategory, MdVideoLibrary } from "react-icons/md";
+import { MdCategory, MdChat, MdVideoLibrary } from "react-icons/md";
 import { TbFaceId } from "react-icons/tb";
 import useSWR from "swr";
 import { useIsAdmin } from "./use-is-admin";
@@ -18,6 +18,7 @@ export const ID_EXPORT = 4;
 export const ID_PLAYGROUND = 5;
 export const ID_FACE_LIBRARY = 6;
 export const ID_CLASSIFICATION = 7;
+export const ID_CHAT = 8;
 
 export default function useNavigation(
   variant: "primary" | "secondary" = "primary",
@@ -82,7 +83,15 @@ export default function useNavigation(
           url: "/classification",
           enabled: isDesktop && isAdmin,
         },
+        {
+          id: ID_CHAT,
+          variant,
+          icon: MdChat,
+          title: "menu.chat",
+          url: "/chat",
+          enabled: isDesktop && isAdmin && config?.genai?.model !== "none",
+        },
       ] as NavData[],
-    [config?.face_recognition?.enabled, variant, isAdmin],
+    [config?.face_recognition?.enabled, config?.genai?.model, variant, isAdmin],
   );
 }

web/src/pages/Chat.tsx

@@ -0,0 +1,226 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { FaArrowUpLong } from "react-icons/fa6";
+import { useTranslation } from "react-i18next";
+import { useState, useCallback } 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 { ChatStartingState } from "@/components/chat/ChatStartingState";
+import type { ChatMessage } from "@/types/chat";
+import {
+  getEventIdsFromSearchObjectsToolCalls,
+  streamChatCompletion,
+} from "@/utils/chatUtil";
+
+export default function ChatPage() {
+  const { t } = useTranslation(["views/chat"]);
+  const [input, setInput] = useState("");
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submitConversation = useCallback(
+    async (messagesToSend: ChatMessage[]) => {
+      if (isLoading) return;
+      const last = messagesToSend[messagesToSend.length - 1];
+      if (!last || last.role !== "user" || !last.content.trim()) return;
+
+      setError(null);
+      const assistantPlaceholder: ChatMessage = {
+        role: "assistant",
+        content: "",
+        toolCalls: undefined,
+      };
+      setMessages([...messagesToSend, assistantPlaceholder]);
+      setIsLoading(true);
+
+      const apiMessages = messagesToSend.map((m) => ({
+        role: m.role,
+        content: m.content,
+      }));
+
+      const baseURL = axios.defaults.baseURL ?? "";
+      const url = `${baseURL}chat/completion`;
+      const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+        ...(axios.defaults.headers.common as Record<string, string>),
+      };
+
+      await streamChatCompletion(url, headers, apiMessages, {
+        updateMessages: (updater) => setMessages(updater),
+        onError: (message) => setError(message),
+        onDone: () => setIsLoading(false),
+        defaultErrorMessage: t("error"),
+      });
+    },
+    [isLoading, t],
+  );
+
+  const sendMessage = useCallback(() => {
+    const text = input.trim();
+    if (!text || isLoading) return;
+    setInput("");
+    submitConversation([...messages, { role: "user", content: text }]);
+  }, [input, isLoading, messages, submitConversation]);
+
+  const handleEditSubmit = useCallback(
+    (messageIndex: number, newContent: string) => {
+      const newList: ChatMessage[] = [
+        ...messages.slice(0, messageIndex),
+        { role: "user", content: newContent },
+      ];
+      submitConversation(newList);
+    },
+    [messages, submitConversation],
+  );
+
+  return (
+    <div className="flex size-full justify-center p-2">
+      <div className="flex size-full flex-col xl:w-[50%] 3xl:w-[35%]">
+        {messages.length === 0 ? (
+          <ChatStartingState
+            onSendMessage={(message) => {
+              setInput("");
+              submitConversation([{ role: "user", content: message }]);
+            }}
+          />
+        ) : (
+          <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>
+        )}
+        {messages.length > 0 && (
+          <ChatEntry
+            input={input}
+            setInput={setInput}
+            sendMessage={sendMessage}
+            isLoading={isLoading}
+            placeholder={t("placeholder")}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+type ChatEntryProps = {
+  input: string;
+  setInput: (value: string) => void;
+  sendMessage: () => void;
+  isLoading: boolean;
+  placeholder: string;
+};
+
+function ChatEntry({
+  input,
+  setInput,
+  sendMessage,
+  isLoading,
+  placeholder,
+}: ChatEntryProps) {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+
+  return (
+    <div className="flex w-full flex-col items-center justify-center rounded-xl bg-secondary p-2">
+      <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"
+          placeholder={placeholder}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          aria-busy={isLoading}
+        />
+        <Button
+          variant="select"
+          className="size-10 shrink-0 rounded-full"
+          disabled={!input.trim() || isLoading}
+          onClick={sendMessage}
+        >
+          <FaArrowUpLong size="16" />
+        </Button>
+      </div>
+    </div>
+  );
+}

web/src/types/chat.ts

@@ -0,0 +1,16 @@
+export type ToolCall = {
+  name: string;
+  arguments?: Record<string, unknown>;
+  response?: string;
+};
+
+export type ChatMessage = {
+  role: "user" | "assistant";
+  content: string;
+  toolCalls?: ToolCall[];
+};
+
+export type StartingRequest = {
+  label: string;
+  prompt: string;
+};

web/src/utils/chatUtil.ts

@@ -0,0 +1,193 @@
+import type { ChatMessage, ToolCall } from "@/types/chat";
+
+export type StreamChatCallbacks = {
+  /** Update the messages array (e.g. pass to setState). */
+  updateMessages: (updater: (prev: ChatMessage[]) => ChatMessage[]) => void;
+  /** Called when the stream sends an error or fetch fails. */
+  onError: (message: string) => void;
+  /** Called when the stream finishes (success or error). */
+  onDone: () => void;
+  /** Message used when fetch throws and no server error is available. */
+  defaultErrorMessage?: string;
+};
+
+type StreamChunk =
+  | { type: "error"; error: string }
+  | { type: "tool_calls"; tool_calls: ToolCall[] }
+  | { type: "content"; delta: string };
+
+/**
+ * POST to chat/completion with stream: true, parse NDJSON stream, and invoke
+ * callbacks so the caller can update UI (e.g. React state).
+ */
+export async function streamChatCompletion(
+  url: string,
+  headers: Record<string, string>,
+  apiMessages: { role: string; content: string }[],
+  callbacks: StreamChatCallbacks,
+): Promise<void> {
+  const {
+    updateMessages,
+    onError,
+    onDone,
+    defaultErrorMessage = "Something went wrong. Please try again.",
+  } = callbacks;
+
+  try {
+    const res = await fetch(url, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({ messages: apiMessages, stream: true }),
+    });
+
+    if (!res.ok) {
+      const errBody = await res.json().catch(() => ({}));
+      const message = (errBody as { error?: string }).error ?? res.statusText;
+      onError(message);
+      onDone();
+      return;
+    }
+
+    const reader = res.body?.getReader();
+    const decoder = new TextDecoder();
+    if (!reader) {
+      onError("No response body");
+      onDone();
+      return;
+    }
+
+    let buffer = "";
+    let hadStreamError = false;
+
+    const applyChunk = (data: StreamChunk) => {
+      if (data.type === "error") {
+        onError(data.error);
+        updateMessages((prev) =>
+          prev.filter((m) => !(m.role === "assistant" && m.content === "")),
+        );
+        return "break";
+      }
+      if (data.type === "tool_calls" && data.tool_calls?.length) {
+        updateMessages((prev) => {
+          const next = [...prev];
+          const lastMsg = next[next.length - 1];
+          if (lastMsg?.role === "assistant")
+            next[next.length - 1] = {
+              ...lastMsg,
+              toolCalls: data.tool_calls,
+            };
+          return next;
+        });
+        return "continue";
+      }
+      if (data.type === "content" && data.delta !== undefined) {
+        updateMessages((prev) => {
+          const next = [...prev];
+          const lastMsg = next[next.length - 1];
+          if (lastMsg?.role === "assistant")
+            next[next.length - 1] = {
+              ...lastMsg,
+              content: lastMsg.content + data.delta,
+            };
+          return next;
+        });
+        return "continue";
+      }
+      return "continue";
+    };
+
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() ?? "";
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed) continue;
+        try {
+          const data = JSON.parse(trimmed) as StreamChunk & { type: string };
+          const result = applyChunk(data as StreamChunk);
+          if (result === "break") {
+            hadStreamError = true;
+            break;
+          }
+        } catch {
+          // skip malformed JSON lines
+        }
+      }
+      if (hadStreamError) break;
+    }
+
+    // Flush remaining buffer
+    if (!hadStreamError && buffer.trim()) {
+      try {
+        const data = JSON.parse(buffer.trim()) as StreamChunk & {
+          type: string;
+          delta?: string;
+        };
+        if (data.type === "content" && data.delta !== undefined) {
+          updateMessages((prev) => {
+            const next = [...prev];
+            const lastMsg = next[next.length - 1];
+            if (lastMsg?.role === "assistant")
+              next[next.length - 1] = {
+                ...lastMsg,
+                content: lastMsg.content + data.delta!,
+              };
+            return next;
+          });
+        }
+      } catch {
+        // ignore final malformed chunk
+      }
+    }
+
+    if (!hadStreamError) {
+      updateMessages((prev) => {
+        const next = [...prev];
+        const lastMsg = next[next.length - 1];
+        if (lastMsg?.role === "assistant" && lastMsg.content === "")
+          next[next.length - 1] = { ...lastMsg, content: " " };
+        return next;
+      });
+    }
+  } catch {
+    onError(defaultErrorMessage);
+    updateMessages((prev) =>
+      prev.filter((m) => !(m.role === "assistant" && m.content === "")),
+    );
+  } finally {
+    onDone();
+  }
+}
+
+/**
+ * Parse search_objects tool call response(s) into event ids for thumbnails.
+ */
+export function getEventIdsFromSearchObjectsToolCalls(
+  toolCalls: ToolCall[] | undefined,
+): { id: string }[] {
+  if (!toolCalls?.length) return [];
+  const results: { id: string }[] = [];
+  for (const tc of toolCalls) {
+    if (tc.name !== "search_objects" || !tc.response?.trim()) continue;
+    try {
+      const parsed = JSON.parse(tc.response) as unknown;
+      if (!Array.isArray(parsed)) continue;
+      for (const item of parsed) {
+        if (
+          item &&
+          typeof item === "object" &&
+          "id" in item &&
+          typeof (item as { id: unknown }).id === "string"
+        ) {
+          results.push({ id: (item as { id: string }).id });
+        }
+      }
+    } catch {
+      // ignore parse errors
+    }
+  }
+  return results;
+}

web/src/utils/i18n.ts

@@ -46,6 +46,7 @@ i18n
       "components/icons",
       "components/player",
       "views/events",
+      "views/chat",
       "views/explore",
       "views/live",
       "views/settings",