@contenify/chatbot 2.0.0 → 3.0.0

package/dist/index.js

@@ -200,7 +200,7 @@ var savePreferencesApi = async ({
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaultPreferences = {
   chatbot: {
-    name: "AI News Assistant",
+    name: "ContenifyAI Assistant",
     primaryColor: "#10b981",
     secondaryColor: "#064e3b",
     theme: "system"
@@ -299,39 +299,80 @@ function usePreferences() {
 // components/chatbot/ChatBot.tsx
 var import_react10 = require("react");
 
-// util/util.ts
-function extractArticleContent(raw) {
-  if (!raw) {
-    return { article: "", metaKeywords: [] };
-  }
-  if (!raw.trim().startsWith("{")) {
-    return {
-      article: raw,
-      metaKeywords: []
-    };
+// src/utils/ aiJsonParser.ts
+function extractJSON(raw) {
+  if (!raw) return null;
+  let cleaned = raw.replace(/```json/gi, "").replace(/```/g, "").trim();
+  const first = cleaned.indexOf("{");
+  const last = cleaned.lastIndexOf("}");
+  if (first === -1 || last === -1 || last <= first) return null;
+  const possibleJson = cleaned.substring(first, last + 1);
+  try {
+    return JSON.parse(possibleJson);
+  } catch (err) {
+    console.warn("JSON parse failed:", err);
+    return null;
   }
+}
+
+// src/utils/decodeUnicode.ts
+function decodeUnicode(text) {
+  if (!text) return "";
   try {
-    const parsed = JSON.parse(raw);
-    return {
-      title: parsed.title || "",
-      article: parsed.article || parsed.content || "",
-      metaKeywords: Array.isArray(parsed.metaKeywords) ? parsed.metaKeywords : []
-    };
+    return JSON.parse(`"${text.replace(/"/g, '\\"')}"`);
   } catch (e) {
-    const article = raw.replace(/^[\s\S]*?"article"\s*:\s*"/, "").replace(/"\s*,\s*"metaKeywords"[\s\S]*$/, "").replace(/"}\s*$/, "") || raw;
+    return text;
+  }
+}
+
+// src/utils/articleTextToHtml.ts
+function articleTextToHtml(text) {
+  if (!text) return "";
+  text = text.replace(/\\n/g, "\n");
+  const lines = text.split("\n").map((line) => line.trim()).filter(Boolean);
+  let html = "";
+  for (const line of lines) {
+    if (line.length < 80 && !line.endsWith("\u0964") && !line.endsWith(".")) {
+      html += `<h2>${line}</h2>`;
+      continue;
+    }
+    html += `<p>${line}</p>`;
+  }
+  return html;
+}
+
+// src/utils/formatAIContent.ts
+function formatAIContent(raw) {
+  const empty = {
+    isArticle: false,
+    title: "",
+    subtitle: "",
+    articleHtml: "",
+    article: "",
+    metaDescription: "",
+    metaKeywords: [],
+    plainText: ""
+  };
+  if (!raw) return empty;
+  const parsed = extractJSON(raw);
+  if (parsed && (parsed.title || parsed.article)) {
+    const rawArticle = (parsed.article || "").trim();
+    const safeArticle = decodeUnicode(rawArticle);
+    const isHtml = /<[a-z][\s\S]*>/i.test(safeArticle);
+    const articleHtml = isHtml ? safeArticle : articleTextToHtml(safeArticle);
     return {
-      article,
-      metaKeywords: []
+      isArticle: true,
+      title: parsed.title || "",
+      subtitle: parsed.subtitle || "",
+      articleHtml,
+      article: rawArticle,
+      metaDescription: parsed.metaDescription || "",
+      metaKeywords: Array.isArray(parsed.metaKeywords) ? parsed.metaKeywords : [],
+      plainText: raw
     };
   }
+  return __spreadProps(__spreadValues({}, empty), { plainText: raw });
 }
-var hexToRgba = (hex, opacity) => {
-  const sanitizedHex = hex.replace("#", "");
-  const r = parseInt(sanitizedHex.substring(0, 2), 16);
-  const g = parseInt(sanitizedHex.substring(2, 4), 16);
-  const b = parseInt(sanitizedHex.substring(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-};
 
 // components/chatbot/ChatWindow.tsx
 var import_lucide_react4 = require("lucide-react");
@@ -513,38 +554,38 @@ function useTheme() {
 
 // components/chatbot/EditModal.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function toSlug(text) {
+  return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
+}
 function EditModal({
   isOpen,
+  initialTitle = "",
+  initialSubtitle = "",
   initialContent,
+  initialMetaDescription = "",
   metaKeywords,
   onClose,
   onSaveDraft,
   onPost
 }) {
   const { primaryColor } = useTheme();
+  const [title, setTitle] = (0, import_react4.useState)("");
+  const [subtitle, setSubtitle] = (0, import_react4.useState)("");
+  const [slug, setSlug] = (0, import_react4.useState)("");
+  const [slugEdited, setSlugEdited] = (0, import_react4.useState)(false);
+  const [metaDescription, setMetaDescription] = (0, import_react4.useState)("");
   const [content, setContent] = (0, import_react4.useState)("");
   const [keywords, setKeywords] = (0, import_react4.useState)(metaKeywords);
   const [newKeyword, setNewKeyword] = (0, import_react4.useState)("");
-  const markdownToHtml = (text) => {
-    const lines = text.split("\n").filter((line) => line.trim());
-    let html = "";
-    lines.forEach((line) => {
-      const trimmed = line.trim();
-      if (trimmed.startsWith("# ")) {
-        html += `<h1>${trimmed.replace(/^#\s+/, "")}</h1>`;
-      } else if (trimmed.startsWith("## ")) {
-        html += `<h2>${trimmed.replace(/^##\s+/, "")}</h2>`;
-      } else {
-        html += `<p>${trimmed}</p>`;
-      }
-    });
-    return html;
-  };
   (0, import_react4.useEffect)(() => {
-    const htmlContent = markdownToHtml(initialContent);
-    setContent(htmlContent);
+    setTitle(initialTitle);
+    setSubtitle(initialSubtitle);
+    setMetaDescription(initialMetaDescription);
+    setSlug(toSlug(initialTitle));
+    setSlugEdited(false);
+    setContent(initialContent);
     setKeywords(metaKeywords);
-  }, [initialContent, metaKeywords]);
+  }, [initialTitle, initialSubtitle, initialContent, initialMetaDescription, metaKeywords]);
   (0, import_react4.useEffect)(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
@@ -555,6 +596,16 @@ function EditModal({
       document.body.style.overflow = "";
     };
   }, [isOpen]);
+  const handleTitleChange = (value) => {
+    setTitle(value);
+    if (!slugEdited) {
+      setSlug(toSlug(value));
+    }
+  };
+  const handleSlugChange = (value) => {
+    setSlug(toSlug(value));
+    setSlugEdited(true);
+  };
   const handleAddKeyword = () => {
     if (newKeyword.trim() && !keywords.includes(newKeyword.trim())) {
       setKeywords([...keywords, newKeyword.trim()]);
@@ -570,28 +621,62 @@ function EditModal({
       handleAddKeyword();
     }
   };
+  const getEditData = () => ({
+    title,
+    subtitle,
+    article: content,
+    metaDescription,
+    slug,
+    keywords
+  });
   if (!isOpen) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cnfy-edit-modal-overlay", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "div",
-      {
-        className: "cnfy-edit-modal-backdrop",
-        onClick: onClose
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cnfy-edit-modal-backdrop", onClick: onClose }),
     /* @__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: "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_runtime3.jsx)("button", { onClick: onClose, 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_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: "Title" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              type: "text",
+              value: title,
+              onChange: (e) => handleTitleChange(e.target.value),
+              placeholder: "Article title...",
+              className: "cnfy-edit-input"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "cnfy-edit-label", children: "Subtitle" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              type: "text",
+              value: subtitle,
+              onChange: (e) => setSubtitle(e.target.value),
+              placeholder: "Article subtitle...",
+              className: "cnfy-edit-input"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "cnfy-edit-label", children: "Slug" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              type: "text",
+              value: slug,
+              onChange: (e) => handleSlugChange(e.target.value),
+              placeholder: "article-url-slug",
+              className: "cnfy-edit-input cnfy-edit-input--mono"
+            }
+          )
+        ] }),
         /* @__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)(
@@ -604,26 +689,32 @@ function EditModal({
           )
         ] }),
         /* @__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",
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "cnfy-edit-label", children: "Meta Description" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "textarea",
             {
-              className: "cnfy-keyword-tag",
-              children: [
-                "#",
-                keyword,
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "button",
-                  {
-                    onClick: () => handleRemoveKeyword(index),
-                    className: "cnfy-keyword-remove-btn",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.X, { size: 14 })
-                  }
-                )
-              ]
-            },
-            index
-          )) }),
+              value: metaDescription,
+              onChange: (e) => setMetaDescription(e.target.value),
+              placeholder: "Brief description for search engines...",
+              className: "cnfy-edit-textarea",
+              rows: 3
+            }
+          )
+        ] }),
+        /* @__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: "cnfy-keyword-tag", children: [
+            "#",
+            keyword,
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                onClick: () => handleRemoveKeyword(index),
+                className: "cnfy-keyword-remove-btn",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.X, { size: 14 })
+              }
+            )
+          ] }, index)) }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cnfy-keyword-input-row", children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "input",
@@ -636,30 +727,16 @@ function EditModal({
                 className: "cnfy-keyword-input"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                onClick: handleAddKeyword,
-                className: "cnfy-btn-add-keyword",
-                children: "Add"
-              }
-            )
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleAddKeyword, className: "cnfy-btn-add-keyword", children: "Add" })
           ] })
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cnfy-edit-modal-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: onClose, className: "cnfy-btn-footer-cancel", children: "Cancel" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
-            onClick: onClose,
-            className: "cnfy-btn-footer-cancel",
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
-          {
-            onClick: () => onSaveDraft(content, keywords),
+            onClick: () => onSaveDraft(getEditData()),
             className: "cnfy-btn-save-draft",
             children: "Save Draft"
           }
@@ -667,7 +744,7 @@ function EditModal({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
-            onClick: () => onPost(content, keywords),
+            onClick: () => onPost(getEditData()),
             className: "cnfy-btn-post-article",
             style: { backgroundColor: primaryColor, color: "#fff" },
             children: "Post"
@@ -881,12 +958,13 @@ function ChatWindow({
   onSend,
   onSelectNews,
   isStreaming = false,
+  activeField,
   analyzedData,
   onSelectAction,
   onPost: onPostCallback
 }) {
   var _a, _b;
-  const { loading, showNewsPanel } = useTheme();
+  const { showNewsPanel } = useTheme();
   const bottomRef = (0, import_react6.useRef)(null);
   const textareaRef = (0, import_react6.useRef)(null);
   const dropdownRef = (0, import_react6.useRef)(null);
@@ -899,40 +977,48 @@ function ChatWindow({
   const [selectedSource, setSelectedSource] = (0, import_react6.useState)(null);
   const [loadingSources, setLoadingSources] = (0, import_react6.useState)(false);
   const [scraping, setScraping] = (0, import_react6.useState)(false);
-  const [editModal, setEditModal] = (0, import_react6.useState)({ isOpen: false, content: "", metaKeywords: [], messageId: "" });
+  const [editModal, setEditModal] = (0, import_react6.useState)({ isOpen: false, title: "", subtitle: "", content: "", metaDescription: "", metaKeywords: [], messageId: "" });
   const { primaryColor } = useTheme();
   const { preferences } = usePreferences();
   const preferredLanguage = (_a = preferences == null ? void 0 : preferences.localization) == null ? void 0 : _a.language;
-  const handleCopy = async (blocks, messageId) => {
+  const handleCopy = async (parsed, messageId) => {
     try {
-      const formattedText = blocksToFormattedText(blocks);
-      await navigator.clipboard.writeText(formattedText);
+      const tempDiv = document.createElement("div");
+      let textContent = "";
+      if (parsed.title) textContent += parsed.title + "\n\n";
+      if (parsed.subtitle) textContent += parsed.subtitle + "\n\n";
+      if (parsed.articleHtml) {
+        tempDiv.innerHTML = parsed.articleHtml;
+        textContent += tempDiv.textContent || tempDiv.innerText || "";
+      }
+      if (parsed.metaDescription) textContent += "\n\nMeta Description:\n" + parsed.metaDescription;
+      await navigator.clipboard.writeText(textContent);
       setCopiedId(messageId);
       setTimeout(() => setCopiedId(null), 2e3);
     } catch (err) {
       console.error("Failed to copy:", err);
     }
   };
-  const blocksToFormattedText = (blocks) => {
-    return blocks.map((block) => {
-      if (block.type === "h1") return `# ${block.text}`;
-      if (block.type === "h2") return `## ${block.text}`;
-      return block.text;
-    }).join("\n\n");
-  };
-  const handleEdit = (blocks, metaKeywords, messageId) => {
-    const formattedContent = blocksToFormattedText(blocks);
-    setEditModal({ isOpen: true, content: formattedContent, metaKeywords, messageId });
+  const handleEdit = (parsed, messageId) => {
+    setEditModal({
+      isOpen: true,
+      title: parsed.title || "",
+      subtitle: parsed.subtitle || "",
+      content: parsed.articleHtml || "",
+      metaDescription: parsed.metaDescription || "",
+      metaKeywords: parsed.metaKeywords,
+      messageId
+    });
   };
   const handleCloseModal = () => {
-    setEditModal({ isOpen: false, content: "", metaKeywords: [], messageId: "" });
+    setEditModal({ isOpen: false, title: "", subtitle: "", content: "", metaDescription: "", metaKeywords: [], messageId: "" });
   };
-  const handleSaveDraft = (content, keywords) => {
-    console.log("Saving draft:", { content, keywords });
+  const handleSaveDraft = (data) => {
+    console.log("Saving draft:", data);
     handleCloseModal();
   };
-  const handlePost = (content, keywords) => {
-    onPostCallback == null ? void 0 : onPostCallback(content, keywords);
+  const handlePost = (data) => {
+    onPostCallback == null ? void 0 : onPostCallback(data.article, data.keywords);
     handleCloseModal();
   };
   (0, import_react6.useLayoutEffect)(() => {
@@ -1021,77 +1107,62 @@ function ChatWindow({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showNewsDropdown]);
-  function formatAIContent(raw) {
-    const extracted = extractArticleContent(raw);
-    if (!extracted || !extracted.article) {
-      return { blocks: [], metaKeywords: [] };
-    }
-    const { article, metaKeywords } = extracted;
-    const normalized = article.replace(/^H1:\s*/gm, "").replace(/^H2:\s*/gm, "").replace(/<\/h1>/gi, "\n").replace(/<\/h2>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<br\s*\/?>/gi, "\n");
-    const lines = normalized.split("\n").map((line) => line.replace(/<[^>]+>/g, "").trim()).filter(Boolean);
-    const blocks = [];
-    lines.forEach((line, index) => {
-      if (index === 0 && line.length < 120) {
-        blocks.push({ type: "h1", text: line });
-        return;
-      }
-      if (line.length < 90 && !line.endsWith("\u0964") && !line.endsWith(".")) {
-        blocks.push({ type: "h2", text: line });
-        return;
-      }
-      blocks.push({ type: "p", text: line });
-    });
-    return { blocks, metaKeywords };
-  }
   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;
+        var _a2, _b2;
         const parsed = formatAIContent(msg.content);
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-msg", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: msg.role === "assistant" ? `cnfy-msg-body` : `cnfy-msg-body you`, 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)(
+          msg.role === "assistant" && parsed.isArticle && /* @__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),
+              onClick: () => handleCopy(parsed, msg.id),
               className: "cnfy-copy-btn",
               title: "Copy to clipboard",
               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_runtime5.jsx)(
-                "h1",
-                {
-                  className: "cnfy-block-h1",
-                  children: block.text
-                },
-                idx
-              );
-            }
-            if (block.type === "h2") {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "h2",
-                {
-                  className: "cnfy-block-h2",
-                  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_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: "cnfy-msg-keyword-tag",
-              children: [
-                "#",
-                tag
-              ]
-            },
-            i
-          )) }) }),
+          msg.role === "assistant" && isStreaming && msg.id === ((_a2 = messages[messages.length - 1]) == null ? void 0 : _a2.id) && !parsed.isArticle && !parsed.plainText && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-creating-indicator", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Loader2, { size: 16, className: "cnfy-animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Creating article..." })
+          ] }),
+          parsed.isArticle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+            parsed.title && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h1", { className: "cnfy-block-h1", children: [
+              parsed.title,
+              activeField === "title" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cnfy-cursor-blink", children: "|" })
+            ] }),
+            parsed.subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h1", { className: "cnfy-block-h2", children: [
+              parsed.subtitle,
+              activeField === "subtitle" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cnfy-cursor-blink", children: "|" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("hr", { className: "cnfy-divider" }),
+            parsed.articleHtml && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                className: "cnfy-article-content",
+                dangerouslySetInnerHTML: { __html: parsed.articleHtml }
+              }
+            ),
+            activeField === "article" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cnfy-cursor-blink", children: "|" })
+          ] }) : (
+            /* Plain text messages (status, error, options, etc.) */
+            parsed.plainText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cnfy-block-p", children: parsed.plainText })
+          ),
+          parsed.metaDescription && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-msg-keywords", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-msg-keywords-label", children: "Meta Description" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-block-p", children: parsed.metaDescription })
+          ] }),
+          parsed.metaKeywords.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cnfy-msg-keywords", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-msg-keywords-label", children: "Keywords" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cnfy-msg-keywords-list", children: parsed.metaKeywords.map((tag, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "span",
+              {
+                className: "cnfy-msg-keyword-tag",
+                children: tag
+              },
+              i
+            )) })
+          ] }),
           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_runtime5.jsxs)(
@@ -1107,11 +1178,11 @@ function ChatWindow({
               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_runtime5.jsxs)("div", { className: "cnfy-msg-actions", children: [
+          msg.role === "assistant" && parsed.isArticle && !(analyzedData == null ? void 0 : analyzedData.messageId) && (!isStreaming || msg.id !== ((_b2 = messages[messages.length - 1]) == null ? void 0 : _b2.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),
+                onClick: () => handleEdit(parsed, msg.id),
                 className: "cnfy-btn-edit",
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Edit3, { size: 16 }),
@@ -1122,7 +1193,7 @@ function ChatWindow({
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "button",
               {
-                onClick: () => handlePost(msg.content, parsed.metaKeywords),
+                onClick: () => handlePost({ article: parsed.articleHtml, keywords: parsed.metaKeywords }),
                 className: "cnfy-btn-post",
                 style: { backgroundColor: primaryColor, color: "#fff" },
                 children: [
@@ -1264,7 +1335,8 @@ function ChatWindow({
           rows: 1,
           placeholder: "Ask AI something\u2026",
           className: `cnfy-chat-textarea ${!showNewsPanel ? "cnfy-chat-textarea--with-pulse" : ""}`,
-          style: { maxHeight: "200px", overflowY: input.split("\n").length > 6 ? "auto" : "hidden" }
+          style: { maxHeight: "200px", overflowY: input.split("\n").length > 6 ? "auto" : "hidden" },
+          disabled: true
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1281,11 +1353,14 @@ function ChatWindow({
       EditModal,
       {
         isOpen: editModal.isOpen,
+        initialTitle: editModal.title,
+        initialSubtitle: editModal.subtitle,
         initialContent: editModal.content,
+        initialMetaDescription: editModal.metaDescription,
         metaKeywords: editModal.metaKeywords,
         onClose: handleCloseModal,
-        onSaveDraft: handleSaveDraft,
-        onPost: handlePost
+        onSaveDraft: (data) => handleSaveDraft({ article: data.article, keywords: data.keywords }),
+        onPost: (data) => handlePost({ article: data.article, keywords: data.keywords })
       }
     )
   ] });
@@ -1400,6 +1475,15 @@ var ClientSelect = (props) => {
 };
 var ClientSelect_default = ClientSelect;
 
+// src/utils/util.ts
+var hexToRgba = (hex, opacity) => {
+  const sanitizedHex = hex.replace("#", "");
+  const r = parseInt(sanitizedHex.substring(0, 2), 16);
+  const g = parseInt(sanitizedHex.substring(2, 4), 16);
+  const b = parseInt(sanitizedHex.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+
 // components/preferences/Preferences.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var STATE_OPTIONS = [
@@ -1718,12 +1802,72 @@ function PreferencesPage() {
 }
 
 // services/chat.service.ts
+function getHeaders() {
+  const apiKey = getApiKey();
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (apiKey) {
+    headers["x-api-key"] = apiKey;
+  }
+  return headers;
+}
+async function processSSEStream(reader, callbacks) {
+  const decoder = new TextDecoder();
+  let buffer = "";
+  const processLines = (lines) => {
+    var _a, _b, _c, _d, _e;
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (!trimmed.startsWith("data: ")) continue;
+      const data = trimmed.slice(6).trim();
+      try {
+        const event = JSON.parse(data);
+        switch (event.type) {
+          case "start":
+            break;
+          case "field_start":
+            (_a = callbacks.onFieldStart) == null ? void 0 : _a.call(callbacks, event.field);
+            break;
+          case "content":
+            callbacks.onContent(event.field, event.content);
+            break;
+          case "keywords":
+            (_b = callbacks.onKeywords) == null ? void 0 : _b.call(callbacks, event.content);
+            break;
+          case "field_end":
+            (_c = callbacks.onFieldEnd) == null ? void 0 : _c.call(callbacks, event.field);
+            break;
+          case "done":
+            (_d = callbacks.onComplete) == null ? void 0 : _d.call(callbacks, event.data);
+            return true;
+          case "error":
+            (_e = callbacks.onError) == null ? void 0 : _e.call(callbacks, new Error(event.message));
+            return true;
+        }
+      } catch (e) {
+      }
+    }
+    return false;
+  };
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split("\n");
+    buffer = lines.pop() || "";
+    if (processLines(lines)) return;
+  }
+  if (buffer.trim()) {
+    processLines([buffer]);
+  }
+}
 var analyzeInputApi = async (input) => {
-  const { data } = await api_default.post("/chat/analyze-input", { input });
+  const { data } = await api_default.post("/chatboat/analyze-input", { input });
   return data.data;
 };
 var createContentApi = async (payload) => {
-  const { data } = await api_default.post("/chat/create-content", payload);
+  const { data } = await api_default.post("/chatboat/create-content", payload);
   return data.data;
 };
 var createContentStreamApi = async ({
@@ -1731,22 +1875,18 @@ var createContentStreamApi = async ({
   content,
   actionId,
   settings,
-  onChunk,
+  onFieldStart,
+  onContent,
+  onKeywords,
+  onFieldEnd,
   onComplete,
   onError
 }) => {
   var _a;
   const API_BASE_URL = getApiBaseUrl();
-  const apiKey = getApiKey();
-  const headers = {
-    "Content-Type": "application/json"
-  };
-  if (apiKey) {
-    headers["x-api-key"] = apiKey;
-  }
   const response = await fetch(`${API_BASE_URL}/chat/create-content/stream`, {
     method: "POST",
-    headers,
+    headers: getHeaders(),
     credentials: "include",
     body: JSON.stringify({ url, content, actionId, settings })
   });
@@ -1755,50 +1895,17 @@ var createContentStreamApi = async ({
     throw new Error(`HTTP error! status: ${response.status} - ${errorText}`);
   }
   const reader = (_a = response.body) == null ? void 0 : _a.getReader();
-  const decoder = new TextDecoder();
   if (!reader) {
     throw new Error("No reader available");
   }
-  let buffer = "";
-  let hasReceivedData = false;
-  while (true) {
-    const { done, value } = await reader.read();
-    if (done) {
-      if (hasReceivedData) onComplete == null ? void 0 : onComplete();
-      break;
-    }
-    const chunk = decoder.decode(value, { stream: true });
-    buffer += chunk;
-    const lines = buffer.split("\n");
-    buffer = lines.pop() || "";
-    for (const line of lines) {
-      const trimmedLine = line.trim();
-      if (trimmedLine === "") continue;
-      hasReceivedData = true;
-      if (trimmedLine.startsWith("data: ")) {
-        const data = trimmedLine.slice(6).trim();
-        if (data === "[DONE]") {
-          onComplete == null ? void 0 : onComplete();
-          return;
-        }
-        try {
-          const parsed = JSON.parse(data);
-          if (parsed.content) onChunk(parsed.content);
-          else if (parsed.delta) onChunk(parsed.delta);
-          else if (parsed.text) onChunk(parsed.text);
-          else if (parsed.chunk) onChunk(parsed.chunk);
-          else if (typeof parsed === "string") onChunk(parsed);
-        } catch (e) {
-          if (data) onChunk(data);
-        }
-      } else if (trimmedLine) {
-        onChunk(trimmedLine + "\n");
-      }
-    }
-  }
-  if (!hasReceivedData) {
-    throw new Error("No data received from stream");
-  }
+  await processSSEStream(reader, {
+    onFieldStart,
+    onContent,
+    onKeywords,
+    onFieldEnd,
+    onComplete,
+    onError
+  });
 };
 var rewriteNewsStreamApi = async ({
   article,
@@ -1810,7 +1917,10 @@ var rewriteNewsStreamApi = async ({
   includeQuotes,
   includeFAQ,
   targetAudience,
-  onChunk,
+  onFieldStart,
+  onContent,
+  onKeywords,
+  onFieldEnd,
   onComplete,
   onError
 }) => {
@@ -1819,9 +1929,7 @@ var rewriteNewsStreamApi = async ({
     article,
     language
   };
-  if (articleId) {
-    payload.articleId = articleId;
-  }
+  if (articleId) payload.articleId = articleId;
   if (tone) payload.tone = tone;
   if (style) payload.style = style;
   if (wordCount) payload.wordCount = wordCount;
@@ -1830,99 +1938,42 @@ var rewriteNewsStreamApi = async ({
   if (targetAudience) payload.targetAudience = targetAudience;
   try {
     const API_BASE_URL = getApiBaseUrl();
-    const apiKey = getApiKey();
-    const headers = {
-      "Content-Type": "application/json"
-    };
-    if (apiKey) {
-      headers["x-api-key"] = apiKey;
-    }
     const response = await fetch(`${API_BASE_URL}/chatboat/rewrite/stream`, {
       method: "POST",
-      headers,
+      headers: getHeaders(),
       credentials: "include",
       body: JSON.stringify(payload)
     });
-    console.log("\u{1F4E1} Response status:", response.status);
-    console.log("\u{1F4E1} Response headers:", Object.fromEntries(response.headers.entries()));
     if (!response.ok) {
       const errorText = await response.text();
-      console.error("\u274C API Error:", response.status, errorText);
       throw new Error(`HTTP error! status: ${response.status} - ${errorText}`);
     }
+    const contentType = response.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      const json = await response.json();
+      const data = json.data || json;
+      onComplete == null ? void 0 : onComplete({
+        title: data.title || "",
+        subtitle: data.subtitle || "",
+        article: data.article || "",
+        metaDescription: data.metaDescription || "",
+        metaKeywords: Array.isArray(data.metaKeywords) ? data.metaKeywords : []
+      });
+      return;
+    }
     const reader = (_a = response.body) == null ? void 0 : _a.getReader();
-    const decoder = new TextDecoder();
     if (!reader) {
       throw new Error("No reader available");
     }
-    let buffer = "";
-    let hasReceivedData = false;
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) {
-        if (hasReceivedData) {
-          onComplete == null ? void 0 : onComplete();
-        }
-        break;
-      }
-      const chunk = decoder.decode(value, { stream: true });
-      buffer += chunk;
-      const lines = buffer.split("\n");
-      buffer = lines.pop() || "";
-      for (const line of lines) {
-        const trimmedLine = line.trim();
-        if (trimmedLine === "") continue;
-        hasReceivedData = true;
-        console.log("\u{1F4E8} Received line:", trimmedLine.substring(0, 100) + (trimmedLine.length > 100 ? "..." : ""));
-        if (trimmedLine.startsWith("data: ")) {
-          const data = trimmedLine.slice(6).trim();
-          if (data === "[DONE]") {
-            console.log("\u2705 Stream completed with [DONE] signal");
-            onComplete == null ? void 0 : onComplete();
-            return;
-          }
-          try {
-            const parsed = JSON.parse(data);
-            console.log("\u{1F4CB} Parsed JSON:", parsed);
-            if (parsed.content) {
-              onChunk(parsed.content);
-            } else if (parsed.delta) {
-              onChunk(parsed.delta);
-            } else if (parsed.text) {
-              onChunk(parsed.text);
-            } else if (parsed.chunk) {
-              onChunk(parsed.chunk);
-            } else if (typeof parsed === "string") {
-              onChunk(parsed);
-            } else {
-              console.warn("\u26A0\uFE0F Unknown JSON format:", parsed);
-            }
-          } catch (e) {
-            console.log("\u{1F4DD} Non-JSON data, treating as plain text");
-            if (data) {
-              onChunk(data);
-            }
-          }
-        } else {
-          console.log("\u{1F4C4} Plain text chunk");
-          if (trimmedLine) {
-            onChunk(trimmedLine + "\n");
-          }
-        }
-      }
-    }
-    if (!hasReceivedData) {
-      console.error("\u274C No data received from stream");
-      throw new Error("No data received from stream");
-    }
-    console.log("\u2705 Stream completed successfully");
-  } catch (error) {
-    console.error("\u274C Streaming error:", error);
-    console.error("Error details:", {
-      message: error.message,
-      name: error.name,
-      stack: error.stack
+    await processSSEStream(reader, {
+      onFieldStart,
+      onContent,
+      onKeywords,
+      onFieldEnd,
+      onComplete,
+      onError
     });
+  } catch (error) {
     onError == null ? void 0 : onError(error);
     throw error;
   }
@@ -1942,16 +1993,14 @@ var rewriteNewsApi = async ({
     article,
     language
   };
-  if (articleId) {
-    payload.articleId = articleId;
-  }
+  if (articleId) payload.articleId = articleId;
   if (tone) payload.tone = tone;
   if (style) payload.style = style;
   if (wordCount) payload.wordCount = wordCount;
   if (includeQuotes !== void 0) payload.includeQuotes = includeQuotes;
   if (includeFAQ !== void 0) payload.includeFAQ = includeFAQ;
   if (targetAudience) payload.targetAudience = targetAudience;
-  const { data } = await api_default.post("/chat/rewrite", payload);
+  const { data } = await api_default.post("/chatboat/rewrite", payload);
   return data.data;
 };
 
@@ -1959,12 +2008,16 @@ var rewriteNewsApi = async ({
 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 buildStructuredContent(title, article, metaKeywords, subtitle = "", metaDescription = "") {
+  return JSON.stringify({ title, subtitle, article, metaDescription, metaKeywords });
+}
 function ChatBot({ onPost }) {
   const { loading } = useTheme();
   const { preferences } = usePreferences();
   const [preferencesOpen, setPreferencesOpen] = (0, import_react10.useState)(false);
   const [messages, setMessages] = (0, import_react10.useState)([]);
   const [isStreaming, setIsStreaming] = (0, import_react10.useState)(false);
+  const [activeField, setActiveField] = (0, import_react10.useState)(null);
   const [analyzedData, setAnalyzedData] = (0, import_react10.useState)(null);
   const handleRecreate = async ({ title, content, id }) => {
     var _a;
@@ -1975,17 +2028,28 @@ function ChatBot({ onPost }) {
         id: crypto.randomUUID(),
         role: "user",
         content: `Recreate this news:
-${title}`
+ ${title}`
       },
       {
         id: assistantId,
         role: "assistant",
-        content: "\u23F3 Creating article..."
+        content: ""
       }
     ]);
+    setIsStreaming(true);
     try {
-      let accumulatedContent = "";
       let hasStartedStreaming = false;
+      let titleBuffer = "";
+      let articleBuffer = "";
+      let keywordsBuffer = [];
+      const updateMessage = () => {
+        const structured = buildStructuredContent(titleBuffer, articleBuffer, keywordsBuffer);
+        setMessages(
+          (prev) => prev.map(
+            (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: structured }) : m
+          )
+        );
+      };
       const contentPrefs = preferences == null ? void 0 : preferences.content;
       const lang = ((_a = preferences == null ? void 0 : preferences.localization) == null ? void 0 : _a.language) === "hi" ? "Hindi" : "English";
       try {
@@ -1999,39 +2063,66 @@ ${title}`
           includeQuotes: contentPrefs == null ? void 0 : contentPrefs.includeQuotes,
           includeFAQ: contentPrefs == null ? void 0 : contentPrefs.includeFAQ,
           targetAudience: contentPrefs == null ? void 0 : contentPrefs.targetAudience,
-          onChunk: (chunk) => {
+          onFieldStart: (field) => {
+            setActiveField(field);
+          },
+          onContent: (field, chunk) => {
             hasStartedStreaming = true;
-            accumulatedContent += chunk;
+            if (field === "title") titleBuffer += chunk;
+            else articleBuffer += chunk;
+            updateMessage();
+          },
+          onKeywords: (keywords) => {
+            keywordsBuffer = keywords;
+            updateMessage();
+          },
+          onFieldEnd: () => {
+            setActiveField(null);
+          },
+          onComplete: (data) => {
+            const finalContent = data && (data.title || data.article) ? JSON.stringify(data) : buildStructuredContent(titleBuffer, articleBuffer, keywordsBuffer);
             setMessages(
               (prev) => prev.map(
-                (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: accumulatedContent }) : m
+                (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: finalContent }) : m
               )
             );
-          },
-          onComplete: () => {
-            console.log("Streaming completed successfully");
+            setIsStreaming(false);
+            setActiveField(null);
             import_react_hot_toast2.default.success("Article created successfully!");
           },
           onError: async (error) => {
             console.error("Streaming error:", error);
             if (!hasStartedStreaming) {
-              console.log("Falling back to regular API...");
               throw error;
             } else {
+              setIsStreaming(false);
+              setActiveField(null);
               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
+                  (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: titleBuffer || articleBuffer ? buildStructuredContent(titleBuffer, articleBuffer, keywordsBuffer) : "Failed to create article. Please try again." }) : m
                 )
               );
             }
           }
         });
+        if (isStreaming) {
+          if (titleBuffer || articleBuffer) {
+            const structured = buildStructuredContent(titleBuffer, articleBuffer, keywordsBuffer);
+            setMessages(
+              (prev) => prev.map(
+                (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: structured }) : m
+              )
+            );
+          }
+          setIsStreaming(false);
+          setActiveField(null);
+        }
       } catch (streamError) {
         console.log("Streaming failed, using regular API...", streamError);
         setMessages(
           (prev) => prev.map(
-            (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: "\u23F3 Generating with regular API..." }) : m
+            (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: "" }) : m
           )
         );
         const result = await rewriteNewsApi({
@@ -2047,17 +2138,20 @@ ${title}`
         });
         setMessages(
           (prev) => prev.map(
-            (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: result.article || result }) : m
+            (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: typeof result === "string" ? result : JSON.stringify(result) }) : m
           )
         );
+        setIsStreaming(false);
         import_react_hot_toast2.default.success("Article created successfully!");
       }
     } catch (err) {
       console.error("Complete Error:", err);
+      setIsStreaming(false);
+      setActiveField(null);
       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
+          (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: "Failed to create article. Please try again." }) : m
         )
       );
     }
@@ -2075,9 +2169,10 @@ ${title}`
     if (hasUrl) {
       setMessages((prev) => [
         ...prev,
-        { id: assistantId, role: "assistant", content: "\u{1F50D} Analyzing your link..." }
+        { id: assistantId, role: "assistant", content: "Analyzing your link..." }
       ]);
       try {
+        return;
         const result = await analyzeInputApi(text);
         if (result.hasUrl && ((_a = result.options) == null ? void 0 : _a.length) > 0) {
           setAnalyzedData({
@@ -2108,20 +2203,30 @@ ${optionsList}`
         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
+            (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: "Failed to analyze the link. Please try again." }) : m
           )
         );
       }
     } else {
       setMessages((prev) => [
         ...prev,
-        { id: assistantId, role: "assistant", content: "\u23F3 Generating content..." }
+        { id: assistantId, role: "assistant", content: "" }
       ]);
       setIsStreaming(true);
       try {
         const contentPrefs = preferences == null ? void 0 : preferences.content;
         const lang = ((_b = preferences == null ? void 0 : preferences.localization) == null ? void 0 : _b.language) === "hi" ? "Hindi" : "English";
-        let accumulatedContent = "";
+        let titleBuffer = "";
+        let articleBuffer = "";
+        let keywordsBuffer = [];
+        const updateMessage = () => {
+          const structured = buildStructuredContent(titleBuffer, articleBuffer, keywordsBuffer);
+          setMessages(
+            (prev) => prev.map(
+              (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: structured }) : m
+            )
+          );
+        };
         await rewriteNewsStreamApi({
           article: text,
           language: lang,
@@ -2131,30 +2236,58 @@ ${optionsList}`
           includeQuotes: contentPrefs == null ? void 0 : contentPrefs.includeQuotes,
           includeFAQ: contentPrefs == null ? void 0 : contentPrefs.includeFAQ,
           targetAudience: contentPrefs == null ? void 0 : contentPrefs.targetAudience,
-          onChunk: (chunk) => {
-            accumulatedContent += chunk;
+          onFieldStart: (field) => {
+            setActiveField(field);
+          },
+          onContent: (field, chunk) => {
+            if (field === "title") titleBuffer += chunk;
+            else articleBuffer += chunk;
+            updateMessage();
+          },
+          onKeywords: (keywords) => {
+            keywordsBuffer = keywords;
+            updateMessage();
+          },
+          onFieldEnd: () => {
+            setActiveField(null);
+          },
+          onComplete: (data) => {
+            const finalContent = data && (data.title || data.article) ? JSON.stringify(data) : buildStructuredContent(titleBuffer, articleBuffer, keywordsBuffer);
             setMessages(
               (prev) => prev.map(
-                (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: accumulatedContent }) : m
+                (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: finalContent }) : m
               )
             );
-          },
-          onComplete: () => {
             setIsStreaming(false);
+            setActiveField(null);
             import_react_hot_toast2.default.success("Content generated!");
           },
           onError: (error) => {
             console.error("Stream error:", error);
             setIsStreaming(false);
+            setActiveField(null);
             import_react_hot_toast2.default.error("Failed to generate content");
           }
         });
+        if (isStreaming) {
+          if (titleBuffer || articleBuffer) {
+            const structured = buildStructuredContent(titleBuffer, articleBuffer, keywordsBuffer);
+            setMessages(
+              (prev) => prev.map(
+                (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: structured }) : m
+              )
+            );
+          }
+          setIsStreaming(false);
+          setActiveField(null);
+        }
       } catch (err) {
         console.error("Send message error:", err);
         setIsStreaming(false);
+        setActiveField(null);
         setMessages(
           (prev) => prev.map(
-            (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: "\u274C Failed to generate content. Please try again." }) : m
+            (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: "Failed to generate content. Please try again." }) : m
           )
         );
       }
@@ -2168,12 +2301,22 @@ ${optionsList}`
     setMessages((prev) => [
       ...prev,
       { id: crypto.randomUUID(), role: "user", content: `Action: ${actionName}` },
-      { id: assistantId, role: "assistant", content: "\u23F3 Creating content..." }
+      { id: assistantId, role: "assistant", content: "" }
     ]);
     setIsStreaming(true);
     try {
       const contentPrefs = preferences == null ? void 0 : preferences.content;
-      let accumulatedContent = "";
+      let titleBuffer = "";
+      let articleBuffer = "";
+      let keywordsBuffer = [];
+      const updateMessage = () => {
+        const structured = buildStructuredContent(titleBuffer, articleBuffer, keywordsBuffer);
+        setMessages(
+          (prev) => prev.map(
+            (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: structured }) : m
+          )
+        );
+      };
       try {
         await createContentStreamApi({
           url,
@@ -2184,24 +2327,51 @@ ${optionsList}`
             style: contentPrefs == null ? void 0 : contentPrefs.style,
             wordCount: contentPrefs == null ? void 0 : contentPrefs.wordCount
           },
-          onChunk: (chunk) => {
-            accumulatedContent += chunk;
+          onFieldStart: (field) => {
+            setActiveField(field);
+          },
+          onContent: (field, chunk) => {
+            if (field === "title") titleBuffer += chunk;
+            else articleBuffer += chunk;
+            updateMessage();
+          },
+          onKeywords: (keywords) => {
+            keywordsBuffer = keywords;
+            updateMessage();
+          },
+          onFieldEnd: () => {
+            setActiveField(null);
+          },
+          onComplete: (data) => {
+            const finalContent = data && (data.title || data.article) ? JSON.stringify(data) : buildStructuredContent(titleBuffer, articleBuffer, keywordsBuffer);
             setMessages(
               (prev) => prev.map(
-                (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: accumulatedContent }) : m
+                (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: finalContent }) : m
               )
             );
-          },
-          onComplete: () => {
             setIsStreaming(false);
+            setActiveField(null);
             import_react_hot_toast2.default.success("Content created!");
           },
           onError: (error) => {
             console.error("Stream error:", error);
             setIsStreaming(false);
+            setActiveField(null);
             import_react_hot_toast2.default.error("Failed to create content");
           }
         });
+        if (isStreaming) {
+          if (titleBuffer || articleBuffer) {
+            const structured = buildStructuredContent(titleBuffer, articleBuffer, keywordsBuffer);
+            setMessages(
+              (prev) => prev.map(
+                (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: structured }) : m
+              )
+            );
+          }
+          setIsStreaming(false);
+          setActiveField(null);
+        }
       } catch (e) {
         const result = await createContentApi({ url, content, actionId, settings: {
           tone: contentPrefs == null ? void 0 : contentPrefs.tone,
@@ -2210,18 +2380,20 @@ ${optionsList}`
         } });
         setMessages(
           (prev) => prev.map(
-            (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: result.article || result.content || JSON.stringify(result) }) : m
+            (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: typeof result === "string" ? result : JSON.stringify(result) }) : m
           )
         );
         setIsStreaming(false);
+        setActiveField(null);
         import_react_hot_toast2.default.success("Content created!");
       }
     } catch (err) {
       console.error("Create content error:", err);
       setIsStreaming(false);
+      setActiveField(null);
       setMessages(
         (prev) => prev.map(
-          (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: "\u274C Failed to create content. Please try again." }) : m
+          (m) => m.id === assistantId ? __spreadProps(__spreadValues({}, m), { content: "Failed to create content. Please try again." }) : m
         )
       );
     }
@@ -2242,6 +2414,7 @@ ${optionsList}`
           onSend: handleSendMessage,
           onSelectNews: handleRecreate,
           isStreaming,
+          activeField,
           analyzedData,
           onSelectAction: handleSelectAction,
           onPost