98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import type { AutoFormInputComponentProps } from "../ui/auto-form/types";
|
|
import {
|
|
FormControl,
|
|
FormDescription,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "../ui/form";
|
|
import { LoadingIcon } from "@/components/LoadingIcon";
|
|
// import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
|
|
import * as React from "react";
|
|
import { Suspense } from "react";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { CivitaiModelRegistry } from "./CivitaiModelRegistry";
|
|
import { ComfyUIManagerModelRegistry } from "./ComfyUIManagerModelRegistry";
|
|
import { Input } from "@/components/ui/input";
|
|
import { ModelList } from "@/components/custom-form/CivitalModelSchema";
|
|
import { z } from "zod";
|
|
|
|
export default function AutoFormModelsPickerUrl({
|
|
label,
|
|
isRequired,
|
|
field,
|
|
fieldConfigItem,
|
|
zodItem,
|
|
fieldProps,
|
|
}: AutoFormInputComponentProps) {
|
|
return (
|
|
<FormItem>
|
|
{fieldConfigItem.inputProps?.showLabel && (
|
|
<FormLabel>
|
|
{label}
|
|
{isRequired && <span className="text-destructive"> *</span>}
|
|
</FormLabel>
|
|
)}
|
|
<FormControl>
|
|
<Suspense fallback={<LoadingIcon />}>
|
|
<ModelPickerView field={field} fieldProps={fieldProps} />
|
|
</Suspense>
|
|
</FormControl>
|
|
{fieldConfigItem.description && (
|
|
<FormDescription>{fieldConfigItem.description}</FormDescription>
|
|
)}
|
|
<FormMessage />
|
|
</FormItem>
|
|
);
|
|
}
|
|
|
|
function ModelPickerView({
|
|
field,
|
|
fieldProps,
|
|
}: Pick<AutoFormInputComponentProps, "field" | "fieldProps">) {
|
|
const customOverride = React.useMemo(() => {
|
|
const customOnChange = (value: z.infer<typeof ModelList>) => {
|
|
const model = value[0];
|
|
field.onChange(model?.url);
|
|
};
|
|
return {
|
|
...field,
|
|
onChange: customOnChange,
|
|
value: field.value
|
|
? [
|
|
{
|
|
url: field.value,
|
|
},
|
|
]
|
|
: [],
|
|
};
|
|
}, [field]);
|
|
|
|
return (
|
|
<div className="flex gap-2 flex-col px-1">
|
|
<ComfyUIManagerModelRegistry
|
|
field={customOverride}
|
|
selectMultiple={false}
|
|
/>
|
|
<CivitaiModelRegistry field={customOverride} selectMultiple={false} />
|
|
<Input
|
|
// className="min-h-[150px] max-h-[300px] p-2 rounded-lg text-xs w-full"
|
|
value={field.value ?? ""}
|
|
onChange={(e) => {
|
|
field.onChange(e.target.value);
|
|
}}
|
|
type="text"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|