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

package/README.md

@@ -0,0 +1,99 @@
+# @optilogic/chat
+
+Chat UI components for opti-ui - Components for displaying LLM/AI agent interactions.
+
+## Installation
+
+```bash
+npm install @optilogic/chat @optilogic/core @optilogic/editor slate slate-react slate-history
+```
+
+## Setup
+
+Make sure you have configured `@optilogic/core` with the Tailwind preset and CSS variables.
+
+## Usage
+
+### AgentResponse
+
+Display AI agent responses with thinking indicators, tool calls, and feedback actions:
+
+```tsx
+import { AgentResponse, useAgentResponseAccumulator } from '@optilogic/chat';
+
+function ChatView() {
+  const { state, handlers } = useAgentResponseAccumulator({
+    onComplete: (response) => console.log('Response complete:', response),
+  });
+
+  return (
+    <AgentResponse
+      {...state}
+      onCopy={() => navigator.clipboard.writeText(state.content)}
+      onFeedback={(value) => console.log('Feedback:', value)}
+    />
+  );
+}
+```
+
+### UserPrompt
+
+Display user messages in the chat:
+
+```tsx
+import { UserPrompt } from '@optilogic/chat';
+
+function ChatMessage() {
+  return (
+    <UserPrompt
+      content="What is the weather today?"
+      timestamp={new Date()}
+    />
+  );
+}
+```
+
+### UserPromptInput
+
+Input component for user messages:
+
+```tsx
+import { UserPromptInput } from '@optilogic/chat';
+
+function ChatInput() {
+  return (
+    <UserPromptInput
+      onSubmit={(text) => console.log('Submitted:', text)}
+      placeholder="Type your message..."
+    />
+  );
+}
+```
+
+## Components
+
+### AgentResponse
+Main component for displaying AI agent responses with:
+- Streaming content support
+- Thinking/reasoning indicators
+- Tool call visualization
+- Copy and feedback actions
+- Metadata display (tokens, timing)
+
+### UserPrompt
+Component for displaying user messages in the chat interface.
+
+### UserPromptInput
+Input component for composing user messages with tag support.
+
+## Hooks
+
+### useAgentResponseAccumulator
+Manages state for streaming agent responses, handling incremental updates and message accumulation.
+
+### useThinkingTimer
+Tracks elapsed time during agent thinking phases.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -28,10 +28,30 @@ var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
 
 // src/components/agent-response/AgentResponse.tsx
 var ActivityIndicators = React7__namespace.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__ */ jsxRuntime.jsxs("div", { ref, className: core.cn("flex items-center gap-2", className), ...props, children: [
+      statusUpdates.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(core.Popover, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "w-3.5 h-3.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: statusUpdates.length })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.PopoverContent, { className: "w-80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-sm", children: "Status Updates" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 max-h-60 overflow-auto", children: statusUpdates.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 bg-muted rounded text-xs", children: [
+            item.agent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground", children: item.agent }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: item.agent ? "mt-1" : "", children: item.message })
+          ] }, item.id)) })
+        ] }) })
+      ] }),
       toolCalls.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(core.Popover, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(core.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
@@ -134,6 +154,7 @@ var MetadataRow = React7__namespace.forwardRef(
     toolCalls,
     knowledge,
     memory,
+    statusUpdates = [],
     status,
     elapsedTime,
     className,
@@ -141,7 +162,7 @@ var MetadataRow = React7__namespace.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
@@ -181,7 +202,8 @@ var MetadataRow = React7__namespace.forwardRef(
             {
               toolCalls,
               knowledge,
-              memory
+              memory,
+              statusUpdates
             }
           )
         ]
@@ -190,18 +212,55 @@ var MetadataRow = React7__namespace.forwardRef(
   }
 );
 MetadataRow.displayName = "MetadataRow";
+var ThinkingStepItem = ({ step, renderMarkdown }) => {
+  const [isCollapsed, setIsCollapsed] = React7.useState(step.isCollapsed ?? false);
+  const toggleCollapse = React7.useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+  const indentPadding = step.depth * 16;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border/50 last:border-b-0", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground/80", children: step.label })
+        ]
+      }
+    ),
+    !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "pb-2 px-2",
+        style: { paddingLeft: `${indentPadding + 28}px` },
+        children: renderMarkdown ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: renderMarkdown(step.content) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono", children: step.content })
+      }
+    )
+  ] });
+};
 var ThinkingSection = React7__namespace.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__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: core.cn("px-3 pb-3 border-t border-border", className),
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 max-h-[200px] overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono", children: content }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 max-h-[200px] overflow-y-auto", children: isStructured ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0", children: content.map((step) => /* @__PURE__ */ jsxRuntime.jsx(
+          ThinkingStepItem,
+          {
+            step,
+            renderMarkdown
+          },
+          step.id
+        )) }) : renderMarkdown ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: renderMarkdown(content) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-muted-foreground whitespace-pre-wrap font-mono", children: content }) })
       }
     );
   }
@@ -330,6 +389,7 @@ var initialAgentResponseState = {
   toolCalls: [],
   knowledge: [],
   memory: [],
+  statusUpdates: [],
   response: "",
   thinkingStartTime: null,
   responseCompleteTime: null,
@@ -364,6 +424,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);
@@ -437,6 +514,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 };
         }
@@ -462,6 +557,7 @@ var AgentResponse = React7__namespace.forwardRef(
     onThinkingExpandedChange,
     actionsVisible = "hover",
     renderMarkdown,
+    renderThinkingMarkdown,
     className,
     ...props
   }, ref) => {
@@ -486,8 +582,9 @@ var AgentResponse = React7__namespace.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) {
@@ -507,12 +604,13 @@ var AgentResponse = React7__namespace.forwardRef(
               /* @__PURE__ */ jsxRuntime.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
                 }
@@ -520,8 +618,9 @@ var AgentResponse = React7__namespace.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(
                 ThinkingSection,
                 {
-                  content: state.thinking,
-                  isExpanded: thinkingExpanded
+                  content: state.thinkingSteps && state.thinkingSteps.length > 0 ? state.thinkingSteps : state.thinking,
+                  isExpanded: thinkingExpanded,
+                  renderMarkdown: renderThinkingMarkdown
                 }
               )
             ] }),
@@ -661,6 +760,11 @@ var UserPromptInput = React7__namespace.forwardRef(
     placeholder = "Type your message...",
     disabled = false,
     isSubmitting = false,
+    onStop,
+    disableWhileSubmitting = true,
+    autoFocus = false,
+    refocusAfterSubmit = false,
+    onReady,
     minRows = 1,
     maxRows = 6,
     renderActions,
@@ -672,13 +776,52 @@ var UserPromptInput = React7__namespace.forwardRef(
   }, ref) => {
     const editorRef = React7__namespace.useRef(null);
     const [internalValue, setInternalValue] = React7__namespace.useState(value);
+    const prevIsSubmitting = React7__namespace.useRef(isSubmitting);
+    const hasEmittedReady = React7__namespace.useRef(false);
     React7__namespace.useEffect(() => {
       setInternalValue(value);
     }, [value]);
+    React7__namespace.useEffect(() => {
+      if (autoFocus) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            editorRef.current?.focus();
+          });
+        });
+      }
+    }, [autoFocus]);
+    React7__namespace.useEffect(() => {
+      if (!hasEmittedReady.current && onReady) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            hasEmittedReady.current = true;
+            onReady();
+          });
+        });
+      }
+    }, [onReady]);
+    React7__namespace.useEffect(() => {
+      if (refocusAfterSubmit && prevIsSubmitting.current && !isSubmitting) {
+        requestAnimationFrame(() => {
+          editorRef.current?.focus();
+        });
+      }
+      prevIsSubmitting.current = isSubmitting;
+    }, [isSubmitting, refocusAfterSubmit]);
     React7__namespace.useImperativeHandle(
       ref,
       () => ({
-        focus: () => editorRef.current?.focus(),
+        focus: () => {
+          try {
+            editorRef.current?.focus();
+          } catch {
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                editorRef.current?.focus();
+              });
+            });
+          }
+        },
         clear: () => {
           editorRef.current?.clear();
           setInternalValue("");
@@ -732,7 +875,7 @@ var UserPromptInput = React7__namespace.forwardRef(
               onSubmit: handleSubmit,
               clearOnSubmit: false,
               placeholder,
-              disabled: disabled || isSubmitting,
+              disabled: disabled || disableWhileSubmitting && isSubmitting,
               enableTags,
               onTagCreate,
               onTagDelete,
@@ -744,7 +887,16 @@ var UserPromptInput = React7__namespace.forwardRef(
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pl-2 pr-1 pb-1 pt-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: renderActions?.() }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            isSubmitting && onStop ? /* @__PURE__ */ jsxRuntime.jsx(
+              core.IconButton,
+              {
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, {}),
+                variant: "filled",
+                size: "sm",
+                "aria-label": "Stop",
+                onClick: onStop
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
               core.IconButton,
               {
                 icon: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, {}),