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

package/src/components/user-prompt/UserPrompt.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { cn } from "@optilogic/core";
+
+export interface UserPromptProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The text content of the user's message */
+  content: string;
+  /** Optional timestamp to display below the message */
+  timestamp?: Date;
+}
+
+/**
+ * UserPrompt component
+ *
+ * Displays a user's chat message in a styled bubble.
+ * Used alongside AgentResponse to create chat interfaces.
+ *
+ * @example
+ * ```tsx
+ * <UserPrompt
+ *   content="What is the weather today?"
+ *   timestamp={new Date()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom styling
+ * <UserPrompt
+ *   content="Hello world"
+ *   className="max-w-full"
+ * />
+ * ```
+ */
+export const UserPrompt = React.forwardRef<HTMLDivElement, UserPromptProps>(
+  ({ content, timestamp, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "w-fit max-w-[80%] rounded-lg px-4 pt-3.5 pb-3",
+          "bg-secondary text-secondary-foreground",
+          className
+        )}
+        {...props}
+      >
+        <p className="whitespace-pre-wrap">{content}</p>
+        {timestamp && (
+          <p className="text-xs text-secondary-foreground/70 mt-1">
+            {timestamp.toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit",
+            })}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+UserPrompt.displayName = "UserPrompt";

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

@@ -0,0 +1 @@
+export { UserPrompt, type UserPromptProps } from "./UserPrompt";

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

@@ -0,0 +1,265 @@
+import * as React from "react";
+import { Send, Loader2 } 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,
+      minRows = 1,
+      maxRows = 6,
+      renderActions,
+      enableTags = false,
+      onTagCreate,
+      onTagDelete,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const editorRef = React.useRef<SlateEditorRef>(null);
+    const [internalValue, setInternalValue] = React.useState(value);
+
+    // Sync internal value with prop
+    React.useEffect(() => {
+      setInternalValue(value);
+    }, [value]);
+
+    // Expose ref methods
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => 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 || 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 button */}
+          <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,42 @@
+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;
+  /** 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

@@ -44,3 +44,13 @@ 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";