@usereq/widget 0.1.0

package/src/chat-widget/stop-confirmation.ts

@@ -0,0 +1,288 @@
+export const STOP_CONFIRMATION_KIND = "stop_confirmation" as const;
+export const STOP_CONFIRMATION_RESULT_KIND =
+  "stop_confirmation_result" as const;
+
+export const DEFAULT_STOP_CONVERSATION_PROMPT =
+  "Do you want to stop this conversation?";
+
+export type StopConfirmationState = "pending" | "accepted" | "rejected";
+export type StopConfirmationDecision = "accepted" | "rejected";
+
+export type StopConfirmationPromptEnvelope = {
+  kind: typeof STOP_CONFIRMATION_KIND;
+  confirmationId: string;
+  state: StopConfirmationState;
+  prompt: string;
+};
+
+export type StopConfirmationResultEnvelope = {
+  kind: typeof STOP_CONFIRMATION_RESULT_KIND;
+  confirmationId: string;
+  decision: StopConfirmationDecision;
+};
+
+export type StopConfirmationEnvelope =
+  | StopConfirmationPromptEnvelope
+  | StopConfirmationResultEnvelope;
+
+export type StopConfirmationMessageLike = {
+  id: string;
+  content: string;
+  createdAt?: string;
+};
+
+export type StopConfirmationRenderItem<T extends StopConfirmationMessageLike> =
+  | {
+      type: "message";
+      message: T;
+    }
+  | {
+      type: "confirmation";
+      message: T;
+      envelope: StopConfirmationPromptEnvelope;
+      latestEnvelope: StopConfirmationEnvelope;
+    };
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function normalizeState(value: unknown): StopConfirmationState {
+  return value === "accepted" || value === "rejected" ? value : "pending";
+}
+
+function normalizeDecision(value: unknown): StopConfirmationDecision | null {
+  return value === "accepted" || value === "rejected" ? value : null;
+}
+
+function normalizePrompt(value: unknown): string {
+  if (typeof value !== "string") {
+    return DEFAULT_STOP_CONVERSATION_PROMPT;
+  }
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : DEFAULT_STOP_CONVERSATION_PROMPT;
+}
+
+export function createStopConfirmationPromptEnvelope(input: {
+  confirmationId: string;
+  prompt?: string;
+  state?: StopConfirmationState;
+}): StopConfirmationPromptEnvelope {
+  return {
+    kind: STOP_CONFIRMATION_KIND,
+    confirmationId: input.confirmationId,
+    state: normalizeState(input.state),
+    prompt: normalizePrompt(input.prompt),
+  };
+}
+
+export function createStopConfirmationResultEnvelope(input: {
+  confirmationId: string;
+  decision: StopConfirmationDecision;
+}): StopConfirmationResultEnvelope {
+  return {
+    kind: STOP_CONFIRMATION_RESULT_KIND,
+    confirmationId: input.confirmationId,
+    decision: input.decision,
+  };
+}
+
+export function encodeStopConfirmationEnvelope(
+  envelope: StopConfirmationEnvelope,
+): string {
+  return JSON.stringify(envelope);
+}
+
+export function encodeStopConfirmationPrompt(input: {
+  confirmationId: string;
+  prompt?: string;
+  state?: StopConfirmationState;
+}): string {
+  return encodeStopConfirmationEnvelope(
+    createStopConfirmationPromptEnvelope(input),
+  );
+}
+
+export function encodeStopConfirmationResult(input: {
+  confirmationId: string;
+  decision: StopConfirmationDecision;
+}): string {
+  return encodeStopConfirmationEnvelope(
+    createStopConfirmationResultEnvelope(input),
+  );
+}
+
+export function parseStopConfirmationEnvelope(
+  content: string | null | undefined,
+): StopConfirmationEnvelope | null {
+  if (typeof content !== "string" || content.trim() === "") {
+    return null;
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(content);
+  } catch {
+    return null;
+  }
+
+  if (!isRecord(parsed) || typeof parsed.kind !== "string") {
+    return null;
+  }
+
+  if (parsed.kind === STOP_CONFIRMATION_KIND) {
+    if (typeof parsed.confirmationId !== "string" || !parsed.confirmationId.trim()) {
+      return null;
+    }
+
+    return {
+      kind: STOP_CONFIRMATION_KIND,
+      confirmationId: parsed.confirmationId,
+      state: normalizeState(parsed.state),
+      prompt: normalizePrompt(parsed.prompt),
+    };
+  }
+
+  if (parsed.kind === STOP_CONFIRMATION_RESULT_KIND) {
+    const decision = normalizeDecision(parsed.decision);
+    if (
+      typeof parsed.confirmationId !== "string" ||
+      !parsed.confirmationId.trim() ||
+      decision == null
+    ) {
+      return null;
+    }
+
+    return {
+      kind: STOP_CONFIRMATION_RESULT_KIND,
+      confirmationId: parsed.confirmationId,
+      decision,
+    };
+  }
+
+  return null;
+}
+
+export function foldStopConfirmationMessages<T extends StopConfirmationMessageLike>(
+  messages: T[],
+): StopConfirmationRenderItem<T>[] {
+  const byConfirmationId = new Map<
+    string,
+    {
+      firstIndex: number;
+      latestIndex: number;
+      latestEnvelope: StopConfirmationEnvelope;
+    }
+  >();
+
+  messages.forEach((message, index) => {
+    const envelope = parseStopConfirmationEnvelope(message.content);
+    if (!envelope) {
+      return;
+    }
+
+    const entry = byConfirmationId.get(envelope.confirmationId);
+    const sortValue = safeCreatedAtValue(message.createdAt, index);
+    if (!entry) {
+      byConfirmationId.set(envelope.confirmationId, {
+        firstIndex: index,
+        latestIndex: index,
+        latestEnvelope: envelope,
+      });
+      return;
+    }
+
+    const currentSortValue = safeCreatedAtValue(
+      messages[entry.latestIndex]?.createdAt,
+      entry.latestIndex,
+    );
+
+    if (sortValue >= currentSortValue) {
+      byConfirmationId.set(envelope.confirmationId, {
+        firstIndex: entry.firstIndex,
+        latestIndex: index,
+        latestEnvelope: envelope,
+      });
+    }
+  });
+
+  const renderItems: StopConfirmationRenderItem<T>[] = [];
+
+  messages.forEach((message, index) => {
+    const envelope = parseStopConfirmationEnvelope(message.content);
+    if (!envelope) {
+      renderItems.push({ type: "message", message });
+      return;
+    }
+
+    const entry = byConfirmationId.get(envelope.confirmationId);
+    if (!entry || entry.firstIndex !== index) {
+      return;
+    }
+
+    const promptEnvelope =
+      entry.latestEnvelope.kind === STOP_CONFIRMATION_KIND
+        ? entry.latestEnvelope
+        : createStopConfirmationPromptEnvelope({
+            confirmationId: entry.latestEnvelope.confirmationId,
+            prompt: DEFAULT_STOP_CONVERSATION_PROMPT,
+          });
+
+    renderItems.push({
+      type: "confirmation",
+      message,
+      envelope: promptEnvelope,
+      latestEnvelope: entry.latestEnvelope,
+    });
+  });
+
+  return renderItems;
+}
+
+export function getPendingStopConfirmationId<T extends StopConfirmationMessageLike>(
+  messages: T[],
+): string | null {
+  const latestByConfirmationId = new Map<
+    string,
+    {
+      sortValue: number;
+      envelope: StopConfirmationEnvelope;
+    }
+  >();
+
+  messages.forEach((message, index) => {
+    const envelope = parseStopConfirmationEnvelope(message.content);
+    if (!envelope) {
+      return;
+    }
+
+    const sortValue = safeCreatedAtValue(message.createdAt, index);
+    const current = latestByConfirmationId.get(envelope.confirmationId);
+    if (!current || sortValue >= current.sortValue) {
+      latestByConfirmationId.set(envelope.confirmationId, {
+        sortValue,
+        envelope,
+      });
+    }
+  });
+
+  for (const [confirmationId, entry] of latestByConfirmationId.entries()) {
+    if (
+      entry.envelope.kind === STOP_CONFIRMATION_KIND &&
+      entry.envelope.state === "pending"
+    ) {
+      return confirmationId;
+    }
+  }
+
+  return null;
+}
+
+function safeCreatedAtValue(value: string | undefined, fallbackIndex: number): number {
+  if (typeof value !== "string") {
+    return fallbackIndex;
+  }
+
+  const timestamp = Date.parse(value);
+  return Number.isNaN(timestamp) ? fallbackIndex : timestamp;
+}

package/src/chat-widget/styles/chat-widget-box.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import * as React from "react";
+import { motion } from "motion/react";
+import { cn } from "@usereq/ui/lib/utils";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@usereq/ui/components/avatar";
+import { Button } from "@usereq/ui/components/button";
+import { ChevronDown } from "lucide-react";
+import {
+  getChatWidgetAvatarStyle,
+  getChatWidgetGradientStyle,
+} from "../chat-widget-appearance";
+import {
+  DEFAULT_AGENT_NAME_BOX,
+  DEFAULT_POWERED_BY,
+  DEFAULT_SPOTLIGHT_MESSAGES,
+  DEFAULT_START_CHAT_LABEL,
+} from "../chat-widget-defaults";
+import {
+  ChatWidgetComposer,
+  ChatWidgetHeader,
+  ChatWidgetMessages,
+  ChatWidgetPanel,
+  ChatWidgetPoweredBy,
+  useIsChatWidgetFullscreenViewport,
+  useSpotlightTyping,
+  useStableSpotlightMessages,
+  type ChatWidgetDataProps,
+} from "../components/chat-widget-primitives";
+
+const PANEL_WIDTH = 360;
+const PANEL_GAP = 12;
+const LAUNCHER_CARD_WIDTH = 280;
+const LAUNCHER_CARD_HEIGHT = 120;
+/** When panel is open, launcher is just the close button (square). */
+const LAUNCHER_BUTTON_SIZE = 56;
+
+const panelTransition = {
+  type: "spring" as const,
+  stiffness: 400,
+  damping: 35,
+};
+
+/**
+ * ChatWidgetBox — closed: intro message + Start chat button; open: same panel as Bubble + chevron to close.
+ */
+export function ChatWidgetBox({
+  agentName = DEFAULT_AGENT_NAME_BOX,
+  agentAvatarUrl,
+  appearance,
+  spotlightMessages = [],
+  messages = [],
+  poweredBy = DEFAULT_POWERED_BY,
+  headerStatus = "Online",
+  errorMessage,
+  status = "idle",
+  sendDisabled = false,
+  startChatLabel = DEFAULT_START_CHAT_LABEL,
+  onSendMessage,
+  isTyping,
+  onSuggestion,
+  onLauncherClick,
+  className,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  previewOnly = false,
+  onStopConversation,
+  stopDisabled,
+  onConfirmationDecision,
+  onLinkClick,
+  emptyAction,
+  portalContainer,
+}: ChatWidgetDataProps & {
+  /** Button label on closed card */
+  startChatLabel?: string;
+  open?: boolean;
+  className?: string;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** When true, launcher only (no open state); for layout editor. */
+  previewOnly?: boolean;
+  portalContainer?: React.ComponentProps<
+    typeof ChatWidgetPanel
+  >["portalContainer"];
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+    previewOnly ? false : defaultOpen,
+  );
+  const [draftValue, setDraftValue] = React.useState("");
+  const effectiveOpen = previewOnly ? false : (open ?? uncontrolledOpen);
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      if (onOpenChange) {
+        onOpenChange(nextOpen);
+        return;
+      }
+      setUncontrolledOpen(nextOpen);
+    },
+    [onOpenChange],
+  );
+  const stableSpotlightMessages = useStableSpotlightMessages(spotlightMessages);
+  const spotlightForTyping =
+    stableSpotlightMessages.length > 0
+      ? stableSpotlightMessages
+      : [...DEFAULT_SPOTLIGHT_MESSAGES];
+  const introTextTyping = useSpotlightTyping(spotlightForTyping);
+  const introText = introTextTyping || spotlightForTyping[0] || DEFAULT_SPOTLIGHT_MESSAGES[0];
+
+  const launcherHeight = effectiveOpen
+    ? LAUNCHER_BUTTON_SIZE
+    : LAUNCHER_CARD_HEIGHT;
+  const rootWidth = effectiveOpen ? LAUNCHER_BUTTON_SIZE : LAUNCHER_CARD_WIDTH;
+  const isFullscreenViewport = useIsChatWidgetFullscreenViewport();
+  const hideLauncher = isFullscreenViewport && effectiveOpen;
+  const closeButtonStyle: React.CSSProperties = {
+    width: LAUNCHER_BUTTON_SIZE,
+    height: LAUNCHER_BUTTON_SIZE,
+    ...(appearance ? getChatWidgetGradientStyle(appearance) : {}),
+    pointerEvents: effectiveOpen ? "auto" : "none",
+  };
+
+  return (
+    <div
+      className={cn("relative", className)}
+      style={{ width: rootWidth, height: launcherHeight }}
+    >
+      {/* Chat panel: full-screen on mobile, floating on desktop (hidden when previewOnly) */}
+      {!previewOnly && (
+        <ChatWidgetPanel
+          open={effectiveOpen}
+          onOpenChange={handleOpenChange}
+          portalContainer={portalContainer}
+          desktopClassName="absolute right-0 overflow-hidden rounded-2xl border bg-background shadow-xl"
+          desktopStyle={{
+            width: PANEL_WIDTH,
+            bottom: launcherHeight + PANEL_GAP,
+          }}
+        >
+          <div className="flex shrink-0 border-b p-4">
+            <ChatWidgetHeader
+              agentName={agentName}
+              agentAvatarUrl={agentAvatarUrl}
+              appearance={appearance}
+              statusText={headerStatus}
+              onStopConversation={onStopConversation ?? undefined}
+              stopDisabled={stopDisabled}
+              onClose={() => handleOpenChange(false)}
+            />
+          </div>
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden p-4 md:max-h-90">
+            <ChatWidgetMessages
+              messages={messages}
+              isTyping={isTyping ?? status === "sending"}
+              status={status}
+              errorMessage={errorMessage}
+              appearance={appearance}
+              onConfirmationDecision={onConfirmationDecision}
+              onLinkClick={onLinkClick}
+              onSuggestion={(value: string) => {
+                setDraftValue(value);
+                onSuggestion?.(value);
+              }}
+              emptyAction={emptyAction}
+            />
+          </div>
+          {!(emptyAction && messages.length === 0 && !isTyping) && (
+            <div className="border-t p-3 shrink-0">
+              <ChatWidgetComposer
+                value={draftValue}
+                onChange={setDraftValue}
+                onSubmit={onSendMessage}
+                appearance={appearance}
+                disabled={sendDisabled || status === "booting"}
+              />
+              <ChatWidgetPoweredBy text={poweredBy} className="mt-2" />
+            </div>
+          )}
+        </ChatWidgetPanel>
+      )}
+
+      {/* Closed: intro message + Start chat button */}
+      {!effectiveOpen && (
+        <motion.div
+          className="absolute bottom-0 right-0 flex flex-col gap-4 rounded-2xl border bg-background p-4 shadow-xl"
+          style={{ width: LAUNCHER_CARD_WIDTH, height: LAUNCHER_CARD_HEIGHT }}
+          initial={false}
+          animate={{ opacity: 1 }}
+        >
+          <div className="flex flex-1 items-start gap-2">
+            <Avatar
+              className="size-9 shrink-0"
+              style={
+                appearance ? getChatWidgetAvatarStyle(appearance) : undefined
+              }
+            >
+              {agentAvatarUrl ? (
+                <AvatarImage src={agentAvatarUrl} alt={agentName} />
+              ) : null}
+              <AvatarFallback className="bg-transparent text-white text-xs">
+                {agentName.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            {introText ? (
+              <p className="min-w-0 flex-1 text-sm leading-snug text-foreground">
+                {introText}
+              </p>
+            ) : null}
+          </div>
+          <Button
+            className={cn(
+              "w-full rounded-full",
+              previewOnly && "pointer-events-none",
+            )}
+            onClick={
+              previewOnly
+                ? undefined
+                : () => {
+                    onLauncherClick?.();
+                    handleOpenChange(true);
+                  }
+            }
+            style={
+              appearance ? getChatWidgetGradientStyle(appearance) : undefined
+            }
+          >
+            {appearance?.actionText?.trim() || startChatLabel}
+          </Button>
+        </motion.div>
+      )}
+
+      {/* Open: square close button (matches launcher width/height when open) */}
+      {!previewOnly && !hideLauncher && (
+        <motion.button
+          type="button"
+          onClick={() => handleOpenChange(false)}
+          className="absolute bottom-0 right-0 flex items-center justify-center rounded-full text-primary-foreground shadow-lg"
+          style={closeButtonStyle as any}
+          aria-label="Close chat"
+          initial={false}
+          animate={{
+            opacity: effectiveOpen ? 1 : 0,
+            visibility: effectiveOpen ? "visible" : "hidden",
+          }}
+          transition={panelTransition}
+          whileHover={effectiveOpen ? { scale: 1.02 } : undefined}
+          whileTap={effectiveOpen ? { scale: 0.98 } : undefined}
+        >
+          <ChevronDown className="size-6" />
+        </motion.button>
+      )}
+    </div>
+  );
+}