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:
- Spørsmål og svar
- Kommunikasjon mellom bruker og chatbots
- Direktemeldinger mellom person og veileder
Eksempler
Unngå lik bakgrunnsfarge i komponenten som på flaten bak.
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
Avataren er skjult fra hjelpemidler (aria-hidden) fordi eventuelle initialer her ville blitt lest opp uten kontekst. Vi anbefaler å bruke name for å kommunisere avsender på en tilgjengelig måte.
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 too, but it will be hidden for screen readers.
- variant?"subtle" | "info" | "neutral"
- Changes background color on avatar and bubbles. Avoid using the same background as the surface behind Chat.
- backgroundColor? string
- Background color on bubbles @deprecated Use `variant` instead
- avatarBgColor? string
- Background color for avatar @deprecated Use `variant` instead
- position?"left" | "right"
- Positions avatar and bubbles
- toptextPosition?"left" | "right"
- Hoizontal position of toptext
- size?"medium" | "small"
- Affects padding and font size in bubbles
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- 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 @deprecated Use `variant` on Chat instead
- toptextPosition? "left" | "right"
- Overrides hoizontal position of toptext
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Chat.Bubble extends HTMLDivElement
Tokens
| Token | Fallback |
|---|---|
| --ac-chat-avatar-bg | --a-surface-neutral-subtle |
| --ac-chat-avatar-color | --a-text-default |
| --ac-chat-bubble-bg | --a-surface-neutral-subtle |
| --ac-chat-top-text | --a-text-default |