@usereq/widget 0.1.3 → 0.1.5

package/package.json

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

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

@@ -10,25 +10,46 @@ import {
 } from "@usereq/ui/components/avatar";
 import { Button } from "@usereq/ui/components/button";
 import { Textarea } from "@usereq/ui/components/textarea";
-import { X, SendHorizonal, Phone, Video, Info, ThumbsUp } from "lucide-react";
+import {
+  ChevronDown,
+  SendHorizonal,
+  Phone,
+  Video,
+  Info,
+} from "lucide-react";
 import {
   DEFAULT_AGENT_NAME_BUBBLE,
-  DEFAULT_COMPOSER_PLACEHOLDER,
   DEFAULT_POWERED_BY,
   DEFAULT_SPOTLIGHT_MESSAGES,
 } from "../chat-widget-defaults";
 import {
-  ChatWidgetMessages,
   ChatWidgetPanel,
   ChatWidgetPoweredBy,
+  ChatWidgetTyping,
   useIsChatWidgetFullscreenViewport,
   useSpotlightFade,
   type ChatWidgetDataProps,
+  type ChatWidgetPreviewMessage,
 } from "../components/chat-widget-primitives";
+import {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+} from "../components/conversation";
+import { foldStopConfirmationMessages } from "../stop-confirmation";
+import { getChatWidgetMessagesLayoutClasses } from "../components/chat-widget-layout";
+import {
+  Message,
+  MessageContent,
+  MessageResponse,
+} from "../components/message";
 
 const MESSENGER_GRADIENT =
   "linear-gradient(135deg, #00B2FF 0%, #006AFF 50%, #8E5BFF 100%)";
 
+const MESSENGER_BRAND_COLOR = "#0084FF";
+
 const PANEL_WIDTH = 372;
 const PANEL_HEIGHT = 580;
 const LAUNCHER_SIZE = 60;
@@ -40,7 +61,6 @@ const fadeTransition = { duration: 0.35 };
 export function ChatWidgetMessenger({
   agentName = DEFAULT_AGENT_NAME_BUBBLE,
   agentAvatarUrl,
-  appearance,
   spotlightMessages = [],
   messages = [],
   poweredBy = DEFAULT_POWERED_BY,
@@ -50,7 +70,6 @@ export function ChatWidgetMessenger({
   sendDisabled = false,
   onSendMessage,
   isTyping,
-  onSuggestion,
   onLauncherClick,
   className,
   open,
@@ -120,7 +139,7 @@ export function ChatWidgetMessenger({
             transition={fadeTransition}
             className="absolute right-0 bottom-[calc(60px+10px)] flex w-full max-w-70 flex-col items-end"
           >
-            <div className="rounded-3xl bg-white px-4 py-2.5 text-right shadow-[0_4px_16px_rgba(0,0,0,0.12)]">
+            <div className="rounded-3xl bg-background px-4 py-2.5 text-right shadow-[0_4px_16px_rgba(0,0,0,0.12)]">
               <p className="text-[14px] leading-snug text-foreground">
                 {spotlightText}
               </p>
@@ -134,7 +153,7 @@ export function ChatWidgetMessenger({
           open={effectiveOpen}
           onOpenChange={handleOpenChange}
           portalContainer={portalContainer}
-          desktopClassName="absolute right-0 overflow-hidden rounded-3xl bg-background shadow-[0_8px_32px_rgba(0,0,0,0.16)] border border-black/5"
+          desktopClassName="absolute right-0 overflow-hidden rounded-3xl bg-background shadow-[0_8px_32px_rgba(0,0,0,0.16)] border border-border"
           desktopStyle={{
             width: PANEL_WIDTH,
             height: PANEL_HEIGHT,
@@ -149,20 +168,16 @@ export function ChatWidgetMessenger({
             onStopConversation={onStopConversation ?? undefined}
             stopDisabled={stopDisabled}
           />
-          <div className="flex min-h-0 flex-1 flex-col bg-[#F5F5F7] dark:bg-background overflow-hidden">
-            <ChatWidgetMessages
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
+            <MessengerMessages
               messages={messages}
               isTyping={isTyping ?? status === "sending"}
               status={status}
-              suggestions={spotlightForFade}
               errorMessage={errorMessage}
-              appearance={appearance}
+              agentName={agentName}
+              agentAvatarUrl={agentAvatarUrl}
               onConfirmationDecision={onConfirmationDecision}
               onLinkClick={onLinkClick}
-              onSuggestion={(value: string) => {
-                setDraftValue(value);
-                onSuggestion?.(value);
-              }}
               emptyAction={emptyAction}
             />
           </div>
@@ -199,7 +214,7 @@ export function ChatWidgetMessenger({
           style={{
             width: LAUNCHER_SIZE,
             height: LAUNCHER_SIZE,
-            background: MESSENGER_GRADIENT,
+            backgroundColor: MESSENGER_BRAND_COLOR,
             boxShadow: "0 6px 20px rgba(0, 132, 255, 0.45)",
           }}
           aria-label={effectiveOpen ? "Close chat" : "Open chat"}
@@ -209,7 +224,7 @@ export function ChatWidgetMessenger({
           whileTap={previewOnly ? undefined : { scale: 0.96 }}
         >
           {effectiveOpen ? (
-            <X className="size-7" strokeWidth={2.4} />
+            <ChevronDown className="size-7" strokeWidth={2.4} />
           ) : (
             <MessengerLogo className="size-8" />
           )}
@@ -219,6 +234,169 @@ export function ChatWidgetMessenger({
   );
 }
 
+function MessengerMessages({
+  messages,
+  isTyping,
+  status,
+  errorMessage,
+  agentName,
+  agentAvatarUrl,
+  onConfirmationDecision,
+  onLinkClick,
+  emptyAction,
+}: {
+  messages: ChatWidgetPreviewMessage[];
+  isTyping: boolean;
+  status: ChatWidgetDataProps["status"];
+  errorMessage?: string | null;
+  agentName: string;
+  agentAvatarUrl?: string | null;
+  onConfirmationDecision?: ChatWidgetDataProps["onConfirmationDecision"];
+  onLinkClick?: (linkUrl: string) => void;
+  emptyAction?: { label: string; onClick: () => void; disabled?: boolean };
+}) {
+  const { scrollClassName, contentClassName } =
+    getChatWidgetMessagesLayoutClasses();
+  const renderedMessages = React.useMemo(
+    () => foldStopConfirmationMessages(messages),
+    [messages],
+  );
+
+  if (messages.length === 0 && !isTyping) {
+    if (status === "error") {
+      return (
+        <div className="flex h-full items-center justify-center px-6 py-8 text-center text-sm text-destructive">
+          {errorMessage ?? "Something went wrong."}
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex min-h-full flex-1 items-center justify-center px-6 py-8">
+        <ConversationEmptyState className="w-full max-w-[280px] gap-4">
+          <Avatar
+            className="size-16 ring-4 ring-background"
+            style={{
+              boxShadow: "0 6px 18px rgba(0, 132, 255, 0.25)",
+            }}
+          >
+            {agentAvatarUrl ? (
+              <AvatarImage src={agentAvatarUrl} alt={agentName} />
+            ) : null}
+            <AvatarFallback
+              className="text-white text-base font-semibold"
+              style={{ backgroundColor: MESSENGER_BRAND_COLOR }}
+            >
+              {agentName.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <p className="text-[15px] font-semibold leading-tight text-foreground">
+              {agentName}
+            </p>
+            <p className="mt-1.5 text-[13px] leading-snug text-muted-foreground">
+              Typically replies in a few minutes.
+            </p>
+          </div>
+          {emptyAction && (
+            <Button
+              size="lg"
+              disabled={emptyAction.disabled}
+              onClick={emptyAction.onClick}
+              className="rounded-full px-6 text-white shadow-[0_4px_12px_rgba(0,132,255,0.35)] hover:opacity-95 disabled:opacity-60"
+              style={{ backgroundColor: MESSENGER_BRAND_COLOR }}
+            >
+              {emptyAction.label}
+            </Button>
+          )}
+        </ConversationEmptyState>
+      </div>
+    );
+  }
+
+  return (
+    <Conversation className="relative size-full">
+      <ConversationContent
+        scrollClassName={scrollClassName}
+        className={cn(contentClassName, "gap-1.5 px-3 py-3")}
+      >
+        {renderedMessages.map((item) => {
+          if (item.type === "confirmation") {
+            return (
+              <Message key={item.message.id} from="assistant">
+                <div className="flex w-fit max-w-[80%] shrink-0 flex-col gap-2">
+                  <MessageResponse
+                    confirmation={item.latestEnvelope}
+                    confirmationPrompt={item.envelope.prompt}
+                    confirmationActionsDisabled={status === "sending"}
+                    onConfirmationDecision={onConfirmationDecision}
+                  />
+                </div>
+              </Message>
+            );
+          }
+
+          const m = item.message;
+          const isUser = m.role === "user";
+          return (
+            <Message key={m.id} from={m.role}>
+              <div className="flex w-fit max-w-[80%] shrink-0 flex-col gap-1.5">
+                <MessageContent
+                  className={cn(
+                    "whitespace-pre-wrap rounded-[18px] px-3.5 py-2 text-[14px] leading-snug",
+                    isUser
+                      ? "text-white"
+                      : "bg-secondary text-secondary-foreground",
+                  )}
+                  style={
+                    isUser ? { background: MESSENGER_GRADIENT } : undefined
+                  }
+                >
+                  {isUser ? (
+                    m.content
+                  ) : (
+                    <MessageResponse onLinkClick={onLinkClick}>
+                      {m.content}
+                    </MessageResponse>
+                  )}
+                </MessageContent>
+                {m.actions && m.actions.length > 0 && (
+                  <div className="flex flex-wrap gap-2">
+                    {m.actions.map((action, i) => (
+                      <Button
+                        key={i}
+                        size="sm"
+                        variant={action.variant ?? "outline"}
+                        onClick={action.onClick}
+                        className="rounded-full"
+                      >
+                        {action.label}
+                      </Button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </Message>
+          );
+        })}
+        {isTyping && (
+          <motion.div
+            initial={{ opacity: 0, y: 6 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.2, ease: "easeOut" }}
+            className="flex w-full justify-start"
+          >
+            <div className="flex max-w-[80%] items-center rounded-[18px] bg-secondary px-3.5 py-2 text-secondary-foreground">
+              <ChatWidgetTyping className="bg-transparent! p-0!" />
+            </div>
+          </motion.div>
+        )}
+      </ConversationContent>
+      <ConversationScrollButton />
+    </Conversation>
+  );
+}
+
 function MessengerHeader({
   agentName,
   agentAvatarUrl,
@@ -237,7 +415,7 @@ function MessengerHeader({
   return (
     <div
       className="flex shrink-0 items-center gap-3 px-4 py-3 text-white"
-      style={{ background: MESSENGER_GRADIENT }}
+      style={{ backgroundColor: MESSENGER_BRAND_COLOR }}
     >
       <div className="relative">
         <Avatar size="lg" className="ring-2 ring-white/30">
@@ -287,11 +465,11 @@ function MessengerHeader({
         )}
         <button
           type="button"
-          aria-label="Close"
+          aria-label="Minimize"
           onClick={onClose}
           className="ml-0.5 flex size-8 items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15 hover:text-white"
         >
-          <X className="size-4.5" strokeWidth={2.4} />
+          <ChevronDown className="size-5" strokeWidth={2.4} />
         </button>
       </div>
     </div>
@@ -326,49 +504,47 @@ function MessengerComposer({
     submit();
   };
 
-  const trimmedValue = value.trim();
-  const showSend = trimmedValue.length > 0;
+  const hasText = value.trim().length > 0;
+  const sendDisabled = disabled || !onSubmit || !hasText;
 
   return (
-    <div className="shrink-0 border-t border-black/5 bg-background px-3 py-2.5">
-      <div className="flex items-end gap-2">
-        <div className="flex flex-1 items-end rounded-3xl bg-[#F0F0F2] px-3 dark:bg-muted">
+    <div className="shrink-0 border-t border-border bg-background px-2 py-2">
+      <div className="flex items-end gap-0.5">
+        {/* Tool icons (Plus / Camera / Image / Mic) temporarily disabled. */}
+        <div className="flex flex-1 items-end rounded-3xl bg-secondary px-3.5">
           <Textarea
             ref={textareaRef}
-            placeholder={DEFAULT_COMPOSER_PLACEHOLDER}
+            placeholder="Aa"
             value={value}
             onChange={(e) => onChange(e.target.value)}
             onKeyDown={handleKeyDown}
             rows={1}
             disabled={disabled}
             className={cn(
-              "min-h-9 max-h-32 flex-1 resize-none border-0 bg-transparent py-2 text-[14px] shadow-none",
+              "min-h-9 max-h-32 flex-1 resize-none border-0 bg-transparent py-2 text-[14px] leading-snug shadow-none",
               "focus-visible:ring-0 focus-visible:border-0",
             )}
           />
         </div>
-        {showSend ? (
-          <Button
-            type="button"
-            size="icon"
-            aria-label="Send"
-            onClick={submit}
-            disabled={disabled || !onSubmit}
-            className="h-9 w-9 shrink-0 rounded-full text-white hover:opacity-90 disabled:opacity-60"
-            style={{ background: MESSENGER_GRADIENT }}
-          >
-            <SendHorizonal className="size-4" />
-          </Button>
-        ) : (
-          <button
-            type="button"
-            aria-label="Like"
-            disabled
-            className="flex size-9 shrink-0 items-center justify-center rounded-full text-[#0084FF] disabled:opacity-100"
-          >
-            <ThumbsUp className="size-5" strokeWidth={2.2} />
-          </button>
-        )}
+        <button
+          type="button"
+          aria-label="Send"
+          onClick={submit}
+          disabled={sendDisabled}
+          className={cn(
+            "ml-1 flex size-9 shrink-0 items-center justify-center rounded-full transition-colors",
+            "hover:bg-secondary disabled:hover:bg-transparent",
+          )}
+          style={{ color: MESSENGER_BRAND_COLOR }}
+        >
+          <SendHorizonal
+            className={cn(
+              "size-5 transition-opacity",
+              sendDisabled && "opacity-40",
+            )}
+            strokeWidth={2.2}
+          />
+        </button>
       </div>
     </div>
   );

package/src/runtime/analytics.ts

@@ -10,14 +10,54 @@ import { getWidgetApiBase } from "./api-origin";
 const ANALYTICS_ENDPOINT = "/api/widget/events/batch";
 const DEFAULT_BATCH_SIZE = 10;
 const DEFAULT_FLUSH_INTERVAL_MS = 2500;
+const MAX_FLUSH_INTERVAL_MS = 120_000;
+const MAX_QUEUE_SIZE = 200;
+const MAX_EVENT_ATTEMPTS = 5;
+const MAX_EVENT_AGE_MS = 10 * 60 * 1000;
 const UNIQUE_SCRIPT_LOADED_KEY_PREFIX =
   "usereq-widget:unique-script-loaded:";
 
 type QueuedAnalyticsEvent = {
   event: WidgetAnalyticsBatchEvent;
   sessionToken: string;
+  attempts: number;
+  enqueuedAt: number;
 };
 
+type SendOutcome =
+  | { outcome: "ok" }
+  | { outcome: "drop" }
+  | { outcome: "retry"; retryAfterMs?: number };
+
+function parseRetryAfter(headerValue: string | null): number | undefined {
+  if (!headerValue) return undefined;
+  const trimmed = headerValue.trim();
+  if (!trimmed) return undefined;
+  const seconds = Number(trimmed);
+  if (Number.isFinite(seconds) && seconds >= 0) {
+    return Math.min(MAX_FLUSH_INTERVAL_MS, seconds * 1000);
+  }
+  const dateMs = Date.parse(trimmed);
+  if (!Number.isNaN(dateMs)) {
+    const delta = dateMs - Date.now();
+    if (delta > 0) return Math.min(MAX_FLUSH_INTERVAL_MS, delta);
+  }
+  return undefined;
+}
+
+function classifyResponse(response: Response): SendOutcome {
+  if (response.ok) return { outcome: "ok" };
+  const status = response.status;
+  if (status === 408 || status === 425 || status === 429 || status >= 500) {
+    return {
+      outcome: "retry",
+      retryAfterMs: parseRetryAfter(response.headers.get("retry-after")),
+    };
+  }
+  if (status >= 400 && status < 500) return { outcome: "drop" };
+  return { outcome: "retry" };
+}
+
 export type WidgetAnalyticsTrackerOptions = {
   mode: "embed" | "preview";
   agentId: string;
@@ -38,6 +78,8 @@ export class WidgetAnalyticsTracker {
   private flushTimer: number | null = null;
   private queue: QueuedAnalyticsEvent[] = [];
   private disposed = false;
+  private consecutiveFailures = 0;
+  private nextAllowedFlushAt = 0;
 
   constructor(options: WidgetAnalyticsTrackerOptions) {
     this.mode = options.mode;
@@ -134,9 +176,11 @@ export class WidgetAnalyticsTracker {
       ...(linkUrl ? { linkUrl } : {}),
     };
 
-    this.queue.push({
+    this.enqueue({
       event: queuedEvent,
       sessionToken,
+      attempts: 0,
+      enqueuedAt: Date.now(),
     });
 
     if (this.queue.length >= this.batchSize) {
@@ -147,55 +191,108 @@ export class WidgetAnalyticsTracker {
     this.scheduleFlush();
   }
 
+  private enqueue(entry: QueuedAnalyticsEvent) {
+    this.queue.push(entry);
+    if (this.queue.length > MAX_QUEUE_SIZE) {
+      this.queue.splice(0, this.queue.length - MAX_QUEUE_SIZE);
+    }
+  }
+
+  private pruneStale(now: number) {
+    if (this.queue.length === 0) return;
+    this.queue = this.queue.filter(
+      (entry) => now - entry.enqueuedAt < MAX_EVENT_AGE_MS,
+    );
+  }
+
   async flush(options?: {
     transport?: "default" | "beacon";
   }): Promise<void> {
     if (this.disposed) return;
-    if (this.queue.length === 0) return;
+
+    const now = Date.now();
+    this.pruneStale(now);
+    if (this.queue.length === 0) {
+      this.clearFlushTimer();
+      return;
+    }
 
     this.clearFlushTimer();
     const transport = options?.transport ?? "default";
     const snapshot = this.queue;
     this.queue = [];
 
-    const grouped = new Map<string, WidgetAnalyticsBatchEvent[]>();
+    const grouped = new Map<string, QueuedAnalyticsEvent[]>();
     for (const entry of snapshot) {
       const group = grouped.get(entry.sessionToken);
       if (group) {
-        group.push(entry.event);
+        group.push(entry);
       } else {
-        grouped.set(entry.sessionToken, [entry.event]);
+        grouped.set(entry.sessionToken, [entry]);
       }
     }
 
     const failed: QueuedAnalyticsEvent[] = [];
+    let maxRetryAfterMs = 0;
+    let anyRetry = false;
+    let anySuccess = false;
 
-    for (const [sessionToken, events] of grouped.entries()) {
-      const sent = await this.sendBatch({
-        events,
+    for (const [sessionToken, entries] of grouped.entries()) {
+      const result = await this.sendBatch({
+        events: entries.map((entry) => entry.event),
         sessionToken,
         transport,
       });
 
-      if (!sent) {
-        for (const event of events) {
-          failed.push({ event, sessionToken });
-        }
+      if (result.outcome === "ok") {
+        anySuccess = true;
+        continue;
+      }
+      if (result.outcome === "drop") {
+        continue;
+      }
+      anyRetry = true;
+      if (result.retryAfterMs && result.retryAfterMs > maxRetryAfterMs) {
+        maxRetryAfterMs = result.retryAfterMs;
       }
+      for (const entry of entries) {
+        const attempts = entry.attempts + 1;
+        if (attempts >= MAX_EVENT_ATTEMPTS) continue;
+        failed.push({ ...entry, attempts });
+      }
+    }
+
+    if (anySuccess && !anyRetry) {
+      this.consecutiveFailures = 0;
+      this.nextAllowedFlushAt = 0;
+    } else if (anyRetry) {
+      this.consecutiveFailures += 1;
     }
 
     if (failed.length > 0) {
-      this.queue = [...failed, ...this.queue];
-      this.scheduleFlush();
+      for (const entry of failed) {
+        this.enqueue(entry);
+      }
+      const backoff = this.computeBackoffDelay();
+      const delay = Math.max(backoff, maxRetryAfterMs);
+      this.nextAllowedFlushAt = Date.now() + delay;
+      this.scheduleFlush(delay);
     }
   }
 
+  private computeBackoffDelay(): number {
+    const exponent = Math.max(0, this.consecutiveFailures - 1);
+    const base = this.flushIntervalMs * Math.pow(2, exponent);
+    const jitter = base * 0.2 * Math.random();
+    return Math.min(MAX_FLUSH_INTERVAL_MS, base + jitter);
+  }
+
   private async sendBatch(input: {
     events: WidgetAnalyticsBatchEvent[];
     sessionToken: string;
     transport: "default" | "beacon";
-  }): Promise<boolean> {
-    if (input.events.length === 0) return true;
+  }): Promise<SendOutcome> {
+    if (input.events.length === 0) return { outcome: "ok" };
 
     const url = new URL(ANALYTICS_ENDPOINT, `${getWidgetApiBase()}/`).toString();
     const sanitizedEvents = input.events.map((event) => {
@@ -220,7 +317,7 @@ export class WidgetAnalyticsTracker {
         type: "application/json",
       });
       if (navigator.sendBeacon(url, body)) {
-        return true;
+        return { outcome: "ok" };
       }
     }
 
@@ -235,18 +332,19 @@ export class WidgetAnalyticsTracker {
         credentials: "omit",
         keepalive: input.transport === "beacon",
       });
-      return response.ok;
+      return classifyResponse(response);
     } catch {
-      return false;
+      return { outcome: "retry" };
     }
   }
 
-  private scheduleFlush() {
+  private scheduleFlush(delayMs?: number) {
     if (this.flushTimer != null) return;
+    const delay = Math.max(0, delayMs ?? this.flushIntervalMs);
     this.flushTimer = window.setTimeout(() => {
       this.flushTimer = null;
       void this.flush();
-    }, this.flushIntervalMs);
+    }, delay);
   }
 
   private clearFlushTimer() {