mywork / src /components /deployment /DeploymentForm.tsx
DeeCeeXxx's picture
Upload 114 files
e9d5b7d verified
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
// Use DeploymentFormInputSchema for the form, which excludes PLATFORM_API_KEY
import { DeploymentFormInputSchema, type DeploymentFormInput } from "@/lib/schemas";
import { createNewDeployment } from "@/lib/actions/deployment";
import { useToast } from "@/hooks/use-toast";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { AlertCircle, Loader2, Rocket, Github, Coins, ExternalLink } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import Link from "next/link";
const defaultAnitaV4RepoUrl = "https://github.com/DavidCyrilTech/Anita-V4";
const DEPLOYMENT_COST = 10; // Defined here for display purposes
interface EnvVarField {
name: keyof Omit<DeploymentFormInput, "githubRepoUrl">; // Base on DeploymentFormInput
label: string;
description: string;
type: "text" | "boolean" | "textarea" | "password"; // password type just for semantic input, not secure storage here
placeholder?: string;
required?: boolean;
}
const envVarFields: EnvVarField[] = [
{ name: "SESSION_ID", label: "Session ID", description: "Your WhatsApp session ID. This is mandatory.", type: "textarea", placeholder: "Enter your full session ID here", required: true },
{ name: "PLATFORM_APP_NAME", label: "App Name (Optional)", description: "Custom name for your app on the platform. If blank, one will be generated.", type: "text", placeholder: "my-anita-bot" },
{ name: "BOT_NAME", label: "Bot Name", description: "The name of your bot.", type: "text", placeholder: "𝐐𝐔𝐄𝐄𝐍_π€ππˆπ“π€-π•πŸ’" },
{ name: "OWNER_NUMBER", label: "Owner Numbers", description: "Comma-separated list of owner WhatsApp numbers (e.g., 234...).", type: "text", placeholder: "2347043759577,2348123456789" },
{ name: "OWNER_NAME", label: "Owner Name", description: "The name of the bot owner.", type: "text", placeholder: "David Cyril" },
{ name: "PACK_NAME", label: "Sticker Pack Name", description: "Default name for sticker packs.", type: "text", placeholder: "𝐐𝐔𝐄𝐄𝐍_π€ππˆπ“π€-π•πŸ’ Pack" },
{ name: "AUTHOR", label: "Sticker Author Name", description: "Default author for sticker packs.", type: "text", placeholder: "πƒπ€π•πˆπƒ π‚π˜π‘πˆπ‹" },
{ name: "CHANNEL_NAME", label: "Channel Name", description: "Name of your WhatsApp channel.", type: "text", placeholder: "πƒπ€π•πˆπƒ π‚π˜π‘πˆπ‹ Updates" },
{ name: "CHANNEL_JID", label: "Channel JID", description: "JID of your WhatsApp channel.", type: "text", placeholder: "120363315231436175@newsletter" },
{ name: "AUTO_TYPING", label: "Auto Typing", description: "Enable automatic typing indicator.", type: "boolean" },
{ name: "AUTO_RECORD", label: "Auto Recording", description: "Enable automatic recording indicator.", type: "boolean" },
{ name: "AUTO_VIEW_STATUS", label: "Auto View Status", description: "Automatically view contacts' statuses.", type: "boolean" },
{ name: "AUTO_STATUS_REACT", label: "Auto React to Status", description: "Automatically react to statuses.", type: "boolean" },
{ name: "LEVELUP", label: "Level Up System", description: "Enable the leveling system for users.", type: "boolean" },
{ name: "ANTIVIEWONCE", label: "Anti View Once", description: "Save view-once messages.", type: "boolean" },
{ name: "PUBLIC", label: "Public Mode", description: "Allow anyone to use the bot commands.", type: "boolean" },
{ name: "ANTIDELETE", label: "Anti Delete Messages", description: "Prevent users from deleting messages for the bot.", type: "boolean" },
{ name: "ANTI_TAG", label: "Anti Tag All", description: "Prevent tagging everyone in a group.", type: "boolean" },
{ name: "ANTI_TEMU", label: "Anti Temu Links", description: "Block Temu links.", type: "boolean" },
{ name: "UNAVAILABLE", label: "Bot Unavailable Mode", description: "Set bot to unavailable status.", type: "boolean" },
{ name: "AVAILABLE", label: "Bot Available Mode", description: "Set bot to available status (overrides unavailable).", type: "boolean" },
{ name: "AUTO_READ_MESSAGES", label: "Auto Read Messages", description: "Mark messages as read automatically.", type: "boolean" },
{ name: "CHATBOT", label: "Enable Chatbot", description: "Enable AI chatbot functionality.", type: "boolean" },
{ name: "AUTO_REACT", label: "Auto React to Messages", description: "Automatically react to incoming messages.", type: "boolean" },
{ name: "WELCOME", label: "Welcome Messages", description: "Send welcome messages to new group members.", type: "boolean" },
{ name: "AUTO_LIKE_EMOJI", label: "Auto Like Emoji", description: "Emoji used for auto-liking.", type: "text", placeholder: "πŸ’š" },
{ name: "SUDO_USERS", label: "Sudo Users", description: "Comma-separated list of sudo user WhatsApp numbers.", type: "text", placeholder: "2349066528353" },
{ name: "PREFIX", label: "Command Prefix", description: "The prefix for bot commands.", type: "text", placeholder: "." },
];
export function DeploymentForm() {
const { toast } = useToast();
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const form = useForm<DeploymentFormInput>({ // Use DeploymentFormInput for the form
resolver: zodResolver(DeploymentFormInputSchema), // Use the schema for form input
defaultValues: {
SESSION_ID: "",
PLATFORM_APP_NAME: "",
OWNER_NUMBER: "2347043759577,2348123456789",
BOT_NAME: "𝐐𝐔𝐄𝐄𝐍_π€ππˆπ“π€-π•πŸ’",
OWNER_NAME: "David Cyril",
PACK_NAME: "𝐐𝐔𝐄𝐄𝐍_π€ππˆπ“π€-π•πŸ’",
AUTHOR: "πƒπ€π•πˆπƒ π‚π˜π‘πˆπ‹",
CHANNEL_NAME: "πƒπ€π•πˆπƒ π‚π˜π‘πˆπ‹",
CHANNEL_JID: "120363315231436175@newsletter",
AUTO_TYPING: false,
AUTO_RECORD: false,
AUTO_VIEW_STATUS: true,
AUTO_STATUS_REACT: false,
AUTO_LIKE_EMOJI: "πŸ’š",
LEVELUP: false,
ANTIVIEWONCE: false,
SUDO_USERS: "2349066528353,2348129988915",
PUBLIC: true,
ANTIDELETE: false,
ANTI_TAG: false,
ANTI_TEMU: false,
UNAVAILABLE: true,
AVAILABLE: false,
AUTO_READ_MESSAGES: false,
CHATBOT: false,
AUTO_REACT: false,
WELCOME: false,
PREFIX: ".",
},
});
async function onSubmit(values: DeploymentFormInput) { // values are of type DeploymentFormInput
setIsLoading(true);
try {
const result = await createNewDeployment(values); // Pass DeploymentFormInput directly
if (result.success && result.deployment) {
toast({
title: "Deployment Initiated",
description: result.message,
});
router.push(`/dashboard/deployments/${result.deployment.id}`);
} else {
toast({
title: "Deployment Failed",
description: result.message || "An unknown error occurred.",
variant: "destructive",
});
}
} catch (error) {
toast({
title: "Error",
description: "An unexpected error occurred. Please try again.",
variant: "destructive",
});
} finally {
setIsLoading(false);
}
}
const groupFields = (fields: EnvVarField[]) => {
const groups: Record<string, EnvVarField[]> = {
"Core Configuration": [],
"Bot Identity & Ownership": [],
"Sticker Settings": [],
"Channel Integration": [],
"Automation Features": [],
"Moderation & Utility": [],
"Miscellaneous": [],
};
fields.forEach(field => {
if (["SESSION_ID", "PLATFORM_APP_NAME"].includes(field.name)) groups["Core Configuration"].push(field);
else if (["BOT_NAME", "OWNER_NUMBER", "OWNER_NAME", "SUDO_USERS", "PUBLIC", "PREFIX"].includes(field.name)) groups["Bot Identity & Ownership"].push(field);
else if (["PACK_NAME", "AUTHOR"].includes(field.name)) groups["Sticker Settings"].push(field);
else if (["CHANNEL_NAME", "CHANNEL_JID"].includes(field.name)) groups["Channel Integration"].push(field);
else if (field.type === "boolean" && field.name.startsWith("AUTO_")) groups["Automation Features"].push(field);
else if (field.type === "boolean" && ["ANTIVIEWONCE", "ANTIDELETE", "ANTI_TAG", "ANTI_TEMU", "LEVELUP", "WELCOME", "UNAVAILABLE", "AVAILABLE", "CHATBOT"].includes(field.name)) groups["Moderation & Utility"].push(field);
else groups["Miscellaneous"].push(field);
});
return groups;
};
const groupedFields = groupFields(envVarFields);
return (
<Card className="shadow-xl">
<CardHeader>
<CardTitle className="text-2xl flex items-center">
<Rocket className="mr-2 h-6 w-6 text-primary"/> Configure Your Anita-V4 Deployment
</CardTitle>
<CardDescription>
Fill in the details below to deploy your Anita-V4 bot.
The deployment platform API key is pre-configured on the server.
</CardDescription>
</CardHeader>
<CardContent>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<div className="space-y-2">
<FormLabel className="text-base font-medium">GitHub Repository</FormLabel>
<div className="flex items-center gap-2 p-3 rounded-md border bg-muted/50">
<Github className="h-5 w-5 text-foreground/70" />
<p className="text-sm text-foreground">
{defaultAnitaV4RepoUrl}
</p>
</div>
<FormDescription>
This deployment will use the official Anita-V4 repository.
</FormDescription>
</div>
<Alert variant="default" className="bg-primary/10 border-primary/30">
<AlertCircle className="h-4 w-4 !text-primary" />
<AlertTitle className="text-primary">Important</AlertTitle>
<AlertDescription>
Ensure your Session ID is correct. An incorrect Session ID will lead to deployment failure.
Need help getting your Session ID?
<Button variant="link" asChild className="p-0 h-auto ml-1 text-base">
<Link href="https://pair.david-cyril.net.ng" target="_blank" rel="noopener noreferrer" className="inline-flex items-center text-primary hover:underline font-medium">
Click here
<ExternalLink className="ml-1 h-3 w-3" />
</Link>
</Button>
</AlertDescription>
</Alert>
<Alert variant="default" className="bg-yellow-500/10 border-yellow-500/30">
<Coins className="h-4 w-4 !text-yellow-600" />
<AlertTitle className="text-yellow-700">Deployment Cost</AlertTitle>
<AlertDescription className="text-yellow-600">
Deploying a new bot costs {DEPLOYMENT_COST} coins. Admins deploy for free.
</AlertDescription>
</Alert>
<Accordion type="multiple" className="w-full" defaultValue={["Core Configuration", "Bot Identity & Ownership"]}>
{Object.entries(groupedFields).map(([groupName, fields]) => (
fields.length > 0 && (
<AccordionItem value={groupName} key={groupName}>
<AccordionTrigger className="text-lg font-semibold hover:no-underline">{groupName}</AccordionTrigger>
<AccordionContent>
<div className="space-y-6 pt-4">
{fields.map((envField) => (
<FormField
key={envField.name}
control={form.control}
name={envField.name}
render={({ field }) => (
<FormItem className={envField.type === "boolean" ? "flex flex-row items-center justify-between rounded-lg border p-4 shadow-sm" : ""}>
<div className={envField.type === "boolean" ? "space-y-0.5" : "space-y-1"}>
<FormLabel>{envField.label} {envField.required && <span className="text-destructive">*</span>}</FormLabel>
<FormDescription>{envField.description}</FormDescription>
{envField.name === "SESSION_ID" && (
<Button variant="outline" size="sm" asChild className="mt-2">
<Link href="https://pair.david-cyril.net.ng" target="_blank" rel="noopener noreferrer">
<ExternalLink className="mr-2 h-4 w-4" />
Get Session ID
</Link>
</Button>
)}
</div>
<FormControl>
{envField.type === "boolean" ? (
<Switch
checked={field.value as boolean}
onCheckedChange={field.onChange}
/>
) : envField.type === "textarea" ? (
<Textarea placeholder={envField.placeholder} {...field as any} rows={3} />
) : envField.type === "password" ? (
<Input type="password" placeholder={envField.placeholder} {...field as any} />
) : (
<Input placeholder={envField.placeholder} {...field as any} />
)}
</FormControl>
{envField.type !== "boolean" && <FormMessage />}
</FormItem>
)}
/>
))}
</div>
</AccordionContent>
</AccordionItem>
)
))}
</Accordion>
<Button type="submit" size="lg" className="w-full sm:w-auto" disabled={isLoading}>
{isLoading ? (
<>
<Loader2 className="mr-2 h-5 w-5 animate-spin" /> Deploying...
</>
) : (
<>
<Rocket className="mr-2 h-5 w-5" /> Deploy Application
</>
)}
</Button>
</form>
</Form>
</CardContent>
</Card>
);
}