feature: update flowToolbar under feature flag

src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx

@@ -0,0 +1,118 @@
+import IconComponent from "@/components/common/genericIconComponent";
+import ShadTooltipComponent from "@/components/common/shadTooltipComponent";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Switch } from "@/components/ui/switch";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import useFlowStore from "@/stores/flowStore";
+
+export default function PublishDropdown() {
+  const domain = window.location.origin;
+  const flowName = useFlowsManagerStore((state) => state.currentFlow?.name);
+  const flowId = useFlowsManagerStore((state) => state.currentFlow?.id);
+  const isPublished = useFlowsManagerStore(
+    (state) => state.currentFlow?.public,
+  );
+  const hasIO = useFlowStore((state) => state.hasIO);
+
+  // using js const instead of applies.css because of group tag
+  const groupStyle = "text-muted-foreground group-hover:text-foreground";
+  const externalUrlStyle =
+    "opacity-0 transition-all duration-300 group-hover:translate-x-3 group-hover:opacity-100 group-focus-visible:translate-x-3 group-focus-visible:opacity-100";
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="default" className="!h-8 !w-[95px] font-medium">
+          Publish
+          <IconComponent name="ChevronDown" className="icon-size font-medium" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        sideOffset={10}
+        alignOffset={-10}
+        align="end"
+        className="min-w-[300px] max-w-[400px]"
+      >
+        <ShadTooltipComponent
+          styleClasses="truncate"
+          side="left"
+          content={
+            hasIO
+              ? encodeURI(`${domain}/playground/${flowId}`)
+              : "Add a Chat Input or Chat Output to access your flow"
+          }
+        >
+          <div className={!hasIO ? "cursor-not-allowed" : ""}>
+            <DropdownMenuItem
+              disabled={!hasIO}
+              className="deploy-dropdown-item group"
+              onClick={() => {
+                if (hasIO) {
+                  window.open(`${domain}/playground/${flowId}`, "_blank");
+                }
+              }}
+            >
+              <div className="group-hover:bg-accent">
+                <IconComponent
+                  name="Globe"
+                  className={`${groupStyle} icon-size mr-2`}
+                />
+                <span>Standalone app</span>
+                <div className={`icon-size ml-auto pr-8 text-foreground`}>
+                  <Switch
+                    className="h-5 w-9"
+                    checked={isPublished}
+                    onCheckedChange={(checked) => {
+                      console.log(checked);
+                    }}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                  />
+                </div>
+              </div>
+            </DropdownMenuItem>
+          </div>
+        </ShadTooltipComponent>
+        <DropdownMenuItem className="deploy-dropdown-item group">
+          <div className="group-hover:bg-accent">
+            <IconComponent
+              name="Code2"
+              className={`${groupStyle} icon-size mr-2`}
+            />
+            <span>API access</span>
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="deploy-dropdown-item group">
+          <div className="group-hover:bg-accent">
+            <IconComponent
+              name="Columns2"
+              className={`${groupStyle} icon-size mr-2`}
+            />
+            <span>Embed into site</span>
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem className="deploy-dropdown-item group">
+          <div className="group-hover:bg-accent">
+            <IconComponent
+              name="FileCode2"
+              className={`${groupStyle} icon-size mr-2`}
+            />
+            <span>Langflow SDK</span>
+            <IconComponent
+              name="ExternalLink"
+              className={`icon-size ml-auto mr-3 ${externalUrlStyle} text-foreground`}
+            />
+          </div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx

@@ -0,0 +1,23 @@
+import useFlowStore from "@/stores/flowStore";
+import { useState } from "react";
+import PublishDropdown from "./deploy-dropdown";
+import PlaygroundButton from "./playground-button";
+
+export default function FlowToolbarOptions() {
+  const [open, setOpen] = useState<boolean>(false);
+  const hasIO = useFlowStore((state) => state.hasIO);
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className="flex h-full w-full gap-1.5 rounded-sm transition-all">
+        <PlaygroundButton
+          hasIO={hasIO}
+          open={open}
+          setOpen={setOpen}
+          canvasOpen
+        />
+      </div>
+      <PublishDropdown />
+    </div>
+  );
+}

src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx

@@ -1,13 +1,21 @@
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
+import { PLAYGROUND_BUTTON_NAME } from "@/constants/constants";
+import { ENABLE_PUBLISH } from "@/customization/feature-flags";
 import IOModal from "@/modals/IOModal/new-modal";
 
 const PlaygroundButton = ({ hasIO, open, setOpen, canvasOpen }) => {
   const PlayIcon = () => (
-    <ForwardedIconComponent name="Play" className="h-4 w-4 transition-all" />
+    <ForwardedIconComponent
+      name="Play"
+      className="h-4 w-4 transition-all"
+      strokeWidth={ENABLE_PUBLISH ? 2 : 1.5}
+    />
   );
 
-  const ButtonLabel = () => <span className="hidden md:block">Playground</span>;
+  const ButtonLabel = () => (
+    <span className="hidden md:block">{PLAYGROUND_BUTTON_NAME}</span>
+  );
 
   const ActiveButton = () => (
     <div

src/frontend/src/components/core/flowToolbarComponent/index.tsx

@@ -3,6 +3,7 @@ import PlaygroundButton from "@/components/core/flowToolbarComponent/components/
 import {
   ENABLE_API,
   ENABLE_LANGFLOW_STORE,
+  ENABLE_PUBLISH,
 } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
 import { Panel } from "@xyflow/react";
@@ -13,8 +14,9 @@ import ShareModal from "../../../modals/shareModal";
 import useFlowStore from "../../../stores/flowStore";
 import { useShortcutsStore } from "../../../stores/shortcuts";
 import { useStoreStore } from "../../../stores/storeStore";
-import { classNames, isThereModal } from "../../../utils/utils";
+import { classNames, cn, isThereModal } from "../../../utils/utils";
 import ForwardedIconComponent from "../../common/genericIconComponent";
+import FlowToolbarOptions from "./components/flow-toolbar-options";
 
 export default function FlowToolbar(): JSX.Element {
   const preventDefault = true;
@@ -119,62 +121,67 @@ export default function FlowToolbar(): JSX.Element {
     <>
       <Panel className="!m-2" position="top-right">
         <div
-          className={
-            "hover:shadow-round-btn-shadow flex items-center justify-center gap-7 rounded-md border bg-background p-1.5 shadow transition-all"
-          }
+          className={cn(
+            "hover:shadow-round-btn-shadow flex items-center justify-center gap-7 rounded-md border bg-background px-1.5 shadow transition-all",
+            ENABLE_PUBLISH ? "h-11" : "",
+          )}
         >
-          <div className="flex gap-1.5">
-            <div className="flex h-full w-full gap-1.5 rounded-sm transition-all">
-              <PlaygroundButton
-                hasIO={hasIO}
-                open={open}
-                setOpen={setOpen}
-                canvasOpen
-              />
-            </div>
-            {ENABLE_API && (
-              <>
-                <div
-                  className="flex cursor-pointer items-center gap-2"
-                  data-testid="api_button_modal"
-                  id="api_button_modal"
-                >
-                  {currentFlow && currentFlow.data && (
-                    <ApiModal
-                      flow={currentFlow}
-                      open={openCodeModal}
-                      setOpen={setOpenCodeModal}
-                    >
-                      <div
-                        className={classNames(
-                          "relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-accent",
-                        )}
+          {ENABLE_PUBLISH ? (
+            <FlowToolbarOptions />
+          ) : (
+            <div className="flex gap-1.5">
+              <div className="flex h-full w-full gap-1.5 rounded-sm transition-all">
+                <PlaygroundButton
+                  hasIO={hasIO}
+                  open={open}
+                  setOpen={setOpen}
+                  canvasOpen
+                />
+              </div>
+              {ENABLE_API && (
+                <>
+                  <div
+                    className="flex cursor-pointer items-center gap-2"
+                    data-testid="api_button_modal"
+                    id="api_button_modal"
+                  >
+                    {currentFlow && currentFlow.data && (
+                      <ApiModal
+                        flow={currentFlow}
+                        open={openCodeModal}
+                        setOpen={setOpenCodeModal}
                       >
-                        <ForwardedIconComponent
-                          name="Code2"
-                          className={"h-4 w-4"}
-                        />
-                        <span className="hidden md:block">API</span>
-                      </div>
-                    </ApiModal>
-                  )}
+                        <div
+                          className={classNames(
+                            "relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-accent",
+                          )}
+                        >
+                          <ForwardedIconComponent
+                            name="Code2"
+                            className={"h-4 w-4"}
+                          />
+                          <span className="hidden md:block">API</span>
+                        </div>
+                      </ApiModal>
+                    )}
+                  </div>
+                </>
+              )}
+              {ENABLE_LANGFLOW_STORE && (
+                <div className="flex items-center gap-2">
+                  <div
+                    className={`side-bar-button ${
+                      !hasApiKey || !validApiKey || !hasStore
+                        ? "cursor-not-allowed"
+                        : "cursor-pointer"
+                    }`}
+                  >
+                    {ModalMemo}
+                  </div>
                 </div>
-              </>
-            )}
-            {ENABLE_LANGFLOW_STORE && (
-              <div className="flex items-center gap-2">
-                <div
-                  className={`side-bar-button ${
-                    !hasApiKey || !validApiKey || !hasStore
-                      ? "cursor-not-allowed"
-                      : "cursor-pointer"
-                  }`}
-                >
-                  {ModalMemo}
-                </div>
-              </div>
-            )}
-          </div>
+              )}
+            </div>
+          )}
         </div>
       </Panel>
     </>

src/frontend/src/constants/constants.ts

@@ -1005,3 +1005,5 @@ export const ICON_STROKE_WIDTH = 1.5;
 export const DEFAULT_PLACEHOLDER = "Type something...";
 
 export const DEFAULT_TOOLSET_PLACEHOLDER = "Used as a tool";
+
+export const PLAYGROUND_BUTTON_NAME = "Playground";

src/frontend/src/customization/feature-flags.ts

@@ -10,3 +10,4 @@ export const ENABLE_INTEGRATIONS = false;
 export const ENABLE_NEW_LOGO = true;
 export const ENABLE_DATASTAX_LANGFLOW = false;
 export const ENABLE_HOMEPAGE = true;
+export const ENABLE_PUBLISH = true;

src/frontend/src/style/applies.css

@@ -1294,6 +1294,14 @@
   align-items: center;
 }
 
+.deploy-dropdown-item {
+  @apply px-2.5 py-2 hover:bg-background cursor-pointer font-normal text-[14px] !important;
+}
+
+.deploy-dropdown-item > :first-child {
+  @apply flex items-center w-full px-2 py-1.5 rounded-md !important;
+}
+
 :root {
   --color-bg1: rgb(255, 255, 255);
   --color1: 255, 50, 118;

src/frontend/src/types/flow/index.ts

@@ -31,6 +31,7 @@ export type FlowType = {
   folder_id?: string;
   webhook?: boolean;
   locked?: boolean | null;
+  public?: boolean;
 };
 
 export type GenericNodeType = Node<NodeDataType, "genericNode">;

src/frontend/src/utils/styleUtils.ts

@@ -59,6 +59,7 @@ import {
   Code2,
   CodeXml,
   Cog,
+  Columns2,
   Combine,
   Command,
   Compass,
@@ -80,6 +81,7 @@ import {
   EyeOff,
   File,
   FileClock,
+  FileCode2,
   FileDown,
   FileQuestion,
   FileSearch,
@@ -955,6 +957,8 @@ export const nodeIconsLucide: iconsType = {
   ThumbDownIconCustom,
   ThumbUpIconCustom,
   Serper: SerperIcon,
+  FileCode2,
+  Columns2,
   ScrapeGraphAI: ScrapeGraph,
   ScrapeGraph: ScrapeGraph,
   ScrapeGraphSmartScraperApi: ScrapeGraph,