@webless/agent 0.5.0 → 0.6.1

package/dist/embed.cjs

@@ -50,7 +50,7 @@ function closeAgentPanel(customerId) {
 }
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-var import_react7 = require("react");
+var import_react10 = require("react");
 
 // src/react/page-shift.ts
 var import_react = require("react");
@@ -1116,7 +1116,7 @@ function visitorBookingPrefix(booking) {
 }
 
 // src/react/persisted-conversation.ts
-var CONVERSATION_VERSION = 1;
+var CONVERSATION_VERSION = 2;
 function conversationKey(storageKeyPrefix, visitorSessionId) {
   return `${storageKeyPrefix}:conversation:${visitorSessionId}`;
 }
@@ -1142,6 +1142,20 @@ function parseMessage(value) {
     createdAt: record.createdAt
   };
 }
+function parseToolStep(value) {
+  if (typeof value !== "object" || value === null) return null;
+  const record = value;
+  if (typeof record.id !== "string" || record.kind !== "planning" && record.kind !== "search" && record.kind !== "specialist" || typeof record.label !== "string" || record.state !== "completed" && record.state !== "active" && record.state !== "pending" && record.state !== "error") {
+    return null;
+  }
+  return {
+    id: record.id,
+    kind: record.kind,
+    label: record.label,
+    state: record.state,
+    ...typeof record.detail === "string" && record.detail ? { detail: record.detail } : {}
+  };
+}
 function visitorTurnText(message) {
   return message.role === "visitor" && message.runtimeText ? message.runtimeText : message.text;
 }
@@ -1153,15 +1167,19 @@ function loadPersistedAgentConversation(storageKeyPrefix, visitorSessionId) {
     const value = JSON.parse(raw);
     if (typeof value !== "object" || value === null) return null;
     const record = value;
-    if (record.version !== CONVERSATION_VERSION || !Array.isArray(record.messages) || typeof record.pending !== "boolean" || typeof record.streamingText !== "string") {
+    if (record.version !== 1 && record.version !== CONVERSATION_VERSION || !Array.isArray(record.messages) || typeof record.pending !== "boolean" || typeof record.streamingText !== "string" || record.version === CONVERSATION_VERSION && !Array.isArray(record.toolSteps)) {
       return null;
     }
     const messages = record.messages.map(parseMessage);
     if (messages.some((message) => message === null)) return null;
+    const storedToolSteps = record.version === CONVERSATION_VERSION && Array.isArray(record.toolSteps) ? record.toolSteps : [];
+    const toolSteps = storedToolSteps.map(parseToolStep);
+    if (toolSteps.some((step) => step === null)) return null;
     return {
       messages: messages.filter((message) => message !== null),
       pending: record.pending,
-      streamingText: record.streamingText
+      streamingText: record.streamingText,
+      toolSteps: toolSteps.filter((step) => step !== null)
     };
   } catch {
     return null;
@@ -1242,7 +1260,8 @@ function stateFromConversation(conversation, initialState) {
     ...initialState,
     messages: conversation.messages,
     phase: conversation.pending ? conversation.streamingText ? "streaming" : "thinking" : "complete",
-    streamingText: conversation.streamingText
+    streamingText: conversation.streamingText,
+    toolSteps: conversation.toolSteps
   };
 }
 function upsertToolStep(steps, item) {
@@ -1376,13 +1395,15 @@ function useAgentChat({
     savePersistedAgentConversation(resolvedStorageKeyPrefix, visitorId, {
       messages: state.messages,
       pending: isAgentBusy(state.phase),
-      streamingText: state.streamingText
+      streamingText: state.streamingText,
+      toolSteps: state.toolSteps
     });
   }, [
     resolvedStorageKeyPrefix,
     state.messages,
     state.phase,
     state.streamingText,
+    state.toolSteps,
     visitorId
   ]);
   const reset = (0, import_react2.useCallback)(() => {
@@ -1687,7 +1708,7 @@ function normalizeAgentPlacement(placement) {
 }
 
 // src/react/components/AgentRail/AgentRail.tsx
-var import_react6 = require("react");
+var import_react9 = require("react");
 
 // src/react/types/conversation.ts
 var defaultAgentRailTheme = {
@@ -1708,15 +1729,62 @@ var defaultAgentRailTheme = {
   fontBody: '"Mulish", "Avenir Next", "Segoe UI", sans-serif',
   fontDisplay: '"Space Grotesk", sans-serif'
 };
+var defaultDarkAgentRailTheme = {
+  ...defaultAgentRailTheme,
+  brand: "#a77bff",
+  brandSoft: "#2b2140",
+  brandDeep: "#f5f0ff",
+  surface: "#101218",
+  surfaceMuted: "#1a1e27",
+  text: "#f5f7fb",
+  textMuted: "#b6bfce",
+  textSubtle: "#919cad",
+  border: "rgb(226 232 240 / 0.16)",
+  visitorBubble: "#7c3aed",
+  success: "#55cf91",
+  danger: "#ff8da1"
+};
+
+// src/react/hooks/useAgentColorScheme.ts
+var import_react4 = require("react");
+var DARK_MODE_QUERY = "(prefers-color-scheme: dark)";
+function subscribeToDarkMode(onChange) {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return () => void 0;
+  }
+  const mediaQuery = window.matchMedia(DARK_MODE_QUERY);
+  if (typeof mediaQuery.addEventListener === "function") {
+    mediaQuery.addEventListener("change", onChange);
+    return () => mediaQuery.removeEventListener("change", onChange);
+  }
+  mediaQuery.addListener(onChange);
+  return () => mediaQuery.removeListener(onChange);
+}
+function getPrefersDarkMode() {
+  return typeof window !== "undefined" && Boolean(window.matchMedia?.(DARK_MODE_QUERY).matches);
+}
+function useAgentColorScheme(colorScheme = "auto") {
+  const prefersDarkMode = (0, import_react4.useSyncExternalStore)(
+    subscribeToDarkMode,
+    getPrefersDarkMode,
+    () => false
+  );
+  return resolveAgentColorScheme(colorScheme, prefersDarkMode);
+}
+function resolveAgentColorScheme(colorScheme = "auto", prefersDarkMode) {
+  return colorScheme === "auto" ? prefersDarkMode ? "dark" : "light" : colorScheme;
+}
 
 // src/react/components/AgentActivityBubble/AgentActivityBubble.tsx
+var import_react5 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function workSummary(steps, failed, brandLabel) {
   const active = [...steps].reverse().find((step) => step.state === "active");
   if (active?.kind === "specialist")
     return `${active.label} is reviewing your question`;
   if (active?.kind === "search") return "Searching this site";
-  if (active) return `${brandLabel} is choosing the best way to help`;
+  if (active)
+    return brandLabel ? `${brandLabel} is choosing the best way to help` : "Choosing the best way to help";
   if (failed) return "Couldn\u2019t complete this request";
   const hasError = steps.some((step) => step.state === "error");
   const specialists = steps.filter(
@@ -1727,8 +1795,9 @@ function workSummary(steps, failed, brandLabel) {
   );
   if (hasError) return "Answered with available information";
   if (specialists.length > 1)
-    return `Consulted ${specialists.length} specialists`;
-  if (specialists.length === 1) return `Consulted ${specialists[0]?.label}`;
+    return `Brought in ${specialists.length} specialists`;
+  if (specialists.length === 1)
+    return `Brought in ${specialists[0]?.label}`;
   if (searched) return "Searched this site";
   return "Answer ready";
 }
@@ -1740,11 +1809,12 @@ function stepDetail(step, steps) {
     return step.detail;
   }
   const specialists = steps.filter((item) => item.kind === "specialist");
-  if (specialists.length === 1) return `Delegated to ${specialists[0]?.label}`;
+  if (specialists.length === 1)
+    return `Brought in ${specialists[0]?.label}`;
   if (specialists.length > 1)
-    return `Delegated to ${specialists.length} specialists`;
+    return `Brought in ${specialists.length} specialists`;
   if (steps.some((item) => item.kind === "search"))
-    return "Used built-in Search & Discovery";
+    return "Searched this site";
   return step.detail;
 }
 function SearchIcon() {
@@ -1773,12 +1843,20 @@ function PlanningIcon() {
   ) });
 }
 function AgentActivityBubble({
-  brandLabel = "Webless Guide",
+  brandLabel = "",
   brandLogoUrl,
   failed = false,
   steps
 }) {
   const active = steps.some((step) => step.state === "active");
+  const receiptId = steps.map((step) => step.id).join(":");
+  const [expandedReceiptId, setExpandedReceiptId] = (0, import_react5.useState)(
+    null
+  );
+  const detailsOpen = active || expandedReceiptId === receiptId;
+  const visibleSteps = steps.filter(
+    (step) => step.kind !== "planning" || Boolean(brandLabel)
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { className: "agent-activity-bubble", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "agent-activity-bubble__status", "aria-live": "polite", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1790,9 +1868,23 @@ function AgentActivityBubble({
       ),
       workSummary(steps, failed, brandLabel)
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { className: "agent-activity-bubble__details", open: active, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { children: "Work details" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "agent-activity-bubble__steps", children: steps.map((step) => {
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "agent-activity-bubble__details", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "agent-activity-bubble__summary",
+          "aria-expanded": detailsOpen,
+          onClick: () => {
+            if (active) return;
+            setExpandedReceiptId(
+              (current) => current === receiptId ? null : receiptId
+            );
+          },
+          children: "How this answer was made"
+        }
+      ),
+      detailsOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "agent-activity-bubble__steps", children: visibleSteps.map((step) => {
         const detail = stepDetail(step, steps);
         return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "li",
@@ -1822,23 +1914,20 @@ function AgentActivityBubble({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "agent-activity-bubble__step-copy", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "agent-activity-bubble__step-heading", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: stepLabel(step, brandLabel) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: step.kind === "specialist" ? "Specialist" : step.kind === "search" ? "Built-in capability" : "Supervisor" })
-                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "agent-activity-bubble__step-heading", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: stepLabel(step, brandLabel) }) }),
                 detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "agent-activity-bubble__step-detail", children: detail }) : null
               ] })
             ]
           },
           step.id
         );
-      }) })
+      }) }) : null
     ] })
   ] });
 }
 
 // src/react/components/Composer/Composer.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function SendIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 12V4M8 4l-3 3M8 4l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -1849,8 +1938,8 @@ function Composer({
   variant = "default",
   onSubmit
 }) {
-  const [value, setValue] = (0, import_react4.useState)("");
-  const inputRef = (0, import_react4.useRef)(null);
+  const [value, setValue] = (0, import_react6.useState)("");
+  const inputRef = (0, import_react6.useRef)(null);
   function submitCurrent() {
     const trimmed = value.trim();
     if (!trimmed || disabled) return;
@@ -1935,8 +2024,11 @@ function FollowUpChips({
   ] });
 }
 
+// src/react/components/MessageBubble/MessageBubble.tsx
+var import_react8 = require("react");
+
 // src/react/components/BookingCard/BookingCard.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function monthFromKey(key) {
   const [year, month] = key.split("-").map(Number);
@@ -1965,19 +2057,19 @@ function BookingCard({
   offer,
   onBook
 }) {
-  const fieldId = (0, import_react5.useId)();
+  const fieldId = (0, import_react7.useId)();
   const defaultType = offer.eventTypes[0]?.uri ?? offer.slots[0]?.eventTypeUri ?? "";
-  const [step, setStep] = (0, import_react5.useState)("date");
-  const [eventTypeUri, setEventTypeUri] = (0, import_react5.useState)(defaultType);
-  const [selectedDate, setSelectedDate] = (0, import_react5.useState)("");
-  const [startTime, setStartTime] = (0, import_react5.useState)("");
-  const [name, setName] = (0, import_react5.useState)("");
-  const [email, setEmail] = (0, import_react5.useState)("");
-  const slots = (0, import_react5.useMemo)(
+  const [step, setStep] = (0, import_react7.useState)("date");
+  const [eventTypeUri, setEventTypeUri] = (0, import_react7.useState)(defaultType);
+  const [selectedDate, setSelectedDate] = (0, import_react7.useState)("");
+  const [startTime, setStartTime] = (0, import_react7.useState)("");
+  const [name, setName] = (0, import_react7.useState)("");
+  const [email, setEmail] = (0, import_react7.useState)("");
+  const slots = (0, import_react7.useMemo)(
     () => bookingSlotsForEventType(offer.slots, eventTypeUri),
     [eventTypeUri, offer.slots]
   );
-  const availableByDate = (0, import_react5.useMemo)(() => {
+  const availableByDate = (0, import_react7.useMemo)(() => {
     const next = /* @__PURE__ */ new Map();
     for (const slot of slots) {
       const key = slotDateKey(slot.startTime);
@@ -1985,7 +2077,7 @@ function BookingCard({
     }
     return next;
   }, [slots]);
-  const [visibleMonth, setVisibleMonth] = (0, import_react5.useState)(
+  const [visibleMonth, setVisibleMonth] = (0, import_react7.useState)(
     () => firstAvailableBookingMonth(slots)
   );
   function selectEventType(nextType) {
@@ -1996,14 +2088,14 @@ function BookingCard({
       firstAvailableBookingMonth(bookingSlotsForEventType(offer.slots, nextType))
     );
   }
-  const daySlots = (0, import_react5.useMemo)(
+  const daySlots = (0, import_react7.useMemo)(
     () => slots.filter((slot) => slotDateKey(slot.startTime) === selectedDate),
     [selectedDate, slots]
   );
   const selectedType = offer.eventTypes.find((item) => item.uri === eventTypeUri);
   const selectedSample = availableByDate.get(selectedDate) ?? startTime;
   const timeZone = formatSlotTimeZone(slots[0]?.startTime ?? selectedSample);
-  const weekdays = (0, import_react5.useMemo)(() => weekdayLabels(), []);
+  const weekdays = (0, import_react7.useMemo)(() => weekdayLabels(), []);
   const cells = calendarCells(visibleMonth.year, visibleMonth.month);
   const canPrevMonth = [...availableByDate.keys()].some((key) => {
     const month = monthFromKey(key);
@@ -2203,9 +2295,13 @@ var import_styles = require("streamdown/styles.css");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function MessageBubble({
   message,
+  brandLogoUrl,
   offer,
   onBook
 }) {
+  const resolvedLogoUrl = brandLogoUrl?.trim();
+  const [failedLogoUrl, setFailedLogoUrl] = (0, import_react8.useState)(null);
+  const showBrandLogo = Boolean(resolvedLogoUrl) && failedLogoUrl !== resolvedLogoUrl;
   const cards = message.role === "agent" ? extractToolCards(message.text) : [];
   const extractedOffers = cards.filter(
     (card) => card.type === "booking_offer"
@@ -2217,21 +2313,34 @@ function MessageBubble({
   if (message.role === "visitor") {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("article", { className: "message-bubble message-bubble--visitor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "message-bubble__text", children: message.text }) });
   }
+  const agentText = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "message-bubble__text", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_streamdown.Streamdown,
+    {
+      animated: true,
+      caret: "circle",
+      className: "message-bubble__markdown",
+      controls: false,
+      isAnimating: isStreaming,
+      linkSafety: { enabled: false },
+      mode: isStreaming ? "streaming" : "static",
+      skipHtml: true,
+      children: displayText
+    }
+  ) });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("article", { className: "message-bubble message-bubble--agent", children: [
-    displayText ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "message-bubble__text", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_streamdown.Streamdown,
-      {
-        animated: true,
-        caret: "circle",
-        className: "message-bubble__markdown",
-        controls: false,
-        isAnimating: isStreaming,
-        linkSafety: { enabled: false },
-        mode: isStreaming ? "streaming" : "static",
-        skipHtml: true,
-        children: displayText
-      }
-    ) }) : null,
+    displayText ? showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "message-bubble__agent-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "message-bubble__agent-avatar", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "img",
+        {
+          src: resolvedLogoUrl,
+          alt: "",
+          onError: () => {
+            setFailedLogoUrl(resolvedLogoUrl ?? null);
+          }
+        }
+      ) }),
+      agentText
+    ] }) : agentText : null,
     offers.map((nextOffer, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       BookingCard,
       {
@@ -2306,7 +2415,8 @@ function RestoreIcon() {
 function AgentRail({
   state,
   theme,
-  brandLabel = "Webless Assist",
+  colorScheme = "auto",
+  brandLabel = "",
   brandLogoUrl,
   poweredByLabel = "Powered by Webless",
   composerPlaceholder = "Ask anything\u2026",
@@ -2321,8 +2431,28 @@ function AgentRail({
   onFollowUpSelect,
   onBook
 }) {
-  const transcriptRef = (0, import_react6.useRef)(null);
-  const resolvedTheme = { ...defaultAgentRailTheme, ...theme };
+  const transcriptRef = (0, import_react9.useRef)(null);
+  const resolvedBrandLabel = brandLabel.trim();
+  const resolvedBrandLogoUrl = brandLogoUrl?.trim();
+  const [failedLogoUrl, setFailedLogoUrl] = (0, import_react9.useState)(null);
+  const showBrandLogo = Boolean(resolvedBrandLogoUrl) && failedLogoUrl !== resolvedBrandLogoUrl;
+  const resolvedColorScheme = useAgentColorScheme(colorScheme);
+  const brandedTheme = { ...defaultAgentRailTheme, ...theme };
+  const resolvedTheme = resolvedColorScheme === "dark" ? {
+    ...brandedTheme,
+    brand: theme?.brand ?? defaultDarkAgentRailTheme.brand,
+    brandDeep: defaultDarkAgentRailTheme.brandDeep,
+    brandSoft: `color-mix(in srgb, ${theme?.brand ?? defaultDarkAgentRailTheme.brand} 18%, ${defaultDarkAgentRailTheme.surface})`,
+    border: defaultDarkAgentRailTheme.border,
+    danger: defaultDarkAgentRailTheme.danger,
+    success: defaultDarkAgentRailTheme.success,
+    surface: defaultDarkAgentRailTheme.surface,
+    surfaceMuted: defaultDarkAgentRailTheme.surfaceMuted,
+    text: defaultDarkAgentRailTheme.text,
+    textMuted: defaultDarkAgentRailTheme.textMuted,
+    textSubtle: defaultDarkAgentRailTheme.textSubtle,
+    visitorBubble: theme?.visitorBubble ?? theme?.brand ?? defaultDarkAgentRailTheme.visitorBubble
+  } : brandedTheme;
   const railStyle = {
     "--rail-width": resolvedTheme.railMaxWidth,
     "--as-rail-max-width": resolvedTheme.railMaxWidth,
@@ -2340,7 +2470,8 @@ function AgentRail({
     "--as-success": resolvedTheme.success,
     "--as-danger": resolvedTheme.danger,
     "--as-font-body": resolvedTheme.fontBody,
-    "--as-font-display": resolvedTheme.fontDisplay
+    "--as-font-display": resolvedTheme.fontDisplay,
+    colorScheme: resolvedColorScheme
   };
   const isBusy = state.phase === "thinking" || state.phase === "running-tools" || state.phase === "streaming";
   const showActivity = state.toolSteps.length > 0;
@@ -2351,7 +2482,7 @@ function AgentRail({
   const greeting = state.messages.find(
     (message) => message.role === "agent" && message.id === "greeting"
   );
-  const visibleMessages = hasVisitorMessages2 ? state.messages.filter((message) => message.id !== "greeting") : [];
+  const visibleMessages = hasVisitorMessages2 ? state.messages : [];
   const lastMessage = visibleMessages.at(-1);
   const completedAnswer = showActivity && state.phase === "complete" && lastMessage?.role === "agent" ? lastMessage : null;
   const transcriptMessages = completedAnswer ? visibleMessages.slice(0, -1) : visibleMessages;
@@ -2368,7 +2499,7 @@ function AgentRail({
     streaming: false,
     text: "Pick a date and time that works for you."
   } : null;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const node = transcriptRef.current;
     if (!node) return;
     node.scrollTop = node.scrollHeight;
@@ -2383,6 +2514,7 @@ function AgentRail({
     "aside",
     {
       className: `agent-rail${mobileFullscreen ? " agent-rail--mobile-fullscreen" : ""}${expanded ? " agent-rail--expanded" : ""}`,
+      "data-color-scheme": resolvedColorScheme,
       style: railStyle,
       "aria-label": "Agent conversation",
       "aria-modal": mobileFullscreen || expanded ? true : void 0,
@@ -2410,23 +2542,20 @@ function AgentRail({
               children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, {})
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "agent-rail__identity", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "agent-rail__brand-mark", "aria-hidden": "true", children: [
-              brandLabel.slice(0, 1).toUpperCase(),
-              brandLogoUrl ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                "img",
-                {
-                  className: "agent-rail__brand-logo",
-                  src: brandLogoUrl,
-                  alt: "",
-                  onError: (event) => {
-                    event.currentTarget.hidden = true;
-                  }
+          resolvedBrandLabel || showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "agent-rail__identity", children: [
+            showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-mark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "img",
+              {
+                className: "agent-rail__brand-logo",
+                src: resolvedBrandLogoUrl,
+                alt: "",
+                onError: () => {
+                  setFailedLogoUrl(resolvedBrandLogoUrl ?? null);
                 }
-              ) : null
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-label", children: brandLabel })
-          ] }),
+              }
+            ) }) : null,
+            resolvedBrandLabel ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-label", children: resolvedBrandLabel }) : null
+          ] }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "agent-rail__actions", children: [
             onReset ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
@@ -2444,7 +2573,7 @@ function AgentRail({
               {
                 type: "button",
                 className: "agent-rail__expand",
-                "aria-label": expanded ? "Exit focus view" : "Open focus view",
+                "aria-label": expanded ? "Exit full screen" : "Open full screen",
                 onClick: onExpandToggle,
                 children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RestoreIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpandIcon, {})
               }
@@ -2453,7 +2582,14 @@ function AgentRail({
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: transcriptRef, className: "agent-rail__transcript", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "agent-rail__thread", children: [
           !hasVisitorMessages2 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "agent-rail__welcome", "aria-label": "Welcome", children: [
-            greeting?.role === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { message: greeting, onBook }) : null,
+            greeting?.role === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              MessageBubble,
+              {
+                message: greeting,
+                brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+                onBook
+              }
+            ) : null,
             showIdleFollowUps ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "agent-rail__followups-slot", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               FollowUpChips,
               {
@@ -2464,21 +2600,37 @@ function AgentRail({
               }
             ) }) : null
           ] }) : null,
-          transcriptMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { message, onBook }, message.id)),
-          completedAnswer ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { message: completedAnswer, onBook }) : null,
+          transcriptMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            MessageBubble,
+            {
+              message,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+              onBook
+            },
+            message.id
+          )),
           showActivity ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             AgentActivityBubble,
             {
-              brandLabel,
-              brandLogoUrl,
+              brandLabel: resolvedBrandLabel,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
               failed: state.phase === "error",
               steps: state.toolSteps
             }
           ) : null,
+          completedAnswer ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            MessageBubble,
+            {
+              message: completedAnswer,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+              onBook
+            }
+          ) : null,
           streamingMessage ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             MessageBubble,
             {
               message: streamingMessage,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
               offer: state.pendingOffer,
               onBook
             }
@@ -2590,9 +2742,9 @@ function DragDots() {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "assist-edge-tab__dots", "aria-hidden": "true", children: Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("i", {}, index)) });
 }
 var VARIANT_COPY = {
-  outline: { label: "Assist", aria: "Open Assist" },
+  outline: { label: "Ask anything", aria: "Ask anything" },
   ask: { label: "Ask anything", aria: "Ask anything" },
-  fill: { label: "Assist", aria: "Open Assist" }
+  fill: { label: "Ask anything", aria: "Ask anything" }
 };
 function AssistEdgeTab({
   variant,
@@ -2610,26 +2762,34 @@ function AssistEdgeTab({
   mobile = false,
   surfaceColor,
   textColor,
+  colorScheme = "auto",
   onOpen
 }) {
+  const resolvedColorScheme = useAgentColorScheme(colorScheme);
   const copy = VARIANT_COPY[variant];
   const visibleLabel = label?.trim() || copy.label;
   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 style = {
     "--tab-along": `${along}%`,
     "--tab-inset": `${inset}px`,
-    ...brandColor ? { "--as-brand": brandColor } : {},
+    ...resolvedBrandColor ? { "--as-brand": resolvedBrandColor } : {},
     ...brandForeground ? { "--as-visitor-text": brandForeground } : {},
-    ...borderColor ? { "--as-border": borderColor } : {},
+    ...resolvedBorderColor ? { "--as-border": resolvedBorderColor } : {},
     ...fontFamily ? { "--as-font-display": fontFamily } : {},
-    ...surfaceColor ? { "--as-surface": surfaceColor } : {},
-    ...textColor ? { "--as-text": textColor } : {}
+    ...resolvedSurfaceColor ? { "--as-surface": resolvedSurfaceColor } : {},
+    ...resolvedTextColor ? { "--as-text": resolvedTextColor } : {},
+    colorScheme: resolvedColorScheme
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       type: "button",
       className: `assist-edge-tab assist-edge-tab--${variant} assist-edge-tab--${side}${mobile ? " assist-edge-tab--mobile" : ""}${visible ? " is-visible" : ""}`,
+      "data-color-scheme": resolvedColorScheme,
       style,
       "aria-label": `Open ${visibleLabel}`,
       "aria-hidden": !visible,
@@ -2643,7 +2803,7 @@ function AssistEdgeTab({
               className: "assist-edge-tab__mark assist-edge-tab__mark--mobile",
               "aria-hidden": "true",
               children: [
-                customIconUrl?.trim() ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabMarkIcon, { customIconUrl }) : visibleLabel.slice(0, 1).toUpperCase(),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabMarkIcon, { customIconUrl }),
                 showLogo ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "img",
                   {
@@ -2658,10 +2818,7 @@ function AssistEdgeTab({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "assist-edge-tab__label", children: [
-            "Ask ",
-            visibleLabel
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel })
         ] }) : variant === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabMarkIcon, { customIconUrl }),
@@ -2725,9 +2882,9 @@ function AgentWidget({
 }) {
   const isMobile = useIsMobile();
   const placement = normalizeAgentPlacement(placementInput);
-  const railSlotRef = (0, import_react7.useRef)(null);
-  const [railCollapsed, setRailCollapsed] = (0, import_react7.useState)(defaultCollapsed);
-  const [railExpanded, setRailExpanded] = (0, import_react7.useState)(false);
+  const railSlotRef = (0, import_react10.useRef)(null);
+  const [railCollapsed, setRailCollapsed] = (0, import_react10.useState)(defaultCollapsed);
+  const [railExpanded, setRailExpanded] = (0, import_react10.useState)(false);
   const pageShiftActive = shouldApplyPageShift({
     pageShift,
     isMobile,
@@ -2747,7 +2904,7 @@ function AgentWidget({
     runtimeOrigin,
     greeting: branding?.greeting
   });
-  const agentName = branding?.agentName ?? "Webless Guide";
+  const agentName = branding?.agentName ?? "";
   const tabLabel = branding?.tabLabel ?? agentName;
   const theme = {
     ...branding?.fontFamily ? { fontBody: branding.fontFamily, fontDisplay: branding.fontFamily } : {},
@@ -2766,7 +2923,7 @@ function AgentWidget({
     } : {},
     ...branding?.colors?.border ? { border: branding.colors.border } : {}
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!registerPanelController) return;
     registerAgentPanelController(customerId, {
       open: () => setRailCollapsed(false),
@@ -2781,7 +2938,7 @@ function AgentWidget({
     if (isMobile) setRailCollapsed(false);
     await submit(message);
   }
-  (0, import_react7.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (railCollapsed) return;
     const handleKeyDown = (event) => {
       if (event.key === "Tab" && (isMobile || railExpanded)) {
@@ -2816,58 +2973,40 @@ function AgentWidget({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isMobile, railCollapsed, railExpanded]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "webless-agent-root", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: `webless-agent-root__shell${railCollapsed ? " webless-agent-root__shell--collapsed" : ""}${railExpanded ? " webless-agent-root__shell--expanded" : ""}`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "div",
-            {
-              ref: railSlotRef,
-              className: "webless-agent-root__rail-slot",
-              inert: railCollapsed || void 0,
-              "aria-hidden": railCollapsed,
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                AgentRail,
-                {
-                  theme,
-                  brandLabel: agentName,
-                  brandLogoUrl: branding?.logoUrl,
-                  composerPlaceholder: branding?.composerPlaceholder ?? "Ask as a visitor\u2026",
-                  poweredByLabel: branding?.poweredByLabel ?? "Powered by Webless",
-                  state,
-                  mobileFullscreen: isMobile && !railCollapsed,
-                  expanded: railExpanded,
-                  onCollapse: !isMobile ? () => setRailCollapsed(true) : void 0,
-                  onClose: isMobile ? () => setRailCollapsed(true) : void 0,
-                  onExpandToggle: !isMobile ? () => setRailExpanded((current) => !current) : void 0,
-                  onSubmit: handleSubmit,
-                  onReset: reset,
-                  onRetry: () => void retry(),
-                  onFollowUpSelect: (label) => void handleSubmit(label),
-                  onBook: (input) => void submit(input.displayText, { runtimeText: input.runtimeText })
-                }
-              )
-            }
-          ),
-          !railCollapsed && isMobile || !isMobile && railExpanded && !railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "button",
-            {
-              type: "button",
-              className: `webless-agent-root__backdrop${isMobile ? " webless-agent-root__backdrop--mobile" : ""}`,
-              tabIndex: -1,
-              "aria-label": isMobile ? "Close agent" : "Exit focus view",
-              onClick: () => {
-                if (isMobile) {
-                  setRailCollapsed(true);
-                } else {
-                  setRailExpanded(false);
-                }
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            ref: railSlotRef,
+            className: "webless-agent-root__rail-slot",
+            inert: railCollapsed || void 0,
+            "aria-hidden": railCollapsed,
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              AgentRail,
+              {
+                theme,
+                brandLabel: agentName,
+                brandLogoUrl: branding?.logoUrl,
+                composerPlaceholder: branding?.composerPlaceholder ?? "Ask a question\u2026",
+                poweredByLabel: branding?.poweredByLabel ?? "Powered by Webless",
+                state,
+                mobileFullscreen: isMobile && !railCollapsed,
+                expanded: railExpanded,
+                onCollapse: !isMobile ? () => setRailCollapsed(true) : void 0,
+                onClose: isMobile ? () => setRailCollapsed(true) : void 0,
+                onExpandToggle: !isMobile ? () => setRailExpanded((current) => !current) : void 0,
+                onSubmit: handleSubmit,
+                onReset: reset,
+                onRetry: () => void retry(),
+                onFollowUpSelect: (label) => void handleSubmit(label),
+                onBook: (input) => void submit(input.displayText, { runtimeText: input.runtimeText })
               }
-            }
-          ) : null
-        ]
+            )
+          }
+        )
       }
     ),
     railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(