Bitrix24 integration with Avivi's OpenAI: message translation, text-to-audio conversion and vice versa

About the author: Oleksii Vashchuk, Avivi's full stack developer, has been working on complex integrations and improving Bitrix24's on-premise functionality for many years. He likes new and difficult challenges, so the integration with the most hyped Artificial Intelligence today was entrusted to him.

How many times a day do you chat with ChatGPT? In October 2024, this is a common question, even though a year ago the technology was just making its way to the wider market. Today, there are many ideas on how to use the capabilities of the platform to solve specific business tasks, so the possibilities of developers are limited mainly by the imagination of customers. However, there are quite practical and understandable ideas that increase the effectiveness of any business related to communication with other people. After all, the creation of OpenAI, the first, is focused on working with text and demonstrates really excellent results here.

Prerequisites of the task

One of Avivi's regular customers wanted to use OpenAI's artificial intelligence capabilities to work with messages from their own customers. The company works with the whole world, so it has to deal with many languages, in addition to international English. It's no secret that addressing a person in their native language is not only a good tone, but also positively affects the conversion of leads and the image of the company itself. Fortunately, learning languages is now not necessary, because the OpenAI API provides a wide range of possibilities for working with text and language data.

In addition, the AI has already learned to "speak" perfectly and without any problems voices the received text or converts the "heard" words into letters. So the customer decided to generalize the capabilities and, with the help of integration, provide the ability to translate text messages in Bitrix24 Chats and convert text to audio and vice versa. With the help of the API, such a task can be implemented quite easily.

Preparation for integration

The integration was carried out for the on-premise edition of Bitrix24, which allows developers to make almost any additions and improvements to the functionality. But in each integration there are at least two platforms. And if we had everything we needed from the Bitrix24 side, some mandatory steps had to be taken from the AI side. To start the integration, it was necessary:

1. Set up an OpenAI account — before starting work, you need to make sure that the account balance is replenished, since the processing of API requests is paid based on the use of resources;

2. Get an API key — every OpenAI project requires an API key that provides access to the service;

3. Define Functionality — Since the OpenAI API can handle different types of data, it was important to define which functions would be involved: text translation, text-to-audio conversion, or speech-to-text conversion.

Implementation of functionality

As part of the integration, we added new capabilities to the existing chat system that was already being used by the client. The technical implementation of this solution in chat is difficult, but quite possible. Chats are built on Vue with their own architecture, separated from the rest of Bitrix24 functionality. The main part of the work consisted of mutations and customization of the Vue component.

1.

2.

3.

4.

import { BitrixVue } from "ui.vue3";
import { BaseEvent, EventEmitter } from 'main.core.events';
import { EventType, ChatActionType } from 'im.v2.const';
import { Utils } from 'im.v2.lib.utils';
import { PermissionManager } from 'im.v2.lib.permission';
import { MessageService } from 'im.v2.provider.service';
import { AvatarMenuCustom } from './classes/avatar-menu';
import { MessageMenuCustom } from './classes/message-menu';
import { ObserverManagerCustom } from './classes/observer-manager';
import { CollectionManagerCustom } from './classes/collection-manager/collection-manager';
import './css/message-list.css';

export { AvatarMenuCustom } from './classes/avatar-menu';
export { MessageMenuCustom } from './classes/message-menu';
export { CollectionManagerCustom } from './classes/collection-manager/collection-manager';

BitrixVue.mutateComponent('im-v2-component-MessageList', {
props: {
dialogId: {
type: String,
required: true,
},
messageMenuClass: {
type: Function,
default: MessageMenuCustom,
}
},
data(): JsonObject
{
return {
windowFocused: false,
messageMenuIsActiveForId: 0,
translatedMessages: []
};
},

Using the Bitrix24 Rest API

In addition, we developed custom methods for the Bitrix24 Rest API that provide direct access to OpenAI services from Vue components. This made it possible to work with the API asynchronously and process the results without significant delays.

<?php
use \Bitrix\Highloadblock\HighloadBlockTable;
use \Bitrix\Main\Loader;

use \Bitrix\ImOpenLines\Model\ConfigTable;
use \Bitrix\Main\ORM\Entity;
use \Bitrix\Im\Model\ChatTable;
use Bitrix\Im as IM;
use Bitrix\Im\V2\Chat;
use Bitrix\Main\Config\Option;

if (!Loader::includeModule('rest')) {
    return;
}

define('API_KEY', Option::get(AI_MODULE_ID, 'openai_api_key'));
define('TRANSCRIPTION_LANG', Option::get(AI_MODULE_ID, 'openai_transcription_voice'));
class ImChatMessagesAiManagerRest extends \IRestService
{
    private const API_KEY = API_KEY;
    private const TRANSCRIPTION_LANG = TRANSCRIPTION_LANG;

    public static function AddJsExtension()
    {
        \Bitrix\Main\UI\Extension::load('im.v2_message_list_custom');
        \Bitrix\Main\UI\Extension::load('im.v2_audio_item_custom');
    }

    public static function OnRestServiceBuildDescription(): array
    {
        return array(
            'im.v2.message' => array(
                'im.v2.message.getLanguages' => array(
                    'callback' => array(__CLASS__, 'getLanguages'),
                    'options' => array(),
                ),
                'im.v2.message.textTranslate' => array(
                    'callback' => array(__CLASS__, 'textTranslate'),
                    'options' => array(),
                ),
                'im.v2.message.textToAudio' => array(
                    'callback' => array(__CLASS__, 'textToAudio'),
                    'options' => array(),
                ),
                'im.v2.message.deleteAudio' => array(
                    'callback' => array(__CLASS__, 'deleteAudio'),
                    'options' => array(),
                ),
                'im.v2.message.audioToText' => array(
                    'callback' => array(__CLASS__, 'audioToText'),
                    'options' => array(),
                ),
            )
        );
    }
}

Data processing process

1. The user enters or sends a message in the form of text or audio;

2. Functionality based on Vue components transfers data to the Bitrix24 Rest API through an asynchronous request;

3. The request is handled in a custom API method calling OpenAI. For example, to translate text, the OpenAI language model is called, which analyzes and translates the message;

4. The result is returned to a Vue component that displays it in the chat.

Further development of integration

Integrating artificial intelligence is just the beginning. After the successful implementation of these functions, numerous opportunities for further development appear. For example:

• Improvements to the auto-answer system — using AI to recognize intent and answer users' most common questions;

• Sentiment analysis of messages — the ability to assess the tone of messages and automatically determine when managers need to intervene;

• Machine learning — the ability to train models based on specific company data for better adaptation of solutions to the specifics of the business.

Artificial intelligence continues to change the way we work with data. Proper implementation of such tools not only automates routine tasks, but also allows the team to focus on more important strategic tasks, increasing overall productivity and quality of work. So don't waste precious time and contact Avivi if you also want to use the capabilities of powerful Artificial Intelligence from OpenAI in the work of your Bitrix24.