Fixed button

src/frontend/src/components/IOview/index.tsx

@@ -1,7 +1,11 @@
+import { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
 import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import BaseModal from "../../modals/baseModal";
+import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
+import { NodeType } from "../../types/flow";
+import { validateNodes } from "../../utils/reactflowUtils";
 import { cn } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
 import IOInputField from "../IOInputField";
@@ -26,8 +30,12 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
       node.type !== "ChatInput" &&
       node.type !== "ChatOutput"
   );
-  const haveChat = useFlowStore((state) => state.outputs).some(
+  const haveChat =
-    (output) => output.type === "ChatOutput" || output.type === "ChatInput"
+    useFlowStore((state) => state.outputs).some(
+      (output) => output.type === "ChatOutput"
+    ) ||
+    useFlowStore((state) => state.inputs).some(
+      (input) => input.type === "ChatInput"
     );
   const [selectedTab, setSelectedTab] = useState(
     inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
@@ -36,6 +44,48 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
     { type: string; id: string } | undefined
   >(undefined);
 
+  const { getNode, setNode, buildFlow, getFlow } = useFlowStore();
+  const { setErrorData } = useAlertStore();
+  const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
+  const [lockChat, setLockChat] = useState(false);
+  const [chatValue, setChatValue] = useState("");
+  const isBuilding = useFlowStore((state) => state.isBuilding);
+
+  async function sendMessage(count = 1): Promise<void> {
+    if (isBuilding) return;
+    const { nodes, edges } = getFlow();
+    let nodeValidationErrors = validateNodes(nodes, edges);
+    if (nodeValidationErrors.length === 0) {
+      setIsBuilding(true);
+      setLockChat(true);
+      setChatValue("");
+      const chatInputId = inputs
+        .map((obj) => obj.id)
+        .find((inputId) => inputId.includes("ChatInput"));
+      const chatInput: NodeType = getNode(chatInputId!) as NodeType;
+      if (chatInput) {
+        let newNode = cloneDeep(chatInput);
+        newNode.data.node!.template["message"].value = chatValue;
+        setNode(chatInputId!, newNode);
+      }
+      for (let i = 0; i < count; i++) {
+        await buildFlow().catch((err) => {
+          console.error(err);
+          setLockChat(false);
+        });
+      }
+      setLockChat(false);
+
+      //set chat message in the flow and run build
+      //@ts-ignore
+    } else {
+      setErrorData({
+        title: "Oops! Looks like you missed some required information:",
+        list: nodeValidationErrors,
+      });
+    }
+  }
+
   useEffect(() => {
     setSelectedViewField(undefined);
     setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
@@ -60,7 +110,8 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
         </div>
       </BaseModal.Header>
       <BaseModal.Content>
-        <div className="flex-max-width mt-2 h-[80vh]">
+        <div className="flex h-full flex-col">
+          <div className="flex-max-width mt-2 h-full">
             {selectedTab !== 0 && (
               <div
                 className={cn(
@@ -70,7 +121,9 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
               >
                 <Tabs
                   value={selectedTab.toString()}
-                className={"api-modal-tabs "}
+                  className={
+                    "flex h-full flex-col overflow-hidden rounded-md border bg-muted text-center"
+                  }
                   onValueChange={(value) => {
                     setSelectedTab(Number(value));
                   }}
@@ -226,12 +279,25 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                   />
                 )
               ) : (
-              <NewChatView />
+                <NewChatView
+                  sendMessage={sendMessage}
+                  chatValue={chatValue}
+                  setChatValue={setChatValue}
+                  lockChat={lockChat}
+                  setLockChat={setLockChat}
+                />
               )
             ) : (
-            <div className="absolute bottom-8 right-8">
+              <div className="absolute bottom-8 right-8"></div>
-              <Button className="px-3">
+            )}
-                <IconComponent name="Play" className="h-6 w-6" />
+          </div>
+          {!haveChat && (
+            <div className="flex w-full justify-end pt-6">
+              <Button className="px-3" onClick={() => sendMessage(1)}>
+                <IconComponent
+                  name={isBuilding ? "Loader2" : "Play"}
+                  className={cn("h-6 w-6", isBuilding ? "animate-spin" : "")}
+                />
               </Button>
             </div>
           )}

src/frontend/src/components/newChatView/index.tsx

@@ -1,4 +1,4 @@
-import _, { cloneDeep } from "lodash";
+import _ from "lodash";
 import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import { deleteFlowPool } from "../../controllers/API";
@@ -11,30 +11,21 @@ import {
   ChatOutputType,
   FlowPoolObjectType,
 } from "../../types/chat";
-import { NodeType } from "../../types/flow";
-import { validateNodes } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import ChatInput from "./chatInput";
 import ChatMessage from "./chatMessage";
 
-export default function NewChatView(): JSX.Element {
+export default function NewChatView({
-  const [chatValue, setChatValue] = useState("");
+  sendMessage,
-  const {
+  chatValue,
-    flowPool,
+  setChatValue,
-    outputs,
+  lockChat,
-    inputs,
+  setLockChat,
-    getNode,
+}): JSX.Element {
-    setNode,
+  const { flowPool, outputs, inputs, CleanFlowPool } = useFlowStore();
-    buildFlow,
+  const { setNoticeData } = useAlertStore();
-    getFlow,
-    CleanFlowPool,
-  } = useFlowStore();
-  const { setErrorData, setNoticeData } = useAlertStore();
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-  const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
-  const [lockChat, setLockChat] = useState(false);
   const messagesRef = useRef<HTMLDivElement | null>(null);
-  const isBuilding = useFlowStore((state) => state.isBuilding);
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
 
   const inputTypes = inputs.map((obj) => obj.type);
@@ -115,40 +106,6 @@ export default function NewChatView(): JSX.Element {
     }
   }, []);
 
-  async function sendMessage(count = 1): Promise<void> {
-    if (isBuilding) return;
-    const { nodes, edges } = getFlow();
-    let nodeValidationErrors = validateNodes(nodes, edges);
-    if (nodeValidationErrors.length === 0) {
-      setIsBuilding(true);
-      setLockChat(true);
-      setChatValue("");
-      const chatInputId = inputIds.find((inputId) =>
-        inputId.includes("ChatInput")
-      );
-      const chatInput: NodeType = getNode(chatInputId!) as NodeType;
-      if (chatInput) {
-        let newNode = cloneDeep(chatInput);
-        newNode.data.node!.template["message"].value = chatValue;
-        setNode(chatInputId!, newNode);
-      }
-      for (let i = 0; i < count; i++) {
-        await buildFlow().catch((err) => {
-          console.error(err);
-          setLockChat(false);
-        });
-      }
-      setLockChat(false);
-
-      //set chat message in the flow and run build
-      //@ts-ignore
-    } else {
-      setErrorData({
-        title: "Oops! Looks like you missed some required information:",
-        list: nodeValidationErrors,
-      });
-    }
-  }
   function clearChat(): void {
     setChatHistory([]);
     deleteFlowPool(currentFlowId).then((_) => {