Intro
Komponenten brukes for å kommunisere dialoger mellom to parter, ofte en veileder og bruker. Chat-komponenten legger opp til en umiddelbar samtale, gitt at en veileder eller chatbot er tilgjengelig i andre enden.
Egnet til å:
- Tidssensitive eller mindre omfattende spørsmål og svar
- Sette opp kommunikasjon mellom bruker og chatbots
- Tilrettelegge for direktemeldinger mellom person og veileder uten direkte kontakt
Eksempler
Varianter
Plassering av snakkebobler
Komponenten kommer med to plasseringer for selve snakkeboblene og avataren, right/left. Det er en vanlig konvensjon at den som ser dialogen alltid har sine snakkebobler høyrestilt, og den du prater med har venstrestilt.
Endring av farger
Man kan endre farge på både avatar og snakkeboble. Disse kan brukes for å tydeligjøre hvem som snakker.
Tilgjengelighet
| Kommando | Interaksjon |
| Tab | Flytter fokus til neste snakkeboble |
| ShiftTab | Flytter fokus til forrige snakkeboble |
Props
Chat
- children ReactNode
- name? string
- timestamp? string
- avatar ReactNode
- backgroundColor? string
- avatarBgColor? string
- position?"left" | "right"
- className? string
- ref? Ref<HTMLDivElement>
- Children of type <Chat.Bubble />
- Chat-message name
- Timestamp for sent message
- Avatar for messenger. Regular text for initials works to
- Background color on bubbles
- Background color for avatar
- Positions avatar and Bubbles
- Chat extends HTMLDivElement
Chat.Bubble
- children ReactNode
- name? string
- timestamp? string
- backgroundColor? string
- className? string
- ref? Ref<HTMLDivElement>
- Bubble text
- name/sender on bubble
- Timestamp for sent message
- Background color on bubble
- Chat.Bubble extends HTMLDivElement