@usereq/widget 0.2.19 → 0.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usereq/widget",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/custom-element/agent-widget-element.tsx

@@ -68,6 +68,12 @@ export class AgentWidgetElement extends HTMLElement {
   private confirmationVersion = 0;
   private bootstrapPhase: "idle" | "booting" | "ready" | "blocked" = "idle";
   private autoStartTriggered = false;
+  // Back-to-back send support. The composer stays enabled while the agent
+  // is replying; new submissions land here and are drained sequentially by
+  // `sendMessage`. Each entry carries the optimistic bubble id so failures
+  // can yank exactly the right row.
+  private pendingQueue: Array<{ content: string; optimisticId: string }> = [];
+  private draining = false;
 
   constructor() {
     super();
@@ -207,6 +213,10 @@ export class AgentWidgetElement extends HTMLElement {
     this.welcomeMessage = null;
     this.errorMessage = null;
     this.status = "idle";
+    // Bumping sendVersion above invalidates the in-flight drain; reset
+    // the queue + flag so the next session starts fresh.
+    this.pendingQueue = [];
+    this.draining = false;
   }
 
   private renderWidget() {
@@ -278,8 +288,10 @@ export class AgentWidgetElement extends HTMLElement {
           this.sessionState?.conversationId != null
             ? () => void this.handleStopConversation()
             : undefined,
-        sendDisabled:
-          this.status === "sending" || !this.sessionState?.conversationId,
+        // Allow the user to keep typing while the agent is mid-reply —
+        // submissions queue inside `sendMessage` and drain sequentially.
+        // Only block when there's no conversation to send to yet.
+        sendDisabled: !this.sessionState?.conversationId,
         onOpenChange: (nextOpen: boolean) => void this.handleOpenChange(nextOpen),
         onSendMessage: (content: string) => void this.sendMessage(content),
         onConfirmationDecision: (confirmationId: string, accepted: boolean) =>
@@ -374,12 +386,22 @@ export class AgentWidgetElement extends HTMLElement {
     return this.bootstrapPromise;
   }
 
+  /**
+   * Entry point for user-typed sends. Drops the optimistic bubble in
+   * immediately so the user sees their own backlog, then either kicks off
+   * the drain loop (if idle) or appends to `pendingQueue` (if a prior send
+   * is still mid-stream). The drain loop runs at most one POST in flight
+   * at a time — the server-side session memory expects sequential turns,
+   * and the AI engineer confirmed parallel requests are *possible* but
+   * the answers would interleave out-of-order on the wire.
+   */
   private async sendMessage(content: string) {
     const trimmedContent = content.trim();
     if (!trimmedContent || !this.sessionState?.conversationId) return;
 
-    const runVersion = ++this.sendVersion;
-    const optimisticMessageId = `optimistic:${Date.now()}`;
+    const optimisticMessageId = `optimistic:${Date.now()}:${Math.random()
+      .toString(36)
+      .slice(2, 8)}`;
     const optimisticMessage: WidgetMessage = {
       id: optimisticMessageId,
       conversationId: this.sessionState.conversationId,
@@ -388,19 +410,74 @@ export class AgentWidgetElement extends HTMLElement {
       createdAt: new Date().toISOString(),
     };
 
-    this.status = "sending";
     this.errorMessage = null;
     this.messages = [...this.messages, optimisticMessage];
     this.renderWidget();
 
+    // Drain already running → just join the queue. The drainer will
+    // consume this entry as soon as the in-flight POST + reveal settle.
+    if (this.draining) {
+      this.pendingQueue.push({
+        content: trimmedContent,
+        optimisticId: optimisticMessageId,
+      });
+      return;
+    }
+
+    this.draining = true;
+    this.status = "sending";
+    this.renderWidget();
+
+    const runVersion = this.sendVersion;
+    let succeeded = true;
+
+    try {
+      await this.processSend(trimmedContent, optimisticMessageId, runVersion);
+      while (this.pendingQueue.length > 0 && runVersion === this.sendVersion) {
+        const next = this.pendingQueue.shift()!;
+        await this.processSend(next.content, next.optimisticId, runVersion);
+      }
+    } catch {
+      succeeded = false;
+      if (runVersion === this.sendVersion) {
+        // Drop the rest of the backlog — each queued message expects the
+        // server to have already consumed the prior turn, which didn't
+        // happen. Leaving them queued would silently fire mid-failure.
+        const failedIds = new Set(
+          this.pendingQueue.map((entry) => entry.optimisticId),
+        );
+        this.pendingQueue = [];
+        this.messages = this.messages.filter((m) => !failedIds.has(m.id));
+        // `processSend` already set status="error" + errorMessage; render
+        // once more so the cleared queue is visible.
+        this.renderWidget();
+      }
+    } finally {
+      this.draining = false;
+      if (succeeded && runVersion === this.sendVersion) {
+        this.status = "ready";
+        this.renderWidget();
+      }
+    }
+  }
+
+  /**
+   * One round-trip: POST → swap optimistic → stagger assistant reveal.
+   * Throws on failure so the outer drainer can clear the backlog. The
+   * `runVersion` guard short-circuits late state writes if a hard reset
+   * (agent-id change, conversation reset) bumped `sendVersion` mid-drain.
+   */
+  private async processSend(
+    content: string,
+    optimisticId: string,
+    runVersion: number,
+  ) {
     try {
       const result = await submitWidgetMessage({
         agentId: this.agentId,
-        content: trimmedContent,
+        content,
       });
-      if (runVersion !== this.sendVersion) {
-        return;
-      }
+      if (runVersion !== this.sendVersion) return;
       this.sessionState = result.session;
 
       const revealSteps = buildAssistantMessageRevealSteps(
@@ -418,10 +495,10 @@ export class AgentWidgetElement extends HTMLElement {
       );
 
       for (const step of revealSteps) {
-        await new Promise((resolve) => window.setTimeout(resolve, step.delayMs));
-        if (runVersion !== this.sendVersion) {
-          return;
-        }
+        await new Promise((resolve) =>
+          window.setTimeout(resolve, step.delayMs),
+        );
+        if (runVersion !== this.sendVersion) return;
         const dto = step.message;
         this.messages = [
           ...this.messages,
@@ -435,22 +512,17 @@ export class AgentWidgetElement extends HTMLElement {
         ];
         this.renderWidget();
       }
-
-      if (runVersion === this.sendVersion) {
-        this.status = "ready";
-        this.renderWidget();
-      }
     } catch (error) {
       if (runVersion !== this.sendVersion) {
+        // The hard reset path already cleared state — swallow.
         return;
       }
-      this.messages = this.messages.filter(
-        (message) => message.id !== optimisticMessageId,
-      );
+      this.messages = this.messages.filter((m) => m.id !== optimisticId);
       this.status = "error";
       this.errorMessage =
         error instanceof Error ? error.message : "Failed to send message";
       this.renderWidget();
+      throw error;
     }
   }
 

package/src/shared/shadow-theme.ts

@@ -5,20 +5,32 @@ export const WIDGET_SHADOW_THEME_CSS = `
    * Anchor inherited typography to the design system.
    *
    * Shadow DOM isolates SELECTORS but NOT inherited properties — the
-   * <usereq-agent-widget> custom element inherits color / font-family /
-   * font-size / line-height from the host page's <body>, and form
-   * controls inside (textarea, input, button) re-inherit via Tailwind's
-   * preflight rule \`color: inherit\`. If the host page sets
-   * \`body { color: #fff }\` the widget's textarea becomes invisible.
+   * <usereq-agent-widget> custom element inherits a long list of text
+   * properties from the host page's <body>, and form controls inside
+   * (textarea, input, button) re-inherit via Tailwind's preflight rule
+   * \`color: inherit\`. Host pages set things like:
    *
-   * Setting these here makes :host the canonical source so every
-   * descendant inside the shadow tree uses our tokens regardless of
-   * what the host page is doing.
+   *   body { color: #fff; }                 → textarea text invisible
+   *   body { text-align: center; }          → every message bubble centered
+   *   body { font-family: cursive; }        → widget renders in cursive
+   *   body { text-transform: uppercase; }   → ALL CAPS UI
+   *
+   * Setting these on :host makes the widget the canonical source so
+   * every descendant inside the shadow tree uses our tokens regardless
+   * of what the host page is doing. Each line below addresses a
+   * commonly-reported customer bleed.
    */
   color: var(--foreground);
   font-family: var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
   line-height: 1.5;
+  text-align: left;
+  text-decoration: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-spacing: normal;
   --tw-border-style: solid;
   --radius: 0.625rem;
   --font-geist-sans: Geist, sans-serif;