✨ feat(chat.py): add error handling to stream_build function and improve log messages

✨ feat(schemas.py): add StreamData class to handle SSE messages
✨ feat(frontend): add RadialProgress and ProgressBar components
🔧 chore(frontend): add daisyui to project dependencies

🎨 style(headerComponent): comment out unused code
✨ feat(ui/progress.tsx): add Progress component to reuse in other components
✨ feat(types/components): add ProgressBarType and RadialProgressType to use in components
🎨 style(tailwind.config.js): add daisyui plugin to tailwind configuration to use in the project

src/frontend/package.json

@@ -8,15 +8,16 @@
     "@headlessui/react": "^1.7.10",
     "@heroicons/react": "^2.0.15",
     "@mui/material": "^5.11.9",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
-    "@radix-ui/react-menubar": "^1.0.3",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.3",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@tabler/icons-react": "^2.18.0",
     "@tailwindcss/forms": "^0.5.3",
@@ -98,6 +99,7 @@
     "@types/uuid": "^9.0.1",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "autoprefixer": "^10.4.14",
+    "daisyui": "^3.1.1",
     "postcss": "^8.4.23",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.2",

src/frontend/src/components/ProgressBarComponent/index.tsx

@@ -0,0 +1,21 @@
+import { ReactElement, useContext, useEffect, useRef, useState } from "react";
+import { ProgressBarType } from "../../types/components";
+import { Progress } from "../../components/ui/progress";
+import { progressContext } from "../../contexts/ProgressContext";
+import { setInterval } from "timers/promises";
+
+export default function ProgressBarComponent({
+  value,
+  children,
+}: ProgressBarType) {
+  const ref = useRef(0);
+  const reff = useRef();
+  const { progress } = useContext(progressContext);
+
+  useEffect(() => {
+    ref.current = progress * 100;
+    console.log(progress);
+  }, [progress]);
+
+  return <Progress className="h-2.5" value={ref.current} />;
+}

src/frontend/src/components/RadialProgress/index.tsx

@@ -0,0 +1,19 @@
+import { useContext, useEffect, useRef, useState } from "react";
+import { RadialProgressType } from "../../types/components";
+
+export default function RadialProgressComponent({
+  value,
+  color,
+}: RadialProgressType) {
+  const style = {
+    "--value": value * 100,
+    "--size": "1.5rem",
+    "--thickness": "2px",
+  } as React.CSSProperties;
+
+  return (
+    <div className={"radial-progress " + color} style={style}>
+      <strong className="text-[8px]">{value * 100}%</strong>
+    </div>
+  );
+}

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { Transition } from "@headlessui/react";
 import { Zap } from "lucide-react";
 import { validateNodes } from "../../../utils";
@@ -9,6 +9,8 @@ import { typesContext } from "../../../contexts/typesContext";
 import { alertContext } from "../../../contexts/alertContext";
 import { postBuildInit } from "../../../controllers/API";
 
+import RadialProgressComponent from "../../RadialProgress";
+
 export default function BuildTrigger({
   open,
   flow,
@@ -20,9 +22,12 @@ export default function BuildTrigger({
   setIsBuilt: any;
   isBuilt: boolean;
 }) {
-  const { updateSSEData, isBuilding, setIsBuilding } = useSSE();
+  const { updateSSEData, isBuilding, setIsBuilding, sseData } = useSSE();
   const { reactFlowInstance } = useContext(typesContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
+  const [isIconTouched, setIsIconTouched] = useState(false);
+  const eventClick = isBuilding ? "pointer-events-none" : "";
+  const [progress, setProgress] = useState(0);
 
   async function handleBuild(flow: FlowType) {
     try {
@@ -58,12 +63,10 @@ export default function BuildTrigger({
       setIsBuilding(false);
     }
   }
-
   async function streamNodeData(flow: FlowType) {
     // Step 1: Make a POST request to send the flow data and receive a unique session ID
     const response = await postBuildInit(flow);
     const { flowId } = response.data;
-
     // Step 2: Use the session ID to establish an SSE connection using EventSource
     let validationResults = [];
     let finished = false;
@@ -83,19 +86,23 @@ export default function BuildTrigger({
         return;
       } else if (parsedData.log) {
         // If the event is a log, log it
-        // TODO: implement the progress
         setSuccessData({ title: parsedData.log });
-        setSuccessData({ title: parsedData.progress });
       } else {
         // Otherwise, process the data
         const isValid = processStreamResult(parsedData);
+        setProgress(parsedData.progress);
         validationResults.push(isValid);
       }
     };
 
-    eventSource.onerror = (error) => {
+    eventSource.onerror = (error: any) => {
       console.error("EventSource failed:", error);
       eventSource.close();
+      if (error.data) {
+        const parsedData = JSON.parse(error.data);
+        setErrorData({ title: parsedData.error });
+        setIsBuilding(false);
+      }
     };
     // Step 3: Wait for the stream to finish
     while (!finished) {
@@ -129,6 +136,14 @@ export default function BuildTrigger({
     }
   }
 
+  const handleMouseEnter = () => {
+    setIsIconTouched(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsIconTouched(false);
+  };
+
   return (
     <Transition
       show={!open}
@@ -142,17 +157,23 @@ export default function BuildTrigger({
     >
       <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
         <div
-          className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032]
-           bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
+          className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032] bg-[#E2E7EE] dark:border-gray-600 cursor-pointer`}
           onClick={() => {
             handleBuild(flow);
           }}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
         >
           <button>
             <div className="flex gap-3 items-center">
-              {isBuilding ? (
+              {isBuilding && progress < 1 ? (
                 // Render your loading animation here when isBuilding is true
-                <Loading strokeWidth={1.5} style={{ color: "white" }} />
+                <RadialProgressComponent
+                  color={"text-orange-400"}
+                  value={progress}
+                ></RadialProgressComponent>
+              ) : isBuilding ? (
+                <Loading strokeWidth={1.5} style={{ color: "#fb923c" }} />
               ) : (
                 <Zap className="sh-6 w-6 fill-orange-400 stroke-1 stroke-orange-400" />
               )}

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

@@ -98,7 +98,7 @@ export default function Header() {
           >
             <FaDiscord className="h-5 w-5" />
           </a>
-          <Separator orientation="vertical" />
+          {/* <Separator orientation="vertical" />
           <button
             className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
             onClick={() => {
@@ -110,7 +110,7 @@ export default function Header() {
             ) : (
               <MoonIcon className="h-5 w-5" />
             )}
-          </button>
+          </button> */}
           <button
             className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
             onClick={(event: React.MouseEvent<HTMLElement>) => {

src/frontend/src/components/ui/progress.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../../utils";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

src/frontend/src/types/components/index.ts

@@ -98,3 +98,14 @@ export type TooltipComponentType = {
     | "top-start"
     | "top";
 };
+
+export type ProgressBarType = {
+  children?: ReactElement;
+  value?: number;
+  max?: number;
+};
+
+export type RadialProgressType = {
+  value?: number;
+  color?: string;
+};

src/frontend/tailwind.config.js

@@ -241,5 +241,6 @@ module.exports = {
       });
     }),
     require("@tailwindcss/typography"),
+    require("daisyui"),
   ],
 };