Revised streaming performance, added optimizations

Author: Paul-Borisov

spfx-latest/config/package-solution.json

@@ -4,16 +4,16 @@
     "name": "azure-openai-chat",
     "title": "Azure OpenAI Chat Web Part",
     "id": "64e358ba-f88c-4fee-9a8a-6db06299d90a",
-    "version": "1.3.0.0",
+    "version": "1.3.1.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
     "developer": {
       "name": "Paul Borisov",
-      "websiteUrl": "https://www.linkedin.com/in/paul-borisov-b412a8171/",
+      "websiteUrl": "https://www.linkedin.com/in/paul-borisov/",
       "privacyUrl": "https://github.com/Paul-Borisov/react-azure-open-ai-chat-web-part-spfx",
       "termsOfUseUrl": "https://github.com/Paul-Borisov/react-azure-open-ai-chat-web-part-spfx?tab=MIT-1-ov-file",
-      "mpnId": "1848586"
+      "mpnId": ""
     },
     "webApiPermissionRequests": [
       {

spfx-latest/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "azure-openai-chat",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "engines": {
     "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"

spfx-latest/package.json

@@ -5,6 +5,7 @@ import useChatHistory from 'hooks/useChatHistory';
 import useStorageService from 'hooks/useStorageService';
 import { FunctionComponent } from 'react';
 import * as React from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
 import VoiceOutput from 'shared/components/Speech/VoiceOutput';
 import Application, { GptModels } from 'shared/constants/Application';
 import HtmlHelper from 'shared/helpers/HtmlHelper';
@@ -164,6 +165,7 @@ const ContentPanel: FunctionComponent<IContentPanelProps> = ({ props }) => {
   }, [model]);
 
   const elements: ContentPanelElements = React.useMemo(() => new ContentPanelElements(props), []);
+  const refLatestResponseFromAi = React.useRef<HTMLDivElement>(null);
 
   return (
     <>
@@ -534,12 +536,18 @@ const ContentPanel: FunctionComponent<IContentPanelProps> = ({ props }) => {
         } else {
           const assistantResponses = newChatHistory.filter((r) => r.role === 'assistant');
           assistantResponses[assistantResponses.length - 1].content += ChatHelper.cleanupResponseContent(response);
-          const messageSelector = isCustomPanelOpen
-            ? `.${styles.customPanel} .${styles.message}`
-            : `div[id="${wpId}"] .${styles.message}`;
-          const allMessages = document.querySelectorAll(messageSelector);
-          const lastMessage = allMessages[allMessages.length - 1];
-          lastMessage.innerHTML += response;
+          const queryParameters = new URLSearchParams(window.location.search);
+          const prev = queryParameters.get('prev');
+          if (!prev && refLatestResponseFromAi.current) {
+            refLatestResponseFromAi.current.innerHTML += response;
+          } else {
+            const messageSelector = isCustomPanelOpen
+              ? `.${styles.customPanel} .${styles.message}`
+              : `div[id="${wpId}"] .${styles.message}`;
+            const allMessages = document.querySelectorAll(messageSelector);
+            const lastMessage = allMessages[allMessages.length - 1];
+            lastMessage.innerHTML += response;
+          }
         }
         // Bug fix: the following line caused to heavy rerendering. Replaced with a lighter code above.
         //setChatHistory(newChatHistory); // Sets the updated array with new memory address.
@@ -549,36 +557,42 @@ const ContentPanel: FunctionComponent<IContentPanelProps> = ({ props }) => {
 
     if (props.apiService.isConfigured()) {
       if (!props.streaming) {
-        props.apiService.callQueryText(payload).then((response) => handleResponse(response));
+        props.apiService.callQueryText(payload).then((response) => {
+          unstable_batchedUpdates(() => {
+            handleResponse(response);
+          });
+        });
       } else {
         let firstResponse = true;
         props.apiService.callQueryText(payload, true, stopSignal, (message: string, done?: boolean, isError?: boolean) => {
-          setIsProgress(false);
-          setIsStreamProgress(true);
-          if (isError) {
-            setResponseContentError(strings.TextUndeterminedError);
-            setIsStreamProgress(false);
-            setFormattedContent([]);
-          } else if (!done) {
-            if (message) {
-              handleResponseStream(message, firstResponse);
-              firstResponse = false;
-              setResponseContentError(undefined);
-            }
-          } else {
-            setIsStreamProgress(false);
-            setFormattedContent([]);
-            if (!firstResponse) {
-              setResponseContentError(undefined);
-              //const chatMessageId = `${styles.message}_${newChatHistory.length - 1}`;
-              const chatMessageId = `${styles.message}_${wpId}_${newChatHistory.length - 1}`;
-              setDisabledHighlights([...disabledHighlights.filter((id) => id !== chatMessageId)]);
-              saveChatHistory(newChatHistory);
-            } else {
-              // Authentication error?
+          unstable_batchedUpdates(() => {
+            setIsProgress(false);
+            setIsStreamProgress(true);
+            if (isError) {
               setResponseContentError(strings.TextUndeterminedError);
+              setIsStreamProgress(false);
+              setFormattedContent([]);
+            } else if (!done) {
+              if (message) {
+                handleResponseStream(message, firstResponse);
+                firstResponse = false;
+                setResponseContentError(undefined);
+              }
+            } else {
+              setIsStreamProgress(false);
+              setFormattedContent([]);
+              if (!firstResponse) {
+                setResponseContentError(undefined);
+                //const chatMessageId = `${styles.message}_${newChatHistory.length - 1}`;
+                const chatMessageId = `${styles.message}_${wpId}_${newChatHistory.length - 1}`;
+                setDisabledHighlights([...disabledHighlights.filter((id) => id !== chatMessageId)]);
+                saveChatHistory(newChatHistory);
+              } else {
+                // Authentication error?
+                setResponseContentError(strings.TextUndeterminedError);
+              }
             }
-          }
+          });
         });
       }
     } else {
@@ -703,6 +717,7 @@ const ContentPanel: FunctionComponent<IContentPanelProps> = ({ props }) => {
                 <div
                   id={chatMessageId}
                   className={['ai', styles.message, isCustomPanelOpen ? styles.insidePanel : undefined].join(' ').trim()}
+                  ref={refLatestResponseFromAi}
                 >
                   {!disabledHighlights?.find((id) => id === chatMessageId) ? formattedRows[index] : content}
                 </div>
@@ -711,6 +726,7 @@ const ContentPanel: FunctionComponent<IContentPanelProps> = ({ props }) => {
                   id={chatMessageId}
                   className={['ai', styles.message].join(' ')}
                   dangerouslySetInnerHTML={{ __html: r.content }}
+                  ref={refLatestResponseFromAi}
                 />
               )
             ) : (