calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-08-09 05:58:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

add api capabilities

Browse Source
This commit is contained in:
miloschwartz
2026-08-05 16:55:48 -04:00
parent 2e8bd7a8c7
commit 39e06f2b6d
16 changed files with 715 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[orgId]/settings/ai-providers/[providerId]/general/page.tsx
+105 -14
View File
@@ -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>
src/app/[orgId]/settings/ai-providers/create/page.tsx
+75
View File
@@ -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>
src/components/AiProviderCapabilitiesSelect.tsx
+89
View File
@@ -0,0 +1,89 @@
"use client";
import { MultiSelectTagInput } from "@app/components/multi-select/multi-select-tag-input";
import { AI_CAPABILITIES, type AiCapability } from "@server/lib/aiCapabilities";
import { useTranslations } from "next-intl";
import { useMemo, useState } from "react";
export type CapabilityOption = {
id: string;
text: string;
};
export type AiProviderCapabilitiesSelectProps = {
value: AiCapability[];
onChange: (capabilities: AiCapability[]) => void;
disabled?: boolean;
};
const CAPABILITY_LABEL_KEYS: Record<AiCapability, string> = {
openai_chat: "aiCapabilityOpenaiChat",
openai_responses: "aiCapabilityOpenaiResponses",
anthropic_messages: "aiCapabilityAnthropicMessages",
gemini_generate_content: "aiCapabilityGeminiGenerateContent",
bedrock_model_invoke: "aiCapabilityBedrockModelInvoke",
google_generate_content: "aiCapabilityGoogleGenerateContent",
google_raw_predict: "aiCapabilityGoogleRawPredict",
bedrock_converse: "aiCapabilityBedrockConverse"
};
export function capabilityLabelKey(capability: AiCapability): string {
return CAPABILITY_LABEL_KEYS[capability];
}
export function AiProviderCapabilitiesSelect({
value,
onChange,
disabled
}: AiProviderCapabilitiesSelectProps) {
const t = useTranslations();
const [searchQuery, setSearchQuery] = useState("");
const options: CapabilityOption[] = useMemo(
() =>
AI_CAPABILITIES.map((id) => ({
id,
text: t(CAPABILITY_LABEL_KEYS[id])
})),
[t]
);
const filtered = useMemo(() => {
const q = searchQuery.trim().toLowerCase();
if (!q) {
return options;
}
return options.filter(
(o) =>
o.text.toLowerCase().includes(q) ||
o.id.toLowerCase().includes(q)
);
}, [options, searchQuery]);
const selected: CapabilityOption[] = value.map((id) => ({
id,
text: t(CAPABILITY_LABEL_KEYS[id])
}));
return (
<MultiSelectTagInput
buttonText={t("aiProviderCapabilitiesSelect")}
emptyPlaceholder={t("aiProviderCapabilitiesEmpty")}
searchPlaceholder={t("aiProviderCapabilitiesSearch")}
searchQuery={searchQuery}
options={filtered}
value={selected}
onChange={(next) =>
onChange(
next
.map((item) => item.id)
.filter((id): id is AiCapability =>
(AI_CAPABILITIES as readonly string[]).includes(id)
)
)
}
onSearch={setSearchQuery}
disabled={disabled}
/>
);
}
src/lib/aiProviderFormSchema.ts
+31
View File
@@ -7,6 +7,11 @@ import {
type AiProviderAuthType,
type AiProviderType
} from "@server/lib/aiProviderDefaults";
import {
AI_CAPABILITIES,
defaultsForProviderType,
type AiCapability
} from "@server/lib/aiCapabilities";
type TranslateFn = (key: string) => string;
@@ -22,6 +27,8 @@ export const aiProviderTypeValues = [
"custom"
] as const satisfies readonly AiProviderType[];
export const aiCapabilityValues = AI_CAPABILITIES;
export function createAiProviderFormSchema(t: TranslateFn) {
return z
.object({
@@ -34,6 +41,7 @@ export function createAiProviderFormSchema(t: TranslateFn) {
apiKey: z.string().optional(),
authType: z.enum(AI_PROVIDER_AUTH_TYPES).optional().nullable(),
routingMode: z.enum(["url", "target"]).optional(),
capabilities: z.array(z.enum(AI_CAPABILITIES)).optional(),
skipTlsVerification: z.boolean().optional(),
enabled: z.boolean().optional()
})
@@ -84,6 +92,17 @@ export function createAiProviderFormSchema(t: TranslateFn) {
path: ["authType"]
});
}
if (
data.type === "custom" &&
(!data.capabilities || data.capabilities.length === 0)
) {
ctx.addIssue({
code: "custom",
message: t("aiProviderErrorCapabilitiesRequired"),
path: ["capabilities"]
});
}
});
}
@@ -114,6 +133,12 @@ export function defaultAuthTypeForProvider(
return AI_PROVIDER_DEFAULTS[type].authType;
}
export function defaultCapabilitiesForProvider(
type: AiProviderType
): AiCapability[] {
return [...defaultsForProviderType(type)];
}
export function emptyUpstreamForType(type: AiProviderType): string {
if (type === "custom") {
return "";
@@ -158,6 +183,8 @@ export function toAiProviderCreatePayload(values: AiProviderFormValues) {
upstreamUrl,
apiKey: values.apiKey?.trim() ? values.apiKey.trim() : undefined,
authType: values.authType ?? "bearer",
capabilities:
values.type === "custom" ? (values.capabilities ?? []) : undefined,
skipTlsVerification: values.skipTlsVerification,
enabled: values.enabled ?? true
};
@@ -183,6 +210,10 @@ export function toAiProviderUpdatePayload(values: AiProviderFormValues) {
enabled: values.enabled ?? true
};
if (values.type === "custom" && values.capabilities) {
payload.capabilities = values.capabilities;
}
if (values.apiKey?.trim()) {
payload.apiKey = values.apiKey.trim();
}