@webless/agent 0.7.5 → 0.8.0

package/README.md

@@ -43,3 +43,22 @@ Agent Studio generates a live preview of the agent on your pages, so you can che
 ## This npm package
 
 `@webless/agent` is published for Webless tooling and internal use. It powers the script bundle served from the console install flow.
+
+## Render a stored conversation in React
+
+`AgentTranscript` reuses the agent's message renderer without connecting to a runtime or creating a session. It renders a snapshot: no composer, feedback, regeneration, or booking actions. Links and source references remain readable; booking controls are disabled.
+
+```tsx
+import { AgentTranscript } from "@webless/agent/react";
+import "@webless/agent/react.css";
+
+<AgentTranscript
+  messages={[
+    { id: "1", role: "visitor", text: "Can I book a demo?", createdAt: 1789056000000 },
+    { id: "2", role: "agent", text: "What day works for you?", createdAt: 1789056001000 },
+  ]}
+  colorScheme="light"
+/>
+```
+
+The host owns fetching, authorization, pagination, scrolling, and review controls. Pass `ConversationMessage` snapshots with stable IDs and millisecond timestamps. Optional `theme`, `agentLabel`, `visitorLabel`, `label`, and `formatTimestamp` props adapt the presentation to the host. Timestamps default to UTC. Structured references render when supplied in the message; the component does not fetch missing history or tool results.

package/dist/{chunk-CD6TKXGT.js → chunk-JZPXXG76.js}

@@ -4074,6 +4074,48 @@ function MessageActions({
 // src/react/components/AgentRail/AgentRail.tsx
 import { useEffect as useEffect6, useRef as useRef6, useState as useState9 } from "react";
 
+// 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
 import { useSyncExternalStore } from "react";
 var DARK_MODE_QUERY = "(prefers-color-scheme: dark)";
@@ -6070,44 +6112,7 @@ function AgentRail({
   const [failedLogoUrl, setFailedLogoUrl] = useState9(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")
   );
@@ -7123,6 +7128,9 @@ export {
   submitAgentPanel,
   defaultAgentRailTheme,
   defaultDarkAgentRailTheme,
+  agentThemeStyle,
+  useAgentColorScheme,
+  MessageBubble,
   MessageActions,
   AgentRail,
   AssistEdgeTab,
@@ -7132,4 +7140,4 @@ export {
   sendAgentAnswerFeedback,
   AgentWidget
 };
-//# sourceMappingURL=chunk-CD6TKXGT.js.map
+//# sourceMappingURL=chunk-JZPXXG76.js.map