Fix named OpenAI import problem for Demos (#28544)

Author: GoodDayForSurf

apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts

@@ -13,7 +13,7 @@ import {
 import { Observable } from 'rxjs';
 import { AppService } from './app.service';
 import { loadMessages } from 'devextreme/localization';
-import { DataSource } from 'devextreme/common/data';
+import DataSource from 'devextreme/data/data_source';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();

apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts

@@ -10,7 +10,8 @@ import {
   Alert,
   MessageEnteredEvent
 } from 'devextreme/ui/chat';
-import { DataSource, CustomStore } from 'devextreme/common/data';
+import DataSource from 'devextreme/data/data_source';
+import CustomStore from 'devextreme/data/custom_store';
 
 @Injectable({
   providedIn: 'root',
@@ -26,7 +27,7 @@ export class AppService {
     endpoint: 'https://public-api.devexpress.com/demo-openai',
     apiKey: 'DEMO',
   }
-  
+
   REGENERATION_TEXT = 'Regeneration...';
   ALERT_TIMEOUT = 1000 * 60;
 
@@ -95,7 +96,7 @@ export class AppService {
         });
       },
     });
-  
+
     this.dataSource = new DataSource({
       store: this.customStore,
       paginate: false,
@@ -109,17 +110,17 @@ export class AppService {
       max_tokens: 1000,
       temperature: 0.7,
     };
-  
+
     const response = await this.chatService.chat.completions.create(params);
     const data = { choices: response.choices };
-  
+
     return data.choices[0].message?.content;
   }
 
   async processMessageSending(message, event) {
     this.messages.push({ role: 'user', content: message.text });
     this.typingUsersSubject.next([this.assistant]);
-  
+
     try {
       const aiResponse = await this.getAIResponse(this.messages);
 
@@ -138,7 +139,7 @@ export class AppService {
   updateLastMessage(text = this.REGENERATION_TEXT) {
     const items = this.dataSource.items();
     const lastMessage = items.at(-1);
-  
+
     this.dataSource.store().push([{
       type: 'update',
       key: lastMessage.id,
@@ -161,7 +162,7 @@ export class AppService {
     this.setAlerts([{
       message: 'Request limit reached, try again in a minute.'
     }]);
-  
+
     setTimeout(() => {
       this.setAlerts([]);
     }, this.ALERT_TIMEOUT);
@@ -194,7 +195,7 @@ export class AppService {
 
     return result;
   }
-  
+
   async onMessageEntered({ message, event }: MessageEnteredEvent) {
     this.dataSource.store().push([{ type: 'insert', data: { id: Date.now(), ...message } }]);
 

apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue

@@ -17,7 +17,7 @@
       @message-entered="onMessageEntered($event)"
     >
       <template #message="{ data }">
-        <span 
+        <span
           v-if="data.message.text === REGENERATION_TEXT"
         >
           {{ REGENERATION_TEXT }}
@@ -53,7 +53,7 @@ import { ref, onBeforeMount } from 'vue';
 import DxChat from 'devextreme-vue/chat';
 import DxButton from 'devextreme-vue/button';
 import { loadMessages } from 'devextreme/localization';
-import openai from 'openai';
+import { AzureOpenAI } from 'openai';
 import {
   dictionary,
   messages,
@@ -66,7 +66,7 @@ import {
   ALERT_TIMEOUT,
 } from './data.ts';
 
-const chatService = new openai.AzureOpenAI(AzureOpenAIConfig);
+const chatService = new AzureOpenAI(AzureOpenAIConfig);
 
 const typingUsers = ref([]);
 const alerts = ref([]);
@@ -150,7 +150,7 @@ function alertLimitReached() {
   alerts.value = [{
     message: 'Request limit reached, try again in a minute.'
   }];
-  
+
   setTimeout(() => {
     alerts.value = [];
   }, ALERT_TIMEOUT);

apps/demos/configs/Angular/config.js

@@ -144,6 +144,9 @@ window.config = {
     '@angular/forms': {
       'esModule': true,
     },
+    'openai': {
+      'esModule': true,
+    },
   },
   paths: {
     'npm:': '../../../../node_modules/',

apps/demos/configs/React/config.js

@@ -38,6 +38,9 @@ window.config = {
       'esModule': true,
     },
     /**/
+    'openai': {
+      'esModule': true,
+    },
   },
   paths: {
     'npm:': '../../../../node_modules/',

apps/demos/configs/ReactJs/config.js

@@ -38,6 +38,9 @@ window.config = {
       'esModule': true,
     },
     /**/
+    'openai': {
+      'esModule': true,
+    },
   },
   paths: {
     'npm:': '../../../node_modules/',

apps/demos/configs/Vue/config.js

@@ -35,6 +35,9 @@ window.config = {
       'esModule': true,
     },
     /**/
+    'openai': {
+      'esModule': true,
+    },
   },
   paths: {
     'project:': '../../../../',