@uptrademedia/site-kit 1.2.0 → 1.2.2

package/dist/{chunk-RLO3QJ65.mjs → chunk-TJBXNQ2W.mjs}

@@ -1,4 +1,5 @@
 import React2, { useState, useRef, useEffect, useCallback, createElement } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { usePathname } from 'next/navigation';
 
@@ -19,6 +20,19 @@ function generateVisitorId() {
   if (typeof localStorage !== "undefined") localStorage.setItem("engage_visitor_id", id);
   return id;
 }
+function userRequestedHandoff(text) {
+  const lower = text.toLowerCase().trim();
+  const patterns = [
+    /\b(talk|speak)\s+(to|with)\s+(a\s+)?(person|human|agent|representative|someone)\b/,
+    /\b(real|live)\s+(person|human|agent|support)\b/,
+    /\bconnect\s+(me\s+)?(with|to)\s+(a\s+)?(person|human|agent)\b/,
+    /\b(need|want)\s+(to\s+)?(talk|speak)\s+(to|with)\s+(someone|a\s+person)\b/,
+    /\bhuman\s+(support|agent|help)\b/,
+    /\b(talk|speak)\s+to\s+(a\s+)?person\b/,
+    /\bget\s+(a\s+)?(person|human)\b/
+  ];
+  return patterns.some((p) => p.test(lower));
+}
 function adjustColor(hex, amount) {
   const num = parseInt(hex.replace("#", ""), 16);
   const r = Math.min(255, Math.max(0, (num >> 16) + amount));
@@ -214,8 +228,9 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       const data = json?.data ?? json;
       const aiContent = data?.content ?? data?.response ?? data?.message ?? "I'm sorry, I couldn't process that.";
       const suggestions = data?.suggestions;
+      const offerHandoff = data?.offerHandoff === true || data?.offer_handoff === true;
       const newConversationId = data?.conversationId ?? conversationId;
-      return { content: aiContent, suggestions, conversationId: newConversationId };
+      return { content: aiContent, suggestions, offerHandoff, conversationId: newConversationId };
     },
     [signalUrl, projectId, visitorId, fetchSiteContext]
   );
@@ -274,7 +289,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         socketRef.current.disconnect();
         socketRef.current = null;
       }
-      const { createSocket } = await import('./socket-loader-N5ETWMXW.mjs');
+      const { createSocket } = await import('./socket-loader-R7S2YJ2J.mjs');
       const namespaceUrl = `${baseUrl.replace(/\/$/, "")}/engage/chat`;
       const socket = await createSocket(namespaceUrl, {
         query: { projectId, visitorId, sessionId: currentSessionId },
@@ -421,7 +436,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             { id: `u-${Date.now()}`, role: "user", content: pending, timestamp: /* @__PURE__ */ new Date() }
           ]);
           try {
-            const { content: aiContent, suggestions } = await sendToSignalApi(pending, id);
+            const { content: aiContent, suggestions, offerHandoff } = await sendToSignalApi(pending, id);
+            const userWantsHandoff = userRequestedHandoff(pending);
             setMessages((prev) => [
               ...prev,
               {
@@ -429,7 +445,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                 role: "assistant",
                 content: aiContent,
                 timestamp: /* @__PURE__ */ new Date(),
-                ...suggestions?.length ? { suggestions } : {}
+                ...suggestions?.length ? { suggestions } : {},
+                ...offerHandoff || userWantsHandoff ? { offerHandoff: true } : {}
               }
             ]);
           } catch (err) {
@@ -441,7 +458,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                 role: "assistant",
                 content: "I apologize, but I encountered an error. Would you like to speak with a team member?",
                 timestamp: /* @__PURE__ */ new Date(),
-                suggestions: ["Talk to a person", "Try again"]
+                suggestions: ["Talk to a person", "Try again"],
+                offerHandoff: true
               }
             ]);
           } finally {
@@ -563,7 +581,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       setIsLoading(true);
       if (widgetConfig?.signal_enabled && hasText) {
         try {
-          const { content: aiContent, suggestions } = await sendToSignalApi(content, sessionId);
+          const { content: aiContent, suggestions, offerHandoff } = await sendToSignalApi(content, sessionId);
+          const lastUserContent = messages.filter((m) => m.role === "user").slice(-1)[0]?.content ?? "";
           setMessages((prev) => [
             ...prev,
             {
@@ -571,7 +590,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
               role: "assistant",
               content: aiContent,
               timestamp: /* @__PURE__ */ new Date(),
-              ...suggestions?.length ? { suggestions } : {}
+              ...suggestions?.length ? { suggestions } : {},
+              ...offerHandoff || userRequestedHandoff(lastUserContent) ? { offerHandoff: true } : {}
             }
           ]);
         } catch (err) {
@@ -583,7 +603,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
               role: "assistant",
               content: "I apologize, but I encountered an error. Would you like to speak with a team member?",
               timestamp: /* @__PURE__ */ new Date(),
-              suggestions: ["Talk to a person", "Try again"]
+              suggestions: ["Talk to a person", "Try again"],
+              offerHandoff: true
             }
           ]);
         } finally {
@@ -995,82 +1016,105 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       {
         style: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12, backgroundColor: "#f9fafb" },
         children: [
-          messages.map((message) => /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: message.role === "user" ? "flex-end" : "flex-start" }, children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                maxWidth: "80%",
-                padding: message.role === "system" ? "8px 12px" : "10px 14px",
-                borderRadius: message.role === "user" ? "16px 16px 4px 16px" : message.role === "system" ? "8px" : "16px 16px 16px 4px",
-                backgroundColor: message.role === "user" ? primaryColor : message.role === "system" ? "#e5e7eb" : "#ffffff",
-                color: message.role === "user" ? isLightColor(primaryColor) ? "#1a1a1a" : "white" : message.role === "system" ? "#6b7280" : "#111827",
-                boxShadow: message.role === "system" ? "none" : "0 1px 2px rgba(0,0,0,0.08)",
-                fontSize: message.role === "system" ? 13 : 14,
-                fontStyle: message.role === "system" ? "italic" : "normal",
-                lineHeight: 1.5,
-                whiteSpace: "pre-wrap",
-                wordBreak: "break-word"
-              },
-              children: [
-                message.agentName && message.role === "agent" && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, opacity: 0.6, marginBottom: 4 }, children: message.agentName }),
-                message.content,
-                message.attachments?.length ? /* @__PURE__ */ jsx("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 6 }, children: message.attachments.map(
-                  (att, i) => att.mimeType?.startsWith("image/") ? /* @__PURE__ */ jsx("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { display: "block" }, children: /* @__PURE__ */ jsx("img", { src: att.url, alt: att.name, style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }) }, i) : /* @__PURE__ */ jsxs("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { fontSize: 13, wordBreak: "break-all" }, children: [
-                    "\u{1F4CE} ",
-                    att.name
-                  ] }, i)
-                ) }) : null,
-                message.suggestions?.length ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }, children: message.suggestions.map((s, i) => /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      setInputValue(s);
-                      inputRef.current?.focus();
-                    },
-                    style: {
-                      padding: "6px 12px",
-                      borderRadius: 16,
-                      border: `1px solid ${primaryColor}`,
-                      backgroundColor: `${primaryColor}10`,
-                      color: primaryColor,
-                      fontSize: 13,
-                      cursor: "pointer"
-                    },
-                    children: s
-                  },
-                  i
-                )) }) : null,
-                message.sendFailed && lastFailedSend && /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: retryFailedSend,
-                    style: { padding: "6px 12px", borderRadius: 6, border: "1px solid #ef4444", backgroundColor: "#fef2f2", color: "#dc2626", fontSize: 13, cursor: "pointer" },
-                    children: "Retry send"
-                  }
-                ) }),
-                widgetConfig?.signal_enabled && message.role === "assistant" && !message.suggestions?.length && widgetConfig?.handoff_enabled !== false && messages.filter((m) => m.role === "user").length >= 2 && message.id === messages.filter((m) => m.role === "assistant").slice(-1)[0]?.id && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: requestHandoff,
-                    style: {
-                      display: "inline-block",
-                      marginTop: 8,
-                      padding: "6px 12px",
-                      borderRadius: 6,
-                      border: `1px solid ${primaryColor}`,
-                      backgroundColor: "transparent",
-                      color: primaryColor,
-                      fontSize: 13,
-                      cursor: "pointer"
+          messages.map((message) => {
+            const isAssistant = message.role === "assistant" || message.role === "agent";
+            return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: message.role === "user" ? "flex-end" : "flex-start" }, children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  maxWidth: "80%",
+                  padding: message.role === "system" ? "8px 12px" : isAssistant ? "12px 16px" : "10px 14px",
+                  borderRadius: message.role === "user" ? "16px 16px 4px 16px" : message.role === "system" ? "8px" : "16px 16px 16px 4px",
+                  backgroundColor: message.role === "user" ? primaryColor : message.role === "system" ? "#e5e7eb" : "#ffffff",
+                  color: message.role === "user" ? isLightColor(primaryColor) ? "#1a1a1a" : "white" : message.role === "system" ? "#6b7280" : "#111827",
+                  boxShadow: message.role === "system" ? "none" : "0 1px 2px rgba(0,0,0,0.08)",
+                  fontSize: message.role === "system" ? 13 : 14,
+                  fontStyle: message.role === "system" ? "italic" : "normal",
+                  lineHeight: isAssistant ? 1.6 : 1.5,
+                  whiteSpace: isAssistant ? "normal" : "pre-wrap",
+                  wordBreak: "break-word",
+                  textAlign: isAssistant ? "left" : void 0,
+                  borderLeft: isAssistant ? `3px solid ${primaryColor}33` : void 0
+                },
+                children: [
+                  message.agentName && message.role === "agent" && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, opacity: 0.6, marginBottom: 4 }, children: message.agentName }),
+                  isAssistant ? /* @__PURE__ */ jsx("div", { className: "chatMessageContent", children: /* @__PURE__ */ jsx(
+                    ReactMarkdown,
+                    {
+                      components: {
+                        p: ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: "0 0 8px", lineHeight: 1.6 }, children }),
+                        strong: ({ children }) => /* @__PURE__ */ jsx("strong", { style: { fontWeight: 600 }, children }),
+                        ul: ({ children }) => /* @__PURE__ */ jsx("ul", { style: { margin: "4px 0 8px", paddingLeft: 20 }, children }),
+                        ol: ({ children }) => /* @__PURE__ */ jsx("ol", { style: { margin: "4px 0 8px", paddingLeft: 20 }, children }),
+                        li: ({ children }) => /* @__PURE__ */ jsx("li", { style: { marginBottom: 4 }, children }),
+                        h3: ({ children }) => /* @__PURE__ */ jsx("h3", { style: { margin: "12px 0 6px", fontSize: 15, fontWeight: 600 }, children }),
+                        h4: ({ children }) => /* @__PURE__ */ jsx("h4", { style: { margin: "8px 0 4px", fontSize: 14, fontWeight: 600 }, children })
+                      },
+                      children: message.content
+                    }
+                  ) }) : message.content,
+                  message.attachments?.length ? /* @__PURE__ */ jsx("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 6 }, children: message.attachments.map(
+                    (att, i) => att.mimeType?.startsWith("image/") ? /* @__PURE__ */ jsx("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { display: "block" }, children: /* @__PURE__ */ jsx("img", { src: att.url, alt: att.name, style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }) }, i) : /* @__PURE__ */ jsxs("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { fontSize: 13, wordBreak: "break-all", display: "flex", alignItems: "center", gap: 6 }, children: [
+                      /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }),
+                      att.name
+                    ] }, i)
+                  ) }) : null,
+                  message.suggestions?.length ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }, children: message.suggestions.map((s, i) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        if (/talk\s+to\s+(a\s+)?person/i.test(s)) {
+                          requestHandoff();
+                        } else {
+                          setInputValue(s);
+                          inputRef.current?.focus();
+                        }
+                      },
+                      style: {
+                        padding: "6px 12px",
+                        borderRadius: 16,
+                        border: `1px solid ${primaryColor}`,
+                        backgroundColor: `${primaryColor}10`,
+                        color: primaryColor,
+                        fontSize: 13,
+                        cursor: "pointer"
+                      },
+                      children: s
                     },
-                    children: "Talk to a person"
-                  }
-                )
-              ]
-            }
-          ) }, message.id)),
+                    i
+                  )) }) : null,
+                  message.sendFailed && lastFailedSend && /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: retryFailedSend,
+                      style: { padding: "6px 12px", borderRadius: 6, border: "1px solid #ef4444", backgroundColor: "#fef2f2", color: "#dc2626", fontSize: 13, cursor: "pointer" },
+                      children: "Retry send"
+                    }
+                  ) }),
+                  widgetConfig?.signal_enabled && message.role === "assistant" && widgetConfig?.handoff_enabled !== false && message.offerHandoff && !message.suggestions?.some((s) => /talk\s+to\s+(a\s+)?person/i.test(s)) && message.id === messages.filter((m) => m.role === "assistant").slice(-1)[0]?.id && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: requestHandoff,
+                      style: {
+                        display: "inline-block",
+                        marginTop: 8,
+                        padding: "6px 12px",
+                        borderRadius: 6,
+                        border: `1px solid ${primaryColor}`,
+                        backgroundColor: "transparent",
+                        color: primaryColor,
+                        fontSize: 13,
+                        cursor: "pointer"
+                      },
+                      children: "Talk to a person"
+                    }
+                  )
+                ]
+              }
+            ) }, message.id);
+          }),
           (isLoading || agentTyping) && /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1200,6 +1244,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
           from { transform: scaleX(0); }
           to { transform: scaleX(1); }
         }
+        .chatMessageContent p:first-child { margin-top: 0; }
+        .chatMessageContent p:last-child { margin-bottom: 0; }
       ` })
       ]
     }
@@ -1831,5 +1877,5 @@ function getDeviceType() {
 }
 
 export { ChatWidget, DesignRenderer, EngageWidget };
-//# sourceMappingURL=chunk-RLO3QJ65.mjs.map
-//# sourceMappingURL=chunk-RLO3QJ65.mjs.map
+//# sourceMappingURL=chunk-TJBXNQ2W.mjs.map
+//# sourceMappingURL=chunk-TJBXNQ2W.mjs.map