Composant · Chat

ChatComposer

Stable

Shell de rédaction de message avec raccourci clavier Enter, slots actions et état d’exécution stoppable.

Voir le code (Svelte)

<ChatComposer placeholder="Posez votre question…" submitLabel="Envoyer" />

Bac à sable interactif

Personnalisez le composer en temps réel. Modifiez les comportements de dimensionnement automatique, les limites de lignes, et testez la simulation d’envoi avec interruption (busy/stoppable).

Configuration du Composer

Saisie courante (value)

Texte d’invite (placeholder)

Nombre max de lignes (maxRows)

Ajustement automatique (autosize)

Personnalisation des Slots

Activer le slot 'attachments' Activer le slot 'actions-left' Activer le slot 'actions-right'

États d'exécution

Traitement en cours (busy) Interruptible (stoppable)

Code Svelte correspondant

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

  let value = "";
  let isBusy = false;

  function handleSubmit({ message, source }) {
    console.log("Submit message:", message, "from:", source);
    // Trigger API call...
  }

  function handleStop() {
    console.log("Interrupted!");
  }
</script>

<ChatComposer
  bind:value={value}
  placeholder="Demander n'importe quoi à l'assistant..."
  autosize={true}
  maxRows={5}
  busy={isBusy}
  stoppable={true}
  onsubmit={handleSubmit}
  onstop={handleStop}
>
  {#snippet attachments()}
    <span class="attachments-slot">
      📎 2 files attached
    </span>
  {/snippet}
  {#snippet actionsLeft()}
    <button type="button" class="btn-left">
      + Add
    </button>
  {/snippet}
  {#snippet actionsRight()}
    <div class="btn-right">
      <span class="status-indicator">Ready</span>
    </div>
  {/snippet}
</ChatComposer>

API du Composant

Le composant émet un événement `onsubmit` contenant la valeur saisie et sa provenance (clic ou touche Enter).

Propriété	Type	Description
`value`	`string` (bindable)	Le brouillon textuel en cours de rédaction dans le compositeur.
`placeholder`	`string`	Le texte fantôme incitant l'utilisateur à taper.
`autosize`	`boolean`	Active l'adaptation automatique de la hauteur verticale de la zone de saisie selon le volume de texte.
`maxRows`	`number`	Le nombre maximal de lignes visibles avant que le compositeur n'active le scroll de défilement interne (défaut : 5).
`busy`	`boolean`	État de traitement actif. Désactive le bouton d'envoi et remplace l'icône par un indicateur de chargement ou un contrôle d'arrêt.
`stoppable`	`boolean`	Si `true` et que `busy` est actif, affiche un bouton d'arrêt pour permettre l'interruption manuelle du flux en cours.
`onsubmit`	`(payload: { message: string; source: 'submit' \| 'keyboard' }) => void`	Fonction de callback appelée lorsque l'utilisateur soumet (touche Enter ou clic sur le bouton).
`onstop`	`() => void`	Fonction de callback appelée lorsque le bouton d'arrêt est actionné en plein traitement.

Slots supportés

attachments() : Zone située juste au-dessus du bloc de saisie principal pour lister les pièces jointes, fichiers téléversés, ou jetons contextuels.
actionsLeft() : Zone d'actions à gauche sous la zone de saisie, généralement utilisée pour ajouter des pièces jointes ou configurer le modèle de langue.
actionsRight() : Zone à droite du bouton de soumission pour placer un badge de statut de message, un compteur de tokens ou des actions secondaires.