Intro
Chat-komponenten viser en dialog mellom to eller flere parter.
Eksempler
Unngå lik bakgrunnsfarge i komponenten som på flaten bak.
Noen ganger ønsker man mer fleksibilitet for plassering av navn + tid i chatboblen.
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 eller de du prater med har venstrestilt.
Endring av farger
Man kan endre farge på både avatar og snakkeboble. Disse kan brukes for å tydeliggjø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-propen for å kommunisere avsender på en tilgjengelig måte.
Foreløpig er det ikke støtte for automatisk opplesning av meldinger som settes inn dynamisk.
Props
Chat
children
- Type:
ReactNode - Description:
name?
- Type:
string - Description:
timestamp?
- Type:
string - Description:
avatar?
- Type:
ReactNode - Description:
variant?
- Type:
"subtle" | "info" | "neutral" - Default:"neutral"
- Description:
position?
- Type:
"left" | "right" - Default:"left"
- Description:
toptextPosition?
- Type:
"left" | "right" - Default:Same as position
- Description:
size?
- Type:
"medium" | "small" - Default:"medium"
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Chat.Bubble
children
- Type:
ReactNode - Description:
name?
- Type:
string - Description:
timestamp?
- Type:
string - Description:
toptextPosition?
- Type:
"left" | "right" - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
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 |