/* global React */ // AI-chat wireframe primitives — 3-pane shell, message bubbles, mention pills, // interactive input with @-popover, doc-preview right panel. const { useState, useRef, useEffect } = React; // ── real DataDoc menu icons (from product) ─────────────────────── const II = { templates: ['30 30', ], documents: ['30 30', ], signatures: ['24 24', ], products: ['30 30', ], contractors: ['30 30', ], safe: ['24 24', ], marketplace: ['24 24', ], payment: ['30 30', ], invite: ['30 30', ], chat: ['24 24', ], }; const DDIcon = ({ name }) => { const ic = II[name]; if (!ic) return null; return {ic[1]}; }; const DDLogo = () => (
DataDoc
); // ── Sidebar ────────────────────────────────────────────────────── const NAV_ITEMS = [ ['tpl', 'templates', 'Шаблоны'], ['docs', 'documents', 'Документы'], ['sig', 'signatures', 'Подписи'], ['prod', 'products', 'Товары и услуги'], ['cp', 'contractors', 'Контрагенты'], ['chat', 'chat', 'Чат-ассистент'], ['safe', 'safe', 'Электронный Архив'], ['mkt', 'marketplace', 'Маркетплейс'], ]; const Sidebar = ({ active = 'chat' }) => (
{NAV_ITEMS.map(([key, icon, label]) => (
{label}
))}
Оплата
Пригласить
); // ── Mention pill (inline chip inside user message) ─────────────── const Mention = ({ kind = 'tpl', name }) => { const cls = kind === 'cp' ? 'cp' : kind === 'doc' ? 'dx' : ''; const DocI = (typeof window !== 'undefined' && window.DocIcon) || null; const icon = kind === 'cp' ? 👤 : DocI ? : {kind === 'doc' ? '§' : '▤'}; return ( {icon}{name} ); }; // ── Message bubble ─────────────────────────────────────────────── const Msg = ({ who = 'ai', avatar, ts, children }) => (
{who === 'ai' ?
{avatar || Dd}
: null}
{children} {ts ?
{ts}
: null}
); const Bubble = ({ dashed = false, plain = false, children }) => (
{children}
); // attachment thumbnails in user message const AttachedFiles = ({ files }) => (
{files.map((f, i) => (
{f}
))}
); // ── Interactive @-mention input ────────────────────────────────── // Per-artboard. Typing @ shows popover. Click → inserts pill chip into the // contentEditable field. Send button shakes (each artboard is a fixed state). const MENTION_CATALOG = { 'Шаблоны': [ { id: 'договор-оказания-услуг', name: 'договор-оказания-услуг', sub: 'для физлиц и СМЗ · 1 докс', kind: 'tpl' }, { id: 'договор-поставки', name: 'договор-поставки', sub: 'B2B · с НДС · 1 докс', kind: 'tpl' }, { id: 'договор-с-СМЗ', name: 'договор-с-СМЗ', sub: 'самозанятый · с чеком · 1 докс', kind: 'tpl' }, { id: 'договор-аренды', name: 'договор-аренды', sub: 'долгосрочная аренда · 1 докс', kind: 'tpl' }, { id: 'доп-соглашение', name: 'доп-соглашение', sub: 'изменение действующего договора', kind: 'tpl' }, { id: 'акт', name: 'акт-выполненных-работ', sub: 'ежемесячное закрытие · 1 докс', kind: 'tpl' }, { id: 'счёт', name: 'счёт', sub: 'на оплату · с НДС / без', kind: 'tpl' } ], 'Контрагенты': [ { id: 'ip-melnikov', name: 'ИП Мельников А.С.', sub: 'ИНН 770401872312', kind: 'cp' }, { id: 'ip-sidorov', name: 'ИП Сидоров В.В.', sub: 'ИНН 502718029184', kind: 'cp' }, { id: 'ooo-romashka', name: 'ООО Ромашка', sub: 'ИНН 7704812345 · договор от 12.03.2026', kind: 'cp' }, { id: 'ooo-voshod', name: 'ООО Восход', sub: 'ИНН 7842918374 · 4 документа', kind: 'cp' } ], 'Документы': [ { id: 'd47', name: '№47 от 12.03.2026', sub: 'Договор · ООО Ромашка · 180 000 ₽/мес', kind: 'doc' }, { id: 'd18', name: '№18 от 05.05.2026', sub: 'Договор · ИП Сидоров В.В.', kind: 'doc' }, { id: 'd-may', name: 'договоры за май', sub: '12 документов · ИП и ООО', kind: 'doc' } ], 'Действия': [ { id: 'a-close', name: 'закрыть месяц', sub: 'массовые акты по ретейнерам', kind: 'tpl' }, { id: 'a-revise', name: 'проверить риски', sub: 'AI-ревизия активных договоров', kind: 'tpl' } ] }; function MentionInput({ initial = [], // mix of strings and {kind,name} estimate = null, // {text, doxes, ok} showMenu = false, menuFilter = '', placeholder = 'Спросите AI или начните с @ для шаблона или контрагента', quick = null }) { const [open, setOpen] = useState(showMenu); const [filter, setFilter] = useState(menuFilter); const [content, setContent] = useState(initial); useEffect(() => { setOpen(showMenu); setFilter(menuFilter); }, [showMenu, menuFilter]); const matches = (() => { const f = filter.toLowerCase().trim(); const out = {}; Object.entries(MENTION_CATALOG).forEach(([cat, items]) => { const hit = items.filter((it) => !f || it.name.toLowerCase().includes(f) || it.sub.toLowerCase().includes(f)); if (hit.length) out[cat] = hit; }); return out; })(); const onInput = (e) => { const txt = e.currentTarget.innerText; const m = txt.match(/@([^\s]*)$/); if (m) { setOpen(true); setFilter(m[1] || ''); } else { setOpen(false); setFilter(''); } }; const pick = (it) => { // Append chip to current visual content setContent((c) => [...c, { kind: it.kind, name: it.name }]); setOpen(false); setFilter(''); }; return (
{quick ? (
{quick.map((q, i) =>
⚡ {q}
)}
) : null}
{content.map((c, i) => typeof c === 'string' ? {c} : )}
📎
{open ? (
{Object.entries(matches).length === 0 ? (
ничего не нашли · попробуйте по-другому
) : Object.entries(matches).map(([cat, items]) => (
{cat}
{items.map((it, i) => (
pick(it)}>
{it.kind === 'cp' ? '👤' : (window.DocIcon ? : (it.kind === 'doc' ? '§' : '▤'))}
{it.name}
{it.sub}
{i === 0 ? '↵' : ''}
))}
))}
) : null}
{estimate ? (
≈ {estimate.doxes} доксов {estimate.text} {estimate.ok === false ? Пополнить → : null}
) : null}
); } // ── Share-with-colleague popover (workspace only) ──────────────── const ShareMenu = () => (
Поделиться чатом✕
Доступ есть только у коллег из вашего рабочего пространства «Студия Кадр».
🔎 добавить коллегу по имени или e-mail
МК
Мария Козлова вы
m.kozlova@kadr.ru
Владелец
ПТ
Пётр Ткаченко
p.tkachenko@kadr.ru
Редактор ▾
Отозвать
ИС
Ирина Соколова
i.sokolova@kadr.ru
Просмотр ▾
Отозвать
АГ
Артём Громов
a.gromov@voshod.ru
вне рабочего пространства
🔗 Скопировать ссылку · только для участников Готово
); // ── Chat-column header with doxes balance ──────────────────────── const ChatHead = ({ title = 'Новый чат с DataDoc AI', sub = 'на основе YandexGPT', balance = 1240, low = false, share = false }) => (
{title}
{sub}
Поделиться
⬨ {balance.toLocaleString('ru-RU')} доксов пополнить
{share ? : null}
); // ── Chat-history rail (past dialogs, like ChatGPT) ─────────────── const CHAT_HISTORY = [ ['Сегодня', [['Массовое создание договоров', true], ['Акт № 1 к договору №47', false]]], ['Вчера', [['Проверка договора подряда', false], ['Поиск: Восход, 2 квартал', false], ['Доп.соглашение ООО Ромашка', false]]], ['Ранее', [['Договор аренды по паспорту', false], ['Сверка двух редакций', false], ['Добавление ООО «Восход»', false], ['Составление договора услуг', false]]], ]; const ChatHistory = ({ active = 'Массовое создание договоров', collapsed = false }) => ( collapsed ? (
»
＋
{CHAT_HISTORY.flatMap(([, items]) => items).slice(0, 6).map(([name], i) => (
✶
))}
) : (
Чаты«
＋ Новый чат
🔎поиск по диалогам
{CHAT_HISTORY.map(([grp, items]) => (
{grp}
{items.map(([name], i) => (
✶{name}
))}
))}
) ); // ── 3-pane shell ───────────────────────────────────────────────── const Shell = ({ navActive = 'chat', chatHead, children, doc, history = true, activeChat, histCollapsed = false }) => (
{history ? : null}
{chatHead}
{children}
{doc}
); Object.assign(window, { Sidebar, Mention, Msg, Bubble, AttachedFiles, MentionInput, ChatHead, ShareMenu, Shell, ChatHistory, MENTION_CATALOG });