Message

Message é a bolha individual de uma conversa. Renderiza avatar, nome, timestamp e o conteúdo, com layout que se inverte para role="user". Use Message.Content, Message.Actions e Message.Attachments como children quando precisar de slots dedicados.

'use client';

import { Message } from '@uranus-workspace/ai';

export default function MessageDefault() {
  return (
    <div className="mx-auto w-full max-w-2xl space-y-1 px-2">
      <Message role="user" timestamp="agora">
        <Message.Content>Como o pacote `@uranus-workspace/ai` lida com streaming?</Message.Content>
      </Message>
      <Message role="assistant" name="Uranus" timestamp="agora">
        <Message.Content>
          Ele expõe `useUranusChat`, que envolve o `useChat` do `@ai-sdk/react`, normaliza o status
          em `idle | thinking | streaming | …` e devolve mensagens prontas para o `MessageList`.
        </Message.Content>
      </Message>
    </div>
  );
}

Uso

import { Message } from '@uranus-workspace/ai';

<Message role="assistant" name="Uranus" timestamp="agora">
  <Message.Content>
    Resposta do modelo aqui — `prose` por padrão limita a largura confortável.
  </Message.Content>
</Message>

Subcomponentes

• Message.Content — bolha de texto. Aplica fundo primary para role="user" e fundo transparente para assistant.
• Message.Actions — botões secundários (copiar, regenerar, votar). Aparecem ao hover/foco.
• Message.Attachments — strip de chips para imagens, PDFs e áudio anexados pelo usuário.

A11y

• O elemento raiz é um <article> com aria-label descrevendo papel e nome — evita múltiplos landmarks banner quando várias mensagens convivem na página.
• Avatar é aria-hidden; o nome do autor já está no header da bolha.