GithubYarn FigmaEndringslogg
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
Har du innspill til komponenten?
Send forslagEksempler
Noen ganger ønsker man mer fleksibilitet for plassering av navn + tid i chatboblen.
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
- Children of type <Chat.Bubble />
- name? string
- Chat-message name
- timestamp? string
- Timestamp for sent message
- avatar ReactNode
- Avatar for messenger. Regular text for initials works to
- backgroundColor? string
- Background color on bubbles
- avatarBgColor? string
- Background color for avatar
- position?"left" | "right"
- Positions avatar and Bubbles
- toptextPosition?"left" | "right"
- Hoizontal position of toptext
- className? string
- ref? Ref<HTMLDivElement>
- Chat extends HTMLDivElement
Chat.Bubble
- children ReactNode
- Bubble text
- name? string
- name/sender on bubble
- timestamp? string
- Timestamp for sent message
- backgroundColor? string
- Background color on bubble
- toptextPosition? "left" | "right"
- Overrides hoizontal position of toptext
- className? string
- ref? Ref<HTMLDivElement>
- Chat.Bubble extends HTMLDivElement
Tokens
Token | Fallback |
--ac-chat-avatar-bg | --a-bg-subtle |
--ac-chat-avatar-color | --a-text-default |
--ac-chat-bubble-bg | --a-bg-subtle |
--ac-chat-top-text | --a-text-default |