From 2c0a9aee95fd8ff9be1add69fd806d44f621cdc0 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Sun, 11 Jun 2023 18:08:52 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20chore(chatTrigger):=20add=20erro?=
 =?UTF-8?q?r=20message=20when=20chat=20is=20triggered=20before=20flow=20is?=
 =?UTF-8?q?=20built=20=E2=9C=A8=20feat(chatComponent):=20add=20BuildTrigge?=
 =?UTF-8?q?r=20component=20to=20check=20if=20flow=20is=20built=20before=20?=
 =?UTF-8?q?showing=20ChatTrigger=20component=20The=20ChatTrigger=20compone?=
 =?UTF-8?q?nt=20now=20checks=20if=20the=20flow=20is=20built=20before=20all?=
 =?UTF-8?q?owing=20the=20user=20to=20open=20the=20chat.=20If=20the=20flow?=
 =?UTF-8?q?=20is=20not=20built,=20an=20error=20message=20is=20displayed=20?=
 =?UTF-8?q?instead.=20The=20BuildTrigger=20component=20is=20added=20to=20c?=
 =?UTF-8?q?heck=20if=20the=20flow=20is=20built=20before=20showing=20the=20?=
 =?UTF-8?q?ChatTrigger=20component.=20This=20improves=20the=20user=20exper?=
 =?UTF-8?q?ience=20by=20preventing=20the=20user=20from=20opening=20the=20c?=
 =?UTF-8?q?hat=20before=20the=20flow=20is=20built.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chatComponent/chatTrigger/index.tsx       | 25 +++++++++++++------
 .../src/components/chatComponent/index.tsx    | 22 +++++++++++++++-
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index daa49f34f..1651a91bc 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -3,13 +3,26 @@ import {
   Bars3CenterLeftIcon,
   ChatBubbleBottomCenterTextIcon,
 } from "@heroicons/react/24/outline";
+import { MessagesSquare } from "lucide-react";
 import { nodeColors } from "../../../utils";
-import { PopUpContext } from "../../../contexts/popUpContext";
+import { alertContext } from "../../../contexts/alertContext";
 import { useContext } from "react";
 import ChatModal from "../../../modals/chatModal";
 
-export default function ChatTrigger({ open, setOpen }) {
-  const { openPopUp } = useContext(PopUpContext);
+export default function ChatTrigger({ open, setOpen, isBuilt }) {
+  const { setErrorData } = useContext(alertContext);
+
+  function handleClick() {
+    if (isBuilt) {
+      setOpen(true);
+    } else {
+      setErrorData({
+        title: "Flow not built",
+        list: ["Please build the flow before chatting"],
+      });
+    }
+  }
+
   return (
     <Transition
       show={!open}
@@ -24,13 +37,11 @@ export default function ChatTrigger({ open, setOpen }) {
       <div className="absolute bottom-4 right-3">
         <div
           className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 dark:border-gray-600 cursor-pointer"
-          onClick={() => {
-            setOpen(true);
-          }}
+          onClick={handleClick}
         >
           <button>
             <div className="flex gap-3  items-center">
-              <ChatBubbleBottomCenterTextIcon
+              <MessagesSquare
                 className="h-6 w-6 mt-1"
                 style={{ color: "white" }}
               />
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 61d0f35a1..73815b7ec 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -2,12 +2,14 @@ import { useEffect, useRef, useState } from "react";
 
 import { ChatMessageType, ChatType } from "../../types/chat";
 import ChatTrigger from "./chatTrigger";
+import BuildTrigger from "./buildTrigger";
 import ChatModal from "../../modals/chatModal";
 
 import _ from "lodash";
 
 export default function Chat({ flow }: ChatType) {
   const [open, setOpen] = useState(false);
+  const [isBuilt, setIsBuilt] = useState(false);
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (
@@ -26,7 +28,25 @@ export default function Chat({ flow }: ChatType) {
   return (
     <>
       <ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
-      <ChatTrigger open={open} setOpen={setOpen} />
+
+      {isBuilt ? (
+        <div>
+          <BuildTrigger
+            open={open}
+            flow={flow}
+            setIsBuilt={setIsBuilt}
+            isBuilt={isBuilt}
+          />
+          <ChatTrigger open={open} setOpen={setOpen} isBuilt={isBuilt} />
+        </div>
+      ) : (
+        <BuildTrigger
+          open={open}
+          flow={flow}
+          setIsBuilt={setIsBuilt}
+          isBuilt={isBuilt}
+        />
+      )}
     </>
   );
 }