@usecrow/ui 0.1.65 → 0.1.67

package/dist/index.d.cts

@@ -207,6 +207,14 @@ interface WidgetConfigResponse {
     toolConsentSettings?: Record<string, {
         requires_consent: boolean;
     }>;
+    /** Whether end-user model selection is enabled */
+    modelSelectionEnabled?: boolean;
+    /** Available models for end-user selection (model IDs + display info) */
+    availableModels?: Array<{
+        id: string;
+        name: string;
+        provider: "OpenAI" | "Anthropic";
+    }>;
 }
 
 /**
@@ -320,6 +328,7 @@ declare global {
         __crow_identity_token_fetcher?: () => Promise<string>;
         __crow_on_tool_result?: (toolName: string, result: Record<string, unknown>) => void;
         __crow_tool_renderers?: ToolRenderers;
+        __crow_context_label?: string;
     }
 }
 
@@ -396,8 +405,13 @@ interface CrowWidgetProps {
      * Appended after default styles, allowing overrides.
      */
     customCss?: string;
+    /**
+     * Label shown at the top of the widget indicating what page/context the AI
+     * is aware of. Prop takes priority over window.crow('setContextLabel', ...).
+     */
+    contextLabel?: string;
 }
-declare function CrowWidget({ productId, apiUrl, subdomain, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, toolRenderers, language, customCss, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CrowWidget({ productId, apiUrl, subdomain, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, toolRenderers, language, customCss, contextLabel: contextLabelProp, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CrowCopilotProps {
     /** Product ID for this copilot */
@@ -479,8 +493,13 @@ interface CrowCopilotProps {
      * responds in that language and the welcome message is translated.
      */
     language?: string;
+    /**
+     * Label shown at the top of the copilot indicating what page/context the AI
+     * is aware of. Prop takes priority over window.crow('setContextLabel', ...).
+     */
+    contextLabel?: string;
 }
-declare function CrowCopilot({ productId, apiUrl, subdomain, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, toolRenderers, getIdentityToken, context, language, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
+declare function CrowCopilot({ productId, apiUrl, subdomain, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, toolRenderers, getIdentityToken, context, language, contextLabel: contextLabelProp, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
 
 interface CrowProviderProps extends CrowClientConfig {
     children: React.ReactNode;
@@ -852,6 +871,14 @@ interface UseWidgetStylesResult {
     toolConsentSettings: Record<string, {
         requires_consent: boolean;
     }>;
+    /** Whether end-user model selection is enabled */
+    modelSelectionEnabled: boolean;
+    /** Available models for the dropdown */
+    availableModels: Array<{
+        id: string;
+        name: string;
+        provider: "OpenAI" | "Anthropic";
+    }>;
     /** Refetch styles from API */
     refetch: () => Promise<void>;
 }
@@ -899,6 +926,14 @@ interface UseCopilotStylesResult {
     toolConsentSettings: Record<string, {
         requires_consent: boolean;
     }>;
+    /** Whether end-user model selection is enabled */
+    modelSelectionEnabled: boolean;
+    /** Available models for the dropdown */
+    availableModels: Array<{
+        id: string;
+        name: string;
+        provider: "OpenAI" | "Anthropic";
+    }>;
     /** Refetch styles from API */
     refetch: () => Promise<void>;
 }
@@ -1183,8 +1218,10 @@ interface WidgetHeaderProps {
     hasCustomTransform?: boolean;
     /** Reset position & size to defaults */
     onResetTransform?: () => void;
+    /** Context label displayed below the header row */
+    contextLabel?: string;
 }
-declare function WidgetHeader({ isVerifiedUser, showConversationList, onNewChat, onToggleHistory, showMinimize, onToggleMinimize, onDragPointerDown, isDragging, hasCustomTransform, onResetTransform, }: WidgetHeaderProps): react_jsx_runtime.JSX.Element;
+declare function WidgetHeader({ isVerifiedUser, showConversationList, onNewChat, onToggleHistory, showMinimize, onToggleMinimize, onDragPointerDown, isDragging, hasCustomTransform, onResetTransform, contextLabel, }: WidgetHeaderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * CopilotToggleButton - Edge toggle button for floating copilot

package/dist/index.d.ts

@@ -207,6 +207,14 @@ interface WidgetConfigResponse {
     toolConsentSettings?: Record<string, {
         requires_consent: boolean;
     }>;
+    /** Whether end-user model selection is enabled */
+    modelSelectionEnabled?: boolean;
+    /** Available models for end-user selection (model IDs + display info) */
+    availableModels?: Array<{
+        id: string;
+        name: string;
+        provider: "OpenAI" | "Anthropic";
+    }>;
 }
 
 /**
@@ -320,6 +328,7 @@ declare global {
         __crow_identity_token_fetcher?: () => Promise<string>;
         __crow_on_tool_result?: (toolName: string, result: Record<string, unknown>) => void;
         __crow_tool_renderers?: ToolRenderers;
+        __crow_context_label?: string;
     }
 }
 
@@ -396,8 +405,13 @@ interface CrowWidgetProps {
      * Appended after default styles, allowing overrides.
      */
     customCss?: string;
+    /**
+     * Label shown at the top of the widget indicating what page/context the AI
+     * is aware of. Prop takes priority over window.crow('setContextLabel', ...).
+     */
+    contextLabel?: string;
 }
-declare function CrowWidget({ productId, apiUrl, subdomain, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, toolRenderers, language, customCss, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CrowWidget({ productId, apiUrl, subdomain, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, toolRenderers, language, customCss, contextLabel: contextLabelProp, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CrowCopilotProps {
     /** Product ID for this copilot */
@@ -479,8 +493,13 @@ interface CrowCopilotProps {
      * responds in that language and the welcome message is translated.
      */
     language?: string;
+    /**
+     * Label shown at the top of the copilot indicating what page/context the AI
+     * is aware of. Prop takes priority over window.crow('setContextLabel', ...).
+     */
+    contextLabel?: string;
 }
-declare function CrowCopilot({ productId, apiUrl, subdomain, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, toolRenderers, getIdentityToken, context, language, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
+declare function CrowCopilot({ productId, apiUrl, subdomain, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, toolRenderers, getIdentityToken, context, language, contextLabel: contextLabelProp, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
 
 interface CrowProviderProps extends CrowClientConfig {
     children: React.ReactNode;
@@ -852,6 +871,14 @@ interface UseWidgetStylesResult {
     toolConsentSettings: Record<string, {
         requires_consent: boolean;
     }>;
+    /** Whether end-user model selection is enabled */
+    modelSelectionEnabled: boolean;
+    /** Available models for the dropdown */
+    availableModels: Array<{
+        id: string;
+        name: string;
+        provider: "OpenAI" | "Anthropic";
+    }>;
     /** Refetch styles from API */
     refetch: () => Promise<void>;
 }
@@ -899,6 +926,14 @@ interface UseCopilotStylesResult {
     toolConsentSettings: Record<string, {
         requires_consent: boolean;
     }>;
+    /** Whether end-user model selection is enabled */
+    modelSelectionEnabled: boolean;
+    /** Available models for the dropdown */
+    availableModels: Array<{
+        id: string;
+        name: string;
+        provider: "OpenAI" | "Anthropic";
+    }>;
     /** Refetch styles from API */
     refetch: () => Promise<void>;
 }
@@ -1183,8 +1218,10 @@ interface WidgetHeaderProps {
     hasCustomTransform?: boolean;
     /** Reset position & size to defaults */
     onResetTransform?: () => void;
+    /** Context label displayed below the header row */
+    contextLabel?: string;
 }
-declare function WidgetHeader({ isVerifiedUser, showConversationList, onNewChat, onToggleHistory, showMinimize, onToggleMinimize, onDragPointerDown, isDragging, hasCustomTransform, onResetTransform, }: WidgetHeaderProps): react_jsx_runtime.JSX.Element;
+declare function WidgetHeader({ isVerifiedUser, showConversationList, onNewChat, onToggleHistory, showMinimize, onToggleMinimize, onDragPointerDown, isDragging, hasCustomTransform, onResetTransform, contextLabel, }: WidgetHeaderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * CopilotToggleButton - Edge toggle button for floating copilot

package/dist/index.js

@@ -1237,6 +1237,16 @@ function useCrowAPI({ onIdentified, onReset } = {}) {
           }
           return crowAsk(opts);
         }
+        case "setContextLabel":
+          if (typeof options !== "string") {
+            console.error("[Crow] setContextLabel() requires a string");
+            return;
+          }
+          window.__crow_context_label = options || void 0;
+          window.dispatchEvent(
+            new CustomEvent("crow:setContextLabel", { detail: options })
+          );
+          break;
         case "setSuggestedActions":
           if (!Array.isArray(options)) {
             console.error("[Crow] setSuggestedActions() requires an array of { label, message }");
@@ -1602,6 +1612,12 @@ function useWidgetStyles({
   const [selectedModel, setSelectedModel] = useState(
     styleCache.get(key)?.model ?? void 0
   );
+  const [modelSelectionEnabled, setModelSelectionEnabled] = useState(
+    styleCache.get(key)?.modelSelectionEnabled || false
+  );
+  const [availableModels, setAvailableModels] = useState(
+    styleCache.get(key)?.availableModels || []
+  );
   const hasFetchedRef = useRef(false);
   const fetchStyles = async () => {
     if (skip) return;
@@ -1621,6 +1637,8 @@ function useWidgetStyles({
       setSelectedModel(config.model ?? void 0);
       setInitialSuggestions(config.initialSuggestions || []);
       setToolConsentSettings(config.toolConsentSettings || {});
+      setModelSelectionEnabled(config.modelSelectionEnabled || false);
+      setAvailableModels(config.availableModels || []);
     } catch (err) {
       console.error("[CrowWidget] Failed to fetch styles:", err);
       setError(err instanceof Error ? err : new Error(String(err)));
@@ -1639,6 +1657,8 @@ function useWidgetStyles({
       setPersistAnonymousConversations(cached.persistAnonymousConversations ?? true);
       setWelcomeMessage(cached.welcomeMessage ?? void 0);
       setSelectedModel(cached.model ?? void 0);
+      setModelSelectionEnabled(cached.modelSelectionEnabled || false);
+      setAvailableModels(cached.availableModels || []);
       setIsLoading(false);
       return;
     }
@@ -1660,6 +1680,8 @@ function useWidgetStyles({
     selectedModel,
     initialSuggestions,
     toolConsentSettings,
+    modelSelectionEnabled,
+    availableModels,
     refetch: fetchStyles
   };
 }
@@ -1699,6 +1721,12 @@ function useCopilotStyles({
   const [toolConsentSettings, setToolConsentSettings] = useState(
     styleCache.get(key)?.toolConsentSettings || {}
   );
+  const [modelSelectionEnabled, setModelSelectionEnabled] = useState(
+    styleCache.get(key)?.modelSelectionEnabled || false
+  );
+  const [availableModels, setAvailableModels] = useState(
+    styleCache.get(key)?.availableModels || []
+  );
   const hasFetchedRef = useRef(false);
   const fetchStyles = async () => {
     if (skip) return;
@@ -1716,6 +1744,8 @@ function useCopilotStyles({
       setWelcomeMessage(config.welcomeMessage ?? void 0);
       setSelectedModel(config.model ?? void 0);
       setToolConsentSettings(config.toolConsentSettings || {});
+      setModelSelectionEnabled(config.modelSelectionEnabled || false);
+      setAvailableModels(config.availableModels || []);
     } catch (err) {
       console.error("[CrowCopilot] Failed to fetch styles:", err);
       setError(err instanceof Error ? err : new Error(String(err)));
@@ -1735,6 +1765,8 @@ function useCopilotStyles({
       setPersistAnonymousConversations(cached.persistAnonymousConversations ?? true);
       setWelcomeMessage(cached.welcomeMessage ?? void 0);
       setSelectedModel(cached.model ?? void 0);
+      setModelSelectionEnabled(cached.modelSelectionEnabled || false);
+      setAvailableModels(cached.availableModels || []);
       setIsLoading(false);
       return;
     }
@@ -1754,6 +1786,8 @@ function useCopilotStyles({
     welcomeMessage,
     selectedModel,
     toolConsentSettings,
+    modelSelectionEnabled,
+    availableModels,
     refetch: fetchStyles
   };
 }
@@ -2438,7 +2472,8 @@ function WidgetHeader({
   onDragPointerDown,
   isDragging,
   hasCustomTransform,
-  onResetTransform
+  onResetTransform,
+  contextLabel
 }) {
   const { agentName, styles } = useWidgetStyleContext();
   return /* @__PURE__ */ jsxs(
@@ -2526,7 +2561,36 @@ function WidgetHeader({
               children: /* @__PURE__ */ jsx(X, { size: 18, className: "crow-text-gray-700" })
             }
           )
-        ] })
+        ] }),
+        contextLabel && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "crow-flex crow-items-center crow-gap-1.5 crow-mt-1 crow-text-xs",
+            style: { color: "#6b7280" },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "12",
+                  height: "12",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "crow-shrink-0",
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "crow-truncate", children: contextLabel })
+            ]
+          }
+        )
       ]
     }
   );
@@ -3165,7 +3229,9 @@ var ModelSelector = ({
   const dropdownRef = useRef(null);
   useEffect(() => {
     const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (!dropdownRef.current) return;
+      const path = event.composedPath();
+      if (!path.includes(dropdownRef.current)) {
         setIsOpen(false);
       }
     };
@@ -4132,7 +4198,8 @@ function CrowWidget({
   context,
   toolRenderers,
   language,
-  customCss
+  customCss,
+  contextLabel: contextLabelProp
 }) {
   const effectiveGetIdentityToken = getIdentityToken || window.__crow_identity_token_fetcher;
   const effectiveOnToolResult = onToolResult || window.__crow_on_tool_result;
@@ -4149,7 +4216,9 @@ function CrowWidget({
     welcomeMessage: welcomeMessageFromAPI,
     selectedModel: selectedModelFromAPI,
     initialSuggestions,
-    toolConsentSettings
+    toolConsentSettings,
+    modelSelectionEnabled,
+    availableModels: availableModelsFromAPI
   } = useWidgetStyles({
     productId,
     apiUrl,
@@ -4173,6 +4242,15 @@ function CrowWidget({
     window.addEventListener("crow:setGreeting", handler);
     return () => window.removeEventListener("crow:setGreeting", handler);
   }, []);
+  const [contextLabelFromAPI, setContextLabelFromAPI] = useState(
+    () => window.__crow_context_label
+  );
+  useEffect(() => {
+    const handler = (e) => setContextLabelFromAPI(e.detail || void 0);
+    window.addEventListener("crow:setContextLabel", handler);
+    return () => window.removeEventListener("crow:setContextLabel", handler);
+  }, []);
+  const contextLabel = contextLabelProp ?? contextLabelFromAPI;
   const agentName = agentNameProp ?? agentNameFromAPI;
   const welcomeMessage = greetingOverride ?? welcomeMessageProp ?? welcomeMessageFromAPI;
   const selectedModel = selectedModelFromAPI;
@@ -4663,7 +4741,8 @@ function CrowWidget({
         onDragPointerDown: variant === "floating" ? transform.onDragPointerDown : void 0,
         isDragging: transform.isDragging,
         hasCustomTransform: transform.hasCustomTransform,
-        onResetTransform: transform.resetTransform
+        onResetTransform: transform.resetTransform,
+        contextLabel
       }
     ),
     /* @__PURE__ */ jsx(AnimatePresence, { children: showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
@@ -4736,7 +4815,10 @@ function CrowWidget({
           showStopButton: isBrowserUseActive || !!askUserResolver || !!pendingConfirmation,
           highlighted: !!askUserResolver,
           className: "crow-backdrop-blur-md",
-          backendUrl: apiUrl
+          backendUrl: apiUrl,
+          selectedModel: chat.selectedModel || selectedModelFromAPI,
+          onModelChange: chat.setSelectedModel,
+          availableModels: modelSelectionEnabled ? availableModelsFromAPI : []
         }
       )
     ] })
@@ -5055,7 +5137,8 @@ function CrowCopilot({
   toolRenderers,
   getIdentityToken,
   context,
-  language
+  language,
+  contextLabel: contextLabelProp
 }) {
   const effectiveGetIdentityToken = getIdentityToken || window.__crow_identity_token_fetcher;
   const effectiveOnToolResult = onToolResult || window.__crow_on_tool_result;
@@ -5070,7 +5153,9 @@ function CrowCopilot({
     persistAnonymousConversations,
     welcomeMessage: welcomeMessageFromAPI,
     selectedModel,
-    toolConsentSettings
+    toolConsentSettings,
+    modelSelectionEnabled,
+    availableModels: availableModelsFromAPI
   } = useCopilotStyles({
     productId,
     apiUrl,
@@ -5096,6 +5181,15 @@ function CrowCopilot({
     return () => window.removeEventListener("crow:setGreeting", handler);
   }, []);
   const welcomeMessage = greetingOverride ?? welcomeMessageProp ?? welcomeMessageFromAPI;
+  const [contextLabelFromAPI, setContextLabelFromAPI] = useState(
+    () => window.__crow_context_label
+  );
+  useEffect(() => {
+    const handler = (e) => setContextLabelFromAPI(e.detail || void 0);
+    window.addEventListener("crow:setContextLabel", handler);
+    return () => window.removeEventListener("crow:setContextLabel", handler);
+  }, []);
+  const contextLabel = contextLabelProp ?? contextLabelFromAPI;
   const [autoTools, setAutoTools] = useState({});
   const browserUseLoaded = autoTools.browser_use;
   useEffect(() => {
@@ -5910,6 +6004,38 @@ function CrowCopilot({
                 ]
               }
             ),
+            contextLabel && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "crow-flex crow-items-center crow-gap-1.5 crow-px-3 crow-py-1.5 crow-border-b crow-text-xs",
+                style: {
+                  color: "#6b7280",
+                  borderColor: styles.colors.border
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "12",
+                      height: "12",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "crow-shrink-0",
+                      children: [
+                        /* @__PURE__ */ jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
+                        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "crow-truncate", children: contextLabel })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxs(AnimatePresence, { children: [
               showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
                 ConversationList,
@@ -5994,7 +6120,10 @@ function CrowCopilot({
                       onSend: handleSend,
                       onStop: handleStop,
                       placeholder: "Ask anything...",
-                      isLoading: chat.isLoading
+                      isLoading: chat.isLoading,
+                      selectedModel: chat.selectedModel || selectedModel,
+                      onModelChange: chat.setSelectedModel,
+                      availableModels: modelSelectionEnabled ? availableModelsFromAPI : []
                     }
                   )
                 ]