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

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

@@ -1,33 +1,109 @@
 /**
  * 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.
  */
 
 import * as React from "react";
+import { useState, useCallback } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "@optilogic/core";
+import type { ThinkingStep } from "../types";
 
-export interface ThinkingSectionProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** The thinking content to display */
-  content: string;
+export 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;
 }
 
+/**
+ * Internal component for rendering a collapsible thinking step
+ */
+interface ThinkingStepItemProps {
+  step: ThinkingStep;
+  renderMarkdown?: (content: string) => React.ReactNode;
+}
+
+const ThinkingStepItem: React.FC<ThinkingStepItemProps> = ({ step, renderMarkdown }) => {
+  const [isCollapsed, setIsCollapsed] = useState(step.isCollapsed ?? false);
+
+  const toggleCollapse = useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+
+  const indentPadding = step.depth * 16;
+
+  return (
+    <div className="border-b border-border/50 last:border-b-0">
+      <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` }}
+      >
+        {isCollapsed ? (
+          <ChevronRight className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+        ) : (
+          <ChevronDown className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+        )}
+        <span className="text-xs font-medium text-foreground/80">{step.label}</span>
+      </button>
+
+      {!isCollapsed && (
+        <div
+          className="pb-2 px-2"
+          style={{ paddingLeft: `${indentPadding + 28}px` }}
+        >
+          {renderMarkdown ? (
+            <div className="text-xs text-muted-foreground">
+              {renderMarkdown(step.content)}
+            </div>
+          ) : (
+            <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono">
+              {step.content}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
 /**
  * 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}
+ * />
  */
 const ThinkingSection = React.forwardRef<HTMLDivElement, ThinkingSectionProps>(
-  ({ 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 (
       <div
         ref={ref}
@@ -35,9 +111,25 @@ const ThinkingSection = React.forwardRef<HTMLDivElement, ThinkingSectionProps>(
         {...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>
+          {isStructured ? (
+            <div className="space-y-0">
+              {content.map((step) => (
+                <ThinkingStepItem
+                  key={step.id}
+                  step={step}
+                  renderMarkdown={renderMarkdown}
+                />
+              ))}
+            </div>
+          ) : renderMarkdown ? (
+            <div className="text-xs text-muted-foreground">
+              {renderMarkdown(content)}
+            </div>
+          ) : (
+            <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono">
+              {content}
+            </pre>
+          )}
         </div>
       </div>
     );

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

@@ -13,6 +13,8 @@ import {
   type ToolCall,
   type KnowledgeItem,
   type MemoryItem,
+  type StatusItem,
+  type ThinkingStep,
 } from "../types";
 
 export interface UseAgentResponseAccumulatorOptions {
@@ -86,6 +88,26 @@ export function useAgentResponseAccumulator(
             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-${Date.now()}`,
+                label: payload.thinkingStep.label,
+                content: payload.thinkingStep.content,
+                depth: payload.thinkingStep.depth ?? 0,
+                isCollapsed: payload.thinkingStep.isCollapsed,
+              };
+              const thinkingStartTime = prev.thinkingStartTime ?? Date.now();
+              return {
+                ...prev,
+                status: newStatus,
+                thinkingSteps: [...(prev.thinkingSteps || []), newStep],
+                thinkingStartTime,
+                firstMessageTime,
+              };
+            }
+
+            // Plain text thinking (existing behavior)
             const newThinking = payload.message || payload.content || "";
             // Add line break between thinking messages
             const separator = prev.thinking && newThinking ? "\n\n" : "";
@@ -170,6 +192,25 @@ export function useAgentResponseAccumulator(
               firstMessageTime: prev.firstMessageTime ?? Date.now(),
             };
 
+          case "status_update": {
+            const statusMessage = payload.message || payload.statusUpdate?.message;
+            if (statusMessage) {
+              const newStatusItem: StatusItem = {
+                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 };
         }

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

@@ -38,6 +38,9 @@ export type {
   ToolCall,
   KnowledgeItem,
   MemoryItem,
+  StatusItem,
+  ThinkingStep,
+  ThinkingContent,
   AgentMessage,
   GenericWebSocketMessage,
 } from "./types";

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

@@ -44,6 +44,40 @@ export interface MemoryItem {
   timestamp: number;
 }
 
+/**
+ * Status update information from the agent
+ */
+export 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
+ */
+export 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
+ */
+export type ThinkingContent = string | ThinkingStep[];
+
 /**
  * State shape for the agent response component
  */
@@ -52,12 +86,16 @@ export 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) */
@@ -72,7 +110,7 @@ export interface AgentResponseState {
  * WebSocket message payload for agent responses
  */
 export 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 */
@@ -97,6 +135,20 @@ export 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;
+  };
 }
 
 /**
@@ -117,6 +169,7 @@ export const initialAgentResponseState: AgentResponseState = {
   toolCalls: [],
   knowledge: [],
   memory: [],
+  statusUpdates: [],
   response: "",
   thinkingStartTime: null,
   responseCompleteTime: null,

package/src/components/user-prompt-input/UserPromptInput.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Send, Loader2 } from "lucide-react";
+import { Send, Loader2, Square } from "lucide-react";
 import { cn, IconButton } from "@optilogic/core";
 import {
   SlateEditor,
@@ -142,6 +142,11 @@ export const UserPromptInput = React.forwardRef<
       placeholder = "Type your message...",
       disabled = false,
       isSubmitting = false,
+      onStop,
+      disableWhileSubmitting = true,
+      autoFocus = false,
+      refocusAfterSubmit = false,
+      onReady,
       minRows = 1,
       maxRows = 6,
       renderActions,
@@ -155,17 +160,63 @@ export const UserPromptInput = React.forwardRef<
   ) => {
     const editorRef = React.useRef<SlateEditorRef>(null);
     const [internalValue, setInternalValue] = React.useState(value);
+    const prevIsSubmitting = React.useRef(isSubmitting);
+    const hasEmittedReady = React.useRef(false);
 
     // Sync internal value with prop
     React.useEffect(() => {
       setInternalValue(value);
     }, [value]);
 
+    // Handle autoFocus - use double RAF to ensure Slate is fully initialized
+    React.useEffect(() => {
+      if (autoFocus) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            editorRef.current?.focus();
+          });
+        });
+      }
+    }, [autoFocus]);
+
+    // Emit onReady callback when editor is initialized
+    React.useEffect(() => {
+      if (!hasEmittedReady.current && onReady) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            hasEmittedReady.current = true;
+            onReady();
+          });
+        });
+      }
+    }, [onReady]);
+
+    // Refocus after submit completes
+    React.useEffect(() => {
+      if (refocusAfterSubmit && prevIsSubmitting.current && !isSubmitting) {
+        requestAnimationFrame(() => {
+          editorRef.current?.focus();
+        });
+      }
+      prevIsSubmitting.current = isSubmitting;
+    }, [isSubmitting, refocusAfterSubmit]);
+
     // Expose ref methods
     React.useImperativeHandle(
       ref,
       () => ({
-        focus: () => editorRef.current?.focus(),
+        focus: () => {
+          try {
+            editorRef.current?.focus();
+          } catch {
+            // Retry after Slate initializes (handles early calls)
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                editorRef.current?.focus();
+              });
+            });
+          }
+        },
         clear: () => {
           editorRef.current?.clear();
           setInternalValue("");
@@ -225,7 +276,7 @@ export const UserPromptInput = React.forwardRef<
             onSubmit={handleSubmit}
             clearOnSubmit={false}
             placeholder={placeholder}
-            disabled={disabled || isSubmitting}
+            disabled={disabled || (disableWhileSubmitting && isSubmitting)}
             enableTags={enableTags}
             onTagCreate={onTagCreate}
             onTagDelete={onTagDelete}
@@ -241,21 +292,31 @@ export const UserPromptInput = React.forwardRef<
           {/* Left actions slot */}
           <div className="flex items-center gap-1">{renderActions?.()}</div>
 
-          {/* Send button */}
-          <IconButton
-            icon={
-              isSubmitting ? (
-                <Loader2 className="animate-spin" />
-              ) : (
-                <Send />
-              )
-            }
-            variant="filled"
-            size="sm"
-            aria-label={isSubmitting ? "Sending..." : "Send message"}
-            disabled={!canSubmit}
-            onClick={handleSendClick}
-          />
+          {/* Send/Stop button */}
+          {isSubmitting && onStop ? (
+            <IconButton
+              icon={<Square />}
+              variant="filled"
+              size="sm"
+              aria-label="Stop"
+              onClick={onStop}
+            />
+          ) : (
+            <IconButton
+              icon={
+                isSubmitting ? (
+                  <Loader2 className="animate-spin" />
+                ) : (
+                  <Send />
+                )
+              }
+              variant="filled"
+              size="sm"
+              aria-label={isSubmitting ? "Sending..." : "Send message"}
+              disabled={!canSubmit}
+              onClick={handleSendClick}
+            />
+          )}
         </div>
       </div>
     );

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

@@ -16,6 +16,16 @@ export interface UserPromptInputProps
   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 */

package/src/index.ts

@@ -34,6 +34,9 @@ export {
   type ToolCall,
   type KnowledgeItem,
   type MemoryItem,
+  type StatusItem,
+  type ThinkingStep,
+  type ThinkingContent,
   type AgentMessage,
   type GenericWebSocketMessage,