@contenify/chatbot 0.1.2 → 0.1.5

package/dist/index.js

@@ -49,9 +49,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ContenifyChatBot: () => ContenifyChatBot,
-  default: () => index_default
+  default: () => index_default,
+  setConfig: () => setConfig
 });
 module.exports = __toCommonJS(index_exports);
+var import_react11 = require("react");
 
 // contexts/PreferencesContext.tsx
 var import_react = require("react");
@@ -60,12 +62,22 @@ var import_react = require("react");
 var import_axios = __toESM(require("axios"));
 
 // lib/config.ts
+var _apiUrl = process.env.NEXT_PUBLIC_CONTENIFY_API_URL || "http://localhost:8080/api";
+var _apiKey = process.env.NEXT_PUBLIC_API_KEY || "";
+var _domain = process.env.NEXT_PUBLIC_DOMAIN || "";
+function setConfig(config) {
+  if (config.apiUrl) _apiUrl = config.apiUrl;
+  if (config.apiKey) _apiKey = config.apiKey;
+  if (config.domain) _domain = config.domain;
+}
 function getApiBaseUrl() {
-  return process.env.NEXT_PUBLIC_CONTENIFY_API_URL || DEFAULT_API_BASE_URL;
+  return _apiUrl;
 }
 function getServerBaseUrl() {
-  const apiUrl = getApiBaseUrl();
-  return apiUrl.replace(/\/api\/?$/, "");
+  return _apiUrl.replace(/\/api\/?$/, "");
+}
+function getApiKey() {
+  return _apiKey;
 }
 
 // lib/api.ts
@@ -78,7 +90,7 @@ var api = import_axios.default.create({
 });
 api.interceptors.request.use(
   (config) => {
-    const apiKey = process.env.NEXT_PUBLIC_API_KEY;
+    const apiKey = getApiKey();
     if (apiKey) {
       config.headers["x-api-key"] = apiKey;
     }
@@ -101,6 +113,88 @@ var getMyPreferencesApi = async () => {
   const { data } = await api_default.get("/preferences/me");
   return data.data;
 };
+var savePreferencesApi = async ({
+  botName,
+  logo,
+  state,
+  cities,
+  primaryColor,
+  secondaryColor,
+  theme,
+  language,
+  showSidebar,
+  showHeader,
+  activeThemePreset,
+  showNewsPanel,
+  tone,
+  style,
+  wordCount,
+  includeQuotes,
+  includeFAQ,
+  targetAudience
+}) => {
+  const formData = new FormData();
+  if (botName) {
+    formData.append("botName", botName);
+  }
+  if (logo) {
+    formData.append("logo", logo);
+  }
+  if (state) {
+    formData.append("state", state);
+  }
+  if (cities) {
+    formData.append("cities", JSON.stringify(cities));
+  }
+  if (primaryColor) {
+    formData.append("primaryColor", primaryColor);
+  }
+  if (secondaryColor) {
+    formData.append("secondaryColor", secondaryColor);
+  }
+  if (theme) {
+    formData.append("theme", theme);
+  }
+  if (language) {
+    formData.append("language", language);
+  }
+  if (showSidebar !== void 0) {
+    formData.append("showSidebar", String(showSidebar));
+  }
+  if (showHeader !== void 0) {
+    formData.append("showHeader", String(showHeader));
+  }
+  if (activeThemePreset !== void 0) {
+    formData.append("activeThemePreset", activeThemePreset != null ? activeThemePreset : "");
+  }
+  if (showNewsPanel !== void 0) {
+    formData.append("showNewsPanel", String(showNewsPanel));
+  }
+  if (tone) {
+    formData.append("tone", tone);
+  }
+  if (style) {
+    formData.append("style", style);
+  }
+  if (wordCount) {
+    formData.append("wordCount", wordCount);
+  }
+  if (includeQuotes !== void 0) {
+    formData.append("includeQuotes", String(includeQuotes));
+  }
+  if (includeFAQ !== void 0) {
+    formData.append("includeFAQ", String(includeFAQ));
+  }
+  if (targetAudience !== void 0) {
+    formData.append("targetAudience", targetAudience);
+  }
+  const { data } = await api_default.put("/preferences", formData, {
+    headers: {
+      "Content-Type": "multipart/form-data"
+    }
+  });
+  return data.data;
+};
 
 // contexts/PreferencesContext.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -205,59 +299,6 @@ function usePreferences() {
 // components/chatbot/ChatBot.tsx
 var import_react10 = require("react");
 
-// components/chatbot/ArticleModal.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function ArticleModal({
-  article,
-  onClose,
-  onRecreate
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative w-full max-w-3xl bg-white rounded-xl shadow-card border border-gray-200 animate-in fade-in zoom-in", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start justify-between px-6 py-4 border-b border-gray-300", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500 mb-1", children: "Source Article" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-lg font-semibold text-gray-900 leading-snug", children: article.title })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          onClick: onClose,
-          className: "text-gray-400 hover:text-gray-700 transition",
-          "aria-label": "Close modal",
-          children: "\u2715"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-6 py-5 max-h-[65vh] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "prose prose-sm max-w-none text-gray-800", children: article.content }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-t bg-gray-50 rounded-b-xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs text-gray-400", children: "This content will be recreated using AI" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "button",
-          {
-            onClick: onClose,
-            className: "px-4 py-2 text-sm rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition",
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "button",
-          {
-            onClick: () => onRecreate({
-              title: article.title,
-              content: article.content,
-              id: article._id
-              // Include article ID when available
-            }),
-            className: "px-4 py-2 text-sm rounded-md bg-gray-900 text-white hover:bg-black transition",
-            children: "Recreate Article"
-          }
-        )
-      ] })
-    ] })
-  ] }) });
-}
-
 // util/util.ts
 function extractArticleContent(raw) {
   if (!raw) {
@@ -299,7 +340,7 @@ var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
 var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"));
 var import_lucide_react = require("lucide-react");
 var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function RichTextEditor({
   content,
   onChange,
@@ -321,7 +362,7 @@ function RichTextEditor({
     content,
     editorProps: {
       attributes: {
-        class: "prose prose-sm max-w-none focus:outline-none min-h-[350px] p-4"
+        class: "ProseMirror"
       }
     },
     onUpdate: ({ editor: editor2 }) => {
@@ -334,96 +375,96 @@ function RichTextEditor({
     }
   }, [content, editor]);
   if (!editor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-full h-[400px] border border-gray-300 rounded-lg flex items-center justify-center text-gray-400", children: "Loading editor..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "cnfy-editor-loading", children: "Loading editor..." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "w-full border border-gray-300 rounded-lg overflow-hidden", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap items-center gap-1 p-2 border-b border-gray-200 bg-gray-50", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cnfy-editor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cnfy-toolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         ToolbarButton,
         {
           onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
           isActive: editor.isActive("heading", { level: 1 }),
           title: "Heading 1",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Heading1, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Heading1, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         ToolbarButton,
         {
           onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
           isActive: editor.isActive("heading", { level: 2 }),
           title: "Heading 2",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Heading2, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Heading2, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         ToolbarButton,
         {
           onClick: () => editor.chain().focus().setParagraph().run(),
           isActive: editor.isActive("paragraph"),
           title: "Paragraph",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Pilcrow, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Pilcrow, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "cnfy-toolbar-divider" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         ToolbarButton,
         {
           onClick: () => editor.chain().focus().toggleBold().run(),
           isActive: editor.isActive("bold"),
           title: "Bold",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Bold, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Bold, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         ToolbarButton,
         {
           onClick: () => editor.chain().focus().toggleItalic().run(),
           isActive: editor.isActive("italic"),
           title: "Italic",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Italic, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Italic, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "cnfy-toolbar-divider" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         ToolbarButton,
         {
           onClick: () => editor.chain().focus().toggleBulletList().run(),
           isActive: editor.isActive("bulletList"),
           title: "Bullet List",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.List, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.List, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         ToolbarButton,
         {
           onClick: () => editor.chain().focus().toggleOrderedList().run(),
           isActive: editor.isActive("orderedList"),
           title: "Numbered List",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ListOrdered, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ListOrdered, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "cnfy-toolbar-divider" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         ToolbarButton,
         {
           onClick: () => editor.chain().focus().undo().run(),
           disabled: !editor.can().undo(),
           title: "Undo",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Undo, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Undo, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         ToolbarButton,
         {
           onClick: () => editor.chain().focus().redo().run(),
           disabled: !editor.can().redo(),
           title: "Redo",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Redo, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Redo, { size: 18 })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.EditorContent, { editor, className: "min-h-[350px]" })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.EditorContent, { editor, className: "cnfy-editor-content" })
   ] });
 }
 function ToolbarButton({
@@ -433,13 +474,13 @@ function ToolbarButton({
   title,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       onClick,
       disabled,
       title,
-      className: `p-2 rounded hover:bg-gray-200 transition-colors ${isActive ? "bg-gray-200 text-emerald-600" : "text-gray-600"} ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
+      className: `cnfy-toolbar-btn ${isActive ? "cnfy-toolbar-btn--active" : ""} ${disabled ? "cnfy-toolbar-btn--disabled" : ""}`,
       children
     }
   );
@@ -464,7 +505,7 @@ function useTheme() {
 }
 
 // components/chatbot/EditModal.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function EditModal({
   isOpen,
   initialContent,
@@ -523,30 +564,30 @@ function EditModal({
     }
   };
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cnfy-edit-modal-overlay", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
-        className: "absolute inset-0 bg-black/50",
+        className: "cnfy-edit-modal-backdrop",
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative w-full h-full max-w-5xl max-h-[90vh] m-4 bg-white rounded-xl shadow-2xl flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: "text-xl font-semibold text-gray-900", children: "Edit Article" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cnfy-edit-modal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cnfy-edit-modal-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "cnfy-edit-modal-title", children: "Edit Article" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             onClick: onClose,
-            className: "p-2 rounded-full hover:bg-gray-100 transition-colors",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { size: 20, className: "text-gray-500" })
+            className: "cnfy-edit-modal-close-btn",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.X, { size: 20, className: "cnfy-edit-modal-close-icon" })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Article Content" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cnfy-edit-modal-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "cnfy-edit-label", children: "Article Content" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             RichTextEditor,
             {
               content,
@@ -555,29 +596,29 @@ function EditModal({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Meta Keywords" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-wrap gap-2 mb-3", children: keywords.map((keyword, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "cnfy-edit-label", children: "Meta Keywords" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cnfy-keyword-list", children: keywords.map((keyword, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "span",
             {
-              className: "inline-flex items-center gap-1 px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm",
+              className: "cnfy-keyword-tag",
               children: [
                 "#",
                 keyword,
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     onClick: () => handleRemoveKeyword(index),
-                    className: "ml-1 text-gray-400 hover:text-gray-600",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { size: 14 })
+                    className: "cnfy-keyword-remove-btn",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.X, { size: 14 })
                   }
                 )
               ]
             },
             index
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cnfy-keyword-input-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "input",
               {
                 type: "text",
@@ -585,42 +626,42 @@ function EditModal({
                 onChange: (e) => setNewKeyword(e.target.value),
                 onKeyDown: handleKeyDown,
                 placeholder: "Add a keyword...",
-                className: "flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
+                className: "cnfy-keyword-input"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "button",
               {
                 onClick: handleAddKeyword,
-                className: "px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors",
+                className: "cnfy-btn-add-keyword",
                 children: "Add"
               }
             )
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t bg-gray-50", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cnfy-edit-modal-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             onClick: onClose,
-            className: "px-4 py-2 text-gray-700 text-sm font-medium hover:bg-gray-100 rounded-lg transition-colors",
+            className: "cnfy-btn-footer-cancel",
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             onClick: () => onSaveDraft(content, keywords),
-            className: "px-4 py-2 bg-gray-200 text-gray-800 text-sm font-medium rounded-lg hover:bg-gray-300 transition-colors",
+            className: "cnfy-btn-save-draft",
             children: "Save Draft"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             onClick: () => onPost(content, keywords),
-            className: "px-4 py-2 bg-emerald-600 text-white text-sm font-medium rounded-lg hover:bg-emerald-700 transition-colors",
+            className: "cnfy-btn-post-article",
             style: { backgroundColor: primaryColor, color: "#fff" },
             children: "Post"
           }
@@ -633,7 +674,7 @@ function EditModal({
 // components/news/NewsList.tsx
 var import_react5 = require("react");
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var dateFormatter = new Intl.DateTimeFormat("en-GB", {
   day: "2-digit",
   month: "short",
@@ -675,22 +716,22 @@ function NewsList({
     b = Math.round(b + (255 - b) * (percent / 100));
     return `rgb(${r}, ${g}, ${b})`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-4 space-y-3", children: news.flatMap((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "cnfy-news-list", children: news.flatMap((item) => {
     const publishedDate = new Date(item.publishedAt);
     const links = extractLinksFromContent(item.content);
     if (links.length > 0) {
-      return links.map((link, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      return links.map((link, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "div",
         {
-          className: "flex items-start justify-between gap-3 rounded-lg border border-gray-200 bg-white p-3 text-sm hover:bg-gray-50 transition",
+          className: "cnfy-news-card",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "font-bold text-gray-900 line-clamp-2", children: link.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-wrap items-center gap-2 mt-2 text-xs text-gray-500", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-news-card-content", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "cnfy-news-card-title", children: link.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-news-card-meta", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "span",
                   {
-                    className: "inline-flex items-center rounded-full px-2 py-0.5 font-medium border",
+                    className: "cnfy-news-badge",
                     style: {
                       backgroundColor: lightenColor(primaryColorState, 95),
                       color: primaryColor,
@@ -699,38 +740,37 @@ function NewsList({
                     children: link.source || item.sourceName
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u2022" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "capitalize", children: item.category }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u2022" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u2022" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "cnfy-news-card-category", children: item.category }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u2022" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
                   dateFormatter.format(publishedDate),
                   " ",
                   timeFormatter.format(publishedDate)
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2 shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-news-card-actions", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "button",
                 {
                   onClick: () => window.open(link.url, "_blank"),
-                  className: "p-1 text-gray-400 hover:text-gray-700",
+                  className: "cnfy-news-action-btn",
                   title: "View",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Eye, { size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Eye, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "button",
                 {
                   onClick: () => onRecreate({
                     title: link.title,
                     content: link.title,
                     id: item._id
-                    // Include article ID
                   }),
-                  className: "p-1 text-gray-400 hover:text-gray-700",
+                  className: "cnfy-news-action-btn",
                   title: "Recreate",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.RefreshCcw, { size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.RefreshCcw, { size: 16 })
                 }
               )
             ] })
@@ -739,18 +779,18 @@ function NewsList({
         `${item._id}-link-${idx}`
       ));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
-        className: "flex items-start justify-between gap-3 rounded-lg border border-gray-200 bg-white p-3 text-sm hover:bg-gray-50 transition",
+        className: "cnfy-news-card",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "font-bold text-gray-900 line-clamp-2", children: item.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-wrap items-center gap-2 mt-2 text-xs text-gray-500", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-news-card-content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "cnfy-news-card-title", children: item.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-news-card-meta", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "span",
                 {
-                  className: "inline-flex items-center rounded-full px-2 py-0.5 font-medium border",
+                  className: "cnfy-news-badge",
                   style: {
                     backgroundColor: lightenColor(primaryColorState, 95),
                     color: primaryColor,
@@ -759,38 +799,37 @@ function NewsList({
                   children: item.sourceName
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u2022" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "capitalize", children: item.category }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u2022" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u2022" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "cnfy-news-card-category", children: item.category }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u2022" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
                 dateFormatter.format(publishedDate),
                 " ",
                 timeFormatter.format(publishedDate)
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2 shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cnfy-news-card-actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "button",
               {
                 onClick: () => onView(item),
-                className: "p-1 text-gray-400 hover:text-gray-700",
+                className: "cnfy-news-action-btn",
                 title: "View",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Eye, { size: 16 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Eye, { size: 16 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "button",
               {
                 onClick: () => onRecreate({
                   title: item.title,
                   content: item.content || item.title,
                   id: item._id
-                  // Include article ID
                 }),
-                className: "p-1 text-gray-400 hover:text-gray-700",
+                className: "cnfy-news-action-btn",
                 title: "Recreate",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.RefreshCcw, { size: 16 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.RefreshCcw, { size: 16 })
               }
             )
           ] })
@@ -821,7 +860,7 @@ var getNewsBySource = async (sourceId) => {
 
 // components/chatbot/ChatWindow.tsx
 var import_react_select = __toESM(require("react-select"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ACTION_ICONS = {
   recreate_article: import_lucide_react4.RefreshCcw,
   create_summary: import_lucide_react4.ListChecks,
@@ -997,59 +1036,59 @@ function ChatWindow({
     });
     return { blocks, metaKeywords };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "h-full flex w-full flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 px-4 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "max-w-3xl chat-scroll mx-auto space-y-6", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-chat", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-chat-area", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-chat-scroll", children: [
       messages.map((msg) => {
         var _a2;
         const parsed = formatAIContent(msg.content);
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-msg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-msg-avatar-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
-              className: "h-8 w-8 rounded-full flex items-center justify-center text-xs font-semibold text-white",
+              className: "cnfy-msg-avatar",
               style: {
                 backgroundColor: msg.role === "assistant" ? primaryColor : "#1f2937"
               },
               children: msg.role === "assistant" ? "AI" : "You"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1 text-sm space-y-3 leading-relaxed", children: [
-            msg.role === "assistant" && parsed.blocks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex justify-end -mt-1 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-msg-body", children: [
+            msg.role === "assistant" && parsed.blocks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-msg-copy-row", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 onClick: () => handleCopy(parsed.blocks, msg.id),
-                className: "p-1.5 rounded-md hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600",
+                className: "cnfy-copy-btn",
                 title: "Copy to clipboard",
-                children: copiedId === msg.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Check, { size: 16, className: "text-emerald-600" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Copy, { size: 16 })
+                children: copiedId === msg.id ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Check, { size: 16, className: "cnfy-copy-icon--copied" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Copy, { size: 16 })
               }
             ) }),
             parsed.blocks.map((block, idx) => {
               if (block.type === "h1") {
-                return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "h1",
                   {
-                    className: "text-sm font-semibold",
+                    className: "cnfy-block-h1",
                     children: block.text
                   },
                   idx
                 );
               }
               if (block.type === "h2") {
-                return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "h2",
                   {
-                    className: "text-base font-semibold mt-4",
+                    className: "cnfy-block-h2",
                     children: block.text
                   },
                   idx
                 );
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-800", children: block.text }, idx);
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cnfy-block-p", children: block.text }, idx);
             }),
-            parsed.metaKeywords.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pt-4 border-t mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap gap-2", children: parsed.metaKeywords.map((tag, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            parsed.metaKeywords.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-msg-keywords", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-msg-keywords-list", children: parsed.metaKeywords.map((tag, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "span",
               {
-                className: "text-xs px-3 py-1 rounded-full bg-gray-100 text-gray-700",
+                className: "cnfy-msg-keyword-tag",
                 children: [
                   "#",
                   tag
@@ -1057,41 +1096,41 @@ function ChatWindow({
               },
               i
             )) }) }),
-            msg.role === "assistant" && (analyzedData == null ? void 0 : analyzedData.messageId) === msg.id && analyzedData.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap gap-2 pt-4 mt-2", children: analyzedData.options.map((option) => {
+            msg.role === "assistant" && (analyzedData == null ? void 0 : analyzedData.messageId) === msg.id && analyzedData.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-action-options", children: analyzedData.options.map((option) => {
               const IconComponent = ACTION_ICONS[option.id] || import_lucide_react4.FileText;
-              return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 "button",
                 {
                   onClick: () => onSelectAction == null ? void 0 : onSelectAction(option.id, analyzedData.url, analyzedData.content),
-                  className: "flex items-center gap-2 px-4 py-2 border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors",
+                  className: "cnfy-action-btn",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconComponent, { size: 16 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconComponent, { size: 16 }),
                     option.name
                   ]
                 },
                 option.id
               );
             }) }),
-            msg.role === "assistant" && parsed.blocks.length > 0 && !(analyzedData == null ? void 0 : analyzedData.messageId) && (!isStreaming || msg.id !== ((_a2 = messages[messages.length - 1]) == null ? void 0 : _a2.id)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-3 pt-4 mt-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            msg.role === "assistant" && parsed.blocks.length > 0 && !(analyzedData == null ? void 0 : analyzedData.messageId) && (!isStreaming || msg.id !== ((_a2 = messages[messages.length - 1]) == null ? void 0 : _a2.id)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-msg-actions", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 "button",
                 {
                   onClick: () => handleEdit(parsed.blocks, parsed.metaKeywords, msg.id),
-                  className: "flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors",
+                  className: "cnfy-btn-edit",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Edit3, { size: 16 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Edit3, { size: 16 }),
                     "Edit"
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 "button",
                 {
                   onClick: () => handlePost(msg.content, parsed.metaKeywords),
-                  className: "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white hover:bg-emerald-700 transition-colors",
+                  className: "cnfy-btn-post",
                   style: { backgroundColor: primaryColor, color: "#fff" },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Send, { size: 16 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Send, { size: 16 }),
                     "Post"
                   ]
                 }
@@ -1100,34 +1139,34 @@ function ChatWindow({
           ] })
         ] }, msg.id);
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: bottomRef })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: bottomRef })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "shrink-0 bg-white px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "max-w-3xl mx-auto relative flex gap-2 items-end", children: [
-      !showNewsPanel && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: dropdownRef, className: "absolute left-3 top-1/2 -translate-y-1/2 z-10", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-input-area", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-input-inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: dropdownRef, className: "cnfy-news-pulse-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
             onClick: handleOpenNewsDropdown,
-            className: "flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600 transition-all animate-pulse hover:animate-none",
+            className: "cnfy-news-pulse-btn cnfy-animate-pulse",
             title: "Select from trending news",
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Zap, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Zap, { size: 16 })
           }
         ),
-        showNewsDropdown && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "absolute bottom-full left-0 mb-2 w-[600px] bg-white border border-gray-200 rounded-lg shadow-xl max-h-[600px] overflow-hidden", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-gray-100", style: { backgroundColor: primaryColor, color: "#fff" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm font-medium text-white", children: "Select News" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        showNewsDropdown && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-news-dropdown", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-news-dropdown-header", style: { backgroundColor: primaryColor, color: "#fff" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cnfy-news-dropdown-title", children: "Select News" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "button",
               {
                 onClick: () => setShowNewsDropdown(false),
-                className: "p-1 hover:bg-gray-200 rounded transition",
+                className: "cnfy-news-dropdown-close",
                 style: { backgroundColor: primaryColor, color: "#fff" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.X, { size: 14, className: "text-white" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.X, { size: 14 })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100 flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 min-w-[180px]", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-news-dropdown-source", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-news-dropdown-select-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               import_react_select.default,
               {
                 options: [
@@ -1173,36 +1212,36 @@ function ChatWindow({
                 }
               }
             ) }),
-            selectedSource && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            selectedSource && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "button",
               {
                 onClick: handleScrape,
                 disabled: scraping,
-                className: "flex items-center gap-1.5 px-3 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition disabled:opacity-50",
+                className: "cnfy-scrape-btn",
                 title: "Fetch latest news",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.RefreshCcw, { size: 14, className: scraping ? "animate-spin" : "" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.RefreshCcw, { size: 14, className: scraping ? "cnfy-animate-spin" : "" }),
                   scraping ? "Scraping..." : "Scrape"
                 ]
               }
             ),
-            !selectedSource && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            !selectedSource && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "button",
               {
                 onClick: () => fetchNews(null),
                 disabled: loadingNews,
-                className: "flex items-center gap-1 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg transition",
+                className: "cnfy-refresh-btn",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.RefreshCcw, { size: 14, className: loadingNews ? "animate-spin" : "" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.RefreshCcw, { size: 14, className: loadingNews ? "cnfy-animate-spin" : "" }),
                   "Refresh"
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "overflow-y-auto max-h-[320px]", children: loadingNews ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "p-4 text-center text-sm text-gray-500", children: "Loading news..." }) : trendingNews.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "p-4 text-center text-sm text-gray-500", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "No news found." }),
-            selectedSource && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-1 text-xs", children: 'Click "Scrape" to fetch latest news.' })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-news-dropdown-list", children: loadingNews ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-news-dropdown-msg", children: "Loading news..." }) : trendingNews.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-news-dropdown-msg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "No news found." }),
+            selectedSource && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cnfy-news-dropdown-hint", children: 'Click "Scrape" to fetch latest news.' })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             NewsList,
             {
               news: trendingNews.slice(0, 10),
@@ -1215,7 +1254,7 @@ function ChatWindow({
           ) })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "textarea",
         {
           ref: textareaRef,
@@ -1229,21 +1268,21 @@ function ChatWindow({
           },
           rows: 1,
           placeholder: "Ask AI something\u2026",
-          className: `flex-1 resize-none overflow-hidden border border-gray-300 ${!showNewsPanel ? "!pl-14" : "!pl-5"} !pr-[50px] input_box_textarea`,
+          className: `cnfy-chat-textarea ${!showNewsPanel ? "cnfy-chat-textarea--with-pulse" : ""}`,
           style: { maxHeight: "200px", overflowY: input.split("\n").length > 6 ? "auto" : "hidden" }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           onClick: handleSend,
-          className: "flex h-10 w-10 absolute right-[10px] top-[5px] items-center justify-center rounded-full bg-emerald-600 text-white",
+          className: "cnfy-send-btn",
           style: { backgroundColor: primaryColor, color: "#fff" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.SendHorizontal, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.SendHorizontal, { size: 18 })
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       EditModal,
       {
         isOpen: editModal.isOpen,
@@ -1258,334 +1297,611 @@ function ChatWindow({
 }
 
 // components/chatbot/UserMenu.tsx
-var import_react7 = require("react");
 var import_lucide_react5 = require("lucide-react");
-var import_react_hot_toast = __toESM(require("react-hot-toast"));
-
-// services/auth.service.ts
-var logoutUser = async () => {
-  const { data } = await api_default.post("/auth/logout");
-  return data;
-};
-
-// components/chatbot/UserMenu.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function UserMenu({
-  onNavigate,
-  onLogout
-}) {
-  const [open, setOpen] = (0, import_react7.useState)(false);
-  const ref = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, []);
-  function go(path) {
-    setOpen(false);
-    onNavigate == null ? void 0 : onNavigate(path);
-  }
-  async function logout() {
-    setOpen(false);
-    if (onLogout) {
-      onLogout();
-      return;
-    }
-    try {
-      await logoutUser();
-      import_react_hot_toast.default.success("Logged out successfully");
-      onNavigate == null ? void 0 : onNavigate("/login");
-    } catch (err) {
-      import_react_hot_toast.default.error(err || "Logout failed");
-    }
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref, className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "button",
-      {
-        onClick: () => setOpen((v) => !v),
-        className: "p-2 rounded-full hover:bg-gray-100 transition",
-        "aria-label": "Settings",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.Settings, { size: 20, className: "text-gray-600" })
-      }
-    ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "absolute right-0 top-full mb-2 w-52 bg-white border border-gray-200 rounded-lg shadow-lg z-50", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem, { icon: import_lucide_react5.User, label: "Account", onClick: () => go("/dashboard/account") }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem, { icon: import_lucide_react5.Settings, label: "Preferences", onClick: () => go("/dashboard/preferences") }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem, { icon: import_lucide_react5.Palette, label: "Appearance", onClick: () => go("/dashboard/appearance") }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem, { icon: import_lucide_react5.HelpCircle, label: "Settings", onClick: () => go("/dashboard/settings") }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItem, { icon: import_lucide_react5.HelpCircle, label: "Help & Support", onClick: () => go("/dashboard/help") }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "border-t border-gray-300 my-1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        MenuItem,
-        {
-          icon: import_lucide_react5.LogOut,
-          label: "Logout",
-          danger: true,
-          onClick: logout
-        }
-      )
-    ] })
-  ] });
-}
-function MenuItem({
-  icon: Icon,
-  label,
-  onClick,
-  danger = false
+  onOpenPreferences
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cnfy-user-menu", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "button",
     {
-      onClick,
-      className: `w-full flex items-center gap-2 px-4 py-2 text-sm transition ${danger ? "text-red-600 hover:bg-red-50" : "text-gray-700 hover:bg-gray-100"}`,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: 16 }),
-        label
-      ]
+      onClick: () => onOpenPreferences == null ? void 0 : onOpenPreferences(),
+      className: "cnfy-user-menu-trigger",
+      "aria-label": "Settings",
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Settings, { size: 20, className: "cnfy-user-menu-trigger-icon" })
     }
-  );
+  ) });
 }
 
 // components/chatbot/headerBar.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function HeaderBar({
-  onNavigate,
-  onLogout
+  onOpenPreferences
 }) {
   const { primaryColor, botName, logoUrl } = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("header", { className: "sticky top-0 z-40 bg-white border-b border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mx-auto flex h-14 items-center justify-between px-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3 cursor-pointer", onClick: () => onNavigate == null ? void 0 : onNavigate("/"), children: [
-      logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: logoUrl, alt: "Logo", className: "h-8 w-8 rounded-md object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("header", { className: "cnfy-header", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "cnfy-header-inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "cnfy-header-left", children: [
+      logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: logoUrl, alt: "Logo", className: "cnfy-header-logo-img" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
-          className: "h-8 w-8 rounded-md text-white flex items-center justify-center font-bold text-sm",
+          className: "cnfy-header-logo-fallback",
           style: { backgroundColor: primaryColor },
           children: botName.charAt(0).toUpperCase()
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-semibold text-gray-900 text-base", children: botName.toUpperCase() })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "cnfy-header-brand", children: botName.toUpperCase() })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UserMenu, { onNavigate, onLogout }) })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "cnfy-header-right", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(UserMenu, { onOpenPreferences }) })
   ] }) });
 }
 
-// components/news/TrendingNews.tsx
-var import_react8 = require("react");
-var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function TrendingNews({
-  onRecreate,
-  selectedSource,
-  refreshKey,
-  news: externalNews,
-  isLoading: externalLoading
+// components/ui/Drawer.tsx
+var import_react7 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Drawer({
+  open,
+  onClose,
+  title,
+  children
 }) {
-  const [news, setNews] = (0, import_react8.useState)([]);
-  const [loading, setLoading] = (0, import_react8.useState)(false);
-  const displayNews = externalNews !== void 0 ? externalNews : news;
-  const isLoading = externalLoading !== void 0 ? externalLoading : loading;
-  const fetchNews = (0, import_react8.useCallback)(async () => {
-    if (externalNews !== void 0) {
-      return;
-    }
-    setLoading(true);
-    try {
-      let data;
-      if (selectedSource) {
-        data = await getNewsBySource(selectedSource);
-      } else {
-        data = await getTrendingNews();
-      }
-      setNews(data || []);
-    } catch (e) {
-      import_react_hot_toast2.default.error("Failed to load news");
-    } finally {
-      setLoading(false);
-    }
-  }, [selectedSource, externalNews]);
-  (0, import_react8.useEffect)(() => {
-    fetchNews();
-  }, [fetchNews, refreshKey]);
-  function handleView(item) {
-    window.open(item.sourceUrl || item.link, "_blank");
-  }
-  if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "p-4 text-sm text-gray-500", children: "Loading news..." });
-  }
-  if (!displayNews || displayNews.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-4 text-sm text-gray-500 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: "No news found for this source." }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-xs", children: 'Click "Scrape" to fetch latest news.' })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    NewsList,
-    {
-      news: displayNews,
-      onView: handleView,
-      onRecreate
+  (0, import_react7.useEffect)(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
     }
-  );
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cnfy-drawer-overlay", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cnfy-drawer-backdrop", onClick: onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cnfy-drawer-panel", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cnfy-drawer-header", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: "cnfy-drawer-title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: onClose, className: "cnfy-drawer-close-btn", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react6.X, { size: 20 }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cnfy-drawer-body", children })
+    ] })
+  ] });
 }
 
-// components/news/SourceSelector.tsx
+// components/preferences/Preferences.tsx
 var import_react9 = require("react");
-var import_lucide_react6 = require("lucide-react");
-var import_react_select2 = __toESM(require("react-select"));
-var import_react_hot_toast3 = __toESM(require("react-hot-toast"));
+var import_react_hot_toast = __toESM(require("react-hot-toast"));
+
+// services/settings.service.ts
+var triggerScrape = async ({
+  state,
+  cities
+}) => {
+  const { data } = await api_default.post("/scrape/trigger", {
+    state,
+    cities
+  });
+  return data;
+};
+var getScrapeStatus = async () => {
+  const { data } = await api_default.get("/scrape/status");
+  return data.data;
+};
+
+// components/ClientSelect.tsx
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ReactSelect = null;
+var ClientSelect = (props) => {
+  const [mounted, setMounted] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    setMounted(true);
+    import("react-select").then((mod) => {
+      ReactSelect = mod.default;
+    });
+  }, []);
+  if (!mounted || !ReactSelect) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ReactSelect, __spreadValues({}, props));
+};
+var ClientSelect_default = ClientSelect;
+
+// components/preferences/Preferences.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var ALL_SOURCES_VALUE = "__all__";
-function SourceSelector({
-  selectedSource,
-  onSourceChange,
-  onScrapeComplete,
-  onNewsLoaded,
-  onLoadingChange
-}) {
-  const [sources, setSources] = (0, import_react9.useState)([]);
-  const [loading, setLoading] = (0, import_react9.useState)(true);
+var STATE_OPTIONS = [
+  { value: "Uttar Pradesh", label: "Uttar Pradesh" }
+];
+var CITY_OPTIONS = [
+  "Agra",
+  "Aligarh",
+  "Ayodhya",
+  "Bareilly",
+  "Bijnor",
+  "Bulandshahr",
+  "Etawah",
+  "Firozabad",
+  "Ghaziabad",
+  "Gorakhpur",
+  "Jhansi",
+  "Kanpur",
+  "Lucknow",
+  "Mathura",
+  "Meerut",
+  "Moradabad",
+  "Muzaffarnagar",
+  "Noida",
+  "Prayagraj",
+  "Rampur",
+  "Saharanpur",
+  "Sitapur",
+  "Unnao",
+  "Varanasi"
+].map((city) => ({ value: city, label: city }));
+var LANGUAGE_OPTIONS = [
+  { value: "en", label: "English" },
+  { value: "hi", label: "Hindi" }
+];
+var TONE_OPTIONS = [
+  { value: "formal", label: "Formal" },
+  { value: "casual", label: "Casual" },
+  { value: "engaging", label: "Engaging" },
+  { value: "professional", label: "Professional" }
+];
+var STYLE_OPTIONS = [
+  { value: "news", label: "News Article" },
+  { value: "blog", label: "Blog Post" },
+  { value: "editorial", label: "Editorial" },
+  { value: "summary", label: "Summary" }
+];
+var WORD_COUNT_OPTIONS = [
+  { value: "short", label: "Short (~300 words)" },
+  { value: "medium", label: "Medium (~600 words)" },
+  { value: "long", label: "Long (~1000+ words)" }
+];
+function PreferencesPage() {
+  var _a, _b, _c;
+  const { preferences, loading, refreshPreferences, updatePreferences } = usePreferences();
+  const primaryColor = ((_a = preferences == null ? void 0 : preferences.chatbot) == null ? void 0 : _a.primaryColor) || "#10b981";
+  const [botName, setBotName] = (0, import_react9.useState)("");
+  const [logo, setLogo] = (0, import_react9.useState)(null);
+  const [logoUrl, setLogoUrl] = (0, import_react9.useState)(null);
+  const [state, setState] = (0, import_react9.useState)(null);
+  const [cities, setCities] = (0, import_react9.useState)([]);
+  const [language, setLanguage] = (0, import_react9.useState)(null);
+  const [tone, setTone] = (0, import_react9.useState)(null);
+  const [style, setStyle] = (0, import_react9.useState)(null);
+  const [wordCount, setWordCount] = (0, import_react9.useState)(null);
+  const [includeQuotes, setIncludeQuotes] = (0, import_react9.useState)(true);
+  const [includeFAQ, setIncludeFAQ] = (0, import_react9.useState)(false);
+  const [targetAudience, setTargetAudience] = (0, import_react9.useState)("");
+  const [saving, setSaving] = (0, import_react9.useState)(false);
+  const [success, setSuccess] = (0, import_react9.useState)(false);
   const [scraping, setScraping] = (0, import_react9.useState)(false);
-  const [fetchingNews, setFetchingNews] = (0, import_react9.useState)(true);
-  const { primaryColor } = useTheme();
-  (0, import_react9.useEffect)(() => {
-    onLoadingChange == null ? void 0 : onLoadingChange(fetchingNews);
-  }, [fetchingNews, onLoadingChange]);
+  const [scrapeStatus, setScrapeStatus] = (0, import_react9.useState)(null);
+  const [loadingStatus, setLoadingStatus] = (0, import_react9.useState)(true);
+  const [originalValues, setOriginalValues] = (0, import_react9.useState)({
+    botName: "",
+    state: void 0,
+    cities: [],
+    language: void 0,
+    tone: void 0,
+    style: void 0,
+    wordCount: void 0,
+    includeQuotes: true,
+    includeFAQ: false,
+    targetAudience: ""
+  });
   (0, import_react9.useEffect)(() => {
-    const fetchSources = async () => {
+    const fetchScrapeStatus = async () => {
       try {
-        const data = await getNewsSources();
-        setSources(data || []);
-      } catch (e) {
-        import_react_hot_toast3.default.error("Failed to load news sources");
+        const data = await getScrapeStatus();
+        setScrapeStatus(data);
+      } catch (error) {
+        console.log("Failed to fetch scrape status:", error);
       } finally {
-        setLoading(false);
+        setLoadingStatus(false);
       }
     };
-    fetchSources();
+    fetchScrapeStatus();
   }, []);
-  const fetchNews = (0, import_react9.useCallback)(async (sourceId) => {
-    setFetchingNews(true);
+  const handleScrape = async () => {
+    var _a2, _b2;
+    setScraping(true);
     try {
-      let news;
-      if (sourceId) {
-        news = await getNewsBySource(sourceId);
-      } else {
-        news = await getTrendingNews();
-      }
-      onNewsLoaded == null ? void 0 : onNewsLoaded(news || []);
-    } catch (err) {
-      console.error("Failed to fetch news:", err);
+      await triggerScrape({
+        state: (_a2 = preferences == null ? void 0 : preferences.localization) == null ? void 0 : _a2.state,
+        cities: (_b2 = preferences == null ? void 0 : preferences.localization) == null ? void 0 : _b2.cities
+      });
+      import_react_hot_toast.default.success("News scraping started successfully!");
+      setTimeout(async () => {
+        try {
+          const data = await getScrapeStatus();
+          setScrapeStatus(data);
+        } catch (e) {
+          console.log("Failed to refresh scrape status:", e);
+        }
+      }, 2e3);
+    } catch (error) {
+      console.error(error);
+      import_react_hot_toast.default.error("Failed to trigger news scraping");
     } finally {
-      setFetchingNews(false);
+      setScraping(false);
     }
-  }, []);
-  (0, import_react9.useEffect)(() => {
-    fetchNews(selectedSource);
-  }, [selectedSource, fetchNews]);
-  const handleSourceSelect = (option) => {
-    var _a;
-    const value = (option == null ? void 0 : option.value) === ALL_SOURCES_VALUE ? null : (_a = option == null ? void 0 : option.value) != null ? _a : null;
-    onSourceChange(value);
   };
-  const handleScrape = async () => {
-    if (!selectedSource) {
-      import_react_hot_toast3.default.error("Please select a source first");
+  (0, import_react9.useEffect)(() => {
+    var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+    if (preferences) {
+      const name = ((_a2 = preferences.chatbot) == null ? void 0 : _a2.name) || "";
+      const pState = (_b2 = preferences.localization) == null ? void 0 : _b2.state;
+      const pCities = ((_c2 = preferences.localization) == null ? void 0 : _c2.cities) || [];
+      const pLanguage = (_d = preferences.localization) == null ? void 0 : _d.language;
+      setBotName(name);
+      if ((_e = preferences.chatbot) == null ? void 0 : _e.logoUrl) setLogoUrl(preferences.chatbot.logoUrl);
+      if (pState) {
+        setState({ value: pState, label: pState });
+      }
+      if (Array.isArray(pCities)) {
+        setCities(pCities.map((city) => ({ value: city, label: city })));
+      }
+      if (pLanguage) {
+        const langOption = LANGUAGE_OPTIONS.find((opt) => opt.value === pLanguage);
+        setLanguage(langOption || null);
+      }
+      const pTone = (_f = preferences.content) == null ? void 0 : _f.tone;
+      const pStyle = (_g = preferences.content) == null ? void 0 : _g.style;
+      const pWordCount = (_h = preferences.content) == null ? void 0 : _h.wordCount;
+      const pIncludeQuotes = (_j = (_i = preferences.content) == null ? void 0 : _i.includeQuotes) != null ? _j : true;
+      const pIncludeFAQ = (_l = (_k = preferences.content) == null ? void 0 : _k.includeFAQ) != null ? _l : false;
+      const pTargetAudience = ((_m = preferences.content) == null ? void 0 : _m.targetAudience) || "";
+      if (pTone) {
+        const toneOption = TONE_OPTIONS.find((opt) => opt.value === pTone);
+        setTone(toneOption || null);
+      }
+      if (pStyle) {
+        const styleOption = STYLE_OPTIONS.find((opt) => opt.value === pStyle);
+        setStyle(styleOption || null);
+      }
+      if (pWordCount) {
+        const wordCountOption = WORD_COUNT_OPTIONS.find((opt) => opt.value === pWordCount);
+        setWordCount(wordCountOption || null);
+      }
+      setIncludeQuotes(pIncludeQuotes);
+      setIncludeFAQ(pIncludeFAQ);
+      setTargetAudience(pTargetAudience);
+      setOriginalValues({
+        botName: name,
+        state: pState,
+        cities: pCities,
+        language: pLanguage,
+        tone: pTone,
+        style: pStyle,
+        wordCount: pWordCount,
+        includeQuotes: pIncludeQuotes,
+        includeFAQ: pIncludeFAQ,
+        targetAudience: pTargetAudience
+      });
+    }
+  }, [preferences]);
+  const handleSave = async () => {
+    if (!botName) {
+      import_react_hot_toast.default.error("Chatbot name is required");
       return;
     }
-    setScraping(true);
+    setSaving(true);
+    setSuccess(false);
     try {
-      await scrapeNewsSource(selectedSource);
-      import_react_hot_toast3.default.success("News scraped successfully!");
-      onScrapeComplete == null ? void 0 : onScrapeComplete();
-      const news = await getNewsBySource(selectedSource);
-      onNewsLoaded == null ? void 0 : onNewsLoaded(news || []);
-    } catch (err) {
-      import_react_hot_toast3.default.error(err || "Failed to scrape news");
+      const payload = {};
+      if (botName !== originalValues.botName) {
+        payload.botName = botName;
+      }
+      if (logo) {
+        payload.logo = logo;
+      }
+      const currentState = state == null ? void 0 : state.value;
+      if (currentState !== originalValues.state) {
+        payload.state = currentState;
+      }
+      const currentCities = cities.map((c) => c.value);
+      const citiesChanged = currentCities.length !== originalValues.cities.length || currentCities.some((city, index) => city !== originalValues.cities[index]);
+      if (citiesChanged) {
+        payload.cities = currentCities;
+      }
+      const currentLanguage = language == null ? void 0 : language.value;
+      if (currentLanguage !== originalValues.language) {
+        payload.language = currentLanguage;
+      }
+      const currentTone = tone == null ? void 0 : tone.value;
+      if (currentTone !== originalValues.tone) {
+        payload.tone = currentTone;
+      }
+      const currentStyle = style == null ? void 0 : style.value;
+      if (currentStyle !== originalValues.style) {
+        payload.style = currentStyle;
+      }
+      const currentWordCount = wordCount == null ? void 0 : wordCount.value;
+      if (currentWordCount !== originalValues.wordCount) {
+        payload.wordCount = currentWordCount;
+      }
+      if (includeQuotes !== originalValues.includeQuotes) {
+        payload.includeQuotes = includeQuotes;
+      }
+      if (includeFAQ !== originalValues.includeFAQ) {
+        payload.includeFAQ = includeFAQ;
+      }
+      if (targetAudience !== originalValues.targetAudience) {
+        payload.targetAudience = targetAudience;
+      }
+      if (Object.keys(payload).length === 0) {
+        import_react_hot_toast.default.error("No changes to save");
+        setSaving(false);
+        return;
+      }
+      const updatedPreferences = await savePreferencesApi(payload);
+      if (updatedPreferences) {
+        updatePreferences(updatedPreferences);
+      } else {
+        await refreshPreferences();
+      }
+      setSuccess(true);
+      setLogo(null);
+      import_react_hot_toast.default.success("Preferences saved successfully!");
+    } catch (error) {
+      console.error(error);
+      import_react_hot_toast.default.error("Failed to save preferences");
     } finally {
-      setScraping(false);
+      setSaving(false);
     }
   };
-  const options = [
-    { value: ALL_SOURCES_VALUE, label: "All Sources (Trending)" },
-    ...sources.map((source) => ({
-      value: source.id,
-      label: source.name
-    }))
-  ];
-  const selectedOption = options.find(
-    (opt) => selectedSource === null ? opt.value === ALL_SOURCES_VALUE : opt.value === selectedSource
-  ) || options[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-3 py-2 border-b border-gray-100 flex items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 min-w-[180px]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_select2.default,
-      {
-        options,
-        value: selectedOption,
-        onChange: handleSourceSelect,
-        isLoading: loading,
-        isDisabled: loading,
-        placeholder: "Select source...",
-        classNamePrefix: "react-select",
-        menuPlacement: "bottom",
-        menuPosition: "fixed",
-        menuShouldScrollIntoView: false,
-        maxMenuHeight: 220,
-        menuPortalTarget: typeof window !== "undefined" ? document.body : null,
-        styles: {
-          container: (base) => __spreadProps(__spreadValues({}, base), {
-            width: "100%"
-          }),
-          control: (base) => __spreadProps(__spreadValues({}, base), {
-            minHeight: "38px",
-            borderColor: "#e5e7eb",
-            boxShadow: "none",
-            width: "100%"
-          }),
-          menu: (base) => __spreadProps(__spreadValues({}, base), {
-            width: "100%",
-            zIndex: 999999
-          }),
-          menuPortal: (base) => __spreadProps(__spreadValues({}, base), {
-            zIndex: 999999
-          }),
-          option: (base, state) => __spreadProps(__spreadValues({}, base), {
-            backgroundColor: state.isSelected ? primaryColor : state.isFocused ? "#f3f4f6" : "white",
-            color: state.isSelected ? "white" : "#374151",
-            cursor: "pointer"
-          })
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cnfy-dash-page", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-dash-page-subtitle", children: "Loading settings..." }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-page", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "cnfy-dash-card-title", children: "Chatbot Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "cnfy-dash-label", children: "Chatbot Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "input",
+          {
+            value: botName,
+            onChange: (e) => setBotName(e.target.value),
+            className: "cnfy-dash-input",
+            placeholder: "Contenify AI"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "cnfy-dash-label", children: "Chatbot Logo" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-logo-upload", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cnfy-logo-preview", children: logo ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "img",
+            {
+              src: URL.createObjectURL(logo),
+              alt: "Logo preview",
+              className: "cnfy-logo-img"
+            }
+          ) : logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "img",
+            {
+              src: logoUrl,
+              alt: "Current logo",
+              className: "cnfy-logo-img"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "cnfy-logo-placeholder", children: "No logo" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "input",
+            {
+              type: "file",
+              accept: "image/*",
+              onChange: (e) => {
+                var _a2;
+                return setLogo(((_a2 = e.target.files) == null ? void 0 : _a2[0]) || null);
+              },
+              className: "cnfy-file-input"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "cnfy-dash-card-title", children: "Localization Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "cnfy-dash-label", children: "State" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ClientSelect_default,
+          {
+            options: STATE_OPTIONS,
+            value: state,
+            onChange: (option) => setState(option),
+            placeholder: "Select state"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "cnfy-dash-label", children: "Cities" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ClientSelect_default,
+          {
+            isMulti: true,
+            options: CITY_OPTIONS,
+            value: cities,
+            onChange: (options) => setCities(options),
+            placeholder: "Select cities",
+            isDisabled: !state
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "cnfy-dash-label", children: "Language" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ClientSelect_default,
+          {
+            options: LANGUAGE_OPTIONS,
+            value: language,
+            onChange: (option) => setLanguage(option),
+            placeholder: "Select language"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "cnfy-dash-card-title", children: "Content Generation Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "cnfy-dash-label", children: "Tone" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ClientSelect_default,
+          {
+            options: TONE_OPTIONS,
+            value: tone,
+            onChange: (option) => setTone(option),
+            placeholder: "Select tone"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-dash-hint", children: "The writing tone for generated content" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "cnfy-dash-label", children: "Style" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ClientSelect_default,
+          {
+            options: STYLE_OPTIONS,
+            value: style,
+            onChange: (option) => setStyle(option),
+            placeholder: "Select style"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-dash-hint", children: "The format/style of generated articles" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "cnfy-dash-label", children: "Word Count" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ClientSelect_default,
+          {
+            options: WORD_COUNT_OPTIONS,
+            value: wordCount,
+            onChange: (option) => setWordCount(option),
+            placeholder: "Select word count"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-dash-hint", children: "Target length for generated content" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "cnfy-dash-label", children: "Target Audience" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "input",
+          {
+            value: targetAudience,
+            onChange: (e) => setTargetAudience(e.target.value),
+            className: "cnfy-dash-input",
+            placeholder: "e.g. tech-savvy millennials, business professionals"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-dash-hint", children: "Describe your target audience for personalized content" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-toggle-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-toggle-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-toggle-label", children: "Include Quotes" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-toggle-desc", children: "Add relevant quotes to generated articles" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": includeQuotes,
+              onClick: () => setIncludeQuotes(!includeQuotes),
+              className: "cnfy-toggle",
+              style: { backgroundColor: includeQuotes ? primaryColor : "#d1d5db" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "span",
+                {
+                  className: `cnfy-toggle-thumb ${includeQuotes ? "cnfy-toggle-thumb--on" : ""}`
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-toggle-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-toggle-label", children: "Include FAQ Section" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-toggle-desc", children: "Add FAQ section at the end of articles" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": includeFAQ,
+              onClick: () => setIncludeFAQ(!includeFAQ),
+              className: "cnfy-toggle",
+              style: { backgroundColor: includeFAQ ? primaryColor : "#d1d5db" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "span",
+                {
+                  className: `cnfy-toggle-thumb ${includeFAQ ? "cnfy-toggle-thumb--on" : ""}`
+                }
+              )
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-card-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "cnfy-dash-card-title-inline", children: "News Scraping" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-dash-card-desc", children: "Scrape latest news from your configured locations" })
+      ] }),
+      !loadingStatus && scrapeStatus && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-grid cnfy-dash-grid--sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "cnfy-dash-label-muted", children: "Status:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-dash-label-bold", children: scrapeStatus.isRunning ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "cnfy-dash-badge cnfy-dash-badge--yellow", children: "Running" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "cnfy-dash-badge cnfy-dash-badge--green", children: "Idle" }) })
+        ] }),
+        scrapeStatus.lastRun && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "cnfy-dash-label-muted", children: "Last Run:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-dash-label-bold", children: new Date(scrapeStatus.lastRun).toLocaleString() })
+        ] }),
+        scrapeStatus.totalScraped !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "cnfy-dash-label-muted", children: "Total Scraped:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "cnfy-dash-label-bold", children: [
+            scrapeStatus.totalScraped.toLocaleString(),
+            " articles"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "cnfy-dash-info-text", children: [
+          "Current configuration: ",
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: (_b = preferences == null ? void 0 : preferences.localization) == null ? void 0 : _b.state }),
+          ((_c = preferences == null ? void 0 : preferences.localization) == null ? void 0 : _c.cities) && preferences.localization.cities.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            " - ",
+            preferences.localization.cities.join(", ")
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            onClick: handleScrape,
+            disabled: scraping || (scrapeStatus == null ? void 0 : scrapeStatus.isRunning),
+            className: "cnfy-dash-btn-save",
+            style: { backgroundColor: primaryColor },
+            children: scraping ? "Starting Scrape..." : (scrapeStatus == null ? void 0 : scrapeStatus.isRunning) ? "Scraping in Progress..." : "Start Scraping"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cnfy-dash-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          onClick: handleSave,
+          disabled: saving,
+          className: "cnfy-dash-btn-save",
+          style: { backgroundColor: primaryColor },
+          children: saving ? "Saving..." : "Save Preferences"
         }
-      }
-    ) }),
-    selectedSource && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      "button",
-      {
-        onClick: handleScrape,
-        disabled: scraping,
-        className: "flex items-center gap-1.5 px-3 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition disabled:opacity-50",
-        title: "Fetch latest news",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.RefreshCcw, { size: 14, className: scraping ? "animate-spin" : "" }),
-          scraping ? "Scraping..." : "Scrape"
-        ]
-      }
-    ),
-    !selectedSource && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      "button",
-      {
-        onClick: () => fetchNews(null),
-        disabled: fetchingNews,
-        className: "flex items-center gap-1 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg transition",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.RefreshCcw, { size: 14, className: fetchingNews ? "animate-spin" : "" }),
-          "Refresh"
-        ]
-      }
-    )
+      ),
+      success && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cnfy-dash-success", style: { color: primaryColor }, children: "Preferences saved successfully \u2705" })
+    ] })
   ] });
 }
 
@@ -1609,7 +1925,7 @@ var createContentStreamApi = async ({
 }) => {
   var _a;
   const API_BASE_URL = getApiBaseUrl();
-  const apiKey = process.env.NEXT_PUBLIC_API_KEY;
+  const apiKey = getApiKey();
   const headers = {
     "Content-Type": "application/json"
   };
@@ -1702,7 +2018,7 @@ var rewriteNewsStreamApi = async ({
   if (targetAudience) payload.targetAudience = targetAudience;
   try {
     const API_BASE_URL = getApiBaseUrl();
-    const apiKey = process.env.NEXT_PUBLIC_API_KEY;
+    const apiKey = getApiKey();
     console.log("\u{1F680} Starting stream request to:", `${API_BASE_URL}/chat/rewrite/stream`);
     console.log("\u{1F4E6} Payload:", payload);
     const headers = {
@@ -1831,32 +2147,18 @@ var rewriteNewsApi = async ({
 };
 
 // components/chatbot/ChatBot.tsx
-var import_react_hot_toast4 = __toESM(require("react-hot-toast"));
+var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
 var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function ChatBot({
-  onNavigate,
-  onLogout
-} = {}) {
-  const { loading, showNewsPanel } = useTheme();
+function ChatBot() {
+  const { loading } = useTheme();
   const { preferences } = usePreferences();
-  const [selectedSource, setSelectedSource] = (0, import_react10.useState)(null);
-  const [news, setNews] = (0, import_react10.useState)([]);
-  const [newsLoading, setNewsLoading] = (0, import_react10.useState)(true);
-  const [selectedArticle, setSelectedArticle] = (0, import_react10.useState)(null);
+  const [preferencesOpen, setPreferencesOpen] = (0, import_react10.useState)(false);
   const [messages, setMessages] = (0, import_react10.useState)([]);
-  const [showChatMobile, setShowChatMobile] = (0, import_react10.useState)(false);
   const [isStreaming, setIsStreaming] = (0, import_react10.useState)(false);
   const [analyzedData, setAnalyzedData] = (0, import_react10.useState)(null);
-  const handleNewsLoaded = (0, import_react10.useCallback)((loadedNews) => {
-    setNews(loadedNews);
-  }, []);
-  const handleLoadingChange = (0, import_react10.useCallback)((isLoading) => {
-    setNewsLoading(isLoading);
-  }, []);
   const handleRecreate = async ({ title, content, id }) => {
     var _a;
-    setShowChatMobile(true);
     const assistantId = crypto.randomUUID();
     setMessages((prev) => [
       ...prev,
@@ -1879,7 +2181,7 @@ ${title}`
       const lang = ((_a = preferences == null ? void 0 : preferences.localization) == null ? void 0 : _a.language) === "hi" ? "Hindi" : "English";
       try {
         await rewriteNewsStreamApi({
-          article: content,
+          article: content || "",
           language: lang,
           articleId: id,
           tone: contentPrefs == null ? void 0 : contentPrefs.tone,
@@ -1899,7 +2201,7 @@ ${title}`
           },
           onComplete: () => {
             console.log("Streaming completed successfully");
-            import_react_hot_toast4.default.success("Article created successfully!");
+            import_react_hot_toast2.default.success("Article created successfully!");
           },
           onError: async (error) => {
             console.error("Streaming error:", error);
@@ -1907,7 +2209,7 @@ ${title}`
               console.log("Falling back to regular API...");
               throw error;
             } else {
-              import_react_hot_toast4.default.error("Failed to complete article generation");
+              import_react_hot_toast2.default.error("Failed to complete article generation");
               setMessages(
                 (prev) => prev.map(
                   (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: accumulatedContent || "\u274C Failed to create article. Please try again." }) : m
@@ -1924,7 +2226,7 @@ ${title}`
           )
         );
         const result = await rewriteNewsApi({
-          article: content,
+          article: content || "",
           language: lang,
           articleId: id,
           tone: contentPrefs == null ? void 0 : contentPrefs.tone,
@@ -1939,11 +2241,11 @@ ${title}`
             (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: result.article || result }) : m
           )
         );
-        import_react_hot_toast4.default.success("Article created successfully!");
+        import_react_hot_toast2.default.success("Article created successfully!");
       }
     } catch (err) {
       console.error("Complete Error:", err);
-      import_react_hot_toast4.default.error((err == null ? void 0 : err.message) || "An error occurred while creating the article");
+      import_react_hot_toast2.default.error((err == null ? void 0 : err.message) || "An error occurred while creating the article");
       setMessages(
         (prev) => prev.map(
           (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: "\u274C Failed to create article. Please try again." }) : m
@@ -1994,7 +2296,7 @@ ${optionsList}`
         }
       } catch (err) {
         console.error("Analyze input error:", err);
-        import_react_hot_toast4.default.error("Failed to analyze the link");
+        import_react_hot_toast2.default.error("Failed to analyze the link");
         setMessages(
           (prev) => prev.map(
             (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: "\u274C Failed to analyze the link. Please try again." }) : m
@@ -2030,12 +2332,12 @@ ${optionsList}`
           },
           onComplete: () => {
             setIsStreaming(false);
-            import_react_hot_toast4.default.success("Content generated!");
+            import_react_hot_toast2.default.success("Content generated!");
           },
           onError: (error) => {
             console.error("Stream error:", error);
             setIsStreaming(false);
-            import_react_hot_toast4.default.error("Failed to generate content");
+            import_react_hot_toast2.default.error("Failed to generate content");
           }
         });
       } catch (err) {
@@ -2083,12 +2385,12 @@ ${optionsList}`
           },
           onComplete: () => {
             setIsStreaming(false);
-            import_react_hot_toast4.default.success("Content created!");
+            import_react_hot_toast2.default.success("Content created!");
           },
           onError: (error) => {
             console.error("Stream error:", error);
             setIsStreaming(false);
-            import_react_hot_toast4.default.error("Failed to create content");
+            import_react_hot_toast2.default.error("Failed to create content");
           }
         });
       } catch (e) {
@@ -2103,7 +2405,7 @@ ${optionsList}`
           )
         );
         setIsStreaming(false);
-        import_react_hot_toast4.default.success("Content created!");
+        import_react_hot_toast2.default.success("Content created!");
       }
     } catch (err) {
       console.error("Create content error:", err);
@@ -2116,93 +2418,54 @@ ${optionsList}`
     }
   };
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full h-screen flex items-center justify-center bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.Loader2, { className: "h-8 w-8 animate-spin text-gray-400" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm text-gray-500", children: "Loading..." })
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cnfy-loading", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cnfy-loading-inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.Loader2, { className: "cnfy-loading-spinner cnfy-animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "cnfy-loading-text", children: "Loading..." })
     ] }) });
   }
-  return (
-    // ✅ FULL SCREEN
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-full h-screen flex flex-col bg-white", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HeaderBar, { onNavigate, onLogout }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `flex-1 min-h-0 md:grid ${showNewsPanel ? "md:grid-cols-12" : ""}`, children: [
-        showNewsPanel && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("aside", { className: "relative col-span-4 bg-gray-50/60 border-r border-gray-300 h-[90vh] overflow-y-auto", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            SourceSelector,
-            {
-              selectedSource,
-              onSourceChange: (value) => {
-                console.log("Selected source:", value);
-                setSelectedSource(value);
-              },
-              onNewsLoaded: handleNewsLoaded,
-              onLoadingChange: handleLoadingChange
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            TrendingNews,
-            {
-              onRecreate: handleRecreate,
-              news,
-              isLoading: newsLoading
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-          "section",
-          {
-            className: `
-            ${showNewsPanel ? "md:col-span-8" : "w-full"} bg-white flex flex-col h-full relative
-            ${showChatMobile ? "block" : "hidden md:block"}
-          `,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "md:hidden border-b border-gray-300 p-3", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "button",
-                {
-                  onClick: () => setShowChatMobile(false),
-                  className: "text-sm text-gray-600",
-                  children: "\u2190 Back to news"
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                ChatWindow,
-                {
-                  messages,
-                  onSend: handleSendMessage,
-                  onSelectNews: handleRecreate,
-                  isStreaming,
-                  analyzedData,
-                  onSelectAction: handleSelectAction
-                }
-              ) }),
-              !messages.length && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center text-center text-gray-400 text-sm px-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-medium", children: "AI News Assistant" }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1", children: "Select a news article or type a message to begin" })
-              ] }) })
-            ]
-          }
-        )
-      ] }),
-      selectedArticle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        ArticleModal,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cnfy-root", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HeaderBar, { onOpenPreferences: () => setPreferencesOpen(true) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cnfy-main", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { className: "cnfy-chat-section cnfy-chat-section--full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cnfy-chat-inner", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        ChatWindow,
         {
-          article: selectedArticle,
-          onClose: () => setSelectedArticle(null),
-          onRecreate: handleRecreate
+          messages,
+          onSend: handleSendMessage,
+          onSelectNews: handleRecreate,
+          isStreaming,
+          analyzedData,
+          onSelectAction: handleSelectAction
         }
-      )
-    ] })
-  );
+      ) }),
+      !messages.length && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cnfy-empty-state", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "cnfy-empty-state-title", children: "AI News Assistant" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "cnfy-empty-state-subtitle", children: "Type a message or paste a link to begin" })
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Drawer,
+      {
+        open: preferencesOpen,
+        onClose: () => setPreferencesOpen(false),
+        title: "Settings",
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PreferencesPage, {})
+      }
+    )
+  ] });
 }
 
 // src/index.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-function ContenifyChatBot({ onNavigate, onLogout }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PreferencesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChatBot, { onNavigate, onLogout }) });
+function ContenifyChatBot({ apiUrl, apiKey, domain }) {
+  (0, import_react11.useEffect)(() => {
+    setConfig({ apiUrl, apiKey, domain });
+  }, [apiUrl, apiKey, domain]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PreferencesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChatBot, {}) });
 }
 var index_default = ContenifyChatBot;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ContenifyChatBot
+  ContenifyChatBot,
+  setConfig
 });
 //# sourceMappingURL=index.js.map