@optilogic/chat 1.3.2 → 1.3.4

package/dist/index.d.cts

@@ -197,6 +197,14 @@ 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) */
@@ -318,6 +326,12 @@ declare const HITLInteractionRecord: React.ForwardRefExoticComponent<HITLInterac
  * Displays thinking, tool calls, knowledge retrieval, memory access, and final response.
  */
 
+interface AgentResponseClassNames {
+    /** Classes for the inner container (border, rounded corners, overflow) */
+    container?: string;
+    /** Classes for the response content section (background, padding) */
+    response?: string;
+}
 interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The response state to render */
     state: AgentResponseState;
@@ -389,6 +403,21 @@ 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;
 }
 /**
  * AgentResponse Component
@@ -651,7 +680,10 @@ declare function useThinkingTimer({ startTime, endTime, status, }: UseThinkingTi
 /**
  * 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.
  */
 
 interface UseAgentResponseAccumulatorOptions {
@@ -679,6 +711,36 @@ interface UseAgentResponseAccumulatorReturn {
  */
 declare function useAgentResponseAccumulator(options?: UseAgentResponseAccumulatorOptions): UseAgentResponseAccumulatorReturn;
 
+/**
+ * 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.
+ */
+
+/**
+ * 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);
+ */
+declare function reduceAgentMessage(prev: AgentResponseState, payload: AgentMessage): AgentResponseState;
+
 /**
  * Agent Response Utility Functions
  */
@@ -917,4 +979,4 @@ declare function parseResponseSegments(text: string): ResponseSegment[];
  */
 declare const INLINE_ACTION_PROMPT = "\n<inline_actions>\nWhen your response should include interactive components (like query viewers,\ndata tables, or executable actions), embed them as fenced code blocks using\nthe `json:action` language tag:\n\n```json:action\n{\n  \"type\": \"action-type-here\",\n  ...action-specific fields\n}\n```\n\nRules:\n- Each block must contain valid JSON with a \"type\" field.\n- The \"type\" must match a registered action component on the frontend.\n- Multiple action blocks per response are allowed.\n- Surround action blocks with normal markdown text for user context.\n- The action block is rendered as an interactive component in the chat UI.\n- SQL strings inside JSON must be properly escaped (newlines as \\n, quotes as \\\").\n\nAvailable action types:\n\n- \"optimap-query\": Displays SQL queries with a button to execute them and\n  update the 3D globe map.\n  Required fields:\n    - type: \"optimap-query\"\n    - locations_sql: string (the validated locations SQL query)\n    - routes_sql: string (the validated routes SQL query)\n    - database_name: string (the target database name)\n</inline_actions>\n";
 
-export { ActionBar, type ActionBarProps, type ActionComponentRegistry, ActionMarkdownRenderer, type ActionMarkdownRendererProps, type ActionSegment, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type AgentRun, AgentTimeline, type DisplayEntry, type FeedbackValue, type GenericWebSocketMessage, type HITLInteraction, HITLInteractionRecord, type HITLInteractionRecordProps, type HITLQuestion, HITLQuestionPanel, type HITLQuestionPanelProps, type HITLResponseData, HITLSection, type HITLSectionProps, INLINE_ACTION_PROMPT, type InlineActionProps, type KnowledgeItem, type MarkdownSegment, type MemoryItem, MetadataRow, type MetadataRowProps, type PotentialResponse, type ResponseSegment, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type TimelineEntry, type TimelineEntryType, type TimelineUIState, type ToolCall, TruncatedMessage, type TruncatedMessageProps, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, useAgentResponseAccumulator, useThinkingTimer };
+export { ActionBar, type ActionBarProps, type ActionComponentRegistry, ActionMarkdownRenderer, type ActionMarkdownRendererProps, type ActionSegment, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type AgentRun, AgentTimeline, type DisplayEntry, type FeedbackValue, type GenericWebSocketMessage, type HITLInteraction, HITLInteractionRecord, type HITLInteractionRecordProps, type HITLQuestion, HITLQuestionPanel, type HITLQuestionPanelProps, type HITLResponseData, HITLSection, type HITLSectionProps, INLINE_ACTION_PROMPT, type InlineActionProps, type KnowledgeItem, type MarkdownSegment, type MemoryItem, MetadataRow, type MetadataRowProps, type PotentialResponse, type ResponseSegment, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type TimelineEntry, type TimelineEntryType, type TimelineUIState, type ToolCall, TruncatedMessage, type TruncatedMessageProps, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, reduceAgentMessage, useAgentResponseAccumulator, useThinkingTimer };

package/dist/index.d.ts

@@ -197,6 +197,14 @@ 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) */
@@ -318,6 +326,12 @@ declare const HITLInteractionRecord: React.ForwardRefExoticComponent<HITLInterac
  * Displays thinking, tool calls, knowledge retrieval, memory access, and final response.
  */
 
+interface AgentResponseClassNames {
+    /** Classes for the inner container (border, rounded corners, overflow) */
+    container?: string;
+    /** Classes for the response content section (background, padding) */
+    response?: string;
+}
 interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The response state to render */
     state: AgentResponseState;
@@ -389,6 +403,21 @@ 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;
 }
 /**
  * AgentResponse Component
@@ -651,7 +680,10 @@ declare function useThinkingTimer({ startTime, endTime, status, }: UseThinkingTi
 /**
  * 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.
  */
 
 interface UseAgentResponseAccumulatorOptions {
@@ -679,6 +711,36 @@ interface UseAgentResponseAccumulatorReturn {
  */
 declare function useAgentResponseAccumulator(options?: UseAgentResponseAccumulatorOptions): UseAgentResponseAccumulatorReturn;
 
+/**
+ * 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.
+ */
+
+/**
+ * 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);
+ */
+declare function reduceAgentMessage(prev: AgentResponseState, payload: AgentMessage): AgentResponseState;
+
 /**
  * Agent Response Utility Functions
  */
@@ -917,4 +979,4 @@ declare function parseResponseSegments(text: string): ResponseSegment[];
  */
 declare const INLINE_ACTION_PROMPT = "\n<inline_actions>\nWhen your response should include interactive components (like query viewers,\ndata tables, or executable actions), embed them as fenced code blocks using\nthe `json:action` language tag:\n\n```json:action\n{\n  \"type\": \"action-type-here\",\n  ...action-specific fields\n}\n```\n\nRules:\n- Each block must contain valid JSON with a \"type\" field.\n- The \"type\" must match a registered action component on the frontend.\n- Multiple action blocks per response are allowed.\n- Surround action blocks with normal markdown text for user context.\n- The action block is rendered as an interactive component in the chat UI.\n- SQL strings inside JSON must be properly escaped (newlines as \\n, quotes as \\\").\n\nAvailable action types:\n\n- \"optimap-query\": Displays SQL queries with a button to execute them and\n  update the 3D globe map.\n  Required fields:\n    - type: \"optimap-query\"\n    - locations_sql: string (the validated locations SQL query)\n    - routes_sql: string (the validated routes SQL query)\n    - database_name: string (the target database name)\n</inline_actions>\n";
 
-export { ActionBar, type ActionBarProps, type ActionComponentRegistry, ActionMarkdownRenderer, type ActionMarkdownRendererProps, type ActionSegment, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type AgentRun, AgentTimeline, type DisplayEntry, type FeedbackValue, type GenericWebSocketMessage, type HITLInteraction, HITLInteractionRecord, type HITLInteractionRecordProps, type HITLQuestion, HITLQuestionPanel, type HITLQuestionPanelProps, type HITLResponseData, HITLSection, type HITLSectionProps, INLINE_ACTION_PROMPT, type InlineActionProps, type KnowledgeItem, type MarkdownSegment, type MemoryItem, MetadataRow, type MetadataRowProps, type PotentialResponse, type ResponseSegment, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type TimelineEntry, type TimelineEntryType, type TimelineUIState, type ToolCall, TruncatedMessage, type TruncatedMessageProps, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, useAgentResponseAccumulator, useThinkingTimer };
+export { ActionBar, type ActionBarProps, type ActionComponentRegistry, ActionMarkdownRenderer, type ActionMarkdownRendererProps, type ActionSegment, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type AgentRun, AgentTimeline, type DisplayEntry, type FeedbackValue, type GenericWebSocketMessage, type HITLInteraction, HITLInteractionRecord, type HITLInteractionRecordProps, type HITLQuestion, HITLQuestionPanel, type HITLQuestionPanelProps, type HITLResponseData, HITLSection, type HITLSectionProps, INLINE_ACTION_PROMPT, type InlineActionProps, type KnowledgeItem, type MarkdownSegment, type MemoryItem, MetadataRow, type MetadataRowProps, type PotentialResponse, type ResponseSegment, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type TimelineEntry, type TimelineEntryType, type TimelineUIState, type ToolCall, TruncatedMessage, type TruncatedMessageProps, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, reduceAgentMessage, useAgentResponseAccumulator, useThinkingTimer };

package/dist/index.js

@@ -824,6 +824,188 @@ function deduplicateEntries(entries) {
   return result;
 }
 
+// src/components/agent-response/reducer.ts
+function reduceAgentMessage(prev, payload) {
+  const now = payload.timestamp ?? Date.now();
+  let newStatus = prev.status;
+  const isFirstMessage = prev.status === "idle" && payload.type !== "status";
+  if (isFirstMessage) {
+    newStatus = "processing";
+  }
+  const firstMessageTime = prev.firstMessageTime ?? (isFirstMessage ? now : null);
+  switch (payload.type) {
+    case "status":
+      if (payload.message === "Harness connected" || payload.status === "Harness connected") {
+        return { ...initialAgentResponseState };
+      }
+      return { ...prev, status: newStatus };
+    case "thinking": {
+      if (payload.thinkingStep) {
+        const newStep = {
+          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 thinkingStartTime2 = prev.thinkingStartTime ?? now;
+        const next2 = {
+          ...prev,
+          status: newStatus,
+          thinkingSteps: [...prev.thinkingSteps || [], newStep],
+          thinkingStartTime: thinkingStartTime2,
+          firstMessageTime
+        };
+        return { ...next2, timelineEntries: buildTimelineEntries(next2) };
+      }
+      const newThinking = payload.message || payload.content || "";
+      const separator = prev.thinking && newThinking ? "\n\n" : "";
+      const thinkingStartTime = prev.thinkingStartTime ?? (newThinking ? now : null);
+      const prevSteps = prev.thinkingSteps || [];
+      const plainStep = {
+        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": {
+      const toolName = payload.message || payload.tool?.name;
+      if (toolName) {
+        const newToolCall = {
+          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": {
+      const knowledgeContent = payload.message || payload.knowledge?.content;
+      if (knowledgeContent) {
+        const newKnowledge = {
+          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": {
+      const memoryContent = payload.message || payload.memory?.content;
+      if (memoryContent) {
+        const newMemory = {
+          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 = {
+          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 = {
+          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 };
+  }
+}
+
 // src/components/agent-response/hooks/useAgentResponseAccumulator.ts
 function useAgentResponseAccumulator(options) {
   const [state, setState] = useState(initialAgentResponseState);
@@ -838,185 +1020,7 @@ function useAgentResponseAccumulator(options) {
       } else {
         payload = message;
       }
-      setState((prev) => {
-        let newStatus = prev.status;
-        const isFirstMessage = prev.status === "idle" && payload.type !== "status";
-        if (isFirstMessage) {
-          newStatus = "processing";
-        }
-        const firstMessageTime = prev.firstMessageTime ?? (isFirstMessage ? Date.now() : null);
-        switch (payload.type) {
-          case "status":
-            if (payload.message === "Harness connected" || payload.status === "Harness connected") {
-              return { ...initialAgentResponseState };
-            }
-            return { ...prev, status: newStatus };
-          case "thinking": {
-            if (payload.thinkingStep) {
-              const newStep = {
-                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 thinkingStartTime2 = prev.thinkingStartTime ?? Date.now();
-              const next2 = {
-                ...prev,
-                status: newStatus,
-                thinkingSteps: [...prev.thinkingSteps || [], newStep],
-                thinkingStartTime: thinkingStartTime2,
-                firstMessageTime
-              };
-              return { ...next2, timelineEntries: buildTimelineEntries(next2) };
-            }
-            const newThinking = payload.message || payload.content || "";
-            const separator = prev.thinking && newThinking ? "\n\n" : "";
-            const thinkingStartTime = prev.thinkingStartTime ?? (newThinking ? Date.now() : null);
-            const prevSteps = prev.thinkingSteps || [];
-            const plainStep = {
-              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": {
-            const toolName = payload.message || payload.tool?.name;
-            if (toolName) {
-              const newToolCall = {
-                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": {
-            const knowledgeContent = payload.message || payload.knowledge?.content;
-            if (knowledgeContent) {
-              const newKnowledge = {
-                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": {
-            const memoryContent = payload.message || payload.memory?.content;
-            if (memoryContent) {
-              const newMemory = {
-                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 = {
-                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 = {
-                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]
   );
@@ -1324,6 +1328,7 @@ var AgentResponse = React11.forwardRef(
     renderMarkdown,
     renderThinkingMarkdown,
     timelineMaxHeight,
+    classNames,
     className,
     ...props
   }, ref) => {
@@ -1368,7 +1373,7 @@ var AgentResponse = React11.forwardRef(
         onMouseLeave: () => setIsHovered(false),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-lg overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("border border-border rounded-lg overflow-hidden", classNames?.container), children: [
             showMetadataRow && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
                 MetadataRow,
@@ -1414,7 +1419,8 @@ var AgentResponse = React11.forwardRef(
               {
                 className: cn(
                   "bg-muted/50 p-4",
-                  showMetadataRow && "border-t border-border"
+                  showMetadataRow && "border-t border-border",
+                  classNames?.response
                 ),
                 children: renderMarkdown ? renderMarkdown(state.response) : /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap", children: state.response })
               }
@@ -1812,6 +1818,6 @@ Available action types:
 </inline_actions>
 `;
 
-export { ActionBar, ActionMarkdownRenderer, ActivityIndicators, AgentResponse, AgentTimeline, HITLInteractionRecord, HITLQuestionPanel, HITLSection, INLINE_ACTION_PROMPT, MetadataRow, ThinkingSection, TruncatedMessage, UserPrompt, UserPromptInput, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, useAgentResponseAccumulator, useThinkingTimer };
+export { ActionBar, ActionMarkdownRenderer, ActivityIndicators, AgentResponse, AgentTimeline, HITLInteractionRecord, HITLQuestionPanel, HITLSection, INLINE_ACTION_PROMPT, MetadataRow, ThinkingSection, TruncatedMessage, UserPrompt, UserPromptInput, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, reduceAgentMessage, useAgentResponseAccumulator, useThinkingTimer };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map