Описание

В данной статье рассмотрены необходимые методы и инструменты для интеграции с панелью оператора.

Это может быть необходимо для подключения функционала панели оператора в свой интерфейс (например, окно оператора в едином окне CRM)

Интеграция

Основные шаги интеграции

Чтобы использовать панель оператора, нужно 
1. Авторизоваться используя эндпоинт /auth/login. Детали в доке https://iam.dev.twin24.ai/docs/index.html
2. Подключиться к прослушиванию событий из центрифуги - передавая токен авторизации
3. Передавать во всех запросах токен авторизации полученный при атворизации

Основные методы

Часто используемые эндпоинты оператора:
/users/me - получить ифнормацию о текущем оператора
/timestamp - получить время сервера(полезно для таймеров, отсчетов, и понимания разницы)
/users/me/activate - сменить статус текущего оператора - на возможность приема входящих сессий
/users/me/pause - поставить оператора на паузу(прекратить получать входящие сессии)
/sessions/${sessionId}/operators/${userId} - перевести сессию на конкретного пользователя
/sessions/${sessionId}/names/${name} - переименовать сессию
/sessions - получить список сессий(всех сессий, даже завершенных)
/sessions/${id}/messages - получить список сообщений по id сессии
/clients/${id}/messages - получить список сообщений по id клиенту
/sessions/${sessionId}/operators/messages - отправить сообщение в сессию
/sessions/${sessionId}/operators/messages/${messageId} - put:редактировать сообщение
/sessions/${sessionId}/operators/messages/${messageId} - delete:удалить сообщение
/sessions/${sessionId}/operators/${userId} - перевести сессию на другого оператора
/sessions/${sessionId}/groupoperators/${userId} - перевести сессию на группу операторов
/users - получить список операторов
/groups - получить список групп операторов
/sessions/${sessionId} - delete: завершить сессию
/clients/${clientId}/ban - заблокировать клиента
/clients/${clientId}/unban - разблокировать клиента

Полная дока по всем доступным эндпоинтам здесь https://chats-api.dev.twin24.ai/docs/

Live события

Для работы, используем centrifuge

Создаем экземпляр класса Centrifuge, передаем ему URL сервера и создаем подключение:
const centrifuge = new Centrifuge(
  `${protocol}://${window.location.host}/centrifugo/connection/websocket`,
  {
    data: {
      application: 'notifications',
      settings: { token: 'your_auth_token_here' },
    },
  },
)

Обрабатываем connection, и publication события, в самом publication получаем и реагируем на события
centrifuge.on('connected', () => {
  // some logic when connected
})
centrifuge.on('publication', (publication) => {
  const payload = publication.data

  switch (payload.event) {
    case 'chatMessageRead':
      // handle chatMessageRead event
      break
    default:
      console.warn('Unknown event type:', payload.event)
  }
})

Список событий, которые приходят в центрифугу оператору:
chatSessionStarted - Оператору пришла новая сессия чата(при этом не факт что оператору, может быть просто в помощь)
operatorNotFound - Сессия не нашла оператора и упала в помощь
chatSessionAdded - Сессия пришла оператору
chatMessageCreated - Оператору пришло новое сообщение в чате
chatMessageEdited - Кто-то из операторов изменил сообщение в чате
chatMessageRead - Оператору пришло сообщение о том, что клиент прочитал сообщение в чате
chatSessionDeleted - Есть кейсы, когда сессия после отправки определенного сообщения уходит на бота - и тогда пропадает у оператора
chatSessionSwitchedFromBotToOperator - Сессия была переключена с бота на оператора
sessionClosedByClient - Клиент закрыл сессию
operatorBlocked - Оператора забанили на платформе - требуеться выкинуть оператора из кабинета
chatUserExists - Кто-то зашел в текущего оператора. текущий сеанс оператора нужно закрыть
typing - пользователь печатает сообщение в чате
operatorLoggedOut - сделать оператора оффлайн
clientOnline - клиент стал онлайн
clientOffline - клиент стал оффлайн

События, что отправляет оператор в центрифугу:
typing - отправляет оператор, когда печатает сообщение в чате

Типы возвращаемых данных в событиях:
chatSessionStarted: {
  event: 'chatSessionStarted',
  data: {
    id: string;
    chatId: string;
    clientId: string | null;
    name: string;
    markedAsSpam: boolean;
    operatorId: string | number | null;
    operatorType?: string;
    channel: string;
    botStatus?: string | null;
    status: string;
    startedAt: string;
    clientOnlineAt?: string | null;
    clientOfflineAt?: string | null;
    lastMessageCreatedAt: string | null;
    lastMessage?: Unknown | null;
    clientExternalId?: string | null;
    clientBanned?: boolean | null;
    referer?: string;
    clientIp?: string | null;
    coordinates?: {
      city?: string | null;
      latitude?: number | null;
      zip_code?: string | null;
      longitude?: number | null;
      time_zone?: string | null;
      region_name?: string | null;
      country_code?: string | null;
      country_name?: string | null;
    } | null;
    unreadClientMessageCount?: number | null;
    unreadClientMessageExists?: boolean | null;
    messengerType?: string | null;
    whatsappPhone?: string | null;
    timerFirstAnswer?: number;
    timerNextAnswers?: number;
    lastOperatorMessage?: Unknown | null;
    firstClientMessageAfterLastOperatorMessage?: Unknown | null;
    operatorAssignedAt: string | null;
    previousOperator?: {
      id?: string | null;
      name?: string | null;
    } | null;
  }
}

operatorNotFound: {
  action: 'operatorNotFound';
  data: {
    botStatus: string; // например, 'HELP'
    chatId: string;
    operatorType: string;
    sessionId: string;
    status: string;
  };
}

chatSessionAdded: {
  action: 'chatSessionAdded';
  data: {
    id: string;
    chatId: string;
    clientId: string | null;
    name: string;
    markedAsSpam: boolean;
    operatorId: string | number | null;
    operatorType?: string;
    channel: string;
    botStatus?: string | null;
    status: string;
    startedAt: string;
    clientOnlineAt?: string | null;
    clientOfflineAt?: string | null;
    lastMessageCreatedAt: string | null;
    lastMessage?: Unknown | null;
    clientExternalId?: string | null;
    clientBanned?: boolean | null;
    referer?: string;
    clientIp?: string | null;
    coordinates?: {
      city?: string | null;
      latitude?: number | null;
      zip_code?: string | null;
      longitude?: number | null;
      time_zone?: string | null;
      region_name?: string | null;
      country_code?: string | null;
      country_name?: string | null;
    } | null;
    unreadClientMessageCount?: number | null;
    unreadClientMessageExists?: boolean | null;
    messengerType?: string | null;
    whatsappPhone?: string | null;
    timerFirstAnswer?: number;
    timerNextAnswers?: number;
    lastOperatorMessage?: Unknown | null;
    firstClientMessageAfterLastOperatorMessage?: Unknown | null;
    operatorAssignedAt: string | null;
    previousOperator?: {
      id?: string | null;
      name?: string | null;
    } | null;
  };
}

chatMessageCreated: {
  action: 'chatMessageCreated';
  data: {
    id: string;
    sessionId: string;
    clientId: string | null;
    authorId: string;
    authorType: string;
    authorName: string | null;
    type: 'REGULAR' | 'TERMINAL';
    body: string;
    attachments: unknown[];
    createdAt: string;
    updatedAt?: string | null;
    readAt?: string | null;
    deletedAt?: string | null;
    actions?: unknown[];
    replyTo?: {
      id: string;
      authorType: string;
      body: string;
      attachments: unknown[];
      authorName: string | null;
    } | null;
    history?: {
      editedAt?: string | null;
    }[];
  }
  replyToMessage?: {
    id: string;
    authorType: string;
    body: string;
    attachments: unknown[];
    authorName: string | null;
  } | null;
}

chatMessageEdited: {
  action: 'chatMessageEdited';
  data: {
    body: string;
    messageId: string;
    attachments: unknown[];
  };
}

chatMessageRead: {
  action: 'chatMessageRead';
  data: {
    messageId: string;
  };
}

chatSessionDeleted: {
  action: 'chatSessionDeleted';
  data: {
    sessionId: string;
  };
};

chatSessionSwitchedFromBotToOperator: {
  action: 'chatSessionSwitchedFromBotToOperator';
  data: {
    operatorId: string;
    operatorName: string;
    sessionId: string;
  };
};

sessionClosedByClient: {
  action: 'sessionClosedByClient';
  data: {
    chatId: string;
    sessionId: string;
  };
}

operatorBlocked: {
  action: 'operatorBlocked',
  data: Unknown,
}

chatUserExists: {
  action: 'chatUserExists';
  data: Unknown;
}

typing: {
  action: 'typing',
  data: Unknown,
}

operatorLoggedOut: {
  action: 'operatorLoggedOut,
  data: Unknown,
}

clientOnline: {
  action: 'clientOnline',
  data: {
    id: string;
  }
}

clientOffline: {
  action: 'clientOffline',
  data: {
    id: string;
  }
}