@optilogic/chat 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/chat",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Chat UI components for Optilogic - AgentResponse and related components for LLM interactions",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -24,8 +24,8 @@
     "README.md"
   ],
   "dependencies": {
-    "@optilogic/core": "1.3.2",
-    "@optilogic/editor": "1.3.2"
+    "@optilogic/editor": "1.3.4",
+    "@optilogic/core": "1.3.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/agent-response/AgentResponse.tsx

@@ -15,6 +15,13 @@ import type { HITLInteraction } from "../hitl-interactions";
 import { AgentTimeline, createTimelineUIState } from "../agent-timeline";
 import type { TimelineUIState } from "../agent-timeline";
 
+export interface AgentResponseClassNames {
+  /** Classes for the inner container (border, rounded corners, overflow) */
+  container?: string;
+  /** Classes for the response content section (background, padding) */
+  response?: string;
+}
+
 export interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
   /** The response state to render */
   state: AgentResponseState;
@@ -98,6 +105,22 @@ export interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement>
    * Defaults to "300px". Set to "none" to disable the constraint.
    */
   timelineMaxHeight?: string;
+
+  /**
+   * Class name overrides for internal elements.
+   * Use this to customize the container border/background or response section styling.
+   *
+   * @example
+   * // Transparent background and borders
+   * <AgentResponse
+   *   state={state}
+   *   classNames={{
+   *     container: "border-transparent",
+   *     response: "bg-transparent",
+   *   }}
+   * />
+   */
+  classNames?: AgentResponseClassNames;
 }
 
 /**
@@ -151,6 +174,7 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
       renderMarkdown,
       renderThinkingMarkdown,
       timelineMaxHeight,
+      classNames,
       className,
       ...props
     },
@@ -241,7 +265,7 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
         {...props}
       >
         {/* Message Content Container */}
-        <div className="border border-border rounded-lg overflow-hidden">
+        <div className={cn("border border-border rounded-lg overflow-hidden", classNames?.container)}>
           {/* Metadata Row - show if there's any metadata or thinking */}
           {showMetadataRow && (
             <>
@@ -297,7 +321,8 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
             <div
               className={cn(
                 "bg-muted/50 p-4",
-                showMetadataRow && "border-t border-border"
+                showMetadataRow && "border-t border-border",
+                classNames?.response
               )}
             >
               {renderMarkdown ? (

package/src/components/agent-response/hooks/useAgentResponseAccumulator.ts

@@ -1,7 +1,10 @@
 /**
  * useAgentResponseAccumulator Hook
  *
- * Accumulates agent response messages into a unified state
+ * Accumulates agent response messages into a unified state.
+ *
+ * Thin wrapper around `reduceAgentMessage` — the pure reducer can be used
+ * directly outside React for replaying historical events.
  */
 
 import { useState, useCallback } from "react";
@@ -10,14 +13,8 @@ import {
   type AgentResponseState,
   type AgentMessage,
   type GenericWebSocketMessage,
-  type ToolCall,
-  type KnowledgeItem,
-  type MemoryItem,
-  type StatusItem,
-  type ThinkingStep,
-  type PotentialResponse,
 } from "../types";
-import { buildTimelineEntries } from "../../agent-timeline/utils";
+import { reduceAgentMessage } from "../reducer";
 
 export interface UseAgentResponseAccumulatorOptions {
   /** WebSocket topic to filter messages (optional, for convenience) */
@@ -54,7 +51,6 @@ export function useAgentResponseAccumulator(
 
   const handleMessage = useCallback(
     (message: unknown) => {
-      // If topic filter is provided, check for matching topic
       let payload: AgentMessage;
 
       if (topic) {
@@ -62,216 +58,10 @@ export function useAgentResponseAccumulator(
         if (msg.topic !== topic) return;
         payload = msg.message;
       } else {
-        // Assume message is the payload directly
         payload = message as AgentMessage;
       }
 
-      setState((prev) => {
-        // If we receive a non-status message while idle, transition to processing
-        let newStatus = prev.status;
-        const isFirstMessage = prev.status === "idle" && payload.type !== "status";
-        if (isFirstMessage) {
-          newStatus = "processing";
-        }
-
-        // Track first message time for total time calculation
-        const firstMessageTime =
-          prev.firstMessageTime ?? (isFirstMessage ? Date.now() : null);
-
-        switch (payload.type) {
-          case "status":
-            // "Harness connected" resets to idle
-            if (
-              payload.message === "Harness connected" ||
-              payload.status === "Harness connected"
-            ) {
-              return { ...initialAgentResponseState };
-            }
-            return { ...prev, status: newStatus };
-
-          case "thinking": {
-            // Check if this is a structured thinking step
-            if (payload.thinkingStep) {
-              const newStep: ThinkingStep = {
-                id: payload.thinkingStep.id || `step-${Date.now()}`,
-                label: payload.thinkingStep.label,
-                content: payload.thinkingStep.content,
-                depth: payload.thinkingStep.depth ?? payload.depth ?? 0,
-                isCollapsed: payload.thinkingStep.isCollapsed,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-              };
-              const thinkingStartTime = prev.thinkingStartTime ?? Date.now();
-              const next = {
-                ...prev,
-                status: newStatus,
-                thinkingSteps: [...(prev.thinkingSteps || []), newStep],
-                thinkingStartTime,
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-
-            // Plain text thinking — concatenate for backward compat AND
-            // push a ThinkingStep so the timeline gets individual entries.
-            const newThinking = payload.message || payload.content || "";
-            // Add line break between thinking messages
-            const separator = prev.thinking && newThinking ? "\n\n" : "";
-            // Set thinkingStartTime on first thinking message
-            const thinkingStartTime =
-              prev.thinkingStartTime ?? (newThinking ? Date.now() : null);
-            const prevSteps = prev.thinkingSteps || [];
-            const plainStep: ThinkingStep = {
-              id: `step-${prevSteps.length}`,
-              label: newThinking,
-              content: newThinking,
-              depth: payload.depth ?? 0,
-              timestamp: Date.now(),
-              agentName: payload.agentName,
-              parentAgent: payload.parentAgent,
-            };
-            const next = {
-              ...prev,
-              status: newStatus,
-              thinking: prev.thinking + separator + newThinking,
-              thinkingSteps: [...prevSteps, plainStep],
-              thinkingStartTime,
-              firstMessageTime,
-            };
-            return { ...next, timelineEntries: buildTimelineEntries(next) };
-          }
-
-          case "tool_call": {
-            // Handle both formats: { message: "ToolName" } or { tool: { id, name, arguments } }
-            const toolName = payload.message || payload.tool?.name;
-            if (toolName) {
-              const newToolCall: ToolCall = {
-                id: payload.tool?.id || `tool-${Date.now()}`,
-                name: toolName,
-                arguments: payload.tool?.arguments,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-                depth: payload.depth,
-              };
-              const next = {
-                ...prev,
-                status: newStatus,
-                toolCalls: [...prev.toolCalls, newToolCall],
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-            return { ...prev, status: newStatus, firstMessageTime };
-          }
-
-          case "knowledge": {
-            // Handle both formats: { message: "content" } or { knowledge: { id, source, content } }
-            const knowledgeContent = payload.message || payload.knowledge?.content;
-            if (knowledgeContent) {
-              const newKnowledge: KnowledgeItem = {
-                id: payload.knowledge?.id || `knowledge-${Date.now()}`,
-                source: payload.knowledge?.source || "unknown",
-                content: knowledgeContent,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-                depth: payload.depth,
-              };
-              const next = {
-                ...prev,
-                status: newStatus,
-                knowledge: [...prev.knowledge, newKnowledge],
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-            return { ...prev, status: newStatus, firstMessageTime };
-          }
-
-          case "memory": {
-            // Handle both formats: { message: "content" } or { memory: { id, type, content } }
-            const memoryContent = payload.message || payload.memory?.content;
-            if (memoryContent) {
-              const newMemory: MemoryItem = {
-                id: payload.memory?.id || `memory-${Date.now()}`,
-                type: payload.memory?.type || "unknown",
-                content: memoryContent,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-                depth: payload.depth,
-              };
-              const next = {
-                ...prev,
-                status: newStatus,
-                memory: [...prev.memory, newMemory],
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-            return { ...prev, status: newStatus, firstMessageTime };
-          }
-
-          case "response":
-            return {
-              ...prev,
-              status: "complete",
-              response: payload.message || payload.content || "",
-              responseCompleteTime: Date.now(),
-              firstMessageTime: prev.firstMessageTime ?? Date.now(),
-            };
-
-          case "status_update": {
-            const statusMessage = payload.message || payload.statusUpdate?.message;
-            if (statusMessage) {
-              const newStatusItem: StatusItem = {
-                id: payload.statusUpdate?.id || `status-${Date.now()}`,
-                message: statusMessage,
-                agent: payload.statusUpdate?.agent,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-                depth: payload.depth,
-              };
-              const next = {
-                ...prev,
-                status: newStatus,
-                statusUpdates: [...prev.statusUpdates, newStatusItem],
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-            return { ...prev, status: newStatus, firstMessageTime };
-          }
-
-          case "potential_response": {
-            const respContent = payload.message || payload.content || "";
-            if (respContent) {
-              const newResp: PotentialResponse = {
-                id: `resp-${Date.now()}`,
-                content: respContent,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-                depth: payload.depth,
-              };
-              const next = {
-                ...prev,
-                status: newStatus,
-                potentialResponses: [...(prev.potentialResponses || []), newResp],
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-            return { ...prev, status: newStatus, firstMessageTime };
-          }
-
-          default:
-            return { ...prev, status: newStatus, firstMessageTime };
-        }
-      });
+      setState((prev) => reduceAgentMessage(prev, payload));
     },
     [topic]
   );

package/src/components/agent-response/index.ts

@@ -7,7 +7,7 @@
 
 // Main component
 export { AgentResponse } from "./AgentResponse";
-export type { AgentResponseProps } from "./AgentResponse";
+export type { AgentResponseProps, AgentResponseClassNames } from "./AgentResponse";
 
 // Sub-components (for advanced customization)
 export {
@@ -52,6 +52,9 @@ export type {
 
 export { initialAgentResponseState } from "./types";
 
+// Pure reducer (for non-React replay of AgentMessage streams)
+export { reduceAgentMessage } from "./reducer";
+
 // Utilities
 export { formatTime, formatTotalTime } from "./utils";
 

package/src/components/agent-response/reducer.ts

@@ -0,0 +1,252 @@
+/**
+ * Pure reducer for agent response messages.
+ *
+ * Used by `useAgentResponseAccumulator` for live streaming, and exported so
+ * non-React callers (e.g. server-side or store-based replay of historical
+ * conversations) can rebuild the same `AgentResponseState` from a sequence of
+ * `AgentMessage` events without rendering a component.
+ *
+ * Replay note on stable IDs: when a payload omits a per-item id
+ * (`tool.id`, `thinkingStep.id`, `knowledge.id`, `memory.id`,
+ * `statusUpdate.id`), the reducer falls back to `${type}-${Date.now()}`. That
+ * is fine for live streams but will produce different React keys on each
+ * replay. Callers reconstructing `AgentMessage` events from persisted rows
+ * should populate these ids from a stable source (e.g. the supplement-row
+ * primary key) so timeline keys remain consistent across reloads.
+ */
+
+import {
+  initialAgentResponseState,
+  type AgentResponseState,
+  type AgentMessage,
+  type ToolCall,
+  type KnowledgeItem,
+  type MemoryItem,
+  type StatusItem,
+  type ThinkingStep,
+  type PotentialResponse,
+} from "./types";
+import { buildTimelineEntries } from "../agent-timeline/utils";
+
+/**
+ * Pure reducer: apply a single `AgentMessage` to the accumulated state.
+ *
+ * `payload.timestamp` (epoch ms), if supplied, is used for the new item's
+ * `timestamp` and any state-level timing fields this call sets
+ * (`firstMessageTime`, `thinkingStartTime`, `responseCompleteTime`). When
+ * absent, `Date.now()` is used — matching the prior live-streaming behaviour.
+ *
+ * @example
+ *   const state = events.reduce(reduceAgentMessage, initialAgentResponseState);
+ */
+export function reduceAgentMessage(
+  prev: AgentResponseState,
+  payload: AgentMessage,
+): AgentResponseState {
+  const now = payload.timestamp ?? Date.now();
+
+  // If we receive a non-status message while idle, transition to processing
+  let newStatus = prev.status;
+  const isFirstMessage = prev.status === "idle" && payload.type !== "status";
+  if (isFirstMessage) {
+    newStatus = "processing";
+  }
+
+  // Track first message time for total time calculation
+  const firstMessageTime =
+    prev.firstMessageTime ?? (isFirstMessage ? now : null);
+
+  switch (payload.type) {
+    case "status":
+      // "Harness connected" resets to idle
+      if (
+        payload.message === "Harness connected" ||
+        payload.status === "Harness connected"
+      ) {
+        return { ...initialAgentResponseState };
+      }
+      return { ...prev, status: newStatus };
+
+    case "thinking": {
+      // Check if this is a structured thinking step
+      if (payload.thinkingStep) {
+        const newStep: ThinkingStep = {
+          id: payload.thinkingStep.id || `step-${now}`,
+          label: payload.thinkingStep.label,
+          content: payload.thinkingStep.content,
+          depth: payload.thinkingStep.depth ?? payload.depth ?? 0,
+          isCollapsed: payload.thinkingStep.isCollapsed,
+          timestamp: now,
+          agentName: payload.agentName,
+          parentAgent: payload.parentAgent,
+        };
+        const thinkingStartTime = prev.thinkingStartTime ?? now;
+        const next = {
+          ...prev,
+          status: newStatus,
+          thinkingSteps: [...(prev.thinkingSteps || []), newStep],
+          thinkingStartTime,
+          firstMessageTime,
+        };
+        return { ...next, timelineEntries: buildTimelineEntries(next) };
+      }
+
+      // Plain text thinking — concatenate for backward compat AND
+      // push a ThinkingStep so the timeline gets individual entries.
+      const newThinking = payload.message || payload.content || "";
+      // Add line break between thinking messages
+      const separator = prev.thinking && newThinking ? "\n\n" : "";
+      // Set thinkingStartTime on first thinking message
+      const thinkingStartTime =
+        prev.thinkingStartTime ?? (newThinking ? now : null);
+      const prevSteps = prev.thinkingSteps || [];
+      const plainStep: ThinkingStep = {
+        id: `step-${prevSteps.length}`,
+        label: newThinking,
+        content: newThinking,
+        depth: payload.depth ?? 0,
+        timestamp: now,
+        agentName: payload.agentName,
+        parentAgent: payload.parentAgent,
+      };
+      const next = {
+        ...prev,
+        status: newStatus,
+        thinking: prev.thinking + separator + newThinking,
+        thinkingSteps: [...prevSteps, plainStep],
+        thinkingStartTime,
+        firstMessageTime,
+      };
+      return { ...next, timelineEntries: buildTimelineEntries(next) };
+    }
+
+    case "tool_call": {
+      // Handle both formats: { message: "ToolName" } or { tool: { id, name, arguments } }
+      const toolName = payload.message || payload.tool?.name;
+      if (toolName) {
+        const newToolCall: ToolCall = {
+          id: payload.tool?.id || `tool-${now}`,
+          name: toolName,
+          arguments: payload.tool?.arguments,
+          timestamp: now,
+          agentName: payload.agentName,
+          parentAgent: payload.parentAgent,
+          depth: payload.depth,
+        };
+        const next = {
+          ...prev,
+          status: newStatus,
+          toolCalls: [...prev.toolCalls, newToolCall],
+          firstMessageTime,
+        };
+        return { ...next, timelineEntries: buildTimelineEntries(next) };
+      }
+      return { ...prev, status: newStatus, firstMessageTime };
+    }
+
+    case "knowledge": {
+      // Handle both formats: { message: "content" } or { knowledge: { id, source, content } }
+      const knowledgeContent = payload.message || payload.knowledge?.content;
+      if (knowledgeContent) {
+        const newKnowledge: KnowledgeItem = {
+          id: payload.knowledge?.id || `knowledge-${now}`,
+          source: payload.knowledge?.source || "unknown",
+          content: knowledgeContent,
+          timestamp: now,
+          agentName: payload.agentName,
+          parentAgent: payload.parentAgent,
+          depth: payload.depth,
+        };
+        const next = {
+          ...prev,
+          status: newStatus,
+          knowledge: [...prev.knowledge, newKnowledge],
+          firstMessageTime,
+        };
+        return { ...next, timelineEntries: buildTimelineEntries(next) };
+      }
+      return { ...prev, status: newStatus, firstMessageTime };
+    }
+
+    case "memory": {
+      // Handle both formats: { message: "content" } or { memory: { id, type, content } }
+      const memoryContent = payload.message || payload.memory?.content;
+      if (memoryContent) {
+        const newMemory: MemoryItem = {
+          id: payload.memory?.id || `memory-${now}`,
+          type: payload.memory?.type || "unknown",
+          content: memoryContent,
+          timestamp: now,
+          agentName: payload.agentName,
+          parentAgent: payload.parentAgent,
+          depth: payload.depth,
+        };
+        const next = {
+          ...prev,
+          status: newStatus,
+          memory: [...prev.memory, newMemory],
+          firstMessageTime,
+        };
+        return { ...next, timelineEntries: buildTimelineEntries(next) };
+      }
+      return { ...prev, status: newStatus, firstMessageTime };
+    }
+
+    case "response":
+      return {
+        ...prev,
+        status: "complete",
+        response: payload.message || payload.content || "",
+        responseCompleteTime: now,
+        firstMessageTime: prev.firstMessageTime ?? now,
+      };
+
+    case "status_update": {
+      const statusMessage = payload.message || payload.statusUpdate?.message;
+      if (statusMessage) {
+        const newStatusItem: StatusItem = {
+          id: payload.statusUpdate?.id || `status-${now}`,
+          message: statusMessage,
+          agent: payload.statusUpdate?.agent,
+          timestamp: now,
+          agentName: payload.agentName,
+          parentAgent: payload.parentAgent,
+          depth: payload.depth,
+        };
+        const next = {
+          ...prev,
+          status: newStatus,
+          statusUpdates: [...prev.statusUpdates, newStatusItem],
+          firstMessageTime,
+        };
+        return { ...next, timelineEntries: buildTimelineEntries(next) };
+      }
+      return { ...prev, status: newStatus, firstMessageTime };
+    }
+
+    case "potential_response": {
+      const respContent = payload.message || payload.content || "";
+      if (respContent) {
+        const newResp: PotentialResponse = {
+          id: `resp-${now}`,
+          content: respContent,
+          timestamp: now,
+          agentName: payload.agentName,
+          parentAgent: payload.parentAgent,
+          depth: payload.depth,
+        };
+        const next = {
+          ...prev,
+          status: newStatus,
+          potentialResponses: [...(prev.potentialResponses || []), newResp],
+          firstMessageTime,
+        };
+        return { ...next, timelineEntries: buildTimelineEntries(next) };
+      }
+      return { ...prev, status: newStatus, firstMessageTime };
+    }
+
+    default:
+      return { ...prev, status: newStatus, firstMessageTime };
+  }
+}

package/src/components/agent-response/types.ts

@@ -165,6 +165,14 @@ export interface AgentMessage {
   message?: string;
   /** Alternative content field */
   content?: string;
+  /**
+   * Optional event timestamp (epoch ms). When supplied, the reducer uses this
+   * for the item's `timestamp` and any state-level timing fields it sets
+   * (`firstMessageTime`, `thinkingStartTime`, `responseCompleteTime`) instead
+   * of `Date.now()`. Provide this when replaying historical events so durations
+   * reflect the original run rather than load time.
+   */
+  timestamp?: number;
   /** For status messages */
   status?: string;
   /** Agent name (multi-agent scenarios) */

package/src/index.ts

@@ -48,6 +48,9 @@ export {
   // Constants
   initialAgentResponseState,
 
+  // Pure reducer (for non-React replay of AgentMessage streams)
+  reduceAgentMessage,
+
   // Utilities
   formatTime,
   formatTotalTime,