Merge branch '24_2' into grids/cardview/main

.github/workflows/demos_visual_tests_frameworks.yml

@@ -451,7 +451,7 @@ jobs:
       working-directory: apps/demos
       env:
         CHANGEDFILEINFOSPATH: changed-files.json
-        BROWSERS: chrome:headless --disable-gpu --window-size=1200,800 --js-flags=--random-seed=2147483647
+        BROWSERS: chrome:headless --window-size=1200,800 --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
         # DEBUG: hammerhead:*,testcafe:*
         CONCURRENCY: 4
         TCQUARANTINE: true

.github/workflows/update_version.yml

@@ -59,7 +59,7 @@ jobs:
           git config --global user.name "DX Robot"
 
       - name: Bump version
-        run: pnpm run all:update-version -- ${{ inputs.version }}
+        run: pnpm run all:update-version ${{ inputs.version }}
 
       - name: Commit changes and make PR
         env:

README.md

@@ -37,7 +37,7 @@ The DevExtreme website includes "Getting Started" guides for every aspect of Dev
 - [Demo Gallery](https://js.devexpress.com/Demos/WidgetsGallery)
 - [Responsive UI Templates](https://js.devexpress.com/Templates/UITemplates)
 - [Documentation](https://js.devexpress.com/Documentation)
-- [Examples on GitHub](https://github.com/DevExpress/DevExtreme-examples)
+- [Examples on GitHub](https://github.com/DevExpress-Examples)
 - [YouTube videos](https://www.youtube.com/playlist?list=PL8h4jt35t1wjGvgflbHEH_e3b23AA30-z)
 
 ## Contributing

apps/angular/package.json

@@ -2,7 +2,7 @@
   "name": "devextreme-angular-playground",
   "description": "DevExtreme Angular UI and Visualization Components",
   "private": true,
-  "version": "24.2.2",
+  "version": "24.2.3",
   "author": "Developer Express Inc.",
   "license": "MIT",
   "dependencies": {

apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/data.js

@@ -3,6 +3,8 @@ const apiVersion = '2024-02-01';
 const endpoint = 'https://public-api.devexpress.com/demo-openai';
 const apiKey = 'DEMO';
 const REGENERATION_TEXT = 'Regeneration...';
+const CHAT_DISABLED_CLASS = 'dx-chat-disabled';
+const ALERT_TIMEOUT = 1000 * 60;
 const user = {
   id: 'user',
 };

apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.js

@@ -25,8 +25,8 @@ $(() => {
       temperature: 0.7,
     };
 
-    const responseAzure = await chatService.chat.completions.create(params);
-    const data = { choices: responseAzure.choices };
+    const response = await chatService.chat.completions.create(params);
+    const data = { choices: response.choices };
 
     return data.choices[0].message?.content;
   }
@@ -40,10 +40,23 @@ $(() => {
 
     setTimeout(() => {
       instance.option({ alerts: [] });
-    }, 10000);
+    }, ALERT_TIMEOUT);
   }
 
-  async function processMessageSending() {
+  function toggleDisabledState(disabled, event) {
+    instance.element().toggleClass(CHAT_DISABLED_CLASS, disabled);
+
+    if (disabled) {
+      event?.target.blur();
+    } else {
+      event?.target.focus();
+    }
+  };
+
+  async function processMessageSending(message, event) {
+    toggleDisabledState(true, event);
+
+    messages.push({ role: 'user', content: message.text });
     instance.option({ typingUsers: [assistant] });
 
     try {
@@ -54,15 +67,20 @@ $(() => {
 
         messages.push({ role: 'assistant', content: aiResponse });
 
-        renderMessage(aiResponse);
+        renderAssistantMessage(aiResponse);
       }, 200);
     } catch {
       instance.option({ typingUsers: [] });
+      messages.pop();
       alertLimitReached();
+    } finally {
+      toggleDisabledState(false, event);
     }
   }
 
   async function regenerate() {
+    toggleDisabledState(true);
+
     try {
       const aiResponse = await getAIResponse(messages.slice(0, -1));
 
@@ -71,28 +89,30 @@ $(() => {
     } catch {
       updateLastMessage(messages.at(-1).content);
       alertLimitReached();
+    } finally {
+      toggleDisabledState(false);
     }
   }
 
-  function renderMessage(text) {
+  function renderAssistantMessage(text) {
     const message = {
       id: Date.now(),
       timestamp: new Date(),
       author: assistant,
       text,
     };
 
-    customStore.push([{ type: 'insert', data: message }]);
+    dataSource.store().push([{ type: 'insert', data: message }]);
   }
 
   function updateLastMessage(text) {
-    const { items } = instance.option();
+    const items = dataSource.items();
     const lastMessage = items.at(-1);
     const data = {
       text: text ?? REGENERATION_TEXT,
     };
 
-    customStore.push([{
+    dataSource.store().push([{
       type: 'update',
       key: lastMessage.id,
       data,
@@ -110,6 +130,57 @@ $(() => {
     return result;
   }
 
+  function onCopyButtonClick(component, text) {
+    navigator.clipboard?.writeText(text);
+
+    component.option({ icon: 'check' });
+
+    setTimeout(() => {
+      component.option({ icon: 'copy' });
+    }, 2500);
+  }
+
+  function onRegenerateButtonClick() {
+    if (instance.option('alerts').length) {
+      return;
+    }
+
+    updateLastMessage();
+    regenerate();
+  }
+
+  function renderMessageContent(message, element) {
+    $('<div>')
+      .addClass('dx-chat-messagebubble-text')
+      .html(convertToHtml(message.text))
+      .appendTo(element);
+
+    const $buttonContainer = $('<div>')
+      .addClass('dx-bubble-button-container');
+
+    $('<div>')
+      .dxButton({
+        icon: 'copy',
+        stylingMode: 'text',
+        hint: 'Copy',
+        onClick: ({ component }) => {
+          onCopyButtonClick(component, message.text);
+        },
+      })
+      .appendTo($buttonContainer);
+
+    $('<div>')
+      .dxButton({
+        icon: 'refresh',
+        stylingMode: 'text',
+        hint: 'Regenerate',
+        onClick: onRegenerateButtonClick,
+      })
+      .appendTo($buttonContainer);
+
+    $buttonContainer.appendTo(element);
+  }
+
   const customStore = new DevExpress.data.CustomStore({
     key: 'id',
     load: () => {
@@ -132,21 +203,27 @@ $(() => {
       return d.promise();
     },
   });
+
+  const dataSource = new DevExpress.data.DataSource({
+    store: customStore,
+    paginate: false,
+  });
 
   const instance = $('#dx-ai-chat').dxChat({
-    dataSource: customStore,
+    user,
+    height: 710,
+    dataSource,
     reloadOnChange: false,
     showAvatar: false,
     showDayHeaders: false,
-    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();
+      dataSource.store().push([{ type: 'insert', data: { id: Date.now(), ...message } }]);
+
+      if (!instance.option('alerts').length) {
+        processMessageSending(message, event);
+      }
     },
     messageTemplate: (data, element) => {
       const { message } = data;
@@ -156,42 +233,7 @@ $(() => {
         return;
       }
 
-      const $textElement = $('<div>')
-        .addClass('dx-chat-messagebubble-text')
-        .html(convertToHtml(message.text))
-        .appendTo(element);
-
-      const $buttonContainer = $('<div>')
-        .addClass('dx-bubble-button-container');
-
-      $('<div>')
-        .dxButton({
-          icon: 'copy',
-          stylingMode: 'text',
-          hint: 'Copy',
-          onClick: ({ component }) => {
-            navigator.clipboard.writeText($textElement.text());
-            component.option({ icon: 'check' });
-            setTimeout(() => {
-              component.option({ icon: 'copy' });
-            }, 5000);
-          },
-        })
-        .appendTo($buttonContainer);
-
-      $('<div>')
-        .dxButton({
-          icon: 'refresh',
-          stylingMode: 'text',
-          hint: 'Regenerate',
-          onClick: () => {
-            updateLastMessage();
-            regenerate();
-          },
-        })
-        .appendTo($buttonContainer);
-
-      $buttonContainer.appendTo(element);
+      renderMessageContent(message, element);
     },
   }).dxChat('instance');
 });

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;
+}

apps/demos/Demos/Chat/Customization/Angular/app/app.component.css

@@ -0,0 +1,38 @@
+.demo-container {
+  min-width: 720px;
+  display: flex;
+  gap: 20px;
+}
+
+::ng-deep .chat-container {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+::ng-deep .options {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  min-width: 280px;
+  background-color: rgba(191, 191, 191, 0.15);
+  gap: 16px;
+}
+
+::ng-deep .dx-chat {
+  max-width: 480px;
+}
+
+::ng-deep .caption {
+  font-size: var(--dx-font-size-sm);
+  font-weight: 500;
+}
+
+::ng-deep .option-separator {
+  border-bottom: 1px solid var(--dx-color-border);
+}
+
+::ng-deep .dx-avatar {
+  border: 1px solid var(--dx-color-border);
+}