@usereq/widget 0.1.4 → 0.1.5

package/package.json

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

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

@@ -10,25 +10,46 @@ import {
 } 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 {
+  ChevronDown,
+  SendHorizonal,
+  Phone,
+  Video,
+  Info,
+} 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,
+  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;
@@ -40,7 +61,6 @@ const fadeTransition = { duration: 0.35 };
 export function ChatWidgetMessenger({
   agentName = DEFAULT_AGENT_NAME_BUBBLE,
   agentAvatarUrl,
-  appearance,
   spotlightMessages = [],
   messages = [],
   poweredBy = DEFAULT_POWERED_BY,
@@ -50,7 +70,6 @@ export function ChatWidgetMessenger({
   sendDisabled = false,
   onSendMessage,
   isTyping,
-  onSuggestion,
   onLauncherClick,
   className,
   open,
@@ -120,7 +139,7 @@ export function ChatWidgetMessenger({
             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)]">
+            <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>
@@ -134,7 +153,7 @@ export function ChatWidgetMessenger({
           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"
+          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,
@@ -149,20 +168,16 @@ export function ChatWidgetMessenger({
             onStopConversation={onStopConversation ?? undefined}
             stopDisabled={stopDisabled}
           />
-          <div className="flex min-h-0 flex-1 flex-col bg-[#F5F5F7] dark:bg-background overflow-hidden">
-            <ChatWidgetMessages
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
+            <MessengerMessages
               messages={messages}
               isTyping={isTyping ?? status === "sending"}
               status={status}
-              suggestions={spotlightForFade}
               errorMessage={errorMessage}
-              appearance={appearance}
+              agentName={agentName}
+              agentAvatarUrl={agentAvatarUrl}
               onConfirmationDecision={onConfirmationDecision}
               onLinkClick={onLinkClick}
-              onSuggestion={(value: string) => {
-                setDraftValue(value);
-                onSuggestion?.(value);
-              }}
               emptyAction={emptyAction}
             />
           </div>
@@ -199,7 +214,7 @@ export function ChatWidgetMessenger({
           style={{
             width: LAUNCHER_SIZE,
             height: LAUNCHER_SIZE,
-            background: MESSENGER_GRADIENT,
+            backgroundColor: MESSENGER_BRAND_COLOR,
             boxShadow: "0 6px 20px rgba(0, 132, 255, 0.45)",
           }}
           aria-label={effectiveOpen ? "Close chat" : "Open chat"}
@@ -209,7 +224,7 @@ export function ChatWidgetMessenger({
           whileTap={previewOnly ? undefined : { scale: 0.96 }}
         >
           {effectiveOpen ? (
-            <X className="size-7" strokeWidth={2.4} />
+            <ChevronDown className="size-7" strokeWidth={2.4} />
           ) : (
             <MessengerLogo className="size-8" />
           )}
@@ -219,6 +234,169 @@ export function ChatWidgetMessenger({
   );
 }
 
+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,
@@ -237,7 +415,7 @@ function MessengerHeader({
   return (
     <div
       className="flex shrink-0 items-center gap-3 px-4 py-3 text-white"
-      style={{ background: MESSENGER_GRADIENT }}
+      style={{ backgroundColor: MESSENGER_BRAND_COLOR }}
     >
       <div className="relative">
         <Avatar size="lg" className="ring-2 ring-white/30">
@@ -287,11 +465,11 @@ function MessengerHeader({
         )}
         <button
           type="button"
-          aria-label="Close"
+          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"
         >
-          <X className="size-4.5" strokeWidth={2.4} />
+          <ChevronDown className="size-5" strokeWidth={2.4} />
         </button>
       </div>
     </div>
@@ -326,49 +504,47 @@ function MessengerComposer({
     submit();
   };
 
-  const trimmedValue = value.trim();
-  const showSend = trimmedValue.length > 0;
+  const hasText = value.trim().length > 0;
+  const sendDisabled = disabled || !onSubmit || !hasText;
 
   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">
+    <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={DEFAULT_COMPOSER_PLACEHOLDER}
+            placeholder="Aa"
             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",
+              "min-h-9 max-h-32 flex-1 resize-none border-0 bg-transparent py-2 text-[14px] leading-snug 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>
-        )}
+        <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>
   );