Feature/demo page level ai assistant fixes

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

@@ -16,12 +16,6 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 config({
   floatingActionButtonConfig: {
     position: {
@@ -36,14 +30,14 @@ config({
 
 loadMessages({
   en: {
-    'dxChat-textareaPlaceholder': 'Enter a prompt...',
+    'dxChat-textareaPlaceholder': 'Ask AI Assistant...',
   },
 });
 
 @Component({
   selector: 'demo-app',
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   providers: [AiService],
   imports: [
     AiAssistantComponent,

apps/demos/Demos/Chat/PageLevelAIAssistant/Angular/app/components/ai-assistant/ai-assistant.component.html

@@ -46,10 +46,7 @@
         [onItemClick]="onSuggestionClick"
       ></dxo-chat-suggestions>
 
-      <div
-        class="dx-chat-messagelist-empty-view"
-        *dxTemplate="let data of 'emptyViewTemplate'"
-      >
+      <ng-container *dxTemplate="let data of 'emptyViewTemplate'">
         <div
           class="dx-chat-messagelist-empty-image dx-ai-chat__empty-image"
         ></div>
@@ -58,7 +55,7 @@
           class="ai-chat-empty-prompt"
           [innerHTML]="emptyViewPromptHtml"
         ></div>
-      </div>
+      </ng-container>
     </dx-chat>
   </div>
 </dx-popup>

apps/demos/Demos/Chat/PageLevelAIAssistant/Angular/app/components/ai-assistant/ai-assistant.component.ts

@@ -12,21 +12,15 @@ import {
   CLASSES, chatSuggestions, EMPTY_VIEW_MESSAGE, EMPTY_VIEW_PROMPT,
 } from '../../data';
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'app-ai-assistant',
   imports: [
     DxPopupModule,
     DxChatModule,
     DxSpeedDialActionModule,
   ],
-  templateUrl: `.${modulePrefix}/components/ai-assistant/ai-assistant.component.html`,
-  styleUrls: [`.${modulePrefix}/components/ai-assistant/ai-assistant.component.css`],
+  templateUrl: './ai-assistant.component.html',
+  styleUrls: ['./ai-assistant.component.css'],
 })
 export class AiAssistantComponent {
   @Input() disabled = false;

apps/demos/Demos/Chat/PageLevelAIAssistant/Angular/app/components/employee-form/employee-form.component.html

@@ -1,4 +1,4 @@
-<div id="form-container" class="form-container">
+<div id="form-container">
   <dx-form
     [formData]="formData"
     [colCount]="3"

apps/demos/Demos/Chat/PageLevelAIAssistant/Angular/app/components/employee-form/employee-form.component.ts

@@ -6,17 +6,11 @@ import type { AIIntegration } from 'devextreme-angular/common/ai-integration';
 import { DxButtonTypes } from 'devextreme-angular/ui/button';
 import { employee, formFieldsConfig, type Employee } from '../../data';
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'app-employee-form',
   imports: [CommonModule, DxFormModule, DxToastModule],
-  templateUrl: `.${modulePrefix}/components/employee-form/employee-form.component.html`,
-  styleUrls: [`.${modulePrefix}/components/employee-form/employee-form.component.css`],
+  templateUrl: './employee-form.component.html',
+  styleUrls: ['./employee-form.component.css'],
 })
 export class EmployeeFormComponent {
   @Input({ required: true }) aiIntegration!: AIIntegration;

apps/demos/Demos/Chat/PageLevelAIAssistant/Angular/app/components/task-grid/task-grid.component.css

@@ -3,9 +3,21 @@
   min-height: 360px;
 }
 
-::ng-deep .priority-badge {
+.priority-badge {
   border-radius: 24px;
   padding: 2px 8px;
   display: inline-block;
   text-align: center;
 }
+
+.priority-badge--high {
+  background: #f1bbbc;
+}
+
+.priority-badge--normal {
+  background: #f9e2ae;
+}
+
+.priority-badge--low {
+  background: #9fd89f;
+}

apps/demos/Demos/Chat/PageLevelAIAssistant/Angular/app/components/task-grid/task-grid.component.html

@@ -36,8 +36,9 @@
   ></dxi-data-grid-column>
 
   <div *dxTemplate="let data of 'priorityTemplate'">
-    <div class="priority-badge" [style.background]="colors[data.value]">{{
-      data.value
-    }}</div>
+    <div
+      [class]="'priority-badge priority-badge--' + data.value.toLowerCase()"
+      >{{ data.value }}</div
+    >
   </div>
 </dx-data-grid>

apps/demos/Demos/Chat/PageLevelAIAssistant/Angular/app/components/task-grid/task-grid.component.ts

@@ -1,28 +1,18 @@
 import { Component, ViewChild } from '@angular/core';
 import { DxDataGridModule, DxDataGridComponent } from 'devextreme-angular/ui/data-grid';
-import {
-  colors, tasks, type ColumnFilterExpression, type Task,
-} from '../../data';
-
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
+import { tasks, type ColumnFilterExpression, type Task } from '../../data';
 
 @Component({
   selector: 'app-task-grid',
   imports: [DxDataGridModule],
-  templateUrl: `.${modulePrefix}/components/task-grid/task-grid.component.html`,
-  styleUrls: [`.${modulePrefix}/components/task-grid/task-grid.component.css`],
+  templateUrl: './task-grid.component.html',
+  styleUrls: ['./task-grid.component.css'],
 })
 export class TaskGridComponent {
   @ViewChild(DxDataGridComponent) private dxDataGrid!: DxDataGridComponent;
 
   readonly tasks = tasks;
 
-  readonly colors = colors;
-
   readonly completionEditorOptions = {
     elementAttr: { 'aria-label': 'Completed' },
   };

apps/demos/Demos/Chat/PageLevelAIAssistant/Angular/app/data.ts

@@ -131,7 +131,7 @@ export const AI_SERVICE_CONFIG = {
   apiKey: 'DEMO',
 };
 
-export const EMPTY_VIEW_MESSAGE = 'How can I help with this page?';
+export const EMPTY_VIEW_MESSAGE = 'AI Assistant is ready to help you';
 
 export const EMPTY_VIEW_PROMPT = 'Update employee <b>Form</b> fields.\nFilter or sort tasks, display or hide <b>DataGrid</b> columns, or clear all filters and sorting.';
 
@@ -145,12 +145,6 @@ export const FORM_ACTION_TYPES = new Set<FormActionType>(['clear_field', 'clear_
 
 export const titles = ['Mr.', 'Mrs.', 'Ms.'];
 
-export const colors: Record<TaskPriority, string> = {
-  High: '#F1BBBC',
-  Normal: '#F9E2AE',
-  Low: '#9FD89F',
-};
-
 export const states = ['California', 'New York', 'Texas'];
 
 export const positions = [

apps/demos/Demos/Chat/PageLevelAIAssistant/React/AiAssistant.tsx

@@ -9,8 +9,6 @@ import { routeMessage } from './chat-router.ts';
 import { emptyViewMessage } from './data.ts';
 import type { AiAssistantProps, PushMessage } from './data.ts';
 
-const chatStore = new ArrayStore<ChatTypes.Message, number>({ key: 'id' });
-const chatDataSource = new DataSource({ store: chatStore, paginate: false });
 const chatSuggestionItems = [
   { text: 'Show Completed Tasks', prompt: 'Show Completed Tasks' },
   { text: 'Change State to Texas', prompt: 'Change State to Texas' },
@@ -35,14 +33,16 @@ export default function AiAssistant({ formRef, gridRef, aiIntegration }: AiAssis
   const clearButtonInstance = useRef<ReturnType<ButtonRef['instance']> | null>(null);
   const [visible, setVisible] = useState(false);
   const [disabled, setDisabled] = useState(false);
+  const [chatStore] = useState(() => new ArrayStore<ChatTypes.Message, number>({ key: 'id' }));
+  const [chatDataSource] = useState(() => new DataSource({ store: chatStore, paginate: false }));
 
   const updateClearButtonState = useCallback((): void => {
     clearButtonInstance.current?.option('disabled', chatDataSource.items().length === 0);
-  }, []);
+  }, [chatDataSource]);
 
   const pushMessage: PushMessage = useCallback((message) => {
     chatStore.push([{ type: 'insert', data: { id: Date.now() + Math.random(), timestamp: new Date(), ...message } }]);
-  }, []);
+  }, [chatStore]);
 
   const handleUserMessage = useCallback((message: ChatTypes.Message): void => {
     const form = formRef.current?.instance();
@@ -80,7 +80,7 @@ export default function AiAssistant({ formRef, gridRef, aiIntegration }: AiAssis
     chatStore.clear();
     chatDataSource.reload();
     updateClearButtonState();
-  }, [updateClearButtonState]);
+  }, [chatStore, chatDataSource, updateClearButtonState]);
 
   const onPopupShowing = useCallback((): void => setVisible(true), []);
   const onPopupHiding = useCallback((): void => setVisible(false), []);

apps/demos/Demos/Chat/PageLevelAIAssistant/React/App.tsx

@@ -8,7 +8,7 @@ import TaskGrid from './TaskGrid.tsx';
 import AiAssistant from './AiAssistant.tsx';
 import { aiIntegration } from './service.ts';
 
-loadMessages({ en: { 'dxChat-textareaPlaceholder': 'Enter a prompt...' } });
+loadMessages({ en: { 'dxChat-textareaPlaceholder': 'Ask AI Assistant...' } });
 config({
   editorStylingMode: 'filled',
   floatingActionButtonConfig: {

apps/demos/Demos/Chat/PageLevelAIAssistant/React/data.ts

@@ -141,7 +141,7 @@ export class ChatCommandError extends Error {
   }
 }
 
-export const emptyViewMessage = 'How can I help with this page?';
+export const emptyViewMessage = 'AI Assistant is ready to help you';
 
 export const employee: Employee = {
   ID: 1,

apps/demos/Demos/Chat/PageLevelAIAssistant/ReactJs/AiAssistant.js

@@ -8,8 +8,6 @@ import { ArrayStore, DataSource } from 'devextreme-react/common/data';
 import { routeMessage } from './chat-router.js';
 import { emptyViewMessage } from './data.js';
 
-const chatStore = new ArrayStore({ key: 'id' });
-const chatDataSource = new DataSource({ store: chatStore, paginate: false });
 const chatSuggestionItems = [
   { text: 'Show Completed Tasks', prompt: 'Show Completed Tasks' },
   { text: 'Change State to Texas', prompt: 'Change State to Texas' },
@@ -37,17 +35,22 @@ export default function AiAssistant({ formRef, gridRef, aiIntegration }) {
   const clearButtonInstance = useRef(null);
   const [visible, setVisible] = useState(false);
   const [disabled, setDisabled] = useState(false);
+  const [chatStore] = useState(() => new ArrayStore({ key: 'id' }));
+  const [chatDataSource] = useState(() => new DataSource({ store: chatStore, paginate: false }));
   const updateClearButtonState = useCallback(() => {
     clearButtonInstance.current?.option('disabled', chatDataSource.items().length === 0);
-  }, []);
-  const pushMessage = useCallback((message) => {
-    chatStore.push([
-      {
-        type: 'insert',
-        data: { id: Date.now() + Math.random(), timestamp: new Date(), ...message },
-      },
-    ]);
-  }, []);
+  }, [chatDataSource]);
+  const pushMessage = useCallback(
+    (message) => {
+      chatStore.push([
+        {
+          type: 'insert',
+          data: { id: Date.now() + Math.random(), timestamp: new Date(), ...message },
+        },
+      ]);
+    },
+    [chatStore],
+  );
   const handleUserMessage = useCallback(
     (message) => {
       const form = formRef.current?.instance();
@@ -93,7 +96,7 @@ export default function AiAssistant({ formRef, gridRef, aiIntegration }) {
     chatStore.clear();
     chatDataSource.reload();
     updateClearButtonState();
-  }, [updateClearButtonState]);
+  }, [chatStore, chatDataSource, updateClearButtonState]);
   const onPopupShowing = useCallback(() => setVisible(true), []);
   const onPopupHiding = useCallback(() => setVisible(false), []);
   const onClearButtonInitialized = useCallback(

apps/demos/Demos/Chat/PageLevelAIAssistant/ReactJs/App.js

@@ -6,7 +6,7 @@ import TaskGrid from './TaskGrid.js';
 import AiAssistant from './AiAssistant.js';
 import { aiIntegration } from './service.js';
 
-loadMessages({ en: { 'dxChat-textareaPlaceholder': 'Enter a prompt...' } });
+loadMessages({ en: { 'dxChat-textareaPlaceholder': 'Ask AI Assistant...' } });
 config({
   editorStylingMode: 'filled',
   floatingActionButtonConfig: {

apps/demos/Demos/Chat/PageLevelAIAssistant/ReactJs/data.js

@@ -17,7 +17,7 @@ export class ChatCommandError extends Error {
     Object.setPrototypeOf(this, ChatCommandError.prototype);
   }
 }
-export const emptyViewMessage = 'How can I help with this page?';
+export const emptyViewMessage = 'AI Assistant is ready to help you';
 export const employee = {
   ID: 1,
   Prefix: 'Mr.',

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

@@ -38,7 +38,7 @@ config({
 
 loadMessages({
   en: {
-    'dxChat-textareaPlaceholder': 'Enter a prompt...',
+    'dxChat-textareaPlaceholder': 'Ask AI Assistant...',
   },
 });
 

apps/demos/Demos/Chat/PageLevelAIAssistant/Vue/EmployeeForm.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     id="form-container"
-    class="form-container"
   >
     <DxForm
       ref="formRef"

apps/demos/Demos/Chat/PageLevelAIAssistant/Vue/TaskGrid.vue

@@ -29,8 +29,7 @@
       />
       <template #priority-cell="{ data }">
         <div
-          class="priority-badge"
-          :style="{ background: colors[data.value as TaskPriority] }"
+          :class="['priority-badge', `priority-badge--${data.value.toLowerCase()}`]"
         >{{ data.value }}</div>
       </template>
       <DxColumn
@@ -49,8 +48,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { DxDataGrid, DxColumn, DxFilterRow, DxHeaderFilter } from 'devextreme-vue/data-grid';
-import { colors, tasks } from './data.ts';
-import type { ColumnFilterExpression, Task, TaskPriority } from './data.ts';
+import { tasks } from './data.ts';
+import type { ColumnFilterExpression, Task } from './data.ts';
 
 const dataGridRef = ref<InstanceType<typeof DxDataGrid>>();
 
@@ -91,4 +90,16 @@ defineExpose({
   display: inline-block;
   text-align: center;
 }
+
+.priority-badge--high {
+  background: #f1bbbc;
+}
+
+.priority-badge--normal {
+  background: #f9e2ae;
+}
+
+.priority-badge--low {
+  background: #9fd89f;
+}
 </style>

apps/demos/Demos/Chat/PageLevelAIAssistant/Vue/data.ts

@@ -140,7 +140,7 @@ export const AI_SERVICE_CONFIG = {
 export const MAX_PROMPT_SIZE = 20000;
 export const RATE_LIMIT_RETRY_DELAY_MS = 30000;
 
-export const EMPTY_VIEW_MESSAGE = 'How can I help with this page?';
+export const EMPTY_VIEW_MESSAGE = 'AI Assistant is ready to help you';
 
 export const EMPTY_VIEW_PROMPT = 'Update employee <b>Form</b> fields.\nFilter or sort tasks, display or hide <b>DataGrid</b> columns, or clear all filters and sorting.';
 
@@ -154,12 +154,6 @@ export const FORM_ACTION_TYPES = new Set<FormActionType>(['clear_field', 'clear_
 
 export const titles = ['Mr.', 'Mrs.', 'Ms.'];
 
-export const colors: Record<TaskPriority, string> = {
-  High: '#F1BBBC',
-  Normal: '#F9E2AE',
-  Low: '#9FD89F',
-};
-
 export const states = ['California', 'New York', 'Texas'];
 
 export const positions = [