Composant · Chat

ChatMessage

Stable

Bulle visuelle de message avec rôle, statut, footer, actions et avatar. Le contenu reste piloté par le consumer via des slots.

Quelle est la différence entre Badge et Tag ?

Badge est statique (indicateur) ; Tag est interactif (filtrable, supprimable).

14:32

Voir le code (Svelte)

<ChatMessage role="user">Quelle est la différence entre Badge et Tag ?</ChatMessage>
<ChatMessage role="assistant" status="completed" timestamp="14:32">Badge est statique (indicateur) ; Tag est interactif (filtrable, supprimable).</ChatMessage>

Bac à sable de la Bulle de Message

Ajustez dynamiquement toutes les propriétés et les slots de la bulle ChatMessage pour tester son rendu, ses contrastes, son comportement d'accessibilité et ses variations de rôles.

Terminé à 10:18 • Modèle: Sentropic-V2

Configuration de la Bulle

Rôle du message (role)

Statut du message (status)

Horodatage (timestamp prop)

Contenu de la bulle (slot principal)

Snippets Optionnels (Slots)

Afficher l'avatar (slot avatar) Afficher le pied de page (slot footer) Afficher les actions (slot actions)

Code Svelte correspondant

<script lang="ts">
  import { ChatMessage } from "@sentropic/design-system-svelte";
</script>

<ChatMessage
  role="assistant"
  status="completed"
  timestamp="10:18"
  avatar={avatar}
  footer={footer}
  actions={actions}
>
  <p></p>
</ChatMessage>

Statuts supportés

value	meaning
`pending`	Message en attente d'envoi. Affiche un état neutre atténué.
`processing`	Message en cours de stream ou de rédaction. Affiche un point clignotant ou un loader discret.
`completed`	Message entièrement reçu et rendu. Bulle finalisée.
`failed`	Échec de la requête. Affiche une bordure rouge sémantique et un signalement d'erreur.

Propriétés

Propriété	Type	Description
`role`	`"user" \| "assistant" \| "system" \| "tool"`	Configure l'alignement visuel (droite pour user, gauche pour assistant) et la palette chromatique.
`status`	`"pending" \| "processing" \| "completed" \| "failed"`	Contrôle l'état d'animation et de validation de la bulle.
`timestamp`	`string`	Chaîne de caractères optionnelle affichant l'heure ou l'état de finalisation dans le footer.
`avatar`	`Snippet` (slot)	Rend une zone dédiée à l'avatar (ex: icône utilisateur ou logo IA).
`children`	`Snippet` (slot, requis)	Le corps du message, acceptant du HTML ou du markdown formaté.
`footer`	`Snippet` (slot)	Extension personnalisée du pied de page du message.
`actions`	`Snippet` (slot)	Barre d'actions secondaires apparaissant au survol ou focus du message.

Tokens de style

--st-component-chatMessage-gap : Espace entre l'avatar et la bulle.
--st-component-chatMessage-avatarSize : Diamètre du conteneur d'avatar.
--st-component-chatMessage-assistantBackground : Couleur d'arrière-plan par défaut des bulles.
--st-component-chatMessage-maxWidth : Largeur maximale autorisée pour une bulle.