fix: batch updates and scrolling issues (#4167)

* use Flush instead of timeout to prevent batch updates

* fix scroll while streaming

* fix: Use setTimeout instead with flushSync for batch updates in buildUtils.ts

* [autofix.ci] apply automated fixes

* fix: Set selected view field when session is visible in IOModal

* fix: Set selected view field when session is visible in IOModal

* fix: Reset selected view field when closing IOModal

* fix: Update date format in DateReader component

- Pad hours, minutes, and seconds with leading zeros
- Remove AM/PM from the formatted date
- Use 24-hour format for hours in the formatted date

fix: Update session ID generation in IOModal component

- Remove AM/PM from the session ID format
- Use 24-hour format for hours in the session ID

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/package-lock.json

@@ -16296,12 +16296,6 @@
       "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
       "license": "MIT"
     },
-    "node_modules/tinycolor2": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
-      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
-      "license": "MIT"
-    },
     "node_modules/tmp": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",

src/frontend/src/components/dateReaderComponent/index.tsx

@@ -9,13 +9,10 @@ export default function DateReader({
   const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are 0-indexed in JavaScript
   const day = String(date.getDate()).padStart(2, "0");
 
-  const hours = date.getHours();
+  const hours = String(date.getHours()).padStart(2, "0");
   const minutes = String(date.getMinutes()).padStart(2, "0");
-
+  const seconds = String(date.getSeconds()).padStart(2, "0");
-  const ampm = hours >= 12 ? "PM" : "AM";
+  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-  const hours12 = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours; // Convert to 12-hour format
-
-  const formattedDate = `${year}-${month}-${day} ${hours12}:${minutes} ${ampm}`;
 
   return <span>{formattedDate}</span>;
 }

src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx

@@ -133,7 +133,7 @@ export default function ChatMessage({
         }, 200);
       }
     }
-  }, [lastMessage]);
+  }, [lastMessage, chat]);
 
   let decodedMessage = chatMessage ?? "";
   try {

src/frontend/src/modals/IOModal/index.tsx

@@ -202,10 +202,16 @@ export default function IOModal({
   useEffect(() => {
     if (!visibleSession) {
       setSessionId(
-        `Session ${new Date().toLocaleString("en-US", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit", hour12: true, second: "2-digit" })}`,
+        `Session ${new Date().toLocaleString("en-US", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit", hour12: false, second: "2-digit", timeZone: "UTC" })}`,
       );
     } else if (visibleSession) {
       setSessionId(visibleSession);
+      if (selectedViewField?.type === "Session") {
+        setSelectedViewField({
+          id: visibleSession,
+          type: "Session",
+        });
+      }
     }
   }, [visibleSession]);
 
@@ -437,6 +443,7 @@ export default function IOModal({
                       <Button
                         onClick={(_) => {
                           setvisibleSession(undefined);
+                          setSelectedViewField(undefined);
                         }}
                       >
                         New Chat

src/frontend/src/stores/messagesStore.ts

@@ -34,8 +34,8 @@ export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
     // look for the message list backwards to find the message faster
     set((state) => {
       const updatedMessages = [...state.messages];
-      for (let i = get().messages.length - 1; i >= 0; i--) {
+      for (let i = state.messages.length - 1; i >= 0; i--) {
-        if (get().messages[i].id === message.id) {
+        if (state.messages[i].id === message.id) {
           updatedMessages[i] = { ...updatedMessages[i], ...message };
           break;
         }

src/frontend/src/utils/buildUtils.ts

@@ -3,6 +3,7 @@ import { performStreamingRequest } from "@/controllers/API/api";
 import { useMessagesStore } from "@/stores/messagesStore";
 import { AxiosError } from "axios";
 import { timeStamp } from "console";
+import { flushSync } from "react-dom";
 import { Edge, Node } from "reactflow";
 import { BuildStatus } from "../constants/enums";
 import { getVerticesOrder, postBuildVertex } from "../controllers/API";
@@ -285,11 +286,12 @@ export async function buildFlowVertices({
         return true;
       }
       case "token": {
-        // await one milisencond so we avoid react batched updates
+        // flushSync and timeout is needed to avoid react batched updates
-        await new Promise((resolve) => {
+        setTimeout(() => {
-          useMessagesStore.getState().updateMessagePartial(data);
+          flushSync(() => {
-          setTimeout(resolve, 10);
+            useMessagesStore.getState().updateMessagePartial(data);
-        });
+          });
+        }, 10);
         return true;
       }
       case "end": {