Navegar componentes

ChatComposer

MiscExemplo

Shell de layout para um chat composer. Organiza slots nomeados (drawer, header, input, footer, send) com container de page-radius, sombras de hover/focus e raio interno concêntrico para elementos filhos.

Importação

import {ChatComposer} from '@pharos-ds/core/ChatComposer';

Exemplos

Área interativa

density

elevation

isDisabled

Código

import {ChatComposer} from '@pharos-ds/core/Chat';

<ChatComposer
  density="balanced"
  elevation="low"
  isDisabled={false}
 />

Props

Prop	Tipo	Padrão	Descrição
`onSubmit` *	`(value: string) => void`	—	Chamado quando o usuário envia uma mensagem.
`onStop`	`() => void`	—	Chamado quando o usuário solicita parar a geração.
`isStopShown`	`boolean`	`false`	Se o botão de stop é exibido em vez do botão de send.
`value`	`string`	—	Valor do input controlado.
`onChange`	`(value: string) => void`	—	Handler de mudança para modo controlado.
`placeholder`	`string`	`'Type a message...'`	Texto placeholder exibido quando o input está vazio.
`isDisabled`	`boolean`	`false`	Desabilita o composer.
`density`	`'compact' \| 'balanced' \| 'spacious'`	`'balanced'`	Densidade visual.
`elevation`	`'none' \| 'low'`	`'low'`	Elevação em repouso do corpo do composer. `low` (o padrão) mantém o visual elevado atual: low em repouso, subindo para med no hover / focus. `none` o achata e desenha uma borda com o mesmo tratamento de repouso / hover / focus de um text input (borda enfatizada → accent no focus, correspondendo aos inset rings).
`drawer`	`ReactNode`	—	Slot: drawer colapsável acima do input: anexos, chips de contexto, etc. Use ChatComposerDrawer.
`headerActions`	`ReactNode`	—	Slot: ações do header alinhadas à esquerda (botões de anexar, mencionar). Use buttons icon-only size="sm".
`headerContext`	`ReactNode`	—	Slot: informação contextual alinhada à direita no header (uso da janela de contexto, ProgressBar, texto supporting).
`input`	`ReactNode`	—	Slot: elemento de input personalizado. Substitui o input padrão. Use ChatComposerInput para trigger menus/tokens, ou conecte qualquer input (textarea simples, rich editor) ao contrato de composição via useChatComposerContext(): leia value/onChange/onSubmit/canSend e registre um controle de foco em inputControlRef para que o clique no corpo para focar funcione.
`footerActions`	`ReactNode`	—	Slot: ações do footer alinhadas à esquerda (seletor de modelo, etc.).
`sendActions`	`ReactNode`	—	Slot: ações à esquerda do botão de send.
`sendButton`	`ReactNode`	—	Slot: botão de send personalizado. Substitui o botão padrão de send/stop.
`status`	`{ type: 'error' \| 'warning'; message?: string }`	—	Mensagem de status renderizada abaixo (ou acima) do composer.
`statusPosition`	`'top' \| 'bottom'`	`'bottom'`	Onde renderizar o status.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/ChatComposer