@uptrademedia/site-kit 1.2.0 → 1.2.1

package/dist/{chunk-RLO3QJ65.mjs → chunk-FHTQUJ4M.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';
 
@@ -274,7 +275,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 },
@@ -995,82 +996,101 @@ 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: () => {
+                        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" && !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"
+                      },
+                      children: "Talk to a person"
+                    }
+                  )
+                ]
+              }
+            ) }, message.id);
+          }),
           (isLoading || agentTyping) && /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1200,6 +1220,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 +1853,5 @@ function getDeviceType() {
 }
 
 export { ChatWidget, DesignRenderer, EngageWidget };
-//# sourceMappingURL=chunk-RLO3QJ65.mjs.map
-//# sourceMappingURL=chunk-RLO3QJ65.mjs.map
+//# sourceMappingURL=chunk-FHTQUJ4M.mjs.map
+//# sourceMappingURL=chunk-FHTQUJ4M.mjs.map