@usereq/widget 0.2.8 → 0.2.10

package/package.json

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

package/src/chat-widget/chat-widget-defaults.tsx

@@ -1,45 +1,6 @@
 /**
  * Default values for the chat widget when database / agent config is not set.
- * Central place to manage all static default states.
  */
 
-/** Default rotating spotlight messages used by closed-state widget surfaces. */
-export const DEFAULT_SPOTLIGHT_MESSAGES = [
-  "Ask me anything…",
-  "How can I help you today?",
-  "Try: What can you do?",
-] as const;
-
-/** Default first message from the agent when welcome copy is shown in the open widget. */
-export const DEFAULT_WELCOME_MESSAGE = "Hello! How can I help you today?";
-
-/** Default agent name when not set (e.g. ChatWidgetBox closed state). */
-export const DEFAULT_AGENT_NAME_BOX = "Need help?";
-
-/** Default agent name for Bubble launcher. */
-export const DEFAULT_AGENT_NAME_BUBBLE = "Assistant";
-
-/** Default agent name for ChatBar. */
-export const DEFAULT_AGENT_NAME_CHATBAR = "Mana";
-
-/** Default label for "Start chat" button (Box closed card). */
-export const DEFAULT_START_CHAT_LABEL = "Start chat";
-
-/** Default label for the open empty-state CTA. */
+/** Default label for the open empty-state "start conversation" CTA. */
 export const DEFAULT_START_CONVERSATION_LABEL = "Start a new conversation";
-
-/** Default label on the ChatBar pill when closed. */
-export const DEFAULT_LAUNCHER_LABEL = "Ask";
-
-/** Default composer input placeholder. */
-export const DEFAULT_COMPOSER_PLACEHOLDER = "Ask anything…";
-
-/** Default "Powered by" text in the widget footer. */
-export const DEFAULT_POWERED_BY = "Powered by UserEQ";
-
-/** Default empty state title when there are no messages. */
-export const DEFAULT_EMPTY_TITLE = "No conversation started";
-
-/** Default empty state description. */
-export const DEFAULT_EMPTY_DESCRIPTION =
-  "Start a new conversation to get started.";

package/src/chat-widget/message-reveal.ts

@@ -0,0 +1,52 @@
+/**
+ * Staggered reveal timing for assistant message turns. Pure helper (no React)
+ * used by the custom element to drip assistant replies in one-by-one with a
+ * brief "typing" hold between them.
+ */
+
+export type AssistantMessageRevealSource = {
+  id: string;
+  content: string;
+};
+
+export type AssistantMessageRevealStep<
+  T extends AssistantMessageRevealSource = AssistantMessageRevealSource,
+> = {
+  message: T;
+  delayMs: number;
+};
+
+export function buildAssistantMessageRevealSteps<
+  T extends AssistantMessageRevealSource,
+>(
+  messages: T[],
+  options?: {
+    initialDelayMs?: number;
+    typingHoldMs?: number;
+    interMessageDelayMs?: number;
+    interMessageDelayJitterMs?: number;
+  },
+): AssistantMessageRevealStep<T>[] {
+  if (messages.length === 0) {
+    return [];
+  }
+
+  const initialDelayMs = options?.initialDelayMs ?? 0;
+  const typingHoldMs = options?.typingHoldMs ?? 1260;
+  const interMessageDelayMs = options?.interMessageDelayMs ?? 1520;
+  const jitterMs = Math.max(0, options?.interMessageDelayJitterMs ?? 100);
+
+  return messages.map((message, index) => {
+    const baseDelay =
+      index === 0 ? initialDelayMs + typingHoldMs : interMessageDelayMs;
+    const jitter =
+      index === 0 || jitterMs === 0
+        ? 0
+        : Math.round((Math.random() * 2 - 1) * jitterMs);
+
+    return {
+      message,
+      delayMs: Math.max(0, baseDelay + jitter),
+    };
+  });
+}

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

@@ -17,7 +17,7 @@ import {
 } from "../types";
 import { widgetTriggerRuleKey } from "../shared/widget-config";
 import { WidgetRuntime, type WidgetRuntimeStatus } from "../renderer/index";
-import { buildAssistantMessageRevealSteps } from "../chat-widget";
+import { buildAssistantMessageRevealSteps } from "../chat-widget/message-reveal";
 import { DEFAULT_STOP_CONVERSATION_PROMPT } from "../shared/stop-confirmation";
 import {
   bootstrapWidget,
@@ -47,6 +47,15 @@ export class AgentWidgetElement extends HTMLElement {
   private hostStyleElement: HTMLStyleElement;
   private shadowStyleElement: HTMLStyleElement;
   private mountElement: HTMLDivElement;
+  /**
+   * Dedicated container the fullscreen (mobile) chat panel portals into. It
+   * lives INSIDE the shadow root (so our styles apply) and is `fixed; inset:0`
+   * so the panel's `absolute inset-0` fills the viewport. Passing the raw
+   * shadow root instead would (a) be rejected as a non-Element portal target
+   * and (b) fall back to `document.body`, where our shadow-scoped CSS doesn't
+   * reach — which left the panel invisible on real sites.
+   */
+  private portalElement: HTMLDivElement;
   private root: Root;
   private agentId = "";
   private mode: "embed" | "preview" = "embed";
@@ -93,10 +102,17 @@ export class AgentWidgetElement extends HTMLElement {
     this.mountElement.style.display = "block";
     this.mountElement.style.width = "100%";
     this.mountElement.style.height = "100%";
+    // Fullscreen portal target — viewport-sized + in the shadow root. Empty and
+    // click-through until the mobile panel mounts into it (the panel/overlay
+    // re-enable their own pointer events).
+    this.portalElement = document.createElement("div");
+    this.portalElement.style.cssText =
+      "position:fixed;inset:0;pointer-events:none;z-index:2147483647;";
     this.shadowRootRef.append(
       this.hostStyleElement,
       this.shadowStyleElement,
       this.mountElement,
+      this.portalElement,
     );
     this.root = createRoot(this.mountElement);
   }
@@ -282,7 +298,7 @@ export class AgentWidgetElement extends HTMLElement {
         onSendMessage: (content: string) => void this.sendMessage(content),
         onConfirmationDecision: (confirmationId: string, accepted: boolean) =>
           void this.handleConfirmationDecision(confirmationId, accepted),
-        portalContainer: this.shadowRootRef,
+        portalContainer: this.portalElement,
       }),
     );
   }

package/src/styles/widget.css.ts

@@ -5,23 +5,52 @@ export const widgetCss = `
   pointer-events: none;
 }
 
+/* Hide the scrollbar in the chat-input textarea (it still scrolls past max height). */
+[data-slot="chat-composer"] [data-slot="textarea"] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+[data-slot="chat-composer"] [data-slot="textarea"]::-webkit-scrollbar {
+  display: none;
+}
+
 @media (max-width: 520px) {
+  /*
+   * Tighten the launcher margin on small screens. Anchor to the side the
+   * placement asks for (via data-horizontal) — setting BOTH left and right
+   * would stretch the fixed shell full-width and the inline-flex launcher
+   * would collapse to the left edge.
+   */
   .widget-shell[data-mode="embed"] {
     top: auto !important;
-    right: 12px !important;
     bottom: 12px !important;
-    left: 12px !important;
     transform: none !important;
   }
 
-  .widget-shell[data-mode="embed"][data-open="true"] {
-    top: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    width: 100vw !important;
-    height: 100svh !important;
-    max-width: none !important;
+  .widget-shell[data-mode="embed"][data-horizontal="right"] {
+    right: 12px !important;
+    left: auto !important;
+  }
+
+  .widget-shell[data-mode="embed"][data-horizontal="left"] {
+    left: 12px !important;
+    right: auto !important;
+  }
+
+  .widget-shell[data-mode="embed"][data-horizontal="center"] {
+    left: 50% !important;
+    right: auto !important;
+    transform: translateX(-50%) !important;
+  }
+
+  /*
+   * The panel is full-screen on mobile, so drop the rounded corners / border /
+   * shadow that only make sense for the floating desktop panel.
+   */
+  [data-slot="chat-panel"] {
+    border-radius: 0 !important;
+    border: 0 !important;
+    box-shadow: none !important;
   }
 }
 `;

package/dist/widget.css

@@ -1,2 +0,0 @@
-@keyframes sd-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes sd-blurIn{0%{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur()}}@keyframes sd-slideUp{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}[data-sd-animate]{animation:var(--sd-animation,sd-fadeIn) var(--sd-duration,.15s) var(--sd-easing,ease) var(--sd-delay,0s) both}
-/*$vite$:1*/

package/src/chat-widget/components/chat-widget-frame.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { cn } from "@usereq/ui/lib/utils";
-
-/** Widget position anchor (mirrors server enum values). */
-export type WidgetAnchor =
-  | "TOP_LEFT"
-  | "TOP_CENTER"
-  | "TOP_RIGHT"
-  | "BOTTOM_LEFT"
-  | "BOTTOM_CENTER"
-  | "BOTTOM_RIGHT";
-
-/**
- * Builds Tailwind classes for the widget anchor from DB WidgetAnchor.
- * Used so the widget renders in the correct position (user-configurable in playground).
- * Side anchors use min-w-[320px] so chatbar doesn't shrink when on left/right.
- */
-const WIDGET_ANCHOR_CLASSES: Record<WidgetAnchor, string> = {
-  TOP_LEFT: "absolute top-8 left-8 min-w-[320px]",
-  TOP_CENTER:
-    "absolute top-8 left-1/2 w-full -translate-x-1/2 px-6 flex justify-center",
-  TOP_RIGHT: "absolute top-8 right-8 min-w-[320px]",
-  BOTTOM_LEFT: "absolute bottom-8 left-8 min-w-[320px]",
-  BOTTOM_CENTER:
-    "absolute bottom-10 left-1/2 w-full -translate-x-1/2 px-6 flex justify-center",
-  BOTTOM_RIGHT: "absolute bottom-8 right-8 min-w-[320px]",
-};
-
-export function ChatWidgetPreviewStage({
-  children,
-  className,
-  anchor = "BOTTOM_RIGHT",
-}: {
-  children: React.ReactNode;
-  className?: string;
-  /** Widget position from DB (agent.anchor). User can update in playground. */
-  anchor?: WidgetAnchor;
-}) {
-  const anchorClasses =
-    WIDGET_ANCHOR_CLASSES[anchor] ?? WIDGET_ANCHOR_CLASSES.BOTTOM_RIGHT;
-  return (
-    <div
-      className={cn(
-        "relative flex min-h-[620px] w-full items-center justify-center overflow-hidden rounded-2xl border bg-linear-to-b from-muted/20 to-muted/5 p-6",
-        className
-      )}
-    >
-      <div data-chat-widget-anchor={anchor} className={anchorClasses}>
-        {children}
-      </div>
-    </div>
-  );
-}
-

package/src/chat-widget/components/chat-widget-layout.ts

@@ -1,6 +0,0 @@
-export function getChatWidgetMessagesLayoutClasses() {
-  return {
-    scrollClassName: "h-full overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
-    contentClassName: "flex flex-col gap-2 p-0",
-  };
-}