Розробка інтерфейсу чат-бота на 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 тижнів.