@tangle-network/ui 1.0.0

package/src/chat/chat-input.tsx

@@ -0,0 +1,389 @@
+/**
+ * ChatInput — message input bar with file attach, drag-and-drop, send/cancel.
+ *
+ * - Auto-resizing textarea (up to max height)
+ * - Enter to send, Shift+Enter for newline
+ * - Drag-and-drop files onto the input with styled overlay
+ * - File attachment button (files) + folder attachment button
+ * - Pending file/folder chips
+ * - Cancel button when streaming
+ * - Optional model selector pill
+ */
+
+import { useState, useRef, useCallback, type KeyboardEvent, type ChangeEvent, type DragEvent } from "react";
+import { Send, Square, Paperclip, FolderUp, X, Upload } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface PendingFile {
+  id: string;
+  name: string;
+  size: number;
+  type: "file" | "folder";
+  /** Number of files inside (for folders) */
+  fileCount?: number;
+  status: "pending" | "uploading" | "ready" | "error";
+}
+
+export interface ChatInputProps {
+  onSend: (message: string, files?: File[]) => void;
+  onCancel?: () => void;
+  isStreaming?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  /** Currently selected model label */
+  modelLabel?: string;
+  onModelClick?: () => void;
+  /** Pending uploaded files */
+  pendingFiles?: PendingFile[];
+  onRemoveFile?: (id: string) => void;
+  /** Called when files are attached (via button or drag-and-drop) */
+  onAttach?: (files: FileList) => void;
+  /** Called when a folder is selected via the folder button */
+  onAttachFolder?: (files: FileList) => void;
+  /** Accepted file types for the file input (e.g. ".pdf,.csv") */
+  accept?: string;
+  /** Drop zone overlay title */
+  dropTitle?: string;
+  /** Drop zone overlay description */
+  dropDescription?: string;
+  className?: string;
+  /** Label above the input. Set to null to hide. Default: "Agent Command Deck" */
+  inputLabel?: string | null;
+  /** Status text shown when idle. Set to null to hide. Default: "Ready for next instruction" */
+  idleStatus?: string | null;
+  /** Status text shown when streaming. Set to null to hide. Default: "Streaming response" */
+  streamingStatus?: string | null;
+  /** Hide the Cmd+L focus shortcut hint */
+  hideShortcutHint?: boolean;
+}
+
+export function ChatInput({
+  onSend,
+  onCancel,
+  isStreaming,
+  disabled,
+  placeholder = "Ask the agent to inspect files, run commands, or explain results…",
+  modelLabel,
+  onModelClick,
+  pendingFiles = [],
+  onRemoveFile,
+  onAttach,
+  onAttachFolder,
+  accept,
+  dropTitle = "Drop files to add context",
+  dropDescription = "Files will be attached to your next message.",
+  className,
+  inputLabel = "Agent Command Deck",
+  idleStatus = "Ready for next instruction",
+  streamingStatus = "Streaming response",
+  hideShortcutHint,
+}: ChatInputProps) {
+  const [value, setValue] = useState("");
+  const [dragOver, setDragOver] = useState(false);
+  const dragCounter = useRef(0);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const folderInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSend = useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed || isStreaming || disabled) return;
+    onSend(trimmed);
+    setValue("");
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  }, [value, isStreaming, disabled, onSend]);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    const el = e.target;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+  };
+
+  const handleAttachClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFolderClick = () => {
+    folderInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files?.length) {
+      onAttach?.(e.target.files);
+      e.target.value = "";
+    }
+  };
+
+  const handleFolderChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files?.length) {
+      (onAttachFolder ?? onAttach)?.(e.target.files);
+      e.target.value = "";
+    }
+  };
+
+  // Drag-and-drop handlers
+  const handleDragEnter = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current++;
+    if (e.dataTransfer?.types.includes("Files")) {
+      setDragOver(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current--;
+    if (dragCounter.current === 0) {
+      setDragOver(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "copy";
+  }, []);
+
+  const handleDrop = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current = 0;
+    setDragOver(false);
+
+    const files = e.dataTransfer?.files;
+    if (files?.length && onAttach) {
+      onAttach(files);
+    }
+  }, [onAttach]);
+
+  const fileChips = pendingFiles.filter((f) => f.type === "file" || !f.type);
+  const folderChips = pendingFiles.filter((f) => f.type === "folder");
+
+  return (
+    <div
+      className={cn("relative", className)}
+      onDragEnter={onAttach ? handleDragEnter : undefined}
+      onDragLeave={onAttach ? handleDragLeave : undefined}
+      onDragOver={onAttach ? handleDragOver : undefined}
+      onDrop={onAttach ? handleDrop : undefined}
+    >
+      {/* Drop zone overlay */}
+      {dragOver && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center rounded-[var(--radius-xl)] border-2 border-dashed border-border bg-card pointer-events-none">
+          <div className="text-center">
+            <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--accent-surface-soft)]">
+              <Upload className="h-6 w-6 text-primary" />
+            </div>
+            <p className="text-sm font-semibold text-foreground">{dropTitle}</p>
+            <p className="mt-1 text-xs text-muted-foreground">{dropDescription}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Pending file chips */}
+      {pendingFiles.length > 0 && (
+        <div className="mb-3 flex flex-wrap gap-2">
+          {folderChips.map((f) => (
+            <span
+              key={f.id}
+              className={cn(
+                "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border px-3 py-1.5 text-xs",
+                "border-border bg-muted/50",
+                f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
+                f.status !== "error" && "text-foreground",
+              )}
+            >
+              <FolderUp className="h-3 w-3 shrink-0" />
+              <span className="truncate max-w-[150px]">{f.name}</span>
+              {f.fileCount !== undefined && (
+                <span className="text-muted-foreground">({f.fileCount})</span>
+              )}
+              {f.status === "uploading" && (
+                <span className="w-3 h-3 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+              )}
+              {onRemoveFile && (
+                <button
+                  type="button"
+                  aria-label={`Remove ${f.name}`}
+                  onClick={() => onRemoveFile(f.id)}
+                  className="rounded p-0.5 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              )}
+            </span>
+          ))}
+          {fileChips.map((f) => (
+            <span
+              key={f.id}
+              className={cn(
+                "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border px-3 py-1.5 text-xs",
+                "border-border bg-muted/50",
+                f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
+                f.status !== "error" && "text-foreground",
+              )}
+            >
+              <Paperclip className="h-3 w-3 shrink-0" />
+              <span className="truncate max-w-[150px]">{f.name}</span>
+              {f.status === "uploading" && (
+                <span className="w-3 h-3 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+              )}
+              {onRemoveFile && (
+                <button
+                  type="button"
+                  aria-label={`Remove ${f.name}`}
+                  onClick={() => onRemoveFile(f.id)}
+                  className="rounded p-0.5 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              )}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Input row */}
+      <div className="rounded-[24px] border border-[var(--chat-input-border,var(--border-default))] [background:var(--chat-input-bg,var(--bg-card))] shadow-[var(--chat-input-shadow,0_1px_2px_rgba(15,23,42,0.05))] transition-all focus-within:border-[var(--chat-input-focus-border,var(--border-accent))] focus-within:shadow-[var(--chat-input-focus-shadow,0_10px_30px_rgba(15,23,42,0.08))]">
+        <div className="rounded-[24px] px-4 py-[var(--chat-input-py)]">
+          {(inputLabel !== null || idleStatus !== null || streamingStatus !== null) && (
+            <div className="mb-1.5 flex items-center justify-between gap-3 px-1">
+              {inputLabel !== null && (
+                <div className="text-[var(--chat-label-size,11px)] font-[var(--chat-label-weight,600)] uppercase tracking-[var(--chat-label-tracking,0.16em)] text-[var(--text-muted)]">
+                  {inputLabel}
+                </div>
+              )}
+              {(idleStatus !== null || streamingStatus !== null) && (
+                <div className="text-[var(--chat-label-size,11px)] text-[var(--text-muted)]">
+                  {isStreaming ? (streamingStatus ?? "") : (idleStatus ?? "")}
+                </div>
+              )}
+            </div>
+          )}
+          <div className="flex items-end gap-2.5">
+        {/* Attach buttons */}
+        {onAttach && (
+          <>
+            <button
+              type="button"
+              onClick={handleAttachClick}
+              disabled={isStreaming}
+              aria-label="Attach files"
+              title="Attach files"
+              className="mb-0.5 shrink-0 rounded-[var(--radius-md)] border border-transparent p-2 text-muted-foreground transition-colors hover:border-border hover:bg-accent hover:text-foreground disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+            >
+              <Paperclip className="h-4 w-4" />
+            </button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              className="hidden"
+              onChange={handleFileChange}
+              accept={accept ?? ".pdf,.csv,.xlsx,.xls,.jpg,.jpeg,.png,.gif,.txt,.json,.yaml,.yml"}
+            />
+          </>
+        )}
+        {(onAttachFolder ?? onAttach) && (
+          <>
+            <button
+              type="button"
+              onClick={handleFolderClick}
+              disabled={isStreaming}
+              aria-label="Attach folder"
+              title="Attach folder"
+              className="mb-0.5 shrink-0 rounded-[var(--radius-md)] border border-transparent p-2 text-muted-foreground transition-colors hover:border-border hover:bg-accent hover:text-foreground disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+            >
+              <FolderUp className="h-4 w-4" />
+            </button>
+            <input
+              ref={folderInputRef}
+              type="file"
+              multiple
+              className="hidden"
+              onChange={handleFolderChange}
+              // @ts-ignore webkitdirectory is non-standard but widely supported
+              webkitdirectory=""
+            />
+          </>
+        )}
+
+        {/* Textarea */}
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={isStreaming || disabled}
+          rows={1}
+          aria-label="Message input"
+          className="min-h-[42px] max-h-[160px] flex-1 resize-none bg-transparent py-2 text-[15px] leading-6 text-foreground placeholder:text-muted-foreground disabled:opacity-50 focus-visible:outline-none"
+        />
+
+        {/* Send / Cancel */}
+        {isStreaming ? (
+          <button
+            type="button"
+            onClick={onCancel}
+            aria-label="Stop response"
+            className="mb-0.5 shrink-0 rounded-[var(--radius-lg)] border border-[var(--code-error)]/20 bg-[var(--code-error)]/14 p-2.5 text-[var(--code-error)] transition-colors hover:bg-[var(--code-error)]/24 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--code-error)]/50"
+          >
+            <Square className="h-4 w-4" />
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={handleSend}
+            disabled={!value.trim() || disabled}
+            aria-label="Send message"
+            className="mb-0.5 inline-flex shrink-0 items-center gap-1.5 rounded-full border border-[var(--chat-send-border,var(--border-accent))] [background:var(--chat-send-bg,var(--brand-primary))] px-3.5 py-2.5 text-sm font-medium text-[var(--chat-send-color,white)] shadow-[var(--chat-send-shadow,0_6px_16px_rgba(15,23,42,0.12))] transition-all hover:translate-y-[-1px] hover:[background:var(--chat-send-hover-bg,var(--brand-strong))] disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--chat-send-ring,var(--border-accent))]"
+          >
+            <Send className="h-4 w-4" />
+            <span>Send</span>
+          </button>
+        )}
+          </div>
+        </div>
+      </div>
+
+      {/* Footer: model selector + shortcuts */}
+      {(modelLabel || !hideShortcutHint) && (
+        <div className="mt-2 flex items-center justify-between px-1">
+          <div className="flex items-center gap-2">
+            {modelLabel && (
+              <button
+                type="button"
+                onClick={onModelClick}
+                aria-label={`Select model, current model ${modelLabel}`}
+                className="inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border border-border bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:border-primary/20 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+              >
+                <span className="w-1.5 h-1.5 rounded-full bg-[var(--code-success)]" />
+                {modelLabel}
+              </button>
+            )}
+          </div>
+          {!hideShortcutHint && (
+            <span className="text-xs text-muted-foreground">
+              <kbd className="px-1 py-0.5 bg-background rounded border border-border text-[10px]">Cmd</kbd>
+              <kbd className="px-1 py-0.5 bg-background rounded border border-border text-[10px] ml-0.5">L</kbd>
+              <span className="ml-1">to focus</span>
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/chat/chat-message.stories.tsx

@@ -0,0 +1,237 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChatMessage } from './chat-message'
+import { ToolCallStep } from '../run/tool-call-step'
+
+const meta: Meta<typeof ChatMessage> = {
+  title: 'Chat/ChatMessage',
+  component: ChatMessage,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'dark' },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-[var(--bg-root)] p-8">
+        <div className="mx-auto max-w-3xl space-y-4">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof ChatMessage>
+
+const ts = (offsetMinutes = 0) =>
+  new Date(Date.now() - offsetMinutes * 60 * 1000)
+
+export const UserMessage: Story = {
+  args: {
+    role: 'user',
+    content: 'How do I implement a binary search tree in TypeScript?',
+    timestamp: ts(3),
+  },
+}
+
+export const AssistantSimple: Story = {
+  args: {
+    role: 'assistant',
+    content:
+      'A binary search tree (BST) is a node-based data structure where each node has at most two children, and all left descendants are less than the node, all right descendants are greater.',
+    timestamp: ts(2),
+  },
+}
+
+export const AssistantWithCode: Story = {
+  args: {
+    role: 'assistant',
+    content: `Here's a clean BST implementation in TypeScript:
+
+\`\`\`typescript
+interface TreeNode<T> {
+  value: T
+  left: TreeNode<T> | null
+  right: TreeNode<T> | null
+}
+
+class BinarySearchTree<T> {
+  private root: TreeNode<T> | null = null
+
+  insert(value: T): void {
+    this.root = this.insertNode(this.root, value)
+  }
+
+  private insertNode(node: TreeNode<T> | null, value: T): TreeNode<T> {
+    if (!node) return { value, left: null, right: null }
+    if (value < node.value) node.left = this.insertNode(node.left, value)
+    else if (value > node.value) node.right = this.insertNode(node.right, value)
+    return node
+  }
+
+  contains(value: T): boolean {
+    let current = this.root
+    while (current) {
+      if (value === current.value) return true
+      current = value < current.value ? current.left : current.right
+    }
+    return false
+  }
+
+  inOrder(): T[] {
+    const result: T[] = []
+    const traverse = (node: TreeNode<T> | null) => {
+      if (!node) return
+      traverse(node.left)
+      result.push(node.value)
+      traverse(node.right)
+    }
+    traverse(this.root)
+    return result
+  }
+}
+\`\`\`
+
+**Key properties:**
+- \`insert\` — O(log n) average, O(n) worst case
+- \`contains\` — O(log n) average, O(n) worst case
+- \`inOrder\` — O(n) always, yields sorted output
+
+For a balanced variant, consider AVL or Red-Black trees.`,
+    timestamp: ts(2),
+  },
+}
+
+export const AssistantStreaming: Story = {
+  args: {
+    role: 'assistant',
+    content: `I'll analyze the performance bottleneck in your \`fetchData\` hook. The issue is that \`useState(true)\` initializes loading as true before React even checks the cache`,
+    isStreaming: true,
+    timestamp: ts(0),
+  },
+}
+
+export const AssistantWithToolCalls: Story = {
+  args: {
+    role: 'assistant',
+    content: 'Let me read the current implementation first.',
+    toolCalls: (
+      <div className="mt-3 space-y-2">
+        <ToolCallStep
+          type="read"
+          label="Read src/hooks/useFetchData.ts"
+          status="success"
+          output={`export function useFetchData<T>(url: string) {\n  const [data, setData] = useState<T | null>(null)\n  const [loading, setLoading] = useState(true)\n  // ...`}
+          duration={48}
+        />
+        <ToolCallStep
+          type="grep"
+          label="Search for cache references"
+          status="success"
+          output="No cache layer found. Data fetched on every mount."
+          duration={12}
+        />
+      </div>
+    ),
+    timestamp: ts(1),
+  },
+}
+
+export const AssistantMarkdownRich: Story = {
+  args: {
+    role: 'assistant',
+    content: `## Rate Limiter Design
+
+The **sliding window** algorithm is the right choice here. Here's why:
+
+| Algorithm | Burst Handling | Redis Ops | Accuracy |
+|-----------|---------------|-----------|---------- |
+| Fixed window | Poor | 1 | Low |
+| Token bucket | Good | 2-3 | Medium |
+| **Sliding window** | **Excellent** | **2** | **High** |
+
+### Implementation
+
+\`\`\`typescript
+import Redis from 'ioredis'
+
+export async function rateLimitCheck(
+  redis: Redis,
+  userId: string,
+  limit = 100,
+  windowMs = 60_000,
+): Promise<{ allowed: boolean; remaining: number }> {
+  const now = Date.now()
+  const key = \`rl:\${userId}\`
+  const windowStart = now - windowMs
+
+  const pipeline = redis.pipeline()
+  pipeline.zremrangebyscore(key, '-inf', windowStart)
+  pipeline.zadd(key, now, \`\${now}-\${Math.random()}\`)
+  pipeline.zcard(key)
+  pipeline.pexpire(key, windowMs)
+
+  try {
+    const results = await pipeline.exec()
+    const count = (results?.[2]?.[1] as number) ?? 0
+    return { allowed: count <= limit, remaining: Math.max(0, limit - count) }
+  } catch {
+    // Fail open on Redis errors
+    return { allowed: true, remaining: limit }
+  }
+}
+\`\`\`
+
+> **Note:** The \`zremrangebyscore\` + \`zadd\` pair is atomic per key, keeping overhead to ~0.3ms p99 on a local Redis instance.`,
+    timestamp: ts(1),
+  },
+}
+
+export const SystemMessage: Story = {
+  args: {
+    role: 'system',
+    content: 'Session started. Connected to agent runtime v2.4.1.',
+    timestamp: ts(5),
+  },
+}
+
+export const Conversation: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <ChatMessage
+        role="user"
+        content="Can you help me debug why my React query cache isn't working?"
+        timestamp={ts(5)}
+      />
+      <ChatMessage
+        role="assistant"
+        content="Sure — let me look at your query setup. What version of TanStack Query are you on, and how are you configuring the `QueryClient`?"
+        timestamp={ts(4)}
+      />
+      <ChatMessage
+        role="user"
+        content="v5.28. I'm using the defaults — just `new QueryClient()` with no options."
+        timestamp={ts(3)}
+      />
+      <ChatMessage
+        role="assistant"
+        content={`The default \`staleTime\` in v5 is \`0\`, which means every component mount triggers a background refetch even if data is in cache. That explains the flicker.
+
+Set a non-zero \`staleTime\`:
+
+\`\`\`typescript
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60 * 1000, // 1 minute
+    },
+  },
+})
+\`\`\`
+
+With this, cached data is considered fresh for 60 seconds and no refetch occurs on mount.`}
+        timestamp={ts(2)}
+      />
+    </div>
+  ),
+}