Uranus Design System

ResearchPanel é o complemento (ou a substituição) da coluna de chat quando mode === 'research'. Exibe etapas em andamento + fontes consultadas lado a lado, com um header sumarizado.

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

'use client';

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

export default function ResearchPanelDefault() {
  return (
    <div className="mx-auto w-full max-w-2xl">
      <ResearchPanel
        title="Pesquisando: padrões de chat para produtos B2B"
        stages={[
          { id: '1', title: 'Reformular consulta', status: 'done' },
          { id: '2', title: 'Buscar em /docs', status: 'done' },
          {
            id: '3',
            title: 'Buscar na web',
            status: 'running',
            description: 'ai-sdk.dev/docs/agents',
          },
          { id: '4', title: 'Sintetizar resposta', status: 'queued' },
        ]}
        citations={[
          {
            id: 'a',
            title: 'AI SDK — UIMessage parts',
            url: 'https://ai-sdk.dev',
            source: 'ai-sdk.dev',
            snippet: 'Streaming text + tool calls em uma única estrutura.',
          },
          {
            id: 'b',
            title: 'Uranus — Padrões de composição',
            url: 'https://design.uranus.com.br',
            source: 'design.uranus.com.br',
          },
        ]}
      />
    </div>
  );
}

Uso

import { ResearchPanel, useUranusChat } from '@uranus-workspace/ai';

const chat = useUranusChat({ api: '/api/research', defaultMode: 'research' });

<ResearchPanel
  title={`Pesquisando: ${chat.research?.query}`}
  stages={chat.research?.stages ?? []}
  citations={chat.research?.citations ?? []}
  summary={chat.research?.summary}
/>

API

stages — UranusStage[], mesma forma de StageList.
citations — UranusCitation[].
title — default "Pesquisa".
summary — texto/JSX renderizado abaixo das fontes (ex.: TLDR final).

ResearchPanel

Uso

API

On this page