@waysdrop/chat 1.0.3 → 1.0.5

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;
@@ -243,7 +253,7 @@ var useChat = (config) => {
 var import_react2 = require("react");
 var import_css = require("@emotion/css");
 var import_jsx_runtime = require("react/jsx-runtime");
-var BUTTON_SIZE = 56;
+var BUTTON_SIZE = 58;
 var FloatingButton = ({ isOpen, onToggle }) => {
   const [isMobile, setIsMobile] = (0, import_react2.useState)(false);
   (0, import_react2.useEffect)(() => {
@@ -253,49 +263,17 @@ var FloatingButton = ({ isOpen, onToggle }) => {
     return () => window.removeEventListener("resize", check);
   }, []);
   if (isMobile && isOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        className: styles.mobileCloseBtn,
-        onClick: onToggle,
-        type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "svg",
-          {
-            width: "22",
-            height: "22",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            strokeLinecap: "round",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-            ]
-          }
-        )
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: styles.mobileCloseBtn, onClick: onToggle, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ] }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: styles.btn, onClick: onToggle, type: "button", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.icon(!isOpen), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.icon(isOpen), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "svg",
-      {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2.5",
-        strokeLinecap: "round",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-        ]
-      }
-    ) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.icon(!isOpen), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.icon(isOpen), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2.5", strokeLinecap: "round", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ] }) })
   ] });
 };
 var styles = {
@@ -306,8 +284,7 @@ var styles = {
     width: ${BUTTON_SIZE}px;
     height: ${BUTTON_SIZE}px;
     border-radius: 50%;
-    background: var(--wds-primary);
-    color: #fff;
+    background: var(--wds-primary, oklch(0.5811 0.2268 259.15));
     border: none;
     cursor: pointer;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
@@ -328,8 +305,7 @@ var styles = {
     width: ${BUTTON_SIZE}px;
     height: ${BUTTON_SIZE}px;
     border-radius: 50%;
-    background: var(--wds-primary);
-    color: #fff;
+    background: var(--wds-primary, oklch(0.5811 0.2268 259.15));
     border: none;
     cursor: pointer;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
@@ -343,9 +319,7 @@ var styles = {
     display: flex;
     align-items: center;
     justify-content: center;
-    transition:
-      opacity 0.2s,
-      transform 0.2s;
+    transition: opacity 0.2s, transform 0.2s;
     opacity: ${visible ? 1 : 0};
     transform: ${visible ? "scale(1)" : "scale(0.6) rotate(30deg)"};
     pointer-events: ${visible ? "auto" : "none"};
@@ -1071,7 +1045,6 @@ var styles5 = {
     margin: 0;
     text-align: center;
     opacity: 0.7;
-    text-align: center;
   `
 };
 
@@ -1092,7 +1065,7 @@ var ChatScreen = ({
   const connected = status === "connected";
   const [showScrollBtn, setShowScrollBtn] = (0, import_react4.useState)(false);
   const lastMsg = messages[messages.length - 1];
-  const isThinking = connected && (lastMsg == null ? void 0 : lastMsg.direction) === "INBOUND";
+  const isThinking = connected && (lastMsg == null ? void 0 : lastMsg.direction) === "OUTBOUND";
   (0, import_react4.useEffect)(() => {
     var _a;
     (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
@@ -1356,16 +1329,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();
@@ -1380,6 +1411,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,
@@ -1420,28 +1464,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;