// ─── تشخیص نوع رویداد از متن پیام ─────────────────────── function detectEventType(text) { const t = text.toLowerCase(); if (/سلام|هلو|درود|خوندم|دیدم|اومدم/.test(t)) return { type: 'script', reason: 'پیام اولیه — اسکریپت جواب می‌ده' }; if (/پرداخت|کارت|بانک|واریز|رها|نیمه|ناقص/.test(t)) return { type: 'trigger', reason: 'سیگنال پرداخت رها شده — تریگر فوری فعال' }; if (/مشاوره|جلسه|قرار|وقت|زمان|ساعت/.test(t)) return { type: 'followup', reason: 'درخواست زمان‌بندی — فالوآپ مدیریت می‌کنه' }; if (/قیمت|هزینه|تخفیف|اقساط|چقدر|کمپین/.test(t)) return { type: 'campaign', reason: 'سوال قیمت — کمپین مناسب پیدا می‌کنه' }; if (/خریدم|پرداخت کردم|ثبت‌نام|خرید|گرفتم/.test(t)) return { type: 'campaign', reason: 'تأیید خرید — کمپین Upsell فعال' }; if (/نیستم|بعداً|فردا|بعد|بیشتر فکر|شاید/.test(t)) return { type: 'followup', reason: 'تعلل — فالوآپ زمان‌بندی می‌کنه' }; if (/چطور|چی|چرا|توضیح|بگو|بیشتر/.test(t)) return { type: 'script', reason: 'سوال عمومی — اسکریپت هدایت می‌کنه' }; return { type: 'bot', reason: 'پیام نامشخص — بات نگه می‌داره' }; } // ─── پاسخ شبیه‌سازی‌شده برای هر handler ────────────────── function simulateReply(ownerType, msgText) { const t = msgText; const replies = { trigger: [ 'متوجه شدیم پرداختت ناتمام موند 🙏 الان یه لینک امن برات می‌فرستیم.', 'یه اتفاق افتاده که نیاز به پیگیری فوری داره. یه لحظه صبر کن.', ], followup: [ 'وقت مشاوره‌ات ثبت شد. قبل از جلسه یادآوری می‌فرستیم.', 'باشه، یه زمان مناسب هماهنگ می‌کنیم. چه ساعتی بهتره؟', ], campaign: [ 'بذار مشاورمون قیمت دقیق رو باهاتون در میان بذاره. شماره داری؟', 'ممنون از خریدت! یه پیشنهاد ویژه برات داریم 🎁', 'این کمپین دقیقاً برای این موقعیت طراحی شده. بیشتر بگو.', ], script: [ 'سلام! در خدمتتم 🙏 بفرمایید.', 'چطور می‌تونم کمکتون کنم؟', 'هدفتون از برنامه‌نویسی چیه؟', ], bot: [ 'پیامتون دریافت شد. به زودی پاسخ می‌دیم.', 'ممنون از تماستون. یه لحظه صبر کنید.', ], }; const list = replies[ownerType] || replies.bot; return list[Math.floor(Math.random() * list.length)]; } // ─── کامپوننت چت شبیه‌ساز ──────────────────────────────── const ChatSimulator = ({ priorityOrder, colors, handlerLabels, entities }) => { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [activeOwner, setActiveOwner] = useState(null); const [viewMode, setViewMode] = useState('chat'); // chat | admin const bottomRef = useRef(null); useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]); const send = () => { const txt = input.trim(); if (!txt) return; const { type, reason } = detectEventType(txt); const inIdx = priorityOrder.indexOf(type); const curIdx = activeOwner ? priorityOrder.indexOf(activeOwner) : 999; const wins = inIdx <= curIdx; const newOwner = wins ? type : activeOwner; const prevOwner = activeOwner; // موجودیت فعال برای log const activeEntForLog = ((entities && entities[newOwner]) || [])[0]; // log سیستمی const logParts = [ `تشخیص: ${handlerLabels[type]} (اولویت #${inIdx + 1})`, wins && prevOwner && prevOwner !== type ? `${handlerLabels[prevOwner]} pause شد` : !wins ? `${handlerLabels[newOwner]} همچنان در کنترل (اولویت بالاتر)` : null, activeEntForLog ? `← ${activeEntForLog.name}` : null, ].filter(Boolean); // موجودیت فعال برای نمایش const ents = (entities && entities[newOwner]) || []; const activeEnt = ents[0]; const entLabel = newOwner === 'campaign' ? 'کمپین فعال' : newOwner === 'script' ? 'اسکریپت فعال' : newOwner === 'followup' ? 'الگوی فالوآپ' : newOwner === 'trigger' ? 'تریگر' : 'بات'; // داده ادمین const adminData = { 'handler فعال': handlerLabels[newOwner], 'اولویت': `#${priorityOrder.indexOf(newOwner) + 1}`, ...(activeEnt ? { [entLabel]: activeEnt.name } : {}), 'تغییر': wins && prevOwner && prevOwner !== type ? `${handlerLabels[prevOwner]} → ${handlerLabels[newOwner]}` : 'بدون تغییر', 'دلیل': reason, 'action': newOwner === 'trigger' ? 'ارسال پیام فوری' : newOwner === 'followup' ? 'زمان‌بندی تماس' : newOwner === 'campaign' ? 'اجرای flow کمپین' : newOwner === 'script' ? 'اجرای اسکریپت' : 'نگه‌داری لید', }; setMessages(prev => [...prev, { kind: 'user', text: txt }, { kind: 'log', parts: logParts, owner: newOwner, changed: wins && prevOwner !== newOwner }, { kind: 'reply', text: simulateReply(newOwner, txt), adminData, owner: newOwner }, ]); setActiveOwner(newOwner); setInput(''); }; const reset = () => { setMessages([]); setActiveOwner(null); }; return (
{/* نوار بالا */}
{/* مالک فعلی */}
مالک فعلی: {activeOwner ? handlerLabels[activeOwner] : 'هنوز پیامی نیست'}
{/* سوئیچ نمایش */}
{[['chat','چت'],['admin','ادمین']].map(([v, l]) => ( ))}
{messages.length > 0 && ( )}
{/* پیام‌ها */}
{messages.length === 0 && (
یه پیام بفرست تا ببینیم چی فعال می‌شه 👇
)} {messages.map((m, i) => { if (m.kind === 'user') return (
{m.text}
); if (m.kind === 'log') return (
{m.parts.map((p, pi) => ( {pi > 0 && ·} {p} ))}
); if (m.kind === 'reply') return (
{/* هدر handler */}
{handlerLabels[m.owner]}
{/* محتوا */}
{viewMode === 'chat' ? ( {m.text} ) : (
{Object.entries(m.adminData).map(([k, v]) => (
{k} {v}
))}
)}
); return null; })}
{/* input */}
setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()} placeholder="پیام بفرست... مثلاً: سلام / مشاوره می‌خوام / قیمت چنده؟" style={{ flex: 1, padding: '9px 14px', borderRadius: 10, fontSize: 12, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#e2e8f0', outline: 'none' }} />
{/* نمونه‌ها */}
{['سلام','قیمت چنده؟','مشاوره می‌خوام','پرداختم رها شد','بعداً بهتون زنگ می‌زنم','خریدم','نمی‌دونم'].map(s => ( ))}
); }; // ─── engine: شبیه‌ساز اولویت ───────────────────────────── // هر رویداد یه handler_type داره. engine بر اساس ترتیب فعلی // تعیین می‌کنه کی کنترل رو می‌گیره. function runSimulation(events, priorityOrder) { let activeType = null; return events.map(ev => { const inIdx = priorityOrder.indexOf(ev.type); const curIdx = activeType ? priorityOrder.indexOf(activeType) : 999; const wins = inIdx <= curIdx; // عدد کوچکتر = اولویت بالاتر const prev = activeType; if (wins) activeType = ev.type; return { ...ev, owner: wins ? ev.type : activeType, changed: wins && prev !== ev.type, from: wins && prev ? prev : null }; }); } // ─── سناریوهای واقعی سیستم ──────────────────────────────── const SCENARIOS = [ { id: 's1', name: 'علی — لید جدید', emoji: '👤', desc: 'لید تازه وارد می‌شه، اسکریپت شروع می‌کنه، بعد لینک پرداخت رو رها می‌کنه', events: [ { t:0, icon:'👤', label:'وارد شد', type:'script' }, { t:10, icon:'💬', label:'پیام اول فرستاد', type:'script' }, { t:25, icon:'📢', label:'کمپین خوش‌آمدگویی', type:'campaign' }, { t:45, icon:'🔗', label:'لینک پرداخت باز کرد', type:'trigger' }, { t:70, icon:'⏰', label:'۲۴ ساعت بی‌جواب', type:'campaign' }, { t:90, icon:'✅', label:'پرداخت کرد', type:'campaign' }, ], }, { id: 's2', name: 'سارا — No-Show', emoji: '📅', desc: 'مشاوره رزرو کرد ولی نیومد — تریگر فوری فعال می‌شه', events: [ { t:0, icon:'👤', label:'وارد شد', type:'script' }, { t:15, icon:'📢', label:'کمپین فعال شد', type:'campaign' }, { t:30, icon:'📅', label:'مشاوره رزرو کرد', type:'followup' }, { t:50, icon:'❌', label:'No-Show مشاوره', type:'trigger' }, { t:65, icon:'📞', label:'فالوآپ پیگیری', type:'followup' }, { t:85, icon:'💰', label:'خرید کرد', type:'campaign' }, ], }, { id: 's3', name: 'رضا — لید سرد', emoji: '🧊', desc: 'بعد از ۳۰ روز بی‌خبری کمپین بازگشت فعال می‌شه', events: [ { t:0, icon:'👤', label:'وارد شد', type:'script' }, { t:10, icon:'😶', label:'۳۰ روز بی‌خبر', type:'bot' }, { t:35, icon:'📢', label:'کمپین بازگشت', type:'campaign' }, { t:55, icon:'💬', label:'دوباره پیام داد', type:'trigger' }, { t:75, icon:'📞', label:'مشاوره خواست', type:'followup' }, ], }, { id: 's4', name: 'مریم — وسط کمپین', emoji: '⚡', desc: 'وسط کمپین یه تریگر فوری میاد — کی برنده می‌شه؟', events: [ { t:0, icon:'📢', label:'کمپین پیگیری فعاله', type:'campaign' }, { t:20, icon:'⚡', label:'تریگر keyword', type:'trigger' }, { t:40, icon:'📢', label:'کمپین ادامه داد', type:'campaign' }, { t:60, icon:'⏰', label:'فالوآپ زمان‌بندی', type:'followup' }, { t:80, icon:'✅', label:'ثبت‌نام کرد', type:'campaign' }, ], }, { id: 's5', name: 'حسین — بعد از خرید', emoji: '🛒', desc: 'بعد از خرید کمپین Upsell شروع می‌کنه', events: [ { t:0, icon:'✅', label:'خرید کرد', type:'campaign' }, { t:15, icon:'📢', label:'Upsell فعال شد', type:'campaign' }, { t:35, icon:'💬', label:'سوال فرستاد', type:'script' }, { t:55, icon:'⚡', label:'تریگر keyword خاص', type:'trigger' }, { t:75, icon:'📢', label:'Upsell ادامه داد', type:'campaign' }, ], }, { id: 's6', name: 'نیلوفر — ریکاوری', emoji: '🔄', desc: 'مکالمه رها شد — بات نگه می‌داره تا handler بیاد', events: [ { t:0, icon:'👤', label:'وارد شد', type:'script' }, { t:15, icon:'😶', label:'مکالمه قطع شد', type:'bot' }, { t:30, icon:'⚡', label:'تریگر ریکاوری', type:'trigger' }, { t:50, icon:'📢', label:'کمپین ریکاوری', type:'campaign' }, { t:70, icon:'📞', label:'فالوآپ تلفنی', type:'followup' }, ], }, ]; // ─── کامپوننت Timeline یک سناریو ───────────────────────── const ScenarioTimeline = ({ scenario, priorityOrder, colors }) => { const result = runSimulation(scenario.events, priorityOrder); const maxT = Math.max(...scenario.events.map(e => e.t)) + 15; return (
{/* header سناریو */}
{scenario.emoji}
{scenario.name}
{scenario.desc}
{/* خط timeline */}
{/* track */}
{/* رنگ‌آمیزی بر اساس owner */} {result.map((ev, i) => { const next = result[i + 1]; const x1 = ev.t / maxT * 100; const x2 = next ? next.t / maxT * 100 : 100; return (
); })}
{/* pin‌های رویداد */} {result.map((ev, i) => (
{ev.icon}
{ev.label}
))}
{/* لاگ تغییر owner */}
{result.filter(ev => ev.changed).map((ev, i) => (
t+{ev.t} {ev.owner === 'trigger' ? 'تریگر' : ev.owner === 'followup' ? 'فالوآپ' : ev.owner === 'campaign' ? 'کمپین' : ev.owner === 'script' ? 'اسکریپت' : 'بات'} کنترل گرفت {ev.from && ← از {ev.from === 'trigger' ? 'تریگر' : ev.from === 'followup' ? 'فالوآپ' : ev.from === 'campaign' ? 'کمپین' : ev.from === 'script' ? 'اسکریپت' : 'بات'}}
))}
); }; // ─── MindMap — نقشه زنده با انیمیشن bezier (طراحی اصلی) ───── const MindMap = ({ entities, colors, handlerLabels, brainScript, items, onBrainClick, onRefresh, onClose }) => { /* ── load Vazirmatn ── */ useEffect(() => { if (!document.getElementById('_vzf')) { const l = document.createElement('link'); l.id='_vzf'; l.rel='stylesheet'; l.href='https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap'; document.head.appendChild(l); } }, []); /* ── refs ── */ const stageRef = useRef(null); const rafRef = useRef(null); const animRef = useRef({ i:0, phase:'incoming', start:0, paused:false, pausedEl:0 }); const logRef = useRef([]); const msgsRef = useRef([]); const [idle, setIdle] = useState(false); /* ── state ── */ const [tick, setTick] = useState(0); const [stageScale, setStageScale] = useState(0.78); const [chatInput, setChatInput] = useState(''); /* ── helpers ── */ const BX = 500, BY = 348; const D = { incoming:1300, thinking:1400, routing:1600, delivered:1300, gap:600 }; const col = (h, a) => a == null ? `oklch(0.74 0.19 ${h})` : `oklch(0.74 0.19 ${h} / ${a})`; const fa = (s) => String(s).replace(/[0-9]/g, d => '۰۱۲۳۴۵۶۷۸۹'[+d]); const ctP = (ax,ay,bx2,by2,sign) => { const mx=(ax+bx2)/2,my=(ay+by2)/2,dx=bx2-ax,dy=by2-ay; const L=Math.hypot(dx,dy)||1,nx=-dy/L,ny=dx/L,o=L*.14*sign; return {x:mx+nx*o,y:my+ny*o}; }; const quad = (p0,cp,p1,t) => { const m=1-t,a=m*m,b=2*m*t,c=t*t; return {x:a*p0.x+b*cp.x+c*p1.x,y:a*p0.y+b*cp.y+c*p1.y}; }; const E = React.createElement; /* ── categories (همان موقعیت طراحی اصلی) ── */ const HUE = {trigger:350,bot:322,followup:292,campaign:264,script:238}; const rawCats = [ {id:'trigger', name:'تریگرها', desc:'نقطه ورود', x:505,y:74, sign:-1}, {id:'bot', name:'بات‌ها', desc:'پاسخ خودکار', x:122,y:196,sign:1 }, {id:'followup',name:'فالوآپ‌ها', desc:'پیگیری', x:892,y:212,sign:1 }, {id:'campaign',name:'کمپین‌ها', desc:'کمپین فعال', x:852,y:560,sign:-1}, {id:'script', name:'اسکریپت‌ها',desc:'مکالمه', x:150,y:566,sign:-1}, ]; const LEAF_DEF = { trigger: ['لید جدید','پیام ورودی','فرم سایت'], bot: ['بات پاسخ','دستیار فروش'], followup: ['No-Show','پرداخت رها شده','پیگیری مشاوره'], campaign: ['جذب لید جدید','Upsell بعد خرید','وفاداری'], script: ['تماس اول','تماس دوم','ریکاوری مکالمه'], }; const CNT_DEF = {trigger:6,bot:4,followup:12,campaign:33,script:8}; const cats = rawCats.map(c => { const h=HUE[c.id]; const cp=ctP(BX,BY,c.x,c.y,c.sign); const path=`M ${BX} ${BY} Q ${cp.x.toFixed(1)} ${cp.y.toFixed(1)} ${c.x} ${c.y}`; const ents=entities[c.id]||[]; const leafNames=ents.length>0?ents.slice(0,3).map(e=>e.name):LEAF_DEF[c.id]; const base=Math.atan2(c.y-BY,c.x-BX); const n=leafNames.length,spread=.52,R=98; const leaves=leafNames.map((name,i)=>{ const ang=base+spread*(i-(n-1)/2); const lx=c.x+R*Math.cos(ang),ly=c.y+R*Math.sin(ang); return {name,x:+lx.toFixed(1),y:+ly.toFixed(1),conn:`M ${c.x} ${c.y} L ${lx.toFixed(1)} ${ly.toFixed(1)}`,hue:h,idx:i}; }); const count=ents.length>0?fa(ents.length):fa(CNT_DEF[c.id]); return {...c,hue:h,cp,path,leaves,count}; }); const byId=Object.fromEntries(cats.map(c=>[c.id,c])); /* ── animation loop (throttled to ~30fps for performance) ── */ const frameRef = useRef(0); const pushLog=()=>{ const a=animRef.current,msgs=msgsRef.current,m=msgs[a.i]; const t=byId[m?.cat]; if(!t)return; const lf=t.leaves[m.leaf]||t.leaves[0]; logRef.current=[...logRef.current, {intent:m.intent,dest:`${t.name} · ${lf?.name||''}`,confPct:fa(Math.round(m.conf*100))+'٪',color:col(t.hue),glow:col(t.hue,.8)} ].slice(-7); }; useEffect(()=>{ const a=animRef.current; a.start=performance.now(); const loop=()=>{ rafRef.current=requestAnimationFrame(loop); if(a.paused)return; const now=performance.now(),el=now-a.start,dur=D[a.phase]; if(el>=dur){ if (a.phase==='incoming') {a.phase='thinking'; a.start=now;} else if(a.phase==='thinking') {a.phase='routing'; a.start=now;} else if(a.phase==='routing') {a.phase='delivered';a.start=now;pushLog();} else if(a.phase==='delivered'){a.phase='gap'; a.start=now;} else{ const len=msgsRef.current.length; if(len===0){a.paused=true;} else{a.i=(a.i+1)%len;a.phase='incoming';a.start=now;} } } /* throttle re-render to ~30fps */ frameRef.current=(frameRef.current+1)%2; if(frameRef.current===0) setTick(t=>t+1); }; rafRef.current=requestAnimationFrame(loop); return ()=>{if(rafRef.current)cancelAnimationFrame(rafRef.current);}; },[]); /* ── polling پیام‌های واقعی از سرور ── */ const CATS_VALID = new Set(['trigger','bot','followup','campaign','script']); const fetchEvents = () => { window.api('/orchestrator/recent-events?limit=30').then(r => { if (!r.success || !r.data?.length) { setIdle(true); return; } /* فقط پیام‌های ۱۰ دقیقه اخیر — قدیمی‌تر از اون idle می‌شه */ const cutoff = Date.now() - 10 * 60 * 1000; const fresh = r.data.filter(ev => new Date(ev.time).getTime() >= cutoff); if (!fresh.length) { setIdle(true); msgsRef.current = []; return; } const mapped = fresh.map(ev => { const cat = CATS_VALID.has(ev.cat) ? ev.cat : 'bot'; const { type: detectedType } = detectEventType(ev.text || ''); const finalCat = cat !== 'bot' ? cat : detectedType; const cn = byId[finalCat] || byId['bot']; const conf = 0.75 + Math.random() * 0.22; return { text: ev.text, src: 0, cat: cn.id, leaf: Math.floor(Math.random() * (cn.leaves?.length || 1)), conf, intent: (ev.text || '').slice(0, 24), reason: `از ${ev.platform || 'پیام‌رسان'} — مسیر: ${cn.name}`, name: ev.name, }; }); const prev = msgsRef.current; if (JSON.stringify(prev.map(m=>m.text)) !== JSON.stringify(mapped.map(m=>m.text))) { msgsRef.current = mapped; setIdle(false); const a = animRef.current; if (a.i >= mapped.length) { a.i = 0; a.phase = 'incoming'; a.start = performance.now(); } } }).catch(() => setIdle(true)); }; useEffect(() => { fetchEvents(); const tid = setInterval(fetchEvents, 12000); return () => clearInterval(tid); }, []); // eslint-disable-line /* ── stage scale measurement ── */ useEffect(()=>{ const measure=()=>{ const el=stageRef.current; if(!el)return; const w=el.clientWidth-8,h=el.clientHeight-200; const s=Math.max(.32,Math.min(w/1012,h/712,1.0)); setStageScale(prev=>Math.abs(s-prev)>.005?s:prev); }; measure();const tid=setTimeout(measure,200); window.addEventListener('resize',measure); return ()=>{clearTimeout(tid);window.removeEventListener('resize',measure);}; },[]); /* ── controls ── */ const select=(i)=>{ const a=animRef.current; a.i=i%msgsRef.current.length;a.phase='incoming';a.start=performance.now();a.paused=false; setTick(t=>t+1); }; const toggle=()=>{ const a=animRef.current,now=performance.now(); if(a.paused){a.paused=false;a.start=now-a.pausedEl;} else {a.paused=true; a.pausedEl=now-a.start;} setTick(t=>t+1); }; const sendChat=()=>{ const text=chatInput.trim(); if(!text)return; setChatInput(''); const {type}=detectEventType(text); const cn=byId[type]||byId['bot']; const conf=.80+Math.random()*.17; msgsRef.current=[...msgsRef.current, {text,src:0,cat:cn.id,leaf:0,conf,intent:text.slice(0,22),reason:`پیام کاربر — مسیر: ${cn.name}`} ]; const a=animRef.current; a.phase='incoming'; a.start=performance.now(); a.paused=false; a.i=msgsRef.current.length-1; setIdle(false); setTick(t=>t+1); }; /* ── render values (هر frame محاسبه می‌شه) ── */ const a=animRef.current,msgs=msgsRef.current; const phase=a.phase,msg=msgs[a.i]||msgs[0]; const target=byId[msg?.cat]||cats[3],trig=byId['trigger']; const nowT=performance.now(),elT=a.paused?a.pausedEl:nowT-a.start; const prog=Math.max(0,Math.min(1,elT/(D[phase]||1))); const brain={x:BX,y:BY}; const incoming=phase==='incoming',analyzing=phase==='thinking'; const routing=phase==='routing',delivered=phase==='delivered'; const showDec=routing||delivered; /* category views */ const catViews=cats.map(c=>{ const isSrc=incoming&&c.id==='trigger'; const isTgt=(routing||delivered)&&c.id===target?.id; const active=isSrc||isTgt,h=c.hue; return {...c,active, ns:{ /* nodeStyle */ position:'absolute',left:c.x+'px',top:c.y+'px', transform:`translate(-50%,-50%) scale(${active?1.06:1})`, display:'flex',alignItems:'center',gap:'10px', padding:'10px 14px',borderRadius:'15px',whiteSpace:'nowrap', background:active?`linear-gradient(150deg,${col(h,.28)},rgba(20,11,26,.92))`:'rgba(19,11,25,.78)', border:`1px solid ${active?col(h,.9):'rgba(255,255,255,.1)'}`, boxShadow:active?`0 0 0 1px ${col(h,.4)},0 10px 34px ${col(h,.45)},0 0 46px ${col(h,.3)}`:'0 6px 20px rgba(0,0,0,.45)', backdropFilter:'blur(12px)',WebkitBackdropFilter:'blur(12px)', transition:'all .35s',zIndex:active?8:5,pointerEvents:'none', }, ds:{width:'11px',height:'11px',borderRadius:'4px',flex:'0 0 auto',background:col(h),boxShadow:`0 0 12px ${col(h,.95)}`}, cs:{ /* countStyle */ marginInlineStart:'4px',fontSize:'12px',fontWeight:'800', color:active?'#fff':col(h,.95), background:active?col(h,.3):'rgba(255,255,255,.06)', border:`1px solid ${active?col(h,.7):'rgba(255,255,255,.08)'}`, padding:'2px 8px',borderRadius:'999px', }, }; }); /* leaf views */ const leafViews=[],leafLinks=[]; cats.forEach(c=>c.leaves.forEach(lf=>{ const isSrc=incoming&&c.id==='trigger'&&lf.idx===msg?.src; const isTgt=(routing||delivered)&&c.id===target?.id&&lf.idx===msg?.leaf; const active=isSrc||isTgt,h=lf.hue; leafLinks.push({conn:lf.conn,stroke:col(h,.18)}); leafViews.push({name:lf.name,style:{ position:'absolute',left:lf.x+'px',top:lf.y+'px',transform:'translate(-50%,-50%)', padding:'5px 11px',borderRadius:'999px',fontSize:'11.5px',fontWeight:active?'700':'500',whiteSpace:'nowrap', background:active?col(h,.2):'rgba(255,255,255,.04)', border:`1px solid ${active?col(h,.75):'rgba(255,255,255,.08)'}`, color:active?'#fff':'rgba(225,210,225,.55)', boxShadow:active?`0 0 18px ${col(h,.55)}`:'none', textShadow:active?`0 0 9px ${col(h,.8)}`:'none', transition:'all .3s',zIndex:active?7:4,pointerEvents:'none', }}); })); /* SVG overlay */ const gp=(d,h,key,w,op)=>[ E('path',{key:key+'h',d,fill:'none',stroke:col(h,op*.5),strokeWidth:(w||3)+5,strokeLinecap:'round',filter:'url(#mg1)',opacity:op*.7}), E('path',{key:key+'c',d,fill:'none',stroke:'#fff',strokeWidth:1.6,strokeLinecap:'round',opacity:op*.9}), E('path',{key:key+'m',d,fill:'none',stroke:col(h),strokeWidth:w||3,strokeLinecap:'round',filter:'url(#mg1)',opacity:op}), ]; const pt=(p,h,key)=>[ E('circle',{key:key+'g',cx:p.x,cy:p.y,r:13,fill:col(h,.4),filter:'url(#mg1)'}), E('circle',{key:key+'o',cx:p.x,cy:p.y,r:7,fill:col(h,.9)}), E('circle',{key:key+'i',cx:p.x,cy:p.y,r:3.2,fill:'#fff'}), ]; const ov=[]; if(incoming&&trig){ ov.push(...gp(trig.path,trig.hue,'inc',2.6,.85)); ov.push(...pt(quad(brain,trig.cp,{x:trig.x,y:trig.y},1-prog),trig.hue,'incp')); } if(analyzing){ const r=26+prog*64,op=Math.max(0,.5*(1-prog)); ov.push(E('circle',{key:'th1',cx:BX,cy:BY,r,fill:'none',stroke:col(340,op),strokeWidth:2})); const p2=(prog+.5)%1,r2=26+p2*64,op2=Math.max(0,.4*(1-p2)); ov.push(E('circle',{key:'th2',cx:BX,cy:BY,r:r2,fill:'none',stroke:col(330,op2),strokeWidth:2})); } if((routing||delivered)&&target){ ov.push(...gp(target.path,target.hue,'rt',3,.95)); const lf=target.leaves[msg?.leaf||0]||target.leaves[0]; if(lf)ov.push(...gp(lf.conn,target.hue,'rtl',1.8,.85)); if(routing)ov.push(...pt(quad(brain,target.cp,{x:target.x,y:target.y},prog),target.hue,'rtp')); if(delivered){ const r=12+prog*70,op=Math.max(0,1-prog); ov.push(E('circle',{key:'dl',cx:target.x,cy:target.y,r,fill:'none',stroke:col(target.hue,op*.8),strokeWidth:2.4})); } } /* rail data */ const current={ channel:trig?.leaves[msg?.src||0]?.name||'ورودی', text:msg?.text||'', time:incoming?'در حال دریافت…':'هم‌اکنون', }; const decision=showDec&&target&&msg?{ catName:target.name, leaf:(target.leaves[msg.leaf||0]||target.leaves[0])?.name||'', reason:msg.reason, confPct:fa(Math.round(msg.conf*100))+'٪',confW:Math.round(msg.conf*100)+'%', chipBg:col(target.hue,.22),chipBorder:col(target.hue,.6), chipShadow:`0 0 16px ${col(target.hue,.4)}`,leafColor:col(target.hue,.95), barBg:`linear-gradient(90deg,${col(target.hue,.6)},${col(target.hue)})`,barGlow:col(target.hue,.7), }:null; const queue=msgs.length>1?[1,2].map(k=>{const j=(a.i+k)%msgs.length;return{text:msgs[j]?.text||'',idx:j};}):[]; const recent=logRef.current.slice().reverse(); const legend=cats.map(c=>({name:c.name,color:col(c.hue),glow:col(c.hue,.7)})); const statusText=incoming?'دریافت پیام…':analyzing?'در حال تحلیل…':routing?'ارجاع…':delivered?'✓ ارجاع شد':'آماده'; const thinkGlow=analyzing?.95:routing?.6:delivered?.55:.32; const kpis=[{val:'۲٬۴۸۰',label:'پیام امروز'},{val:'٪۹۶',label:'ارجاع درست'},{val:'۰٫۸s',label:'میانگین تصمیم'}]; /* ── JSX ── */ return (
{/* dot grid */}
{/* center glow */}
{/* ── HEADER ── */}
{onClose&&} e.target.style.display='none'}/>
Orchestra آنلاین
مغز مرکزی هوشمند · موتور ارجاع پیام
{kpis.map((k,i)=>(
{k.val} {k.label}
))} {onClose&&( )}
{/* ── BODY ── */}
{/* ── RAIL ── */} {/* ── STAGE ── */}
{/* scaled mindmap canvas */}
{/* ambient rings */} {/* dashed bezier lines */} {cats.map((c,i)=>( ))} {/* leaf connectors */} {leafLinks.map((l,i)=>( ))} {/* animated overlay */} {E('g',{key:'ov'},ov)} {/* brain glow + expand ring */}
🧠e.target.style.display='none'} /> {/* brain label */}
مغز اصلی {statusText}
{/* category nodes */} {catViews.map(c=>(
{c.name} {c.desc}
{c.count}
))} {/* leaves */} {leafViews.map((l,i)=>(
{l.name}
))}
{/* legend + controls */}
{legend.map((g,i)=>( {g.name} ))}
{/* chat input */}
setChatInput(e.target.value)} onKeyDown={e=>e.key==='Enter'&&sendChat()} placeholder="پیام بفرست — مسیر روی نقشه انیمیت می‌شه" style={{flex:1,padding:'10px 14px',borderRadius:12,fontSize:13,fontFamily:'inherit',background:'rgba(255,255,255,.06)',border:'1px solid rgba(255,255,255,.13)',color:'#f4ecf2',outline:'none'}} />
); }; // ─── Orchestra Board ────────────────────────────────────── const OrchestraBoard = () => { const { Icon, useToast } = window.SB_UI; const toast = useToast(); const DEFAULTS = [ { id: 'trigger', label: 'تریگر', icon: 'zap', color: '#F87171', desc: 'رویداد فوری — بلافاصله قطع می‌کنه' }, { id: 'followup', label: 'فالوآپ', icon: 'clock', color: '#FB923C', desc: 'قرار تماس از قبل تنظیم شده' }, { id: 'campaign', label: 'کمپین', icon: 'megaphone', color: '#60A5FA', desc: 'برنامه بازاریابی در حال اجرا' }, { id: 'script', label: 'اسکریپت', icon: 'file-text', color: '#A78BFA', desc: 'رفتار پیشفرض لید گیری' }, { id: 'bot', label: 'بات', icon: 'cpu', color: '#34D399', desc: 'اگه هیچ handler دیگه‌ای نبود' }, ]; const [items, setItems] = useState(DEFAULTS); const [entities, setEntities] = useState({ campaign: [], script: [], followup: [], trigger: [], bot: [] }); const [saving, setSaving] = useState(false); const [dirty, setDirty] = useState(false); const [dragging, setDragging] = useState(null); const [innerDirty, setInnerDirty] = useState(false); const [innerSaving, setInnerSaving] = useState(false); const [tab, setTab] = useState('priority'); // priority | scenarios | chat | alerts const [alerts, setAlerts] = useState([]); const [alertsLoading, setAlertsLoading] = useState(false); const [brainScript, setBrainScript] = useState(null); const [showBrain, setShowBrain] = useState(false); const [brainEdit, setBrainEdit] = useState(''); const [brainFallback, setBrainFallback] = useState(''); const [brainSaving, setBrainSaving] = useState(false); const [distPrompt, setDistPrompt] = useState(''); // متن هاردکد توزیع const [distUnlocked, setDistUnlocked] = useState(false); // بعد از وارد کردن رمز درست const [distPassword, setDistPassword] = useState(''); const [distSaving, setDistSaving] = useState(false); const dragIdx = useRef(null); const innerDragIdx = useRef(null); const colors = Object.fromEntries(DEFAULTS.map(d => [d.id, d.color])); const priorityOrder = items.map(i => i.id); const loadData = () => { window.api('/orchestrator/order').then(r => { if (r.success && r.data?.length === 5) { const ordered = r.data.map(id => DEFAULTS.find(d => d.id === id)).filter(Boolean); if (ordered.length === 5) setItems(ordered); } }).catch(() => {}); Promise.all([ window.api('/campaigns/campaigns').catch(() => []), window.api('/scripts').catch(() => ({})), window.api('/followup/templates').catch(() => ({ success: false })), window.api('/orchestrator/rules').catch(() => ({ success: false })), ]).then(([camps, scripts, followups, rules]) => { const ruleMap = {}; if (rules.success) rules.data.forEach(r => { if (r.ref_id) ruleMap[r.ref_id] = r.priority; }); const campList = Array.isArray(camps) ? camps.filter(c => c.is_active).map(c => ({ id: c.id, name: c.name, priority: ruleMap[c.id] ?? null, is_active: c.is_active })) .sort((a, b) => a.priority === null ? 1 : b.priority === null ? -1 : a.priority - b.priority) : []; const rawScripts = scripts?.data?.scripts || scripts?.scripts || scripts?.data || []; const scriptList = Array.isArray(rawScripts) ? rawScripts.filter(s => s.is_active).map(s => ({ id: s.id, name: s.name, badge: s.is_default ? 'پیشفرض' : null, is_active: s.is_active })) : []; const followupList = followups.success && Array.isArray(followups.data) ? [...new Map(followups.data.map(f => { const camp = f.name?.match(/^\[(.*?)\]/)?.[1] || ''; return [camp, { id: camp, name: camp }]; })).values()].filter(f => f.name) : []; window.api('/orchestrator/brain-script').then(r => { if (r.success && r.data) { setBrainScript(r.data); setBrainEdit(r.data.system_prompt || ''); setBrainFallback(r.data.fallback_message || ''); setDistPrompt(r.data.distribution_prompt || ''); } }).catch(() => {}); const brain = Array.isArray(rawScripts) ? rawScripts.find(s => s.is_default) : null; if (!brain) setBrainScript(null); setEntities({ campaign: campList, script: scriptList.filter(s => !s.badge), followup: followupList, trigger: [{ id: 't1', name: 'رویدادهای سیستمی (خودکار)' }], bot: [{ id: 'b1', name: 'بات پاسخ‌دهنده عمومی' }], }); }); window.api('/orchestrator/brain-alerts').then(r => { if (r.success) setAlerts(r.data || []); }).catch(() => {}); }; useEffect(() => { loadData(); }, []); // drag داخلی کمپین const onInnerDragStart = (e, i) => { e.stopPropagation(); innerDragIdx.current = i; }; const onInnerDragEnter = (e, i) => { e.preventDefault(); e.stopPropagation(); if (innerDragIdx.current === null || innerDragIdx.current === i) return; setEntities(prev => { const camps = [...prev.campaign]; const [moved] = camps.splice(innerDragIdx.current, 1); camps.splice(i, 0, moved); innerDragIdx.current = i; return { ...prev, campaign: camps }; }); setInnerDirty(true); }; const onInnerDragEnd = (e) => { e.stopPropagation(); innerDragIdx.current = null; }; const saveInnerOrder = async () => { setInnerSaving(true); const r = await window.api('/orchestrator/rules'); if (r.success) { const registered = entities.campaign.filter(c => c.priority !== null); await Promise.all(registered.map((c, i) => { const rule = r.data.find(x => x.ref_id === c.id); if (!rule) return; return window.api(`/orchestrator/rules/${rule.id}`, { method: 'PUT', body: { priority: (i + 1) * 2 } }); })); } setInnerSaving(false); setInnerDirty(false); toast('ترتیب کمپین‌ها ذخیره شد', 'success'); }; // drag خارجی بلوک‌ها const onDragStart = (e, i) => { dragIdx.current = i; setDragging(i); e.dataTransfer.effectAllowed = 'move'; }; const onDragEnter = (e, i) => { e.preventDefault(); if (dragIdx.current === null || dragIdx.current === i) return; setItems(prev => { const next = [...prev]; const [moved] = next.splice(dragIdx.current, 1); next.splice(i, 0, moved); dragIdx.current = i; return next; }); }; const onDragEnd = () => { setDragging(null); dragIdx.current = null; setDirty(true); }; const save = async () => { setSaving(true); const r = await window.api('/orchestrator/order', { method: 'POST', body: { order: items.map(i => i.id) } }); setSaving(false); if (r.success) { setDirty(false); toast('ترتیب ذخیره شد', 'success'); } else toast(r.error || 'خطا', 'error'); }; return (
{/* تب‌ها */}
{[['priority','ترتیب اولویت'],['mindmap','نقشه سیستم'],['scenarios','سناریوها'],['chat','تست چت'],['alerts','هشدارها']].map(([id, label]) => ( ))}
{/* ─── تب اولویت ─── */} {tab === 'priority' && (<>
وقتی دو handler همزمان می‌خوان یه لید رو بگیرن، بالاترین در لیست برنده می‌شه. بکش و بچین.
{/* ─── بلوک مغز اصلی ─── */}
brainScript && setShowBrain(true)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', borderRadius: 12, marginBottom: 4, background: 'linear-gradient(135deg, rgba(251,191,36,0.08), rgba(245,158,11,0.04))', border: '1px solid rgba(251,191,36,0.25)', cursor: brainScript ? 'pointer' : 'default', transition: 'background 0.15s', }}>
🧠
مغز اصلی 🔒 قفل {!brainScript && ( ⚠ در حال بارگذاری... )}
{brainScript ? brainScript.name : 'همیشه اول — توزیع‌کننده و fallback'}
مشاهده اسکریپت ←
{/* ─── Modal اسکریپت مغز ─── */} {showBrain && brainScript && (
{ setShowBrain(false); setDistUnlocked(false); setDistPassword(''); }}>
e.stopPropagation()} style={{ width: 620, maxHeight: '80vh', borderRadius: 16, overflow: 'hidden', background: '#0f172a', border: '1px solid rgba(251,191,36,0.2)', display: 'flex', flexDirection: 'column', }}> {/* هدر */}
🧠
{brainScript.name}
این اسکریپت قابل ویرایش است — تغییرات بلافاصله اعمال می‌شه
{/* متن اسکریپت */}
{/* ─── بخش هاردکد منطق توزیع — بالای متن ادمین، قفل با رمز ─── */}
{distUnlocked ? '🔓' : '🔒'} منطق اصلی توزیع (همیشه بالای متن ادمین قرار می‌گیرد) {!distUnlocked && ( برای ویرایش رمز عبور لازم است )}