import { FC } from "react"; import { useForm } from "react-hook-form"; import { Lightbulb } from "lucide-react"; import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types"; import { Button, TOAST_TYPE, setToast } from "@plane/ui"; // components import { ControllerInput, TControllerInputFormField } from "@/components/common"; // hooks import { useInstance } from "@/hooks/store"; type IInstanceAIForm = { config: IFormattedInstanceConfiguration; }; type AIFormValues = Record; export const InstanceAIForm: FC = (props) => { const { config } = props; // store const { updateInstanceConfigurations } = useInstance(); // form data const { handleSubmit, control, formState: { errors, isSubmitting }, } = useForm({ defaultValues: { OPENAI_API_KEY: config["OPENAI_API_KEY"], GPT_ENGINE: config["GPT_ENGINE"], }, }); const aiFormFields: TControllerInputFormField[] = [ { key: "GPT_ENGINE", type: "text", label: "GPT_ENGINE", description: ( <> Choose an OpenAI engine.{" "} Learn more ), placeholder: "gpt-3.5-turbo", error: Boolean(errors.GPT_ENGINE), required: false, }, { key: "OPENAI_API_KEY", type: "password", label: "API key", description: ( <> You will find your API key{" "} here. ), placeholder: "sk-asddassdfasdefqsdfasd23das3dasdcasd", error: Boolean(errors.OPENAI_API_KEY), required: false, }, ]; const onSubmit = async (formData: AIFormValues) => { const payload: Partial = { ...formData }; await updateInstanceConfigurations(payload) .then(() => setToast({ type: TOAST_TYPE.SUCCESS, title: "Success", message: "AI Settings updated successfully", }) ) .catch((err) => console.error(err)); }; return (
OpenAI
If you use ChatGPT, this is for you.
{aiFormFields.map((field) => ( ))}
If you have a preferred AI models vendor, please get in touch with us.
); };