Breaking Language Barriers: the “AI Translate” Widget for React Chat Apps

We are excited to share with React developers the latest widget - AI Translate - included in the React UI Kit by QuickBlox. Previously we released AI Answer Assist to provide contextually relevant answers in real-time for chat app users. Now we offer an opportunity to elevate your Web app even further. With AI Translate you can effortlessly translate messages during your real-time chat, opening up entirely new horizons of efficiency and satisfaction in the process of communication. This feature, developed based on the very latest advancements in artificial intelligence, elevates your chats to a higher level.

Initially, it will be accessible as part of the QuickBlox React UI Kit, with plans to eventually roll it out as an autonomous, fully-fledged component, as part of the React hook library.

Resources:

QuickBlox React UI Kit

QuickBlox React UI Kit Documentation

QuickBlox AI Documentation

Learn more about, AI Chat Widgets: the easy way to add AI to your web chat app

Why your App needs AI Translate

The AI Translate widget gives you the ability to instantly translate messages within the chat, breaking down language barriers and enhancing understanding among participants.

The capability for cross-language communication makes this functionality indispensable for multilingual or global team interactions. Moreover, it brings a considerable advantage to customer service by providing an easy and accurate translation of inquiries and feedback.

AI Translate boasts a wide application. In the medical field, it facilitates smoother interactions between medical professionals and patients, where translation accuracy plays a crucial role. In the business sector, it simplifies communication with international clients and partners, contributing to market expansion.

Harnessing the Power of OpenAI GPT

To enable the translation of text messages in chats in real-time, we utilize the cutting-edge artificial intelligence model - GPT-3, developed by OpenAI. This powerful model enables precise and rapid translation of texts across different languages while preserving the meaning and context of communication.

Thanks to the utilization of GPT-3 in the AI Translate widget, you gain quick and accurate translation of text messages directly within the chat.

How does AI Translate work?

The AI Translate widget is designed for the swift translation of messages within the chat. This translation takes into account the context present in the chat history.

When the user clicks on this widget next to a message, it sends the current message to OpenAI to translate the text. Subsequently, the response from OpenAI appears in the message block, providing a clear interaction in different languages.

Let's delve into how the AI Translate widget operates.

Imagine you receive a message from Fred in Spanish, yet you only comprehend English. You employ the AI Translate widget to translate Fred's message and grasp its content. To achieve this, simply click on "Show Translation" beneath Fred's message.

Let's delve into how the AI Translate widget operates.

Imagine you receive a message from someone in Spanish, yet you only comprehend English. You employ the AI Translate widget to translate their message and grasp its content. To achieve this, simply click on "Show Translation" beneath their message.

Upon clicking "Show Translation", you will receive the translation of their message in English.

Should a chat user wish to view the original message, they need to click on "Show original".

Text translation occurs according to the default language for translation. The default language can be modified. Subsequent sections of this article will elaborate on how to perform widget configuration.

The AI Translate widget facilitates translation into multiple languages. To translate into other languages, click on the chatbot icon next to the "Show Translate" phrase. This action will trigger a contextual menu where you can choose the translation language. Furthermore, widget configuration allows the selection of primary languages for translation.

The AI Translate widget is tailored to swiftly translate messages within the chat.

The demonstration of the widget's operation is presented below. Utilizing this functionality is extremely straightforward and intuitive.

Easy inclusion of new functionality

Guided by the principles of simplicity and developer-friendliness, we've crafted a series of straightforward steps to seamlessly integrate this OpenAI-based widget into the React UI Kit.

Starting from version 0.2.1 of the Web UI Kit, AI functionalities are pre-enabled and are built upon OpenAI's GPT chat. Thus, you only need to provide your API key.

To integrate the widget into your application, follow these few simple steps:

1. Configure "configAIApi"

Enabling or disabling the AITranslate widget icon and its functionalities involves configuring the "configAIApi" section in the QBconfig.ts configuration file using the relevant API key and parameters. Below is the code:

configAIApi: {
  AITranslateWidgetConfig: {
    apiKey: 'sk…qhU', // Replace with your real API key
    useDefault: true,
    defaultLanguage: 'English',
    languages: [
        'English',
        'Spanish',
        'French',
        'Portuguese',
        'German',
        'Ukrainian',
    ],
  },
}

In the "defaultLanguage" section, you need to choose the main translation language. If you don't specify it, the system will automatically select the language. To choose other translation languages, add them to the "languages" section.

Note. You do not need to store the API key in our UI toolkit. You can configure a proxy server (we plan to release a new example to illustrate proxy usage) or utilize external functions from Azure or AWS.

Whether you opt for a proxy server or external cloud functions, the configuration section should appear as follows.

configAIApi: {
  AITranslateWidgetConfig: {
    apiKey: '',
    useDefault: true,
    proxyConfig: {
      api: 'v1/chat/completions',
      servername: 'https://myproxy.com',
      port: '4032',
      sessionToken: '',
    },
  },
}

Step 2. (optional) Enable or Disable AI Translate using the following code:

<QuickBloxUIKitDesktopLayout
  theme={new CustomTheme()}
  AITranslate={{ enabled: true, default: true }}
/>

The QuickBloxUIKitDesktopLayout is a layout component that resides in the provider section. We covered this in our UI Kit documentation, “Send your First Message."

In Web UI Kit, the AITranslate component is enabled by default, but if you need to customize the appearance or add your own logic, you need to follow these steps:

1. Create a custom React hook that returns an object implementing the MessageWidget interface.

2. Implement a custom method for rendering the widget.

3. Assign this widget instead of the default one.

Here is an example of a code snippet illustrating these steps:

const openAIConfig = {
 ...QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig,
 sessionToken: token,
};
// …
<QuickBloxUIKitDesktopLayout
  theme={new CustomTheme()}
  AITranslate={{
    enabled: true,
    default: false,
    AIWidget: DefaulAITranslateWidget( openAIConfig )
  }}
/>

If the user wants to customize the widget button's appearance, they can create their own widget by overriding the rendering method. The code below shows the default realization:

export default function DefaultAITranslateWidget(apiKey: string): MessageWidget {
  const renderWidget = (): JSX.Element => {
   // return owner markup;
  };
  // ...
}

Concluding Thoughts

The AI Translate widget offered by QuickBlox opens a realm of possibilities for web developers aiming to enhance their chat applications with cutting-edge AI capabilities. Whether you're building a healthcare platform, human resource management software, e-commerce chat, or customer support tool, our AI Translate feature assists you in crafting an intelligent, responsive, and user-friendly interface.

Please be aware that the AI Widget will soon be available as a standalone feature, separate from the QuickBlox UI Kit. Meanwhile, in line with our commitment to provide a wealth of development tools, you can also leverage the open-source code of these widgets from the QuickBlox UI toolkit once they become available.

For more details or to share your ideas, join our Discord channel.