@slipstream-ui/ai 0.0.0-stage → 0.3.0

package/src/components/tool-call/ToolCall.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { describe, expect, it } from 'vitest';
+import { ToolCall } from './ToolCall';
+
+const toolCall = {
+  id: 'call_1',
+  name: 'get_weather',
+  arguments: { city: 'Paris' },
+  result: { temp: 21 },
+  status: 'completed' as const,
+};
+
+describe('ToolCall', () => {
+  it('renders the tool name, id, and status', () => {
+    render(<ToolCall toolCall={toolCall} />);
+    expect(screen.getByText('get_weather')).toBeInTheDocument();
+    expect(screen.getByText('call_1')).toBeInTheDocument();
+    expect(screen.getByText('Completed')).toBeInTheDocument();
+  });
+
+  it.each(['pending', 'running', 'failed'] as const)('labels the %s status', (status) => {
+    const labels = { pending: 'Pending', running: 'Running', failed: 'Failed' };
+    render(<ToolCall toolCall={{ ...toolCall, result: undefined, status }} />);
+    expect(screen.getByText(labels[status])).toBeInTheDocument();
+  });
+
+  it('serializes arguments as JSON', () => {
+    render(<ToolCall toolCall={toolCall} />);
+    expect(screen.getByText(/"city":\s*"Paris"/)).toBeInTheDocument();
+  });
+
+  it('shows the result when present and hides it with showResult=false', () => {
+    const { rerender } = render(<ToolCall toolCall={{ ...toolCall, result: 'Done' }} />);
+    expect(screen.getByText('Done')).toBeInTheDocument();
+
+    rerender(<ToolCall toolCall={toolCall} showResult={false} />);
+    expect(screen.queryByText(/"temp"/)).not.toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<ToolCall toolCall={toolCall} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/components/tool-call/ToolCall.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@slipstream-ui/core';
+import type { ToolCall as ToolCallType } from '../../types';
+
+export type ToolCallProps = {
+  toolCall: ToolCallType;
+  className?: string;
+  showResult?: boolean;
+};
+
+const statusChipClasses: Record<ToolCallType['status'], string> = {
+  pending: 'bg-warning/10 text-warning border-warning/20',
+  running: 'bg-info/10 text-info border-info/20',
+  completed: 'bg-success/10 text-success border-success/20',
+  failed: 'bg-destructive/10 text-destructive border-destructive/20',
+};
+
+const statusLabels: Record<ToolCallType['status'], string> = {
+  pending: 'Pending',
+  running: 'Running',
+  completed: 'Completed',
+  failed: 'Failed',
+};
+
+/**
+ * Displays a single tool invocation: name, status chip, serialized
+ * arguments, optional result, and an error block on failure.
+ */
+const ToolCall = React.forwardRef<HTMLDivElement, ToolCallProps>(
+  ({ toolCall, className, showResult = true, ...props }, ref) => {
+    // Serialize once per tool-call change instead of on every render.
+    const serializedArguments = React.useMemo(
+      () => JSON.stringify(toolCall.arguments, null, 2),
+      [toolCall.arguments]
+    );
+    const serializedResult = React.useMemo(() => {
+      if (toolCall.result === undefined) return undefined;
+      return typeof toolCall.result === 'string'
+        ? toolCall.result
+        : JSON.stringify(toolCall.result, null, 2);
+    }, [toolCall.result]);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'border rounded-lg p-4 bg-muted/30',
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <span className="font-medium text-sm">{toolCall.name}</span>
+            <span
+              className={cn(
+                'text-xs px-2 py-0.5 rounded-full border',
+                statusChipClasses[toolCall.status]
+              )}
+            >
+              {statusLabels[toolCall.status]}
+            </span>
+          </div>
+          <span className="text-xs text-muted-foreground">{toolCall.id}</span>
+        </div>
+
+        <div className="space-y-2">
+          <div>
+            <div className="text-xs font-medium text-muted-foreground mb-1">Arguments</div>
+            <pre className="text-xs bg-muted p-2 rounded overflow-x-auto">
+              <code>{serializedArguments}</code>
+            </pre>
+          </div>
+
+          {showResult && serializedResult !== undefined && (
+            <div>
+              <div className="text-xs font-medium text-muted-foreground mb-1">Result</div>
+              <pre className="text-xs bg-muted p-2 rounded overflow-x-auto">
+                <code>{serializedResult}</code>
+              </pre>
+            </div>
+          )}
+
+          {toolCall.status === 'failed' && toolCall.error && (
+            <div role="alert">
+              <div className="text-xs font-medium text-destructive mb-1">Error</div>
+              <pre className="text-xs bg-destructive/10 text-destructive p-2 rounded overflow-x-auto whitespace-pre-wrap">
+                <code>{toolCall.error}</code>
+              </pre>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+ToolCall.displayName = 'ToolCall';
+
+export { ToolCall };

package/src/components/tool-call/index.ts

@@ -0,0 +1,2 @@
+export { ToolCall } from './ToolCall';
+export type { ToolCallProps } from './ToolCall';

package/src/index.ts

@@ -0,0 +1,29 @@
+export type {
+  MessageRole,
+  ReasoningStep,
+  SourceItem,
+} from './types';
+// Data-model aliases: exporting these under their bare names would collide
+// with same-named components in the bundled .d.ts output.
+export type {
+  Message as MessageData,
+  ToolCall as ToolCallData,
+} from './types';
+export * from './components/message';
+export * from './components/message-actions';
+export * from './components/attachment';
+export * from './components/response';
+export * from './components/code-block';
+export * from './components/confirmation';
+export * from './components/branch';
+export * from './components/inline-citation';
+export * from './components/conversation';
+export * from './components/prompt-input';
+export * from './components/reasoning';
+export * from './components/tool-call';
+export * from './components/source';
+export * from './components/suggestion';
+export * from './components/chainthought';
+export * from './components/streaming';
+export * from './components/command-palette';
+export * from './adapter';

package/src/manifests/attachment.manifest.json

@@ -0,0 +1,33 @@
+{
+  "id": "attachment",
+  "name": "Attachment / AttachmentList",
+  "tier": "molecule",
+  "description": "File chips for prompts and messages. `Attachment` renders one file; `AttachmentList` renders a wrapping row. Display-only: upload and file-system logic stay in the consumer.",
+  "designIntent": "Show what files are part of a conversation turn (name, size, type, thumbnail, upload status) without coupling the library to any upload implementation.",
+  "props": [
+    { "name": "attachment", "type": "AttachmentItem", "required": true, "description": "File descriptor: id, name, size, type, previewUrl, status." },
+    { "name": "attachments", "type": "AttachmentItem[]", "required": true, "description": "Files to display (AttachmentList)." },
+    { "name": "onRemove", "type": "(attachment) => void", "required": false, "description": "Remove callback; omit to hide remove controls." }
+  ],
+  "examples": [
+    {
+      "title": "Prompt attachments",
+      "code": "<AttachmentList attachments={[{ id: '1', name: 'spec.pdf', size: '2.4 MB', status: 'done' }]} onRemove={remove} />"
+    },
+    {
+      "title": "Uploading image",
+      "code": "<Attachment attachment={{ id: '2', name: 'chart.png', previewUrl: '/chart.png', status: 'uploading' }} />"
+    }
+  ],
+  "antiPatterns": [
+    { "title": "Do not use Attachment for drag-and-drop targets", "explanation": "The chip displays an existing item; build dropzones in the consumer and render AttachmentList once items exist." }
+  ],
+  "accessibility": [
+    { "feature": "Remove control", "implementation": "Icon-only remove button has an aria-label including the file name." },
+    { "feature": "Upload status", "implementation": "Uploading state is announced via role=status." },
+    { "feature": "Decorative thumbnails", "implementation": "Preview images are aria-hidden; the file name carries the meaning." }
+  ],
+  "package": "@slipstream-ui/ai",
+  "importPath": "@slipstream-ui/ai",
+  "version": "0.0.1"
+}

package/src/manifests/branch.manifest.json

@@ -0,0 +1,65 @@
+{
+  "id": "branch",
+  "name": "Branch",
+  "tier": "atom",
+  "description": "Variant navigation for branched messages: previous/next arrows with an N/M position indicator.",
+  "designIntent": "Let users compare alternative AI responses without leaving the transcript flow.",
+  "props": [
+    {
+      "name": "count",
+      "type": "number",
+      "required": true,
+      "description": "Total variants; renders nothing below 2."
+    },
+    {
+      "name": "selected",
+      "type": "number",
+      "required": false,
+      "description": "Controlled zero-based index."
+    },
+    {
+      "name": "defaultSelected",
+      "type": "number",
+      "defaultValue": 0,
+      "required": false,
+      "description": "Uncontrolled initial index."
+    },
+    {
+      "name": "onSelect",
+      "type": "(index: number) => void",
+      "required": false,
+      "description": "Called with the chosen variant index."
+    },
+    {
+      "name": "labels",
+      "type": "object",
+      "required": false,
+      "description": "Overrides for previous/next aria-labels."
+    }
+  ],
+  "examples": [
+    {
+      "title": "Two variants",
+      "code": "<Branch count={variants.length} selected={i} onSelect={setI} />"
+    }
+  ],
+  "antiPatterns": [
+    {
+      "title": "Do not swap message content without syncing selected",
+      "explanation": "In controlled mode the displayed variant must follow onSelect."
+    }
+  ],
+  "accessibility": [
+    {
+      "feature": "Boundary disabling",
+      "implementation": "Arrows disable at ends instead of wrapping silently."
+    },
+    {
+      "feature": "Position announcement",
+      "implementation": "N/M indicator uses aria-live=polite."
+    }
+  ],
+  "package": "@slipstream-ui/ai",
+  "importPath": "@slipstream-ui/ai",
+  "version": "0.0.1"
+}

package/src/manifests/chain-thought.manifest.json

@@ -0,0 +1,39 @@
+{
+  "id": "chain-thought",
+  "name": "ChainThought",
+  "tier": "molecule",
+  "description": "Displays ordered reasoning steps with status indicators.",
+  "designIntent": "Provide a compact progress view for multi-step agent work.",
+  "props": [
+    {
+      "name": "steps",
+      "type": "ChainThoughtStep[]",
+      "required": true,
+      "description": "Ordered reasoning steps."
+    },
+    {
+      "name": "compact",
+      "type": "boolean",
+      "defaultValue": false,
+      "required": false,
+      "description": "Use compact typography."
+    }
+  ],
+  "examples": [
+    {
+      "title": "Agent steps",
+      "code": "<ChainThought steps={[{ id: '1', content: 'Analyzing…', status: 'pending' }]} />"
+    }
+  ],
+  "accessibility": [
+    {
+      "feature": "Status visibility",
+      "implementation": "Each step exposes a text label and visual status."
+    }
+  ],
+  "package": "@slipstream-ui/ai",
+  "importPath": "@slipstream-ui/ai",
+  "version": "0.0.1",
+  "sourceDir": "chainthought",
+  "exportName": "ChainThought"
+}

package/src/manifests/code-block.manifest.json

@@ -0,0 +1,50 @@
+{
+  "id": "code-block",
+  "name": "CodeBlock",
+  "tier": "atom",
+  "description": "Syntax-highlighted code block with language label and copy-to-clipboard button.",
+  "designIntent": "Display AI-generated or referenced code readably with one-click copy.",
+  "props": [
+    {
+      "name": "code",
+      "type": "string",
+      "required": true,
+      "description": "Raw code to display."
+    },
+    {
+      "name": "language",
+      "type": "string",
+      "defaultValue": "tsx",
+      "required": false,
+      "description": "Prism language identifier."
+    },
+    {
+      "name": "showCopyButton",
+      "type": "boolean",
+      "defaultValue": true,
+      "required": false,
+      "description": "Show/hide the copy control."
+    }
+  ],
+  "examples": [
+    {
+      "title": "Basic",
+      "code": "<CodeBlock code={sourceCode} language=\"ts\" />"
+    }
+  ],
+  "antiPatterns": [
+    {
+      "title": "Do not nest CodeBlock in Response code fences manually",
+      "explanation": "Response already routes fenced code to CodeBlock."
+    }
+  ],
+  "accessibility": [
+    {
+      "feature": "Copy button",
+      "implementation": "Icon-labeled button with aria-label that flips to Copied."
+    }
+  ],
+  "package": "@slipstream-ui/ai",
+  "importPath": "@slipstream-ui/ai",
+  "version": "0.0.1"
+}

package/src/manifests/command-palette.manifest.json

@@ -0,0 +1,80 @@
+{
+  "id": "command-palette",
+  "name": "CommandPalette",
+  "tier": "organism",
+  "description": "Cmd+K style command palette with lexical search, sectioned results and full keyboard navigation",
+  "designIntent": "AI-assisted and power-user apps expose many actions; a command palette keeps them all one keystroke away. The palette is a combobox+listbox with aria-activedescendant navigation so focus never leaves the input, filters lexically over labels/sections/keywords, and reports selection through a single callback.",
+  "props": [
+    {
+      "name": "open",
+      "type": "boolean",
+      "required": true,
+      "description": "Whether the palette is visible (controlled)"
+    },
+    {
+      "name": "onOpenChange",
+      "type": "(open: boolean) => void",
+      "required": true,
+      "description": "Called when the user opens or dismisses the palette"
+    },
+    {
+      "name": "commands",
+      "type": "Command[]",
+      "required": true,
+      "description": "Available commands: { id, label, section?, keywords?, shortcut? }",
+      "examples": [{ "id": "go-docs", "label": "Open documentation", "section": "Navigation" }]
+    },
+    {
+      "name": "onSelect",
+      "type": "(command: Command) => void",
+      "required": true,
+      "description": "Invoked with the chosen command before the palette closes"
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "defaultValue": "Type a command…",
+      "required": false,
+      "description": "Input placeholder text"
+    }
+  ],
+  "examples": [
+    {
+      "title": "Wired to Cmd+K",
+      "code": "const [open, setOpen] = useState(false);\n\nuseEffect(() => {\n  const onKeyDown = (event: KeyboardEvent) => {\n    if ((event.metaKey || event.ctrlKey) && event.key === 'k') {\n      event.preventDefault();\n      setOpen((current) => !current);\n    }\n  };\n  window.addEventListener('keydown', onKeyDown);\n  return () => window.removeEventListener('keydown', onKeyDown);\n}, []);\n\n<CommandPalette\n  open={open}\n  onOpenChange={setOpen}\n  commands={commands}\n  onSelect={(command) => run(command.id)}\n/>",
+      "description": "Toggle the palette with Cmd/Ctrl+K and run the selected command."
+    }
+  ],
+  "antiPatterns": [
+    {
+      "title": "Do not use the palette as a text editor command",
+      "explanation": "The palette searches discrete commands. For AI chat input use PromptInput instead."
+    }
+  ],
+  "accessibility": [
+    {
+      "feature": "Combobox pattern",
+      "implementation": "The input uses role=combobox with aria-expanded, aria-controls, aria-activedescendant and aria-autocomplete=list."
+    },
+    {
+      "feature": "Keyboard navigation",
+      "implementation": "Arrow keys cycle options, Enter selects, Escape closes; focus never leaves the input."
+    },
+    {
+      "feature": "Option semantics",
+      "implementation": "Each result is role=option with aria-selected marking the active item."
+    }
+  ],
+  "compositionRules": [
+    {
+      "component": "PromptInput",
+      "relationship": "CommandPalette switches modes/actions; PromptInput captures free-form chat text."
+    }
+  ],
+  "relatedComponents": ["PromptInput", "Dialog"],
+  "package": "@slipstream-ui/ai",
+  "importPath": "@slipstream-ui/ai",
+  "version": "0.0.1",
+  "sourceDir": "command-palette",
+  "exportName": "CommandPalette"
+}

package/src/manifests/confirmation.manifest.json

@@ -0,0 +1,143 @@
+{
+  "id": "confirmation",
+  "name": "Confirmation",
+  "tier": "molecule",
+  "description": "Human-in-the-loop approval gate for agent actions. Pauses execution until the user approves or rejects.",
+  "designIntent": "Make destructive or consequential tool calls require explicit user consent.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "description": "Summary of the action requiring approval."
+    },
+    {
+      "name": "description",
+      "type": "string",
+      "required": false,
+      "description": "Detail: affected resource or risk note."
+    },
+    {
+      "name": "toolName",
+      "type": "string",
+      "required": false,
+      "description": "Tool/action name shown as mono text."
+    },
+    {
+      "name": "status",
+      "type": "'pending' | 'approved' | 'rejected'",
+      "defaultValue": "pending",
+      "required": false,
+      "description": "Controlled outcome; omit for uncontrolled."
+    },
+    {
+      "name": "variant",
+      "type": "'default' | 'warning' | 'destructive' | 'info' | 'success'",
+      "defaultValue": "default",
+      "required": false,
+      "description": "Accent color of the pending card; outcome chips always follow the result.",
+      "enum": [
+        "default",
+        "warning",
+        "destructive",
+        "info",
+        "success"
+      ],
+      "examples": [
+        "destructive",
+        "info"
+      ]
+    },
+    {
+      "name": "onApprove",
+      "type": "() => void",
+      "required": false,
+      "description": "Called on approval."
+    },
+    {
+      "name": "onReject",
+      "type": "() => void",
+      "required": false,
+      "description": "Called on rejection."
+    },
+    {
+      "name": "labels",
+      "type": "object",
+      "required": false,
+      "description": "Overrides for approve/reject/approved/rejected labels."
+    },
+    {
+      "name": "approveVariant",
+      "type": "'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'",
+      "defaultValue": "default",
+      "required": false,
+      "description": "Button variant for the approve action.",
+      "enum": [
+        "default",
+        "destructive",
+        "outline",
+        "secondary",
+        "ghost",
+        "link"
+      ],
+      "examples": [
+        "destructive",
+        "default"
+      ]
+    },
+    {
+      "name": "rejectVariant",
+      "type": "'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'",
+      "defaultValue": "outline",
+      "required": false,
+      "description": "Button variant for the reject action.",
+      "enum": [
+        "default",
+        "destructive",
+        "outline",
+        "secondary",
+        "ghost",
+        "link"
+      ],
+      "examples": [
+        "ghost"
+      ]
+    },
+    {
+      "name": "showActions",
+      "type": "boolean",
+      "defaultValue": "true",
+      "required": false,
+      "description": "Hide the action buttons (controlled-only gate; status drives the chip).",
+      "examples": [
+        "true",
+        "false"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "title": "Gate a destructive tool",
+      "code": "<Confirmation title=\"Delete all files?\" toolName=\"delete_all\" onApprove={run} onReject={cancel} />"
+    }
+  ],
+  "antiPatterns": [
+    {
+      "title": "Do not auto-approve after timeout",
+      "explanation": "Silent approval defeats the safety purpose; keep waiting or fail explicitly."
+    }
+  ],
+  "accessibility": [
+    {
+      "feature": "Dialog semantics",
+      "implementation": "Pending state renders role=alertdialog labeled by the title."
+    },
+    {
+      "feature": "Outcome announcement",
+      "implementation": "Status chip text announces Approved/Rejected."
+    }
+  ],
+  "package": "@slipstream-ui/ai",
+  "importPath": "@slipstream-ui/ai",
+  "version": "0.0.1"
+}