@usecrow/ui 0.1.44 → 0.1.46

package/dist/index.cjs

@@ -149,7 +149,7 @@ function useChat({
             identity_token: identityToken,
             model: selectedModel,
             user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            user_local_time: (/* @__PURE__ */ new Date()).toLocaleString(),
+            user_local_time: (/* @__PURE__ */ new Date()).toLocaleString("en-US", { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric", hour12: true }),
             page_path: typeof window !== "undefined" ? window.location.pathname : void 0,
             context: typeof window !== "undefined" ? window.__crow_page_context : void 0
           }),
@@ -508,7 +508,7 @@ function useChat({
             identity_token: identityToken,
             model: selectedModel,
             user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            user_local_time: (/* @__PURE__ */ new Date()).toLocaleString()
+            user_local_time: (/* @__PURE__ */ new Date()).toLocaleString("en-US", { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric", hour12: true })
           })
         });
         if (!response.ok) {
@@ -3483,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) {
@@ -3538,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 })
       }
     )
   ] });
@@ -3635,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);
@@ -3654,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,
@@ -3740,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();
@@ -3773,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);
@@ -4024,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,
@@ -4035,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,
@@ -4267,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(