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

package/dist/embed/ConvaiChatElement.js

@@ -6,146 +6,47 @@ 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: var(--convai-chat-font);
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   }
-  :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);
+    background: #111118;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 16px;
+    color: #fff;
     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; }
+  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; }
   .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; }
+  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; }
-  .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; }
-
+  .retry { align-self: center; margin-top: 12px; }
   @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) {
@@ -153,12 +54,6 @@ 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);
@@ -170,11 +65,6 @@ 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)
@@ -206,24 +96,14 @@ 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>
+        <div class="messages" aria-live="polite"><div class="empty">Preparing a private session…</div></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>
+        <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>
       </section>
     `;
         const input = root.querySelector("input");
@@ -248,49 +128,23 @@ export class ConvaiChatElement extends HTMLElement {
         });
         root.querySelector(".interrupt")?.addEventListener("click", () => {
             this.client?.sendInterruptMessage();
-            this.setResponding(false);
-            this.finalizeOpenTurn();
-        });
-        root.querySelector(".copy-chat")?.addEventListener("click", () => {
-            void this.copyTranscript();
+            this.setResponseActive(false);
         });
-        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.
+        await this.cleanupClient();
+        if (controller.signal.aborted || this.controller !== controller || !this.mounted)
+            return;
         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();
@@ -303,7 +157,6 @@ export class ConvaiChatElement extends HTMLElement {
                 return;
             this.descriptor = descriptor;
             this.renderDescriptor();
-            this.renderMessages();
             const client = new ConvaiClient();
             this.client = client;
             this.unsubs = [
@@ -312,14 +165,8 @@ export class ConvaiChatElement extends HTMLElement {
                     this.renderMessages();
                 }),
                 client.on("stateChange", (state) => {
-                    this.setResponding(state.isThinking || state.isSpeaking);
+                    this.setResponseActive(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");
@@ -327,7 +174,6 @@ export class ConvaiChatElement extends HTMLElement {
                     this.dispatch("convai-ready");
                 }),
                 client.on("disconnect", () => {
-                    this.endSession();
                     this.setStatus("Session ended");
                     this.updateControls(false);
                     this.showRetry();
@@ -339,16 +185,8 @@ 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…");
         }
@@ -363,9 +201,6 @@ 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);
@@ -374,195 +209,46 @@ 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)
+        if (!root || !this.descriptor)
             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;
+            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;
         }
-        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();
+        const visible = this.messages.filter((message) => VISIBLE_MESSAGE_TYPES.has(message.type) && Boolean(message.content?.trim()));
         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();
+            const empty = document.createElement("div");
+            empty.className = "empty";
+            empty.textContent = this.descriptor?.description || "Start a new private conversation.";
+            container.appendChild(empty);
             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);
+            const item = document.createElement("div");
+            item.className = `message ${message.type.startsWith("user") ? "user" : "character"}`;
+            item.textContent = message.content;
+            container.appendChild(item);
         });
-        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");
@@ -576,96 +262,31 @@ 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
-                ? `Message ${this.displayName()}…`
-                : "Preparing chat…";
+            input.placeholder = enabled ? "Type a message…" : "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) {
+    setResponseActive(active) {
         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);
+            interrupt.hidden = !active;
     }
-    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)
+    showRetry() {
+        const messages = this.shadowRoot?.querySelector(".messages");
+        if (!messages || messages.querySelector(".retry"))
             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();
+        messages.appendChild(retry);
     }
     dispatch(name, detail) {
         this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));