refactor: Add displayLoadingMessage flag to MessagesStoreType and adjust chat view layout (#5062)

* refactor: Adjust chat view layout for responsiveness

The code changes in this commit adjust the layout of the chat view component to improve responsiveness. Specifically, the CSS classes for the chat container and input container have been modified to make them responsive on different screen sizes. This ensures that the chat view is displayed properly on both desktop and mobile devices.

Refactoring the layout in this way enhances the user experience by making the chat view more accessible and user-friendly across different devices.

* [autofix.ci] apply automated fixes

* feat: Add displayLoadingMessage flag to MessagesStoreType

* feat: Add displayLoadingMessage flag to MessagesStoreType

* feat: Add useMessagesStore to flowStore for displaying loading message

* refactor: Adjust chat view layout for responsiveness and loading message display

* [autofix.ci] apply automated fixes

src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx

@@ -36,6 +36,9 @@ export default function ChatView({
   const nodes = useFlowStore((state) => state.nodes);
   const chatInput = inputs.find((input) => input.type === "ChatInput");
   const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
+  const displayLoadingMessage = useMessagesStore(
+    (state) => state.displayLoadingMessage,
+  );
 
   const inputTypes = inputs.map((obj) => obj.type);
   const updateFlowPool = useFlowStore((state) => state.updateFlowPool);
@@ -185,13 +188,13 @@ export default function ChatView({
           ))}
         <div
           className={
-            lockChat
-              ? "m-auto w-full max-w-[768px] py-4 word-break-break-word md:w-5/6"
+            displayLoadingMessage
+              ? "w-full max-w-[768px] py-4 word-break-break-word md:w-5/6"
               : ""
           }
           ref={ref}
         >
-          {lockChat &&
+          {displayLoadingMessage &&
             !(chatHistory?.[chatHistory.length - 1]?.category === "error") &&
             flowRunningSkeletonMemo}
         </div>

src/frontend/src/stores/flowStore.ts

@@ -46,6 +46,7 @@ import { getInputsAndOutputs } from "../utils/storeUtils";
 import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowsManagerStore from "./flowsManagerStore";
+import { useMessagesStore } from "./messagesStore";
 import { useTypesStore } from "./typesStore";
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
@@ -83,6 +84,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   onFlowPage: false,
   lockChat: false,
   setLockChat: (lockChat) => {
+    useMessagesStore.setState({ displayLoadingMessage: lockChat });
     set({ lockChat });
   },
   setOnFlowPage: (FlowPage) => set({ onFlowPage: FlowPage }),

src/frontend/src/stores/messagesStore.ts

@@ -2,6 +2,7 @@ import { create } from "zustand";
 import { MessagesStoreType } from "../types/zustand/messages";
 
 export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
+  displayLoadingMessage: false,
   deleteSession: (id) => {
     set((state) => {
       const updatedMessages = state.messages.filter(
@@ -20,6 +21,9 @@ export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
       get().updateMessagePartial(message);
       return;
     }
+    if (message.sender === "Machine") {
+      set(() => ({ displayLoadingMessage: false }));
+    }
     set(() => ({ messages: [...get().messages, message] }));
   },
   removeMessage: (message) => {

src/frontend/src/types/zustand/messages/index.ts

@@ -12,4 +12,5 @@ export type MessagesStoreType = {
   clearMessages: () => void;
   removeMessages: (ids: string[]) => void;
   deleteSession: (id: string) => void;
+  displayLoadingMessage: boolean;
 };