// AI Отдел — чат-таб + экран переписки (Telegram-style) // Mock conversations — last message and unread count per employee const CONVERSATIONS = { elena: { last: 'Распределила задачи команде', when: '10:42', unread: 2, mine: false }, lyudmila: { last: 'Готов первый драфт ЦА', when: '10:38', unread: 1, mine: false }, dmitry: { last: 'KPI рассчитал, сейчас риски', when: '10:36', unread: 0, mine: false }, igor: { last: 'Ты: Сделай мягче по тону', when: '10:30', unread: 0, mine: true }, kostya: { last: 'Контент-план готов 🎉', when: '09:55', unread: 3, mine: false }, alina: { last: 'Ты: Нужно 5 вариантов', when: '09:20', unread: 0, mine: true }, mark: { last: 'Начинаю web research', when: '09:12', unread: 0, mine: false }, oleg: { last: 'Финал собираю, 15 мин', when: 'Вчера', unread: 0, mine: false }, }; // Per-employee message threads (small samples) const THREADS = { elena: [ { from: 'them', t: 'Привет! Я Елена, твой менеджер. Готова распределить задачи.', when: '10:30' }, { from: 'me', t: 'Привет! Запустим проект по B2B-выходу. Подключи команду.', when: '10:32' }, { from: 'them', t: 'Окей. Беру на себя координацию. Подключаю:\n• Людмилу — ЦА и оффер\n• Дмитрия — KPI и риски\n• Игоря — позиционирование', when: '10:33' }, { from: 'them', t: 'Распределила задачи команде ✅', when: '10:42' }, ], lyudmila: [ { from: 'them', t: 'Начинаю с ЦА и оффера. Какой у нас сегмент — SMB или enterprise?', when: '10:34' }, { from: 'me', t: 'SMB, средний чек 200-500к', when: '10:35' }, { from: 'them', t: 'Поняла. Первый драфт через ~15 мин.', when: '10:36' }, { from: 'them', t: 'Готов первый драфт ЦА', when: '10:38' }, ], dmitry: [ { from: 'them', t: 'Считаю риски и KPI. CAC, LTV, payback — это всё нужно?', when: '10:33' }, { from: 'me', t: 'Да, плюс churn в первый месяц', when: '10:34' }, { from: 'them', t: 'KPI рассчитал, сейчас риски', when: '10:36' }, ], igor: [{ from: 'them', t: 'Формирую позиционирование на основе данных Людмилы.', when: '10:25' }, { from: 'me', t: 'Сделай мягче по тону', when: '10:30' }], kostya: [{ from: 'them', t: 'Собираю контент-план. Каналы: TG, VK, IG.', when: '09:30' }, { from: 'them', t: 'Контент-план готов 🎉', when: '09:55' }], alina: [{ from: 'them', t: 'Начинаю с креативных идей.', when: '09:15' }, { from: 'me', t: 'Нужно 5 вариантов', when: '09:20' }], mark: [{ from: 'them', t: 'Начинаю web research', when: '09:12' }], oleg: [{ from: 'them', t: 'Финал собираю, 15 мин', when: 'Вчера' }], }; // ────────────────────────────────────────────────────────────── // SCREEN: CHAT LIST // ────────────────────────────────────────────────────────────── function ChatTab({ T, nav, stateMode, onUnreadUpdate }) { var [unread, setUnread] = React.useState({}); // Poll for unread counts every 30s React.useEffect(function() { if (!window.AI_API || !window.AI_API.getToken()) return; function poll() { var sinceMap = {}; var team = ['elena','mark','lyudmila','dmitry','igor','kostya','alina','oleg','all']; team.forEach(function(id) { var ts = localStorage.getItem('ai_last_read_' + id); if (ts) sinceMap[id] = ts; }); window.AI_API.getUnreadCounts(sinceMap).then(function(counts) { if (counts) { setUnread(counts); var total = Object.values(counts).reduce(function(sum, n) { return sum + n; }, 0); if (onUnreadUpdate) onUnreadUpdate(total); } }).catch(function() {}); } poll(); var interval = setInterval(poll, 30000); return function() { clearInterval(interval); }; }, []); const team = buildTeam(nav.dept, stateMode); const dept = getDept(nav.dept); const lead = dept.members[0]; return ( nav.toast('Поиск откроется позже')}>
} /> {/* Telegram sync banner */} {(function() { var tgOn = localStorage.getItem('ai_tg_sync') !== 'false'; return (
Синхронизация с Telegram
{tgOn ? 'Подключено · переписка дублируется в TG' : 'Отключено · только в приложении'}
{tgOn ? 'ON' : 'OFF'}
); })()}
{team.map((p, i) => { const working = false; const c = { when: '', unread: 0, last: 'Готов к работе', }; return ( nav.push({ kind: 'chat-thread', employeeId: p.id })}>
{p.name} · {p.role}
{c.when}
0 ? T.ink : T.mute, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1, fontWeight: c.unread > 0 ? 500 : 400, }}>{c.last}
{(unread[p.id] > 0) && ( {unread[p.id]} )}
); })}
{/* Group chat */}
Групповые
nav.push({ kind: 'chat-thread', employeeId: 'all' })}>
{I.team('#fff')}
Вся команда · {dept.members.length}
{lead.name}: {lead.live.replace(/[…\.]+$/, '').toLowerCase()}
10:42
); } // ────────────────────────────────────────────────────────────── // SCREEN: CHAT THREAD (individual conversation) // ────────────────────────────────────────────────────────────── function CodeBlock({ code, T }) { var [copied, setCopied] = React.useState(false); function copy(e) { if (e) e.stopPropagation(); var done = function() { setCopied(true); setTimeout(function() { setCopied(false); }, 1500); }; try { navigator.clipboard.writeText(code).then(done).catch(function() { var ta = document.createElement('textarea'); ta.value = code; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); } catch (e2) {} document.body.removeChild(ta); done(); }); } catch (e1) { var ta = document.createElement('textarea'); ta.value = code; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); } catch (e2) {} document.body.removeChild(ta); done(); } } return React.createElement('div', { style: { margin: '7px 0', background: '#0d1117', borderRadius: 10, border: '1px solid rgba(255,255,255,0.08)', overflow: 'hidden' }, }, React.createElement('div', { onClick: copy, style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 5, padding: '6px 10px', cursor: 'pointer', fontSize: 11, fontWeight: 600, color: copied ? '#3fb950' : '#8b95a5', borderBottom: '1px solid rgba(255,255,255,0.06)', userSelect: 'none' }, }, copied ? '✓ Скопировано' : '⧉ копировать'), React.createElement('pre', { style: { margin: 0, padding: '10px 12px', overflowX: 'auto', fontSize: 12.5, lineHeight: 1.45, color: '#c9d1d9', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, }, code) ); } function renderMarkdown(text, T) { if (!text) return null; var segments = String(text).split(/```/); var out = []; segments.forEach(function(seg, si) { if (si % 2 === 1) { // fenced code block (odd segments); drop optional leading language tag line var code = seg.replace(/^[a-zA-Z0-9_-]*\r?\n/, '').replace(/\s+$/, ''); out.push(React.createElement(CodeBlock, { key: 'cb' + si, code: code, T: T })); return; } var normalized = seg.replace(/\n{3,}/g, '\n\n'); var lines = normalized.split('\n'); lines.forEach(function(line, li) { if (li > 0 || si > 0) out.push(React.createElement('br', { key: 's' + si + 'br' + li })); var hdr = line.match(/^(#{1,6})\s+(.*)$/); if (hdr) { out.push(React.createElement('strong', { key: 's' + si + 'h' + li, style: { fontSize: 15 } }, hdr[2])); return; } if (/^[-—]{3,}$/.test(line.trim())) return; // skip horizontal rules var parts = line.split(/\*\*([^*]+)\*\*/g); parts.forEach(function(part, pi) { if (!part) return; if (pi % 2 === 1) out.push(React.createElement('strong', { key: 's' + si + '-' + li + '-' + pi }, part)); else out.push(part); }); }); }); return out; } function ChatThreadScreen({ T, nav, employeeId }) { const p = employeeId === 'all' ? { id: 'all', name: 'Вся команда', role: getDept(nav.dept).name } : getMember(nav.dept, employeeId); const baseThread = getThread(nav.dept, employeeId); const [messages, setMessages] = React.useState([]); React.useEffect(function() { // Mark as read when opening chat localStorage.setItem('ai_last_read_' + employeeId, new Date().toISOString()); if (!window.AI_API || !window.AI_API.getToken()) return; window.AI_API.getChatMessages(employeeId, null).then(function(msgs) { if (msgs && msgs.length > 0) { var mapped = msgs.map(function(m) { var d = new Date(m.created_at); return { id: m.id, from: m.role === 'user' ? 'me' : 'them', t: m.text, replyTo: m.reply_to_text || null, when: (function(dt){ var m = new Date(dt.getTime() + 3*60*60*1000); return m.toLocaleTimeString('ru', { hour: '2-digit', minute: '2-digit', timeZone: 'UTC' }); })(d), }; }); setMessages(mapped); msgCountRef.current = msgs.length; lastMsgTime.current = msgs[msgs.length - 1].created_at; } }).catch(function() {}); }, [employeeId]); const [input, setInput] = React.useState(''); const [typing, setTyping] = React.useState(false); const scrollRef = React.useRef(null); const msgCountRef = React.useRef(0); const [selected, setSelected] = React.useState({}); // {id: true} const [selectMode, setSelectMode] = React.useState(false); const longPressTimer = React.useRef(null); const longPressFired = React.useRef(false); const [contextMenu, setContextMenu] = React.useState(null); // {id, text, from} const [replyTo, setReplyTo] = React.useState(null); // {id, text} function showContextMenu(m) { longPressFired.current = true; setContextMenu({ id: m.id, text: m.t, from: m.from }); } function closeContextMenu() { setContextMenu(null); } function startLongPress(m) { longPressFired.current = false; longPressTimer.current = setTimeout(function() { showContextMenu(m); }, 500); } function cancelLongPress() { clearTimeout(longPressTimer.current); } function ctxDelete(id) { closeContextMenu(); if (!window.AI_API || !window.AI_API.getToken()) return; window.AI_API.deleteMessages([id]).then(function() { setMessages(function(msgs) { return msgs.filter(function(m) { return m.id !== id; }); }); msgCountRef.current -= 1; }).catch(function() {}); } function ctxSelect(id) { closeContextMenu(); setSelectMode(true); setSelected(function(s) { var n = Object.assign({}, s); n[id] = true; return n; }); } function toggleSelect(id) { if (!selectMode) return; setSelected(function(s) { var n = Object.assign({}, s); if (n[id]) { delete n[id]; } else { n[id] = true; } if (Object.keys(n).length === 0) setSelectMode(false); return n; }); } function exitSelectMode() { setSelectMode(false); setSelected({}); } function deleteSelected() { var ids = Object.keys(selected).map(Number).filter(Boolean); if (!ids.length) return; if (!window.AI_API || !window.AI_API.getToken()) return; window.AI_API.deleteMessages(ids).then(function() { setMessages(function(msgs) { return msgs.filter(function(m) { return !selected[m.id]; }); }); msgCountRef.current -= ids.length; exitSelectMode(); }).catch(function() {}); } React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, typing]); // Poll for new assistant messages while typing indicator is active React.useEffect(() => { if (!typing) return; if (!window.AI_API || !window.AI_API.getToken()) return; var stopped = false; var knownCount = msgCountRef.current; function poll() { if (stopped) return; window.AI_API.getChatMessages(employeeId, null).then(function(msgs) { if (stopped || !msgs || msgs.length === 0) { if (!stopped) setTimeout(poll, 3000); return; } var last = msgs[msgs.length - 1]; if (last.role === 'assistant' && msgs.length > knownCount) { msgCountRef.current = msgs.length; var mapped = msgs.map(function(m) { var d = new Date(m.created_at); return { from: m.role === 'user' ? 'me' : 'them', t: m.text, when: (function(dt){ var m = new Date(dt.getTime() + 3*60*60*1000); return m.toLocaleTimeString('ru', { hour: '2-digit', minute: '2-digit', timeZone: 'UTC' }); })(d) }; }); setMessages(mapped); setTyping(false); } else { setTimeout(poll, 3000); } }).catch(function() { if (!stopped) setTimeout(poll, 3000); }); } var t = setTimeout(poll, 2000); return function() { stopped = true; clearTimeout(t); }; }, [typing, employeeId]); function send() { if (!input.trim()) return; const txt = input.trim(); const now = new Date(); const when = now.toLocaleTimeString('ru', { hour: '2-digit', minute: '2-digit' }); setMessages(m => [...m, { from: 'me', t: txt, replyTo: replyTo ? replyTo.text : null, when: when }]); setInput(''); setTyping(true); var replyText = replyTo ? replyTo.text : null; setReplyTo(null); if (window.AI_API && window.AI_API.getToken()) { var tgSync = localStorage.getItem('ai_tg_sync') !== 'false'; window.AI_API.sendChatMessage(employeeId, txt, replyText, tgSync).catch(() => setTyping(false)); } else { setTimeout(() => { setTyping(false); setMessages(m => [...m, { from: 'them', t: 'Принял! Сейчас займусь.', when: when }]); }, 1400); } } const working = !!buildTeam(nav.dept, 'mixed').find(x => x.id === employeeId)?.task; return (
{/* Custom header with portrait + name */}
{selectMode ? : } {selectMode ? (
{Object.keys(selected).length} выбрано
) : ( nav.push({ kind: 'employee', employeeId: p.id })}>
{p.name}
{p.role}
 )}
{selectMode ? (
0 ? '#E15B5820' : T.card, border: `1px solid ${Object.keys(selected).length > 0 ? '#E15B58' : T.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', }}> 0 ? '#E15B58' : T.mute} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
) : ( {(function() { var on = localStorage.getItem('ai_tg_sync') !== 'false'; return (
TG
); })()} )}
{/* Messages */}
{messages.map((m, i) => { const mine = m.from === 'me'; return (
{!mine && i > 0 && messages[i-1].from === 'them' ? (
) : !mine ? (
) : null}
{m.replyTo && (
Ответ
{m.replyTo.replace(/\*\*/g, '').substring(0, 60)}
)} {(function() { var text = m.t || ''; if (text.startsWith('[PDF]')) { var parts = text.slice(5).split('|'); var pdfName = parts[0] || 'Документ'; var pdfUrl = parts[1] || '#'; return (
{pdfName}
Нажми чтобы открыть PDF
 ); } return renderMarkdown(text, T); })()}
{m.when}
{selectMode && (
{selected[m.id] && ( )}
)}
); })} {typing && (
)}
{/* Context Menu Overlay — TG style glass */} {contextMenu && (
{[ { icon: 'M3 10h10a8 8 0 018 8v2M3 10l6 6M3 10l6-6', label: 'Ответить', color: T.ink, action: function() { setReplyTo({ id: contextMenu.id, text: contextMenu.text }); closeContextMenu(); } }, { icon: 'M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3', label: 'Скопировать', color: T.ink, action: function() { if (contextMenu.text && navigator.clipboard) { navigator.clipboard.writeText(contextMenu.text).catch(function(){}); } closeContextMenu(); nav.toast('Скопировано'); } }, { icon: 'M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z', label: 'Закрепить', color: T.ink, action: function() { closeContextMenu(); nav.toast('Закрепить — скоро'); } }, { icon: 'M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6', label: 'Удалить', color: '#E15B58', action: function() { ctxDelete(contextMenu.id); } }, { icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z', label: 'Выбрать', color: T.ink, action: function() { ctxSelect(contextMenu.id); } }, ].map(function(item, idx, arr) { return ( ); })}
)} {/* Reply Preview */} {replyTo && (
Ответить
{replyTo.text.replace(/\*\*/g, '').substring(0, 80)}
)} {/* Composer */}
nav.toast('Вложение скоро')}>
{I.clip(T.mute)}