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
2026-04-19 23:08:08 +02:00 · 2026-04-09 15:31:37 -05:00
parent 556d5d8c9d
commit 98c2fe00c1
12 changed files with 1318 additions and 109 deletions
--- a/web/public/locales/en/views/chat.json
+++ b/web/public/locales/en/views/chat.json
@@ -12,6 +12,23 @@
  "result": "Result",
  "arguments": "Arguments:",
  "response": "Response:",
+  "attachment_chip_label": "{{label}} on {{camera}}",
+  "attachment_chip_remove": "Remove attachment",
+  "open_in_explore": "Open in Explore",
+  "attach_event_aria": "Attach event {{eventId}}",
+  "attachment_picker_paste_label": "Or paste event ID",
+  "attachment_picker_attach": "Attach",
+  "attachment_picker_placeholder": "Attach an event",
+  "quick_reply_find_similar": "Find similar sightings",
+  "quick_reply_tell_me_more": "Tell me more about this",
+  "quick_reply_when_else": "When else was it seen?",
+  "quick_reply_find_similar_text": "Find similar sightings to this.",
+  "quick_reply_tell_me_more_text": "Tell me more about this one.",
+  "quick_reply_when_else_text": "When else was this seen?",
+  "anchor": "Reference",
+  "similarity_score": "Similarity",
+  "no_similar_objects_found": "No similar objects found.",
+  "semantic_search_required": "Semantic search must be enabled to find similar objects.",
  "send": "Send",
  "suggested_requests": "Try asking:",
  "starting_requests": {
--- a/web/src/components/chat/ChatAttachmentChip.tsx
+++ b/web/src/components/chat/ChatAttachmentChip.tsx
@@ -0,0 +1,111 @@
+import { useApiHost } from "@/api";
+import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
+import { useTranslation } from "react-i18next";
+import useSWR from "swr";
+import { LuX, LuExternalLink } from "react-icons/lu";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { cn } from "@/lib/utils";
+import { getTranslatedLabel } from "@/utils/i18n";
+
+type ChatAttachmentChipProps = {
+  eventId: string;
+  mode: "composer" | "bubble";
+  onRemove?: () => void;
+};
+
+/**
+ * Small horizontal chip rendering an event as an "attachment": a thumbnail,
+ * a friendly label like "Person on driveway", an optional remove X (composer
+ * mode), and an external-link icon that opens the event in Explore.
+ */
+export function ChatAttachmentChip({
+  eventId,
+  mode,
+  onRemove,
+}: ChatAttachmentChipProps) {
+  const apiHost = useApiHost();
+  const { t } = useTranslation(["views/chat"]);
+
+  const { data: eventData } = useSWR<{ label: string; camera: string }[]>(
+    `event_ids?ids=${eventId}`,
+  );
+  const evt = eventData?.[0];
+  const cameraName = useCameraFriendlyName(evt?.camera);
+  const displayLabel = evt
+    ? t("attachment_chip_label", {
+        label: getTranslatedLabel(evt.label),
+        camera: cameraName,
+      })
+    : eventId;
+
+  return (
+    <div
+      className={cn(
+        "inline-flex max-w-full items-center gap-2 rounded-lg border border-border bg-background/80 p-1.5 pr-2",
+        mode === "bubble" && "border-primary-foreground/30 bg-transparent",
+      )}
+    >
+      <div className="relative size-10 shrink-0 overflow-hidden rounded-md">
+        <img
+          className="size-full object-cover"
+          src={`${apiHost}api/events/${eventId}/thumbnail.webp`}
+          alt=""
+          loading="lazy"
+          onError={(e) => {
+            (e.currentTarget as HTMLImageElement).style.visibility = "hidden";
+          }}
+        />
+      </div>
+      {evt ? (
+        <span
+          className={cn(
+            "truncate text-xs",
+            mode === "bubble"
+              ? "text-primary-foreground/90"
+              : "text-foreground",
+          )}
+        >
+          {displayLabel}
+        </span>
+      ) : (
+        <ActivityIndicator className="size-4" />
+      )}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <a
+            href={`/explore?event_id=${eventId}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+              "flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground",
+              mode === "bubble" &&
+                "text-primary-foreground/70 hover:text-primary-foreground",
+            )}
+            onClick={(e) => e.stopPropagation()}
+            aria-label={t("open_in_explore")}
+          >
+            <LuExternalLink className="size-3.5" />
+          </a>
+        </TooltipTrigger>
+        <TooltipContent>{t("open_in_explore")}</TooltipContent>
+      </Tooltip>
+      {mode === "composer" && onRemove && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+          onClick={onRemove}
+          aria-label={t("attachment_chip_remove")}
+        >
+          <LuX className="size-3.5" />
+        </Button>
+      )}
+    </div>
+  );
+}
--- a/web/src/components/chat/ChatEventThumbnailsRow.tsx
+++ b/web/src/components/chat/ChatEventThumbnailsRow.tsx
@@ -1,42 +1,97 @@
 import { useApiHost } from "@/api";
+import { useTranslation } from "react-i18next";
+import { LuExternalLink } from "react-icons/lu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type ChatEvent = { id: string; score?: number };

 type ChatEventThumbnailsRowProps = {
-  events: { id: string }[];
+  events: ChatEvent[];
+  anchor?: { id: string } | null;
+  onAttach?: (eventId: string) => void;
 };

 /**
- * Horizontal scroll row of event thumbnail images for chat (e.g. after search_objects).
- * Renders nothing when events is empty.
+ * Horizontal scroll row of event thumbnail images for chat.
+ * Optionally renders an anchor thumbnail with a "reference" badge above the
+ * results, and per-event similarity scores when provided.
+ * Clicking a thumbnail calls onAttach; a small external-link overlay opens
+ * the event in Explore.
+ * Renders nothing when there is nothing to show.
 */
 export function ChatEventThumbnailsRow({
  events,
+  anchor = null,
+  onAttach,
 }: ChatEventThumbnailsRowProps) {
  const apiHost = useApiHost();
+  const { t } = useTranslation(["views/chat"]);

-  if (events.length === 0) return null;
+  if (events.length === 0 && !anchor) return null;
+
+  const renderThumb = (event: ChatEvent, isAnchor = false) => (
+    <div
+      key={event.id}
+      className={cn(
+        "relative aspect-square size-32 shrink-0 overflow-hidden rounded-lg",
+        isAnchor && "ring-2 ring-primary",
+      )}
+    >
+      <button
+        type="button"
+        className="block size-full"
+        onClick={() => onAttach?.(event.id)}
+        aria-label={t("attach_event_aria", { eventId: event.id })}
+      >
+        <img
+          className="size-full object-cover"
+          src={`${apiHost}api/events/${event.id}/thumbnail.webp`}
+          alt=""
+          loading="lazy"
+        />
+      </button>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <a
+            href={`/explore?event_id=${event.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+            className="absolute right-1 top-1 flex size-6 items-center justify-center rounded bg-black/60 text-white hover:bg-black/80"
+            aria-label={t("open_in_explore")}
+          >
+            <LuExternalLink className="size-3" />
+          </a>
+        </TooltipTrigger>
+        <TooltipContent>{t("open_in_explore")}</TooltipContent>
+      </Tooltip>
+      {isAnchor && (
+        <span className="pointer-events-none absolute left-1 top-1 rounded bg-primary px-1 text-[10px] text-primary-foreground">
+          {t("anchor")}
+        </span>
+      )}
+    </div>
+  );

  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 className="flex min-w-0 max-w-full flex-col gap-2 self-start">
+      {anchor && (
+        <div className="scrollbar-container min-w-0 overflow-x-auto">
+          <div className="flex w-max gap-2">{renderThumb(anchor, true)}</div>
        </div>
-      </div>
+      )}
+      {events.length > 0 && (
+        <div className="scrollbar-container min-w-0 overflow-x-auto">
+          <div className="flex w-max gap-2">
+            {events.map((event) => renderThumb(event))}
+          </div>
+        </div>
+      )}
    </div>
  );
 }
--- a/web/src/components/chat/ChatMessage.tsx
+++ b/web/src/components/chat/ChatMessage.tsx
@@ -15,6 +15,8 @@ import {
  TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { ChatAttachmentChip } from "@/components/chat/ChatAttachmentChip";
+import { parseAttachedEvent } from "@/utils/chatUtil";

 type MessageBubbleProps = {
  role: "user" | "assistant";
@@ -126,6 +128,10 @@ export function MessageBubble({
    );
  }

+  const { eventId: attachedEventId, body: displayContent } = isUser
+    ? parseAttachedEvent(content)
+    : { eventId: null, body: content };
+
  return (
    <div
      className={cn(
@@ -140,9 +146,20 @@ export function MessageBubble({
        )}
      >
        {isUser ? (
-          content
+          <div className="flex flex-col gap-2">
+            {attachedEventId && (
+              <ChatAttachmentChip eventId={attachedEventId} mode="bubble" />
+            )}
+            <div className="whitespace-pre-wrap">{displayContent}</div>
+          </div>
        ) : (
-          <>
+          <div
+            className={cn(
+              "[&>*:last-child]:inline",
+              !isComplete &&
+                "after:ml-0.5 after:inline-block after:h-4 after:w-2 after:animate-cursor-blink after:rounded-sm after:bg-foreground after:align-middle after:content-['']",
+            )}
+          >
            <ReactMarkdown
              remarkPlugins={[remarkGfm]}
              components={{
@@ -168,10 +185,7 @@ export function MessageBubble({
            >
              {content}
            </ReactMarkdown>
-            {!isComplete && (
-              <span className="ml-1 inline-block h-4 w-0.5 animate-pulse bg-foreground align-middle" />
-            )}
-          </>
+          </div>
        )}
      </div>
      <div className="flex items-center gap-0.5">
--- a/web/src/components/chat/ChatPaperclipButton.tsx
+++ b/web/src/components/chat/ChatPaperclipButton.tsx
@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { LuPaperclip } from "react-icons/lu";
+import { useApiHost } from "@/api";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+const EVENT_ID_RE = /^[A-Za-z0-9._-]+$/;
+
+type ChatPaperclipButtonProps = {
+  recentEventIds: string[];
+  onAttach: (eventId: string) => void;
+  disabled?: boolean;
+};
+
+/**
+ * Paperclip button with a popover for picking an event to attach.
+ * Shows a grid of recent thumbnails (from the latest assistant message) and a
+ * "paste event ID" fallback input.
+ */
+export function ChatPaperclipButton({
+  recentEventIds,
+  onAttach,
+  disabled = false,
+}: ChatPaperclipButtonProps) {
+  const apiHost = useApiHost();
+  const { t } = useTranslation(["views/chat"]);
+  const [open, setOpen] = useState(false);
+  const [pasteId, setPasteId] = useState("");
+
+  const handlePickThumbnail = (eventId: string) => {
+    onAttach(eventId);
+    setOpen(false);
+    setPasteId("");
+  };
+
+  const handlePasteSubmit = () => {
+    const trimmed = pasteId.trim();
+    if (!trimmed || !EVENT_ID_RE.test(trimmed)) return;
+    onAttach(trimmed);
+    setOpen(false);
+    setPasteId("");
+  };
+
+  const handlePasteKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handlePasteSubmit();
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-10 shrink-0 rounded-full"
+          disabled={disabled}
+          aria-label={t("attachment_picker_placeholder")}
+        >
+          <LuPaperclip className="size-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72" align="start">
+        <div className="flex flex-col gap-3">
+          {recentEventIds.length > 0 && (
+            <div className="grid grid-cols-4 gap-2">
+              {recentEventIds.slice(0, 8).map((id) => (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => handlePickThumbnail(id)}
+                  className="relative aspect-square overflow-hidden rounded-md ring-offset-background hover:ring-2 hover:ring-primary"
+                  aria-label={t("attach_event_aria", { eventId: id })}
+                >
+                  <img
+                    className="size-full object-cover"
+                    src={`${apiHost}api/events/${id}/thumbnail.webp`}
+                    alt=""
+                    loading="lazy"
+                  />
+                </button>
+              ))}
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            <Input
+              placeholder={t("attachment_picker_paste_label")}
+              value={pasteId}
+              onChange={(e) => setPasteId(e.target.value)}
+              onKeyDown={handlePasteKeyDown}
+              className="h-8 text-xs"
+            />
+            <Button
+              size="sm"
+              variant="select"
+              className="h-8"
+              disabled={!pasteId.trim() || !EVENT_ID_RE.test(pasteId.trim())}
+              onClick={handlePasteSubmit}
+            >
+              {t("attachment_picker_attach")}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/web/src/components/chat/ChatQuickReplies.tsx
+++ b/web/src/components/chat/ChatQuickReplies.tsx
@@ -0,0 +1,49 @@
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+
+type QuickReply = { labelKey: string; textKey: string };
+
+const REPLIES: QuickReply[] = [
+  {
+    labelKey: "quick_reply_find_similar",
+    textKey: "quick_reply_find_similar_text",
+  },
+  {
+    labelKey: "quick_reply_tell_me_more",
+    textKey: "quick_reply_tell_me_more_text",
+  },
+  { labelKey: "quick_reply_when_else", textKey: "quick_reply_when_else_text" },
+];
+
+type ChatQuickRepliesProps = {
+  onSend: (text: string) => void;
+  disabled?: boolean;
+};
+
+/**
+ * Row of pill buttons shown in the composer while an attachment is pending.
+ * Clicking a pill immediately calls onSend with the canned text.
+ */
+export function ChatQuickReplies({
+  onSend,
+  disabled = false,
+}: ChatQuickRepliesProps) {
+  const { t } = useTranslation(["views/chat"]);
+
+  return (
+    <div className="flex w-full flex-wrap gap-2">
+      {REPLIES.map((reply) => (
+        <Button
+          key={reply.labelKey}
+          variant="outline"
+          size="sm"
+          className="h-7 rounded-full px-3 text-xs"
+          disabled={disabled}
+          onClick={() => onSend(t(reply.textKey))}
+        >
+          {t(reply.labelKey)}
+        </Button>
+      ))}
+    </div>
+  );
+}
--- a/web/src/pages/Chat.tsx
+++ b/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>
  );
--- a/web/src/utils/chatUtil.ts
+++ b/web/src/utils/chatUtil.ts
@@ -25,6 +25,7 @@ export async function streamChatCompletion(
  headers: Record<string, string>,
  apiMessages: { role: string; content: string }[],
  callbacks: StreamChatCallbacks,
+  signal?: AbortSignal,
 ): Promise<void> {
  const {
    updateMessages,
@@ -38,6 +39,7 @@ export async function streamChatCompletion(
      method: "POST",
      headers,
      body: JSON.stringify({ messages: apiMessages, stream: true }),
+      signal,
    });

    if (!res.ok) {
@@ -152,11 +154,15 @@ export async function streamChatCompletion(
        return next;
      });
    }
-  } catch {
-    onError(defaultErrorMessage);
-    updateMessages((prev) =>
-      prev.filter((m) => !(m.role === "assistant" && m.content === "")),
-    );
+  } catch (err) {
+    if (err instanceof DOMException && err.name === "AbortError") {
+      // User stopped generation — not an error
+    } else {
+      onError(defaultErrorMessage);
+      updateMessages((prev) =>
+        prev.filter((m) => !(m.role === "assistant" && m.content === "")),
+      );
+    }
  } finally {
    onDone();
  }
@@ -191,3 +197,72 @@ export function getEventIdsFromSearchObjectsToolCalls(
  }
  return results;
 }
+
+const ATTACHED_EVENT_MARKER = /^\[attached_event:([A-Za-z0-9._-]+)\]\s*\n?/;
+
+export function parseAttachedEvent(content: string): {
+  eventId: string | null;
+  body: string;
+} {
+  if (!content) return { eventId: null, body: content };
+  const match = content.match(ATTACHED_EVENT_MARKER);
+  if (!match) return { eventId: null, body: content };
+  const body = content.slice(match[0].length).replace(/^\n+/, "");
+  return { eventId: match[1], body };
+}
+
+export function prependAttachment(body: string, eventId: string): string {
+  return `[attached_event:${eventId}]\n\n${body}`;
+}
+
+export type FindSimilarObjectsResult = {
+  anchor: { id: string } | null;
+  results: { id: string; score?: number }[];
+};
+
+/**
+ * Parse find_similar_objects tool call response(s) into anchor + ranked results.
+ * Returns null if no find_similar_objects call is present so the caller can
+ * decide whether to render.
+ */
+export function getFindSimilarObjectsFromToolCalls(
+  toolCalls: ToolCall[] | undefined,
+): FindSimilarObjectsResult | null {
+  if (!toolCalls?.length) return null;
+  for (const tc of toolCalls) {
+    if (tc.name !== "find_similar_objects" || !tc.response?.trim()) continue;
+    try {
+      const parsed = JSON.parse(tc.response) as {
+        anchor?: { id?: unknown };
+        results?: unknown;
+      };
+      const anchorId =
+        parsed.anchor && typeof parsed.anchor.id === "string"
+          ? parsed.anchor.id
+          : null;
+      const anchor = anchorId ? { id: anchorId } : null;
+      const results: { id: string; score?: number }[] = [];
+      if (Array.isArray(parsed.results)) {
+        for (const item of parsed.results) {
+          if (
+            item &&
+            typeof item === "object" &&
+            "id" in item &&
+            typeof (item as { id: unknown }).id === "string"
+          ) {
+            const entry: { id: string; score?: number } = {
+              id: (item as { id: string }).id,
+            };
+            const rawScore = (item as { score?: unknown }).score;
+            if (typeof rawScore === "number") entry.score = rawScore;
+            results.push(entry);
+          }
+        }
+      }
+      return { anchor, results };
+    } catch {
+      // ignore parse errors
+    }
+  }
+  return null;
+}
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -49,6 +49,7 @@ module.exports = {
        scale4: "scale4 3s ease-in-out infinite",
        "timeline-zoom-in": "timeline-zoom-in 0.3s ease-out",
        "timeline-zoom-out": "timeline-zoom-out 0.3s ease-out",
+        "cursor-blink": "cursor-blink 1s step-end infinite",
      },
      aspectRatio: {
        wide: "32 / 9",
@@ -189,6 +190,10 @@ module.exports = {
          "50%": { transform: "translateY(0%)", opacity: "0.5" },
          "100%": { transform: "translateY(0)", opacity: "1" },
        },
+        "cursor-blink": {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0" },
+        },
      },
      screens: {
        xs: "480px",