Carregando…Carregando…Carregando…Carregando…Chat transcript scroller — auto-follows streaming content while at the live edge, plus jump-to-end button.
$ npx kikitocn add message-scroller@/lib/utils@/components/ui/cn/buttonimport { MessageScroller } from "@/components/ui/cn/message-scroller/MessageScroller";
export function MessageScrollerExample() {
return (
<MessageScroller MessageScrollerProvider="start" MessageScrollerButton="start" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
MessageScrollerProvider | { autoScroll?: boolean; defaultScrollPosition?: 'start' | 'end' | 'last-anchor' } | — | Contexto raiz — dono do estado de scroll (não renderiza DOM) |
MessageScroller / MessageScrollerViewport / MessageScrollerContent | React.ReactNode | — | Moldura, elemento com scroll de verdade (overflow-y-auto) e container da transcrição (role=log) |
MessageScrollerItem | { scrollAnchor?: boolean } | — | Wrapper de 1 linha da transcrição — scrollAnchor é aceito na API como ponto de extensão futuro |
MessageScrollerButton | { side?: 'start' | 'end' } | — | Botão flutuante de pular pro início/fim — some sozinho quando já está naquela borda |
useMessageScroller / useMessageScrollerScrollable | () => {...} | — | Hooks: {scrollToStart, scrollToEnd} e {start, end} (true = ainda dá pra rolar naquela direção) |
clique em 'Nova mensagem' — se você não rolou pra cima, segue sozinho pro fim