Actions v2

dashboard/.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Next.js: debug server-side",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "npm run dev"
+      },
+      {
+        "name": "Next.js: debug client-side",
+        "type": "chrome",
+        "request": "launch",
+        "url": "http://localhost:3000"
+      },
+      {
+        "name": "Next.js: debug full stack",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "npm run dev",
+        "serverReadyAction": {
+          "pattern": "- Local:.+(https?://.+)",
+          "uriFormat": "%s",
+          "action": "debugWithChrome"
+        }
+      }
+    ]
+  }

dashboard/Dockerfile

@@ -1,44 +1,60 @@
+# Start with a base node image
 FROM node:18-alpine AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+# Install corepack and pnpm
 RUN corepack enable
-RUN corepack prepare [email protected] --activate
+# Dependencies image
 FROM base AS deps
+
+# Add libc6-compat if necessary for your application
 RUN apk add --no-cache libc6-compat
+
 WORKDIR /app
 
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
-RUN pnpm i --frozen-lockfile
+# Copy package files
+COPY package.json pnpm-lock.yaml* ./
 
+# Install dependencies
+# This layer will be cached unless package.json or pnpm-lock.yaml changes
+RUN pnpm i --frozen-lockfile
 
+# Builder image
 FROM base AS builder
+
 WORKDIR /app
+
+# Copy installed node_modules from deps stage
 COPY --from=deps /app/node_modules ./node_modules
-COPY . .
 
-ENV NEXT_TELEMETRY_DISABLED 1
+# Copy the rest of your application's source code
+COPY . .
 
-# RUN yarn build
+# Build your application
 RUN pnpm run build
 
-# Production image, copy all the files and run next
+# Production image
 FROM base AS runner
-WORKDIR /app
 
+# Set environment variables
 ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV PORT 8000
+ENV HOSTNAME "0.0.0.0"
 
+WORKDIR /app
 
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-COPY --from=builder /app/public ./public
+# Create a non-root user
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
 
+# Copy the build output and necessary files from builder stage
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
+# copy public folder
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 USER nextjs
 
 EXPOSE 8000
 
-ENV PORT 8000
-ENV HOSTNAME "0.0.0.0"
-
-CMD ["node", "server.js"]
+CMD ["node", "server.js"]

dashboard/app/(copilot)/copilot/[copilot_id]/layout.tsx

@@ -54,7 +54,7 @@ export default function CopilotLayout({ children, params }: Props) {
           <Separator className="my-2" />
           <div className="flex flex-col items-center gap-4">
             <CopilotLayoutNavLink
-              href={copilotBase + "/flows"}
+              href={copilotBase + "/workflow"}
               IconComponent={Workflow}
               label="Flows"
             />
@@ -124,7 +124,7 @@ export default function CopilotLayout({ children, params }: Props) {
         </div>
       </aside>
       <main className="flex flex-1 flex-col overflow-hidden">
-        <div className="h-full max-w-full flex-1 bg-primary-foreground">
+        <div className="h-full min-h-full max-w-full flex-1 bg-primary-foreground">
           <CopilotProvider>{children}</CopilotProvider>
         </div>
       </main>

dashboard/app/(copilot)/copilot/[copilot_id]/settings/page.tsx

@@ -21,12 +21,18 @@ import { useRouter } from "next/navigation";
 import { toast } from "@/components/ui/use-toast";
 import { CopyButton } from "@/components/headless/CopyButton";
 import { mutate } from "swr";
+import { useAsyncFn } from "react-use";
+
 export default function GeneralSettingsPage() {
   const { token, id: copilotId, name: copilotName } = useCopilot();
+  const [Name, setName] = React.useState(copilotName);
   const { replace } = useRouter();
+  const [deleteCopilotstate, $deleteCopilot] = useAsyncFn(deleteCopilot);
+  const [updateCopilotState, $updateCopilot] = useAsyncFn(updateCopilot);
+
   async function handleDelete() {
-    const response = await deleteCopilot(copilotId);
-    if (response.data.success) {
+    const { data } = await $deleteCopilot(copilotId);
+    if (data.success) {
       toast({
         variant: "success",
         title: "Copilot deleted",
@@ -35,11 +41,11 @@ export default function GeneralSettingsPage() {
       _.delay(() => replace("/"), 1000);
     }
   }
-  const [Name, setName] = React.useState(copilotName);
+
   async function handleSave() {
     if (Name === copilotName || Name.trim().length < 1) return;
-    const { data: respData } = await updateCopilot(copilotId, { name: Name });
-    if (respData.chatbot) {
+    const { data } = await $updateCopilot(copilotId, { name: Name });
+    if (data.chatbot) {
       toast({
         variant: "success",
         title: "Copilot updated",
@@ -55,7 +61,7 @@ export default function GeneralSettingsPage() {
           General settings
         </h1>
         <div className="space-x-2">
-          <Button size="sm" onClick={handleSave}>
+          <Button size="sm" loading={updateCopilotState.loading} onClick={handleSave}>
             Save
           </Button>
         </div>
@@ -148,7 +154,7 @@ export default function GeneralSettingsPage() {
                       <AlertDialogCancel asChild>
                         <Button variant="outline">Cancel</Button>
                       </AlertDialogCancel>
-                      <Button variant="destructive" onClick={handleDelete}>
+                      <Button variant="destructive" loading={deleteCopilotstate.loading} onClick={handleDelete}>
                         Delete
                       </Button>
                     </AlertDialogFooter>

dashboard/app/(copilot)/copilot/[copilot_id]/workflow/[workflow_id]/layout.tsx

@@ -0,0 +1,36 @@
+import { HeaderShell } from '@/components/domain/HeaderShell'
+import { FlowsControllerV2 } from '@/components/domain/new-flows-editor/Controller'
+import { Button } from '@/components/ui/button'
+import React from 'react'
+
+type Props = {
+    children: React.ReactNode
+}
+
+function WorkflowLayout({
+    children
+}: Props) {
+    return (
+        <FlowsControllerV2>
+            <div className='h-full flex flex-col'>
+                <HeaderShell className='justify-between'>
+                    <h2 className='text-lg font-semibold'>Edit Workflow</h2>
+                    <div className='space-x-2'>
+                        <Button>
+                            Save
+                        </Button>
+                        <Button variant='destructive'>
+                            Delete
+                        </Button>
+                    </div>
+                </HeaderShell>
+                <div className='flex-1 min-h-0'>
+                    {children}
+                </div>
+            </div>
+        </FlowsControllerV2>
+
+    )
+}
+
+export default WorkflowLayout

dashboard/app/(copilot)/copilot/[copilot_id]/workflow/[workflow_id]/page.tsx

@@ -0,0 +1,9 @@
+import { FlowRenderer } from '@/components/domain/new-flows-editor/Renderer'
+import React from 'react'
+
+
+export default function WorkflowPage() {
+    return (
+        <FlowRenderer />
+    )
+}

dashboard/app/(copilot)/copilot/[copilot_id]/workflow/_parts/CreateWorkflowForm.tsx

@@ -0,0 +1,120 @@
+'use client';
+import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import React from 'react'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+
+
+const formSchema = z.object({
+    title: z.string().min(2, {
+        message: "title must be at least 2 characters.",
+    }),
+    description: z.string().min(2, {
+        message: "description must be at least 2 characters.",
+    }),
+    edit_after_creation: z.boolean().default(false),
+})
+
+
+export default function CreateWorkflowForm() {
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            title: '',
+            description: '',
+            edit_after_creation: false,
+        }
+    })
+    function onSubmit(values: z.infer<typeof formSchema>) {
+        console.log(values)
+    }
+    return (
+        <AlertDialog>
+            <AlertDialogTrigger asChild>
+                <Button>
+                    Create Flow
+                </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Create Flow</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        Flows are a sequence of steps that are executed when a user interacts with your bot.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-2'>
+                        <FormField
+                            control={form.control}
+                            name="title"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel className="required-label">
+                                        Title
+                                    </FormLabel>
+                                    <FormControl>
+                                        <Input {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="description"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel className='required-label'>
+                                        Description
+                                    </FormLabel>
+                                    <FormControl>
+                                        <Textarea minRows={3} {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="edit_after_creation"
+                            render={({ field }) => {
+                                const { value, ...rest } = field;
+                                return <FormItem className='flex items-center justify-between'>
+                                    <FormLabel>
+                                        Edit after creation
+                                    </FormLabel>
+                                    <FormControl>
+                                        <Switch
+                                            {...rest}
+                                            checked={value}
+                                            onCheckedChange={() => {
+                                                field.onChange(!value)
+                                            }}
+                                            value={value ? 'on' : 'off'}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            }
+                            }
+                        />
+                        <AlertDialogFooter className='!mt-5'>
+                            <AlertDialogCancel type='button'>
+                                Cancel
+                            </AlertDialogCancel>
+                            <Button type='submit'>
+                                Create
+                            </Button>
+                        </AlertDialogFooter>
+                    </form>
+                </Form>
+            </AlertDialogContent>
+        </AlertDialog>
+    )
+}