From f88b14f33d916b37168dd62728c9318d932435b9 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Sun, 11 Jun 2023 18:09:17 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20feat(chatComponent):=20add=20bui?=
 =?UTF-8?q?ld=20trigger=20component=20to=20allow=20users=20to=20build=20a?=
 =?UTF-8?q?=20flow=20=E2=9C=A8=20feat(chatComponent):=20add=20loading=20an?=
 =?UTF-8?q?imation=20to=20build=20trigger=20component=20The=20BuildTrigger?=
 =?UTF-8?q?=20component=20is=20added=20to=20the=20chatComponent=20to=20all?=
 =?UTF-8?q?ow=20users=20to=20build=20a=20flow.=20The=20component=20is=20tr?=
 =?UTF-8?q?iggered=20by=20clicking=20on=20a=20button=20and=20sends=20a=20P?=
 =?UTF-8?q?OST=20request=20to=20the=20server=20to=20build=20the=20flow.=20?=
 =?UTF-8?q?A=20loading=20animation=20is=20added=20to=20the=20component=20t?=
 =?UTF-8?q?o=20indicate=20that=20the=20flow=20is=20being=20built.=20The=20?=
 =?UTF-8?q?postBuild=20function=20is=20added=20to=20the=20API=20controller?=
 =?UTF-8?q?=20to=20handle=20the=20POST=20request.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chatComponent/buildTrigger/index.tsx      | 85 +++++++++++++++++++
 src/frontend/src/components/ui/loading.tsx    | 39 +++++++++
 src/frontend/src/controllers/API/index.ts     |  4 +
 3 files changed, 128 insertions(+)
 create mode 100644 src/frontend/src/components/chatComponent/buildTrigger/index.tsx
 create mode 100644 src/frontend/src/components/ui/loading.tsx

diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
new file mode 100644
index 000000000..4cfe74980
--- /dev/null
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -0,0 +1,85 @@
+import { useState, useContext } from "react";
+import { Transition } from "@headlessui/react";
+import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline";
+import { Zap } from "lucide-react";
+import { nodeColors } from "../../../utils";
+import { PopUpContext } from "../../../contexts/popUpContext";
+import ChatModal from "../../../modals/chatModal";
+import { FlowType } from "../../../types/flow";
+import { postBuild } from "../../../controllers/API";
+import Loading from "../../../components/ui/loading";
+
+export default function BuildTrigger({
+  open,
+  flow,
+  setIsBuilt,
+  isBuilt,
+}: {
+  open: boolean;
+  flow: FlowType;
+  setIsBuilt: any;
+  isBuilt: boolean;
+}) {
+  const [isBuilding, setIsBuilding] = useState(false);
+
+  function handleBuild(flow: FlowType) {
+    const minimumLoadingTime = 500; // in milliseconds
+    const startTime = Date.now();
+
+    setIsBuilding(true);
+
+    postBuild(flow)
+      .then((res) => {
+        console.log(res);
+        setIsBuilt(true);
+      })
+      .catch((err) => {
+        console.log(err);
+        setIsBuilt(false);
+      })
+      .finally(() => {
+        const endTime = Date.now();
+        const elapsedTime = endTime - startTime;
+
+        if (elapsedTime < minimumLoadingTime) {
+          const remainingTime = minimumLoadingTime - elapsedTime;
+          setTimeout(() => {
+            setIsBuilding(false);
+          }, remainingTime);
+        } else {
+          setIsBuilding(false);
+        }
+      });
+  }
+
+  return (
+    <Transition
+      show={!open}
+      appear={true}
+      enter="transition ease-out duration-300"
+      enterFrom="translate-y-96"
+      enterTo="translate-y-0"
+      leave="transition ease-in duration-300"
+      leaveFrom="translate-y-0"
+      leaveTo="translate-y-96"
+    >
+      <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
+        <div
+          className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-gradient-to-r from-blue-700 via-blue-600 to-blue-500 dark:border-gray-600 cursor-pointer"
+          onClick={() => handleBuild(flow)}
+        >
+          <button>
+            <div className="flex gap-3 items-center">
+              {isBuilding ? (
+                // Render your loading animation here when isBuilding is true
+                <Loading style={{ color: "white" }} />
+              ) : (
+                <Zap className="h-6 w-6" style={{ color: "white" }} />
+              )}
+            </div>
+          </button>
+        </div>
+      </div>
+    </Transition>
+  );
+}
diff --git a/src/frontend/src/components/ui/loading.tsx b/src/frontend/src/components/ui/loading.tsx
new file mode 100644
index 000000000..a32c046a4
--- /dev/null
+++ b/src/frontend/src/components/ui/loading.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+export const Loading = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-circle"
+    {...props}
+  >
+    <circle cx={12} cy={12} r={10} strokeDasharray={63} strokeDashoffset={21}>
+      <animateTransform
+        attributeName="transform"
+        type="rotate"
+        from="0 12 12"
+        to="360 12 12"
+        dur="2s"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="stroke-dashoffset"
+        dur="8s"
+        repeatCount="indefinite"
+        keyTimes="0; 0.5; 1"
+        values="-16; -47; -16"
+        calcMode="spline"
+        keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
+      />
+    </circle>
+  </svg>
+);
+export default Loading;
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index ffa9eef72..53480ae61 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -39,3 +39,7 @@ export async function getExamples(): Promise<FlowType[]> {
 
   return await Promise.all(contentsPromises);
 }
+
+export async function postBuild(flow: FlowType) {
+  return await axios.post(`/build/${flow.id}`, flow);
+}