LegbaMessage

Ce que ça fait

<legba-message> affiche un unique message de discussion : expéditeur, texte et horodatage lisible. own distingue, via un attribut HTML réel (pas seulement un style), un message émis par l’utilisateur local. Un texte vide/blanc masque entièrement le composant (display: none) plutôt que d’afficher une bulle vide.

Signature

class LegbaMessage extends LegbaElement {
  sender: string;
  text: string;
  timestamp: number | Date;
  own: boolean; // réfléchi comme attribut HTML `own`
}

Paramètres

Propriété	Type	Requis	Défaut	Description
sender	string	non	""	Nom (ou identifiant lisible) de l’expéditeur
text	string	non	""	Contenu du message ; vide/blanc → composant masqué
timestamp	number | Date	non	Date.now()	Horodatage ; jamais exposé comme attribut HTML (propriété JS uniquement)
own	boolean	non	false	true = message local ; réfléchi comme attribut own

Retour

N/A — un Web Component, pas une fonction.

Erreurs

Aucune : une valeur de timestamp invalide (ex. NaN) fait simplement omettre l’horodatage rendu, sans lever d’exception.

Exemple minimal

import { html } from "lit";
import { customElement } from "lit/decorators.js";
import { LegbaElement, LegbaMessage } from "@legba-core/ui";

@customElement("mon-fil-de-discussion")
class MonFilDeDiscussion extends LegbaElement {
  render() {
    return html`<legba-message sender="Alice" text="Bonjour" .timestamp=${Date.now()}></legba-message>`;
  }
}

Exemple complet

import { html } from "lit";
import { customElement } from "lit/decorators.js";
import { LegbaElement, LegbaMessage } from "@legba-core/ui";

interface Message {
  id: string;
  sender: string;
  text: string;
  timestamp: number;
  own: boolean;
}

@customElement("mon-historique-messages")
class MonHistoriqueMessages extends LegbaElement {
  messages: Message[] = [
    { id: "m1", sender: "Alice", text: "Salut !", timestamp: Date.now() - 60_000, own: false },
    { id: "m2", sender: "Moi", text: "Bonjour Alice", timestamp: Date.now(), own: true },
  ];

  render() {
    return html`${this.messages.map(
      (m) =>
        html`<legba-message
          sender=${m.sender}
          text=${m.text}
          .timestamp=${m.timestamp}
          ?own=${m.own}
        ></legba-message>`,
    )}`;
  }
}

Pièges

• Texte vide/blanc masque tout le composant (:host([data-empty]) { display: none; }) — ne pas confondre avec <legba-transcript-line>, qui affiche au contraire un indicateur explicite « … » quand text est vide : la sémantique diffère (fil de discussion figé vs ligne de transcription live « en attente »).
• own doit être posé via ?own=${...} (binding booléen Lit) ou l’attribut HTML nu (own) — own="false" en tant que chaîne pose quand même l’attribut et sera donc traité comme true.
• timestamp n’est jamais un attribut HTML (attribute: false) : se règle uniquement via la propriété JS (.timestamp=${...} en template Lit, ou assignation directe el.timestamp = ...).
• Un texte très long ne provoque jamais de débordement horizontal (retour à la ligne automatique), mais la bulle reste bornée à 32ch de large — ajuster via le jeton --legba-space/--legba-radius si un autre gabarit est nécessaire, pas en redéfinissant les classes internes.

Voir aussi

• LegbaElement
• LegbaMessageInput
• LegbaTranscriptLine