@slipstream-ui/ai 0.0.0-stage → 0.4.0

package/src/adapter/adapter.test.tsx

@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import {
+  toSlipstreamMessage,
+  toSlipstreamMessages,
+  toSlipstreamToolCall,
+  toSlipstreamToolCalls,
+  useSlipstreamMessages,
+  useSlipstreamStream,
+} from './index';
+import type { AiSdkMessage } from './index';
+
+describe('AI SDK adapter', () => {
+  const assistantWithTools: AiSdkMessage = {
+    id: 'msg-1',
+    role: 'assistant',
+    content: 'Let me look that up.',
+    toolInvocations: [
+      { toolCallId: 'call-1', toolName: 'search', args: { q: 'react' }, state: 'call' },
+      { toolCallId: 'call-2', toolName: 'fetch', args: { url: '/x' }, state: 'result', result: { ok: true } },
+      { toolCallId: 'call-3', toolName: 'boom', args: {}, state: 'error', error: new Error('tool exploded') },
+    ],
+  };
+
+  it('maps roles and content onto Slipstream messages', () => {
+    const mapped = toSlipstreamMessage({ id: 'm', role: 'user', content: 'hi' });
+    expect(mapped).toEqual({ id: 'm', role: 'user', content: 'hi' });
+  });
+
+  it('maps tool invocation states onto ToolCall statuses', () => {
+    const calls = toSlipstreamToolCalls(assistantWithTools);
+    expect(calls.map((call) => call.status)).toEqual(['pending', 'completed', 'failed']);
+    expect(calls[1]).toMatchObject({ result: { ok: true } });
+    expect(calls[2]).toMatchObject({ error: 'tool exploded' });
+  });
+
+  it('preserves tool calls in message metadata for Message components', () => {
+    const mapped = toSlipstreamMessage(assistantWithTools);
+    expect(mapped.metadata?.toolCalls).toHaveLength(3);
+  });
+
+  it('maps lists and keeps ids stable', () => {
+    const mapped = toSlipstreamMessages([
+      { id: 'a', role: 'user', content: 'q' },
+      assistantWithTools,
+    ]);
+    expect(mapped.map((message) => message.id)).toEqual(['a', 'msg-1']);
+  });
+
+  it('useSlipstreamMessages derives the current message list', () => {
+    const { result } = renderHook(() => useSlipstreamMessages({ messages: [{ id: 'a', role: 'user', content: 'q' }] }));
+    expect(result.current.messages).toHaveLength(1);
+  });
+
+  it('useSlipstreamStream exposes loading, streaming id, errors and retry', () => {
+    const streaming = renderHook(() =>
+      useSlipstreamStream({ status: 'streaming', messages: [{ id: 'a', role: 'user', content: 'q' }, assistantWithTools] }),
+    );
+    expect(streaming.result.current.isLoading).toBe(true);
+    expect(streaming.result.current.streamingMessageId).toBe('msg-1');
+
+    const failed = renderHook(() =>
+      useSlipstreamStream({
+        status: 'error',
+        error: new Error('network down'),
+        messages: [assistantWithTools],
+        onRetry: () => undefined,
+      }),
+    );
+    expect(failed.result.current.isLoading).toBe(false);
+    expect(failed.result.current.messageErrors).toEqual({ 'msg-1': 'network down' });
+    expect(failed.result.current.onRetryMessage).toBeTypeOf('function');
+
+    const ready = renderHook(() => useSlipstreamStream({ status: 'ready', messages: [] }));
+    expect(ready.result.current.isLoading).toBe(false);
+    expect(ready.result.current.streamingMessageId).toBeUndefined();
+    expect(ready.result.current.messageErrors).toBeUndefined();
+  });
+
+  it('toSlipstreamToolCall tolerates missing args', () => {
+    expect(toSlipstreamToolCall({ toolCallId: 'c', toolName: 't' })).toMatchObject({ arguments: {}, status: 'pending' });
+  });
+});

package/src/adapter/hooks.ts

@@ -0,0 +1,82 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { Message as MessageData } from '../types';
+import { toSlipstreamMessages } from './messages';
+import type { AiSdkMessage, AiSdkStatus } from './types';
+
+export type UseSlipstreamMessagesOptions = {
+  /** `messages` from the AI SDK's useChat()/useCompletion() state. */
+  messages: AiSdkMessage[];
+}
+
+export type UseSlipstreamMessagesResult = {
+  messages: MessageData[];
+};
+
+/**
+ * Bridge AI SDK chat messages to Slipstream `<Conversation>`/`<Message>`
+ * input. Pure derivation of the current state — safe to call from any
+ * runtime that provides the structural message shape.
+ */
+export function useSlipstreamMessages({ messages }: UseSlipstreamMessagesOptions): UseSlipstreamMessagesResult {
+  const mapped = useMemo(() => toSlipstreamMessages(messages), [messages]);
+  return { messages: mapped };
+}
+
+export type UseSlipstreamStreamOptions = {
+  /** `status` from the AI SDK chat state. */
+  status?: AiSdkStatus;
+  /** `error` from the AI SDK chat state. */
+  error?: unknown;
+  /** Retry handler wired to the SDK's reload/retry (e.g. `reload`). */
+  onRetry?: () => void;
+  /** Messages from the SDK chat state; used to locate the streaming id. */
+  messages?: AiSdkMessage[];
+};
+
+export type UseSlipstreamStreamResult = {
+  isLoading: boolean;
+  streamingMessageId?: string;
+  messageErrors?: Record<string, string>;
+  onRetryMessage?: (messageId: string) => void;
+};
+
+/**
+ * Bridge AI SDK stream status/error to Slipstream Conversation props:
+ * `isLoading` gates the loading row, `streamingMessageId` drives the typing
+ * cursor on the last assistant message, and errors map to retryable
+ * per-message failures (streaming/tool states).
+ */
+export function useSlipstreamStream({
+  status,
+  error,
+  onRetry,
+  messages = [],
+}: UseSlipstreamStreamOptions): UseSlipstreamStreamResult {
+  const isLoading = status === 'submitted' || status === 'streaming';
+  const streamingMessageId = useMemo(() => {
+    if (status !== 'streaming') return undefined;
+    for (let index = messages.length - 1; index >= 0; index--) {
+      const message = messages[index];
+      if (message?.role === 'assistant') return message.id;
+    }
+    return messages.at(-1)?.id;
+  }, [status, messages]);
+
+  const messageErrors = useMemo(() => {
+    if (status !== 'error' || !error) return undefined;
+    const last = messages.at(-1);
+    if (!last) return undefined;
+    return {
+      [last.id]: error instanceof Error ? error.message : String(error),
+    };
+  }, [status, error, messages]);
+
+  return {
+    isLoading,
+    ...(streamingMessageId ? { streamingMessageId } : {}),
+    ...(messageErrors ? { messageErrors } : {}),
+    ...(onRetry ? { onRetryMessage: onRetry } : {}),
+  };
+}

package/src/adapter/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './messages';
+export * from './hooks';

package/src/adapter/messages.ts

@@ -0,0 +1,49 @@
+import type { Message as MessageData, ToolCall as ToolCallData } from '../types';
+import type { AiSdkMessage, AiSdkToolInvocation } from './types';
+
+/** Map one AI SDK tool invocation to a Slipstream ToolCall data object. */
+export function toSlipstreamToolCall(invocation: AiSdkToolInvocation): ToolCallData {
+  const status =
+    invocation.state === 'result' ? 'completed'
+    : invocation.state === 'error' ? 'failed'
+    : invocation.state === 'call' ? 'pending'
+    : 'pending';
+  return {
+    id: invocation.toolCallId,
+    name: invocation.toolName,
+    arguments: invocation.args ?? {},
+    status,
+    ...(status === 'completed' && invocation.result !== undefined
+      ? { result: invocation.result as ToolCallData['result'] }
+      : {}),
+    ...(status === 'failed'
+      ? { error: invocation.error instanceof Error ? invocation.error.message : String(invocation.error ?? 'Tool call failed') }
+      : {}),
+  };
+}
+
+/** Extract every tool call carried by an AI SDK message. */
+export function toSlipstreamToolCalls(message: AiSdkMessage): ToolCallData[] {
+  return (message.toolInvocations ?? []).map(toSlipstreamToolCall);
+}
+
+/**
+ * Map one AI SDK message onto a Slipstream Message. Tool invocations are
+ * preserved under `metadata.toolCalls` (and via toSlipstreamToolCalls) so
+ * ToolCall components can render them.
+ */
+export function toSlipstreamMessage(message: AiSdkMessage): MessageData {
+  return {
+    id: message.id,
+    role: message.role,
+    content: message.content,
+    ...(message.toolInvocations?.length
+      ? { metadata: { toolCalls: toSlipstreamToolCalls(message) } }
+      : {}),
+  };
+}
+
+/** Map a useChat/useCompletion message list into Slipstream messages. */
+export function toSlipstreamMessages(messages: AiSdkMessage[]): MessageData[] {
+  return messages.map(toSlipstreamMessage);
+}

package/src/adapter/types.ts

@@ -0,0 +1,24 @@
+/**
+ * Structural types mirroring the parts of the Vercel AI SDK's chat state the
+ * adapter consumes. Declared locally (instead of importing the SDK) so the
+ * adapter stays runtime-independent: any chat library that produces this
+ * shape can be bridged, and consumers install the SDK themselves.
+ */
+export type AiSdkToolInvocation = {
+  toolCallId: string;
+  toolName: string;
+  args?: Record<string, unknown>;
+  /** AI SDK states: 'call' (pending), 'result' (completed), 'error'. */
+  state?: string;
+  result?: unknown;
+  error?: unknown;
+};
+
+export type AiSdkMessage = {
+  id: string;
+  role: 'user' | 'assistant' | 'system' | 'tool';
+  content: string;
+  toolInvocations?: AiSdkToolInvocation[];
+};
+
+export type AiSdkStatus = string;

package/src/components/attachment/Attachment.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { describe, expect, it, vi } from 'vitest';
+import { Attachment } from './Attachment';
+import { AttachmentList } from './AttachmentList';
+
+describe('Attachment', () => {
+  it('renders the file name and size', () => {
+    render(<Attachment attachment={{ id: '1', name: 'spec.pdf', size: '2.4 MB', type: 'PDF' }} />);
+    expect(screen.getByText('spec.pdf')).toBeInTheDocument();
+    expect(screen.getByText(/2.4 MB/)).toBeInTheDocument();
+  });
+
+  it('shows an uploading status', () => {
+    render(<Attachment attachment={{ id: '1', name: 'big.zip', status: 'uploading' }} />);
+    expect(screen.getByRole('status', { name: 'Uploading' })).toBeInTheDocument();
+  });
+
+  it('renders a thumbnail preview when provided', () => {
+    const { container } = render(
+      <Attachment
+        attachment={{ id: '1', name: 'chart.png', previewUrl: '/chart.png' }}
+      />
+    );
+    const img = container.querySelector('img');
+    expect(img).toHaveAttribute('src', '/chart.png');
+    // Decorative: the file name carries the meaning.
+    expect(img).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('calls onRemove with the attachment', async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    const attachment = { id: '1', name: 'notes.txt' };
+    render(<Attachment attachment={attachment} onRemove={onRemove} />);
+    await user.click(screen.getByRole('button', { name: 'Remove notes.txt' }));
+    expect(onRemove).toHaveBeenCalledWith(attachment);
+  });
+
+  it('hides the remove control without onRemove', () => {
+    render(<Attachment attachment={{ id: '1', name: 'notes.txt' }} />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Attachment attachment={{ id: '1', name: 'spec.pdf', size: '2.4 MB' }} onRemove={() => {}} />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe('AttachmentList', () => {
+  it('renders every attachment', () => {
+    render(
+      <AttachmentList
+        attachments={[
+          { id: '1', name: 'a.pdf' },
+          { id: '2', name: 'b.png' },
+        ]}
+      />
+    );
+    expect(screen.getByText('a.pdf')).toBeInTheDocument();
+    expect(screen.getByText('b.png')).toBeInTheDocument();
+  });
+
+  it('renders nothing for an empty list', () => {
+    const { container } = render(<AttachmentList attachments={[]} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});

package/src/components/attachment/Attachment.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Spinner } from '@slipstream-ui/core';
+import { cn } from '@slipstream-ui/core';
+
+/** A single file attached to a message or prompt. Display-only; upload logic stays consumer-side. */
+export type AttachmentItem = {
+  id: string;
+  /** File name, including extension. */
+  name: string;
+  /** Human-readable size, e.g. "2.4 MB". */
+  size?: string;
+  /** MIME type or simple kind used for the chip label. */
+  type?: string;
+  /** Optional image thumbnail URL. */
+  previewUrl?: string;
+  status?: 'uploading' | 'done' | 'error';
+};
+
+export type AttachmentProps = {
+  attachment: AttachmentItem;
+  /** Called when the user removes the attachment; omit to hide the remove control. */
+  onRemove?: (attachment: AttachmentItem) => void;
+  className?: string;
+};
+
+const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>(
+  ({ attachment, onRemove, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'inline-flex items-center gap-2 rounded-md border border-border bg-muted/50 px-2 py-1.5 text-sm max-w-xs',
+          className
+        )}
+        {...props}
+      >
+        {attachment.previewUrl ? (
+          <img
+            src={attachment.previewUrl}
+            alt=""
+            aria-hidden="true"
+            className="h-8 w-8 rounded object-cover flex-shrink-0"
+          />
+        ) : (
+          <span
+            aria-hidden="true"
+            className="flex h-8 w-8 items-center justify-center rounded bg-secondary text-[10px] font-semibold uppercase text-secondary-foreground flex-shrink-0"
+          >
+            {(attachment.type ?? attachment.name.split('.').pop() ?? '?').slice(0, 4)}
+          </span>
+        )}
+
+        <div className="min-w-0 flex-1">
+          <div className="truncate font-medium text-foreground" title={attachment.name}>
+            {attachment.name}
+          </div>
+          <div className="text-xs text-muted-foreground">
+            {attachment.status === 'uploading'
+              ? 'Uploading...'
+              : [attachment.size, attachment.type].filter(Boolean).join(' · ') || null}
+          </div>
+        </div>
+
+        {attachment.status === 'uploading' && (
+          <Spinner size="sm" label="Uploading" aria-label="Uploading" className="flex-shrink-0" />
+        )}
+
+        {onRemove && (
+          <button
+            type="button"
+            onClick={() => onRemove(attachment)}
+            aria-label={`Remove ${attachment.name}`}
+            className="flex-shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            ✕
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+Attachment.displayName = 'Attachment';
+
+export { Attachment };

package/src/components/attachment/AttachmentList.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { cn } from '@slipstream-ui/core';
+import { Attachment } from './Attachment';
+import type { AttachmentItem } from './Attachment';
+
+export type AttachmentListProps = {
+  attachments: AttachmentItem[];
+  /** Passed through to every Attachment; omit to hide remove controls. */
+  onRemove?: (attachment: AttachmentItem) => void;
+  className?: string;
+};
+
+const AttachmentList = React.forwardRef<HTMLDivElement, AttachmentListProps>(
+  ({ attachments, onRemove, className, ...props }, ref) => {
+    if (attachments.length === 0) {
+      return null;
+    }
+
+    return (
+      <div ref={ref} className={cn('flex flex-wrap gap-2', className)} {...props}>
+        {attachments.map((attachment) => (
+          <Attachment key={attachment.id} attachment={attachment} onRemove={onRemove} />
+        ))}
+      </div>
+    );
+  }
+);
+AttachmentList.displayName = 'AttachmentList';
+
+export { AttachmentList };

package/src/components/attachment/index.ts

@@ -0,0 +1,5 @@
+export { Attachment } from './Attachment';
+export type { AttachmentProps } from './Attachment';
+export type { AttachmentItem } from './Attachment';
+export { AttachmentList } from './AttachmentList';
+export type { AttachmentListProps } from './AttachmentList';

package/src/components/branch/Branch.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { describe, expect, it, vi } from 'vitest';
+import { Branch } from './Branch';
+
+describe('Branch', () => {
+  it('renders nothing for fewer than two variants', () => {
+    const { container } = render(<Branch count={1} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('shows the uncontrolled position and navigates', async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<Branch count={3} defaultSelected={0} onSelect={onSelect} />);
+
+    expect(screen.getByText('1 / 3')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Next response' }));
+    expect(onSelect).toHaveBeenCalledWith(1);
+    expect(screen.getByText('2 / 3')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Previous response' }));
+    expect(onSelect).toHaveBeenLastCalledWith(0);
+    expect(screen.getByText('1 / 3')).toBeInTheDocument();
+  });
+
+  it('disables navigation at the boundaries', () => {
+    const { rerender } = render(<Branch count={2} selected={0} />);
+    expect(screen.getByRole('button', { name: 'Previous response' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Next response' })).toBeEnabled();
+
+    rerender(<Branch count={2} selected={1} />);
+    expect(screen.getByRole('button', { name: 'Next response' })).toBeDisabled();
+  });
+
+  it('clamps out-of-range controlled selection', () => {
+    render(<Branch count={3} selected={9} />);
+    expect(screen.getByText('3 / 3')).toBeInTheDocument();
+  });
+
+  it('announces position politely for screen readers', () => {
+    render(<Branch count={2} selected={1} />);
+    expect(screen.getByText('2 / 2')).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Branch count={3} defaultSelected={1} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/components/branch/Branch.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@slipstream-ui/core';
+
+export type BranchProps = {
+  /** Total number of message variants. Renders nothing when count < 2. */
+  count: number;
+  /** Zero-based index of the currently displayed variant. */
+  selected?: number;
+  /** Uncontrolled initial variant when `selected` is omitted. */
+  defaultSelected?: number;
+  onSelect?: (index: number) => void;
+  labels?: { previous?: string; next?: string };
+  className?: string;
+};
+
+/**
+ * Variant navigation for branched messages (`‹ 2 / 3 ›`).
+ * Purely presentational + minimal internal state; the consumer swaps content.
+ */
+const Branch = React.forwardRef<HTMLDivElement, BranchProps>(
+  (
+    { count, selected, defaultSelected = 0, onSelect, labels, className, ...props },
+    ref
+  ) => {
+    const [internalIndex, setInternalIndex] = React.useState(defaultSelected);
+    const isControlled = selected !== undefined;
+    const index = Math.min(Math.max(isControlled ? selected : internalIndex, 0), count - 1);
+
+    const t = {
+      previous: labels?.previous ?? 'Previous response',
+      next: labels?.next ?? 'Next response',
+    };
+
+    if (count < 2) return null;
+
+    const goTo = (next: number) => {
+      const clamped = Math.min(Math.max(next, 0), count - 1);
+      if (!isControlled) setInternalIndex(clamped);
+      onSelect?.(clamped);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center gap-1 text-xs text-muted-foreground', className)}
+        {...props}
+      >
+        <button
+          type="button"
+          onClick={() => goTo(index - 1)}
+          disabled={index === 0}
+          aria-label={t.previous}
+          className="rounded px-1 hover:bg-accent hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+        >
+          ‹
+        </button>
+        <span aria-live="polite" className="tabular-nums">
+          {index + 1} / {count}
+        </span>
+        <button
+          type="button"
+          onClick={() => goTo(index + 1)}
+          disabled={index === count - 1}
+          aria-label={t.next}
+          className="rounded px-1 hover:bg-accent hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+        >
+          ›
+        </button>
+      </div>
+    );
+  }
+);
+Branch.displayName = 'Branch';
+
+export { Branch };

package/src/components/branch/index.ts

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

package/src/components/chainthought/ChainThought.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { describe, expect, it } from 'vitest';
+import { ChainThought } from './ChainThought';
+
+const steps = [
+  { id: 'c1', content: 'Fetch data', status: 'completed' as const },
+  { id: 'c2', content: 'Analyze results', status: 'pending' as const },
+];
+
+describe('ChainThought', () => {
+  it('renders numbered steps with their content', () => {
+    render(<ChainThought steps={steps} />);
+    expect(screen.getByText('Step 1')).toBeInTheDocument();
+    expect(screen.getByText('Step 2')).toBeInTheDocument();
+    expect(screen.getByText('Fetch data')).toBeInTheDocument();
+    expect(screen.getByText('Analyze results')).toBeInTheDocument();
+  });
+
+  it('renders nothing for an empty step list', () => {
+    const { container } = render(<ChainThought steps={[]} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('applies compact text sizing', () => {
+    render(<ChainThought steps={steps} compact />);
+    expect(screen.getByText('Fetch data').parentElement).toHaveClass('text-sm');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<ChainThought steps={steps} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/components/chainthought/ChainThought.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { cn } from '@slipstream-ui/core';
+
+export type ChainThoughtStep = {
+  id: string;
+  content: string;
+  status?: 'pending' | 'completed' | 'failed';
+};
+
+export type ChainThoughtProps = {
+  steps: ChainThoughtStep[];
+  className?: string;
+  compact?: boolean;
+};
+
+const ChainThought = React.forwardRef<HTMLDivElement, ChainThoughtProps>(
+  ({ steps, className, compact = false, ...props }, ref) => {
+  if (steps.length === 0) {
+    return null;
+  }
+
+  return (
+    <div ref={ref} className={cn('space-y-2', className)} {...props}>
+      {steps.map((step, index) => (
+        <div key={step.id} className="flex gap-3 items-start">
+          <div className={cn(
+            'w-2 h-2 rounded-full mt-1.5 flex-shrink-0',
+            step.status === 'completed' ? 'bg-success' : 
+            step.status === 'failed' ? 'bg-destructive' : 
+            step.status === 'pending' ? 'bg-warning' : 'bg-primary'
+          )} />
+          <div className={cn('flex-1', compact && 'text-sm')}>
+            <div className="text-sm text-muted-foreground">
+              Step {index + 1}
+            </div>
+            <div className="text-foreground">{step.content}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+});
+ChainThought.displayName = 'ChainThought';
+
+export { ChainThought };

package/src/components/chainthought/index.ts

@@ -0,0 +1,2 @@
+export { ChainThought } from './ChainThought';
+export type { ChainThoughtProps, ChainThoughtStep } from './ChainThought';