@waysdrop/chat 1.0.1 → 1.0.4

package/dist/index.js

@@ -25,12 +25,15 @@ import { injectGlobal } from "@emotion/css";
 // src/lib/upload.ts
 var VISITOR_ID_KEY = "waysdrop_visitor_id";
 var saveVisitorId = (id) => {
+  if (typeof window === "undefined") return;
   localStorage.setItem(VISITOR_ID_KEY, id);
 };
 var loadVisitorId = () => {
+  if (typeof window === "undefined") return null;
   return localStorage.getItem(VISITOR_ID_KEY);
 };
 var clearVisitorId = () => {
+  if (typeof window === "undefined") return;
   localStorage.removeItem(VISITOR_ID_KEY);
 };
 var uploadFile = async (file, config) => {
@@ -64,8 +67,11 @@ import { useEffect, useCallback } from "react";
 // src/lib/socket.ts
 import { io } from "socket.io-client";
 var socket = null;
-var getSocket = (config) => {
-  if (socket) return socket;
+var createSocket = (config) => {
+  if (socket) {
+    socket.disconnect();
+    socket = null;
+  }
   const { serverUrl, token, visitorId } = config;
   socket = io(serverUrl, {
     transports: ["websocket", "polling"],
@@ -74,6 +80,10 @@ var getSocket = (config) => {
   });
   return socket;
 };
+var getSocket = (config) => {
+  if (socket) return socket;
+  return createSocket(config);
+};
 var destroySocket = () => {
   if (socket) {
     socket.disconnect();
@@ -125,7 +135,7 @@ var useChat = (config) => {
     reset
   } = useChatStore();
   useEffect(() => {
-    const socket2 = getSocket(config);
+    const socket2 = createSocket(config);
     setStatus("connecting");
     socket2.connect();
     socket2.on("connected", (payload) => {
@@ -152,7 +162,7 @@ var useChat = (config) => {
       destroySocket();
       reset();
     };
-  }, []);
+  }, [config.token]);
   const sendMessage = useCallback(
     (content, info) => {
       var _a, _b;
@@ -170,14 +180,15 @@ var useChat = (config) => {
     [config, visitorInfo]
   );
   const sendFile = useCallback(
-    async (file, info) => {
+    async (file, content, info) => {
       var _a, _b;
       const url = await uploadFile(file, config);
       const socket2 = getSocket(config);
-      const dto = __spreadValues({
-        file: url,
+      const dto = __spreadValues(__spreadProps(__spreadValues({
+        file: url
+      }, content ? { content } : {}), {
         externalId: `file-${Date.now()}`
-      }, (info != null ? info : visitorInfo) ? {
+      }), (info != null ? info : visitorInfo) ? {
         email: (info != null ? info : visitorInfo).email,
         name: (_a = info != null ? info : visitorInfo) == null ? void 0 : _a.name,
         phone: (_b = info != null ? info : visitorInfo) == null ? void 0 : _b.phone
@@ -696,7 +707,7 @@ var MessageBubble = ({ message }) => {
   return /* @__PURE__ */ jsx5("div", { className: styles4.row(isCustomer), children: /* @__PURE__ */ jsxs3("div", { className: styles4.group(isCustomer), children: [
     isBot && /* @__PURE__ */ jsx5("span", { className: styles4.botLabel, children: "Ways AI" }),
     /* @__PURE__ */ jsxs3("div", { className: styles4.bubble(isCustomer), children: [
-      message.file && /* @__PURE__ */ jsx5("a", { href: message.file, target: "_blank", rel: "noreferrer", className: styles4.fileLink, children: "\u{1F4CE} View attachment" }),
+      message.file && /* @__PURE__ */ jsx5("a", { href: message.file, target: "_blank", rel: "noreferrer", className: styles4.fileLink(!!message.content), children: "\u{1F4CE} View attachment" }),
       message.content && (isBot ? /* @__PURE__ */ jsx5(MarkdownRenderer, { content: message.content }) : /* @__PURE__ */ jsx5("p", { className: styles4.text, children: message.content }))
     ] }),
     /* @__PURE__ */ jsx5("span", { className: styles4.time, children: formatTime(message.createdAt) })
@@ -739,12 +750,13 @@ var styles4 = {
     white-space: pre-wrap;
     text-align: left;
   `,
-  fileLink: css5`
+  fileLink: (hasContent) => css5`
     font-size: 0.875rem;
     color: inherit;
     text-decoration: underline;
     display: block;
     text-align: left;
+    ${hasContent ? "margin-bottom: 6px;" : ""}
   `,
   time: css5`
     font-size: 10px;
@@ -777,13 +789,13 @@ var ChatInput = ({ onSendText, onSendFile, disabled, isThinking }) => {
     if (!trimmed && !pendingFile || disabled || uploading) return;
     if (pendingFile) {
       setUploading(true);
-      onSendFile(pendingFile).finally(() => {
+      onSendFile(pendingFile, trimmed || void 0).finally(() => {
         setUploading(false);
         setPendingFile(null);
         setPendingPreview(null);
+        setValue("");
       });
-    }
-    if (trimmed) {
+    } else if (trimmed) {
       onSendText(trimmed);
       setValue("");
     }
@@ -1064,35 +1076,102 @@ var ChatScreen = ({
   };
   return /* @__PURE__ */ jsxs5("div", { className: styles6.wrapper, children: [
     /* @__PURE__ */ jsxs5("div", { className: styles6.header, children: [
-      /* @__PURE__ */ jsx7("button", { className: styles6.iconBtn, onClick: onBack, children: /* @__PURE__ */ jsx7("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("polyline", { points: "15 18 9 12 15 6" }) }) }),
+      /* @__PURE__ */ jsx7("button", { className: styles6.iconBtn, onClick: onBack, children: /* @__PURE__ */ jsx7(
+        "svg",
+        {
+          width: "18",
+          height: "18",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx7("polyline", { points: "15 18 9 12 15 6" })
+        }
+      ) }),
       /* @__PURE__ */ jsxs5("div", { className: styles6.headerCenter, children: [
         /* @__PURE__ */ jsx7("span", { className: styles6.headerTitle, children: "Support" }),
         /* @__PURE__ */ jsx7("span", { className: styles6.statusDot(connected) }),
         /* @__PURE__ */ jsx7("span", { className: styles6.statusLabel, children: connected ? "Online" : "Connecting..." })
       ] }),
-      /* @__PURE__ */ jsx7("button", { className: styles6.expandBtn, onClick: onExpand, children: isExpanded ? /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx7("polyline", { points: "4 14 10 14 10 20" }),
-        /* @__PURE__ */ jsx7("polyline", { points: "20 10 14 10 14 4" }),
-        /* @__PURE__ */ jsx7("line", { x1: "10", y1: "14", x2: "3", y2: "21" }),
-        /* @__PURE__ */ jsx7("line", { x1: "21", y1: "3", x2: "14", y2: "10" })
-      ] }) : /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx7("polyline", { points: "15 3 21 3 21 9" }),
-        /* @__PURE__ */ jsx7("polyline", { points: "9 21 3 21 3 15" }),
-        /* @__PURE__ */ jsx7("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-        /* @__PURE__ */ jsx7("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
-      ] }) })
+      /* @__PURE__ */ jsx7("button", { className: styles6.expandBtn, onClick: onExpand, children: isExpanded ? /* @__PURE__ */ jsxs5(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx7("polyline", { points: "4 14 10 14 10 20" }),
+            /* @__PURE__ */ jsx7("polyline", { points: "20 10 14 10 14 4" }),
+            /* @__PURE__ */ jsx7("line", { x1: "10", y1: "14", x2: "3", y2: "21" }),
+            /* @__PURE__ */ jsx7("line", { x1: "21", y1: "3", x2: "14", y2: "10" })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs5(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx7("polyline", { points: "15 3 21 3 21 9" }),
+            /* @__PURE__ */ jsx7("polyline", { points: "9 21 3 21 3 15" }),
+            /* @__PURE__ */ jsx7("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+            /* @__PURE__ */ jsx7("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+          ]
+        }
+      ) })
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: styles6.messagesWrap, children: [
-      /* @__PURE__ */ jsxs5("div", { className: styles6.messages, ref: scrollRef, onScroll: handleScroll, children: [
-        error && /* @__PURE__ */ jsx7("div", { className: styles6.errorBanner, children: error.message }),
-        messages.length === 0 && connected && /* @__PURE__ */ jsx7("div", { className: styles6.emptyState, children: /* @__PURE__ */ jsx7("p", { children: "Send a message to start the conversation." }) }),
-        messages.map((msg) => /* @__PURE__ */ jsx7(MessageBubble, { message: msg }, msg.id)),
-        /* @__PURE__ */ jsx7("div", { ref: bottomRef })
-      ] }),
-      showScrollBtn && /* @__PURE__ */ jsx7("button", { className: styles6.scrollBtn, onClick: () => {
-        var _a;
-        return (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
-      }, children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("polyline", { points: "6 9 12 15 18 9" }) }) })
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: styles6.messages,
+          ref: scrollRef,
+          onScroll: handleScroll,
+          children: [
+            error && /* @__PURE__ */ jsx7("div", { className: styles6.errorBanner, children: error.message }),
+            messages.length === 0 && connected && /* @__PURE__ */ jsx7("div", { className: styles6.emptyState, children: /* @__PURE__ */ jsx7("p", { children: "Send a message to start the conversation." }) }),
+            messages.map((msg) => /* @__PURE__ */ jsx7(MessageBubble, { message: msg }, msg.id)),
+            /* @__PURE__ */ jsx7("div", { ref: bottomRef })
+          ]
+        }
+      ),
+      showScrollBtn && /* @__PURE__ */ jsx7(
+        "button",
+        {
+          className: styles6.scrollBtn,
+          onClick: () => {
+            var _a;
+            return (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+          },
+          children: /* @__PURE__ */ jsx7(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx7("polyline", { points: "6 9 12 15 18 9" })
+            }
+          )
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx7(
       ChatInput,
@@ -1158,7 +1237,9 @@ var styles6 = {
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    transition: color 0.15s, background 0.15s;
+    transition:
+      color 0.15s,
+      background 0.15s;
     &:hover {
       color: var(--wds-fg);
       background: var(--wds-muted-bg);
@@ -1175,7 +1256,9 @@ var styles6 = {
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    transition: color 0.15s, background 0.15s;
+    transition:
+      color 0.15s,
+      background 0.15s;
     &:hover {
       color: var(--wds-fg);
       background: var(--wds-muted-bg);
@@ -1232,8 +1315,10 @@ var styles6 = {
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
-    transition: color 0.15s, border-color 0.15s;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    transition:
+      color 0.15s,
+      border-color 0.15s;
     &:hover {
       color: var(--wds-primary);
       border-color: var(--wds-primary);
@@ -1243,16 +1328,74 @@ var styles6 = {
 
 // src/components/ChatWidget.tsx
 import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var LIGHT_VARS = `
+  --wds-bg: oklch(1 0 0);
+  --wds-fg: oklch(0.145 0 0);
+  --wds-muted: oklch(0.556 0 0);
+  --wds-muted-bg: oklch(0.97 0 0);
+  --wds-border: oklch(0.922 0 0);
+`;
+var DARK_VARS = `
+  --wds-bg: oklch(0.145 0 0);
+  --wds-fg: oklch(0.985 0 0);
+  --wds-muted: oklch(0.708 0 0);
+  --wds-muted-bg: oklch(0.205 0 0);
+  --wds-border: oklch(1 0 0 / 10%);
+`;
+function buildPrimaryVars(color) {
+  return `
+    --wds-primary: ${color};
+    --wds-primary-soft: color-mix(in oklch, ${color} 12%, transparent);
+    --wds-primary-border: color-mix(in oklch, ${color} 40%, transparent);
+  `;
+}
+var DEFAULT_PRIMARY = "oklch(0.5811 0.2268 259.15)";
+function buildThemeStyle(theme, primaryColor) {
+  const primary = buildPrimaryVars(primaryColor);
+  if (theme === "light") {
+    return `
+      [data-wds-root] {
+        ${LIGHT_VARS}
+        ${primary}
+      }
+    `;
+  }
+  if (theme === "dark") {
+    return `
+      [data-wds-root] {
+        ${DARK_VARS}
+        ${primary}
+      }
+    `;
+  }
+  return `
+    [data-wds-root] {
+      ${LIGHT_VARS}
+      ${primary}
+    }
+    @media (prefers-color-scheme: dark) {
+      [data-wds-root] {
+        ${DARK_VARS}
+        --wds-primary-soft: color-mix(in oklch, ${primaryColor} 15%, transparent);
+      }
+    }
+  `;
+}
 var ChatWidget = ({ config }) => {
-  var _a, _b;
   const [isOpen, setIsOpen] = useState4(false);
   const [isExpanded, setIsExpanded] = useState4(false);
   const [view, setView] = useState4("home");
+  const [visitorId] = useState4(
+    () => {
+      var _a, _b;
+      return (_b = (_a = config.visitorId) != null ? _a : loadVisitorId()) != null ? _b : void 0;
+    }
+  );
   const reset = useChatStore((s) => s.reset);
   const resolvedConfig = __spreadProps(__spreadValues({}, config), {
-    visitorId: (_b = (_a = config.visitorId) != null ? _a : loadVisitorId()) != null ? _b : void 0
+    visitorId
   });
-  const hasHistory = !!resolvedConfig.visitorId;
+  const hasHistory = !!visitorId;
   const { status, messages, error, sendMessage, sendFile } = useChat(resolvedConfig);
   const handleNewConversation = () => {
     reset();
@@ -1267,6 +1410,19 @@ var ChatWidget = ({ config }) => {
       document.body.style.overflow = "";
     };
   }, [isOpen]);
+  useEffect4(() => {
+    var _a, _b;
+    const theme = (_a = config.theme) != null ? _a : "system";
+    const primaryColor = (_b = config.primaryColor) != null ? _b : DEFAULT_PRIMARY;
+    const style = buildThemeStyle(theme, primaryColor);
+    const el = document.createElement("style");
+    el.setAttribute("data-wds-theme", "");
+    el.textContent = style;
+    document.head.appendChild(el);
+    return () => {
+      document.head.removeChild(el);
+    };
+  }, [config.theme, config.primaryColor]);
   return /* @__PURE__ */ jsxs6(Fragment, { children: [
     /* @__PURE__ */ jsx8(
       FloatingButton,
@@ -1307,28 +1463,6 @@ var ChatWidget = ({ config }) => {
   ] });
 };
 injectGlobal`
-  :root {
-    --wds-primary: oklch(0.5811 0.2268 259.15);
-    --wds-primary-soft: oklch(0.5811 0.2268 259.15 / 0.12);
-    --wds-primary-border: oklch(0.7695 0.1177 255.22 / 0.4);
-    --wds-bg: oklch(1 0 0);
-    --wds-fg: oklch(0.145 0 0);
-    --wds-muted: oklch(0.556 0 0);
-    --wds-muted-bg: oklch(0.97 0 0);
-    --wds-border: oklch(0.922 0 0);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --wds-bg: oklch(0.145 0 0);
-      --wds-fg: oklch(0.985 0 0);
-      --wds-muted: oklch(0.708 0 0);
-      --wds-muted-bg: oklch(0.205 0 0);
-      --wds-border: oklch(1 0 0 / 10%);
-      --wds-primary-soft: oklch(0.5811 0.2268 259.15 / 0.15);
-    }
-  }
-
   [data-wds-root] * {
     box-sizing: border-box;
     text-align: left;