@usecrow/ui 0.1.43 → 0.1.45

package/dist/index.cjs

@@ -905,11 +905,44 @@ function useCrowAPI({ onIdentified, onReset } = {}) {
           window.__crow_page_context = void 0;
           console.log("[Crow] Context cleared");
           break;
+        case "setIdentityTokenFetcher":
+          if (typeof opts !== "function") {
+            console.error("[Crow] setIdentityTokenFetcher() requires a function");
+            return;
+          }
+          window.__crow_identity_token_fetcher = opts;
+          console.log("[Crow] Identity token fetcher registered");
+          break;
+        case "onToolResult":
+          if (typeof opts !== "function") {
+            console.error("[Crow] onToolResult() requires a function");
+            return;
+          }
+          window.__crow_on_tool_result = opts;
+          console.log("[Crow] onToolResult callback registered");
+          break;
+        case "registerToolRenderers":
+          if (!opts || typeof opts !== "object") {
+            console.error("[Crow] registerToolRenderers() requires an object");
+            return;
+          }
+          window.__crow_tool_renderers = {
+            ...window.__crow_tool_renderers || {},
+            ...opts
+          };
+          console.log("[Crow] Tool renderers registered");
+          break;
         default:
           console.warn(`[Crow] Unknown command: ${command}`);
       }
     };
     console.log("[Crow] API ready");
+    const queue = window.__crow_queue;
+    if (queue?.length) {
+      console.log(`[Crow] Replaying ${queue.length} queued command(s)`);
+      queue.forEach(([cmd, opts]) => window.crow(cmd, opts));
+      window.__crow_queue = void 0;
+    }
     const handleIdentified = () => onIdentifiedRef.current?.();
     const handleReset = () => onResetRef.current?.();
     window.addEventListener("crow:identified", handleIdentified);
@@ -1941,6 +1974,23 @@ function ThinkingBlock({
     ) })
   ] });
 }
+function RenderedToolResult({ renderer, result, status }) {
+  const domRef = React3.useRef(null);
+  const rendered = renderer({ result, status });
+  React3.useEffect(() => {
+    if (domRef.current && rendered instanceof HTMLElement) {
+      domRef.current.innerHTML = "";
+      domRef.current.appendChild(rendered);
+    }
+  }, [rendered]);
+  if (rendered instanceof HTMLElement) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-mt-1.5 crow-mb-0.5", ref: domRef });
+  }
+  if (typeof rendered === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-mt-1.5 crow-mb-0.5", dangerouslySetInnerHTML: { __html: rendered } });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-mt-1.5 crow-mb-0.5", children: rendered });
+}
 function ToolCallBlock({
   toolCall,
   toolRenderers
@@ -1980,7 +2030,7 @@ function ToolCallBlock({
         ]
       }
     ),
-    hasCustomRender && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-mt-1.5 crow-mb-0.5", children: customRenderer({ result: toolCall.result, status: toolCall.status }) }),
+    hasCustomRender && /* @__PURE__ */ jsxRuntime.jsx(RenderedToolResult, { renderer: customRenderer, result: toolCall.result, status: toolCall.status }),
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: expanded && hasArgs && /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
@@ -2939,8 +2989,12 @@ function CrowWidget({
   navigate,
   onToolResult,
   getIdentityToken,
-  context
+  context,
+  toolRenderers
 }) {
+  const effectiveGetIdentityToken = getIdentityToken || window.__crow_identity_token_fetcher;
+  const effectiveOnToolResult = onToolResult || window.__crow_on_tool_result;
+  const effectiveToolRenderers = toolRenderers || window.__crow_tool_renderers;
   const {
     styles,
     isLoading: isLoadingStyles,
@@ -3019,7 +3073,7 @@ function CrowWidget({
           break;
       }
     },
-    onToolResult,
+    onToolResult: effectiveOnToolResult,
     onToolCall: async (event) => {
       if (event.type === "client_call" && event.toolName && event.toolCallId) {
         try {
@@ -3118,11 +3172,11 @@ function CrowWidget({
     }
   }, [isLoadingStyles, onIdentify]);
   React3.useEffect(() => {
-    if (!getIdentityToken || isLoadingStyles) return;
+    if (!effectiveGetIdentityToken || isLoadingStyles) return;
     let cancelled = false;
     const identify = async () => {
       try {
-        const token = await getIdentityToken();
+        const token = await effectiveGetIdentityToken();
         if (!cancelled && token) {
           window.crow?.("identify", { token });
         }
@@ -3137,7 +3191,7 @@ function CrowWidget({
       cancelled = true;
       window.removeEventListener("crow:token-refresh-needed", handleRefresh);
     };
-  }, [getIdentityToken, isLoadingStyles]);
+  }, [effectiveGetIdentityToken, isLoadingStyles]);
   React3.useEffect(() => {
     if (typeof window === "undefined") return;
     if (context && Object.keys(context).length > 0) {
@@ -3324,7 +3378,8 @@ function CrowWidget({
           messages: chat.messages,
           activeToolCalls: chat.activeToolCalls,
           isLoadingHistory: conversations.isLoadingHistory,
-          isGenerating: chat.isLoading
+          isGenerating: chat.isLoading,
+          toolRenderers: effectiveToolRenderers
         }
       ),
       pendingConfirmation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3428,40 +3483,88 @@ function MessageIcon() {
     }
   );
 }
-function CopilotToggleButton({
-  isOpen,
-  position,
-  onClick
-}) {
-  const renderIcon = () => {
-    if (!isOpen) return /* @__PURE__ */ jsxRuntime.jsx(MessageIcon, {});
-    if (position === "right") return /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {});
-    return /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {});
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      onClick,
-      className: `crow-copilot-toggle crow-copilot-toggle-${position} ${isOpen ? "open" : ""}`,
-      "aria-label": isOpen ? "Close Copilot" : "Open Copilot",
-      title: isOpen ? "Close Copilot" : "Open Copilot",
-      children: renderIcon()
-    }
-  );
-}
+var CopilotToggleButton = React3.forwardRef(
+  function CopilotToggleButton2({ isOpen, position, onClick, onMouseDown, isDragging }, ref) {
+    const renderIcon = () => {
+      if (!isOpen) return /* @__PURE__ */ jsxRuntime.jsx(MessageIcon, {});
+      if (position === "right") return /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {});
+      return /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {});
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        onClick,
+        onMouseDown,
+        className: `crow-copilot-toggle crow-copilot-toggle-${position} ${isOpen ? "open" : ""} ${isDragging ? "dragging" : ""}`,
+        style: {
+          cursor: isOpen ? "col-resize" : void 0
+        },
+        "aria-label": isOpen ? "Close Copilot" : "Open Copilot",
+        title: isOpen ? "Close Copilot" : "Open Copilot",
+        children: renderIcon()
+      }
+    );
+  }
+);
+var DRAG_THRESHOLD = 5;
+var MIN_WIDTH = 280;
+var MAX_WIDTH = 800;
 function CopilotContainer({
   position,
-  width,
+  width: initialWidth,
   defaultOpen,
   children
 }) {
-  const [isOpen, setIsOpen] = React3.useState(defaultOpen);
+  const [isOpen, setIsOpen] = React3.useState(() => {
+    try {
+      const stored = sessionStorage.getItem("crow_copilot_open");
+      if (stored !== null) return stored === "true";
+    } catch {
+    }
+    return defaultOpen;
+  });
+  const [currentWidth, setCurrentWidth] = React3.useState(() => {
+    try {
+      const stored = sessionStorage.getItem("crow_copilot_width");
+      if (stored) {
+        const parsed = parseInt(stored, 10);
+        if (parsed >= MIN_WIDTH && parsed <= MAX_WIDTH) return parsed;
+      }
+    } catch {
+    }
+    return initialWidth;
+  });
+  const [isDragging, setIsDragging] = React3.useState(false);
+  React3.useEffect(() => {
+    try {
+      sessionStorage.setItem("crow_copilot_open", String(isOpen));
+    } catch {
+    }
+  }, [isOpen]);
+  React3.useEffect(() => {
+    try {
+      sessionStorage.setItem("crow_copilot_width", String(currentWidth));
+    } catch {
+    }
+  }, [currentWidth]);
+  const sidebarRef = React3.useRef(null);
+  const toggleRef = React3.useRef(null);
+  const dragStartXRef = React3.useRef(0);
+  const dragStartWidthRef = React3.useRef(0);
+  const hasDraggedRef = React3.useRef(false);
+  const liveWidthRef = React3.useRef(initialWidth);
+  const positionRef = React3.useRef(position);
+  positionRef.current = position;
+  React3.useEffect(() => {
+    liveWidthRef.current = currentWidth;
+  }, [currentWidth]);
   React3.useEffect(() => {
     document.documentElement.style.setProperty(
       "--crow-copilot-width",
-      `${width}px`
+      `${currentWidth}px`
     );
-  }, [width]);
+  }, [currentWidth]);
   React3.useEffect(() => {
     const className = `crow-copilot-open-${position}`;
     if (isOpen) {
@@ -3483,21 +3586,97 @@ function CopilotContainer({
       delete window.crowCopilot;
     };
   }, []);
+  const handleMouseMove = React3.useCallback(
+    (e) => {
+      const deltaX = e.clientX - dragStartXRef.current;
+      if (!hasDraggedRef.current && Math.abs(deltaX) >= DRAG_THRESHOLD) {
+        hasDraggedRef.current = true;
+        document.body.style.transition = "none";
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+        document.body.classList.add("crow-copilot-resizing");
+        if (sidebarRef.current) {
+          sidebarRef.current.style.transition = "none";
+        }
+        if (toggleRef.current) {
+          toggleRef.current.style.transition = "none";
+        }
+        setIsDragging(true);
+      }
+      if (!hasDraggedRef.current) return;
+      const widthDelta = positionRef.current === "right" ? -deltaX : deltaX;
+      const newWidth = Math.min(
+        MAX_WIDTH,
+        Math.max(MIN_WIDTH, dragStartWidthRef.current + widthDelta)
+      );
+      liveWidthRef.current = newWidth;
+      const px = `${newWidth}px`;
+      document.documentElement.style.setProperty("--crow-copilot-width", px);
+      if (sidebarRef.current) {
+        sidebarRef.current.style.width = px;
+      }
+    },
+    []
+    // no deps — we use refs for everything to avoid stale closures
+  );
+  const handleMouseUp = React3.useCallback(() => {
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+    document.body.style.transition = "";
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    document.body.classList.remove("crow-copilot-resizing");
+    if (sidebarRef.current) {
+      sidebarRef.current.style.transition = "";
+    }
+    if (toggleRef.current) {
+      toggleRef.current.style.transition = "";
+    }
+    if (hasDraggedRef.current) {
+      setCurrentWidth(liveWidthRef.current);
+      setIsDragging(false);
+    } else {
+      setIsDragging(false);
+      setIsOpen((prev) => !prev);
+    }
+  }, [handleMouseMove]);
+  const handleToggleMouseDown = React3.useCallback(
+    (e) => {
+      if (e.button !== 0 || !isOpen) return;
+      e.preventDefault();
+      e.stopPropagation();
+      dragStartXRef.current = e.clientX;
+      dragStartWidthRef.current = liveWidthRef.current;
+      hasDraggedRef.current = false;
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [isOpen, handleMouseMove, handleMouseUp]
+  );
+  const handleToggleClick = React3.useCallback(() => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+  }, [isOpen]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       CopilotToggleButton,
       {
+        ref: toggleRef,
         isOpen,
         position,
-        onClick: () => setIsOpen((prev) => !prev)
+        onClick: handleToggleClick,
+        onMouseDown: handleToggleMouseDown,
+        isDragging
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ref: sidebarRef,
         className: `crow-copilot-sidebar crow-copilot-sidebar-${position} ${isOpen ? "" : "closed"}`,
-        style: { width: `${width}px` },
-        children: children({ close: () => setIsOpen(false) })
+        style: { width: `${currentWidth}px` },
+        children: children({ close: () => setIsOpen(false), currentWidth })
       }
     )
   ] });
@@ -3524,6 +3703,9 @@ function CrowCopilot({
   getIdentityToken,
   context
 }) {
+  const effectiveGetIdentityToken = getIdentityToken || window.__crow_identity_token_fetcher;
+  const effectiveOnToolResult = onToolResult || window.__crow_on_tool_result;
+  const effectiveToolRenderers = toolRenderers || window.__crow_tool_renderers;
   const {
     styles,
     isLoading: isLoadingStyles,
@@ -3577,6 +3759,93 @@ function CrowCopilot({
       window.crow?.("registerTools", autoTools);
     }
   }, [autoTools]);
+  const embeddedInitialWidth = typeof width === "number" ? width : parseInt(String(width), 10) || 400;
+  const [embeddedWidth, setEmbeddedWidth] = React3.useState(() => {
+    try {
+      const stored = sessionStorage.getItem("crow_embedded_width");
+      if (stored) {
+        const parsed = parseInt(stored, 10);
+        if (parsed >= 280 && parsed <= 800) return parsed;
+      }
+    } catch {
+    }
+    return embeddedInitialWidth;
+  });
+  const [isCollapsed, setIsCollapsed] = React3.useState(() => {
+    try {
+      return sessionStorage.getItem("crow_embedded_collapsed") === "true";
+    } catch {
+      return false;
+    }
+  });
+  React3.useEffect(() => {
+    try {
+      sessionStorage.setItem("crow_embedded_width", String(embeddedWidth));
+    } catch {
+    }
+  }, [embeddedWidth]);
+  React3.useEffect(() => {
+    try {
+      sessionStorage.setItem("crow_embedded_collapsed", String(isCollapsed));
+    } catch {
+    }
+  }, [isCollapsed]);
+  const embeddedContentRef = React3.useRef(null);
+  const embeddedToggleRef = React3.useRef(null);
+  const embeddedDragStartX = React3.useRef(0);
+  const embeddedDragStartW = React3.useRef(0);
+  const embeddedHasDragged = React3.useRef(false);
+  const embeddedLiveWidth = React3.useRef(embeddedInitialWidth);
+  const positionRef = React3.useRef(position);
+  positionRef.current = position;
+  React3.useEffect(() => {
+    embeddedLiveWidth.current = embeddedWidth;
+  }, [embeddedWidth]);
+  const embeddedMouseMove = React3.useCallback((e) => {
+    const dx = e.clientX - embeddedDragStartX.current;
+    if (!embeddedHasDragged.current && Math.abs(dx) >= 5) {
+      embeddedHasDragged.current = true;
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    }
+    if (!embeddedHasDragged.current) return;
+    const delta = positionRef.current === "right" ? -dx : dx;
+    const newW = Math.min(800, Math.max(280, embeddedDragStartW.current + delta));
+    embeddedLiveWidth.current = newW;
+    if (embeddedContentRef.current) {
+      embeddedContentRef.current.style.width = `${newW}px`;
+    }
+  }, []);
+  const embeddedMouseUp = React3.useCallback(() => {
+    document.removeEventListener("mousemove", embeddedMouseMove);
+    document.removeEventListener("mouseup", embeddedMouseUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    if (embeddedHasDragged.current) {
+      setEmbeddedWidth(embeddedLiveWidth.current);
+    } else {
+      setIsCollapsed((prev) => !prev);
+    }
+  }, [embeddedMouseMove]);
+  const embeddedHandleMouseDown = React3.useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      if (isCollapsed) return;
+      e.preventDefault();
+      e.stopPropagation();
+      embeddedDragStartX.current = e.clientX;
+      embeddedDragStartW.current = embeddedLiveWidth.current;
+      embeddedHasDragged.current = false;
+      document.addEventListener("mousemove", embeddedMouseMove);
+      document.addEventListener("mouseup", embeddedMouseUp);
+    },
+    [isCollapsed, embeddedMouseMove, embeddedMouseUp]
+  );
+  const embeddedHandleClick = React3.useCallback(() => {
+    if (isCollapsed) {
+      setIsCollapsed(false);
+    }
+  }, [isCollapsed]);
   const messagesContainerRef = React3.useRef(null);
   const tabsScrollRef = React3.useRef(null);
   const executeClientToolRef = React3.useRef(null);
@@ -3596,6 +3865,16 @@ function CrowCopilot({
   const conversations = useConversations({ productId, apiUrl });
   const [shouldRestoreHistory, setShouldRestoreHistory] = React3.useState(false);
   const hasRestoredHistoryRef = React3.useRef(false);
+  const activeConvStorageKey = `crow_active_conv_${productId}`;
+  const pendingRestoreConvId = React3.useRef(null);
+  const hasRestoredActiveConvRef = React3.useRef(false);
+  if (pendingRestoreConvId.current === null) {
+    try {
+      pendingRestoreConvId.current = localStorage.getItem(activeConvStorageKey) || "";
+    } catch {
+      pendingRestoreConvId.current = "";
+    }
+  }
   const chat = useChat({
     productId,
     apiUrl,
@@ -3627,7 +3906,7 @@ function CrowCopilot({
           break;
       }
     },
-    onToolResult,
+    onToolResult: effectiveOnToolResult,
     onToolCall: async (event) => {
       if (event.type === "client_call" && event.toolName && event.toolCallId) {
         try {
@@ -3682,6 +3961,32 @@ function CrowCopilot({
       });
     }
   }, [shouldRestoreHistory, chat.conversationId, conversations, chat]);
+  React3.useEffect(() => {
+    if (isLoadingStyles || hasRestoredActiveConvRef.current) return;
+    const timer = setTimeout(() => {
+      if (hasRestoredActiveConvRef.current || isVerifiedUser) return;
+      const savedId = pendingRestoreConvId.current;
+      if (!savedId) return;
+      hasRestoredActiveConvRef.current = true;
+      pendingRestoreConvId.current = "";
+      conversations.loadAnonymousConversationHistory(savedId).then((historyMessages) => {
+        if (historyMessages.length > 0) {
+          chat.loadMessages(historyMessages);
+          chat.setConversationId(savedId);
+        }
+      }).catch(() => {
+      });
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [isLoadingStyles]);
+  React3.useEffect(() => {
+    try {
+      if (chat.conversationId) {
+        localStorage.setItem(activeConvStorageKey, chat.conversationId);
+      }
+    } catch {
+    }
+  }, [chat.conversationId, activeConvStorageKey]);
   React3.useEffect(() => {
     if (variant === "floating") {
       injectCopilotBodyStyles();
@@ -3715,6 +4020,19 @@ function CrowCopilot({
     onIdentified: async () => {
       setIsVerifiedUser(true);
       await conversations.loadConversations();
+      const savedId = pendingRestoreConvId.current;
+      if (savedId && !hasRestoredActiveConvRef.current) {
+        hasRestoredActiveConvRef.current = true;
+        pendingRestoreConvId.current = "";
+        try {
+          const historyMessages = await conversations.loadConversationHistory(savedId);
+          if (historyMessages.length > 0) {
+            chat.loadMessages(historyMessages);
+            chat.setConversationId(savedId);
+          }
+        } catch {
+        }
+      }
     },
     onReset: () => {
       setIsVerifiedUser(false);
@@ -3773,11 +4091,11 @@ function CrowCopilot({
     }
   }, [isLoadingStyles, onReady]);
   React3.useEffect(() => {
-    if (!getIdentityToken || isLoadingStyles) return;
+    if (!effectiveGetIdentityToken || isLoadingStyles) return;
     let cancelled = false;
     const identify = async () => {
       try {
-        const token = await getIdentityToken();
+        const token = await effectiveGetIdentityToken();
         if (!cancelled && token) {
           window.crow?.("identify", { token });
         }
@@ -3792,7 +4110,7 @@ function CrowCopilot({
       cancelled = true;
       window.removeEventListener("crow:token-refresh-needed", handleRefresh);
     };
-  }, [getIdentityToken, isLoadingStyles]);
+  }, [effectiveGetIdentityToken, isLoadingStyles]);
   React3.useEffect(() => {
     if (typeof window === "undefined") return;
     if (context && Object.keys(context).length > 0) {
@@ -3966,7 +4284,7 @@ function CrowCopilot({
     checkTabsOverflow();
   }, [tabs.length, checkTabsOverflow]);
   const widthStyle = typeof width === "number" ? `${width}px` : width;
-  const renderCopilotContent = (overrideOnClose, forceShowClose) => /* @__PURE__ */ jsxRuntime.jsx(
+  const renderCopilotContent = (overrideOnClose, forceShowClose, overrideWidth) => /* @__PURE__ */ jsxRuntime.jsx(
     CopilotStyleProvider,
     {
       styles,
@@ -3977,7 +4295,7 @@ function CrowCopilot({
         {
           className: `crow-flex crow-flex-col crow-h-full ${position === "left" ? "crow-border-r" : "crow-border-l"} ${className || ""}`,
           style: {
-            width: widthStyle,
+            width: overrideWidth ? typeof overrideWidth === "number" ? `${overrideWidth}px` : overrideWidth : widthStyle,
             fontFamily: styles.typography.fontFamily,
             fontSize: styles.typography.fontSize,
             fontWeight: styles.typography.fontWeight,
@@ -4155,7 +4473,7 @@ function CrowCopilot({
                   activeToolCalls: chat.activeToolCalls,
                   isLoadingHistory: conversations.isLoadingHistory,
                   isGenerating: chat.isLoading,
-                  toolRenderers
+                  toolRenderers: effectiveToolRenderers
                 }
               ),
               pendingConfirmation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4209,15 +4527,65 @@ function CrowCopilot({
     }
   );
   const floatingWidth = typeof width === "number" ? width : parseInt(String(width), 10) || 400;
-  return /* @__PURE__ */ jsxRuntime.jsx(ShadowContainer, { styles: WIDGET_CSS, children: variant === "floating" ? /* @__PURE__ */ jsxRuntime.jsx(
-    CopilotContainer,
-    {
-      position,
-      width: floatingWidth,
-      defaultOpen,
-      children: ({ close }) => renderCopilotContent(close, true)
-    }
-  ) : renderCopilotContent() });
+  if (variant === "floating") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ShadowContainer, { styles: WIDGET_CSS, children: /* @__PURE__ */ jsxRuntime.jsx(
+      CopilotContainer,
+      {
+        position,
+        width: floatingWidth,
+        defaultOpen,
+        children: ({ close, currentWidth: resizedWidth }) => renderCopilotContent(close, true, resizedWidth)
+      }
+    ) });
+  }
+  const isRight = position === "right";
+  const edgeSide = isRight ? "left" : "right";
+  const toggleIcon = isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#6b7280", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#6b7280", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: isRight ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", flexShrink: 0, height: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: embeddedToggleRef,
+        onMouseDown: embeddedHandleMouseDown,
+        onClick: embeddedHandleClick,
+        style: {
+          position: "absolute",
+          [edgeSide]: "-12px",
+          top: "50%",
+          transform: "translateY(-50%)",
+          zIndex: 10,
+          width: "24px",
+          height: "64px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "#fff",
+          border: "1px solid #e5e7eb",
+          [isRight ? "borderRight" : "borderLeft"]: "none",
+          borderRadius: isRight ? "8px 0 0 8px" : "0 8px 8px 0",
+          cursor: isCollapsed ? "pointer" : "col-resize",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+          padding: 0,
+          outline: "none"
+        },
+        "aria-label": isCollapsed ? "Open Copilot" : "Resize or close Copilot",
+        children: toggleIcon
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: embeddedContentRef,
+        style: {
+          width: `${embeddedWidth}px`,
+          height: "100%",
+          display: isCollapsed ? "none" : "block",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(ShadowContainer, { styles: WIDGET_CSS, children: renderCopilotContent(void 0, false, "100%") })
+      }
+    )
+  ] });
 }
 function PlusIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(