@usecrow/ui 0.1.10 → 0.1.11

package/dist/index.cjs

@@ -1149,7 +1149,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 +1177,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 +1192,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 }),
@@ -1706,64 +1754,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 +2081,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 +2120,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 +2174,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 +2213,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"
+                        )
+                      }
+                    )
                   }
                 )
               }