@usereq/widget 0.1.0

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

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

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

@@ -0,0 +1,248 @@
+"use client";
+
+import * as React from "react";
+import { motion } from "motion/react";
+import { ChevronDown, Search, Sparkles } from "lucide-react";
+import { cn } from "@usereq/ui/lib/utils";
+import { getChatWidgetGradientStyle } from "../chat-widget-appearance";
+import {
+  DEFAULT_AGENT_NAME_CHATBAR,
+  DEFAULT_LAUNCHER_LABEL,
+  DEFAULT_POWERED_BY,
+  DEFAULT_SPOTLIGHT_MESSAGES,
+} from "../chat-widget-defaults";
+import {
+  ChatWidgetComposer,
+  ChatWidgetHeader,
+  ChatWidgetMessages,
+  ChatWidgetPanel,
+  ChatWidgetPoweredBy,
+  useIsChatWidgetFullscreenViewport,
+  useSpotlightTyping,
+  useStableSpotlightMessages,
+  type ChatWidgetDataProps,
+} from "../components/chat-widget-primitives";
+
+const CHATBAR_WIDTH = 560;
+const CHATBAR_MIN_WIDTH = 320;
+const BAR_HEIGHT = 48;
+/** When open, bar shrinks to this size (full rounded chevron) */
+const BAR_OPEN_SIZE = 48;
+/** Same as Bubble/Box for consistent embed spacing */
+const PANEL_GAP = 10;
+
+const barTransition = { type: "spring" as const, stiffness: 400, damping: 35 };
+
+export function ChatWidgetChatBar({
+  agentName = DEFAULT_AGENT_NAME_CHATBAR,
+  agentAvatarUrl,
+  appearance,
+  spotlightMessages = [],
+  messages = [],
+  poweredBy = DEFAULT_POWERED_BY,
+  headerStatus = "Online",
+  errorMessage,
+  status = "idle",
+  sendDisabled = false,
+  launcherLabel = DEFAULT_LAUNCHER_LABEL,
+  onSendMessage,
+  isTyping,
+  onSuggestion,
+  onLauncherClick,
+  className,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  previewOnly = false,
+  onStopConversation,
+  stopDisabled,
+  onConfirmationDecision,
+  onLinkClick,
+  emptyAction,
+  portalContainer,
+}: ChatWidgetDataProps & {
+  /** Label on the closed bar pill (e.g. "Ask") */
+  launcherLabel?: 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 isFullscreenViewport = useIsChatWidgetFullscreenViewport();
+  const hideLauncher = isFullscreenViewport && effectiveOpen;
+  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 barPlaceholder =
+    useSpotlightTyping(spotlightForTyping) ||
+    spotlightForTyping[0] ||
+    DEFAULT_SPOTLIGHT_MESSAGES[0];
+  const barWrapperRef = React.useRef<HTMLDivElement>(null);
+  const [barWidth, setBarWidth] = React.useState(CHATBAR_WIDTH);
+
+  React.useEffect(() => {
+    if (effectiveOpen) return;
+    const el = barWrapperRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (typeof w === "number") setBarWidth(w);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [effectiveOpen]);
+
+  return (
+    <div
+      className={cn("relative w-full max-w-full shrink-0", className)}
+      style={{
+        maxWidth: CHATBAR_WIDTH,
+        minWidth: CHATBAR_MIN_WIDTH,
+        minHeight: BAR_HEIGHT,
+      }}
+    >
+      {/* Chat panel: full-screen on mobile, floating on desktop (hidden when previewOnly) */}
+      {!previewOnly && (
+        <ChatWidgetPanel
+          open={effectiveOpen}
+          onOpenChange={handleOpenChange}
+          portalContainer={portalContainer}
+          desktopClassName={cn(
+            "absolute left-0 right-0 mx-auto overflow-hidden rounded-2xl border bg-white/90 shadow-lg backdrop-blur-xl dark:bg-background/90",
+          )}
+          desktopStyle={{
+            width: "100%",
+            minWidth: CHATBAR_MIN_WIDTH,
+            maxWidth: CHATBAR_WIDTH,
+            bottom: BAR_HEIGHT + 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:p-2 md:max-h-85">
+            <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>
+      )}
+
+      {/* Bar: full width when closed, shrinks to full-rounded chevron when open */}
+      {!hideLauncher && (
+        <div className="absolute bottom-0 left-0 right-0 z-0 flex w-full justify-center">
+        <div
+          ref={barWrapperRef}
+          className="flex w-full max-w-full justify-center"
+        >
+          <motion.button
+            type="button"
+            onClick={
+              previewOnly
+                ? undefined
+                : () => {
+                    if (!effectiveOpen) {
+                      onLauncherClick?.();
+                    }
+                    handleOpenChange(!effectiveOpen);
+                  }
+            }
+            className={cn(
+              "flex shrink-0 items-center gap-2.5 rounded-full border bg-white/80 px-4 py-3 shadow-lg backdrop-blur-xl dark:bg-white/10",
+              effectiveOpen && "justify-center",
+              previewOnly && "pointer-events-none",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+            style={{ height: BAR_HEIGHT }}
+            initial={false}
+            animate={{
+              width: effectiveOpen ? BAR_OPEN_SIZE : barWidth,
+              borderRadius: 9999,
+            }}
+            transition={barTransition}
+            aria-label={effectiveOpen ? "Close chat" : "Open chat"}
+            aria-expanded={effectiveOpen}
+            whileHover={previewOnly ? undefined : { scale: 1.02 }}
+            whileTap={previewOnly ? undefined : { scale: 0.98 }}
+          >
+            {effectiveOpen ? (
+              <ChevronDown className="size-5 shrink-0 text-foreground" />
+            ) : (
+              <>
+                <Search className="size-5 shrink-0 text-muted-foreground" />
+                <span className="min-w-0 flex-1 truncate text-left text-sm text-muted-foreground">
+                  {barPlaceholder}
+                </span>
+                <div
+                  className="flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium text-white"
+                  style={
+                    appearance
+                      ? getChatWidgetGradientStyle(appearance)
+                      : undefined
+                  }
+                >
+                  <Sparkles className="size-4" />
+                  {appearance?.actionText?.trim() || launcherLabel}
+                </div>
+              </>
+            )}
+          </motion.button>
+        </div>
+        </div>
+      )}
+    </div>
+  );
+}