@usereq/widget 0.2.25 → 1.0.0-experimental.1

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 };

package/src/renderer/index.ts

@@ -1,6 +0,0 @@
-export {
-  WidgetRuntime,
-  type WidgetRuntimeMode,
-  type WidgetRuntimeProps,
-  type WidgetRuntimeStatus,
-} from "./widget-runtime";

package/src/renderer/widget-runtime.tsx

@@ -1,395 +0,0 @@
-import React from "react";
-
-import { ChatWidget } from "@usereq/ui/components/chat/widget";
-import type {
-  ChatPanelConfirmation,
-  ChatPanelMessage,
-  ChatPanelStatus,
-} from "@usereq/ui/components/chat/panel";
-import { ChatFullscreenProvider } from "@usereq/ui/hooks/use-chat-fullscreen";
-import type { ChatAppearance } from "@usereq/ui/lib/chat-appearance";
-import type { ChatWidgetConfig } from "@usereq/ui/lib/chat-widget-config";
-
-import type { WidgetMessage } from "../types";
-import {
-  splitWidgetPlacement,
-  type WidgetAppearance,
-  type WidgetMobileHeight,
-  type WidgetPlacement,
-  type WidgetPreset,
-  type WidgetVariant,
-  type WidgetTriggerRule,
-} from "../shared/widget-config";
-import {
-  getPendingStopConfirmationId,
-  parseStopConfirmationEnvelope,
-  DEFAULT_STOP_CONVERSATION_PROMPT,
-  STOP_CONFIRMATION_KIND,
-} from "../shared/stop-confirmation";
-import { widgetCss } from "../styles/widget.css";
-import { useWidgetTriggerGate } from "../runtime/trigger-rule";
-
-export type WidgetRuntimeMode = "embed" | "preview";
-
-export type WidgetRuntimeStatus =
-  | "idle"
-  | "booting"
-  | "ready"
-  | "sending"
-  | "error";
-
-export type WidgetRuntimeProps = {
-  mode: WidgetRuntimeMode;
-  agentId: string;
-  variant: WidgetVariant;
-  preset?: WidgetPreset;
-  placement: WidgetPlacement;
-  appearance: WidgetAppearance;
-  agentAvatarUrl: string | null;
-  widgetTitle: string;
-  welcomeMessage: string | null;
-  spotlights: string[];
-  ctaLink?: string | null;
-  /**
-   * How much of the screen the open panel covers on mobile. Ignored on
-   * desktop, where the panel floats above the launcher regardless.
-   */
-  mobileHeight?: WidgetMobileHeight;
-  open: boolean;
-  /**
-   * When true, the embedded panel is pinned open and the launcher is hidden.
-   * Mirrors `WidgetBehavior.alwaysOpen` and short-circuits the trigger-rule
-   * gate (a pinned widget has no "open" event to trigger on).
-   */
-  alwaysOpen?: boolean;
-  status: WidgetRuntimeStatus;
-  messages: WidgetMessage[];
-  errorMessage: string | null;
-  triggerRule?: WidgetTriggerRule | null;
-  emptyAction?: { label: string; onClick: () => void; disabled?: boolean };
-  sendDisabled?: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSendMessage: (content: string) => void;
-  onStopConversation?: () => void;
-  onConfirmationDecision?: (
-    confirmationId: string,
-    accepted: boolean,
-  ) => void | Promise<void>;
-  portalContainer?: HTMLElement | DocumentFragment | null;
-  onLauncherClick?: () => void;
-};
-
-const RUNTIME_TO_PANEL_STATUS: Record<WidgetRuntimeStatus, ChatPanelStatus> = {
-  idle: "idle",
-  booting: "booting",
-  ready: "idle",
-  sending: "sending",
-  error: "error",
-};
-
-export function WidgetRuntime({
-  mode,
-  agentId,
-  variant,
-  preset = "default",
-  placement,
-  appearance,
-  agentAvatarUrl,
-  widgetTitle,
-  welcomeMessage,
-  spotlights,
-  ctaLink,
-  mobileHeight = "full",
-  open,
-  alwaysOpen = false,
-  status,
-  messages,
-  errorMessage,
-  triggerRule,
-  emptyAction,
-  sendDisabled = false,
-  onOpenChange,
-  onSendMessage,
-  onStopConversation,
-  onConfirmationDecision,
-  portalContainer,
-  onLauncherClick,
-}: WidgetRuntimeProps) {
-  // Always-open widgets bypass the trigger-rule gate — the panel renders
-  // unconditionally, so any "open on X seconds / on scroll / on click"
-  // configuration would be meaningless. Pass `null` to short-circuit it.
-  const { ready } = useWidgetTriggerGate(alwaysOpen ? null : triggerRule);
-  const { horizontal, vertical } = splitWidgetPlacement(placement);
-
-  const { panelMessages, confirmation } = React.useMemo(
-    () => splitConfirmationFromMessages(messages, onConfirmationDecision),
-    [messages, onConfirmationDecision],
-  );
-
-  const pendingConfirmationId = React.useMemo(
-    () => getPendingStopConfirmationId(messages),
-    [messages],
-  );
-  const confirmationPending = pendingConfirmationId != null;
-  const stopDisabled =
-    confirmationPending || status === "booting" || status === "sending";
-  const isSendDisabled =
-    sendDisabled || confirmationPending || status === "booting";
-
-  const chatConfig = React.useMemo<ChatWidgetConfig>(
-    () => ({
-      agentName: widgetTitle,
-      agentAvatarUrl,
-      variant: mapVariant(variant),
-      preset: mapPreset(preset),
-      placement,
-      appearance: toChatAppearance(appearance),
-      welcomeMessage,
-      spotlights,
-      ctaLink,
-      actionLabel: appearance.actionText || undefined,
-      showStopConversation: Boolean(onStopConversation),
-      mobileHeight,
-    }),
-    [
-      agentAvatarUrl,
-      appearance,
-      ctaLink,
-      mobileHeight,
-      onStopConversation,
-      placement,
-      preset,
-      spotlights,
-      variant,
-      welcomeMessage,
-      widgetTitle,
-    ],
-  );
-
-  const handleSend = React.useCallback(
-    (value: string) => {
-      const trimmed = value.trim();
-      if (!trimmed || isSendDisabled) return;
-      onSendMessage(trimmed);
-    },
-    [isSendDisabled, onSendMessage],
-  );
-
-  const handleStop = React.useCallback(() => {
-    if (stopDisabled) return;
-    onStopConversation?.();
-  }, [onStopConversation, stopDisabled]);
-
-  const wrappedEmptyAction = React.useMemo(
-    () =>
-      emptyAction
-        ? {
-            label: emptyAction.label,
-            disabled: emptyAction.disabled,
-            onClick: emptyAction.onClick,
-          }
-        : undefined,
-    [emptyAction],
-  );
-
-  if (!ready) {
-    return null;
-  }
-
-  const shellStyle = getWidgetShellStyle(mode, placement);
-  // Accept both HTMLElement (e.g. playground stage div) and DocumentFragment
-  // (e.g. the widget custom element's ShadowRoot). Radix Dialog handles both
-  // as portal containers.
-  const portalEl: HTMLElement | DocumentFragment | null =
-    portalContainer instanceof HTMLElement ||
-    portalContainer instanceof DocumentFragment
-      ? portalContainer
-      : null;
-
-  return (
-    <>
-      <style>{widgetCss}</style>
-      <div
-        data-agent-id={agentId}
-        data-mode={mode}
-        data-horizontal={horizontal}
-        data-vertical={vertical}
-        data-variant={variant}
-        data-preset={preset}
-        data-open={String(open)}
-        data-status={status}
-        style={shellStyle}
-        className="widget-shell"
-      >
-        <div style={{ pointerEvents: "auto" }}>
-          <ChatFullscreenProvider>
-            <ChatWidget
-              config={chatConfig}
-              messages={panelMessages}
-              status={RUNTIME_TO_PANEL_STATUS[status]}
-              errorMessage={errorMessage}
-              open={open}
-              alwaysOpen={alwaysOpen}
-              onOpenChange={onOpenChange}
-              onSendMessage={handleSend}
-              onStopConversation={
-                onStopConversation ? handleStop : undefined
-              }
-              onLauncherClick={onLauncherClick}
-              emptyAction={wrappedEmptyAction}
-              confirmation={confirmation}
-              portalContainer={portalEl}
-            />
-          </ChatFullscreenProvider>
-        </div>
-      </div>
-    </>
-  );
-}
-
-function mapVariant(variant: WidgetVariant): ChatWidgetConfig["variant"] {
-  return variant;
-}
-
-function mapPreset(preset: WidgetPreset): ChatWidgetConfig["preset"] {
-  return preset;
-}
-
-/**
- * `WidgetAppearance` mirrors `ChatAppearance` field-for-field (see
- * `chat-widget/chat-widget-appearance.ts` for why it's declared separately),
- * so this is a structural pass-through rather than a field-by-field copy.
- *
- * It used to rebuild a three-key object, which meant that even once the API
- * started sending the full theme, the surface and brand tokens were dropped
- * again right here — one strip point behind the other.
- */
-function toChatAppearance(appearance: WidgetAppearance): ChatAppearance {
-  // Deliberately NOT a cast. Returning the value unasserted makes the
-  // compiler verify that `WidgetAppearance` is still structurally
-  // assignable to `ChatAppearance` — so if the two ever drift (a token
-  // added to one and not the other), this fails typecheck instead of
-  // silently dropping the field the way the old field-by-field copy did.
-  return appearance;
-}
-
-function isHtmlElement(
-  node: HTMLElement | DocumentFragment | null | undefined,
-): node is HTMLElement {
-  return (
-    node != null && typeof node === "object" && "tagName" in (node as object)
-  );
-}
-
-/**
- * Walks the message stream once: peels off stop-confirmation envelopes (they
- * become the `confirmation` slot of ChatWidget) and leaves plain assistant /
- * user messages in place. Only the latest *pending* confirmation surfaces —
- * accepted/rejected envelopes are dropped because the runtime resets the
- * session right after acceptance.
- */
-function splitConfirmationFromMessages(
-  messages: WidgetMessage[],
-  onConfirmationDecision:
-    | ((id: string, accepted: boolean) => void | Promise<void>)
-    | undefined,
-): {
-  panelMessages: ChatPanelMessage[];
-  confirmation: ChatPanelConfirmation | null;
-} {
-  const panelMessages: ChatPanelMessage[] = [];
-  let confirmation: ChatPanelConfirmation | null = null;
-
-  for (const message of messages) {
-    const envelope = parseStopConfirmationEnvelope(message.content);
-    if (!envelope) {
-      panelMessages.push({
-        id: message.id,
-        role: message.role,
-        content: message.content,
-      });
-      continue;
-    }
-    if (envelope.kind !== STOP_CONFIRMATION_KIND) continue;
-    if (envelope.state !== "pending") continue;
-    confirmation = {
-      id: envelope.confirmationId,
-      prompt: envelope.prompt || DEFAULT_STOP_CONVERSATION_PROMPT,
-      state: "pending",
-      onDecision: onConfirmationDecision
-        ? (decision) =>
-            void onConfirmationDecision(
-              envelope.confirmationId,
-              decision === "accept",
-            )
-        : undefined,
-    };
-  }
-
-  return { panelMessages, confirmation };
-}
-
-function getWidgetShellStyle(
-  mode: WidgetRuntimeMode,
-  placement: WidgetPlacement,
-): React.CSSProperties {
-  const style: React.CSSProperties = {
-    pointerEvents: "none",
-  };
-
-  if (mode === "preview") {
-    const { horizontal, vertical } = splitWidgetPlacement(placement);
-    Object.assign(style, {
-      position: "relative",
-      display: "flex",
-      width: "100%",
-      minHeight: "720px",
-      padding: "24px",
-      overflow: "hidden",
-      alignItems: vertical === "top" ? "flex-start" : "flex-end",
-      justifyContent:
-        horizontal === "left"
-          ? "flex-start"
-          : horizontal === "center"
-            ? "center"
-            : "flex-end",
-    });
-    return style;
-  }
-
-  Object.assign(style, {
-    position: "fixed",
-    zIndex: 2147483646,
-  });
-
-  switch (placement) {
-    case "top-left":
-      Object.assign(style, { left: "24px", top: "24px" });
-      break;
-    case "top-center":
-      Object.assign(style, {
-        left: "50%",
-        top: "24px",
-        transform: "translateX(-50%)",
-      });
-      break;
-    case "top-right":
-      Object.assign(style, { right: "24px", top: "24px" });
-      break;
-    case "bottom-left":
-      Object.assign(style, { left: "24px", bottom: "24px" });
-      break;
-    case "bottom-center":
-      Object.assign(style, {
-        left: "50%",
-        bottom: "24px",
-        transform: "translateX(-50%)",
-      });
-      break;
-    default:
-      Object.assign(style, { right: "24px", bottom: "24px" });
-      break;
-  }
-
-  return style;
-}

package/src/runtime/api-origin.ts

@@ -1,29 +0,0 @@
-declare const __USEREQ_WIDGET_API_BASE__:
-  | string
-  | undefined;
-
-type WidgetRuntimeGlobal = typeof globalThis & {
-  __USEREQ_WIDGET_API_BASE__?: string;
-};
-
-function normalizeApiBase(value: string | undefined): string | null {
-  const trimmed = value?.trim();
-  if (!trimmed) return null;
-
-  return trimmed.replace(/\/+$/, "");
-}
-
-export function getWidgetApiBase(): string {
-  const compileTimeApiBase =
-    typeof __USEREQ_WIDGET_API_BASE__ !== "undefined"
-      ? __USEREQ_WIDGET_API_BASE__
-      : undefined;
-  const runtimeApiBase = (globalThis as WidgetRuntimeGlobal)
-    .__USEREQ_WIDGET_API_BASE__;
-
-  return (
-    normalizeApiBase(compileTimeApiBase) ??
-    normalizeApiBase(runtimeApiBase) ??
-    "http://localhost:4000"
-  );
-}

package/src/runtime/api.ts

@@ -1,123 +0,0 @@
-import type {
-  WidgetConversation,
-  WidgetMessage,
-  WidgetPublicChatSendChatResponse,
-  WidgetPublicChatSendStopConfirmationResponse,
-  WidgetSessionConfig,
-} from "../types";
-import { getWidgetApiBase } from "./api-origin";
-
-async function requestJson<T>(path: string, init: RequestInit): Promise<T> {
-  const response = await fetch(new URL(path, `${getWidgetApiBase()}/`).toString(), {
-    ...init,
-    headers: {
-      "Content-Type": "application/json",
-      ...(init.headers ?? {}),
-    },
-    credentials: "omit",
-  });
-
-  const text = await response.text();
-  const payload = text ? JSON.parse(text) : null;
-  if (!response.ok) {
-    throw new Error(
-      typeof payload === "object" && payload && "error" in payload
-        ? String((payload as { error?: string }).error ?? response.statusText)
-        : response.statusText
-    );
-  }
-
-  return payload as T;
-}
-
-export async function mintWidgetSession(input: {
-  agentId: string;
-  origin: string;
-  pageUrl?: string;
-  referrer?: string;
-}): Promise<WidgetSessionConfig> {
-  return requestJson<WidgetSessionConfig>("/api/widget/sessions", {
-    method: "POST",
-    body: JSON.stringify(input),
-  });
-}
-
-export async function startPublicChat(input: {
-  agentId: string;
-  sessionToken: string;
-}): Promise<{
-  conversation: WidgetConversation;
-  welcomeMessage: WidgetMessage;
-}> {
-  return requestJson("/api/conversations/public/start", {
-    method: "POST",
-    headers: { Authorization: `Bearer ${input.sessionToken}` },
-    body: JSON.stringify({ agentId: input.agentId }),
-  });
-}
-
-export async function sendPublicChatMessage(input: {
-  conversationId: string;
-  sessionToken: string;
-  content: string;
-}): Promise<WidgetPublicChatSendChatResponse> {
-  return requestJson(
-    `/api/conversations/public/${encodeURIComponent(input.conversationId)}/messages`,
-    {
-      method: "POST",
-      headers: { Authorization: `Bearer ${input.sessionToken}` },
-      body: JSON.stringify({
-        content: input.content,
-      }),
-    }
-  );
-}
-
-export async function sendPublicChatConfirmation(input: {
-  conversationId: string;
-  sessionToken: string;
-  content: string;
-}): Promise<WidgetPublicChatSendStopConfirmationResponse> {
-  return requestJson(
-    `/api/conversations/public/${encodeURIComponent(input.conversationId)}/messages`,
-    {
-      method: "POST",
-      headers: { Authorization: `Bearer ${input.sessionToken}` },
-      body: JSON.stringify({
-        content: input.content,
-      }),
-    }
-  );
-}
-
-export async function getCurrentConversation(sessionToken: string): Promise<{
-  conversation: WidgetConversation | null;
-}> {
-  return requestJson<{ conversation: WidgetConversation | null }>(
-    "/api/conversations/public/current",
-    {
-      method: "GET",
-      headers: { Authorization: `Bearer ${sessionToken}` },
-    }
-  );
-}
-
-export async function listConversationMessages(input: {
-  conversationId: string;
-  sessionToken: string;
-  cursor?: string | null;
-}): Promise<{
-  data: WidgetMessage[];
-  nextCursor: string | null;
-  hasMore: boolean;
-}> {
-  const params = new URLSearchParams();
-  if (input.cursor) params.set("cursor", input.cursor);
-  return requestJson(
-    `/api/conversations/public/${encodeURIComponent(input.conversationId)}/messages?${params.toString()}`,
-    {
-      method: "GET",
-      headers: { Authorization: `Bearer ${input.sessionToken}` },
-    }
-  );
-}