@xmesh/system-design 0.0.1

package/dist/lit/components/bubble/index.js

@@ -0,0 +1,617 @@
+/*
+  bubble/index.ts — Lit port of components/bubble/index.jsx.
+
+  Three custom elements ship together because they always compose:
+
+    <xm-bubble-group variant="user|bot">    column wrapper, anchors edge,
+                                            reveals actions on hover
+    <xm-bubble        variant="user|bot">   the message body itself
+    <xm-bubble-actions ts="00:03">          hover-reveal toolbar; <button>
+                                            children get .bubble-actions__btn
+                                            applied via DOM walk
+
+  Plus <xm-artifact-chip> for the small file-reference card that shows
+  below a bot bubble.
+
+  Light DOM is used throughout. The original components/bubble/index.css
+  targets BEM classes (.bubble, .bubble__paragraph, .bubble-actions__btn)
+  and reuses .att-card* from composer/index.css for the artifact chip;
+  rendering in light DOM lets those stylesheets keep working unchanged.
+
+  Markdown class walker (xm-bubble):
+    The React BubbleBody walks React.Children, adding a BEM class to
+    each known tag (<p>, <ol>, <ul>, <li>, <strong>, <code>). We do
+    the same here by traversing this.childNodes once on connect and
+    mutating each authored element's classList. Authors write semantic
+    HTML; the bubble adds the BEM hooks the CSS needs.
+*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { customElement, property } from "lit/decorators.js";
+// Register <xm-button> for the artifact "Download" action below.
+import "../button/index.js";
+class LightElement extends LitElement {
+    createRenderRoot() {
+        return this;
+    }
+}
+// Inline check-icon SVG for the static-preview "Copied" feedback. We can't
+// rely on <xm-check-icon> here because the static authoring shape uses the
+// custom element directly, and we'd need to mount and upgrade it on the fly;
+// inlining the SVG avoids that and matches the hairline 1.8 stroke used by
+// the icon primitives.
+const CHECK_ICON_SVG = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+// Best-effort clipboard write. Mirrors the same helper in chat/index.ts —
+// duplicated here so xm-bubble-actions can copy on its own when no parent
+// component wires the click.
+const writeClipboard = async (text) => {
+    try {
+        if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+    }
+    catch (_) { /* fall through to legacy path */ }
+    try {
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.setAttribute("readonly", "");
+        ta.style.position = "fixed";
+        ta.style.opacity = "0";
+        document.body.appendChild(ta);
+        ta.select();
+        const ok = document.execCommand("copy");
+        document.body.removeChild(ta);
+        return ok;
+    }
+    catch (_) {
+        return false;
+    }
+};
+const BUBBLE_TAG_CLASS = {
+    P: ["bubble__paragraph"],
+    OL: ["bubble__list", "bubble__list--ordered"],
+    UL: ["bubble__list", "bubble__list--unordered"],
+    LI: ["bubble__list-item"],
+    STRONG: ["bubble__strong"],
+    CODE: ["bubble__code"],
+};
+function applyBubbleClasses(root) {
+    // Mirrors the React applyBubbleClass walker exactly:
+    //   • shallow walk of top-level children (one level)
+    //   • <ol>/<ul> additionally walk their direct children one level,
+    //     so <li> elements pick up .bubble__list-item — but children of
+    //     <li> are NOT walked (a <strong> inside <li> is left alone).
+    const apply = (node) => {
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return;
+        const el = node;
+        const cls = BUBBLE_TAG_CLASS[el.tagName];
+        if (cls)
+            cls.forEach((c) => el.classList.add(c));
+        if (el.tagName === "OL" || el.tagName === "UL") {
+            for (const child of Array.from(el.children))
+                apply(child);
+        }
+    };
+    for (const child of Array.from(root))
+        apply(child);
+}
+/* ─────────────────────────────────────────────────────────────
+   <xm-bubble-group> — variant-aware column wrapper.
+   Authors put bubble + actions inside it; the group anchors the
+   layout edge and reveals .bubble-actions on hover via CSS only.
+   ─────────────────────────────────────────────────────────────*/
+let XmBubbleGroup = class XmBubbleGroup extends LightElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "bot";
+        this._authoredChildren = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Snapshot children so render() can mount them into a slot host
+        // we own. Lit's render replaces innerHTML; this preserves them.
+        this._authoredChildren = Array.from(this.childNodes).filter((n) => n.nodeType === Node.ELEMENT_NODE ||
+            (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()));
+        for (const n of this._authoredChildren)
+            n.remove();
+    }
+    render() {
+        const cls = `bubble-group bubble-group--${this.variant}`;
+        return html `<div class="${cls}" data-mount="children"></div>`;
+    }
+    updated() {
+        const host = this.querySelector('[data-mount="children"]');
+        if (!host)
+            return;
+        if (host.childNodes.length === 0 && this._authoredChildren.length) {
+            for (const n of this._authoredChildren)
+                host.appendChild(n);
+        }
+    }
+};
+__decorate([
+    property({ type: String })
+], XmBubbleGroup.prototype, "variant", void 0);
+XmBubbleGroup = __decorate([
+    customElement("xm-bubble-group")
+], XmBubbleGroup);
+/* ─────────────────────────────────────────────────────────────
+   <xm-bubble> — the message body.
+
+   Properties:
+     variant       "user" | "bot"          (default "bot")
+     attachments   Array of { id, name, kind, dataUrl? }
+     artifact      Object { title, sub:[], provider? } | null
+     download      Boolean — show Download button on the artifact chip
+
+   Authoring children are the markdown content. They are walked once
+   on connect to apply .bubble__* BEM classes.
+   ─────────────────────────────────────────────────────────────*/
+let XmBubble = class XmBubble extends LightElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "bot";
+        this.attachments = [];
+        this.artifact = null;
+        this.download = false;
+        this.text = "";
+        this.bodyHtml = "";
+        this._authored = [];
+        this._onArtifactOpen = () => {
+            if (!this.artifact)
+                return;
+            this.dispatchEvent(new CustomEvent("artifact-open", {
+                detail: { artifact: this.artifact },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._onArtifactDownload = (e) => {
+            e.stopPropagation();
+            if (!this.artifact)
+                return;
+            this.dispatchEvent(new CustomEvent("artifact-download", {
+                detail: { artifact: this.artifact },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Convenience: a data-artifact='{"title":...}' attribute hydrates
+        // the artifact property at upgrade time, so static HTML previews
+        // can author a chip without an inline <script>.
+        const dataArtifact = this.getAttribute("data-artifact");
+        if (dataArtifact && !this.artifact) {
+            try {
+                this.artifact = JSON.parse(dataArtifact);
+            }
+            catch (_) { /* malformed JSON — leave artifact null */ }
+        }
+        // Same convenience for attachments.
+        const dataAtts = this.getAttribute("data-attachments");
+        if (dataAtts && (!this.attachments || this.attachments.length === 0)) {
+            try {
+                this.attachments = JSON.parse(dataAtts);
+            }
+            catch (_) { /* malformed JSON — leave attachments empty */ }
+        }
+        // Snapshot authored markdown children. This works for static HTML
+        // (preview/bubbles.html) where children exist at upgrade time.
+        // Parent lit templates should use the `text` / `body-html`
+        // properties instead — those skip this snapshot+remount path
+        // entirely.
+        applyBubbleClasses(this.childNodes);
+        this._authored = Array.from(this.childNodes).filter((n) => n.nodeType === Node.ELEMENT_NODE ||
+            (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()));
+        for (const n of this._authored)
+            n.remove();
+    }
+    _attachmentTemplate(a) {
+        if (a.kind === "image" && a.dataUrl) {
+            return html `
+        <span class="bubble__att-mini">
+          <span
+            class="bubble__att-thumb"
+            style="background-image:url(${a.dataUrl})"
+          ></span>
+          ${a.name}
+        </span>
+      `;
+        }
+        return html `
+      <span class="bubble__att-mini">
+        <svg width="11" height="11" viewBox="0 0 24 24"
+             fill="none" stroke="currentColor" stroke-width="1.8"
+             stroke-linecap="round" stroke-linejoin="round">
+          <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
+          <path d="M14 3v5h5" />
+        </svg>
+        ${a.name}
+      </span>
+    `;
+    }
+    _artifactTemplate() {
+        const a = this.artifact;
+        if (!a)
+            return nothing;
+        return html `
+      <div
+        role="button"
+        tabindex="0"
+        class="att-card att-card--text att-card--text-row"
+        title="Open ${a.title}"
+        @click=${this._onArtifactOpen}
+        @keydown=${(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                this._onArtifactOpen();
+            }
+        }}
+      >
+        <span class="att-card__icon" aria-hidden="true">
+          <svg width="18" height="18" viewBox="0 0 24 24"
+               fill="none" stroke="currentColor" stroke-width="1.6"
+               stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
+            <path d="M14 3v5h5" />
+          </svg>
+        </span>
+        <span class="att-card__body">
+          <span class="att-card__name">${a.title}</span>
+          ${a.sub?.length
+            ? html `<span class="att-card__sub">
+                ${a.sub.map((s, i) => html `
+                  ${i > 0 ? html `<span class="ds-sep">·</span>` : nothing}
+                  <span>${s}</span>
+                `)}
+              </span>`
+            : nothing}
+        </span>
+        ${this.download
+            ? html `<span class="att-card__action" @click=${(e) => e.stopPropagation()}>
+              <xm-button variant="outline-canvas" size="md"
+                         @click=${this._onArtifactDownload}>Download</xm-button>
+            </span>`
+            : nothing}
+      </div>
+    `;
+    }
+    render() {
+        const cls = `bubble bubble--${this.variant}`;
+        const atts = this.attachments || [];
+        // Two paths to author body content:
+        //   1. `text` / `body-html` properties — preferred when xm-bubble is
+        //      rendered by another lit template (e.g. xm-chat-shell). The
+        //      body is part of the bubble's own template, so lit's marker
+        //      tracking stays consistent across re-renders.
+        //   2. authored children — preferred for static HTML previews
+        //      (e.g. preview/bubbles.html). Snapshotted in connectedCallback,
+        //      remounted into [data-mount="body"] in updated().
+        const hasDirectBody = !!(this.text || this.bodyHtml);
+        return html `
+      <div class="${cls}">
+        ${atts.length
+            ? html `<div class="bubble__atts">
+              ${atts.map((a) => this._attachmentTemplate(a))}
+            </div>`
+            : nothing}
+        ${hasDirectBody
+            ? html `<div class="bubble__body">${this.bodyHtml ? unsafeHTML(this.bodyHtml) : this.text}</div>`
+            : html `<div data-mount="body" style="display:contents"></div>`}
+        ${this._artifactTemplate()}
+      </div>
+    `;
+    }
+    updated() {
+        const host = this.querySelector('[data-mount="body"]');
+        if (host && host.childNodes.length === 0 && this._authored.length) {
+            for (const n of this._authored)
+                host.appendChild(n);
+        }
+        // When the body comes from `body-html`, run the markdown-walker
+        // over the rendered DOM so <p>/<ol>/<ul>/etc. pick up their BEM
+        // classes (same effect the React BubbleBody walker has).
+        if (this.bodyHtml) {
+            const body = this.querySelector(".bubble__body");
+            if (body)
+                applyBubbleClasses(body.children);
+        }
+    }
+};
+__decorate([
+    property({ type: String })
+], XmBubble.prototype, "variant", void 0);
+__decorate([
+    property({ attribute: false })
+], XmBubble.prototype, "attachments", void 0);
+__decorate([
+    property({ attribute: false })
+], XmBubble.prototype, "artifact", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmBubble.prototype, "download", void 0);
+__decorate([
+    property({ type: String })
+], XmBubble.prototype, "text", void 0);
+__decorate([
+    property({ type: String, attribute: "body-html" })
+], XmBubble.prototype, "bodyHtml", void 0);
+XmBubble = __decorate([
+    customElement("xm-bubble")
+], XmBubble);
+/* ─────────────────────────────────────────────────────────────
+   <xm-bubble-actions> — hover-reveal toolbar.
+
+   Authoring:
+     <xm-bubble-actions ts="00:03" aria-label="Message actions">
+       <button aria-label="Regenerate"><xm-regenerate-icon></xm-regenerate-icon></button>
+       <button aria-label="Copy"><xm-copy-icon></xm-copy-icon></button>
+     </xm-bubble-actions>
+
+   Walks children on connect; <button> children get .bubble-actions__btn
+   appended (mirrors the React BubbleActions walker).
+   ─────────────────────────────────────────────────────────────*/
+let XmBubbleActions = class XmBubbleActions extends LightElement {
+    constructor() {
+        super(...arguments);
+        this.ts = "";
+        this.ariaLabel = "Message actions";
+        this._authored = [];
+        this._copyResetTimer = null;
+        this._stragglerObserver = null;
+        this._onDelegatedClick = async (e) => {
+            const target = e.target;
+            if (!target)
+                return;
+            const btn = target.closest('xm-button[aria-label="Copy message"]');
+            if (!btn || !this.contains(btn))
+                return;
+            // Find the sibling xm-bubble inside the parent xm-bubble-group.
+            const group = this.parentElement;
+            const bubble = group?.querySelector("xm-bubble");
+            const text = (bubble?.textContent || "").trim();
+            if (!text)
+                return;
+            const ok = await writeClipboard(text);
+            if (!ok)
+                return;
+            this._showCopiedFeedback(btn);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._harvestAuthored(Array.from(this.childNodes));
+        // Lit-template parents may insert authored children AFTER connectedCallback
+        // (the host element is appended before its child parts are filled). Watch
+        // for direct-child additions that aren't part of our rendered shell and
+        // harvest them too, so chat-shell-rendered actions reach data-mount="actions".
+        this._stragglerObserver = new MutationObserver((records) => {
+            const stragglers = [];
+            const seen = new Set();
+            for (const r of records) {
+                for (const node of Array.from(r.addedNodes)) {
+                    if (this._isRenderedShell(node))
+                        continue;
+                    if (seen.has(node))
+                        continue;
+                    seen.add(node);
+                    stragglers.push(node);
+                }
+            }
+            if (stragglers.length)
+                this._harvestAuthored(stragglers);
+        });
+        this._stragglerObserver.observe(this, { childList: true });
+        // Delegated copy handler for static-preview authoring (bubbles.html etc.)
+        // where no parent component wires @click on the copy button. The chat
+        // shell stops propagation in its own handler, so this never double-fires
+        // for shell-rendered rows.
+        this.addEventListener("click", this._onDelegatedClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this._onDelegatedClick);
+        if (this._stragglerObserver) {
+            this._stragglerObserver.disconnect();
+            this._stragglerObserver = null;
+        }
+        if (this._copyResetTimer != null) {
+            window.clearTimeout(this._copyResetTimer);
+            this._copyResetTimer = null;
+        }
+    }
+    _isRenderedShell(node) {
+        return (node.nodeType === Node.ELEMENT_NODE &&
+            node.classList?.contains("bubble-actions"));
+    }
+    _harvestAuthored(nodes) {
+        const harvested = [];
+        for (const n of nodes) {
+            if (this._isRenderedShell(n))
+                continue;
+            if (n.nodeType === Node.ELEMENT_NODE) {
+                harvested.push(n);
+            }
+            else if (n.nodeType === Node.TEXT_NODE && n.textContent?.trim()) {
+                harvested.push(n);
+            }
+        }
+        if (!harvested.length)
+            return;
+        this._authored.push(...harvested);
+        const host = this.querySelector('[data-mount="actions"]');
+        if (host) {
+            for (const n of harvested)
+                host.appendChild(n);
+        }
+        else {
+            for (const n of harvested) {
+                if (n.parentNode === this)
+                    this.removeChild(n);
+            }
+        }
+    }
+    _showCopiedFeedback(btn) {
+        // Don't stringify/re-parse the button's children — the original icon is
+        // a live custom element (e.g. <xm-copy-icon>) whose children were filled
+        // by Lit on upgrade. Setting innerHTML back would create a fresh empty
+        // instance that Lit re-renders into, leaving two stacked icons. Instead,
+        // hide the original icon nodes and append a temporary check span next to
+        // them; on reset, drop the span and unhide the originals.
+        const originalLabel = btn.getAttribute("aria-label") || "Copy message";
+        const originalTitle = btn.getAttribute("title");
+        const hidden = [];
+        for (const child of Array.from(btn.children)) {
+            const el = child;
+            hidden.push({ el, prev: el.style.display });
+            el.style.display = "none";
+        }
+        const checkSpan = document.createElement("span");
+        checkSpan.setAttribute("data-copy-check", "");
+        checkSpan.style.display = "inline-flex";
+        checkSpan.innerHTML = CHECK_ICON_SVG;
+        btn.appendChild(checkSpan);
+        btn.setAttribute("aria-label", "Copied");
+        btn.setAttribute("title", "Copied");
+        if (this._copyResetTimer != null)
+            window.clearTimeout(this._copyResetTimer);
+        this._copyResetTimer = window.setTimeout(() => {
+            checkSpan.remove();
+            for (const { el, prev } of hidden)
+                el.style.display = prev;
+            btn.setAttribute("aria-label", originalLabel);
+            if (originalTitle == null)
+                btn.removeAttribute("title");
+            else
+                btn.setAttribute("title", originalTitle);
+            this._copyResetTimer = null;
+        }, 1200);
+    }
+    render() {
+        return html `
+      <div
+        class="bubble-actions"
+        role="toolbar"
+        aria-label="${this.ariaLabel}"
+      >
+        ${this.ts
+            ? html `<span class="bubble-actions__ts">${this.ts}</span>`
+            : nothing}
+        <span data-mount="actions" style="display:contents"></span>
+      </div>
+    `;
+    }
+    updated() {
+        const host = this.querySelector('[data-mount="actions"]');
+        if (!host)
+            return;
+        if (host.childNodes.length === 0 && this._authored.length) {
+            for (const n of this._authored)
+                host.appendChild(n);
+        }
+    }
+};
+__decorate([
+    property({ type: String })
+], XmBubbleActions.prototype, "ts", void 0);
+__decorate([
+    property({ type: String, attribute: "aria-label" })
+], XmBubbleActions.prototype, "ariaLabel", void 0);
+XmBubbleActions = __decorate([
+    customElement("xm-bubble-actions")
+], XmBubbleActions);
+/* ─────────────────────────────────────────────────────────────
+   <xm-artifact-chip> — standalone chip for surfaces other than
+   xm-bubble (e.g. snackbar, drawer). xm-bubble renders the same
+   markup inline, but exposing this as its own element lets pages
+   compose it without an enclosing bubble.
+   ─────────────────────────────────────────────────────────────*/
+let XmArtifactChip = class XmArtifactChip extends LightElement {
+    constructor() {
+        super(...arguments);
+        this.artifact = null;
+        this.download = false;
+        this._open = () => {
+            if (!this.artifact)
+                return;
+            this.dispatchEvent(new CustomEvent("artifact-open", {
+                detail: { artifact: this.artifact },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._download = (e) => {
+            e.stopPropagation();
+            this.dispatchEvent(new CustomEvent("artifact-download", {
+                detail: { artifact: this.artifact },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    render() {
+        const a = this.artifact;
+        if (!a)
+            return nothing;
+        return html `
+      <div
+        role="button"
+        tabindex="0"
+        class="att-card att-card--text att-card--text-row"
+        title="Open ${a.title}"
+        @click=${this._open}
+        @keydown=${(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                this._open();
+            }
+        }}
+      >
+        <span class="att-card__icon" aria-hidden="true">
+          <svg width="18" height="18" viewBox="0 0 24 24"
+               fill="none" stroke="currentColor" stroke-width="1.6"
+               stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
+            <path d="M14 3v5h5" />
+          </svg>
+        </span>
+        <span class="att-card__body">
+          <span class="att-card__name">${a.title}</span>
+          ${a.sub?.length
+            ? html `<span class="att-card__sub">
+                ${a.sub.map((s, i) => html `
+                  ${i > 0 ? html `<span class="ds-sep">·</span>` : nothing}
+                  <span>${s}</span>
+                `)}
+              </span>`
+            : nothing}
+        </span>
+        ${this.download
+            ? html `<span class="att-card__action" @click=${(e) => e.stopPropagation()}>
+              <xm-button variant="outline-canvas" size="md"
+                         @click=${this._download}>Download</xm-button>
+            </span>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], XmArtifactChip.prototype, "artifact", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmArtifactChip.prototype, "download", void 0);
+XmArtifactChip = __decorate([
+    customElement("xm-artifact-chip")
+], XmArtifactChip);