@cimplify/sdk 0.96.0 → 0.97.0

package/dist/react.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { DURATION_UNIT, getVariantDisplayName, INPUT_FIELD_TYPE, isMultiDayService, serviceBillingMultiplier, PRODUCT_TYPE, BOUNDARY_KIND, resolveGallery, RENDER_HINT, DEFAULT_CDN_BASE_URL } from './chunk-RRBY35TJ.mjs';
 export { getVariantDisplayName } from './chunk-RRBY35TJ.mjs';
-import { messagePreview } from './chunk-U4MW6PYU.mjs';
+import { messagePreview, splitGenUIContent } from './chunk-U4MW6PYU.mjs';
 export { messagePreview, splitGenUIContent } from './chunk-U4MW6PYU.mjs';
 import { SESSION_CLAIMED, SESSION_CLEARED, createCimplifyClient, MUTATION_ERROR } from './chunk-XMDLF5Y6.mjs';
 import { generateIdempotencyKey, ELEMENT_TYPES, EVENT_TYPES, startSignIn } from './chunk-VUSHG3HA.mjs';
@@ -3091,8 +3091,8 @@ function fmtScheduleWindow(start, end) {
   const startStr = format(s, "EEE, MMM d \xB7 h:mm a");
   const e = end ? parseISO(end) : null;
   if (e && isValid(e)) {
-    const sameDay = s.toDateString() === e.toDateString();
-    return `${startStr} \u2013 ${format(e, sameDay ? "h:mm a" : "EEE, MMM d \xB7 h:mm a")}`;
+    const sameDay2 = s.toDateString() === e.toDateString();
+    return `${startStr} \u2013 ${format(e, sameDay2 ? "h:mm a" : "EEE, MMM d \xB7 h:mm a")}`;
   }
   return startStr;
 }
@@ -5883,6 +5883,33 @@ function useBootstrap(options = {}) {
   const { data, isLoading, error, refetch } = bootstrapQuery(options);
   return { bootstrap: data, isLoading, error, refetch };
 }
+
+// src/react/chat-model.ts
+var OPTIMISTIC_ID_PREFIX = "opt_";
+function optimisticId(clientId) {
+  return `${OPTIMISTIC_ID_PREFIX}${clientId}`;
+}
+function isOptimistic(message) {
+  return message.id.startsWith(OPTIMISTIC_ID_PREFIX);
+}
+function partitionMessages(messages) {
+  const bubbles = [];
+  const reactionsByTarget = /* @__PURE__ */ new Map();
+  for (const message of messages) {
+    if (message.content_type === "reaction") {
+      const targetId = message.reply_to?.id;
+      if (!targetId) continue;
+      const list = reactionsByTarget.get(targetId);
+      if (list) list.push(message);
+      else reactionsByTarget.set(targetId, [message]);
+      continue;
+    }
+    bubbles.push(message);
+  }
+  return { bubbles, reactionsByTarget };
+}
+
+// src/react/hooks/use-chat.ts
 var POLL_INTERVAL_MS = 3e3;
 var POLL_IDLE_INTERVAL_MS = 15e3;
 var IDLE_TIMEOUT_MS = 6e4;
@@ -5897,10 +5924,10 @@ function mergeMessages(prev, incoming) {
     (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
   );
   const confirmed = new Set(
-    merged.filter((m) => !m.id.startsWith("opt_") && m.client_id).map((m) => m.client_id)
+    merged.filter((m) => !isOptimistic(m) && m.client_id).map((m) => m.client_id)
   );
   return merged.filter(
-    (m) => !(m.id.startsWith("opt_") && m.client_id && confirmed.has(m.client_id))
+    (m) => !(isOptimistic(m) && m.client_id && confirmed.has(m.client_id))
   );
 }
 function useChat(options = {}) {
@@ -5963,7 +5990,7 @@ function useChat(options = {}) {
   const lastConfirmedMessage = useCallback(() => {
     const list = messagesRef.current;
     for (let i = list.length - 1; i >= 0; i--) {
-      if (!list[i].id.startsWith("opt_")) return list[i];
+      if (!isOptimistic(list[i])) return list[i];
     }
     return void 0;
   }, []);
@@ -6011,7 +6038,7 @@ function useChat(options = {}) {
       const snapshotIds = new Set(snapshot.map((m) => m.id));
       const tail = snapshot.length > 0 ? new Date(snapshot[snapshot.length - 1].created_at).getTime() : 0;
       const extras = prev.filter(
-        (m) => !snapshotIds.has(m.id) && (m.id.startsWith("opt_") || new Date(m.created_at).getTime() > tail)
+        (m) => !snapshotIds.has(m.id) && (isOptimistic(m) || new Date(m.created_at).getTime() > tail)
       );
       return mergeMessages(snapshot, extras);
     });
@@ -6197,9 +6224,9 @@ function useChat(options = {}) {
       }
       const replyTo = opts?.replyTo;
       const clientId = generateIdempotencyKey();
-      const optimisticId = `opt_${clientId}`;
+      const localId = optimisticId(clientId);
       const optimistic = {
-        id: optimisticId,
+        id: localId,
         sender_type: "customer",
         content: content.trim(),
         content_type: attachments.length > 0 ? "image" : "text",
@@ -6229,14 +6256,14 @@ function useChat(options = {}) {
             // The websocket may have already streamed the confirmed message
             // in while the POST was in flight; drop the optimistic bubble
             // instead of inserting a duplicate.
-            prev.some((m) => m.id === confirmed.id) ? prev.filter((m) => m.id !== optimisticId) : prev.map((m) => m.id === optimisticId ? confirmed : m)
+            prev.some((m) => m.id === confirmed.id) ? prev.filter((m) => m.id !== localId) : prev.map((m) => m.id === localId ? confirmed : m)
           )
         );
         if (aiEnabledRef.current && !humanRequestedRef.current) {
           startAwaitingReply();
         }
       } else {
-        setMessages((prev) => prev.filter((m) => m.id !== optimisticId));
+        setMessages((prev) => prev.filter((m) => m.id !== localId));
         setError(result.error);
       }
       setIsSending(false);
@@ -6255,7 +6282,7 @@ function useChat(options = {}) {
   );
   const react = useCallback(
     async (message, emoji) => {
-      if (!client || message.id.startsWith("opt_")) return false;
+      if (!client || isOptimistic(message)) return false;
       const result = await client.support.reactToMessage(message.id, emoji);
       if (result.ok) appendMessages([result.value]);
       return result.ok;
@@ -10429,7 +10456,7 @@ function CartLineItemRow({
   });
   const hasComposite = item.compositeSelections && item.compositeSelections.length > 0;
   const hasBundle = item.bundleSelections && item.bundleSelections.length > 0;
-  const isOptimistic = item.isOptimistic === true;
+  const isOptimistic2 = item.isOptimistic === true;
   const lineTotal = parsePrice(unitPrice) * item.quantity;
   const imageUrl = item.product.image_url;
   const variantLabel2 = item.variant ? getVariantDisplayName(item.variant, item.product.name) : null;
@@ -10437,10 +10464,10 @@ function CartLineItemRow({
     "div",
     {
       "data-cimplify-cart-item": true,
-      "data-optimistic": isOptimistic ? "true" : void 0,
+      "data-optimistic": isOptimistic2 ? "true" : void 0,
       className: cn(
         "group relative flex gap-3 py-4 border-b border-border last:border-b-0 transition-opacity",
-        isOptimistic && "opacity-60",
+        isOptimistic2 && "opacity-60",
         classNames?.item
       ),
       children: [
@@ -10607,7 +10634,7 @@ function CartSummary({
     tax,
     total,
     isEmpty,
-    isOptimistic,
+    isOptimistic: isOptimistic2,
     pendingOpCount,
     removeItem,
     updateQuantity
@@ -10633,7 +10660,7 @@ function CartSummary({
     "div",
     {
       "data-cimplify-cart-summary": true,
-      "data-optimistic": isOptimistic ? "true" : void 0,
+      "data-optimistic": isOptimistic2 ? "true" : void 0,
       "data-pending-ops": pendingOpCount > 0 ? pendingOpCount : void 0,
       className: cn(className, classNames?.root),
       children: isEmpty ? /* @__PURE__ */ jsx("div", { "data-cimplify-cart-empty": true, className: classNames?.empty, children: /* @__PURE__ */ jsx("p", { children: emptyMessage }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -17119,25 +17146,12 @@ var ChatMarkdown = memo(function ChatMarkdown2({
   }
   return /* @__PURE__ */ jsx(SettledMarkdown, { text, className });
 });
-
-// src/react/chat-model.ts
-function partitionMessages(messages) {
-  const bubbles = [];
-  const reactionsByTarget = /* @__PURE__ */ new Map();
-  for (const message of messages) {
-    if (message.content_type === "reaction") {
-      const targetId = message.reply_to?.id;
-      if (!targetId) continue;
-      const list = reactionsByTarget.get(targetId);
-      if (list) list.push(message);
-      else reactionsByTarget.set(targetId, [message]);
-      continue;
-    }
-    bubbles.push(message);
-  }
-  return { bubbles, reactionsByTarget };
-}
 var MAX_ATTACHMENT_BYTES = 5 * 1024 * 1024;
+var KEEP_DISMISSED_KEY = "cimplify_keep_chat_dismissed";
+var AT_BOTTOM_SLACK_PX = 48;
+function proseOf(content) {
+  return splitGenUIContent(content).filter((segment) => segment.kind === "prose").map((segment) => segment.text).join("\n\n").trim();
+}
 function ChatWidget({
   client: clientProp,
   businessName = "Support",
@@ -17156,6 +17170,7 @@ function ChatWidget({
   const [open, setOpen] = useState(defaultOpen);
   const [readAt, setReadAt] = useState(null);
   const [attachError, setAttachError] = useState(null);
+  const [replyTo, setReplyTo] = useState(null);
   const {
     messages,
     isLoading,
@@ -17164,11 +17179,15 @@ function ChatWidget({
     seenAt,
     error,
     isActive,
+    humanRequested,
     claimedAs,
     signOut,
     send,
     react,
+    requestHuman,
     startConversation,
+    loadOlder,
+    mayHaveOlder,
     openIfExisting
   } = useChat({ client, pollInterval });
   const showTyping = isSending || awaitingReply;
@@ -17203,9 +17222,11 @@ function ChatWidget({
   const handleSend = useCallback(
     (content) => {
       setAttachError(null);
-      return send(content);
+      const target = replyTo;
+      setReplyTo(null);
+      return send(content, target ? { replyTo: target } : void 0);
     },
-    [send]
+    [send, replyTo]
   );
   const unread = open ? 0 : messages.filter(
     (m) => m.sender_type !== "customer" && (!readAt || m.created_at > readAt)
@@ -17244,6 +17265,7 @@ function ChatWidget({
         open && /* @__PURE__ */ jsx(
           Panel,
           {
+            client,
             businessName,
             greeting,
             subtitle,
@@ -17257,11 +17279,18 @@ function ChatWidget({
             error: error ?? attachError,
             isActive,
             isLeft,
+            humanRequested,
+            mayHaveOlder,
+            replyTo,
             claimedAs,
             onSignOut: () => void signOut(),
             onClose: handleClose,
             onSend: handleSend,
             onReact: react,
+            onReply: setReplyTo,
+            onCancelReply: () => setReplyTo(null),
+            onRequestHuman: () => void requestHuman(),
+            onLoadOlder: () => void loadOlder(),
             onAttach: attachPhoto,
             onStartConversation: startConversation,
             classNames
@@ -17296,7 +17325,7 @@ function Bubble({
           {
             className: cn(
               "absolute -right-0.5 -top-0.5 flex h-5 w-5 items-center justify-center",
-              "rounded-full bg-red-500 text-[10px] font-bold text-white",
+              "rounded-full bg-destructive text-[10px] font-bold text-white",
               "ring-2 ring-background"
             ),
             children: unread > 9 ? "9+" : unread
@@ -17307,6 +17336,7 @@ function Bubble({
   );
 }
 function Panel({
+  client,
   businessName,
   greeting,
   subtitle,
@@ -17320,11 +17350,18 @@ function Panel({
   error,
   isActive,
   isLeft,
+  humanRequested,
+  mayHaveOlder,
+  replyTo,
   claimedAs,
   onSignOut,
   onClose,
   onSend,
   onReact,
+  onReply,
+  onCancelReply,
+  onRequestHuman,
+  onLoadOlder,
   onAttach,
   onStartConversation,
   classNames
@@ -17364,20 +17401,56 @@ function Panel({
           MessageList,
           {
             messages,
+            businessName,
             isLoading,
             isSending: isTyping,
             seenAt,
+            humanRequested,
+            mayHaveOlder,
             onReact,
+            onReply,
+            onRequestHuman,
+            onLoadOlder,
             className: classNames?.messages
           }
         ),
-        error != null && /* @__PURE__ */ jsx("div", { className: "border-t border-red-200 bg-red-50 px-4 py-2 text-xs text-red-600", children: error.userMessage || "Something went wrong. Please try again." }),
+        isActive && !claimedAs && client && /* @__PURE__ */ jsx(KeepConversation, { client }),
+        humanRequested && isActive && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-border bg-muted/50 px-4 py-2 text-[11px] text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 flex-shrink-0 animate-pulse rounded-full bg-amber-500" }),
+          "Waiting for ",
+          businessName,
+          " \u2014 usually replies in minutes"
+        ] }),
+        error != null && /* @__PURE__ */ jsx("div", { className: "border-t border-destructive/20 bg-destructive/10 px-4 py-2 text-xs text-destructive", children: error.userMessage || "Something went wrong. Please try again." }),
+        replyTo && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 border-t border-border bg-muted/50 px-4 py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-[3px] shrink-0 self-stretch rounded-full bg-foreground/40" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-[11px] font-semibold text-foreground", children: [
+              "Replying to ",
+              replyTo.sender_type === "customer" ? "yourself" : businessName
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] text-muted-foreground", children: proseOf(replyTo.content) || "Photo" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Cancel reply",
+              onClick: onCancelReply,
+              className: "flex-shrink-0 p-0.5 text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
           ChatInput,
           {
             placeholder,
             isSending,
-            onSend: isActive ? onSend : onStartConversation,
+            onSend: isActive ? onSend : async (text) => {
+              await onStartConversation(text);
+              return true;
+            },
             onAttach,
             className: classNames?.input
           }
@@ -17406,10 +17479,10 @@ function Header({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-[10px] bg-white/15", children: /* @__PURE__ */ jsx(ChatIcon, { className: "h-5 w-5" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-[10px] bg-background/15", children: /* @__PURE__ */ jsx(ChatIcon, { className: "h-5 w-5" }) }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx("div", { className: "truncate text-[15px] font-semibold leading-tight", children: businessName }),
-          claimedAs ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 truncate text-xs text-white/60", children: [
+          claimedAs ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 truncate text-xs text-background/60", children: [
             /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
               "Chatting as ",
               claimedAs
@@ -17420,11 +17493,11 @@ function Header({
               {
                 type: "button",
                 onClick: onSignOut,
-                className: "flex-shrink-0 underline underline-offset-2 hover:text-white",
+                className: "flex-shrink-0 underline underline-offset-2 hover:text-background",
                 children: "Not you?"
               }
             )
-          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-white/60", children: [
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-background/60", children: [
             /* @__PURE__ */ jsx("span", { className: "h-[7px] w-[7px] flex-shrink-0 rounded-full bg-emerald-400" }),
             "Online"
           ] })
@@ -17437,7 +17510,7 @@ function Header({
             "aria-label": "Close chat",
             className: cn(
               "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg",
-              "bg-white/10 text-white/70 transition-colors hover:bg-white/20 hover:text-white"
+              "bg-background/10 text-background/70 transition-colors hover:bg-background/20 hover:text-background"
             ),
             children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-[18px] w-[18px]" })
           }
@@ -17500,32 +17573,73 @@ function lastSeenCustomerMessageId(bubbles, seenAt) {
   }
   return null;
 }
+function dayLabel(at) {
+  const date = new Date(at);
+  const today = /* @__PURE__ */ new Date();
+  if (date.toDateString() === today.toDateString()) return "Today";
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+  if (date.toDateString() === yesterday.toDateString()) return "Yesterday";
+  return date.toLocaleDateString([], { weekday: "short", day: "numeric", month: "short" });
+}
 function MessageList({
   messages,
+  businessName,
   isLoading,
   isSending,
   seenAt,
+  humanRequested,
+  mayHaveOlder,
   onReact,
+  onReply,
+  onRequestHuman,
+  onLoadOlder,
   className
 }) {
-  const { bubbles, reactionsByTarget } = partitionMessages(messages);
+  const scrolledUpRef = useRef(false);
+  const partitioned = partitionMessages(messages);
+  const bubbles = partitioned.bubbles.filter(
+    (m) => m.sender_type === "system" || m.attachments.length > 0 || (m.sender_type === "customer" ? m.content.trim() !== "" : proseOf(m.content) !== "")
+  );
+  const reactionsByTarget = partitioned.reactionsByTarget;
   const seenMessageId = lastSeenCustomerMessageId(bubbles, seenAt);
+  const lastBubble = bubbles[bubbles.length - 1];
+  const offerHuman = !humanRequested && lastBubble?.sender_type === "bot" && !isSending;
+  const handleScroll = (event) => {
+    const node = event.currentTarget;
+    scrolledUpRef.current = node.scrollHeight - node.scrollTop - node.clientHeight >= AT_BOTTOM_SLACK_PX;
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      onScroll: handleScroll,
       className: cn(
         "flex flex-1 flex-col gap-1 overflow-y-auto bg-muted/50 px-5 py-5",
         className
       ),
       children: [
         isLoading && messages.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(TypingDots, {}) }),
+        mayHaveOlder && /* @__PURE__ */ jsx("div", { className: "flex justify-center pb-2", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onLoadOlder,
+            className: "rounded-full border border-border bg-background px-3 py-1 text-[11px] font-semibold text-muted-foreground hover:text-foreground",
+            children: "Show earlier messages"
+          }
+        ) }),
         bubbles.map((msg, i) => {
           const isCustomer = msg.sender_type === "customer";
           const prev = bubbles[i - 1];
           const sameSenderAsPrev = prev?.sender_type === msg.sender_type;
-          const isOptimistic = msg.id.startsWith("opt_");
+          const optimistic = isOptimistic(msg);
           const reactions = reactionsByTarget.get(msg.id);
+          const newDay = !prev || !sameDay(prev.created_at, msg.created_at);
+          if (msg.sender_type === "system") {
+            return /* @__PURE__ */ jsx("div", { className: "my-2 text-center text-[11px] font-medium text-muted-foreground", children: msg.content }, msg.id);
+          }
           return /* @__PURE__ */ jsxs("div", { children: [
+            newDay && /* @__PURE__ */ jsx("div", { className: "my-2 text-center text-[10px] font-semibold tracking-wide text-muted-foreground", children: dayLabel(msg.created_at) }),
             !sameSenderAsPrev && i > 0 && /* @__PURE__ */ jsx("div", { className: "h-3" }),
             /* @__PURE__ */ jsxs(
               "div",
@@ -17535,17 +17649,7 @@ function MessageList({
                   isCustomer ? "ml-auto" : "mr-auto"
                 ),
                 children: [
-                  !isCustomer && !isOptimistic && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 right-0 z-10 hidden gap-0.5 rounded-full border border-border bg-background px-1 py-0.5 shadow-sm group-hover:flex", children: QUICK_REACTIONS.map((emoji) => /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": `React ${emoji}`,
-                      onClick: () => void onReact(msg, emoji),
-                      className: "flex h-6 w-6 items-center justify-center rounded-full text-[13px] hover:bg-muted",
-                      children: emoji
-                    },
-                    emoji
-                  )) }),
+                  !isCustomer && !optimistic && /* @__PURE__ */ jsx(HoverRail, { message: msg, onReact, onReply }),
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
@@ -17553,13 +17657,10 @@ function MessageList({
                         "rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed",
                         isCustomer ? "bg-foreground text-background" : "border border-border bg-background text-foreground",
                         isCustomer ? sameSenderAsPrev ? "rounded-tr" : "rounded-br" : sameSenderAsPrev ? "rounded-tl" : "rounded-bl",
-                        isOptimistic && "opacity-70"
+                        optimistic && "opacity-70"
                       ),
                       children: [
-                        !isCustomer && !sameSenderAsPrev && /* @__PURE__ */ jsxs("span", { className: "mb-1 inline-flex items-center gap-1 rounded bg-violet-100 px-1.5 py-0.5 text-[10px] font-semibold text-violet-600", children: [
-                          /* @__PURE__ */ jsx(SparkleIcon, { className: "h-[11px] w-[11px]" }),
-                          "AI"
-                        ] }),
+                        !sameSenderAsPrev && /* @__PURE__ */ jsx(SenderChip, { sender: msg.sender_type, businessName }),
                         msg.reply_to && /* @__PURE__ */ jsxs(
                           "div",
                           {
@@ -17607,7 +17708,7 @@ function MessageList({
                         isCustomer ? msg.content && /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children: msg.content }) : /* @__PURE__ */ jsx(
                           ChatMarkdown,
                           {
-                            text: msg.content,
+                            text: proseOf(msg.content),
                             className: "[&_p]:my-0 [&_p+p]:mt-1.5 [&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:my-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:my-0.5 [&_h1]:text-sm [&_h1]:font-bold [&_h2]:text-sm [&_h2]:font-bold [&_h3]:text-sm [&_h3]:font-semibold [&_hr]:my-2 [&_table]:my-1 [&_table]:w-full [&_th]:pb-1 [&_th]:text-left [&_th]:text-[10px] [&_th]:font-semibold [&_th]:uppercase [&_td]:py-1 [&_td:last-child]:text-right [&_td:last-child]:font-semibold [&_td:last-child]:tabular-nums [&_a]:underline"
                           }
                         )
@@ -17629,11 +17730,20 @@ function MessageList({
           ] }, msg.id);
         }),
         isSending && /* @__PURE__ */ jsx("div", { className: "mr-auto mt-1", children: /* @__PURE__ */ jsx(TypingDots, {}) }),
+        offerHuman && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRequestHuman,
+            className: "rounded-full border border-border bg-background px-3 py-1.5 text-xs font-semibold text-foreground hover:border-foreground",
+            children: "Talk to a person"
+          }
+        ) }),
         /* @__PURE__ */ jsx(
           "div",
           {
             ref: (node) => {
-              node?.scrollIntoView({ behavior: "smooth" });
+              if (node && !scrolledUpRef.current) node.scrollIntoView({ behavior: "smooth" });
             }
           },
           `${messages.length}:${isSending}`
@@ -17642,6 +17752,190 @@ function MessageList({
     }
   );
 }
+function sameDay(a, b) {
+  return new Date(a).toDateString() === new Date(b).toDateString();
+}
+function SenderChip({
+  sender,
+  businessName
+}) {
+  if (sender === "bot") {
+    return /* @__PURE__ */ jsxs("span", { className: "mb-1 inline-flex items-center gap-1 rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary", children: [
+      /* @__PURE__ */ jsx(SparkleIcon, { className: "h-[11px] w-[11px]" }),
+      "AI"
+    ] });
+  }
+  if (sender === "agent") {
+    return /* @__PURE__ */ jsx("span", { className: "mb-1 inline-flex items-center rounded bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground", children: businessName });
+  }
+  return null;
+}
+function HoverRail({
+  message,
+  onReact,
+  onReply
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "absolute -top-3 right-0 z-10 hidden gap-0.5 rounded-full border border-border bg-background px-1 py-0.5 shadow-sm group-hover:flex", children: [
+    QUICK_REACTIONS.map((emoji) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `React ${emoji}`,
+        onClick: () => void onReact(message, emoji),
+        className: "flex h-6 w-6 items-center justify-center rounded-full text-[13px] hover:bg-muted",
+        children: emoji
+      },
+      emoji
+    )),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Reply",
+        onClick: () => onReply(message),
+        className: "flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground",
+        children: /* @__PURE__ */ jsx(ReplyIcon, { className: "h-3.5 w-3.5" })
+      }
+    )
+  ] });
+}
+function readKeepDismissed() {
+  try {
+    return typeof window !== "undefined" && window.localStorage.getItem(KEEP_DISMISSED_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+function writeKeepDismissed() {
+  try {
+    window.localStorage.setItem(KEEP_DISMISSED_KEY, "1");
+  } catch {
+  }
+}
+function KeepConversation({ client }) {
+  const [step, setStep] = useState("row");
+  const [dismissed, setDismissed] = useState(readKeepDismissed);
+  const [contact, setContact] = useState("");
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [verifyError, setVerifyError] = useState(null);
+  if (dismissed) return null;
+  const contactType = contact.includes("@") ? "email" : "phone";
+  const requestCode = async () => {
+    const trimmed = contact.trim();
+    if (!trimmed || busy) return;
+    setBusy(true);
+    setVerifyError(null);
+    const result = await client.link.requestOtp({ contact: trimmed, contact_type: contactType });
+    setBusy(false);
+    if (result.ok) {
+      setCode("");
+      setStep("code");
+    } else {
+      setVerifyError(result.error.userMessage || "Couldn't send a code \u2014 try again.");
+    }
+  };
+  const verify = async (value) => {
+    if (value.length !== 6 || busy) return;
+    setBusy(true);
+    setVerifyError(null);
+    const result = await client.link.verifyOtp({
+      contact: contact.trim(),
+      contact_type: contactType,
+      otp_code: value
+    });
+    setBusy(false);
+    if (!result.ok) {
+      setCode("");
+      setVerifyError(result.error.userMessage || "Invalid or expired code.");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 border-t border-border bg-muted/50 px-4 py-2.5", children: [
+    step === "row" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setStep("contact"),
+          className: "flex min-w-0 flex-1 flex-col text-left",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground", children: "Keep this conversation" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: "Verify your number and it follows you \u2014 any device" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Dismiss",
+          onClick: () => {
+            writeKeepDismissed();
+            setDismissed(true);
+          },
+          className: "flex-shrink-0 p-1 text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-3.5 w-3.5" })
+        }
+      )
+    ] }),
+    step === "contact" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          inputMode: "email",
+          value: contact,
+          onChange: (e) => setContact(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && void requestCode(),
+          placeholder: "Phone or email",
+          autoFocus: true,
+          className: "h-9 min-w-0 flex-1 rounded-lg border border-border bg-background px-3 text-xs text-foreground outline-none placeholder:text-muted-foreground focus:border-foreground"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => void requestCode(),
+          disabled: !contact.trim() || busy,
+          className: "h-9 flex-shrink-0 rounded-lg bg-foreground px-3 text-xs font-semibold text-background disabled:opacity-50",
+          children: busy ? "Sending\u2026" : "Send code"
+        }
+      )
+    ] }),
+    step === "code" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          inputMode: "numeric",
+          autoComplete: "one-time-code",
+          maxLength: 6,
+          value: code,
+          onChange: (e) => {
+            const digits = e.target.value.replace(/\D/g, "").slice(0, 6);
+            setCode(digits);
+            if (digits.length === 6) void verify(digits);
+          },
+          placeholder: "6-digit code",
+          autoFocus: true,
+          className: "h-9 min-w-0 flex-1 rounded-lg border border-border bg-background px-3 text-xs tracking-[0.2em] text-foreground outline-none placeholder:tracking-normal placeholder:text-muted-foreground focus:border-foreground"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => void requestCode(),
+          disabled: busy,
+          className: "h-9 flex-shrink-0 rounded-lg px-2 text-[11px] font-medium text-muted-foreground hover:text-foreground disabled:opacity-50",
+          children: "Resend"
+        }
+      )
+    ] }),
+    verifyError && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-[11px] text-destructive", children: verifyError })
+  ] });
+}
 function ChatInput({
   placeholder,
   isSending,
@@ -17664,14 +17958,15 @@ function ChatInput({
     },
     [onAttach]
   );
-  const handleSend = useCallback(() => {
+  const handleSend = useCallback(async () => {
     const trimmed = value.trim();
     if (!trimmed || isSending) return;
     setValue("");
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
     }
-    onSend(trimmed);
+    const sent = await onSend(trimmed);
+    if (!sent) setValue((current) => current || trimmed);
   }, [value, isSending, onSend]);
   const handleKeyDown = useCallback(
     (e) => {
@@ -17849,6 +18144,24 @@ function ImageIcon({ className }) {
     }
   );
 }
+function ReplyIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "9 17 4 12 9 7" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 18v-2a4 4 0 0 0-4-4H4" })
+      ]
+    }
+  );
+}
 function SparkleIcon({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",