@usereq/widget 0.1.6 → 0.2.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usereq/widget",
-  "version": "0.1.6",
+  "version": "0.2.0-rc.1",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -76,7 +76,7 @@
   },
   "dependencies": {
     "@streamdown/mermaid": "^1.0.2",
-    "@usereq/ui": "latest",
+    "@usereq/ui": "^0.2.1",
     "lucide-react": "^0.553.0",
     "motion": "^12.23.24",
     "react": "^19.2.0",

package/src/chat-widget/index.ts

@@ -1,3 +1,12 @@
+/**
+ * @deprecated Since 0.2.0. The widget runtime now renders `ChatWidget` from
+ * `@usereq/ui/components/chat/widget` directly. These re-exports remain for
+ * external consumers that imported the per-variant components
+ * (`ChatWidgetBubble`, `ChatWidgetBox`, `ChatWidgetChatBar`,
+ * `ChatWidgetMessenger`) or the conversation/message primitives, and will be
+ * removed in 0.3.0. Migrate to `@usereq/ui/components/chat`.
+ */
+
 export * from "./components/chat-widget-frame";
 export * from "./components/chat-widget-primitives";
 export * from "./components/confirmation";

package/src/renderer/widget-runtime.tsx

@@ -1,10 +1,15 @@
 import React from "react";
-import {
-  ChatWidgetBubble,
-  ChatWidgetBox,
-  ChatWidgetChatBar,
-  ChatWidgetMessenger,
-} from "../chat-widget";
+
+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,
@@ -12,16 +17,26 @@ import {
   type WidgetPlacement,
   type WidgetPreset,
   type WidgetVariant,
+  type WidgetTriggerRule,
 } from "../shared/widget-config";
-import type { WidgetTriggerRule } from "../shared/widget-config";
-import { getPendingStopConfirmationId } from "../shared/stop-confirmation";
+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";
 import type { WidgetTriggerRuleType } from "../shared/analytics";
 
 export type WidgetRuntimeMode = "embed" | "preview";
 
-export type WidgetRuntimeStatus = "idle" | "booting" | "ready" | "sending" | "error";
+export type WidgetRuntimeStatus =
+  | "idle"
+  | "booting"
+  | "ready"
+  | "sending"
+  | "error";
 
 export type WidgetRuntimeProps = {
   mode: WidgetRuntimeMode;
@@ -54,15 +69,13 @@ export type WidgetRuntimeProps = {
   onLauncherClick?: () => void;
 };
 
-const VARIANT_COMPONENTS = {
-  default: ChatWidgetBubble,
-  box: ChatWidgetBox,
-  chatbar: ChatWidgetChatBar,
-} as const;
-
-const PRESET_COMPONENTS = {
-  facebook_messenger: ChatWidgetMessenger,
-} as const;
+const RUNTIME_TO_PANEL_STATUS: Record<WidgetRuntimeStatus, ChatPanelStatus> = {
+  idle: "idle",
+  booting: "booting",
+  ready: "idle",
+  sending: "sending",
+  error: "error",
+};
 
 export function WidgetRuntime({
   mode,
@@ -73,6 +86,7 @@ export function WidgetRuntime({
   appearance,
   agentAvatarUrl,
   widgetTitle,
+  welcomeMessage,
   spotlights,
   open,
   status,
@@ -92,19 +106,6 @@ export function WidgetRuntime({
 }: WidgetRuntimeProps) {
   const { ready } = useWidgetTriggerGate(triggerRule);
   const { horizontal, vertical } = splitWidgetPlacement(placement);
-  const PresetComponent =
-    preset !== "default"
-      ? PRESET_COMPONENTS[preset as Exclude<WidgetPreset, "default">]
-      : undefined;
-  const Component =
-    PresetComponent ?? VARIANT_COMPONENTS[variant] ?? ChatWidgetBubble;
-  const shellStyle = getWidgetShellStyle(mode, placement);
-  const resolvedAvatarUrl = agentAvatarUrl?.trim() || undefined;
-  const pendingConfirmationId = getPendingStopConfirmationId(messages);
-  const confirmationPending = pendingConfirmationId != null;
-  const stopDisabledResolved = confirmationPending || status === "booting" || status === "sending";
-  const sendDisabledResolved =
-    sendDisabled || confirmationPending || status === "booting";
   const viewTrackedRef = React.useRef(false);
 
   React.useEffect(() => {
@@ -115,10 +116,80 @@ export function WidgetRuntime({
     onWidgetVisible?.(triggerRule?.triggerRuleType ?? null);
   }, [mode, onWidgetVisible, ready, triggerRule]);
 
+  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,
+      actionLabel: appearance.actionText || undefined,
+      showStopConversation: Boolean(onStopConversation),
+    }),
+    [
+      agentAvatarUrl,
+      appearance,
+      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);
+  const portalEl = isHtmlElement(portalContainer) ? portalContainer : null;
+
   return (
     <>
       <style>{widgetCss}</style>
@@ -135,32 +206,103 @@ export function WidgetRuntime({
         className="widget-shell"
       >
         <div style={{ pointerEvents: "auto" }}>
-          <Component
-            agentName={widgetTitle}
-            agentAvatarUrl={resolvedAvatarUrl}
-            appearance={appearance}
-            spotlightMessages={spotlights}
-            messages={messages}
-            status={status}
-            errorMessage={errorMessage}
-            emptyAction={emptyAction}
-            sendDisabled={sendDisabledResolved}
-            onSendMessage={onSendMessage}
-            open={open}
-            onOpenChange={onOpenChange}
-            onStopConversation={onStopConversation}
-            stopDisabled={stopDisabledResolved}
-            onConfirmationDecision={onConfirmationDecision}
-            onLauncherClick={onLauncherClick}
-            onLinkClick={onLinkClick}
-            portalContainer={portalContainer}
-          />
+          <ChatFullscreenProvider>
+            <ChatWidget
+              config={chatConfig}
+              messages={panelMessages}
+              status={RUNTIME_TO_PANEL_STATUS[status]}
+              errorMessage={errorMessage}
+              open={open}
+              onOpenChange={onOpenChange}
+              onSendMessage={handleSend}
+              onStopConversation={
+                onStopConversation ? handleStop : undefined
+              }
+              onLauncherClick={onLauncherClick}
+              onLinkClick={onLinkClick}
+              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;
+}
+
+function toChatAppearance(appearance: WidgetAppearance): ChatAppearance {
+  return {
+    avatarOrbColor1: appearance.avatarOrbColor1 ?? null,
+    avatarOrbColor2: appearance.avatarOrbColor2 ?? null,
+    actionText: appearance.actionText ?? null,
+  };
+}
+
+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,
@@ -199,7 +341,11 @@ function getWidgetShellStyle(
       Object.assign(style, { left: "24px", top: "24px" });
       break;
     case "top-center":
-      Object.assign(style, { left: "50%", top: "24px", transform: "translateX(-50%)" });
+      Object.assign(style, {
+        left: "50%",
+        top: "24px",
+        transform: "translateX(-50%)",
+      });
       break;
     case "top-right":
       Object.assign(style, { right: "24px", top: "24px" });
@@ -208,7 +354,11 @@ function getWidgetShellStyle(
       Object.assign(style, { left: "24px", bottom: "24px" });
       break;
     case "bottom-center":
-      Object.assign(style, { left: "50%", bottom: "24px", transform: "translateX(-50%)" });
+      Object.assign(style, {
+        left: "50%",
+        bottom: "24px",
+        transform: "translateX(-50%)",
+      });
       break;
     default:
       Object.assign(style, { right: "24px", bottom: "24px" });