Aller au contenu

Composant · Chat

StreamingMessage

Stable

Vue assistant enrichie avec les events de stream: deltas, tool.started/completed, permissions et checkpoints.

Génération de la réponse en cours…

(Flux de streaming)

  • Lecture du contexte
  • Raisonnement

Le design system est prêt.

(Flux de streaming)

Voir le code (Svelte) 
<StreamingMessage
  text="Génération de la réponse en cours…"
  mode="live"
  events={[{"id":"e1","label":"Lecture du contexte"},{"id":"e2","label":"Raisonnement"}]}
/>
<StreamingMessage text="Le design system est prêt." mode="passive" />

Streaming actif

Je vérifie la demande...Le résumé est disponible.

(Flux : msg-live-demo)

Détails du stream
  • Outils
    • search-files : success
  • Permissions
    • tool_search_01: allow once, allow always, deny
  • Derniers events
    • search-files démarré (tool_search_01)
    • message.delta
    • permission demandée (tool_search_01)
    • search-files terminé (success)
    • message.delta
Voir le code (Svelte) 
<StreamingMessage
  role="assistant"
  streamId="msg-live-demo"
  status="processing"
  mode="live"
  placeholder="En attente d'événement de stream…"
  showTrail
  initialEvents={[{"type":"tool.started","toolCallId":"tool_search_01","toolName":"search-files","messageId":"m-1"},{"type":"message.delta","messageId":"m-1","delta":"Je vérifie la demande..."},{"type":"permission.requested","toolCallId":"tool_search_01","choices":["allow once","allow always","deny"],"messageId":"m-1"},{"type":"tool.completed","toolCallId":"tool_search_01","status":"success","toolName":"search-files","messageId":"m-1"},{"type":"message.delta","messageId":"m-1","delta":"Le résumé est disponible."}]}
/>

Reasoning + outil

Le raisonnement s’affiche dans un bloc repliable au-dessus de la réponse, puis le trail expose l’outil et la permission associés.

Raisonnement

L'utilisateur demande la météo. Je vérifie la ville, puis j'appelle l'outil météo.

Il fera 18°C et ensoleillé.

(Flux : msg-reasoning-demo)

Détails du stream
  • Outils
    • get-weather : success
  • Permissions
    • tool_weather_01: autoriser une fois, refuser
  • Derniers events
    • reasoning.delta
    • reasoning.completed
    • get-weather démarré (tool_weather_01)
    • permission demandée (tool_weather_01)
    • get-weather terminé (success)
    • message.delta
Voir le code (Svelte) 
<StreamingMessage
  role="assistant"
  streamId="msg-reasoning-demo"
  status="completed"
  mode="live"
  showTrail
  initialEvents={[{"type":"reasoning.delta","messageId":"m-4","delta":"L'utilisateur demande la météo. "},{"type":"reasoning.delta","messageId":"m-4","delta":"Je vérifie la ville, puis j'appelle l'outil météo."},{"type":"reasoning.completed","messageId":"m-4"},{"type":"tool.started","toolCallId":"tool_weather_01","toolName":"get-weather","messageId":"m-4"},{"type":"permission.requested","toolCallId":"tool_weather_01","choices":["autoriser une fois","refuser"],"messageId":"m-4"},{"type":"tool.completed","toolCallId":"tool_weather_01","status":"success","toolName":"get-weather","messageId":"m-4"},{"type":"message.delta","messageId":"m-4","delta":"Il fera 18°C et ensoleillé."}]}
/>

Snapshot de contenu final

Résumé final prêt.

(Flux : msg-passive-demo)

Voir le code (Svelte) 
<StreamingMessage
  role="assistant"
  streamId="msg-passive-demo"
  status="completed"
  mode="passive"
  finalContent="Résumé final prêt."
  events={[{"type":"message.delta","messageId":"m-2","delta":"Premier passage validé. "},{"type":"message.completed","messageId":"m-2"}]}
/>

Trail détaillé

Checkpoint demandé pour valider la prochaine étape.

(Flux : msg-checkpoint-demo)

Détails du stream
  • Checkpoints
    • point de contrôle (cp-1)
  • Derniers events
    • checkpoint demandé (point de contrôle)
    • message.delta
Voir le code (Svelte) 
<StreamingMessage
  role="assistant"
  streamId="msg-checkpoint-demo"
  status="processing"
  finalContent="Checkpoint demandé pour valider la prochaine étape."
  showTrail
  events={[{"type":"checkpoint.requested","checkpointId":"cp-1","label":"point de contrôle","messageId":"m-3"},{"type":"message.delta","messageId":"m-3","delta":"Action de validation prise en compte."}]}
/>

Events suivis

  • message.delta
  • message.completed
  • reasoning.delta
  • reasoning.completed
  • tool.started
  • tool.completed
  • permission.requested
  • checkpoint.requested

API

  • Cible d’entrée : role vaut assistant par défaut.
  • streamId + events / initialEvents composent la source.
  • mode="live" montre les détails d’événements quand ils sont présents.
  • mode="passive" expose surtout le contenu final.