Added checks to see if the chat can open

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

@@ -3,18 +3,30 @@ import { MessagesSquare } from "lucide-react";
 
 import { alertContext } from "../../../contexts/alertContext";
 import { useContext } from "react";
-import ShadTooltip from "../../ShadTooltipComponent";
+import {
+  CHAT_CANNOT_OPEN_DESCRIPTION,
+  CHAT_CANNOT_OPEN_TITLE,
+  FLOW_NOT_BUILT_DESCRIPTION,
+  FLOW_NOT_BUILT_TITLE,
+} from "../../../constants";
 
-export default function ChatTrigger({ open, setOpen, isBuilt }) {
+export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
   const { setErrorData } = useContext(alertContext);
 
   function handleClick() {
     if (isBuilt) {
-      setOpen(true);
+      if (canOpen) {
+        setOpen(true);
+      } else {
+        setErrorData({
+          title: CHAT_CANNOT_OPEN_TITLE,
+          list: [CHAT_CANNOT_OPEN_DESCRIPTION],
+        });
+      }
     } else {
       setErrorData({
-        title: "Flow not built",
+        title: FLOW_NOT_BUILT_TITLE,
-        list: ["Please build the flow before chatting"],
+        list: [FLOW_NOT_BUILT_DESCRIPTION],
       });
     }
   }
@@ -30,15 +42,26 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
       leaveFrom="translate-y-0"
       leaveTo="translate-y-96"
     >
-          <button onClick={handleClick} className={ "transition-all fixed bottom-4 right-4 flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow bg-border "+ (!isBuilt ? "cursor-not-allowed" : "cursor-pointer")}>
+      <button
-            <div className="flex gap-3">
+        onClick={handleClick}
-              <MessagesSquare
+        className={
-                className={"h-6 w-6 transition-all " + (isBuilt ? "fill-chat-trigger stroke-chat-trigger stroke-1" : "fill-chat-trigger-disabled stroke-1 stroke-chat-trigger-disabled")}
+          "shadow-round-btn-shadow hover:shadow-round-btn-shadow fixed bottom-4 right-4 flex h-12 w-12 items-center justify-center rounded-full bg-border px-3 py-1 shadow-md transition-all " +
-                style={{ color: "white" }}
+          (!isBuilt ? "cursor-not-allowed" : "cursor-pointer")
-                strokeWidth={1.5}
+        }
-              />
+      >
-            </div>
+        <div className="flex gap-3">
-          </button>
+          <MessagesSquare
+            className={
+              "h-6 w-6 transition-all " +
+              (isBuilt
+                ? "fill-chat-trigger stroke-chat-trigger stroke-1"
+                : "fill-chat-trigger-disabled stroke-chat-trigger-disabled stroke-1")
+            }
+            style={{ color: "white" }}
+            strokeWidth={1.5}
+          />
+        </div>
+      </button>
     </Transition>
   );
 }

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

@@ -13,6 +13,7 @@ import * as _ from "lodash";
 export default function Chat({ flow }: ChatType) {
   const [open, setOpen] = useState(false);
   const [isBuilt, setIsBuilt] = useState(false);
+  const [canOpen, setCanOpen] = useState(false);
   const { tabsState } = useContext(TabsContext);
 
   useEffect(() => {
@@ -58,6 +59,17 @@ export default function Chat({ flow }: ChatType) {
     ) {
       setIsBuilt(false);
     }
+    if (
+      tabsState &&
+      tabsState[flow.id] &&
+      tabsState[flow.id].formKeysData &&
+      tabsState[flow.id].formKeysData.input_keys &&
+      Object.keys(tabsState[flow.id].formKeysData.input_keys).length > 0
+    ) {
+      setCanOpen(true);
+    } else {
+      setCanOpen(false);
+    }
 
     prevNodesRef.current = currentNodes;
   }, [tabsState]);
@@ -71,10 +83,15 @@ export default function Chat({ flow }: ChatType) {
           setIsBuilt={setIsBuilt}
           isBuilt={isBuilt}
         />
-        {isBuilt && (
+        {isBuilt && canOpen && (
           <FormModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
         )}
-        <ChatTrigger open={open} setOpen={setOpen} isBuilt={isBuilt} />
+        <ChatTrigger
+          canOpen={canOpen}
+          open={open}
+          setOpen={setOpen}
+          isBuilt={isBuilt}
+        />
       </div>
     </>
   );

src/frontend/src/constants.tsx

@@ -50,6 +50,15 @@ export const CODE_PROMPT_DIALOG_SUBTITLE =
 export const PROMPT_DIALOG_SUBTITLE =
   "Create your prompt. Prompts can help guide the behavior of a Language Model.";
 
+export const CHAT_CANNOT_OPEN_TITLE = "Chat Cannot Open";
+
+export const CHAT_CANNOT_OPEN_DESCRIPTION = "This is not a chat flow.";
+
+export const FLOW_NOT_BUILT_TITLE = "Flow not built";
+
+export const FLOW_NOT_BUILT_DESCRIPTION =
+  "Please build the flow before chatting.";
+
 /**
  * The base text for subtitle of Text Dialog
  * @constant
@@ -180,7 +189,7 @@ export const EXPORT_CODE_DIALOG =
 export const COLUMN_DIV_STYLE =
   " w-full h-full flex overflow-auto flex-col bg-muted px-16 ";
 
-  export const NAV_DISPLAY_STYLE =
+export const NAV_DISPLAY_STYLE =
   " w-full flex justify-between py-12 pb-2 px-6 ";
 
 /**
@@ -210,7 +219,8 @@ export const DESCRIPTIONS: string[] = [
   "Conversational Cartography Unlocked.",
   "Design, Develop, Dialogize.",
 ];
-export const BUTTON_DIV_STYLE = " flex gap-2 focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
+export const BUTTON_DIV_STYLE =
+  " flex gap-2 focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
 
 /**
  * The base text for subtitle of code dialog