AI Features base on OpenAI GPT and QuickBlox SmartChat Assistant
Name | Description |
---|---|
AI Answer Assist | Provides answers based on chat history to selected message. |
AI Translate | Provides translation based on chat history to selected incoming message. |
AI Rephrase | Provides rephrase in selected tone based on chat history to inputed message before sending. |
AIAnswerAssistWidgetConfig
in the configAIApi
segment of the QBConfig.ts
file to provide your Smart ChatAssist ID from your QuickBlox admin panel.
Review your SmartChat Assistant
To get ID of SmartChat Assistant to use it as smartChatAssistantId
param follow the steps below:
AIAnswerAssistWidgetConfig
in the configAIApi
segment of the QBConfig.ts
file to provide your API Key.AIAssist
property within the QuickBloxUIKitDesktopLayout
(or MessageView
) component for customizing the appearance or logic of the AI Assist component.AIAssist
component use a raw Open AI token. This is suitable for development or demos, but it’s not the recommended approach for production due to security considerations.AIAssist
component use QuickBlox user session token with a proxy server. This is the recommended method for production environments, ensuring a more secure and controlled setup.apiKey
property in the configAIApi
section in the QBConfig.ts
file. This contains information about configurations for all AI features . After that theAIAssist
component will communicate directly with the OpenAI API.
Parameter name | Type | Description |
---|---|---|
apiKey | String | This field should hold your actual API key that you’ll receive from the service provider (in this case, OpenAI). This key is used to authenticate your requests to the AI service. |
useDefault | Boolean | This setting seems to indicate whether you want to use default settings for the AI answer assistance widget. If set to true, it implies that the default settings will be applied. |
api
, servername
, port
, and sessionToken
need to be configured within the proxyConfig section for communication with the proxy server.
Parameter name | Type | Description |
---|---|---|
api | String | The specific API endpoint for AI completions. In default, it’s set to v1/chat/completions. You should provide your url. |
serverName | String | The base URL for API requests. In default, it’s set to ‘https://api.openai.com/’. You should provide your url. |
sessionToken | String | Your should provide the QuickBlox user session token by default if you are using our proxy server. |
port | String | Default should be empty. |
QuickBloxUIKitDesktopLayout
is a layout component located within the provider section. We explored an example of its usage in our UIKit documentation, specifically in the Send your First Message section.
To customize the appearance of the component icon, you should create your own React custom hook that must return an object of the AIMessageWidget interface and update the code within the renderWidget method.
For modifying its operational logic, you should create your own React custom hook that must return an object of the AIMessageWidget interface and update the code within the textToWidget method. The interface AIMessageWidget
has next structure:
Parameter name | Type | Description |
---|---|---|
renderWidget | Object function | The renderWidget provides the default appearance of the widget. This is a method that returns a JSX element (React component). It’s responsible for rendering the widget, and depending on the presence of errors, it might display an error icon or a support icon. You should change it to implement your own icon. |
textToWidget | Object function | The textToWidget provides the default logic of the widget. This is a function that takes a string (text) and context (in this case, an array of chat messages) but doesn’t return anything (void). This function is used to pass text into the widget. You should change it to implement your logic. |
textToContent | String | The textToContentprovides the output of the default algorithm implementation. This is a string field representing content for the text widget. It’s likely to be used to display the response obtained from AI in the text widget. |
AIAssist
inQuickBloxUIKitDesktopLayout
or in MessageView
components like this:
Let’s modify the QuickBloxUIKitDesktopLayout component from “Send your first message” page :
ChatMessage
objects representing the chat history:rephrase
method to generate translate using an API key:AITranslateWidgetConfig
in the configAIApi
segment of the QBConfig.ts
file to provide your Smart ChatAssist ID from your admin panel.
Review your SmartChat Assistant
To get ID of SmartChat Assistant to use it as smartChatAssistantId
param, follow the steps below:
AITranslateWidgetConfig
in the configAIApi
segment of the QBConfig.ts
file to provide your API Key.AITranslate
property within the QuickBloxUIKitDesktopLayout
(or MessageView
) component for customizing the appearance or logic of the AI Translate component.AITranslate
component use a raw Open AI token. This is suitable for development or demos, but it’s not the recommended approach for production due to security considerations.AITranslate
component use QuickBlox user session token with a proxy server. This is the recommended method for production environments, ensuring a more secure and controlled setup.apiKey
property in the configAIApi
section in the QBConfig.ts
file. This contains information about configurations for all AI features . AFter that theAITranslate
component will communicate directly with the OpenAI API.
Parameter name | Type | Description |
---|---|---|
apiKey | String | This field should hold your actual API key that you’ll receive from the service provider (in this case, OpenAI). This key is used to authenticate your requests to the AI service. |
useDefault | Boolean | This setting seems to indicate whether you want to use the default settings for the AI answer assistance widget. If set to true, it implies that the default settings will be applied. |
defaultLanguage | String | This parameter specifies the default language you will use for translation. If this parameter is not set, the language from the system settings will be used (the language set in the system). If it’s not possible to determine the system language, then English will be used by default. |
languages | Array String | This option allows you to set an array of alternative languages that can be used for translation. This list of languages will be displayed in the context menu before performing the text translation. |
api
, servername
, port
, and sessionToken
need to be configured within the proxyConfig section for communication with the proxy server.
Parameter name | Type | Description |
---|---|---|
api | String | The specific API endpoint for AI completions. By default, it’s set to v1/chat/completions. You should provide your URL. |
serverName | String | The base URL for API requests. In default, it’s set to ‘https://api.openai.com/’. You should provide your url. |
sessionToken | String | Your should provide the QuickBlox user session token by default if you are using our proxy server. |
port | String | Default should be empty. |
QuickBloxUIKitDesktopLayout
is a layout component located within the provider section. We explored an example of its usage in our UIKit documentation, specifically in the Send your First Message section.
To customize the appearance of the component icon, you should create your own React custom hook that must return an object of the AIMessageWidget interface and update the code within the renderWidget method.
For modifying its operational logic, you should create your own React custom hook that must return an object of the AIMessageWidget interface and update the code within the textToWidget method. The interface AIMessageWidget
has next structure:
Parameter name | Type | Description |
---|---|---|
renderWidget | Object function | The renderWidget provides the default appearance of the widget. This is a method that returns a JSX element (React component). It’s responsible for rendering the widget, and depending on the presence of errors, it might display an error icon or a support icon. You should change it to implement your own icon. |
textToWidget | Object function | The texToWidget provides the default logic of the widget. This is a function that takes a string (text) and context (in this case, an array of chat messages) but doesn’t return anything (void). This function is used to pass text into the widget. You should change it to implement your logic. |
textToContent | String | The textToContent provides the output of the default algorithm implementation. This is a string field representing content for the text widget. It’s likely to be used to display the response obtained from AI in the text widget. |
AITranslate
inQuickBloxUIKitDesktopLayout
or in MessageView
components like this:
Let’s modify the QuickBloxUIKitDesktopLayout component from “Send your first message” page :
translate
method to generate translate using an API key:AIRephraseWidgetConfig
in the configAIApi
segment of the QBConfig.ts
file to provide your API Key.AIRephrase
property within the QuickBloxUIKitDesktopLayout
(or MessageView
) component for customizing the appearance or logic of the AI Rephrase component.AIRephrase
component use a raw Open AI token. This is suitable for development or demos, but it’s not the recommended approach for production due to security considerations.AIRephrase
component use QuickBlox user session token with a proxy server. This is the recommended method for production environments, ensuring a more secure and controlled setup.apiKey
property in the configAIApi
section in the QBConfig.ts
file. This contains information about configurations for all AI features . AFter that theAIRephrase
component will communicate directly with the OpenAI API.
Parameter name | Type | Description |
---|---|---|
apiKey | String | This field should hold your actual API key that you’ll receive from the service provider (in this case, OpenAI). This key is used to authenticate your requests to the AI service. |
useDefault | Boolean | This setting seems to indicate whether you want to use default settings for the AI answer assistance widget. If set to true, it implies that the default settings will be applied. |
Tones | array of Tone | Array of objects describing the tones that users can use to rephrase text via the Rephrase component menu. Each tone should be defined as an object implementing the ‘Tone’ interface: interface Tone {name: string;description: string;iconEmoji: string;} |
api
, servername
, port
, and sessionToken
need to be configured within the proxyConfig section for communication with the proxy server.
Parameter name | Type | Description |
---|---|---|
api | String | The specific API endpoint for AI completions. In default, it’s set to v1/chat/completions. You should provide your url. |
serverName | String | The base URL for API requests. In default, it’s set to ‘https://api.openai.com/’. You should provide your url. |
sessionToken | String | Your should provide the QuickBlox user session token by default if you are using our proxy server. |
port | String | Default should be empty. |
QuickBloxUIKitDesktopLayout
is a layout component located within the provider section. We explored an example of its usage in our UIKit documentation, specifically in the Send your First Message section.
To customize the appearance of the component icon, you should create your own React custom hook that must return an object of the AIMessageWidget interface and update the code within the textToWidget method.
For modifying its operational logic, you should create your own React custom hook that must return an object of the AIMessageWidget interface and update the code within the textToWidget method. The interface AIMessageWidget
has next structure:
Parameter name | Type | Description |
---|---|---|
renderWidget | Object function | The renderWidget provides the default appearance of the widget. This is a method that returns a JSX element (React component). It’s responsible for rendering the widget, and depending on the presence of errors, it might display an error icon or a support icon. You should change it to implement your own icon. |
textToWidget | Object function | The texToWidget provides the default logic of the widget. This is a function that takes a string (text) and context (in this case, an array of chat messages) but doesn’t return anything (void). This function is used to pass text into the widget. You should change it to implement your logic. |
textToContent | String | The textToContent provides the output of the default algorithm implementation. This is a string field representing content for the text widget. It’s likely to be used to display the response obtained from AI in the text widget. |
AIRephrase
inQuickBloxUIKitDesktopLayout
or in MessageView
components like this:
Let’s modify the QuickBloxUIKitDesktopLayout component from “Send your first message” page :
ChatMessage
objects representing the chat history:rephrase
method to generate translate using an API key: