Chat improvements (#22823)

* Add score fusion helpers for find_similar_objects chat tool

* Add candidate query builder for find_similar_objects chat tool

* register find_similar_objects chat tool definition

* implement _execute_find_similar_objects chat tool dispatcher

* Dispatch find_similar_objects in chat tool executor

* Teach chat system prompt when to use find_similar_objects

* Add i18n strings for find_similar_objects chat tool

* Add frontend extractor for find_similar_objects tool response

* Render anchor badge and similarity scores in chat results

* formatting

* filter similarity results in python, not sqlite-vec

* extract pure chat helpers to chat_util module

* Teach chat system prompt about attached_event marker

* Add parseAttachedEvent and prependAttachment helpers

* Add i18n strings for chat event attachments

* Add ChatAttachmentChip component

* Make chat thumbnails attach to composer on click

* Render attachment chip in user chat bubbles

* Add ChatQuickReplies pill row component

* Add ChatPaperclipButton with event picker popover

* Wire event attachments into chat composer and messages

* add ability to stop streaming

* tweak cursor to appear at the end of the same line of the streaming response

* use abort signal

* add tooltip

* display label and camera on attachment chip

web/src/pages/Chat.tsx

@@ -1,17 +1,22 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { FaArrowUpLong } from "react-icons/fa6";
+import { FaArrowUpLong, FaStop } from "react-icons/fa6";
 import { LuCircleAlert } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import axios from "axios";
 import { ChatEventThumbnailsRow } from "@/components/chat/ChatEventThumbnailsRow";
 import { MessageBubble } from "@/components/chat/ChatMessage";
 import { ToolCallsGroup } from "@/components/chat/ToolCallsGroup";
 import { ChatStartingState } from "@/components/chat/ChatStartingState";
+import { ChatAttachmentChip } from "@/components/chat/ChatAttachmentChip";
+import { ChatQuickReplies } from "@/components/chat/ChatQuickReplies";
+import { ChatPaperclipButton } from "@/components/chat/ChatPaperclipButton";
 import type { ChatMessage } from "@/types/chat";
 import {
   getEventIdsFromSearchObjectsToolCalls,
+  getFindSimilarObjectsFromToolCalls,
+  prependAttachment,
   streamChatCompletion,
 } from "@/utils/chatUtil";
 
@@ -21,7 +26,9 @@ export default function ChatPage() {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [attachedEventId, setAttachedEventId] = useState<string | null>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
     document.title = t("documentTitle");
@@ -64,22 +71,59 @@ export default function ChatPage() {
         ...(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"),
-      });
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      await streamChatCompletion(
+        url,
+        headers,
+        apiMessages,
+        {
+          updateMessages: (updater) => setMessages(updater),
+          onError: (message) => setError(message),
+          onDone: () => {
+            abortRef.current = null;
+            setIsLoading(false);
+          },
+          defaultErrorMessage: t("error"),
+        },
+        controller.signal,
+      );
     },
     [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 recentEventIds = useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const msg = messages[i];
+      if (msg.role !== "assistant" || !msg.toolCalls) continue;
+      const similar = getFindSimilarObjectsFromToolCalls(msg.toolCalls);
+      if (similar) return similar.results.map((e) => e.id);
+      const events = getEventIdsFromSearchObjectsToolCalls(msg.toolCalls);
+      if (events.length > 0) return events.map((e) => e.id);
+    }
+    return [];
+  }, [messages]);
+
+  const sendMessage = useCallback(
+    (textOverride?: string) => {
+      const text = (textOverride ?? input).trim();
+      if (!text || isLoading) return;
+      const wireText = attachedEventId
+        ? prependAttachment(text, attachedEventId)
+        : text;
+      setInput("");
+      setAttachedEventId(null);
+      submitConversation([...messages, { role: "user", content: wireText }]);
+    },
+    [attachedEventId, input, isLoading, messages, submitConversation],
+  );
+
+  const stopGeneration = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setIsLoading(false);
+  }, []);
 
   const handleEditSubmit = useCallback(
     (messageIndex: number, newContent: string) => {
@@ -92,6 +136,10 @@ export default function ChatPage() {
     [messages, submitConversation],
   );
 
+  const handleClearAttachment = useCallback(() => {
+    setAttachedEventId(null);
+  }, []);
+
   return (
     <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%]">
@@ -161,10 +209,27 @@ export default function ChatPage() {
                     {msg.role === "assistant" &&
                       isComplete &&
                       (() => {
+                        const similar = getFindSimilarObjectsFromToolCalls(
+                          msg.toolCalls,
+                        );
+                        if (similar) {
+                          return (
+                            <ChatEventThumbnailsRow
+                              events={similar.results}
+                              anchor={similar.anchor}
+                              onAttach={setAttachedEventId}
+                            />
+                          );
+                        }
                         const events = getEventIdsFromSearchObjectsToolCalls(
                           msg.toolCalls,
                         );
-                        return <ChatEventThumbnailsRow events={events} />;
+                        return (
+                          <ChatEventThumbnailsRow
+                            events={events}
+                            onAttach={setAttachedEventId}
+                          />
+                        );
                       })()}
                   </div>
                 );
@@ -188,6 +253,11 @@ export default function ChatPage() {
             sendMessage={sendMessage}
             isLoading={isLoading}
             placeholder={t("placeholder")}
+            attachedEventId={attachedEventId}
+            onClearAttachment={handleClearAttachment}
+            onAttach={setAttachedEventId}
+            onStop={stopGeneration}
+            recentEventIds={recentEventIds}
           />
         )}
       </div>
@@ -198,9 +268,14 @@ export default function ChatPage() {
 type ChatEntryProps = {
   input: string;
   setInput: (value: string) => void;
-  sendMessage: () => void;
+  sendMessage: (textOverride?: string) => void;
   isLoading: boolean;
   placeholder: string;
+  attachedEventId: string | null;
+  onClearAttachment: () => void;
+  onAttach: (eventId: string) => void;
+  onStop: () => void;
+  recentEventIds: string[];
 };
 
 function ChatEntry({
@@ -209,6 +284,11 @@ function ChatEntry({
   sendMessage,
   isLoading,
   placeholder,
+  attachedEventId,
+  onClearAttachment,
+  onAttach,
+  onStop,
+  recentEventIds,
 }: ChatEntryProps) {
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && !e.shiftKey) {
@@ -218,8 +298,28 @@ function ChatEntry({
   };
 
   return (
-    <div className="mt-2 flex w-full flex-col items-center justify-center rounded-xl bg-secondary p-3">
+    <div className="mt-2 flex w-full flex-col items-stretch justify-center gap-2 rounded-xl bg-secondary p-3">
+      {attachedEventId && (
+        <div className="flex items-center">
+          <ChatAttachmentChip
+            eventId={attachedEventId}
+            mode="composer"
+            onRemove={onClearAttachment}
+          />
+        </div>
+      )}
+      {attachedEventId && (
+        <ChatQuickReplies
+          onSend={(text) => sendMessage(text)}
+          disabled={isLoading}
+        />
+      )}
       <div className="flex w-full flex-row items-center gap-2">
+        <ChatPaperclipButton
+          recentEventIds={recentEventIds}
+          onAttach={onAttach}
+          disabled={isLoading || attachedEventId != null}
+        />
         <Input
           className="w-full flex-1 border-transparent bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent"
           placeholder={placeholder}
@@ -228,14 +328,24 @@ function ChatEntry({
           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>
+        {isLoading ? (
+          <Button
+            variant="destructive"
+            className="size-10 shrink-0 rounded-full"
+            onClick={onStop}
+          >
+            <FaStop className="size-3" />
+          </Button>
+        ) : (
+          <Button
+            variant="select"
+            className="size-10 shrink-0 rounded-full"
+            disabled={!input.trim()}
+            onClick={() => sendMessage()}
+          >
+            <FaArrowUpLong className="size-4" />
+          </Button>
+        )}
       </div>
     </div>
   );