Fixed chat button

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

@@ -60,11 +60,17 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
   }
 
   function UpdateAccordion() {
-    return (categories[selectedCategory]?.name ?? "Inputs") === "Inputs" ? inputs : outputs;
+    return (categories[selectedCategory]?.name ?? "Inputs") === "Inputs"
+      ? inputs
+      : outputs;
   }
 
   return (
-    <BaseModal size={handleSelectChange() ? "large" : "small"} open={open} setOpen={setOpen}>
+    <BaseModal
+      size={handleSelectChange() ? "large" : "small"}
+      open={open}
+      setOpen={setOpen}
+    >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
       <BaseModal.Header description={CHAT_FORM_DIALOG_SUBTITLE}>
@@ -85,56 +91,58 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
               handleSelectChange() ? "w-2/6" : "w-full"
             )}
           >
-            <div className="flex items-start gap-4 py-2">
+            <div className="flex w-full items-center justify-between py-2">
-              {categories.map((category, index) => {
+              <div className="flex items-start gap-4">
-                return (
+                {categories.map((category, index) => {
-                  //hide chat button if chat is alredy on the view
+                  return (
-                  <Button
+                    //hide chat button if chat is alredy on the view
-                    onClick={() => setSelectedCategory(index)}
+                    <Button
-                    variant={
+                      onClick={() => setSelectedCategory(index)}
-                      index === selectedCategory ? "primary" : "secondary"
+                      variant={
-                    }
+                        index === selectedCategory ? "primary" : "secondary"
-                    key={index}
+                      }
-                  >
+                      key={index}
-                    <IconComponent
+                    >
-                      name={category.icon}
+                      <IconComponent
-                      className=" file-component-variable"
+                        name={category.icon}
-                    />
+                        className=" file-component-variable"
-                    <span className="file-component-variables-span text-md">
+                      />
-                      {category.name}
+                      <span className="file-component-variables-span text-md">
-                    </span>
+                        {category.name}
-                  </Button>
+                      </span>
-                );
+                    </Button>
-              })}
+                  );
+                })}
+              </div>
               {(outputs.map((output) => output.type).includes("ChatOutput") ||
                 inputs.map((output) => output.type).includes("chatInput")) &&
                 selectedView.type !== "ChatOutput" && (
-                  <button
+                  <Button
                     onClick={() => setSelectedView({ type: "ChatOutput" })}
-                    className={
+                    variant="outline"
-                      "cursor flex items-center rounded-md rounded-b-none px-1 hover:bg-muted-foreground"
-                    }
                     key={"chat"}
+                    className="self-end px-2.5"
                   >
                     <IconComponent
-                      name="Variable"
+                      name="MessageSquareMore"
-                      className=" file-component-variable"
+                      className="h-5 w-5"
                     />
-                    <span className="file-component-variables-span text-md">
+                  </Button>
-                      Chat
-                    </span>
-                  </button>
                 )}
             </div>
-            <div className="flex font-semibold mt-4 mb-2 mx-2 gap-2 items-center">
+            <div className="mx-2 mb-2 mt-4 flex items-center gap-2 font-semibold">
-              {categories[selectedCategory].name === "Inputs" &&
+              {categories[selectedCategory].name === "Inputs" && (
-              <><IconComponent name={"FormInput"}/>
+                <>
-              Text Inputs</>
+                  <IconComponent name={"FormInput"} />
-              }
+                  Text Inputs
-              {categories[selectedCategory].name === "Outputs" &&
+                </>
-              <><IconComponent name={"ChevronRightSquare"}/>
+              )}
-              Prompt Outputs</>
+              {categories[selectedCategory].name === "Outputs" && (
-              }
+                <>
+                  <IconComponent name={"ChevronRightSquare"} />
+                  Prompt Outputs
+                </>
+              )}
             </div>
             {UpdateAccordion()
               .filter(

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

@@ -65,6 +65,7 @@ import {
   Menu,
   MessageCircle,
   MessageSquare,
+  MessageSquareMore,
   MessagesSquare,
   Minimize2,
   Minus,
@@ -390,6 +391,7 @@ export const nodeIconsLucide: iconsType = {
   FormInput,
   ChevronRightSquare,
   SaveAll,
+  MessageSquareMore,
   Forward,
   Share2,
   Share,