@webless/agent 0.9.3 → 0.10.1

package/dist/react.cjs

@@ -46,7 +46,7 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // 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");
@@ -1653,6 +1653,24 @@ function formatAgentError(error) {
 }
 
 // src/react/lib/composer-form.ts
+var COMPOSER_FORM_SKIP_DISMISSAL = "I'd like to keep chatting without sharing the requested details for now. Please don't ask for them again unless I choose to proceed with something that needs them.";
+function visitorMessageDisplayText(message) {
+  if (message.role !== "visitor") return message.text;
+  const text2 = message.text.trim();
+  if (!text2) return message.text;
+  if (text2.startsWith(COMPOSER_FORM_SKIP_DISMISSAL)) {
+    const afterDismissal = text2.slice(COMPOSER_FORM_SKIP_DISMISSAL.length).trim().replace(/^\n+/, "").trim();
+    if (afterDismissal) return afterDismissal;
+  }
+  const runtime = message.runtimeText?.trim();
+  if (runtime && text2 === runtime && runtime.includes(COMPOSER_FORM_SKIP_DISMISSAL)) {
+    const afterDismissal = runtime.slice(
+      runtime.indexOf(COMPOSER_FORM_SKIP_DISMISSAL) + COMPOSER_FORM_SKIP_DISMISSAL.length
+    ).trim().replace(/^\n+/, "").trim();
+    if (afterDismissal) return afterDismissal;
+  }
+  return message.text;
+}
 var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var MIN_FORM_FIELDS = 2;
 var MAX_FORM_FIELDS = 5;
@@ -2906,7 +2924,8 @@ function createInitialState(greeting = DEFAULT_GREETING) {
     pendingOffer: null,
     pendingInputs: [],
     toolResults: [],
-    error: null
+    error: null,
+    declinedComposerFormIds: []
   };
 }
 function stateFromConversation(conversation, initialState) {
@@ -3326,6 +3345,7 @@ function useAgentChat({
       const trimmed = visitorText.trim();
       const outgoing = options?.runtimeText ?? visitorText;
       if (!outgoing.trim()) return null;
+      const declinedComposerFormId = options?.declinedComposerFormId?.trim();
       const chatResponse = chatInputResponseForText(
         state.pendingInputs ?? [],
         outgoing.trim()
@@ -3359,7 +3379,15 @@ function useAgentChat({
               state: "active"
             }
           ],
-          error: null
+          error: null,
+          ...declinedComposerFormId ? {
+            declinedComposerFormIds: [
+              .../* @__PURE__ */ new Set([
+                ...prev.declinedComposerFormIds ?? [],
+                declinedComposerFormId
+              ])
+            ]
+          } : {}
         }));
         return await runTurn({
           controller: controller2,
@@ -3381,9 +3409,9 @@ ${outgoing}` : outgoing;
       const visitorMessage = {
         id: `visitor-${Date.now()}`,
         role: "visitor",
-        text: visitorText,
+        text: trimmed,
         createdAt: Date.now(),
-        ...runtimeText !== visitorText ? { runtimeText } : {}
+        ...runtimeText.trim() !== trimmed ? { runtimeText } : {}
       };
       setState((prev) => ({
         ...prev,
@@ -3403,7 +3431,15 @@ ${outgoing}` : outgoing;
         pendingOffer: options?.preservePendingOffer ? prev.pendingOffer : null,
         pendingInputs: [],
         toolResults: [],
-        error: null
+        error: null,
+        ...declinedComposerFormId ? {
+          declinedComposerFormIds: [
+            .../* @__PURE__ */ new Set([
+              ...prev.declinedComposerFormIds ?? [],
+              declinedComposerFormId
+            ])
+          ]
+        } : {}
       }));
       return await runTurn({
         controller,
@@ -3766,8 +3802,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(
@@ -3876,7 +3911,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)(
@@ -4030,6 +4065,7 @@ function AnswerReceiptDialog({
 // src/react/components/Composer/Composer.tsx
 var import_react8 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var FORM_SUBMITTED_MESSAGE = "Shared my details";
 function SendIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "path",
@@ -4042,6 +4078,30 @@ function SendIcon() {
     }
   ) });
 }
+function CheckIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "path",
+    {
+      d: "M2.5 6.2l2.3 2.3 4.7-5",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function CollapseIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "path",
+    {
+      d: "M4 10l4-4 4 4",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 function emptyValues(form) {
   const values = {};
   for (const field of form?.fields ?? []) values[field.id] = "";
@@ -4075,26 +4135,31 @@ function Composer({
   const savedForm = allowFormResume && !draft.submitted ? draft.form : null;
   const activeForm = !disabled && draft.expanded ? savedForm : null;
   const hasDraft = Object.values(draft.values).some((value2) => value2.trim());
+  const canSend = !disabled && Boolean(value.trim() || activeForm);
   (0, import_react8.useEffect)(() => {
     if (activeForm) firstFieldRef.current?.focus();
     else if ((savedForm || draft.submitted) && !disabled)
       inputRef.current?.focus();
   }, [activeForm?.id, disabled, savedForm?.id, draft.submitted]);
+  function collapseForm() {
+    setDraft((current) => ({ ...current, expanded: false }));
+  }
   function submitChat() {
     const trimmed = value.trim();
     if (!trimmed || disabled) return;
     const shareDismissal = savedForm && !draft.dismissalSent;
     if (shareDismissal) {
       onSubmit?.(trimmed, {
-        runtimeText: `I'd like to keep chatting without sharing the requested details for now. Please don't ask for them again unless I choose to proceed with something that needs them.
-
-${trimmed}`
+        declinedComposerFormId: savedForm.id
       });
     } else {
       onSubmit?.(trimmed);
     }
-    if (shareDismissal)
-      setDraft((current) => ({ ...current, dismissalSent: true }));
+    setDraft((current) => ({
+      ...current,
+      expanded: false,
+      dismissalSent: shareDismissal ? true : current.dismissalSent
+    }));
     setValue("");
     inputRef.current?.focus();
   }
@@ -4109,7 +4174,7 @@ ${trimmed}`
       if (control instanceof HTMLElement) control.focus();
       return;
     }
-    onSubmit?.("", {
+    onSubmit?.(FORM_SUBMITTED_MESSAGE, {
       runtimeText: formatComposerFormMessage(activeForm, draft.values)
     });
     setDraft((current) => ({
@@ -4120,10 +4185,16 @@ ${trimmed}`
       attempted: false
     }));
   }
+  function handleSend() {
+    if (value.trim()) {
+      submitChat();
+      return;
+    }
+    if (activeForm) submitForm();
+  }
   function handleSubmit(event) {
     event.preventDefault();
-    if (activeForm) submitForm();
-    else submitChat();
+    handleSend();
   }
   function handleChatKeyDown(event) {
     if (event.key === "Enter" && !event.shiftKey) {
@@ -4139,7 +4210,34 @@ ${trimmed}`
       submitForm();
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const chatField = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "textarea",
+      {
+        ref: inputRef,
+        className: "composer__input",
+        rows: 1,
+        value,
+        placeholder,
+        disabled,
+        spellCheck: false,
+        "aria-label": "Message",
+        onChange: (event) => setValue(event.target.value),
+        onKeyDown: handleChatKeyDown
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "submit",
+        className: "composer__send",
+        disabled: !canSend,
+        "aria-label": "Send message",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SendIcon, {})
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "form",
     {
       ref: formRef,
@@ -4150,107 +4248,10 @@ ${trimmed}`
         activeForm ? "composer--form" : ""
       ].filter(Boolean).join(" "),
       onSubmit: handleSubmit,
-      children: activeForm ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        "div",
-        {
-          className: "composer__sheet",
-          role: "group",
-          "aria-label": "Contact details",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__form-heading", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Share your details" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Optional" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "You can also keep chatting." })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "composer__fields", children: activeForm.fields.map((field, index) => {
-              const fieldId = `${formId}-${field.id}`;
-              const invalid = draft.attempted && !isValidComposerFieldValue(field, draft.values[field.id] ?? "");
-              const controlProps = {
-                id: fieldId,
-                name: field.id,
-                disabled,
-                required: field.required,
-                autoComplete: field.autocomplete,
-                placeholder: field.placeholder,
-                spellCheck: false,
-                value: draft.values[field.id] ?? "",
-                "aria-invalid": invalid || void 0,
-                "aria-describedby": invalid ? `${fieldId}-error` : void 0,
-                onChange: (event) => {
-                  const next = readComposerControlValue(event);
-                  setDraft((current) => ({
-                    ...current,
-                    values: { ...current.values, [field.id]: next }
-                  }));
-                },
-                onKeyDown: handleFormKeyDown
-              };
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                "div",
-                {
-                  className: [
-                    "composer__row",
-                    field.kind === "textarea" ? "composer__row--grow" : ""
-                  ].filter(Boolean).join(" "),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "composer__label", htmlFor: fieldId, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "composer__field-label", children: field.label }),
-                      field.kind === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "textarea",
-                        {
-                          ...controlProps,
-                          ref: index === 0 ? (node) => {
-                            firstFieldRef.current = node;
-                          } : void 0,
-                          className: "composer__control composer__control--area",
-                          rows: 3
-                        }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "input",
-                        {
-                          ...controlProps,
-                          ref: index === 0 ? (node) => {
-                            firstFieldRef.current = node;
-                          } : void 0,
-                          className: "composer__control",
-                          type: field.kind,
-                          inputMode: field.kind === "tel" ? "tel" : void 0
-                        }
-                      )
-                    ] }),
-                    invalid ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "composer__error", id: `${fieldId}-error`, children: field.kind === "email" ? "Enter a valid email to share your details." : `Add your ${field.label.toLowerCase()} to share your details.` }) : null
-                  ]
-                },
-                field.id
-              );
-            }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__toolbar", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "button",
-                {
-                  type: "submit",
-                  className: "composer__action composer__action--primary",
-                  disabled,
-                  children: "Share details"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "composer__action",
-                  disabled,
-                  onClick: () => setDraft((current) => ({ ...current, expanded: false })),
-                  children: "Keep chatting"
-                }
-              )
-            ] })
-          ]
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      children: [
         savedForm ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__resume", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: hasDraft ? "Your details aren\u2019t shared yet" : "Contact details are optional" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: hasDraft ? "Your details aren\u2019t shared yet" : "Share your details so we can follow up" }),
+          !activeForm ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               type: "button",
@@ -4258,36 +4259,100 @@ ${trimmed}`
               onClick: () => setDraft((current) => ({ ...current, expanded: true })),
               children: hasDraft ? "Resume details" : "Add details"
             }
-          )
+          ) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "textarea",
-            {
-              ref: inputRef,
-              className: "composer__input",
-              rows: 1,
-              value,
-              placeholder,
-              disabled,
-              spellCheck: false,
-              "aria-label": "Message",
-              onChange: (event) => setValue(event.target.value),
-              onKeyDown: handleChatKeyDown
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
-            {
-              type: "submit",
-              className: "composer__send",
-              disabled: disabled || !value.trim(),
-              "aria-label": "Send message",
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SendIcon, {})
-            }
-          )
-        ] })
-      ] })
+        activeForm ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: "composer__sheet",
+            role: "group",
+            "aria-label": "Contact details",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__form-heading", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Share your details" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Optional" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "composer__collapse",
+                    "aria-label": "Collapse form",
+                    disabled,
+                    onClick: collapseForm,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CollapseIcon, {})
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "composer__fields", children: activeForm.fields.map((field, index) => {
+                const fieldId = `${formId}-${field.id}`;
+                const fieldValue = draft.values[field.id] ?? "";
+                const invalid = draft.attempted && !isValidComposerFieldValue(field, fieldValue);
+                const complete = fieldValue.trim().length > 0 && isValidComposerFieldValue(field, fieldValue);
+                const controlProps = {
+                  id: fieldId,
+                  name: field.id,
+                  disabled,
+                  required: field.required,
+                  autoComplete: field.autocomplete,
+                  placeholder: field.placeholder,
+                  spellCheck: false,
+                  value: fieldValue,
+                  "aria-invalid": invalid || void 0,
+                  "aria-describedby": invalid ? `${fieldId}-error` : void 0,
+                  onChange: (event) => {
+                    const next = readComposerControlValue(event);
+                    setDraft((current) => ({
+                      ...current,
+                      values: { ...current.values, [field.id]: next }
+                    }));
+                  },
+                  onKeyDown: handleFormKeyDown
+                };
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: [
+                      "composer__row",
+                      field.kind === "textarea" ? "composer__row--area" : ""
+                    ].filter(Boolean).join(" "),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__line", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "composer__label", htmlFor: fieldId, children: field.label }),
+                        field.kind === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "textarea",
+                          {
+                            ...controlProps,
+                            ref: index === 0 ? (node) => {
+                              firstFieldRef.current = node;
+                            } : void 0,
+                            className: "composer__control composer__control--area",
+                            rows: 2
+                          }
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "input",
+                          {
+                            ...controlProps,
+                            ref: index === 0 ? (node) => {
+                              firstFieldRef.current = node;
+                            } : void 0,
+                            className: "composer__control",
+                            type: field.kind,
+                            inputMode: field.kind === "tel" ? "tel" : void 0
+                          }
+                        ),
+                        complete && field.kind !== "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "composer__check", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) }) : null
+                      ] }),
+                      invalid ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "composer__error", id: `${fieldId}-error`, children: field.kind === "email" ? "Enter a valid email to share your details." : `Add your ${field.label.toLowerCase()} to share your details.` }) : null
+                    ]
+                  },
+                  field.id
+                );
+              }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "composer__field composer__field--inset", children: chatField })
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "composer__field", children: chatField })
+      ]
     }
   );
 }
@@ -4872,8 +4937,9 @@ function MessageBubble({
     offers.length > 0 ? sanitizeBookingOfferCopy(visibleText) : looksLikeBookingAvailabilityDump(visibleText) ? sanitizeBookingOfferCopy(visibleText) : visibleText || (isStreaming ? "" : message.text)
   );
   if (message.role === "visitor") {
-    if (!message.text.trim()) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("article", { className: "message-bubble message-bubble--visitor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "message-bubble__text", children: message.text }) });
+    const visitorText = visitorMessageDisplayText(message).trim();
+    if (!visitorText) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("article", { className: "message-bubble message-bubble--visitor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "message-bubble__text", children: visitorText }) });
   }
   const citations = message.citations ?? [];
   const agentText = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "message-bubble__text", children: [
@@ -5111,7 +5177,7 @@ function CopyIcon() {
     )
   ] });
 }
-function CheckIcon() {
+function CheckIcon2() {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "path",
     {
@@ -5486,7 +5552,7 @@ function MessageActions({
         title: copied ? "Copied" : "Copy answer",
         disabled,
         onClick: handleCopy,
-        children: copied ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyIcon, {})
+        children: copied ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyIcon, {})
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -6440,13 +6506,17 @@ function AgentRail({
   const hasPendingConfirmation = pendingInputRequests.some(
     (request) => request.kind === "tool-approval" || request.kind === "question" && (request.options?.length ?? 0) > 0
   );
-  const composerForm = resolveComposerForm({
+  const inferredComposerForm = resolveComposerForm({
     agentText: lastAgentText,
     cards: extractToolCards(lastAgentText),
     hasBookingOffer: Boolean(state.pendingOffer) || waitingForBooking,
     hasPendingConfirmation,
     enabled: lastIsAgent && !isBusy
   });
+  const declinedComposerFormIds = state.declinedComposerFormIds ?? [];
+  const composerForm = inferredComposerForm && lastMessage?.role === "agent" && declinedComposerFormIds.includes(
+    `${lastMessage.id}:${inferredComposerForm.id}`
+  ) ? null : inferredComposerForm;
   const latestResultId = [
     ...visibleMessages.flatMap(
       (message) => message.role === "agent" ? message.toolResults ?? [] : []
@@ -6816,55 +6886,114 @@ function AgentRail({
 }
 
 // src/react/components/AssistEdgeTab/AssistEdgeTab.tsx
+var import_react15 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function SparklesIcon() {
+function ChatSparkIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "svg",
     {
-      className: "assist-edge-tab__sparkles",
-      viewBox: "0 0 18 16",
+      className: "assist-edge-tab__chat-spark",
+      viewBox: "0 0 24 24",
       fill: "none",
       "aria-hidden": "true",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "path",
           {
-            d: "M8 1.2l.95 2.7 2.85.05-2.25 1.75.8 2.75L8 6.7 5.65 8.45l.8-2.75L4.2 3.95l2.85-.05L8 1.2z",
+            className: "assist-edge-tab__spark assist-edge-tab__spark--a",
+            d: "M19.55 1.55l.78 1.82 1.82.78-1.82.78-.78 1.82-.78-1.82-1.82-.78 1.82-.78.78-1.82z",
             fill: "currentColor"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "path",
           {
-            d: "M14.2 6.4l.55 1.55 1.65.03-1.3 1 .46 1.58-1.36-1-1.36 1 .46-1.58-1.3-1 1.65-.03.55-1.55z",
+            className: "assist-edge-tab__spark assist-edge-tab__spark--b",
+            d: "M4.15 17.35l.48 1.12 1.12.48-1.12.48-.48 1.12-.48-1.12-1.12-.48 1.12-.48.48-1.12z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          "path",
-          {
-            d: "M3.1 9.1l.4 1.15 1.22.02-.96.74.34 1.17-1-.74-1 .74.34-1.17-.96-.74 1.22-.02.4-1.15z",
-            fill: "currentColor"
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("g", { className: "assist-edge-tab__bot", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "path",
+            {
+              d: "M11.15 5.2V3.05",
+              stroke: "currentColor",
+              strokeWidth: "1.9",
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "11.15", cy: "2.45", r: "0.85", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "rect",
+            {
+              x: "3.55",
+              y: "5.35",
+              width: "15.2",
+              height: "11.15",
+              rx: "3.9",
+              stroke: "currentColor",
+              strokeWidth: "1.9"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "circle",
+            {
+              className: "assist-edge-tab__eye",
+              cx: "8.7",
+              cy: "10.85",
+              r: "1.28",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "circle",
+            {
+              className: "assist-edge-tab__eye assist-edge-tab__eye--r",
+              cx: "14.35",
+              cy: "10.85",
+              r: "1.28",
+              fill: "currentColor"
+            }
+          )
+        ] })
       ]
     }
   );
 }
-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)
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SparklesIcon, {});
+  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)
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatSparkIcon, {});
 }
 function ChevronLeftIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -6905,6 +7034,7 @@ function AssistEdgeTab({
   inset,
   visible,
   label,
+  subLabel,
   customIconUrl,
   logoUrl,
   brandColor,
@@ -6920,12 +7050,16 @@ function AssistEdgeTab({
   const resolvedColorScheme = useAgentColorScheme(colorScheme);
   const copy = VARIANT_COPY[variant];
   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`,
@@ -6933,83 +7067,72 @@ 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": `Open ${visibleLabel}`,
+      "aria-label": ariaLabel,
       "aria-hidden": !visible,
       tabIndex: visible ? 0 : -1,
       onClick: onOpen,
       children: [
-        mobile ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        pill ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "span",
             {
-              className: "assist-edge-tab__mark assist-edge-tab__mark--mobile",
+              className: `assist-edge-tab__mark assist-edge-tab__mark--chip${mobile ? " assist-edge-tab__mark--mobile" : ""}`,
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabMarkIcon, { customIconUrl }),
-                showLogo ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  "img",
+                /* @__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,
                   {
-                    className: "assist-edge-tab__logo",
-                    src: logoUrl,
-                    alt: "",
-                    onError: (event) => {
-                      event.currentTarget.hidden = true;
-                    }
-                  }
-                ) : null
+                    customIconUrl,
+                    logoUrl
+                  },
+                  markSourceKey
+                )
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "assist-edge-tab__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
+            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,
-        variant === "ask" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        !pill && variant === "ask" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChevronLeftIcon, {}),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DragDots, {})
         ] }) : null,
-        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
-          ] }),
+        !pill && variant === "fill" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          /* @__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
@@ -7094,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,
@@ -7149,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),
@@ -7184,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)) {
@@ -7276,6 +7399,7 @@ function AgentWidget({
         inset: placement.inset,
         visible: true,
         label: tabLabel,
+        subLabel: branding?.tabSubLabel,
         customIconUrl: branding?.tabIconUrl,
         logoUrl: branding?.logoUrl,
         brandColor: branding?.colors?.primary,
@@ -7293,7 +7417,7 @@ function AgentWidget({
 }
 
 // src/react/components/AgentTranscript/AgentTranscript.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/react/components/AgentTranscript/TranscriptActivity.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -7414,7 +7538,7 @@ function AgentTranscript({
         const previous = entries[index - 1];
         const validTimestamp = Number.isFinite(date.getTime());
         const showTimestamp = validTimestamp && (previous ? entry.createdAt - previous.createdAt >= 5 * 60 * 1e3 || date.toISOString().slice(0, 10) !== new Date(previous.createdAt).toJSON()?.slice(0, 10) : showInitialTimestamp);
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react16.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react17.Fragment, { children: [
           showTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { className: "agent-transcript__time-marker", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("time", { dateTime: date.toISOString(), children: formatTimestamp(entry.createdAt) }) }) : null,
           entry.kind === "activity" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TranscriptActivity, { activity: entry }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "li",