@webless/agent 0.10.0 → 0.10.2

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)(
@@ -4949,7 +4948,7 @@ function MessageBubble({
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_streamdown.Streamdown,
       {
-        animated: isStreaming,
+        animated: false,
         caret: "circle",
         className: "message-bubble__markdown",
         controls: false,
@@ -6457,14 +6456,21 @@ function AgentRail({
   const activeVisitorToolInput = [...visitorToolResults].reverse().find((result) => result.kind === "input");
   const visibleVisitorToolResults = activeVisitorToolInput ? [activeVisitorToolInput] : visitorToolResults;
   const activityActive = state.toolSteps.some((step) => step.state === "active");
-  const showActivity = state.toolSteps.length > 0 && pendingInputRequests.length === 0 && !state.pendingOffer && activityActive;
+  const showActivity = state.toolSteps.length > 0 && pendingInputRequests.length === 0 && !state.pendingOffer && (activityActive || isBusy && !state.streamingText);
+  const activitySteps = activityActive || !isBusy || state.streamingText ? state.toolSteps : [...state.toolSteps, {
+    id: "preparing-answer",
+    kind: "tool",
+    label: "Preparing your answer",
+    detail: "Preparing your answer",
+    state: "active"
+  }];
   const hasVisitorMessages2 = state.messages.some(
     (message) => message.role === "visitor"
   );
   const hasAgentResponseAfterVisitor = state.messages.some(
     (message) => message.role === "agent" && message.id !== "greeting"
   );
-  const showDisclaimerLabel = Boolean(resolvedDisclaimerLabel) && hasVisitorMessages2 && (hasAgentResponseAfterVisitor || state.phase === "streaming" && Boolean(state.streamingText));
+  const showDisclaimerLabel = Boolean(resolvedDisclaimerLabel) && hasVisitorMessages2 && (hasAgentResponseAfterVisitor || Boolean(state.streamingText));
   const showIdleFollowUps = !hasVisitorMessages2 && state.followUps.length > 0;
   const greeting = state.messages.find(
     (message) => message.role === "agent" && message.id === "greeting"
@@ -6487,11 +6493,11 @@ function AgentRail({
   }
   const lastIsAgent = lastMessage?.role === "agent";
   const showMessageActions = state.phase === "complete" && lastIsAgent && hasVisitorMessages2 && Boolean(hideToolCardFences(lastMessage.text).trim());
-  const streamingMessage = state.phase === "streaming" && state.streamingText && !lastIsAgent ? {
+  const streamingMessage = state.streamingText && !lastIsAgent ? {
     createdAt: 0,
     id: "streaming-response",
     role: "agent",
-    streaming: true,
+    streaming: isBusy,
     text: state.streamingText,
     searchResults: (state.toolResults ?? []).filter(
       (result) => result.kind === "search"
@@ -6503,6 +6509,7 @@ function AgentRail({
     streaming: false,
     text: "Pick a date and time that works for you."
   } : null;
+  const transcriptMessages = streamingMessage ? [...visibleMessages, streamingMessage] : visibleMessages;
   const bookingReadyText = state.streamingText || (lastIsAgent && lastMessage?.role === "agent" ? lastMessage.text : "");
   const waitingForBooking = !state.pendingOffer && looksLikeBookingReady(bookingReadyText) && (state.phase === "thinking" || state.phase === "running-tools" || state.phase === "streaming");
   const lastAgentText = lastIsAgent && lastMessage?.role === "agent" ? lastMessage.text : "";
@@ -6735,7 +6742,7 @@ function AgentRail({
                       brandLabel: resolvedBrandLabel,
                       brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
                       failed: state.phase === "error",
-                      steps: state.toolSteps
+                      steps: activitySteps
                     }
                   ) : null,
                   visibleVisitorToolResults.map((result) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -6756,7 +6763,7 @@ function AgentRail({
                     request.requestId
                   ))
                 ] }) : null,
-                visibleMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                transcriptMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
                   "div",
                   {
                     ref: index === lastVisitorIndex + 1 ? responseRef : void 0,
@@ -6769,7 +6776,7 @@ function AgentRail({
                           message,
                           bookingDisabled: isBusy,
                           brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
-                          offer: index === lastAgentIndex ? state.pendingOffer : void 0,
+                          offer: index === transcriptMessages.length - 1 ? state.pendingOffer : void 0,
                           onBook
                         }
                       ),
@@ -6792,7 +6799,7 @@ function AgentRail({
                             brandLabel: resolvedBrandLabel,
                             brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
                             failed: state.phase === "error",
-                            steps: state.toolSteps
+                            steps: activitySteps
                           }
                         ) : null,
                         visibleVisitorToolResults.map((result) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -6815,18 +6822,8 @@ function AgentRail({
                       ] }) : null
                     ]
                   },
-                  message.id
+                  message.role === "agent" && transcriptMessages[index - 1]?.role === "visitor" ? `answer-${transcriptMessages[index - 1]?.id}` : message.id
                 )),
-                streamingMessage ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: responseRef, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  MessageBubble,
-                  {
-                    message: streamingMessage,
-                    bookingDisabled: isBusy,
-                    brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
-                    offer: state.pendingOffer,
-                    onBook
-                  }
-                ) }) : null,
                 waitingForBooking ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BookingCardLoader, {}) : null,
                 state.error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { className: "agent-rail__error", role: "alert", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
@@ -6889,6 +6886,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 +6961,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 +7052,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 +7067,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 +7092,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 +7108,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 +7125,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 +7217,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 +7272,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 +7307,7 @@ function AgentWidget({
       })
     );
   }
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (railCollapsed) return;
     const handleKeyDown = (event) => {
       if (event.key === "Tab" && (isMobile || railExpanded)) {