Chat: Fix html parsing in AI demo (#28772)

anna-shakhova · web-flow · commit 52c5092f59d9 · 2025-01-20T17:02:55.000+01:00
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.css b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.css
@@ -44,11 +44,6 @@
   margin-bottom: 0;
 }
 
-::ng-deep .dx-chat-messagebubble-content ol,
-::ng-deep .dx-chat-messagebubble-content ul {
-  white-space: normal;
-}
-
 ::ng-deep .dx-chat-messagebubble-content h1,
 ::ng-deep .dx-chat-messagebubble-content h2,
 ::ng-deep .dx-chat-messagebubble-content h3,
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
@@ -5,10 +5,11 @@ import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import rehypeStringify from 'rehype-stringify';
+import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
 import {
   User,
   Alert,
-  MessageEnteredEvent
+  MessageEnteredEvent,
 } from 'devextreme/ui/chat';
 import DataSource from 'devextreme/data/data_source';
 import CustomStore from 'devextreme/data/custom_store';
@@ -26,9 +27,10 @@ export class AppService {
     apiVersion: '2024-02-01',
     endpoint: 'https://public-api.devexpress.com/demo-openai',
     apiKey: 'DEMO',
-  }
+  };
 
   REGENERATION_TEXT = 'Regeneration...';
+
   ALERT_TIMEOUT = 1000 * 60;
 
   user: User = {
@@ -41,7 +43,9 @@ export class AppService {
   };
 
   store: any[] = [];
+
   messages: any[] = [];
+
   alerts: Alert[] = [];
 
   customStore: CustomStore;
@@ -54,7 +58,7 @@ export class AppService {
 
   constructor() {
     this.chatService = new AzureOpenAI(this.AzureOpenAIConfig);
-    this.initDataSource()
+    this.initDataSource();
     this.typingUsersSubject.next([]);
     this.alertsSubject.next([]);
   }
@@ -73,28 +77,24 @@ export class AppService {
         'dxChat-emptyListMessage': 'Chat is Empty',
         'dxChat-emptyListPrompt': 'AI Assistant is ready to answer your questions.',
         'dxChat-textareaPlaceholder': 'Ask AI Assistant...',
-      }
-    }
+      },
+    };
   }
 
   initDataSource() {
     this.customStore = new CustomStore({
       key: 'id',
-      load: () => {
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            resolve([...this.store]);
-          }, 0);
+      load: () => new Promise((resolve) => {
+        setTimeout(() => {
+          resolve([...this.store]);
+        }, 0);
+      }),
+      insert: (message) => new Promise((resolve) => {
+        setTimeout(() => {
+          this.store.push(message);
+          resolve(message);
         });
-      },
-      insert: (message) => {
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            this.store.push(message);
-            resolve(message);
-          });
-        });
-      },
+      }),
     });
 
     this.dataSource = new DataSource({
@@ -160,7 +160,7 @@ export class AppService {
 
   alertLimitReached() {
     this.setAlerts([{
-      message: 'Request limit reached, try again in a minute.'
+      message: 'Request limit reached, try again in a minute.',
     }]);
 
     setTimeout(() => {
@@ -189,6 +189,7 @@ export class AppService {
     const result = unified()
       .use(remarkParse)
       .use(remarkRehype)
+      .use(rehypeMinifyWhitespace)
       .use(rehypeStringify)
       .processSync(value)
       .toString();
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/Message.tsx b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/Message.tsx
@@ -3,6 +3,7 @@ import Button from 'devextreme-react/button';
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
+import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
 import rehypeStringify from 'rehype-stringify';
 import HTMLReactParser from 'html-react-parser';
 
@@ -13,6 +14,7 @@ function convertToHtml(value: string): string {
   const result = unified()
     .use(remarkParse)
     .use(remarkRehype)
+    .use(rehypeMinifyWhitespace)
     .use(rehypeStringify)
     .processSync(value)
     .toString();
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/styles.css b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/styles.css
@@ -44,11 +44,6 @@
   margin-bottom: 0;
 }
 
-.dx-chat-messagebubble-content ol,
-.dx-chat-messagebubble-content ul {
-  white-space: normal;
-}
-
 .dx-chat-messagebubble-content h1,
 .dx-chat-messagebubble-content h2,
 .dx-chat-messagebubble-content h3,
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/Message.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/Message.js
@@ -3,6 +3,7 @@ import Button from 'devextreme-react/button';
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
+import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
 import rehypeStringify from 'rehype-stringify';
 import HTMLReactParser from 'html-react-parser';
 import { REGENERATION_TEXT } from './data.js';
@@ -11,6 +12,7 @@ function convertToHtml(value) {
   const result = unified()
     .use(remarkParse)
     .use(remarkRehype)
+    .use(rehypeMinifyWhitespace)
     .use(rehypeStringify)
     .processSync(value)
     .toString();
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/styles.css b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/styles.css
@@ -44,11 +44,6 @@
   margin-bottom: 0;
 }
 
-.dx-chat-messagebubble-content ol,
-.dx-chat-messagebubble-content ul {
-  white-space: normal;
-}
-
 .dx-chat-messagebubble-content h1,
 .dx-chat-messagebubble-content h2,
 .dx-chat-messagebubble-content h3,
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
@@ -26,8 +26,7 @@
           <div
             v-html="convertToHtml(data.message.text)"
             class="dx-chat-messagebubble-text"
-          >
-          </div>
+          />
           <div class="dx-bubble-button-container">
             <DxButton
               :icon="copyButtonIcon"
@@ -99,7 +98,7 @@ function toggleDisabledState(disabled, event = undefined) {
   } else {
     event?.target.focus();
   }
-};
+}
 
 function updateLastMessage(text = REGENERATION_TEXT) {
   const items = dataSource.items();
@@ -148,7 +147,7 @@ async function processMessageSending(message, event) {
 
 function alertLimitReached() {
   alerts.value = [{
-    message: 'Request limit reached, try again in a minute.'
+    message: 'Request limit reached, try again in a minute.',
   }];
 
   setTimeout(() => {
@@ -185,7 +184,7 @@ function onCopyButtonClick(message) {
   copyButtonIcon.value = 'check';
 
   setTimeout(() => {
-      copyButtonIcon.value = 'copy';
+    copyButtonIcon.value = 'copy';
   }, 2500);
 }
 
@@ -245,11 +244,6 @@ function onRegenerateButtonClick() {
   margin-bottom: 0;
 }
 
-.dx-chat-messagebubble-content ol,
-.dx-chat-messagebubble-content ul {
-  white-space: normal;
-}
-
 .dx-chat-messagebubble-content h1,
 .dx-chat-messagebubble-content h2,
 .dx-chat-messagebubble-content h3,
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts
@@ -1,25 +1,26 @@
-import CustomStore from "devextreme/data/custom_store";
-import DataSource from "devextreme/data/data_source";
+import CustomStore from 'devextreme/data/custom_store';
+import DataSource from 'devextreme/data/data_source';
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import rehypeStringify from 'rehype-stringify';
+import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
 
 export const dictionary = {
   en: {
     'dxChat-emptyListMessage': 'Chat is Empty',
     'dxChat-emptyListPrompt': 'AI Assistant is ready to answer your questions.',
     'dxChat-textareaPlaceholder': 'Ask AI Assistant...',
   },
-}
+};
 
 export const AzureOpenAIConfig = {
   dangerouslyAllowBrowser: true,
   deployment: 'gpt-4o-mini',
   apiVersion: '2024-02-01',
   endpoint: 'https://public-api.devexpress.com/demo-openai',
   apiKey: 'DEMO',
-}
+};
 
 export const REGENERATION_TEXT = 'Regeneration...';
 export const CHAT_DISABLED_CLASS = 'dx-chat-disabled';
@@ -39,35 +40,32 @@ export const messages = [];
 
 const customStore = new CustomStore({
   key: 'id',
-  load: () => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve([...store]);
-      }, 0);
+  load: () => new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([...store]);
+    }, 0);
+  }),
+  insert: (message) => new Promise((resolve) => {
+    setTimeout(() => {
+      store.push(message);
+      resolve(message);
     });
-  },
-  insert: (message) => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        store.push(message);
-        resolve(message);
-      });
-    });
-  },
+  }),
 });
 
 export const dataSource = new DataSource({
   store: customStore,
   paginate: false,
-})
+});
 
 export function convertToHtml(value: string) {
   const result = unified()
-      .use(remarkParse)
-      .use(remarkRehype)
-      .use(rehypeStringify)
-      .processSync(value)
-      .toString();
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeMinifyWhitespace)
+    .use(rehypeStringify)
+    .processSync(value)
+    .toString();
 
   return result;
 }
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.html b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.html
@@ -14,11 +14,13 @@
       import remarkParse from "https://esm.sh/remark-parse@11?bundle";
       import remarkRehype from "https://esm.sh/remark-rehype@11?bundle";
       import rehypeStringify from "https://esm.sh/rehype-stringify@10?bundle";
+      import rehypeMinifyWhitespace from "https://esm.sh/rehype-minify-whitespace@6?bundle";
 
       window.AzureOpenAI = AzureOpenAI;
       window.unified = unified;
       window.remarkParse = remarkParse;
       window.remarkRehype = remarkRehype;
+      window.rehypeMinifyWhitespace = rehypeMinifyWhitespace;
       window.rehypeStringify = rehypeStringify;
     </script>
 
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.js
@@ -124,6 +124,7 @@ $(() => {
     const result = unified()
       .use(remarkParse)
       .use(remarkRehype)
+      .use(rehypeMinifyWhitespace)
       .use(rehypeStringify)
       .processSync(value)
       .toString();
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/styles.css b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/styles.css
@@ -44,11 +44,6 @@
   margin-bottom: 0;
 }
 
-.dx-chat-messagebubble-content ol,
-.dx-chat-messagebubble-content ul {
-  white-space: normal;
-}
-
 .dx-chat-messagebubble-content h1,
 .dx-chat-messagebubble-content h2,
 .dx-chat-messagebubble-content h3,
diff --git a/apps/demos/configs/Angular/config.js b/apps/demos/configs/Angular/config.js
@@ -195,6 +195,7 @@ window.config = {
     'rehype-parse': 'externals:unified/rehype-parse.bundle.js',
     'rehype-remark': 'externals:unified/rehype-remark.bundle.js',
     'rehype-stringify': 'externals:unified/rehype-stringify.bundle.js',
+    'rehype-minify-whitespace': 'externals:unified/rehype-minify-whitespace.bundle.js',
     /**/
 
     /** openai */
diff --git a/apps/demos/configs/React/config.js b/apps/demos/configs/React/config.js
@@ -130,6 +130,7 @@ window.config = {
     'rehype-parse': 'externals:unified/rehype-parse.bundle.js',
     'rehype-remark': 'externals:unified/rehype-remark.bundle.js',
     'rehype-stringify': 'externals:unified/rehype-stringify.bundle.js',
+    'rehype-minify-whitespace': 'externals:unified/rehype-minify-whitespace.bundle.js',
     /**/
 
     /** openai */
diff --git a/apps/demos/configs/ReactJs/config.js b/apps/demos/configs/ReactJs/config.js
@@ -134,6 +134,7 @@ window.config = {
     'rehype-parse': 'externals:unified/rehype-parse.bundle.js',
     'rehype-remark': 'externals:unified/rehype-remark.bundle.js',
     'rehype-stringify': 'externals:unified/rehype-stringify.bundle.js',
+    'rehype-minify-whitespace': 'externals:unified/rehype-minify-whitespace.bundle.js',
     /**/
 
     /** openai */
diff --git a/apps/demos/configs/Vue/config.js b/apps/demos/configs/Vue/config.js
@@ -129,6 +129,7 @@ window.config = {
     'rehype-parse': 'externals:unified/rehype-parse.bundle.js',
     'rehype-remark': 'externals:unified/rehype-remark.bundle.js',
     'rehype-stringify': 'externals:unified/rehype-stringify.bundle.js',
+    'rehype-minify-whitespace': 'externals:unified/rehype-minify-whitespace.bundle.js',
     /**/
 
     /** openai */
diff --git a/apps/demos/package.json b/apps/demos/package.json
@@ -68,6 +68,7 @@
         "rehype-parse": "^9.0.1",
         "rehype-remark": "^10.0.0",
         "rehype-stringify": "^10.0.1",
+        "rehype-minify-whitespace": "^6.0.2",
         "remark-parse": "^11.0.0",
         "remark-rehype": "^11.1.1",
         "remark-stringify": "^11.0.0",
diff --git a/apps/demos/rollup.external.bundles.config.mjs b/apps/demos/rollup.external.bundles.config.mjs
@@ -107,5 +107,16 @@ export default [
     },
     external: [],
     plugins,
+  },
+  {
+    input: NG_BASE_DIR + `rehype-minify-whitespace/index.js`,
+    output: {
+      file: OUTPUT_DIR + `unified/rehype-minify-whitespace.bundle.js`,
+      format,
+      name: 'rehypeRemark',
+      globals: { },
+    },
+    external: [],
+    plugins,
   }
 ];
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
