add model picker to create provider wizard

2026-08-19 10:42:57 +02:00 · 2026-08-13 15:08:10 -04:00
parent d9a9ae14fd
commit 9b10292e02
10 changed files with 341 additions and 81 deletions
@@ -0,0 +1,80 @@
+"use client";
+
+import {
+    AiProviderModelListEditor,
+    type AiProviderModelListItem
+} from "@app/components/AiProviderModelListEditor";
+import { Label } from "@app/components/ui/label";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+
+export type AiProviderModelsListsProps = {
+    orgId: string;
+    allowItems: AiProviderModelListItem[];
+    onAllowChange: (items: AiProviderModelListItem[]) => void;
+    blockItems: AiProviderModelListItem[];
+    onBlockChange: (items: AiProviderModelListItem[]) => void;
+    catalogModels: string[];
+    disabled?: boolean;
+};
+
+export function AiProviderModelsLists({
+    orgId,
+    allowItems,
+    onAllowChange,
+    blockItems,
+    onBlockChange,
+    catalogModels,
+    disabled
+}: AiProviderModelsListsProps) {
+    const t = useTranslations();
+
+    const allowExcludeKeys = useMemo(
+        () => new Set(blockItems.map((item) => item.modelKey)),
+        [blockItems]
+    );
+    const blockExcludeKeys = useMemo(
+        () => new Set(allowItems.map((item) => item.modelKey)),
+        [allowItems]
+    );
+
+    return (
+        <div className="space-y-6">
+            <div className="space-y-2">
+                <Label>{t("aiProviderModelsAllow")}</Label>
+                <AiProviderModelListEditor
+                    orgId={orgId}
+                    listType="allow"
+                    items={allowItems}
+                    onChange={onAllowChange}
+                    catalogModels={catalogModels}
+                    excludeKeys={allowExcludeKeys}
+                    disabled={disabled}
+                    emptyMessage={t("aiProviderModelsAllowEmpty")}
+                    addPlaceholder={t("aiProviderModelsAllowPlaceholder")}
+                />
+                <p className="text-sm text-muted-foreground">
+                    {t("aiProviderModelsAllowDescription")}
+                </p>
+            </div>
+
+            <div className="space-y-2">
+                <Label>{t("aiProviderModelsBlock")}</Label>
+                <AiProviderModelListEditor
+                    orgId={orgId}
+                    listType="block"
+                    items={blockItems}
+                    onChange={onBlockChange}
+                    catalogModels={catalogModels}
+                    excludeKeys={blockExcludeKeys}
+                    disabled={disabled}
+                    emptyMessage={t("aiProviderModelsBlockEmpty")}
+                    addPlaceholder={t("aiProviderModelsBlockPlaceholder")}
+                />
+                <p className="text-sm text-muted-foreground">
+                    {t("aiProviderModelsBlockDescription")}
+                </p>
+            </div>
+        </div>
+    );
+}