@slipstream-ui/ai 0.0.0-stage → 0.4.0

package/src/components/message/Message.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import * as React from 'react';
+import { Avatar, AvatarImage, AvatarFallback, Button } from '@slipstream-ui/core';
+import { cn } from '@slipstream-ui/core';
+import type { Message as MessageType } from '../../types';
+
+export type MessageProps = {
+  message: MessageType;
+  className?: string;
+  showAvatar?: boolean;
+  avatarSrc?: string;
+  avatarFallback?: string;
+  /** Display name for the user role; override for localization. */
+  userLabel?: string;
+  /** Display name for the assistant role; override for localization. */
+  assistantLabel?: string;
+  /**
+   * Custom content renderer, e.g. for markdown/code blocks.
+   * When provided, it fully replaces the default plain-text rendering.
+   */
+  renderContent?: (content: string) => React.ReactNode;
+  /**
+   * Marks the response as still being generated: shows a typing cursor
+   * and sets aria-busy so assistive tech knows more content is coming.
+   */
+  isStreaming?: boolean;
+  /** Generation failure text; renders an error card in place of content. */
+  error?: string;
+  /** Called when the user requests a retry after `error`; omit to hide the action. */
+  onRetry?: () => void;
+  labels?: {
+    retry?: string;
+    edit?: string;
+    save?: string;
+    cancel?: string;
+  };
+  /**
+   * Edit-and-resubmit affordance for user messages: renders an Edit action
+   * that swaps content into an inline textarea and calls `onEditContent`.
+   */
+  onEditContent?: (content: string) => void;
+};
+
+const Message = React.forwardRef<HTMLDivElement, MessageProps>(
+  (
+    {
+      message,
+      className,
+      showAvatar = true,
+      avatarSrc,
+      avatarFallback,
+      userLabel = 'You',
+      assistantLabel = 'Assistant',
+      renderContent,
+      isStreaming = false,
+      error,
+      onRetry,
+      onEditContent,
+      labels,
+      ...props
+    },
+    ref
+  ) => {
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(message.content);
+
+    const t = {
+      retry: labels?.retry ?? 'Retry',
+      edit: labels?.edit ?? 'Edit',
+      save: labels?.save ?? 'Save & resend',
+      cancel: labels?.cancel ?? 'Cancel',
+    };
+
+    const isUser = message.role === 'user';
+    const isSystem = message.role === 'system';
+    const displayLabel = isUser
+      ? userLabel
+      : message.role === 'assistant'
+        ? assistantLabel
+        : message.role;
+
+    const startEdit = () => {
+      setDraft(message.content);
+      setIsEditing(true);
+    };
+
+    const commitEdit = () => {
+      const trimmed = draft.trim();
+      if (!trimmed) return;
+      setIsEditing(false);
+      onEditContent?.(trimmed);
+    };
+
+    return (
+      <div
+        ref={ref}
+        aria-busy={isStreaming || undefined}
+        className={cn(
+          'flex gap-3 p-4 rounded-lg',
+          isUser ? 'bg-primary/10' : 'bg-muted',
+          isSystem && 'border-l-4 border-muted-foreground',
+          error && 'border border-destructive/40',
+          className
+        )}
+        {...props}
+      >
+        {showAvatar && !isSystem && (
+          <Avatar className="h-8 w-8 flex-shrink-0">
+            {avatarSrc && <AvatarImage src={avatarSrc} alt={displayLabel} />}
+            <AvatarFallback className={cn(
+              'text-xs font-medium',
+              isUser ? 'bg-primary text-primary-foreground' : 'bg-secondary text-secondary-foreground'
+            )}>
+              {avatarFallback || (isUser ? 'U' : 'A')}
+            </AvatarFallback>
+          </Avatar>
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1">
+            <span className="text-sm font-medium">{displayLabel}</span>
+            {message.timestamp && (
+              <span className="text-xs text-muted-foreground">
+                {new Date(message.timestamp).toLocaleTimeString()}
+              </span>
+            )}
+          </div>
+
+          {error ? (
+            <div role="alert" className="text-sm">
+              <div className="text-destructive mb-2">{error}</div>
+              {onRetry && (
+                <Button size="sm" variant="outline" onClick={onRetry}>
+                  ↻ {t.retry}
+                </Button>
+              )}
+            </div>
+          ) : isEditing ? (
+            <div className="space-y-2">
+              <textarea
+                value={draft}
+                onChange={(event) => setDraft(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' && !event.shiftKey) {
+                    event.preventDefault();
+                    commitEdit();
+                  }
+                  if (event.key === 'Escape') setIsEditing(false);
+                }}
+                aria-label="Edit message"
+                autoFocus
+                rows={Math.min(6, draft.split('\n').length + 1)}
+                className="w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+              <div className="flex gap-2">
+                <Button size="sm" onClick={commitEdit}>{t.save}</Button>
+                <Button size="sm" variant="ghost" onClick={() => setIsEditing(false)}>{t.cancel}</Button>
+              </div>
+            </div>
+          ) : (
+            <div className="text-sm whitespace-pre-wrap break-words">
+              {renderContent ? (
+                renderContent(message.content)
+              ) : (
+                <>
+                  {message.content}
+                  {isStreaming && (
+                    <span
+                      className="inline-block w-[2px] h-[1em] ml-0.5 align-text-bottom bg-current animate-pulse motion-reduce:animate-none"
+                      data-testid="streaming-cursor"
+                    />
+                  )}
+                </>
+              )}
+              {onEditContent && !isStreaming && (
+                <div>
+                  <button
+                    type="button"
+                    onClick={startEdit}
+                    aria-label={t.edit}
+                    className="mt-1 rounded px-1 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    ✎ {t.edit}
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+Message.displayName = 'Message';
+
+/**
+ * Memoized: during token streaming the parent re-renders on every tick, but
+ * only the streaming message's object identity changes. Memo skips re-render
+ * (and timestamp re-formatting) for every other message in the transcript.
+ * Callback props must be referentially stable for memo to help.
+ */
+const MemoizedMessage = React.memo(Message);
+MemoizedMessage.displayName = 'Message';
+
+export { MemoizedMessage as Message };

package/src/components/message/index.ts

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

package/src/components/message-actions/MessageActions.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { describe, expect, it, vi } from 'vitest';
+import { MessageActions } from './MessageActions';
+
+describe('MessageActions', () => {
+  it('copies content and confirms via the copied label', async () => {
+    const user = userEvent.setup();
+    const onCopy = vi.fn();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      configurable: true,
+    });
+
+    render(<MessageActions content="Hello world" onCopy={onCopy} />);
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    expect(writeText).toHaveBeenCalledWith('Hello world');
+    expect(onCopy).toHaveBeenCalledWith('Hello world');
+    expect(screen.getByText('Copied')).toBeInTheDocument();
+
+    await waitFor(() => expect(screen.getByText('Copy')).toBeInTheDocument(), {
+      timeout: 2500,
+    });
+  });
+
+  it('hides copy action when no content is provided', () => {
+    render(<MessageActions />);
+    expect(screen.queryByText('Copy')).not.toBeInTheDocument();
+  });
+
+  it('reports a rating and toggles it off on second click', async () => {
+    const user = userEvent.setup();
+    const onFeedback = vi.fn();
+    render(<MessageActions onFeedback={onFeedback} />);
+
+    await user.click(screen.getByRole('button', { name: 'Good response' }));
+    expect(onFeedback).toHaveBeenLastCalledWith('up');
+
+    await user.click(screen.getByRole('button', { name: 'Good response' }));
+    expect(onFeedback).toHaveBeenLastCalledWith(undefined);
+  });
+
+  it('exposes pressed state for rating buttons', async () => {
+    const user = userEvent.setup();
+    render(<MessageActions />);
+    const up = screen.getByRole('button', { name: 'Good response' });
+    expect(up).toHaveAttribute('aria-pressed', 'false');
+    await user.click(up);
+    expect(up).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('hides regenerate without a callback', () => {
+    render(<MessageActions />);
+    expect(screen.queryByRole('button', { name: 'Regenerate' })).not.toBeInTheDocument();
+  });
+
+  it('calls onRegenerate', async () => {
+    const user = userEvent.setup();
+    const onRegenerate = vi.fn();
+    render(<MessageActions onRegenerate={onRegenerate} />);
+    await user.click(screen.getByRole('button', { name: 'Regenerate' }));
+    expect(onRegenerate).toHaveBeenCalledOnce();
+  });
+
+  it('supports localized labels', () => {
+    render(<MessageActions content="x" labels={{ copy: 'Kopieren', thumbUp: 'Gut' }} />);
+    expect(screen.getByText('Kopieren')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<MessageActions content="Hi" onRegenerate={() => {}} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/components/message-actions/MessageActions.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@slipstream-ui/core';
+
+/** User sentiment for an AI response. */
+export type FeedbackRating = 'up' | 'down';
+
+export type MessageActionsProps = {
+  /**
+   * Visibility rule:
+   * - 'always': always visible (default)
+   * - 'on-hover': fades in when the parent message is hovered/focused
+   *   (add the `group` class to the parent element)
+   * - 'not-last': like 'on-hover', intended for non-latest messages
+   */
+  autohide?: 'always' | 'on-hover' | 'not-last';
+  /**
+   * Content to copy. Omit to hide the copy action, or pass a getter when
+   * the content lives outside this component.
+   */
+  content?: string;
+  /** Called after the user copies the message; receives the copied text. */
+  onCopy?: (content: string) => void;
+  /** Called with the selected rating; selecting the same rating clears it (passes undefined). */
+  onFeedback?: (rating: FeedbackRating | undefined) => void;
+  /** Called when the user requests a regenerated response; omit to hide the action. */
+  onRegenerate?: () => void;
+  labels?: {
+    copy?: string;
+    copied?: string;
+    thumbUp?: string;
+    thumbDown?: string;
+    regenerate?: string;
+  };
+  className?: string;
+};
+
+const MessageActions = React.forwardRef<HTMLDivElement, MessageActionsProps>(
+  (
+    { content, onCopy, onFeedback, onRegenerate, autohide = 'always', labels, className, ...props },
+    ref
+  ) => {
+    const [copied, setCopied] = React.useState(false);
+    const [rating, setRating] = React.useState<FeedbackRating | undefined>();
+
+    const t = {
+      copy: labels?.copy ?? 'Copy',
+      copied: labels?.copied ?? 'Copied',
+      thumbUp: labels?.thumbUp ?? 'Good response',
+      thumbDown: labels?.thumbDown ?? 'Bad response',
+      regenerate: labels?.regenerate ?? 'Regenerate',
+    };
+
+    const handleCopy = async () => {
+      if (!content) return;
+      try {
+        await navigator.clipboard.writeText(content);
+      } catch {
+        // Clipboard API may be unavailable (insecure context); still notify so consumers can react.
+      }
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+      onCopy?.(content);
+    };
+
+    const handleRating = (next: FeedbackRating) => {
+      const updated = rating === next ? undefined : next;
+      setRating(updated);
+      onFeedback?.(updated);
+    };
+
+    const actionButton =
+      'rounded px-1.5 py-0.5 text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+    const actionButtonIdle =
+      'text-muted-foreground hover:bg-accent hover:text-accent-foreground';
+
+    return (
+      <div
+        ref={ref}
+        role="toolbar"
+        aria-label="Message actions"
+        className={cn(
+          'flex items-center gap-1 mt-2',
+          autohide !== 'always' &&
+            'opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100 motion-reduce:opacity-100',
+          className
+        )}
+        {...props}
+      >
+        {content !== undefined && (
+          <button type="button" onClick={handleCopy} className={cn(actionButton, actionButtonIdle)}>
+            {copied ? t.copied : t.copy}
+          </button>
+        )}
+
+        <button
+          type="button"
+          onClick={() => handleRating('up')}
+          aria-label={t.thumbUp}
+          aria-pressed={rating === 'up'}
+          className={cn(
+            actionButton,
+            rating === 'up' ? 'text-primary' : actionButtonIdle
+          )}
+        >
+          👍
+        </button>
+
+        <button
+          type="button"
+          onClick={() => handleRating('down')}
+          aria-label={t.thumbDown}
+          aria-pressed={rating === 'down'}
+          className={cn(
+            actionButton,
+            rating === 'down' ? 'text-destructive' : actionButtonIdle
+          )}
+        >
+          👎
+        </button>
+
+        {onRegenerate && (
+          <button type="button" onClick={onRegenerate} className={cn(actionButton, actionButtonIdle)}>
+            {t.regenerate}
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+MessageActions.displayName = 'MessageActions';
+
+export { MessageActions };

package/src/components/message-actions/index.ts

@@ -0,0 +1,2 @@
+export { MessageActions } from './MessageActions';
+export type { MessageActionsProps, FeedbackRating } from './MessageActions';

package/src/components/prompt-input/PromptInput.compound.test.tsx

@@ -0,0 +1,150 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { PromptInput, PromptInputFooter, PromptInputSubmit, PromptInputTextarea, PromptInputTools, PromptInputActionAddAttachments, usePromptInputAttachments } from './PromptInput';
+
+describe('PromptInput compound primitives', () => {
+  function CompoundDemo({ onSubmit }: { onSubmit: (value: string) => void }) {
+    return (
+      <PromptInput onSubmit={onSubmit}>
+        <PromptInputTextarea placeholder="Compound" />
+        <PromptInputFooter>
+          <PromptInputTools>
+            <span>tool</span>
+          </PromptInputTools>
+          <PromptInputSubmit />
+        </PromptInputFooter>
+      </PromptInput>
+    );
+  }
+
+  it('submits through the compound layout', async () => {
+    const user = userEvent.setup();
+    const handleSubmit = vi.fn();
+    render(<CompoundDemo onSubmit={handleSubmit} />);
+
+    const textarea = screen.getByPlaceholderText('Compound');
+    await user.type(textarea, 'Hello compound');
+    expect(screen.getByRole('button', { name: 'Send' })).toBeEnabled();
+    await user.click(screen.getByRole('button', { name: 'Send' }));
+    expect(handleSubmit).toHaveBeenCalledWith('Hello compound');
+  });
+
+  it('clears the textarea after submit', async () => {
+    const user = userEvent.setup();
+    render(<CompoundDemo onSubmit={() => {}} />);
+    const textarea = screen.getByPlaceholderText('Compound');
+    await user.type(textarea, 'x');
+    await user.click(screen.getByRole('button', { name: 'Send' }));
+    expect(textarea).toHaveValue('');
+  });
+
+  it('throws when a primitive renders outside the root', () => {
+    // Silence the expected error boundary noise.
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => render(<PromptInputTextarea />)).toThrow();
+    spy.mockRestore();
+  });
+});
+
+describe('PromptInput status-aware submit control', () => {
+  it('reflects an error state via the accessible label', () => {
+    render(<PromptInput onSubmit={() => {}} hasError />);
+    expect(screen.getByRole('button', { name: /Failed/ })).toBeInTheDocument();
+  });
+
+  it('shows the stop control while loading with onStop', () => {
+    render(<PromptInput onSubmit={() => {}} onStop={() => {}} isLoading />);
+    expect(screen.getByRole('button', { name: 'Stop generating' })).toBeInTheDocument();
+  });
+});
+
+describe('PromptInput managed attachments', () => {
+  it('validates maxFiles and reports typed errors', async () => {
+    const user = userEvent.setup();
+    const onError = vi.fn();
+    function Demo() {
+      const attachments = usePromptInputAttachments({
+        maxFiles: 1,
+        multiple: true,
+        onError,
+      });
+      return (
+        <div>
+          <button type="button" onClick={() => attachments.add([new File(['a'], 'a.txt'), new File(['b'], 'b.txt')])}>
+            add
+          </button>
+          <span data-testid="count">{attachments.files.length}</span>
+        </div>
+      );
+    }
+    render(<Demo />);
+
+    await user.click(screen.getByRole('button', { name: 'add' }));
+    expect(screen.getByTestId('count')).toHaveTextContent('1');
+    expect(onError).toHaveBeenCalledWith(
+      expect.objectContaining({ code: 'max_files' })
+    );
+  });
+
+  it('rejects files that do not match accept', async () => {
+    const user = userEvent.setup();
+    const onError = vi.fn();
+    function Demo() {
+      const attachments = usePromptInputAttachments({ accept: 'image/*', onError });
+      return (
+        <button type="button" onClick={() => attachments.add([new File(['a'], 'a.txt', { type: 'text/plain' })])}>
+          add
+        </button>
+      );
+    }
+    render(<Demo />);
+    await user.click(screen.getByRole('button', { name: 'add' }));
+    expect(onError).toHaveBeenCalledWith(expect.objectContaining({ code: 'accept' }));
+  });
+
+  it('renders managed attachment chips and removes them', async () => {
+    const user = userEvent.setup();
+    let added = false;
+    function Demo() {
+      const attachments = usePromptInputAttachments({});
+      return (
+        <div>
+          <button
+            type="button"
+            onClick={() => {
+              if (!added) {
+                added = true;
+                attachments.add([new File(['a'], 'notes.txt')]);
+              }
+            }}
+          >
+            add
+          </button>
+          {attachments.files.length > 0 && (
+            <span>
+              {attachments.files.map((f) => (
+                <span key={f.id}>{f.name}</span>
+              ))}
+            </span>
+          )}
+        </div>
+      );
+    }
+    render(<Demo />);
+    await user.click(screen.getByRole('button', { name: 'add' }));
+    expect(await screen.findByText('notes.txt')).toBeInTheDocument();
+  });
+
+  it('renders the dictation button only where speech is supported', () => {
+    // jsdom has no SpeechRecognition, so dictate tools render nothing.
+    render(
+      <PromptInput onSubmit={() => {}}>
+        <PromptInputTools>
+          <PromptInputActionAddAttachments />
+        </PromptInputTools>
+      </PromptInput>
+    );
+    expect(screen.queryByRole('button', { name: /Dictate|dictation/i })).not.toBeInTheDocument();
+  });
+});

package/src/components/prompt-input/PromptInput.test.tsx

@@ -0,0 +1,74 @@
+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 { PromptInput } from './PromptInput';
+
+describe('PromptInput', () => {
+  it('submits on Enter and clears the field', async () => {
+    const user = userEvent.setup();
+    const handleSubmit = vi.fn();
+    render(<PromptInput onSubmit={handleSubmit} />);
+    const textarea = screen.getByRole('textbox');
+    await user.type(textarea, 'Hello world');
+    await user.keyboard('{Enter}');
+    expect(handleSubmit).toHaveBeenCalledWith('Hello world');
+    expect(textarea).toHaveValue('');
+  });
+
+  it('inserts a newline on Shift+Enter instead of submitting', async () => {
+    const user = userEvent.setup();
+    const handleSubmit = vi.fn();
+    render(<PromptInput onSubmit={handleSubmit} />);
+    await user.type(screen.getByRole('textbox'), 'Line one');
+    await user.keyboard('{Shift>}{Enter}{/Shift}');
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  it('does not submit whitespace-only input', async () => {
+    const user = userEvent.setup();
+    const handleSubmit = vi.fn();
+    render(<PromptInput onSubmit={handleSubmit} />);
+    await user.type(screen.getByRole('textbox'), '   ');
+    await user.keyboard('{Enter}');
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  it('disables the send button while loading without an onStop handler', async () => {
+    const user = userEvent.setup();
+    const handleSubmit = vi.fn();
+    render(<PromptInput onSubmit={handleSubmit} isLoading />);
+    const send = screen.getByRole('button', { name: 'Send' });
+    expect(send).toBeDisabled();
+    await user.click(send);
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  it('turns the send button into a stop button while loading with onStop', async () => {
+    const user = userEvent.setup();
+    const handleStop = vi.fn();
+    render(<PromptInput onSubmit={vi.fn()} onStop={handleStop} isLoading />);
+
+    const stopButton = screen.getByRole('button', { name: 'Stop generating' });
+    await user.click(stopButton);
+    expect(handleStop).toHaveBeenCalledOnce();
+  });
+
+  it('labels the icon-only send button accessibly', () => {
+    render(<PromptInput onSubmit={vi.fn()} sendButtonText="Absenden" />);
+    expect(screen.getByRole('button', { name: 'Absenden' })).toBeInTheDocument();
+  });
+
+  it('respects maxLength', async () => {
+    const user = userEvent.setup();
+    render(<PromptInput onSubmit={vi.fn()} maxLength={5} />);
+    const textarea = screen.getByRole('textbox');
+    await user.type(textarea, 'abcdefgh');
+    expect(textarea).toHaveValue('abcde');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<PromptInput onSubmit={vi.fn()} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});