Composer
Pole wiadomości pod czatem: rośnie razem z tekstem, wysyła klawiszem Enter, dołącza pliki przyciskiem, wklejeniem lub upuszczeniem i zamienia się w przycisk zatrzymania, gdy agent odpowiada. Dla dłuższych wpisów w Markdownie wybierz CommentForm.
- Composer
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: Composer
Noc, podgląd: Composer
Wysoki kontrast, podgląd: Composer
UżycieLink do sekcji Użycie
import { Composer } from '@skribly/ui/conversation'<Composer
label="Message to Claude Code"
sendLabel="Send"
onSubmit={send}
isBusy={busy}
stop={{ label: 'Stop', onStop: stop }}
attach={{ label: 'Attach files', dropLabel: 'Drop to attach', onFiles: add }}
attachments={<AttachmentChips … />}
/>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ść
- Pole tekstowe ma etykietę, ukrytą na ekranie, chyba że ustawiono showLabel, a podpowiedź i błąd są powiązane przez aria-describedby.
- Enter wysyła, chyba że trwa składanie tekstu metodą wprowadzania; Shift+Enter dodaje linię.
- Każdy przycisk ma nazwę.
- Upuszczanie plików to dodatek: przycisk załączania i wklejanie robią to samo z klawiatury.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.