@xpert-ai/chatkit-ui 0.5.3 → 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",
@@ -2344,6 +2357,14 @@ var en_US_default = {
     },
     hitl: {
       title: "Action review",
+      mcpElicitationTitle: "MCP Elicitation",
+      fieldProgress: "Field {{current}}/{{total}}",
+      requiredUnanswered: "1 required unanswered",
+      requiredAnswered: "All required fields answered",
+      true: "True",
+      false: "False",
+      cancel: "Cancel",
+      elicitationSubmit: "Submit",
       actionProgress: "{{current}} of {{total}}",
       previousAction: "Previous action",
       nextAction: "Next action",
@@ -2646,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",
@@ -2821,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",
@@ -2836,6 +2869,14 @@ var zh_CN_default = {
     },
     hitl: {
       title: "\u64CD\u4F5C\u5BA1\u6838",
+      mcpElicitationTitle: "MCP Elicitation",
+      fieldProgress: "\u5B57\u6BB5 {{current}}/{{total}}",
+      requiredUnanswered: "1 \u4E2A\u5FC5\u586B\u9879\u5F85\u56DE\u7B54",
+      requiredAnswered: "\u5FC5\u586B\u9879\u5DF2\u56DE\u7B54",
+      true: "\u662F",
+      false: "\u5426",
+      cancel: "\u53D6\u6D88",
+      elicitationSubmit: "\u63D0\u4EA4",
       actionProgress: "{{current}} / {{total}}",
       previousAction: "\u4E0A\u4E00\u4E2A\u64CD\u4F5C",
       nextAction: "\u4E0B\u4E00\u4E2A\u64CD\u4F5C",
@@ -4965,6 +5006,7 @@ function SheetOverlay({
 function SheetContent({
   side = "right",
   showCloseButton = true,
+  forceMount,
   className,
   children,
   ...props
@@ -4976,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],
@@ -6153,6 +6202,199 @@ function HITLApprovalPanel({
   onDismiss,
   attachToComposer = true,
   className
+}) {
+  if (request?.request.elicitation?.kind === "mcp_elicitation" && request.request.actionRequests.length === 1 && request.request.actionRequests[0]?.name === request.request.elicitation.actionName) {
+    return /* @__PURE__ */ jsx22(
+      MCPBooleanElicitationPanel,
+      {
+        request,
+        onSubmit,
+        onDismiss,
+        attachToComposer,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx22(
+    ActionReviewPanel,
+    {
+      request,
+      onSubmit,
+      onDismiss,
+      attachToComposer,
+      className
+    }
+  );
+}
+function MCPBooleanElicitationPanel({
+  request,
+  onSubmit,
+  onDismiss,
+  attachToComposer = true,
+  className
+}) {
+  const { t } = useChatkitTranslation();
+  const rounded = useRoundedClasses4();
+  const [decision, setDecision] = React19.useState(
+    null
+  );
+  const elicitation = request?.request.elicitation;
+  const action = request?.request.actionRequests.find(
+    (candidate) => candidate.name === elicitation?.actionName
+  );
+  React19.useEffect(() => {
+    setDecision(null);
+  }, [request?.id]);
+  React19.useEffect(() => {
+    if (!request || !onDismiss) return;
+    const handleKeyDown = (event) => {
+      if (event.isComposing) return;
+      if (event.key !== "Escape" && event.key !== "Esc") return;
+      event.preventDefault();
+      onDismiss();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onDismiss, request]);
+  if (!request || !elicitation || !action) return null;
+  const fieldTitle = elicitation.field.title ?? action.name;
+  const options = [
+    {
+      decision: "approve",
+      label: t("composer.hitl.true")
+    },
+    {
+      decision: "reject",
+      label: t("composer.hitl.false")
+    }
+  ];
+  return /* @__PURE__ */ jsxs14(
+    "section",
+    {
+      "aria-label": t("composer.hitl.mcpElicitationTitle"),
+      "aria-live": "polite",
+      className: cn(
+        "mx-2 border border-border bg-background/95 shadow-sm",
+        rounded.density.section,
+        attachToComposer ? "border-b-0" : null,
+        attachToComposer ? rounded.top : rounded.panel,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-1.5 font-medium text-muted-foreground",
+              rounded.density.eyebrow
+            ),
+            children: [
+              /* @__PURE__ */ jsx22(ShieldCheck, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsx22("span", { children: t("composer.hitl.mcpElicitationTitle") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs14("div", { className: cn("space-y-2.5", rounded.density.body), children: [
+          /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ jsx22("span", { children: t("composer.hitl.fieldProgress", { current: 1, total: 1 }) }),
+            /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", children: "\xB7" }),
+            /* @__PURE__ */ jsx22("span", { children: decision ? t("composer.hitl.requiredAnswered") : t("composer.hitl.requiredUnanswered") })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { children: [
+            /* @__PURE__ */ jsx22(
+              "h3",
+              {
+                className: cn(
+                  "font-semibold text-foreground",
+                  rounded.density.title
+                ),
+                children: fieldTitle
+              }
+            ),
+            action.description ? /* @__PURE__ */ jsx22("p", { className: "mt-1 whitespace-pre-wrap text-sm leading-5 text-muted-foreground", children: action.description }) : null
+          ] }),
+          /* @__PURE__ */ jsx22("div", { role: "radiogroup", "aria-label": fieldTitle, className: "grid gap-1.5", children: options.map((option) => {
+            const selected = decision === option.decision;
+            return /* @__PURE__ */ jsxs14(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": selected,
+                onClick: () => setDecision(option.decision),
+                className: cn(
+                  "flex w-full items-center gap-2.5 border px-3 py-2 text-left text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  rounded.control,
+                  selected ? "border-primary/50 bg-primary/10 text-foreground" : "border-border bg-background text-foreground/85 hover:bg-muted/70"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx22(
+                    "span",
+                    {
+                      className: cn(
+                        "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
+                        selected ? "border-primary" : "border-muted-foreground/45"
+                      ),
+                      children: selected ? /* @__PURE__ */ jsx22("span", { className: "h-2 w-2 rounded-full bg-primary" }) : null
+                    }
+                  ),
+                  /* @__PURE__ */ jsx22("span", { children: option.label })
+                ]
+              },
+              option.decision
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            className: cn("flex items-center justify-end", rounded.density.footer),
+            children: [
+              onDismiss ? /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  type: "button",
+                  onClick: onDismiss,
+                  className: cn(
+                    "inline-flex items-center justify-center font-medium text-muted-foreground hover:text-foreground",
+                    rounded.control,
+                    rounded.density.dismissButton
+                  ),
+                  children: t("composer.hitl.cancel")
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs14(
+                "button",
+                {
+                  type: "button",
+                  disabled: !decision,
+                  onClick: () => {
+                    if (decision) onSubmit([{ type: decision }]);
+                  },
+                  className: cn(
+                    "inline-flex shrink-0 items-center justify-center gap-1.5 bg-primary font-semibold text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-45",
+                    rounded.control,
+                    rounded.density.continueButton
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx22(CornerDownLeft2, { className: rounded.density.continueIcon }),
+                    /* @__PURE__ */ jsx22("span", { children: t("composer.hitl.elicitationSubmit") })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ActionReviewPanel({
+  request,
+  onSubmit,
+  onDismiss,
+  attachToComposer = true,
+  className
 }) {
   const { t } = useChatkitTranslation();
   const rounded = useRoundedClasses4();
@@ -10831,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",
       {
@@ -15946,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,
@@ -15966,6 +16208,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     });
   }, []);
   const refreshThreads = React42.useCallback(async () => {
+    if (!enabled) return;
     setIsLoading(true);
     setError(null);
     try {
@@ -15980,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);
@@ -16016,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();
@@ -17786,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);
@@ -17840,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) => [
@@ -18446,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 })
               }
             )
           ]
@@ -18858,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";
@@ -19002,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")
           ]
         }
@@ -19176,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;
@@ -19335,7 +19569,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ jsx60(X10, { size: 12 })
+            children: /* @__PURE__ */ jsx60(X9, { size: 12 })
           }
         )
       ]
@@ -19348,7 +19582,9 @@ function Chat({
   title,
   placeholder,
   clientSecret = "",
-  isClientSecretInitializing = false
+  isClientSecretInitializing = false,
+  surface = "main",
+  referenceRequest
 }) {
   const { t, i18n: i18n2 } = useChatkitTranslation();
   const composer = options?.composer;
@@ -19359,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({
@@ -19407,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) {
@@ -19483,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 {
@@ -19490,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(
@@ -19498,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(
@@ -19658,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);
@@ -19724,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,
@@ -19741,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;
@@ -19840,7 +20092,7 @@ function Chat({
       top,
       left
     });
-  }, [clearQuoteSelection]);
+  }, [clearQuoteSelection, surface]);
   const cancelPendingAutoScroll = React56.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
@@ -20690,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();
   };
@@ -20944,7 +21217,7 @@ function Chat({
     [focusComposerAt, isPromptEditDisabled, setComposerText]
   );
   const loadConversationMessages = React56.useCallback(
-    async (recordId) => {
+    async (recordId, threadId) => {
       if (missingConfig) {
         setHistoryError(missingConfigShortMessage);
         return;
@@ -20952,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(
@@ -21017,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) => {
@@ -21220,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: [
@@ -21304,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",
@@ -21374,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(
@@ -21484,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,
                                           {
@@ -21586,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(
@@ -21922,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 })
                                       }
                                     )
                                   ] })