MessageThread

Przewijany dziennik czatu. Trzyma najnowszą wiadomość w widoku, pokazuje przycisk skoku po przewinięciu w górę i pokazuje, kto pisze. Wybierz go dla każdej wymiany z osobą lub agentem.

MessageThread

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: MessageThread

Why does the build fail on CI but not on my machine?

DoneRead .github/workflows/ci.yml

DoneRun npm ci

Claude Code

CI runs Node 22, and the project needs Node 26. Set it in the workflow:

- uses: actions/setup-node@v4
  with:
    node-version: 26

Noc, podgląd: MessageThread

Why does the build fail on CI but not on my machine?

DoneRead .github/workflows/ci.yml

DoneRun npm ci

Claude Code

CI runs Node 22, and the project needs Node 26. Set it in the workflow:

- uses: actions/setup-node@v4
  with:
    node-version: 26

Wysoki kontrast, podgląd: MessageThread

Why does the build fail on CI but not on my machine?

DoneRead .github/workflows/ci.yml

DoneRun npm ci

Claude Code

CI runs Node 22, and the project needs Node 26. Set it in the workflow:

- uses: actions/setup-node@v4
  with:
    node-version: 26

UżycieLink do sekcji Użycie

tsx

import { MessageThread } from '@skribly/ui/conversation'

tsx

<MessageThread label="Chat with Claude Code" jumpLabel="Jump to the newest message" isBusy={busy} busyLabel="Claude Code is writing">
  {messages.map((m) => <MessageBubble key={m.id} from={m.from} author={m.author}>{m.text}</MessageBubble>)}
</MessageThread>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Nazwany dziennik w kolejności klawisza Tab, więc klawisze strzałek go przewijają.
Gdy odpowiedź jest strumieniowana, aria-busy wstrzymuje ogłoszenie do końca odpowiedzi.
Stan pisania jest statusem typu polite.
Przycisk skoku przenosi fokus z powrotem na dziennik.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.