@usereq/widget 0.2.24 → 1.0.0-experimental.0

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

@@ -1,676 +0,0 @@
-import React from "react";
-import { createRoot, type Root } from "react-dom/client";
-import {
-  DEFAULT_WIDGET_APPEARANCE,
-  DEFAULT_WIDGET_PRESET,
-  normalizeWidgetPlacement,
-  normalizeWidgetPreset,
-  normalizeWidgetVariant,
-  type WidgetAppearance,
-  type WidgetMessage,
-  type WidgetPlacement,
-  type WidgetPreset,
-  type WidgetSessionConfig,
-  type WidgetSessionState,
-  type WidgetVariant,
-} from "../types";
-import {
-  normalizeWidgetMobileHeight,
-  widgetTriggerRuleKey,
-} from "../shared/widget-config";
-import { WidgetRuntime, type WidgetRuntimeStatus } from "../renderer/index";
-import { buildAssistantMessageRevealSteps } from "../chat-widget/message-reveal";
-import { DEFAULT_STOP_CONVERSATION_PROMPT } from "../shared/stop-confirmation";
-import {
-  bootstrapWidget,
-  resetWidgetSession,
-  submitWidgetStopConfirmation,
-  submitWidgetMessage,
-} from "../runtime/bootstrap";
-import { getWidgetShadowCss } from "../shared/shadow-css";
-import { WIDGET_SHADOW_THEME_CSS } from "../shared/shadow-theme";
-
-type WidgetAppearanceAttributes = Partial<WidgetAppearance>;
-
-export class AgentWidgetElement extends HTMLElement {
-  static observedAttributes = [
-    "agent-id",
-    "mode",
-    "variant",
-    "preset",
-    "placement",
-    "avatar-orb-color-1",
-    "avatar-orb-color-2",
-    "action-text",
-  ];
-
-  private shadowRootRef: ShadowRoot;
-  private hostStyleElement: HTMLStyleElement;
-  private shadowStyleElement: HTMLStyleElement;
-  private mountElement: HTMLDivElement;
-  private root: Root;
-  private agentId = "";
-  private mode: "embed" | "preview" = "embed";
-  private variant: string | null = null;
-  private preset: string | null = null;
-  private placement: string | null = null;
-  private appearanceAttributes: WidgetAppearanceAttributes = {};
-  private open = false;
-  private status: WidgetRuntimeStatus = "idle";
-  private sessionConfig: WidgetSessionConfig | null = null;
-  private sessionState: WidgetSessionState | null = null;
-  private messages: WidgetMessage[] = [];
-  private widgetTitle = "Assistant";
-  private welcomeMessage: string | null = null;
-  private errorMessage: string | null = null;
-  private bootstrapPromise: Promise<void> | null = null;
-  private bootstrapVersion = 0;
-  private sendVersion = 0;
-  private confirmationVersion = 0;
-  private bootstrapPhase: "idle" | "booting" | "ready" | "blocked" = "idle";
-  // 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();
-    this.shadowRootRef = this.attachShadow({ mode: "open" });
-    this.hostStyleElement = document.createElement("style");
-    this.hostStyleElement.textContent = `
-      ${WIDGET_SHADOW_THEME_CSS}
-
-      :host {
-        display: block;
-        box-sizing: border-box;
-        width: 100%;
-      }
-
-      :host([mode="preview"]) {
-        position: relative;
-        min-height: 720px;
-      }
-    `;
-    this.shadowStyleElement = document.createElement("style");
-    this.shadowStyleElement.textContent = getWidgetShadowCss() ?? "";
-    this.mountElement = document.createElement("div");
-    this.mountElement.style.display = "block";
-    this.mountElement.style.width = "100%";
-    this.mountElement.style.height = "100%";
-    this.shadowRootRef.append(
-      this.hostStyleElement,
-      this.shadowStyleElement,
-      this.mountElement,
-    );
-    this.root = createRoot(this.mountElement);
-  }
-
-  connectedCallback() {
-    this.syncAttributes();
-    this.renderWidget();
-    if (this.agentId) {
-      void this.ensureBootstrap();
-    }
-  }
-
-  disconnectedCallback() {
-    this.bootstrapPromise = null;
-    this.root.unmount();
-  }
-
-  attributeChangedCallback(
-    name?: string,
-    oldValue?: string | null,
-    newValue?: string | null,
-  ) {
-    this.syncAttributes();
-    if (name === "agent-id" && oldValue !== newValue) {
-      this.clearAgentState();
-    }
-    this.renderWidget();
-    if (name === "agent-id" && this.agentId) {
-      void this.ensureBootstrap();
-    }
-  }
-
-  private syncAttributes() {
-    this.agentId = this.getAttribute("agent-id")?.trim() ?? "";
-    this.mode = normalizeWidgetMode(this.getAttribute("mode"));
-    this.variant = this.getAttribute("variant");
-    this.preset = this.getAttribute("preset");
-    this.placement = this.getAttribute("placement");
-    this.appearanceAttributes = parseAppearanceAttributes(this);
-  }
-
-  private getResolvedPlacement(): WidgetPlacement {
-    return normalizeWidgetPlacement(
-      this.placement ?? this.sessionConfig?.widgetConfig.widgetPlacement ?? "bottom-right",
-    );
-  }
-
-  private getResolvedVariant(): WidgetVariant {
-    return normalizeWidgetVariant(
-      this.variant ?? this.sessionConfig?.widgetConfig.widgetVariant ?? "chatbar",
-    );
-  }
-
-  private getResolvedPreset(): WidgetPreset {
-    return normalizeWidgetPreset(
-      this.preset ??
-        this.sessionConfig?.widgetConfig.widgetPreset ??
-        DEFAULT_WIDGET_PRESET,
-    );
-  }
-
-  private getResolvedAppearance(): WidgetAppearance {
-    const base =
-      this.sessionConfig?.widgetConfig.widgetAppearance ?? DEFAULT_WIDGET_APPEARANCE;
-
-    return {
-      avatarOrbColor1:
-        this.appearanceAttributes.avatarOrbColor1?.trim() ||
-        base.avatarOrbColor1,
-      avatarOrbColor2:
-        this.appearanceAttributes.avatarOrbColor2?.trim() ||
-        base.avatarOrbColor2,
-      actionText:
-        this.appearanceAttributes.actionText?.trim() || base.actionText,
-    };
-  }
-
-  private getWidgetTitle(): string {
-    return this.sessionConfig?.widgetConfig.name ?? this.widgetTitle;
-  }
-
-  private getAgentAvatarUrl(): string | null {
-    return this.sessionConfig?.widgetConfig.agentAvatarUrl ?? null;
-  }
-
-  private getWelcomeMessage(): string | null {
-    return this.sessionConfig?.widgetConfig.welcomeMessage ?? this.welcomeMessage;
-  }
-
-  private getSpotlights(): string[] {
-    return this.sessionConfig?.widgetConfig.spotlightMessages ?? [];
-  }
-
-  private getCtaLink(): string | null {
-    return this.sessionConfig?.widgetConfig.ctaLink ?? null;
-  }
-
-  private clearAgentState() {
-    this.sendVersion += 1;
-    this.confirmationVersion += 1;
-    this.bootstrapVersion += 1;
-    this.bootstrapPhase = "idle";
-    this.bootstrapPromise = null;
-    this.sessionConfig = null;
-    this.sessionState = null;
-    this.messages = [];
-    this.widgetTitle = "Assistant";
-    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() {
-    if (
-      this.bootstrapPhase !== "ready" ||
-      this.sessionConfig == null ||
-      this.sessionState == null
-    ) {
-      this.root.render(null);
-      return;
-    }
-
-    const appearance = this.getResolvedAppearance();
-    const placement = this.getResolvedPlacement();
-    const variant = this.getResolvedVariant();
-    const preset = this.getResolvedPreset();
-    const behavior = this.sessionConfig?.widgetConfig.widgetBehavior;
-    const alwaysOpen = behavior?.alwaysOpen === true;
-
-    this.root.render(
-      React.createElement(WidgetRuntime, {
-        key: `${this.agentId}:${widgetTriggerRuleKey(
-          this.sessionConfig?.widgetConfig.triggerRule,
-        )}`,
-        mode: this.mode,
-        agentId: this.agentId,
-        variant,
-        preset,
-        placement,
-        appearance,
-        agentAvatarUrl: this.getAgentAvatarUrl(),
-        widgetTitle: this.getWidgetTitle(),
-        welcomeMessage: this.getWelcomeMessage(),
-        spotlights: this.getSpotlights(),
-        ctaLink: this.getCtaLink(),
-        mobileHeight: normalizeWidgetMobileHeight(
-          this.sessionConfig?.widgetConfig.mobileHeight,
-        ),
-        open: this.open,
-        alwaysOpen,
-        status: this.status,
-        messages: this.messages,
-        errorMessage: this.errorMessage,
-        triggerRule: this.sessionConfig?.widgetConfig.triggerRule ?? null,
-        // Lazy session: no "Start a chat" gate. The composer is live from
-        // the moment the panel opens; the conversation is created on the
-        // server the first time the user actually sends something.
-        emptyAction: undefined,
-        onStopConversation:
-          this.sessionState?.conversationId != null
-            ? () => void this.handleStopConversation()
-            : undefined,
-        onOpenChange: (nextOpen: boolean) => void this.handleOpenChange(nextOpen),
-        onSendMessage: (content: string) => void this.sendMessage(content),
-        onConfirmationDecision: (confirmationId: string, accepted: boolean) =>
-          void this.handleConfirmationDecision(confirmationId, accepted),
-        // Portal directly into the shadow root — matches the legacy
-        // `agents-monorepo` widget exactly. ShadowRoot is a DocumentFragment,
-        // which Radix Dialog accepts as `container`. The earlier `portalElement`
-        // wrapper added a `pointer-events: none` ancestor that interfered with
-        // the Dialog overlay/content's own event handling.
-        portalContainer: this.shadowRootRef,
-      }),
-    );
-  }
-
-  private async ensureBootstrap() {
-    if (this.bootstrapPromise) {
-      return this.bootstrapPromise;
-    }
-
-    const runVersion = ++this.bootstrapVersion;
-    this.bootstrapPromise = (async () => {
-      if (!this.agentId) {
-        this.status = "error";
-        this.errorMessage = "Missing agent id";
-        this.renderWidget();
-      return;
-    }
-
-      this.bootstrapPhase = "booting";
-      this.status = "booting";
-      this.errorMessage = null;
-      this.renderWidget();
-
-      try {
-        const state = await bootstrapWidget({
-          agentId: this.agentId,
-          pageUrl: window.location.href,
-          referrer: document.referrer || undefined,
-        });
-
-        if (runVersion !== this.bootstrapVersion) {
-          return;
-        }
-
-        this.sessionConfig = {
-          sessionToken: state.session.sessionToken,
-          expiresAt: state.session.expiresAt,
-          widgetConfig: state.session.widgetConfig,
-        };
-        this.sessionState = state.session;
-        this.messages = state.messages;
-        this.widgetTitle = state.session.widgetConfig.name;
-        this.welcomeMessage = state.session.widgetConfig.welcomeMessage;
-        this.status = "ready";
-        this.bootstrapPhase = "ready";
-        // Lazy session: when the visitor doesn't already have a running
-        // conversation, seed a client-side welcome bubble from the boot
-        // config so the panel doesn't open on a blank empty state. The
-        // real conversation is only created server-side once they type.
-        this.seedClientWelcomeIfNeeded();
-        // Apply the agent's configured open-state on mount. `alwaysOpen`
-        // wins (the panel is pinned regardless), and `defaultOpen` opens it
-        // once if the visitor hasn't already interacted with the launcher.
-        const behavior = state.session.widgetConfig.widgetBehavior;
-        if (behavior?.alwaysOpen || behavior?.defaultOpen) {
-          this.open = true;
-        }
-        this.renderWidget();
-      } catch (error) {
-        if (runVersion !== this.bootstrapVersion) {
-          return;
-        }
-
-        this.status = "error";
-        this.bootstrapPhase = "blocked";
-        this.errorMessage =
-          error instanceof Error ? error.message : "Failed to start widget";
-        this.renderWidget();
-      }
-    })().finally(() => {
-      if (runVersion === this.bootstrapVersion) {
-        this.bootstrapPromise = null;
-      }
-    });
-
-    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();
-    // Lazy session: no `conversationId` check here. If the visitor is
-    // sending their very first message, `submitWidgetMessage` will call
-    // POST /conversations/public/start under the hood before posting.
-    if (!trimmedContent || !this.sessionState) return;
-
-    const optimisticMessageId = `optimistic:${Date.now()}:${Math.random()
-      .toString(36)
-      .slice(2, 8)}`;
-    const optimisticMessage: WidgetMessage = {
-      id: optimisticMessageId,
-      // Empty when no conversation exists yet — the real id lands on the
-      // server row we swap in from `submitWidgetMessage`'s response.
-      conversationId: this.sessionState.conversationId ?? "",
-      role: "user",
-      content: trimmedContent,
-      createdAt: new Date().toISOString(),
-    };
-
-    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,
-      });
-      if (runVersion !== this.sendVersion) return;
-      this.sessionState = result.session;
-
-      // Lazy-start swap: when this was the first send, `submitWidgetMessage`
-      // created the conversation server-side and the server inserted its
-      // own welcome message row. Replace the placeholder client-welcome
-      // bubble with the real server row so ids/timestamps match the DB.
-      if (result.welcomeMessage) {
-        const clientWelcomeId = this.getClientWelcomeId();
-        this.messages = this.messages.map((m) =>
-          m.id === clientWelcomeId
-            ? {
-                id: result.welcomeMessage!.id,
-                conversationId: result.conversationId,
-                role: "assistant",
-                content: result.welcomeMessage!.content,
-                createdAt: result.welcomeMessage!.createdAt,
-              }
-            : m,
-        );
-        this.renderWidget();
-      }
-
-      const revealSteps = buildAssistantMessageRevealSteps(
-        result.assistantMessages.map((message) => ({
-          id: message.id,
-          content: message.content,
-          createdAt: message.createdAt,
-        })),
-        {
-          initialDelayMs: 0,
-          typingHoldMs: 1260,
-          interMessageDelayMs: 1520,
-          interMessageDelayJitterMs: 100,
-        },
-      );
-
-      for (const step of revealSteps) {
-        await new Promise((resolve) =>
-          window.setTimeout(resolve, step.delayMs),
-        );
-        if (runVersion !== this.sendVersion) return;
-        const dto = step.message;
-        this.messages = [
-          ...this.messages,
-          {
-            id: dto.id,
-            conversationId: result.conversationId,
-            role: "assistant",
-            content: dto.content,
-            createdAt: dto.createdAt,
-          },
-        ];
-        this.renderWidget();
-      }
-    } catch (error) {
-      if (runVersion !== this.sendVersion) {
-        // The hard reset path already cleared state — swallow.
-        return;
-      }
-      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;
-    }
-  }
-
-  private async handleOpenChange(nextOpen: boolean) {
-    this.open = nextOpen;
-    this.renderWidget();
-
-    if (this.open && (this.status === "idle" || !this.sessionState)) {
-      await this.ensureBootstrap();
-    }
-  }
-
-  private getClientWelcomeId(): string {
-    return `client-welcome:${this.agentId}`;
-  }
-
-  /**
-   * Lazy session seeding. When bootstrap finishes with no live conversation
-   * and no rehydrated transcript, drop a synthetic assistant bubble carrying
-   * the boot-config welcome copy into `this.messages`. Skipped when there's
-   * already a transcript (rehydrated session) or no welcome copy configured.
-   * The bubble's id is stable (`client-welcome:{agentId}`) so `processSend`
-   * can swap it for the real server row after the first successful send.
-   */
-  private seedClientWelcomeIfNeeded() {
-    if (this.messages.length > 0) return;
-    if (this.sessionState?.conversationId) return;
-    const welcome = this.getWelcomeMessage();
-    if (!welcome) return;
-    this.messages = [
-      {
-        id: this.getClientWelcomeId(),
-        conversationId: "",
-        role: "assistant",
-        content: welcome,
-        createdAt: new Date().toISOString(),
-      },
-    ];
-  }
-
-  private async handleStopConversation() {
-    if (!this.sessionState?.conversationId) {
-      return;
-    }
-
-    const confirmationId = crypto.randomUUID();
-    const runVersion = ++this.confirmationVersion;
-
-    this.status = "sending";
-    this.errorMessage = null;
-    this.renderWidget();
-
-    try {
-      const result = await submitWidgetStopConfirmation({
-        agentId: this.agentId,
-        confirmationId,
-        prompt: DEFAULT_STOP_CONVERSATION_PROMPT,
-      });
-
-      if (runVersion !== this.confirmationVersion) {
-        return;
-      }
-
-      this.sessionState = result.session;
-      this.messages = [...this.messages, result.confirmationMessage];
-      this.status = "ready";
-      this.renderWidget();
-    } catch (error) {
-      if (runVersion !== this.confirmationVersion) {
-        return;
-      }
-      this.status = "error";
-      this.errorMessage =
-        error instanceof Error ? error.message : "Failed to stop conversation";
-      this.renderWidget();
-    }
-  }
-
-  private async handleConfirmationDecision(
-    confirmationId: string,
-    accepted: boolean,
-  ) {
-    if (!this.sessionState?.conversationId) {
-      return;
-    }
-
-    const runVersion = ++this.confirmationVersion;
-    this.status = "sending";
-    this.errorMessage = null;
-    this.renderWidget();
-
-    try {
-      const result = await submitWidgetStopConfirmation({
-        agentId: this.agentId,
-        confirmationId,
-        decision: accepted ? "accepted" : "rejected",
-      });
-
-      if (runVersion !== this.confirmationVersion) {
-        return;
-      }
-
-      this.sessionState = result.session;
-      this.messages = [...this.messages, result.confirmationMessage];
-      this.renderWidget();
-
-      if (accepted) {
-        window.setTimeout(() => {
-          if (runVersion !== this.confirmationVersion) {
-            return;
-          }
-          void this.handleReset();
-        }, 0);
-      } else {
-        this.status = "ready";
-        this.renderWidget();
-      }
-    } catch (error) {
-      if (runVersion !== this.confirmationVersion) {
-        return;
-      }
-      this.status = "error";
-      this.errorMessage =
-        error instanceof Error ? error.message : "Failed to update confirmation";
-      this.renderWidget();
-    }
-  }
-
-  private handleReset = async () => {
-    this.sendVersion += 1;
-    await resetWidgetSession(this.agentId);
-    this.clearAgentState();
-    this.open = true;
-    this.renderWidget();
-    await this.ensureBootstrap();
-  };
-}
-
-function parseAppearanceAttributes(
-  element: HTMLElement,
-): WidgetAppearanceAttributes {
-  const avatarOrbColor1 = element.getAttribute("avatar-orb-color-1");
-  const avatarOrbColor2 = element.getAttribute("avatar-orb-color-2");
-  const actionText = element.getAttribute("action-text");
-
-  return {
-    avatarOrbColor1: avatarOrbColor1?.trim() || undefined,
-    avatarOrbColor2: avatarOrbColor2?.trim() || undefined,
-    actionText: actionText?.trim() || undefined,
-  };
-}
-
-function normalizeWidgetMode(value: string | null): "embed" | "preview" {
-  return value === "preview" ? "preview" : "embed";
-}

package/src/embed.ts

@@ -1,8 +0,0 @@
-import widgetShadowCss from "@usereq/ui/globals.css?inline";
-import { setWidgetShadowCss } from "./shared/shadow-css";
-import { registerWidgetElement } from "./register";
-
-setWidgetShadowCss(widgetShadowCss);
-registerWidgetElement();
-
-export {};

package/src/index.ts

@@ -1,9 +0,0 @@
-export * from "./shared/widget-config";
-export * from "./renderer/index";
-export * from "./types";
-export * from "./shared/shadow-css";
-export * from "./register";
-
-import { registerWidgetElement } from "./register";
-
-registerWidgetElement();

package/src/register.ts

@@ -1,15 +0,0 @@
-import { AgentWidgetElement } from "./custom-element/agent-widget-element";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "usereq-agent-widget": AgentWidgetElement;
-  }
-}
-
-export function registerWidgetElement() {
-  if (!customElements.get("usereq-agent-widget")) {
-    customElements.define("usereq-agent-widget", AgentWidgetElement);
-  }
-}
-
-export { AgentWidgetElement };