@usereq/widget 0.2.8 → 0.2.10

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

@@ -1,573 +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 { Button } from "@usereq/ui/components/button";
-import { Textarea } from "@usereq/ui/components/textarea";
-import {
-  ChevronDown,
-  SendHorizonal,
-  Phone,
-  Video,
-  Info,
-} from "lucide-react";
-import {
-  DEFAULT_AGENT_NAME_BUBBLE,
-  DEFAULT_POWERED_BY,
-  DEFAULT_SPOTLIGHT_MESSAGES,
-} from "../chat-widget-defaults";
-import {
-  ChatWidgetPanel,
-  ChatWidgetPoweredBy,
-  ChatWidgetTyping,
-  useIsChatWidgetFullscreenViewport,
-  useSpotlightFade,
-  type ChatWidgetDataProps,
-  type ChatWidgetPreviewMessage,
-} from "../components/chat-widget-primitives";
-import {
-  Conversation,
-  ConversationContent,
-  ConversationEmptyState,
-  ConversationScrollButton,
-} from "../components/conversation";
-import { foldStopConfirmationMessages } from "../stop-confirmation";
-import { getChatWidgetMessagesLayoutClasses } from "../components/chat-widget-layout";
-import {
-  Message,
-  MessageContent,
-  MessageResponse,
-} from "../components/message";
-
-const MESSENGER_GRADIENT =
-  "linear-gradient(135deg, #00B2FF 0%, #006AFF 50%, #8E5BFF 100%)";
-
-const MESSENGER_BRAND_COLOR = "#0084FF";
-
-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,
-  spotlightMessages = [],
-  messages = [],
-  poweredBy = DEFAULT_POWERED_BY,
-  headerStatus = "Active now",
-  errorMessage,
-  status = "idle",
-  sendDisabled = false,
-  onSendMessage,
-  isTyping,
-  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-background 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-border"
-          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 overflow-hidden bg-background">
-            <MessengerMessages
-              messages={messages}
-              isTyping={isTyping ?? status === "sending"}
-              status={status}
-              errorMessage={errorMessage}
-              agentName={agentName}
-              agentAvatarUrl={agentAvatarUrl}
-              onConfirmationDecision={onConfirmationDecision}
-              onLinkClick={onLinkClick}
-              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,
-            backgroundColor: MESSENGER_BRAND_COLOR,
-            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 ? (
-            <ChevronDown className="size-7" strokeWidth={2.4} />
-          ) : (
-            <MessengerLogo className="size-8" />
-          )}
-        </motion.button>
-      )}
-    </div>
-  );
-}
-
-function MessengerMessages({
-  messages,
-  isTyping,
-  status,
-  errorMessage,
-  agentName,
-  agentAvatarUrl,
-  onConfirmationDecision,
-  onLinkClick,
-  emptyAction,
-}: {
-  messages: ChatWidgetPreviewMessage[];
-  isTyping: boolean;
-  status: ChatWidgetDataProps["status"];
-  errorMessage?: string | null;
-  agentName: string;
-  agentAvatarUrl?: string | null;
-  onConfirmationDecision?: ChatWidgetDataProps["onConfirmationDecision"];
-  onLinkClick?: (linkUrl: string) => void;
-  emptyAction?: { label: string; onClick: () => void; disabled?: boolean };
-}) {
-  const { scrollClassName, contentClassName } =
-    getChatWidgetMessagesLayoutClasses();
-  const renderedMessages = React.useMemo(
-    () => foldStopConfirmationMessages(messages),
-    [messages],
-  );
-
-  if (messages.length === 0 && !isTyping) {
-    if (status === "error") {
-      return (
-        <div className="flex h-full items-center justify-center px-6 py-8 text-center text-sm text-destructive">
-          {errorMessage ?? "Something went wrong."}
-        </div>
-      );
-    }
-
-    return (
-      <div className="flex min-h-full flex-1 items-center justify-center px-6 py-8">
-        <ConversationEmptyState className="w-full max-w-[280px] gap-4">
-          <Avatar
-            className="size-16 ring-4 ring-background"
-            style={{
-              boxShadow: "0 6px 18px rgba(0, 132, 255, 0.25)",
-            }}
-          >
-            {agentAvatarUrl ? (
-              <AvatarImage src={agentAvatarUrl} alt={agentName} />
-            ) : null}
-            <AvatarFallback
-              className="text-white text-base font-semibold"
-              style={{ backgroundColor: MESSENGER_BRAND_COLOR }}
-            >
-              {agentName.slice(0, 2).toUpperCase()}
-            </AvatarFallback>
-          </Avatar>
-          <div>
-            <p className="text-[15px] font-semibold leading-tight text-foreground">
-              {agentName}
-            </p>
-            <p className="mt-1.5 text-[13px] leading-snug text-muted-foreground">
-              Typically replies in a few minutes.
-            </p>
-          </div>
-          {emptyAction && (
-            <Button
-              size="lg"
-              disabled={emptyAction.disabled}
-              onClick={emptyAction.onClick}
-              className="rounded-full px-6 text-white shadow-[0_4px_12px_rgba(0,132,255,0.35)] hover:opacity-95 disabled:opacity-60"
-              style={{ backgroundColor: MESSENGER_BRAND_COLOR }}
-            >
-              {emptyAction.label}
-            </Button>
-          )}
-        </ConversationEmptyState>
-      </div>
-    );
-  }
-
-  return (
-    <Conversation className="relative size-full">
-      <ConversationContent
-        scrollClassName={scrollClassName}
-        className={cn(contentClassName, "gap-1.5 px-3 py-3")}
-      >
-        {renderedMessages.map((item) => {
-          if (item.type === "confirmation") {
-            return (
-              <Message key={item.message.id} from="assistant">
-                <div className="flex w-fit max-w-[80%] shrink-0 flex-col gap-2">
-                  <MessageResponse
-                    confirmation={item.latestEnvelope}
-                    confirmationPrompt={item.envelope.prompt}
-                    confirmationActionsDisabled={status === "sending"}
-                    onConfirmationDecision={onConfirmationDecision}
-                  />
-                </div>
-              </Message>
-            );
-          }
-
-          const m = item.message;
-          const isUser = m.role === "user";
-          return (
-            <Message key={m.id} from={m.role}>
-              <div className="flex w-fit max-w-[80%] shrink-0 flex-col gap-1.5">
-                <MessageContent
-                  className={cn(
-                    "whitespace-pre-wrap rounded-[18px] px-3.5 py-2 text-[14px] leading-snug",
-                    isUser
-                      ? "text-white"
-                      : "bg-secondary text-secondary-foreground",
-                  )}
-                  style={
-                    isUser ? { background: MESSENGER_GRADIENT } : undefined
-                  }
-                >
-                  {isUser ? (
-                    m.content
-                  ) : (
-                    <MessageResponse onLinkClick={onLinkClick}>
-                      {m.content}
-                    </MessageResponse>
-                  )}
-                </MessageContent>
-                {m.actions && m.actions.length > 0 && (
-                  <div className="flex flex-wrap gap-2">
-                    {m.actions.map((action, i) => (
-                      <Button
-                        key={i}
-                        size="sm"
-                        variant={action.variant ?? "outline"}
-                        onClick={action.onClick}
-                        className="rounded-full"
-                      >
-                        {action.label}
-                      </Button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </Message>
-          );
-        })}
-        {isTyping && (
-          <motion.div
-            initial={{ opacity: 0, y: 6 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.2, ease: "easeOut" }}
-            className="flex w-full justify-start"
-          >
-            <div className="flex max-w-[80%] items-center rounded-[18px] bg-secondary px-3.5 py-2 text-secondary-foreground">
-              <ChatWidgetTyping className="bg-transparent! p-0!" />
-            </div>
-          </motion.div>
-        )}
-      </ConversationContent>
-      <ConversationScrollButton />
-    </Conversation>
-  );
-}
-
-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={{ backgroundColor: MESSENGER_BRAND_COLOR }}
-    >
-      <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="Minimize"
-          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"
-        >
-          <ChevronDown className="size-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 hasText = value.trim().length > 0;
-  const sendDisabled = disabled || !onSubmit || !hasText;
-
-  return (
-    <div className="shrink-0 border-t border-border bg-background px-2 py-2">
-      <div className="flex items-end gap-0.5">
-        {/* Tool icons (Plus / Camera / Image / Mic) temporarily disabled. */}
-        <div className="flex flex-1 items-end rounded-3xl bg-secondary px-3.5">
-          <Textarea
-            ref={textareaRef}
-            placeholder="Aa"
-            value={value}
-            onChange={(e) => onChange(e.target.value)}
-            onKeyDown={handleKeyDown}
-            rows={1}
-            disabled={disabled}
-            autoResize
-            className={cn(
-              "min-h-9 max-h-32 flex-1 border-0 bg-transparent py-2 text-[14px] leading-snug shadow-none",
-              "focus-visible:ring-0 focus-visible:border-0",
-            )}
-          />
-        </div>
-        <button
-          type="button"
-          aria-label="Send"
-          onClick={submit}
-          disabled={sendDisabled}
-          className={cn(
-            "ml-1 flex size-9 shrink-0 items-center justify-center rounded-full transition-colors",
-            "hover:bg-secondary disabled:hover:bg-transparent",
-          )}
-          style={{ color: MESSENGER_BRAND_COLOR }}
-        >
-          <SendHorizonal
-            className={cn(
-              "size-5 transition-opacity",
-              sendDisabled && "opacity-40",
-            )}
-            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;