digiops/call-center
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add operator unified messenger MVP

Browse Source
This commit is contained in:
Yera All
2026-04-16 22:16:57 +05:00
parent 1206ff91ac
commit 3b5a7ad2e7
4 changed files with 1225 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/operator/index.html
+119 -3
View File
@@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/operator/assets/styles.css?v=track23-customer-profile-name-meta1" />
<link rel="stylesheet" href="/operator/assets/styles.css?v=track24-messenger-mvp1" />
</head>
<body>
<div class="app-shell">
@@ -31,8 +31,9 @@
<div class="nav-group">
<div class="nav-label">Страницы</div>
<a class="nav-link active" data-operator-view-link="workspace" href="#workspace"><span class="nav-bullet"></span>Рабочий стол</a>
<a class="nav-link" data-operator-view-link="messages" href="#messages"><span class="nav-bullet"></span>Сообщения</a>
<a class="nav-link" data-operator-view-link="customers" href="#customers-page"><span class="nav-bullet"></span>Клиенты</a>
<a class="nav-link" data-operator-view-link="telegram" href="#telegram-page"><span class="nav-bullet"></span>Telegram</a>
<a class="nav-link" data-debug-channel="telegram" href="#telegram-page" hidden><span class="nav-bullet"></span>Telegram</a>
<a class="nav-link" data-operator-view-link="whatsapp" data-feature="whatsapp" href="#whatsapp-page" hidden><span class="nav-bullet"></span>WhatsApp</a>
<a class="nav-link" data-operator-view-link="calls" data-roles="admin,operator" href="#calls"><span class="nav-bullet"></span>Звонки</a>
</div>
@@ -176,6 +177,121 @@
</section>
</section>
<section id="messagesView" class="operator-view hidden" data-operator-view="messages">
<article class="panel reveal panel-span-full messenger-panel" id="messengerWorkspace">
<div class="messenger-layout">
<aside class="messenger-list-pane">
<div class="messenger-pane-head">
<div>
<p class="eyebrow">Unified messenger</p>
<h2>Сообщения</h2>
<p class="hint">Единое окно для Telegram сейчас и WhatsApp позже.</p>
</div>
<button id="messengerRefreshBtn" class="btn ghost" type="button">Повторить</button>
</div>
<div class="messenger-filters" aria-label="Фильтры сообщений">
<button class="messenger-filter active" data-messenger-filter="all" type="button">Все</button>
<button class="messenger-filter" data-messenger-filter="new" type="button">Новые</button>
<button class="messenger-filter" data-messenger-filter="mine" type="button">Мои</button>
<button class="messenger-filter" data-messenger-filter="ai" type="button">AI handoff</button>
</div>
<div id="messengerConversationList" class="messenger-conversation-list"></div>
</aside>
<section class="messenger-chat-pane">
<header class="messenger-chat-header">
<div class="messenger-chat-identity">
<div id="messengerConversationAvatar" class="telegram-thread-avatar">TG</div>
<div class="messenger-chat-copy">
<div id="messengerConversationTitle" class="messenger-chat-title">Выберите диалог</div>
<div id="messengerConversationMeta" class="messenger-chat-meta">Выберите диалог слева.</div>
</div>
</div>
<div class="messenger-chat-actions">
<span id="messengerChannelBadge" class="messenger-channel-badge">Telegram</span>
<button id="messengerClaimBtn" class="btn ghost" type="button">Взять в работу</button>
<button id="messengerCloseBtn" class="btn ghost" type="button">Закрыть</button>
</div>
</header>
<section id="messengerAiSummaryCard" class="telegram-ai-summary messenger-ai-summary hidden">
<div class="telegram-ai-summary-head">
<div>
<div class="telegram-ai-summary-title">AI summary</div>
<div class="telegram-ai-summary-caption">Короткий контекст перед ручным ответом.</div>
</div>
<div class="telegram-ai-summary-side">
<div id="messengerAiSummaryStatus"></div>
<div id="messengerAiSummaryMeta" class="telegram-ai-summary-meta"></div>
</div>
</div>
<div id="messengerAiSummaryContent" class="telegram-ai-summary-grid"></div>
</section>
<div id="messengerBackendError" class="messenger-error hidden">
<span>Backend сообщений недоступен.</span>
<button id="messengerRetryBtn" class="btn ghost" type="button">Повторить</button>
</div>
<div class="messenger-chat-surface">
<div id="messengerMessagesTimeline" class="telegram-message-timeline messenger-message-timeline"></div>
</div>
<footer class="messenger-composer-wrap">
<div class="telegram-composer-shell messenger-composer-shell">
<textarea id="messengerReplyText" placeholder="Написать ответ клиенту..."></textarea>
<button id="messengerSendReplyBtn" class="telegram-send-btn" type="button" aria-label="Отправить">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M21 3 3.9 10.09a1 1 0 0 0 .06 1.87l6.5 2.27 2.27 6.5a1 1 0 0 0 1.87.06L21 3Z" />
<path d="M10.5 14.5 21 3" />
</svg>
</button>
</div>
<div id="messengerComposerHint" class="telegram-composer-hint">Ответ доступен после выбора и принятия диалога в работу.</div>
</footer>
</section>
<aside class="messenger-context-pane">
<div class="messenger-context-card">
<p class="eyebrow">Клиент</p>
<h3 id="messengerContextName">Диалог не выбран</h3>
<dl class="messenger-context-list">
<div>
<dt>Канал</dt>
<dd id="messengerContextChannel">Telegram</dd>
</div>
<div>
<dt>Статус</dt>
<dd id="messengerContextStatus">—</dd>
</div>
<div>
<dt>Клиент</dt>
<dd id="messengerContextCustomer">—</dd>
</div>
<div>
<dt>Обращение</dt>
<dd id="messengerContextInteraction">—</dd>
</div>
</dl>
<button id="messengerOpenProfileBtn" class="btn" type="button">Открыть профиль</button>
</div>
<div class="messenger-context-card compact">
<p class="eyebrow">Последнее сообщение</p>
<p id="messengerContextPreview" class="messenger-context-preview">Выберите диалог слева.</p>
</div>
<div class="messenger-context-card compact">
<p class="eyebrow">AI summary</p>
<p id="messengerContextAiSummary" class="messenger-context-preview">Сводка появится после AI handoff.</p>
</div>
<div class="messenger-context-card compact">
<p class="eyebrow">Быстрые действия</p>
<button id="messengerContextOpenProfileBtn" class="btn ghost" type="button">Профиль клиента</button>
</div>
</aside>
</div>
</article>
</section>
<section id="customersView" class="operator-view hidden" data-operator-view="customers">
<section class="page-hero reveal customers-page-hero">
<h1>Список лидов</h1>
@@ -640,6 +756,6 @@
<script src="/operator/assets/access-guards.js?v=track16-voice-transcript1"></script>
<script src="/operator/assets/sip-0.21.2.min.js?v=track16-voice-transcript1"></script>
<script src="/operator/assets/app.js?v=track42-customer-profile-name-meta1"></script>
<script src="/operator/assets/app.js?v=track43-messenger-mvp1"></script>
</body>
</html>