@usereq/widget 0.2.9 → 0.2.10

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

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