@optilogic/chat 1.0.0-beta.1

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@optilogic/chat",
+  "version": "1.0.0-beta.1",
+  "description": "Chat UI components for Optilogic - AgentResponse and related components for LLM interactions",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "dependencies": {
+    "@optilogic/core": "1.0.0-beta.1"
+  },
+  "peerDependencies": {
+    "lucide-react": "^0.400.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "lucide-react": "^0.468.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "keywords": [
+    "react",
+    "chat",
+    "llm",
+    "ai",
+    "agent",
+    "optilogic"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/optilogic/opti-ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rm -rf dist .turbo"
+  }
+}

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

@@ -0,0 +1,232 @@
+/**
+ * AgentResponse Component
+ *
+ * A library-ready presentational component for displaying AI agent responses.
+ * Displays thinking, tool calls, knowledge retrieval, memory access, and final response.
+ */
+
+import * as React from "react";
+import { useState, useMemo, useCallback } from "react";
+import { cn } from "@optilogic/core";
+import { MetadataRow, ThinkingSection, ActionBar } from "./components";
+import { useThinkingTimer } from "./hooks";
+import type { AgentResponseState, FeedbackValue } from "./types";
+
+export interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The response state to render */
+  state: AgentResponseState;
+
+  /** Optional unique ID (for list keys) */
+  id?: string;
+
+  /** Optional timestamp to display */
+  timestamp?: Date;
+
+  /** Feedback state (controlled) */
+  feedback?: FeedbackValue;
+  onFeedbackChange?: (feedback: FeedbackValue) => void;
+
+  /** Callback when the response is copied via the action bar */
+  onResponseCopy?: (response: string) => void;
+
+  /** Thinking section expansion (controlled or uncontrolled) */
+  defaultThinkingExpanded?: boolean;
+  thinkingExpanded?: boolean;
+  onThinkingExpandedChange?: (expanded: boolean) => void;
+
+  /** Action bar visibility mode */
+  actionsVisible?: boolean | "hover";
+
+  /**
+   * Custom markdown renderer for the response content.
+   * If not provided, the response will be rendered as plain text.
+   *
+   * @example
+   * <AgentResponse
+   *   state={state}
+   *   renderMarkdown={(content) => <MyMarkdownRenderer content={content} />}
+   * />
+   */
+  renderMarkdown?: (content: string) => React.ReactNode;
+}
+
+/**
+ * AgentResponse Component
+ *
+ * A complete component for displaying AI agent responses including:
+ * - Thinking/reasoning content (collapsible)
+ * - Tool calls, knowledge retrieval, and memory access indicators
+ * - Final response with optional markdown rendering
+ * - Action bar with copy and feedback buttons
+ *
+ * @example
+ * // Basic usage with useAgentResponseAccumulator hook
+ * const { state, handleMessage } = useAgentResponseAccumulator();
+ *
+ * <AgentResponse state={state} />
+ *
+ * @example
+ * // With markdown rendering and feedback
+ * <AgentResponse
+ *   state={state}
+ *   renderMarkdown={(content) => <ReactMarkdown>{content}</ReactMarkdown>}
+ *   feedback={feedback}
+ *   onFeedbackChange={setFeedback}
+ * />
+ *
+ * @example
+ * // Controlled thinking expansion
+ * <AgentResponse
+ *   state={state}
+ *   thinkingExpanded={isExpanded}
+ *   onThinkingExpandedChange={setIsExpanded}
+ * />
+ */
+const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
+  (
+    {
+      state,
+      id,
+      timestamp,
+      feedback,
+      onFeedbackChange,
+      onResponseCopy,
+      defaultThinkingExpanded = false,
+      thinkingExpanded: controlledThinkingExpanded,
+      onThinkingExpandedChange,
+      actionsVisible = "hover",
+      renderMarkdown,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    // Uncontrolled thinking expanded state
+    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultThinkingExpanded);
+
+    // Determine if thinking is controlled
+    const isThinkingControlled = controlledThinkingExpanded !== undefined;
+    const thinkingExpanded = isThinkingControlled
+      ? controlledThinkingExpanded
+      : uncontrolledExpanded;
+
+    // Toggle thinking handler
+    const toggleThinking = useCallback(() => {
+      const newValue = !thinkingExpanded;
+      if (isThinkingControlled) {
+        onThinkingExpandedChange?.(newValue);
+      } else {
+        setUncontrolledExpanded(newValue);
+      }
+    }, [thinkingExpanded, isThinkingControlled, onThinkingExpandedChange]);
+
+    // Hover state for action bar visibility
+    const [isHovered, setIsHovered] = useState(false);
+
+    // Thinking timer
+    const elapsedTime = useThinkingTimer({
+      startTime: state.thinkingStartTime,
+      endTime: state.responseCompleteTime,
+      status: state.status,
+    });
+
+    // Calculate total time (from first message to response complete)
+    const totalTimeSeconds = useMemo(() => {
+      if (!state.firstMessageTime || !state.responseCompleteTime) return 0;
+      return (state.responseCompleteTime - state.firstMessageTime) / 1000;
+    }, [state.firstMessageTime, state.responseCompleteTime]);
+
+    // Derived state: has any content been received?
+    const hasAnyContent =
+      state.thinking ||
+      state.toolCalls.length > 0 ||
+      state.knowledge.length > 0 ||
+      state.memory.length > 0 ||
+      state.response;
+
+    // Derived state: should show metadata row?
+    const showMetadataRow =
+      state.thinking ||
+      state.toolCalls.length > 0 ||
+      state.knowledge.length > 0 ||
+      state.memory.length > 0 ||
+      state.status === "processing";
+
+    // Determine action bar visibility
+    const showActionBar = state.status === "complete" && state.response;
+    const isActionBarVisible =
+      actionsVisible === true ||
+      (actionsVisible === "hover" && isHovered);
+
+    // If no content, render nothing
+    if (!hasAnyContent) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={className}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        {...props}
+      >
+        {/* Message Content Container */}
+        <div className="border border-border rounded-lg overflow-hidden">
+          {/* Metadata Row - show if there's any metadata or thinking */}
+          {showMetadataRow && (
+            <>
+              <MetadataRow
+                hasThinking={!!state.thinking}
+                isExpanded={thinkingExpanded}
+                onToggle={toggleThinking}
+                toolCalls={state.toolCalls}
+                knowledge={state.knowledge}
+                memory={state.memory}
+                status={state.status}
+                elapsedTime={elapsedTime}
+              />
+
+              {/* Thinking Content - collapsible with max-height */}
+              <ThinkingSection
+                content={state.thinking}
+                isExpanded={thinkingExpanded}
+              />
+            </>
+          )}
+
+          {/* Response Section */}
+          {state.response && (
+            <div
+              className={cn(
+                "bg-muted/50 p-4",
+                showMetadataRow && "border-t border-border"
+              )}
+            >
+              {renderMarkdown ? (
+                renderMarkdown(state.response)
+              ) : (
+                <span className="whitespace-pre-wrap">{state.response}</span>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Action Bar - outside the message container, visible on hover when complete */}
+        {showActionBar && (
+          <ActionBar
+            response={state.response}
+            isVisible={isActionBarVisible}
+            totalTimeSeconds={totalTimeSeconds}
+            feedback={feedback}
+            onFeedbackChange={onFeedbackChange}
+            onResponseCopy={onResponseCopy}
+          />
+        )}
+      </div>
+    );
+  }
+);
+AgentResponse.displayName = "AgentResponse";
+
+export { AgentResponse };

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

@@ -0,0 +1,150 @@
+/**
+ * Action Bar Component
+ *
+ * Displays copy, feedback, and timing actions for the response
+ */
+
+import * as React from "react";
+import { useState, useCallback } from "react";
+import { Copy, Check, ThumbsUp, ThumbsDown } from "lucide-react";
+import { cn } from "@optilogic/core";
+import { formatTotalTime } from "../utils";
+import type { FeedbackValue } from "../types";
+
+export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The response text (for copying) */
+  response: string;
+  /** Whether the action bar is visible */
+  isVisible: boolean;
+  /** Total time in seconds */
+  totalTimeSeconds: number;
+  /** Current feedback value */
+  feedback?: FeedbackValue;
+  /** Callback when feedback changes */
+  onFeedbackChange?: (feedback: FeedbackValue) => void;
+  /** Callback when response is copied */
+  onResponseCopy?: (response: string) => void;
+}
+
+/**
+ * ActionBar Component
+ *
+ * Displays action buttons for copying the response, providing feedback,
+ * and showing total response time.
+ *
+ * @example
+ * <ActionBar
+ *   response={state.response}
+ *   isVisible={isHovered}
+ *   totalTimeSeconds={totalTime}
+ *   feedback={feedback}
+ *   onFeedbackChange={setFeedback}
+ *   onCopy={handleCopy}
+ * />
+ */
+const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
+  (
+    {
+      response,
+      isVisible,
+      totalTimeSeconds,
+      feedback,
+      onFeedbackChange,
+      onResponseCopy,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(response);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+        onResponseCopy?.(response);
+      } catch (err) {
+        console.error("Failed to copy response:", err);
+      }
+    }, [response, onResponseCopy]);
+
+    const handleThumbsUp = useCallback(() => {
+      const newValue = feedback === "up" ? null : "up";
+      onFeedbackChange?.(newValue);
+    }, [feedback, onFeedbackChange]);
+
+    const handleThumbsDown = useCallback(() => {
+      const newValue = feedback === "down" ? null : "down";
+      onFeedbackChange?.(newValue);
+    }, [feedback, onFeedbackChange]);
+
+    const isThumbsUp = feedback === "up";
+    const isThumbsDown = feedback === "down";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-between px-4 py-2",
+          "transition-opacity duration-200",
+          isVisible ? "opacity-100" : "opacity-0 pointer-events-none",
+          className
+        )}
+        {...props}
+      >
+        {/* Left side - action buttons */}
+        <div className="flex items-center gap-1">
+          {/* Copy button */}
+          <button
+            onClick={handleCopy}
+            className="p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+            title={copied ? "Copied!" : "Copy response"}
+          >
+            {copied ? (
+              <Check className="w-4 h-4 text-green-500" />
+            ) : (
+              <Copy className="w-4 h-4" />
+            )}
+          </button>
+
+          {/* Thumbs up */}
+          <button
+            onClick={handleThumbsUp}
+            className={cn(
+              "p-1.5 rounded hover:bg-muted transition-colors",
+              isThumbsUp
+                ? "text-green-500"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+            title="Good response"
+          >
+            <ThumbsUp className={cn("w-4 h-4", isThumbsUp && "fill-current")} />
+          </button>
+
+          {/* Thumbs down */}
+          <button
+            onClick={handleThumbsDown}
+            className={cn(
+              "p-1.5 rounded hover:bg-muted transition-colors",
+              isThumbsDown
+                ? "text-red-500"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+            title="Poor response"
+          >
+            <ThumbsDown className={cn("w-4 h-4", isThumbsDown && "fill-current")} />
+          </button>
+        </div>
+
+        {/* Right side - timing info */}
+        <span className="text-xs text-muted-foreground">
+          Total time: {formatTotalTime(totalTimeSeconds)}
+        </span>
+      </div>
+    );
+  }
+);
+ActionBar.displayName = "ActionBar";
+
+export { ActionBar };

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

@@ -0,0 +1,140 @@
+/**
+ * Activity Indicators Component
+ *
+ * Displays tool, knowledge, memory icons with counts and popovers
+ */
+
+import * as React from "react";
+import { Wrench, Book, HardDrive } from "lucide-react";
+import { cn, Popover, PopoverTrigger, PopoverContent } from "@optilogic/core";
+import type { ToolCall, KnowledgeItem, MemoryItem } from "../types";
+
+export interface ActivityIndicatorsProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Tool calls to display */
+  toolCalls: ToolCall[];
+  /** Knowledge items to display */
+  knowledge: KnowledgeItem[];
+  /** Memory items to display */
+  memory: MemoryItem[];
+}
+
+/**
+ * ActivityIndicators Component
+ *
+ * Displays icons with counts for tool calls, knowledge retrieval, and memory access.
+ * Each icon has a popover showing details when clicked.
+ *
+ * @example
+ * <ActivityIndicators
+ *   toolCalls={state.toolCalls}
+ *   knowledge={state.knowledge}
+ *   memory={state.memory}
+ * />
+ */
+const ActivityIndicators = React.forwardRef<HTMLDivElement, ActivityIndicatorsProps>(
+  ({ toolCalls, knowledge, memory, className, ...props }, ref) => {
+    const hasAnyActivity =
+      toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0;
+
+    if (!hasAnyActivity) return null;
+
+    return (
+      <div ref={ref} className={cn("flex items-center gap-2", className)} {...props}>
+        {/* Tool Calls */}
+        {toolCalls.length > 0 && (
+          <Popover>
+            <PopoverTrigger asChild>
+              <button
+                className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Wrench className="w-3.5 h-3.5" />
+                <span className="text-xs">{toolCalls.length}</span>
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80">
+              <div className="space-y-2">
+                <h4 className="font-medium text-sm">Tool Calls</h4>
+                <div className="space-y-2 max-h-60 overflow-auto">
+                  {toolCalls.map((tool) => (
+                    <div key={tool.id} className="p-2 bg-muted rounded text-xs">
+                      <div className="font-medium">{tool.name}</div>
+                      {tool.arguments && (
+                        <pre className="mt-1 text-muted-foreground overflow-x-auto">
+                          {JSON.stringify(tool.arguments, null, 2)}
+                        </pre>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
+
+        {/* Knowledge */}
+        {knowledge.length > 0 && (
+          <Popover>
+            <PopoverTrigger asChild>
+              <button
+                className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Book className="w-3.5 h-3.5" />
+                <span className="text-xs">{knowledge.length}</span>
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80">
+              <div className="space-y-2">
+                <h4 className="font-medium text-sm">Knowledge Retrieved</h4>
+                <div className="space-y-2 max-h-60 overflow-auto">
+                  {knowledge.map((item) => (
+                    <div key={item.id} className="p-2 bg-muted rounded text-xs">
+                      <div className="font-medium">{item.source}</div>
+                      <div className="mt-1 text-muted-foreground">
+                        {item.content}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
+
+        {/* Memory */}
+        {memory.length > 0 && (
+          <Popover>
+            <PopoverTrigger asChild>
+              <button
+                className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <HardDrive className="w-3.5 h-3.5" />
+                <span className="text-xs">{memory.length}</span>
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80">
+              <div className="space-y-2">
+                <h4 className="font-medium text-sm">Memory Accessed</h4>
+                <div className="space-y-2 max-h-60 overflow-auto">
+                  {memory.map((item) => (
+                    <div key={item.id} className="p-2 bg-muted rounded text-xs">
+                      <div className="font-medium">{item.type}</div>
+                      <div className="mt-1 text-muted-foreground">
+                        {item.content}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
+      </div>
+    );
+  }
+);
+ActivityIndicators.displayName = "ActivityIndicators";
+
+export { ActivityIndicators };