@optilogic/chat 1.3.3 → 1.3.5

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/components/user-prompt-input/UserPromptInput.tsx

@@ -155,6 +155,7 @@ export const UserPromptInput = React.forwardRef<
       enableTags = false,
       onTagCreate,
       onTagDelete,
+      anchors,
       className,
       ...props
     },
@@ -298,6 +299,7 @@ export const UserPromptInput = React.forwardRef<
           {isSubmitting && onStop ? (
             <Tooltip content={stopTooltip} disabled={!stopTooltip}>
               <IconButton
+                data-tour={anchors?.stopButton}
                 icon={<Square />}
                 variant="filled"
                 size="sm"
@@ -308,6 +310,7 @@ export const UserPromptInput = React.forwardRef<
             </Tooltip>
           ) : (
             <IconButton
+              data-tour={anchors?.sendButton}
               icon={
                 isSubmitting ? (
                   <Loader2 className="animate-spin" />

package/src/components/user-prompt-input/types.ts

@@ -42,6 +42,19 @@ export interface UserPromptInputProps
   onTagCreate?: (tag: string) => void;
   /** Callback when a tag is deleted */
   onTagDelete?: (tag: string) => void;
+  /** Tour anchors threaded onto internal sub-elements. */
+  anchors?: UserPromptInputAnchors;
+}
+
+/**
+ * Tour anchors (`data-tour` attribute values) for elements inside the
+ * UserPromptInput that the caller cannot otherwise reach.
+ */
+export interface UserPromptInputAnchors {
+  /** Send button (rendered when not submitting). */
+  sendButton?: string;
+  /** Stop button (rendered while submitting if `onStop` is provided). */
+  stopButton?: string;
 }
 
 export interface UserPromptInputRef {

package/src/index.ts

@@ -9,6 +9,8 @@ export {
   // Main component
   AgentResponse,
   type AgentResponseProps,
+  type AgentResponseClassNames,
+  type AgentResponseAnchors,
 
   // Sub-components (for advanced customization)
   ActivityIndicators,
@@ -48,6 +50,9 @@ export {
   // Constants
   initialAgentResponseState,
 
+  // Pure reducer (for non-React replay of AgentMessage streams)
+  reduceAgentMessage,
+
   // Utilities
   formatTime,
   formatTotalTime,