Merge branch 'release' into merge-release

src/frontend/src/App.tsx

@@ -51,6 +51,9 @@ export default function App() {
   useEffect(() => {
     // If there is an error alert open with data, add it to the alertsList
     if (errorOpen && errorData) {
+      if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(errorData)){
+        return;
+      }
       setErrorOpen(false);
       setAlertsList((old) => {
         let newAlertsList = [
@@ -62,6 +65,9 @@ export default function App() {
     }
     // If there is a notice alert open with data, add it to the alertsList
     else if (noticeOpen && noticeData) {
+      if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(noticeData)){
+        return;
+      }
       setNoticeOpen(false);
       setAlertsList((old) => {
         let newAlertsList = [
@@ -73,6 +79,9 @@ export default function App() {
     }
     // If there is a success alert open with data, add it to the alertsList
     else if (successOpen && successData) {
+      if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(successData)){
+        return;
+      }
       setSuccessOpen(false);
       setAlertsList((old) => {
         let newAlertsList = [
@@ -152,4 +161,4 @@ export default function App() {
       </div>
     </div>
   );
-}
+}

src/frontend/src/contexts/alertContext.tsx

@@ -78,9 +78,9 @@ export function AlertProvider({ children }: { children: ReactNode }) {
    * @param newState An object containing the new error data, including title and optional list of error messages
    */
   function setErrorData(newState: { title: string; list?: Array<string> }) {
-    setErrorDataState(newState);
-    setErrorOpen(true);
     if (newState.title && newState.title !== "") {
+      setErrorDataState(newState);
+      setErrorOpen(true);
       setNotificationCenter(true);
       pushNotificationList({
         type: "error",
@@ -95,9 +95,9 @@ export function AlertProvider({ children }: { children: ReactNode }) {
    * @param newState An object containing the title of the notice and optionally a link.
    */
   function setNoticeData(newState: { title: string; link?: string }) {
-    setNoticeDataState(newState);
-    setNoticeOpen(true);
     if (newState.title && newState.title !== "") {
+      setNoticeDataState(newState);
+      setNoticeOpen(true);
       // Add new notice to notification center
       setNotificationCenter(true);
       pushNotificationList({
@@ -113,11 +113,10 @@ export function AlertProvider({ children }: { children: ReactNode }) {
    * @param newState - A state object with a "title" property to set in the success data state.
    */
   function setSuccessData(newState: { title: string }) {
-    setSuccessDataState(newState); // update the success data state with the provided new state
-    setSuccessOpen(true); // open the success alert
-
     // If the new state has a "title" property, add a new success notification to the list
     if (newState.title && newState.title !== "") {
+      setSuccessDataState(newState); // update the success data state with the provided new state
+      setSuccessOpen(true); // open the success alert
       setNotificationCenter(true); // show the notification center
       pushNotificationList({
         // add the new notification to the list

src/frontend/src/icons/VertexAI/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as VertexAISVG } from "./vertex_ai.svg";
+
+export const VertexAIIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <VertexAISVG ref={ref} {...props} />;
+});

src/frontend/src/icons/VertexAI/vertex_ai.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false"><path d="M26.69 18.53a1 1 0 00-1.4-.22L16 25.17v.29a1 1 0 110 1.91v.05a1 1 0 00.6-.19l9.88-7.3a1 1 0 00.21-1.4z" fill="#80868b"></path><path d="M16 27.37a1 1 0 110-1.91v-.29l-9.29-6.86a1 1 0 00-1.4.22 1 1 0 00.21 1.4l9.89 7.3a1 1 0 00.59.19v-.05z" fill="#9ba0a5"></path><path d="M16 24.46a2 2 0 102 2 2 2 0 00-2-2zm0 2.91a1 1 0 111-.95 1 1 0 01-1 .95z" fill="#606368"></path><path d="M8 8.14a1 1 0 01-1-1V4.63a1 1 0 112 0v2.51a1 1 0 01-1 1z" fill="#9ba0a5"></path><circle cx="7.97" cy="16" r="1.01" fill="#9ba0a5"></circle><circle cx="7.97" cy="13.05" r="1.01" fill="#9ba0a5"></circle><circle cx="7.97" cy="10.09" r="1.01" fill="#9ba0a5"></circle><path d="M24 11.07a1 1 0 01-1-1V7.55a1 1 0 012 0v2.52a1 1 0 01-1 1z" fill="#606368"></path><circle cx="24.03" cy="16.01" r="1.01" fill="#606368"></circle><circle cx="24.03" cy="13.02" r="1.01" fill="#606368"></circle><circle cx="24.03" cy="4.63" r="1.01" fill="#606368"></circle><path d="M16 20a1 1 0 01-1-1v-2.54a1 1 0 012 0V19a1 1 0 01-1 1z" fill="#80868b"></path><circle cx="16" cy="21.93" r="1.01" fill="#80868b"></circle><circle cx="16" cy="13.51" r="1.01" fill="#80868b"></circle><circle cx="16" cy="10.56" r="1.01" fill="#80868b"></circle><path d="M20 14.05a1 1 0 01-1-1v-2.51a1 1 0 112 0v2.51a1 1 0 01-1 1z" fill="#606368"></path><circle cx="20.02" cy="7.58" r="1.01" fill="#606368"></circle><circle cx="20.02" cy="18.92" r="1.01" fill="#606368"></circle><circle cx="20.02" cy="15.97" r="1.01" fill="#606368"></circle><circle cx="11.98" cy="18.92" r="1.01" fill="#9ba0a5"></circle><circle cx="11.98" cy="10.56" r="1.01" fill="#9ba0a5"></circle><circle cx="11.98" cy="7.58" r="1.01" fill="#9ba0a5"></circle><path d="M12 17a1 1 0 01-1-1v-2.54a1 1 0 012 0V16a1 1 0 01-1 1z" fill="#9ba0a5"></path></svg>

src/frontend/src/modals/chatModal/index.tsx

@@ -11,6 +11,7 @@ import { ChatMessageType } from "../../types/chat";
 import ChatInput from "./chatInput";
 
 import _ from "lodash";
+import { getHealth } from "../../controllers/API";
 
 export default function ChatModal({
   flow,
@@ -204,25 +205,25 @@ export default function ChatModal({
         handleOnClose(event);
       };
       newWs.onerror = (ev) => {
-        console.log(ev, "error");
-        if (flow.id === "") {
-          connectWS();
-        } else {
+        getHealth().then((res) => {
+          if (res.status === 200) {
+            connectWS();
+          }
+        }).catch((err) => {
           setErrorData({
-            title: "There was an error on web connection, please: ",
+            // message when the backend failed
+            title: "The backend is not responding. Please try again later.",
+            // possible solution list
             list: [
-              "Refresh the page",
-              "Use a new flow tab",
-              "Check if the backend is up",
+              "Check your internet connection.",
+              "Check if the backend is running."
             ],
           });
-        }
+        })
       };
       ws.current = newWs;
     } catch (error) {
-      if (flow.id === "") {
         connectWS();
-      }
       console.log(error);
     }
   }

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -118,7 +118,7 @@ const NodeToolbarComponent = (props) => {
 
           {/*
           <Menu as="div" className="relative inline-block text-left z-100">
-            <button className="hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800  shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
+            <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
                 <Menu.Button className="flex items-center">
                   <EllipsisVerticalIcon

src/frontend/src/utils.ts

@@ -47,6 +47,7 @@ import {
 } from "lucide-react";
 import { SupabaseIcon } from "./icons/supabase";
 import { MongoDBIcon } from "./icons/MongoDB";
+import { VertexAIIcon } from "./icons/VertexAI";
 
 export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
@@ -241,6 +242,12 @@ export const nodeIconsLucide: {
   SupabaseVectorStore: SupabaseIcon as React.ForwardRefExoticComponent<
     ComponentType<SVGProps<SVGSVGElement>>
   >,
+  VertexAI: VertexAIIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  ChatVertexAI: VertexAIIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
   agents: Rocket as React.ForwardRefExoticComponent<
     ComponentType<SVGProps<SVGSVGElement>>
   >,