@usecrow/ui 0.1.44 → 0.1.45

package/dist/index.d.cts

@@ -1075,13 +1075,24 @@ declare function WidgetHeader({ isVerifiedUser, showConversationList, onNewChat,
 
 /**
  * CopilotToggleButton - Edge toggle button for floating copilot
+ *
+ * Supports dual interaction:
+ * - Click: toggle sidebar open/close
+ * - Drag: resize sidebar width (when open)
+ *
+ * Forwards ref to the <button> so CopilotContainer can directly
+ * manipulate its style.transition during drag for zero-lag resizing.
  */
 interface CopilotToggleButtonProps {
     isOpen: boolean;
     position: "left" | "right";
     onClick: () => void;
+    /** Called on mousedown to initiate potential drag-to-resize */
+    onMouseDown?: (e: React.MouseEvent) => void;
+    /** Whether the user is actively dragging to resize */
+    isDragging?: boolean;
 }
-declare function CopilotToggleButton({ isOpen, position, onClick, }: CopilotToggleButtonProps): react_jsx_runtime.JSX.Element;
+declare const CopilotToggleButton: react.ForwardRefExoticComponent<CopilotToggleButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface CopilotContainerProps {
     position: "left" | "right";
@@ -1089,8 +1100,9 @@ interface CopilotContainerProps {
     defaultOpen: boolean;
     children: (controls: {
         close: () => void;
+        currentWidth: number;
     }) => ReactNode;
 }
-declare function CopilotContainer({ position, width, defaultOpen, children, }: CopilotContainerProps): react_jsx_runtime.JSX.Element;
+declare function CopilotContainer({ position, width: initialWidth, defaultOpen, children, }: CopilotContainerProps): react_jsx_runtime.JSX.Element;
 
 export { AVAILABLE_MODELS, type ActiveWorkflow, type AnimationsConfig, CSS_VAR_NAMES, ChatBubble, type Citation, type ClientToolHandler, type ColorsConfig, type Conversation, ConversationList, type CopilotBrandingConfig, CopilotContainer, type CopilotDimensionsConfig, type CopilotPositionConfig, type CopilotStyleConfig, CopilotStyleProvider, CopilotToggleButton, CrowCopilot, type CrowCopilotProps, CrowProvider, CrowWidget, type CrowWidgetProps, DEFAULT_COPILOT_STYLES, DEFAULT_MODEL, DEFAULT_WELCOME_MESSAGE, DEFAULT_WIDGET_STYLES, type IdentifyData, type IdentifyFunction, type JourneyEvent, LoadingHistory, MESSAGES_CONTAINER_ID, type Message, MessageBubble, MessageList, MessagesContainer, type Model, ModelSelector, PoweredByBadge, PromptInputBox, ReasoningTrace, type ResolvedCopilotStyles, type ResolvedWidgetStyles, ShadowContainer, StreamingText, ThinkingIndicator, type ToolCall, type ToolHandler, type ToolRenderers, type ToolsMap, type TypographyConfig, WIDGET_CSS, type WidgetBrandingConfig, type WidgetBubbleConfig, type WidgetConfigResponse, type WidgetDimensionsConfig, WidgetHeader, type WidgetPositionConfig, type WidgetProps, type WidgetShadowsConfig, WidgetShell, type WidgetStyleConfig, WidgetStyleProvider, WorkflowPanel, type WorkflowTodo, clearStyleCache, getCssVar, injectStyles, mergeCopilotStyles, mergeWidgetStyles, stylesToCSSVariables, stylesToCssVars, useChat, useConversations, useCopilotStyleContext, useCopilotStyles$1 as useCopilotStyles, useCopilotStyles as useCopilotStylesContext, useCrowAPI, usePreviewCopilotStyles, usePreviewWidgetStyles, useWidgetStyleContext, useWidgetStyles$1 as useWidgetStyles, useWidgetStyles as useWidgetStylesContext, useWorkflow };

package/dist/index.d.ts

@@ -1075,13 +1075,24 @@ declare function WidgetHeader({ isVerifiedUser, showConversationList, onNewChat,
 
 /**
  * CopilotToggleButton - Edge toggle button for floating copilot
+ *
+ * Supports dual interaction:
+ * - Click: toggle sidebar open/close
+ * - Drag: resize sidebar width (when open)
+ *
+ * Forwards ref to the <button> so CopilotContainer can directly
+ * manipulate its style.transition during drag for zero-lag resizing.
  */
 interface CopilotToggleButtonProps {
     isOpen: boolean;
     position: "left" | "right";
     onClick: () => void;
+    /** Called on mousedown to initiate potential drag-to-resize */
+    onMouseDown?: (e: React.MouseEvent) => void;
+    /** Whether the user is actively dragging to resize */
+    isDragging?: boolean;
 }
-declare function CopilotToggleButton({ isOpen, position, onClick, }: CopilotToggleButtonProps): react_jsx_runtime.JSX.Element;
+declare const CopilotToggleButton: react.ForwardRefExoticComponent<CopilotToggleButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface CopilotContainerProps {
     position: "left" | "right";
@@ -1089,8 +1100,9 @@ interface CopilotContainerProps {
     defaultOpen: boolean;
     children: (controls: {
         close: () => void;
+        currentWidth: number;
     }) => ReactNode;
 }
-declare function CopilotContainer({ position, width, defaultOpen, children, }: CopilotContainerProps): react_jsx_runtime.JSX.Element;
+declare function CopilotContainer({ position, width: initialWidth, defaultOpen, children, }: CopilotContainerProps): react_jsx_runtime.JSX.Element;
 
 export { AVAILABLE_MODELS, type ActiveWorkflow, type AnimationsConfig, CSS_VAR_NAMES, ChatBubble, type Citation, type ClientToolHandler, type ColorsConfig, type Conversation, ConversationList, type CopilotBrandingConfig, CopilotContainer, type CopilotDimensionsConfig, type CopilotPositionConfig, type CopilotStyleConfig, CopilotStyleProvider, CopilotToggleButton, CrowCopilot, type CrowCopilotProps, CrowProvider, CrowWidget, type CrowWidgetProps, DEFAULT_COPILOT_STYLES, DEFAULT_MODEL, DEFAULT_WELCOME_MESSAGE, DEFAULT_WIDGET_STYLES, type IdentifyData, type IdentifyFunction, type JourneyEvent, LoadingHistory, MESSAGES_CONTAINER_ID, type Message, MessageBubble, MessageList, MessagesContainer, type Model, ModelSelector, PoweredByBadge, PromptInputBox, ReasoningTrace, type ResolvedCopilotStyles, type ResolvedWidgetStyles, ShadowContainer, StreamingText, ThinkingIndicator, type ToolCall, type ToolHandler, type ToolRenderers, type ToolsMap, type TypographyConfig, WIDGET_CSS, type WidgetBrandingConfig, type WidgetBubbleConfig, type WidgetConfigResponse, type WidgetDimensionsConfig, WidgetHeader, type WidgetPositionConfig, type WidgetProps, type WidgetShadowsConfig, WidgetShell, type WidgetStyleConfig, WidgetStyleProvider, WorkflowPanel, type WorkflowTodo, clearStyleCache, getCssVar, injectStyles, mergeCopilotStyles, mergeWidgetStyles, stylesToCSSVariables, stylesToCssVars, useChat, useConversations, useCopilotStyleContext, useCopilotStyles$1 as useCopilotStyles, useCopilotStyles as useCopilotStylesContext, useCrowAPI, usePreviewCopilotStyles, usePreviewWidgetStyles, useWidgetStyleContext, useWidgetStyles$1 as useWidgetStyles, useWidgetStyles as useWidgetStylesContext, useWorkflow };

package/dist/index.js

@@ -3457,40 +3457,88 @@ function MessageIcon() {
     }
   );
 }
-function CopilotToggleButton({
-  isOpen,
-  position,
-  onClick
-}) {
-  const renderIcon = () => {
-    if (!isOpen) return /* @__PURE__ */ jsx(MessageIcon, {});
-    if (position === "right") return /* @__PURE__ */ jsx(ChevronRight2, {});
-    return /* @__PURE__ */ jsx(ChevronLeft, {});
-  };
-  return /* @__PURE__ */ 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 = forwardRef(
+  function CopilotToggleButton2({ isOpen, position, onClick, onMouseDown, isDragging }, ref) {
+    const renderIcon = () => {
+      if (!isOpen) return /* @__PURE__ */ jsx(MessageIcon, {});
+      if (position === "right") return /* @__PURE__ */ jsx(ChevronRight2, {});
+      return /* @__PURE__ */ jsx(ChevronLeft, {});
+    };
+    return /* @__PURE__ */ 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] = useState(defaultOpen);
+  const [isOpen, setIsOpen] = useState(() => {
+    try {
+      const stored = sessionStorage.getItem("crow_copilot_open");
+      if (stored !== null) return stored === "true";
+    } catch {
+    }
+    return defaultOpen;
+  });
+  const [currentWidth, setCurrentWidth] = 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] = useState(false);
+  useEffect(() => {
+    try {
+      sessionStorage.setItem("crow_copilot_open", String(isOpen));
+    } catch {
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    try {
+      sessionStorage.setItem("crow_copilot_width", String(currentWidth));
+    } catch {
+    }
+  }, [currentWidth]);
+  const sidebarRef = useRef(null);
+  const toggleRef = useRef(null);
+  const dragStartXRef = useRef(0);
+  const dragStartWidthRef = useRef(0);
+  const hasDraggedRef = useRef(false);
+  const liveWidthRef = useRef(initialWidth);
+  const positionRef = useRef(position);
+  positionRef.current = position;
+  useEffect(() => {
+    liveWidthRef.current = currentWidth;
+  }, [currentWidth]);
   useEffect(() => {
     document.documentElement.style.setProperty(
       "--crow-copilot-width",
-      `${width}px`
+      `${currentWidth}px`
     );
-  }, [width]);
+  }, [currentWidth]);
   useEffect(() => {
     const className = `crow-copilot-open-${position}`;
     if (isOpen) {
@@ -3512,21 +3560,97 @@ function CopilotContainer({
       delete window.crowCopilot;
     };
   }, []);
+  const handleMouseMove = 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 = 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 = 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 = useCallback(() => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+  }, [isOpen]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       CopilotToggleButton,
       {
+        ref: toggleRef,
         isOpen,
         position,
-        onClick: () => setIsOpen((prev) => !prev)
+        onClick: handleToggleClick,
+        onMouseDown: handleToggleMouseDown,
+        isDragging
       }
     ),
     /* @__PURE__ */ 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 })
       }
     )
   ] });
@@ -3609,6 +3733,93 @@ function CrowCopilot({
       window.crow?.("registerTools", autoTools);
     }
   }, [autoTools]);
+  const embeddedInitialWidth = typeof width === "number" ? width : parseInt(String(width), 10) || 400;
+  const [embeddedWidth, setEmbeddedWidth] = 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] = useState(() => {
+    try {
+      return sessionStorage.getItem("crow_embedded_collapsed") === "true";
+    } catch {
+      return false;
+    }
+  });
+  useEffect(() => {
+    try {
+      sessionStorage.setItem("crow_embedded_width", String(embeddedWidth));
+    } catch {
+    }
+  }, [embeddedWidth]);
+  useEffect(() => {
+    try {
+      sessionStorage.setItem("crow_embedded_collapsed", String(isCollapsed));
+    } catch {
+    }
+  }, [isCollapsed]);
+  const embeddedContentRef = useRef(null);
+  const embeddedToggleRef = useRef(null);
+  const embeddedDragStartX = useRef(0);
+  const embeddedDragStartW = useRef(0);
+  const embeddedHasDragged = useRef(false);
+  const embeddedLiveWidth = useRef(embeddedInitialWidth);
+  const positionRef = useRef(position);
+  positionRef.current = position;
+  useEffect(() => {
+    embeddedLiveWidth.current = embeddedWidth;
+  }, [embeddedWidth]);
+  const embeddedMouseMove = 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 = 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 = 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 = useCallback(() => {
+    if (isCollapsed) {
+      setIsCollapsed(false);
+    }
+  }, [isCollapsed]);
   const messagesContainerRef = useRef(null);
   const tabsScrollRef = useRef(null);
   const executeClientToolRef = useRef(null);
@@ -3628,6 +3839,16 @@ function CrowCopilot({
   const conversations = useConversations({ productId, apiUrl });
   const [shouldRestoreHistory, setShouldRestoreHistory] = useState(false);
   const hasRestoredHistoryRef = useRef(false);
+  const activeConvStorageKey = `crow_active_conv_${productId}`;
+  const pendingRestoreConvId = useRef(null);
+  const hasRestoredActiveConvRef = useRef(false);
+  if (pendingRestoreConvId.current === null) {
+    try {
+      pendingRestoreConvId.current = localStorage.getItem(activeConvStorageKey) || "";
+    } catch {
+      pendingRestoreConvId.current = "";
+    }
+  }
   const chat = useChat({
     productId,
     apiUrl,
@@ -3714,6 +3935,32 @@ function CrowCopilot({
       });
     }
   }, [shouldRestoreHistory, chat.conversationId, conversations, chat]);
+  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]);
+  useEffect(() => {
+    try {
+      if (chat.conversationId) {
+        localStorage.setItem(activeConvStorageKey, chat.conversationId);
+      }
+    } catch {
+    }
+  }, [chat.conversationId, activeConvStorageKey]);
   useEffect(() => {
     if (variant === "floating") {
       injectCopilotBodyStyles();
@@ -3747,6 +3994,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);
@@ -3998,7 +4258,7 @@ function CrowCopilot({
     checkTabsOverflow();
   }, [tabs.length, checkTabsOverflow]);
   const widthStyle = typeof width === "number" ? `${width}px` : width;
-  const renderCopilotContent = (overrideOnClose, forceShowClose) => /* @__PURE__ */ jsx(
+  const renderCopilotContent = (overrideOnClose, forceShowClose, overrideWidth) => /* @__PURE__ */ jsx(
     CopilotStyleProvider,
     {
       styles,
@@ -4009,7 +4269,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,
@@ -4241,15 +4501,65 @@ function CrowCopilot({
     }
   );
   const floatingWidth = typeof width === "number" ? width : parseInt(String(width), 10) || 400;
-  return /* @__PURE__ */ jsx(ShadowContainer, { styles: WIDGET_CSS, children: variant === "floating" ? /* @__PURE__ */ jsx(
-    CopilotContainer,
-    {
-      position,
-      width: floatingWidth,
-      defaultOpen,
-      children: ({ close }) => renderCopilotContent(close, true)
-    }
-  ) : renderCopilotContent() });
+  if (variant === "floating") {
+    return /* @__PURE__ */ jsx(ShadowContainer, { styles: WIDGET_CSS, children: /* @__PURE__ */ 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__ */ 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__ */ jsx("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }) : /* @__PURE__ */ 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__ */ jsx("path", { d: "m9 18 6-6-6-6" }) : /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) });
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", flexShrink: 0, height: "100%" }, children: [
+    /* @__PURE__ */ 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__ */ jsx(
+      "div",
+      {
+        ref: embeddedContentRef,
+        style: {
+          width: `${embeddedWidth}px`,
+          height: "100%",
+          display: isCollapsed ? "none" : "block",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx(ShadowContainer, { styles: WIDGET_CSS, children: renderCopilotContent(void 0, false, "100%") })
+      }
+    )
+  ] });
 }
 function PlusIcon({ className }) {
   return /* @__PURE__ */ jsxs(