Bugfix: saving all the time, scroll on chat IO / Feat: Changing building status on navigation bar (#1460)

* 🐛 fix(menuBar/index.tsx): add isBuilding state to handle display of build status
✨ feat(menuBar/index.tsx): add printByBuildStatus function to display appropriate build status based on isBuilding and saveLoading states
🐛 fix(api.tsx): set isBuilding state to false when encountering a 500 error response
🐛 fix(buildUtils.ts): set isBuilding state to true before building vertices and set it to false after build completion

* 🐛 fix(chatMessage): scroll to last chat message when rendering a new message to improve user experience
🔥 refactor(chatMessage): remove unused state and variables to improve code readability and maintainability
🔥 refactor(flowsManagerStore): remove redundant code and improve code readability

* Add logger and session imports, and update build_vertex function

* Fix conditional rendering bug in IOView component

* Remove unused imports from chat.py

* add last message to end

* 🔧 fix(chatMessage): add useEffect hook to scroll to last chat message after rendering
🔧 fix(chatMessage): add dependency array to useEffect hook to prevent unnecessary re-renders

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -33,6 +33,7 @@ export const MenuBar = ({
   const n = useFlowStore((state) => state.nodes);
 
   const navigate = useNavigate();
+  const isBuilding = useFlowStore((state) => state.isBuilding);
 
   function handleAddFlow() {
     try {
@@ -45,6 +46,15 @@ export const MenuBar = ({
     }
   }
 
+  function printByBuildStatus() {
+    if (isBuilding) {
+      return "Building...";
+    } else if (saveLoading) {
+      return "Saving...";
+    }
+    return "Saved";
+  }
+
   return currentFlow ? (
     <div className="round-button-div">
       <button
@@ -127,13 +137,13 @@ export const MenuBar = ({
       >
         <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
           <IconComponent
-            name={saveLoading ? "Loader2" : "CheckCircle2"}
+            name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
             className={cn(
               "h-4 w-4",
-              saveLoading ? "animate-spin" : "animate-wiggle"
+              isBuilding || saveLoading ? "animate-spin" : "animate-wiggle"
             )}
           />
-          {saveLoading ? "Saving..." : "Saved"}
+          {printByBuildStatus()}
         </div>
       </Tooltip>
     </div>

src/frontend/src/components/newChatView/chatMessage/index.tsx

@@ -1,5 +1,5 @@
 import Convert from "ansi-to-html";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Markdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
@@ -23,208 +23,228 @@ export default function ChatMessage({
   const template = chat.template;
   const [promptOpen, setPromptOpen] = useState(false);
   const chat_message = chat.message.toString();
+
+  useEffect(() => {
+    const element = document.getElementById("last-chat-message");
+    if (element) {
+      setTimeout(() => {
+        element.scrollIntoView({ behavior: "smooth" });
+      }, 200);
+    }
+  }, [lastMessage]);
+
   return (
-    <div
-      className={classNames("form-modal-chat-position", chat.isSend ? "" : " ")}
-    >
-      <div className={classNames("form-modal-chatbot-icon ")}>
-        {!chat.isSend ? (
-          <div className="form-modal-chat-image">
-            <div className="form-modal-chat-bot-icon ">
-              <img
-                src={Robot}
-                className="form-modal-chat-icon-img"
-                alt="robot_image"
-              />
-            </div>
-            <span className="truncate text-xs">{chat.sender_name}</span>
-          </div>
-        ) : (
-          <div className="form-modal-chat-image">
-            <div className="form-modal-chat-user-icon ">
-              <img
-                src={MaleTechnology}
-                className="form-modal-chat-icon-img"
-                alt="male_technology"
-              />
-            </div>
-            <span className="truncate text-xs">{chat.sender_name}</span>
-          </div>
+    <>
+      <div
+        className={classNames(
+          "form-modal-chat-position",
+          chat.isSend ? "" : " "
         )}
-      </div>
-      {!chat.isSend ? (
-        <div className="form-modal-chat-text-position">
-          <div className="form-modal-chat-text">
-            {hidden && chat.thought && chat.thought !== "" && (
-              <div
-                onClick={(): void => setHidden((prev) => !prev)}
-                className="form-modal-chat-icon-div"
-              >
-                <IconComponent
-                  name="MessageSquare"
-                  className="form-modal-chat-icon"
+      >
+        <div className={classNames("form-modal-chatbot-icon ")}>
+          {!chat.isSend ? (
+            <div className="form-modal-chat-image">
+              <div className="form-modal-chat-bot-icon ">
+                <img
+                  src={Robot}
+                  className="form-modal-chat-icon-img"
+                  alt="robot_image"
                 />
               </div>
-            )}
-            {chat.thought && chat.thought !== "" && !hidden && (
-              <SanitizedHTMLWrapper
-                className=" form-modal-chat-thought"
-                content={convert.toHtml(chat.thought)}
-                onClick={() => setHidden((prev) => !prev)}
-              />
-            )}
-            {chat.thought && chat.thought !== "" && !hidden && <br></br>}
-            <div className="w-full">
-              <div className="w-full dark:text-white">
-                <div className="w-full">
-                  {useMemo(
-                    () =>
-                      chat.message.toString() === "" && lockChat ? (
-                        <IconComponent
-                          name="MoreHorizontal"
-                          className="h-8 w-8 animate-pulse"
-                        />
-                      ) : (
-                        <Markdown
-                          remarkPlugins={[remarkGfm, remarkMath]}
-                          rehypePlugins={[rehypeMathjax]}
-                          className="markdown prose min-w-full text-primary word-break-break-word
+              <span className="truncate text-xs">{chat.sender_name}</span>
+            </div>
+          ) : (
+            <div className="form-modal-chat-image">
+              <div className="form-modal-chat-user-icon ">
+                <img
+                  src={MaleTechnology}
+                  className="form-modal-chat-icon-img"
+                  alt="male_technology"
+                />
+              </div>
+              <span className="truncate text-xs">{chat.sender_name}</span>
+            </div>
+          )}
+        </div>
+        {!chat.isSend ? (
+          <div className="form-modal-chat-text-position">
+            <div className="form-modal-chat-text">
+              {hidden && chat.thought && chat.thought !== "" && (
+                <div
+                  onClick={(): void => setHidden((prev) => !prev)}
+                  className="form-modal-chat-icon-div"
+                >
+                  <IconComponent
+                    name="MessageSquare"
+                    className="form-modal-chat-icon"
+                  />
+                </div>
+              )}
+              {chat.thought && chat.thought !== "" && !hidden && (
+                <SanitizedHTMLWrapper
+                  className=" form-modal-chat-thought"
+                  content={convert.toHtml(chat.thought)}
+                  onClick={() => setHidden((prev) => !prev)}
+                />
+              )}
+              {chat.thought && chat.thought !== "" && !hidden && <br></br>}
+              <div className="w-full">
+                <div className="w-full dark:text-white">
+                  <div className="w-full">
+                    {useMemo(
+                      () =>
+                        chat.message.toString() === "" && lockChat ? (
+                          <IconComponent
+                            name="MoreHorizontal"
+                            className="h-8 w-8 animate-pulse"
+                          />
+                        ) : (
+                          <Markdown
+                            remarkPlugins={[remarkGfm, remarkMath]}
+                            rehypePlugins={[rehypeMathjax]}
+                            className="markdown prose min-w-full text-primary word-break-break-word
                      dark:prose-invert"
-                          components={{
-                            pre({ node, ...props }) {
-                              return <>{props.children}</>;
-                            },
-                            code: ({
-                              node,
-                              inline,
-                              className,
-                              children,
-                              ...props
-                            }) => {
-                              if (children.length) {
-                                if (children[0] === "▍") {
-                                  return (
-                                    <span className="form-modal-markdown-span">
-                                      ▍
-                                    </span>
+                            components={{
+                              pre({ node, ...props }) {
+                                return <>{props.children}</>;
+                              },
+                              code: ({
+                                node,
+                                inline,
+                                className,
+                                children,
+                                ...props
+                              }) => {
+                                if (children.length) {
+                                  if (children[0] === "▍") {
+                                    return (
+                                      <span className="form-modal-markdown-span">
+                                        ▍
+                                      </span>
+                                    );
+                                  }
+
+                                  children[0] = (children[0] as string).replace(
+                                    "`▍`",
+                                    "▍"
                                   );
                                 }
 
-                                children[0] = (children[0] as string).replace(
-                                  "`▍`",
-                                  "▍"
+                                const match = /language-(\w+)/.exec(
+                                  className || ""
                                 );
-                              }
 
-                              const match = /language-(\w+)/.exec(
-                                className || ""
-                              );
-
-                              return !inline ? (
-                                <CodeTabsComponent
-                                  isMessage
-                                  tabs={[
-                                    {
-                                      name: (match && match[1]) || "",
-                                      mode: (match && match[1]) || "",
-                                      image:
-                                        "https://curl.se/logo/curl-symbol-transparent.png",
-                                      language: (match && match[1]) || "",
-                                      code: String(children).replace(/\n$/, ""),
-                                    },
-                                  ]}
-                                  activeTab={"0"}
-                                  setActiveTab={() => {}}
-                                />
-                              ) : (
-                                <code className={className} {...props}>
-                                  {children}
-                                </code>
-                              );
-                            },
-                          }}
-                        >
-                          {chat_message}
-                        </Markdown>
-                      ),
-                    [chat.message, chat_message]
+                                return !inline ? (
+                                  <CodeTabsComponent
+                                    isMessage
+                                    tabs={[
+                                      {
+                                        name: (match && match[1]) || "",
+                                        mode: (match && match[1]) || "",
+                                        image:
+                                          "https://curl.se/logo/curl-symbol-transparent.png",
+                                        language: (match && match[1]) || "",
+                                        code: String(children).replace(
+                                          /\n$/,
+                                          ""
+                                        ),
+                                      },
+                                    ]}
+                                    activeTab={"0"}
+                                    setActiveTab={() => {}}
+                                  />
+                                ) : (
+                                  <code className={className} {...props}>
+                                    {children}
+                                  </code>
+                                );
+                              },
+                            }}
+                          >
+                            {chat_message}
+                          </Markdown>
+                        ),
+                      [chat.message, chat_message]
+                    )}
+                  </div>
+                  {chat.files && (
+                    <div className="my-2 w-full">
+                      {chat.files.map((file, index) => {
+                        return (
+                          <div key={index} className="my-2 w-full">
+                            <FileCard
+                              fileName={"Generated File"}
+                              fileType={file.data_type}
+                              content={file.data}
+                            />
+                          </div>
+                        );
+                      })}
+                    </div>
                   )}
                 </div>
-                {chat.files && (
-                  <div className="my-2 w-full">
-                    {chat.files.map((file, index) => {
-                      return (
-                        <div key={index} className="my-2 w-full">
-                          <FileCard
-                            fileName={"Generated File"}
-                            fileType={file.data_type}
-                            content={file.data}
-                          />
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
               </div>
             </div>
           </div>
-        </div>
-      ) : (
-        <div>
-          {template ? (
-            <>
-              <button
-                className="form-modal-initial-prompt-btn"
-                onClick={() => {
-                  setPromptOpen((old) => !old);
-                }}
-              >
-                Display Prompt
-                <IconComponent
-                  name="ChevronDown"
-                  className={
-                    "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
-                  }
-                />
-              </button>
-              <span className="prose text-primary word-break-break-word dark:prose-invert">
-                {promptOpen
-                  ? template?.split("\n")?.map((line, index) => {
-                      const regex = /{([^}]+)}/g;
-                      let match;
-                      let parts: Array<JSX.Element | string> = [];
-                      let lastIndex = 0;
-                      while ((match = regex.exec(line)) !== null) {
-                        // Push text up to the match
-                        if (match.index !== lastIndex) {
-                          parts.push(line.substring(lastIndex, match.index));
-                        }
-                        // Push div with matched text
-                        if (chat.message[match[1]]) {
-                          parts.push(
-                            <span className="chat-message-highlight">
-                              {chat.message[match[1]]}
-                            </span>
-                          );
-                        }
+        ) : (
+          <div>
+            {template ? (
+              <>
+                <button
+                  className="form-modal-initial-prompt-btn"
+                  onClick={() => {
+                    setPromptOpen((old) => !old);
+                  }}
+                >
+                  Display Prompt
+                  <IconComponent
+                    name="ChevronDown"
+                    className={
+                      "h-3 w-3 transition-all " +
+                      (promptOpen ? "rotate-180" : "")
+                    }
+                  />
+                </button>
+                <span className="prose text-primary word-break-break-word dark:prose-invert">
+                  {promptOpen
+                    ? template?.split("\n")?.map((line, index) => {
+                        const regex = /{([^}]+)}/g;
+                        let match;
+                        let parts: Array<JSX.Element | string> = [];
+                        let lastIndex = 0;
+                        while ((match = regex.exec(line)) !== null) {
+                          // Push text up to the match
+                          if (match.index !== lastIndex) {
+                            parts.push(line.substring(lastIndex, match.index));
+                          }
+                          // Push div with matched text
+                          if (chat.message[match[1]]) {
+                            parts.push(
+                              <span className="chat-message-highlight">
+                                {chat.message[match[1]]}
+                              </span>
+                            );
+                          }
 
-                        // Update last index
-                        lastIndex = regex.lastIndex;
-                      }
-                      // Push text after the last match
-                      if (lastIndex !== line.length) {
-                        parts.push(line.substring(lastIndex));
-                      }
-                      return <p>{parts}</p>;
-                    })
-                  : chat.message.toString()}
-              </span>
-            </>
-          ) : (
-            <span>{chat.message.toString()}</span>
-          )}
-        </div>
-      )}
-    </div>
+                          // Update last index
+                          lastIndex = regex.lastIndex;
+                        }
+                        // Push text after the last match
+                        if (lastIndex !== line.length) {
+                          parts.push(line.substring(lastIndex));
+                        }
+                        return <p>{parts}</p>;
+                      })
+                    : chat.message.toString()}
+                </span>
+              </>
+            ) : (
+              <span>{chat.message.toString()}</span>
+            )}
+          </div>
+        )}
+      </div>
+      <div id={lastMessage ? "last-chat-message" : ""}></div>
+    </>
   );
 }

src/frontend/src/controllers/API/api.tsx

@@ -124,6 +124,7 @@ function ApiInterceptor() {
     if (error?.response?.status === 500) {
       const vertices = useFlowStore.getState().verticesBuild;
       useFlowStore.getState().updateBuildStatus(vertices, BuildStatus.BUILT);
+      useFlowStore.getState().setIsBuilding(false);
     }
   }
 

src/frontend/src/stores/flowsManagerStore.ts

@@ -83,7 +83,6 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     if (saveTimeoutId) {
       clearTimeout(saveTimeoutId);
     }
-    set({ saveLoading: true });
     // Set up a new timeout.
     saveTimeoutId = setTimeout(() => {
       if (get().currentFlow) {
@@ -92,10 +91,11 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           true
         );
       }
-    }, 300); // Delay of 300ms.
+      set({ saveLoading: true });
+    }, 1000); // Delay of 1000ms.
   },
   saveFlow: (flow: FlowType, silent?: boolean) => {
-    set({ saveLoading: true })
+    set({ saveLoading: true });
     return new Promise<void>((resolve, reject) => {
       updateFlowInDatabase(flow)
         .then((updatedFlow) => {
@@ -117,7 +117,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
             //update tabs state
 
             resolve();
-            set({ saveLoading: false })
+            set({ saveLoading: false });
           }
         })
         .catch((err) => {

src/frontend/src/utils/buildUtils.ts

@@ -49,6 +49,7 @@ export async function buildVertices({
   const verticesIds = vertices_layers.flat();
   useFlowStore.getState().updateBuildStatus(verticesIds, BuildStatus.TO_BUILD);
   useFlowStore.getState().updateVerticesBuild(verticesIds);
+  useFlowStore.getState().setIsBuilding(true);
 
   // Set each vertex state to building
   const buildResults: Array<boolean> = [];
@@ -76,6 +77,7 @@ export async function buildVertices({
   if (onBuildComplete) {
     const allNodesValid = buildResults.every((result) => result);
     onBuildComplete(allNodesValid);
+    useFlowStore.getState().setIsBuilding(false);
   }
 }