mirror of
https://github.com/fosrl/pangolin.git
synced 2026-08-12 15:30:53 +02:00
improved provider picker ui on resource
This commit is contained in:
miloschwartz
@@ -16,9 +16,9 @@ import {
|
||||
SettingsSubsectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import {
|
||||
AiProvidersSelector,
|
||||
type SelectedAiProvider
|
||||
} from "@app/components/AiProvidersSelector";
|
||||
AiProviderAttachments,
|
||||
type AiProviderAttachmentValue
|
||||
} from "@app/components/AiProviderAttachments";
|
||||
import DomainPicker from "@app/components/DomainPicker";
|
||||
import { SwitchInput } from "@app/components/SwitchInput";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
@@ -41,7 +41,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useActionState, useEffect, useMemo, useState } from "react";
|
||||
import { useActionState, useEffect, useMemo } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
@@ -65,7 +65,15 @@ export default function PrivateResourceInferencePage() {
|
||||
const formSchema = useMemo(
|
||||
() =>
|
||||
z.object({
|
||||
providerIds: z.array(z.number().int().positive()),
|
||||
providers: z.array(
|
||||
z.object({
|
||||
providerId: z.number().int().positive(),
|
||||
name: z.string(),
|
||||
accessMode: z.enum(["inherit", "select"]),
|
||||
enabled: z.boolean(),
|
||||
selectedModelIds: z.array(z.number().int().positive())
|
||||
})
|
||||
),
|
||||
httpConfigSubdomain: z.string().nullish(),
|
||||
httpConfigDomainId: z.string().nullish(),
|
||||
httpConfigFullDomain: z.string().nullish(),
|
||||
@@ -75,10 +83,6 @@ export default function PrivateResourceInferencePage() {
|
||||
);
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
const [selectedProviders, setSelectedProviders] = useState<
|
||||
SelectedAiProvider[]
|
||||
>([]);
|
||||
|
||||
const attachedQuery = useQuery({
|
||||
...resourceQueries.siteResourceAiProviders({
|
||||
siteResourceId: siteResource.id
|
||||
@@ -86,10 +90,17 @@ export default function PrivateResourceInferencePage() {
|
||||
enabled: siteResource.mode === "inference"
|
||||
});
|
||||
|
||||
const modelsQuery = useQuery({
|
||||
...resourceQueries.siteResourceAiModels({
|
||||
siteResourceId: siteResource.id
|
||||
}),
|
||||
enabled: siteResource.mode === "inference"
|
||||
});
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerIds: [],
|
||||
providers: [],
|
||||
httpConfigSubdomain: siteResource.subdomain ?? null,
|
||||
httpConfigDomainId: siteResource.domainId ?? null,
|
||||
httpConfigFullDomain: siteResource.fullDomain ?? null,
|
||||
@@ -103,16 +114,33 @@ export default function PrivateResourceInferencePage() {
|
||||
|
||||
useEffect(() => {
|
||||
if (!attachedQuery.data) return;
|
||||
const providers = attachedQuery.data.map((provider) => ({
|
||||
id: String(provider.providerId),
|
||||
text: provider.name
|
||||
}));
|
||||
setSelectedProviders(providers);
|
||||
form.setValue(
|
||||
"providerIds",
|
||||
attachedQuery.data.map((p) => p.providerId)
|
||||
const hasSelect = attachedQuery.data.some(
|
||||
(provider) => provider.accessMode === "select"
|
||||
);
|
||||
}, [attachedQuery.data, form]);
|
||||
if (hasSelect && modelsQuery.isLoading) return;
|
||||
|
||||
const modelsByProvider = new Map<number, number[]>();
|
||||
for (const model of modelsQuery.data ?? []) {
|
||||
if (model.listType !== "allow") continue;
|
||||
const existing = modelsByProvider.get(model.providerId) ?? [];
|
||||
existing.push(model.modelId);
|
||||
modelsByProvider.set(model.providerId, existing);
|
||||
}
|
||||
|
||||
form.setValue(
|
||||
"providers",
|
||||
attachedQuery.data.map((provider) => ({
|
||||
providerId: provider.providerId,
|
||||
name: provider.name,
|
||||
accessMode: provider.accessMode,
|
||||
enabled: provider.enabled,
|
||||
selectedModelIds:
|
||||
provider.accessMode === "select"
|
||||
? (modelsByProvider.get(provider.providerId) ?? [])
|
||||
: []
|
||||
}))
|
||||
);
|
||||
}, [attachedQuery.data, modelsQuery.data, modelsQuery.isLoading, form]);
|
||||
|
||||
const [, formAction, saveLoading] = useActionState(async () => {
|
||||
const isValid = await form.trigger();
|
||||
@@ -129,16 +157,37 @@ export default function PrivateResourceInferencePage() {
|
||||
});
|
||||
|
||||
await api.post(`/site-resource/${siteResource.id}/ai-providers`, {
|
||||
providers: data.providerIds.map((providerId) => ({
|
||||
providerId
|
||||
providers: data.providers.map((provider) => ({
|
||||
providerId: provider.providerId,
|
||||
accessMode: provider.accessMode,
|
||||
enabled: provider.enabled
|
||||
}))
|
||||
});
|
||||
|
||||
const selectProviders = data.providers.filter(
|
||||
(provider) => provider.accessMode === "select"
|
||||
);
|
||||
if (selectProviders.length > 0) {
|
||||
await api.post(`/site-resource/${siteResource.id}/ai-models`, {
|
||||
models: selectProviders.flatMap((provider) =>
|
||||
provider.selectedModelIds.map((modelId) => ({
|
||||
modelId,
|
||||
listType: "allow" as const
|
||||
}))
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
await queryClient.invalidateQueries(
|
||||
resourceQueries.siteResourceAiProviders({
|
||||
siteResourceId: siteResource.id
|
||||
})
|
||||
);
|
||||
await queryClient.invalidateQueries(
|
||||
resourceQueries.siteResourceAiModels({
|
||||
siteResourceId: siteResource.id
|
||||
})
|
||||
);
|
||||
|
||||
toast({
|
||||
title: t("success"),
|
||||
@@ -160,6 +209,11 @@ export default function PrivateResourceInferencePage() {
|
||||
return null;
|
||||
}
|
||||
|
||||
const providersLoading =
|
||||
attachedQuery.isLoading ||
|
||||
(attachedQuery.data?.some((p) => p.accessMode === "select") &&
|
||||
modelsQuery.isLoading);
|
||||
|
||||
return (
|
||||
<SettingsContainer>
|
||||
<SettingsSection>
|
||||
@@ -183,8 +237,8 @@ export default function PrivateResourceInferencePage() {
|
||||
<SettingsFormCell span="full">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="providerIds"
|
||||
render={() => (
|
||||
name="providers"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t(
|
||||
@@ -192,44 +246,21 @@ export default function PrivateResourceInferencePage() {
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AiProvidersSelector
|
||||
<AiProviderAttachments
|
||||
orgId={
|
||||
siteResource.orgId
|
||||
}
|
||||
selectedProviders={
|
||||
selectedProviders
|
||||
value={
|
||||
field.value as AiProviderAttachmentValue[]
|
||||
}
|
||||
disabled={
|
||||
attachedQuery.isLoading ||
|
||||
saveLoading
|
||||
providersLoading
|
||||
}
|
||||
onChange={
|
||||
field.onChange
|
||||
}
|
||||
onSelectProviders={(
|
||||
providers
|
||||
) => {
|
||||
setSelectedProviders(
|
||||
providers
|
||||
);
|
||||
form.setValue(
|
||||
"providerIds",
|
||||
providers.map(
|
||||
(p) =>
|
||||
parseInt(
|
||||
p.id,
|
||||
10
|
||||
)
|
||||
),
|
||||
{
|
||||
shouldValidate: true
|
||||
}
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{t(
|
||||
"aiResourceProvidersHelp"
|
||||
)}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
@@ -335,7 +366,7 @@ export default function PrivateResourceInferencePage() {
|
||||
type="submit"
|
||||
form="private-resource-providers-form"
|
||||
loading={saveLoading}
|
||||
disabled={attachedQuery.isLoading}
|
||||
disabled={providersLoading || saveLoading}
|
||||
>
|
||||
{t("saveSettings")}
|
||||
</Button>
|
||||
|
||||
@@ -710,11 +710,6 @@ export default function CreatePrivateResourcePage() {
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{t(
|
||||
"aiResourceProvidersHelp"
|
||||
)}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
|
||||
@@ -13,9 +13,9 @@ import {
|
||||
SettingsSectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import {
|
||||
AiProvidersSelector,
|
||||
type SelectedAiProvider
|
||||
} from "@app/components/AiProvidersSelector";
|
||||
AiProviderAttachments,
|
||||
type AiProviderAttachmentValue
|
||||
} from "@app/components/AiProviderAttachments";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
@@ -35,7 +35,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useActionState, useEffect, useMemo, useState } from "react";
|
||||
import { useActionState, useEffect, useMemo } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
@@ -58,16 +58,20 @@ export default function PublicResourceInferencePage() {
|
||||
const formSchema = useMemo(
|
||||
() =>
|
||||
z.object({
|
||||
providerIds: z.array(z.number().int().positive())
|
||||
providers: z.array(
|
||||
z.object({
|
||||
providerId: z.number().int().positive(),
|
||||
name: z.string(),
|
||||
accessMode: z.enum(["inherit", "select"]),
|
||||
enabled: z.boolean(),
|
||||
selectedModelIds: z.array(z.number().int().positive())
|
||||
})
|
||||
)
|
||||
}),
|
||||
[]
|
||||
);
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
const [selectedProviders, setSelectedProviders] = useState<
|
||||
SelectedAiProvider[]
|
||||
>([]);
|
||||
|
||||
const attachedQuery = useQuery({
|
||||
...resourceQueries.resourceAiProviders({
|
||||
resourceId: resource.resourceId
|
||||
@@ -75,24 +79,53 @@ export default function PublicResourceInferencePage() {
|
||||
enabled: resource.mode === "inference"
|
||||
});
|
||||
|
||||
const modelsQuery = useQuery({
|
||||
...resourceQueries.resourceAiModels({
|
||||
resourceId: resource.resourceId
|
||||
}),
|
||||
enabled: resource.mode === "inference"
|
||||
});
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
providerIds: []
|
||||
providers: []
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!attachedQuery.data) return;
|
||||
const providers = attachedQuery.data.map((provider) => ({
|
||||
id: String(provider.providerId),
|
||||
text: provider.name
|
||||
}));
|
||||
setSelectedProviders(providers);
|
||||
const hasSelect = attachedQuery.data.some(
|
||||
(provider) => provider.accessMode === "select"
|
||||
);
|
||||
if (hasSelect && modelsQuery.isLoading) return;
|
||||
|
||||
const modelsByProvider = new Map<number, number[]>();
|
||||
for (const model of modelsQuery.data ?? []) {
|
||||
if (model.listType !== "allow") continue;
|
||||
const existing = modelsByProvider.get(model.providerId) ?? [];
|
||||
existing.push(model.modelId);
|
||||
modelsByProvider.set(model.providerId, existing);
|
||||
}
|
||||
|
||||
form.reset({
|
||||
providerIds: attachedQuery.data.map((p) => p.providerId)
|
||||
providers: attachedQuery.data.map((provider) => ({
|
||||
providerId: provider.providerId,
|
||||
name: provider.name,
|
||||
accessMode: provider.accessMode,
|
||||
enabled: provider.enabled,
|
||||
selectedModelIds:
|
||||
provider.accessMode === "select"
|
||||
? (modelsByProvider.get(provider.providerId) ?? [])
|
||||
: []
|
||||
}))
|
||||
});
|
||||
}, [attachedQuery.data, form]);
|
||||
}, [
|
||||
attachedQuery.data,
|
||||
modelsQuery.data,
|
||||
modelsQuery.isLoading,
|
||||
form
|
||||
]);
|
||||
|
||||
const [, formAction, saveLoading] = useActionState(async () => {
|
||||
const isValid = await form.trigger();
|
||||
@@ -101,16 +134,37 @@ export default function PublicResourceInferencePage() {
|
||||
const data = form.getValues();
|
||||
try {
|
||||
await api.post(`/resource/${resource.resourceId}/ai-providers`, {
|
||||
providers: data.providerIds.map((providerId) => ({
|
||||
providerId
|
||||
providers: data.providers.map((provider) => ({
|
||||
providerId: provider.providerId,
|
||||
accessMode: provider.accessMode,
|
||||
enabled: provider.enabled
|
||||
}))
|
||||
});
|
||||
|
||||
const selectProviders = data.providers.filter(
|
||||
(provider) => provider.accessMode === "select"
|
||||
);
|
||||
if (selectProviders.length > 0) {
|
||||
await api.post(`/resource/${resource.resourceId}/ai-models`, {
|
||||
models: selectProviders.flatMap((provider) =>
|
||||
provider.selectedModelIds.map((modelId) => ({
|
||||
modelId,
|
||||
listType: "allow" as const
|
||||
}))
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
await queryClient.invalidateQueries(
|
||||
resourceQueries.resourceAiProviders({
|
||||
resourceId: resource.resourceId
|
||||
})
|
||||
);
|
||||
await queryClient.invalidateQueries(
|
||||
resourceQueries.resourceAiModels({
|
||||
resourceId: resource.resourceId
|
||||
})
|
||||
);
|
||||
|
||||
toast({
|
||||
title: t("success"),
|
||||
@@ -132,6 +186,11 @@ export default function PublicResourceInferencePage() {
|
||||
return null;
|
||||
}
|
||||
|
||||
const providersLoading =
|
||||
attachedQuery.isLoading ||
|
||||
(attachedQuery.data?.some((p) => p.accessMode === "select") &&
|
||||
modelsQuery.isLoading);
|
||||
|
||||
return (
|
||||
<SettingsContainer>
|
||||
<SettingsSection>
|
||||
@@ -155,8 +214,8 @@ export default function PublicResourceInferencePage() {
|
||||
<SettingsFormCell span="full">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="providerIds"
|
||||
render={() => (
|
||||
name="providers"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t(
|
||||
@@ -164,44 +223,21 @@ export default function PublicResourceInferencePage() {
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<AiProvidersSelector
|
||||
<AiProviderAttachments
|
||||
orgId={
|
||||
resource.orgId
|
||||
}
|
||||
selectedProviders={
|
||||
selectedProviders
|
||||
value={
|
||||
field.value as AiProviderAttachmentValue[]
|
||||
}
|
||||
disabled={
|
||||
attachedQuery.isLoading ||
|
||||
saveLoading
|
||||
providersLoading
|
||||
}
|
||||
onChange={
|
||||
field.onChange
|
||||
}
|
||||
onSelectProviders={(
|
||||
providers
|
||||
) => {
|
||||
setSelectedProviders(
|
||||
providers
|
||||
);
|
||||
form.setValue(
|
||||
"providerIds",
|
||||
providers.map(
|
||||
(p) =>
|
||||
parseInt(
|
||||
p.id,
|
||||
10
|
||||
)
|
||||
),
|
||||
{
|
||||
shouldValidate: true
|
||||
}
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{t(
|
||||
"aiResourceProvidersHelp"
|
||||
)}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
@@ -218,7 +254,7 @@ export default function PublicResourceInferencePage() {
|
||||
type="submit"
|
||||
form="public-resource-providers-form"
|
||||
loading={saveLoading}
|
||||
disabled={attachedQuery.isLoading}
|
||||
disabled={providersLoading || saveLoading}
|
||||
>
|
||||
{t("saveSettings")}
|
||||
</Button>
|
||||
|
||||
@@ -1437,11 +1437,6 @@ export default function Page() {
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t(
|
||||
"aiResourceProvidersHelp"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</SettingsFormCell>
|
||||
</SettingsFormGrid>
|
||||
|
||||
@@ -0,0 +1,581 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Credenza,
|
||||
CredenzaBody,
|
||||
CredenzaClose,
|
||||
CredenzaContent,
|
||||
CredenzaDescription,
|
||||
CredenzaFooter,
|
||||
CredenzaHeader,
|
||||
CredenzaTitle
|
||||
} from "@app/components/Credenza";
|
||||
import { type TagValue } from "@app/components/multi-select/multi-select-content";
|
||||
import { MultiSelectTagInput } from "@app/components/multi-select/multi-select-tag-input";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger
|
||||
} from "@app/components/ui/dropdown-menu";
|
||||
import { Switch } from "@app/components/ui/switch";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage
|
||||
} from "@app/components/ui/form";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@app/components/ui/select";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { aiProviderQueries } from "@app/lib/queries";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Plus, XIcon } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
export type AiProviderAttachmentValue = {
|
||||
providerId: number;
|
||||
name: string;
|
||||
accessMode: "inherit" | "select";
|
||||
enabled: boolean;
|
||||
selectedModelIds: number[];
|
||||
};
|
||||
|
||||
export type AiProviderAttachmentsProps = {
|
||||
orgId: string;
|
||||
value: AiProviderAttachmentValue[];
|
||||
onChange: (value: AiProviderAttachmentValue[]) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export function AiProviderAttachments({
|
||||
orgId,
|
||||
value,
|
||||
onChange,
|
||||
disabled
|
||||
}: AiProviderAttachmentsProps) {
|
||||
const t = useTranslations();
|
||||
const [editingProviderId, setEditingProviderId] = useState<number | null>(
|
||||
null
|
||||
);
|
||||
|
||||
const { data: providers = [] } = useQuery(
|
||||
aiProviderQueries.orgProviders({ orgId })
|
||||
);
|
||||
|
||||
const attachedIds = useMemo(
|
||||
() => new Set(value.map((v) => v.providerId)),
|
||||
[value]
|
||||
);
|
||||
|
||||
const availableProviders = providers
|
||||
.filter((provider) => provider.enabled)
|
||||
.filter((provider) => !attachedIds.has(provider.providerId));
|
||||
|
||||
const editing = value.find((v) => v.providerId === editingProviderId);
|
||||
|
||||
function addProvider(providerId: number, name: string) {
|
||||
if (value.some((v) => v.providerId === providerId)) {
|
||||
return;
|
||||
}
|
||||
onChange([
|
||||
...value,
|
||||
{
|
||||
providerId,
|
||||
name,
|
||||
accessMode: "inherit",
|
||||
enabled: true,
|
||||
selectedModelIds: []
|
||||
}
|
||||
]);
|
||||
}
|
||||
|
||||
function removeProvider(providerId: number) {
|
||||
onChange(value.filter((v) => v.providerId !== providerId));
|
||||
}
|
||||
|
||||
function updateProvider(updated: AiProviderAttachmentValue) {
|
||||
onChange(
|
||||
value.map((v) =>
|
||||
v.providerId === updated.providerId ? updated : v
|
||||
)
|
||||
);
|
||||
setEditingProviderId(null);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{value.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("aiResourceProvidersNoneAttached")}
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{value.map((attachment) => (
|
||||
<AttachmentRow
|
||||
key={attachment.providerId}
|
||||
attachment={attachment}
|
||||
disabled={disabled}
|
||||
onEdit={() =>
|
||||
setEditingProviderId(attachment.providerId)
|
||||
}
|
||||
onRemove={() =>
|
||||
removeProvider(attachment.providerId)
|
||||
}
|
||||
onToggleEnabled={(enabled) => {
|
||||
onChange(
|
||||
value.map((v) =>
|
||||
v.providerId === attachment.providerId
|
||||
? { ...v, enabled }
|
||||
: v
|
||||
)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-fit"
|
||||
disabled={disabled || availableProviders.length === 0}
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
{t("aiResourceProvidersAdd")}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-56">
|
||||
{availableProviders.map((provider) => (
|
||||
<DropdownMenuItem
|
||||
key={provider.providerId}
|
||||
onSelect={() =>
|
||||
addProvider(provider.providerId, provider.name)
|
||||
}
|
||||
>
|
||||
{provider.name}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{editing && (
|
||||
<EditAttachmentCredenza
|
||||
attachment={editing}
|
||||
open={editingProviderId !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setEditingProviderId(null);
|
||||
}}
|
||||
onSave={updateProvider}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AttachmentRow({
|
||||
attachment,
|
||||
disabled,
|
||||
onEdit,
|
||||
onRemove,
|
||||
onToggleEnabled
|
||||
}: {
|
||||
attachment: AiProviderAttachmentValue;
|
||||
disabled?: boolean;
|
||||
onEdit: () => void;
|
||||
onRemove: () => void;
|
||||
onToggleEnabled: (enabled: boolean) => void;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const summary =
|
||||
attachment.accessMode === "inherit"
|
||||
? t("aiResourceProviderModeInherit")
|
||||
: t("aiResourceProviderModeSelectSummary", {
|
||||
count: attachment.selectedModelIds.length
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-md border border-input p-3 min-w-0",
|
||||
(disabled || !attachment.enabled) && "opacity-60",
|
||||
!disabled && "cursor-pointer hover:bg-muted/50"
|
||||
)}
|
||||
onClick={disabled ? undefined : onEdit}
|
||||
onKeyDown={
|
||||
disabled
|
||||
? undefined
|
||||
: (e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onEdit();
|
||||
}
|
||||
}
|
||||
}
|
||||
role={disabled ? undefined : "button"}
|
||||
tabIndex={disabled ? undefined : 0}
|
||||
>
|
||||
<div className="flex flex-1 min-w-0 flex-col gap-0.5">
|
||||
<span className="text-sm font-medium truncate">
|
||||
{attachment.name}
|
||||
</span>
|
||||
<p className="truncate text-sm text-muted-foreground">
|
||||
{attachment.enabled
|
||||
? summary
|
||||
: t("aiResourceProviderDisabled")}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="flex shrink-0 items-center gap-2"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onKeyDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
variant="text"
|
||||
size="sm"
|
||||
className="h-auto px-0"
|
||||
disabled={disabled}
|
||||
onClick={onEdit}
|
||||
>
|
||||
{t("edit")}
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
className="p-0.5 text-muted-foreground hover:text-foreground cursor-pointer disabled:opacity-50"
|
||||
disabled={disabled}
|
||||
aria-label={t("aiResourceProvidersRemove")}
|
||||
onClick={onRemove}
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
</button>
|
||||
<Switch
|
||||
checked={attachment.enabled}
|
||||
disabled={disabled}
|
||||
aria-label={t("aiResourceProviderToggleEnabled")}
|
||||
onCheckedChange={onToggleEnabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type EditFormValues = {
|
||||
accessMode: "inherit" | "select";
|
||||
selectedModels: TagValue[];
|
||||
};
|
||||
|
||||
function EditAttachmentCredenza({
|
||||
attachment,
|
||||
open,
|
||||
onOpenChange,
|
||||
onSave
|
||||
}: {
|
||||
attachment: AiProviderAttachmentValue;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSave: (value: AiProviderAttachmentValue) => void;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const [modelSearch, setModelSearch] = useState("");
|
||||
|
||||
const editSchema = useMemo(
|
||||
() =>
|
||||
z.object({
|
||||
accessMode: z.enum(["inherit", "select"]),
|
||||
selectedModels: z.array(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
text: z.string()
|
||||
})
|
||||
)
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const modelsQuery = useQuery({
|
||||
...aiProviderQueries.providerModels({
|
||||
providerId: attachment.providerId
|
||||
}),
|
||||
enabled: open
|
||||
});
|
||||
|
||||
const allowCatalog = useMemo(() => {
|
||||
const models = modelsQuery.data ?? [];
|
||||
return models.filter(
|
||||
(model) => model.enabled && (model.listType ?? "allow") === "allow"
|
||||
);
|
||||
}, [modelsQuery.data]);
|
||||
|
||||
const allowOptions: TagValue[] = useMemo(() => {
|
||||
const query = modelSearch.trim().toLowerCase();
|
||||
return allowCatalog
|
||||
.filter((model) => {
|
||||
if (!query) return true;
|
||||
return (
|
||||
model.modelKey.toLowerCase().includes(query) ||
|
||||
model.name.toLowerCase().includes(query)
|
||||
);
|
||||
})
|
||||
.map((model) => ({
|
||||
id: String(model.modelId),
|
||||
text: model.modelKey
|
||||
}));
|
||||
}, [allowCatalog, modelSearch]);
|
||||
|
||||
const form = useForm<EditFormValues>({
|
||||
resolver: zodResolver(editSchema),
|
||||
defaultValues: {
|
||||
accessMode: attachment.accessMode,
|
||||
selectedModels: []
|
||||
}
|
||||
});
|
||||
|
||||
const accessMode = form.watch("accessMode");
|
||||
const pendingSeedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
form.reset({
|
||||
accessMode: attachment.accessMode,
|
||||
selectedModels: attachment.selectedModelIds.map((modelId) => {
|
||||
const catalog = (modelsQuery.data ?? []).find(
|
||||
(model) => model.modelId === modelId
|
||||
);
|
||||
return {
|
||||
id: String(modelId),
|
||||
text: catalog?.modelKey ?? String(modelId)
|
||||
};
|
||||
})
|
||||
});
|
||||
setModelSearch("");
|
||||
pendingSeedRef.current = false;
|
||||
// Only re-init when opening or switching which attachment is edited.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open, attachment.providerId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || allowCatalog.length === 0) return;
|
||||
|
||||
const current = form.getValues("selectedModels");
|
||||
const upgraded = current.map((model) => {
|
||||
const catalog = allowCatalog.find(
|
||||
(entry) => String(entry.modelId) === model.id
|
||||
);
|
||||
return catalog ? { id: model.id, text: catalog.modelKey } : model;
|
||||
});
|
||||
const changed = upgraded.some(
|
||||
(model, index) => model.text !== current[index]?.text
|
||||
);
|
||||
if (changed) {
|
||||
form.setValue("selectedModels", upgraded);
|
||||
}
|
||||
|
||||
if (pendingSeedRef.current) {
|
||||
form.setValue(
|
||||
"selectedModels",
|
||||
allowCatalog.map((model) => ({
|
||||
id: String(model.modelId),
|
||||
text: model.modelKey
|
||||
}))
|
||||
);
|
||||
pendingSeedRef.current = false;
|
||||
}
|
||||
}, [open, allowCatalog, form]);
|
||||
|
||||
function handleAccessModeChange(next: "inherit" | "select") {
|
||||
form.setValue("accessMode", next);
|
||||
if (next === "inherit") {
|
||||
form.setValue("selectedModels", []);
|
||||
pendingSeedRef.current = false;
|
||||
return;
|
||||
}
|
||||
if (attachment.accessMode === "select") {
|
||||
form.setValue(
|
||||
"selectedModels",
|
||||
attachment.selectedModelIds.map((modelId) => {
|
||||
const catalog = allowCatalog.find(
|
||||
(model) => model.modelId === modelId
|
||||
);
|
||||
return {
|
||||
id: String(modelId),
|
||||
text: catalog?.modelKey ?? String(modelId)
|
||||
};
|
||||
})
|
||||
);
|
||||
pendingSeedRef.current = false;
|
||||
return;
|
||||
}
|
||||
if (allowCatalog.length > 0) {
|
||||
form.setValue(
|
||||
"selectedModels",
|
||||
allowCatalog.map((model) => ({
|
||||
id: String(model.modelId),
|
||||
text: model.modelKey
|
||||
}))
|
||||
);
|
||||
pendingSeedRef.current = false;
|
||||
return;
|
||||
}
|
||||
form.setValue("selectedModels", []);
|
||||
pendingSeedRef.current = true;
|
||||
}
|
||||
|
||||
function onSubmit(values: EditFormValues) {
|
||||
onSave({
|
||||
providerId: attachment.providerId,
|
||||
name: attachment.name,
|
||||
accessMode: values.accessMode,
|
||||
enabled: attachment.enabled,
|
||||
selectedModelIds:
|
||||
values.accessMode === "select"
|
||||
? values.selectedModels.map((model) =>
|
||||
parseInt(model.id, 10)
|
||||
)
|
||||
: []
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Credenza open={open} onOpenChange={onOpenChange}>
|
||||
<CredenzaContent>
|
||||
<CredenzaHeader>
|
||||
<CredenzaTitle>{attachment.name}</CredenzaTitle>
|
||||
<CredenzaDescription>
|
||||
{t("aiResourceProviderEditDescription")}
|
||||
</CredenzaDescription>
|
||||
</CredenzaHeader>
|
||||
<CredenzaBody>
|
||||
<Form {...form}>
|
||||
<form
|
||||
id="ai-provider-attachment-edit-form"
|
||||
className="space-y-4"
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="accessMode"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("aiResourceProviderMode")}
|
||||
</FormLabel>
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={(value) =>
|
||||
handleAccessModeChange(
|
||||
value as
|
||||
| "inherit"
|
||||
| "select"
|
||||
)
|
||||
}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="inherit">
|
||||
{t(
|
||||
"aiResourceProviderModeInherit"
|
||||
)}
|
||||
</SelectItem>
|
||||
<SelectItem value="select">
|
||||
{t(
|
||||
"aiResourceProviderModeSelect"
|
||||
)}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>
|
||||
{field.value === "inherit"
|
||||
? t(
|
||||
"aiResourceProviderModeInheritHelp"
|
||||
)
|
||||
: t(
|
||||
"aiResourceProviderModeSelectHelp"
|
||||
)}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{accessMode === "select" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="selectedModels"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t(
|
||||
"aiResourceProviderAllowModels"
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<MultiSelectTagInput
|
||||
buttonText={t(
|
||||
"aiResourceProviderAllowModelsSelect"
|
||||
)}
|
||||
emptyPlaceholder={t(
|
||||
"aiResourceProviderAllowModelsEmpty"
|
||||
)}
|
||||
searchPlaceholder={t(
|
||||
"aiResourceProviderAllowModelsSearch"
|
||||
)}
|
||||
searchQuery={modelSearch}
|
||||
options={allowOptions}
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
onSearch={setModelSearch}
|
||||
disabled={
|
||||
modelsQuery.isLoading
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{t(
|
||||
"aiResourceProviderAllowModelsHelp"
|
||||
)}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</form>
|
||||
</Form>
|
||||
</CredenzaBody>
|
||||
<CredenzaFooter>
|
||||
<CredenzaClose asChild>
|
||||
<Button variant="outline">{t("close")}</Button>
|
||||
</CredenzaClose>
|
||||
<Button
|
||||
type="submit"
|
||||
form="ai-provider-attachment-edit-form"
|
||||
>
|
||||
{t("done")}
|
||||
</Button>
|
||||
</CredenzaFooter>
|
||||
</CredenzaContent>
|
||||
</Credenza>
|
||||
);
|
||||
}
|
||||
@@ -38,6 +38,7 @@ import type { GetResourcePolicyResponse } from "@server/routers/policy";
|
||||
import type {
|
||||
GetResourcePoliciesResponse,
|
||||
GetResourceWhitelistResponse,
|
||||
ListResourceAiModelsResponse,
|
||||
ListResourceNamesResponse,
|
||||
ListResourceRolesResponse,
|
||||
ListResourceRulesResponse,
|
||||
@@ -51,6 +52,7 @@ import type { ListRolesResponse } from "@server/routers/role";
|
||||
import type { ListSitesResponse } from "@server/routers/site";
|
||||
import type {
|
||||
ListAllSiteResourcesByOrgResponse,
|
||||
ListSiteResourceAiModelsResponse,
|
||||
ListSiteResourceClientsResponse,
|
||||
ListSiteResourceRolesResponse,
|
||||
ListSiteResourceUsersResponse
|
||||
@@ -1291,6 +1293,7 @@ export const resourceQueries = {
|
||||
name: string;
|
||||
type: string;
|
||||
enabled: boolean;
|
||||
providerEnabled: boolean;
|
||||
accessMode: "inherit" | "select";
|
||||
}>;
|
||||
}>
|
||||
@@ -1311,6 +1314,7 @@ export const resourceQueries = {
|
||||
name: string;
|
||||
type: string;
|
||||
enabled: boolean;
|
||||
providerEnabled: boolean;
|
||||
accessMode: "inherit" | "select";
|
||||
}>;
|
||||
}>
|
||||
@@ -1320,6 +1324,26 @@ export const resourceQueries = {
|
||||
return res.data.data.providers;
|
||||
}
|
||||
}),
|
||||
resourceAiModels: ({ resourceId }: { resourceId: number }) =>
|
||||
queryOptions({
|
||||
queryKey: ["RESOURCES", resourceId, "AI_MODELS"] as const,
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListResourceAiModelsResponse>
|
||||
>(`/resource/${resourceId}/ai-models`, { signal });
|
||||
return res.data.data.models;
|
||||
}
|
||||
}),
|
||||
siteResourceAiModels: ({ siteResourceId }: { siteResourceId: number }) =>
|
||||
queryOptions({
|
||||
queryKey: ["SITE_RESOURCES", siteResourceId, "AI_MODELS"] as const,
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListSiteResourceAiModelsResponse>
|
||||
>(`/site-resource/${siteResourceId}/ai-models`, { signal });
|
||||
return res.data.data.models;
|
||||
}
|
||||
}),
|
||||
resourceTargets: ({ resourceId }: { resourceId: number }) =>
|
||||
queryOptions({
|
||||
queryKey: ["RESOURCES", resourceId, "TARGETS"] as const,
|
||||
|
||||
Reference in New Issue
Block a user