@optilogic/chat 1.0.0-beta.1 → 1.0.0-beta.10

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

@@ -0,0 +1,326 @@
+import * as React from "react";
+import { Send, Loader2, Square } from "lucide-react";
+import { cn, IconButton } from "@optilogic/core";
+import {
+  SlateEditor,
+  Text,
+  type SlateEditorRef,
+  type NodeEntry,
+  type DecoratedRange,
+  type RenderLeafProps,
+} from "@optilogic/editor";
+import type { UserPromptInputProps, UserPromptInputRef } from "./types";
+
+/**
+ * Creates a decorate function that highlights code blocks.
+ * Handles both complete (```...```) and unclosed (```...) code blocks.
+ */
+function createCodeBlockDecorate(entry: NodeEntry): DecoratedRange[] {
+  const [node, path] = entry;
+  const ranges: DecoratedRange[] = [];
+
+  if (!Text.isText(node)) {
+    return ranges;
+  }
+
+  const { text } = node;
+
+  // Find all ``` positions
+  const backtickPositions: number[] = [];
+  let searchStart = 0;
+  while (true) {
+    const pos = text.indexOf("```", searchStart);
+    if (pos === -1) break;
+    backtickPositions.push(pos);
+    searchStart = pos + 3;
+  }
+
+  // Process pairs of backticks (and handle unclosed blocks)
+  let i = 0;
+  while (i < backtickPositions.length) {
+    const openPos = backtickPositions[i];
+    const closePos = backtickPositions[i + 1];
+
+    // Mark opening delimiter
+    ranges.push({
+      anchor: { path, offset: openPos },
+      focus: { path, offset: openPos + 3 },
+      codeDelimiter: true,
+    } as DecoratedRange);
+
+    if (closePos !== undefined) {
+      // Complete code block - mark content and closing delimiter
+      if (closePos > openPos + 3) {
+        ranges.push({
+          anchor: { path, offset: openPos + 3 },
+          focus: { path, offset: closePos },
+          codeBlock: true,
+        } as DecoratedRange);
+      }
+      ranges.push({
+        anchor: { path, offset: closePos },
+        focus: { path, offset: closePos + 3 },
+        codeDelimiter: true,
+      } as DecoratedRange);
+      i += 2; // Move past both opening and closing
+    } else {
+      // Unclosed code block - mark everything to end as code
+      if (text.length > openPos + 3) {
+        ranges.push({
+          anchor: { path, offset: openPos + 3 },
+          focus: { path, offset: text.length },
+          codeBlock: true,
+        } as DecoratedRange);
+      }
+      i += 1; // Move past opening only
+    }
+  }
+
+  return ranges;
+}
+
+/**
+ * Custom leaf renderer for code block styling
+ */
+function CodeBlockLeaf({ attributes, children, leaf }: RenderLeafProps) {
+  const leafAny = leaf as { codeBlock?: boolean; codeDelimiter?: boolean };
+
+  if (leafAny.codeBlock) {
+    return (
+      <span
+        {...attributes}
+        className="bg-muted/50 text-muted-foreground font-mono text-sm rounded px-1"
+      >
+        {children}
+      </span>
+    );
+  }
+
+  if (leafAny.codeDelimiter) {
+    return (
+      <span
+        {...attributes}
+        className="text-muted-foreground/50 font-mono text-sm"
+      >
+        {children}
+      </span>
+    );
+  }
+
+  return <span {...attributes}>{children}</span>;
+}
+
+/**
+ * UserPromptInput Component
+ *
+ * A rich text input for user messages that wraps SlateEditor.
+ * Features:
+ * - Code block styling with triple backticks
+ * - Send button with loading state
+ * - Action slot for additional buttons
+ * - Tag support (optional)
+ *
+ * @example
+ * <UserPromptInput
+ *   placeholder="Type your message..."
+ *   onSubmit={(text) => sendMessage(text)}
+ *   renderActions={() => (
+ *     <IconButton icon={<Paperclip />} aria-label="Attach file" />
+ *   )}
+ * />
+ */
+export const UserPromptInput = React.forwardRef<
+  UserPromptInputRef,
+  UserPromptInputProps
+>(
+  (
+    {
+      value = "",
+      onChange,
+      onSubmit,
+      clearOnSubmit = true,
+      placeholder = "Type your message...",
+      disabled = false,
+      isSubmitting = false,
+      onStop,
+      disableWhileSubmitting = true,
+      autoFocus = false,
+      refocusAfterSubmit = false,
+      onReady,
+      minRows = 1,
+      maxRows = 6,
+      renderActions,
+      enableTags = false,
+      onTagCreate,
+      onTagDelete,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    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: () => {
+          try {
+            editorRef.current?.focus();
+          } catch {
+            // Retry after Slate initializes (handles early calls)
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                editorRef.current?.focus();
+              });
+            });
+          }
+        },
+        clear: () => {
+          editorRef.current?.clear();
+          setInternalValue("");
+        },
+        getText: () => editorRef.current?.getText() ?? "",
+        insertText: (text: string) => editorRef.current?.insertText(text),
+      }),
+      []
+    );
+
+    const handleChange = React.useCallback(
+      (newValue: string) => {
+        setInternalValue(newValue);
+        onChange?.(newValue);
+      },
+      [onChange]
+    );
+
+    const handleSubmit = React.useCallback(
+      (text: string) => {
+        if (disabled || isSubmitting) return;
+        if (!text.trim()) return;
+
+        onSubmit?.(text.trim());
+
+        if (clearOnSubmit) {
+          editorRef.current?.clear();
+          setInternalValue("");
+        }
+      },
+      [disabled, isSubmitting, onSubmit, clearOnSubmit]
+    );
+
+    const handleSendClick = React.useCallback(() => {
+      const text = editorRef.current?.getText() ?? "";
+      handleSubmit(text);
+    }, [handleSubmit]);
+
+    const hasContent = internalValue.trim().length > 0;
+    const canSubmit = hasContent && !disabled && !isSubmitting;
+
+    return (
+      <div
+        className={cn(
+          "rounded-lg border border-input bg-background",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        )}
+        {...props}
+      >
+        {/* Editor area */}
+        <div className="pl-2 pr-0 pt-1 pb-1">
+          <SlateEditor
+            ref={editorRef}
+            value={internalValue}
+            onChange={handleChange}
+            onSubmit={handleSubmit}
+            clearOnSubmit={false}
+            placeholder={placeholder}
+            disabled={disabled || (disableWhileSubmitting && isSubmitting)}
+            enableTags={enableTags}
+            onTagCreate={onTagCreate}
+            onTagDelete={onTagDelete}
+            minRows={minRows}
+            maxRows={maxRows}
+            decorate={createCodeBlockDecorate}
+            renderLeaf={CodeBlockLeaf}
+          />
+        </div>
+
+        {/* Actions row */}
+        <div className="flex items-center justify-between pl-2 pr-1 pb-1 pt-1">
+          {/* Left actions slot */}
+          <div className="flex items-center gap-1">{renderActions?.()}</div>
+
+          {/* 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>
+    );
+  }
+);
+
+UserPromptInput.displayName = "UserPromptInput";

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

@@ -0,0 +1,2 @@
+export { UserPromptInput } from "./UserPromptInput";
+export type { UserPromptInputProps, UserPromptInputRef } from "./types";

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+export interface UserPromptInputProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSubmit"> {
+  /** Current text value */
+  value?: string;
+  /** Callback when text changes */
+  onChange?: (value: string) => void;
+  /** Callback when user submits (Enter key or send button) */
+  onSubmit?: (text: string) => void;
+  /** Clear input after submit (default: true) */
+  clearOnSubmit?: boolean;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the input is disabled */
+  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 */
+  maxRows?: number;
+  /** Render function for additional action buttons (left side) */
+  renderActions?: () => React.ReactNode;
+  /** Enable tag detection with # character */
+  enableTags?: boolean;
+  /** Callback when a tag is created */
+  onTagCreate?: (tag: string) => void;
+  /** Callback when a tag is deleted */
+  onTagDelete?: (tag: string) => void;
+}
+
+export interface UserPromptInputRef {
+  /** Focus the editor */
+  focus: () => void;
+  /** Clear the editor content */
+  clear: () => void;
+  /** Get the current text content */
+  getText: () => string;
+  /** Insert text at cursor position */
+  insertText: (text: string) => void;
+}

package/src/index.ts

@@ -15,10 +15,14 @@ export {
   MetadataRow,
   ThinkingSection,
   ActionBar,
+  HITLSection,
+  TruncatedMessage,
   type ActivityIndicatorsProps,
   type MetadataRowProps,
   type ThinkingSectionProps,
   type ActionBarProps,
+  type HITLSectionProps,
+  type TruncatedMessageProps,
 
   // Hooks
   useAgentResponseAccumulator,
@@ -34,6 +38,9 @@ export {
   type ToolCall,
   type KnowledgeItem,
   type MemoryItem,
+  type StatusItem,
+  type ThinkingStep,
+  type ThinkingContent,
   type AgentMessage,
   type GenericWebSocketMessage,
 
@@ -44,3 +51,24 @@ export {
   formatTime,
   formatTotalTime,
 } from "./components/agent-response";
+
+// User Prompt - Component for displaying user messages
+export { UserPrompt, type UserPromptProps } from "./components/user-prompt";
+
+// User Prompt Input - Component for user message input
+export {
+  UserPromptInput,
+  type UserPromptInputProps,
+  type UserPromptInputRef,
+} from "./components/user-prompt-input";
+
+// HITL Interactions - Human-in-the-loop question/response components
+export {
+  HITLQuestionPanel,
+  type HITLQuestionPanelProps,
+  HITLInteractionRecord,
+  type HITLInteractionRecordProps,
+  type HITLQuestion,
+  type HITLInteraction,
+  buildResponseString,
+} from "./components/hitl-interactions";