@xpert-ai/chatkit-ui 0.5.4 → 0.5.5

package/dist/index.js

@@ -6,6 +6,7 @@ import {
   FileText as FileText5,
   ImageIcon as ImageIcon2,
   Loader2 as Loader212,
+  MessageSquarePlus,
   Minus,
   Pause,
   Pencil as Pencil4,
@@ -14,7 +15,7 @@ import {
   Settings as Settings2,
   Target as Target3,
   Trash2 as Trash23,
-  X as X10
+  X as X9
 } from "lucide-react";
 import { CHATKIT_TASK_SUMMARY_OPEN_RESOURCE_EFFECT } from "@xpert-ai/chatkit-types";
 
@@ -2154,6 +2155,17 @@ var en_US_default = {
     entryUnavailable: "Remote view content is unavailable.",
     missingAssistant: "An assistant is required to load views.",
     retry: "Retry",
+    sideChat: {
+      title: "Side chat",
+      threadRequired: "Start a conversation before opening a side chat.",
+      closeDialog: {
+        title: "Close side chat?",
+        description: "This side chat will be removed from the current workbench and cannot be restored on this page. Its conversation data will be retained.",
+        dontAskAgain: "Don't ask again",
+        cancel: "Cancel",
+        confirm: "Close side chat"
+      }
+    },
     errors: {
       contextKeyRequired: "Context key is required.",
       messageRequired: "Message text is required.",
@@ -2329,6 +2341,7 @@ var en_US_default = {
     disablePlanMode: "Turn off plan mode",
     removeReference: "Remove reference",
     quoteSelection: "Quote selection",
+    askInSideChat: "Ask in side chat",
     requestUserInput: {
       title: "Input requested",
       recommended: "Recommended",
@@ -2654,6 +2667,17 @@ var zh_CN_default = {
     entryUnavailable: "\u8FDC\u7A0B\u89C6\u56FE\u5185\u5BB9\u4E0D\u53EF\u7528\u3002",
     missingAssistant: "\u9700\u8981 Assistant \u624D\u80FD\u52A0\u8F7D\u89C6\u56FE\u3002",
     retry: "\u91CD\u8BD5",
+    sideChat: {
+      title: "\u4FA7\u8FB9\u804A\u5929",
+      threadRequired: "\u8BF7\u5148\u5F00\u59CB\u4E3B\u5BF9\u8BDD\uFF0C\u518D\u6253\u5F00\u4FA7\u8FB9\u804A\u5929\u3002",
+      closeDialog: {
+        title: "\u5173\u95ED\u4FA7\u8FB9\u804A\u5929\uFF1F",
+        description: "\u5173\u95ED\u540E\uFF0C\u6B64\u4FA7\u8FB9\u804A\u5929\u5C06\u4ECE\u5F53\u524D\u5DE5\u4F5C\u53F0\u79FB\u9664\uFF0C\u5F53\u524D\u9875\u9762\u65E0\u6CD5\u6062\u590D\uFF1B\u5BF9\u8BDD\u6570\u636E\u4ECD\u4F1A\u4FDD\u7559\u3002",
+        dontAskAgain: "\u4E0D\u518D\u8BE2\u95EE",
+        cancel: "\u53D6\u6D88",
+        confirm: "\u5173\u95ED\u4FA7\u8FB9\u804A\u5929"
+      }
+    },
     errors: {
       contextKeyRequired: "\u5FC5\u987B\u63D0\u4F9B\u4E0A\u4E0B\u6587\u952E\u3002",
       messageRequired: "\u5FC5\u987B\u63D0\u4F9B\u6D88\u606F\u5185\u5BB9\u3002",
@@ -2829,6 +2853,7 @@ var zh_CN_default = {
     disablePlanMode: "\u5173\u95ED\u8BA1\u5212\u6A21\u5F0F",
     removeReference: "\u79FB\u9664\u5F15\u7528",
     quoteSelection: "\u5F15\u7528\u9009\u4E2D\u5185\u5BB9",
+    askInSideChat: "\u5728\u4FA7\u8FB9\u804A\u5929\u4E2D\u63D0\u95EE",
     requestUserInput: {
       title: "\u9700\u8981\u4F60\u7684\u8F93\u5165",
       recommended: "\u63A8\u8350",
@@ -4981,6 +5006,7 @@ function SheetOverlay({
 function SheetContent({
   side = "right",
   showCloseButton = true,
+  forceMount,
   className,
   children,
   ...props
@@ -4992,11 +5018,18 @@ function SheetContent({
     left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
     right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
   };
-  return /* @__PURE__ */ jsxs8(SheetPortal, { children: [
-    /* @__PURE__ */ jsx15(SheetOverlay, {}),
+  return /* @__PURE__ */ jsxs8(SheetPortal, { forceMount, children: [
+    /* @__PURE__ */ jsx15(
+      SheetOverlay,
+      {
+        forceMount,
+        className: forceMount ? "data-[state=closed]:hidden" : void 0
+      }
+    ),
     /* @__PURE__ */ jsxs8(
       SheetPrimitive.Content,
       {
+        forceMount,
         className: cn(
           "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
           sideVariants[side],
@@ -11040,7 +11073,7 @@ function AgentRunGroup({
   ].filter(
     (item) => Boolean(item)
   );
-  return /* @__PURE__ */ jsxs21("div", { className: cn("border-l border-border/70 pl-2", depth > 0 ? "ml-1" : "-mx-2.5"), children: [
+  return /* @__PURE__ */ jsxs21("div", { className: cn("border border-border/70 pl-2 rounded-lg", depth > 0 ? "ml-1" : "-mx-2.5"), children: [
     /* @__PURE__ */ jsxs21(
       "button",
       {
@@ -16155,7 +16188,7 @@ var sortThreadRecords = (threadRecords) => {
     return (Number.isNaN(bTime) ? 0 : bTime) - (Number.isNaN(aTime) ? 0 : aTime);
   });
 };
-function useThreads(limit = DEFAULT_LIMIT) {
+function useThreads(limit = DEFAULT_LIMIT, enabled = true) {
   const {
     client,
     threadId,
@@ -16175,6 +16208,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     });
   }, []);
   const refreshThreads = React42.useCallback(async () => {
+    if (!enabled) return;
     setIsLoading(true);
     setError(null);
     try {
@@ -16189,7 +16223,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     } finally {
       setIsLoading(false);
     }
-  }, [client, limit, assistantId, projectId]);
+  }, [client, enabled, limit, assistantId, projectId]);
   const createThread = React42.useCallback(
     async (input) => {
       setError(null);
@@ -16225,9 +16259,9 @@ function useThreads(limit = DEFAULT_LIMIT) {
     [client]
   );
   React42.useEffect(() => {
-    if (!isReady) return;
+    if (!enabled || !isReady) return;
     void refreshThreads();
-  }, [refreshThreads, isReady]);
+  }, [enabled, refreshThreads, isReady]);
   React42.useEffect(() => {
     if (!threadId || !isStreamLoading) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
@@ -17995,27 +18029,18 @@ function findDomPointForComposerOffset(root, offset) {
   return result ?? { node: lastNode, offset: lastOffset };
 }
 
-// src/workbench/WorkbenchShell.tsx
+// src/workbench/context.tsx
 import * as React52 from "react";
-import {
-  ASSISTANT_CHAT_SEND_MESSAGE_COMMAND,
-  ASSISTANT_CONTEXT_SET_COMMAND
-} from "@xpert-ai/xpert-sdk";
-import {
-  Loader2 as Loader210,
-  Maximize2 as Maximize22,
-  Minimize2 as Minimize22,
-  PanelRight,
-  RotateCcw,
-  X as X8
-} from "lucide-react";
-import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Loader2 as Loader210, PanelRight } from "lucide-react";
+import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
 var WorkbenchContext = React52.createContext({
   enabled: false,
   open: false,
   loading: false,
   available: false,
-  toggle: () => void 0
+  toggle: () => void 0,
+  sideChatEnabled: false,
+  askInSideChat: async () => void 0
 });
 function useWorkbench() {
   return React52.useContext(WorkbenchContext);
@@ -18049,7 +18074,7 @@ function WorkbenchToggleButton() {
 
 // src/components/chat/runtime-capabilities.tsx
 import * as React53 from "react";
-import { X as X9 } from "lucide-react";
+import { X as X8 } from "lucide-react";
 import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
 function createComposerCapabilityInsertionParts(options) {
   return options.flatMap((option) => [
@@ -18655,7 +18680,7 @@ function DetachedRunRuntimeCapabilities({
                 className: "rounded-full p-0.5 hover:bg-primary/15",
                 title: removeLabel,
                 "aria-label": removeLabel,
-                children: /* @__PURE__ */ jsx58(X9, { size: 11 })
+                children: /* @__PURE__ */ jsx58(X8, { size: 11 })
               }
             )
           ]
@@ -19067,7 +19092,7 @@ import {
   ListChecks as ListChecks3,
   Loader2 as Loader211,
   PlayCircle,
-  RotateCcw as RotateCcw2,
+  RotateCcw,
   Target as Target2
 } from "lucide-react";
 import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
@@ -19211,7 +19236,7 @@ function TaskSummaryContent({
           className: "inline-flex shrink-0 items-center gap-1 font-medium hover:underline",
           onClick: onRetryHistory,
           children: [
-            /* @__PURE__ */ jsx59(RotateCcw2, { className: "size-3" }),
+            /* @__PURE__ */ jsx59(RotateCcw, { className: "size-3" }),
             t("taskSummary.retry")
           ]
         }
@@ -19385,7 +19410,7 @@ function formatElapsed(value) {
 }
 
 // src/components/chat.tsx
-import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
 var defaultApiUrl2 = import.meta.env.VITE_XPERTAI_API_URL;
 var COMPOSER_INPUT_MAX_HEIGHT = 128;
 var LONG_TEXT_REFERENCE_THRESHOLD = 5e3;
@@ -19544,7 +19569,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ jsx60(X10, { size: 12 })
+            children: /* @__PURE__ */ jsx60(X9, { size: 12 })
           }
         )
       ]
@@ -19557,7 +19582,9 @@ function Chat({
   title,
   placeholder,
   clientSecret = "",
-  isClientSecretInitializing = false
+  isClientSecretInitializing = false,
+  surface = "main",
+  referenceRequest
 }) {
   const { t, i18n: i18n2 } = useChatkitTranslation();
   const composer = options?.composer;
@@ -19568,6 +19595,7 @@ function Chat({
   const messageNavigationEnabled = options?.messageNavigation?.enabled !== false;
   const { setStream } = useStreamManager();
   const stream = useStreamContext();
+  const workbench = useWorkbench();
   const { theme } = useTheme();
   const effectiveClientSecret = stream.apiKey?.trim() ? stream.apiKey : clientSecret;
   const missingConfigKind = getMissingApiConfigurationKind({
@@ -19616,8 +19644,8 @@ function Chat({
   const loadingStartTimeRef = React56.useRef(null);
   const lastStreamOutputAtRef = React56.useRef(null);
   React56.useEffect(() => {
-    setStream(stream);
-  }, [setStream, stream]);
+    if (surface === "main") setStream(stream);
+  }, [setStream, stream, surface]);
   React56.useEffect(() => {
     if (stream.isLoading) {
       if (!loadingStartTimeRef.current) {
@@ -19692,6 +19720,8 @@ function Chat({
   const [references, setReferences] = React56.useState([]);
   const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React56.useState(false);
   const [quoteSelection, setQuoteSelection] = React56.useState(null);
+  const [isOpeningSideChat, setIsOpeningSideChat] = React56.useState(false);
+  const [sideChatError, setSideChatError] = React56.useState(null);
   const [isAtBottom, setIsAtBottom] = React56.useState(true);
   const [hasUpdatesBelow, setHasUpdatesBelow] = React56.useState(false);
   const {
@@ -19699,7 +19729,7 @@ function Chat({
     deleteThread,
     refreshThreads,
     isLoading: isThreadsLoading
-  } = useThreads();
+  } = useThreads(void 0, surface === "main" && history?.enabled !== false);
   const viewportRef = React56.useRef(null);
   const chatColumnRef = React56.useRef(null);
   const messageNavigationAnchorsRef = React56.useRef(
@@ -19707,6 +19737,7 @@ function Chat({
   );
   const attachmentsRef = React56.useRef(null);
   const composerInputRef = React56.useRef(null);
+  const appliedReferenceRequestRef = React56.useRef(null);
   const isComposerComposingRef = React56.useRef(false);
   const slashPaletteRef = React56.useRef(null);
   const slashPaletteOptionRefs = React56.useRef(
@@ -19867,15 +19898,16 @@ function Chat({
   const hasPendingInteractiveRequest = hasPendingRequestUserInput || hasPendingHITLRequest;
   const hasPendingTodos = Boolean(stream.todos?.items.length);
   const goalAdapter = React56.useMemo(() => {
+    if (surface !== "main") return null;
     if (isGoalAdapter(options?.goal)) {
       return options.goal;
     }
     return supportsXpertThreadGoalAdapter(stream.client) ? createXpertThreadGoalAdapter(stream.client) : null;
-  }, [options?.goal, stream.client]);
+  }, [options?.goal, stream.client, surface]);
   const displayedGoalElapsedSeconds = threadGoal ? (threadGoal.elapsedSeconds ?? 0) + (goalElapsedStartedAt ? Math.max(0, Math.floor((streamingNow - goalElapsedStartedAt) / 1e3)) : 0) : 0;
   const goalCommandAvailable = hasSelectedRuntimeSlashCommand(
-    runtimeCapabilities,
-    effectiveSessionRuntimeCapabilities,
+    surface === "main" ? runtimeCapabilities : null,
+    surface === "main" ? effectiveSessionRuntimeCapabilities : null,
     "goal"
   );
   const showGoalStatus = goalCommandAvailable && !hasCompletedGoal && (Boolean(goalError) || threadGoal?.status === "active" && stream.isLoading);
@@ -19933,6 +19965,16 @@ function Chat({
       setComposerSelectionOffset(input, nextPosition);
     });
   }, []);
+  React56.useEffect(() => {
+    if (!referenceRequest || appliedReferenceRequestRef.current === referenceRequest.id) {
+      return;
+    }
+    appliedReferenceRequestRef.current = referenceRequest.id;
+    setReferences(
+      (previous) => mergeReferences(previous, [referenceRequest.reference])
+    );
+    requestAnimationFrame(() => composerInputRef.current?.focus());
+  }, [referenceRequest]);
   const {
     applyComposerValueRuntimeCapabilities,
     updateRuntimeCapabilityPalette,
@@ -19950,62 +19992,63 @@ function Chat({
     commitComposerParts,
     focusComposerAt
   });
-  const parentMessenger = useParentMessenger({
-    onSetComposerValue: React56.useCallback(
-      (payload) => {
-        if (!payload) {
-          return;
-        }
-        const shouldInsertRuntimeCapabilitiesBeforeText = typeof payload.text === "string" && payload.insertRuntimeCapabilities === true;
-        if (typeof payload.text === "string") {
-          setComposerText(payload.text);
-        }
-        if (Array.isArray(payload.references)) {
-          const nextReferences = normalizeReferences(payload.references);
-          setReferences(
-            (previous) => payload.appendReferences ? mergeReferences(previous, nextReferences) : nextReferences
-          );
-        }
-        if (payload.selectedToolId !== void 0) {
-          const nextTool = payload.selectedToolId === null ? null : (composer?.tools ?? []).find(
-            (tool) => tool.id === payload.selectedToolId
-          ) ?? null;
-          setSelectedTool(nextTool);
-        }
-        applyComposerValueRuntimeCapabilities(
-          payload,
-          shouldInsertRuntimeCapabilitiesBeforeText ? { insertAt: 0 } : void 0
+  const handleSetComposerValue = React56.useCallback(
+    (payload) => {
+      if (!payload) return;
+      const shouldInsertRuntimeCapabilitiesBeforeText = typeof payload.text === "string" && payload.insertRuntimeCapabilities === true;
+      if (typeof payload.text === "string") setComposerText(payload.text);
+      if (Array.isArray(payload.references)) {
+        const nextReferences = normalizeReferences(payload.references);
+        setReferences(
+          (previous) => payload.appendReferences ? mergeReferences(previous, nextReferences) : nextReferences
         );
-      },
-      [applyComposerValueRuntimeCapabilities, composer?.tools, setComposerText]
-    ),
-    onSetRuntimeCapabilities: React56.useCallback(
-      (selection) => {
-        applyExternalRuntimeCapabilities(selection);
-      },
-      [applyExternalRuntimeCapabilities]
-    ),
-    onFocusComposer: React56.useCallback(() => {
-      composerInputRef.current?.focus();
-    }, []),
-    onSetPetEnabled: React56.useCallback(
-      (enabled) => {
-        if (petRequired) {
-          return;
-        }
-        savePetLocalSettings({
-          ...displayedPetSettings,
-          enabled
-        });
-      },
-      [displayedPetSettings, petRequired, savePetLocalSettings]
-    )
-  });
+      }
+      if (payload.selectedToolId !== void 0) {
+        const nextTool = payload.selectedToolId === null ? null : (composer?.tools ?? []).find(
+          (tool) => tool.id === payload.selectedToolId
+        ) ?? null;
+        setSelectedTool(nextTool);
+      }
+      applyComposerValueRuntimeCapabilities(
+        payload,
+        shouldInsertRuntimeCapabilitiesBeforeText ? { insertAt: 0 } : void 0
+      );
+    },
+    [applyComposerValueRuntimeCapabilities, composer?.tools, setComposerText]
+  );
+  const handleSetRuntimeCapabilities = React56.useCallback(
+    (selection) => {
+      applyExternalRuntimeCapabilities(selection);
+    },
+    [applyExternalRuntimeCapabilities]
+  );
+  const handleFocusComposer = React56.useCallback(() => {
+    composerInputRef.current?.focus();
+  }, []);
+  const handleSetPetEnabled = React56.useCallback(
+    (enabled) => {
+      if (petRequired) return;
+      savePetLocalSettings({ ...displayedPetSettings, enabled });
+    },
+    [displayedPetSettings, petRequired, savePetLocalSettings]
+  );
+  const parentMessenger = useParentMessenger(
+    surface === "main" ? {
+      onSetComposerValue: handleSetComposerValue,
+      onSetRuntimeCapabilities: handleSetRuntimeCapabilities,
+      onFocusComposer: handleFocusComposer,
+      onSetPetEnabled: handleSetPetEnabled
+    } : {}
+  );
   const canMinimizeToPet = parentMessenger?.isParentAvailable === true && isPetEnabled(effectivePet);
   const handleMinimizeToPet = React56.useCallback(() => {
     parentMessenger?.sendEvent("chat_minimize_change", { minimized: true });
   }, [parentMessenger]);
   const syncQuoteSelection = React56.useCallback(() => {
+    if (surface !== "main") {
+      clearQuoteSelection();
+      return;
+    }
     if (typeof window === "undefined") {
       clearQuoteSelection();
       return;
@@ -20049,7 +20092,7 @@ function Chat({
       top,
       left
     });
-  }, [clearQuoteSelection]);
+  }, [clearQuoteSelection, surface]);
   const cancelPendingAutoScroll = React56.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
@@ -20899,6 +20942,27 @@ function Chat({
     }
     composerInputRef.current?.focus();
   }, [clearQuoteSelection, quoteSelection]);
+  const handleAskInSideChat = React56.useCallback(async () => {
+    if (!quoteSelection || !workbench.sideChatEnabled || !stream.threadId || stream.isLoading)
+      return;
+    setIsOpeningSideChat(true);
+    setSideChatError(null);
+    try {
+      await workbench.askInSideChat(quoteSelection.reference);
+      clearQuoteSelection();
+      window.getSelection()?.removeAllRanges();
+    } catch (error) {
+      setSideChatError(error instanceof Error ? error.message : String(error));
+    } finally {
+      setIsOpeningSideChat(false);
+    }
+  }, [
+    clearQuoteSelection,
+    quoteSelection,
+    stream.isLoading,
+    stream.threadId,
+    workbench
+  ]);
   const handleAttachmentClick = () => {
     attachmentsRef.current?.openFilePicker();
   };
@@ -21153,7 +21217,7 @@ function Chat({
     [focusComposerAt, isPromptEditDisabled, setComposerText]
   );
   const loadConversationMessages = React56.useCallback(
-    async (recordId) => {
+    async (recordId, threadId) => {
       if (missingConfig) {
         setHistoryError(missingConfigShortMessage);
         return;
@@ -21161,7 +21225,7 @@ function Chat({
       setHistoryError(null);
       setIsHistoryLoading(true);
       try {
-        await stream.loadConversationMessages(recordId);
+        await stream.loadConversationMessages(recordId, threadId);
       } catch (err) {
         console.warn("Failed to load thread messages", err);
         setHistoryError(
@@ -21226,13 +21290,13 @@ function Chat({
     if (!thread) return;
     if (id === stream.threadId) {
       if (thread.status === "interrupted" && thread.recordId && !stream.pendingHITLRequest) {
-        void loadConversationMessages(thread.recordId);
+        void loadConversationMessages(thread.recordId, thread.id);
       }
       return;
     }
     stream.reset(id, []);
     if (thread.recordId) {
-      void loadConversationMessages(thread.recordId);
+      void loadConversationMessages(thread.recordId, thread.id);
     }
   };
   const handleDeleteThread = (id) => {
@@ -21429,12 +21493,12 @@ function Chat({
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs42(
+              surface === "main" && options?.header?.enabled !== false && /* @__PURE__ */ jsxs42(
                 "div",
                 {
                   ref: chatColumnRef,
                   "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",
+                  className: "mx-auto flex w-full items-center justify-between border-b border-secondary px-2 py-1 sticky top-0 z-10 bg-background",
                   style: chatColumnStyle,
                   children: [
                     /* @__PURE__ */ jsxs42("div", { className: "flex min-w-0 items-center gap-3 overflow-hidden", children: [
@@ -21513,7 +21577,7 @@ function Chat({
                         ) }) }),
                         /* @__PURE__ */ jsx60(TooltipContent, { side: "bottom", children: t("settings.open") })
                       ] }),
-                      history?.enabled !== false && /* @__PURE__ */ jsxs42(Fragment12, { children: [
+                      history?.enabled !== false && /* @__PURE__ */ jsxs42(Fragment11, { children: [
                         /* @__PURE__ */ jsxs42(Tooltip, { children: [
                           /* @__PURE__ */ jsx60(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx60("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx60(
                             "button",
@@ -21583,7 +21647,7 @@ function Chat({
                         promptSendDisabled: isSubmissionBlocked,
                         promptEditDisabled: isPromptEditDisabled
                       }
-                    ) : /* @__PURE__ */ jsxs42("div", { className: "space-y-4", children: [
+                    ) : /* @__PURE__ */ jsxs42("div", { className: "space-y-1", children: [
                       canLoadMoreMessages && /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-3 py-1", children: [
                         /* @__PURE__ */ jsx60("div", { className: "h-px min-w-8 flex-1 bg-border" }),
                         /* @__PURE__ */ jsx60(
@@ -21693,7 +21757,7 @@ function Chat({
                                           pet: effectivePet,
                                           mcpApps: options?.mcpApps
                                         }
-                                      ) : /* @__PURE__ */ jsxs42(Fragment12, { children: [
+                                      ) : /* @__PURE__ */ jsxs42(Fragment11, { children: [
                                         message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsx60(
                                           HumanRuntimeCapabilityChips,
                                           {
@@ -21795,32 +21859,55 @@ function Chat({
                   children: /* @__PURE__ */ jsx60(ArrowDown2, { size: 16 })
                 }
               ) }),
-              quoteSelection && /* @__PURE__ */ jsx60(
+              quoteSelection && /* @__PURE__ */ jsxs42(
                 "div",
                 {
-                  className: "pointer-events-none fixed z-50",
+                  className: "pointer-events-none fixed z-50 flex flex-col items-center gap-1",
                   style: {
                     top: `${quoteSelection.top}px`,
                     left: `${quoteSelection.left}px`,
                     transform: "translateX(-50%)"
                   },
-                  children: /* @__PURE__ */ jsxs42(
-                    Button,
-                    {
-                      type: "button",
-                      size: "sm",
-                      variant: "secondary",
-                      className: "pointer-events-auto shadow-lg",
-                      onMouseDown: (event) => event.preventDefault(),
-                      onClick: handleQuoteSelection,
-                      "aria-label": t("composer.quoteSelection"),
-                      title: t("composer.quoteSelection"),
-                      children: [
-                        /* @__PURE__ */ jsx60(Quote, { size: 14 }),
-                        t("composer.quoteSelection")
-                      ]
-                    }
-                  )
+                  children: [
+                    /* @__PURE__ */ jsxs42("div", { className: "pointer-events-auto flex overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg", children: [
+                      /* @__PURE__ */ jsxs42(
+                        Button,
+                        {
+                          type: "button",
+                          size: "sm",
+                          variant: "ghost",
+                          className: "rounded-none border-r",
+                          onMouseDown: (event) => event.preventDefault(),
+                          onClick: handleQuoteSelection,
+                          "aria-label": t("composer.quoteSelection"),
+                          title: t("composer.quoteSelection"),
+                          children: [
+                            /* @__PURE__ */ jsx60(Quote, { size: 14 }),
+                            t("composer.quoteSelection")
+                          ]
+                        }
+                      ),
+                      workbench.sideChatEnabled && /* @__PURE__ */ jsxs42(
+                        Button,
+                        {
+                          type: "button",
+                          size: "sm",
+                          variant: "ghost",
+                          className: "rounded-none",
+                          disabled: isOpeningSideChat || stream.isLoading || !stream.threadId,
+                          onMouseDown: (event) => event.preventDefault(),
+                          onClick: () => void handleAskInSideChat(),
+                          "aria-label": t("composer.askInSideChat"),
+                          title: t("composer.askInSideChat"),
+                          children: [
+                            isOpeningSideChat ? /* @__PURE__ */ jsx60(Loader212, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ jsx60(MessageSquarePlus, { size: 14 }),
+                            t("composer.askInSideChat")
+                          ]
+                        }
+                      )
+                    ] }),
+                    sideChatError && /* @__PURE__ */ jsx60("div", { className: "pointer-events-auto max-w-72 rounded-md bg-destructive px-2 py-1 text-xs text-destructive-foreground shadow", children: sideChatError })
+                  ]
                 }
               ),
               /* @__PURE__ */ jsxs42(
@@ -22131,7 +22218,7 @@ function Chat({
                                         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__ */ jsx60(X10, { size: 12 })
+                                        children: /* @__PURE__ */ jsx60(X9, { size: 12 })
                                       }
                                     )
                                   ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpert-ai/chatkit-ui",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "ChatKit UI.",
   "type": "module",
   "sideEffects": false,
@@ -59,8 +59,8 @@
     "tw-animate-css": "^1.4.0",
     "uuid": "^11.1.0",
     "zod": "^4.1.12",
+    "@xpert-ai/chatkit-types": "~0.5.4",
     "@xpert-ai/a2ui-react": "~0.1.0",
-    "@xpert-ai/chatkit-types": "~0.5.3",
     "@xpert-ai/chatkit-web-shared": "~0.4.3"
   },
   "devDependencies": {

package/dist/app/assets/channel-ZWsVuMuK.js

@@ -1 +0,0 @@
-import{aq as o,ar as n}from"./index-_eY4MICm.js";const t=(r,a)=>o.lang.round(n.parse(r)[a]);export{t as c};

package/dist/app/assets/classDiagram-6PBFFD2Q-lDdKGvxc.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-BOkQHv8_.js";import{_ as i}from"./index-_eY4MICm.js";import"./chunk-FMBD7UC4-DQbOG9LT.js";import"./chunk-YZCP3GAM-DsHse404.js";import"./chunk-55IACEB6-CLQ6xN1-.js";import"./chunk-EDXVE4YY-BeUFxqxB.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/classDiagram-v2-HSJHXN6E-lDdKGvxc.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-4TB4RGXK-BOkQHv8_.js";import{_ as i}from"./index-_eY4MICm.js";import"./chunk-FMBD7UC4-DQbOG9LT.js";import"./chunk-YZCP3GAM-DsHse404.js";import"./chunk-55IACEB6-CLQ6xN1-.js";import"./chunk-EDXVE4YY-BeUFxqxB.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/app/assets/clone-CS3cnCuu.js

@@ -1 +0,0 @@
-import{b as r}from"./graph-DLHVWCQv.js";var e=4;function a(o){return r(o,e)}export{a as c};