feat: add public share options for workflow

web/src/components/DeploymentDisplay.tsx

@@ -1,4 +1,5 @@
 import { CodeBlock } from "@/components/CodeBlock";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -13,7 +14,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { getInputsFromWorkflow } from "@/lib/getInputsFromWorkflow";
 import { getRelativeTime } from "@/lib/getRelativeTime";
 import type { findAllDeployments } from "@/server/findAllRuns";
+import { ExternalLink } from "lucide-react";
 import { headers } from "next/headers";
+import Link from "next/link";
 
 const curlTemplate = `
 curl --request POST \
@@ -72,7 +75,9 @@ export function DeploymentDisplay({
     <Dialog>
       <DialogTrigger asChild className="appearance-none hover:cursor-pointer">
         <TableRow>
-          <TableCell className="capitalize">{deployment.environment}</TableCell>
+          <TableCell className="capitalize truncate">
+            {deployment.environment}
+          </TableCell>
           <TableCell className="font-medium truncate">
             {deployment.version?.version}
           </TableCell>
@@ -92,34 +97,53 @@ export function DeploymentDisplay({
           <DialogDescription>Code for your deployment client</DialogDescription>
         </DialogHeader>
         <ScrollArea className="max-h-[600px]">
-          <Tabs defaultValue="js" className="w-full">
-            <TabsList className="grid w-fit grid-cols-2">
-              <TabsTrigger value="js">js</TabsTrigger>
-              <TabsTrigger value="curl">curl</TabsTrigger>
-            </TabsList>
-            <TabsContent className="flex flex-col gap-2" value="js">
-              Trigger the workflow
-              <CodeBlock
-                lang="js"
-                code={formatCode(jsTemplate, deployment, domain, workflowInput)}
-              />
-              Check the status of the run, and retrieve the outputs
-              <CodeBlock
-                lang="js"
-                code={formatCode(jsTemplate_checkStatus, deployment, domain)}
-              />
-            </TabsContent>
-            <TabsContent className="flex flex-col gap-2" value="curl">
-              <CodeBlock
-                lang="bash"
-                code={formatCode(curlTemplate, deployment, domain)}
-              />
-              <CodeBlock
-                lang="bash"
-                code={formatCode(curlTemplate_checkStatus, deployment, domain)}
-              />
-            </TabsContent>
-          </Tabs>
+          {deployment.environment !== "public-share" ? (
+            <Tabs defaultValue="js" className="w-full">
+              <TabsList className="grid w-fit grid-cols-2">
+                <TabsTrigger value="js">js</TabsTrigger>
+                <TabsTrigger value="curl">curl</TabsTrigger>
+              </TabsList>
+              <TabsContent className="flex flex-col gap-2" value="js">
+                Trigger the workflow
+                <CodeBlock
+                  lang="js"
+                  code={formatCode(
+                    jsTemplate,
+                    deployment,
+                    domain,
+                    workflowInput
+                  )}
+                />
+                Check the status of the run, and retrieve the outputs
+                <CodeBlock
+                  lang="js"
+                  code={formatCode(jsTemplate_checkStatus, deployment, domain)}
+                />
+              </TabsContent>
+              <TabsContent className="flex flex-col gap-2" value="curl">
+                <CodeBlock
+                  lang="bash"
+                  code={formatCode(curlTemplate, deployment, domain)}
+                />
+                <CodeBlock
+                  lang="bash"
+                  code={formatCode(
+                    curlTemplate_checkStatus,
+                    deployment,
+                    domain
+                  )}
+                />
+              </TabsContent>
+            </Tabs>
+          ) : (
+            <div className="w-full text-right">
+              <Button asChild className="gap-2">
+                <Link href={`/share/${deployment.id}`} target="_blank">
+                  View Share Page <ExternalLink size={14} />
+                </Link>
+              </Button>
+            </div>
+          )}
         </ScrollArea>
       </DialogContent>
     </Dialog>

web/src/components/Main.tsx

@@ -1,26 +1,22 @@
 "use client";
 
-import { Badge } from "./ui/badge";
-import macBookMainImage from "@/assets/images/macbook-main.png";
 import { Section } from "@/components/Section";
 import { cn } from "@/lib/utils";
-import Image from "next/image";
-import { Fragment } from "react";
-import meta from 'next-gen/config';
+import meta from "next-gen/config";
 
 function isDevelopment() {
   return process.env.NODE_ENV === "development";
 }
 
 function FeatureCard(props: {
-  className?: String;
+  className?: string;
   title: React.ReactNode;
-  description: String;
+  description: string;
 }) {
   return (
     <div
       className={cn(
-        "group relative text-center bg-opacity-20 rounded-lg py-6 ring-1 shadow-sm ring-stone-200/50 overflow-hidden",
+        "group relative text-center bg-opacity-20 rounded-lg py-6 ring-1 shadow-sm ring-stone-200/50 overflow-hidden"
         // props.className,
       )}
     >
@@ -28,14 +24,14 @@ function FeatureCard(props: {
       <div
         className={cn(
           "opacity-60 group-hover:opacity-100 transition-all -z-[5] absolute top-0 h-full w-full duration-700",
-          props.className,
+          props.className
         )}
-      ></div>
-      <div className="opacity-60 group-hover:opacity-100 absolute top-0 inset-0 -z-[5] h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
+      />
+      <div className="opacity-60 group-hover:opacity-100 absolute top-0 inset-0 -z-[5] h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
 
       <div className="">
         <div className="font-mono text-lg ">{props.title}</div>
-        <div className="divider px-4 py-0 h-[1px] opacity-30 my-2"></div>
+        <div className="divider px-4 py-0 h-[1px] opacity-30 my-2" />
         <div className="px-8 text-stone-800 ">{props.description}</div>
       </div>
     </div>
@@ -86,7 +82,6 @@ export default function Main() {
             ></Image> */}
           </div>
         </Section>
-
       </div>
 
       <footer className="text-base-content mx-auto flex flex-col md:flex-row items-center justify-center w-full max-w-5xl  gap-4 p-10 ">

web/src/components/Navbar.tsx

@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
 export function Navbar() {
-  const _isDesktop = useMediaQuery("(min-width: 768px)");
+  const _isDesktop = useMediaQuery("(min-width: 1024px)");
   const [isDesktop, setIsDesktop] = useState(true);
   useEffect(() => {
     setIsDesktop(_isDesktop);

web/src/components/NavbarMenu.tsx

@@ -34,13 +34,19 @@ export function NavbarMenu({ className }: { className?: string }) {
       <Tabs
         defaultValue={pathname}
         className="w-[300px] hidden lg:flex pointer-events-auto"
-        onValueChange={(value) => {
-          router.push(value);
-        }}
+        // onValueChange={(value) => {
+
+        // }}
       >
         <TabsList className="grid w-full grid-cols-3">
           {pages.map((page) => (
-            <TabsTrigger key={page.name} value={page.path}>
+            <TabsTrigger
+              key={page.name}
+              value={page.path}
+              onClick={() => {
+                router.push(page.path);
+              }}
+            >
               {page.name}
             </TabsTrigger>
           ))}

web/src/components/VersionSelect.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+import {
+  plainInputsToZod,
+  workflowVersionInputsToZod,
+} from "../lib/workflowVersionInputsToZod";
 import { callServerPromise } from "./callServerPromise";
 import fetcher from "./fetcher";
 import { LoadingIcon } from "@/components/LoadingIcon";
@@ -29,6 +33,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   Table,
   TableBody,
@@ -38,17 +43,26 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import type { workflowAPINodeType } from "@/db/schema";
-import { getInputsFromWorkflow } from "@/lib/getInputsFromWorkflow";
-import { createRun } from "@/server/createRun";
+import type { getInputsFromWorkflow } from "@/lib/getInputsFromWorkflow";
+import { checkStatus, createRun } from "@/server/createRun";
 import { createDeployments } from "@/server/curdDeploments";
 import type { getMachines } from "@/server/curdMachine";
 import type { findFirstTableWithVersion } from "@/server/findFirstTableWithVersion";
-import { Copy, ExternalLink, Info, MoreVertical, Play } from "lucide-react";
+import { useAuth, useClerk } from "@clerk/nextjs";
+import {
+  Copy,
+  ExternalLink,
+  Info,
+  MoreVertical,
+  Play,
+  Share,
+} from "lucide-react";
 import { parseAsInteger, useQueryState } from "next-usequerystate";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import useSWR from "swr";
-import { z } from "zod";
+import type { z } from "zod";
+import { create } from "zustand";
 
 export function VersionSelect({
   workflow,
@@ -121,6 +135,168 @@ function useSelectedMachine(machines: Awaited<ReturnType<typeof getMachines>>) {
   return a;
 }
 
+type PublicRunStore = {
+  image: string;
+  loading: boolean;
+  runId: string;
+  status: string;
+
+  setImage: (image: string) => void;
+  setLoading: (loading: boolean) => void;
+  setRunId: (runId: string) => void;
+  setStatus: (status: string) => void;
+};
+
+const publicRunStore = create<PublicRunStore>((set) => ({
+  image: "",
+  loading: false,
+  runId: "",
+  status: "",
+
+  setImage: (image) => set({ image }),
+  setLoading: (loading) => set({ loading }),
+  setRunId: (runId) => set({ runId }),
+  setStatus: (status) => set({ status }),
+}));
+
+export function PublicRunOutputs() {
+  const { image, loading, runId, status, setStatus, setImage, setLoading } =
+    publicRunStore();
+
+  useEffect(() => {
+    if (!runId) return;
+    const interval = setInterval(() => {
+      checkStatus(runId).then((res) => {
+        console.log(res?.status);
+        if (res) setStatus(res.status);
+        if (res && res.status === "success") {
+          setImage(res.outputs[0]?.data.images[0].url);
+          setLoading(false);
+          clearInterval(interval);
+        }
+      });
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [runId]);
+
+  return (
+    <div className="border border-gray-200 w-full square h-[400px] rounded-lg relative">
+      {!loading && image && (
+        <img
+          className="w-full h-full object-contain"
+          src={image}
+          alt="Generated image"
+        />
+      )}
+      {loading && (
+        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center gap-2">
+          {status} <LoadingIcon />
+        </div>
+      )}
+      {loading && <Skeleton className="w-full h-full" />}
+    </div>
+  );
+}
+
+export function RunWorkflowInline({
+  inputs,
+  workflow_version_id,
+  machine_id,
+}: {
+  inputs: ReturnType<typeof getInputsFromWorkflow>;
+  workflow_version_id: string;
+  machine_id: string;
+}) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  const user = useAuth();
+  const clerk = useClerk();
+
+  const schema = useMemo(() => {
+    return plainInputsToZod(inputs);
+  }, [inputs]);
+
+  const {
+    setRunId,
+    loading,
+    setLoading: setLoading2,
+    setStatus,
+  } = publicRunStore();
+
+  const runWorkflow = async () => {
+    console.log();
+
+    if (!user.isSignedIn) {
+      clerk.openSignIn({
+        redirectUrl: window.location.href,
+      });
+      console.log("hi");
+      return;
+    }
+    console.log(values);
+
+    const val = Object.keys(values).length > 0 ? values : undefined;
+    setLoading2(true);
+    setIsLoading(true);
+    setStatus("preparing");
+    try {
+      const origin = window.location.origin;
+      const a = await callServerPromise(
+        createRun({
+          origin,
+          workflow_version_id: workflow_version_id,
+          machine_id: machine_id,
+          inputs: val,
+          isManualRun: true,
+        })
+      );
+      if (a && !("error" in a)) {
+        setRunId(a.workflow_run_id);
+      } else {
+        setLoading2(false);
+      }
+      console.log(a);
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+      setLoading2(false);
+    }
+  };
+
+  return (
+    <>
+      {schema && (
+        <AutoForm
+          formSchema={schema}
+          values={values}
+          onValuesChange={setValues}
+          onSubmit={runWorkflow}
+          className="px-1"
+        >
+          <div className="flex justify-end">
+            <AutoFormSubmit disabled={isLoading || loading}>
+              Run
+              <span className="ml-2">
+                {isLoading || loading ? <LoadingIcon /> : <Play size={14} />}
+              </span>
+            </AutoFormSubmit>
+          </div>
+        </AutoForm>
+      )}
+      {!schema && (
+        <Button
+          className="gap-2"
+          disabled={isLoading || loading}
+          onClick={runWorkflow}
+        >
+          Confirm {isLoading || loading ? <LoadingIcon /> : <Play size={14} />}
+        </Button>
+      )}
+    </>
+  );
+}
+
 export function RunWorkflowButton({
   workflow,
   machines,
@@ -143,17 +319,10 @@ export function RunWorkflowButton({
       workflow,
       version
     );
-    const inputs = getInputsFromWorkflow(workflow_version);
 
-    if (!inputs) return null;
+    if (!workflow_version) return null;
 
-    return z.object({
-      ...Object.fromEntries(
-        inputs?.map((x) => {
-          return [x?.input_id, z.string().optional()];
-        })
-      ),
-    });
+    return workflowVersionInputsToZod(workflow_version);
   }, [version]);
 
   const runWorkflow = async () => {
@@ -228,8 +397,6 @@ export function RunWorkflowButton({
             Confirm {isLoading ? <LoadingIcon /> : <Play size={14} />}
           </Button>
         )}
-        {/* </div> */}
-        {/* <div className="max-h-96 overflow-y-scroll">{view}</div> */}
       </DialogContent>
     </Dialog>
   );
@@ -301,6 +468,55 @@ export function CreateDeploymentButton({
   );
 }
 
+export function CreateShareButton({
+  workflow,
+  machines,
+}: {
+  workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>;
+  machines: Awaited<ReturnType<typeof getMachines>>;
+}) {
+  const [version] = useQueryState("version", {
+    defaultValue: workflow?.versions[0].version ?? 1,
+    ...parseAsInteger,
+  });
+  const [machine] = useSelectedMachine(machines);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const workflow_version_id = workflow?.versions.find(
+    (x) => x.version === version
+  )?.id;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="gap-2" disabled={isLoading} variant="outline">
+          Share {isLoading ? <LoadingIcon /> : <Share size={14} />}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuItem
+          onClick={async () => {
+            if (!workflow_version_id) return;
+
+            setIsLoading(true);
+            await callServerPromise(
+              createDeployments(
+                workflow.id,
+                workflow_version_id,
+                machine,
+                "public-share"
+              )
+            );
+            setIsLoading(false);
+          }}
+        >
+          Public
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 export function CopyWorkflowVersion({
   workflow,
 }: {

web/src/components/ui/auto-form/index.tsx

@@ -13,8 +13,18 @@ import type { DefaultValues } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type { z } from "zod";
 
-export function AutoFormSubmit({ children }: { children?: React.ReactNode }) {
-  return <Button type="submit">{children ?? "Submit"}</Button>;
+export function AutoFormSubmit({
+  children,
+  disabled,
+}: {
+  children?: React.ReactNode;
+  disabled?: boolean;
+}) {
+  return (
+    <Button type="submit" disabled={disabled}>
+      {children ?? "Submit"}
+    </Button>
+  );
 }
 
 function AutoForm<SchemaType extends ZodObjectOrWrapped>({