@webless/agent 0.7.5 → 0.8.0

package/dist/embed.js

@@ -9,7 +9,7 @@ import {
   resetAgentPanel,
   resolveAgentRuntimeConfig,
   submitAgentPanel
-} from "./chunk-CD6TKXGT.js";
+} from "./chunk-JZPXXG76.js";
 
 // src/embed/mount.tsx
 import { createRoot } from "react-dom/client";

package/dist/react.cjs

@@ -24,6 +24,7 @@ __export(react_exports, {
   AGENT_STRUCTURED_TOOL_INPUT_HEADER: () => AGENT_STRUCTURED_TOOL_INPUT_HEADER,
   AGENT_STRUCTURED_TOOL_INPUT_SCHEMA_VERSION: () => AGENT_STRUCTURED_TOOL_INPUT_SCHEMA_VERSION,
   AgentRail: () => AgentRail,
+  AgentTranscript: () => AgentTranscript,
   AgentWidget: () => AgentWidget,
   AssistEdgeTab: () => AssistEdgeTab,
   DEFAULT_AGENT_PLACEMENT: () => DEFAULT_AGENT_PLACEMENT,
@@ -3577,6 +3578,48 @@ var defaultDarkAgentRailTheme = {
   danger: "#ff8da1"
 };
 
+// src/react/lib/agent-theme.ts
+function agentThemeStyle(theme, resolvedColorScheme) {
+  const brandedTheme = { ...defaultAgentRailTheme, ...theme };
+  const resolvedTheme = resolvedColorScheme === "dark" ? {
+    ...brandedTheme,
+    brand: theme?.brand ?? defaultDarkAgentRailTheme.brand,
+    brandDeep: theme?.brandDeep ?? defaultDarkAgentRailTheme.brandDeep,
+    brandSoft: theme?.brandSoft ?? `color-mix(in srgb, ${theme?.brand ?? defaultDarkAgentRailTheme.brand} 18%, ${defaultDarkAgentRailTheme.surface})`,
+    border: theme?.border ?? defaultDarkAgentRailTheme.border,
+    danger: theme?.danger ?? defaultDarkAgentRailTheme.danger,
+    onBrand: theme?.onBrand ?? defaultDarkAgentRailTheme.onBrand,
+    success: theme?.success ?? defaultDarkAgentRailTheme.success,
+    surface: theme?.surface ?? defaultDarkAgentRailTheme.surface,
+    surfaceMuted: theme?.surfaceMuted ?? defaultDarkAgentRailTheme.surfaceMuted,
+    text: theme?.text ?? defaultDarkAgentRailTheme.text,
+    textMuted: theme?.textMuted ?? defaultDarkAgentRailTheme.textMuted,
+    textSubtle: theme?.textSubtle ?? defaultDarkAgentRailTheme.textSubtle,
+    visitorBubble: theme?.visitorBubble ?? theme?.brand ?? defaultDarkAgentRailTheme.visitorBubble
+  } : brandedTheme;
+  return {
+    "--rail-width": resolvedTheme.railMaxWidth,
+    "--as-rail-max-width": resolvedTheme.railMaxWidth,
+    "--as-brand": resolvedTheme.brand,
+    "--as-brand-soft": resolvedTheme.brandSoft,
+    "--as-brand-deep": resolvedTheme.brandDeep,
+    "--as-surface": resolvedTheme.surface,
+    "--as-surface-muted": resolvedTheme.surfaceMuted,
+    "--as-text": resolvedTheme.text,
+    "--as-text-muted": resolvedTheme.textMuted,
+    "--as-text-subtle": resolvedTheme.textSubtle,
+    "--as-border": resolvedTheme.border,
+    "--as-visitor-bubble": resolvedTheme.visitorBubble,
+    "--as-visitor-text": resolvedTheme.visitorText,
+    "--as-on-brand": resolvedTheme.onBrand,
+    "--as-success": resolvedTheme.success,
+    "--as-danger": resolvedTheme.danger,
+    "--as-font-body": resolvedTheme.fontBody,
+    "--as-font-display": resolvedTheme.fontDisplay,
+    colorScheme: resolvedColorScheme
+  };
+}
+
 // src/react/hooks/useAgentColorScheme.ts
 var import_react4 = require("react");
 var DARK_MODE_QUERY = "(prefers-color-scheme: dark)";
@@ -6185,44 +6228,7 @@ function AgentRail({
   const [failedLogoUrl, setFailedLogoUrl] = (0, import_react14.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: theme?.brandDeep ?? defaultDarkAgentRailTheme.brandDeep,
-    brandSoft: theme?.brandSoft ?? `color-mix(in srgb, ${theme?.brand ?? defaultDarkAgentRailTheme.brand} 18%, ${defaultDarkAgentRailTheme.surface})`,
-    border: theme?.border ?? defaultDarkAgentRailTheme.border,
-    danger: theme?.danger ?? defaultDarkAgentRailTheme.danger,
-    onBrand: theme?.onBrand ?? defaultDarkAgentRailTheme.onBrand,
-    success: theme?.success ?? defaultDarkAgentRailTheme.success,
-    surface: theme?.surface ?? defaultDarkAgentRailTheme.surface,
-    surfaceMuted: theme?.surfaceMuted ?? defaultDarkAgentRailTheme.surfaceMuted,
-    text: theme?.text ?? defaultDarkAgentRailTheme.text,
-    textMuted: theme?.textMuted ?? defaultDarkAgentRailTheme.textMuted,
-    textSubtle: theme?.textSubtle ?? defaultDarkAgentRailTheme.textSubtle,
-    visitorBubble: theme?.visitorBubble ?? theme?.brand ?? defaultDarkAgentRailTheme.visitorBubble
-  } : brandedTheme;
-  const railStyle = {
-    "--rail-width": resolvedTheme.railMaxWidth,
-    "--as-rail-max-width": resolvedTheme.railMaxWidth,
-    "--as-brand": resolvedTheme.brand,
-    "--as-brand-soft": resolvedTheme.brandSoft,
-    "--as-brand-deep": resolvedTheme.brandDeep,
-    "--as-surface": resolvedTheme.surface,
-    "--as-surface-muted": resolvedTheme.surfaceMuted,
-    "--as-text": resolvedTheme.text,
-    "--as-text-muted": resolvedTheme.textMuted,
-    "--as-text-subtle": resolvedTheme.textSubtle,
-    "--as-border": resolvedTheme.border,
-    "--as-visitor-bubble": resolvedTheme.visitorBubble,
-    "--as-visitor-text": resolvedTheme.visitorText,
-    "--as-on-brand": resolvedTheme.onBrand,
-    "--as-success": resolvedTheme.success,
-    "--as-danger": resolvedTheme.danger,
-    "--as-font-body": resolvedTheme.fontBody,
-    "--as-font-display": resolvedTheme.fontDisplay,
-    colorScheme: resolvedColorScheme
-  };
+  const railStyle = agentThemeStyle(theme, resolvedColorScheme);
   const pendingInputRequests = (state.pendingInputs ?? []).filter(
     (request) => shouldRenderVisitorInputCard(request) && (!state.pendingOffer || request.kind === "tool-approval")
   );
@@ -7118,12 +7124,71 @@ function AgentWidget({
     ) : null
   ] });
 }
+
+// src/react/components/AgentTranscript/AgentTranscript.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var timestampFormat = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+  timeZone: "UTC"
+});
+function defaultTimestamp(createdAt) {
+  return `${timestampFormat.format(createdAt)} UTC`;
+}
+function AgentTranscript({
+  messages,
+  theme,
+  colorScheme,
+  agentLabel = "Agent",
+  visitorLabel = "Visitor",
+  label = "Conversation transcript",
+  formatTimestamp = defaultTimestamp
+}) {
+  const scheme = useAgentColorScheme(colorScheme);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "ol",
+    {
+      className: "webless-agent-root agent-transcript not-typeset",
+      "data-not-typeset": "",
+      "data-color-scheme": scheme,
+      "aria-label": label,
+      style: agentThemeStyle(theme, scheme),
+      children: messages.map((message) => {
+        const date = new Date(message.createdAt);
+        const validTimestamp = Number.isFinite(date.getTime());
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          "li",
+          {
+            className: `agent-transcript__message agent-transcript__message--${message.role}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "agent-transcript__meta", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: message.role === "visitor" ? visitorLabel : agentLabel }),
+                validTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("time", { dateTime: date.toISOString(), children: formatTimestamp(message.createdAt) }) : null
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                MessageBubble,
+                {
+                  message: message.role === "agent" ? { ...message, streaming: false } : message,
+                  bookingDisabled: true
+                }
+              )
+            ]
+          },
+          message.id
+        );
+      })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AGENT_ANSWER_FEEDBACK_EVENT_TYPE,
   AGENT_STRUCTURED_TOOL_INPUT_HEADER,
   AGENT_STRUCTURED_TOOL_INPUT_SCHEMA_VERSION,
   AgentRail,
+  AgentTranscript,
   AgentWidget,
   AssistEdgeTab,
   DEFAULT_AGENT_PLACEMENT,