@xpert-ai/chatkit-ui 0.5.4 → 0.5.5

package/dist/index.cjs

@@ -2152,6 +2152,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.",
@@ -2327,6 +2338,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",
@@ -2652,6 +2664,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",
@@ -2827,6 +2850,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",
@@ -4964,6 +4988,7 @@ function SheetOverlay({
 function SheetContent({
   side = "right",
   showCloseButton = true,
+  forceMount,
   className,
   children,
   ...props
@@ -4975,11 +5000,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__ */ (0, import_jsx_runtime15.jsxs)(SheetPortal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SheetOverlay, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(SheetPortal, { forceMount, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      SheetOverlay,
+      {
+        forceMount,
+        className: forceMount ? "data-[state=closed]:hidden" : void 0
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       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],
@@ -10957,7 +10989,7 @@ function AgentRunGroup({
   ].filter(
     (item) => Boolean(item)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("border-l border-border/70 pl-2", depth > 0 ? "ml-1" : "-mx-2.5"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("border border-border/70 pl-2 rounded-lg", depth > 0 ? "ml-1" : "-mx-2.5"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "button",
       {
@@ -16022,7 +16054,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,
@@ -16042,6 +16074,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     });
   }, []);
   const refreshThreads = React42.useCallback(async () => {
+    if (!enabled) return;
     setIsLoading(true);
     setError(null);
     try {
@@ -16056,7 +16089,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);
@@ -16092,9 +16125,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();
@@ -17858,9 +17891,8 @@ function findDomPointForComposerOffset(root, offset) {
   return result ?? { node: lastNode, offset: lastOffset };
 }
 
-// src/workbench/WorkbenchShell.tsx
+// src/workbench/context.tsx
 var React52 = __toESM(require("react"), 1);
-var import_xpert_sdk2 = require("@xpert-ai/xpert-sdk");
 var import_lucide_react30 = require("lucide-react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var WorkbenchContext = React52.createContext({
@@ -17868,7 +17900,9 @@ var WorkbenchContext = React52.createContext({
   open: false,
   loading: false,
   available: false,
-  toggle: () => void 0
+  toggle: () => void 0,
+  sideChatEnabled: false,
+  askInSideChat: async () => void 0
 });
 function useWorkbench() {
   return React52.useContext(WorkbenchContext);
@@ -19399,7 +19433,9 @@ function Chat({
   title,
   placeholder,
   clientSecret = "",
-  isClientSecretInitializing = false
+  isClientSecretInitializing = false,
+  surface = "main",
+  referenceRequest
 }) {
   const { t, i18n: i18n2 } = useChatkitTranslation();
   const composer = options?.composer;
@@ -19410,6 +19446,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({
@@ -19458,8 +19495,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) {
@@ -19534,6 +19571,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 {
@@ -19541,7 +19580,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(
@@ -19549,6 +19588,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(
@@ -19709,15 +19749,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);
@@ -19775,6 +19816,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,
@@ -19792,62 +19843,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;
@@ -19891,7 +19943,7 @@ function Chat({
       top,
       left
     });
-  }, [clearQuoteSelection]);
+  }, [clearQuoteSelection, surface]);
   const cancelPendingAutoScroll = React56.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
@@ -20741,6 +20793,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();
   };
@@ -20995,7 +21068,7 @@ function Chat({
     [focusComposerAt, isPromptEditDisabled, setComposerText]
   );
   const loadConversationMessages = React56.useCallback(
-    async (recordId) => {
+    async (recordId, threadId) => {
       if (missingConfig) {
         setHistoryError(missingConfigShortMessage);
         return;
@@ -21003,7 +21076,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(
@@ -21068,13 +21141,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) => {
@@ -21271,12 +21344,12 @@ function Chat({
               className
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+              surface === "main" && options?.header?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
                 "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__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex min-w-0 items-center gap-3 overflow-hidden", children: [
@@ -21425,7 +21498,7 @@ function Chat({
                         promptSendDisabled: isSubmissionBlocked,
                         promptEditDisabled: isPromptEditDisabled
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "space-y-4", children: [
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "space-y-1", children: [
                       canLoadMoreMessages && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center gap-3 py-1", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "h-px min-w-8 flex-1 bg-border" }),
                         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
@@ -21637,32 +21710,55 @@ function Chat({
                   children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react33.ArrowDown, { size: 16 })
                 }
               ) }),
-              quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
                 "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__ */ (0, import_jsx_runtime60.jsxs)(
-                    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__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react33.Quote, { size: 14 }),
-                        t("composer.quoteSelection")
-                      ]
-                    }
-                  )
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "pointer-events-auto flex overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+                        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__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react33.Quote, { size: 14 }),
+                            t("composer.quoteSelection")
+                          ]
+                        }
+                      ),
+                      workbench.sideChatEnabled && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+                        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__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react33.Loader2, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react33.MessageSquarePlus, { size: 14 }),
+                            t("composer.askInSideChat")
+                          ]
+                        }
+                      )
+                    ] }),
+                    sideChatError && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsxs)(

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ChatKitOptions, Attachment, ChatKitReference, SendUserMessageParams, ToolOutputAttachmentPreviewRequest, ChatKitPetAnimationName, ChatKitTheme, ColorScheme } from '@xpert-ai/chatkit-types';
+import { ChatKitOptions, ChatKitReference, Attachment, SendUserMessageParams, ToolOutputAttachmentPreviewRequest, ChatKitPetAnimationName, ChatKitTheme, ColorScheme } from '@xpert-ai/chatkit-types';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import { ReactNode } from 'react';
@@ -16,8 +16,14 @@ type ChatProps = {
     clientSecret?: string;
     options?: ChatKitOptions | null;
     isClientSecretInitializing?: boolean;
+    surface?: 'main' | 'side';
+    referenceRequest?: ChatReferenceRequest | null;
 };
-declare function Chat({ className, options, title, placeholder, clientSecret, isClientSecretInitializing, }: ChatProps): react_jsx_runtime.JSX.Element;
+type ChatReferenceRequest = {
+    id: string;
+    reference: ChatKitReference;
+};
+declare function Chat({ className, options, title, placeholder, clientSecret, isClientSecretInitializing, surface, referenceRequest, }: ChatProps): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
     variant?: "secondary" | "outline" | "ghost" | "default" | "link" | "destructive" | null | undefined;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ChatKitOptions, Attachment, ChatKitReference, SendUserMessageParams, ToolOutputAttachmentPreviewRequest, ChatKitPetAnimationName, ChatKitTheme, ColorScheme } from '@xpert-ai/chatkit-types';
+import { ChatKitOptions, ChatKitReference, Attachment, SendUserMessageParams, ToolOutputAttachmentPreviewRequest, ChatKitPetAnimationName, ChatKitTheme, ColorScheme } from '@xpert-ai/chatkit-types';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import { ReactNode } from 'react';
@@ -16,8 +16,14 @@ type ChatProps = {
     clientSecret?: string;
     options?: ChatKitOptions | null;
     isClientSecretInitializing?: boolean;
+    surface?: 'main' | 'side';
+    referenceRequest?: ChatReferenceRequest | null;
 };
-declare function Chat({ className, options, title, placeholder, clientSecret, isClientSecretInitializing, }: ChatProps): react_jsx_runtime.JSX.Element;
+type ChatReferenceRequest = {
+    id: string;
+    reference: ChatKitReference;
+};
+declare function Chat({ className, options, title, placeholder, clientSecret, isClientSecretInitializing, surface, referenceRequest, }: ChatProps): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
     variant?: "secondary" | "outline" | "ghost" | "default" | "link" | "destructive" | null | undefined;