@webless/agent 0.13.0 → 0.13.1

package/dist/embed.cjs

@@ -64,7 +64,7 @@ function submitAgentPanel(customerId, message, options) {
 }
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/react/page-shift.ts
 var import_react = require("react");
@@ -4221,7 +4221,7 @@ function normalizeAgentPlacement(placement) {
 }
 
 // src/react/components/AgentRail/AgentRail.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/react/types/conversation.ts
 var defaultAgentRailTheme = {
@@ -4506,44 +4506,108 @@ function AgentActivityBubble({
 // src/react/components/LearnMore/LearnMore.tsx
 var import_react7 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function QuestionIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "18",
+      height: "18",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 17h.01" })
+      ]
+    }
+  );
+}
 function LearnMore({
   results,
   disabled,
   onSelect
 }) {
   const headingId = (0, import_react7.useId)();
+  const panelId = (0, import_react7.useId)();
+  const [open, setOpen] = (0, import_react7.useState)(true);
   const questions = [
     ...new Set(results.flatMap((result) => result.suggestions ?? []))
   ].slice(0, 3);
   if (!questions.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: "learn-more", "aria-labelledby": headingId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { id: headingId, className: "learn-more__heading", children: "Learn more" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "learn-more__questions", children: questions.map((question) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { id: headingId, className: "learn-more__heading", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "button",
       {
         type: "button",
-        disabled,
-        onClick: () => onSelect(question),
+        className: "learn-more__toggle",
+        "aria-expanded": open,
+        "aria-controls": panelId,
+        onClick: () => setOpen((current) => !current),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: question }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Learn more" }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "svg",
             {
-              viewBox: "0 0 24 24",
+              className: "learn-more__chevron",
+              viewBox: "0 0 16 16",
               fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "1.5",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 12h16m-7-7 7 7-7 7" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "path",
+                {
+                  d: "M4 6.5l4 4 4-4",
+                  stroke: "currentColor",
+                  strokeWidth: "1.6",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
             }
           )
         ]
       }
-    ) }, question)) })
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        id: panelId,
+        className: `learn-more__panel${open ? " learn-more__panel--open" : ""}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "learn-more__panel-inner", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "learn-more__questions", children: questions.map((question) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => onSelect(question),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "learn-more__question-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(QuestionIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "learn-more__question-text", children: question }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "svg",
+                {
+                  className: "learn-more__question-arrow",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 12h16m-7-7 7 7-7 7" })
+                }
+              )
+            ]
+          }
+        ) }, question)) }) })
+      }
+    )
   ] });
 }
 
 // src/react/components/SearchReferences/SearchReferences.tsx
+var import_react8 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function SiteIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -4564,6 +4628,27 @@ function SiteIcon() {
     }
   );
 }
+function SourceFavicon({ url }) {
+  const [failed, setFailed] = (0, import_react8.useState)(false);
+  let faviconUrl = null;
+  if (url) {
+    try {
+      faviconUrl = `${new URL(url).origin}/favicon.ico`;
+    } catch {
+      faviconUrl = null;
+    }
+  }
+  if (!faviconUrl || failed) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SiteIcon, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "img",
+    {
+      src: faviconUrl,
+      alt: "",
+      loading: "lazy",
+      onError: () => setFailed(true)
+    }
+  );
+}
 function searchSources(results) {
   const seenSources = /* @__PURE__ */ new Set();
   return results.flatMap((result) => result.sources).flatMap((source) => {
@@ -4603,28 +4688,25 @@ function SearchReferences({
           ] }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "search-references__list", children: sources.map((source) => {
             const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "search-references__icon", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SiteIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "search-references__copy", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "span",
-                  {
-                    className: "search-references__title",
-                    title: source.title,
-                    children: source.title
-                  }
-                ),
-                source.url ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "search-references__domain", children: new URL(source.url).hostname.replace(/^www\./u, "") }) : null
-              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "search-references__icon", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SourceFavicon, { url: source.url }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  className: "search-references__title",
+                  title: source.title,
+                  children: source.title
+                }
+              ),
               source.url ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "svg",
                 {
-                  className: "search-references__external",
+                  className: "search-references__row-arrow",
                   viewBox: "0 0 24 24",
                   fill: "none",
                   stroke: "currentColor",
                   strokeWidth: "1.5",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 17 17 7M7 7h10v10" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 12h16m-7-7 7 7-7 7" })
                 }
               ) : null
             ] });
@@ -4657,17 +4739,17 @@ function SearchReferences({
 }
 
 // src/react/components/AnswerReceiptDialog/AnswerReceiptDialog.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/react/components/AgentRail/AgentRailOverlayContext.tsx
-var import_react8 = require("react");
-var AgentRailOverlayContext = (0, import_react8.createContext)(null);
+var import_react9 = require("react");
+var AgentRailOverlayContext = (0, import_react9.createContext)(null);
 function useAgentRailPortalRoots() {
-  return (0, import_react8.useContext)(AgentRailOverlayContext);
+  return (0, import_react9.useContext)(AgentRailOverlayContext);
 }
 function useAgentRailMenuPortalRoot() {
-  return (0, import_react8.useContext)(AgentRailOverlayContext)?.railRef ?? null;
+  return (0, import_react9.useContext)(AgentRailOverlayContext)?.railRef ?? null;
 }
 
 // src/react/components/AnswerReceiptDialog/AnswerReceiptDialog.tsx
@@ -4692,13 +4774,13 @@ function AnswerReceiptDialog({
   summary,
   children
 }) {
-  const titleId = (0, import_react9.useId)();
+  const titleId = (0, import_react10.useId)();
   const portalRoots = useAgentRailPortalRoots();
   const overlayRoot = portalRoots?.overlayRef ?? null;
-  const cardRef = (0, import_react9.useRef)(null);
-  const closeButtonRef = (0, import_react9.useRef)(null);
-  const previouslyFocusedRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const cardRef = (0, import_react10.useRef)(null);
+  const closeButtonRef = (0, import_react10.useRef)(null);
+  const previouslyFocusedRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     previouslyFocusedRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     closeButtonRef.current?.focus({ preventScroll: true });
     const handleKeyDown = (event) => {
@@ -4774,7 +4856,7 @@ function AnswerReceiptDialog({
 }
 
 // src/react/components/Composer/Composer.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var FORM_SUBMITTED_MESSAGE = "Shared my details";
 function SendIcon() {
@@ -4836,21 +4918,35 @@ function Composer({
   allowFormResume = true,
   onSubmit
 }) {
-  const [value, setValue] = (0, import_react10.useState)("");
-  const [draft, setDraft] = (0, import_react10.useState)(() => createDraft(form));
-  const inputRef = (0, import_react10.useRef)(null);
-  const firstFieldRef = (0, import_react10.useRef)(null);
-  const formRef = (0, import_react10.useRef)(null);
-  const formId = (0, import_react10.useId)();
+  const [value, setValue] = (0, import_react11.useState)("");
+  const [draft, setDraft] = (0, import_react11.useState)(() => createDraft(form));
+  const [multiline, setMultiline] = (0, import_react11.useState)(false);
+  const inputRef = (0, import_react11.useRef)(null);
+  const firstFieldRef = (0, import_react11.useRef)(null);
+  const formRef = (0, import_react11.useRef)(null);
+  const formId = (0, import_react11.useId)();
   if (form && form.id !== draft.form?.id) setDraft(createDraft(form));
   const savedForm = allowFormResume && !draft.submitted ? draft.form : null;
   const activeForm = !disabled && draft.expanded ? savedForm : null;
   const canSend = !disabled && Boolean(value.trim() || activeForm);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (activeForm) firstFieldRef.current?.focus();
     else if ((savedForm || draft.submitted) && !disabled)
       inputRef.current?.focus();
   }, [activeForm?.id, disabled, savedForm?.id, draft.submitted]);
+  (0, import_react11.useEffect)(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const check = () => {
+      const style = window.getComputedStyle(input);
+      const singleLine = (parseFloat(style.lineHeight) || 20) + parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + 2;
+      setMultiline(input.offsetHeight > singleLine);
+    };
+    check();
+    const observer = new ResizeObserver(check);
+    observer.observe(input);
+    return () => observer.disconnect();
+  }, []);
   function collapseForm() {
     setDraft((current) => ({ ...current, expanded: false }));
   }
@@ -4955,7 +5051,8 @@ function Composer({
       className: [
         "composer",
         variant === "dock" ? "composer--dock" : "",
-        activeForm ? "composer--form" : ""
+        activeForm ? "composer--form" : "",
+        multiline ? "composer--multiline" : ""
       ].filter(Boolean).join(" "),
       onSubmit: handleSubmit,
       children: [
@@ -5107,10 +5204,10 @@ function FollowUpChips({
 }
 
 // src/react/components/MessageBubble/MessageBubble.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/react/components/BookingCard/BookingCard.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var BOOKING_STEPS = [
   { id: "date", label: "Date" },
@@ -5165,27 +5262,27 @@ function InteractiveBookingCard({
   offer,
   onBook
 }) {
-  const fieldId = (0, import_react11.useId)();
+  const fieldId = (0, import_react12.useId)();
   const defaultType = offer.eventTypes[0]?.uri ?? offer.slots[0]?.eventTypeUri ?? "";
-  const [step, setStep] = (0, import_react11.useState)("date");
-  const [eventTypeUri, setEventTypeUri] = (0, import_react11.useState)(defaultType);
-  const [selectedDate, setSelectedDate] = (0, import_react11.useState)("");
-  const [startTime, setStartTime] = (0, import_react11.useState)("");
-  const [name, setName] = (0, import_react11.useState)("");
-  const [email, setEmail] = (0, import_react11.useState)("");
-  const activeStepRef = (0, import_react11.useRef)(null);
-  const previousStepRef = (0, import_react11.useRef)(step);
+  const [step, setStep] = (0, import_react12.useState)("date");
+  const [eventTypeUri, setEventTypeUri] = (0, import_react12.useState)(defaultType);
+  const [selectedDate, setSelectedDate] = (0, import_react12.useState)("");
+  const [startTime, setStartTime] = (0, import_react12.useState)("");
+  const [name, setName] = (0, import_react12.useState)("");
+  const [email, setEmail] = (0, import_react12.useState)("");
+  const activeStepRef = (0, import_react12.useRef)(null);
+  const previousStepRef = (0, import_react12.useRef)(step);
   const stepIndex = BOOKING_STEPS.findIndex((item) => item.id === step);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (previousStepRef.current === step) return;
     previousStepRef.current = step;
     activeStepRef.current?.scrollIntoView({ block: "nearest" });
   }, [step]);
-  const slots = (0, import_react11.useMemo)(
+  const slots = (0, import_react12.useMemo)(
     () => bookingSlotsForEventType(offer.slots, eventTypeUri),
     [eventTypeUri, offer.slots]
   );
-  const availableByDate = (0, import_react11.useMemo)(() => {
+  const availableByDate = (0, import_react12.useMemo)(() => {
     const next = /* @__PURE__ */ new Map();
     for (const slot of slots) {
       const key = slotDateKey(slot.startTime);
@@ -5193,7 +5290,7 @@ function InteractiveBookingCard({
     }
     return next;
   }, [slots]);
-  const [visibleMonth, setVisibleMonth] = (0, import_react11.useState)(
+  const [visibleMonth, setVisibleMonth] = (0, import_react12.useState)(
     () => firstAvailableBookingMonth(slots)
   );
   function selectEventType(nextType) {
@@ -5206,7 +5303,7 @@ function InteractiveBookingCard({
       )
     );
   }
-  const daySlots = (0, import_react11.useMemo)(
+  const daySlots = (0, import_react12.useMemo)(
     () => slots.filter((slot) => slotDateKey(slot.startTime) === selectedDate),
     [selectedDate, slots]
   );
@@ -5215,7 +5312,7 @@ function InteractiveBookingCard({
   );
   const selectedSample = availableByDate.get(selectedDate) ?? startTime;
   const timeZone = formatSlotTimeZone(slots[0]?.startTime ?? selectedSample);
-  const weekdays = (0, import_react11.useMemo)(() => weekdayLabels(), []);
+  const weekdays = (0, import_react12.useMemo)(() => weekdayLabels(), []);
   const cells = calendarCells(visibleMonth.year, visibleMonth.month);
   const canPrevMonth = [...availableByDate.keys()].some((key) => {
     const month = monthFromKey(key);
@@ -5486,6 +5583,37 @@ function InteractiveBookingCard({
 // src/react/components/MessageBubble/MessageBubble.tsx
 var import_streamdown = require("streamdown");
 
+// src/react/lib/brand-logo-display.ts
+var BRAND_LOGO_LAYOUT = {
+  header: { maxHeight: 20, maxWidth: 96, square: 24 },
+  message: { maxHeight: 18, maxWidth: 80, square: 22 },
+  /** Bottom/mobile launcher pill orb — keep in sync with AssistEdgeTab chip CSS. */
+  launcher: { maxHeight: 24, maxWidth: 104, square: 38 }
+};
+function isWideBrandLogo(naturalWidth, naturalHeight) {
+  return naturalWidth > naturalHeight * 1.4;
+}
+function snapBrandLogoDisplaySize(input) {
+  const { maxHeight, maxWidth } = BRAND_LOGO_LAYOUT[input.surface];
+  const { naturalWidth, naturalHeight } = input;
+  if (naturalWidth <= 0 || naturalHeight <= 0) {
+    return { width: maxWidth, height: maxHeight, wide: false };
+  }
+  const wide = isWideBrandLogo(naturalWidth, naturalHeight);
+  if (!wide) {
+    const size = BRAND_LOGO_LAYOUT[input.surface].square;
+    return { width: size, height: size, wide: false };
+  }
+  const scale = Math.min(
+    maxHeight / naturalHeight,
+    maxWidth / naturalWidth,
+    1
+  );
+  const height = Math.max(1, Math.round(naturalHeight * scale));
+  const width = Math.max(1, Math.round(naturalWidth * scale));
+  return { width, height, wide: true };
+}
+
 // src/react/lib/resolve-message-url.ts
 function resolveMessageUrl(safeUrl, baseUrl) {
   if (!safeUrl || !baseUrl) return safeUrl;
@@ -5548,7 +5676,14 @@ function MessageBubble({
   onBook
 }) {
   const resolvedLogoUrl = brandLogoUrl?.trim();
-  const [failedLogoUrl, setFailedLogoUrl] = (0, import_react12.useState)(null);
+  const [failedLogoUrl, setFailedLogoUrl] = (0, import_react13.useState)(null);
+  const [logoDisplay, setLogoDisplay] = (0, import_react13.useState)(null);
+  (0, import_react13.useEffect)(() => {
+    setFailedLogoUrl(null);
+  }, [resolvedLogoUrl]);
+  const activeLogoDisplay = logoDisplay?.url === resolvedLogoUrl ? logoDisplay : null;
+  const wideLogo = activeLogoDisplay?.wide ?? false;
+  const logoDisplaySize = activeLogoDisplay ? { height: activeLogoDisplay.height, width: activeLogoDisplay.width } : null;
   const showBrandLogo = Boolean(resolvedLogoUrl) && failedLogoUrl !== resolvedLogoUrl;
   const cards = message.role === "agent" ? extractToolCards(message.text) : [];
   const extractedOffers = cards.filter(
@@ -5569,7 +5704,7 @@ function MessageBubble({
         className: "message-bubble message-bubble--visitor",
         "aria-label": "Message from visitor",
         children: [
-          showProvenance ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "message-bubble__speaker", children: "You \xB7 Visitor" }) : null,
+          showProvenance ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "message-bubble__speaker", children: "You" }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "message-bubble__text", children: visitorText })
         ]
       }
@@ -5633,20 +5768,51 @@ function MessageBubble({
       className: "message-bubble message-bubble--agent",
       "aria-label": "Message from AI assistant",
       children: [
-        showProvenance ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "message-bubble__speaker", children: "AI assistant" }) : null,
-        displayText || message.searchResults?.length ? showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "message-bubble__agent-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "message-bubble__agent-avatar", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "img",
-            {
-              src: resolvedLogoUrl,
-              alt: "",
-              onError: () => {
-                setFailedLogoUrl(resolvedLogoUrl ?? null);
+        displayText || message.searchResults?.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "message-bubble__agent-stack", children: [
+          showProvenance || showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "message-bubble__agent-header", children: [
+            showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "span",
+              {
+                className: `message-bubble__agent-avatar${wideLogo ? " message-bubble__agent-avatar--wide" : ""}`,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "img",
+                  {
+                    className: "as-brand-logo-img",
+                    src: resolvedLogoUrl,
+                    alt: "",
+                    decoding: "async",
+                    ...logoDisplaySize ? {
+                      height: logoDisplaySize.height,
+                      width: logoDisplaySize.width
+                    } : {},
+                    onLoad: (event) => {
+                      const img = event.currentTarget;
+                      const display = snapBrandLogoDisplaySize({
+                        naturalHeight: img.naturalHeight,
+                        naturalWidth: img.naturalWidth,
+                        surface: "message"
+                      });
+                      if (!resolvedLogoUrl) return;
+                      setLogoDisplay({
+                        height: display.height,
+                        url: resolvedLogoUrl,
+                        wide: display.wide,
+                        width: display.width
+                      });
+                    },
+                    onError: () => {
+                      setFailedLogoUrl(resolvedLogoUrl ?? null);
+                    }
+                  },
+                  resolvedLogoUrl
+                )
               }
-            }
-          ) }),
+            ) : null,
+            showProvenance ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "message-bubble__speaker", children: "AI assistant" }) : null
+          ] }) : null,
           agentText
-        ] }) : agentText : null,
+        ] }) : null,
         offers.map((nextOffer, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           BookingCard,
           {
@@ -5663,7 +5829,7 @@ function MessageBubble({
 }
 
 // src/react/components/MessageActions/MessageActions.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/react/lib/speech.ts
@@ -6059,26 +6225,26 @@ function MessageActions({
   speechText
 }) {
   const menuPortalRoot = useAgentRailMenuPortalRoot();
-  const [copied, setCopied] = (0, import_react13.useState)(false);
-  const [rating, setRating] = (0, import_react13.useState)(null);
-  const [menuOpen, setMenuOpen] = (0, import_react13.useState)(false);
-  const [menuPosition, setMenuPosition] = (0, import_react13.useState)(null);
-  const [speaking, setSpeaking] = (0, import_react13.useState)(false);
-  const [speechSupported, setSpeechSupported] = (0, import_react13.useState)(null);
-  const copyTimerRef = (0, import_react13.useRef)(null);
-  const menuRef = (0, import_react13.useRef)(null);
-  const portaledMenuRef = (0, import_react13.useRef)(null);
-  const moreButtonRef = (0, import_react13.useRef)(null);
+  const [copied, setCopied] = (0, import_react14.useState)(false);
+  const [rating, setRating] = (0, import_react14.useState)(null);
+  const [menuOpen, setMenuOpen] = (0, import_react14.useState)(false);
+  const [menuPosition, setMenuPosition] = (0, import_react14.useState)(null);
+  const [speaking, setSpeaking] = (0, import_react14.useState)(false);
+  const [speechSupported, setSpeechSupported] = (0, import_react14.useState)(null);
+  const copyTimerRef = (0, import_react14.useRef)(null);
+  const menuRef = (0, import_react14.useRef)(null);
+  const portaledMenuRef = (0, import_react14.useRef)(null);
+  const moreButtonRef = (0, import_react14.useRef)(null);
   const answeredLabel = formatAnsweredAt(answeredAt ?? 0);
   const resolvedSpeechText = speechText ?? toSpeechText(copyText);
   const canOpenReceipt = Boolean(receiptSteps) && Boolean(onOpenReceipt);
   const readAloudEligible = Boolean(readAloud && resolvedSpeechText);
   const canReadAloud = readAloudEligible && speechSupported === true;
   const showMenu = canOpenReceipt || (speechSupported === null ? readAloudEligible : canReadAloud);
-  (0, import_react13.useLayoutEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     setSpeechSupported(isSpeechSupported());
   }, []);
-  (0, import_react13.useLayoutEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     if (!menuOpen || !moreButtonRef.current || !portaledMenuRef.current) {
       setMenuPosition(null);
       return;
@@ -6095,7 +6261,7 @@ function MessageActions({
       })
     );
   }, [menuOpen, menuPortalRoot]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const unsubscribe = subscribeSpeechInterrupts(() => setSpeaking(false));
     return () => {
       unsubscribe();
@@ -6105,7 +6271,7 @@ function MessageActions({
       stopSpeech();
     };
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!menuOpen) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -6274,7 +6440,7 @@ function MessageActions({
 }
 
 // src/react/components/HumanInputCard/HumanInputCard.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/react/components/ConfirmationCard/ConfirmationCard.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -6316,7 +6482,7 @@ function ConfirmationCard({
 }
 
 // src/react/components/ToolInputCard/ToolInputCard.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function isRecord5(value) {
   return value !== null && typeof value === "object" && !Array.isArray(value);
@@ -6647,11 +6813,11 @@ function ToolInputCard({
   surface,
   onSubmit
 }) {
-  const [values, setValues] = (0, import_react14.useState)(
+  const [values, setValues] = (0, import_react15.useState)(
     () => initialValues(surface)
   );
-  const [touched, setTouched] = (0, import_react14.useState)(() => /* @__PURE__ */ new Set());
-  const [submitted, setSubmitted] = (0, import_react14.useState)(false);
+  const [touched, setTouched] = (0, import_react15.useState)(() => /* @__PURE__ */ new Set());
+  const [submitted, setSubmitted] = (0, import_react15.useState)(false);
   const errors = Object.fromEntries(
     surface.fields.map((field) => [
       field.path,
@@ -6744,7 +6910,7 @@ function HumanInputCard({
   request,
   onRespond
 }) {
-  const [text3, setText] = (0, import_react15.useState)("");
+  const [text3, setText] = (0, import_react16.useState)("");
   const options = request.options ?? [];
   const showText = request.display === "text" || request.allowFreeform && options.length === 0;
   if (request.ui) {
@@ -6802,7 +6968,7 @@ function HumanInputCard({
 }
 
 // src/react/components/LocationConsent/LocationConsent.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/runtime/location-consent.ts
 function isLocationConsentRequest(request) {
@@ -6850,16 +7016,16 @@ function LocationConsent({
   request,
   onRespond
 }) {
-  const [preference, setPreference] = (0, import_react16.useState)("unset");
-  const [locating, setLocating] = (0, import_react16.useState)(false);
-  const [error, setError] = (0, import_react16.useState)(null);
-  const respond = (0, import_react16.useRef)(onRespond);
-  const answered = (0, import_react16.useRef)(null);
+  const [preference, setPreference] = (0, import_react17.useState)("unset");
+  const [locating, setLocating] = (0, import_react17.useState)(false);
+  const [error, setError] = (0, import_react17.useState)(null);
+  const respond = (0, import_react17.useRef)(onRespond);
+  const answered = (0, import_react17.useRef)(null);
   const requestId = request?.requestId;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     respond.current = onRespond;
   }, [onRespond]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!requestId || preference === "unset" || answered.current === requestId || !respond.current)
       return;
     if (preference === "off") {
@@ -7151,16 +7317,28 @@ function CloseIcon2() {
   ) });
 }
 function NewChatIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    "path",
-    {
-      d: "M9.5 3.5h3v3M12.25 3.75 8 8M7 4H4.5A1.5 1.5 0 0 0 3 5.5v6A1.5 1.5 0 0 0 4.5 13h6a1.5 1.5 0 0 0 1.5-1.5V9",
-      stroke: "currentColor",
-      strokeWidth: "1.4",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "path",
+      {
+        d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.86L21 8",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "path",
+      {
+        d: "M21 3v5h-5",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
 }
 function ExpandIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -7229,22 +7407,32 @@ function AgentRail({
   onInputResponse,
   onToolInput
 }) {
-  const railRef = (0, import_react17.useRef)(null);
-  const overlayRef = (0, import_react17.useRef)(null);
-  const transcriptRef = (0, import_react17.useRef)(null);
-  const responseRef = (0, import_react17.useRef)(null);
-  const threadRef = (0, import_react17.useRef)(null);
-  const lastScrolledVisitorIdRef = (0, import_react17.useRef)(void 0);
-  const pinnedToBottomRef = (0, import_react17.useRef)(true);
-  const smoothScrollToLatestRef = (0, import_react17.useRef)(false);
-  const lockedTranscriptScrollTopRef = (0, import_react17.useRef)(null);
-  const [showJumpToLatest, setShowJumpToLatest] = (0, import_react17.useState)(false);
-  const [receiptOpen, setReceiptOpen] = (0, import_react17.useState)(false);
-  const [sourceResults, setSourceResults] = (0, import_react17.useState)(null);
+  const railRef = (0, import_react18.useRef)(null);
+  const overlayRef = (0, import_react18.useRef)(null);
+  const transcriptRef = (0, import_react18.useRef)(null);
+  const responseRef = (0, import_react18.useRef)(null);
+  const threadRef = (0, import_react18.useRef)(null);
+  const lastScrolledVisitorIdRef = (0, import_react18.useRef)(void 0);
+  const pinnedToBottomRef = (0, import_react18.useRef)(true);
+  const smoothScrollToLatestRef = (0, import_react18.useRef)(false);
+  const lockedTranscriptScrollTopRef = (0, import_react18.useRef)(null);
+  const [showJumpToLatest, setShowJumpToLatest] = (0, import_react18.useState)(false);
+  const [receiptOpen, setReceiptOpen] = (0, import_react18.useState)(false);
+  const [expandedSourcesMessageId, setExpandedSourcesMessageId] = (0, import_react18.useState)(null);
   const resolvedBrandLabel = brandLabel.trim();
   const resolvedBrandLogoUrl = brandLogoUrl?.trim();
   const resolvedDisclaimerLabel = disclaimerLabel === void 0 ? DEFAULT_DISCLAIMER_LABEL : disclaimerLabel;
-  const [failedLogoUrl, setFailedLogoUrl] = (0, import_react17.useState)(null);
+  const [failedLogoUrl, setFailedLogoUrl] = (0, import_react18.useState)(null);
+  const [brandLogoDisplay, setBrandLogoDisplay] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => {
+    setFailedLogoUrl(null);
+  }, [resolvedBrandLogoUrl]);
+  const activeBrandLogoDisplay = brandLogoDisplay?.url === resolvedBrandLogoUrl ? brandLogoDisplay : null;
+  const wideBrandLogo = activeBrandLogoDisplay?.wide ?? false;
+  const brandLogoDisplaySize = activeBrandLogoDisplay ? {
+    height: activeBrandLogoDisplay.height,
+    width: activeBrandLogoDisplay.width
+  } : null;
   const showBrandLogo = Boolean(resolvedBrandLogoUrl) && failedLogoUrl !== resolvedBrandLogoUrl;
   const resolvedColorScheme = useAgentColorScheme(colorScheme);
   const railStyle = agentThemeStyle(theme, resolvedColorScheme);
@@ -7345,30 +7533,39 @@ function AgentRail({
     ...visibleVisitorToolResults
   ].reverse().find((result) => result.kind !== "input")?.id;
   const receiptSteps = answerReceipt && state.toolSteps.length > 0 ? state.toolSteps : void 0;
-  (0, import_react17.useEffect)(() => {
-    if (state.phase !== "complete" || !showSources && sourceResults) {
+  (0, import_react18.useEffect)(() => {
+    if (state.phase !== "complete") {
       setReceiptOpen(false);
     }
-  }, [state.phase, showSources, sourceResults]);
+  }, [state.phase]);
+  (0, import_react18.useEffect)(() => {
+    if (state.phase !== "complete" || !showSources) {
+      setExpandedSourcesMessageId(null);
+    }
+  }, [state.phase, showSources]);
   function handleSubmit(message, options) {
     setReceiptOpen(false);
+    setExpandedSourcesMessageId(null);
     onSubmit?.(message, options);
   }
   function handleRegenerate() {
     setReceiptOpen(false);
+    setExpandedSourcesMessageId(null);
     onRegenerate?.();
   }
   function handleReset() {
     setReceiptOpen(false);
+    setExpandedSourcesMessageId(null);
     onReset?.();
   }
   function handleFollowUpSelect(label) {
     setReceiptOpen(false);
+    setExpandedSourcesMessageId(null);
     if (onFollowUpSelect) onFollowUpSelect(label);
     else onSubmit?.(label);
   }
   const latestVisitorId = visibleMessages[lastVisitorIndex]?.id;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const node = transcriptRef.current;
     if (!node) return;
     if (latestVisitorId !== lastScrolledVisitorIdRef.current) {
@@ -7398,7 +7595,7 @@ function AgentRail({
     state.followUps,
     state.journey
   ]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const node = transcriptRef.current;
     if (!node) return;
     const handleScroll = () => {
@@ -7412,7 +7609,7 @@ function AgentRail({
     handleScroll();
     return () => node.removeEventListener("scroll", handleScroll);
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!receiptOpen) {
       lockedTranscriptScrollTopRef.current = null;
       return;
@@ -7421,8 +7618,7 @@ function AgentRail({
     if (!node || lockedTranscriptScrollTopRef.current === null) return;
     node.scrollTop = lockedTranscriptScrollTopRef.current;
   }, [receiptOpen]);
-  function openReceipt(results = null) {
-    setSourceResults(results);
+  function openReceipt() {
     const node = transcriptRef.current;
     lockedTranscriptScrollTopRef.current = node?.scrollTop ?? null;
     setReceiptOpen(true);
@@ -7488,17 +7684,45 @@ function AgentRail({
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" }),
             resolvedBrandLabel || showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "agent-rail__identity", children: [
-              showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "agent-rail__brand-mark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                "img",
+              showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                "span",
                 {
-                  className: "agent-rail__brand-logo",
-                  src: resolvedBrandLogoUrl,
-                  alt: "",
-                  onError: () => {
-                    setFailedLogoUrl(resolvedBrandLogoUrl ?? null);
-                  }
+                  className: `agent-rail__brand-mark${wideBrandLogo ? " agent-rail__brand-mark--wide" : ""}`,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    "img",
+                    {
+                      className: "agent-rail__brand-logo as-brand-logo-img",
+                      src: resolvedBrandLogoUrl,
+                      alt: "",
+                      decoding: "async",
+                      ...brandLogoDisplaySize ? {
+                        height: brandLogoDisplaySize.height,
+                        width: brandLogoDisplaySize.width
+                      } : {},
+                      onLoad: (event) => {
+                        const img = event.currentTarget;
+                        const display = snapBrandLogoDisplaySize({
+                          naturalHeight: img.naturalHeight,
+                          naturalWidth: img.naturalWidth,
+                          surface: "header"
+                        });
+                        if (!resolvedBrandLogoUrl) return;
+                        setBrandLogoDisplay({
+                          height: display.height,
+                          url: resolvedBrandLogoUrl,
+                          wide: display.wide,
+                          width: display.width
+                        });
+                      },
+                      onError: () => {
+                        setFailedLogoUrl(resolvedBrandLogoUrl ?? null);
+                      }
+                    },
+                    resolvedBrandLogoUrl
+                  )
                 }
-              ) }) : null,
+              ) : null,
               resolvedBrandLabel ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "agent-rail__brand-label", children: resolvedBrandLabel }) : null
             ] }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "agent-rail__actions", children: [
@@ -7530,9 +7754,7 @@ function AgentRail({
               greeting?.role === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 MessageBubble,
                 {
-                  showProvenance: Boolean(
-                    handoff?.page?.enabled || handoffActive
-                  ),
+                  showProvenance: true,
                   message: greeting,
                   bookingDisabled: isBusy || handoffActive,
                   brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
@@ -7575,104 +7797,138 @@ function AgentRail({
                 request.requestId
               ))
             ] }) : null,
-            transcriptMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-              "div",
-              {
-                ref: index === lastVisitorIndex + 1 ? responseRef : void 0,
-                className: "agent-rail__turn-block",
-                children: [
-                  message.role === "agent" ? message.toolResults?.map((result) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    VisitorToolResultView,
-                    {
-                      result
-                    },
-                    result.id
-                  )) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    MessageBubble,
-                    {
-                      showProvenance: Boolean(
-                        handoff?.page?.enabled || handoffActive
-                      ),
-                      message,
-                      showSearchReferences: false,
-                      bookingDisabled: isBusy || handoffActive,
-                      brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
-                      offer: index === transcriptMessages.length - 1 ? state.pendingOffer : void 0,
-                      onBook
-                    }
-                  ),
-                  message.role === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "agent-rail__answer-actions", children: [
-                    index === lastAgentIndex && showMessageActions ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                      MessageActions,
+            transcriptMessages.map((message, index) => {
+              const messageSourceCount = message.role === "agent" ? searchSources(message.searchResults ?? []).length : 0;
+              const showAnswerActions = message.role === "agent" && index === lastAgentIndex && showMessageActions;
+              const showSourcesToggle = message.role === "agent" && showSources && state.phase === "complete" && !message.streaming && messageSourceCount > 0;
+              return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                "div",
+                {
+                  ref: index === lastVisitorIndex + 1 ? responseRef : void 0,
+                  className: "agent-rail__turn-block",
+                  children: [
+                    message.role === "agent" ? message.toolResults?.map((result) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      VisitorToolResultView,
                       {
-                        answeredAt: message.createdAt,
-                        copyText: hideToolCardFences(message.text).trim() || message.text,
-                        readAloud,
-                        receiptSteps,
-                        onOpenReceipt: receiptSteps ? () => openReceipt() : void 0,
-                        onRegenerate: onRegenerate ? handleRegenerate : void 0,
-                        onFeedback: onFeedback ? (rating) => onFeedback(rating, message) : void 0
-                      }
-                    ) : null,
-                    showSources && state.phase === "complete" && !message.streaming && searchSources(message.searchResults ?? []).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                      "button",
+                        result
+                      },
+                      result.id
+                    )) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      MessageBubble,
                       {
-                        className: "agent-rail__sources-button",
-                        type: "button",
-                        "aria-haspopup": "dialog",
-                        onClick: () => openReceipt(message.searchResults ?? []),
-                        children: "View sources"
+                        showProvenance: true,
+                        message,
+                        showSearchReferences: false,
+                        bookingDisabled: isBusy || handoffActive,
+                        brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+                        offer: index === transcriptMessages.length - 1 ? state.pendingOffer : void 0,
+                        onBook
                       }
-                    ) : null
-                  ] }) : null,
-                  message.role === "agent" && !message.streaming ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    SearchReferences,
-                    {
-                      results: message.searchResults ?? [],
-                      mode: "actions"
-                    }
-                  ) : null,
-                  index === lastAgentIndex && showMessageActions && message.role === "agent" && !handoffActive && showLearnMore ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    LearnMore,
-                    {
-                      results: message.searchResults ?? [],
-                      disabled: isBusy || !(onFollowUpSelect || onSubmit),
-                      onSelect: handleFollowUpSelect
-                    }
-                  ) : null,
-                  index === lastVisitorIndex ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-                    showActivity ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                      AgentActivityBubble,
+                    ),
+                    showAnswerActions || showSourcesToggle ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "agent-rail__answer-footer", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "agent-rail__answer-actions", children: [
+                        showAnswerActions ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                          MessageActions,
+                          {
+                            answeredAt: message.createdAt,
+                            copyText: hideToolCardFences(message.text).trim() || message.text,
+                            readAloud,
+                            receiptSteps,
+                            onOpenReceipt: receiptSteps ? () => openReceipt() : void 0,
+                            onRegenerate: onRegenerate ? handleRegenerate : void 0,
+                            onFeedback: onFeedback ? (rating) => onFeedback(rating, message) : void 0
+                          }
+                        ) : null,
+                        showSourcesToggle ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                          "button",
+                          {
+                            className: "agent-rail__sources-button",
+                            type: "button",
+                            "aria-expanded": expandedSourcesMessageId === message.id,
+                            "aria-controls": `agent-rail-sources-${message.id}`,
+                            onClick: () => setExpandedSourcesMessageId(
+                              (current) => current === message.id ? null : message.id
+                            ),
+                            children: [
+                              "Explore More",
+                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                                "span",
+                                {
+                                  className: "agent-rail__sources-button-chevron",
+                                  "aria-hidden": "true",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChevronDownIcon, {})
+                                }
+                              )
+                            ]
+                          }
+                        ) : null
+                      ] }),
+                      showSourcesToggle ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                        "div",
+                        {
+                          id: `agent-rail-sources-${message.id}`,
+                          className: `agent-rail__sources-panel${expandedSourcesMessageId === message.id ? " agent-rail__sources-panel--open" : ""}`,
+                          role: "region",
+                          "aria-label": "Explore More",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "agent-rail__sources-panel-inner", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                            SearchReferences,
+                            {
+                              results: message.searchResults ?? [],
+                              mode: "sources"
+                            }
+                          ) })
+                        }
+                      ) : null
+                    ] }) : null,
+                    message.role === "agent" && !message.streaming ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      SearchReferences,
                       {
-                        brandLabel: resolvedBrandLabel,
-                        brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
-                        failed: state.phase === "error",
-                        steps: activitySteps
+                        results: message.searchResults ?? [],
+                        mode: "actions"
                       }
                     ) : null,
-                    visibleVisitorToolResults.map((result) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                      VisitorToolResultView,
-                      {
-                        result,
-                        disabled: semanticSurfaceDisabled,
-                        onToolInput
-                      },
-                      result.id
-                    )),
-                    pendingInputRequests.slice(0, 1).map((request) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                      HumanInputCard,
+                    showAnswerActions && !handoffActive && showLearnMore ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      LearnMore,
                       {
-                        request,
-                        onRespond: onInputResponse
-                      },
-                      request.requestId
-                    ))
-                  ] }) : null
-                ]
-              },
-              message.role === "agent" && transcriptMessages[index - 1]?.role === "visitor" ? `answer-${transcriptMessages[index - 1]?.id}` : message.id
-            )),
+                        results: message.searchResults ?? [],
+                        disabled: isBusy || !(onFollowUpSelect || onSubmit),
+                        onSelect: handleFollowUpSelect
+                      }
+                    ) : null,
+                    index === lastVisitorIndex ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                      showActivity ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                        AgentActivityBubble,
+                        {
+                          brandLabel: resolvedBrandLabel,
+                          brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+                          failed: state.phase === "error",
+                          steps: activitySteps
+                        }
+                      ) : null,
+                      visibleVisitorToolResults.map((result) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                        VisitorToolResultView,
+                        {
+                          result,
+                          disabled: semanticSurfaceDisabled,
+                          onToolInput
+                        },
+                        result.id
+                      )),
+                      pendingInputRequests.slice(0, 1).map((request) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                        HumanInputCard,
+                        {
+                          request,
+                          onRespond: onInputResponse
+                        },
+                        request.requestId
+                      ))
+                    ] }) : null
+                  ]
+                },
+                message.role === "agent" && transcriptMessages[index - 1]?.role === "visitor" ? `answer-${transcriptMessages[index - 1]?.id}` : message.id
+              );
+            }),
             waitingForBooking ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BookingCardLoader, {}) : null,
             state.error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("section", { className: "agent-rail__error", role: "alert", children: [
               /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
@@ -7682,21 +7938,22 @@ function AgentRail({
               onRetry ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", onClick: onRetry, children: "Try again" }) : null
             ] }) : null
           ] }) }),
-          showDisclaimerLabel ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "agent-rail__disclaimer", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: disclaimerLink ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            "a",
-            {
-              href: disclaimerLink,
-              rel: "noopener noreferrer",
-              target: "_blank",
-              children: resolvedDisclaimerLabel
-            }
-          ) : resolvedDisclaimerLabel }) }) : null,
           handoff && (handoff.page?.enabled || handoffActive) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "agent-rail__handoff", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { role: "status", "aria-live": "polite", children: !handoff.page ? "Checking conversation\u2026" : handoffStatus === "human" ? "Connected with support" : handoffStatus === "queued" ? "Waiting for a representative" : handoffStatus === "requesting" ? "Connecting you to support\u2026" : handoffStatus === "resolved" ? "Your conversation with support has ended" : handoffStatus === "failed" ? "We couldn\u2019t connect you to support" : "Need a person?" }),
+            handoffStatus === "human" || handoffStatus === "queued" || handoffStatus === "requesting" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "agent-rail__handoff-dot", "aria-hidden": "true" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "p",
+              {
+                className: "agent-rail__handoff-status",
+                role: "status",
+                "aria-live": "polite",
+                children: !handoff.page ? "Checking conversation\u2026" : handoffStatus === "human" ? "Connected with support" : handoffStatus === "queued" ? "Waiting for a representative" : handoffStatus === "requesting" ? "Connecting you to support\u2026" : handoffStatus === "resolved" ? "Your conversation with support has ended" : handoffStatus === "failed" ? "We couldn\u2019t connect you to support" : "Need a person?"
+              }
+            ),
             handoffStatus === "ai" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "button",
               {
                 type: "button",
+                className: "agent-rail__handoff-cta",
                 disabled: handoff.busy || handoff.hasPending || isBusy,
                 onClick: () => void handoff.start(),
                 children: "Talk to a person"
@@ -7706,6 +7963,7 @@ function AgentRail({
               "button",
               {
                 type: "button",
+                className: "agent-rail__handoff-action",
                 disabled: handoff.busy || handoff.hasPending,
                 onClick: () => void handoff.returnToAI(),
                 children: "Return to AI"
@@ -7715,17 +7973,19 @@ function AgentRail({
               "button",
               {
                 type: "button",
+                className: "agent-rail__handoff-action",
                 disabled: !handoff.canReset,
                 onClick: handleReset,
                 children: "Start a new conversation"
               }
             ) : null,
-            handoff.error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { role: "alert", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: handoff.error }),
+            handoff.error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "agent-rail__handoff-error", role: "alert", children: [
+              handoff.error,
               /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "button",
                 {
                   type: "button",
+                  className: "agent-rail__handoff-action",
                   disabled: handoff.busy,
                   onClick: () => void handoff.retry(),
                   children: "Retry"
@@ -7733,6 +7993,15 @@ function AgentRail({
               )
             ] }) : null
           ] }) : null,
+          showDisclaimerLabel ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "agent-rail__disclaimer", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: disclaimerLink ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "a",
+            {
+              href: disclaimerLink,
+              rel: "noopener noreferrer",
+              target: "_blank",
+              children: resolvedDisclaimerLabel
+            }
+          ) : resolvedDisclaimerLabel }) }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "agent-rail__composer-wrap", children: [
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               LocationConsent,
@@ -7774,19 +8043,12 @@ function AgentRail({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref: overlayRef, className: "agent-rail__overlay" }),
-        receiptOpen && (sourceResults || receiptSteps) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        receiptOpen && receiptSteps ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           AnswerReceiptDialog,
           {
             brandLabel: resolvedBrandLabel,
             onClose: () => setReceiptOpen(false),
-            steps: receiptSteps,
-            title: sourceResults ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-              "Sources",
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "agent-receipt-dialog__count", children: searchSources(sourceResults).length })
-            ] }) : void 0,
-            summary: sourceResults ? "References for this answer" : void 0,
-            children: sourceResults ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SearchReferences, { results: sourceResults, mode: "sources" }) : void 0
+            steps: receiptSteps
           }
         ) : null
       ] })
@@ -7795,7 +8057,7 @@ function AgentRail({
 }
 
 // src/react/components/AssistEdgeTab/AssistEdgeTab.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function ChatSparkIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
@@ -7872,20 +8134,47 @@ function ChatSparkIcon() {
 }
 function TabMarkIcon({
   customIconUrl,
-  logoUrl
+  logoUrl,
+  chip = false
 }) {
   const custom = customIconUrl?.trim();
   const logo = logoUrl?.trim();
-  const [customFailed, setCustomFailed] = (0, import_react18.useState)(false);
-  const [logoFailed, setLogoFailed] = (0, import_react18.useState)(false);
+  const [customFailed, setCustomFailed] = (0, import_react19.useState)(false);
+  const [logoFailed, setLogoFailed] = (0, import_react19.useState)(false);
+  const [markDisplay, setMarkDisplay] = (0, import_react19.useState)(null);
+  function applyLauncherLogoSize(img, sourceUrl) {
+    if (!chip) return;
+    const display = snapBrandLogoDisplaySize({
+      naturalHeight: img.naturalHeight,
+      naturalWidth: img.naturalWidth,
+      surface: "launcher"
+    });
+    setMarkDisplay({
+      url: sourceUrl,
+      width: display.width,
+      height: display.height,
+      wide: display.wide
+    });
+  }
+  const chipMarkStyle = chip && markDisplay ? {
+    width: `${markDisplay.width}px`,
+    height: `${markDisplay.height}px`
+  } : void 0;
   if (custom && !customFailed) {
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "img",
       {
         alt: "",
         "aria-hidden": true,
-        className: "assist-edge-tab__custom-icon",
+        className: `assist-edge-tab__custom-icon as-brand-logo-img${chip ? " assist-edge-tab__custom-icon--chip" : ""}`,
         src: custom,
+        decoding: "async",
+        style: markDisplay?.url === custom ? chipMarkStyle : void 0,
+        onLoad: (event) => {
+          if (chip) {
+            applyLauncherLogoSize(event.currentTarget, custom);
+          }
+        },
         onError: () => setCustomFailed(true)
       }
     );
@@ -7896,8 +8185,13 @@ function TabMarkIcon({
       {
         alt: "",
         "aria-hidden": true,
-        className: "assist-edge-tab__logo",
+        className: `assist-edge-tab__logo as-brand-logo-img${chip ? " assist-edge-tab__logo--chip" : ""}${chip && markDisplay?.url === logo && markDisplay.wide ? " assist-edge-tab__logo--wide" : ""}`,
         src: logo,
+        decoding: "async",
+        style: markDisplay?.url === logo ? chipMarkStyle : void 0,
+        onLoad: (event) => {
+          applyLauncherLogoSize(event.currentTarget, logo);
+        },
         onError: () => setLogoFailed(true)
       }
     );
@@ -7973,6 +8267,7 @@ function AssistEdgeTab({
     "--tab-along": `${along}%`,
     "--tab-inset": `${inset}px`,
     ...resolvedBrandColor ? { "--as-brand": resolvedBrandColor } : {},
+    ...pill && resolvedBrandColor ? { "--pill-logo-surface": resolvedBrandColor } : {},
     ...brandForeground ? { "--as-visitor-text": brandForeground } : {},
     ...resolvedBorderColor ? { "--as-border": resolvedBorderColor } : {},
     ...fontFamily ? { "--as-font-display": fontFamily } : {},
@@ -8005,6 +8300,7 @@ function AssistEdgeTab({
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 TabMarkIcon,
                 {
+                  chip: true,
                   customIconUrl,
                   logoUrl
                 },
@@ -8020,6 +8316,7 @@ function AssistEdgeTab({
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             TabMarkIcon,
             {
+              chip: true,
               customIconUrl,
               logoUrl
             },
@@ -8037,6 +8334,7 @@ function AssistEdgeTab({
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             TabMarkIcon,
             {
+              chip: true,
               customIconUrl,
               logoUrl
             },
@@ -8127,9 +8425,9 @@ function AgentWidget({
 }) {
   const isMobile = useIsMobile();
   const placement = normalizeAgentPlacement(placementInput);
-  const railSlotRef = (0, import_react19.useRef)(null);
-  const [railCollapsed, setRailCollapsed] = (0, import_react19.useState)(defaultCollapsed);
-  const [railExpanded, setRailExpanded] = (0, import_react19.useState)(false);
+  const railSlotRef = (0, import_react20.useRef)(null);
+  const [railCollapsed, setRailCollapsed] = (0, import_react20.useState)(defaultCollapsed);
+  const [railExpanded, setRailExpanded] = (0, import_react20.useState)(false);
   const pageShiftActive = shouldApplyPageShift({
     pageShift,
     isMobile,
@@ -8184,7 +8482,7 @@ function AgentWidget({
     } : {},
     ...branding?.colors?.border ? { border: branding.colors.border } : {}
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!registerPanelController) return;
     registerAgentPanelController(customerId, {
       open: () => setRailCollapsed(false),
@@ -8219,7 +8517,7 @@ function AgentWidget({
       })
     );
   }
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (railCollapsed) return;
     const handleKeyDown = (event) => {
       if (event.key === "Tab" && (isMobile || railExpanded)) {