TQM Speech Analytics

Copilot для оператора

Установка

# Через NPM
$ npm install --save @tinkoff/speech-analytics
 
# Через Yarn
$ yarn add @tinkoff/speech-analytics

Подключение

import '@tinkoff/speech-analytics/dist/style.css';
import sa from '@tinkoff/speech-analytics';

// Или динамически (рекомендуется)
await import('@tinkoff/speech-analytics/dist/style.css');
const sa = await import('@tinkoff/speech-analytics');

Инициализация

sa.init({
  /** Элемент, куда рендерить кнопу виджета. string | Element */
  element: '#tqm-copilot', // Можно передать селектор или напрямую указать DOM-элемент
  /** Тема виджета. Если не передать, будет использована тема устройства. 'light' | 'dark' | undefined */
  theme: 'dark',
  /** Минимальный порог то 0 до 1, при каком `score` считать фразу негативной. number | undefined */
  threshold: 0.6,
  operator: {
    /** Идентификатор оператора. string | number */
    id: 4234,
  },
  /** Интеграционный ключ */
  apiKey: 'xxxxxx',
});

Проверка сообщений на негатив

sa.scoreClientMessage({
  /** Идентификатор коммуникации. string | number */
  communicationId: 123,
  /** Сообщение от клиента. string */
  text: 'у меня в приложении одна карта ,в приложении другая а приходит все вообще на третью',
  /** Идентификатор сообщения. string | number */
  messageId: 456;
  client: {
    /** Идентификатор клиента. string | number */
    id: 789,
    /** Имя клиента. string */
    name: 'Иванова Ефросинья Федоровна',
  },
});

Обновление состояния виджета

sa.update({
  theme: 'light',
  threshold: 0.7,
});

Управление

// Переключить видимость: скрыт/раскрыт
sa.toggleVisibility();

// Можно передать boolean, чтобы установить конкретное состояние:
const handleClose = () => {
  sa.toggleVisibility(false); // Повторный вызов не раскроет виджет
};

Подписка на события

sa.on('eventName', eventHandler);

Доступные события

/** Переход к чату */
sa.on(sa.Events.OPEN_COMMUNICATION, ({ communicationId }) => {
  navigateToChat(communicationId);
});

/** Срабатывание виджета */
sa.on(sa.Events.NEGATIVE_HAPPENED, ({ communicationId }) => {
  showNotification(communicationId);
});

Стилизация

Стили задаются через CSS custom properties. На данный момент доступны следующие переменные:

:root {
  --tqm-copilot-fab-size: 56px; /* Размер кнопки виджета */
  --tqm-copilot-fab-shadow: 0 5px 20px 0 rgb(0 0 0 / 12%); /* Тень, отбрасываемая кнопкой */
  --tqm-copilot-fab-shadow-hover: 0 12px 36px 0 rgb(0 0 0 / 20%); /* Тень кнопки при наведении */
}