@usereq/widget 0.2.9 → 0.2.11

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

@@ -1,258 +0,0 @@
-"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>
-  );
-}

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

@@ -1,238 +0,0 @@
-"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 { ChevronDown } from "lucide-react";
-import {
-  DEFAULT_AGENT_NAME_BUBBLE,
-  DEFAULT_POWERED_BY,
-  DEFAULT_SPOTLIGHT_MESSAGES,
-} from "../chat-widget-defaults";
-import {
-  ChatWidgetComposer,
-  ChatWidgetHeader,
-  ChatWidgetMessages,
-  ChatWidgetPanel,
-  ChatWidgetPoweredBy,
-  useSpotlightFade,
-  useIsChatWidgetFullscreenViewport,
-  type ChatWidgetDataProps,
-} from "../components/chat-widget-primitives";
-import {
-  getChatWidgetAvatarStyle,
-  getChatWidgetGradientStyle,
-} from "../chat-widget-appearance";
-
-const PANEL_WIDTH = 360;
-const LAUNCHER_SIZE = 56;
-const SPOTLIGHT_GAP = 8;
-/** Gap between launcher and panel for embed-friendly spacing */
-const PANEL_GAP = 12;
-
-const fadeTransition = { duration: 0.4 };
-
-export function ChatWidgetBubble({
-  agentName = DEFAULT_AGENT_NAME_BUBBLE,
-  agentAvatarUrl,
-  appearance,
-  spotlightMessages = [],
-  messages = [],
-  poweredBy = DEFAULT_POWERED_BY,
-  headerStatus = "Online",
-  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;
-  /** 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 spotlightForTyping =
-    spotlightMessages.length > 0
-      ? spotlightMessages
-      : [...DEFAULT_SPOTLIGHT_MESSAGES];
-  const spotlightText = useSpotlightFade(spotlightForTyping, 3000);
-  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;
-
-  return (
-    <div
-      className={cn("relative", className)}
-      style={{
-        width: spotlightForTyping.length > 0 ? 260 : LAUNCHER_SIZE,
-        height:
-          spotlightForTyping.length > 0
-            ? LAUNCHER_SIZE + SPOTLIGHT_GAP + 56
-            : LAUNCHER_SIZE,
-      }}
-    >
-      {/* Spotlight: rotating messages above bubble (fade in/out), only when closed */}
-      {spotlightForTyping.length > 0 && !effectiveOpen && (
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={spotlightText}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={fadeTransition}
-            className="absolute right-0 bottom-[calc(56px+SPOTLIGHT_GAP)] flex w-full max-w-65 flex-col items-end"
-          >
-            <div className="rounded-2xl border bg-background/95 px-4 py-3 text-right shadow-lg backdrop-blur-sm dark:bg-background/90">
-              <p className="text-sm leading-relaxed text-foreground">
-                {spotlightText}
-              </p>
-            </div>
-            <div className="flex w-full justify-end pr-6" aria-hidden>
-              <span className="border-[6px] border-transparent border-t-background/95 bg-transparent dark:border-t-background/90" />
-            </div>
-          </motion.div>
-        </AnimatePresence>
-      )}
-
-      {/* 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: LAUNCHER_SIZE + 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 p-4 overflow-hidden">
-            <ChatWidgetMessages
-              messages={messages}
-              isTyping={isTyping ?? status === "sending"}
-              status={status}
-              suggestions={spotlightForTyping}
-              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="shrink-0 border-t p-3">
-              <ChatWidgetComposer
-                value={draftValue}
-                onChange={setDraftValue}
-                onSubmit={onSendMessage}
-                appearance={appearance}
-                disabled={sendDisabled || status === "booting"}
-              />
-              <ChatWidgetPoweredBy text={poweredBy} className="mt-2" />
-            </div>
-          )}
-        </ChatWidgetPanel>
-      )}
-
-      {/* Launcher: absolute bottom-right anchor for embed */}
-      {!hideLauncher && (
-        <motion.button
-          type="button"
-          onClick={
-            previewOnly
-              ? undefined
-              : () => {
-                  onLauncherClick?.();
-                  handleOpenChange(!effectiveOpen);
-                }
-          }
-          className={cn(
-            "absolute bottom-0 right-0 flex size-14 shrink-0 items-center justify-center rounded-full text-white shadow-lg",
-            previewOnly && "pointer-events-none",
-          )}
-          style={
-            appearance
-              ? (getChatWidgetGradientStyle(appearance) as any)
-              : undefined
-          }
-          aria-label={effectiveOpen ? "Close chat" : "Open chat"}
-          aria-expanded={effectiveOpen}
-          animate={{ scale: 1 }}
-          whileHover={previewOnly ? undefined : { scale: 1.02 }}
-          whileTap={previewOnly ? undefined : { scale: 0.98 }}
-        >
-          {effectiveOpen ? (
-            <ChevronDown className="size-6" />
-          ) : (
-            <Avatar
-              className="size-12"
-              style={
-                appearance ? getChatWidgetAvatarStyle(appearance) : undefined
-              }
-            >
-              {agentAvatarUrl ? (
-                <AvatarImage src={agentAvatarUrl} alt={agentName} />
-              ) : null}
-              <AvatarFallback className="bg-transparent text-white">
-                {agentName.slice(0, 2).toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
-          )}
-        </motion.button>
-      )}
-    </div>
-  );
-}