@usecrow/ui 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -119,7 +119,9 @@ function useChat({
             message,
             conversation_id: conversationId,
             identity_token: identityToken,
-            model: selectedModel
+            model: selectedModel,
+            user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            user_local_time: (/* @__PURE__ */ new Date()).toLocaleString()
           }),
           signal: abortControllerRef.current.signal
         });
@@ -389,7 +391,9 @@ function useChat({
             tool_name: toolName,
             result,
             identity_token: identityToken,
-            model: selectedModel
+            model: selectedModel,
+            user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            user_local_time: (/* @__PURE__ */ new Date()).toLocaleString()
           })
         });
         if (!response.ok) {
@@ -648,6 +652,16 @@ function useWorkflow({
     exitWorkflow
   };
 }
+var SDK_DEFAULT_TOOLS = {
+  refreshPage: async () => {
+    try {
+      window.location.reload();
+      return { status: "success", data: { message: "Page refresh initiated" } };
+    } catch (error) {
+      return { status: "error", error: String(error) };
+    }
+  }
+};
 function useCrowAPI({ onIdentified, onReset } = {}) {
   const onIdentifiedRef = React3.useRef(onIdentified);
   const onResetRef = React3.useRef(onReset);
@@ -657,6 +671,15 @@ function useCrowAPI({ onIdentified, onReset } = {}) {
     onResetRef.current = onReset;
   });
   React3.useEffect(() => {
+    if (!window.__crow_client_tools) {
+      window.__crow_client_tools = {};
+    }
+    for (const [toolName, handler] of Object.entries(SDK_DEFAULT_TOOLS)) {
+      if (!window.__crow_client_tools[toolName]) {
+        window.__crow_client_tools[toolName] = handler;
+        console.log(`[Crow] Registered default tool: ${toolName}`);
+      }
+    }
     window.crow = function(command, options) {
       const opts = options;
       switch (command) {
@@ -1149,7 +1172,9 @@ function useWidgetStyles2() {
   const context = React3.useContext(WidgetStyleContext);
   return context?.styles ?? DEFAULT_WIDGET_STYLES;
 }
-var CopilotStyleContext = React3.createContext(null);
+var CopilotStyleContext = React3.createContext(
+  null
+);
 function CopilotStyleProvider({
   children,
   styles,
@@ -1175,6 +1200,7 @@ function useCopilotStyles2() {
   const context = React3.useContext(CopilotStyleContext);
   return context?.styles ?? DEFAULT_COPILOT_STYLES;
 }
+var PASSTHROUGH_KEYS = /* @__PURE__ */ new Set(["Escape", "Tab"]);
 function ShadowContainer({
   children,
   styles,
@@ -1189,6 +1215,51 @@ function ShadowContainer({
       setShadowRoot(shadow);
     }
   }, []);
+  React3.useEffect(() => {
+    if (!shadowRoot || !hostRef.current) return;
+    const hostElement = hostRef.current;
+    const stopPropagationHandler = (e) => {
+      const keyEvent = e;
+      if (keyEvent.key && PASSTHROUGH_KEYS.has(keyEvent.key)) {
+        return;
+      }
+      e.stopPropagation();
+    };
+    shadowRoot.addEventListener("keydown", stopPropagationHandler);
+    shadowRoot.addEventListener("keyup", stopPropagationHandler);
+    shadowRoot.addEventListener("keypress", stopPropagationHandler);
+    let lastFocusedElement = null;
+    const trackFocus = (e) => {
+      lastFocusedElement = e.target;
+    };
+    const protectFocus = (e) => {
+      if (e.key && PASSTHROUGH_KEYS.has(e.key)) {
+        return;
+      }
+      const path = e.composedPath();
+      if (!path.includes(hostElement) && !path.includes(shadowRoot)) {
+        return;
+      }
+      if (lastFocusedElement) {
+        const elementToRestore = lastFocusedElement;
+        queueMicrotask(() => {
+          const activeInShadow = shadowRoot.activeElement;
+          if (!activeInShadow) {
+            elementToRestore.focus();
+          }
+        });
+      }
+    };
+    shadowRoot.addEventListener("focusin", trackFocus);
+    document.addEventListener("keydown", protectFocus, { capture: true });
+    return () => {
+      shadowRoot.removeEventListener("keydown", stopPropagationHandler);
+      shadowRoot.removeEventListener("keyup", stopPropagationHandler);
+      shadowRoot.removeEventListener("keypress", stopPropagationHandler);
+      shadowRoot.removeEventListener("focusin", trackFocus);
+      document.removeEventListener("keydown", protectFocus, { capture: true });
+    };
+  }, [shadowRoot]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: hostRef, id: hostId, className: hostClassName, children: shadowRoot && reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("style", { children: styles }),
@@ -1382,7 +1453,14 @@ function StreamingText({
                 ...props,
                 children
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("code", { className: `crow-text-gray-200 ${className || ""}`, ...props, children });
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "code",
+              {
+                className: `crow-text-gray-200 ${className || ""}`,
+                ...props,
+                children
+              }
+            );
           },
           pre: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "crow-bg-gray-800 crow-text-gray-200 crow-p-3 crow-rounded-lg crow-my-2 crow-overflow-x-auto crow-text-sm", children })
         },
@@ -1496,7 +1574,12 @@ function ShimmeringContent({ children }) {
     }
   );
 }
-function ReasoningTrace({ thinking, isComplete, toolCalls = [], isWaiting = false }) {
+function ReasoningTrace({
+  thinking,
+  isComplete,
+  toolCalls = [],
+  isWaiting = false
+}) {
   const hasThinking = !!thinking && thinking.trim().length > 0;
   const hasToolCalls = toolCalls.length > 0;
   if (!isWaiting && !hasThinking && !hasToolCalls) return null;
@@ -1512,7 +1595,10 @@ function WaitingIndicator() {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "crow-font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) })
   ] });
 }
-function ThinkingBlock({ thinking, isComplete }) {
+function ThinkingBlock({
+  thinking,
+  isComplete
+}) {
   const [isExpanded, setIsExpanded] = React3.useState(!isComplete);
   React3.useLayoutEffect(() => {
     setIsExpanded(!isComplete);
@@ -1706,64 +1792,62 @@ function MessageList({
     msg.id
   )) });
 }
-var MessagesContainer = React3.forwardRef(
-  ({ children }, ref) => {
-    const styles = useWidgetStyles2();
-    const internalRef = React3.useRef(null);
-    const lastScrollHeightRef = React3.useRef(0);
-    const isUserScrollingRef = React3.useRef(false);
-    const containerRef = ref || internalRef;
-    const isNearBottom = React3.useCallback(() => {
-      const container = containerRef.current;
-      if (!container) return true;
-      const threshold = 100;
-      return container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
-    }, [containerRef]);
-    const scrollToBottom = React3.useCallback(() => {
-      const container = containerRef.current;
-      if (!container) return;
-      container.scrollTo({
-        top: container.scrollHeight,
-        behavior: "smooth"
-      });
-    }, [containerRef]);
-    React3.useEffect(() => {
-      const container = containerRef.current;
-      if (!container) return;
-      const handleScroll = () => {
-        isUserScrollingRef.current = !isNearBottom();
-      };
-      container.addEventListener("scroll", handleScroll, { passive: true });
-      return () => container.removeEventListener("scroll", handleScroll);
-    }, [containerRef, isNearBottom]);
-    React3.useEffect(() => {
-      const container = containerRef.current;
-      if (!container) return;
-      const currentHeight = container.scrollHeight;
-      const heightChanged = currentHeight !== lastScrollHeightRef.current;
-      if (heightChanged) {
-        lastScrollHeightRef.current = currentHeight;
-        if (!isUserScrollingRef.current || isNearBottom()) {
-          scrollToBottom();
-        }
-      }
+var MessagesContainer = React3.forwardRef(({ children }, ref) => {
+  const styles = useWidgetStyles2();
+  const internalRef = React3.useRef(null);
+  const lastScrollHeightRef = React3.useRef(0);
+  const isUserScrollingRef = React3.useRef(false);
+  const containerRef = ref || internalRef;
+  const isNearBottom = React3.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return true;
+    const threshold = 100;
+    return container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
+  }, [containerRef]);
+  const scrollToBottom = React3.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: "smooth"
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      framerMotion.motion.div,
-      {
-        ref: containerRef,
-        id: MESSAGES_CONTAINER_ID,
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: styles.animations.duration },
-        className: "crow-relative crow-flex-1 crow-min-h-0 crow-rounded-2xl crow-mb-3 crow-overflow-y-auto crow-p-4 crow-space-y-3 crow-pointer-events-auto",
-        style: { background: styles.colors.messagesBackground },
-        children
+  }, [containerRef]);
+  React3.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const handleScroll = () => {
+      isUserScrollingRef.current = !isNearBottom();
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [containerRef, isNearBottom]);
+  React3.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const currentHeight = container.scrollHeight;
+    const heightChanged = currentHeight !== lastScrollHeightRef.current;
+    if (heightChanged) {
+      lastScrollHeightRef.current = currentHeight;
+      if (!isUserScrollingRef.current || isNearBottom()) {
+        scrollToBottom();
       }
-    );
-  }
-);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      ref: containerRef,
+      id: MESSAGES_CONTAINER_ID,
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: styles.animations.duration },
+      className: "crow-relative crow-flex-1 crow-min-h-0 crow-rounded-2xl crow-mb-3 crow-overflow-y-auto crow-p-4 crow-space-y-3 crow-pointer-events-auto",
+      style: { background: styles.colors.messagesBackground },
+      children
+    }
+  );
+});
 MessagesContainer.displayName = "MessagesContainer";
 function ConversationList({
   conversations,
@@ -2035,7 +2119,13 @@ var PromptInput = React3__default.default.forwardRef(
   }
 );
 PromptInput.displayName = "PromptInput";
-var PromptInputTextarea = ({ className, onKeyDown, disableAutosize = false, placeholder, ...props }) => {
+var PromptInputTextarea = ({
+  className,
+  onKeyDown,
+  disableAutosize = false,
+  placeholder,
+  ...props
+}) => {
   const { value, setValue, maxHeight, onSubmit, disabled } = usePromptInput();
   const textareaRef = React3__default.default.useRef(null);
   React3__default.default.useEffect(() => {
@@ -2068,7 +2158,14 @@ var PromptInputActions = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("crow-flex crow-items-center crow-gap-2", className), ...props, children });
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("crow-flex crow-items-center crow-gap-2", className),
+    ...props,
+    children
+  }
+);
 var PromptInputAction = ({
   tooltip,
   children,
@@ -2115,7 +2212,13 @@ var PromptInputBox = React3__default.default.forwardRef(
         disabled: isLoading,
         ref: ref || promptBoxRef,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-transition-all crow-duration-300 crow-opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx(PromptInputTextarea, { placeholder, className: "crow-text-base" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-transition-all crow-duration-300 crow-opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+            PromptInputTextarea,
+            {
+              placeholder,
+              className: "crow-text-base"
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(PromptInputActions, { className: "crow-flex crow-items-center crow-justify-between crow-gap-2 crow-p-0 crow-pt-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-flex crow-items-center", children: availableModels.length > 0 && onModelChange && /* @__PURE__ */ jsxRuntime.jsx(
               ModelSelector,
@@ -2148,10 +2251,21 @@ var PromptInputBox = React3__default.default.forwardRef(
                         handleSubmit();
                       }
                     },
-                    children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, { className: "crow-h-3.5 crow-w-3.5 crow-text-white", style: { fill: "white" } }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: cn(
-                      "crow-h-3.5 crow-w-3.5",
-                      hasContent ? "crow-text-white" : "crow-text-gray-400"
-                    ) })
+                    children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.Square,
+                      {
+                        className: "crow-h-3.5 crow-w-3.5 crow-text-white",
+                        style: { fill: "white" }
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.ArrowUp,
+                      {
+                        className: cn(
+                          "crow-h-3.5 crow-w-3.5",
+                          hasContent ? "crow-text-white" : "crow-text-gray-400"
+                        )
+                      }
+                    )
                   }
                 )
               }