Перейти к содержимому
Антон ГончаровРазработчик ИИ-систем
RUEN

Веб-приложение · диалоги · сделки · аналитика

Панель оператора

Бот закрывает типовые вопросы сам, а жалобы, опт и возвраты передаёт человеку — с причиной и резюме. Панель показывает, как выглядит работа по ту сторону: новые клиенты приходят каждые несколько секунд, на них можно отвечать, а из диалога — создать сделку.

Сценарий: Обжарочная «Зерно» — вымышленная: поддержка в Telegram, Max и на сайте, оптовые продажи кофейням.

Скриншот демо: Панель оператора

Открыть демо

Открыть приложение

Клиенты и сделки вымышленные. Кнопка «Сбросить» начинает смену заново.

Приложение работает в браузере: на сервер ничего не отправляется.

Что показывает демо

  • Живой поток: новый клиент каждые 12–20 секунд, бот решает больше половины обращений сам

  • Очередь с таймером ожидания и причиной передачи: жалоба, опт, возврат, «не уверен»

  • Резюме для оператора и черновик ответа по теме обращения, быстрые ответы

  • Карточка клиента: заказы, сумма покупок, интересы, другие обращения

  • Сделка из диалога одной кнопкой, канбан с перетаскиванием — мышью, пальцем или с клавиатуры

  • Аналитика: доля бота, время первого ответа, оценки, каналы и причины передачи за 30 дней

Как попробовать

  1. Откройте приложение

    Смена уже идёт: в очереди есть диалоги, которые бот передал человеку.

  2. Ответьте клиенту

    «Взять в работу», затем быстрый ответ или «Черновик ответа». Клиент напишет в ответ через несколько секунд.

  3. Создайте сделку

    Кнопка «+ Сделка» в диалоге. На вкладке «Сделки» перетащите карточку по этапам.

  4. Посмотрите аналитику

    Доля обращений, закрытых ботом, растёт за месяц — так выглядит отдача от пополнения базы знаний.

Без платных нейросетей

Резюме диалога и черновик ответа в рабочем проекте пишет языковая модель по истории и базе знаний. В демо они собраны из шаблонов по теме обращения — интерфейс, очередь, сделки и метрики те же.

Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.

Что будет в рабочем проекте

  • Диалоги из Telegram, Max, виджета на сайте и почты в одной очереди
  • Сделки и клиенты в amoCRM или Bitrix24, а не в отдельной базе
  • Распределение по операторам, SLA и уведомления о просроченных ответах
  • Разбор передач: какие вопросы добавить в базу, чтобы бот закрывал их сам

Стек

  • React 19
  • TypeScript
  • dnd-kit
  • Recharts
  • Zustand
  • Vite
  • Tailwind CSS

Комментарий от разработчика

Антон Гончаров

Разработчик ИИ-систем · Python

Для бизнеса

  • Оператор не читает переписку с начала: бот передаёт причину и резюме, а черновик ответа уже готов.
  • Из диалога сразу создаётся сделка — опт и жалобы не теряются в чате.
  • Аналитика показывает, какую долю обращений закрывает бот и что добавить в базу, чтобы она росла.

Для разработчиков

  • Поток клиентов — симуляция на таймерах в браузере, всё состояние в Zustand, поэтому смену можно сбросить одной кнопкой.
  • Канбан на dnd-kit: карточки перетаскиваются мышью, пальцем и с клавиатуры — доступность здесь не опция.
  • Графики на Recharts считаются из тех же событий, что видит оператор, — цифры не расходятся с очередью.

Советы

  • Совет 01

    Передача оператору без причины и резюме — полдела: человек всё равно начнёт с «чем могу помочь?».

  • Совет 02

    Стройте метрики из событий, а не из отдельных счётчиков — так они не разойдутся с реальностью.

Нужен такой же для вашего бизнеса?

Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.

Написать в TelegramОставить заявку

Другие демо в этом разделе

Все демо

  • Веб-приложение · OCR · проверка реквизитов

    работает

    Распознавание документов

    Загрузите счёт или акт — фото, скан или PDF. Приложение распознаёт текст, вытаскивает реквизиты и строки таблицы и проверяет их: контрольные суммы ИНН и счетов, итог и НДС.

    • React
    • TypeScript
    • Нейросеть в браузере

  • Веб-приложение · Recharts · RBAC · аудит

    работает

    SaaS-дашборд

    Кабинет команды выручки SaaS: MRR по тарифам, движение выручки, отток, здоровье клиентов, выгрузка CSV для Excel и журнал действий. Все цифры считаются из одной истории за год — смена тарифа в карточке клиента сразу двигает MRR на графиках.

    • React
    • TypeScript

  • Веб-приложение · Laravel · PostgreSQL

    работает

    Складской контур на Laravel

    Учёт склада, где остаток — сумма проводок, а не «поле qty--»: заказы с резервом «всё или ничего», сборка по ячейкам, приёмка с импортом CSV, инвентаризация и журнал. Гонка двух настоящих процессов PHP в PostgreSQL показывает, зачем нужна блокировка строки.

    • PHP

  • Веб-приложение · метрики · оповещения

    работает

    Мониторинг бота

    Как следят за ботом, когда он уже работает с клиентами: сколько запросов, как быстро он отвечает, как часто ошибается или не знает ответа. Журнал запросов с трассой каждого ответа и правила, которые пишут дежурному в Telegram, если что-то пошло не так.

    • React
    • TypeScript

  • Парсер на Python · работает в браузере

    работает

    Мониторинг цен конкурентов

    Парсер на Python каждый день обходит сайты трёх конкурентов магазина электроники: HTML-каталог с пагинацией, sitemap с JSON-LD и SPA с API. Сопоставляет товары с каталогом, присылает уведомления об изменениях, рекомендует цену по правилам и выгружает отчёт в Excel. Python работает прямо в браузере.

    • Python
    • React
    • TypeScript

  • Веб-приложение · PWA · нативный JS

    работает

    Офлайн-приложение курьера

    Рабочий день курьера: заказы, звонок клиенту, вручение с фото и подписью. Приложение открывается и работает без сети, а изменения уходят в диспетчерскую, когда связь вернётся. Если диспетчер за это время изменил тот же заказ — курьер выбирает, чья версия верная.

    • Нативный JS