From 3e7c776ccf794844b76bdfa33d836f9729cda1a5 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 24 Feb 2024 22:19:52 +0100
Subject: [PATCH] Added visual changes, as pin on toolbar and play button
 separate from status.

---
 .../src/CustomNodes/GenericNode/index.tsx     |  60 +----
 .../src/components/IOInputField/index.tsx     |   2 +-
 .../src/components/IOOutputView/index.tsx     |   2 +-
 src/frontend/src/components/IOview/index.tsx  | 251 ++++++++++--------
 src/frontend/src/constants/constants.ts       |   2 +-
 .../src/modals/genericModal/index.tsx         |   2 +-
 .../components/nodeToolbarComponent/index.tsx |  63 +++--
 src/frontend/src/style/applies.css            |   2 +-
 src/frontend/src/utils/styleUtils.ts          |   6 +
 9 files changed, 210 insertions(+), 180 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index c62abf6b9..7464f07f7 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/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"
-                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"}
+                className={"group 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{" "}
-                          <IconComponent
-                            name="Play"
-                            className=" h-5 stroke-build-trigger stroke-2"
-                          />{" "}
-                          flow to validate status.
+                          Build 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(
-                        data?.build_status,
-                        validationStatus
-                      )}
+                      <IconComponent
+                        name="Play"
+                        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>
 
diff --git a/src/frontend/src/components/IOInputField/index.tsx b/src/frontend/src/components/IOInputField/index.tsx
index c499bd551..0b1afa52d 100644
--- a/src/frontend/src/components/IOInputField/index.tsx
+++ b/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>
diff --git a/src/frontend/src/components/IOOutputView/index.tsx b/src/frontend/src/components/IOOutputView/index.tsx
index fdae4b6b3..da37d34ee 100644
--- a/src/frontend/src/components/IOOutputView/index.tsx
+++ b/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>
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 7e3e24f76..9fc109e21 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/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,123 +68,147 @@ 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">
-                <div className="flex items-start gap-4">
-                  {inputs.length > 0 && (
-                    <Button
-                      onClick={() => setSelectedTab(1)}
-                      variant={selectedTab === 1 ? "primary" : "secondary"}
-                    >
-                      <IconComponent
-                        name="FormInput"
-                        className=" file-component-variable"
-                      />
-                      <span className="file-component-variables-span text-md">
-                        Inputs
-                      </span>
-                    </Button>
-                  )}
-                  {outputs.length > 0 && (
-                    <Button
-                      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>
-                  )}
+              <Tabs
+                value={selectedTab.toString()}
+                className={"api-modal-tabs "}
+                onValueChange={(value) => {
+                  setSelectedTab(Number(value));
+                }}
+              >
+                <div className="api-modal-tablist-div">
+                  <TabsList>
+                    {inputs.length > 0 && (
+                      <TabsTrigger value={"1"}>Inputs</TabsTrigger>
+                    )}
+                    {outputs.length > 0 && (
+                      <TabsTrigger value={"2"}>Outputs</TabsTrigger>
+                    )}
+                  </TabsList>
                 </div>
-                {selectedViewField && haveChat && (
-                  <Button
-                    onClick={() => setSelectedViewField(undefined)}
-                    variant="outline"
-                    key={"chat"}
-                    className="self-end px-2.5"
-                  >
-                    <IconComponent
-                      name="MessageSquareMore"
-                      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"} />
+
+                <TabsContent
+                  value={"1"}
+                  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={"Type"} />
                     Text Inputs
-                  </>
-                )}
-                {selectedTab === 2 && (
-                  <>
-                    <IconComponent name={"ChevronRightSquare"} />
-                    Prompt Outputs
-                  </>
-                )}
-              </div>
-              {nodes
-                .filter((node) =>
-                  selectedTab === 1
-                    ? inputs.some((input) => input.id === node.id)
-                    : outputs.some((output) => output.id === node.id)
-                )
-                .map((node, index) => {
-                  const input =
-                    selectedTab === 1
-                      ? inputs.find((input) => input.id === node.id)!
-                      : 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">
-                              {input.id}
-                            </Badge>
-                            {haveChat && (
-                              <div
-                                className="-mb-1 pr-4"
-                                onClick={(event) => {
-                                  event.stopPropagation();
-                                  setSelectedViewField(input);
-                                }}
-                              >
-                                <IconComponent
-                                  className="h-4 w-4"
-                                  name="ExternalLink"
-                                ></IconComponent>
+                  </div>
+                  {nodes
+                    .filter((node) =>
+                      inputs.some((input) => input.id === node.id)
+                    )
+                    .map((node, index) => {
+                      const input = inputs.find(
+                        (input) => input.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">
+                                  {input.id}
+                                </Badge>
+                                {haveChat && (
+                                  <div
+                                    className="-mb-1 pr-4"
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      setSelectedViewField(input);
+                                    }}
+                                  >
+                                    <IconComponent
+                                      className="h-4 w-4"
+                                      name="ExternalLink"
+                                    ></IconComponent>
+                                  </div>
+                                )}
                               </div>
-                            )}
-                          </div>
-                        }
-                        key={index}
-                        keyValue={input.id}
-                      >
-                        <div className="file-component-tab-column">
-                          <div className="">
-                            {input &&
-                              (selectedTab === 1 ? (
-                                <IOInputField
-                                  inputType={input.type}
-                                  inputId={input.id}
-                                />
-                              ) : (
-                                <IOOutputView
-                                  outputType={input.type}
-                                  outputId={input.id}
-                                />
-                              ))}
-                          </div>
+                            }
+                            key={index}
+                            keyValue={input.id}
+                          >
+                            <div className="file-component-tab-column">
+                              <div className="">
+                                {input && (
+                                  <IOInputField
+                                    inputType={input.type}
+                                    inputId={input.id}
+                                  />
+                                )}
+                              </div>
+                            </div>
+                          </AccordionComponent>
                         </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>
           )}
 
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index b9422efab..c1eaa999d 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/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"]);
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 44173057f..2f7a07905 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/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">
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 84013a34f..ff21af45f 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/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">
-              <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",
-                  !hasApiKey || !validApiKey ? " text-muted-foreground" : ""
+
+          <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"
+              )}
+              onClick={(event) => {
+                event.preventDefault();
+                setNode(data.id, (old) => ({
+                  ...old,
+                  data: {
+                    ...old.data,
+                    node: {
+                      ...old.data.node,
+                      pinned: old.data?.node?.pinned ? false : true,
+                    },
+                  },
+                }));
+              }}
+            >
+              <IconComponent
+                name="Pin"
+                className={cn(
+                  "h-4 w-4 transition-all",
+                  pinned ? "animate-wiggle fill-current" : ""
                 )}
-                onClick={(event) => {
-                  event.preventDefault();
-                  if (hasApiKey || hasStore) setShowconfirmShare(true);
-                }}
-              >
-                <IconComponent name="Share3" className="-m-1 h-6 w-6" />
-              </button>
-            </ShadTooltip>
-          )}
+              />
+            </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">
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 39d4769e6..a97b44b8d 100644
--- a/src/frontend/src/style/applies.css
+++ b/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;
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 38ad99bb3..5b45fc1ab 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/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,