@mordn/chat-widget 0.1.3 → 0.2.0

package/dist/cli/init.js

@@ -79,111 +79,119 @@ const DEVELOPER_CONFIG = {
 };
 
 export async function POST(req: Request) {
-  const body = await req.json();
-  const userId = req.headers.get('X-User-Id');
-
-  if (!userId) {
-    return new Response('userId is required in X-User-Id header', { status: 400 });
-  }
-
-  const chatMessages: UIMessage[] = body.messages || [];
-  const id: string = body.id || 'temp-id';
-
-  const { model, systemPrompt, temperature } = DEVELOPER_CONFIG;
+  try {
+    const body = await req.json();
+    const userId = req.headers.get('X-User-Id');
 
-  // Check if conversation exists, create if not
-  const existingConv = await db
-    .select({ id: conversations.id })
-    .from(conversations)
-    .where(eq(conversations.id, id))
-    .limit(1);
+    if (!userId) {
+      return new Response('userId is required in X-User-Id header', { status: 400 });
+    }
 
-  if (!existingConv.length) {
-    await db.insert(conversations).values({
-      id,
-      userId,
-      title: 'New Chat',
-      metadata: {},
-    });
-  }
+    const chatMessages: UIMessage[] = body.messages || [];
+    const id: string = body.id || 'temp-id';
 
-  // Save the new user message
-  const userMessages = chatMessages.filter(msg => msg.role === 'user');
-  if (userMessages.length > 0) {
-    const newUserMessage = userMessages[userMessages.length - 1];
-    const textPart = newUserMessage.parts?.find(p => p.type === 'text') as { text: string } | undefined;
-    const fileParts = newUserMessage.parts?.filter(p => p.type === 'file') || [];
+    const { model, systemPrompt, temperature } = DEVELOPER_CONFIG;
 
-    const existingMsg = await db
-      .select({ id: messages.id })
-      .from(messages)
-      .where(eq(messages.id, newUserMessage.id))
+    // Check if conversation exists, create if not
+    const existingConv = await db
+      .select({ id: conversations.id })
+      .from(conversations)
+      .where(eq(conversations.id, id))
       .limit(1);
 
-    if (!existingMsg.length) {
-      await db.insert(messages).values({
-        id: newUserMessage.id,
-        conversationId: id,
-        role: newUserMessage.role,
-        content: textPart?.text || '',
-        files: fileParts,
-        model: model,
-        metadata: { parts: newUserMessage.parts || [] },
+    if (!existingConv.length) {
+      await db.insert(conversations).values({
+        id,
+        userId,
+        title: 'New Chat',
+        metadata: {},
       });
     }
 
-    // Update conversation title if needed
-    if (textPart?.text) {
-      const conv = await db
-        .select({ title: conversations.title })
-        .from(conversations)
-        .where(eq(conversations.id, id))
+    // Save the new user message
+    const userMessages = chatMessages.filter(msg => msg.role === 'user');
+    if (userMessages.length > 0) {
+      const newUserMessage = userMessages[userMessages.length - 1];
+      const textPart = newUserMessage.parts?.find(p => p.type === 'text') as { text: string } | undefined;
+      const fileParts = newUserMessage.parts?.filter(p => p.type === 'file') || [];
+
+      const existingMsg = await db
+        .select({ id: messages.id })
+        .from(messages)
+        .where(eq(messages.id, newUserMessage.id))
         .limit(1);
 
-      if (conv[0]?.title === 'New Chat') {
-        await updateConversationTitle(id, textPart.text.slice(0, 100));
+      if (!existingMsg.length) {
+        await db.insert(messages).values({
+          id: newUserMessage.id,
+          conversationId: id,
+          role: newUserMessage.role,
+          content: textPart?.text || '',
+          files: fileParts,
+          model: model,
+          metadata: { parts: newUserMessage.parts || [] },
+        });
       }
-    }
-  }
 
-  // Transform messages for AI (handle images)
-  const transformedMessages = chatMessages.map(msg => {
-    if (msg.role === 'user' && msg.parts) {
-      const textPart = msg.parts.find(p => p.type === 'text');
-      const fileParts = msg.parts.filter(p => p.type === 'file');
+      // Update conversation title if needed
+      if (textPart?.text) {
+        const conv = await db
+          .select({ title: conversations.title })
+          .from(conversations)
+          .where(eq(conversations.id, id))
+          .limit(1);
 
-      if (fileParts.length > 0) {
-        const content: any[] = [];
-        if (textPart && 'text' in textPart) {
-          content.push({ type: 'text', text: textPart.text });
+        if (conv[0]?.title === 'New Chat') {
+          await updateConversationTitle(id, textPart.text.slice(0, 100));
         }
-        for (const file of fileParts) {
-          if ('mediaType' in file && (file as any).mediaType?.startsWith('image/')) {
-            content.push({ type: 'image', image: (file as any).url });
-          }
-        }
-        return { ...msg, content };
       }
     }
-    return msg;
-  });
 
-  const result = streamText({
-    model: model,
-    messages: convertToModelMessages(transformedMessages),
-    system: systemPrompt,
-    temperature: temperature,
-  });
+    // Transform messages for AI (handle images)
+    const transformedMessages = chatMessages.map(msg => {
+      if (msg.role === 'user' && msg.parts) {
+        const textPart = msg.parts.find(p => p.type === 'text');
+        const fileParts = msg.parts.filter(p => p.type === 'file');
 
-  return result.toUIMessageStreamResponse({
-    sendSources: true,
-    sendReasoning: true,
-    onFinish: ({ messages: finalMessages }) => {
-      if (finalMessages.length > 0) {
-        saveChat({ chatId: id, messages: finalMessages, model, userId });
+        if (fileParts.length > 0) {
+          const content: any[] = [];
+          if (textPart && 'text' in textPart) {
+            content.push({ type: 'text', text: textPart.text });
+          }
+          for (const file of fileParts) {
+            if ('mediaType' in file && (file as any).mediaType?.startsWith('image/')) {
+              content.push({ type: 'image', image: (file as any).url });
+            }
+          }
+          return { ...msg, content };
+        }
       }
-    },
-  });
+      return msg;
+    });
+
+    const result = streamText({
+      model: model,
+      messages: convertToModelMessages(transformedMessages),
+      system: systemPrompt,
+      temperature: temperature,
+    });
+
+    return result.toUIMessageStreamResponse({
+      sendSources: true,
+      sendReasoning: true,
+      onFinish: ({ messages: finalMessages }) => {
+        if (finalMessages.length > 0) {
+          saveChat({ chatId: id, messages: finalMessages, model, userId });
+        }
+      },
+    });
+  } catch (error) {
+    console.error('Chat API error:', error);
+    return new Response(JSON.stringify({ error: 'Internal server error' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
 }
 `;
 var HISTORY_ROUTE = `import { NextResponse } from 'next/server';
@@ -291,11 +299,19 @@ export async function GET(
 var UPLOAD_ROUTE = `import { createClient } from '@supabase/supabase-js';
 import { nanoid } from 'nanoid';
 
-const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
-const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;
-
 export async function POST(req: Request) {
   try {
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+    const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+
+    // Check for required environment variables
+    if (!supabaseUrl || !supabaseServiceKey) {
+      console.error('Missing Supabase environment variables. Please set NEXT_PUBLIC_SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY');
+      return Response.json({
+        error: 'File upload is not configured. Please set up Supabase Storage environment variables.'
+      }, { status: 503 });
+    }
+
     const formData = await req.formData();
     const file = formData.get('file') as File;
     const conversationId = formData.get('conversationId') as string;
@@ -398,9 +414,11 @@ async function init() {
     filesCreated++;
   }
   const createUpload = await confirm("\nCreate file upload route? (requires Supabase Storage)");
+  let uploadRouteCreated = false;
   if (createUpload) {
     if (await writeFileWithConfirm(path.join(apiChatDir, "upload", "route.ts"), UPLOAD_ROUTE)) {
       filesCreated++;
+      uploadRouteCreated = true;
     }
   }
   console.log("\nCreating configuration files...");
@@ -416,11 +434,20 @@ async function init() {
   console.log("Next steps:");
   console.log("  1. Copy .env.example to .env.local and fill in your credentials");
   console.log("  2. Run: npx drizzle-kit push");
-  console.log("  3. Add the ChatWidget to your app:\n");
-  console.log("     import { ChatWidget } from '@mordn/chat-widget';");
-  console.log("     import '@mordn/chat-widget/styles.css';");
-  console.log("");
-  console.log('     <ChatWidget userId="user-123" />\n');
+  if (uploadRouteCreated) {
+    console.log('  3. Create a "chat-attachments" bucket in Supabase Storage');
+    console.log("  4. Add the ChatWidget with file uploads enabled:\n");
+    console.log("     import { ChatWidget } from '@mordn/chat-widget';");
+    console.log("     import '@mordn/chat-widget/styles.css';");
+    console.log("");
+    console.log('     <ChatWidget userId="user-123" features={{ fileUpload: true }} />\n');
+  } else {
+    console.log("  3. Add the ChatWidget to your app:\n");
+    console.log("     import { ChatWidget } from '@mordn/chat-widget';");
+    console.log("     import '@mordn/chat-widget/styles.css';");
+    console.log("");
+    console.log('     <ChatWidget userId="user-123" />\n');
+  }
   rl.close();
 }
 init().catch((error) => {

package/dist/index.d.mts

@@ -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

@@ -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

@@ -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",
@@ -2159,7 +2159,7 @@ function ChatInterface({ id, initialMessages, config, onClose } = {}) {
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PromptInputToolbar, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptInputTools, { children: config?.features?.fileUpload !== false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AttachButton, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptInputTools, { children: config?.features?.fileUpload === true && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AttachButton, {}) }),
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PromptInputSubmit, { disabled: !input, status })
             ] })
           ] })
@@ -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();