AI
PlanPanel
Card de plano live-updating para o modo "plan" do useUranusChat.
PlanPanel exibe um plano em formato de cartão com StageList interno e um summary "X de Y etapas concluídas". Use enquanto mode === 'plan' no useUranusChat, recebendo stages do server (via UIMessage data parts ou um endpoint dedicado).
Este exemplo precisa de mais altura para rolar e interagir como em um app real. Abra em tela cheia.
'use client';
import { PlanPanel } from '@uranus-workspace/ai';
export default function PlanPanelDefault() {
return (
<div className="mx-auto w-full max-w-md">
<PlanPanel
stages={[
{ id: '1', title: 'Mapear superfícies de produto', status: 'done' },
{ id: '2', title: 'Listar componentes-chave', status: 'done' },
{
id: '3',
title: 'Esboçar API de useUranusChat',
status: 'running',
description: 'Normalizando status entre AI SDK 5 e Uranus.',
},
{ id: '4', title: 'Documentar fluxos compostos', status: 'queued' },
{ id: '5', title: 'Publicar changeset', status: 'queued' },
]}
/>
</div>
);
}
Uso
import { Chat, PlanPanel, useUranusChat } from '@uranus-workspace/ai';
const chat = useUranusChat({ api: '/api/chat', defaultMode: 'plan' });
<Chat
messages={chat.messages}
status={chat.status}
mode={chat.mode}
onModeChange={chat.setMode}
onSend={chat.sendMessage}
composerToolbar={
<PlanPanel stages={chat.plan?.stages ?? []} actions={<Button size="sm">Editar</Button>} />
}
/>API
stages—UranusStage[].title— default"Plano".description— sobrescreve o summary automático.actions— slot à direita do título (ex.: "Editar plano").