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

clean up providers ui

Browse Source
This commit is contained in:
miloschwartz
2026-08-03 16:06:28 -04:00
committed by Owen
parent b0edc6302e
commit 33b775e263
17 changed files with 1412 additions and 962 deletions
Download Patch File Download Diff File Expand all files Collapse all files
messages/en-US.json
+11 -6
View File
@@ -1632,7 +1632,7 @@
"sidebarInvitations": "Invitations", "sidebarInvitations": "Invitations",
"sidebarRoles": "Roles", "sidebarRoles": "Roles",
"sidebarShareableLinks": "Shareable Links", "sidebarShareableLinks": "Shareable Links",
"sidebarAi": "AI", "sidebarAiGateway": "AI Gateway",
"sidebarAiProviders": "Providers", "sidebarAiProviders": "Providers",
"commandAiProviders": "AI Providers", "commandAiProviders": "AI Providers",
"aiProvidersTitle": "AI Providers", "aiProvidersTitle": "AI Providers",
@@ -1648,7 +1648,11 @@
"aiProviderGeneral": "General", "aiProviderGeneral": "General",
"aiProviderGeneralDescription": "Basic settings for this provider", "aiProviderGeneralDescription": "Basic settings for this provider",
"aiProviderConfiguration": "Configuration", "aiProviderConfiguration": "Configuration",
"aiProviderConfigurationDescription": "Upstream URL, routing, authentication, and TLS settings", "aiProviderConfigurationDescription": "Network routing and authentication for this provider",
"aiProviderNetworkSettings": "Network Settings",
"aiProviderNetworkSettingsDescription": "Choose how traffic reaches this provider",
"aiProviderAuthSettings": "Authentication",
"aiProviderAuthSettingsDescription": "Credentials used for both upstream URL and Pangolin target routing",
"aiProviderType": "Provider Type", "aiProviderType": "Provider Type",
"aiProviderTypeSearch": "Search providers...", "aiProviderTypeSearch": "Search providers...",
"aiProviderTypeNotFound": "No provider type found", "aiProviderTypeNotFound": "No provider type found",
@@ -1675,18 +1679,19 @@
"aiProviderUpstreamUrlOptionalDescription": "Leave blank to use the default upstream URL for this provider", "aiProviderUpstreamUrlOptionalDescription": "Leave blank to use the default upstream URL for this provider",
"aiProviderEffectiveUpstreamUrl": "Effective Upstream URL", "aiProviderEffectiveUpstreamUrl": "Effective Upstream URL",
"aiProviderApiKey": "API Key", "aiProviderApiKey": "API Key",
"aiProviderApiKeyDescription": "Stored encrypted. Leave blank on edit to keep the existing key.", "aiProviderApiKeyDescription": "API key used to authenticate requests to this provider",
"aiProviderApiKeyLastChars": "API Key", "aiProviderApiKeyLastChars": "API Key",
"aiProviderAuthType": "Auth Type", "aiProviderAuthType": "Auth Type",
"aiProviderAuthTypeBearer": "Bearer", "aiProviderAuthTypeBearer": "Bearer",
"aiProviderAuthTypeDescription": "How the upstream API authenticates requests", "aiProviderAuthTypeDescription": "How the upstream API authenticates requests",
"aiProviderRoutingMode": "Routing Mode", "aiProviderRoutingMode": "Routing Mode",
"aiProviderRoutingModeDescription": "Send traffic to an upstream URL or to Pangolin HTTPS targets", "aiProviderRoutingModeDescription": "Send traffic to an upstream URL or to HTTP targets on your sites",
"aiProviderRoutingModeUrl": "Upstream URL", "aiProviderRoutingModeUrl": "Upstream URL",
"aiProviderRoutingModeUrlDescription": "Call a public or private API base URL", "aiProviderRoutingModeUrlDescription": "Call a public or private API base URL",
"aiProviderRoutingModeTarget": "Pangolin Targets", "aiProviderRoutingModeTarget": "Site Targets",
"aiProviderRoutingModeTargetDescription": "Route through HTTPS targets on your sites", "aiProviderRoutingModeTargetDescription": "Route through HTTPS targets on your sites",
"aiProviderRoutingModeTargetNote": "Target configuration will be available in a later update. You can still create this provider now.", "aiProviderRoutingModeTargetNote": "After creating this provider, configure site targets on the Network Settings tab.",
"aiProviderTargetNoOne": "This provider doesn't have any targets. Add a target to route requests through your sites.",
"aiProviderSkipTlsVerification": "Skip TLS Verification", "aiProviderSkipTlsVerification": "Skip TLS Verification",
"aiProviderSkipTlsVerificationDescription": "Disable TLS certificate verification for the upstream connection", "aiProviderSkipTlsVerificationDescription": "Disable TLS certificate verification for the upstream connection",
"aiProviderBudget": "Budget", "aiProviderBudget": "Budget",
server/routers/aiProvider/createAiProvider.ts
+3 -1
View File
@@ -135,7 +135,9 @@ export async function createAiProvider(
.returning(); .returning();
return response<CreateOrEditAiProviderResponse>(res, { return response<CreateOrEditAiProviderResponse>(res, {
data: { provider: toPublicAiProvider(provider) }, data: {
provider: toPublicAiProvider(provider, { includeApiKey: true })
},
success: true, success: true,
error: false, error: false,
message: "AI provider created successfully", message: "AI provider created successfully",
server/routers/aiProvider/getAiProvider.ts
+3 -1
View File
@@ -67,7 +67,9 @@ export async function getAiProvider(
} }
return response<GetAiProviderResponse>(res, { return response<GetAiProviderResponse>(res, {
data: { provider: toPublicAiProvider(provider) }, data: {
provider: toPublicAiProvider(provider, { includeApiKey: true })
},
success: true, success: true,
error: false, error: false,
message: "AI provider retrieved successfully", message: "AI provider retrieved successfully",
server/routers/aiProvider/types.ts
+22 -2
View File
@@ -6,8 +6,12 @@ import {
type AiProviderRoutingMode, type AiProviderRoutingMode,
type AiProviderType type AiProviderType
} from "@server/lib/aiProviderDefaults"; } from "@server/lib/aiProviderDefaults";
import { decrypt } from "@server/lib/crypto";
import config from "@server/lib/config";
export type AiProviderPublic = Omit<AiProvider, "apiKey"> & { export type AiProviderPublic = Omit<AiProvider, "apiKey"> & {
/** Decrypted API key. Only included on get/create/update of a single provider. */
apiKey?: string | null;
effectiveUpstreamUrl: string | null; effectiveUpstreamUrl: string | null;
effectiveAuthType: AiProviderAuthType | null; effectiveAuthType: AiProviderAuthType | null;
}; };
@@ -36,8 +40,11 @@ export type CreateOrEditAiModelResponse = {
model: AiModel; model: AiModel;
}; };
export function toPublicAiProvider(provider: AiProvider): AiProviderPublic { export function toPublicAiProvider(
const { apiKey: _apiKey, ...rest } = provider; provider: AiProvider,
options?: { includeApiKey?: boolean }
): AiProviderPublic {
const { apiKey: encryptedApiKey, ...rest } = provider;
const resolved = resolveAiProviderConfig({ const resolved = resolveAiProviderConfig({
type: provider.type as AiProviderType, type: provider.type as AiProviderType,
upstreamUrl: provider.upstreamUrl, upstreamUrl: provider.upstreamUrl,
@@ -45,8 +52,21 @@ export function toPublicAiProvider(provider: AiProvider): AiProviderPublic {
routingMode: provider.routingMode as AiProviderRoutingMode | null routingMode: provider.routingMode as AiProviderRoutingMode | null
}); });
let apiKey: string | null | undefined;
if (options?.includeApiKey) {
if (encryptedApiKey) {
apiKey = decrypt(
encryptedApiKey,
config.getRawConfig().server.secret!
);
} else {
apiKey = null;
}
}
return { return {
...rest, ...rest,
...(options?.includeApiKey ? { apiKey } : {}),
effectiveUpstreamUrl: resolved.upstreamUrl, effectiveUpstreamUrl: resolved.upstreamUrl,
effectiveAuthType: resolved.authType effectiveAuthType: resolved.authType
}; };
server/routers/aiProvider/updateAiProvider.ts
+14 -2
View File
@@ -125,7 +125,10 @@ export async function updateAiProvider(
? body.upstreamUrl ? body.upstreamUrl
: existing.upstreamUrl; : existing.upstreamUrl;
const nextAuthType = const nextAuthType =
body.authType !== undefined ? body.authType : existing.authType; body.authType !== undefined
? body.authType
: (existing.authType ??
(providerType === "custom" ? "bearer" : null));
const validation = z const validation = z
.object({ .object({
@@ -178,6 +181,13 @@ export async function updateAiProvider(
} }
if (body.authType !== undefined) { if (body.authType !== undefined) {
updateData.authType = body.authType; updateData.authType = body.authType;
} else if (
providerType === "custom" &&
!existing.authType &&
nextAuthType
) {
// Backfill required authType for custom providers created without one
updateData.authType = nextAuthType;
} }
if (body.apiKey !== undefined) { if (body.apiKey !== undefined) {
@@ -193,7 +203,9 @@ export async function updateAiProvider(
.returning(); .returning();
return response<CreateOrEditAiProviderResponse>(res, { return response<CreateOrEditAiProviderResponse>(res, {
data: { provider: toPublicAiProvider(provider) }, data: {
provider: toPublicAiProvider(provider, { includeApiKey: true })
},
success: true, success: true,
error: false, error: false,
message: "AI provider updated successfully", message: "AI provider updated successfully",
server/routers/aiProvider/validation.ts
+1 -1
View File
@@ -75,7 +75,7 @@ export function refineProviderUpstreamFields(
}); });
} }
if (data.type === "custom" && routingMode === "url" && !data.authType) { if (data.type === "custom" && !data.authType) {
ctx.addIssue({ ctx.addIssue({
code: "custom", code: "custom",
message: "authType is required for custom providers", message: "authType is required for custom providers",
src/app/[orgId]/settings/ai-providers/[providerId]/authentication/page.tsx
+235
View File
@@ -0,0 +1,235 @@
"use client";
import {
SettingsContainer,
SettingsFormCell,
SettingsFormGrid,
SettingsSection,
SettingsSectionBody,
SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm,
SettingsSectionHeader,
SettingsSectionTitle
} from "@app/components/Settings";
import { Button } from "@app/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from "@app/components/ui/select";
import { useAiProviderContext } from "@app/hooks/useAiProviderContext";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import {
aiProviderFormSchema,
toAiProviderAuthPayload,
type AiProviderFormValues
} from "@app/lib/aiProviderFormSchema";
import { zodResolver } from "@hookform/resolvers/zod";
import type { AiProviderType } from "@server/lib/aiProviderDefaults";
import type { CreateOrEditAiProviderResponse } from "@server/routers/aiProvider/types";
import type { AxiosResponse } from "axios";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
export default function AiProviderAuthenticationPage() {
const { provider, updateProvider } = useAiProviderContext();
const { env } = useEnvContext();
const api = createApiClient({ env });
const router = useRouter();
const t = useTranslations();
const [saveLoading, setSaveLoading] = useState(false);
const form = useForm<AiProviderFormValues>({
resolver: zodResolver(aiProviderFormSchema),
defaultValues: {
name: provider.name,
type: provider.type as AiProviderType,
upstreamUrl: provider.upstreamUrl ?? "",
apiKey: provider.apiKey ?? "",
authType: (provider.authType as "bearer" | null) ?? "bearer",
routingMode: (provider.routingMode as "url" | "target") ?? "url",
skipTlsVerification: provider.skipTlsVerification,
budgetAmount: provider.budgetAmount,
budgetUnit: provider.budgetUnit as "usd" | "tokens" | null,
enabled: provider.enabled
}
});
const showAuthType = provider.type === "custom";
async function onSubmit(values: AiProviderFormValues) {
setSaveLoading(true);
try {
const res = await api.post<
AxiosResponse<CreateOrEditAiProviderResponse>
>(
`/ai-provider/${provider.providerId}`,
toAiProviderAuthPayload({
...values,
type: provider.type as AiProviderType
})
);
const updated = res.data.data.provider;
updateProvider(updated);
form.reset({
name: updated.name,
type: updated.type as AiProviderType,
upstreamUrl: updated.upstreamUrl ?? "",
apiKey: updated.apiKey ?? "",
authType: (updated.authType as "bearer" | null) ?? "bearer",
routingMode: (updated.routingMode as "url" | "target") ?? "url",
skipTlsVerification: updated.skipTlsVerification,
budgetAmount: updated.budgetAmount,
budgetUnit: updated.budgetUnit as "usd" | "tokens" | null,
enabled: updated.enabled
});
toast({
title: t("success"),
description: t("aiProviderUpdated")
});
router.refresh();
} catch (e) {
toast({
variant: "destructive",
title: t("aiProviderErrorUpdate"),
description: formatAxiosError(e, t("aiProviderErrorUpdate"))
});
} finally {
setSaveLoading(false);
}
}
return (
<SettingsContainer>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("aiProviderAuthSettings")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("aiProviderAuthSettingsDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
id="ai-provider-auth-form"
>
<SettingsFormGrid>
{showAuthType && (
<SettingsFormCell span="half">
<FormField
control={form.control}
name="authType"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"aiProviderAuthType"
)}
</FormLabel>
<Select
value={
field.value ??
"bearer"
}
onValueChange={
field.onChange
}
>
<FormControl>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="bearer">
{t(
"aiProviderAuthTypeBearer"
)}
</SelectItem>
</SelectContent>
</Select>
<FormDescription>
{t(
"aiProviderAuthTypeDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
)}
<SettingsFormCell span="half">
<FormField
control={form.control}
name="apiKey"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("aiProviderApiKey")}
</FormLabel>
<FormControl>
<Input
type="password"
autoComplete="new-password"
value={
field.value ??
""
}
onChange={
field.onChange
}
/>
</FormControl>
<FormDescription>
{t(
"aiProviderApiKeyDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
</SettingsFormGrid>
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
loading={saveLoading}
disabled={saveLoading}
form="ai-provider-auth-form"
>
{t("saveSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>
</SettingsContainer>
);
}
src/app/[orgId]/settings/ai-providers/[providerId]/configuration/page.tsx
+9 -423
View File
@@ -1,426 +1,12 @@
"use client"; import { redirect } from "next/navigation";
import { type Props = {
SettingsContainer, params: Promise<{ orgId: string; providerId: string }>;
SettingsFormCell, };
SettingsFormGrid,
SettingsSection,
SettingsSectionBody,
SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm,
SettingsSectionHeader,
SettingsSectionTitle
} from "@app/components/Settings";
import { StrategySelect } from "@app/components/StrategySelect";
import { SwitchInput } from "@app/components/SwitchInput";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { Button } from "@app/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from "@app/components/ui/select";
import { useAiProviderContext } from "@app/hooks/useAiProviderContext";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import {
aiProviderFormSchema,
showsUpstreamUrlField,
toAiProviderConfigurationPayload,
upstreamUrlRequired,
type AiProviderFormValues
} from "@app/lib/aiProviderFormSchema";
import { zodResolver } from "@hookform/resolvers/zod";
import type { AiProviderType } from "@server/lib/aiProviderDefaults";
import type { CreateOrEditAiProviderResponse } from "@server/routers/aiProvider/types";
import type { AxiosResponse } from "axios";
import { InfoIcon } from "lucide-react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
export default function AiProviderConfigurationPage() { export default async function AiProviderConfigurationRedirect({
const { provider, updateProvider } = useAiProviderContext(); params
const { env } = useEnvContext(); }: Props) {
const api = createApiClient({ env }); const { orgId, providerId } = await params;
const router = useRouter(); redirect(`/${orgId}/settings/ai-providers/${providerId}/network`);
const t = useTranslations();
const [saveLoading, setSaveLoading] = useState(false);
const form = useForm<AiProviderFormValues>({
resolver: zodResolver(aiProviderFormSchema),
defaultValues: {
name: provider.name,
type: provider.type as AiProviderType,
upstreamUrl: provider.upstreamUrl ?? "",
apiKey: "",
authType: (provider.authType as "bearer" | null) ?? "bearer",
routingMode: (provider.routingMode as "url" | "target") ?? "url",
skipTlsVerification: provider.skipTlsVerification,
budgetAmount: provider.budgetAmount,
budgetUnit: provider.budgetUnit as "usd" | "tokens" | null,
enabled: provider.enabled
}
});
const providerType = form.watch("type");
const routingMode = form.watch("routingMode");
const showUpstream = showsUpstreamUrlField(providerType, routingMode);
const requireUpstream = upstreamUrlRequired(providerType, routingMode);
const showRoutingMode = providerType === "custom";
const showAuthType =
providerType === "custom" && (routingMode ?? "url") === "url";
const showTargetNote =
providerType === "custom" && routingMode === "target";
async function onSubmit(values: AiProviderFormValues) {
setSaveLoading(true);
try {
const res = await api.post<
AxiosResponse<CreateOrEditAiProviderResponse>
>(
`/ai-provider/${provider.providerId}`,
toAiProviderConfigurationPayload({
...values,
type: provider.type as AiProviderType
})
);
const updated = res.data.data.provider;
updateProvider(updated);
form.reset({
name: updated.name,
type: updated.type as AiProviderType,
upstreamUrl: updated.upstreamUrl ?? "",
apiKey: "",
authType: (updated.authType as "bearer" | null) ?? "bearer",
routingMode: (updated.routingMode as "url" | "target") ?? "url",
skipTlsVerification: updated.skipTlsVerification,
budgetAmount: updated.budgetAmount,
budgetUnit: updated.budgetUnit as "usd" | "tokens" | null,
enabled: updated.enabled
});
toast({
title: t("success"),
description: t("aiProviderUpdated")
});
router.refresh();
} catch (e) {
toast({
variant: "destructive",
title: t("aiProviderErrorUpdate"),
description: formatAxiosError(e, t("aiProviderErrorUpdate"))
});
} finally {
setSaveLoading(false);
}
}
return (
<SettingsContainer>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("aiProviderConfiguration")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("aiProviderConfigurationDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
id="ai-provider-configuration-form"
>
<SettingsFormGrid>
{showRoutingMode && (
<SettingsFormCell span="full">
<FormField
control={form.control}
name="routingMode"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"aiProviderRoutingMode"
)}
</FormLabel>
<FormControl>
<StrategySelect
options={[
{
id: "url",
title: t(
"aiProviderRoutingModeUrl"
),
description:
t(
"aiProviderRoutingModeUrlDescription"
)
},
{
id: "target",
title: t(
"aiProviderRoutingModeTarget"
),
description:
t(
"aiProviderRoutingModeTargetDescription"
)
}
]}
value={
field.value ??
"url"
}
onChange={(
value
) => {
field.onChange(
value
);
if (
value ===
"target"
) {
form.setValue(
"upstreamUrl",
""
);
}
}}
/>
</FormControl>
<FormDescription>
{t(
"aiProviderRoutingModeDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
)}
{showTargetNote && (
<SettingsFormCell span="full">
<Alert variant="neutral">
<InfoIcon className="h-4 w-4" />
<AlertTitle>
{t(
"aiProviderRoutingModeTarget"
)}
</AlertTitle>
<AlertDescription>
{t(
"aiProviderRoutingModeTargetNote"
)}
</AlertDescription>
</Alert>
</SettingsFormCell>
)}
{showUpstream && (
<SettingsFormCell span="half">
<FormField
control={form.control}
name="upstreamUrl"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"aiProviderUpstreamUrl"
)}
{requireUpstream
? ""
: " (optional)"}
</FormLabel>
<FormControl>
<Input
autoComplete="off"
placeholder="https://"
value={
field.value ??
""
}
onChange={
field.onChange
}
/>
</FormControl>
<FormDescription>
{requireUpstream
? t(
"aiProviderUpstreamUrlDescription"
)
: t(
"aiProviderUpstreamUrlOptionalDescription"
)}
</FormDescription>
{provider.effectiveUpstreamUrl && (
<FormDescription>
{t(
"aiProviderEffectiveUpstreamUrl"
)}
{": "}
<span className="font-mono">
{
provider.effectiveUpstreamUrl
}
</span>
</FormDescription>
)}
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
)}
{showAuthType && (
<SettingsFormCell span="half">
<FormField
control={form.control}
name="authType"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"aiProviderAuthType"
)}
</FormLabel>
<Select
value={
field.value ??
"bearer"
}
onValueChange={
field.onChange
}
>
<FormControl>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="bearer">
{t(
"aiProviderAuthTypeBearer"
)}
</SelectItem>
</SelectContent>
</Select>
<FormDescription>
{t(
"aiProviderAuthTypeDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
)}
<SettingsFormCell span="half">
<FormField
control={form.control}
name="apiKey"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("aiProviderApiKey")}
</FormLabel>
<FormControl>
<Input
type="password"
autoComplete="new-password"
value={
field.value ??
""
}
onChange={
field.onChange
}
/>
</FormControl>
<FormDescription>
{provider.apiKeyLastChars
? `••••${provider.apiKeyLastChars}. ${t("aiProviderApiKeyDescription")}`
: t(
"aiProviderApiKeyDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
<SettingsFormCell span="half">
<FormField
control={form.control}
name="skipTlsVerification"
render={({ field }) => (
<FormItem>
<FormControl>
<SwitchInput
id="edit-skip-tls"
label={t(
"aiProviderSkipTlsVerification"
)}
description={t(
"aiProviderSkipTlsVerificationDescription"
)}
checked={
field.value ??
false
}
onCheckedChange={
field.onChange
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
</SettingsFormGrid>
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
loading={saveLoading}
disabled={saveLoading}
form="ai-provider-configuration-form"
>
{t("saveSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>
</SettingsContainer>
);
} }
src/app/[orgId]/settings/ai-providers/[providerId]/layout.tsx
+6 -2
View File
@@ -66,8 +66,12 @@ export default async function AiProviderLayout({ children, params }: Props) {
href: "/{orgId}/settings/ai-providers/{providerId}/general" href: "/{orgId}/settings/ai-providers/{providerId}/general"
}, },
{ {
title: t("aiProviderConfiguration"), title: t("aiProviderNetworkSettings"),
href: "/{orgId}/settings/ai-providers/{providerId}/configuration" href: "/{orgId}/settings/ai-providers/{providerId}/network"
},
{
title: t("aiProviderAuthSettings"),
href: "/{orgId}/settings/ai-providers/{providerId}/authentication"
} }
]; ];
src/app/[orgId]/settings/ai-providers/[providerId]/network/page.tsx
+362
View File
@@ -0,0 +1,362 @@
"use client";
import {
ProxyResourceTargetsForm,
type ProxyResourceTargetsFormHandle
} from "@app/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm";
import {
SettingsContainer,
SettingsFormCell,
SettingsFormGrid,
SettingsSection,
SettingsSectionBody,
SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm,
SettingsSectionHeader,
SettingsSectionTitle,
SettingsSubsectionDescription,
SettingsSubsectionHeader,
SettingsSubsectionTitle
} from "@app/components/Settings";
import { StrategySelect } from "@app/components/StrategySelect";
import { SwitchInput } from "@app/components/SwitchInput";
import { Button } from "@app/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import { useAiProviderContext } from "@app/hooks/useAiProviderContext";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import {
aiProviderFormSchema,
showsUpstreamUrlField,
toAiProviderNetworkPayload,
upstreamUrlRequired,
type AiProviderFormValues
} from "@app/lib/aiProviderFormSchema";
import { aiProviderQueries } from "@app/lib/queries";
import { zodResolver } from "@hookform/resolvers/zod";
import type { AiProviderType } from "@server/lib/aiProviderDefaults";
import type { CreateOrEditAiProviderResponse } from "@server/routers/aiProvider/types";
import { useQuery } from "@tanstack/react-query";
import type { AxiosResponse } from "axios";
import { useTranslations } from "next-intl";
import { useParams, useRouter } from "next/navigation";
import { useRef, useState } from "react";
import { useForm } from "react-hook-form";
export default function AiProviderNetworkPage() {
const { provider, updateProvider } = useAiProviderContext();
const { env } = useEnvContext();
const api = createApiClient({ env });
const params = useParams();
const orgId = params.orgId as string;
const router = useRouter();
const t = useTranslations();
const [saveLoading, setSaveLoading] = useState(false);
const targetsFormRef = useRef<ProxyResourceTargetsFormHandle>(null);
const form = useForm<AiProviderFormValues>({
resolver: zodResolver(aiProviderFormSchema),
defaultValues: {
name: provider.name,
type: provider.type as AiProviderType,
upstreamUrl: provider.upstreamUrl ?? "",
apiKey: "",
authType: (provider.authType as "bearer" | null) ?? "bearer",
routingMode: (provider.routingMode as "url" | "target") ?? "url",
skipTlsVerification: provider.skipTlsVerification,
budgetAmount: provider.budgetAmount,
budgetUnit: provider.budgetUnit as "usd" | "tokens" | null,
enabled: provider.enabled
}
});
const providerType = form.watch("type");
const routingMode = form.watch("routingMode");
const showUpstream = showsUpstreamUrlField(providerType, routingMode);
const requireUpstream = upstreamUrlRequired(providerType, routingMode);
const showRoutingMode = providerType === "custom";
const isTargetModeSelected = routingMode === "target";
const isTargetModeSaved =
provider.type === "custom" && provider.routingMode === "target";
const showTargetsForm = showRoutingMode && isTargetModeSelected;
const { data: remoteTargets = [], isLoading: isLoadingTargets } = useQuery({
...aiProviderQueries.providerTargets({
providerId: provider.providerId
}),
enabled: isTargetModeSaved
});
async function onSubmit(values: AiProviderFormValues) {
setSaveLoading(true);
try {
const res = await api.post<
AxiosResponse<CreateOrEditAiProviderResponse>
>(
`/ai-provider/${provider.providerId}`,
toAiProviderNetworkPayload({
...values,
type: provider.type as AiProviderType
})
);
const updated = res.data.data.provider;
updateProvider(updated);
form.reset({
name: updated.name,
type: updated.type as AiProviderType,
upstreamUrl: updated.upstreamUrl ?? "",
apiKey: "",
authType: (updated.authType as "bearer" | null) ?? "bearer",
routingMode: (updated.routingMode as "url" | "target") ?? "url",
skipTlsVerification: updated.skipTlsVerification,
budgetAmount: updated.budgetAmount,
budgetUnit: updated.budgetUnit as "usd" | "tokens" | null,
enabled: updated.enabled
});
if (values.routingMode === "target" && targetsFormRef.current) {
const targetsSaved = await targetsFormRef.current.save({
silent: true
});
if (!targetsSaved) {
return;
}
}
toast({
title: t("success"),
description: t("aiProviderUpdated")
});
router.refresh();
} catch (e) {
toast({
variant: "destructive",
title: t("aiProviderErrorUpdate"),
description: formatAxiosError(e, t("aiProviderErrorUpdate"))
});
} finally {
setSaveLoading(false);
}
}
return (
<SettingsContainer>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("aiProviderNetworkSettings")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("aiProviderNetworkSettingsDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
id="ai-provider-network-form"
>
<SettingsFormGrid>
{showRoutingMode && (
<SettingsFormCell span="full">
<FormField
control={form.control}
name="routingMode"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"aiProviderRoutingMode"
)}
</FormLabel>
<FormControl>
<StrategySelect
cols={2}
options={[
{
id: "url",
title: t(
"aiProviderRoutingModeUrl"
),
description:
t(
"aiProviderRoutingModeUrlDescription"
)
},
{
id: "target",
title: t(
"aiProviderRoutingModeTarget"
),
description:
t(
"aiProviderRoutingModeTargetDescription"
)
}
]}
value={
field.value ??
"url"
}
onChange={(
value
) => {
field.onChange(
value
);
if (
value ===
"target"
) {
form.setValue(
"upstreamUrl",
""
);
}
}}
/>
</FormControl>
<FormDescription>
{t(
"aiProviderRoutingModeDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
)}
{showUpstream && (
<SettingsFormCell span="half">
<FormField
control={form.control}
name="upstreamUrl"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"aiProviderUpstreamUrl"
)}
{requireUpstream
? ""
: " (optional)"}
</FormLabel>
<FormControl>
<Input
autoComplete="off"
placeholder="https://"
value={
field.value ??
""
}
onChange={
field.onChange
}
/>
</FormControl>
<FormDescription>
{requireUpstream
? t(
"aiProviderUpstreamUrlDescription"
)
: t(
"aiProviderUpstreamUrlOptionalDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
)}
<SettingsFormCell span="half">
<FormField
control={form.control}
name="skipTlsVerification"
render={({ field }) => (
<FormItem>
<FormControl>
<SwitchInput
id="edit-skip-tls"
label={t(
"aiProviderSkipTlsVerification"
)}
description={t(
"aiProviderSkipTlsVerificationDescription"
)}
checked={
field.value ??
false
}
onCheckedChange={
field.onChange
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
</SettingsFormGrid>
</form>
</Form>
</SettingsSectionForm>
{showTargetsForm &&
(!isTargetModeSaved || !isLoadingTargets) && (
<div className="mt-6 space-y-4">
<SettingsSubsectionHeader>
<SettingsSubsectionTitle>
{t("targets")}
</SettingsSubsectionTitle>
<SettingsSubsectionDescription>
{t("targetsDescription")}
</SettingsSubsectionDescription>
</SettingsSubsectionHeader>
<ProxyResourceTargetsForm
ref={targetsFormRef}
orgId={orgId}
isHttp
providerId={provider.providerId}
initialTargets={
isTargetModeSaved ? remoteTargets : []
}
allowedMethods={["http", "https"]}
emptyMessage={t("aiProviderTargetNoOne")}
embedded
hideSaveButton
/>
</div>
)}
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
loading={saveLoading}
disabled={saveLoading}
form="ai-provider-network-form"
>
{t("saveSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>
</SettingsContainer>
);
}
src/app/[orgId]/settings/ai-providers/create/page.tsx
+213 -114
View File
@@ -1,5 +1,9 @@
"use client"; "use client";
import {
ProxyResourceTargetsForm,
type LocalTarget
} from "@app/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm";
import { import {
SettingsContainer, SettingsContainer,
SettingsFormCell, SettingsFormCell,
@@ -7,16 +11,17 @@ import {
SettingsSection, SettingsSection,
SettingsSectionBody, SettingsSectionBody,
SettingsSectionDescription, SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm, SettingsSectionForm,
SettingsSectionHeader, SettingsSectionHeader,
SettingsSectionTitle SettingsSectionTitle,
SettingsSubsectionDescription,
SettingsSubsectionHeader,
SettingsSubsectionTitle
} from "@app/components/Settings"; } from "@app/components/Settings";
import HeaderTitle from "@app/components/SettingsSectionTitle"; import HeaderTitle from "@app/components/SettingsSectionTitle";
import { AiProviderTypeSelect } from "@app/components/AiProviderTypeSelect"; import { AiProviderTypeSelect } from "@app/components/AiProviderTypeSelect";
import { StrategySelect } from "@app/components/StrategySelect"; import { StrategySelect } from "@app/components/StrategySelect";
import { SwitchInput } from "@app/components/SwitchInput"; import { SwitchInput } from "@app/components/SwitchInput";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { import {
Form, Form,
@@ -39,7 +44,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api"; import { createApiClient, formatAxiosError } from "@app/lib/api";
import { import {
aiProviderFormSchema, aiProviderCreateFormSchema,
emptyUpstreamForType, emptyUpstreamForType,
showsUpstreamUrlField, showsUpstreamUrlField,
toAiProviderCreatePayload, toAiProviderCreatePayload,
@@ -49,10 +54,9 @@ import {
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import type { CreateOrEditAiProviderResponse } from "@server/routers/aiProvider/types"; import type { CreateOrEditAiProviderResponse } from "@server/routers/aiProvider/types";
import type { AxiosResponse } from "axios"; import type { AxiosResponse } from "axios";
import { InfoIcon } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useState } from "react"; import { useRef, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
export default function CreateAiProviderPage() { export default function CreateAiProviderPage() {
@@ -63,9 +67,10 @@ export default function CreateAiProviderPage() {
const router = useRouter(); const router = useRouter();
const t = useTranslations(); const t = useTranslations();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const targetsRef = useRef<LocalTarget[]>([]);
const form = useForm<AiProviderFormValues>({ const form = useForm<AiProviderFormValues>({
resolver: zodResolver(aiProviderFormSchema), resolver: zodResolver(aiProviderCreateFormSchema),
defaultValues: { defaultValues: {
name: "", name: "",
type: "openai", type: "openai",
@@ -86,26 +91,101 @@ export default function CreateAiProviderPage() {
const showUpstream = showsUpstreamUrlField(providerType, routingMode); const showUpstream = showsUpstreamUrlField(providerType, routingMode);
const requireUpstream = upstreamUrlRequired(providerType, routingMode); const requireUpstream = upstreamUrlRequired(providerType, routingMode);
const showRoutingMode = providerType === "custom"; const showRoutingMode = providerType === "custom";
const showAuthType = const showAuthType = providerType === "custom";
providerType === "custom" && (routingMode ?? "url") === "url"; const showTargets = providerType === "custom" && routingMode === "target";
const showTargetNote =
providerType === "custom" && routingMode === "target"; async function createTargets(
providerId: number,
localTargets: LocalTarget[]
) {
for (const target of localTargets) {
const data = {
ip: target.ip,
port: target.port,
method: target.method,
enabled: target.enabled,
siteId: target.siteId,
hcEnabled: target.hcEnabled,
hcPath: target.hcPath || null,
hcMethod: target.hcMethod || null,
hcInterval: target.hcInterval || null,
hcTimeout: target.hcTimeout || null,
hcHeaders: target.hcHeaders || null,
hcScheme: target.hcScheme || null,
hcHostname: target.hcHostname || null,
hcPort: target.hcPort || null,
hcFollowRedirects: target.hcFollowRedirects || null,
hcStatus: target.hcStatus || null,
hcUnhealthyInterval: target.hcUnhealthyInterval || null,
hcMode: target.hcMode || null,
hcTlsServerName: target.hcTlsServerName,
hcHealthyThreshold: target.hcHealthyThreshold || null,
hcUnhealthyThreshold: target.hcUnhealthyThreshold || null,
path: target.path,
pathMatchType: target.pathMatchType,
rewritePath: target.rewritePath,
rewritePathType: target.rewritePathType,
priority: target.priority
};
await api.put(`/ai-provider/${providerId}/target`, data);
}
}
async function onSubmit(values: AiProviderFormValues) { async function onSubmit(values: AiProviderFormValues) {
const targets = targetsRef.current;
if (showTargets) {
const invalidTargets = targets.filter(
(target) =>
!target.ip ||
target.ip.trim() === "" ||
!target.port ||
target.port <= 0 ||
isNaN(target.port)
);
if (invalidTargets.length > 0) {
toast({
variant: "destructive",
title: t("targetErrorInvalidIp"),
description: t("targetErrorInvalidIpDescription")
});
return;
}
}
setLoading(true); setLoading(true);
try { try {
const res = await api.put< const res = await api.put<
AxiosResponse<CreateOrEditAiProviderResponse> AxiosResponse<CreateOrEditAiProviderResponse>
>(`/org/${orgId}/ai-provider`, toAiProviderCreatePayload(values)); >(`/org/${orgId}/ai-provider`, toAiProviderCreatePayload(values));
const providerId = res.data.data.provider.providerId;
if (showTargets && targets.length > 0) {
try {
await createTargets(providerId, targets);
} catch (e) {
toast({
variant: "destructive",
title: t("aiProviderErrorCreate"),
description: formatAxiosError(
e,
t("aiProviderErrorCreate")
)
});
router.push(
`/${orgId}/settings/ai-providers/${providerId}/network`
);
return;
}
}
toast({ toast({
title: t("success"), title: t("success"),
description: t("aiProviderCreated") description: t("aiProviderCreated")
}); });
router.push( router.push(`/${orgId}/settings/ai-providers/${providerId}`);
`/${orgId}/settings/ai-providers/${res.data.data.provider.providerId}`
);
} catch (e) { } catch (e) {
toast({ toast({
variant: "destructive", variant: "destructive",
@@ -134,6 +214,7 @@ export default function CreateAiProviderPage() {
</Button> </Button>
</div> </div>
<Form {...form}>
<SettingsContainer> <SettingsContainer>
<SettingsSection> <SettingsSection>
<SettingsSectionHeader> <SettingsSectionHeader>
@@ -147,42 +228,7 @@ export default function CreateAiProviderPage() {
<SettingsSectionBody> <SettingsSectionBody>
<SettingsSectionForm variant="half"> <SettingsSectionForm variant="half">
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
id="create-ai-provider-form"
>
<SettingsFormGrid> <SettingsFormGrid>
<SettingsFormCell span="full">
<FormField
control={form.control}
name="enabled"
render={({ field }) => (
<FormItem>
<FormControl>
<SwitchInput
id="enabled"
label={t(
"aiProviderEnabled"
)}
description={t(
"aiProviderEnabledDescription"
)}
checked={
field.value ??
true
}
onCheckedChange={
field.onChange
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
<SettingsFormCell span="half"> <SettingsFormCell span="half">
<FormField <FormField
control={form.control} control={form.control}
@@ -211,15 +257,11 @@ export default function CreateAiProviderPage() {
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel>
{t( {t("aiProviderType")}
"aiProviderType"
)}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<AiProviderTypeSelect <AiProviderTypeSelect
value={ value={field.value}
field.value
}
onChange={( onChange={(
value value
) => { ) => {
@@ -240,6 +282,8 @@ export default function CreateAiProviderPage() {
"routingMode", "routingMode",
"url" "url"
); );
targetsRef.current =
[];
} }
}} }}
/> />
@@ -249,7 +293,24 @@ export default function CreateAiProviderPage() {
)} )}
/> />
</SettingsFormCell> </SettingsFormCell>
</SettingsFormGrid>
</SettingsSectionForm>
</SettingsSectionBody>
</SettingsSection>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("aiProviderNetworkSettings")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("aiProviderNetworkSettingsDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<SettingsFormGrid>
{showRoutingMode && ( {showRoutingMode && (
<SettingsFormCell span="full"> <SettingsFormCell span="full">
<FormField <FormField
@@ -264,6 +325,7 @@ export default function CreateAiProviderPage() {
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<StrategySelect <StrategySelect
cols={2}
options={[ options={[
{ {
id: "url", id: "url",
@@ -304,6 +366,9 @@ export default function CreateAiProviderPage() {
"upstreamUrl", "upstreamUrl",
"" ""
); );
} else {
targetsRef.current =
[];
} }
}} }}
/> />
@@ -320,24 +385,6 @@ export default function CreateAiProviderPage() {
</SettingsFormCell> </SettingsFormCell>
)} )}
{showTargetNote && (
<SettingsFormCell span="full">
<Alert variant="neutral">
<InfoIcon className="h-4 w-4" />
<AlertTitle>
{t(
"aiProviderRoutingModeTarget"
)}
</AlertTitle>
<AlertDescription>
{t(
"aiProviderRoutingModeTargetNote"
)}
</AlertDescription>
</Alert>
</SettingsFormCell>
)}
{showUpstream && ( {showUpstream && (
<SettingsFormCell span="half"> <SettingsFormCell span="half">
<FormField <FormField
@@ -382,6 +429,79 @@ export default function CreateAiProviderPage() {
</SettingsFormCell> </SettingsFormCell>
)} )}
<SettingsFormCell span="half">
<FormField
control={form.control}
name="skipTlsVerification"
render={({ field }) => (
<FormItem>
<FormControl>
<SwitchInput
id="skip-tls"
label={t(
"aiProviderSkipTlsVerification"
)}
description={t(
"aiProviderSkipTlsVerificationDescription"
)}
checked={
field.value ??
false
}
onCheckedChange={
field.onChange
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
</SettingsFormGrid>
</SettingsSectionForm>
{showTargets && (
<div className="mt-6 space-y-4">
<SettingsSubsectionHeader>
<SettingsSubsectionTitle>
{t("targets")}
</SettingsSubsectionTitle>
<SettingsSubsectionDescription>
{t("targetsDescription")}
</SettingsSubsectionDescription>
</SettingsSubsectionHeader>
<ProxyResourceTargetsForm
orgId={orgId}
isHttp
onChange={(nextTargets) => {
targetsRef.current = nextTargets;
}}
allowedMethods={["http", "https"]}
emptyMessage={t(
"aiProviderTargetNoOne"
)}
embedded
hideSaveButton
/>
</div>
)}
</SettingsSectionBody>
</SettingsSection>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("aiProviderAuthSettings")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("aiProviderAuthSettingsDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<SettingsFormGrid>
{showAuthType && ( {showAuthType && (
<SettingsFormCell span="half"> <SettingsFormCell span="half">
<FormField <FormField
@@ -435,9 +555,7 @@ export default function CreateAiProviderPage() {
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel>
{t( {t("aiProviderApiKey")}
"aiProviderApiKey"
)}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<Input <Input
@@ -462,53 +580,34 @@ export default function CreateAiProviderPage() {
)} )}
/> />
</SettingsFormCell> </SettingsFormCell>
<SettingsFormCell span="half">
<FormField
control={form.control}
name="skipTlsVerification"
render={({ field }) => (
<FormItem>
<FormControl>
<SwitchInput
id="skip-tls"
label={t(
"aiProviderSkipTlsVerification"
)}
description={t(
"aiProviderSkipTlsVerificationDescription"
)}
checked={
field.value ??
false
}
onCheckedChange={
field.onChange
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
</SettingsFormGrid> </SettingsFormGrid>
</form>
</Form>
</SettingsSectionForm> </SettingsSectionForm>
</SettingsSectionBody> </SettingsSectionBody>
<SettingsSectionFooter> </SettingsSection>
</SettingsContainer>
<div className="flex justify-end space-x-2 mt-8">
<Button <Button
type="submit" type="button"
variant="outline"
onClick={() =>
router.push(`/${orgId}/settings/ai-providers`)
}
>
{t("cancel")}
</Button>
<Button
type="button"
loading={loading} loading={loading}
disabled={loading} disabled={loading}
form="create-ai-provider-form" onClick={() => {
form.handleSubmit(onSubmit)();
}}
> >
{t("create")} {t("create")}
</Button> </Button>
</SettingsSectionFooter> </div>
</SettingsSection> </Form>
</SettingsContainer>
</> </>
); );
} }
src/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm.tsx
+122 -45
View File
@@ -42,7 +42,7 @@ import { toast } from "@app/hooks/useToast";
import { createApiClient } from "@app/lib/api"; import { createApiClient } from "@app/lib/api";
import { formatAxiosError } from "@app/lib/api/formatAxiosError"; import { formatAxiosError } from "@app/lib/api/formatAxiosError";
import { DockerManager, DockerState } from "@app/lib/docker"; import { DockerManager, DockerState } from "@app/lib/docker";
import { orgQueries, resourceQueries } from "@app/lib/queries"; import { orgQueries, resourceQueries, aiProviderQueries } from "@app/lib/queries";
import { build } from "@server/build"; import { build } from "@server/build";
import { type GetResourceResponse } from "@server/routers/resource"; import { type GetResourceResponse } from "@server/routers/resource";
import { CreateTargetResponse } from "@server/routers/target"; import { CreateTargetResponse } from "@server/routers/target";
@@ -63,9 +63,11 @@ import { ExternalLink, Info, Plus } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { import {
forwardRef,
useActionState, useActionState,
useCallback, useCallback,
useEffect, useEffect,
useImperativeHandle,
useMemo, useMemo,
useState useState
} from "react"; } from "react";
@@ -80,27 +82,52 @@ export type LocalTarget = Omit<
"protocol" "protocol"
>; >;
interface ProxyResourceTargetsFormProps { export type ProxyResourceTargetsFormHandle = {
save: (options?: { silent?: boolean }) => Promise<boolean>;
};
type ProxyResourceTargetsFormProps = {
orgId: string; orgId: string;
isHttp: boolean; isHttp: boolean;
initialTargets?: LocalTarget[]; initialTargets?: LocalTarget[];
/** Edit mode: when provided, shows a save button and polls for health status */ /** Edit mode for a public resource: save button + health polling */
resource?: GetResourceResponse; resource?: GetResourceResponse;
/** Edit mode for an AI provider: save button + health polling */
providerId?: number;
updateResource?: ResourceContextType["updateResource"]; updateResource?: ResourceContextType["updateResource"];
/** Create mode: called whenever the targets list changes */ /** Create mode: called whenever the targets list changes */
onChange?: (targets: LocalTarget[]) => void; onChange?: (targets: LocalTarget[]) => void;
} /** HTTP method options for address selector. Defaults to http/https/h2c. */
allowedMethods?: ("http" | "https" | "h2c")[];
emptyMessage?: string;
/** Render table without its own SettingsSection wrapper */
embedded?: boolean;
/** Hide the built-in save button (use ref.save from parent) */
hideSaveButton?: boolean;
};
export function ProxyResourceTargetsForm({ export const ProxyResourceTargetsForm = forwardRef<
ProxyResourceTargetsFormHandle,
ProxyResourceTargetsFormProps
>(function ProxyResourceTargetsForm(
{
orgId, orgId,
isHttp, isHttp,
initialTargets = [], initialTargets = [],
resource, resource,
providerId,
updateResource, updateResource,
onChange onChange,
}: ProxyResourceTargetsFormProps) { allowedMethods = ["http", "https", "h2c"],
emptyMessage,
embedded = false,
hideSaveButton = false
},
ref
) {
const t = useTranslations(); const t = useTranslations();
const api = createApiClient(useEnvContext()); const api = createApiClient(useEnvContext());
const isEditMode = !!resource || !!providerId;
const [targets, setTargets] = useState<LocalTarget[]>(initialTargets); const [targets, setTargets] = useState<LocalTarget[]>(initialTargets);
const [targetsToRemove, setTargetsToRemove] = useState<number[]>([]); const [targetsToRemove, setTargetsToRemove] = useState<number[]>([]);
@@ -111,7 +138,7 @@ export function ProxyResourceTargetsForm({
}, [targets]); }, [targets]);
// Poll health status only in edit mode // Poll health status only in edit mode
const { data: polledTargets } = useQuery({ const { data: polledResourceTargets } = useQuery({
...resourceQueries.resourceTargets({ ...resourceQueries.resourceTargets({
resourceId: resource?.resourceId ?? 0 resourceId: resource?.resourceId ?? 0
}), }),
@@ -119,6 +146,18 @@ export function ProxyResourceTargetsForm({
enabled: !!resource enabled: !!resource
}); });
const { data: polledProviderTargets } = useQuery({
...aiProviderQueries.providerTargets({
providerId: providerId ?? 0
}),
refetchInterval: 10_000,
enabled: !!providerId
});
const polledTargets = providerId
? polledProviderTargets
: polledResourceTargets;
useEffect(() => { useEffect(() => {
if (!polledTargets) return; if (!polledTargets) return;
setTargets((prev) => setTargets((prev) =>
@@ -427,6 +466,7 @@ export function ProxyResourceTargetsForm({
isHttp={isHttp} isHttp={isHttp}
proxyTarget={row.original} proxyTarget={row.original}
updateTarget={updateTarget} updateTarget={updateTarget}
allowedMethods={allowedMethods}
/> />
); );
}, },
@@ -576,16 +616,22 @@ export function ProxyResourceTargetsForm({
refreshContainersForSite, refreshContainersForSite,
openHealthCheckDialog, openHealthCheckDialog,
removeTarget, removeTarget,
allowedMethods,
t t
]); ]);
function addNewTarget() { function addNewTarget() {
const defaultMethod = providerId
? (allowedMethods[0] ?? "https")
: isHttp
? "http"
: null;
const newTarget: LocalTarget = { const newTarget: LocalTarget = {
targetId: -Date.now(), targetId: -Date.now(),
ip: "", ip: "",
mode: ((resource?.mode as LocalTarget["mode"]) ?? mode: ((resource?.mode as LocalTarget["mode"]) ??
(isHttp ? "http" : "tcp")) as LocalTarget["mode"], (isHttp ? "http" : "tcp")) as LocalTarget["mode"],
method: isHttp ? "http" : null, method: defaultMethod,
port: 0, port: 0,
siteId: sites.length > 0 ? sites[0].siteId : 0, siteId: sites.length > 0 ? sites[0].siteId : 0,
siteName: sites.length > 0 ? sites[0].name : "", siteName: sites.length > 0 ? sites[0].name : "",
@@ -595,8 +641,8 @@ export function ProxyResourceTargetsForm({
rewritePathType: null, rewritePathType: null,
priority: 100, priority: 100,
enabled: true, enabled: true,
resourceId: resource?.resourceId ?? 0, resourceId: resource?.resourceId ?? null,
providerId: null, providerId: providerId ?? null,
hcEnabled: false, hcEnabled: false,
hcPath: null, hcPath: null,
hcMethod: null, hcMethod: null,
@@ -671,10 +717,16 @@ export function ProxyResourceTargetsForm({
} }
}, [isAdvancedMode]); }, [isAdvancedMode]);
const [, formAction, isSubmitting] = useActionState(saveTargets, null); const [, formAction, isSubmitting] = useActionState(
async () => {
await saveTargets();
return null;
},
null
);
const addTargetButton = ( const addTargetButton = (
<Button onClick={addNewTarget} variant="outline"> <Button type="button" onClick={addNewTarget} variant="outline">
<Plus className="h-4 w-4 mr-2" /> <Plus className="h-4 w-4 mr-2" />
{t("addTarget")} {t("addTarget")}
</Button> </Button>
@@ -682,8 +734,8 @@ export function ProxyResourceTargetsForm({
const hasTargets = targets.length > 0; const hasTargets = targets.length > 0;
async function saveTargets() { async function saveTargets(options?: { silent?: boolean }) {
if (!resource) return; if (!isEditMode) return true;
const targetsWithInvalidFields = targets.filter( const targetsWithInvalidFields = targets.filter(
(target) => (target) =>
@@ -699,7 +751,7 @@ export function ProxyResourceTargetsForm({
title: t("targetErrorInvalidIp"), title: t("targetErrorInvalidIp"),
description: t("targetErrorInvalidIpDescription") description: t("targetErrorInvalidIpDescription")
}); });
return; return false;
} }
try { try {
@@ -743,9 +795,12 @@ export function ProxyResourceTargetsForm({
} }
if (target.new) { if (target.new) {
const createPath = providerId
? `/ai-provider/${providerId}/target`
: `/resource/${resource!.resourceId}/target`;
const res = await api.put< const res = await api.put<
AxiosResponse<CreateTargetResponse> AxiosResponse<CreateTargetResponse>
>(`/resource/${resource.resourceId}/target`, data); >(createPath, data);
target.targetId = res.data.data.targetId; target.targetId = res.data.data.targetId;
target.new = false; target.new = false;
} else if (target.updated) { } else if (target.updated) {
@@ -754,6 +809,7 @@ export function ProxyResourceTargetsForm({
} }
} }
if (!options?.silent) {
toast({ toast({
title: title:
targets.length === 0 targets.length === 0
@@ -764,14 +820,22 @@ export function ProxyResourceTargetsForm({
? t("targetTargetsClearedDescription") ? t("targetTargetsClearedDescription")
: t("settingsUpdatedDescription") : t("settingsUpdatedDescription")
}); });
}
setTargetsToRemove([]); setTargetsToRemove([]);
router.refresh(); router.refresh();
if (providerId) {
await queryClient.invalidateQueries(
aiProviderQueries.providerTargets({ providerId })
);
} else if (resource) {
await queryClient.invalidateQueries( await queryClient.invalidateQueries(
resourceQueries.resourceTargets({ resourceQueries.resourceTargets({
resourceId: resource.resourceId resourceId: resource.resourceId
}) })
); );
}
return true;
} catch (err) { } catch (err) {
console.error(err); console.error(err);
toast({ toast({
@@ -782,19 +846,22 @@ export function ProxyResourceTargetsForm({
t("settingsErrorUpdateDescription") t("settingsErrorUpdateDescription")
) )
}); });
return false;
} }
} }
return ( useImperativeHandle(ref, () => ({
save: saveTargets
}));
const advancedModeToggleId = providerId
? `advanced-mode-toggle-provider-${providerId}`
: resource
? `advanced-mode-toggle-resource-${resource.resourceId}`
: "advanced-mode-toggle";
const targetsTable = (
<> <>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>{t("targets")}</SettingsSectionTitle>
<SettingsSectionDescription>
{t("targetsDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
@@ -819,8 +886,7 @@ export function ProxyResourceTargetsForm({
{header.isPlaceholder {header.isPlaceholder
? null ? null
: flexRender( : flexRender(
header.column header.column.columnDef
.columnDef
.header, .header,
header.getContext() header.getContext()
)} )}
@@ -834,15 +900,11 @@ export function ProxyResourceTargetsForm({
{table.getRowModel().rows?.length ? ( {table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => ( table.getRowModel().rows.map((row) => (
<TableRow key={row.id}> <TableRow key={row.id}>
{row {row.getVisibleCells().map((cell) => {
.getVisibleCells()
.map((cell) => {
const isActionsColumn = const isActionsColumn =
cell.column.id === cell.column.id === "actions";
"actions";
const isSiteColumn = const isSiteColumn =
cell.column.id === cell.column.id === "site";
"site";
return ( return (
<TableCell <TableCell
key={cell.id} key={cell.id}
@@ -855,9 +917,7 @@ export function ProxyResourceTargetsForm({
} }
> >
{flexRender( {flexRender(
cell.column cell.column.columnDef.cell,
.columnDef
.cell,
cell.getContext() cell.getContext()
)} )}
</TableCell> </TableCell>
@@ -868,7 +928,7 @@ export function ProxyResourceTargetsForm({
) : ( ) : (
<DataTableEmptyState <DataTableEmptyState
colSpan={columns.length} colSpan={columns.length}
message={t("targetNoOne")} message={emptyMessage ?? t("targetNoOne")}
action={addTargetButton} action={addTargetButton}
/> />
)} )}
@@ -881,12 +941,12 @@ export function ProxyResourceTargetsForm({
{addTargetButton} {addTargetButton}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Switch <Switch
id="advanced-mode-toggle" id={advancedModeToggleId}
checked={isAdvancedMode} checked={isAdvancedMode}
onCheckedChange={setIsAdvancedMode} onCheckedChange={setIsAdvancedMode}
/> />
<label <label
htmlFor="advanced-mode-toggle" htmlFor={advancedModeToggleId}
className="text-sm" className="text-sm"
> >
{t("advancedMode")} {t("advancedMode")}
@@ -912,10 +972,26 @@ export function ProxyResourceTargetsForm({
. .
</p> </p>
)} )}
</SettingsSectionBody> </>
);
{/* Save button — only shown in edit mode */} return (
{resource && ( <>
{embedded ? (
<div className="space-y-4">{targetsTable}</div>
) : (
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("targets")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("targetsDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>{targetsTable}</SettingsSectionBody>
{isEditMode && !hideSaveButton && (
<form className="self-end mt-4" action={formAction}> <form className="self-end mt-4" action={formAction}>
<Button <Button
disabled={isSubmitting} disabled={isSubmitting}
@@ -927,6 +1003,7 @@ export function ProxyResourceTargetsForm({
</form> </form>
)} )}
</SettingsSection> </SettingsSection>
)}
{selectedTargetForHealthCheck && ( {selectedTargetForHealthCheck && (
<HealthCheckCredenza <HealthCheckCredenza
@@ -987,4 +1064,4 @@ export function ProxyResourceTargetsForm({
)} )}
</> </>
); );
} });
src/app/navigation.tsx
+4 -3
View File
@@ -31,6 +31,7 @@ import {
TicketCheck, TicketCheck,
Unplug, Unplug,
User, User,
UserCheck,
UserCog, UserCog,
Users, Users,
Waypoints Waypoints
@@ -176,7 +177,7 @@ export const orgNavSections = (
{ {
title: "sidebarApprovals", title: "sidebarApprovals",
href: "/{orgId}/settings/access/approvals", href: "/{orgId}/settings/access/approvals",
icon: <UserCog className="size-4 flex-none" /> icon: <UserCheck className="size-4 flex-none" />
} }
] ]
: []), : []),
@@ -188,7 +189,7 @@ export const orgNavSections = (
] ]
}, },
{ {
heading: "sidebarAi", heading: "sidebarAiGateway",
items: [ items: [
{ {
title: "sidebarAiProviders", title: "sidebarAiProviders",
@@ -483,7 +484,7 @@ export const commandBarNavSections = (
] ]
}, },
{ {
heading: "sidebarAi", heading: "sidebarAiGateway",
items: [ items: [
{ {
title: "commandAiProviders", title: "commandAiProviders",
src/components/AiProviderTypeSelect.tsx
+3 -9
View File
@@ -83,20 +83,14 @@ export function AiProviderTypeSelect({
aria-expanded={open} aria-expanded={open}
disabled={disabled} disabled={disabled}
className={cn( className={cn(
"w-full justify-between font-normal h-auto min-h-10 py-2", "w-full justify-between",
!selected && "text-muted-foreground",
className className
)} )}
> >
<div className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left"> <span className="truncate text-left">
<span className="truncate">
{selected?.title ?? t("noneSelected")} {selected?.title ?? t("noneSelected")}
</span> </span>
{selected?.description && (
<span className="text-muted-foreground text-xs leading-snug truncate w-full">
{selected.description}
</span>
)}
</div>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
src/components/resource-target-address-item.tsx
+9 -1
View File
@@ -133,12 +133,14 @@ export type ResourceTargetAddressItemProps = {
updateTarget: (targetId: number, data: Partial<LocalTarget>) => void; updateTarget: (targetId: number, data: Partial<LocalTarget>) => void;
proxyTarget: LocalTarget; proxyTarget: LocalTarget;
isHttp: boolean; isHttp: boolean;
allowedMethods?: ("http" | "https" | "h2c")[];
}; };
export function ResourceTargetAddressItem({ export function ResourceTargetAddressItem({
updateTarget, updateTarget,
proxyTarget, proxyTarget,
isHttp isHttp,
allowedMethods = ["http", "https", "h2c"]
}: ResourceTargetAddressItemProps) { }: ResourceTargetAddressItemProps) {
return ( return (
<div className="flex items-center w-full" key={proxyTarget.targetId}> <div className="flex items-center w-full" key={proxyTarget.targetId}>
@@ -157,9 +159,15 @@ export function ResourceTargetAddressItem({
{proxyTarget.method || "http"} {proxyTarget.method || "http"}
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{allowedMethods.includes("http") && (
<SelectItem value="http">http</SelectItem> <SelectItem value="http">http</SelectItem>
)}
{allowedMethods.includes("https") && (
<SelectItem value="https">https</SelectItem> <SelectItem value="https">https</SelectItem>
)}
{allowedMethods.includes("h2c") && (
<SelectItem value="h2c">h2c</SelectItem> <SelectItem value="h2c">h2c</SelectItem>
)}
</SelectContent> </SelectContent>
</Select> </Select>
)} )}
src/lib/aiProviderFormSchema.ts
+32 -3
View File
@@ -71,7 +71,7 @@ export const aiProviderFormSchema = z
}); });
} }
if (data.type === "custom" && routingMode === "url" && !data.authType) { if (data.type === "custom" && !data.authType) {
ctx.addIssue({ ctx.addIssue({
code: "custom", code: "custom",
message: "authType is required for custom providers", message: "authType is required for custom providers",
@@ -96,6 +96,18 @@ export const aiProviderFormSchema = z
export type AiProviderFormValues = z.infer<typeof aiProviderFormSchema>; export type AiProviderFormValues = z.infer<typeof aiProviderFormSchema>;
export const aiProviderCreateFormSchema = aiProviderFormSchema.superRefine(
(data, ctx) => {
if (!data.apiKey?.trim()) {
ctx.addIssue({
code: "custom",
message: "API key is required",
path: ["apiKey"]
});
}
}
);
export function emptyUpstreamForType(type: AiProviderType): string { export function emptyUpstreamForType(type: AiProviderType): string {
if (type === "custom") { if (type === "custom") {
return ""; return "";
@@ -145,7 +157,7 @@ export function toAiProviderCreatePayload(values: AiProviderFormValues) {
upstreamUrl, upstreamUrl,
apiKey: values.apiKey?.trim() ? values.apiKey.trim() : undefined, apiKey: values.apiKey?.trim() ? values.apiKey.trim() : undefined,
authType: authType:
values.type === "custom" && routingMode === "url" values.type === "custom"
? (values.authType ?? "bearer") ? (values.authType ?? "bearer")
: (values.authType ?? undefined), : (values.authType ?? undefined),
skipTlsVerification: values.skipTlsVerification, skipTlsVerification: values.skipTlsVerification,
@@ -176,7 +188,7 @@ export function toAiProviderUpdatePayload(values: AiProviderFormValues) {
routingMode: values.type === "custom" ? routingMode : "url", routingMode: values.type === "custom" ? routingMode : "url",
upstreamUrl, upstreamUrl,
authType: authType:
values.type === "custom" && routingMode === "url" values.type === "custom"
? (values.authType ?? "bearer") ? (values.authType ?? "bearer")
: (values.authType ?? null), : (values.authType ?? null),
skipTlsVerification: values.skipTlsVerification ?? false, skipTlsVerification: values.skipTlsVerification ?? false,
@@ -192,6 +204,23 @@ export function toAiProviderUpdatePayload(values: AiProviderFormValues) {
return payload; return payload;
} }
export function toAiProviderNetworkPayload(values: AiProviderFormValues) {
const full = toAiProviderUpdatePayload(values);
return {
routingMode: full.routingMode,
upstreamUrl: full.upstreamUrl,
skipTlsVerification: full.skipTlsVerification
};
}
export function toAiProviderAuthPayload(values: AiProviderFormValues) {
const full = toAiProviderUpdatePayload(values);
return {
authType: full.authType,
...(values.apiKey !== undefined ? { apiKey: values.apiKey.trim() } : {})
};
}
export function toAiProviderConfigurationPayload(values: AiProviderFormValues) { export function toAiProviderConfigurationPayload(values: AiProviderFormValues) {
const { const {
name: _name, name: _name,
src/lib/queries.ts
+14
View File
@@ -1163,6 +1163,20 @@ export const logQueries = {
}) })
}; };
export const aiProviderQueries = {
providerTargets: ({ providerId }: { providerId: number }) =>
queryOptions({
queryKey: ["AI_PROVIDERS", providerId, "TARGETS"] as const,
queryFn: async ({ signal, meta }) => {
const res = await meta!.api.get<
AxiosResponse<ListTargetsResponse>
>(`/ai-provider/${providerId}/targets`, { signal });
return res.data.data.targets;
}
})
};
export const resourceQueries = { export const resourceQueries = {
resourceUsers: ({ resourceId }: { resourceId: number }) => resourceUsers: ({ resourceId }: { resourceId: number }) =>
queryOptions({ queryOptions({