Anjing Webshells

Website : rimsha.abasa.com
: / var / www / talha_silentcontent / src / components / Organization /
Filename : OrganizationJobForm.tsx
back
//@ts-nocheck
"use client"

import { useEffect, useState } from "react"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { useMutation } from "@tanstack/react-query"
import Papa from "papaparse"
import axios from "axios"
import { toast } from "@/components/ui/use-toast"
import { organizationJobSchema, type OrganizationJobFormValues } from "@/lib/validators/orgJobValidator"
import { getKeyLabel, getLabelColor } from "@/components/APIKeysSettings";


export function OrganizationJobForm({ organizationId, onSuccess }: { organizationId: string, onSuccess?: () => void }) {
  const [apiKeys, setApiKeys] = useState<string[]>([]);
  const [prompts, setPrompts] = useState<string[]>([]);

  useEffect(() => {
      const fetchPrompts = async () => {
        const response = await axios.get("/api/prompt");
        setPrompts(response.data.data.prompts);
      };
      if (typeof window !== "undefined") {
        fetchPrompts();
      }
    }, []);
 
  useEffect(() => {
    const fetchAPIKeys = async () => {
      const response = await axios.get("/api/keys");
      setApiKeys(response.data.data.API_Keys);
    };
    if (typeof window !== "undefined") {
      fetchAPIKeys();
    }
  }, []);
  
  const form = useForm<OrganizationJobFormValues>({
    resolver: zodResolver(organizationJobSchema),
    defaultValues: {
      gpt: "gpt-4o-2024-08-06",
    }
  })

  
  
  const { mutate: createJob, isLoading } = useMutation({
    mutationFn: async (data: OrganizationJobFormValues) => {
      const payload = {
        name: data.name,
        settings: {
          gpt: data.gpt,
          prompt: data.prompt,
          apiKey: data.apiKey,
          customOutlinePrompt: data.customOutlinePrompt,
          customSectionPrompt: data.customSectionPrompt,
          scraping: true
        }
      };

       // const jobId = jobResponse.data.job._id

      // if (data.csv) {
      //   const formData = new FormData()
      //   formData.append('csv', data.csv)
        
      //   await axios.post(`/api/organizations/jobs/${jobId}/upload`, formData)
      //   await axios.post(`/api/organizations/jobs/${jobId}/process`)
      // }
      const jobResponse = await axios.post(`/api/organizations/${organizationId}/jobs`, payload);
      return jobResponse.data;
    },
    onSuccess: () => {
      toast({
        description: "Job created, you can add csv files now",
      })
      onSuccess?.()
    },
    onError: (error) => {
      toast({
        variant: "destructive", 
        description: "Failed to create job",
      })
    }
  })

  const onSubmit = async (data: OrganizationJobFormValues) => {
    // if (data.csv) {
    //   const file = data.csv
    //   await new Promise((resolve) => {
    //     Papa.parse(file, {
    //       header: true,
    //       dynamicTyping: true,
    //       skipEmptyLines: true,
    //       complete: (result) => {
    //         const keywords = result.data.map((row) => row.PrimaryKeyword)
    //         const secondaryKeywords = result.data.map((row) => {
    //           const secondaryKeywordsArray = row.SecondaryKeywords?.split(',').map(keyword => keyword.trim())
    //           return secondaryKeywordsArray?.join(', ')
    //         })
    //         resolve({ keywords, secondaryKeywords })
    //       }
    //     })
    //   })
    // }

    createJob(data)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Job Name</FormLabel>
              <FormControl>
                <Input placeholder="Enter job name" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="gpt"
          defaultValue="gpt-4o-2024-08-06"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Model</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a model" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                <SelectItem value="gpt-4o-mini-2024-07-18">GPT - 4o Mini</SelectItem>
                <SelectItem value="gpt-4">GPT - 4</SelectItem>
                <SelectItem value="gpt-4o-2024-08-06">GPT - 4o</SelectItem>
                <SelectItem value="deepseek-chat">Deepseek - V3</SelectItem>
                <SelectItem value="deepseek-reasoner">Deepseek - R1</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="prompt"
          render={({ field }) => (
              <FormItem>
                <FormLabel>Base Prompt</FormLabel>
                {prompts && (
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select a prompt" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {prompts.map((prompt, index) => (
                          <SelectItem key={index} value={prompt._id}>
                              {prompt.name}
                          </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
                <FormMessage />
              </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="apiKey"
          render={({ field }) => (
              <FormItem>
                <FormLabel>API Key</FormLabel>
                {apiKeys && (
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select an API key" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {apiKeys.map((apikey, index) => (
                        <SelectItem key={index} value={apikey} className="text-xs">
                          <div className="flex gap-4 items-center">
                            {apikey.length > 45 ? `${apikey.substring(0, 45)}...` : apikey}
                            <div >
                              <span className={getLabelColor(apikey)}>{getKeyLabel(apikey)}</span>
                            </div>                          
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
                <FormMessage />
              </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="customOutlinePrompt"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Custom Outline Prompt (Optional)</FormLabel>
              <FormControl>
                <Textarea placeholder="Enter custom outline prompt" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="customSectionPrompt"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Custom Section Prompt (Optional)</FormLabel>
              <FormControl>
                <Textarea placeholder="Enter custom section prompt" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        {/* <FormField
          control={form.control}
          name="csv"
          render={({ field: { value, onChange, ...field } }) => (
            <FormItem>
              <FormLabel>CSV File</FormLabel>
              <FormControl>
                <Input
                  type="file"
                  accept=".csv"
                  onChange={(e) => onChange(e.target.files?.[0])}
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        /> */}

        <Button type="submit" disabled={isLoading}>
          {isLoading ? "Creating..." : "Create Job"}
        </Button>
      </form>
    </Form>
  )
}