@optilogic/chat 1.0.0-beta.1

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

@@ -0,0 +1,145 @@
+/**
+ * Metadata Row Component
+ *
+ * Displays thinking toggle, timer, and activity indicators
+ */
+
+import * as React from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { cn, LoadingSpinner } from "@optilogic/core";
+import { ActivityIndicators } from "./ActivityIndicators";
+import { formatTime } from "../utils";
+import type { AgentResponseStatus, ToolCall, KnowledgeItem, MemoryItem } from "../types";
+
+export interface MetadataRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Whether there is thinking content */
+  hasThinking: boolean;
+  /** Whether the thinking section is expanded */
+  isExpanded: boolean;
+  /** Toggle callback for thinking expansion */
+  onToggle: () => void;
+  /** Tool calls to display */
+  toolCalls: ToolCall[];
+  /** Knowledge items to display */
+  knowledge: KnowledgeItem[];
+  /** Memory items to display */
+  memory: MemoryItem[];
+  /** Current response status */
+  status: AgentResponseStatus;
+  /** Elapsed time in seconds */
+  elapsedTime: number;
+}
+
+/**
+ * MetadataRow Component
+ *
+ * Displays the metadata row with thinking toggle, timer, and activity indicators.
+ * When thinking content is present, the row is clickable to toggle expansion.
+ *
+ * @example
+ * <MetadataRow
+ *   hasThinking={!!state.thinking}
+ *   isExpanded={thinkingExpanded}
+ *   onToggle={toggleThinking}
+ *   toolCalls={state.toolCalls}
+ *   knowledge={state.knowledge}
+ *   memory={state.memory}
+ *   status={state.status}
+ *   elapsedTime={elapsedTime}
+ * />
+ */
+const MetadataRow = React.forwardRef<HTMLDivElement, MetadataRowProps>(
+  (
+    {
+      hasThinking,
+      isExpanded,
+      onToggle,
+      toolCalls,
+      knowledge,
+      memory,
+      status,
+      elapsedTime,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const isProcessing = status === "processing";
+    const isComplete = status === "complete";
+    const hasActivity =
+      toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0;
+
+    // Determine what to show on the left side
+    const renderLeftContent = () => {
+      // If we have thinking text, show collapse toggle + label + timer
+      if (hasThinking) {
+        return (
+          <div className="flex items-center gap-1.5">
+            {isExpanded ? (
+              <ChevronUp className="w-3.5 h-3.5 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+            )}
+            <span className="text-xs text-muted-foreground">
+              {isComplete
+                ? `Thought for ${formatTime(elapsedTime, true)}`
+                : `Thinking... ${formatTime(elapsedTime, false)}`}
+            </span>
+          </div>
+        );
+      }
+
+      // If processing but no thinking text yet, show spinner
+      if (isProcessing) {
+        return (
+          <div className="flex items-center gap-1.5">
+            <LoadingSpinner size="sm" variant="muted" className="w-3.5 h-3.5" />
+            <span className="text-xs text-muted-foreground">Processing</span>
+          </div>
+        );
+      }
+
+      // Complete with no thinking - show nothing on left (just activity on right)
+      return null;
+    };
+
+    const leftContent = renderLeftContent();
+
+    // If nothing to show (no thinking, not processing, no activity), hide the row
+    if (!leftContent && !hasActivity) {
+      return null;
+    }
+
+    // Always use a div for the row to avoid nesting buttons
+    // When there's thinking, only the left side is clickable
+    return (
+      <div
+        ref={ref}
+        className={cn("w-full flex items-center justify-between px-3 py-2", className)}
+        {...props}
+      >
+        {/* Left content - clickable when there's thinking */}
+        {hasThinking ? (
+          <button
+            onClick={onToggle}
+            className="flex items-center gap-1.5 hover:bg-muted/50 -ml-1.5 pl-1.5 pr-2 py-0.5 rounded transition-colors"
+          >
+            {leftContent}
+          </button>
+        ) : (
+          <div className="flex items-center gap-1.5">
+            {leftContent}
+          </div>
+        )}
+        <ActivityIndicators
+          toolCalls={toolCalls}
+          knowledge={knowledge}
+          memory={memory}
+        />
+      </div>
+    );
+  }
+);
+MetadataRow.displayName = "MetadataRow";
+
+export { MetadataRow };

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

@@ -0,0 +1,48 @@
+/**
+ * Thinking Section Component
+ *
+ * Collapsible section for displaying agent thinking/reasoning content
+ */
+
+import * as React from "react";
+import { cn } from "@optilogic/core";
+
+export interface ThinkingSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The thinking content to display */
+  content: string;
+  /** Whether the section is expanded */
+  isExpanded: boolean;
+}
+
+/**
+ * ThinkingSection Component
+ *
+ * Displays the agent's thinking/reasoning content in a collapsible panel.
+ *
+ * @example
+ * <ThinkingSection content={state.thinking} isExpanded={isExpanded} />
+ */
+const ThinkingSection = React.forwardRef<HTMLDivElement, ThinkingSectionProps>(
+  ({ content, isExpanded, className, ...props }, ref) => {
+    if (!isExpanded || !content) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn("px-3 pb-3 border-t border-border", className)}
+        {...props}
+      >
+        <div className="mt-2 max-h-[200px] overflow-y-auto">
+          <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono">
+            {content}
+          </pre>
+        </div>
+      </div>
+    );
+  }
+);
+ThinkingSection.displayName = "ThinkingSection";
+
+export { ThinkingSection };

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

@@ -0,0 +1,15 @@
+/**
+ * Agent Response Sub-Components
+ */
+
+export { ActivityIndicators } from "./ActivityIndicators";
+export type { ActivityIndicatorsProps } from "./ActivityIndicators";
+
+export { MetadataRow } from "./MetadataRow";
+export type { MetadataRowProps } from "./MetadataRow";
+
+export { ThinkingSection } from "./ThinkingSection";
+export type { ThinkingSectionProps } from "./ThinkingSection";
+
+export { ActionBar } from "./ActionBar";
+export type { ActionBarProps } from "./ActionBar";

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

@@ -0,0 +1,12 @@
+/**
+ * Agent Response Hooks
+ */
+
+export { useThinkingTimer } from "./useThinkingTimer";
+export type { UseThinkingTimerOptions } from "./useThinkingTimer";
+
+export { useAgentResponseAccumulator } from "./useAgentResponseAccumulator";
+export type {
+  UseAgentResponseAccumulatorOptions,
+  UseAgentResponseAccumulatorReturn,
+} from "./useAgentResponseAccumulator";

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

@@ -0,0 +1,186 @@
+/**
+ * useAgentResponseAccumulator Hook
+ *
+ * Accumulates agent response messages into a unified state
+ */
+
+import { useState, useCallback } from "react";
+import {
+  initialAgentResponseState,
+  type AgentResponseState,
+  type AgentMessage,
+  type GenericWebSocketMessage,
+  type ToolCall,
+  type KnowledgeItem,
+  type MemoryItem,
+} from "../types";
+
+export interface UseAgentResponseAccumulatorOptions {
+  /** WebSocket topic to filter messages (optional, for convenience) */
+  topic?: string;
+}
+
+export interface UseAgentResponseAccumulatorReturn {
+  /** Current accumulated state */
+  state: AgentResponseState;
+
+  /** Handler to process incoming messages */
+  handleMessage: (message: unknown) => void;
+
+  /** Reset state to initial */
+  reset: () => void;
+}
+
+/**
+ * Hook for accumulating agent response messages into a unified state
+ *
+ * @example
+ * const { state, handleMessage, reset } = useAgentResponseAccumulator({ topic: "agent" });
+ *
+ * // In your WebSocket handler:
+ * websocket.onmessage = (event) => {
+ *   handleMessage(JSON.parse(event.data));
+ * };
+ */
+export function useAgentResponseAccumulator(
+  options?: UseAgentResponseAccumulatorOptions
+): UseAgentResponseAccumulatorReturn {
+  const [state, setState] = useState<AgentResponseState>(initialAgentResponseState);
+  const topic = options?.topic;
+
+  const handleMessage = useCallback(
+    (message: unknown) => {
+      // If topic filter is provided, check for matching topic
+      let payload: AgentMessage;
+
+      if (topic) {
+        const msg = message as GenericWebSocketMessage;
+        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": {
+            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);
+            return {
+              ...prev,
+              status: newStatus,
+              thinking: prev.thinking + separator + newThinking,
+              thinkingStartTime,
+              firstMessageTime,
+            };
+          }
+
+          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(),
+              };
+              return {
+                ...prev,
+                status: newStatus,
+                toolCalls: [...prev.toolCalls, newToolCall],
+                firstMessageTime,
+              };
+            }
+            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(),
+              };
+              return {
+                ...prev,
+                status: newStatus,
+                knowledge: [...prev.knowledge, newKnowledge],
+                firstMessageTime,
+              };
+            }
+            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(),
+              };
+              return {
+                ...prev,
+                status: newStatus,
+                memory: [...prev.memory, newMemory],
+                firstMessageTime,
+              };
+            }
+            return { ...prev, status: newStatus, firstMessageTime };
+          }
+
+          case "response":
+            return {
+              ...prev,
+              status: "complete",
+              response: payload.message || payload.content || "",
+              responseCompleteTime: Date.now(),
+              firstMessageTime: prev.firstMessageTime ?? Date.now(),
+            };
+
+          default:
+            return { ...prev, status: newStatus, firstMessageTime };
+        }
+      });
+    },
+    [topic]
+  );
+
+  const reset = useCallback(() => {
+    setState(initialAgentResponseState);
+  }, []);
+
+  return { state, handleMessage, reset };
+}

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

@@ -0,0 +1,52 @@
+/**
+ * useThinkingTimer Hook
+ *
+ * Tracks elapsed time during agent thinking/processing
+ */
+
+import { useState, useEffect } from "react";
+import type { AgentResponseStatus } from "../types";
+
+export interface UseThinkingTimerOptions {
+  startTime: number | null;
+  endTime: number | null;
+  status: AgentResponseStatus;
+}
+
+/**
+ * Custom hook for thinking timer
+ * Returns elapsed time in seconds
+ */
+export function useThinkingTimer({
+  startTime,
+  endTime,
+  status,
+}: UseThinkingTimerOptions): number {
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    if (!startTime) {
+      setElapsed(0);
+      return;
+    }
+
+    // If complete, calculate final elapsed time
+    if (status === "complete" && endTime) {
+      setElapsed((endTime - startTime) / 1000);
+      return;
+    }
+
+    // If still processing, update every second
+    if (status === "processing") {
+      const updateElapsed = () => {
+        setElapsed((Date.now() - startTime) / 1000);
+      };
+
+      updateElapsed(); // Initial update
+      const interval = setInterval(updateElapsed, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [startTime, endTime, status]);
+
+  return elapsed;
+}

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

@@ -0,0 +1,48 @@
+/**
+ * Agent Response Component Library
+ *
+ * A library-ready component for displaying AI agent responses with
+ * thinking, tool calls, knowledge retrieval, memory access, and final response.
+ */
+
+// Main component
+export { AgentResponse } from "./AgentResponse";
+export type { AgentResponseProps } from "./AgentResponse";
+
+// Sub-components (for advanced customization)
+export {
+  ActivityIndicators,
+  MetadataRow,
+  ThinkingSection,
+  ActionBar,
+  type ActivityIndicatorsProps,
+  type MetadataRowProps,
+  type ThinkingSectionProps,
+  type ActionBarProps,
+} from "./components";
+
+// Hooks
+export {
+  useAgentResponseAccumulator,
+  useThinkingTimer,
+  type UseAgentResponseAccumulatorOptions,
+  type UseAgentResponseAccumulatorReturn,
+  type UseThinkingTimerOptions,
+} from "./hooks";
+
+// Types
+export type {
+  AgentResponseState,
+  AgentResponseStatus,
+  FeedbackValue,
+  ToolCall,
+  KnowledgeItem,
+  MemoryItem,
+  AgentMessage,
+  GenericWebSocketMessage,
+} from "./types";
+
+export { initialAgentResponseState } from "./types";
+
+// Utilities
+export { formatTime, formatTotalTime } from "./utils";

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

@@ -0,0 +1,124 @@
+/**
+ * Agent Response Component Types
+ *
+ * Type definitions for the library-ready agent response component
+ */
+
+/**
+ * Status of the agent response cycle
+ */
+export type AgentResponseStatus = "idle" | "processing" | "complete";
+
+/**
+ * Feedback value for the response
+ */
+export type FeedbackValue = "up" | "down" | null;
+
+/**
+ * Tool call information from the agent
+ */
+export interface ToolCall {
+  id: string;
+  name: string;
+  arguments?: Record<string, unknown>;
+  timestamp: number;
+}
+
+/**
+ * Knowledge retrieval information
+ */
+export interface KnowledgeItem {
+  id: string;
+  source: string;
+  content: string;
+  timestamp: number;
+}
+
+/**
+ * Memory access information
+ */
+export interface MemoryItem {
+  id: string;
+  type: string;
+  content: string;
+  timestamp: number;
+}
+
+/**
+ * State shape for the agent response component
+ */
+export interface AgentResponseState {
+  /** Current status of the response cycle */
+  status: AgentResponseStatus;
+  /** Accumulated thinking/reasoning text */
+  thinking: string;
+  /** Tool calls made during processing */
+  toolCalls: ToolCall[];
+  /** Knowledge items retrieved */
+  knowledge: KnowledgeItem[];
+  /** Memory items accessed */
+  memory: MemoryItem[];
+  /** Final response text */
+  response: string;
+  /** Timestamp when first thinking message was received (for timer) */
+  thinkingStartTime: number | null;
+  /** Timestamp when response was completed (for final timer display) */
+  responseCompleteTime: number | null;
+  /** Timestamp when first message of any type was received (for total time) */
+  firstMessageTime: number | null;
+}
+
+/**
+ * WebSocket message payload for agent responses
+ */
+export interface AgentMessage {
+  type: "status" | "thinking" | "tool_call" | "knowledge" | "memory" | "response";
+  /** Message content - for simple string payloads */
+  message?: string;
+  /** Alternative content field */
+  content?: string;
+  /** For status messages */
+  status?: string;
+  /** For tool_call messages */
+  tool?: {
+    id: string;
+    name: string;
+    arguments?: Record<string, unknown>;
+  };
+  /** For knowledge messages */
+  knowledge?: {
+    id: string;
+    source: string;
+    content: string;
+  };
+  /** For memory messages */
+  memory?: {
+    id: string;
+    type: string;
+    content: string;
+  };
+}
+
+/**
+ * Generic websocket message wrapper type
+ */
+export interface GenericWebSocketMessage {
+  topic: string;
+  message: AgentMessage;
+  accountId?: string;
+}
+
+/**
+ * Initial state for the agent response component
+ */
+export const initialAgentResponseState: AgentResponseState = {
+  status: "idle",
+  thinking: "",
+  toolCalls: [],
+  knowledge: [],
+  memory: [],
+  response: "",
+  thinkingStartTime: null,
+  responseCompleteTime: null,
+  firstMessageTime: null,
+};

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

@@ -0,0 +1,48 @@
+/**
+ * Agent Response Utility Functions
+ */
+
+/**
+ * Format elapsed time for display
+ * - Under 60s: "Xs" (e.g., "23s")
+ * - 60+ seconds while active: "M:SS" (e.g., "1:23")
+ * - Complete under 60s: "Xs" (e.g., "45s")
+ * - Complete 60-119s: "1.X min" (e.g., "1.2 min")
+ * - Complete 120+ s: "X.X min" (e.g., "2.5 min")
+ */
+export function formatTime(seconds: number, isComplete: boolean): string {
+  if (seconds < 1) {
+    return isComplete ? "<1s" : "0s";
+  }
+
+  if (isComplete) {
+    // Completed state formatting
+    if (seconds < 60) {
+      return `${Math.round(seconds)}s`;
+    }
+    const minutes = seconds / 60;
+    return `${minutes.toFixed(1)} min`;
+  }
+
+  // Active state formatting
+  if (seconds < 60) {
+    return `${Math.floor(seconds)}s`;
+  }
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Format total time for action bar display
+ */
+export function formatTotalTime(seconds: number): string {
+  if (seconds < 1) {
+    return "<1s";
+  }
+  if (seconds < 60) {
+    return `${seconds.toFixed(1)}s`;
+  }
+  const minutes = seconds / 60;
+  return `${minutes.toFixed(1)}m`;
+}