Fixed bug when opening io view modal

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,14 +60,16 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
       </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-col justify-start overflow-auto scrollbar-hide",
+                "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="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"}
@@ -75,6 +82,8 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                         Inputs
                       </span>
                     </Button>
+                  )}
+                  {outputs.length > 0 && (
                     <Button
                       onClick={() => setSelectedTab(2)}
                       variant={selectedTab === 2 ? "primary" : "secondary"}
@@ -87,6 +96,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                         Outputs
                       </span>
                     </Button>
+                  )}
                 </div>
                 {selectedViewField && haveChat && (
                   <Button
@@ -95,7 +105,10 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                     key={"chat"}
                     className="self-end px-2.5"
                   >
-                  <IconComponent name="MessageSquareMore" className="h-5 w-5" />
+                    <IconComponent
+                      name="MessageSquareMore"
+                      className="h-5 w-5"
+                    />
                   </Button>
                 )}
               </div>
@@ -172,6 +185,8 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                   );
                 })}
             </div>
+          )}
+
           {haveChat ? (
             selectedViewField ? (
               inputs.some((input) => input.id === selectedViewField.id) ? (

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"]);