@xmesh/system-design 0.0.1

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

@@ -0,0 +1,589 @@
+/*
+  chat/index.ts — Lit port of components/chat/index.jsx.
+
+  <xm-chat-shell> — full-viewport chat layout (sidebar + top + thread +
+  composer + optional artifact panel).
+
+  Properties (all set via JS — they're nested objects):
+    conversations    Array<{ group: string, items: [{ id, title, active? }] }>
+    thread           Array<{ from: 'user'|'bot', text?, html?, ts,
+                              atts?, artifact? }>
+                     `html` is a trusted HTML string (rendered via
+                     unsafeHTML); `text` is plain text.
+    processing       boolean — forwarded to the inner <xm-composer>
+    thinkingLabel    string — forwarded to the inner <xm-composer>
+    topTitle         string override (default "New Conversation")
+
+  Slots (host-level):
+    artifact-body    rendered inside <xm-artifact> as the preview view
+                     when an artifact is open
+    artifact-code    rendered inside <xm-artifact> as the code view; the
+                     panel's segmented eye/code toggle swaps between this
+                     and artifact-body. Optional — omit for preview-only.
+    empty            replaces the thread + composer area when set
+                     (host owns its own composer in that case)
+
+  Events (all bubble, composed):
+    send             detail: { text, attachments } — proxy from xm-composer
+    cancel
+    artifact-open    detail: { artifact } — when a bubble's artifact chip
+                     is clicked. The shell also handles this internally
+                     (opens the artifact slot).
+    artifact-close
+
+  Light DOM. Loads the entire palette of dependent stylesheets at the
+  preview level. Composes the previously-ported xm-* elements.
+*/
+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, svg, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+// Pull in dependencies (side-effect imports; each defines its own custom
+// elements). The preview HTML can also `<script type="module">` them
+// individually if it wants finer control over load order.
+import "../primitives/index.js";
+import "../brand-mark/index.js";
+import "../button/index.js";
+import "../sidebar-item/index.js";
+import "../bubble/index.js";
+import "../composer/index.js";
+import "../artifact/index.js";
+/* ---------- Inline icon SVG fragments (used in topbar / sidebar chrome) */
+const I_PANEL = (size = 16) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <rect x="3" y="4" width="18" height="16" rx="2" />
+    <path d="M9 4v16" />
+  </svg>
+`;
+const I_PLUS = (size = 14) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2.2" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+`;
+const I_SEARCH = (size = 14) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <circle cx="11" cy="11" r="7" />
+    <path d="M21 21l-4.3-4.3" />
+  </svg>
+`;
+const I_TRACE = (size = 17) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <path d="M8 6V4a4 4 0 0 1 8 0v2" />
+    <rect x="6" y="6" width="12" height="13" rx="6" />
+    <path d="M12 11v8" />
+    <path d="M3 11h3" /><path d="M18 11h3" />
+    <path d="M3 18h3" /><path d="M18 18h3" />
+    <path d="M3 14h3" /><path d="M18 14h3" />
+  </svg>
+`;
+const I_SETTINGS = (size = 17) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" />
+  </svg>
+`;
+const I_REGEN = (size = 16) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <path d="M3 12a9 9 0 1 0 3-6.7" />
+    <path d="M3 4v5h5" />
+  </svg>
+`;
+const I_COPY = (size = 16) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <rect x="9" y="9" width="11" height="11" rx="2" />
+    <path d="M5 15V5a2 2 0 0 1 2-2h10" />
+  </svg>
+`;
+const I_EDIT = (size = 16) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <path d="M12 20h9" />
+    <path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z" />
+  </svg>
+`;
+const I_CHECK = (size = 16) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+`;
+// Best-effort clipboard write. Async API first; falls back to a hidden
+// textarea + execCommand for headless / non-secure-context environments
+// (notably the screenshot harness).
+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;
+    }
+};
+// Strip HTML to plain text by parsing into a detached div. Used for
+// thread messages whose body is authored as `html` — pasting raw HTML
+// is rarely what the user wants.
+const htmlToText = (html) => {
+    const div = document.createElement("div");
+    div.innerHTML = html;
+    return (div.textContent || "").trim();
+};
+let XmChatShell = class XmChatShell extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.conversations = [];
+        this.thread = [];
+        this.processing = false;
+        this.thinkingLabel = "";
+        this.topTitle = "New Conversation";
+        /** Pin the shell to the viewport (height: 100vh). Default is height: 100%
+            so the shell sizes to its container — embedded hosts get correct
+            sizing for free. Full-bleed previews opt in via the `full-viewport`
+            attribute. */
+        this.fullViewport = false;
+        this._collapsed = false;
+        this._activeId = null;
+        this._openArtifact = null;
+        this._hasEmpty = false;
+        this._searchValue = "";
+        this._copiedIdx = null;
+        this._copiedTimer = null;
+        this._artifactBodyNodes = [];
+        this._artifactCodeNodes = [];
+        this._emptyNodes = [];
+        this._toggleCollapsed = () => { this._collapsed = !this._collapsed; };
+        this._selectConv = (id) => { this._activeId = id; };
+        this._onSearchInput = (e) => {
+            this._searchValue = e.target.value;
+        };
+        this._onSearchClear = () => { this._searchValue = ""; };
+        this._onArtifactOpen = (e) => {
+            const detail = e.detail;
+            this._openArtifact = detail?.artifact ?? null;
+            this.dispatchEvent(new CustomEvent("artifact-open", {
+                detail: { artifact: this._openArtifact },
+                bubbles: true, composed: true,
+            }));
+        };
+        this._onArtifactClose = () => {
+            this._openArtifact = null;
+            this.dispatchEvent(new CustomEvent("artifact-close", {
+                bubbles: true, composed: true,
+            }));
+        };
+        this._onComposerSend = (e) => {
+            const detail = e.detail;
+            this.dispatchEvent(new CustomEvent("send", {
+                detail, bubbles: true, composed: true,
+            }));
+        };
+        this._onComposerCancel = () => {
+            this.dispatchEvent(new CustomEvent("cancel", {
+                bubbles: true, composed: true,
+            }));
+        };
+        this._onCopyMessage = async (e, idx) => {
+            // Stop the bubble-actions delegated listener (added by xm-bubble-actions
+            // for the static-preview path) from also firing.
+            e.stopPropagation();
+            const m = (this.thread || [])[idx];
+            if (!m)
+                return;
+            const text = m.text ? m.text : (m.html ? htmlToText(m.html) : "");
+            if (!text)
+                return;
+            const ok = await writeClipboard(text);
+            if (!ok)
+                return;
+            this._copiedIdx = idx;
+            if (this._copiedTimer != null)
+                window.clearTimeout(this._copiedTimer);
+            this._copiedTimer = window.setTimeout(() => {
+                this._copiedIdx = null;
+                this._copiedTimer = null;
+            }, 1200);
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Snapshot any authored slot="artifact-body" / slot="artifact-code" /
+        // slot="empty" content so lit's render doesn't replace them. We mount
+        // them imperatively in updated().
+        const ab = [];
+        const ac = [];
+        const em = [];
+        for (const child of Array.from(this.childNodes)) {
+            if (child.nodeType !== Node.ELEMENT_NODE) {
+                continue;
+            }
+            const slot = child.getAttribute("slot");
+            if (slot === "artifact-body")
+                ab.push(child);
+            else if (slot === "artifact-code")
+                ac.push(child);
+            else if (slot === "empty")
+                em.push(child);
+        }
+        for (const n of [...ab, ...ac, ...em])
+            n.remove();
+        this._artifactBodyNodes = ab;
+        this._artifactCodeNodes = ac;
+        this._emptyNodes = em;
+        this._hasEmpty = em.length > 0;
+        // Initialize active conversation from .active flag
+        if (Array.isArray(this.conversations)) {
+            for (const g of this.conversations) {
+                const match = g.items?.find((i) => i.active);
+                if (match) {
+                    this._activeId = match.id;
+                    break;
+                }
+            }
+        }
+    }
+    willUpdate(changed) {
+        // Re-init active id if conversations were re-set after upgrade.
+        if (changed.has("conversations") && this._activeId == null && Array.isArray(this.conversations)) {
+            for (const g of this.conversations) {
+                const match = g.items?.find((i) => i.active);
+                if (match) {
+                    this._activeId = match.id;
+                    break;
+                }
+            }
+        }
+    }
+    updated() {
+        // Pin thread to bottom on render (mirrors useEffect on [thread, processing]).
+        const threadEl = this.querySelector(".chat-shell__thread");
+        if (threadEl)
+            threadEl.scrollTop = threadEl.scrollHeight;
+        // Mount empty content
+        const emptyMount = this.querySelector('[data-mount="empty"]');
+        if (emptyMount && this._emptyNodes.length && emptyMount.childNodes.length === 0) {
+            for (const n of this._emptyNodes)
+                emptyMount.appendChild(n);
+        }
+        // Hand the artifact panel its preview/code body nodes via the public
+        // setBodies() API. This replaces any self-authored bodies and triggers
+        // a re-render so the active view mounts. We re-call on every chat-shell
+        // update so a freshly-mounted <xm-artifact> (after open/close/reopen)
+        // always lands with the right content.
+        if (this._openArtifact) {
+            const art = this.querySelector("xm-artifact");
+            if (art?.setBodies && (this._artifactBodyNodes.length || this._artifactCodeNodes.length)) {
+                art.setBodies(this._artifactBodyNodes, this._artifactCodeNodes);
+            }
+        }
+    }
+    /* ---------- sidebar render ---------- */
+    _renderSidebar() {
+        const collapsed = this._collapsed;
+        const groups = this.conversations || [];
+        return html `
+      <aside class="chat-sidebar" aria-label="Conversations">
+        ${collapsed
+            ? html `<xm-button
+                   class="chat-sidebar__top"
+                   variant="ghost"
+                   icon-only
+                   aria-label="Expand sidebar"
+                   title="Expand sidebar"
+                   @click=${this._toggleCollapsed}
+                 >${I_PANEL()}</xm-button>`
+            : html `<xm-button
+                   class="chat-sidebar__top"
+                   variant="ghost"
+                   full-width
+                   aria-label="Collapse sidebar"
+                   title="Collapse sidebar"
+                   @click=${this._toggleCollapsed}
+                 >
+                   <xm-brand-mark size="sm" show-wordmark></xm-brand-mark>
+                   <span slot="icon-right">${I_PANEL()}</span>
+                 </xm-button>`}
+
+        ${collapsed
+            ? html `<xm-button
+                   class="chat-sidebar__new"
+                   variant="ghost"
+                   icon-only
+                   aria-label="New chat"
+                   title="New chat"
+                 >${I_PLUS()}</xm-button>`
+            : html `<xm-button
+                   class="chat-sidebar__new"
+                   variant="ghost"
+                   full-width
+                   aria-label="New chat"
+                 >
+                   <span slot="icon-left">${I_PLUS()}</span>
+                   New chat
+                   <span slot="icon-right" class="ds-kbd">⌘N</span>
+                 </xm-button>`}
+
+        ${!collapsed
+            ? html `
+              <div class="chat-sidebar__search chat-sidebar__search--full">
+                <span class="ds-search ds-search--on-canvas">
+                  <span class="ds-search__icon" aria-hidden="true">${I_SEARCH(13)}</span>
+                  <input
+                    type="text"
+                    class="ds-search__input"
+                    .value=${this._searchValue}
+                    placeholder="Search conversations"
+                    spellcheck="false"
+                    @input=${this._onSearchInput}
+                  />
+                  ${this._searchValue
+                ? html `<button
+                             type="button"
+                             class="ds-search__clear"
+                             aria-label="Clear search"
+                             title="Clear search"
+                             @click=${this._onSearchClear}
+                           >${svg `
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
+                                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                 stroke-linejoin="round" class="ds-icon">
+                              <path d="M6 6l12 12M18 6L6 18" />
+                            </svg>`}</button>`
+                : nothing}
+                </span>
+              </div>
+            `
+            : html `
+              <xm-button
+                variant="ghost"
+                icon-only
+                class="chat-sidebar__search--icon-only"
+                aria-label="Search conversations"
+                title="Search conversations"
+              >${I_SEARCH(14)}</xm-button>
+            `}
+
+        <nav class="chat-sidebar__list scroll-canvas" aria-label="Recent chats">
+          ${collapsed
+            ? this._renderCollapsedList(groups)
+            : this._renderExpandedList(groups)}
+        </nav>
+      </aside>
+    `;
+    }
+    _renderCollapsedList(groups) {
+        const all = groups.flatMap((g) => g.items || []);
+        return all.map((c, i) => html `
+      <xm-sidebar-item
+        collapsed
+        ?active=${this._activeId === c.id}
+        title="${c.title}"
+        @click=${() => this._selectConv(c.id)}
+      ></xm-sidebar-item>
+      ${i === 2 ? html `<div class="chat-sidebar__divider" aria-hidden="true"></div>` : nothing}
+    `);
+    }
+    _renderExpandedList(groups) {
+        return groups.map((group) => html `
+      <div class="sidebar-item sidebar-item--row sidebar-item--eyebrow">${group.group}</div>
+      ${(group.items || []).map((c) => html `
+        <xm-sidebar-item
+          layout="stacked"
+          ?active=${this._activeId === c.id}
+          title="${c.title}"
+          @click=${() => this._selectConv(c.id)}
+        ></xm-sidebar-item>
+      `)}
+    `);
+    }
+    /* ---------- topbar render ---------- */
+    _renderTopBar() {
+        const showSubtitle = !this._hasEmpty;
+        return html `
+      <header class="chat-shell__top">
+        <div class="chat-shell__top-left">
+          <span class="chat-shell__top-title">${this.topTitle || "New Conversation"}</span>
+          ${showSubtitle
+            ? html `
+                <span class="chat-shell__top-sub">
+                  <span>${(this.thread || []).length} messages</span>
+                  <span class="ds-sep">·</span>
+                  <span>updated now</span>
+                </span>
+              `
+            : nothing}
+        </div>
+        <div class="chat-shell__top-right">
+          <xm-button variant="ghost" icon-only aria-label="Open debug panel" title="Open debug panel">${I_TRACE()}</xm-button>
+          <xm-button variant="ghost" icon-only aria-label="Conversation settings" title="Conversation settings">${I_SETTINGS()}</xm-button>
+        </div>
+      </header>
+    `;
+    }
+    /* ---------- bubble row render ----------
+       Bubbles receive their body via `.text=` or `.bodyHtml=` properties.
+       This avoids the lit-marker-vs-snapshot race that would happen if
+       we put text content between <xm-bubble>...</xm-bubble> in the
+       parent template — the bubble's own template controls its body
+       so lit's diffing stays consistent across re-renders. */
+    _renderBubbleRow(m, idx) {
+        const isUser = m.from === "user";
+        const variant = isUser ? "user" : "bot";
+        const copied = this._copiedIdx === idx;
+        return html `
+      <div class="chat-shell__row chat-shell__row--${variant}">
+        <xm-bubble-group variant="${variant}">
+          <xm-bubble
+            variant="${variant}"
+            .attachments=${m.atts || []}
+            .artifact=${m.artifact || null}
+            ?download=${!!m.artifact}
+            .text=${m.html ? "" : (m.text || "")}
+            .bodyHtml=${m.html || ""}
+            @artifact-open=${this._onArtifactOpen}
+          ></xm-bubble>
+          <xm-bubble-actions ts="${m.ts || ""}">
+            <xm-button variant="ghost-canvas" icon-only size="sm" aria-label="Regenerate">${I_REGEN()}</xm-button>
+            ${!isUser
+            ? html `<xm-button variant="ghost-canvas" icon-only size="sm" aria-label="View trace">${I_TRACE(16)}</xm-button>`
+            : html `<xm-button variant="ghost-canvas" icon-only size="sm" aria-label="Edit message">${I_EDIT()}</xm-button>`}
+            <xm-button
+              variant="ghost-canvas"
+              icon-only
+              size="sm"
+              aria-label="${copied ? "Copied" : "Copy message"}"
+              title="${copied ? "Copied" : "Copy message"}"
+              @click=${(e) => this._onCopyMessage(e, idx)}
+            >${copied ? I_CHECK() : I_COPY()}</xm-button>
+          </xm-bubble-actions>
+        </xm-bubble-group>
+      </div>
+    `;
+    }
+    /* ---------- shell render ---------- */
+    render() {
+        const cls = [
+            "chat-shell",
+            this.fullViewport ? "chat-shell--full-viewport" : "",
+            this._collapsed ? "chat-shell--collapsed" : "",
+            this._openArtifact ? "chat-shell--has-artifact" : "",
+        ].filter(Boolean).join(" ");
+        const showEmpty = this._hasEmpty;
+        const thread = this.thread || [];
+        return html `
+      <div class="${cls}">
+        ${this._renderSidebar()}
+        ${this._renderTopBar()}
+        <div class="chat-shell__center">
+          ${showEmpty
+            ? html `<div data-mount="empty" style="display:contents"></div>`
+            : html `
+                <div class="chat-shell__thread scroll-canvas">
+                  <div class="chat-shell__thread-inner">
+                    ${thread.map((m, i) => this._renderBubbleRow(m, i))}
+                  </div>
+                </div>
+                <div class="chat-shell__composer">
+                  <xm-composer
+                    ?processing=${this.processing}
+                    thinking-label="${this.thinkingLabel}"
+                    show-attachments
+                    .initialFocus=${false}
+                    @send=${this._onComposerSend}
+                    @cancel=${this._onComposerCancel}
+                  ></xm-composer>
+                </div>
+              `}
+        </div>
+        ${this._openArtifact
+            ? html `
+              <aside class="chat-shell__artifact-slot" aria-label="Artifact viewer">
+                <xm-artifact
+                  title="${this._openArtifact.title || ""}"
+                  .sub=${this._openArtifact.sub || []}
+                  show-refresh
+                  show-close
+                  @close=${this._onArtifactClose}
+                ></xm-artifact>
+              </aside>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], XmChatShell.prototype, "conversations", void 0);
+__decorate([
+    property({ attribute: false })
+], XmChatShell.prototype, "thread", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmChatShell.prototype, "processing", void 0);
+__decorate([
+    property({ type: String, attribute: "thinking-label" })
+], XmChatShell.prototype, "thinkingLabel", void 0);
+__decorate([
+    property({ type: String, attribute: "top-title" })
+], XmChatShell.prototype, "topTitle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "full-viewport" })
+], XmChatShell.prototype, "fullViewport", void 0);
+__decorate([
+    state()
+], XmChatShell.prototype, "_collapsed", void 0);
+__decorate([
+    state()
+], XmChatShell.prototype, "_activeId", void 0);
+__decorate([
+    state()
+], XmChatShell.prototype, "_openArtifact", void 0);
+__decorate([
+    state()
+], XmChatShell.prototype, "_hasEmpty", void 0);
+__decorate([
+    state()
+], XmChatShell.prototype, "_searchValue", void 0);
+__decorate([
+    state()
+], XmChatShell.prototype, "_copiedIdx", void 0);
+XmChatShell = __decorate([
+    customElement("xm-chat-shell")
+], XmChatShell);