mirror of
https://github.com/fosrl/pangolin.git
synced 2026-08-14 16:30:15 +02:00
add api capabilities
This commit is contained in:
miloschwartz
@@ -12,11 +12,16 @@ import {
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import {
|
||||
AiProviderCapabilitiesSelect,
|
||||
capabilityLabelKey
|
||||
} from "@app/components/AiProviderCapabilitiesSelect";
|
||||
import { SwitchInput } from "@app/components/SwitchInput";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
@@ -28,6 +33,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { AI_CAPABILITIES, type AiCapability } from "@server/lib/aiCapabilities";
|
||||
import type { CreateOrEditAiProviderResponse } from "@server/routers/aiProvider/types";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { useTranslations } from "next-intl";
|
||||
@@ -43,17 +49,32 @@ export default function AiProviderGeneralPage() {
|
||||
const router = useRouter();
|
||||
const t = useTranslations();
|
||||
const [saveLoading, setSaveLoading] = useState(false);
|
||||
const isCustom = provider.type === "custom";
|
||||
|
||||
const generalSchema = useMemo(
|
||||
() =>
|
||||
z.object({
|
||||
name: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, { message: t("nameRequired") }),
|
||||
enabled: z.boolean()
|
||||
}),
|
||||
[t]
|
||||
z
|
||||
.object({
|
||||
name: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, { message: t("nameRequired") }),
|
||||
enabled: z.boolean(),
|
||||
capabilities: z.array(z.enum(AI_CAPABILITIES)).optional()
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (
|
||||
isCustom &&
|
||||
(!data.capabilities || data.capabilities.length === 0)
|
||||
) {
|
||||
ctx.addIssue({
|
||||
code: "custom",
|
||||
message: t("aiProviderErrorCapabilitiesRequired"),
|
||||
path: ["capabilities"]
|
||||
});
|
||||
}
|
||||
}),
|
||||
[t, isCustom]
|
||||
);
|
||||
|
||||
type GeneralFormValues = z.infer<typeof generalSchema>;
|
||||
@@ -62,24 +83,35 @@ export default function AiProviderGeneralPage() {
|
||||
resolver: zodResolver(generalSchema),
|
||||
defaultValues: {
|
||||
name: provider.name,
|
||||
enabled: provider.enabled
|
||||
enabled: provider.enabled,
|
||||
capabilities: provider.capabilities ?? []
|
||||
}
|
||||
});
|
||||
|
||||
async function onSubmit(values: GeneralFormValues) {
|
||||
setSaveLoading(true);
|
||||
try {
|
||||
const res = await api.post<
|
||||
AxiosResponse<CreateOrEditAiProviderResponse>
|
||||
>(`/ai-provider/${provider.providerId}`, {
|
||||
const body: {
|
||||
name: string;
|
||||
enabled: boolean;
|
||||
capabilities?: AiCapability[];
|
||||
} = {
|
||||
name: values.name.trim(),
|
||||
enabled: values.enabled
|
||||
});
|
||||
};
|
||||
if (isCustom) {
|
||||
body.capabilities = values.capabilities ?? [];
|
||||
}
|
||||
|
||||
const res = await api.post<
|
||||
AxiosResponse<CreateOrEditAiProviderResponse>
|
||||
>(`/ai-provider/${provider.providerId}`, body);
|
||||
const updated = res.data.data.provider;
|
||||
updateProvider(updated);
|
||||
form.reset({
|
||||
name: updated.name,
|
||||
enabled: updated.enabled
|
||||
enabled: updated.enabled,
|
||||
capabilities: updated.capabilities ?? []
|
||||
});
|
||||
toast({
|
||||
title: t("success"),
|
||||
@@ -166,6 +198,65 @@ export default function AiProviderGeneralPage() {
|
||||
)}
|
||||
/>
|
||||
</SettingsFormCell>
|
||||
|
||||
<SettingsFormCell span="full">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="capabilities"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t(
|
||||
"aiProviderCapabilities"
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
{isCustom ? (
|
||||
<AiProviderCapabilitiesSelect
|
||||
value={
|
||||
field.value ??
|
||||
[]
|
||||
}
|
||||
onChange={
|
||||
field.onChange
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(
|
||||
provider.capabilities ??
|
||||
[]
|
||||
).map((cap) => (
|
||||
<span
|
||||
key={
|
||||
cap
|
||||
}
|
||||
className="inline-flex items-center rounded-md border border-input bg-muted/40 px-2.5 py-1 text-sm"
|
||||
>
|
||||
{t(
|
||||
capabilityLabelKey(
|
||||
cap
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{isCustom
|
||||
? t(
|
||||
"aiProviderCapabilitiesCustomDescription"
|
||||
)
|
||||
: t(
|
||||
"aiProviderCapabilitiesDescription"
|
||||
)}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</SettingsFormCell>
|
||||
</SettingsFormGrid>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
@@ -20,6 +20,10 @@ import {
|
||||
} from "@app/components/Settings";
|
||||
import HeaderTitle from "@app/components/SettingsSectionTitle";
|
||||
import { AiProviderAuthTypeSelect } from "@app/components/AiProviderAuthTypeSelect";
|
||||
import {
|
||||
AiProviderCapabilitiesSelect,
|
||||
capabilityLabelKey
|
||||
} from "@app/components/AiProviderCapabilitiesSelect";
|
||||
import { AiProviderTypeSelect } from "@app/components/AiProviderTypeSelect";
|
||||
import { StrategySelect } from "@app/components/StrategySelect";
|
||||
import { SwitchInput } from "@app/components/SwitchInput";
|
||||
@@ -40,6 +44,7 @@ import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import {
|
||||
createAiProviderCreateFormSchema,
|
||||
defaultAuthTypeForProvider,
|
||||
defaultCapabilitiesForProvider,
|
||||
emptyUpstreamForType,
|
||||
showsUpstreamUrlField,
|
||||
toAiProviderCreatePayload,
|
||||
@@ -76,6 +81,7 @@ export default function CreateAiProviderPage() {
|
||||
apiKey: "",
|
||||
authType: defaultAuthTypeForProvider("openai"),
|
||||
routingMode: "url",
|
||||
capabilities: defaultCapabilitiesForProvider("openai"),
|
||||
skipTlsVerification: false,
|
||||
enabled: true
|
||||
}
|
||||
@@ -84,12 +90,14 @@ export default function CreateAiProviderPage() {
|
||||
const providerType = form.watch("type");
|
||||
const routingMode = form.watch("routingMode");
|
||||
const authType = form.watch("authType");
|
||||
const capabilities = form.watch("capabilities");
|
||||
|
||||
const showUpstream = showsUpstreamUrlField(providerType, routingMode);
|
||||
const requireUpstream = upstreamUrlRequired(providerType, routingMode);
|
||||
const showRoutingMode = providerType === "custom";
|
||||
const showTargets = providerType === "custom" && routingMode === "target";
|
||||
const showApiKey = authTypeRequiresApiKey(authType ?? "bearer");
|
||||
const showCapabilitiesSelect = providerType === "custom";
|
||||
|
||||
async function createTargets(
|
||||
providerId: number,
|
||||
@@ -277,6 +285,12 @@ export default function CreateAiProviderPage() {
|
||||
value
|
||||
)
|
||||
);
|
||||
form.setValue(
|
||||
"capabilities",
|
||||
defaultCapabilitiesForProvider(
|
||||
value
|
||||
)
|
||||
);
|
||||
if (
|
||||
value !==
|
||||
"custom"
|
||||
@@ -296,6 +310,67 @@ export default function CreateAiProviderPage() {
|
||||
)}
|
||||
/>
|
||||
</SettingsFormCell>
|
||||
|
||||
<SettingsFormCell span="full">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="capabilities"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t(
|
||||
"aiProviderCapabilities"
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
{showCapabilitiesSelect ? (
|
||||
<AiProviderCapabilitiesSelect
|
||||
value={
|
||||
field.value ??
|
||||
[]
|
||||
}
|
||||
onChange={
|
||||
field.onChange
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(
|
||||
capabilities ??
|
||||
defaultCapabilitiesForProvider(
|
||||
providerType
|
||||
)
|
||||
).map((cap) => (
|
||||
<span
|
||||
key={
|
||||
cap
|
||||
}
|
||||
className="inline-flex items-center rounded-md border border-input bg-muted/40 px-2.5 py-1 text-sm"
|
||||
>
|
||||
{t(
|
||||
capabilityLabelKey(
|
||||
cap
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{showCapabilitiesSelect
|
||||
? t(
|
||||
"aiProviderCapabilitiesCustomDescription"
|
||||
)
|
||||
: t(
|
||||
"aiProviderCapabilitiesDescription"
|
||||
)}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</SettingsFormCell>
|
||||
</SettingsFormGrid>
|
||||
</SettingsSectionForm>
|
||||
</SettingsSectionBody>
|
||||
|
||||
Reference in New Issue
Block a user