@webless/agent 0.10.0 → 0.10.1

package/dist/embed.cjs

@@ -64,7 +64,7 @@ function submitAgentPanel(customerId, message, options) {
 }
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/react/page-shift.ts
 var import_react = require("react");
@@ -3804,8 +3804,7 @@ function workSummary(steps, failed, brandLabel) {
     )}`;
   const active = [...steps].reverse().find((step) => step.state === "active");
   if (active?.kind === "search") return "Searching this site";
-  if (active)
-    return brandLabel ? `${brandLabel} is choosing the best way to help` : "Choosing the best way to help";
+  if (active) return "Reviewing your details to find the best approach";
   if (failed) return "Couldn\u2019t complete this request";
   const hasError = steps.some((step) => step.state === "error");
   const specialists = steps.filter(
@@ -3914,7 +3913,7 @@ function AgentActivityBubble({
         }
       ),
       workSummary(steps, failed, brandLabel),
-      active ? "\u2026" : ""
+      active ? "..." : ""
     ] }),
     !active ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "agent-activity-bubble__details", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -6889,6 +6888,7 @@ function AgentRail({
 }
 
 // src/react/components/AssistEdgeTab/AssistEdgeTab.tsx
+var import_react15 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function ChatSparkIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
@@ -6963,16 +6963,35 @@ function ChatSparkIcon() {
     }
   );
 }
-function TabMarkIcon({ customIconUrl }) {
-  const url = customIconUrl?.trim();
-  if (url) {
+function TabMarkIcon({
+  customIconUrl,
+  logoUrl
+}) {
+  const custom = customIconUrl?.trim();
+  const logo = logoUrl?.trim();
+  const [customFailed, setCustomFailed] = (0, import_react15.useState)(false);
+  const [logoFailed, setLogoFailed] = (0, import_react15.useState)(false);
+  if (custom && !customFailed) {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "img",
       {
         alt: "",
         "aria-hidden": true,
         className: "assist-edge-tab__custom-icon",
-        src: url
+        src: custom,
+        onError: () => setCustomFailed(true)
+      }
+    );
+  }
+  if (logo && !logoFailed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "img",
+      {
+        alt: "",
+        "aria-hidden": true,
+        className: "assist-edge-tab__logo",
+        src: logo,
+        onError: () => setLogoFailed(true)
       }
     );
   }
@@ -7035,13 +7054,14 @@ function AssistEdgeTab({
   const visibleLabel = label?.trim() || copy.label;
   const visibleSubLabel = subLabel?.trim() || "";
   const pill = mobile || side === "bottom";
+  const chromeScheme = pill ? "light" : resolvedColorScheme;
   const ariaLabel = visibleSubLabel ? `Open ${visibleLabel} \u2014 ${visibleSubLabel}` : `Open ${visibleLabel}`;
   const alignment = along < 50 ? "start" : along > 50 ? "end" : "center";
-  const showLogo = Boolean(logoUrl?.trim()) && !customIconUrl?.trim();
-  const resolvedBrandColor = brandColor ?? (resolvedColorScheme === "dark" ? defaultDarkAgentRailTheme.brand : void 0);
-  const resolvedBorderColor = resolvedColorScheme === "dark" ? defaultDarkAgentRailTheme.border : borderColor;
-  const resolvedSurfaceColor = resolvedColorScheme === "dark" ? defaultDarkAgentRailTheme.surface : surfaceColor;
-  const resolvedTextColor = resolvedColorScheme === "dark" ? defaultDarkAgentRailTheme.text : textColor;
+  const resolvedBrandColor = brandColor ?? (chromeScheme === "dark" ? defaultDarkAgentRailTheme.brand : void 0);
+  const resolvedBorderColor = chromeScheme === "dark" ? defaultDarkAgentRailTheme.border : borderColor;
+  const resolvedSurfaceColor = chromeScheme === "dark" ? defaultDarkAgentRailTheme.surface : surfaceColor;
+  const resolvedTextColor = chromeScheme === "dark" ? defaultDarkAgentRailTheme.text : textColor;
+  const markSourceKey = `${customIconUrl?.trim() ?? ""}|${logoUrl?.trim() ?? ""}`;
   const style = {
     "--tab-along": `${along}%`,
     "--tab-inset": `${inset}px`,
@@ -7049,16 +7069,16 @@ function AssistEdgeTab({
     ...brandForeground ? { "--as-visitor-text": brandForeground } : {},
     ...resolvedBorderColor ? { "--as-border": resolvedBorderColor } : {},
     ...fontFamily ? { "--as-font-display": fontFamily } : {},
-    ...resolvedSurfaceColor ? { "--as-surface": resolvedSurfaceColor } : {},
-    ...resolvedTextColor ? { "--as-text": resolvedTextColor } : {},
-    colorScheme: resolvedColorScheme
+    ...pill ? { "--as-surface": "#ffffff", "--as-text": "#171717" } : resolvedSurfaceColor ? { "--as-surface": resolvedSurfaceColor } : {},
+    ...!pill && resolvedTextColor ? { "--as-text": resolvedTextColor } : {},
+    colorScheme: chromeScheme
   };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "button",
     {
       type: "button",
       className: `assist-edge-tab assist-edge-tab--${variant} assist-edge-tab--${side} assist-edge-tab--align-${alignment}${mobile ? " assist-edge-tab--mobile" : ""}${visible ? " is-visible" : ""}`,
-      "data-color-scheme": resolvedColorScheme,
+      "data-color-scheme": chromeScheme,
       style,
       "aria-label": ariaLabel,
       "aria-hidden": !visible,
@@ -7074,18 +7094,14 @@ function AssistEdgeTab({
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "assist-edge-tab__wash assist-edge-tab__wash--light" }),
                 /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "assist-edge-tab__wash assist-edge-tab__wash--cool" }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabMarkIcon, { customIconUrl }),
-                showLogo ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  "img",
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  TabMarkIcon,
                   {
-                    className: "assist-edge-tab__logo",
-                    src: logoUrl,
-                    alt: "",
-                    onError: (event) => {
-                      event.currentTarget.hidden = true;
-                    }
-                  }
-                ) : null
+                    customIconUrl,
+                    logoUrl
+                  },
+                  markSourceKey
+                )
               ]
             }
           ),
@@ -7094,20 +7110,14 @@ function AssistEdgeTab({
             visibleSubLabel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "assist-edge-tab__sublabel", children: visibleSubLabel }) : null
           ] })
         ] }) : variant === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabMarkIcon, { customIconUrl }),
-            showLogo ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-              "img",
-              {
-                className: "assist-edge-tab__logo",
-                src: logoUrl,
-                alt: "",
-                onError: (event) => {
-                  event.currentTarget.hidden = true;
-                }
-              }
-            ) : null
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            TabMarkIcon,
+            {
+              customIconUrl,
+              logoUrl
+            },
+            markSourceKey
+          ) }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChevronDownIcon2, {})
         ] }) : null,
@@ -7117,20 +7127,14 @@ function AssistEdgeTab({
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DragDots, {})
         ] }) : null,
         !pill && variant === "fill" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabMarkIcon, { customIconUrl }),
-            showLogo ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-              "img",
-              {
-                className: "assist-edge-tab__logo",
-                src: logoUrl,
-                alt: "",
-                onError: (event) => {
-                  event.currentTarget.hidden = true;
-                }
-              }
-            ) : null
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            TabMarkIcon,
+            {
+              customIconUrl,
+              logoUrl
+            },
+            markSourceKey
+          ) }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChevronLeftIcon, {})
         ] }) : null
@@ -7215,9 +7219,9 @@ function AgentWidget({
 }) {
   const isMobile = useIsMobile();
   const placement = normalizeAgentPlacement(placementInput);
-  const railSlotRef = (0, import_react15.useRef)(null);
-  const [railCollapsed, setRailCollapsed] = (0, import_react15.useState)(defaultCollapsed);
-  const [railExpanded, setRailExpanded] = (0, import_react15.useState)(false);
+  const railSlotRef = (0, import_react16.useRef)(null);
+  const [railCollapsed, setRailCollapsed] = (0, import_react16.useState)(defaultCollapsed);
+  const [railExpanded, setRailExpanded] = (0, import_react16.useState)(false);
   const pageShiftActive = shouldApplyPageShift({
     pageShift,
     isMobile,
@@ -7270,7 +7274,7 @@ function AgentWidget({
     } : {},
     ...branding?.colors?.border ? { border: branding.colors.border } : {}
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!registerPanelController) return;
     registerAgentPanelController(customerId, {
       open: () => setRailCollapsed(false),
@@ -7305,7 +7309,7 @@ function AgentWidget({
       })
     );
   }
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (railCollapsed) return;
     const handleKeyDown = (event) => {
       if (event.key === "Tab" && (isMobile || railExpanded)) {