@optilogic/chat 1.0.0-beta.6 → 1.0.0-beta.7

package/dist/index.d.ts

@@ -40,6 +40,37 @@ interface MemoryItem {
     content: string;
     timestamp: number;
 }
+/**
+ * Status update information from the agent
+ */
+interface StatusItem {
+    id: string;
+    message: string;
+    timestamp: number;
+    /** Optional agent name if in multi-agent scenario */
+    agent?: string;
+}
+/**
+ * A single step in structured thinking content
+ */
+interface ThinkingStep {
+    /** Unique identifier for the step */
+    id: string;
+    /** Label/title shown in the collapsible header */
+    label: string;
+    /** Content of the thinking step */
+    content: string;
+    /** Nesting depth (0 = root level, 1 = first indent, etc.) */
+    depth: number;
+    /** Whether this step should start collapsed (default: false) */
+    isCollapsed?: boolean;
+}
+/**
+ * Union type for thinking content
+ * - string: plain text (backward compatible)
+ * - ThinkingStep[]: structured with collapsible sub-sections
+ */
+type ThinkingContent = string | ThinkingStep[];
 /**
  * State shape for the agent response component
  */
@@ -48,12 +79,16 @@ interface AgentResponseState {
     status: AgentResponseStatus;
     /** Accumulated thinking/reasoning text */
     thinking: string;
+    /** Structured thinking steps (if provided, takes precedence over thinking string) */
+    thinkingSteps?: ThinkingStep[];
     /** Tool calls made during processing */
     toolCalls: ToolCall[];
     /** Knowledge items retrieved */
     knowledge: KnowledgeItem[];
     /** Memory items accessed */
     memory: MemoryItem[];
+    /** Status updates from the agent */
+    statusUpdates: StatusItem[];
     /** Final response text */
     response: string;
     /** Timestamp when first thinking message was received (for timer) */
@@ -67,7 +102,7 @@ interface AgentResponseState {
  * WebSocket message payload for agent responses
  */
 interface AgentMessage {
-    type: "status" | "thinking" | "tool_call" | "knowledge" | "memory" | "response";
+    type: "status" | "thinking" | "tool_call" | "knowledge" | "memory" | "response" | "status_update";
     /** Message content - for simple string payloads */
     message?: string;
     /** Alternative content field */
@@ -92,6 +127,20 @@ interface AgentMessage {
         type: string;
         content: string;
     };
+    /** For status_update messages */
+    statusUpdate?: {
+        id: string;
+        message: string;
+        agent?: string;
+    };
+    /** For structured thinking step messages */
+    thinkingStep?: {
+        id?: string;
+        label: string;
+        content: string;
+        depth?: number;
+        isCollapsed?: boolean;
+    };
 }
 /**
  * Generic websocket message wrapper type
@@ -142,6 +191,17 @@ interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
      * />
      */
     renderMarkdown?: (content: string) => React.ReactNode;
+    /**
+     * Custom markdown renderer for the thinking content.
+     * If not provided, the thinking will be rendered as plain preformatted text.
+     *
+     * @example
+     * <AgentResponse
+     *   state={state}
+     *   renderThinkingMarkdown={(content) => <MyMarkdownRenderer content={content} />}
+     * />
+     */
+    renderThinkingMarkdown?: (content: string) => React.ReactNode;
 }
 /**
  * AgentResponse Component
@@ -190,6 +250,8 @@ interface ActivityIndicatorsProps extends React.HTMLAttributes<HTMLDivElement> {
     knowledge: KnowledgeItem[];
     /** Memory items to display */
     memory: MemoryItem[];
+    /** Status updates to display */
+    statusUpdates?: StatusItem[];
 }
 /**
  * ActivityIndicators Component
@@ -225,6 +287,8 @@ interface MetadataRowProps extends React.HTMLAttributes<HTMLDivElement> {
     knowledge: KnowledgeItem[];
     /** Memory items to display */
     memory: MemoryItem[];
+    /** Status updates to display */
+    statusUpdates?: StatusItem[];
     /** Current response status */
     status: AgentResponseStatus;
     /** Elapsed time in seconds */
@@ -253,22 +317,40 @@ declare const MetadataRow: React.ForwardRefExoticComponent<MetadataRowProps & Re
 /**
  * Thinking Section Component
  *
- * Collapsible section for displaying agent thinking/reasoning content
+ * Collapsible section for displaying agent thinking/reasoning content.
+ * Supports both plain text and structured collapsible sub-sections.
  */
 
-interface ThinkingSectionProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** The thinking content to display */
-    content: string;
+interface ThinkingSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
+    /** The thinking content to display (string or structured steps) */
+    content: string | ThinkingStep[];
     /** Whether the section is expanded */
     isExpanded: boolean;
+    /**
+     * Custom markdown renderer for the thinking content.
+     * If not provided, the content will be rendered as plain preformatted text.
+     */
+    renderMarkdown?: (content: string) => React.ReactNode;
 }
 /**
  * ThinkingSection Component
  *
  * Displays the agent's thinking/reasoning content in a collapsible panel.
+ * Supports both plain text content and structured collapsible sub-sections.
  *
  * @example
+ * // Plain text content
  * <ThinkingSection content={state.thinking} isExpanded={isExpanded} />
+ *
+ * @example
+ * // Structured content with sub-sections
+ * <ThinkingSection
+ *   content={[
+ *     { id: "1", label: "Analysis", content: "...", depth: 0 },
+ *     { id: "2", label: "Sub-analysis", content: "...", depth: 1 },
+ *   ]}
+ *   isExpanded={isExpanded}
+ * />
  */
 declare const ThinkingSection: React.ForwardRefExoticComponent<ThinkingSectionProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -421,6 +503,16 @@ interface UserPromptInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     disabled?: boolean;
     /** Whether a submission is in progress (shows loading state) */
     isSubmitting?: boolean;
+    /** Called when user clicks Stop during submission */
+    onStop?: () => void;
+    /** Whether to disable input while submitting (default: true) */
+    disableWhileSubmitting?: boolean;
+    /** Auto-focus the editor when mounted (handles Slate initialization timing) */
+    autoFocus?: boolean;
+    /** Refocus the input after submission completes (default: false) */
+    refocusAfterSubmit?: boolean;
+    /** Called when the editor is fully initialized and ready for interaction */
+    onReady?: () => void;
     /** Minimum number of rows for the editor */
     minRows?: number;
     /** Maximum number of rows before scrolling */
@@ -466,4 +558,4 @@ interface UserPromptInputRef {
  */
 declare const UserPromptInput: React.ForwardRefExoticComponent<UserPromptInputProps & React.RefAttributes<UserPromptInputRef>>;
 
-export { ActionBar, type ActionBarProps, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type FeedbackValue, type GenericWebSocketMessage, type KnowledgeItem, type MemoryItem, MetadataRow, type MetadataRowProps, ThinkingSection, type ThinkingSectionProps, type ToolCall, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, formatTime, formatTotalTime, initialAgentResponseState, useAgentResponseAccumulator, useThinkingTimer };
+export { ActionBar, type ActionBarProps, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type FeedbackValue, type GenericWebSocketMessage, type KnowledgeItem, type MemoryItem, MetadataRow, type MetadataRowProps, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type ToolCall, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, formatTime, formatTotalTime, initialAgentResponseState, useAgentResponseAccumulator, useThinkingTimer };

package/dist/index.js

@@ -1,16 +1,36 @@
 import * as React7 from 'react';
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import { cn, Popover, PopoverTrigger, PopoverContent, IconButton, LoadingSpinner } from '@optilogic/core';
-import { Wrench, Book, HardDrive, Check, Copy, ThumbsUp, ThumbsDown, Loader2, Send, ChevronUp, ChevronDown } from 'lucide-react';
+import { Activity, Wrench, Book, HardDrive, Check, Copy, ThumbsUp, ThumbsDown, Square, Loader2, Send, ChevronUp, ChevronDown, ChevronRight } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { SlateEditor, Text } from '@optilogic/editor';
 
 // src/components/agent-response/AgentResponse.tsx
 var ActivityIndicators = React7.forwardRef(
-  ({ toolCalls, knowledge, memory, className, ...props }, ref) => {
-    const hasAnyActivity = toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0;
+  ({ toolCalls, knowledge, memory, statusUpdates = [], className, ...props }, ref) => {
+    const hasAnyActivity = toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0 || statusUpdates.length > 0;
     if (!hasAnyActivity) return null;
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: [
+      statusUpdates.length > 0 && /* @__PURE__ */ jsxs(Popover, { children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(Activity, { className: "w-3.5 h-3.5" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs", children: statusUpdates.length })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "w-80", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm", children: "Status Updates" }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-60 overflow-auto", children: statusUpdates.map((item) => /* @__PURE__ */ jsxs("div", { className: "p-2 bg-muted rounded text-xs", children: [
+            item.agent && /* @__PURE__ */ jsx("div", { className: "font-medium text-muted-foreground", children: item.agent }),
+            /* @__PURE__ */ jsx("div", { className: item.agent ? "mt-1" : "", children: item.message })
+          ] }, item.id)) })
+        ] }) })
+      ] }),
       toolCalls.length > 0 && /* @__PURE__ */ jsxs(Popover, { children: [
         /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "button",
@@ -113,6 +133,7 @@ var MetadataRow = React7.forwardRef(
     toolCalls,
     knowledge,
     memory,
+    statusUpdates = [],
     status,
     elapsedTime,
     className,
@@ -120,7 +141,7 @@ var MetadataRow = React7.forwardRef(
   }, ref) => {
     const isProcessing = status === "processing";
     const isComplete = status === "complete";
-    const hasActivity = toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0;
+    const hasActivity = toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0 || statusUpdates.length > 0;
     const renderLeftContent = () => {
       if (hasThinking) {
         return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
@@ -160,7 +181,8 @@ var MetadataRow = React7.forwardRef(
             {
               toolCalls,
               knowledge,
-              memory
+              memory,
+              statusUpdates
             }
           )
         ]
@@ -169,18 +191,55 @@ var MetadataRow = React7.forwardRef(
   }
 );
 MetadataRow.displayName = "MetadataRow";
+var ThinkingStepItem = ({ step, renderMarkdown }) => {
+  const [isCollapsed, setIsCollapsed] = useState(step.isCollapsed ?? false);
+  const toggleCollapse = useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+  const indentPadding = step.depth * 16;
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-border/50 last:border-b-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: toggleCollapse,
+        className: "w-full flex items-center gap-1.5 py-1.5 px-2 hover:bg-muted/50 transition-colors text-left",
+        style: { paddingLeft: `${indentPadding + 8}px` },
+        children: [
+          isCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground/80", children: step.label })
+        ]
+      }
+    ),
+    !isCollapsed && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pb-2 px-2",
+        style: { paddingLeft: `${indentPadding + 28}px` },
+        children: renderMarkdown ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: renderMarkdown(step.content) }) : /* @__PURE__ */ jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono", children: step.content })
+      }
+    )
+  ] });
+};
 var ThinkingSection = React7.forwardRef(
-  ({ content, isExpanded, className, ...props }, ref) => {
-    if (!isExpanded || !content) {
+  ({ content, isExpanded, renderMarkdown, className, ...props }, ref) => {
+    if (!isExpanded || !content || Array.isArray(content) && content.length === 0) {
       return null;
     }
+    const isStructured = Array.isArray(content);
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn("px-3 pb-3 border-t border-border", className),
         ...props,
-        children: /* @__PURE__ */ jsx("div", { className: "mt-2 max-h-[200px] overflow-y-auto", children: /* @__PURE__ */ jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono", children: content }) })
+        children: /* @__PURE__ */ jsx("div", { className: "mt-2 max-h-[200px] overflow-y-auto", children: isStructured ? /* @__PURE__ */ jsx("div", { className: "space-y-0", children: content.map((step) => /* @__PURE__ */ jsx(
+          ThinkingStepItem,
+          {
+            step,
+            renderMarkdown
+          },
+          step.id
+        )) }) : renderMarkdown ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: renderMarkdown(content) }) : /* @__PURE__ */ jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono", children: content }) })
       }
     );
   }
@@ -309,6 +368,7 @@ var initialAgentResponseState = {
   toolCalls: [],
   knowledge: [],
   memory: [],
+  statusUpdates: [],
   response: "",
   thinkingStartTime: null,
   responseCompleteTime: null,
@@ -343,6 +403,23 @@ function useAgentResponseAccumulator(options) {
             }
             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 ?? 0,
+                isCollapsed: payload.thinkingStep.isCollapsed
+              };
+              const thinkingStartTime2 = prev.thinkingStartTime ?? Date.now();
+              return {
+                ...prev,
+                status: newStatus,
+                thinkingSteps: [...prev.thinkingSteps || [], newStep],
+                thinkingStartTime: thinkingStartTime2,
+                firstMessageTime
+              };
+            }
             const newThinking = payload.message || payload.content || "";
             const separator = prev.thinking && newThinking ? "\n\n" : "";
             const thinkingStartTime = prev.thinkingStartTime ?? (newThinking ? Date.now() : null);
@@ -416,6 +493,24 @@ function useAgentResponseAccumulator(options) {
               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()
+              };
+              return {
+                ...prev,
+                status: newStatus,
+                statusUpdates: [...prev.statusUpdates, newStatusItem],
+                firstMessageTime
+              };
+            }
+            return { ...prev, status: newStatus, firstMessageTime };
+          }
           default:
             return { ...prev, status: newStatus, firstMessageTime };
         }
@@ -441,6 +536,7 @@ var AgentResponse = React7.forwardRef(
     onThinkingExpandedChange,
     actionsVisible = "hover",
     renderMarkdown,
+    renderThinkingMarkdown,
     className,
     ...props
   }, ref) => {
@@ -465,8 +561,9 @@ var AgentResponse = React7.forwardRef(
       if (!state.firstMessageTime || !state.responseCompleteTime) return 0;
       return (state.responseCompleteTime - state.firstMessageTime) / 1e3;
     }, [state.firstMessageTime, state.responseCompleteTime]);
-    const hasAnyContent = state.thinking || state.toolCalls.length > 0 || state.knowledge.length > 0 || state.memory.length > 0 || state.response;
-    const showMetadataRow = state.thinking || state.toolCalls.length > 0 || state.knowledge.length > 0 || state.memory.length > 0 || state.status === "processing";
+    const hasThinkingContent = !!state.thinking || state.thinkingSteps && state.thinkingSteps.length > 0 || false;
+    const hasAnyContent = hasThinkingContent || state.toolCalls.length > 0 || state.knowledge.length > 0 || state.memory.length > 0 || state.statusUpdates.length > 0 || state.response;
+    const showMetadataRow = hasThinkingContent || state.toolCalls.length > 0 || state.knowledge.length > 0 || state.memory.length > 0 || state.statusUpdates.length > 0 || state.status === "processing";
     const showActionBar = state.status === "complete" && state.response;
     const isActionBarVisible = actionsVisible === true || actionsVisible === "hover" && isHovered;
     if (!hasAnyContent) {
@@ -486,12 +583,13 @@ var AgentResponse = React7.forwardRef(
               /* @__PURE__ */ jsx(
                 MetadataRow,
                 {
-                  hasThinking: !!state.thinking,
+                  hasThinking: hasThinkingContent,
                   isExpanded: thinkingExpanded,
                   onToggle: toggleThinking,
                   toolCalls: state.toolCalls,
                   knowledge: state.knowledge,
                   memory: state.memory,
+                  statusUpdates: state.statusUpdates,
                   status: state.status,
                   elapsedTime
                 }
@@ -499,8 +597,9 @@ var AgentResponse = React7.forwardRef(
               /* @__PURE__ */ jsx(
                 ThinkingSection,
                 {
-                  content: state.thinking,
-                  isExpanded: thinkingExpanded
+                  content: state.thinkingSteps && state.thinkingSteps.length > 0 ? state.thinkingSteps : state.thinking,
+                  isExpanded: thinkingExpanded,
+                  renderMarkdown: renderThinkingMarkdown
                 }
               )
             ] }),
@@ -640,6 +739,11 @@ var UserPromptInput = React7.forwardRef(
     placeholder = "Type your message...",
     disabled = false,
     isSubmitting = false,
+    onStop,
+    disableWhileSubmitting = true,
+    autoFocus = false,
+    refocusAfterSubmit = false,
+    onReady,
     minRows = 1,
     maxRows = 6,
     renderActions,
@@ -651,13 +755,52 @@ var UserPromptInput = React7.forwardRef(
   }, ref) => {
     const editorRef = React7.useRef(null);
     const [internalValue, setInternalValue] = React7.useState(value);
+    const prevIsSubmitting = React7.useRef(isSubmitting);
+    const hasEmittedReady = React7.useRef(false);
     React7.useEffect(() => {
       setInternalValue(value);
     }, [value]);
+    React7.useEffect(() => {
+      if (autoFocus) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            editorRef.current?.focus();
+          });
+        });
+      }
+    }, [autoFocus]);
+    React7.useEffect(() => {
+      if (!hasEmittedReady.current && onReady) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            hasEmittedReady.current = true;
+            onReady();
+          });
+        });
+      }
+    }, [onReady]);
+    React7.useEffect(() => {
+      if (refocusAfterSubmit && prevIsSubmitting.current && !isSubmitting) {
+        requestAnimationFrame(() => {
+          editorRef.current?.focus();
+        });
+      }
+      prevIsSubmitting.current = isSubmitting;
+    }, [isSubmitting, refocusAfterSubmit]);
     React7.useImperativeHandle(
       ref,
       () => ({
-        focus: () => editorRef.current?.focus(),
+        focus: () => {
+          try {
+            editorRef.current?.focus();
+          } catch {
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                editorRef.current?.focus();
+              });
+            });
+          }
+        },
         clear: () => {
           editorRef.current?.clear();
           setInternalValue("");
@@ -711,7 +854,7 @@ var UserPromptInput = React7.forwardRef(
               onSubmit: handleSubmit,
               clearOnSubmit: false,
               placeholder,
-              disabled: disabled || isSubmitting,
+              disabled: disabled || disableWhileSubmitting && isSubmitting,
               enableTags,
               onTagCreate,
               onTagDelete,
@@ -723,7 +866,16 @@ var UserPromptInput = React7.forwardRef(
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pl-2 pr-1 pb-1 pt-1", children: [
             /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: renderActions?.() }),
-            /* @__PURE__ */ jsx(
+            isSubmitting && onStop ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: /* @__PURE__ */ jsx(Square, {}),
+                variant: "filled",
+                size: "sm",
+                "aria-label": "Stop",
+                onClick: onStop
+              }
+            ) : /* @__PURE__ */ jsx(
               IconButton,
               {
                 icon: isSubmitting ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(Send, {}),