diff --git a/src/frontend/src/components/IOInputField/index.tsx b/src/frontend/src/components/IOInputField/index.tsx
index e0974a5ff..1fc332226 100644
--- a/src/frontend/src/components/IOInputField/index.tsx
+++ b/src/frontend/src/components/IOInputField/index.tsx
@@ -11,6 +11,7 @@ export default function IOInputField({
   const nodes = useFlowStore((state) => state.nodes);
   const setNode = useFlowStore((state) => state.setNode);
   const node = nodes.find((node) => node.id === inputId);
+  console.log(inputType);
   function handleInputType() {
     if (!node) return "no node found";
     switch (inputType) {
@@ -30,7 +31,7 @@ export default function IOInputField({
             }}
           />
         );
-      case "fileLoader":
+      case "FileLoader":
         return (
           <IOFileInput
             field={node.data.node!.template["file_path"]["value"]}
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 045e87e2c..d14ec3308 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -83,23 +83,24 @@ export default function IOView(): JSX.Element {
               </button>
             );
           })}
-          {selectedView.type !== "ChatOutput" && (
-            <button
-              onClick={() => setSelectedView({ type: "ChatOutput" })}
-              className={
-                "cursor flex items-center rounded-md rounded-b-none px-1 hover:bg-muted-foreground"
-              }
-              key={"chat"}
-            >
-              <IconComponent
-                name="Variable"
-                className=" file-component-variable"
-              />
-              <span className="file-component-variables-span text-md">
-                Chat
-              </span>
-            </button>
-          )}
+          {outputs.map((output) => output.type).includes("ChatOutput") &&
+            selectedView.type !== "ChatOutput" && (
+              <button
+                onClick={() => setSelectedView({ type: "ChatOutput" })}
+                className={
+                  "cursor flex items-center rounded-md rounded-b-none px-1 hover:bg-muted-foreground"
+                }
+                key={"chat"}
+              >
+                <IconComponent
+                  name="Variable"
+                  className=" file-component-variable"
+                />
+                <span className="file-component-variables-span text-md">
+                  Chat
+                </span>
+              </button>
+            )}
         </div>
         {UpdateAccordion()
           .filter((input) => input.type !== "ChatInput")
@@ -131,9 +132,18 @@ export default function IOView(): JSX.Element {
                   keyValue={input.id}
                 >
                   <div className="file-component-tab-column">
-                    {node && (
-                      <IOInputField inputType={input.type} inputId={input.id} />
-                    )}
+                    {node &&
+                      (selectedCategory === "Inputs" ? (
+                        <IOInputField
+                          inputType={input.type}
+                          inputId={input.id}
+                        />
+                      ) : (
+                        <IOOutputView
+                          outputType={input.type}
+                          outputId={input.id}
+                        />
+                      ))}
                   </div>
                 </AccordionComponent>
               </div>