From 11114668a2f690907d41f571a16b387fc9fe521c Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Fri, 29 Nov 2024 11:45:52 +0400 Subject: [PATCH] Update after the review --- applications/GettingStartedWith/Chat/index.js | 4 +- .../15 Manage Users.md | 8 +- .../25 Post-Processing.md | 96 +++++++------------ 3 files changed, 43 insertions(+), 65 deletions(-) diff --git a/applications/GettingStartedWith/Chat/index.js b/applications/GettingStartedWith/Chat/index.js index 9304268155..6f1ec648e3 100644 --- a/applications/GettingStartedWith/Chat/index.js +++ b/applications/GettingStartedWith/Chat/index.js @@ -5,7 +5,7 @@ const firstUser = { const secondUser = { id: "2", - name: "ChatBack", + name: "Feedback Bot", avatarUrl: "./images/Chat/bot.png" }; @@ -22,7 +22,6 @@ const alert = [{ $(() => { function sendToBackend() { - chat.option("typingUsers", [secondUser]); setTimeout(() => { chat.option("typingUsers", []); chat.renderMessage({ @@ -44,6 +43,7 @@ $(() => { user: firstUser, onMessageEntered: ({ component, message }) => { component.renderMessage(message); + chat.option("typingUsers", [secondUser]); sendToBackend(); }, items: initialMessages diff --git a/concepts/05 UI Components/Chat/05 Getting Started with Chat/15 Manage Users.md b/concepts/05 UI Components/Chat/05 Getting Started with Chat/15 Manage Users.md index d80de8f345..83adeb2224 100644 --- a/concepts/05 UI Components/Chat/05 Getting Started with Chat/15 Manage Users.md +++ b/concepts/05 UI Components/Chat/05 Getting Started with Chat/15 Manage Users.md @@ -16,7 +16,7 @@ Assign chat users: const secondUser = { id: "2", - name: "ChatBack", + name: "Feedback Bot", avatarUrl: "./images/Chat/bot.png" }; @@ -45,7 +45,7 @@ Assign chat users: }; secondUser: DxChatTypes.User = { id: "2", - name: "ChatBack", + name: "Feedback Bot", avatarUrl: "./images/Chat/bot.png" }; } @@ -68,7 +68,7 @@ Assign chat users: const secondUser = { id: "2", - name: "ChatBack", + name: "Feedback Bot", avatarUrl: "./images/Chat/bot.png" }; @@ -84,7 +84,7 @@ Assign chat users: const secondUser = { id: "2", - name: "ChatBack", + name: "Feedback Bot", avatarUrl: "./images/Chat/bot.png" }; diff --git a/concepts/05 UI Components/Chat/05 Getting Started with Chat/25 Post-Processing.md b/concepts/05 UI Components/Chat/05 Getting Started with Chat/25 Post-Processing.md index 08e77fb62f..1d145808da 100644 --- a/concepts/05 UI Components/Chat/05 Getting Started with Chat/25 Post-Processing.md +++ b/concepts/05 UI Components/Chat/05 Getting Started with Chat/25 Post-Processing.md @@ -1,6 +1,6 @@ Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) to perform message post processing (like sending the message to the server for storage). This tutorial simulates sending a message to a backend: -1. The ChatBack user is added to the [typingUsers](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#typingUsers) array to show them typing. +1. The Feedback Bot user is added to the [typingUsers](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#typingUsers) array to show them typing. 2. After one second, the **typingUsers** array is emptied, and Chat displays the answer message. 3. After 3 seconds, an [alert](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#alerts) is displayed, and Chat is disabled. @@ -10,10 +10,6 @@ Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configur $(function() { function sendToBackend() { - - // Here go the sending to backend settings - - chat.option("typingUsers", [secondUser]); setTimeout(() => { chat.option("typingUsers", []); chat.renderMessage({ @@ -21,19 +17,18 @@ Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configur author: secondUser, timestamp: Date.now() }); - }, 1000); - setTimeout(() => { chat.option("alerts", [{ id: 1, message: "You have been disconnected" }]); chat.option("disabled", true); - }, 3000); + }, 1000); } $("#chat").dxChat({ // ... onMessageEntered: ({ component, message }) => { //... + chat.option("typingUsers", [secondUser]); sendToBackend(); }, }); @@ -43,7 +38,7 @@ Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configur @@ -58,15 +53,11 @@ Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configur onMessageEntered({ message }) { // ... + this.typingUsers = [this.secondUser]; this.sendToBackend(); } sendToBackend() { - - // Here go the sending to backend settings - - this.typingUsers = [this.secondUser]; - setTimeout(() => { this.typingUsers = []; this.messages = [ @@ -77,18 +68,15 @@ Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configur timestamp: Date.now(), }, ]; - }, 1000); - - setTimeout(() => { - this.alerts = [ - ...this.alerts, - { - id: 1, - message: "You have been disconnected", - }, - ]; - this.disabled = true; - }, 3000); + this.alerts = [ + ...this.alerts, + { + id: 1, + message: "You have been disconnected", + }, + ]; + this.disabled = true; + }, 1000); } } @@ -97,7 +85,7 @@ Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configur @@ -112,14 +100,11 @@ Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configur const onMessageEntered = ({ message }) => { // ... + typingUsers.value = [secondUser]; sendToBackend(); }; const sendToBackend = () => { - - // Here go the sending to backend settings - - typingUsers.value = [secondUser]; setTimeout(() => { typingUsers.value = []; messages.value = [ @@ -130,8 +115,6 @@ Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configur timestamp: Date.now(), }, ]; - }, 1000); - setTimeout(() => { alerts.value = [ ...alerts.value, { @@ -140,7 +123,7 @@ Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configur }, ]; disabled.value = true; - }, 3000); + }, 1000); }; @@ -155,35 +138,30 @@ Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configur const onMessageEntered = useCallback(({ message }) => { // ... + setTypingUsers([secondUser]); sendToBackend(); }, []); const sendToBackend = () => { - - // Here go the sending to backend settings - - setTypingUsers([secondUser]); - setTimeout(() => { - setTypingUsers([]); - setMessages((prevMessages) => [ - ...prevMessages, - { - text: "Thanks for helping us improve!", - author: secondUser, - timestamp: Date.now(), - }, - ]); - }, 1000); - setTimeout(() => { - setAlerts([ - { - id: 1, - message: "You have been disconnected", - }, - ]); - setDisabled(true); - }, 3000); - }; + setTimeout(() => { + setTypingUsers([]); + setMessages((prevMessages) => [ + ...prevMessages, + { + text: "Thanks for helping us improve!", + author: secondUser, + timestamp: Date.now(), + }, + ]); + setAlerts([ + { + id: 1, + message: "You have been disconnected", + }, + ]); + setDisabled(true); + }, 3000); + }; return (