@waysdrop/chat 1.0.1 → 1.0.4

package/README.md

@@ -43,10 +43,12 @@ Mount `<ChatWidget />` once at the root of your app. It renders a floating butto
 
 ```ts
 type ChatConfig = {
-  serverUrl: string   // Socket.IO server URL
-  apiUrl: string      // REST base URL (used for file uploads)
-  token?: string      // JWT for authenticated users — omit for visitor flow
-  visitorId?: string  // Pass a returning visitor's ID to restore chat history
+  serverUrl: string       // Socket.IO server URL
+  apiUrl: string          // REST base URL (used for file uploads)
+  token?: string          // JWT for authenticated users — omit for visitor flow
+  visitorId?: string      // Pass a returning visitor's ID to restore chat history
+  theme?: 'light' | 'dark' | 'system'  // defaults to 'system'
+  primaryColor?: string   // any valid CSS color — defaults to Waysdrop blue
 }
 ```
 
@@ -60,7 +62,20 @@ saveVisitorId(id)      // writes to localStorage
 clearVisitorId()       // clears — use on logout
 ```
 
-**Authenticated flow** — pass a `token` (JWT). The socket server resolves the user from it. No `visitorId` needed.
+**Authenticated flow** — pass a `token` (JWT). The socket server resolves the user from it. No `visitorId` needed. If the token changes at runtime (user logs in after mount), the widget automatically destroys the old socket connection and reconnects with the new token.
+
+**Theming** — `theme` controls the color scheme. `system` follows the OS `prefers-color-scheme`. `light` and `dark` force it regardless of the OS setting. `primaryColor` accepts any valid CSS color value:
+
+```tsx
+<ChatWidget
+  config={{
+    serverUrl: '...',
+    apiUrl: '...',
+    theme: 'dark',
+    primaryColor: '#7c3aed',
+  }}
+/>
+```
 
 ---
 
@@ -81,11 +96,11 @@ const {
   visitorInfo,  // VisitorInfo | null
   setVisitorInfo,
   sendMessage,  // (content: string, info?: VisitorInfo) => void
-  sendFile,     // (file: File, info?: VisitorInfo) => Promise<void>
+  sendFile,     // (file: File, content?: string, info?: VisitorInfo) => Promise<void>
 } = useChat(config)
 ```
 
-`sendMessage` and `sendFile` accept an optional `VisitorInfo` argument for the first message in a visitor session (name, email, phone). After the first message, `visitorInfo` is stored in the Zustand store and reused automatically.
+`sendMessage` and `sendFile` accept an optional `VisitorInfo` argument for the first message in a visitor session. `sendFile` also accepts an optional `content` string to send text alongside the file in a single message.
 
 ---
 
@@ -104,7 +119,7 @@ type ChatMessage = {
 }
 
 type VisitorInfo = {
-  email: string   // required
+  email: string
   name?: string
   phone?: string
 }

package/dist/index.cjs

@@ -63,12 +63,15 @@ var import_css8 = require("@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) => {
@@ -102,8 +105,11 @@ var import_react = require("react");
 // src/lib/socket.ts
 var import_socket = require("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 = (0, import_socket.io)(serverUrl, {
     transports: ["websocket", "polling"],
@@ -112,6 +118,10 @@ var getSocket = (config) => {
   });
   return socket;
 };
+var getSocket = (config) => {
+  if (socket) return socket;
+  return createSocket(config);
+};
 var destroySocket = () => {
   if (socket) {
     socket.disconnect();
@@ -163,7 +173,7 @@ var useChat = (config) => {
     reset
   } = useChatStore();
   (0, import_react.useEffect)(() => {
-    const socket2 = getSocket(config);
+    const socket2 = createSocket(config);
     setStatus("connecting");
     socket2.connect();
     socket2.on("connected", (payload) => {
@@ -190,7 +200,7 @@ var useChat = (config) => {
       destroySocket();
       reset();
     };
-  }, []);
+  }, [config.token]);
   const sendMessage = (0, import_react.useCallback)(
     (content, info) => {
       var _a, _b;
@@ -208,14 +218,15 @@ var useChat = (config) => {
     [config, visitorInfo]
   );
   const sendFile = (0, import_react.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
@@ -734,7 +745,7 @@ var MessageBubble = ({ message }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles4.row(isCustomer), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles4.group(isCustomer), children: [
     isBot && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles4.botLabel, children: "Ways AI" }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles4.bubble(isCustomer), children: [
-      message.file && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: message.file, target: "_blank", rel: "noreferrer", className: styles4.fileLink, children: "\u{1F4CE} View attachment" }),
+      message.file && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: message.file, target: "_blank", rel: "noreferrer", className: styles4.fileLink(!!message.content), children: "\u{1F4CE} View attachment" }),
       message.content && (isBot ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MarkdownRenderer, { content: message.content }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: styles4.text, children: message.content }))
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles4.time, children: formatTime(message.createdAt) })
@@ -777,12 +788,13 @@ var styles4 = {
     white-space: pre-wrap;
     text-align: left;
   `,
-  fileLink: import_css5.css`
+  fileLink: (hasContent) => import_css5.css`
     font-size: 0.875rem;
     color: inherit;
     text-decoration: underline;
     display: block;
     text-align: left;
+    ${hasContent ? "margin-bottom: 6px;" : ""}
   `,
   time: import_css5.css`
     font-size: 10px;
@@ -815,13 +827,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("");
     }
@@ -1102,35 +1114,102 @@ var ChatScreen = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles6.wrapper, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles6.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: styles6.iconBtn, onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "15 18 9 12 15 6" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: styles6.iconBtn, onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "svg",
+        {
+          width: "18",
+          height: "18",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "15 18 9 12 15 6" })
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles6.headerCenter, children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: styles6.headerTitle, children: "Support" }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: styles6.statusDot(connected) }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: styles6.statusLabel, children: connected ? "Online" : "Connecting..." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: styles6.expandBtn, onClick: onExpand, children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "4 14 10 14 10 20" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "20 10 14 10 14 4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "10", y1: "14", x2: "3", y2: "21" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "15 3 21 3 21 9" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "9 21 3 21 3 15" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
-      ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: styles6.expandBtn, onClick: onExpand, children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "4 14 10 14 10 20" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "20 10 14 10 14 4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "10", y1: "14", x2: "3", y2: "21" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+          ]
+        }
+      ) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles6.messagesWrap, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles6.messages, ref: scrollRef, onScroll: handleScroll, children: [
-        error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: styles6.errorBanner, children: error.message }),
-        messages.length === 0 && connected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: styles6.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Send a message to start the conversation." }) }),
-        messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageBubble, { message: msg }, msg.id)),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: bottomRef })
-      ] }),
-      showScrollBtn && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: styles6.scrollBtn, onClick: () => {
-        var _a;
-        return (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
-      }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "6 9 12 15 18 9" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        {
+          className: styles6.messages,
+          ref: scrollRef,
+          onScroll: handleScroll,
+          children: [
+            error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: styles6.errorBanner, children: error.message }),
+            messages.length === 0 && connected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: styles6.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Send a message to start the conversation." }) }),
+            messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageBubble, { message: msg }, msg.id)),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: bottomRef })
+          ]
+        }
+      ),
+      showScrollBtn && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          className: styles6.scrollBtn,
+          onClick: () => {
+            var _a;
+            return (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "6 9 12 15 18 9" })
+            }
+          )
+        }
+      )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChatInput,
@@ -1196,7 +1275,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);
@@ -1213,7 +1294,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);
@@ -1270,8 +1353,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);
@@ -1281,16 +1366,74 @@ var styles6 = {
 
 // src/components/ChatWidget.tsx
 var import_jsx_runtime8 = require("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] = (0, import_react5.useState)(false);
   const [isExpanded, setIsExpanded] = (0, import_react5.useState)(false);
   const [view, setView] = (0, import_react5.useState)("home");
+  const [visitorId] = (0, import_react5.useState)(
+    () => {
+      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();
@@ -1305,6 +1448,19 @@ var ChatWidget = ({ config }) => {
       document.body.style.overflow = "";
     };
   }, [isOpen]);
+  (0, import_react5.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       FloatingButton,
@@ -1345,28 +1501,6 @@ var ChatWidget = ({ config }) => {
   ] });
 };
 import_css8.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;