@usecrow/ui 0.1.64 → 0.1.66

package/dist/index.cjs

@@ -1263,6 +1263,16 @@ function useCrowAPI({ onIdentified, onReset } = {}) {
           }
           return client.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 }");
@@ -1395,7 +1405,8 @@ var DEFAULT_WIDGET_STYLES = {
   // ═══════════════════════════════════════════════════════════
   bubble: {
     size: 48,
-    iconSize: 24
+    iconSize: 24,
+    label: ""
   },
   // ═══════════════════════════════════════════════════════════
   // SHADOWS
@@ -2333,14 +2344,20 @@ function ShadowContainer({
 ShadowContainer.displayName = "ShadowContainer";
 function ChatBubble({ isExpanded, onClick }) {
   const { styles } = useWidgetStyleContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const label = styles.bubble.label;
+  const showLabel = !isExpanded && !!label;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       onClick,
-      className: "crow-fixed crow-z-[999999] crow-rounded-full crow-flex crow-items-center crow-justify-center crow-shadow-2xl hover:crow-scale-110 crow-transition-all crow-duration-500 crow-border crow-backdrop-blur-md",
+      className: "crow-fixed crow-z-[999999] crow-flex crow-items-center crow-justify-center crow-shadow-2xl hover:crow-scale-110 crow-transition-all crow-duration-500 crow-border crow-backdrop-blur-md",
       style: {
-        width: styles.bubble.size,
         height: styles.bubble.size,
+        width: showLabel ? "auto" : styles.bubble.size,
+        paddingLeft: showLabel ? styles.bubble.size * 0.3 : 0,
+        paddingRight: showLabel ? styles.bubble.size * 0.4 : 0,
+        gap: showLabel ? 6 : 0,
+        borderRadius: 9999,
         right: styles.position.bubbleRight,
         bottom: styles.position.bubbleBottom,
         background: styles.colors.bubbleBackground,
@@ -2349,7 +2366,15 @@ function ChatBubble({ isExpanded, onClick }) {
         color: styles.colors.bubbleIcon
       },
       "aria-label": isExpanded ? "Close Chat" : "Open Chat",
-      children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: styles.bubble.iconSize, strokeWidth: 2 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { size: styles.bubble.iconSize, strokeWidth: 2 })
+      children: [
+        isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: styles.bubble.iconSize, strokeWidth: 2 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { size: styles.bubble.iconSize, strokeWidth: 2 }),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+          fontSize: styles.bubble.iconSize * 0.6,
+          fontWeight: 500,
+          whiteSpace: "nowrap",
+          fontFamily: "system-ui, sans-serif"
+        }, children: label })
+      ]
     }
   );
 }
@@ -2449,7 +2474,8 @@ function WidgetHeader({
   onDragPointerDown,
   isDragging,
   hasCustomTransform,
-  onResetTransform
+  onResetTransform,
+  contextLabel
 }) {
   const { agentName, styles } = useWidgetStyleContext();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2537,7 +2563,36 @@ function WidgetHeader({
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18, className: "crow-text-gray-700" })
             }
           )
-        ] })
+        ] }),
+        contextLabel && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "crow-flex crow-items-center crow-gap-1.5 crow-mt-1 crow-text-xs",
+            style: { color: "#6b7280" },
+            children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "10", r: "3" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "crow-truncate", children: contextLabel })
+            ]
+          }
+        )
       ]
     }
   );
@@ -4143,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;
@@ -4184,6 +4240,15 @@ function CrowWidget({
     window.addEventListener("crow:setGreeting", handler);
     return () => window.removeEventListener("crow:setGreeting", handler);
   }, []);
+  const [contextLabelFromAPI, setContextLabelFromAPI] = React3.useState(
+    () => window.__crow_context_label
+  );
+  React3.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;
@@ -4674,7 +4739,8 @@ function CrowWidget({
         onDragPointerDown: variant === "floating" ? transform.onDragPointerDown : void 0,
         isDragging: transform.isDragging,
         hasCustomTransform: transform.hasCustomTransform,
-        onResetTransform: transform.resetTransform
+        onResetTransform: transform.resetTransform,
+        contextLabel
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showConversationList && isVerifiedUser && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5066,7 +5132,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;
@@ -5107,6 +5174,15 @@ function CrowCopilot({
     return () => window.removeEventListener("crow:setGreeting", handler);
   }, []);
   const welcomeMessage = greetingOverride ?? welcomeMessageProp ?? welcomeMessageFromAPI;
+  const [contextLabelFromAPI, setContextLabelFromAPI] = React3.useState(
+    () => window.__crow_context_label
+  );
+  React3.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] = React3.useState({});
   const browserUseLoaded = autoTools.browser_use;
   React3.useEffect(() => {
@@ -5921,6 +5997,38 @@ function CrowCopilot({
                 ]
               }
             ),
+            contextLabel && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "10", r: "3" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "crow-truncate", children: contextLabel })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.AnimatePresence, { children: [
               showConversationList && isVerifiedUser && /* @__PURE__ */ jsxRuntime.jsx(
                 ConversationList,