@usereq/widget 0.1.2 → 0.1.3

package/package.json

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

package/src/chat-widget/index.ts

@@ -7,3 +7,4 @@ export * from "./stop-confirmation";
 export * from "./styles/chat-widget-bubble";
 export * from "./styles/chat-widget-box";
 export * from "./styles/chat-widget-chatbar";
+export * from "./styles/chat-widget-messenger";

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

@@ -0,0 +1,396 @@
+"use client";
+
+import * as React from "react";
+import { AnimatePresence, 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 { Textarea } from "@usereq/ui/components/textarea";
+import { X, SendHorizonal, Phone, Video, Info, ThumbsUp } 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,
+  useIsChatWidgetFullscreenViewport,
+  useSpotlightFade,
+  type ChatWidgetDataProps,
+} from "../components/chat-widget-primitives";
+
+const MESSENGER_GRADIENT =
+  "linear-gradient(135deg, #00B2FF 0%, #006AFF 50%, #8E5BFF 100%)";
+
+const PANEL_WIDTH = 372;
+const PANEL_HEIGHT = 580;
+const LAUNCHER_SIZE = 60;
+const SPOTLIGHT_GAP = 10;
+const PANEL_GAP = 14;
+
+const fadeTransition = { duration: 0.35 };
+
+export function ChatWidgetMessenger({
+  agentName = DEFAULT_AGENT_NAME_BUBBLE,
+  agentAvatarUrl,
+  appearance,
+  spotlightMessages = [],
+  messages = [],
+  poweredBy = DEFAULT_POWERED_BY,
+  headerStatus = "Active now",
+  errorMessage,
+  status = "idle",
+  sendDisabled = false,
+  onSendMessage,
+  isTyping,
+  onSuggestion,
+  onLauncherClick,
+  className,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  previewOnly = false,
+  onStopConversation,
+  stopDisabled,
+  onConfirmationDecision,
+  onLinkClick,
+  emptyAction,
+  portalContainer,
+}: ChatWidgetDataProps & {
+  open?: boolean;
+  className?: string;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onLauncherClick?: () => void;
+  previewOnly?: boolean;
+  portalContainer?: React.ComponentProps<
+    typeof ChatWidgetPanel
+  >["portalContainer"];
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+    previewOnly ? false : defaultOpen,
+  );
+  const [draftValue, setDraftValue] = React.useState("");
+  const spotlightForFade =
+    spotlightMessages.length > 0
+      ? spotlightMessages
+      : [...DEFAULT_SPOTLIGHT_MESSAGES];
+  const spotlightText = useSpotlightFade(spotlightForFade, 3200);
+  const effectiveOpen = previewOnly ? false : (open ?? uncontrolledOpen);
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      if (onOpenChange) {
+        onOpenChange(nextOpen);
+        return;
+      }
+      setUncontrolledOpen(nextOpen);
+    },
+    [onOpenChange],
+  );
+  const isFullscreenViewport = useIsChatWidgetFullscreenViewport();
+  const hideLauncher = isFullscreenViewport && effectiveOpen;
+
+  const sendIsDisabled = sendDisabled || status === "booting";
+
+  return (
+    <div
+      className={cn("relative", className)}
+      style={{
+        width: spotlightForFade.length > 0 ? 280 : LAUNCHER_SIZE,
+        height:
+          spotlightForFade.length > 0
+            ? LAUNCHER_SIZE + SPOTLIGHT_GAP + 56
+            : LAUNCHER_SIZE,
+      }}
+    >
+      {spotlightForFade.length > 0 && !effectiveOpen && (
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={spotlightText}
+            initial={{ opacity: 0, y: 6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 6 }}
+            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)]">
+              <p className="text-[14px] leading-snug text-foreground">
+                {spotlightText}
+              </p>
+            </div>
+          </motion.div>
+        </AnimatePresence>
+      )}
+
+      {!previewOnly && (
+        <ChatWidgetPanel
+          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"
+          desktopStyle={{
+            width: PANEL_WIDTH,
+            height: PANEL_HEIGHT,
+            bottom: LAUNCHER_SIZE + PANEL_GAP,
+          }}
+        >
+          <MessengerHeader
+            agentName={agentName}
+            agentAvatarUrl={agentAvatarUrl}
+            statusText={headerStatus}
+            onClose={() => handleOpenChange(false)}
+            onStopConversation={onStopConversation ?? undefined}
+            stopDisabled={stopDisabled}
+          />
+          <div className="flex min-h-0 flex-1 flex-col bg-[#F5F5F7] dark:bg-background overflow-hidden">
+            <ChatWidgetMessages
+              messages={messages}
+              isTyping={isTyping ?? status === "sending"}
+              status={status}
+              suggestions={spotlightForFade}
+              errorMessage={errorMessage}
+              appearance={appearance}
+              onConfirmationDecision={onConfirmationDecision}
+              onLinkClick={onLinkClick}
+              onSuggestion={(value: string) => {
+                setDraftValue(value);
+                onSuggestion?.(value);
+              }}
+              emptyAction={emptyAction}
+            />
+          </div>
+          {!(emptyAction && messages.length === 0 && !isTyping) && (
+            <MessengerComposer
+              value={draftValue}
+              onChange={setDraftValue}
+              onSubmit={onSendMessage}
+              disabled={sendIsDisabled}
+            />
+          )}
+          <ChatWidgetPoweredBy
+            text={poweredBy}
+            className="bg-background py-1.5"
+          />
+        </ChatWidgetPanel>
+      )}
+
+      {!hideLauncher && (
+        <motion.button
+          type="button"
+          onClick={
+            previewOnly
+              ? undefined
+              : () => {
+                  onLauncherClick?.();
+                  handleOpenChange(!effectiveOpen);
+                }
+          }
+          className={cn(
+            "absolute bottom-0 right-0 flex items-center justify-center rounded-full text-white",
+            previewOnly && "pointer-events-none",
+          )}
+          style={{
+            width: LAUNCHER_SIZE,
+            height: LAUNCHER_SIZE,
+            background: MESSENGER_GRADIENT,
+            boxShadow: "0 6px 20px rgba(0, 132, 255, 0.45)",
+          }}
+          aria-label={effectiveOpen ? "Close chat" : "Open chat"}
+          aria-expanded={effectiveOpen}
+          animate={{ scale: 1 }}
+          whileHover={previewOnly ? undefined : { scale: 1.04 }}
+          whileTap={previewOnly ? undefined : { scale: 0.96 }}
+        >
+          {effectiveOpen ? (
+            <X className="size-7" strokeWidth={2.4} />
+          ) : (
+            <MessengerLogo className="size-8" />
+          )}
+        </motion.button>
+      )}
+    </div>
+  );
+}
+
+function MessengerHeader({
+  agentName,
+  agentAvatarUrl,
+  statusText,
+  onClose,
+  onStopConversation,
+  stopDisabled,
+}: {
+  agentName: string;
+  agentAvatarUrl?: string | null;
+  statusText: string;
+  onClose: () => void;
+  onStopConversation?: () => void;
+  stopDisabled?: boolean;
+}) {
+  return (
+    <div
+      className="flex shrink-0 items-center gap-3 px-4 py-3 text-white"
+      style={{ background: MESSENGER_GRADIENT }}
+    >
+      <div className="relative">
+        <Avatar size="lg" className="ring-2 ring-white/30">
+          {agentAvatarUrl ? (
+            <AvatarImage src={agentAvatarUrl} alt={agentName} />
+          ) : null}
+          <AvatarFallback className="bg-white/20 text-white">
+            {agentName.slice(0, 2).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+        <span className="absolute -bottom-0.5 -right-0.5 size-3 rounded-full bg-[#31D778] ring-2 ring-white" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-[15px] font-semibold leading-tight">
+          {agentName}
+        </div>
+        <div className="text-[12px] leading-tight text-white/80">
+          {statusText}
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-0.5">
+        <button
+          type="button"
+          aria-label="Phone"
+          className="flex size-8 items-center justify-center rounded-full text-white/85 transition-colors hover:bg-white/15 hover:text-white"
+        >
+          <Phone className="size-4.5" strokeWidth={2.2} />
+        </button>
+        <button
+          type="button"
+          aria-label="Video"
+          className="flex size-8 items-center justify-center rounded-full text-white/85 transition-colors hover:bg-white/15 hover:text-white"
+        >
+          <Video className="size-4.5" strokeWidth={2.2} />
+        </button>
+        {onStopConversation != null && (
+          <button
+            type="button"
+            aria-label="Conversation info"
+            title="End conversation"
+            disabled={stopDisabled}
+            onClick={onStopConversation}
+            className="flex size-8 items-center justify-center rounded-full text-white/85 transition-colors hover:bg-white/15 hover:text-white disabled:opacity-50"
+          >
+            <Info className="size-4.5" strokeWidth={2.2} />
+          </button>
+        )}
+        <button
+          type="button"
+          aria-label="Close"
+          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} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function MessengerComposer({
+  value,
+  onChange,
+  onSubmit,
+  disabled,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  disabled?: boolean;
+}) {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const submit = () => {
+    const trimmed = value.trim();
+    if (!trimmed || !onSubmit) return;
+    onSubmit(trimmed);
+    onChange("");
+    textareaRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key !== "Enter") return;
+    if (e.shiftKey) return;
+    e.preventDefault();
+    submit();
+  };
+
+  const trimmedValue = value.trim();
+  const showSend = trimmedValue.length > 0;
+
+  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">
+          <Textarea
+            ref={textareaRef}
+            placeholder={DEFAULT_COMPOSER_PLACEHOLDER}
+            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",
+              "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>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function MessengerLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      className={className}
+    >
+      <path d="M12 2C6.48 2 2 6.18 2 11.32c0 2.93 1.45 5.55 3.7 7.27v3.4l3.39-1.86a10.5 10.5 0 0 0 2.91.41c5.52 0 10-4.18 10-9.22S17.52 2 12 2Zm1.06 12.42-2.55-2.72-4.97 2.72 5.46-5.8 2.61 2.72 4.91-2.72-5.46 5.8Z" />
+    </svg>
+  );
+}
+
+export const MESSENGER_PRESET_GRADIENT = MESSENGER_GRADIENT;
+
+export const MESSENGER_PRESET_APPEARANCE = {
+  avatarOrbColor1: "#00B2FF",
+  avatarOrbColor2: "#006AFF",
+  actionText: "Chat with us",
+} as const;

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

@@ -3,11 +3,14 @@ import { createRoot, type Root } from "react-dom/client";
 import { DEFAULT_START_CONVERSATION_LABEL } from "../chat-widget/chat-widget-defaults";
 import {
   DEFAULT_WIDGET_APPEARANCE,
+  DEFAULT_WIDGET_PRESET,
   normalizeWidgetPlacement,
+  normalizeWidgetPreset,
   normalizeWidgetVariant,
   type WidgetAppearance,
   type WidgetMessage,
   type WidgetPlacement,
+  type WidgetPreset,
   type WidgetSessionConfig,
   type WidgetSessionState,
   type WidgetVariant,
@@ -38,6 +41,7 @@ export class AgentWidgetElement extends HTMLElement {
     "agent-id",
     "mode",
     "variant",
+    "preset",
     "placement",
     "avatar-orb-color-1",
     "avatar-orb-color-2",
@@ -52,6 +56,7 @@ export class AgentWidgetElement extends HTMLElement {
   private agentId = "";
   private mode: "embed" | "preview" = "embed";
   private variant: string | null = null;
+  private preset: string | null = null;
   private placement: string | null = null;
   private appearanceAttributes: WidgetAppearanceAttributes = {};
   private open = false;
@@ -139,6 +144,7 @@ export class AgentWidgetElement extends HTMLElement {
     this.agentId = this.getAttribute("agent-id")?.trim() ?? "";
     this.mode = normalizeWidgetMode(this.getAttribute("mode"));
     this.variant = this.getAttribute("variant");
+    this.preset = this.getAttribute("preset");
     this.placement = this.getAttribute("placement");
     this.appearanceAttributes = parseAppearanceAttributes(this);
   }
@@ -155,6 +161,14 @@ export class AgentWidgetElement extends HTMLElement {
     );
   }
 
+  private getResolvedPreset(): WidgetPreset {
+    return normalizeWidgetPreset(
+      this.preset ??
+        this.sessionConfig?.widgetConfig.widgetPreset ??
+        DEFAULT_WIDGET_PRESET,
+    );
+  }
+
   private getResolvedAppearance(): WidgetAppearance {
     const base =
       this.sessionConfig?.widgetConfig.widgetAppearance ?? DEFAULT_WIDGET_APPEARANCE;
@@ -231,6 +245,7 @@ export class AgentWidgetElement extends HTMLElement {
     const appearance = this.getResolvedAppearance();
     const placement = this.getResolvedPlacement();
     const variant = this.getResolvedVariant();
+    const preset = this.getResolvedPreset();
     const emptyAction =
       this.status === "booting" ||
       (this.sessionState != null && !this.sessionState.conversationId)
@@ -249,6 +264,7 @@ export class AgentWidgetElement extends HTMLElement {
         mode: this.mode,
         agentId: this.agentId,
         variant,
+        preset,
         placement,
         appearance,
         agentAvatarUrl: this.getAgentAvatarUrl(),

package/src/renderer/widget-runtime.tsx

@@ -3,12 +3,14 @@ import {
   ChatWidgetBubble,
   ChatWidgetBox,
   ChatWidgetChatBar,
+  ChatWidgetMessenger,
 } from "../chat-widget";
 import type { WidgetMessage } from "../types";
 import {
   splitWidgetPlacement,
   type WidgetAppearance,
   type WidgetPlacement,
+  type WidgetPreset,
   type WidgetVariant,
 } from "../shared/widget-config";
 import type { WidgetTriggerRule } from "../shared/widget-config";
@@ -25,6 +27,7 @@ export type WidgetRuntimeProps = {
   mode: WidgetRuntimeMode;
   agentId: string;
   variant: WidgetVariant;
+  preset?: WidgetPreset;
   placement: WidgetPlacement;
   appearance: WidgetAppearance;
   agentAvatarUrl: string | null;
@@ -57,10 +60,15 @@ const VARIANT_COMPONENTS = {
   chatbar: ChatWidgetChatBar,
 } as const;
 
+const PRESET_COMPONENTS = {
+  facebook_messenger: ChatWidgetMessenger,
+} as const;
+
 export function WidgetRuntime({
   mode,
   agentId,
   variant,
+  preset = "default",
   placement,
   appearance,
   agentAvatarUrl,
@@ -84,7 +92,12 @@ export function WidgetRuntime({
 }: WidgetRuntimeProps) {
   const { ready } = useWidgetTriggerGate(triggerRule);
   const { horizontal, vertical } = splitWidgetPlacement(placement);
-  const Component = VARIANT_COMPONENTS[variant] ?? ChatWidgetBubble;
+  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);
@@ -115,6 +128,7 @@ export function WidgetRuntime({
         data-horizontal={horizontal}
         data-vertical={vertical}
         data-variant={variant}
+        data-preset={preset}
         data-open={String(open)}
         data-status={status}
         style={shellStyle}

package/src/shared/widget-config.ts

@@ -14,6 +14,10 @@ export type WidgetPlacement =
 
 export type WidgetVariant = "default" | "chatbar" | "box";
 
+export type WidgetPreset = "default" | "facebook_messenger";
+
+export const DEFAULT_WIDGET_PRESET: WidgetPreset = "default";
+
 export type WidgetAppearance = ResolvedChatWidgetAppearance;
 
 export const DEFAULT_WIDGET_APPEARANCE: WidgetAppearance =
@@ -64,6 +68,20 @@ export function widgetAppearanceToAttributes(
   ];
 }
 
+export function normalizeWidgetPreset(
+  value: string | null | undefined,
+): WidgetPreset {
+  switch (value) {
+    case "facebook_messenger":
+    case "facebook-messenger":
+      return "facebook_messenger";
+    case "default":
+      return "default";
+    default:
+      return DEFAULT_WIDGET_PRESET;
+  }
+}
+
 export function normalizeWidgetVariant(
   value: string | null | undefined,
 ): WidgetVariant {

package/src/types.ts

@@ -1,17 +1,21 @@
 import type {
   WidgetAppearance,
   WidgetPlacement,
+  WidgetPreset,
   WidgetVariant,
   WidgetTriggerRule,
 } from "./shared/widget-config";
 
 export {
   DEFAULT_WIDGET_APPEARANCE,
+  DEFAULT_WIDGET_PRESET,
   type WidgetAppearance,
   type WidgetPlacement,
+  type WidgetPreset,
   type WidgetVariant,
   normalizeWidgetAppearance,
   normalizeWidgetPlacement,
+  normalizeWidgetPreset,
   normalizeWidgetVariant,
   splitWidgetPlacement,
   widgetAppearanceToAttributes,
@@ -37,6 +41,7 @@ export type WidgetSessionConfig = {
     spotlightMessages: string[];
     widgetAppearance: WidgetAppearance;
     widgetVariant: WidgetVariant;
+    widgetPreset: WidgetPreset;
     widgetPlacement: WidgetPlacement;
     allowedDomains: string[];
     triggerRule: WidgetTriggerRule | null;