Разработка интерфейса чат-бота на Vue.js для Битрикс24

Разработка интерфейса чат-бота на Vue.js для Битрикс24

Чат-боты в Битрикс24 работают через два канала: открытые линии (внешние мессенджеры) и внутренний чат (im). Серверная часть бота — это обработчик событий, который принимает сообщения через event.message.add webhook и отвечает через imbot.message.add. Стандартный интерфейс настройки бота — это административная страница с полями ввода. Когда нужен полноценный UI управления ботом: настройка сценариев, визуальный конструктор ответов, аналитика диалогов — разрабатывается Vue-приложение, встроенное в Битрикс24 через placement или как отдельная административная панель.

Архитектура системы бота с Vue-интерфейсом

┌─────────────────────────────────────────┐
│         Битрикс24 Портал                │
│  ┌─────────────┐   ┌─────────────────┐  │
│  │  Открытая   │   │  Vue Admin App  │  │
│  │   линия     │   │  (placement)    │  │
│  └──────┬──────┘   └────────┬────────┘  │
│         │                   │           │
└─────────┼───────────────────┼───────────┘
          │ webhooks          │ REST API
┌─────────▼───────────────────▼───────────┐
│           Bot Backend (Laravel/Node)    │
│  ┌─────────────┐   ┌─────────────────┐  │
│  │  Bot Logic  │   │   Admin API     │  │
│  │  (сценарии) │   │  (настройки)    │  │
│  └─────────────┘   └─────────────────┘  │
└─────────────────────────────────────────┘

Регистрация бота и подписка на события

// Регистрация бота через REST
BX24::callMethod('imbot.register', [
    'TYPE' => 'B', // Bot type
    'EVENT_MESSAGE_ADD' => 'https://my-app.com/webhook/message',
    'EVENT_WELCOME_MESSAGE' => 'https://my-app.com/webhook/welcome',
    'EVENT_BOT_DELETE' => 'https://my-app.com/webhook/delete',
    'PROPERTIES' => [
        'NAME' => 'Мой ассистент',
        'LAST_NAME' => '',
        'COLOR' => 'GREEN',
        'PERSONAL_PHOTO' => 'base64...',
    ]
]);

Vue-компонент конструктора сценариев

Визуальный редактор диалоговых деревьев — ключевая часть административного интерфейса:

<!-- ScenarioBuilder.vue -->
<template>
  <div class="scenario-builder">
    <div class="scenarios-list">
      <ScenarioCard
        v-for="scenario in scenarios"
        :key="scenario.id"
        :scenario="scenario"
        :active="activeScenario?.id === scenario.id"
        @select="selectScenario"
        @delete="deleteScenario"
      />
      <button class="add-scenario" @click="addScenario">
        + Добавить сценарий
      </button>
    </div>

    <div class="scenario-editor" v-if="activeScenario">
      <StepEditor
        v-for="step in activeScenario.steps"
        :key="step.id"
        :step="step"
        @update="updateStep"
        @add-next="addNextStep"
        @delete="deleteStep"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useScenarioStore } from '@/stores/scenarios'

const store = useScenarioStore()
const scenarios = computed(() => store.scenarios)
const activeScenario = ref(null)

onMounted(() => store.loadScenarios())

function selectScenario(scenario) {
  activeScenario.value = scenario
}

async function addScenario() {
  const newScenario = await store.createScenario({
    name: 'Новый сценарий',
    trigger: 'keyword',
    steps: [{ type: 'message', text: 'Привет! Чем могу помочь?' }]
  })
  activeScenario.value = newScenario
}
</script>

Компонент шага диалога

<!-- StepEditor.vue -->
<template>
  <div class="step-editor" :class="`step-type-${step.type}`">
    <div class="step-header">
      <select v-model="step.type" @change="onTypeChange">
        <option value="message">Сообщение</option>
        <option value="question">Вопрос с кнопками</option>
        <option value="condition">Условие</option>
        <option value="api_call">Запрос к API</option>
        <option value="crm_create">Создать в CRM</option>
      </select>
    </div>

    <div class="step-body">
      <MessageStep v-if="step.type === 'message'" v-model="step" />
      <QuestionStep v-if="step.type === 'question'" v-model="step" />
      <ConditionStep v-if="step.type === 'condition'" v-model="step" />
      <ApiCallStep v-if="step.type === 'api_call'" v-model="step" />
      <CrmCreateStep v-if="step.type === 'crm_create'" v-model="step" />
    </div>
  </div>
</template>

Отправка сообщений с кнопками

Интерактивные кнопки в сообщениях бота через KEYBOARD:

// bot-logic.js
async function sendMessageWithButtons(chatId, text, buttons) {
  await bx24.callMethod('imbot.message.add', {
    DIALOG_ID: chatId,
    MESSAGE: text,
    KEYBOARD: buttons.map((row, rowIndex) =>
      row.map(btn => ({
        TEXT: btn.label,
        ACTION: 'CALL',
        LINK: `https://my-app.com/bot/action/${btn.action}`,
        // или ACTION: 'SEND' для отправки текста в чат
        BG_COLOR: btn.color || '#29619b',
        TEXT_COLOR: '#ffffff',
        DISPLAY: 'LINE',
      }))
    )
  })
}

// Использование
await sendMessageWithButtons(dialogId, 'Выберите действие:', [
  [
    { label: 'Создать заявку', action: 'create_lead', color: '#29619b' },
    { label: 'Проверить статус', action: 'check_status', color: '#5a9b29' },
  ],
  [
    { label: 'Связаться с менеджером', action: 'connect_manager', color: '#9b2929' },
  ]
])

Аналитика диалогов

Vue-компоненты для мониторинга бота:

<!-- BotAnalytics.vue -->
<template>
  <div class="bot-analytics">
    <div class="metrics-grid">
      <MetricCard title="Диалогов сегодня" :value="metrics.dialogs_today" />
      <MetricCard title="Успешных завершений" :value="metrics.completed" />
      <MetricCard title="Передано менеджеру" :value="metrics.escalated" />
      <MetricCard title="Среднее время ответа" :value="metrics.avg_response_time + 'с'" />
    </div>

    <div class="charts-row">
      <DialogsChart :data="metrics.dialogs_by_day" />
      <ScenariosChart :data="metrics.scenarios_usage" />
    </div>

    <div class="recent-dialogs">
      <h3>Последние диалоги</h3>
      <DialogTable :dialogs="recentDialogs" @view="openDialog" />
    </div>
  </div>
</template>

Живой просмотр диалогов

Для мониторинга в реальном времени — WebSocket или polling через Server-Sent Events:

// composables/useLiveDialogs.js
export function useLiveDialogs() {
  const dialogs = ref([])
  let eventSource = null

  function connect() {
    eventSource = new EventSource('/api/bot/dialogs/stream')
    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data)
      updateDialog(data)
    }
  }

  function updateDialog(update) {
    const idx = dialogs.value.findIndex(d => d.id === update.dialogId)
    if (idx >= 0) {
      dialogs.value[idx] = { ...dialogs.value[idx], ...update }
    } else {
      dialogs.value.unshift(update)
    }
  }

  onMounted(connect)
  onUnmounted(() => eventSource?.close())

  return { dialogs }
}

Сроки выполнения

Административный интерфейс бота с конструктором сценариев и базовой аналитикой — 6–10 рабочих дней. Полноценная платформа с визуальным редактором дерева диалогов, живым мониторингом и интеграцией с CRM — 3–6 недель.