Added visual changes, as pin on toolbar and play button separate from status.

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -120,7 +120,6 @@ export default function GenericNode({
   }, [flowPool, data.id]);
 
   const showNode = data.showNode ?? true;
-  const pinned = data.node?.pinned ?? false;
 
   const nameEditable = data.node?.flow || data.type === "CustomComponent";
 
@@ -160,7 +159,7 @@ export default function GenericNode({
   const getIconPlayOrPauseComponent = (name, className) => (
     <IconComponent
       name={name}
-      className={`absolute h-5 stroke-2 ${className} ml-0.5`}
+      className={`h-4 fill-current stroke-2 ${className}`}
     />
   );
 
@@ -193,7 +192,7 @@ export default function GenericNode({
       return <Loading />;
     } else {
       const className = getStatusClassName(buildStatus, validationStatus);
-      return <>{getIconPlayOrPauseComponent("Play", className)}</>;
+      return <>{getIconPlayOrPauseComponent("CircleDot", className)}</>;
     }
   };
 
@@ -439,39 +438,7 @@ export default function GenericNode({
             {showNode && (
               <Button
                 variant="outline"
-                className="h-9 px-1.5"
+                className={"group h-9 px-1.5"}
-                onClick={() => {
-                  setNode(data.id, (old) => ({
-                    ...old,
-                    data: {
-                      ...old.data,
-                      node: {
-                        ...old.data.node,
-                        pinned: old.data?.node?.pinned ? false : true,
-                      },
-                    },
-                  }));
-                }}
-              >
-                <Tooltip
-                  title={<span>{pinned ? "Pin Output" : "Unpin Output"}</span>}
-                >
-                  <div className="generic-node-status-position flex items-center">
-                    <IconComponent
-                      name={"Pin"}
-                      className={cn(
-                        "h-5 fill-transparent stroke-chat-trigger stroke-2 transition-all",
-                        pinned ? "animate-wiggle fill-chat-trigger" : ""
-                      )}
-                    />
-                  </div>
-                </Tooltip>
-              </Button>
-            )}
-            {showNode && (
-              <Button
-                variant="outline"
-                className={"h-9 px-1.5"}
                 onClick={() => {
                   if (data?.build_status === BuildStatus.BUILDING || isBuilding)
                     return;
@@ -485,12 +452,7 @@ export default function GenericNode({
                         <span>Building...</span>
                       ) : !validationStatus ? (
                         <span className="flex">
-                          Build{" "}
+                          Build flow to validate status.
-                          <IconComponent
-                            name="Play"
-                            className=" h-5 stroke-build-trigger stroke-2"
-                          />{" "}
-                          flow to validate status.
                         </span>
                       ) : (
                         <div className="max-h-96 overflow-auto">
@@ -506,15 +468,21 @@ export default function GenericNode({
                     }
                   >
                     <div className="generic-node-status-position flex items-center justify-center">
-                      {renderIconPlayOrPauseComponents(
+                      <IconComponent
-                        data?.build_status,
+                        name="Play"
-                        validationStatus
+                        className="absolute ml-0.5 h-5 fill-current stroke-2 text-chat-trigger"
-                      )}
+                      />
                     </div>
                   </Tooltip>
                 </div>
               </Button>
             )}
+            <div className="">
+              {renderIconPlayOrPauseComponents(
+                data?.build_status,
+                validationStatus
+              )}
+            </div>
           </div>
         </div>
 

src/frontend/src/components/IOInputField/index.tsx

@@ -63,7 +63,7 @@ export default function IOInputField({
     }
   }
   return (
-    <div className="font-xl flex h-full w-full flex-col gap-4 p-4 font-semibold">
+    <div className="font-xl flex items-start h-full w-full flex-col gap-4 p-4 font-semibold">
       {inputType}
       {handleInputType()}
     </div>

src/frontend/src/components/IOOutputView/index.tsx

@@ -44,7 +44,7 @@ export default function IOOutputView({
     }
   }
   return (
-    <div className="font-xl flex h-full w-full flex-col gap-4 p-4 font-semibold">
+    <div className="font-xl flex h-full items-start w-full flex-col gap-4 p-4 font-semibold">
       {outputType}
       {handleOutputType()}
     </div>

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

@@ -10,6 +10,7 @@ import IconComponent from "../genericIconComponent";
 import NewChatView from "../newChatView";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 
 export default function IOView({ children, open, setOpen }): JSX.Element {
   const inputs = useFlowStore((state) => state.inputs).filter(
@@ -67,78 +68,45 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                 haveChat ? "w-2/6" : "w-full"
               )}
             >
-              <div className="flex w-full items-center justify-between py-2">
+              <Tabs
-                <div className="flex items-start gap-4">
+                value={selectedTab.toString()}
-                  {inputs.length > 0 && (
+                className={"api-modal-tabs "}
-                    <Button
+                onValueChange={(value) => {
-                      onClick={() => setSelectedTab(1)}
+                  setSelectedTab(Number(value));
-                      variant={selectedTab === 1 ? "primary" : "secondary"}
+                }}
               >
-                      <IconComponent
+                <div className="api-modal-tablist-div">
-                        name="FormInput"
+                  <TabsList>
-                        className=" file-component-variable"
+                    {inputs.length > 0 && (
-                      />
+                      <TabsTrigger value={"1"}>Inputs</TabsTrigger>
-                      <span className="file-component-variables-span text-md">
-                        Inputs
-                      </span>
-                    </Button>
                     )}
                     {outputs.length > 0 && (
-                    <Button
+                      <TabsTrigger value={"2"}>Outputs</TabsTrigger>
-                      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>
                     )}
+                  </TabsList>
                 </div>
-                {selectedViewField && haveChat && (
+
-                  <Button
+                <TabsContent
-                    onClick={() => setSelectedViewField(undefined)}
+                  value={"1"}
-                    variant="outline"
+                  className="api-modal-tabs-content mt-4"
-                    key={"chat"}
-                    className="self-end px-2.5"
                 >
-                    <IconComponent
+                  <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
-                      name="MessageSquareMore"
+                    <IconComponent className="h-4 w-4" name={"Type"} />
-                      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)
-                    ? inputs.some((input) => input.id === node.id)
-                    : outputs.some((output) => output.id === node.id)
                     )
                     .map((node, index) => {
-                  const input =
+                      const input = inputs.find(
-                    selectedTab === 1
+                        (input) => input.id === node.id
-                      ? inputs.find((input) => input.id === node.id)!
+                      )!;
-                      : outputs.find((output) => output.id === node.id)!;
                       return (
-                    <div className="file-component-accordion-div" key={index}>
+                        <div
+                          className="file-component-accordion-div"
+                          key={index}
+                        >
                           <AccordionComponent
                             trigger={
                               <div className="file-component-badge-div">
@@ -166,24 +134,81 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                           >
                             <div className="file-component-tab-column">
                               <div className="">
-                            {input &&
+                                {input && (
-                              (selectedTab === 1 ? (
                                   <IOInputField
                                     inputType={input.type}
                                     inputId={input.id}
                                   />
-                              ) : (
+                                )}
-                                <IOOutputView
-                                  outputType={input.type}
-                                  outputId={input.id}
-                                />
-                              ))}
                               </div>
                             </div>
                           </AccordionComponent>
                         </div>
                       );
                     })}
+                </TabsContent>
+                <TabsContent
+                  value={"2"}
+                  className="api-modal-tabs-content mt-4"
+                >
+                  <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
+                    <IconComponent className="h-4 w-4" name={"Braces"} />
+                    Prompt Outputs
+                  </div>
+                  {nodes
+                    .filter((node) =>
+                      outputs.some((output) => output.id === node.id)
+                    )
+                    .map((node, index) => {
+                      const output = 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">
+                                  {output.id}
+                                </Badge>
+                                {haveChat && (
+                                  <div
+                                    className="-mb-1 pr-4"
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      setSelectedViewField(output);
+                                    }}
+                                  >
+                                    <IconComponent
+                                      className="h-4 w-4"
+                                      name="ExternalLink"
+                                    ></IconComponent>
+                                  </div>
+                                )}
+                              </div>
+                            }
+                            key={index}
+                            keyValue={output.id}
+                          >
+                            <div className="file-component-tab-column">
+                              <div className="">
+                                {output && (
+                                  <IOOutputView
+                                    outputType={output.type}
+                                    outputId={output.id}
+                                  />
+                                )}
+                              </div>
+                            </div>
+                          </AccordionComponent>
+                        </div>
+                      );
+                    })}
+                </TabsContent>
+              </Tabs>
             </div>
           )}
 

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/modals/genericModal/index.tsx

@@ -255,7 +255,7 @@ export default function GenericModal({
                   >
                     <div className="flex flex-wrap items-center">
                       <IconComponent
-                        name="Variable"
+                        name="Braces"
                         className=" -ml-px mr-1 flex h-4 w-4 text-primary"
                       />
                       <span className="text-md font-semibold text-primary">

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -25,7 +25,7 @@ import {
   expandGroupNode,
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
-import { classNames } from "../../../../utils/utils";
+import { classNames, cn } from "../../../../utils/utils";
 
 export default function NodeToolbarComponent({
   data,
@@ -60,6 +60,7 @@ export default function NodeToolbarComponent({
   const isMinimal = numberOfHandles <= 1;
   const isGroup = data.node?.flow ? true : false;
 
+  const pinned = data.node?.pinned ?? false;
   const paste = useFlowStore((state) => state.paste);
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
@@ -107,6 +108,9 @@ export default function NodeToolbarComponent({
         takeSnapshot();
         setShowNode(data.showNode ?? true ? false : true);
         break;
+      case "Share":
+        if (hasApiKey || hasStore) setShowconfirmShare(true);
+        break;
       case "Download":
         downloadNode(flowComponent!);
         break;
@@ -269,22 +273,35 @@ export default function NodeToolbarComponent({
               <IconComponent name="Copy" className="h-4 w-4" />
             </button>
           </ShadTooltip>
-          {hasStore && (
+
-            <ShadTooltip content="Share" side="top">
+          <ShadTooltip content="Pin" side="top">
             <button
               className={classNames(
-                  "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
-                  !hasApiKey || !validApiKey ? " text-muted-foreground" : ""
               )}
               onClick={(event) => {
                 event.preventDefault();
-                  if (hasApiKey || hasStore) setShowconfirmShare(true);
+                setNode(data.id, (old) => ({
+                  ...old,
+                  data: {
+                    ...old.data,
+                    node: {
+                      ...old.data.node,
+                      pinned: old.data?.node?.pinned ? false : true,
+                    },
+                  },
+                }));
               }}
             >
-                <IconComponent name="Share3" className="-m-1 h-6 w-6" />
+              <IconComponent
+                name="Pin"
+                className={cn(
+                  "h-4 w-4 transition-all",
+                  pinned ? "animate-wiggle fill-current" : ""
+                )}
+              />
             </button>
           </ShadTooltip>
-          )}
 
           <Select onValueChange={handleSelectChange} value="">
             <ShadTooltip content="More" side="top">
@@ -340,6 +357,20 @@ export default function NodeToolbarComponent({
                   </SelectItem>
                 )
               )}
+              {hasStore && (
+                <SelectItem
+                  value={"Share"}
+                  disabled={!hasApiKey || !validApiKey}
+                >
+                  <div className="flex" data-testid="save-button-modal">
+                    <IconComponent
+                      name="Share3"
+                      className="relative top-0.5 -m-1 mr-1 h-6 w-6"
+                    />{" "}
+                    Share{" "}
+                  </div>{" "}
+                </SelectItem>
+              )}
               {!hasStore && (
                 <SelectItem value={"Download"}>
                   <div className="flex">

src/frontend/src/style/applies.css

@@ -845,7 +845,7 @@
     @apply flex h-full max-w-full flex-col overflow-hidden rounded-md border bg-muted text-center sm:w-[75vw] md:w-[75vw] lg:w-[75vw] xl:w-[76vw] 2xl:w-full;
   }
   .api-modal-tablist-div {
-    @apply flex items-center justify-between px-2;
+    @apply flex items-center justify-between px-2 py-2;
   }
   .api-modal-tabs-content {
     @apply -mt-1 h-full w-full overflow-hidden px-4 pb-4;

src/frontend/src/utils/styleUtils.ts

@@ -6,6 +6,7 @@ import {
   BookmarkPlus,
   Bot,
   Boxes,
+  Braces,
   Cable,
   Check,
   CheckCircle2,
@@ -18,6 +19,7 @@ import {
   ChevronsRight,
   ChevronsUpDown,
   Circle,
+  CircleDot,
   Clipboard,
   Code,
   Code2,
@@ -101,6 +103,7 @@ import {
   TextCursorInput,
   ToyBrick,
   Trash2,
+  Type,
   Undo,
   Ungroup,
   Unplug,
@@ -344,6 +347,7 @@ export const nodeIconsLucide: iconsType = {
   FileSearch2,
   ChevronRight,
   Circle,
+  CircleDot,
   Clipboard,
   Code2,
   Variable,
@@ -413,6 +417,8 @@ export const nodeIconsLucide: iconsType = {
   Sliders,
   ScreenShare,
   Code,
+  Type,
+  Braces,
   FlaskConical,
   AlertCircle,
   Bot,