Merge pull request #13 from DevExpress-Examples/React-changes

React - Fix TS declarations

Author: 16adianay

React/src/App.css

@@ -58,3 +58,8 @@
   font-size: revert;
   font-weight: revert;
 }
+
+.chat-disabled .dx-chat-messagebox {
+  opacity: 0.5;
+  pointer-events: none;
+}

React/src/ChatService.tsx

@@ -1,58 +1,38 @@
-import {
-  type User, type Alert, type MessageEnteredEvent, type Message,
-} from 'devextreme/ui/chat';
-import DataSource from 'devextreme/data/data_source';
-import CustomStore from 'devextreme/data/custom_store';
+import { type ChatTypes } from 'devextreme-react/chat';
+import { DataSource, CustomStore } from 'devextreme-react/common/data';
 import { OpenAI } from 'openai';
 import { BehaviorSubject, Observable } from 'rxjs';
-import TextArea from 'devextreme/ui/text_area';
+import { ALERT_TIMEOUT, assistant, OpenAIConfig } from './data.ts';
 
 class AppService {
   chatService: OpenAI;
 
-  OpenAIConfig = {
-    dangerouslyAllowBrowser: true,
-    apiKey: 'OPEN_AI_KEY',
-    deployment: 'gpt-4o-mini',
-  };
-
-  ALERT_TIMEOUT = 10000;
-
-  user: User = {
-    id: 'user',
-  };
-
-  assistant: User = {
-    id: 'assistant',
-    name: 'Virtual Assistant',
-  };
-
-  store: Message[] = [];
+  store: ChatTypes.Message[] = [];
 
   messages: { role: 'user' | 'assistant' | 'system'; content: string }[] = [];
 
-  alerts: Alert[] = [];
+  alerts: ChatTypes.Alert[] = [];
 
   customStore?: CustomStore;
 
   dataSource?: DataSource;
 
-  private readonly typingUsersSubject: BehaviorSubject<User[]> = new BehaviorSubject<User[]>([]);
+  private readonly typingUsersSubject: BehaviorSubject<ChatTypes.User[]> = new BehaviorSubject<ChatTypes.User[]>([]);
 
-  private readonly alertsSubject: BehaviorSubject<Alert[]> = new BehaviorSubject<Alert[]>([]);
+  private readonly alertsSubject: BehaviorSubject<ChatTypes.Alert[]> = new BehaviorSubject<ChatTypes.Alert[]>([]);
 
   constructor() {
-    this.chatService = new OpenAI(this.OpenAIConfig);
+    this.chatService = new OpenAI(OpenAIConfig);
     this.initDataSource();
     this.typingUsersSubject.next([]);
     this.alertsSubject.next([]);
   }
 
-  get typingUsers$(): Observable<User[]> {
+  get typingUsers$(): Observable<ChatTypes.User[]> {
     return this.typingUsersSubject.asObservable();
   }
 
-  get alerts$(): Observable<Alert[]> {
+  get alerts$(): Observable<ChatTypes.Alert[]> {
     return this.alertsSubject.asObservable();
   }
 
@@ -74,7 +54,7 @@ class AppService {
           resolve([...this.store]);
         }, 0);
       }),
-      insert: (message: Message) => new Promise((resolve): void => {
+      insert: (message: ChatTypes.Message) => new Promise((resolve): void => {
         setTimeout(() => {
           this.store.push(message);
           resolve(message);
@@ -94,17 +74,18 @@ class AppService {
         role: msg.role,
         content: msg.content,
       })),
-      model: this.OpenAIConfig.deployment,
+      model: OpenAIConfig.deployment,
     };
 
     const response = await this.chatService.chat.completions.create(params);
     const data = { choices: response.choices };
     return data.choices[0].message?.content;
   }
 
-  async processMessageSending(): Promise<void> {
-    this.toggleDisabledState(true);
-    this.typingUsersSubject.next([this.assistant]);
+  async processMessageSending(setDisabled: Function, event: Event | undefined): Promise<void> {
+    setDisabled(true);
+    (event?.target as HTMLElement).blur();
+    this.typingUsersSubject.next([assistant]);
 
     try {
       const aiResponse = await this.getAIResponse(this.messages);
@@ -114,21 +95,12 @@ class AppService {
         this.renderAssistantMessage(aiResponse ?? '');
       }, 200);
     } catch {
+      (event?.target as HTMLElement).focus();
       this.typingUsersSubject.next([]);
       this.alertLimitReached();
     } finally {
-      this.toggleDisabledState(false);
-    }
-  }
-
-  toggleDisabledState(disabled: boolean): void {
-    let element = document.querySelector('.dx-chat-messagebox-textarea');
-    let textAreaInstance = element ? TextArea.getInstance(element) as TextArea : null;
-
-    textAreaInstance?.option({ disabled });
-
-    if (!disabled) {
-      textAreaInstance?.focus();
+      (event?.target as HTMLElement).focus();
+      setDisabled(false);
     }
   }
 
@@ -152,7 +124,7 @@ class AppService {
     const message = {
       id: Date.now(),
       timestamp: new Date(),
-      author: this.assistant,
+      author: assistant,
       text,
     };
 
@@ -168,10 +140,10 @@ class AppService {
 
     setTimeout((): void => {
       this.setAlerts([]);
-    }, this.ALERT_TIMEOUT);
+    }, ALERT_TIMEOUT);
   }
 
-  setAlerts(alerts: Alert[]): void {
+  setAlerts(alerts: ChatTypes.Alert[]): void {
     this.alerts = alerts;
     this.alertsSubject.next(alerts);
   }
@@ -194,13 +166,14 @@ class AppService {
     }
   }
 
-  onMessageEntered({ message }: MessageEnteredEvent): void {
+  onMessageEntered(event: ChatTypes.MessageEnteredEvent, setDisabled: Function): void {
+    let { message } = event;
     this.dataSource
       ?.store()
       .push([{ type: 'insert', data: { id: Date.now(), ...message } }]);
 
     this.messages.push({ role: 'user', content: message?.text ?? '' });
-    void this.processMessageSending();
+    void this.processMessageSending(setDisabled, event.event);
   }
 }
 

React/src/components/ChatApp.tsx

@@ -1,16 +1,15 @@
 import { useState, useEffect, useCallback } from 'react';
 import { loadMessages } from 'devextreme/localization';
 import Chat, { type ChatTypes } from 'devextreme-react/chat';
-import {
-  type User, type Alert, type MessageEnteredEvent,
-} from 'devextreme/ui/chat';
 import { appService } from '../ChatService';
 import MessageTemplate from './MessageTemplate';
+import { CHAT_DISABLED_CLASS, user as chatUser } from '../data.ts';
 
 export default function ChatApp(): JSX.Element {
-  const user = appService.user;
-  const [typingUsers, setTypingUsers] = useState<User[]>([]);
-  const [alerts, setAlerts] = useState<Alert[]>([]);
+  const user = chatUser;
+  const [isDisabled, setDisabled] = useState(false);
+  const [typingUsers, setTypingUsers] = useState<ChatTypes.User[]>([]);
+  const [alerts, setAlerts] = useState<ChatTypes.Alert[]>([]);
 
   useEffect(() => {
     const typingSubscription = appService.typingUsers$.subscribe(setTypingUsers);
@@ -21,18 +20,18 @@ export default function ChatApp(): JSX.Element {
     };
   }, []);
 
-  const onMessageEntered = useCallback(async (e: MessageEnteredEvent): Promise<void> => {
-    await appService.onMessageEntered(e);
-  }, []);
+  const onMessageEntered = useCallback((e: ChatTypes.MessageEnteredEvent): void => {
+    appService.onMessageEntered(e, setDisabled);
+  }, [isDisabled]);
 
   const onRegenerateButtonClick = useCallback(async (): Promise<void> => {
+    setDisabled(true);
     appService.updateLastMessage();
-    appService.toggleDisabledState(true);
 
     try {
       await appService.regenerate();
     } finally {
-      appService.toggleDisabledState(false);
+      setDisabled(false);
     }
   }, []);
 
@@ -44,6 +43,7 @@ export default function ChatApp(): JSX.Element {
   return (
     <div className="demo-container">
       <Chat
+        className={isDisabled ? CHAT_DISABLED_CLASS : ''}
         dataSource={appService.dataSource}
         reloadOnChange={false}
         showAvatar={false}
@@ -52,7 +52,7 @@ export default function ChatApp(): JSX.Element {
         height={710}
         typingUsers={typingUsers}
         alerts={alerts}
-        onMessageEntered={(e: MessageEnteredEvent): void => void onMessageEntered(e)}
+        onMessageEntered={onMessageEntered}
         messageRender={messageRender}
       />
     </div>

React/src/components/MessageTemplate.tsx

@@ -41,20 +41,22 @@ function MessageTemplate({ text, onRegenerateButtonClick }: MessageProps): JSX.E
       <div className='dx-chat-messagebubble-text'>
         {parsedHtml}
       </div>
-      <div className='dx-bubble-button-container'>
-        <Button
-          icon={icon}
-          stylingMode='text'
-          hint='Copy'
-          onClick={onCopyButtonClick}
-        />
-        <Button
-          icon='refresh'
-          stylingMode='text'
-          hint='Regenerate'
-          onClick={onRegenerateButtonClick}
-        />
-      </div>
+      {text !== 'Regeneration...' && (
+        <div className='dx-bubble-button-container'>
+          <Button
+            icon={icon}
+            stylingMode='text'
+            hint='Copy'
+            onClick={onCopyButtonClick}
+          />
+          <Button
+            icon='refresh'
+            stylingMode='text'
+            hint='Regenerate'
+            onClick={onRegenerateButtonClick}
+          />
+        </div>)
+      }
     </React.Fragment>
   );
 }

React/src/data.ts

@@ -0,0 +1,20 @@
+import { type ChatTypes } from 'devextreme-react/chat';
+
+export const OpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  apiKey: 'OPEN_AI_KEY',
+  deployment: 'gpt-4o-mini',
+};
+
+export const ALERT_TIMEOUT = 10000;
+
+export const CHAT_DISABLED_CLASS = 'chat-disabled';
+
+export const user: ChatTypes.User = {
+  id: 'user',
+};
+
+export const assistant: ChatTypes.User = {
+  id: 'assistant',
+  name: 'Virtual Assistant',
+};