Datendarstellung

Chat message thread

Ein kurzes Chat-Transkript aus abgerundeten Sprechblasen, eingehende Nachrichten links mit einem Avatar und Namen, rechts ausgehende Nachrichten in der Akzentfarbe.

Sofia DavisActive now

Sofia Davis
Just pushed the new onboarding flow, can you take a look before standup?
9:41 AM
On it, loading it now.
9:42 AM
Sofia Davis
Take your time, no rush on my end.
9:42 AM
The empty state looks great. Can we bump the button contrast a bit though?
9:44 AM
Sofia Davis
Good catch, bumping it to the accent color and shipping a fix now.
9:45 AM
Perfect, thank you.
9:46 AM

Chat message thread verwenden

Ein kurzes Chat-Transkript aus abgerundeten Sprechblasen, eingehende Nachrichten links mit einem Avatar und Namen, rechts ausgehende Nachrichten in der Akzentfarbe.

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: accent, senderName, showAvatar

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Vorschau und Beschreibung sind öffentlich. Melde dich mit einem berechtigten Konto an, um Code, Framework-Versionen und Installation zu öffnen.

Verbinde deinen Agenten

Ähnliche Komponenten

2131Conversation bubblesDatendarstellungEin Nachrichtenthread aus Blasen in der Größe ihres Textes, gruppiert nach Absender und mit einer überlappenden Reaktionspille.

2299Animated metric counterDatendarstellungEine große, bloße Zahl, die in dem Moment, in dem sie ins Bild gescrollt wird, von einem Startwert zu ihrem Ziel hochspringt und leicht über das Ziel hinausschießt, bevor sie sich stabilisiert, mit Tausendertrennzeichen und einem optionalen Suffix.

2302Auto-Scroll Message ListDatendarstellungEin scrollbares Chat-Panel, das an die neueste Nachricht angeheftet bleibt, es sei denn, der Leser scrollt nach oben, woraufhin eine schwebende Schaltfläche „Zur neuesten Nachricht springen“ erscheint.

1917Avatar Lineup HoverDatendarstellungEine Reihe überlappender Avatar-Kreise, in denen man ihn über seine Nachbarn hebt, wenn man mit der Maus darüber fährt, und einen Namens-Tooltip anzeigt.

1918Avatar StackDatendarstellungEine Reihe überlappender kreisförmiger Avatare, die den Avatar unter dem Zeiger trennt und anhebt und darüber einen Namens-Tooltip anzeigt.

2113Before/After Code DiffDatendarstellungZwei Codefelder nebeneinander, mit Vorher- und Nachherbeschriftung, mit eingefärbten hinzugefügten und entfernten Linien und einem Hover-Fokus-Effekt.