From 5c334a74b33f29ae303cfa4e74772ac74f8c65b0 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 11 Dec 2024 11:04:55 -0300
Subject: [PATCH] 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
---
 .../modals/IOModal/components/chatView/newChatView.tsx   | 9 ++++++---
 src/frontend/src/stores/flowStore.ts                     | 2 ++
 src/frontend/src/stores/messagesStore.ts                 | 4 ++++
 src/frontend/src/types/zustand/messages/index.ts         | 1 +
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx b/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx
index 7619cce68..6785ed863 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx
+++ b/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>
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 8a2b821b1..caa315d13 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/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 }),
diff --git a/src/frontend/src/stores/messagesStore.ts b/src/frontend/src/stores/messagesStore.ts
index 983c84e5f..01227e257 100644
--- a/src/frontend/src/stores/messagesStore.ts
+++ b/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) => {
diff --git a/src/frontend/src/types/zustand/messages/index.ts b/src/frontend/src/types/zustand/messages/index.ts
index 66c75ba54..081ec32ce 100644
--- a/src/frontend/src/types/zustand/messages/index.ts
+++ b/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;
 };