From 7620b2a23a75f28a1575879f59834f859c417b0e Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Tue, 3 Dec 2024 15:31:26 +0400 Subject: [PATCH 1/4] Chat: describe AI Integration demo --- .../AIAndChatbotIntegration/description.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md b/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md index 67c1bba41e26..93dbf55eec6d 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md @@ -1 +1,17 @@ -Chat is an interactive interface that allows users to send and receive messages in real time. +This demo shows how to add an AI service to the Chat component to create a chatbot. + +## Handling dataSource (reloadOnChange: false) + +In this demo, a [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/) is implemented (with custom load and insert functions). This store serves as a [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource) for the Chat component. [reloadOnChange](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#reloadOnChange) is set to `false`, which affects how messages are processed: updates are pushed directly into the store. See the [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event handler and `processMessageSending` function for more details. + +## Customizing Messages with messageTemplate + +The bot's messages feature "Copy" and "Regenerate" buttons. To add these buttons, implement a [messageTemplate](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#messageTemplate). + +## Converting Markdown Responses to HTML + +The AI model outputs responses in Markdown. This examples converts them to HTML with the [unified](https://github.com/unifiedjs) plugin library. See `convertToHtml` for more information. + +## Changing Default Texts with Localization + +Some UI texts are modified in the empty view with [localization](/Documentation/Guide/Common/Localization/) messages. You can apply a similar method to alter text. \ No newline at end of file From 2f182a704e24b5bfdaec6affcc1fa7b265bf859b Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Fri, 6 Dec 2024 10:01:45 +0400 Subject: [PATCH 2/4] Apply suggestions from code review Co-authored-by: Abadzhev Signed-off-by: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> --- .../Chat/AIAndChatbotIntegration/description.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md b/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md index 93dbf55eec6d..3ebc67acdbd6 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md @@ -1,17 +1,17 @@ -This demo shows how to add an AI service to the Chat component to create a chatbot. +This demo uses an AI service and the DevExtreme Chat component to create a chatbot UI. ## Handling dataSource (reloadOnChange: false) -In this demo, a [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/) is implemented (with custom load and insert functions). This store serves as a [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource) for the Chat component. [reloadOnChange](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#reloadOnChange) is set to `false`, which affects how messages are processed: updates are pushed directly into the store. See the [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event handler and `processMessageSending` function for more details. +The Chat component's [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource) is a [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/) that implements its own load and insert functions. The Chat deactivates [reloadOnChange](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#reloadOnChange) to push updates directly into the store and update the conversation manually. See the [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event handler and the `processMessageSending` function to review the code that manages data transfer between the Chat and its data store. -## Customizing Messages with messageTemplate +## Custom Message Template -The bot's messages feature "Copy" and "Regenerate" buttons. To add these buttons, implement a [messageTemplate](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#messageTemplate). +The Chat specifies a [messageTemplate](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#messageTemplate) that displays "Copy" and "Regenerate" buttons in bot messages. -## Converting Markdown Responses to HTML +## Response Format Conversion: Markdown to HTML -The AI model outputs responses in Markdown. This examples converts them to HTML with the [unified](https://github.com/unifiedjs) plugin library. See `convertToHtml` for more information. +The AI model outputs responses in Markdown, while the Chat requires HTML output. This examples uses the [unified](https://github.com/unifiedjs) plugin library to convert response content. Review `convertToHtml` function code for implementation details. -## Changing Default Texts with Localization +## Default Caption Customization Some UI texts are modified in the empty view with [localization](/Documentation/Guide/Common/Localization/) messages. You can apply a similar method to alter text. \ No newline at end of file From 459d8e7235bd023a9e21a7c178e781d28a789752 Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Fri, 6 Dec 2024 10:01:59 +0400 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Abadzhev Signed-off-by: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> --- apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md b/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md index 3ebc67acdbd6..2b38c1c6abcd 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md @@ -14,4 +14,4 @@ The AI model outputs responses in Markdown, while the Chat requires HTML output. ## Default Caption Customization -Some UI texts are modified in the empty view with [localization](/Documentation/Guide/Common/Localization/) messages. You can apply a similar method to alter text. \ No newline at end of file +The Chat component in this demo displays modified captions when the conversation is empty. The demo uses [localization](/Documentation/Guide/Common/Localization/) techniques to alter built-in text. \ No newline at end of file From 4998b0d741992d02daf3d77af07b013e82e50957 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Fri, 6 Dec 2024 10:48:00 +0400 Subject: [PATCH 4/4] Add split --- apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md b/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md index 2b38c1c6abcd..18824c42ff84 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md @@ -3,6 +3,7 @@ This demo uses an AI service and the DevExtreme Chat component to create a chatb ## Handling dataSource (reloadOnChange: false) The Chat component's [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource) is a [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/) that implements its own load and insert functions. The Chat deactivates [reloadOnChange](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#reloadOnChange) to push updates directly into the store and update the conversation manually. See the [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event handler and the `processMessageSending` function to review the code that manages data transfer between the Chat and its data store. + ## Custom Message Template