Pharos
Navegar componentes
← Componentes

ChatToolCalls

ChatExemplo
ChatToolCalls exibe invocações de tool ou function call de uma resposta LLM. Passe um array de calls e o componente cuida do resto: uma única call renderiza inline, enquanto múltiplas calls colapsam em um resumo com a call mais recente visível na superfície. Use-o em qualquer lugar em que um agente de IA mostre quais ações executou.
Importação
import {ChatToolCalls} from '@pharos-ds/core/ChatToolCalls';

Exemplos

Área interativa

status
defaultIsExpanded
read_fileButton.tsx120ms
Código
import {ChatToolCalls} from '@pharos-ds/core/Chat';

<ChatToolCalls
  status="complete"
  defaultIsExpanded
 />

Boas práticas

  • Faça: Inclua uma string target em cada call para que o usuário veja sobre o que a tool agiu: um caminho de arquivo, um comando shell ou uma query de busca.
  • Faça: Exiba uma duration em calls concluídas para que usuários avaliem quais tools são lentas e entendam por que uma resposta demorou.
  • Faça: Forneça resultDetail com um code block para calls que produzem output (diffs para edições, output de terminal para comandos shell) para que usuários inspecionem resultados inline.
  • Faça: Defina uma key única em cada item de call durante streaming para que o React possa animar adições sem remontar linhas concluídas.
  • Evite: Não omita o campo status. Sem ele a call assume complete por padrão, o que é enganoso para calls ainda em execução ou que falharam.
  • Evite: Não exiba tool calls fora do contexto de uma mensagem de chat; elas foram projetadas para ficar dentro de uma mensagem de assistant, não como UI standalone.
  • Evite: Não use wrappers customizados em torno de calls individuais; o componente trata layout single vs. grouped automaticamente com base no tamanho do array.

Props

PropTipoPadrãoDescrição
calls *ChatToolCallItem[]—Array de dados de tool call. Cada item tem name, status, target, duration, node, additions, deletions, stats, errorMessage, resultDetail, key e data. status é um de 'pending', 'running', 'complete' ou 'error' (padrão 'complete').
labelstring—Label de resumo customizado para grupos. Gerado automaticamente a partir da contagem se omitido.
isExpandedboolean—Estado expandido controlado para o grupo.
defaultIsExpandedbooleanfalseEstado expandido padrão quando não controlado.
onExpandedChange(isExpanded: boolean) => void—Callback disparado quando o estado expandido muda.
xstyleStyleXStyles—Estilos StyleX para customização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(), não um objeto de estilo inline como style={{}}.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/ChatToolCalls
ChatToolCalls · Pharos