npm - @mordn/chat-widget - Versions diffs - 0.1.4 → 0.2.0 - Mend

@mordn/chat-widget 0.1.4 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -70,21 +70,36 @@ interface StarterPrompt {
 }
 interface ThemeConfig {
     /**
-     * Theme mode
+     * Theme mode — drives the default token values (light vs dark).
      */
     mode?: 'light' | 'dark';
     /**
-     * Primary color (hex)
+     * Primary accent color (any CSS color: hex, rgb, hsl, named).
+     * Maps to `--chat-primary` on the widget container at runtime.
      */
     primaryColor?: string;
     /**
-     * Background color (hex)
+     * Background color (any CSS color).
+     * Maps to `--chat-background` on the widget container.
      */
     backgroundColor?: string;
     /**
-     * Text color (hex)
+     * Body text color (any CSS color).
+     * Maps to `--chat-text` on the widget container.
      */
     textColor?: string;
+    /**
+     * Fine-grained CSS variable overrides. Keys must start with `--chat-`.
+     * Use this when the three high-level props above aren't enough — e.g. to
+     * theme the header glass, hover state, or surface tones independently.
+     *
+     * @example
+     * tokens: {
+     *   '--chat-surface': '0 0% 96%',           // HSL-triplet tokens
+     *   '--chat-header-bg': 'rgba(0,0,0,0.7)',  // direct color tokens
+     * }
+     */
+    tokens?: Record<`--chat-${string}`, string>;
 }
 interface FeatureConfig {
     /**

package/dist/index.d.ts CHANGED Viewed

@@ -70,21 +70,36 @@ interface StarterPrompt {
 }
 interface ThemeConfig {
     /**
-     * Theme mode
+     * Theme mode — drives the default token values (light vs dark).
      */
     mode?: 'light' | 'dark';
     /**
-     * Primary color (hex)
+     * Primary accent color (any CSS color: hex, rgb, hsl, named).
+     * Maps to `--chat-primary` on the widget container at runtime.
      */
     primaryColor?: string;
     /**
-     * Background color (hex)
+     * Background color (any CSS color).
+     * Maps to `--chat-background` on the widget container.
      */
     backgroundColor?: string;
     /**
-     * Text color (hex)
+     * Body text color (any CSS color).
+     * Maps to `--chat-text` on the widget container.
      */
     textColor?: string;
+    /**
+     * Fine-grained CSS variable overrides. Keys must start with `--chat-`.
+     * Use this when the three high-level props above aren't enough — e.g. to
+     * theme the header glass, hover state, or surface tones independently.
+     *
+     * @example
+     * tokens: {
+     *   '--chat-surface': '0 0% 96%',           // HSL-triplet tokens
+     *   '--chat-header-bg': 'rgba(0,0,0,0.7)',  // direct color tokens
+     * }
+     */
+    tokens?: Record<`--chat-${string}`, string>;
 }
 interface FeatureConfig {
     /**

package/dist/index.js CHANGED Viewed

@@ -227,7 +227,7 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-[14px] transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props
@@ -1920,20 +1920,20 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-b backdrop-blur-sm relative z-20", style: {
-          borderColor: themeMode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)",
-          backgroundColor: themeMode === "dark" ? "rgba(37,37,37,0.8)" : "rgba(255,255,255,0.8)"
+          borderColor: "var(--chat-border-soft)",
+          backgroundColor: "var(--chat-header-bg)"
         }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-1 flex-1 min-w-0 overflow-x-auto scrollbar-hide py-0.5 scroll-smooth", children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "div",
             {
               className: "relative flex items-center gap-1.5 px-3 py-1.5 rounded-lg cursor-pointer transition-all duration-150 group flex-shrink-0 min-w-0",
               style: {
-                backgroundColor: tab.isActive ? themeMode === "dark" ? "#444444" : "#f5f5f5" : "transparent",
-                color: tab.isActive ? themeMode === "dark" ? "#e5e5e5" : "#171717" : themeMode === "dark" ? "#999999" : "#737373"
+                backgroundColor: tab.isActive ? "hsl(var(--chat-surface))" : "transparent",
+                color: tab.isActive ? "hsl(var(--chat-text))" : "hsl(var(--chat-text-muted))"
               },
               onMouseEnter: (e) => {
                 if (!tab.isActive) {
-                  e.currentTarget.style.backgroundColor = themeMode === "dark" ? "rgba(68,68,68,0.5)" : "rgba(245,245,245,0.5)";
+                  e.currentTarget.style.backgroundColor = "var(--chat-hover-bg)";
                 }
               },
               onMouseLeave: (e) => {
@@ -1960,7 +1960,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                     },
                     onMouseEnter: (e) => {
                       e.currentTarget.style.opacity = "1";
-                      e.currentTarget.style.backgroundColor = themeMode === "dark" ? "#555555" : "#e5e5e5";
+                      e.currentTarget.style.backgroundColor = "hsl(var(--chat-surface-hover))";
                     },
                     onMouseLeave: (e) => {
                       e.currentTarget.style.opacity = tab.isActive ? "0.6" : "0";
@@ -1980,14 +1980,14 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 onClick: createNewTab,
                 className: "flex items-center justify-center w-7 h-7 rounded-lg transition-all duration-150",
                 style: {
-                  color: themeMode === "dark" ? "#999999" : "#737373"
+                  color: "hsl(var(--chat-text-muted))"
                 },
                 onMouseEnter: (e) => {
-                  e.currentTarget.style.color = themeMode === "dark" ? "#e5e5e5" : "#171717";
-                  e.currentTarget.style.backgroundColor = themeMode === "dark" ? "#444444" : "#f5f5f5";
+                  e.currentTarget.style.color = "hsl(var(--chat-text))";
+                  e.currentTarget.style.backgroundColor = "hsl(var(--chat-surface))";
                 },
                 onMouseLeave: (e) => {
-                  e.currentTarget.style.color = themeMode === "dark" ? "#999999" : "#737373";
+                  e.currentTarget.style.color = "hsl(var(--chat-text-muted))";
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "New Chat",
@@ -2001,18 +2001,18 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                   onClick: () => setShowHistory(!showHistory),
                   className: "flex items-center justify-center w-7 h-7 rounded-lg transition-all duration-150",
                   style: {
-                    color: showHistory ? themeMode === "dark" ? "#e5e5e5" : "#171717" : themeMode === "dark" ? "#999999" : "#737373",
-                    backgroundColor: showHistory ? themeMode === "dark" ? "#444444" : "#f5f5f5" : "transparent"
+                    color: showHistory ? "hsl(var(--chat-text))" : "hsl(var(--chat-text-muted))",
+                    backgroundColor: showHistory ? "hsl(var(--chat-surface))" : "transparent"
                   },
                   onMouseEnter: (e) => {
                     if (!showHistory) {
-                      e.currentTarget.style.color = themeMode === "dark" ? "#e5e5e5" : "#171717";
-                      e.currentTarget.style.backgroundColor = themeMode === "dark" ? "#444444" : "#f5f5f5";
+                      e.currentTarget.style.color = "hsl(var(--chat-text))";
+                      e.currentTarget.style.backgroundColor = "hsl(var(--chat-surface))";
                     }
                   },
                   onMouseLeave: (e) => {
                     if (!showHistory) {
-                      e.currentTarget.style.color = themeMode === "dark" ? "#999999" : "#737373";
+                      e.currentTarget.style.color = "hsl(var(--chat-text-muted))";
                       e.currentTarget.style.backgroundColor = "transparent";
                     }
                   },
@@ -2021,15 +2021,15 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 }
               ),
               showHistory && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute right-0 top-full mt-1.5 w-72 rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)] z-50 animate-in fade-in slide-in-from-top-1 duration-150 overflow-hidden", style: {
-                backgroundColor: themeMode === "dark" ? "#252525" : "#ffffff",
-                border: `1px solid ${themeMode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"}`
+                backgroundColor: "hsl(var(--chat-background))",
+                border: `1px solid ${"var(--chat-border-medium)"}`
               }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-2.5 border-b", style: {
-                  borderColor: themeMode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)",
-                  backgroundColor: themeMode === "dark" ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.02)"
+                  borderColor: "var(--chat-border-soft)",
+                  backgroundColor: "var(--chat-overlay)"
                 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.SearchIcon, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5", style: {
-                    color: themeMode === "dark" ? "#666666" : "#999999"
+                    color: "hsl(var(--chat-text-muted))"
                   }, strokeWidth: 2 }),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                     "input",
@@ -2040,29 +2040,29 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                       onChange: (e) => setSearchQuery(e.target.value),
                       className: "w-full h-7 pl-8 pr-2.5 text-[13px] rounded-lg focus:outline-none transition-all",
                       style: {
-                        backgroundColor: themeMode === "dark" ? "#1a1a1a" : "#ffffff",
-                        border: `1px solid ${themeMode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"}`,
-                        color: themeMode === "dark" ? "#e5e5e5" : "#171717"
+                        backgroundColor: "hsl(var(--chat-surface-deep))",
+                        border: `1px solid ${"var(--chat-border-medium)"}`,
+                        color: "hsl(var(--chat-text))"
                       }
                     }
                   )
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-[13px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-[13px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
-                    backgroundColor: themeMode === "dark" ? "#333333" : "#f5f5f5"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.MessageSquareIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Conversations" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Start a new chat to begin" })
+                    backgroundColor: "hsl(var(--chat-surface))"
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.MessageSquareIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Conversations" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Start a new chat to begin" })
                 ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
-                    backgroundColor: themeMode === "dark" ? "#333333" : "#f5f5f5"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.SearchIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Results" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Try a different search" })
+                    backgroundColor: "hsl(var(--chat-surface))"
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.SearchIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Results" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Try a different search" })
                 ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mb-0.5", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-2.5 py-1 sticky top-0 backdrop-blur-sm z-10", style: {
-                    backgroundColor: themeMode === "dark" ? "rgba(37,37,37,0.95)" : "rgba(255,255,255,0.95)"
-                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: groupName }) }),
+                    backgroundColor: "var(--chat-header-bg-strong)"
+                  }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: "hsl(var(--chat-text-muted))" }, children: groupName }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
                     const isActiveConversation = activeTabId === conversation.id;
                     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2070,11 +2070,11 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                       {
                         className: "w-full px-2 py-1 rounded-md transition-all duration-150 text-left group relative",
                         style: {
-                          backgroundColor: isActiveConversation ? themeMode === "dark" ? "#333333" : "#f5f5f5" : "transparent"
+                          backgroundColor: isActiveConversation ? "hsl(var(--chat-surface))" : "transparent"
                         },
                         onMouseEnter: (e) => {
                           if (!isActiveConversation) {
-                            e.currentTarget.style.backgroundColor = themeMode === "dark" ? "rgba(51,51,51,0.5)" : "rgba(245,245,245,0.5)";
+                            e.currentTarget.style.backgroundColor = "var(--chat-hover-bg)";
                           }
                         },
                         onMouseLeave: (e) => {
@@ -2086,14 +2086,14 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                         children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5", children: [
                           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[12px] line-clamp-1 transition-colors leading-tight", style: {
                             fontWeight: isActiveConversation ? 500 : 400,
-                            color: isActiveConversation ? themeMode === "dark" ? "#e5e5e5" : "#171717" : themeMode === "dark" ? "#cccccc" : "#404040"
+                            color: isActiveConversation ? "hsl(var(--chat-text))" : "hsl(var(--chat-text-strong))"
                           }, children: conversation.title }) }),
                           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                             import_lucide_react10.ChevronRightIcon,
                             {
                               className: "h-3 w-3 transition-all duration-150 flex-shrink-0",
                               style: {
-                                color: themeMode === "dark" ? "#666666" : "#a3a3a3",
+                                color: "hsl(var(--chat-text-subtle))",
                                 opacity: isActiveConversation ? 1 : 0
                               },
                               strokeWidth: 2
@@ -2113,14 +2113,14 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 onClick: onClose,
                 className: "flex items-center justify-center w-7 h-7 rounded-lg transition-all duration-150",
                 style: {
-                  color: themeMode === "dark" ? "#999999" : "#737373"
+                  color: "hsl(var(--chat-text-muted))"
                 },
                 onMouseEnter: (e) => {
-                  e.currentTarget.style.color = themeMode === "dark" ? "#e5e5e5" : "#171717";
-                  e.currentTarget.style.backgroundColor = themeMode === "dark" ? "#444444" : "#f5f5f5";
+                  e.currentTarget.style.color = "hsl(var(--chat-text))";
+                  e.currentTarget.style.backgroundColor = "hsl(var(--chat-surface))";
                 },
                 onMouseLeave: (e) => {
-                  e.currentTarget.style.color = themeMode === "dark" ? "#999999" : "#737373";
+                  e.currentTarget.style.color = "hsl(var(--chat-text-muted))";
                   e.currentTarget.style.backgroundColor = "transparent";
                 },
                 title: "Close Chat",
@@ -2171,6 +2171,43 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
 // src/ChatWidget.tsx
 var import_lucide_react11 = require("lucide-react");
+// src/utils/color.ts
+function toHslTripletIfHex(value) {
+  const trimmed = value.trim();
+  const hexMatch = /^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.exec(trimmed);
+  if (!hexMatch) return value;
+  let hex = hexMatch[1];
+  if (hex.length === 3) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  const r = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b = parseInt(hex.substring(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+// src/ChatWidget.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function ChatWidget({
   userId,
@@ -2196,8 +2233,20 @@ function ChatWidget({
     if (display?.width) {
       styles["--chat-widget-width"] = display.width;
     }
+    if (theme?.primaryColor) {
+      styles["--chat-primary"] = toHslTripletIfHex(theme.primaryColor);
+    }
+    if (theme?.backgroundColor) {
+      styles["--chat-background"] = toHslTripletIfHex(theme.backgroundColor);
+    }
+    if (theme?.textColor) {
+      styles["--chat-text"] = toHslTripletIfHex(theme.textColor);
+    }
+    if (theme?.tokens) {
+      Object.assign(styles, theme.tokens);
+    }
     return styles;
-  }, [display?.width]);
+  }, [display?.width, theme?.primaryColor, theme?.backgroundColor, theme?.textColor, theme?.tokens]);
   const handleMouseDown = (0, import_react12.useCallback)((e) => {
     if (!resizable) return;
     e.preventDefault();