+ {/*
*/}
+ (
+
+ Name
+
+
+ {/*
+ This is your public display name.
+ */}
+
+ )}
+ />
+
+ (
+
+ Endpoint
+
+
+ {/*
+ This is your public display name.
+ */}
+
+ )}
+ />
+
+
+
+
+
+
+
+ );
+}
+
+function AddWorkflowButton({ pending }: { pending: boolean }) {
+ // const { pending } = useFormStatus();
+ return (
+
+ Save changes{" "}
+ {pending &&
+ );
+}
diff --git a/web/src/components/NavbarRight.tsx b/web/src/components/NavbarRight.tsx
new file mode 100644
index 0000000..91127e9
--- /dev/null
+++ b/web/src/components/NavbarRight.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { usePathname } from "next/navigation";
+import { useRouter } from "next/navigation";
+
+export function NavbarRight() {
+ const pathname = usePathname();
+ const router = useRouter();
+
+ return (
+
{
+ if (value === "machines") {
+ router.push("/machines");
+ } else {
+ router.push("/");
+ }
+ }}
+ >
+
+ Workflow
+ Machines
+
+
+ );
+}
diff --git a/web/src/components/VersionSelect.tsx b/web/src/components/VersionSelect.tsx
new file mode 100644
index 0000000..4684e30
--- /dev/null
+++ b/web/src/components/VersionSelect.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { findFirstTableWithVersion } from "@/app/[workflow_id]/page";
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { getMachines } from "@/server/curdMachine";
+
+export function VersionSelect({
+ workflow,
+}: {
+ workflow: Awaited
>;
+}) {
+ return (
+
+
+
+
+
+ Versions
+ {workflow?.versions.map((x) => (
+
+ {x.version}
+
+ ))}
+
+
+
+ );
+}
+
+
+export function MachineSelect({
+ machines,
+ }: {
+ machines: Awaited>;
+ }) {
+ return (
+
+
+
+
+
+ Versions
+ {machines?.map((x) => (
+
+ {x.name}
+
+ ))}
+
+
+
+ );
+ }
+
\ No newline at end of file
diff --git a/web/src/components/WorkflowList.tsx b/web/src/components/WorkflowList.tsx
new file mode 100644
index 0000000..552c10d
--- /dev/null
+++ b/web/src/components/WorkflowList.tsx
@@ -0,0 +1,309 @@
+"use client";
+
+import { getRelativeTime } from "../lib/getRelativeTime";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { deleteWorkflow } from "@/server/deleteWorkflow";
+import type {
+ ColumnDef,
+ ColumnFiltersState,
+ SortingState,
+ VisibilityState,
+} from "@tanstack/react-table";
+import {
+ flexRender,
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table";
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+export type Payment = {
+ id: string;
+ amount: number;
+ date: Date;
+ email: string;
+};
+
+export const columns: ColumnDef[] = [
+ {
+ accessorKey: "id",
+ id: "select",
+ header: ({ table }) => (
+ table.toggleAllPageRowsSelected(!!value)}
+ aria-label="Select all"
+ />
+ ),
+ cell: ({ row }) => (
+ row.toggleSelected(!!value)}
+ aria-label="Select row"
+ />
+ ),
+ enableSorting: false,
+ enableHiding: false,
+ },
+ {
+ accessorKey: "email",
+ header: ({ column }) => {
+ return (
+ column.toggleSorting(column.getIsSorted() === "asc")}
+ >
+ Name
+
+ );
+ },
+ cell: ({ row }) => {
+ return (
+
+ {row.getValue("email")}
+
+ );
+ },
+ },
+
+ {
+ accessorKey: "amount",
+ header: () => Version
,
+ cell: ({ row }) => {
+ const amount = parseFloat(row.getValue("amount"));
+
+ // Format the amount as a dollar amount
+ // const formatted = new Intl.NumberFormat("en-US", {
+ // style: "currency",
+ // currency: "USD",
+ // }).format(amount);
+
+ return {amount}
;
+ },
+ },
+ {
+ accessorKey: "date",
+ sortingFn: "datetime",
+ enableSorting: true,
+ header: ({ column }) => {
+ return (
+ column.toggleSorting(column.getIsSorted() === "asc")}
+ >
+ Update Date
+
+ );
+ },
+ cell: ({ row }) => (
+
+ {getRelativeTime(row.original.date)}
+
+ ),
+ },
+ {
+ id: "actions",
+ enableHiding: false,
+ cell: ({ row }) => {
+ const workflow = row.original;
+
+ return (
+
+
+
+ Open menu
+
+
+
+ Actions
+ {
+ deleteWorkflow(workflow.id);
+ // navigator.clipboard.writeText(payment.id)
+ }}
+ >
+ Delete Workflow
+
+ {/* View customer
+ View payment details */}
+
+
+ );
+ },
+ },
+];
+
+export function WorkflowList({ data }: { data: Payment[] }) {
+ const [sorting, setSorting] = React.useState([]);
+ const [columnFilters, setColumnFilters] = React.useState(
+ [],
+ );
+ const [columnVisibility, setColumnVisibility] =
+ React.useState({});
+ const [rowSelection, setRowSelection] = React.useState({});
+
+ const table = useReactTable({
+ data,
+ columns,
+ onSortingChange: setSorting,
+ onColumnFiltersChange: setColumnFilters,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ onColumnVisibilityChange: setColumnVisibility,
+ onRowSelectionChange: setRowSelection,
+ state: {
+ sorting,
+ columnFilters,
+ columnVisibility,
+ rowSelection,
+ },
+ });
+
+ return (
+
+
+
+
+
+ Columns
+
+
+ {table
+ .getAllColumns()
+ .filter((column) => column.getCanHide())
+ .map((column) => {
+ return (
+
+ column.toggleVisibility(!!value)
+ }
+ >
+ {column.id}
+
+ );
+ })}
+
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ return (
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext(),
+ )}
+
+ );
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows?.length ? (
+ table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext(),
+ )}
+
+ ))}
+
+ ))
+ ) : (
+
+
+ No results.
+
+
+ )}
+
+
+
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+
+ table.previousPage()}
+ disabled={!table.getCanPreviousPage()}
+ >
+ Previous
+
+ table.nextPage()}
+ disabled={!table.getCanNextPage()}
+ >
+ Next
+
+
+
+
,
+ VariantProps {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/web/src/components/ui/checkbox.tsx b/web/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..df61a13
--- /dev/null
+++ b/web/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..cad6f58
--- /dev/null
+++ b/web/src/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+ Close
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+))
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+ = FieldPath
+> = {
+ name: TName
+}
+
+const FormFieldContext = React.createContext(
+ {} as FormFieldContextValue
+)
+
+const FormField = <
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath
+>({
+ ...props
+}: ControllerProps) => {
+ return (
+
+
+ )
+}
+
+const useFormField = () => {
+ const fieldContext = React.useContext(FormFieldContext)
+ const itemContext = React.useContext(FormItemContext)
+ const { getFieldState, formState } = useFormContext()
+
+ const fieldState = getFieldState(fieldContext.name, formState)
+
+ if (!fieldContext) {
+ throw new Error("useFormField should be used within ")
+ }
+
+ const { id } = itemContext
+
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ }
+}
+
+type FormItemContextValue = {
+ id: string
+}
+
+const FormItemContext = React.createContext(
+ {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const id = React.useId()
+
+ return (
+
+
+
+ )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ const { error, formItemId } = useFormField()
+
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ ...props }, ref) => {
+ const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+ return (
+
+>(({ className, ...props }, ref) => {
+ const { formDescriptionId } = useFormField()
+
+ return (
+
+ )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, children, ...props }, ref) => {
+ const { error, formMessageId } = useFormField()
+ const body = error ? String(error?.message) : children
+
+ if (!body) {
+ return null
+ }
+
+ return (
+
+ {body}
+
+ )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+ useFormField,
+ Form,
+ FormItem,
+ FormLabel,
+ FormControl,
+ FormDescription,
+ FormMessage,
+ FormField,
+}
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
new file mode 100644
index 0000000..677d05f
--- /dev/null
+++ b/web/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+ extends React.InputHTMLAttributes {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+ // >(),
+ // initial_prompt: text("initial_prompt"),
+ // payment_status: text("payment_status"),
+ // early_access: boolean("early_access").default(false),
+});
+
+// export const usersRelations = relations(userTable, ({ many }) => ({
+// chat_avatars: many(chatAvatarTable),
+// }));
+
+export const workflowTable = dbSchema.table("workflows", {
+ id: uuid("id").primaryKey().defaultRandom().notNull(),
+ user_id: text("user_id")
+ .references(() => usersTable.id, {
+ onDelete: "cascade",
+ })
+ .notNull(),
+ name: text("name").notNull(),
+ created_at: timestamp("created_at").defaultNow().notNull(),
+ updated_at: timestamp("updated_at").defaultNow().notNull(),
+});
+
+export const workflowRelations = relations(workflowTable, ({ many }) => ({
+ versions: many(workflowVersionTable),
+}));
+
+export const workflowVersionTable = dbSchema.table("workflow_versions", {
+ workflow_id: uuid("workflow_id")
+ .notNull()
+ .references(() => workflowTable.id, {
+ onDelete: "cascade",
+ }),
+ id: uuid("id").primaryKey().defaultRandom().notNull(),
+ workflow: jsonb("workflow").$type(),
+ workflow_api: jsonb("workflow_api").$type(),
+ version: integer("version").notNull(),
+
+ created_at: timestamp("created_at").defaultNow().notNull(),
+ updated_at: timestamp("updated_at").defaultNow().notNull(),
+});
+
+export const workflowVersionRelations = relations(
+ workflowVersionTable,
+ ({ one }) => ({
+ workflow: one(workflowTable, {
+ fields: [workflowVersionTable.workflow_id],
+ references: [workflowTable.id],
+ }),
+ }),
+);
+
+export const workflowRunStatus = pgEnum("workflow_run_status", [
+ "not-started",
+ "running",
+ "success",
+ "failed",
+]);
+
+// We still want to keep the workflow run record.
+export const workflowRunsTable = dbSchema.table("workflow_runs", {
+ id: uuid("id").primaryKey().defaultRandom().notNull(),
+ workflow_version_id: uuid("workflow_version_id")
+ .notNull()
+ .references(() => workflowVersionTable.id, {
+ onDelete: "no action",
+ }),
+ machine_id: uuid("machine_id")
+ .notNull()
+ .references(() => machinesTable.id, {
+ onDelete: "no action",
+ }),
+ status: workflowRunStatus("status").notNull().default("not-started"),
+ ended_at: timestamp("ended_at"),
+ created_at: timestamp("created_at").defaultNow().notNull(),
+});
+
+// when user delete, also delete all the workflow versions
+export const machinesTable = dbSchema.table("machines", {
+ id: uuid("id").primaryKey().defaultRandom().notNull(),
+ user_id: text("user_id").references(() => usersTable.id, {
+ onDelete: "no action",
+ }).notNull(),
+ name: text("name").notNull(),
+ endpoint: text("endpoint").notNull(),
+ created_at: timestamp("created_at").defaultNow().notNull(),
+ updated_at: timestamp("updated_at").defaultNow().notNull(),
+});
+
+// export const chatAvatarRelations = relations(chatAvatarTable, ({ one }) => ({
+// author: one(userTable, {
+// fields: [chatAvatarTable.user_id],
+// references: [userTable.id],
+// }),
+// }));
+
+// export const subscriptionTable = dbSchema.table("subscription", {
+// id: text("id").primaryKey().notNull(),
+// email: text("email"),
+// user_id: text("user_id"),
+// status: text("status"),
+// created_at: timestamp("created_at").defaultNow(),
+// updated_at: timestamp("updated_at").defaultNow(),
+// });
+
+// export const subscriptionRelations = relations(
+// subscriptionTable,
+// ({ one }) => ({
+// user: one(userTable, {
+// fields: [subscriptionTable.user_id],
+// references: [userTable.id],
+// }),
+// }),
+// );
+
+export type UserType = InferSelectModel;
+export type WorkflowType = InferSelectModel;
+// export type ChatAvatarType = InferSelectModel;
+// export type SubscriptionType = InferSelectModel;
diff --git a/web/src/lib/getRelativeTime.tsx b/web/src/lib/getRelativeTime.tsx
new file mode 100644
index 0000000..7a4325f
--- /dev/null
+++ b/web/src/lib/getRelativeTime.tsx
@@ -0,0 +1,12 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import React from "react";
+
+dayjs.extend(relativeTime);
+
+export function getRelativeTime(time: string | Date | null | undefined) {
+ if (typeof time === "string" || time instanceof Date) {
+ return dayjs().to(time);
+ }
+ return null;
+}
diff --git a/web/src/lib/parseDataSafe.ts b/web/src/lib/parseDataSafe.ts
new file mode 100644
index 0000000..35d7a8e
--- /dev/null
+++ b/web/src/lib/parseDataSafe.ts
@@ -0,0 +1,38 @@
+import { NextResponse } from "next/server";
+import { ZodError, ZodType, z } from "zod";
+
+export async function parseDataSafe>(
+ schema: T,
+ request: Request,
+ headers?: HeadersInit,
+): Promise<[z.infer | undefined, NextResponse | undefined]> {
+ let data: z.infer | undefined = undefined;
+ try {
+ data = await schema.parseAsync(await request.json());
+ } catch (e: any) {
+ if (e instanceof ZodError) {
+ const message = e.flatten().fieldErrors;
+ return [
+ undefined,
+ NextResponse.json(message, {
+ status: 500,
+ statusText: "Invalid request",
+ headers: headers,
+ }),
+ ];
+ }
+ }
+
+ if (!data)
+ return [
+ undefined,
+ NextResponse.json(
+ {
+ message: "Invalid request",
+ },
+ { status: 500, statusText: "Invalid request", headers: headers },
+ ),
+ ];
+
+ return [data, undefined];
+}
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
new file mode 100644
index 0000000..365058c
--- /dev/null
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/web/src/middleware.ts b/web/src/middleware.ts
new file mode 100644
index 0000000..cfc83a6
--- /dev/null
+++ b/web/src/middleware.ts
@@ -0,0 +1,38 @@
+import { db } from "./db/db";
+import { usersTable } from "./db/schema";
+import { authMiddleware, redirectToSignIn, clerkClient } from "@clerk/nextjs";
+import { eq } from "drizzle-orm";
+import { NextResponse } from "next/server";
+
+// This example protects all routes including api/trpc routes
+// Please edit this to allow other routes to be public as needed.
+// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
+export default authMiddleware({
+ publicRoutes: ["/api/(.*)"],
+ // publicRoutes: ["/", "/(.*)"],
+ async afterAuth(auth, req, evt) {
+ // redirect them to organization selection page
+ const userId = auth.userId;
+
+ // Parse the URL to get the pathname
+ const url = new URL(req.url);
+ const pathname = url.pathname;
+
+ if (
+ !auth.userId &&
+ !auth.isPublicRoute
+ // ||
+ // pathname === "/create" ||
+ // pathname === "/history" ||
+ // pathname.startsWith("/edit")
+ ) {
+ const url = new URL(req.url);
+ return redirectToSignIn({ returnBackUrl: url.origin });
+ }
+ },
+});
+
+export const config = {
+ matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/" , "/(api|trpc)(.*)"],
+ // matcher: ['/','/create', '/api/(twitter|generation|init|voice-cloning)'],
+};
diff --git a/web/src/server/curdMachine.ts b/web/src/server/curdMachine.ts
new file mode 100644
index 0000000..10a1aec
--- /dev/null
+++ b/web/src/server/curdMachine.ts
@@ -0,0 +1,46 @@
+"use server";
+
+import { db } from "@/db/db";
+import { machinesTable, workflowTable } from "@/db/schema";
+import { auth } from "@clerk/nextjs";
+import { eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import "server-only";
+
+// export async function addMachine(form: FormData) {
+// const name = form.get("name") as string;
+// const endpoint = form.get("endpoint") as string;
+
+// await db.insert(machinesTable).values({
+// name,
+// endpoint,
+// });
+// revalidatePath("/machines");
+// }
+
+export async function getMachines() {
+ const { userId } = auth();
+ if (!userId) throw new Error("No user id");
+ const machines = await db
+ .select()
+ .from(machinesTable)
+ .where(eq(machinesTable.user_id, userId));
+ return machines;
+}
+
+export async function addMachine(name: string, endpoint: string) {
+ const { userId } = auth();
+ if (!userId) throw new Error("No user id");
+ console.log(name, endpoint);
+ await db.insert(machinesTable).values({
+ user_id: userId,
+ name,
+ endpoint,
+ });
+ revalidatePath("/machines");
+}
+
+export async function deleteMachine(machine_id: string) {
+ await db.delete(machinesTable).where(eq(machinesTable.id, machine_id));
+ revalidatePath("/machines");
+}
diff --git a/web/src/server/deleteWorkflow.ts b/web/src/server/deleteWorkflow.ts
new file mode 100644
index 0000000..526c608
--- /dev/null
+++ b/web/src/server/deleteWorkflow.ts
@@ -0,0 +1,13 @@
+"use server";
+
+import { db } from "@/db/db";
+import { workflowTable } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import "server-only";
+
+export async function deleteWorkflow(workflow_id: string) {
+ await db.delete(workflowTable).where(eq(workflowTable.id, workflow_id));
+ revalidatePath("/");
+}
+
\ No newline at end of file
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
new file mode 100644
index 0000000..655c745
--- /dev/null
+++ b/web/tailwind.config.ts
@@ -0,0 +1,78 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+ darkMode: ["class"],
+ content: [
+ "./pages/**/*.{ts,tsx}",
+ "./components/**/*.{ts,tsx}",
+ "./app/**/*.{ts,tsx}",
+ "./src/**/*.{ts,tsx}",
+ ],
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: 0 },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: 0 },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
+};
+export default config;
diff --git a/tsconfig.json b/web/tsconfig.json
similarity index 96%
rename from tsconfig.json
rename to web/tsconfig.json
index e59724b..af05591 100644
--- a/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,6 +1,6 @@
{
"compilerOptions": {
- "target": "es5",
+ "target": "ESNext",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,