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

package/dist/embed/ConvaiChatElement.js

@@ -6,47 +6,146 @@ const VISIBLE_MESSAGE_TYPES = new Set([
     "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: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-family: var(--convai-chat-font);
   }
+  :host([full-window]) { min-height: 100dvh; }
   * { box-sizing: border-box; }
+
   .shell {
-    background: #111118;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
-    color: #fff;
+    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;
   }
-  header { align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; gap: 12px; padding: 16px 20px; }
-  .avatar { background: #654dcc; border-radius: 50%; height: 44px; object-fit: cover; width: 44px; }
+  :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: 17px; line-height: 1.3; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .status { color: rgba(255,255,255,.62); font-size: 13px; margin: 3px 0 0; }
-  .messages { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 20px; }
-  .empty { align-items: center; color: rgba(255,255,255,.7); display: flex; flex: 1; justify-content: center; min-height: 240px; text-align: center; }
-  .message { border-radius: 14px; line-height: 1.45; max-width: 82%; overflow-wrap: anywhere; padding: 10px 14px; white-space: pre-wrap; }
-  .message.user { align-self: flex-end; background: #654dcc; }
-  .message.character { align-self: flex-start; background: rgba(255,255,255,.09); }
-  .error { color: #ff9e9e; font-size: 13px; margin: 0; padding: 0 20px 12px; }
-  form { border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 10px; padding: 16px; }
-  input { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; color: #fff; flex: 1; font: inherit; min-width: 0; outline: none; padding: 11px 13px; }
-  input:focus { border-color: #8d7ae4; }
-  button { background: #654dcc; border: 0; border-radius: 12px; color: #fff; cursor: pointer; font: inherit; font-weight: 600; padding: 10px 16px; }
-  button:disabled { cursor: default; opacity: .45; }
+  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) {
@@ -54,6 +153,12 @@ function errorText(error) {
         ? 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);
@@ -65,6 +170,11 @@ export class ConvaiChatElement extends HTMLElement {
         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)
@@ -96,14 +206,24 @@ export class ConvaiChatElement extends HTMLElement {
             <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 class="empty">Preparing a private session…</div></div>
+        <div class="messages" aria-live="polite"></div>
         <p class="error" role="alert" hidden></p>
-        <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" disabled>Send</button>
-        </form>
+        <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");
@@ -128,23 +248,49 @@ export class ConvaiChatElement extends HTMLElement {
         });
         root.querySelector(".interrupt")?.addEventListener("click", () => {
             this.client?.sendInterruptMessage();
-            this.setResponseActive(false);
+            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;
-        await this.cleanupClient();
-        if (controller.signal.aborted || this.controller !== controller || !this.mounted)
-            return;
+        // 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();
@@ -157,6 +303,7 @@ export class ConvaiChatElement extends HTMLElement {
                 return;
             this.descriptor = descriptor;
             this.renderDescriptor();
+            this.renderMessages();
             const client = new ConvaiClient();
             this.client = client;
             this.unsubs = [
@@ -165,8 +312,14 @@ export class ConvaiChatElement extends HTMLElement {
                     this.renderMessages();
                 }),
                 client.on("stateChange", (state) => {
-                    this.setResponseActive(state.isThinking || state.isSpeaking);
+                    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");
@@ -174,6 +327,7 @@ export class ConvaiChatElement extends HTMLElement {
                     this.dispatch("convai-ready");
                 }),
                 client.on("disconnect", () => {
+                    this.endSession();
                     this.setStatus("Session ended");
                     this.updateControls(false);
                     this.showRetry();
@@ -185,8 +339,16 @@ export class ConvaiChatElement extends HTMLElement {
                     }
                 }),
             ];
+            // 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…");
         }
@@ -201,6 +363,9 @@ export class ConvaiChatElement extends HTMLElement {
             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);
@@ -209,46 +374,195 @@ export class ConvaiChatElement extends HTMLElement {
         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 || !this.descriptor)
+        if (!root)
             return;
         const title = root.querySelector("h2");
         if (title)
-            title.textContent = this.descriptor.display_name;
-        const avatar = root.querySelector(".avatar");
-        if (avatar && this.descriptor.image_url) {
-            avatar.src = this.descriptor.image_url;
-            avatar.alt = this.descriptor.display_name;
-            avatar.hidden = false;
+            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.messages.filter((message) => VISIBLE_MESSAGE_TYPES.has(message.type) && Boolean(message.content?.trim()));
+        const visible = this.visibleMessages();
+        const awaiting = this.isAwaitingReply();
         if (visible.length === 0) {
-            const empty = document.createElement("div");
-            empty.className = "empty";
-            empty.textContent = this.descriptor?.description || "Start a new private conversation.";
-            container.appendChild(empty);
+            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 item = document.createElement("div");
-            item.className = `message ${message.type.startsWith("user") ? "user" : "character"}`;
-            item.textContent = message.content;
-            container.appendChild(item);
+            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");
@@ -262,31 +576,96 @@ export class ConvaiChatElement extends HTMLElement {
         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 ? "Type a message…" : "Preparing chat…";
+            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;
     }
-    setResponseActive(active) {
+    /** Shows or hides Stop. The typing indicator no longer rides on this. */
+    setResponding(responding) {
         const interrupt = this.shadowRoot?.querySelector(".interrupt");
         if (interrupt)
-            interrupt.hidden = !active;
+            interrupt.hidden = !responding;
     }
-    showRetry() {
-        const messages = this.shadowRoot?.querySelector(".messages");
-        if (!messages || messages.querySelector(".retry"))
+    /** 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 });
-        messages.appendChild(retry);
+        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 }));