Rozmowa
Czaty z agentem i wątki komentarzy: dziennik wiadomości, dymki, kroki narzędzi, pole wiadomości z załącznikami oraz komentarze z formularzem Markdown. Każdy stan ma słowo i ikonę, a błędy, które blokują, są ogłaszane od razu.
Strony: 7, eksporty: 7
- MessageThread
- MessageBubble
- ToolLine
- Composer
- AttachmentChips
- CommentItem
- CommentForm
ImportLink do sekcji Import
Każda grupa ma własny punkt wejścia, więc aplikacja, która potrzebuje tylko tej grupy, ładuje tylko ją. Wszystko jest też eksportowane z @skribly/ui.
import { MessageThread, MessageBubble, ToolLine, Composer, … } from '@skribly/ui/conversation'Strony tej grupyLink do sekcji Strony tej grupy
- MessageThreadPrzewijany 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
- MessageBubbleJedna wiadomość: twoja po stronie końca w kolorze akcentu, cudze po stronie początku. Pokazuje autora, czas, znacznik pisania oraz stan dostarczenia z ponowieniem.MessageBubble
- ToolLineJeden krok, który agent wykonał między wiadomościami, na przykład odczyt pliku albo uruchomienie polecenia. Dodaj detail, aby pozwolić otworzyć wyjście.ToolLine
- ComposerPole 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
- AttachmentChipsPliki dołączone do wiadomości lub komentarza, z rozmiarem, stanem przesyłania i przyciskiem usuwania. Bez onRemove jest to lista tylko do odczytu.AttachmentChips
- CommentItemJeden komentarz w wątku, z awatarem, autorem, plakietką, czasem, znacznikiem edycji i akcjami. Komentarze wątku umieść na liście uporządkowanej.CommentItem
- CommentFormPisze komentarz w Markdownie z podglądem, sprawdza, czy nie jest pusty, i pokazuje stany wysyłania, wysłania i niepowodzenia. Wybierz go pod wątkiem komentarzy albo do edycji komentarza.CommentForm