Composant · Chat

ChatThread

Stable

Conteneur scrollable pour la liste des messages, auto-scroll et état vide explicite.

Comment puis-je installer le design system ?

Lancez `npm install @sentropic/design-system-react` puis importez vos composants.

Merci ! Et pour Vue ?

Le paquet Vue s'installe de la même façon : `@sentropic/design-system-vue`.

Voir le code (Svelte)

<ChatThread
  label="Fil de discussion"
  aria-label="Fil de discussion"
  messages={[{"id":"1","role":"user","content":"Comment puis-je installer le design system ?"},{"id":"2","role":"assistant","content":"Lancez `npm install @sentropic/design-system-react` puis importez vos composants.","status":"completed"},{"id":"3","role":"user","content":"Merci ! Et pour Vue ?"},{"id":"4","role":"assistant","content":"Le paquet Vue s'installe de la même façon : `@sentropic/design-system-vue`.","status":"completed"}]}
/>

Simulateur de Fil de Discussion IA Complet (Onboarding)

Découvrez l'intégration parfaite de nos primitives de Chat UI. Discutez en direct avec l'assistant simulé, configurez l'auto-défilement, injectez des événements techniques ou videz le fil pour apprécier l'état vide.

10:15

Commandes & Événements

Auto-défilement actif (autoScroll)

Injection d'Événements

Simulez des retours asynchrones d'infrastructure ou de traitement au milieu du thread.

Actions sur le Fil

Structure de thread typique

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

<div class="chat-container">
  <ChatThread label="Customer Support Feed" autoScroll={true}>
    {#each messages as msg}
      <ChatMessage role={msg.role} status={msg.status}>
        <p>{msg.text}</p>
      </ChatMessage>
    {/each}
  </ChatThread>

  <ChatComposer bind:value={draft} onsubmit={sendMessage} />
</div>

Propriétés de l'API

Propriété	Type	Description
`label`	`string`	Description sémantique globale du fil (`aria-label`) pour l'accessibilité.
`autoScroll`	`boolean`	Si activé, déclenche un défilement automatique vers le bas (scroll to bottom) fluide dès que de nouveaux enfants ou éléments de texte sont injectés.
`emptyState`	`Snippet` (slot)	Template ou composant affiché lorsque le tableau de messages est entièrement vide, idéal pour y insérer des suggestions d'amorces de discussion.
`children`	`Snippet` (slot, requis)	La liste des messages enfants, typiquement des composants `ChatMessage` ou `StreamingMessage`.
`class`	`string`	Classe CSS additionnelle pour ajuster le positionnement ou le dépassement.

Comportement & Accessibilité

Rôle d'accessibilité : Le conteneur se voit attribuer un role="log" standard pour garantir que les agents d'assistance vocale annoncent correctement les ajouts séquentiels de messages.
Politesse ARIA : Intègre aria-live="polite" pour notifier discrètement le lecteur d'écran de l'arrivée d'une nouvelle réponse sans couper la lecture en cours.
Optimisation de défilement : Utilise un observateur de mutations DOM (`MutationObserver`) interne optimisé pour n'activer le scroll bas automatique que si l'utilisateur n'est pas déjà en train de faire défiler activement les messages précédents vers le haut (respect du focus de lecture).

Tokens de style

Token CSS	Valeur par défaut	Usage
`--st-component-chatThread-padding`	`1.5rem 1rem`	Espacement intérieur (padding) du journal conversationnel.
`--st-component-chatThread-gap`	`1.25rem`	Espace vertical (gap) séparant chaque bulle de message.
`--st-component-chatThread-maxHeight`	`100%`	Hauteur maximale autorisée pour le fil de discussion avant défilement.
`--st-component-chatThread-minHeight`	`200px`	Hauteur minimale du thread.