legba-core0.1.0
⌘K
Référence API/@legba-core/ui/LegbaChat

LegbaChat

expérimentaldepuis 0.1.0@legba-core/ui
Aperçu en direct — vrai composant, pas une image

LegbaChat

Ce que ça fait

Fil de discussion (<legba-chat for="id">) qui réutilise la connexion RTC d’un <legba-call> référencé par id — jamais sa propre connexion. Rend <legba-message> par message + <legba-message-input> en pied ; envoie via sendData() de la connexion partagée, écoute dataReceived. Un message envoyé s’affiche immédiatement en local (écho, sendData() ne redéclenche jamais son propre dataReceived).

Signature

class LegbaChat extends LegbaElement {
  for: string;
}

Tag : legba-chat.

Paramètres

PropriétéTypeRequisDéfautDescription
forstringoui""id de l’élément <legba-call> référencé, dont la connexion est réutilisée

Retour

N/A — un élément DOM. Aucun événement propre émis.

Erreurs

Aucune exception : un for invalide produit un console.error explicite (comme <legba-call-button>) ; un dataReceived dont le payload n’est pas l’enveloppe de message attendue est ignoré silencieusement, jamais une exception qui casse la boucle d’écouteurs de LegbaClientRoom.

Exemple minimal

<legba-call id="salle-1" room="salle-demo" token-endpoint="/api/token"></legba-call>
<legba-call-button for="salle-1"></legba-call-button>
<legba-chat for="salle-1"></legba-chat>

Exemple complet

import type { LegbaChat } from "@legba-core/ui";

// Deux instances référençant le même <legba-call> restent synchronisées
// par construction : chacune écoute indépendamment le même dataReceived de
// la même connexion partagée.
function mountTwoViews(): void {
  const primary = document.querySelector<LegbaChat>("#chat-principal")!;
  const secondary = document.querySelector<LegbaChat>("#chat-secondaire")!;
  primary.for = "salle-1";
  secondary.for = "salle-1";
}

Pièges

  • Ne réutilise QUE la connexion, pas l’identité ni l’UI de <legba-call> : <legba-chat> lit LegbaCall.clientRoom (une propriété, pas un événement) à chaque changement de legba-call-phase-change de la cible.
  • Avant connexion, affiche « en attente », jamais une erreur — un <legba-chat for="..."> monté avant que l’appel ne soit établi est un état normal, pas un cas d’échec.
  • Après déconnexion, l’historique reste visible : seule la capacité d’envoyer un nouveau message s’arrête (le composeur <legba-message-input> disparaît, remplacé par l’indicateur « en attente »).
  • L’enveloppe de message sur le canal de données est propre à Legba ({ type: "legba-chat-message", text }) : un pair non-Legba sur le même canal de données ne sera jamais confondu avec un message de chat (ignoré silencieusement, voir legba-chat-logic.ts).
  • Le fil de messages est une région live (LGB-035, part="messages", role="log" / aria-live="polite") : un message reçu est annoncé, pas seulement affiché. log plutôt que status — c’est le rôle prévu pour un historique où seul l’ajout compte, et il n’interrompt jamais la lecture en cours. Un ::part(messages) qui poserait display: none rendrait le fil muet en plus de l’effacer.
  • Consomme les jetons --legba-* comme tout composant @legba-core/ui : ne redéclare jamais un jeton public directement, voir LegbaElement.

Voir aussi