// Screen: CONTENT & PLANS (v3 — Purchase tabs + FB post UI + inline chat) // ── Purchase categories ─────────────────────────────────────── const PURCHASE_CATEGORIES = [ { id: 'sale', icon: 'tag', label: 'Sale & Ưu đãi', sub: 'Khuyến mãi · Deal hot · Flash sale', color: '#F87171', angle: 'GÓC CONTENT YÊU CẦU — SALE & ƯU ĐÃI: Viết 1 option đại diện, tập trung vào khuyến mãi, giảm giá, deal không thể bỏ lỡ, tạo urgency "mua ngay kẻo hết". Hook mạnh, cảm xúc cao, CTA rõ.', }, { id: 'pain', icon: 'activity', label: 'Nỗi đau', sub: 'Pain points · Vấn đề · Giải pháp', color: '#F472B6', angle: 'GÓC CONTENT YÊU CẦU — NỖI ĐAU: Viết 1 option đại diện, đánh trúng vấn đề/frustration/nỗi sợ lớn nhất của khách hàng rồi dẫn đến sản phẩm như giải pháp. Hook cảm xúc mạnh.', }, { id: 'feature', icon: 'zap', label: 'Tính năng', sub: 'USP · Chức năng · So sánh', color: '#66FCF1', angle: 'GÓC CONTENT YÊU CẦU — TÍNH NĂNG VƯỢT TRỘI: Viết 1 option đại diện, tập trung vào USP độc đáo nhất, so sánh trước/sau hoặc showcase tính năng nổi bật nhất của sản phẩm.', }, { id: 'event', icon: 'gift', label: 'Sự kiện', sub: 'Sinh nhật · Khai trương · Holiday', color: '#FBBF24', angle: 'GÓC CONTENT YÊU CẦU — SỰ KIỆN ĐẶC BIỆT: Viết 1 option đại diện kết hợp dịp đặc biệt phù hợp nhất (lễ tết, khai trương, Black Friday...) với ưu đãi và cảm xúc của sự kiện đó.', }, { id: 'trending', icon: 'trending-up', label: 'Trending', sub: 'Content viral · Format thị trường', color: '#A78BFA', angle: 'GÓC CONTENT YÊU CẦU — TRENDING & VIRAL: Viết 1 option đại diện dùng style content đang scale mạnh nhất trên Facebook/TikTok — hook viral, storytelling trend, review authentic hoặc POV format.', }, ]; // ── Parsers ─────────────────────────────────────────────────── function parseContentPurchase(text) { const results = []; const lines = text.split('\n'); let current = null; const contentLines = []; const flush = () => { if (!current) return; const raw = cleanText(contentLines.join('\n').trim()); const firstLine = raw.split('\n').find(l => l.trim()) || ''; current.content = raw; current.hook = firstLine.trim().slice(0, 140); results.push({ ...current }); current = null; contentLines.length = 0; }; for (const line of lines) { const optM = line.match(/^##\s+OPTION\s+(\d+)\s*[—\-]?\s*(.*)/i); if (optM) { flush(); current = { key: `opt-${results.length}`, idx: parseInt(optM[1]), name: optM[2].trim() || `Option ${parseInt(optM[1])}`, content: '', hook: '', }; continue; } if (current) contentLines.push(line); } flush(); return results; } function parseBrandCampaign(text) { const days = []; const lines = text.split('\n'); let currentDay = null; let currentPost = null; let inContent = false; const contentLines = []; const flushPost = () => { if (!currentPost || !currentDay) return; currentPost.content = cleanText(contentLines.join('\n').trim()); const firstLine = contentLines.find(l => l.trim()) || ''; if (!currentPost.hook && firstLine) currentPost.hook = cleanText(firstLine.trim()).slice(0, 140); currentDay.posts.push({ ...currentPost }); currentPost = null; inContent = false; contentLines.length = 0; }; for (const line of lines) { const dayM = line.match(/^##\s+DAY\s+(\d+)\s*[—\-]?\s*(.*)/i); const postM = line.match(/^###\s+POST\s+([\d.]+)\s*[—\-]?\s*(.*)/i); const contentM = line.match(/^###\s+CONTENT:?\s*$/i); if (dayM) { flushPost(); const idx = parseInt(dayM[1]); currentDay = { idx, label: dayM[2].trim() || `Ngày ${idx}`, posts: [] }; days.push(currentDay); inContent = false; continue; } if (postM && currentDay) { flushPost(); currentPost = { key: `day-${currentDay.idx}-post-${postM[1]}`, dayIdx: currentDay.idx, postIdx: postM[1], type: postM[2].trim(), stage: '', goal: '', psychology: '', emotionalTrigger: '', perceptionIntent: '', content: '', hook: '', }; inContent = false; continue; } if (contentM && currentPost) { inContent = true; continue; } if (!currentPost) continue; if (inContent) { contentLines.push(line); } else { const funnelM = line.match(/[-•*]\s*(?:Funnel stage|Tầng funnel)[:\s]+(.+)/i); const goalM = line.match(/[-•*]\s*Mục tiêu[:\s]+(.+)/i); const psychM = line.match(/[-•*]\s*Tâm lý[:\s]+(.+)/i); const trigM = line.match(/[-•*]\s*Emotional trigger[:\s]+(.+)/i); const percM = line.match(/[-•*]\s*Perception intention[:\s]+(.+)/i); if (funnelM) currentPost.stage = funnelM[1].trim(); if (goalM) currentPost.goal = goalM[1].trim(); if (psychM) currentPost.psychology = psychM[1].trim(); if (trigM) currentPost.emotionalTrigger = trigM[1].trim(); if (percM) currentPost.perceptionIntent = percM[1].trim(); } } flushPost(); return days; } // ── Text cleaner (strips markdown formatting) ───────────────── function cleanText(t) { if (!t) return t; return t .replace(/\*\*\*(.+?)\*\*\*/gs, '$1') .replace(/\*\*(.+?)\*\*/gs, '$1') .replace(/\*(.+?)\*/gs, '$1') .replace(/\*/g, '') .replace(/_{2}(.+?)_{2}/gs, '$1') .replace(/_(.+?)_/gs, '$1'); } // ── Optimization options parser ────────────────────────────── function parseOptimizationOptions(text) { const results = []; const lines = text.split('\n'); let current = null; const buf = []; const flush = () => { if (!current) return; current.content = cleanText(buf.join('\n').trim()); results.push({ ...current }); current = null; buf.length = 0; }; for (const line of lines) { const m = line.match(/^##\s+OPTION\s+(\d+)\s*[—\-]?\s*(.*)/i); if (m) { flush(); current = { idx: parseInt(m[1]), angle: m[2].trim() || `Option ${parseInt(m[1])}`, content: '' }; continue; } if (current) buf.push(line); } flush(); return results; } // ── Category helpers ────────────────────────────────────────── function matchCategory(name) { const n = (name || '').toLowerCase(); if (n.includes('sale') || n.includes('ưu đãi') || n.includes('uu dai')) return 'sale'; if (n.includes('nỗi đau') || n.includes('noi dau')) return 'pain'; if (n.includes('tính năng') || n.includes('tinh nang') || n.includes('chức năng')) return 'feature'; if (n.includes('sự kiện') || n.includes('su kien')) return 'event'; if (n.includes('trending') || n.includes('viral')) return 'trending'; return null; } function groupByCategory(options) { const groups = {}; PURCHASE_CATEGORIES.forEach(cat => { groups[cat.id] = []; }); const unmatched = []; options.forEach(opt => { const catId = matchCategory(opt.name); if (catId && groups[catId]) { groups[catId].push(opt); } else { unmatched.push(opt); } }); unmatched.forEach((opt, i) => { const catId = PURCHASE_CATEGORIES[i % PURCHASE_CATEGORIES.length].id; groups[catId].push(opt); }); return groups; } // ── Color / icon helpers ────────────────────────────────────── function getFunnelColor(stage) { const s = (stage || '').toLowerCase(); if (s.includes('aware') || s.includes('attention') || s.includes('nhận thức')) return '#2E9DF7'; if (s.includes('engage') || s.includes('curiosity') || s.includes('educati') || s.includes('pain')) return '#F472B6'; if (s.includes('conver') || s.includes('offer') || s.includes('trust') || s.includes('authority')) return '#4ADE80'; if (s.includes('retent') || s.includes('loyal') || s.includes('bonding') || s.includes('social')) return '#FBBF24'; return '#66FCF1'; } function getFunnelIcon(stage) { const s = (stage || '').toLowerCase(); if (s.includes('aware') || s.includes('attention')) return 'eye'; if (s.includes('engage') || s.includes('curiosity')) return 'heart'; if (s.includes('conver') || s.includes('offer')) return 'zap'; if (s.includes('retent') || s.includes('loyal')) return 'repeat'; if (s.includes('trust') || s.includes('authority')) return 'shield'; if (s.includes('educati') || s.includes('pain')) return 'book-open'; return 'circle'; } // ── Single optimization option card ────────────────────────── const OPT_COLORS = ['#66FCF1', '#4ADE80', '#F472B6', '#FBBF24', '#A78BFA']; const OptResultCard = ({ opt }) => { const color = OPT_COLORS[(opt.idx - 1) % OPT_COLORS.length]; return (
{String(opt.idx).padStart(2, '0')} {opt.angle}
{opt.content}
); }; // ── Inline chat panel (per-post AI optimization) ────────────── const InlineChatPanel = ({ history, running, onSend }) => { const [chatDraft, setChatDraft] = React.useState(''); const handleSend = () => { if (!chatDraft.trim() || running) return; onSend(chatDraft.trim()); setChatDraft(''); }; return (
{/* Chat history */} {history && history.length > 0 && (
{[...history].reverse().map((entry, i) => (
{/* User instruction bubble */} {entry.instruction && (
{entry.instruction}
)} {/* AI response — option cards or plain text fallback */} {entry.options && entry.options.length > 0 ? (
AI AGENT · {entry.options.length} OPTIONS · {entry.ts}
{entry.options.map(opt => ( ))}
) : (
{cleanText(entry.text)}
AI Agent · {entry.ts}
)}
))}
)} {/* Input row */}