Uranus Design System

ReasoningPanel é o invólucro padrão para ReasoningUIPart do AI SDK. Enquanto streaming é true, o trigger ganha um shimmer "Pensando…"; ao terminar, o usuário pode expandir e ver o trace completo.

1. Identificar a pergunta do usuário sobre "streaming".
2. Confirmar que `useUranusChat` mapeia status do AI SDK para os nossos.
3. Formular resposta destacando `UIMessage.parts` e o pacote `@uranus-workspace/ai`.

'use client';

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

const trace = `1. Identificar a pergunta do usuário sobre "streaming".
2. Confirmar que \`useUranusChat\` mapeia status do AI SDK para os nossos.
3. Formular resposta destacando \`UIMessage.parts\` e o pacote \`@uranus-workspace/ai\`.`;

export default function ReasoningPanelDefault() {
  return (
    <div className="mx-auto w-full max-w-2xl">
      <ReasoningPanel text={trace} defaultOpen />
    </div>
  );
}

Uso

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

{message.reasoning ? (
  <ReasoningPanel
    text={message.reasoning}
    streaming={message.streaming}
    defaultOpen={false}
  />
) : null}

useUranusChat já agrupa os parts de raciocínio em message.reasoning para você.

O trigger é um <button> com aria-label "Mostrar/Ocultar raciocínio".
O conteúdo é um <pre> para preservar quebras do trace.

ReasoningPanel

Uso

A11y

On this page