✨ feat(tabsContext.tsx): add try-catch blocks to handle errors when processing flow data and add saveFlowToDatabase function to save new flows to the database

The tabs trigger border radius has been changed from rounded-sm to rounded-lg to improve the appearance of the tabs. Try-catch blocks have been added to handle errors when processing flow data to prevent the application from breaking. A new function, saveFlowToDatabase, has been added to save new flows to the database. This function is called when a new flow is created, and the ID counter is incremented after the flow is saved. The new flow is then added to the list of flows, and the tab index is set to the new flow.
🎨 style(ui/tabs.tsx): change tabs trigger border radius from rounded-sm to rounded-lg

src/frontend/src/components/ui/tabs.tsx

@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     )}
     {...props}

src/frontend/src/contexts/tabsContext.tsx

@@ -23,6 +23,7 @@ import _ from "lodash";
 import {
   readFlowsFromDatabase,
   deleteFlowFromDatabase,
+  saveFlowToDatabase,
 } from "../controllers/API";
 
 const TabsContextInitialValue: TabsContextType = {
@@ -71,7 +72,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     let Saveflows = _.cloneDeep(flows);
     if (Saveflows.length !== 0) {
       Saveflows.forEach((flow) => {
-        if (flow.data && flow.data?.nodes)
+        if (flow.data && flow.data?.nodes) {
           flow.data?.nodes.forEach((node) => {
             console.log(node.data.type);
             //looking for file fields to prevent saving the content and breaking the flow for exceeding the the data limite for local storage
@@ -84,6 +85,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
               }
             });
           });
+        }
       });
       window.localStorage.setItem(
         "tabsData",
@@ -167,32 +169,41 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   }
   function processDBData(DbData) {
     DbData.forEach((flow) => {
-      if (!flow.data) {
-        return;
+      try {
+        if (!flow.data) {
+          return;
+        }
+        processFlowEdges(flow);
+        processFlowNodes(flow);
+      } catch (e) {
+        console.error(e);
       }
-      processFlowEdges(flow.data.edges);
-      processFlowNodes(flow.data.nodes);
-    });
-  }
-  function processTabsData(tabsData) {
-    tabsData.flows.forEach((flow) => {
-      if (!flow.data) {
-        return;
-      }
-      processFlowEdges(flow.data.edges);
-      processFlowNodes(flow.data.nodes);
     });
   }
 
-  function processFlowEdges(edges) {
-    edges.forEach((edge) => {
+  function processTabsData(tabsData) {
+    tabsData.flows.forEach((flow) => {
+      try {
+        if (!flow.data) {
+          return;
+        }
+        processFlowEdges(flow);
+        processFlowNodes(flow);
+      } catch (e) {
+        console.error(e);
+      }
+    });
+  }
+
+  function processFlowEdges(flow) {
+    flow.data.edges.forEach((edge) => {
       edge.className = "";
       edge.style = { stroke: "#555555" };
     });
   }
 
-  function processFlowNodes(nodes) {
-    nodes.forEach((node) => {
+  function processFlowNodes(flow) {
+    flow.data.nodes.forEach((node) => {
       const template = templates[node.data.type];
       if (!template) {
         setErrorData({ title: `Unknown node type: ${node.data.type}` });
@@ -200,7 +211,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       }
       if (Object.keys(template["template"]).length > 0) {
         updateNodeBaseClasses(node, template);
-        updateNodeEdges(node, template);
+        updateNodeEdges(flow, node, template);
         updateNodeDescription(node, template);
         updateNodeTemplate(node, template);
       }
@@ -211,8 +222,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     node.data.node.base_classes = template["base_classes"];
   }
 
-  function updateNodeEdges(node, template) {
-    node.data.edges.forEach((edge) => {
+  function updateNodeEdges(flow, node, template) {
+    flow.data.edges.forEach((edge) => {
       if (edge.source === node.id) {
         edge.sourceHandle = edge.sourceHandle
           .split("|")
@@ -433,14 +444,18 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     // Create a new flow with a default name if no flow is provided.
     const newFlow = createNewFlow(flowData, flow);
 
-    // Increment the ID counter.
-    setId(uuidv4());
+    saveFlowToDatabase(newFlow)
+      .then((id) => {
+        // Increment the ID counter.
+        setId(id);
+      })
+      .then(() => {
+        // Add the new flow to the list of flows.
+        addFlowToLocalState(newFlow);
 
-    // Add the new flow to the list of flows.
-    addFlowToLocalState(newFlow);
-
-    // Set the tab index to the new flow.
-    setTabIndexToLocalState();
+        // Set the tab index to the new flow.
+        setTabIndexToLocalState();
+      });
   };
 
   const extractDataFromFlow = (flow) => {