MessageMarkdown
Renderização de markdown opt-in usando react-markdown como peer opcional.
MessageMarkdown é um wrapper fino: você passa o default export do react-markdown (peer opcional) via markdownComponent, e o componente injeta os mappings necessários para que code, pre, a e listas sigam o estilo Uranus.
O pacote não importa
react-markdowndireto — ele entra apenas como peer opcional para manter o bundle do@uranus-workspace/aienxuto.
Preview com react-markdown + remark-gfm — o mesmo contrato da doc abaixo.
'use client';
import { MessageMarkdown } from '@uranus-workspace/ai';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
const sample = `### Resumo
- Suporta **negrito**, _itálico_ e [links](https://uranus.com.br).
- Listas viram \`<ul>\` semântico.
\`\`\`ts
const ok: boolean = true;
\`\`\`
`;
export default function MessageMarkdownDefault() {
return (
<div className="mx-auto w-full max-w-2xl rounded-md border bg-background p-4 text-sm">
<p className="mb-3 text-xs text-muted-foreground">
Preview com{' '}
<code className="rounded bg-muted px-1 py-0.5 font-mono text-[0.8rem]">react-markdown</code>{' '}
+ <code className="rounded bg-muted px-1 py-0.5 font-mono text-[0.8rem]">remark-gfm</code> —
o mesmo contrato da doc abaixo.
</p>
<MessageMarkdown markdownComponent={ReactMarkdown} remarkPlugins={[remarkGfm]}>
{sample}
</MessageMarkdown>
</div>
);
}
Uso
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { MessageMarkdown } from '@uranus-workspace/ai';
<MessageMarkdown markdownComponent={ReactMarkdown} remarkPlugins={[remarkGfm]}>
{message.text}
</MessageMarkdown>Por que opt-in?
A maioria das respostas de modelos é texto + parágrafos quebrados — whitespace-pre-wrap resolve. Habilite Markdown só nas conversas em que tabelas, código, listas e links são frequentes. Assim quem não usa, não paga o custo.
Links e tema
Âncoras usam os tokens semânticos link e link-hover do @uranus-workspace/tailwind-config, separados do primary dos CTAs: em modo claro o link é um azul um tom mais suave que o marinho dos botões; em modo escuro o texto do link evita o turquesa pleno dos superfícies primárias para leitura mais confortável no cosmic.