@convai/web-sdk 1.8.0-beta.6 → 1.8.0-beta.8

package/dist/embed/ConvaiChatElement.js

@@ -0,0 +1,679 @@
+import { ConvaiClient } from "../core/ConvaiClient.js";
+import { loadPublishedChatSession, parsePublishedChatUrl, } from "./publicationApi.js";
+const VISIBLE_MESSAGE_TYPES = new Set([
+    "user-llm-text",
+    "user-transcription",
+    "bot-llm-text",
+    "bot-output",
+]);
+/** Placeholder session id the client reports before the server assigns one. */
+const UNASSIGNED_SESSION_ID = "-1";
+const COPY_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg>`;
+const RESET_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7M3 4v5h5"/></svg>`;
+const SEND_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>`;
+/**
+ * Every colour, radius and font is a custom property so an embedder can retheme
+ * the widget from the host page without reaching into the shadow root. The
+ * defaults match the Convai playground chat.
+ */
+const styles = `
+  :host {
+    --convai-chat-bg: #0F1113;
+    --convai-chat-surface: #181A1D;
+    --convai-chat-raised: #24272B;
+    --convai-chat-border: rgba(145, 158, 171, 0.20);
+    --convai-chat-text: #FFFFFF;
+    --convai-chat-muted: #919EAB;
+    --convai-chat-faint: #637381;
+    --convai-chat-accent: #00A76F;
+    --convai-chat-accent-strong: #5BE49B;
+    --convai-chat-on-accent: #FFFFFF;
+    --convai-chat-user-bubble: #BCDBC7;
+    --convai-chat-user-text: #0F1113;
+    --convai-chat-danger: #FFAC82;
+    /* The widget's own corner. Radii inside the chat — bubbles, the composer
+       pill, the circular avatars and send button — are part of its shape, not
+       its theme, and are fixed. */
+    --convai-chat-radius: 16px;
+    --convai-chat-font: "Public Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+    color-scheme: dark;
+    display: block;
+    min-height: 560px;
+    width: 100%;
+    font-family: var(--convai-chat-font);
+  }
+  :host([full-window]) { min-height: 100dvh; }
+  * { box-sizing: border-box; }
+
+  .shell {
+    background: var(--convai-chat-bg);
+    border: 1px solid var(--convai-chat-border);
+    border-radius: var(--convai-chat-radius);
+    color: var(--convai-chat-text);
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    height: 100%;
+    min-height: inherit;
+    overflow: hidden;
+  }
+  :host([full-window]) .shell { border: 0; border-radius: 0; }
+
+  header {
+    align-items: center;
+    background: var(--convai-chat-surface);
+    border-bottom: 1px solid var(--convai-chat-border);
+    display: flex;
+    gap: 12px;
+    padding: 12px 18px;
+  }
+  .avatar {
+    background: var(--convai-chat-accent);
+    border-radius: 50%;
+    flex: none;
+    height: 40px;
+    object-fit: cover;
+    width: 40px;
+  }
+  .avatar-fallback { align-items: center; color: var(--convai-chat-on-accent); display: inline-flex; font-size: 12px; font-weight: 600; justify-content: center; text-transform: uppercase; }
+  .identity { min-width: 0; }
+  h2 { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .status { color: var(--convai-chat-muted); font-size: 12px; margin: 2px 0 0; }
+  .header-actions { display: flex; gap: 2px; margin-left: auto; }
+  .icon-button {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: 8px;
+    color: var(--convai-chat-muted);
+    cursor: pointer;
+    display: inline-flex;
+    height: 34px;
+    justify-content: center;
+    padding: 0;
+    width: 34px;
+  }
+  .icon-button:hover:not(:disabled) { background: var(--convai-chat-raised); color: var(--convai-chat-text); }
+  .icon-button:disabled { cursor: default; opacity: .4; }
+  .icon-button svg { height: 17px; width: 17px; }
+
+  .messages { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 20px 18px; }
+
+  .intro { align-items: center; align-self: center; display: flex; flex-direction: column; gap: 8px; margin: auto 0; max-width: 44ch; text-align: center; }
+  .intro .avatar { height: 56px; width: 56px; }
+  .intro-name { font-size: 16px; font-weight: 600; }
+  .intro-description { color: var(--convai-chat-muted); font-size: 13px; margin: 0; }
+
+  .row { align-items: flex-end; display: flex; gap: 10px; max-width: 82%; }
+  .row.user { align-self: flex-end; flex-direction: row-reverse; }
+  .row.character { align-self: flex-start; }
+  .row .avatar { height: 26px; width: 26px; }
+  .bubble { border-radius: 14px; line-height: 1.5; overflow-wrap: anywhere; padding: 10px 14px; white-space: pre-wrap; }
+  .row.user .bubble { background: var(--convai-chat-user-bubble); border-bottom-right-radius: 4px; color: var(--convai-chat-user-text); }
+  .row.character .bubble { background: var(--convai-chat-raised); border-bottom-left-radius: 4px; }
+
+  .typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
+  .typing span { animation: convai-blink 1.2s infinite; background: var(--convai-chat-muted); border-radius: 50%; height: 6px; width: 6px; }
+  .typing span:nth-child(2) { animation-delay: .2s; }
+  .typing span:nth-child(3) { animation-delay: .4s; }
+  @keyframes convai-blink { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }
+
+  .error { color: var(--convai-chat-danger); font-size: 13px; margin: 0; padding: 0 18px 10px; }
+  .retry { align-self: center; margin-top: 12px; }
+
+  footer { background: var(--convai-chat-surface); border-top: 1px solid var(--convai-chat-border); display: grid; gap: 8px; padding: 12px 18px 10px; }
+  form { align-items: center; background: var(--convai-chat-bg); border: 1px solid var(--convai-chat-border); border-radius: 999px; display: flex; gap: 8px; padding: 4px 4px 4px 16px; }
+  input { background: transparent; border: 0; color: var(--convai-chat-text); flex: 1; font: inherit; min-width: 0; outline: none; padding: 9px 0; }
+  /* The input drops its own outline, so the pill carries keyboard focus. */
+  form:focus-within { border-color: var(--convai-chat-accent); box-shadow: 0 0 0 2px var(--convai-chat-accent-strong); }
+  input::placeholder { color: var(--convai-chat-faint); }
+  button { background: var(--convai-chat-accent); border: 0; border-radius: 999px; color: var(--convai-chat-on-accent); cursor: pointer; font: inherit; font-weight: 600; padding: 9px 16px; }
+  button:disabled { cursor: default; opacity: .45; }
+  .send { align-items: center; border-radius: 50%; display: inline-flex; height: 38px; justify-content: center; padding: 0; width: 38px; }
+  .send svg { height: 17px; width: 17px; }
+  .interrupt { background: var(--convai-chat-raised); color: var(--convai-chat-text); padding: 8px 14px; }
+
+  .meta { align-items: center; color: var(--convai-chat-faint); display: flex; font-size: 11px; gap: 8px; justify-content: space-between; }
+  .session { background: transparent; border: 0; border-radius: 4px; color: var(--convai-chat-faint); cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 400; padding: 2px 6px; }
+  .session:hover { background: var(--convai-chat-raised); color: var(--convai-chat-muted); }
+  .session[hidden] { display: none; }
+
+  @media (max-width: 560px) {
+    :host { min-height: 100dvh; }
+    .shell { border: 0; border-radius: 0; }
+    .messages { padding: 16px; }
+    .row { max-width: 90%; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .typing span { animation: none; }
+  }
+`;
+function errorText(error) {
+    return error instanceof Error && error.message
+        ? error.message
+        : "Published chat is temporarily unavailable";
+}
+/** Short, copy-friendly form for a long opaque session id. */
+function shortSessionId(sessionId) {
+    return sessionId.length > 12
+        ? `${sessionId.slice(0, 4)}…${sessionId.slice(-4)}`
+        : sessionId;
+}
+export class ConvaiChatElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.client = null;
+        this.controller = null;
+        this.unsubs = [];
+        this.mounted = false;
+        this.ready = false;
+        this.messages = [];
+        this.descriptor = null;
+        this.failureReported = false;
+        /** A session that could still produce a reply: set when the client is wired
+         * up, cleared when it ends. Not a wait flag — see `isAwaitingReply()`. */
+        this.sessionLive = false;
+        this.sessionId = null;
+        this.retryVisible = false;
+    }
+    connectedCallback() {
+        if (this.mounted)
+            return;
+        this.mounted = true;
+        this.renderShell();
+        void this.start();
+    }
+    disconnectedCallback() {
+        this.mounted = false;
+        this.controller?.abort();
+        this.controller = null;
+        void this.cleanupClient();
+    }
+    requireAttribute(name) {
+        const value = this.getAttribute(name)?.trim();
+        if (!value)
+            throw new Error(`${name} is required`);
+        return value;
+    }
+    renderShell() {
+        const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+        root.innerHTML = `
+      <style>${styles}</style>
+      <section class="shell" aria-label="Convai character chat">
+        <header>
+          <img class="avatar" alt="" hidden />
+          <div class="identity">
+            <h2>Character chat</h2>
+            <p class="status" role="status">Preparing chat…</p>
+          </div>
+          <div class="header-actions">
+            <button class="icon-button copy-chat" type="button" title="Copy chat" aria-label="Copy chat" disabled>${COPY_ICON}</button>
+            <button class="icon-button reset-session" type="button" title="Reset session" aria-label="Reset session" disabled>${RESET_ICON}</button>
+          </div>
+        </header>
+        <div class="messages" aria-live="polite"></div>
+        <p class="error" role="alert" hidden></p>
+        <footer>
+          <form>
+            <input aria-label="Chat message" maxlength="4000" placeholder="Preparing chat…" disabled />
+            <button class="interrupt" type="button" hidden>Stop</button>
+            <button class="send" type="submit" aria-label="Send" disabled>${SEND_ICON}</button>
+          </form>
+          <div class="meta">
+            <span class="powered">Powered by Convai</span>
+            <button class="session" type="button" title="Copy session ID" hidden></button>
+          </div>
+        </footer>
+      </section>
+    `;
+        const input = root.querySelector("input");
+        const sendButton = root.querySelector(".send");
+        if (input) {
+            input.addEventListener("input", () => {
+                if (sendButton) {
+                    sendButton.disabled = !this.client?.state.isConnected || !input.value.trim();
+                }
+            });
+        }
+        root.querySelector("form")?.addEventListener("submit", (event) => {
+            event.preventDefault();
+            if (!input)
+                return;
+            const text = input.value.trim();
+            if (!text || !this.client?.state.isConnected)
+                return;
+            this.client.sendUserTextMessage(text);
+            input.value = "";
+            this.updateControls(true);
+        });
+        root.querySelector(".interrupt")?.addEventListener("click", () => {
+            this.client?.sendInterruptMessage();
+            this.setResponding(false);
+            this.finalizeOpenTurn();
+        });
+        root.querySelector(".copy-chat")?.addEventListener("click", () => {
+            void this.copyTranscript();
+        });
+        root.querySelector(".reset-session")?.addEventListener("click", () => {
+            this.resetSession();
+        });
+        root.querySelector(".session")?.addEventListener("click", () => {
+            if (this.sessionId)
+                void this.writeToClipboard(this.sessionId);
+        });
+        this.renderDescriptor();
+        this.renderMessages();
+    }
+    async start() {
+        this.controller?.abort();
+        const controller = new AbortController();
+        this.controller = controller;
+        // Retire the previous session before awaiting anything. `cleanupClient()`
+        // waits on the room teardown, and until that resolves the visitor would
+        // otherwise keep a live composer, a Stop control and a typing row driven
+        // by a client that has already gone.
+        this.ready = false;
+        this.failureReported = false;
+        this.messages = [];
+        this.sessionLive = false;
+        this.setResponding(false);
+        this.retryVisible = false;
+        // A reused element may now point at a different publication. Drop the old
+        // descriptor so the header falls back to the host's seed (or the generic
+        // title) instead of showing the previous character until the fetch lands.
+        this.descriptor = null;
+        this.setSessionId(null);
+        this.renderDescriptor();
+        this.renderMessages();
+        this.setError("");
+        this.setStatus("Preparing chat…");
+        this.updateControls(false);
+        await this.cleanupClient();
+        if (controller.signal.aborted || this.controller !== controller || !this.mounted)
+            return;
+        try {
+            const publicationId = this.requireAttribute("publication-id");
+            const publicationApiUrl = this.getAttribute("publication-api-url")?.trim();
+            const coreUrlValue = this.getAttribute("core-url")?.trim();
+            const coreUrl = coreUrlValue
+                ? parsePublishedChatUrl(coreUrlValue, "core-url").toString().replace(/\/$/, "")
+                : undefined;
+            const { descriptor, launchToken } = await loadPublishedChatSession(publicationId, publicationApiUrl || undefined, fetch, controller.signal);
+            if (controller.signal.aborted || this.controller !== controller || !this.mounted)
+                return;
+            this.descriptor = descriptor;
+            this.renderDescriptor();
+            this.renderMessages();
+            const client = new ConvaiClient();
+            this.client = client;
+            this.unsubs = [
+                client.on("messagesChange", (messages) => {
+                    this.messages = [...messages];
+                    this.renderMessages();
+                }),
+                client.on("stateChange", (state) => {
+                    this.setResponding(state.isThinking || state.isSpeaking);
+                }),
+                client.on("characterSessionId", (sessionId) => {
+                    this.setSessionId(sessionId);
+                }),
+                // The abstain marker in the transcript ends the wait on its own; this
+                // only retires the Stop control, which no frame lowers.
+                client.on("llmNoResponse", () => this.setResponding(false)),
+                client.on("botReady", () => {
+                    this.ready = true;
+                    this.setStatus("Ready to chat");
+                    this.updateControls(true);
+                    this.dispatch("convai-ready");
+                }),
+                client.on("disconnect", () => {
+                    this.endSession();
+                    this.setStatus("Session ended");
+                    this.updateControls(false);
+                    this.showRetry();
+                    this.dispatch("convai-disconnect");
+                }),
+                client.on("error", (error) => {
+                    if (!controller.signal.aborted && this.controller === controller) {
+                        void this.fail(error);
+                    }
+                }),
+            ];
+            // Messages can arrive from here on, so the session is live before the
+            // connect resolves.
+            this.sessionLive = true;
+            this.setStatus("Connecting…");
+            await client.connectWithPublicationGrant(launchToken, { ...(coreUrl ? { url: coreUrl } : {}), signal: controller.signal });
+            // The published connect path assigns the character session id from the
+            // connection response without emitting `characterSessionId`, so the
+            // listener above never sees the initial value. Read it once here; the
+            // listener still covers later changes.
+            this.setSessionId(client.characterSessionId);
+            if (!this.ready)
+                this.setStatus("Connected; waiting for character…");
+        }
+        catch (error) {
+            if (controller.signal.aborted || this.controller !== controller || !this.mounted)
+                return;
+            await this.fail(error);
+        }
+    }
+    async fail(error) {
+        if (this.failureReported)
+            return;
+        this.failureReported = true;
+        const message = errorText(error);
+        // cleanupClient() removes the state listener before disconnecting, so the
+        // session has to be closed out here or nothing else will.
+        this.endSession();
+        this.setStatus("Unable to connect");
+        this.setError(message);
+        this.updateControls(false);
+        this.showRetry();
+        this.dispatch("convai-error", { message });
+        await this.cleanupClient();
+    }
+    async cleanupClient() {
+        this.sessionLive = false;
+        this.unsubs.splice(0).forEach((unsubscribe) => unsubscribe());
+        const client = this.client;
+        this.client = null;
+        if (client)
+            await client.disconnect().catch(() => undefined);
+    }
+    /**
+     * A host that already knows who the character is can seed the header through
+     * `display-name` and `image-url`, so the identity paints before the
+     * publication descriptor resolves. The fetched descriptor always wins.
+     */
+    displayName() {
+        if (this.descriptor)
+            return this.descriptor.display_name || "Character chat";
+        return this.getAttribute("display-name")?.trim() || "Character chat";
+    }
+    /** `null` is a valid descriptor value, so a loaded descriptor without an
+     * image clears the seed rather than falling back to it. */
+    imageUrl() {
+        if (this.descriptor)
+            return this.descriptor.image_url;
+        return this.getAttribute("image-url")?.trim() || null;
+    }
+    renderDescriptor() {
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        const title = root.querySelector("h2");
+        if (title)
+            title.textContent = this.displayName();
+        const imageUrl = this.imageUrl();
+        root.querySelectorAll("header .avatar").forEach((avatar) => {
+            if (imageUrl) {
+                avatar.src = imageUrl;
+                avatar.alt = "";
+                avatar.hidden = false;
+                return;
+            }
+            avatar.removeAttribute("src");
+            avatar.hidden = true;
+        });
+    }
+    /**
+     * The character's own avatar, reused as the icon beside each of its replies.
+     * Without an image this is the character's initial on the accent disc, not a
+     * bare `<img>` — which the avatar rule would paint as an empty disc.
+     */
+    avatarElement() {
+        const imageUrl = this.imageUrl();
+        if (imageUrl) {
+            const avatar = document.createElement("img");
+            avatar.className = "avatar";
+            avatar.alt = "";
+            avatar.src = imageUrl;
+            return avatar;
+        }
+        const fallback = document.createElement("span");
+        fallback.className = "avatar avatar-fallback";
+        fallback.setAttribute("aria-hidden", "true");
+        fallback.textContent = this.displayName().trim().charAt(0) || "?";
+        return fallback;
+    }
+    /**
+     * Whether the character owes a reply that has produced no text yet — the
+     * question the typing indicator asks.
+     *
+     * Derived from the message list on every render rather than tracked as
+     * state, because the list already records every event that starts or ends a
+     * wait: a send appends a `user-llm-text` row synchronously
+     * (`MessageHandler.addUserTextMessage`), a turn begins as an empty
+     * `bot-llm-text` row (`bot-llm-started`), the first token fills that row,
+     * and an abstain appends `llm-no-response`. Held as flags instead, each of
+     * those events needed its own handler and every one I missed was a bug:
+     * dots through an entire reply, no dots for a character-initiated greeting
+     * or a follow-up turn, dots forever after an abstain.
+     *
+     * The scan reads the unfiltered list: the rows that mark a turn's start and
+     * its abstain are exactly the ones the transcript hides. An empty bot row
+     * means the turn is open only while it is still streaming — `bot-llm-stopped`
+     * finalizes the row in place, so an empty finalized row is a turn that ended
+     * without text (an interrupt, or a stop before the first token).
+     */
+    isAwaitingReply() {
+        if (!this.sessionLive)
+            return false;
+        for (let index = this.messages.length - 1; index >= 0; index -= 1) {
+            const message = this.messages[index];
+            // The character ended its turn without saying anything.
+            if (message.type === "llm-no-response")
+                return false;
+            if (!VISIBLE_MESSAGE_TYPES.has(message.type))
+                continue;
+            if (message.type.startsWith("user"))
+                return true;
+            return Boolean(message.isStreaming) && !message.content?.trim();
+        }
+        return false;
+    }
+    /**
+     * Close the open turn in this element's own copy of the transcript.
+     *
+     * `sendInterruptMessage()` transmits the interrupt; it does not finalize the
+     * empty streaming row, which stays open until a `bot-llm-stopped` frame
+     * arrives — delayed, or never, if the acknowledgement is lost. The visitor
+     * asked the character to stop, so the wait ends with the click. A later
+     * `messagesChange` replaces this array wholesale, so nothing diverges.
+     */
+    finalizeOpenTurn() {
+        for (let index = this.messages.length - 1; index >= 0; index -= 1) {
+            const message = this.messages[index];
+            if (!VISIBLE_MESSAGE_TYPES.has(message.type))
+                continue;
+            if (message.type.startsWith("user"))
+                return;
+            if (message.isStreaming) {
+                this.messages[index] = { ...message, isStreaming: false };
+                this.renderMessages();
+            }
+            return;
+        }
+    }
+    visibleMessages() {
+        return this.messages.filter((message) => VISIBLE_MESSAGE_TYPES.has(message.type) && Boolean(message.content?.trim()));
+    }
+    renderMessages() {
+        const container = this.shadowRoot?.querySelector(".messages");
+        if (!container)
+            return;
+        container.replaceChildren();
+        const visible = this.visibleMessages();
+        const awaiting = this.isAwaitingReply();
+        if (visible.length === 0) {
+            container.appendChild(this.introElement());
+            // A character-initiated greeting is an empty bot row the transcript
+            // hides, so the opening state can be waiting too.
+            if (awaiting)
+                container.appendChild(this.typingElement());
+            if (this.retryVisible)
+                container.appendChild(this.retryElement());
+            this.updateTranscriptControls();
+            return;
+        }
+        visible.forEach((message) => {
+            const isUser = message.type.startsWith("user");
+            const row = document.createElement("div");
+            row.className = `row ${isUser ? "user" : "character"}`;
+            if (!isUser)
+                row.appendChild(this.avatarElement());
+            const bubble = document.createElement("div");
+            bubble.className = "bubble";
+            bubble.textContent = message.content;
+            row.appendChild(bubble);
+            container.appendChild(row);
+        });
+        if (awaiting)
+            container.appendChild(this.typingElement());
+        if (this.retryVisible)
+            container.appendChild(this.retryElement());
+        container.scrollTop = container.scrollHeight;
+        this.updateTranscriptControls();
+    }
+    /** Opening state: who the visitor is talking to, not a bare instruction. */
+    introElement() {
+        const intro = document.createElement("div");
+        intro.className = "intro";
+        intro.appendChild(this.avatarElement());
+        const name = document.createElement("div");
+        name.className = "intro-name";
+        name.textContent = this.displayName();
+        intro.appendChild(name);
+        const description = document.createElement("p");
+        description.className = "intro-description";
+        description.textContent =
+            this.descriptor?.description?.trim() || "Send a message to start a private conversation.";
+        intro.appendChild(description);
+        return intro;
+    }
+    typingElement() {
+        const row = document.createElement("div");
+        row.className = "row character";
+        row.appendChild(this.avatarElement());
+        const typing = document.createElement("div");
+        typing.className = "bubble typing";
+        typing.setAttribute("aria-label", "Character is replying");
+        for (let index = 0; index < 3; index += 1)
+            typing.appendChild(document.createElement("span"));
+        row.appendChild(typing);
+        return row;
+    }
+    setStatus(message) {
+        const status = this.shadowRoot?.querySelector(".status");
+        if (status)
+            status.textContent = message;
+    }
+    setError(message) {
+        const error = this.shadowRoot?.querySelector(".error");
+        if (!error)
+            return;
+        error.textContent = message;
+        error.hidden = !message;
+    }
+    setSessionId(sessionId) {
+        const assigned = sessionId && sessionId !== UNASSIGNED_SESSION_ID ? sessionId : null;
+        this.sessionId = assigned;
+        const button = this.shadowRoot?.querySelector(".session");
+        if (!button)
+            return;
+        button.hidden = !assigned;
+        button.textContent = assigned ? `Session ${shortSessionId(assigned)}` : "";
+    }
+    updateControls(enabled) {
+        const input = this.shadowRoot?.querySelector("input");
+        const button = this.shadowRoot?.querySelector(".send");
+        const reset = this.shadowRoot?.querySelector(".reset-session");
+        if (input) {
+            input.disabled = !enabled;
+            input.placeholder = enabled
+                ? `Message ${this.displayName()}…`
+                : "Preparing chat…";
+        }
+        if (button)
+            button.disabled = !enabled || !input?.value.trim();
+        if (reset)
+            reset.disabled = !enabled;
+        this.updateTranscriptControls();
+    }
+    updateTranscriptControls() {
+        const copy = this.shadowRoot?.querySelector(".copy-chat");
+        if (copy)
+            copy.disabled = this.visibleMessages().length === 0;
+    }
+    /** Shows or hides Stop. The typing indicator no longer rides on this. */
+    setResponding(responding) {
+        const interrupt = this.shadowRoot?.querySelector(".interrupt");
+        if (interrupt)
+            interrupt.hidden = !responding;
+    }
+    /** The session can no longer produce a reply: stop waiting, stop offering
+     * Stop, and redraw so the transcript agrees. */
+    endSession() {
+        this.sessionLive = false;
+        this.setResponding(false);
+        this.renderMessages();
+    }
+    /** Same `Author: text` shape the playground's Copy chat produces. */
+    async copyTranscript() {
+        const characterName = this.displayName();
+        const transcript = this.visibleMessages()
+            .map((message) => `${message.type.startsWith("user") ? "User" : characterName}: ${message.content}`)
+            .join("\n");
+        if (transcript)
+            await this.writeToClipboard(transcript);
+    }
+    async writeToClipboard(value) {
+        try {
+            await navigator.clipboard.writeText(value);
+            this.dispatch("convai-copy", { value });
+        }
+        catch {
+            this.setError("Could not copy to the clipboard");
+        }
+    }
+    /**
+     * A published session is bound to the room it connected with: the character
+     * session id travels in the connect request, not in each `user_text_message`,
+     * so `ConvaiClient.resetSession()` would clear the transcript while the server
+     * kept the previous conversation. Reconnecting on a fresh launch grant is the
+     * only reset the published flow supports, and `start()` already tears the old
+     * client down before requesting one.
+     */
+    resetSession() {
+        if (!this.client?.state.isConnected)
+            return;
+        this.dispatch("convai-session-reset");
+        void this.start();
+    }
+    retryElement() {
+        const retry = document.createElement("button");
+        retry.className = "retry";
+        retry.type = "button";
+        retry.textContent = "Try again";
+        retry.addEventListener("click", () => void this.start(), { once: true });
+        return retry;
+    }
+    /** Held as state, not a one-off append: a typing or message re-render would
+     * otherwise clear the only control left after a failed connection. */
+    showRetry() {
+        if (this.retryVisible)
+            return;
+        this.retryVisible = true;
+        this.renderMessages();
+    }
+    dispatch(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));
+    }
+}
+export function defineConvaiChatElement(registry = customElements) {
+    if (!registry.get("convai-chat")) {
+        registry.define("convai-chat", ConvaiChatElement);
+    }
+}
+//# sourceMappingURL=ConvaiChatElement.js.map