Aksel

Meny

Chat

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

Chat-komponenten viser en dialog mellom to eller flere parter.

Egnet til:

  • Kommunikasjon mellom bruker og chatbot
  • Direktemeldinger mellom bruker og veileder

Uegnet til:

  • Chat i sanntid (fordi meldinger ikke blir lest opp automatisk)

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

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:

toptextHeadingLevel?

  • Type:
    "2" | "3" | "4" | "5" | "6"
  • Default:
    "3"
  • 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:

toptextHeadingLevel?

  • Type:
    "2" | "3" | "4" | "5" | "6"
  • Default:
    3
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Tokens

TokenFallback
--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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.