Changed tabs layout to existing tabs

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

@@ -2,13 +2,13 @@ import { ReactNode, useState } from "react";
 import useFlowStore from "../../stores/flowStore";
 import { NodeType } from "../../types/flow";
 import { isInputType, isOutputType } from "../../utils/reactflowUtils";
-import { classNames } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
 import IOInputField from "../IOInputField";
 import IOOutputView from "../IOOutputView";
 import IconComponent from "../genericIconComponent";
 import NewChatView from "../newChatView";
 import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
 
 export default function IOView(): JSX.Element {
   const inputs = useFlowStore((state) => state.inputs);
@@ -18,15 +18,15 @@ export default function IOView(): JSX.Element {
   const nodes = useFlowStore((state) => state.nodes);
   const setNode = useFlowStore((state) => state.setNode);
   const categories = getCategories();
-  const [selectedCategory, setSelectedCategory] = useState<string>(
+  const [selectedCategory, setSelectedCategory] = useState<number>(0);
-    categories[0]
-  );
   const [showChat, setShowChat] = useState<boolean>(false);
   const [selectedView, setSelectedView] = useState<{
     type: string;
     id?: string;
   }>(handleInitialView());
 
+  type CategoriesType = { name: string; icon: string };
+
   function handleInitialView() {
     if (
       outputs.map((output) => output.type).includes("ChatOutput") ||
@@ -38,10 +38,11 @@ export default function IOView(): JSX.Element {
   }
 
   function getCategories() {
-    const categories: string[] = [];
+    const categories: CategoriesType[] = [];
-    if (inputs.length > 0) categories.push("Inputs");
+    if (inputs.length > 0)
+      categories.push({ name: "Inputs", icon: "TextCursorInput" });
     if (outputs.filter((output) => output.type !== "ChatOutput").length > 0)
-      categories.push("Outputs");
+      categories.push({ name: "Outputs", icon: "TerminalSquare" });
     return categories;
   }
 
@@ -56,7 +57,7 @@ export default function IOView(): JSX.Element {
   }
 
   function UpdateAccordion() {
-    return selectedCategory === "Inputs" ? inputs : outputs;
+    return categories[selectedCategory].name === "Inputs" ? inputs : outputs;
   }
 
   return (
@@ -66,24 +67,19 @@ export default function IOView(): JSX.Element {
           {categories.map((category, index) => {
             return (
               //hide chat button if chat is alredy on the view
-              <button
+              <Button
-                onClick={() => setSelectedCategory(category)}
+                onClick={() => setSelectedCategory(index)}
-                className={classNames(
+                variant={index === selectedCategory ? "primary" : "secondary"}
-                  "cursor flex items-center rounded-md rounded-b-none px-1",
-                  category == selectedCategory
-                    ? "border border-b-0 border-muted-foreground"
-                    : "hover:bg-muted-foreground"
-                )}
                 key={index}
               >
                 <IconComponent
-                  name="Variable"
+                  name={category.icon}
                   className=" file-component-variable"
                 />
                 <span className="file-component-variables-span text-md">
-                  {category}
+                  {category.name}
                 </span>
-              </button>
+              </Button>
             );
           })}
           {(outputs.map((output) => output.type).includes("ChatOutput") ||
@@ -137,7 +133,7 @@ export default function IOView(): JSX.Element {
                 >
                   <div className="file-component-tab-column">
                     {node &&
-                      (selectedCategory === "Inputs" ? (
+                      (categories[selectedCategory].name === "Inputs" ? (
                         <IOInputField
                           inputType={input.type}
                           inputId={input.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",]);
+export const OUTPUT_TYPES = new Set(["ChatOutput", "PromptTemplate"]);

src/frontend/src/utils/styleUtils.ts

@@ -1,10 +1,11 @@
 import {
-  ArrowDownUp,
+  AlertCircle,
   ArrowUpToLine,
   Bell,
   BookMarked,
   BookmarkPlus,
   Boxes,
+  Cable,
   Check,
   CheckCircle2,
   ChevronDown,
@@ -34,9 +35,9 @@ import {
   FileSearch,
   FileSearch2,
   FileText,
-  Cable,
   FileUp,
   Fingerprint,
+  FlaskConical,
   FolderPlus,
   Forward,
   Gift,
@@ -92,6 +93,7 @@ import {
   SunIcon,
   TerminalIcon,
   TerminalSquare,
+  TextCursorInput,
   ToyBrick,
   Trash2,
   Undo,
@@ -110,8 +112,6 @@ import {
   X,
   XCircle,
   Zap,
-  FlaskConical,
-  AlertCircle,
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -398,6 +398,8 @@ export const nodeIconsLucide: iconsType = {
   RefreshCcw,
   Combine,
   TerminalIcon,
+  TerminalSquare,
+  TextCursorInput,
   Repeat,
   io: Cable,
   ScreenShare,