Uranus Design System

Superfície completa de conversa estilo Anthropic / OpenAI — header, lista, indicador, composer e sidebar opcional.

Chat é o fluxo de mais alto nível: combina MessageList, ThinkingIndicator, Composer e um cabeçalho opcional. É puramente apresentacional — você passa messages, status e onSend. Em produção você quase sempre liga a um useUranusChat.

Este exemplo precisa de mais altura para rolar e interagir como em um app real. Abra em tela cheia.

'use client';

import { Chat } from '@uranus-workspace/ai';
import type { UranusChatStatus, UranusMessage } from '@uranus-workspace/ai';
import { useState } from 'react';

const seed: UranusMessage[] = [
  {
    id: '1',
    role: 'user',
    text: 'Como integro o AI SDK com `@uranus-workspace/ai`?',
  },
  {
    id: '2',
    role: 'assistant',
    text: 'Use `useUranusChat({ api: "/api/chat" })` e passe `messages`/`status`/`onSend` para `Chat`.',
    authorName: 'Uranus',
  },
];

export default function ChatDefault() {
  const [messages, setMessages] = useState<UranusMessage[]>(seed);
  const [status, setStatus] = useState<UranusChatStatus>('idle');
  return (
    <div className="flex h-full min-h-[420px] w-full flex-1 flex-col rounded-lg border bg-background">
      <Chat
        messages={messages}
        status={status}
        onSend={(payload) => {
          setMessages((m) => [...m, { id: crypto.randomUUID(), role: 'user', text: payload.text }]);
          setStatus('submitted');
          setTimeout(() => {
            setMessages((m) => [
              ...m,
              {
                id: crypto.randomUUID(),
                role: 'assistant',
                text: 'Resposta simulada — em produção `useUranusChat` cuida do streaming.',
                authorName: 'Uranus',
              },
            ]);
            setStatus('idle');
          }, 1200);
        }}
        header={
          <Chat.Header
            title="Conversar com Uranus"
            description="Modelo Sonnet · streaming via AI SDK"
          />
        }
      />
    </div>
  );
}

Uso com `useUranusChat`

'use client';
import { Chat, useUranusChat } from '@uranus-workspace/ai';

export function ChatPage() {
  const chat = useUranusChat({ api: '/api/chat' });

  return (
    <Chat
      messages={chat.messages}
      status={chat.status}
      mode={chat.mode}
      onModeChange={chat.setMode}
      onSend={({ text, attachments }) =>
        chat.sendMessage({ text, attachments })
      }
      onStop={chat.stop}
      onRegenerate={chat.regenerate}
      header={<Chat.Header title="Conversar com Uranus" description="Modelo Sonnet · streaming" />}
      error={chat.error?.message}
    />
  );
}

Slots

header — usar com Chat.Header para title/description/actions tipados, ou um ReactNode arbitrário.
sidebar — coluna esquerda fixa (esconde em mobile). Combine com ChatThreadList.
composerToolbar — substitui a toolbar padrão quando você quer controles diferentes.
emptyState — exibido quando messages.length === 0. Use com SuggestedPrompts.
renderMessage — override por mensagem (ex.: anexar ToolCallCard, ReasoningPanel).

Slot `Chat.Header`

<Chat.Header
  title="Conversar com Uranus"
  description="Sonnet 4 · streaming"
  actions={<Button variant="ghost" size="sm">Nova conversa</Button>}
/>

Chat

Uso com useUranusChat

Slots

Slot Chat.Header

On this page

Uso com `useUranusChat`

Slot `Chat.Header`