diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 2e7cc0aa9..f0c2defc1 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/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,9 +30,13 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
       node.type !== "ChatInput" &&
       node.type !== "ChatOutput"
   );
-  const haveChat = useFlowStore((state) => state.outputs).some(
-    (output) => output.type === "ChatOutput" || output.type === "ChatInput"
-  );
+  const haveChat =
+    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,178 +110,194 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
         </div>
       </BaseModal.Header>
       <BaseModal.Content>
-        <div className="flex-max-width mt-2 h-[80vh]">
-          {selectedTab !== 0 && (
-            <div
-              className={cn(
-                "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start overflow-auto scrollbar-hide",
-                haveChat ? "w-2/6" : "w-full"
-              )}
-            >
-              <Tabs
-                value={selectedTab.toString()}
-                className={"api-modal-tabs "}
-                onValueChange={(value) => {
-                  setSelectedTab(Number(value));
-                }}
+        <div className="flex h-full flex-col">
+          <div className="flex-max-width mt-2 h-full">
+            {selectedTab !== 0 && (
+              <div
+                className={cn(
+                  "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start overflow-auto scrollbar-hide",
+                  haveChat ? "w-2/6" : "w-full"
+                )}
               >
-                <div className="api-modal-tablist-div">
-                  <TabsList>
-                    {inputs.length > 0 && (
-                      <TabsTrigger value={"1"}>Inputs</TabsTrigger>
-                    )}
-                    {outputs.length > 0 && (
-                      <TabsTrigger value={"2"}>Outputs</TabsTrigger>
-                    )}
-                  </TabsList>
-                </div>
-
-                <TabsContent
-                  value={"1"}
-                  className="api-modal-tabs-content mt-4"
+                <Tabs
+                  value={selectedTab.toString()}
+                  className={
+                    "flex h-full flex-col overflow-hidden rounded-md border bg-muted text-center"
+                  }
+                  onValueChange={(value) => {
+                    setSelectedTab(Number(value));
+                  }}
                 >
-                  <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
-                    <IconComponent className="h-4 w-4" name={"Type"} />
-                    Text Inputs
+                  <div className="api-modal-tablist-div">
+                    <TabsList>
+                      {inputs.length > 0 && (
+                        <TabsTrigger value={"1"}>Inputs</TabsTrigger>
+                      )}
+                      {outputs.length > 0 && (
+                        <TabsTrigger value={"2"}>Outputs</TabsTrigger>
+                      )}
+                    </TabsList>
                   </div>
-                  {nodes
-                    .filter((node) =>
-                      inputs.some((input) => input.id === node.id)
-                    )
-                    .map((node, index) => {
-                      const input = inputs.find(
-                        (input) => input.id === node.id
-                      )!;
-                      return (
-                        <div
-                          className="file-component-accordion-div"
-                          key={index}
-                        >
-                          <AccordionComponent
-                            trigger={
-                              <div className="file-component-badge-div">
-                                <Badge variant="gray" size="md">
-                                  {input.id}
-                                </Badge>
-                                {haveChat && (
-                                  <div
-                                    className="-mb-1 pr-4"
-                                    onClick={(event) => {
-                                      event.stopPropagation();
-                                      setSelectedViewField(input);
-                                    }}
-                                  >
-                                    <IconComponent
-                                      className="h-4 w-4"
-                                      name="ExternalLink"
-                                    ></IconComponent>
-                                  </div>
-                                )}
-                              </div>
-                            }
-                            key={index}
-                            keyValue={input.id}
-                          >
-                            <div className="file-component-tab-column">
-                              <div className="">
-                                {input && (
-                                  <IOInputField
-                                    inputType={input.type}
-                                    inputId={input.id}
-                                  />
-                                )}
-                              </div>
-                            </div>
-                          </AccordionComponent>
-                        </div>
-                      );
-                    })}
-                </TabsContent>
-                <TabsContent
-                  value={"2"}
-                  className="api-modal-tabs-content mt-4"
-                >
-                  <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
-                    <IconComponent className="h-4 w-4" name={"Braces"} />
-                    Prompt Outputs
-                  </div>
-                  {nodes
-                    .filter((node) =>
-                      outputs.some((output) => output.id === node.id)
-                    )
-                    .map((node, index) => {
-                      const output = outputs.find(
-                        (output) => output.id === node.id
-                      )!;
-                      return (
-                        <div
-                          className="file-component-accordion-div"
-                          key={index}
-                        >
-                          <AccordionComponent
-                            trigger={
-                              <div className="file-component-badge-div">
-                                <Badge variant="gray" size="md">
-                                  {output.id}
-                                </Badge>
-                                {haveChat && (
-                                  <div
-                                    className="-mb-1 pr-4"
-                                    onClick={(event) => {
-                                      event.stopPropagation();
-                                      setSelectedViewField(output);
-                                    }}
-                                  >
-                                    <IconComponent
-                                      className="h-4 w-4"
-                                      name="ExternalLink"
-                                    ></IconComponent>
-                                  </div>
-                                )}
-                              </div>
-                            }
-                            key={index}
-                            keyValue={output.id}
-                          >
-                            <div className="file-component-tab-column">
-                              <div className="">
-                                {output && (
-                                  <IOOutputView
-                                    outputType={output.type}
-                                    outputId={output.id}
-                                  />
-                                )}
-                              </div>
-                            </div>
-                          </AccordionComponent>
-                        </div>
-                      );
-                    })}
-                </TabsContent>
-              </Tabs>
-            </div>
-          )}
 
-          {haveChat ? (
-            selectedViewField ? (
-              inputs.some((input) => input.id === selectedViewField.id) ? (
-                <IOInputField
-                  inputType={selectedViewField.type!}
-                  inputId={selectedViewField.id!}
-                />
+                  <TabsContent
+                    value={"1"}
+                    className="api-modal-tabs-content mt-4"
+                  >
+                    <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
+                      <IconComponent className="h-4 w-4" name={"Type"} />
+                      Text Inputs
+                    </div>
+                    {nodes
+                      .filter((node) =>
+                        inputs.some((input) => input.id === node.id)
+                      )
+                      .map((node, index) => {
+                        const input = inputs.find(
+                          (input) => input.id === node.id
+                        )!;
+                        return (
+                          <div
+                            className="file-component-accordion-div"
+                            key={index}
+                          >
+                            <AccordionComponent
+                              trigger={
+                                <div className="file-component-badge-div">
+                                  <Badge variant="gray" size="md">
+                                    {input.id}
+                                  </Badge>
+                                  {haveChat && (
+                                    <div
+                                      className="-mb-1 pr-4"
+                                      onClick={(event) => {
+                                        event.stopPropagation();
+                                        setSelectedViewField(input);
+                                      }}
+                                    >
+                                      <IconComponent
+                                        className="h-4 w-4"
+                                        name="ExternalLink"
+                                      ></IconComponent>
+                                    </div>
+                                  )}
+                                </div>
+                              }
+                              key={index}
+                              keyValue={input.id}
+                            >
+                              <div className="file-component-tab-column">
+                                <div className="">
+                                  {input && (
+                                    <IOInputField
+                                      inputType={input.type}
+                                      inputId={input.id}
+                                    />
+                                  )}
+                                </div>
+                              </div>
+                            </AccordionComponent>
+                          </div>
+                        );
+                      })}
+                  </TabsContent>
+                  <TabsContent
+                    value={"2"}
+                    className="api-modal-tabs-content mt-4"
+                  >
+                    <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
+                      <IconComponent className="h-4 w-4" name={"Braces"} />
+                      Prompt Outputs
+                    </div>
+                    {nodes
+                      .filter((node) =>
+                        outputs.some((output) => output.id === node.id)
+                      )
+                      .map((node, index) => {
+                        const output = outputs.find(
+                          (output) => output.id === node.id
+                        )!;
+                        return (
+                          <div
+                            className="file-component-accordion-div"
+                            key={index}
+                          >
+                            <AccordionComponent
+                              trigger={
+                                <div className="file-component-badge-div">
+                                  <Badge variant="gray" size="md">
+                                    {output.id}
+                                  </Badge>
+                                  {haveChat && (
+                                    <div
+                                      className="-mb-1 pr-4"
+                                      onClick={(event) => {
+                                        event.stopPropagation();
+                                        setSelectedViewField(output);
+                                      }}
+                                    >
+                                      <IconComponent
+                                        className="h-4 w-4"
+                                        name="ExternalLink"
+                                      ></IconComponent>
+                                    </div>
+                                  )}
+                                </div>
+                              }
+                              key={index}
+                              keyValue={output.id}
+                            >
+                              <div className="file-component-tab-column">
+                                <div className="">
+                                  {output && (
+                                    <IOOutputView
+                                      outputType={output.type}
+                                      outputId={output.id}
+                                    />
+                                  )}
+                                </div>
+                              </div>
+                            </AccordionComponent>
+                          </div>
+                        );
+                      })}
+                  </TabsContent>
+                </Tabs>
+              </div>
+            )}
+
+            {haveChat ? (
+              selectedViewField ? (
+                inputs.some((input) => input.id === selectedViewField.id) ? (
+                  <IOInputField
+                    inputType={selectedViewField.type!}
+                    inputId={selectedViewField.id!}
+                  />
+                ) : (
+                  <IOOutputView
+                    outputType={selectedViewField.type!}
+                    outputId={selectedViewField.id!}
+                  />
+                )
               ) : (
-                <IOOutputView
-                  outputType={selectedViewField.type!}
-                  outputId={selectedViewField.id!}
+                <NewChatView
+                  sendMessage={sendMessage}
+                  chatValue={chatValue}
+                  setChatValue={setChatValue}
+                  lockChat={lockChat}
+                  setLockChat={setLockChat}
                 />
               )
             ) : (
-              <NewChatView />
-            )
-          ) : (
-            <div className="absolute bottom-8 right-8">
-              <Button className="px-3">
-                <IconComponent name="Play" className="h-6 w-6" />
+              <div className="absolute bottom-8 right-8"></div>
+            )}
+          </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>
           )}
diff --git a/src/frontend/src/components/newChatView/index.tsx b/src/frontend/src/components/newChatView/index.tsx
index d069ea97c..38a633444 100644
--- a/src/frontend/src/components/newChatView/index.tsx
+++ b/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 {
-  const [chatValue, setChatValue] = useState("");
-  const {
-    flowPool,
-    outputs,
-    inputs,
-    getNode,
-    setNode,
-    buildFlow,
-    getFlow,
-    CleanFlowPool,
-  } = useFlowStore();
-  const { setErrorData, setNoticeData } = useAlertStore();
+export default function NewChatView({
+  sendMessage,
+  chatValue,
+  setChatValue,
+  lockChat,
+  setLockChat,
+}): JSX.Element {
+  const { flowPool, outputs, inputs, CleanFlowPool } = useFlowStore();
+  const { 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((_) => {