@webless/agent 0.5.0 → 0.6.0

package/dist/{chunk-E4JSTYPX.js → chunk-Y7Z3ZIAQ.js}

@@ -985,7 +985,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}`;
 }
@@ -1011,6 +1011,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;
 }
@@ -1022,15 +1036,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;
@@ -1111,7 +1129,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) {
@@ -1245,13 +1264,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 = useCallback(() => {
@@ -1565,18 +1586,65 @@ 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/components/AgentRail/AgentRail.tsx
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState6 } from "react";
+
+// src/react/hooks/useAgentColorScheme.ts
+import { useSyncExternalStore } from "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 = 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
+import { useState as useState2 } from "react";
 import { Fragment, jsx, jsxs } from "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(
@@ -1587,22 +1655,24 @@ 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";
 }
 function stepLabel(step, brandLabel) {
-  return step.kind === "planning" ? brandLabel : step.label;
+  return step.kind === "planning" ? brandLabel || "Supervisor" : step.label;
 }
 function stepDetail(step, steps) {
   if (step.kind !== "planning" || step.state !== "completed") {
     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 `Routed your question to ${specialists[0]?.label}`;
   if (specialists.length > 1)
-    return `Delegated to ${specialists.length} specialists`;
+    return `Routed your question to ${specialists.length} specialists`;
   if (steps.some((item) => item.kind === "search"))
     return "Used built-in Search & Discovery";
   return step.detail;
@@ -1633,12 +1703,17 @@ 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] = useState2(
+    null
+  );
+  const detailsOpen = active || expandedReceiptId === receiptId;
   return /* @__PURE__ */ jsxs("article", { className: "agent-activity-bubble", children: [
     /* @__PURE__ */ jsxs("p", { className: "agent-activity-bubble__status", "aria-live": "polite", children: [
       /* @__PURE__ */ jsx(
@@ -1650,9 +1725,23 @@ function AgentActivityBubble({
       ),
       workSummary(steps, failed, brandLabel)
     ] }),
-    /* @__PURE__ */ jsxs("details", { className: "agent-activity-bubble__details", open: active, children: [
-      /* @__PURE__ */ jsx("summary", { children: "Work details" }),
-      /* @__PURE__ */ jsx("ol", { className: "agent-activity-bubble__steps", children: steps.map((step) => {
+    /* @__PURE__ */ jsxs("div", { className: "agent-activity-bubble__details", children: [
+      /* @__PURE__ */ 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__ */ jsx("ol", { className: "agent-activity-bubble__steps", children: steps.map((step) => {
         const detail = stepDetail(step, steps);
         return /* @__PURE__ */ jsxs(
           "li",
@@ -1684,7 +1773,7 @@ function AgentActivityBubble({
               /* @__PURE__ */ jsxs("span", { className: "agent-activity-bubble__step-copy", children: [
                 /* @__PURE__ */ jsxs("span", { className: "agent-activity-bubble__step-heading", children: [
                   /* @__PURE__ */ jsx("strong", { children: stepLabel(step, brandLabel) }),
-                  /* @__PURE__ */ jsx("small", { children: step.kind === "specialist" ? "Specialist" : step.kind === "search" ? "Built-in capability" : "Supervisor" })
+                  step.kind === "planning" && !brandLabel ? null : /* @__PURE__ */ jsx("small", { children: step.kind === "specialist" ? "Specialist" : step.kind === "search" ? "Built-in capability" : "Supervisor" })
                 ] }),
                 detail ? /* @__PURE__ */ jsx("span", { className: "agent-activity-bubble__step-detail", children: detail }) : null
               ] })
@@ -1692,13 +1781,13 @@ function AgentActivityBubble({
           },
           step.id
         );
-      }) })
+      }) }) : null
     ] })
   ] });
 }
 
 // src/react/components/Composer/Composer.tsx
-import { useRef as useRef2, useState as useState2 } from "react";
+import { useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SendIcon() {
   return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M8 12V4M8 4l-3 3M8 4l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -1709,7 +1798,7 @@ function Composer({
   variant = "default",
   onSubmit
 }) {
-  const [value, setValue] = useState2("");
+  const [value, setValue] = useState3("");
   const inputRef = useRef2(null);
   function submitCurrent() {
     const trimmed = value.trim();
@@ -1795,8 +1884,11 @@ function FollowUpChips({
   ] });
 }
 
+// src/react/components/MessageBubble/MessageBubble.tsx
+import { useState as useState5 } from "react";
+
 // src/react/components/BookingCard/BookingCard.tsx
-import { useId, useMemo as useMemo2, useState as useState3 } from "react";
+import { useId, useMemo as useMemo2, useState as useState4 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function monthFromKey(key) {
   const [year, month] = key.split("-").map(Number);
@@ -1827,12 +1919,12 @@ function BookingCard({
 }) {
   const fieldId = useId();
   const defaultType = offer.eventTypes[0]?.uri ?? offer.slots[0]?.eventTypeUri ?? "";
-  const [step, setStep] = useState3("date");
-  const [eventTypeUri, setEventTypeUri] = useState3(defaultType);
-  const [selectedDate, setSelectedDate] = useState3("");
-  const [startTime, setStartTime] = useState3("");
-  const [name, setName] = useState3("");
-  const [email, setEmail] = useState3("");
+  const [step, setStep] = useState4("date");
+  const [eventTypeUri, setEventTypeUri] = useState4(defaultType);
+  const [selectedDate, setSelectedDate] = useState4("");
+  const [startTime, setStartTime] = useState4("");
+  const [name, setName] = useState4("");
+  const [email, setEmail] = useState4("");
   const slots = useMemo2(
     () => bookingSlotsForEventType(offer.slots, eventTypeUri),
     [eventTypeUri, offer.slots]
@@ -1845,7 +1937,7 @@ function BookingCard({
     }
     return next;
   }, [slots]);
-  const [visibleMonth, setVisibleMonth] = useState3(
+  const [visibleMonth, setVisibleMonth] = useState4(
     () => firstAvailableBookingMonth(slots)
   );
   function selectEventType(nextType) {
@@ -2063,9 +2155,13 @@ import "streamdown/styles.css";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function MessageBubble({
   message,
+  brandLogoUrl,
   offer,
   onBook
 }) {
+  const resolvedLogoUrl = brandLogoUrl?.trim();
+  const [failedLogoUrl, setFailedLogoUrl] = useState5(null);
+  const showBrandLogo = Boolean(resolvedLogoUrl) && failedLogoUrl !== resolvedLogoUrl;
   const cards = message.role === "agent" ? extractToolCards(message.text) : [];
   const extractedOffers = cards.filter(
     (card) => card.type === "booking_offer"
@@ -2077,21 +2173,34 @@ function MessageBubble({
   if (message.role === "visitor") {
     return /* @__PURE__ */ jsx5("article", { className: "message-bubble message-bubble--visitor", children: /* @__PURE__ */ jsx5("p", { className: "message-bubble__text", children: message.text }) });
   }
+  const agentText = /* @__PURE__ */ jsx5("div", { className: "message-bubble__text", children: /* @__PURE__ */ jsx5(
+    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__ */ jsxs5("article", { className: "message-bubble message-bubble--agent", children: [
-    displayText ? /* @__PURE__ */ jsx5("div", { className: "message-bubble__text", children: /* @__PURE__ */ jsx5(
-      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__ */ jsxs5("div", { className: "message-bubble__agent-row", children: [
+      /* @__PURE__ */ jsx5("span", { className: "message-bubble__agent-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(
+        "img",
+        {
+          src: resolvedLogoUrl,
+          alt: "",
+          onError: () => {
+            setFailedLogoUrl(resolvedLogoUrl ?? null);
+          }
+        }
+      ) }),
+      agentText
+    ] }) : agentText : null,
     offers.map((nextOffer, index) => /* @__PURE__ */ jsx5(
       BookingCard,
       {
@@ -2166,7 +2275,8 @@ function RestoreIcon() {
 function AgentRail({
   state,
   theme,
-  brandLabel = "Webless Assist",
+  colorScheme = "auto",
+  brandLabel = "",
   brandLogoUrl,
   poweredByLabel = "Powered by Webless",
   composerPlaceholder = "Ask anything\u2026",
@@ -2182,7 +2292,27 @@ function AgentRail({
   onBook
 }) {
   const transcriptRef = useRef3(null);
-  const resolvedTheme = { ...defaultAgentRailTheme, ...theme };
+  const resolvedBrandLabel = brandLabel.trim();
+  const resolvedBrandLogoUrl = brandLogoUrl?.trim();
+  const [failedLogoUrl, setFailedLogoUrl] = useState6(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,
@@ -2200,7 +2330,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;
@@ -2211,7 +2342,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;
@@ -2243,6 +2374,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,
@@ -2270,23 +2402,20 @@ function AgentRail({
               children: /* @__PURE__ */ jsx6(CloseIcon, {})
             }
           ) : /* @__PURE__ */ jsx6("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs6("span", { className: "agent-rail__identity", children: [
-            /* @__PURE__ */ jsxs6("span", { className: "agent-rail__brand-mark", "aria-hidden": "true", children: [
-              brandLabel.slice(0, 1).toUpperCase(),
-              brandLogoUrl ? /* @__PURE__ */ jsx6(
-                "img",
-                {
-                  className: "agent-rail__brand-logo",
-                  src: brandLogoUrl,
-                  alt: "",
-                  onError: (event) => {
-                    event.currentTarget.hidden = true;
-                  }
+          resolvedBrandLabel || showBrandLogo ? /* @__PURE__ */ jsxs6("span", { className: "agent-rail__identity", children: [
+            showBrandLogo ? /* @__PURE__ */ jsx6("span", { className: "agent-rail__brand-mark", "aria-hidden": "true", children: /* @__PURE__ */ jsx6(
+              "img",
+              {
+                className: "agent-rail__brand-logo",
+                src: resolvedBrandLogoUrl,
+                alt: "",
+                onError: () => {
+                  setFailedLogoUrl(resolvedBrandLogoUrl ?? null);
                 }
-              ) : null
-            ] }),
-            /* @__PURE__ */ jsx6("span", { className: "agent-rail__brand-label", children: brandLabel })
-          ] }),
+              }
+            ) }) : null,
+            resolvedBrandLabel ? /* @__PURE__ */ jsx6("span", { className: "agent-rail__brand-label", children: resolvedBrandLabel }) : null
+          ] }) : null,
           /* @__PURE__ */ jsxs6("span", { className: "agent-rail__actions", children: [
             onReset ? /* @__PURE__ */ jsx6(
               "button",
@@ -2304,7 +2433,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__ */ jsx6(RestoreIcon, {}) : /* @__PURE__ */ jsx6(ExpandIcon, {})
               }
@@ -2313,7 +2442,14 @@ function AgentRail({
         ] }) }),
         /* @__PURE__ */ jsx6("div", { ref: transcriptRef, className: "agent-rail__transcript", children: /* @__PURE__ */ jsxs6("div", { className: "agent-rail__thread", children: [
           !hasVisitorMessages2 ? /* @__PURE__ */ jsxs6("section", { className: "agent-rail__welcome", "aria-label": "Welcome", children: [
-            greeting?.role === "agent" ? /* @__PURE__ */ jsx6(MessageBubble, { message: greeting, onBook }) : null,
+            greeting?.role === "agent" ? /* @__PURE__ */ jsx6(
+              MessageBubble,
+              {
+                message: greeting,
+                brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+                onBook
+              }
+            ) : null,
             showIdleFollowUps ? /* @__PURE__ */ jsx6("div", { className: "agent-rail__followups-slot", children: /* @__PURE__ */ jsx6(
               FollowUpChips,
               {
@@ -2324,21 +2460,37 @@ function AgentRail({
               }
             ) }) : null
           ] }) : null,
-          transcriptMessages.map((message) => /* @__PURE__ */ jsx6(MessageBubble, { message, onBook }, message.id)),
-          completedAnswer ? /* @__PURE__ */ jsx6(MessageBubble, { message: completedAnswer, onBook }) : null,
+          transcriptMessages.map((message) => /* @__PURE__ */ jsx6(
+            MessageBubble,
+            {
+              message,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+              onBook
+            },
+            message.id
+          )),
           showActivity ? /* @__PURE__ */ jsx6(
             AgentActivityBubble,
             {
-              brandLabel,
-              brandLogoUrl,
+              brandLabel: resolvedBrandLabel,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
               failed: state.phase === "error",
               steps: state.toolSteps
             }
           ) : null,
+          completedAnswer ? /* @__PURE__ */ jsx6(
+            MessageBubble,
+            {
+              message: completedAnswer,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+              onBook
+            }
+          ) : null,
           streamingMessage ? /* @__PURE__ */ jsx6(
             MessageBubble,
             {
               message: streamingMessage,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
               offer: state.pendingOffer,
               onBook
             }
@@ -2450,9 +2602,9 @@ function DragDots() {
   return /* @__PURE__ */ jsx7("span", { className: "assist-edge-tab__dots", "aria-hidden": "true", children: Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ jsx7("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,
@@ -2470,26 +2622,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__ */ jsxs7(
     "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,
@@ -2503,7 +2663,7 @@ function AssistEdgeTab({
               className: "assist-edge-tab__mark assist-edge-tab__mark--mobile",
               "aria-hidden": "true",
               children: [
-                customIconUrl?.trim() ? /* @__PURE__ */ jsx7(TabMarkIcon, { customIconUrl }) : visibleLabel.slice(0, 1).toUpperCase(),
+                /* @__PURE__ */ jsx7(TabMarkIcon, { customIconUrl }),
                 showLogo ? /* @__PURE__ */ jsx7(
                   "img",
                   {
@@ -2518,10 +2678,7 @@ function AssistEdgeTab({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs7("span", { className: "assist-edge-tab__label", children: [
-            "Ask ",
-            visibleLabel
-          ] })
+          /* @__PURE__ */ jsx7("span", { className: "assist-edge-tab__label", children: visibleLabel })
         ] }) : variant === "outline" ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
           /* @__PURE__ */ jsxs7("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx7(TabMarkIcon, { customIconUrl }),
@@ -2569,7 +2726,7 @@ function AssistEdgeTab({
 }
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-import { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState8 } from "react";
 
 // src/react/page-shift.ts
 import { useEffect as useEffect3 } from "react";
@@ -2652,9 +2809,9 @@ function usePageShift(input) {
 }
 
 // src/react/hooks/useIsMobile.ts
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState7 } from "react";
 function useIsMobile(breakpoint = 767) {
-  const [isMobile, setIsMobile] = useState4(
+  const [isMobile, setIsMobile] = useState7(
     () => typeof window !== "undefined" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches
   );
   useEffect4(() => {
@@ -2700,8 +2857,8 @@ function AgentWidget({
   const isMobile = useIsMobile();
   const placement = normalizeAgentPlacement(placementInput);
   const railSlotRef = useRef4(null);
-  const [railCollapsed, setRailCollapsed] = useState5(defaultCollapsed);
-  const [railExpanded, setRailExpanded] = useState5(false);
+  const [railCollapsed, setRailCollapsed] = useState8(defaultCollapsed);
+  const [railExpanded, setRailExpanded] = useState8(false);
   const pageShiftActive = shouldApplyPageShift({
     pageShift,
     isMobile,
@@ -2721,7 +2878,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 } : {},
@@ -2790,58 +2947,40 @@ function AgentWidget({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isMobile, railCollapsed, railExpanded]);
   return /* @__PURE__ */ jsxs8("div", { className: "webless-agent-root", children: [
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         className: `webless-agent-root__shell${railCollapsed ? " webless-agent-root__shell--collapsed" : ""}${railExpanded ? " webless-agent-root__shell--expanded" : ""}`,
-        children: [
-          /* @__PURE__ */ jsx8(
-            "div",
-            {
-              ref: railSlotRef,
-              className: "webless-agent-root__rail-slot",
-              inert: railCollapsed || void 0,
-              "aria-hidden": railCollapsed,
-              children: /* @__PURE__ */ jsx8(
-                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__ */ jsx8(
-            "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__ */ jsx8(
+          "div",
+          {
+            ref: railSlotRef,
+            className: "webless-agent-root__rail-slot",
+            inert: railCollapsed || void 0,
+            "aria-hidden": railCollapsed,
+            children: /* @__PURE__ */ jsx8(
+              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__ */ jsx8(
@@ -2880,8 +3019,9 @@ export {
   openAgentPanel,
   closeAgentPanel,
   defaultAgentRailTheme,
+  defaultDarkAgentRailTheme,
   AgentRail,
   AssistEdgeTab,
   AgentWidget
 };
-//# sourceMappingURL=chunk-E4JSTYPX.js.map
+//# sourceMappingURL=chunk-Y7Z3ZIAQ.js.map