diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 57569c7e7..7e3e24f76 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import BaseModal from "../../modals/baseModal";
 import useFlowStore from "../../stores/flowStore";
@@ -35,6 +35,11 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
     { type: string; id: string } | undefined
   >(undefined);
 
+  useEffect(() => {
+    setSelectedViewField(undefined);
+    setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
+  }, [inputs.length, outputs.length]);
+
   return (
     <BaseModal
       size={haveChat ? "large" : "small"}
@@ -55,123 +60,133 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
       </BaseModal.Header>
       <BaseModal.Content>
         <div className="flex-max-width mt-2 h-[80vh]">
-          <div
-            className={cn(
-              "mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide",
-              haveChat ? "w-2/6" : "w-full"
-            )}
-          >
-            <div className="flex w-full items-center justify-between py-2">
-              <div className="flex items-start gap-4">
-                <Button
-                  onClick={() => setSelectedTab(1)}
-                  variant={selectedTab === 1 ? "primary" : "secondary"}
-                >
-                  <IconComponent
-                    name="FormInput"
-                    className=" file-component-variable"
-                  />
-                  <span className="file-component-variables-span text-md">
-                    Inputs
-                  </span>
-                </Button>
-                <Button
-                  onClick={() => setSelectedTab(2)}
-                  variant={selectedTab === 2 ? "primary" : "secondary"}
-                >
-                  <IconComponent
-                    name="ChevronRightSquare"
-                    className=" file-component-variable"
-                  />
-                  <span className="file-component-variables-span text-md">
-                    Outputs
-                  </span>
-                </Button>
-              </div>
-              {selectedViewField && haveChat && (
-                <Button
-                  onClick={() => setSelectedViewField(undefined)}
-                  variant="outline"
-                  key={"chat"}
-                  className="self-end px-2.5"
-                >
-                  <IconComponent name="MessageSquareMore" className="h-5 w-5" />
-                </Button>
+          {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>
-            <div className="mx-2 mb-2 mt-4 flex items-center gap-2 font-semibold">
-              {selectedTab === 1 && (
-                <>
-                  <IconComponent name={"FormInput"} />
-                  Text Inputs
-                </>
-              )}
-              {selectedTab === 2 && (
-                <>
-                  <IconComponent name={"ChevronRightSquare"} />
-                  Prompt Outputs
-                </>
-              )}
-            </div>
-            {nodes
-              .filter((node) =>
-                selectedTab === 1
-                  ? inputs.some((input) => input.id === node.id)
-                  : outputs.some((output) => output.id === node.id)
-              )
-              .map((node, index) => {
-                const input =
-                  selectedTab === 1
-                    ? inputs.find((input) => input.id === node.id)!
-                    : 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">
-                            {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="flex w-full items-center justify-between py-2">
+                <div className="flex items-start gap-4">
+                  {inputs.length > 0 && (
+                    <Button
+                      onClick={() => setSelectedTab(1)}
+                      variant={selectedTab === 1 ? "primary" : "secondary"}
                     >
-                      <div className="file-component-tab-column">
-                        <div className="">
-                          {input &&
-                            (selectedTab === 1 ? (
-                              <IOInputField
-                                inputType={input.type}
-                                inputId={input.id}
-                              />
-                            ) : (
-                              <IOOutputView
-                                outputType={input.type}
-                                outputId={input.id}
-                              />
-                            ))}
+                      <IconComponent
+                        name="FormInput"
+                        className=" file-component-variable"
+                      />
+                      <span className="file-component-variables-span text-md">
+                        Inputs
+                      </span>
+                    </Button>
+                  )}
+                  {outputs.length > 0 && (
+                    <Button
+                      onClick={() => setSelectedTab(2)}
+                      variant={selectedTab === 2 ? "primary" : "secondary"}
+                    >
+                      <IconComponent
+                        name="ChevronRightSquare"
+                        className=" file-component-variable"
+                      />
+                      <span className="file-component-variables-span text-md">
+                        Outputs
+                      </span>
+                    </Button>
+                  )}
+                </div>
+                {selectedViewField && haveChat && (
+                  <Button
+                    onClick={() => setSelectedViewField(undefined)}
+                    variant="outline"
+                    key={"chat"}
+                    className="self-end px-2.5"
+                  >
+                    <IconComponent
+                      name="MessageSquareMore"
+                      className="h-5 w-5"
+                    />
+                  </Button>
+                )}
+              </div>
+              <div className="mx-2 mb-2 mt-4 flex items-center gap-2 font-semibold">
+                {selectedTab === 1 && (
+                  <>
+                    <IconComponent name={"FormInput"} />
+                    Text Inputs
+                  </>
+                )}
+                {selectedTab === 2 && (
+                  <>
+                    <IconComponent name={"ChevronRightSquare"} />
+                    Prompt Outputs
+                  </>
+                )}
+              </div>
+              {nodes
+                .filter((node) =>
+                  selectedTab === 1
+                    ? inputs.some((input) => input.id === node.id)
+                    : outputs.some((output) => output.id === node.id)
+                )
+                .map((node, index) => {
+                  const input =
+                    selectedTab === 1
+                      ? inputs.find((input) => input.id === node.id)!
+                      : 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">
+                              {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 &&
+                              (selectedTab === 1 ? (
+                                <IOInputField
+                                  inputType={input.type}
+                                  inputId={input.id}
+                                />
+                              ) : (
+                                <IOOutputView
+                                  outputType={input.type}
+                                  outputId={input.id}
+                                />
+                              ))}
+                          </div>
                         </div>
-                      </div>
-                    </AccordionComponent>
-                  </div>
-                );
-              })}
-          </div>
+                      </AccordionComponent>
+                    </div>
+                  );
+                })}
+            </div>
+          )}
+
           {haveChat ? (
             selectedViewField ? (
               inputs.some((input) => input.id === selectedViewField.id) ? (
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index c1eaa999d..b9422efab 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -681,4 +681,4 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
 export const priorityFields = new Set(["code", "template"]);
 
 export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
-export const OUTPUT_TYPES = new Set(["ChatOutput", "PromptTemplate"]);
+export const OUTPUT_TYPES = new Set(["ChatOutput"]);