@mordn/chat-widget 0.1.3 → 0.2.0

package/dist/index.mjs

@@ -178,7 +178,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
@@ -1900,20 +1900,20 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
       ),
       children: [
         /* @__PURE__ */ jsxs12("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__ */ jsx20("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__ */ jsxs12(
             "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) => {
@@ -1940,7 +1940,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";
@@ -1960,14 +1960,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",
@@ -1981,18 +1981,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";
                     }
                   },
@@ -2001,15 +2001,15 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                 }
               ),
               showHistory && /* @__PURE__ */ jsxs12("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__ */ jsx20("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__ */ jsxs12("div", { className: "relative", children: [
                   /* @__PURE__ */ jsx20(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__ */ jsx20(
                     "input",
@@ -2020,29 +2020,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__ */ jsx20("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx20("div", { className: "text-[13px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+                /* @__PURE__ */ jsx20("div", { className: "max-h-[300px] overflow-y-auto ai-assistant-scrollbar", children: loadingHistory ? /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx20("div", { className: "text-[13px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Loading..." }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
                   /* @__PURE__ */ jsx20("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
-                    backgroundColor: themeMode === "dark" ? "#333333" : "#f5f5f5"
-                  }, children: /* @__PURE__ */ jsx20(MessageSquareIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ jsx20("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Conversations" }),
-                  /* @__PURE__ */ jsx20("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Start a new chat to begin" })
+                    backgroundColor: "hsl(var(--chat-surface))"
+                  }, children: /* @__PURE__ */ jsx20(MessageSquareIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ jsx20("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Conversations" }),
+                  /* @__PURE__ */ jsx20("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Start a new chat to begin" })
                 ] }) : groupedConversations.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
                   /* @__PURE__ */ jsx20("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mb-3", style: {
-                    backgroundColor: themeMode === "dark" ? "#333333" : "#f5f5f5"
-                  }, children: /* @__PURE__ */ jsx20(SearchIcon, { className: "h-5 w-5", style: { color: themeMode === "dark" ? "#666666" : "#a3a3a3" }, strokeWidth: 2 }) }),
-                  /* @__PURE__ */ jsx20("p", { className: "text-[13px] font-medium mb-0.5", style: { color: themeMode === "dark" ? "#e5e5e5" : "#171717" }, children: "No Results" }),
-                  /* @__PURE__ */ jsx20("p", { className: "text-[12px]", style: { color: themeMode === "dark" ? "#999999" : "#737373" }, children: "Try a different search" })
+                    backgroundColor: "hsl(var(--chat-surface))"
+                  }, children: /* @__PURE__ */ jsx20(SearchIcon, { className: "h-5 w-5", style: { color: "hsl(var(--chat-text-subtle))" }, strokeWidth: 2 }) }),
+                  /* @__PURE__ */ jsx20("p", { className: "text-[13px] font-medium mb-0.5", style: { color: "hsl(var(--chat-text))" }, children: "No Results" }),
+                  /* @__PURE__ */ jsx20("p", { className: "text-[12px]", style: { color: "hsl(var(--chat-text-muted))" }, children: "Try a different search" })
                 ] }) : /* @__PURE__ */ jsx20("div", { className: "py-0.5", children: groupedConversations.map(([groupName, groupConversations]) => /* @__PURE__ */ jsxs12("div", { className: "mb-0.5", children: [
                   /* @__PURE__ */ jsx20("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__ */ jsx20("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__ */ jsx20("h3", { className: "text-[10px] font-semibold uppercase tracking-wide", style: { color: "hsl(var(--chat-text-muted))" }, children: groupName }) }),
                   /* @__PURE__ */ jsx20("div", { className: "px-1 space-y-0.5", children: groupConversations.map((conversation) => {
                     const isActiveConversation = activeTabId === conversation.id;
                     return /* @__PURE__ */ jsx20(
@@ -2050,11 +2050,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) => {
@@ -2066,14 +2066,14 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
                         children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1.5", children: [
                           /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx20("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__ */ jsx20(
                             ChevronRightIcon2,
                             {
                               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
@@ -2093,14 +2093,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",
@@ -2139,7 +2139,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
               )
             ] }),
             /* @__PURE__ */ jsxs12(PromptInputToolbar, { children: [
-              /* @__PURE__ */ jsx20(PromptInputTools, { children: config?.features?.fileUpload !== false && /* @__PURE__ */ jsx20(AttachButton, {}) }),
+              /* @__PURE__ */ jsx20(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ jsx20(AttachButton, {}) }),
               /* @__PURE__ */ jsx20(PromptInputSubmit, { disabled: !input, status })
             ] })
           ] })
@@ -2151,6 +2151,43 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
 
 // src/ChatWidget.tsx
 import { MessageCircle } from "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
 import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function ChatWidget({
   userId,
@@ -2176,8 +2213,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 = useCallback4((e) => {
     if (!resizable) return;
     e.preventDefault();