@xpert-ai/chatkit-ui 0.4.3 → 0.4.5

package/dist/index.cjs

@@ -67,7 +67,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/chat.tsx
-var React49 = __toESM(require("react"), 1);
+var React50 = __toESM(require("react"), 1);
 var import_lucide_react29 = require("lucide-react");
 
 // src/lib/utils.ts
@@ -1680,6 +1680,21 @@ var en_US_default = {
     loading: "Loading",
     thinking: "Thinking",
     answering: "Answering",
+    navigation: {
+      label: "Message navigation",
+      system: "System",
+      tool: "Tool",
+      event: "Event",
+      message: "Message",
+      image: "Image",
+      memory: "Memory",
+      widget: "Widget",
+      mcpApp: "MCP App",
+      attachment: "Attachment",
+      reference: "Reference",
+      capability: "Capability",
+      moreTags: "+{{count}}"
+    },
     mcpApp: {
       loading: "Loading MCP App"
     },
@@ -2073,6 +2088,21 @@ var zh_CN_default = {
     loading: "\u6B63\u5728\u52A0\u8F7D",
     thinking: "\u6B63\u5728\u601D\u8003",
     answering: "\u6B63\u5728\u751F\u6210",
+    navigation: {
+      label: "\u6D88\u606F\u5BFC\u822A",
+      system: "\u7CFB\u7EDF",
+      tool: "\u5DE5\u5177",
+      event: "\u4E8B\u4EF6",
+      message: "\u6D88\u606F",
+      image: "\u56FE\u7247",
+      memory: "\u8BB0\u5FC6",
+      widget: "\u7EC4\u4EF6",
+      mcpApp: "MCP App",
+      attachment: "\u9644\u4EF6",
+      reference: "\u5F15\u7528",
+      capability: "\u80FD\u529B",
+      moreTags: "+{{count}}"
+    },
     mcpApp: {
       loading: "\u6B63\u5728\u52A0\u8F7D MCP App"
     },
@@ -8708,11 +8738,78 @@ var proposedPlanOpenPattern = /^\s*<proposed_plan>\s*$/;
 var proposedPlanClosePattern = /^\s*<\/proposed_plan>\s*$/;
 var markdownFencePattern = /^ {0,3}(`{3,}|~{3,})/;
 var planMarkdownFencePattern = /^\s*(`{3,}|~{3,})[ \t]*(?:markdown|md)[^\n]*\r?\n([\s\S]*?)\r?\n\1[ \t]*\s*$/i;
+var knowledgebaseCitationEffectName = "knowledgebase.open_citation";
 var stripMarkdownNode = (props) => {
   const elementProps = { ...props };
   delete elementProps.node;
   return elementProps;
 };
+var parseKnowledgebaseCitationHref = (href) => {
+  if (typeof href !== "string" || !href.trim()) {
+    return null;
+  }
+  try {
+    const url = new URL(href);
+    if (url.protocol !== "xpert:" || url.hostname !== "knowledgebase" || url.pathname !== "/chunk") {
+      return null;
+    }
+    const documentId = url.searchParams.get("documentId")?.trim();
+    if (!documentId) {
+      return null;
+    }
+    const knowledgebaseId = url.searchParams.get("knowledgebaseId")?.trim();
+    const chunkId = url.searchParams.get("chunkId")?.trim();
+    const documentName = url.searchParams.get("documentName")?.trim();
+    return {
+      documentId,
+      citationUrl: href,
+      ...knowledgebaseId ? { knowledgebaseId } : {},
+      ...chunkId ? { chunkId } : {},
+      ...documentName ? { documentName } : {}
+    };
+  } catch {
+    return null;
+  }
+};
+var markdownUrlTransform = (value) => parseKnowledgebaseCitationHref(value) ? value : (0, import_react_markdown.defaultUrlTransform)(value);
+function MarkdownAnchor({
+  className,
+  href,
+  onClick,
+  ...props
+}) {
+  const parentMessenger = (0, import_react6.useContext)(ParentMessengerContext);
+  const citationTarget = parseKnowledgebaseCitationHref(href);
+  const anchorProps = stripMarkdownNode(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "a",
+    {
+      className: cn(
+        citationTarget ? "text-muted-foreground text-[0.85em] underline decoration-dotted underline-offset-4 transition-colors hover:text-primary" : "text-primary font-medium underline underline-offset-4",
+        className
+      ),
+      href,
+      target: citationTarget ? void 0 : "_blank",
+      rel: citationTarget ? void 0 : "noopener noreferrer",
+      "data-knowledgebase-citation": citationTarget ? "true" : void 0,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!citationTarget || event.defaultPrevented) {
+          return;
+        }
+        event.preventDefault();
+        parentMessenger?.sendEvent("public_event", [
+          "effect",
+          {
+            name: knowledgebaseCitationEffectName,
+            data: citationTarget
+          }
+        ]);
+      },
+      ...anchorProps
+    }
+  );
+}
 var getTextContent = (children) => import_react6.Children.toArray(children).map((child) => {
   if (typeof child === "string" || typeof child === "number") {
     return String(child);
@@ -8807,6 +8904,7 @@ function MarkdownContent({ children }) {
     {
       remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
       rehypePlugins: [import_rehype_katex.default],
+      urlTransform: markdownUrlTransform,
       components: defaultComponents,
       children
     }
@@ -9012,18 +9110,7 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    "a",
-    {
-      className: cn(
-        "text-primary font-medium underline underline-offset-4",
-        className
-      ),
-      target: "_blank",
-      rel: "noopener noreferrer",
-      ...stripMarkdownNode(props)
-    }
-  ),
+  a: MarkdownAnchor,
   blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "blockquote",
     {
@@ -13068,10 +13155,179 @@ function AssistantMessage({
   ] });
 }
 
-// src/components/thread/MessageActions.tsx
+// src/components/thread/MessageNavigator.tsx
 var React37 = __toESM(require("react"), 1);
-var import_lucide_react25 = require("lucide-react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
+var ACTIVE_OFFSET_PX = 12;
+function getMarkerWidthClass(index, active, interactionIndex) {
+  if (interactionIndex >= 0) {
+    const distance = Math.abs(index - interactionIndex);
+    if (distance === 0) return "w-7";
+    if (distance === 1) return "w-5";
+    if (distance === 2) return "w-3.5";
+    return "w-2";
+  }
+  return active ? "w-5" : "w-2";
+}
+function getAnchorTop(viewport, anchor) {
+  return anchor.offsetTop - viewport.offsetTop;
+}
+function resolveActiveItemId(items, viewport, getAnchor) {
+  if (!viewport || items.length === 0) return null;
+  const targetTop = viewport.scrollTop + ACTIVE_OFFSET_PX;
+  let activeId = items[0]?.id ?? null;
+  for (const item of items) {
+    const anchor = getAnchor(item);
+    if (!anchor) continue;
+    if (getAnchorTop(viewport, anchor) <= targetTop) {
+      activeId = item.id;
+      continue;
+    }
+    break;
+  }
+  return activeId;
+}
+function scrollToAnchor(viewport, anchor) {
+  const top = Math.max(0, getAnchorTop(viewport, anchor) - ACTIVE_OFFSET_PX);
+  if (typeof viewport.scrollTo === "function") {
+    viewport.scrollTo({ top, behavior: "smooth" });
+    return;
+  }
+  viewport.scrollTop = top;
+}
+function MessageNavigator({
+  items,
+  viewportRef,
+  getAnchor,
+  onNavigate,
+  className,
+  label,
+  tagsOverflowLabel
+}) {
+  const [hoveredId, setHoveredId] = React37.useState(null);
+  const [focusedId, setFocusedId] = React37.useState(null);
+  const [activeId, setActiveId] = React37.useState(null);
+  const updateActiveItem = React37.useCallback(() => {
+    const viewport = viewportRef.current;
+    setActiveId(resolveActiveItemId(items, viewport, getAnchor));
+  }, [getAnchor, items, viewportRef]);
+  React37.useLayoutEffect(() => {
+    updateActiveItem();
+  }, [updateActiveItem]);
+  React37.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    let frame = null;
+    const scheduleUpdate = () => {
+      if (frame !== null) return;
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        updateActiveItem();
+      });
+    };
+    viewport.addEventListener("scroll", scheduleUpdate, { passive: true });
+    window.addEventListener("resize", scheduleUpdate, { passive: true });
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleUpdate) : null;
+    resizeObserver?.observe(viewport);
+    return () => {
+      if (frame !== null) {
+        cancelAnimationFrame(frame);
+      }
+      viewport.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+      resizeObserver?.disconnect();
+    };
+  }, [updateActiveItem, viewportRef]);
+  const handleNavigate = React37.useCallback(
+    (item) => {
+      const viewport = viewportRef.current;
+      const anchor = getAnchor(item);
+      if (!viewport || !anchor) return;
+      onNavigate?.();
+      scrollToAnchor(viewport, anchor);
+      setActiveId(item.id);
+    },
+    [getAnchor, onNavigate, viewportRef]
+  );
+  if (items.length === 0) return null;
+  const interactionId = focusedId ?? hoveredId;
+  const interactionIndex = interactionId ? items.findIndex((item) => item.id === interactionId) : -1;
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "nav",
+    {
+      "aria-label": label,
+      className: cn(
+        "pointer-events-none sticky top-16 z-20 hidden h-0 w-0 shrink-0 self-start md:block",
+        className
+      ),
+      "data-slot": "chatkit-message-navigator",
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "group/nav relative h-[calc(100vh-9rem)] w-12", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "absolute left-2 top-1/2 flex max-h-full w-10 -translate-y-1/2 flex-col gap-0.5 py-1", children: items.map((item, index) => {
+        const isActive = item.id === activeId;
+        const isPreviewed = item.id === hoveredId || item.id === focusedId;
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative h-3.5 w-10 shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${item.title}: ${item.preview}`,
+              "aria-current": isActive ? "location" : void 0,
+              className: cn(
+                "pointer-events-auto flex h-3.5 w-10 items-center justify-start rounded-sm outline-none",
+                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              ),
+              onClick: () => handleNavigate(item),
+              onMouseEnter: () => setHoveredId(item.id),
+              onMouseLeave: () => setHoveredId((id) => id === item.id ? null : id),
+              onFocus: () => setFocusedId(item.id),
+              onBlur: () => setFocusedId((id) => id === item.id ? null : id),
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "block h-0.5 rounded-full bg-muted-foreground/25 transition-all duration-150",
+                    getMarkerWidthClass(index, isActive, interactionIndex),
+                    isActive && "bg-foreground",
+                    isPreviewed && "bg-foreground",
+                    interactionIndex >= 0 && !isActive && !isPreviewed && "bg-muted-foreground/35"
+                  )
+                }
+              )
+            }
+          ),
+          isPreviewed && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+            "div",
+            {
+              className: cn(
+                "pointer-events-none absolute left-9 top-1/2 z-30 w-80 max-w-[min(20rem,calc(100vw-6rem))] -translate-y-1/2",
+                "rounded-lg border border-border bg-background/95 p-3 text-left shadow-xl backdrop-blur"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mb-1 truncate text-sm font-medium text-foreground", children: item.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "line-clamp-2 text-sm leading-5 text-muted-foreground", children: item.preview }),
+                item.tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
+                  item.tags.slice(0, 3).map((tag) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    "span",
+                    {
+                      className: "max-w-[8rem] truncate rounded-md bg-muted px-1.5 py-0.5 text-[11px] leading-4 text-muted-foreground",
+                      children: tag
+                    },
+                    tag
+                  )),
+                  item.tags.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-[11px] leading-4 text-muted-foreground", children: tagsOverflowLabel(item.tags.length - 3) })
+                ] })
+              ]
+            }
+          )
+        ] }, item.id);
+      }) }) })
+    }
+  );
+}
+
+// src/components/thread/MessageActions.tsx
+var React38 = __toESM(require("react"), 1);
+var import_lucide_react25 = require("lucide-react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function MessageActions({
   content,
   isAssistant = false,
@@ -13080,7 +13336,7 @@ function MessageActions({
   className
 }) {
   const { t } = useChatkitTranslation();
-  const [copied, setCopied] = React37.useState(false);
+  const [copied, setCopied] = React38.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(content);
@@ -13093,7 +13349,7 @@ function MessageActions({
   if (isStreaming) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       className: cn(
@@ -13101,7 +13357,7 @@ function MessageActions({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "button",
           {
             type: "button",
@@ -13111,17 +13367,17 @@ function MessageActions({
               copied && "text-green-500"
             ),
             title: copied ? t("messageActions.copied") : t("messageActions.copy"),
-            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react25.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react25.Copy, { size: 14 })
+            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Copy, { size: 14 })
           }
         ),
-        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "button",
           {
             type: "button",
             onClick: onRetry,
             className: "p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
             title: t("messageActions.regenerate"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react25.RefreshCw, { size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.RefreshCw, { size: 14 })
           }
         )
       ]
@@ -13130,20 +13386,20 @@ function MessageActions({
 }
 
 // src/components/thread/StartScreen.tsx
-var React38 = require("react");
+var React39 = require("react");
 var import_lucide_react26 = require("lucide-react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function getIconComponent2(icon) {
   const iconMap = {
-    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.HelpCircle, { size: 20 }),
-    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.Lightbulb, { size: 20 }),
-    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.Sparkles, { size: 20 }),
-    "write": /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.Pencil, { size: 20 }),
-    "search": /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.Search, { size: 20 }),
-    "globe": /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.Globe, { size: 20 }),
-    "book-open": /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.BookOpen, { size: 20 }),
-    "compass": /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.Compass, { size: 20 }),
-    "bolt": /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.Zap, { size: 20 })
+    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react26.HelpCircle, { size: 20 }),
+    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react26.Lightbulb, { size: 20 }),
+    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react26.Sparkles, { size: 20 }),
+    "write": /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react26.Pencil, { size: 20 }),
+    "search": /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react26.Search, { size: 20 }),
+    "globe": /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react26.Globe, { size: 20 }),
+    "book-open": /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react26.BookOpen, { size: 20 }),
+    "compass": /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react26.Compass, { size: 20 }),
+    "bolt": /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react26.Zap, { size: 20 })
   };
   return icon ? iconMap[icon] || iconMap["sparkle"] : iconMap["sparkle"];
 }
@@ -13159,7 +13415,7 @@ function StartScreen({
   const greeting = startScreen?.greeting ?? t("startScreen.greeting");
   const prompts = startScreen?.prompts ?? [];
   const editPromptLabel = t("startScreen.editPrompt");
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       className: cn(
@@ -13167,8 +13423,8 @@ function StartScreen({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
-        prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
+        prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "div",
           {
             className: cn(
@@ -13177,7 +13433,7 @@ function StartScreen({
               "focus-within:ring-2 focus-within:ring-primary/20"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -13188,12 +13444,12 @@ function StartScreen({
                     "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
+                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 "button",
                 {
                   type: "button",
@@ -13206,7 +13462,7 @@ function StartScreen({
                     "rounded-r-xl transition-colors hover:bg-muted hover:text-foreground",
                     "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react26.Pencil, { size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react26.Pencil, { size: 16 })
                 }
               )
             ]
@@ -13219,7 +13475,7 @@ function StartScreen({
 }
 
 // src/hooks/useThreads.ts
-var React39 = __toESM(require("react"), 1);
+var React40 = __toESM(require("react"), 1);
 var DEFAULT_LIMIT = 50;
 var getThreadTitle = (threadRecord) => {
   const title = threadRecord.title?.trim();
@@ -13272,16 +13528,16 @@ function useThreads(limit = DEFAULT_LIMIT) {
     isLoading: isStreamLoading,
     error: streamError
   } = useStreamContext();
-  const [threadRecords, setThreadRecords] = React39.useState([]);
-  const [isLoading, setIsLoading] = React39.useState(false);
-  const [error, setError] = React39.useState(null);
-  const upsertThreadRecord = React39.useCallback((threadRecord) => {
+  const [threadRecords, setThreadRecords] = React40.useState([]);
+  const [isLoading, setIsLoading] = React40.useState(false);
+  const [error, setError] = React40.useState(null);
+  const upsertThreadRecord = React40.useCallback((threadRecord) => {
     setThreadRecords((prev) => {
       const next = prev.filter((item) => item.id !== threadRecord.id);
       return sortThreadRecords([threadRecord, ...next]);
     });
   }, []);
-  const refreshThreads = React39.useCallback(async () => {
+  const refreshThreads = React40.useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -13297,7 +13553,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       setIsLoading(false);
     }
   }, [client, limit, assistantId]);
-  const createThread = React39.useCallback(
+  const createThread = React40.useCallback(
     async (input) => {
       setError(null);
       const payload = {};
@@ -13311,7 +13567,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const updateThread = React39.useCallback(
+  const updateThread = React40.useCallback(
     async (recordId, payload) => {
       setError(null);
       const updated = await client.conversations.update(recordId, payload);
@@ -13320,7 +13576,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const deleteThread = React39.useCallback(
+  const deleteThread = React40.useCallback(
     async (recordId) => {
       setError(null);
       await client.conversations.delete(recordId);
@@ -13328,11 +13584,11 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client]
   );
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     if (!isReady) return;
     void refreshThreads();
   }, [refreshThreads, isReady]);
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     if (!threadId || !isStreamLoading) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const busyStatus = "busy";
@@ -13353,7 +13609,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       return changed ? sortThreadRecords(next) : prev;
     });
   }, [threadId, isStreamLoading]);
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     const message = getErrorMessage2(streamError)?.trim();
     if (!threadId || !message) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
@@ -13375,7 +13631,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       return changed ? sortThreadRecords(next) : prev;
     });
   }, [threadId, streamError]);
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     if (!isReady || !threadId || isStreamLoading) return;
     let cancelled = false;
     void client.conversations.search({ where: { threadId }, limit: 1 }).then((result) => {
@@ -13389,7 +13645,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       cancelled = true;
     };
   }, [client, threadId, upsertThreadRecord, isReady, isStreamLoading]);
-  const threads = React39.useMemo(
+  const threads = React40.useMemo(
     () => threadRecords.map((threadRecord) => toThreadItem(threadRecord)),
     [threadRecords]
   );
@@ -13406,10 +13662,10 @@ function useThreads(limit = DEFAULT_LIMIT) {
 }
 
 // src/components/thread/context-usage-indicator.tsx
-var React40 = __toESM(require("react"), 1);
+var React41 = __toESM(require("react"), 1);
 
 // src/components/ui/progress-circle.tsx
-var import_jsx_runtime45 = (
+var import_jsx_runtime46 = (
   // biome-ignore lint/a11y/useFocusableInteractive: false positive (progress + progressbar are not focusable interactives)
   // biome-ignore lint/nursery/useAriaPropsSupportedByRole: biome rule at odds with mdn docs (presumed nursary bug with rule)
   require("react/jsx-runtime")
@@ -13433,7 +13689,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
     fill: "none",
     strokeWidth
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "svg",
     {
       role: "progressbar",
@@ -13444,8 +13700,8 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
       "aria-valuemax": 100,
       ...restSvgProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "circle",
           {
             ...commonParams,
@@ -13463,7 +13719,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
 };
 
 // src/components/thread/context-usage-indicator.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var kNumberFormatter = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 1
@@ -13496,21 +13752,21 @@ function ContextUsageIndicator({
 }) {
   const { t } = useChatkitTranslation();
   const stream = useStreamContext();
-  const [maxContextSize, setMaxContextSize] = React40.useState(null);
-  const [usedContextSize, setUsedContextSize] = React40.useState(null);
-  const [assistantAgentKey, setAssistantAgentKey] = React40.useState(null);
-  const latestRealtimeUsageRef = React40.useRef({
+  const [maxContextSize, setMaxContextSize] = React41.useState(null);
+  const [usedContextSize, setUsedContextSize] = React41.useState(null);
+  const [assistantAgentKey, setAssistantAgentKey] = React41.useState(null);
+  const latestRealtimeUsageRef = React41.useRef({
     threadId: null,
     agentKey: null,
     usedTokens: null
   });
-  const realtimeUsage = React40.useMemo(
+  const realtimeUsage = React41.useMemo(
     () => getThreadContextUsage(stream.contextUsageByAgentKey, assistantAgentKey),
     [assistantAgentKey, stream.contextUsageByAgentKey]
   );
   const realtimeUsedContextSize = getThreadContextUsageTotalTokens(realtimeUsage);
   const hasApiConfiguration = Boolean(stream.apiUrl?.trim() && stream.apiKey?.trim());
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (!hasApiConfiguration || !stream.client || !stream.assistantId) {
       setMaxContextSize(null);
       setAssistantAgentKey(null);
@@ -13530,18 +13786,18 @@ function ContextUsageIndicator({
       cancelled = true;
     };
   }, [hasApiConfiguration, stream.client, stream.assistantId]);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     latestRealtimeUsageRef.current = {
       threadId: stream.threadId ?? null,
       agentKey: assistantAgentKey,
       usedTokens: realtimeUsedContextSize
     };
   }, [assistantAgentKey, realtimeUsedContextSize, stream.threadId]);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (realtimeUsedContextSize == null) return;
     setUsedContextSize(realtimeUsedContextSize);
   }, [realtimeUsedContextSize]);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (!hasApiConfiguration || !stream.client) {
       setUsedContextSize(null);
       return;
@@ -13607,8 +13863,8 @@ function ContextUsageIndicator({
   });
   const usageLabelWithSuffix = usageLabel.endsWith(":") ? usageLabel : `${usageLabel}:`;
   const progressClassName = percent >= 90 ? "text-destructive" : percent >= 75 ? "text-amber-500" : "text-primary dark:text-zinc-300";
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "button",
       {
         type: "button",
@@ -13617,31 +13873,31 @@ function ContextUsageIndicator({
           className
         ),
         "aria-label": `${usageLabelWithSuffix} ${usageFullLabel}. ${usageTokensLabel}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
     ] })
   ] });
 }
 
 // src/components/pet/PetBridge.tsx
-var React41 = __toESM(require("react"), 1);
+var React42 = __toESM(require("react"), 1);
 var import_chatkit_types10 = require("@xpert-ai/chatkit-types");
 function PetBridge({ pet, state }) {
   const parentMessenger = useParentMessenger();
   const sendEvent = parentMessenger?.sendEvent;
-  const options = React41.useMemo(() => (0, import_chatkit_types10.normalizePetOptions)(pet), [pet]);
-  React41.useEffect(() => {
+  const options = React42.useMemo(() => (0, import_chatkit_types10.normalizePetOptions)(pet), [pet]);
+  React42.useEffect(() => {
     if (!sendEvent) {
       return;
     }
     sendEvent("pet_options_change", { pet: pet ?? null });
   }, [sendEvent, pet]);
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     if (!sendEvent || !options) {
       return;
     }
@@ -13651,15 +13907,15 @@ function PetBridge({ pet, state }) {
 }
 
 // src/components/settings/SettingsSheet.tsx
-var React48 = __toESM(require("react"), 1);
+var React49 = __toESM(require("react"), 1);
 var import_lucide_react28 = require("lucide-react");
 
 // src/components/ui/input.tsx
-var React42 = __toESM(require("react"), 1);
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var Input = React42.forwardRef(
+var React43 = __toESM(require("react"), 1);
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var Input = React43.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "input",
       {
         ref,
@@ -13676,20 +13932,20 @@ var Input = React42.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/select.tsx
-var React43 = require("react");
+var React44 = require("react");
 var import_radix_ui2 = require("radix-ui");
 var import_lucide_react27 = require("lucide-react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_radix_ui2.Select.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui2.Select.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     import_radix_ui2.Select.Group,
     {
       "data-slot": "select-group",
@@ -13701,7 +13957,7 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_radix_ui2.Select.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui2.Select.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -13709,7 +13965,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     import_radix_ui2.Select.Trigger,
     {
       "data-slot": "select-trigger",
@@ -13721,7 +13977,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_radix_ui2.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react27.ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui2.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react27.ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })
       ]
     }
   );
@@ -13733,7 +13989,7 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_radix_ui2.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui2.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     import_radix_ui2.Select.Content,
     {
       "data-slot": "select-content",
@@ -13743,8 +13999,8 @@ function SelectContent({
       align,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectScrollUpButton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_radix_ui2.Select.Viewport,
           {
             "data-position": position,
@@ -13755,7 +14011,7 @@ function SelectContent({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectScrollDownButton, {})
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -13765,7 +14021,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     import_radix_ui2.Select.Item,
     {
       "data-slot": "select-item",
@@ -13775,8 +14031,8 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_radix_ui2.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react27.CheckIcon, { className: "pointer-events-none" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_radix_ui2.Select.ItemText, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui2.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react27.CheckIcon, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui2.Select.ItemText, { children })
       ]
     }
   );
@@ -13785,7 +14041,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     import_radix_ui2.Select.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -13794,7 +14050,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         import_lucide_react27.ChevronUpIcon,
         {}
       )
@@ -13805,7 +14061,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     import_radix_ui2.Select.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -13814,7 +14070,7 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         import_lucide_react27.ChevronDownIcon,
         {}
       )
@@ -13823,9 +14079,9 @@ function SelectScrollDownButton({
 }
 
 // src/components/ui/slider.tsx
-var React44 = __toESM(require("react"), 1);
+var React45 = __toESM(require("react"), 1);
 var import_radix_ui3 = require("radix-ui");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Slider({
   className,
   defaultValue,
@@ -13834,11 +14090,11 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React44.useMemo(
+  const _values = React45.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     import_radix_ui3.Slider.Root,
     {
       "data-slot": "slider",
@@ -13852,12 +14108,12 @@ function Slider({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           import_radix_ui3.Slider.Track,
           {
             "data-slot": "slider-track",
             className: "relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1",
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               import_radix_ui3.Slider.Range,
               {
                 "data-slot": "slider-range",
@@ -13866,7 +14122,7 @@ function Slider({
             )
           }
         ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           import_radix_ui3.Slider.Thumb,
           {
             "data-slot": "slider-thumb",
@@ -13880,15 +14136,15 @@ function Slider({
 }
 
 // src/components/ui/toggle-group.tsx
-var React46 = __toESM(require("react"), 1);
+var React47 = __toESM(require("react"), 1);
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_radix_ui5 = require("radix-ui");
 
 // src/components/ui/toggle.tsx
-var React45 = require("react");
+var React46 = require("react");
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_radix_ui4 = require("radix-ui");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority2.cva)(
   "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -13911,8 +14167,8 @@ var toggleVariants = (0, import_class_variance_authority2.cva)(
 );
 
 // src/components/ui/toggle-group.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var ToggleGroupContext = React46.createContext({
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var ToggleGroupContext = React47.createContext({
   size: "default",
   variant: "default",
   spacing: 0,
@@ -13927,7 +14183,7 @@ function ToggleGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     import_radix_ui5.ToggleGroup.Root,
     {
       "data-slot": "toggle-group",
@@ -13941,7 +14197,7 @@ function ToggleGroup({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         ToggleGroupContext.Provider,
         {
           value: { variant, size: size2, spacing, orientation },
@@ -13958,8 +14214,8 @@ function ToggleGroupItem({
   size: size2 = "default",
   ...props
 }) {
-  const context = React46.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  const context = React47.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     import_radix_ui5.ToggleGroup.Item,
     {
       "data-slot": "toggle-group-item",
@@ -14189,13 +14445,13 @@ function isPetEnabled(pet) {
 }
 
 // src/components/pet/PetPreview.tsx
-var React47 = require("react");
+var React48 = require("react");
 
 // src/components/pet/petSpriteAtlas.ts
 var import_chatkit_types12 = require("@xpert-ai/chatkit-types");
 
 // src/components/pet/PetPreview.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function escapeCssUrl(value) {
   return value.replace(/["\\]/g, "\\$&");
 }
@@ -14203,7 +14459,7 @@ function PetPreview({ src, label, className }) {
   const scale = 0.13;
   const width = import_chatkit_types12.petSpriteAtlas.cellWidth;
   const height = import_chatkit_types12.petSpriteAtlas.cellHeight;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "span",
     {
       className: cn(
@@ -14212,7 +14468,7 @@ function PetPreview({ src, label, className }) {
       ),
       "aria-hidden": "true",
       title: label,
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "span",
         {
           className: "absolute left-1/2 top-1/2 block",
@@ -14234,7 +14490,7 @@ function PetPreview({ src, label, className }) {
 }
 
 // src/components/settings/SettingsSheet.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var CHARACTER_TYPES2 = [
   "builtin",
   "atlas"
@@ -14250,13 +14506,13 @@ function SettingsSheet({
   onSave
 }) {
   const { t } = useChatkitTranslation();
-  const [draft, setDraft] = React48.useState(settings);
-  React48.useEffect(() => {
+  const [draft, setDraft] = React49.useState(settings);
+  React49.useEffect(() => {
     if (open) {
       setDraft(petRequired ? { ...settings, enabled: true } : settings);
     }
   }, [open, petRequired, settings]);
-  const updateDraft = React48.useCallback(
+  const updateDraft = React49.useCallback(
     (patch) => {
       setDraft((previous) => ({ ...previous, ...patch }));
     },
@@ -14274,23 +14530,23 @@ function SettingsSheet({
       defaultValue: selectedBuiltinPet.label
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Sheet, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(SheetContent, { side: "right", className: "w-[min(92vw,26rem)] overflow-y-auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SheetHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react28.Settings, { size: 16 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SheetTitle, { children: t("settings.title") })
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Sheet, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(SheetContent, { side: "right", className: "w-[min(92vw,26rem)] overflow-y-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SheetHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react28.Settings, { size: 16 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SheetTitle, { children: t("settings.title") })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("form", { className: "mt-6 space-y-5", onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("section", { className: "space-y-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react28.PawPrint, { size: 15 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h3", { className: "text-sm font-semibold", children: t("pet.settings.title") })
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("form", { className: "mt-6 space-y-5", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("section", { className: "space-y-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react28.PawPrint, { size: 15 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "text-sm font-semibold", children: t("pet.settings.title") })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("label", { className: "flex items-center justify-between gap-4 rounded-md border border-border px-3 py-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "block text-sm font-medium", children: t("pet.settings.enabled") }),
-            petRequired && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: t("pet.settings.requiredHint") })
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("label", { className: "flex items-center justify-between gap-4 rounded-md border border-border px-3 py-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "block text-sm font-medium", children: t("pet.settings.enabled") }),
+            petRequired && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: t("pet.settings.requiredHint") })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             "button",
             {
               type: "button",
@@ -14303,7 +14559,7 @@ function SettingsSheet({
                 draft.enabled ? "bg-primary" : "bg-muted-foreground/20",
                 petRequired ? "cursor-not-allowed opacity-70" : ""
               ].join(" "),
-              children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 "span",
                 {
                   className: [
@@ -14316,9 +14572,9 @@ function SettingsSheet({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { id: "chatkit-pet-type-label", className: "text-sm font-medium", children: t("pet.settings.characterType") }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { id: "chatkit-pet-type-label", className: "text-sm font-medium", children: t("pet.settings.characterType") }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           ToggleGroup,
           {
             id: "chatkit-pet-type",
@@ -14333,7 +14589,7 @@ function SettingsSheet({
             variant: "outline",
             spacing: 2,
             className: "!w-full",
-            children: CHARACTER_TYPES2.map((type) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            children: CHARACTER_TYPES2.map((type) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               ToggleGroupItem,
               {
                 value: type,
@@ -14345,8 +14601,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      draft.characterType === "builtin" && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      draft.characterType === "builtin" && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "label",
           {
             htmlFor: "chatkit-pet-builtin",
@@ -14354,7 +14610,7 @@ function SettingsSheet({
             children: t("pet.settings.builtin")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
           Select,
           {
             value: selectedBuiltinPet.id,
@@ -14365,26 +14621,26 @@ function SettingsSheet({
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 SelectTrigger,
                 {
                   id: "chatkit-pet-builtin",
                   className: "min-h-12 w-full px-3 py-2",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectValue, { placeholder: selectedBuiltinPetLabel })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectValue, { placeholder: selectedBuiltinPetLabel })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectContent, { className: "w-[var(--radix-select-trigger-width)]", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectGroup, { children: INCLUDED_PET_OPTIONS.map((pet) => {
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectContent, { className: "w-[var(--radix-select-trigger-width)]", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectGroup, { children: INCLUDED_PET_OPTIONS.map((pet) => {
                 const label = t(`pet.settings.builtins.${pet.id}`, {
                   defaultValue: pet.label
                 });
-                return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                   SelectItem,
                   {
                     value: pet.id,
                     className: "min-h-10 py-1.5 pl-2 pr-8",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PetPreview, { src: pet.previewSrc, label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "min-w-0 truncate", children: label })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PetPreview, { src: pet.previewSrc, label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "min-w-0 truncate", children: label })
                     ] })
                   },
                   pet.id
@@ -14394,8 +14650,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      draft.characterType === "atlas" && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      draft.characterType === "atlas" && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "label",
           {
             className: "text-sm font-medium",
@@ -14403,7 +14659,7 @@ function SettingsSheet({
             children: t("pet.settings.atlasUrl")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           Input,
           {
             id: "chatkit-pet-atlas",
@@ -14413,15 +14669,15 @@ function SettingsSheet({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("label", { className: "text-sm font-medium", htmlFor: "chatkit-pet-scale", children: t("pet.settings.scale") }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("label", { className: "text-sm font-medium", htmlFor: "chatkit-pet-scale", children: t("pet.settings.scale") }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
             draft.scale.toFixed(2),
             "x"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           Slider,
           {
             id: "chatkit-pet-scale",
@@ -14435,8 +14691,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "input",
           {
             type: "checkbox",
@@ -14447,8 +14703,8 @@ function SettingsSheet({
         ),
         t("pet.settings.draggable")
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "input",
           {
             type: "checkbox",
@@ -14459,8 +14715,8 @@ function SettingsSheet({
         ),
         t("pet.settings.persistPosition")
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           Button,
           {
             type: "button",
@@ -14469,7 +14725,7 @@ function SettingsSheet({
             children: t("pet.settings.cancel")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, { type: "submit", children: t("pet.settings.save") })
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button, { type: "submit", children: t("pet.settings.save") })
       ] })
     ] })
   ] }) });
@@ -15095,8 +15351,260 @@ function findDomPointForComposerOffset(root, offset) {
   return result ?? { node: lastNode, offset: lastOffset };
 }
 
+// src/lib/message-navigation.ts
+var MESSAGE_NAVIGATION_MIN_ITEMS = 3;
+var MAX_PREVIEW_LENGTH = 180;
+var MAX_TAG_LENGTH = 40;
+function isRecord6(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function readString4(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+function normalizeWhitespace(value) {
+  return value.replace(/\s+/g, " ").trim();
+}
+function truncate(value, maxLength) {
+  const normalized = normalizeWhitespace(value);
+  if (normalized.length <= maxLength) return normalized;
+  return `${normalized.slice(0, Math.max(0, maxLength - 1)).trimEnd()}...`;
+}
+function pushText(draft, value) {
+  const text = readString4(value);
+  if (text) draft.text.push(text);
+}
+function pushTag(draft, value) {
+  const tag = readString4(value);
+  if (!tag) return;
+  const normalized = truncate(tag, MAX_TAG_LENGTH);
+  if (!draft.tags.includes(normalized)) {
+    draft.tags.push(normalized);
+  }
+}
+function mergeTags(...tagGroups) {
+  const tags = [];
+  for (const group of tagGroups) {
+    for (const tag of group) {
+      if (!tags.includes(tag)) tags.push(tag);
+    }
+  }
+  return tags;
+}
+function getMessageNavigationItemId(message, index) {
+  const messageId = readString4(message.id);
+  if (messageId) return messageId;
+  const type = readString4(message.type) ?? "message";
+  return `${type}-${index}`;
+}
+function getMessageNavigationRole(type) {
+  const normalized = readString4(type)?.toLowerCase();
+  if (normalized === "human" || normalized === "user") return "user";
+  if (normalized === "ai" || normalized === "assistant") return "assistant";
+  if (normalized === "system") return "system";
+  if (normalized === "tool") return "tool";
+  if (normalized === "event") return "event";
+  return "message";
+}
+function isTextContent4(content) {
+  return content.type === "text";
+}
+function isReasoningContent4(content) {
+  return content.type === "reasoning";
+}
+function isComponentContent4(content) {
+  return content.type === "component";
+}
+function isMemoryContent2(content) {
+  return content.type === "memory";
+}
+function isWidgetComponent3(content) {
+  const data = content.data;
+  return data?.type === "Widget" && Array.isArray(data.widgets);
+}
+function isMcpAppComponent2(content) {
+  const data = content.data;
+  return data?.type === "McpApp" && typeof data.appInstanceId === "string";
+}
+function collectWidgetContent(draft, content, labels) {
+  const names = content.data.widgets.map((widget) => readString4(widget.name)).filter((name) => Boolean(name));
+  if (names.length === 0) {
+    pushTag(draft, labels.widget);
+    return;
+  }
+  for (const name of names) {
+    pushTag(draft, name);
+  }
+}
+function collectMcpAppContent(draft, content, labels, language) {
+  const title = readString4((0, import_chatkit_types6.resolveLocalizedText)(content.data.title, language)) ?? readString4(content.data.toolName) ?? labels.mcpApp;
+  pushTag(draft, title);
+  pushText(draft, (0, import_chatkit_types6.resolveLocalizedText)(content.data.description, language));
+}
+function collectComponentContent(draft, content, labels, language, options) {
+  if (isWidgetComponent3(content)) {
+    collectWidgetContent(draft, content, labels);
+    return;
+  }
+  if (isMcpAppComponent2(content)) {
+    collectMcpAppContent(draft, content, labels, language);
+    return;
+  }
+  const data = getToolStepData(content);
+  pushTag(
+    draft,
+    (0, import_chatkit_types6.resolveLocalizedText)(data.message, language) ?? getToolActivityLabel(content, language)
+  );
+  if (options.includeComponentText !== false) {
+    pushText(draft, (0, import_chatkit_types6.resolveLocalizedText)(data.message, language));
+    pushText(draft, (0, import_chatkit_types6.resolveLocalizedText)(data.title, language));
+    pushText(draft, (0, import_chatkit_types6.resolveLocalizedText)(data.tool, language));
+    pushText(draft, (0, import_chatkit_types6.resolveLocalizedText)(data.type, language));
+  }
+}
+function collectContentItem(draft, item, labels, language, options) {
+  if (item === void 0 || isThreadContextUsageRenderArtifact(item)) return;
+  if (typeof item === "string") {
+    pushText(draft, item);
+    return;
+  }
+  if (isTextContent4(item) || isReasoningContent4(item)) {
+    pushText(draft, item.text);
+    if (isReasoningContent4(item)) pushTag(draft, labels.reasoning);
+    return;
+  }
+  if (item.type === "image_url") {
+    pushTag(draft, labels.image);
+    return;
+  }
+  if (isComponentContent4(item)) {
+    collectComponentContent(draft, item, labels, language, options);
+    return;
+  }
+  if (isMemoryContent2(item)) {
+    pushTag(draft, labels.memory);
+  }
+}
+function collectContent(draft, content, labels, language, options = {}) {
+  if (typeof content === "string") {
+    pushText(draft, content);
+    return;
+  }
+  if (!Array.isArray(content)) {
+    return;
+  }
+  for (const item of content) {
+    collectContentItem(
+      draft,
+      item,
+      labels,
+      language,
+      options
+    );
+  }
+}
+function collectReasoning(draft, reasoning, labels) {
+  if (!Array.isArray(reasoning)) return;
+  for (const item of reasoning) {
+    if (!isRecord6(item)) continue;
+    pushText(draft, item.text);
+    if (readString4(item.text)) pushTag(draft, labels.reasoning);
+  }
+}
+function collectFiles(draft, value, fallbackLabel) {
+  if (!Array.isArray(value)) return;
+  for (const file of value) {
+    if (!isRecord6(file)) continue;
+    pushTag(
+      draft,
+      file.originalName ?? file.name ?? file.fileName ?? file.id ?? fallbackLabel
+    );
+  }
+}
+function collectReferences(draft, value) {
+  for (const reference of normalizeReferences(value)) {
+    pushTag(draft, getReferenceLabel(reference));
+  }
+}
+function collectRuntimeCapabilities(draft, value) {
+  if (!Array.isArray(value)) return;
+  for (const option of value) {
+    if (!isRecord6(option)) continue;
+    pushTag(draft, option.label ?? option.id ?? option.type);
+  }
+}
+function getTitle(role, labels, assistantTitle) {
+  if (role === "assistant" && assistantTitle?.trim()) {
+    return assistantTitle.trim();
+  }
+  return labels[role];
+}
+function buildMessageNavigationItemSummary(message, index, options, collectOptions = {}) {
+  const role = getMessageNavigationRole(message.type);
+  const draft = {
+    text: [],
+    tags: []
+  };
+  const language = options.language ?? "en-US";
+  const labels = options.labels;
+  if (role === "user") {
+    pushText(draft, message.submittedInput);
+  }
+  collectContent(draft, message.content, labels, language, collectOptions);
+  collectReasoning(draft, message.reasoning, labels);
+  collectFiles(draft, message.fileAssets, labels.attachment);
+  collectFiles(draft, message.attachments, labels.attachment);
+  collectReferences(draft, message.references);
+  collectRuntimeCapabilities(draft, message.runtimeCapabilityOptions);
+  const text = draft.text.map(normalizeWhitespace).filter(Boolean).join(" ");
+  const preview = truncate(text, MAX_PREVIEW_LENGTH) || draft.tags.slice(0, 2).join(" \xB7 ");
+  if (!preview && draft.tags.length === 0) {
+    return null;
+  }
+  const messageId = readString4(message.id) ?? void 0;
+  return {
+    id: getMessageNavigationItemId(message, index),
+    ...messageId ? { messageId } : {},
+    index,
+    role,
+    title: getTitle(role, labels, options.assistantTitle),
+    preview,
+    tags: draft.tags
+  };
+}
+function buildMessageNavigationItems(messages, options) {
+  const items = [];
+  let pendingUser = null;
+  messages.forEach((message, messageIndex) => {
+    const item = buildMessageNavigationItemSummary(
+      message,
+      messageIndex,
+      options,
+      { includeComponentText: false }
+    );
+    if (!item) return;
+    if (item.role === "user") {
+      pendingUser = { item };
+      return;
+    }
+    if (item.role !== "assistant" || !pendingUser) {
+      return;
+    }
+    items.push({
+      id: pendingUser.item.id,
+      ...pendingUser.item.messageId ? { messageId: pendingUser.item.messageId } : {},
+      index: items.length,
+      role: "user",
+      title: pendingUser.item.preview,
+      preview: item.preview,
+      tags: mergeTags(item.tags, pendingUser.item.tags)
+    });
+    pendingUser = null;
+  });
+  return items;
+}
+
 // src/components/chat.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var import_meta2 = {};
 var defaultApiUrl2 = import_meta2.env.VITE_XPERTAI_API_URL;
 var COMPOSER_INPUT_MAX_HEIGHT = 128;
@@ -15242,7 +15750,7 @@ function ReferenceChip({
   const metaLine = getReferenceMetaLine(reference);
   const isComposer = variant === "composer";
   const Icon = reference.type === "quote" ? import_lucide_react29.Quote : reference.type === "image" ? import_lucide_react29.ImageIcon : import_lucide_react29.FileText;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
     {
       className: cn(
@@ -15251,7 +15759,7 @@ function ReferenceChip({
       ),
       title: getReferenceTitle(reference),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           Icon,
           {
             size: isComposer ? 14 : 12,
@@ -15261,8 +15769,8 @@ function ReferenceChip({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             "div",
             {
               className: cn(
@@ -15272,7 +15780,7 @@ function ReferenceChip({
               children: getReferenceLabel(reference)
             }
           ),
-          metaLine && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          metaLine && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             "div",
             {
               className: cn(
@@ -15283,7 +15791,7 @@ function ReferenceChip({
             }
           )
         ] }),
-        onRemove && removeLabel && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        onRemove && removeLabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "button",
           {
             type: "button",
@@ -15294,7 +15802,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { size: 12 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.X, { size: 12 })
           }
         )
       ]
@@ -15309,35 +15817,36 @@ function Chat({
   clientSecret = "",
   isClientSecretInitializing = false
 }) {
-  const { t } = useChatkitTranslation();
+  const { t, i18n: i18n2 } = useChatkitTranslation();
   const composer = options?.composer;
   const startScreen = options?.startScreen;
   const history = options?.history;
   const disclaimer = options?.disclaimer;
   const apiUrl = options?.api?.apiUrl || defaultApiUrl2;
+  const messageNavigationEnabled = options?.messageNavigation?.enabled !== false;
   const { setStream } = useStreamManager();
   const stream = useStreamContext();
   const { theme } = useTheme();
-  const [isHistoryLoading, setIsHistoryLoading] = React49.useState(false);
-  const [historyError, setHistoryError] = React49.useState(null);
-  const [assistantName, setAssistantName] = React49.useState(null);
-  const [assistantAvatar, setAssistantAvatar] = React49.useState(null);
-  const [threadGoal, setThreadGoal] = React49.useState(null);
-  const [goalError, setGoalError] = React49.useState(null);
-  const [isGoalLoading, setIsGoalLoading] = React49.useState(false);
-  const [isGoalPanelOpen, setIsGoalPanelOpen] = React49.useState(false);
-  const [isGoalObjectiveExpanded, setIsGoalObjectiveExpanded] = React49.useState(false);
-  const [goalElapsedStartedAt, setGoalElapsedStartedAt] = React49.useState(null);
+  const [isHistoryLoading, setIsHistoryLoading] = React50.useState(false);
+  const [historyError, setHistoryError] = React50.useState(null);
+  const [assistantName, setAssistantName] = React50.useState(null);
+  const [assistantAvatar, setAssistantAvatar] = React50.useState(null);
+  const [threadGoal, setThreadGoal] = React50.useState(null);
+  const [goalError, setGoalError] = React50.useState(null);
+  const [isGoalLoading, setIsGoalLoading] = React50.useState(false);
+  const [isGoalPanelOpen, setIsGoalPanelOpen] = React50.useState(false);
+  const [isGoalObjectiveExpanded, setIsGoalObjectiveExpanded] = React50.useState(false);
+  const [goalElapsedStartedAt, setGoalElapsedStartedAt] = React50.useState(null);
   const LOADING_DOTS_MIN_DURATION = 800;
   const STREAMING_STATUS_REFRESH_MS = 250;
-  const [showLoadingDots, setShowLoadingDots] = React49.useState(false);
-  const [streamingNow, setStreamingNow] = React49.useState(() => Date.now());
-  const loadingStartTimeRef = React49.useRef(null);
-  const lastStreamOutputAtRef = React49.useRef(null);
-  React49.useEffect(() => {
+  const [showLoadingDots, setShowLoadingDots] = React50.useState(false);
+  const [streamingNow, setStreamingNow] = React50.useState(() => Date.now());
+  const loadingStartTimeRef = React50.useRef(null);
+  const lastStreamOutputAtRef = React50.useRef(null);
+  React50.useEffect(() => {
     setStream(stream);
   }, [setStream, stream]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (stream.isLoading) {
       if (!loadingStartTimeRef.current) {
         loadingStartTimeRef.current = Date.now();
@@ -15360,7 +15869,7 @@ function Chat({
       }
     }
   }, [stream.isLoading]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (!stream.isLoading) {
       lastStreamOutputAtRef.current = null;
       setStreamingNow(Date.now());
@@ -15370,7 +15879,7 @@ function Chat({
     lastStreamOutputAtRef.current = now;
     setStreamingNow(now);
   }, [stream.messages, stream.isLoading]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (!stream.isLoading) {
       return;
     }
@@ -15379,7 +15888,7 @@ function Chat({
     }, STREAMING_STATUS_REFRESH_MS);
     return () => window.clearInterval(timer);
   }, [stream.isLoading]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (threadGoal?.status === "active" && stream.isLoading) {
       setGoalElapsedStartedAt(Date.now());
       return;
@@ -15391,82 +15900,86 @@ function Chat({
     threadGoal?.id,
     threadGoal?.status
   ]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     setIsGoalObjectiveExpanded(false);
   }, [threadGoal?.id]);
-  const [composerParts, setComposerParts] = React49.useState([]);
-  const [renderedComposerParts, setRenderedComposerParts] = React49.useState([]);
-  const [composerDomVersion, setComposerDomVersion] = React49.useState(0);
-  const [selectedTool, setSelectedTool] = React49.useState(
+  const [composerParts, setComposerParts] = React50.useState([]);
+  const [renderedComposerParts, setRenderedComposerParts] = React50.useState([]);
+  const [composerDomVersion, setComposerDomVersion] = React50.useState(0);
+  const [selectedTool, setSelectedTool] = React50.useState(
     null
   );
-  const [planModeEnabled, setPlanModeEnabled] = React49.useState(false);
-  const [petSettingsOpen, setPetSettingsOpen] = React49.useState(false);
-  const [petLocalSettings, setPetLocalSettings] = React49.useState(() => readPetLocalSettings());
-  const [runtimeCapabilities, setRuntimeCapabilities] = React49.useState(null);
-  const [runtimeCapabilitiesReady, setRuntimeCapabilitiesReady] = React49.useState(false);
-  const [sessionRuntimeCapabilities, setSessionRuntimeCapabilities] = React49.useState(
+  const [planModeEnabled, setPlanModeEnabled] = React50.useState(false);
+  const [petSettingsOpen, setPetSettingsOpen] = React50.useState(false);
+  const [petLocalSettings, setPetLocalSettings] = React50.useState(() => readPetLocalSettings());
+  const [runtimeCapabilities, setRuntimeCapabilities] = React50.useState(null);
+  const [runtimeCapabilitiesReady, setRuntimeCapabilitiesReady] = React50.useState(false);
+  const [sessionRuntimeCapabilities, setSessionRuntimeCapabilities] = React50.useState(
     () => createEmptyRuntimeCapabilitiesSelection()
   );
-  const [runRuntimeCapabilities, setRunRuntimeCapabilities] = React49.useState(
+  const [runRuntimeCapabilities, setRunRuntimeCapabilities] = React50.useState(
     () => createEmptyRuntimeCapabilitiesSelection()
   );
-  const [runtimeCapabilityPalette, setRuntimeCapabilityPalette] = React49.useState(null);
-  const [attachmentState, setAttachmentState] = React49.useState({
+  const [runtimeCapabilityPalette, setRuntimeCapabilityPalette] = React50.useState(null);
+  const [attachmentState, setAttachmentState] = React50.useState({
     uploadedFiles: [],
     hasUploadingFiles: false,
     hasParsingFiles: false
   });
-  const [references, setReferences] = React49.useState([]);
-  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React49.useState(false);
-  const [quoteSelection, setQuoteSelection] = React49.useState(null);
-  const [isAtBottom, setIsAtBottom] = React49.useState(true);
-  const [hasUpdatesBelow, setHasUpdatesBelow] = React49.useState(false);
+  const [references, setReferences] = React50.useState([]);
+  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React50.useState(false);
+  const [quoteSelection, setQuoteSelection] = React50.useState(null);
+  const [isAtBottom, setIsAtBottom] = React50.useState(true);
+  const [hasUpdatesBelow, setHasUpdatesBelow] = React50.useState(false);
   const {
     threads,
     deleteThread,
     refreshThreads,
     isLoading: isThreadsLoading
   } = useThreads();
-  const viewportRef = React49.useRef(null);
-  const attachmentsRef = React49.useRef(null);
-  const composerInputRef = React49.useRef(null);
-  const slashPaletteRef = React49.useRef(null);
-  const slashPaletteOptionRefs = React49.useRef(
+  const viewportRef = React50.useRef(null);
+  const messageNavigationAnchorsRef = React50.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const attachmentsRef = React50.useRef(null);
+  const composerInputRef = React50.useRef(null);
+  const slashPaletteRef = React50.useRef(null);
+  const slashPaletteOptionRefs = React50.useRef(
     []
   );
-  const composerPartsRef = React49.useRef([]);
-  const pendingComposerCaretOffsetRef = React49.useRef(null);
-  const shouldAutoScrollRef = React49.useRef(true);
-  const forceFollowRef = React49.useRef(false);
-  const previousMessageCountRef = React49.useRef(0);
-  const previousScrollTopRef = React49.useRef(0);
-  const isPrependingHistoryMessagesRef = React49.useRef(false);
-  const autoScrollFrameRef = React49.useRef(null);
-  const isPointerDownRef = React49.useRef(false);
-  const lastTouchYRef = React49.useRef(null);
-  const runtimeCapabilityPreferenceLoadRef = React49.useRef(0);
+  const composerPartsRef = React50.useRef([]);
+  const pendingComposerCaretOffsetRef = React50.useRef(null);
+  const shouldAutoScrollRef = React50.useRef(true);
+  const forceFollowRef = React50.useRef(false);
+  const previousMessageCountRef = React50.useRef(0);
+  const previousScrollTopRef = React50.useRef(0);
+  const isPrependingHistoryMessagesRef = React50.useRef(false);
+  const autoScrollFrameRef = React50.useRef(null);
+  const isPointerDownRef = React50.useRef(false);
+  const lastTouchYRef = React50.useRef(null);
+  const runtimeCapabilityPreferenceLoadRef = React50.useRef(0);
   const resolvedTitle = title ?? t("chat.title");
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
+  const assistantTitle = assistantName || resolvedTitle;
   const petRequired = options?.displayMode === "pet";
-  const basePetSettings = React49.useMemo(
+  const basePetSettings = React50.useMemo(
     () => derivePetLocalSettings(options?.pet),
     [options?.pet]
   );
-  const displayedPetSettings = React49.useMemo(
+  const displayedPetSettings = React50.useMemo(
     () => ({
       ...petLocalSettings ?? basePetSettings,
       ...petRequired ? { enabled: true } : {}
     }),
     [basePetSettings, petLocalSettings, petRequired]
   );
-  const effectivePet = React49.useMemo(() => {
+  const effectivePet = React50.useMemo(() => {
     if (petRequired || petLocalSettings) {
       return buildPetOptionsFromLocalSettings(displayedPetSettings);
     }
     return options?.pet ?? null;
   }, [displayedPetSettings, options?.pet, petLocalSettings, petRequired]);
-  const savePetLocalSettings = React49.useCallback(
+  const savePetLocalSettings = React50.useCallback(
     (settings) => {
       const nextSettings = petRequired ? { ...settings, enabled: true } : settings;
       setPetLocalSettings(nextSettings);
@@ -15474,7 +15987,7 @@ function Chat({
     },
     [petRequired]
   );
-  const handlePetCommand = React49.useCallback(
+  const handlePetCommand = React50.useCallback(
     (mode) => {
       if (mode === "settings") {
         setPetSettingsOpen(true);
@@ -15496,16 +16009,53 @@ function Chat({
     [displayedPetSettings, effectivePet, petRequired, savePetLocalSettings]
   );
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
-  const messages = React49.useMemo(
+  const messages = React50.useMemo(
     () => stream.messages ?? [],
     [stream.messages]
   );
+  const messageNavigationLabels = React50.useMemo(
+    () => ({
+      user: t("chat.youLabel"),
+      assistant: assistantTitle,
+      system: t("message.navigation.system"),
+      tool: t("message.navigation.tool"),
+      event: t("message.navigation.event"),
+      message: t("message.navigation.message"),
+      image: t("message.navigation.image"),
+      memory: t("message.navigation.memory"),
+      widget: t("message.navigation.widget"),
+      mcpApp: t("message.navigation.mcpApp"),
+      attachment: t("message.navigation.attachment"),
+      reference: t("message.navigation.reference"),
+      capability: t("message.navigation.capability"),
+      reasoning: t("message.reasoning")
+    }),
+    [assistantTitle, t]
+  );
+  const messageNavigationItems = React50.useMemo(
+    () => messageNavigationEnabled ? buildMessageNavigationItems(
+      messages,
+      {
+        labels: messageNavigationLabels,
+        language: i18n2.language,
+        assistantTitle
+      }
+    ) : [],
+    [
+      assistantTitle,
+      i18n2.language,
+      messageNavigationEnabled,
+      messageNavigationLabels,
+      messages
+    ]
+  );
+  const showMessageNavigation = messageNavigationItems.length >= MESSAGE_NAVIGATION_MIN_ITEMS;
   const historyMessagePagination = stream.historyMessagePagination;
   const isLoadingMoreMessages = Boolean(
     historyMessagePagination?.isLoadingMore
   );
   const canLoadMoreMessages = Boolean(historyMessagePagination?.hasMore);
-  const draft = React49.useMemo(
+  const draft = React50.useMemo(
     () => getComposerPlainText(composerParts),
     [composerParts]
   );
@@ -15519,7 +16069,7 @@ function Chat({
     isEmpty: isComposerInputEmpty,
     isStacked: isComposerStacked
   });
-  const pendingFollowUps = React49.useMemo(
+  const pendingFollowUps = React50.useMemo(
     () => sortVisiblePendingFollowUps(stream.pendingFollowUps ?? []),
     [stream.pendingFollowUps]
   );
@@ -15528,21 +16078,18 @@ function Chat({
   const hasPendingHITLRequest = Boolean(stream.pendingHITLRequest);
   const hasPendingInteractiveRequest = hasPendingRequestUserInput || hasPendingHITLRequest;
   const hasPendingTodos = Boolean(stream.todos?.items.length);
-  const runtimeCapabilityOptions = React49.useMemo(
+  const runtimeCapabilityOptions = React50.useMemo(
     () => getRuntimeCapabilityOptions(runtimeCapabilities),
     [runtimeCapabilities]
   );
-  const goalAdapter = React49.useMemo(
-    () => {
-      if (isGoalAdapter(options?.goal)) {
-        return options.goal;
-      }
-      return supportsXpertThreadGoalAdapter(stream.client) ? createXpertThreadGoalAdapter(stream.client) : null;
-    },
-    [options?.goal, stream.client]
-  );
+  const goalAdapter = React50.useMemo(() => {
+    if (isGoalAdapter(options?.goal)) {
+      return options.goal;
+    }
+    return supportsXpertThreadGoalAdapter(stream.client) ? createXpertThreadGoalAdapter(stream.client) : null;
+  }, [options?.goal, stream.client]);
   const displayedGoalElapsedSeconds = threadGoal ? (threadGoal.elapsedSeconds ?? 0) + (goalElapsedStartedAt ? Math.max(0, Math.floor((streamingNow - goalElapsedStartedAt) / 1e3)) : 0) : 0;
-  const effectiveSessionRuntimeCapabilities = React49.useMemo(
+  const effectiveSessionRuntimeCapabilities = React50.useMemo(
     () => runtimeCapabilitiesReady && runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
       runtimeCapabilities,
       sessionRuntimeCapabilities
@@ -15555,7 +16102,7 @@ function Chat({
     "goal"
   );
   const showGoalStatus = goalCommandAvailable && !hasCompletedGoal && (Boolean(goalError) || threadGoal?.status === "active" && stream.isLoading);
-  const runRuntimeCapabilityOptions = React49.useMemo(
+  const runRuntimeCapabilityOptions = React50.useMemo(
     () => runtimeCapabilityOptions.filter(
       (option) => isRuntimeCapabilitySelected(
         runRuntimeCapabilities,
@@ -15565,11 +16112,11 @@ function Chat({
     ),
     [runRuntimeCapabilities, runtimeCapabilityOptions]
   );
-  const composerRuntimeCapabilitySelectionKeys = React49.useMemo(
+  const composerRuntimeCapabilitySelectionKeys = React50.useMemo(
     () => getComposerCapabilitySelectionKeys(composerParts),
     [composerParts]
   );
-  const detachedRunRuntimeCapabilityOptions = React49.useMemo(
+  const detachedRunRuntimeCapabilityOptions = React50.useMemo(
     () => runRuntimeCapabilityOptions.filter(
       (option) => !composerRuntimeCapabilitySelectionKeys.has(
         getRuntimeCapabilityOptionKey(option)
@@ -15577,7 +16124,7 @@ function Chat({
     ),
     [composerRuntimeCapabilitySelectionKeys, runRuntimeCapabilityOptions]
   );
-  const persistSessionRuntimeCapabilities = React49.useCallback(
+  const persistSessionRuntimeCapabilities = React50.useCallback(
     async (threadId, selection) => {
       if (!runtimeCapabilities || !selection) {
         return;
@@ -15602,10 +16149,10 @@ function Chat({
     },
     [runtimeCapabilities, stream.client]
   );
-  const clearQuoteSelection = React49.useCallback(() => {
+  const clearQuoteSelection = React50.useCallback(() => {
     setQuoteSelection(null);
   }, []);
-  const commitComposerParts = React49.useCallback(
+  const commitComposerParts = React50.useCallback(
     (nextParts, options2) => {
       const normalized = normalizeComposerParts(nextParts);
       const previous = composerPartsRef.current;
@@ -15641,7 +16188,7 @@ function Chat({
     },
     []
   );
-  const setComposerText = React49.useCallback(
+  const setComposerText = React50.useCallback(
     (text, caretOffset = text.length) => {
       commitComposerParts(createComposerTextParts(text), {
         caretOffset,
@@ -15651,7 +16198,7 @@ function Chat({
     },
     [commitComposerParts]
   );
-  const focusComposerAt = React49.useCallback((position) => {
+  const focusComposerAt = React50.useCallback((position) => {
     const nextPosition = position ?? getComposerEditingLength(composerPartsRef.current);
     pendingComposerCaretOffsetRef.current = nextPosition;
     requestAnimationFrame(() => {
@@ -15663,7 +16210,7 @@ function Chat({
     });
   }, []);
   const parentMessenger = useParentMessenger({
-    onSetComposerValue: React49.useCallback(
+    onSetComposerValue: React50.useCallback(
       (payload) => {
         if (!payload) {
           return;
@@ -15686,10 +16233,10 @@ function Chat({
       },
       [composer?.tools, setComposerText]
     ),
-    onFocusComposer: React49.useCallback(() => {
+    onFocusComposer: React50.useCallback(() => {
       composerInputRef.current?.focus();
     }, []),
-    onSetPetEnabled: React49.useCallback(
+    onSetPetEnabled: React50.useCallback(
       (enabled) => {
         if (petRequired) {
           return;
@@ -15703,10 +16250,10 @@ function Chat({
     )
   });
   const canMinimizeToPet = parentMessenger?.isParentAvailable === true && isPetEnabled(effectivePet);
-  const handleMinimizeToPet = React49.useCallback(() => {
+  const handleMinimizeToPet = React50.useCallback(() => {
     parentMessenger?.sendEvent("chat_minimize_change", { minimized: true });
   }, [parentMessenger]);
-  const syncQuoteSelection = React49.useCallback(() => {
+  const syncQuoteSelection = React50.useCallback(() => {
     if (typeof window === "undefined") {
       clearQuoteSelection();
       return;
@@ -15751,23 +16298,23 @@ function Chat({
       left
     });
   }, [clearQuoteSelection]);
-  const cancelPendingAutoScroll = React49.useCallback(() => {
+  const cancelPendingAutoScroll = React50.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
       autoScrollFrameRef.current = null;
     }
   }, []);
-  const disableAutoFollow = React49.useCallback(() => {
+  const disableAutoFollow = React50.useCallback(() => {
     forceFollowRef.current = false;
     shouldAutoScrollRef.current = false;
     cancelPendingAutoScroll();
   }, [cancelPendingAutoScroll]);
-  const enableAutoFollow = React49.useCallback(() => {
+  const enableAutoFollow = React50.useCallback(() => {
     forceFollowRef.current = true;
     shouldAutoScrollRef.current = true;
     setHasUpdatesBelow(false);
   }, []);
-  const scrollToBottom = React49.useCallback(
+  const scrollToBottom = React50.useCallback(
     (smooth = false, force = false) => {
       if (force) {
         enableAutoFollow();
@@ -15794,7 +16341,25 @@ function Chat({
     },
     [cancelPendingAutoScroll, enableAutoFollow]
   );
-  React49.useEffect(() => {
+  const setMessageNavigationAnchor = React50.useCallback(
+    (id, node) => {
+      if (node) {
+        messageNavigationAnchorsRef.current.set(id, node);
+        return;
+      }
+      messageNavigationAnchorsRef.current.delete(id);
+    },
+    []
+  );
+  const getMessageNavigationAnchor = React50.useCallback(
+    (item) => messageNavigationAnchorsRef.current.get(item.id) ?? null,
+    []
+  );
+  const handleMessageNavigationNavigate = React50.useCallback(() => {
+    disableAutoFollow();
+    clearQuoteSelection();
+  }, [clearQuoteSelection, disableAutoFollow]);
+  React50.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     previousScrollTopRef.current = viewport.scrollTop;
@@ -15875,14 +16440,14 @@ function Chat({
       window.removeEventListener("pointercancel", stopPointerTracking);
     };
   }, [cancelPendingAutoScroll, disableAutoFollow]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     shouldAutoScrollRef.current = true;
     forceFollowRef.current = false;
     previousScrollTopRef.current = 0;
     setIsAtBottom(true);
     setHasUpdatesBelow(false);
   }, [stream.threadId]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     const messageCountChanged = messages.length !== previousMessageCountRef.current;
     previousMessageCountRef.current = messages.length;
     if (isPrependingHistoryMessagesRef.current) {
@@ -15905,7 +16470,7 @@ function Chat({
     clientSecret: effectiveClientSecret
   });
   const missingConfig = Boolean(missingConfigKind);
-  const missingConfigShortMessage = React49.useMemo(() => {
+  const missingConfigShortMessage = React50.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlShort");
@@ -15917,7 +16482,7 @@ function Chat({
         return t("chat.missingConfigShort");
     }
   }, [missingConfigKind, t]);
-  const missingConfigDetailMessage = React49.useMemo(() => {
+  const missingConfigDetailMessage = React50.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlDetail");
@@ -15934,7 +16499,7 @@ function Chat({
   const isSubmissionBlocked = hasPendingInteractiveRequest || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
   const isSendDisabled = !trimmedDraft && !hasReferences || isSubmissionBlocked;
   const isPromptEditDisabled = hasPendingInteractiveRequest || missingConfig || isHistoryLoading;
-  const resizeComposerInput = React49.useCallback(() => {
+  const resizeComposerInput = React50.useCallback(() => {
     const input = composerInputRef.current;
     if (!input) {
       return;
@@ -15942,7 +16507,7 @@ function Chat({
     input.style.maxHeight = `${COMPOSER_INPUT_MAX_HEIGHT}px`;
     input.style.overflowY = input.scrollHeight > COMPOSER_INPUT_MAX_HEIGHT ? "auto" : "hidden";
   }, []);
-  React49.useLayoutEffect(() => {
+  React50.useLayoutEffect(() => {
     composerPartsRef.current = composerParts;
     resizeComposerInput();
     const caretOffset = pendingComposerCaretOffsetRef.current;
@@ -15954,13 +16519,13 @@ function Chat({
       }
     }
   }, [composerDomVersion, composerParts, resizeComposerInput]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     document.addEventListener("selectionchange", syncQuoteSelection);
     return () => {
       document.removeEventListener("selectionchange", syncQuoteSelection);
     };
   }, [syncQuoteSelection]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -15977,14 +16542,14 @@ function Chat({
       window.removeEventListener("resize", handleViewportScroll);
     };
   }, [clearQuoteSelection]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     clearQuoteSelection();
   }, [messages.length, stream.threadId, clearQuoteSelection]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (missingConfig) return;
     void refreshThreads();
   }, [missingConfig, refreshThreads]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) {
       setAssistantName(null);
       setAssistantAvatar(null);
@@ -16007,7 +16572,7 @@ function Chat({
       cancelled = true;
     };
   }, [missingConfig, stream.client, stream.assistantId]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) {
       setRuntimeCapabilities(null);
       setRuntimeCapabilitiesReady(false);
@@ -16054,7 +16619,7 @@ function Chat({
     });
     return () => controller.abort();
   }, [missingConfig, stream.client, stream.assistantId]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     setRunRuntimeCapabilities(
       createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities)
     );
@@ -16103,10 +16668,10 @@ function Chat({
     stream.client,
     stream.threadId
   ]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     setThreadGoal(stream.threadGoal);
   }, [stream.threadGoal]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     const threadId = stream.threadId?.trim();
     if (!threadId || !goalCommandAvailable) {
       setThreadGoal(null);
@@ -16147,7 +16712,7 @@ function Chat({
     return () => controller.abort();
   }, [goalAdapter, goalCommandAvailable, stream.threadId]);
   const uploadedFiles = attachmentState.uploadedFiles;
-  const handleSessionRuntimeCapabilityToggle = React49.useCallback(
+  const handleSessionRuntimeCapabilityToggle = React50.useCallback(
     (type, id, selected) => {
       setSessionRuntimeCapabilities((previous) => {
         const nextSelection = toggleRuntimeCapabilitySelection(
@@ -16165,7 +16730,7 @@ function Chat({
     },
     [persistSessionRuntimeCapabilities, stream.threadId]
   );
-  const updateRuntimeCapabilityPalette = React49.useCallback(
+  const updateRuntimeCapabilityPalette = React50.useCallback(
     (parts, selectionStart) => {
       const input = composerInputRef.current;
       const editingText = getComposerEditingText(parts);
@@ -16177,7 +16742,7 @@ function Chat({
     },
     []
   );
-  const syncComposerInputFromElement = React49.useCallback(
+  const syncComposerInputFromElement = React50.useCallback(
     (input) => {
       const previousCapabilities = getComposerCapabilityPartMap(
         composerPartsRef.current
@@ -16195,25 +16760,25 @@ function Chat({
     },
     [commitComposerParts, updateRuntimeCapabilityPalette]
   );
-  const handleComposerInput = React49.useCallback(
+  const handleComposerInput = React50.useCallback(
     (event) => {
       syncComposerInputFromElement(event.currentTarget);
     },
     [syncComposerInputFromElement]
   );
-  const handleComposerCompositionEnd = React49.useCallback(
+  const handleComposerCompositionEnd = React50.useCallback(
     (event) => {
       syncComposerInputFromElement(event.currentTarget);
     },
     [syncComposerInputFromElement]
   );
-  const handleComposerSelect = React49.useCallback(() => {
+  const handleComposerSelect = React50.useCallback(() => {
     updateRuntimeCapabilityPalette(
       composerPartsRef.current,
       composerInputRef.current ? getComposerSelectionOffset(composerInputRef.current) : void 0
     );
   }, [updateRuntimeCapabilityPalette]);
-  const removeRunRuntimeCapability = React49.useCallback(
+  const removeRunRuntimeCapability = React50.useCallback(
     (option) => {
       setRunRuntimeCapabilities(
         (previous) => toggleRuntimeCapabilitySelection(
@@ -16233,7 +16798,7 @@ function Chat({
     },
     [commitComposerParts]
   );
-  const submitDraft = React49.useCallback(
+  const submitDraft = React50.useCallback(
     (submitOptions = {}) => {
       if (isSubmissionBlocked) return;
       const contentToSubmit = (submitOptions.inputText ?? trimmedDraft).trim();
@@ -16356,7 +16921,7 @@ function Chat({
       t
     ]
   );
-  const handleGoalCommand = React49.useCallback(
+  const handleGoalCommand = React50.useCallback(
     async ({
       args,
       commandSource,
@@ -16468,13 +17033,10 @@ function Chat({
       t
     ]
   );
-  const handleGoalPanelOpenChange = React49.useCallback(
-    (open) => {
-      setIsGoalPanelOpen(open);
-    },
-    []
-  );
-  const addRunRuntimeCapabilities = React49.useCallback(
+  const handleGoalPanelOpenChange = React50.useCallback((open) => {
+    setIsGoalPanelOpen(open);
+  }, []);
+  const addRunRuntimeCapabilities = React50.useCallback(
     (selection) => {
       setRunRuntimeCapabilities(
         (previous) => runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
@@ -16486,7 +17048,7 @@ function Chat({
     },
     [runtimeCapabilities]
   );
-  const insertComposerCapabilityToken = React49.useCallback(
+  const insertComposerCapabilityToken = React50.useCallback(
     (capability, range) => {
       const token = createComposerCapabilityPart(capability, createMessageId());
       const currentParts = composerPartsRef.current;
@@ -16559,7 +17121,7 @@ function Chat({
     plugin: t("composer.slashCommands.empty.loadingCapabilities"),
     subAgent: t("composer.slashCommands.empty.loadingCapabilities")
   };
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -16578,7 +17140,7 @@ function Chat({
       );
     }
   }, [slashPaletteOptions.length, runtimeCapabilityPalette]);
-  React49.useLayoutEffect(() => {
+  React50.useLayoutEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -16595,7 +17157,7 @@ function Chat({
       container.scrollTop += optionRect.bottom - containerRect.bottom;
     }
   }, [runtimeCapabilityPalette, slashPaletteOptions.length]);
-  const submitGoalModeDraft = React49.useCallback(() => {
+  const submitGoalModeDraft = React50.useCallback(() => {
     const objective = getComposerPlainText(composerPartsRef.current).trim();
     if (!isGoalModeOpen || !goalCommandAvailable || !objective) {
       return false;
@@ -16633,7 +17195,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleEditPendingFollowUp = React49.useCallback(
+  const handleEditPendingFollowUp = React50.useCallback(
     (id) => {
       const item = pendingFollowUps.find(
         (entry) => entry.id === id && entry.mode === "queue"
@@ -16660,7 +17222,7 @@ function Chat({
     },
     [pendingFollowUps, setComposerText, stream]
   );
-  const handleQuoteSelection = React49.useCallback(() => {
+  const handleQuoteSelection = React50.useCallback(() => {
     if (!quoteSelection) {
       return;
     }
@@ -16676,7 +17238,7 @@ function Chat({
   const handleAttachmentClick = () => {
     attachmentsRef.current?.openFilePicker();
   };
-  const uploadContextFile = React49.useCallback(
+  const uploadContextFile = React50.useCallback(
     (file) => {
       const formData = new FormData();
       formData.append("file", file, file.name || "upload");
@@ -16695,13 +17257,13 @@ function Chat({
     },
     [stream.assistantId, stream.client, stream.threadId]
   );
-  const getContextFileStatus = React49.useCallback(
+  const getContextFileStatus = React50.useCallback(
     (fileId) => stream.client.contexts.fetch(`/files/${fileId}/status`, {
       method: "GET"
     }),
     [stream.client]
   );
-  const deleteContextFile = React49.useCallback(
+  const deleteContextFile = React50.useCallback(
     (storageFileId) => stream.client.contexts.deleteFile(storageFileId),
     [stream.client]
   );
@@ -16809,7 +17371,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleComposerPaste = React49.useCallback(
+  const handleComposerPaste = React50.useCallback(
     (event) => {
       const clipboardData = event.clipboardData;
       if (!clipboardData) {
@@ -16911,13 +17473,13 @@ function Chat({
   const handleToolSelect = (tool) => {
     setSelectedTool((prev) => prev?.id === tool.id ? null : tool);
   };
-  const handlePromptClick = React49.useCallback(
+  const handlePromptClick = React50.useCallback(
     (prompt) => {
       submitDraft({ inputText: prompt, displayText: prompt });
     },
     [submitDraft]
   );
-  const handlePromptEdit = React49.useCallback(
+  const handlePromptEdit = React50.useCallback(
     (prompt) => {
       if (isPromptEditDisabled) return;
       setComposerText(prompt, prompt.length);
@@ -16926,7 +17488,7 @@ function Chat({
     },
     [focusComposerAt, isPromptEditDisabled, setComposerText]
   );
-  const loadConversationMessages = React49.useCallback(
+  const loadConversationMessages = React50.useCallback(
     async (recordId) => {
       if (missingConfig) {
         setHistoryError(missingConfigShortMessage);
@@ -16947,7 +17509,7 @@ function Chat({
     },
     [missingConfig, missingConfigShortMessage, stream, t]
   );
-  const handleLoadMoreMessages = React49.useCallback(async () => {
+  const handleLoadMoreMessages = React50.useCallback(async () => {
     if (!canLoadMoreMessages || isLoadingMoreMessages) {
       return;
     }
@@ -17056,15 +17618,15 @@ function Chat({
   };
   const acceptMimes = composer?.attachments?.accept ? Object.entries(composer.attachments.accept).map(([mime, exts]) => [mime, ...exts.map((e) => `.${e}`)].join(",")).join(",") : void 0;
   const canUploadDroppedFiles = composer?.attachments?.enabled === true && !missingConfig && !isHistoryLoading && !hasPendingInteractiveRequest;
-  const handleDroppedFiles = React49.useCallback((files) => {
+  const handleDroppedFiles = React50.useCallback((files) => {
     return attachmentsRef.current?.queueFiles(files) ?? false;
   }, []);
-  const currentThread = React49.useMemo(
+  const currentThread = React50.useMemo(
     () => threads.find((item) => item.id === stream.threadId),
     [threads, stream.threadId]
   );
   const streamErrorMessage = stream.error instanceof Error ? stream.error.message : void 0;
-  const threadErrorMessage = React49.useMemo(() => {
+  const threadErrorMessage = React50.useMemo(() => {
     if (streamErrorMessage?.trim()) return streamErrorMessage.trim();
     if (currentThread?.status !== "error") return void 0;
     const message = currentThread.error?.trim();
@@ -17094,15 +17656,14 @@ function Chat({
     historyMessageLoadVersion: stream.historyMessageLoadVersion ?? 0,
     fallbackTitle: t("history.threadFallback")
   });
-  const assistantTitle = assistantName || resolvedTitle;
   const layoutMaxWidth = options?.layout?.maxWidth;
-  const chatColumnStyle = React49.useMemo(() => {
+  const chatColumnStyle = React50.useMemo(() => {
     if (layoutMaxWidth === void 0 || layoutMaxWidth === null || layoutMaxWidth === "") {
       return void 0;
     }
     return { maxWidth: layoutMaxWidth };
   }, [layoutMaxWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     UploadDroppedFiles,
     {
       ref: viewportRef,
@@ -17117,16 +17678,16 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
           "div",
           {
             "data-slot": "chatkit-chat-header",
             className: "mx-auto flex w-full items-center justify-between border-b p-2 sticky top-0 z-10 bg-background",
             style: chatColumnStyle,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "relative shrink-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "relative shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     ChatkitAvatar,
                     {
                       avatar: assistantAvatar,
@@ -17134,10 +17695,10 @@ function Chat({
                       label: assistantTitle
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "truncate", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "truncate", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     "h2",
                     {
                       className: "text-lg font-semibold truncate",
@@ -17145,12 +17706,12 @@ function Chat({
                       children: assistantTitle
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-1", children: [
-                canMinimizeToPet && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center gap-1", children: [
+                canMinimizeToPet && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     "button",
                     {
                       type: "button",
@@ -17161,13 +17722,13 @@ function Chat({
                         "transition-colors duration-150"
                       ),
                       "aria-label": t("chat.minimizeToPet"),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Minus, { size: 16 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.Minus, { size: 16 })
                     }
                   ) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { side: "bottom", children: t("chat.minimizeToPet") })
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipContent, { side: "bottom", children: t("chat.minimizeToPet") })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     "button",
                     {
                       type: "button",
@@ -17178,14 +17739,14 @@ function Chat({
                         "transition-colors duration-150"
                       ),
                       "aria-label": t("settings.open"),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Settings, { size: 16 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.Settings, { size: 16 })
                     }
                   ) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { side: "bottom", children: t("settings.open") })
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipContent, { side: "bottom", children: t("settings.open") })
                 ] }),
-                history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Tooltip, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                       "button",
                       {
                         type: "button",
@@ -17198,12 +17759,12 @@ function Chat({
                           "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
                         ),
                         "aria-label": t("history.newThread"),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Pencil, { size: 16 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.Pencil, { size: 16 })
                       }
                     ) }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { side: "bottom", children: t("history.newThread") })
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipContent, { side: "bottom", children: t("history.newThread") })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     HistorySidebar,
                     {
                       threads,
@@ -17220,18 +17781,29 @@ function Chat({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+        showMessageNavigation && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          MessageNavigator,
+          {
+            items: messageNavigationItems,
+            viewportRef,
+            getAnchor: getMessageNavigationAnchor,
+            onNavigate: handleMessageNavigationNavigate,
+            label: t("message.navigation.label"),
+            tagsOverflowLabel: (count) => t("message.navigation.moreTags", { count })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
           "div",
           {
             "data-slot": "chatkit-chat-content",
             className: "mx-auto w-full flex-1 p-4",
             style: chatColumnStyle,
             children: [
-              errorMessage && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
-              historyError && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
-              showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
-              isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
-              messages.length === 0 && !canLoadMoreMessages ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              errorMessage && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
+              historyError && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
+              showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
+              isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
+              messages.length === 0 && !canLoadMoreMessages ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 StartScreen,
                 {
                   startScreen,
@@ -17240,10 +17812,10 @@ function Chat({
                   promptSendDisabled: isSubmissionBlocked,
                   promptEditDisabled: isPromptEditDisabled
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "space-y-4", children: [
-                canLoadMoreMessages && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-3 py-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "h-px min-w-8 flex-1 bg-border" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "space-y-4", children: [
+                canLoadMoreMessages && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center gap-3 py-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "h-px min-w-8 flex-1 bg-border" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     Button,
                     {
                       type: "button",
@@ -17255,7 +17827,7 @@ function Chat({
                       children: isLoadingMoreMessages ? t("chat.loadingMoreMessages") : t("chat.loadMoreMessages")
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "h-px min-w-8 flex-1 bg-border" })
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "h-px min-w-8 flex-1 bg-border" })
                 ] }),
                 messages.map((message, index) => {
                   const messageType = String(message.type);
@@ -17289,18 +17861,24 @@ function Chat({
                   const hasHumanAttachments = message.type === "human" && humanAttachments.length > 0;
                   const canQuoteMessage = message.type === "human" || isAssistantMessage;
                   const quoteSource = message.type === "human" ? t("chat.youLabel") : assistantTitle;
+                  const messageNavigationId = getMessageNavigationItemId(
+                    message,
+                    index
+                  );
                   if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanRuntimeCapabilityOptions.length === 0 && humanReferences.length === 0) {
                     return null;
                   }
-                  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     "div",
                     {
+                      ref: (node) => setMessageNavigationAnchor(messageNavigationId, node),
+                      "data-message-navigation-id": messageNavigationId,
                       className: cn(
                         "group flex gap-3",
                         message.type === "human" ? "justify-end" : "justify-start -ml-1"
                         // AI messages: slightly closer to left
                       ),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
                         "div",
                         {
                           className: cn(
@@ -17308,7 +17886,7 @@ function Chat({
                             isAssistantMessage && "min-w-0 flex-1"
                           ),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                               "div",
                               {
                                 ...canQuoteMessage ? {
@@ -17320,7 +17898,7 @@ function Chat({
                                   message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
                                   // AI messages: use chat-specific foreground color
                                 ),
-                                children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                                children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                                   AssistantMessage,
                                   {
                                     message: {
@@ -17339,25 +17917,25 @@ function Chat({
                                     organizationId: stream.organizationId,
                                     apiUrl: stream.apiUrl
                                   }
-                                ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-                                  message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                                ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+                                  message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
                                     "span",
                                     {
                                       className: "inline-flex max-w-full items-center gap-1 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs font-medium text-primary-foreground",
                                       children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                                           RuntimeCapabilityIcon,
                                           {
                                             option,
                                             variant: "chip"
                                           }
                                         ),
-                                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "max-w-[9rem] truncate", children: option.label })
+                                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "max-w-[9rem] truncate", children: option.label })
                                       ]
                                     },
                                     `${option.type}:${option.id}`
                                   )) }),
-                                  message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                                  message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                                     ReferenceChip,
                                     {
                                       reference,
@@ -17365,29 +17943,29 @@ function Chat({
                                     },
                                     getReferenceKey(reference)
                                   )) }),
-                                  message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                                  message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
                                     "div",
                                     {
                                       className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
                                       children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.FileText, { size: 12 }),
-                                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName ?? file.id })
+                                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.FileText, { size: 12 }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName ?? file.id })
                                       ]
                                     },
                                     fileIndex
                                   )) }),
-                                  Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                                  Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                                     "p",
                                     {
                                       className: "wrap-break-word text-sm leading-relaxed",
                                       children: formatMessageContent(part)
                                     },
                                     `${part.type}-${partIndex}`
-                                  )) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                                  )) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
                                 ] })
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                               MessageActions,
                               {
                                 content: messageContent,
@@ -17425,7 +18003,7 @@ function Chat({
                     stream.isLoading,
                     { now: streamingNow }
                   );
-                  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     AssistantStreamingIndicator,
                     {
                       status: fallbackStreamingStatus ?? "loading"
@@ -17436,7 +18014,7 @@ function Chat({
             ]
           }
         ),
-        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           Button,
           {
             type: "button",
@@ -17449,10 +18027,10 @@ function Chat({
             onClick: () => scrollToBottom(true, true),
             "aria-label": t("chat.scrollToBottom"),
             title: t("chat.scrollToBottom"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.ArrowDown, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.ArrowDown, { size: 16 })
           }
         ) }),
-        quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-50",
@@ -17461,7 +18039,7 @@ function Chat({
               left: `${quoteSelection.left}px`,
               transform: "translateX(-50%)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
               Button,
               {
                 type: "button",
@@ -17473,22 +18051,22 @@ function Chat({
                 "aria-label": t("composer.quoteSelection"),
                 title: t("composer.quoteSelection"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Quote, { size: 14 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.Quote, { size: 14 }),
                   t("composer.quoteSelection")
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
           "div",
           {
             "data-slot": "chatkit-chat-composer",
             className: "mx-auto w-full p-2 sticky bottom-0 z-10 bg-background",
             style: chatColumnStyle,
             children: [
-              threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 ChatAttachments,
                 {
                   ref: attachmentsRef,
@@ -17502,7 +18080,7 @@ function Chat({
                   onStateChange: setAttachmentState
                 }
               ),
-              references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 ReferenceChip,
                 {
                   reference,
@@ -17516,16 +18094,16 @@ function Chat({
                 },
                 getReferenceKey(reference)
               )) }),
-              detachedRunRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-xs text-muted-foreground", children: t("composer.capabilities.runOnly") }),
-                detachedRunRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+              detachedRunRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-xs text-muted-foreground", children: t("composer.capabilities.runOnly") }),
+                detachedRunRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
                   "span",
                   {
                     className: "inline-flex max-w-full items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(RuntimeCapabilityIcon, { option, variant: "chip" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "max-w-40 truncate", children: option.label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(RuntimeCapabilityIcon, { option, variant: "chip" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "max-w-40 truncate", children: option.label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                         "button",
                         {
                           type: "button",
@@ -17533,7 +18111,7 @@ function Chat({
                           className: "rounded-full p-0.5 hover:bg-primary/15",
                           title: t("composer.capabilities.removeRunCapability"),
                           "aria-label": t("composer.capabilities.removeRunCapability"),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { size: 11 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.X, { size: 11 })
                         }
                       )
                     ]
@@ -17541,7 +18119,7 @@ function Chat({
                   `${option.type}:${option.id}`
                 ))
               ] }),
-              showGoalStatus && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+              showGoalStatus && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
                 "div",
                 {
                   className: cn(
@@ -17549,7 +18127,7 @@ function Chat({
                     isGoalObjectiveExpanded ? "items-start" : "items-center"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                       import_lucide_react29.Target,
                       {
                         className: cn(
@@ -17558,13 +18136,13 @@ function Chat({
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "font-medium", children: t("chat.goal.label") }),
-                        threadGoal && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: t(`chat.goal.status.${threadGoal.status}`) }),
-                        isGoalLoading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Loader2, { className: "size-3 animate-spin text-muted-foreground" })
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "font-medium", children: t("chat.goal.label") }),
+                        threadGoal && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: t(`chat.goal.status.${threadGoal.status}`) }),
+                        isGoalLoading && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.Loader2, { className: "size-3 animate-spin text-muted-foreground" })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                         "div",
                         {
                           className: cn(
@@ -17574,13 +18152,13 @@ function Chat({
                           children: goalError || threadGoal?.objective
                         }
                       ),
-                      threadGoal && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: t("chat.goal.elapsed", {
+                      threadGoal && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: t("chat.goal.elapsed", {
                         elapsed: formatGoalElapsed(displayedGoalElapsedSeconds)
                       }) }) })
                     ] }),
-                    threadGoal && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    threadGoal && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Tooltip, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                           Button,
                           {
                             type: "button",
@@ -17591,13 +18169,13 @@ function Chat({
                               const prefix = "/goal edit ";
                               setComposerText(`${prefix}${threadGoal.objective}`);
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Pencil, { className: "size-3" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.Pencil, { className: "size-3" })
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: t("chat.goal.edit") })
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipContent, { children: t("chat.goal.edit") })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Tooltip, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                           Button,
                           {
                             type: "button",
@@ -17613,13 +18191,13 @@ function Chat({
                                 executionType: "insert_invocation"
                               }
                             }),
-                            children: threadGoal.status === "paused" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Play, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Pause, { className: "size-3" })
+                            children: threadGoal.status === "paused" ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.Play, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.Pause, { className: "size-3" })
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Tooltip, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                           Button,
                           {
                             type: "button",
@@ -17635,13 +18213,13 @@ function Chat({
                                 executionType: "insert_invocation"
                               }
                             }),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Trash2, { className: "size-3" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.Trash2, { className: "size-3" })
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: t("chat.goal.clear") })
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipContent, { children: t("chat.goal.clear") })
                       ] }),
-                      threadGoal.objective && !goalError && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      threadGoal.objective && !goalError && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Tooltip, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                           Button,
                           {
                             type: "button",
@@ -17650,7 +18228,7 @@ function Chat({
                             "aria-expanded": isGoalObjectiveExpanded,
                             "aria-label": isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective"),
                             onClick: () => setIsGoalObjectiveExpanded((expanded) => !expanded),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                               import_lucide_react29.ChevronDown,
                               {
                                 className: cn(
@@ -17661,13 +18239,13 @@ function Chat({
                             )
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { children: isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective") })
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipContent, { children: isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective") })
                       ] })
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 PendingRuntimeServices,
                 {
                   state: stream.runtimeActivities.sandboxServices,
@@ -17676,7 +18254,7 @@ function Chat({
                   className: hasPendingTodos || hasPendingFollowUps ? "mb-2" : void 0
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 PendingTodos,
                 {
                   snapshot: stream.todos,
@@ -17684,7 +18262,7 @@ function Chat({
                   className: hasPendingFollowUps ? "mb-2" : void 0
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 PendingFollowUps,
                 {
                   items: pendingFollowUps,
@@ -17697,7 +18275,7 @@ function Chat({
                   attachToComposer: true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 RequestUserInputPanel,
                 {
                   request: stream.pendingRequestUserInput,
@@ -17706,7 +18284,7 @@ function Chat({
                   attachToComposer: true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 HITLApprovalPanel,
                 {
                   request: stream.pendingHITLRequest,
@@ -17715,7 +18293,7 @@ function Chat({
                   attachToComposer: true
                 }
               ),
-              runtimeCapabilityPalette && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              runtimeCapabilityPalette && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 SlashPalette,
                 {
                   palette: runtimeCapabilityPalette,
@@ -17729,7 +18307,7 @@ function Chat({
                   onSelect: selectSlashPaletteOption
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
                 "div",
                 {
                   "data-slot": "composer-input-shell",
@@ -17743,7 +18321,7 @@ function Chat({
                     composerInputRoundedClass
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                       "div",
                       {
                         ref: composerInputRef,
@@ -17765,7 +18343,7 @@ function Chat({
                           (missingConfig || isHistoryLoading || hasPendingInteractiveRequest) && "cursor-not-allowed opacity-50"
                         ),
                         children: renderedComposerParts.map(
-                          (part, index) => part.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(React49.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                          (part, index) => part.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(React50.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
                             "span",
                             {
                               "data-composer-capability-key": part.key,
@@ -17774,14 +18352,14 @@ function Chat({
                               contentEditable: false,
                               className: "mx-0.5 inline-flex max-w-[14rem] select-none items-center gap-1 text-sm font-semibold text-primary align-baseline",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                                   RuntimeCapabilityIcon,
                                   {
                                     option: part.capability,
                                     variant: "chip"
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "truncate", children: part.capability.label })
+                                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "truncate", children: part.capability.label })
                               ]
                             },
                             part.key
@@ -17790,14 +18368,14 @@ function Chat({
                       },
                       composerDomVersion
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
                       "div",
                       {
                         "data-slot": "composer-action-bar",
                         className: "pointer-events-none absolute inset-x-1.5 bottom-1 flex min-h-10 items-center justify-between gap-2",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                               ComposerMenu,
                               {
                                 composer,
@@ -17815,20 +18393,20 @@ function Chat({
                                 disabled: missingConfig || isHistoryLoading || hasPendingInteractiveRequest
                               }
                             ) }),
-                            selectedTool && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
-                              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                            selectedTool && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
+                              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                                 "button",
                                 {
                                   type: "button",
                                   onClick: () => setSelectedTool(null),
                                   className: "shrink-0 rounded-full p-0.5 text-primary/70 hover:bg-primary/10 hover:text-primary",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.X, { size: 12 })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react29.X, { size: 12 })
                                 }
                               )
                             ] })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                             SendButton,
                             {
                               disabled: isSendDisabled,
@@ -17851,7 +18429,7 @@ function Chat({
                   ]
                 }
               ) }),
-              disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 "p",
                 {
                   className: cn(
@@ -17861,14 +18439,14 @@ function Chat({
                   children: disclaimer.text
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: t("chat.poweredBy") }),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: t("chat.poweredBy") }),
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           SettingsSheet,
           {
             open: petSettingsOpen,
@@ -17878,17 +18456,17 @@ function Chat({
             onSave: savePetLocalSettings
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PetBridge, { pet: effectivePet, state: petAutoState })
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PetBridge, { pet: effectivePet, state: petAutoState })
       ]
     }
   );
 }
 
 // src/components/ui/separator.tsx
-var React50 = __toESM(require("react"), 1);
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var Separator = React50.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+var React51 = __toESM(require("react"), 1);
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var Separator = React51.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
       ref,