feat(chat-ai-demo): Disable TaxtArea && Button && Focus/blur TextArea

DevExpress · Dec 3, 2024 · 5527fe9 · 5527fe9
1 parent cf77f7b
commit 5527fe9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/data.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/data.js
@@ -3,8 +3,7 @@ const apiVersion = '2024-02-01';
 const endpoint = 'https://public-api.devexpress.com/demo-openai';
 const apiKey = 'DEMO';
 const REGENERATION_TEXT = 'Regeneration...';
-const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button';
-const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea';
+const CHAT_DISABLED_CLASS = 'dx-chat-disabled';
 const MILLISECONDS_PER_MINUTE = 1000 * 60;
 const user = {
   id: 'user',

diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.js
@@ -43,22 +43,18 @@ $(() => {
     }, MILLISECONDS_PER_MINUTE);
   }
 
-  function toggleDisabledState(disabled) {
-    const $button = instance.element().find(`.${CHAT_MESSAGEBOX_BUTTON_CLASS}`);
-    const $textArea = instance.element().find(`.${CHAT_MESSAGEBOX_TEXTAREA_CLASS}`);
-    const buttonInstance = $button.dxButton('instance');
-    const textAreaInstance = $textArea.dxTextArea('instance');
+  function toggleDisabledState(disabled, event) {
+    instance.element().toggleClass(CHAT_DISABLED_CLASS, disabled);
 
-    buttonInstance.option({ disabled });
-    textAreaInstance.option({ disabled });
-
-    if (!disabled) {
-      textAreaInstance.focus();
+    if (disabled) {
+      event?.target.blur();
+    } else {
+      event?.target.focus();
     }
   };
 
-  async function processMessageSending() {
-    toggleDisabledState(true);
+  async function processMessageSending(event) {
+    toggleDisabledState(true, event);
 
     instance.option({ typingUsers: [assistant] });
 
@@ -76,7 +72,7 @@ $(() => {
       instance.option({ typingUsers: [] });
       alertLimitReached();
     } finally {
-      toggleDisabledState(false);
+      toggleDisabledState(false, event);
     }
   }
 
@@ -163,12 +159,12 @@ $(() => {
     user,
     height: 710,
     onMessageEntered: (e) => {
-      const { message } = e;
+      const { message, event } = e;
 
       customStore.push([{ type: 'insert', data: { id: Date.now(), ...message } }]);
       messages.push({ role: 'user', content: message.text });
 
-      processMessageSending();
+      processMessageSending(event);
     },
     messageTemplate: (data, element) => {
       const { message } = data;

diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/styles.css b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/styles.css
@@ -58,3 +58,8 @@
   font-size: revert;
   font-weight: revert;
 }
+
+.dx-chat-disabled .dx-chat-messagebox {
+  opacity: 0.5;
+  pointer-events: none;
+}