open llm model select when toast button to settings is clicked
This commit is contained in:
Cole Goldsmith
parent
9da1dcec59
commit
593bd626b4
6 changed files with 1823 additions and 1784 deletions
|
|
@ -41,6 +41,7 @@ export function ModelSelector({
|
||||||
noOptionsPlaceholder = "No models available",
|
noOptionsPlaceholder = "No models available",
|
||||||
custom = false,
|
custom = false,
|
||||||
hasError = false,
|
hasError = false,
|
||||||
|
defaultOpen = false,
|
||||||
}: {
|
}: {
|
||||||
options?: ModelOption[];
|
options?: ModelOption[];
|
||||||
groupedOptions?: GroupedModelOption[];
|
groupedOptions?: GroupedModelOption[];
|
||||||
|
|
@ -52,8 +53,9 @@ export function ModelSelector({
|
||||||
custom?: boolean;
|
custom?: boolean;
|
||||||
onValueChange: (value: string, provider?: string) => void;
|
onValueChange: (value: string, provider?: string) => void;
|
||||||
hasError?: boolean;
|
hasError?: boolean;
|
||||||
|
defaultOpen?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(defaultOpen);
|
||||||
const [searchValue, setSearchValue] = useState("");
|
const [searchValue, setSearchValue] = useState("");
|
||||||
|
|
||||||
// Flatten grouped options or use regular options
|
// Flatten grouped options or use regular options
|
||||||
|
|
@ -77,6 +79,13 @@ export function ModelSelector({
|
||||||
}
|
}
|
||||||
}, [allOptions, value, custom, onValueChange]);
|
}, [allOptions, value, custom, onValueChange]);
|
||||||
|
|
||||||
|
// Update open state when defaultOpen changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (defaultOpen) {
|
||||||
|
setOpen(true);
|
||||||
|
}
|
||||||
|
}, [defaultOpen]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover open={open} onOpenChange={setOpen} modal={false}>
|
<Popover open={open} onOpenChange={setOpen} modal={false}>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
|
|
|
||||||
|
|
@ -9,161 +9,161 @@ import type { ProviderHealthResponse } from "@/app/api/queries/useProviderHealth
|
||||||
import AnthropicLogo from "@/components/icons/anthropic-logo";
|
import AnthropicLogo from "@/components/icons/anthropic-logo";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
DialogFooter,
|
DialogFooter,
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import {
|
import {
|
||||||
AnthropicSettingsForm,
|
AnthropicSettingsForm,
|
||||||
type AnthropicSettingsFormData,
|
type AnthropicSettingsFormData,
|
||||||
} from "./anthropic-settings-form";
|
} from "./anthropic-settings-form";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
const AnthropicSettingsDialog = ({
|
const AnthropicSettingsDialog = ({
|
||||||
open,
|
open,
|
||||||
setOpen,
|
setOpen,
|
||||||
}: {
|
}: {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
setOpen: (open: boolean) => void;
|
setOpen: (open: boolean) => void;
|
||||||
}) => {
|
}) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const [isValidating, setIsValidating] = useState(false);
|
const [isValidating, setIsValidating] = useState(false);
|
||||||
const [validationError, setValidationError] = useState<Error | null>(null);
|
const [validationError, setValidationError] = useState<Error | null>(null);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const methods = useForm<AnthropicSettingsFormData>({
|
const methods = useForm<AnthropicSettingsFormData>({
|
||||||
mode: "onSubmit",
|
mode: "onSubmit",
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
apiKey: "",
|
apiKey: "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { handleSubmit, watch } = methods;
|
const { handleSubmit, watch } = methods;
|
||||||
const apiKey = watch("apiKey");
|
const apiKey = watch("apiKey");
|
||||||
|
|
||||||
const { refetch: validateCredentials } = useGetAnthropicModelsQuery(
|
const { refetch: validateCredentials } = useGetAnthropicModelsQuery(
|
||||||
{
|
{
|
||||||
apiKey: apiKey,
|
apiKey: apiKey,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
enabled: false,
|
enabled: false,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
const settingsMutation = useUpdateSettingsMutation({
|
const settingsMutation = useUpdateSettingsMutation({
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
// Update provider health cache to healthy since backend validated the setup
|
// Update provider health cache to healthy since backend validated the setup
|
||||||
const healthData: ProviderHealthResponse = {
|
const healthData: ProviderHealthResponse = {
|
||||||
status: "healthy",
|
status: "healthy",
|
||||||
message: "Provider is configured and working correctly",
|
message: "Provider is configured and working correctly",
|
||||||
provider: "anthropic",
|
provider: "anthropic",
|
||||||
};
|
};
|
||||||
queryClient.setQueryData(["provider", "health"], healthData);
|
queryClient.setQueryData(["provider", "health"], healthData);
|
||||||
|
|
||||||
toast.message("Anthropic successfully configured", {
|
toast.message("Anthropic successfully configured", {
|
||||||
description: "You can now access the provided language models.",
|
description: "You can now access the provided language models.",
|
||||||
duration: Infinity,
|
duration: Infinity,
|
||||||
closeButton: true,
|
closeButton: true,
|
||||||
icon: <AnthropicLogo className="w-4 h-4 text-[#D97757]" />,
|
icon: <AnthropicLogo className="w-4 h-4 text-[#D97757]" />,
|
||||||
action: {
|
action: {
|
||||||
label: "Settings",
|
label: "Settings",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
router.push("/settings");
|
router.push("/settings?focusLlmModel=true");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = async (data: AnthropicSettingsFormData) => {
|
const onSubmit = async (data: AnthropicSettingsFormData) => {
|
||||||
// Clear any previous validation errors
|
// Clear any previous validation errors
|
||||||
setValidationError(null);
|
setValidationError(null);
|
||||||
|
|
||||||
// Only validate if a new API key was entered
|
// Only validate if a new API key was entered
|
||||||
if (data.apiKey) {
|
if (data.apiKey) {
|
||||||
setIsValidating(true);
|
setIsValidating(true);
|
||||||
const result = await validateCredentials();
|
const result = await validateCredentials();
|
||||||
setIsValidating(false);
|
setIsValidating(false);
|
||||||
|
|
||||||
if (result.isError) {
|
if (result.isError) {
|
||||||
setValidationError(result.error);
|
setValidationError(result.error);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const payload: {
|
const payload: {
|
||||||
anthropic_api_key?: string;
|
anthropic_api_key?: string;
|
||||||
} = {};
|
} = {};
|
||||||
|
|
||||||
// Only include api_key if a value was entered
|
// Only include api_key if a value was entered
|
||||||
if (data.apiKey) {
|
if (data.apiKey) {
|
||||||
payload.anthropic_api_key = data.apiKey;
|
payload.anthropic_api_key = data.apiKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Submit the update
|
// Submit the update
|
||||||
settingsMutation.mutate(payload);
|
settingsMutation.mutate(payload);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
<DialogContent className="max-w-2xl">
|
<DialogContent className="max-w-2xl">
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
|
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
|
||||||
<DialogHeader className="mb-2">
|
<DialogHeader className="mb-2">
|
||||||
<DialogTitle className="flex items-center gap-3">
|
<DialogTitle className="flex items-center gap-3">
|
||||||
<div className="w-8 h-8 rounded flex items-center justify-center bg-white border">
|
<div className="w-8 h-8 rounded flex items-center justify-center bg-white border">
|
||||||
<AnthropicLogo className="text-black" />
|
<AnthropicLogo className="text-black" />
|
||||||
</div>
|
</div>
|
||||||
Anthropic Setup
|
Anthropic Setup
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<AnthropicSettingsForm
|
<AnthropicSettingsForm
|
||||||
modelsError={validationError}
|
modelsError={validationError}
|
||||||
isLoadingModels={isValidating}
|
isLoadingModels={isValidating}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{settingsMutation.isError && (
|
{settingsMutation.isError && (
|
||||||
<motion.div
|
<motion.div
|
||||||
key="error"
|
key="error"
|
||||||
initial={{ opacity: 0, y: 10 }}
|
initial={{ opacity: 0, y: 10 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
exit={{ opacity: 0, y: -10 }}
|
exit={{ opacity: 0, y: -10 }}
|
||||||
>
|
>
|
||||||
<p className="rounded-lg border border-destructive p-4">
|
<p className="rounded-lg border border-destructive p-4">
|
||||||
{settingsMutation.error?.message}
|
{settingsMutation.error?.message}
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
<DialogFooter className="mt-4">
|
<DialogFooter className="mt-4">
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={settingsMutation.isPending || isValidating}
|
disabled={settingsMutation.isPending || isValidating}
|
||||||
>
|
>
|
||||||
{settingsMutation.isPending
|
{settingsMutation.isPending
|
||||||
? "Saving..."
|
? "Saving..."
|
||||||
: isValidating
|
: isValidating
|
||||||
? "Validating..."
|
? "Validating..."
|
||||||
: "Save"}
|
: "Save"}
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</form>
|
</form>
|
||||||
</FormProvider>
|
</FormProvider>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AnthropicSettingsDialog;
|
export default AnthropicSettingsDialog;
|
||||||
|
|
|
||||||
|
|
@ -10,162 +10,162 @@ import type { ProviderHealthResponse } from "@/app/api/queries/useProviderHealth
|
||||||
import OllamaLogo from "@/components/icons/ollama-logo";
|
import OllamaLogo from "@/components/icons/ollama-logo";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
DialogFooter,
|
DialogFooter,
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import { useAuth } from "@/contexts/auth-context";
|
import { useAuth } from "@/contexts/auth-context";
|
||||||
import {
|
import {
|
||||||
OllamaSettingsForm,
|
OllamaSettingsForm,
|
||||||
type OllamaSettingsFormData,
|
type OllamaSettingsFormData,
|
||||||
} from "./ollama-settings-form";
|
} from "./ollama-settings-form";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
const OllamaSettingsDialog = ({
|
const OllamaSettingsDialog = ({
|
||||||
open,
|
open,
|
||||||
setOpen,
|
setOpen,
|
||||||
}: {
|
}: {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
setOpen: (open: boolean) => void;
|
setOpen: (open: boolean) => void;
|
||||||
}) => {
|
}) => {
|
||||||
const { isAuthenticated, isNoAuthMode } = useAuth();
|
const { isAuthenticated, isNoAuthMode } = useAuth();
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const [isValidating, setIsValidating] = useState(false);
|
const [isValidating, setIsValidating] = useState(false);
|
||||||
const [validationError, setValidationError] = useState<Error | null>(null);
|
const [validationError, setValidationError] = useState<Error | null>(null);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const { data: settings = {} } = useGetSettingsQuery({
|
const { data: settings = {} } = useGetSettingsQuery({
|
||||||
enabled: isAuthenticated || isNoAuthMode,
|
enabled: isAuthenticated || isNoAuthMode,
|
||||||
});
|
});
|
||||||
|
|
||||||
const isOllamaConfigured = settings.providers?.ollama?.configured === true;
|
const isOllamaConfigured = settings.providers?.ollama?.configured === true;
|
||||||
|
|
||||||
const methods = useForm<OllamaSettingsFormData>({
|
const methods = useForm<OllamaSettingsFormData>({
|
||||||
mode: "onSubmit",
|
mode: "onSubmit",
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
endpoint: isOllamaConfigured
|
endpoint: isOllamaConfigured
|
||||||
? settings.providers?.ollama?.endpoint
|
? settings.providers?.ollama?.endpoint
|
||||||
: "http://localhost:11434",
|
: "http://localhost:11434",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { handleSubmit, watch } = methods;
|
const { handleSubmit, watch } = methods;
|
||||||
const endpoint = watch("endpoint");
|
const endpoint = watch("endpoint");
|
||||||
|
|
||||||
const { refetch: validateCredentials } = useGetOllamaModelsQuery(
|
const { refetch: validateCredentials } = useGetOllamaModelsQuery(
|
||||||
{
|
{
|
||||||
endpoint: endpoint,
|
endpoint: endpoint,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
enabled: false,
|
enabled: false,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
const settingsMutation = useUpdateSettingsMutation({
|
const settingsMutation = useUpdateSettingsMutation({
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
// Update provider health cache to healthy since backend validated the setup
|
// Update provider health cache to healthy since backend validated the setup
|
||||||
const healthData: ProviderHealthResponse = {
|
const healthData: ProviderHealthResponse = {
|
||||||
status: "healthy",
|
status: "healthy",
|
||||||
message: "Provider is configured and working correctly",
|
message: "Provider is configured and working correctly",
|
||||||
provider: "ollama",
|
provider: "ollama",
|
||||||
};
|
};
|
||||||
queryClient.setQueryData(["provider", "health"], healthData);
|
queryClient.setQueryData(["provider", "health"], healthData);
|
||||||
|
|
||||||
toast.message("Ollama successfully configured", {
|
toast.message("Ollama successfully configured", {
|
||||||
description:
|
description:
|
||||||
"You can now access the provided language and embedding models.",
|
"You can now access the provided language and embedding models.",
|
||||||
duration: Infinity,
|
duration: Infinity,
|
||||||
closeButton: true,
|
closeButton: true,
|
||||||
icon: <OllamaLogo className="w-4 h-4" />,
|
icon: <OllamaLogo className="w-4 h-4" />,
|
||||||
action: {
|
action: {
|
||||||
label: "Settings",
|
label: "Settings",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
router.push("/settings");
|
router.push("/settings?focusLlmModel=true");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = async (data: OllamaSettingsFormData) => {
|
const onSubmit = async (data: OllamaSettingsFormData) => {
|
||||||
// Clear any previous validation errors
|
// Clear any previous validation errors
|
||||||
setValidationError(null);
|
setValidationError(null);
|
||||||
|
|
||||||
// Validate endpoint by fetching models
|
// Validate endpoint by fetching models
|
||||||
setIsValidating(true);
|
setIsValidating(true);
|
||||||
const result = await validateCredentials();
|
const result = await validateCredentials();
|
||||||
setIsValidating(false);
|
setIsValidating(false);
|
||||||
|
|
||||||
if (result.isError) {
|
if (result.isError) {
|
||||||
setValidationError(result.error);
|
setValidationError(result.error);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
settingsMutation.mutate({
|
settingsMutation.mutate({
|
||||||
ollama_endpoint: data.endpoint,
|
ollama_endpoint: data.endpoint,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
<DialogContent className="max-w-2xl">
|
<DialogContent className="max-w-2xl">
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
|
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
|
||||||
<DialogHeader className="mb-2">
|
<DialogHeader className="mb-2">
|
||||||
<DialogTitle className="flex items-center gap-3">
|
<DialogTitle className="flex items-center gap-3">
|
||||||
<div className="w-8 h-8 rounded flex items-center justify-center bg-white border">
|
<div className="w-8 h-8 rounded flex items-center justify-center bg-white border">
|
||||||
<OllamaLogo className="text-black" />
|
<OllamaLogo className="text-black" />
|
||||||
</div>
|
</div>
|
||||||
Ollama Setup
|
Ollama Setup
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<OllamaSettingsForm
|
<OllamaSettingsForm
|
||||||
modelsError={validationError}
|
modelsError={validationError}
|
||||||
isLoadingModels={isValidating}
|
isLoadingModels={isValidating}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{settingsMutation.isError && (
|
{settingsMutation.isError && (
|
||||||
<motion.div
|
<motion.div
|
||||||
key="error"
|
key="error"
|
||||||
initial={{ opacity: 0, y: 10 }}
|
initial={{ opacity: 0, y: 10 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
exit={{ opacity: 0, y: -10 }}
|
exit={{ opacity: 0, y: -10 }}
|
||||||
>
|
>
|
||||||
<p className="rounded-lg border border-destructive p-4">
|
<p className="rounded-lg border border-destructive p-4">
|
||||||
{settingsMutation.error?.message}
|
{settingsMutation.error?.message}
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
<DialogFooter className="mt-4">
|
<DialogFooter className="mt-4">
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={settingsMutation.isPending || isValidating}
|
disabled={settingsMutation.isPending || isValidating}
|
||||||
>
|
>
|
||||||
{settingsMutation.isPending
|
{settingsMutation.isPending
|
||||||
? "Saving..."
|
? "Saving..."
|
||||||
: isValidating
|
: isValidating
|
||||||
? "Validating..."
|
? "Validating..."
|
||||||
: "Save"}
|
: "Save"}
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</form>
|
</form>
|
||||||
</FormProvider>
|
</FormProvider>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default OllamaSettingsDialog;
|
export default OllamaSettingsDialog;
|
||||||
|
|
|
||||||
|
|
@ -9,162 +9,162 @@ import type { ProviderHealthResponse } from "@/app/api/queries/useProviderHealth
|
||||||
import OpenAILogo from "@/components/icons/openai-logo";
|
import OpenAILogo from "@/components/icons/openai-logo";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
DialogFooter,
|
DialogFooter,
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import {
|
import {
|
||||||
OpenAISettingsForm,
|
OpenAISettingsForm,
|
||||||
type OpenAISettingsFormData,
|
type OpenAISettingsFormData,
|
||||||
} from "./openai-settings-form";
|
} from "./openai-settings-form";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
const OpenAISettingsDialog = ({
|
const OpenAISettingsDialog = ({
|
||||||
open,
|
open,
|
||||||
setOpen,
|
setOpen,
|
||||||
}: {
|
}: {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
setOpen: (open: boolean) => void;
|
setOpen: (open: boolean) => void;
|
||||||
}) => {
|
}) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const [isValidating, setIsValidating] = useState(false);
|
const [isValidating, setIsValidating] = useState(false);
|
||||||
const [validationError, setValidationError] = useState<Error | null>(null);
|
const [validationError, setValidationError] = useState<Error | null>(null);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const methods = useForm<OpenAISettingsFormData>({
|
const methods = useForm<OpenAISettingsFormData>({
|
||||||
mode: "onSubmit",
|
mode: "onSubmit",
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
apiKey: "",
|
apiKey: "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { handleSubmit, watch } = methods;
|
const { handleSubmit, watch } = methods;
|
||||||
const apiKey = watch("apiKey");
|
const apiKey = watch("apiKey");
|
||||||
|
|
||||||
const { refetch: validateCredentials } = useGetOpenAIModelsQuery(
|
const { refetch: validateCredentials } = useGetOpenAIModelsQuery(
|
||||||
{
|
{
|
||||||
apiKey: apiKey,
|
apiKey: apiKey,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
enabled: false,
|
enabled: false,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
const settingsMutation = useUpdateSettingsMutation({
|
const settingsMutation = useUpdateSettingsMutation({
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
// Update provider health cache to healthy since backend validated the setup
|
// Update provider health cache to healthy since backend validated the setup
|
||||||
const healthData: ProviderHealthResponse = {
|
const healthData: ProviderHealthResponse = {
|
||||||
status: "healthy",
|
status: "healthy",
|
||||||
message: "Provider is configured and working correctly",
|
message: "Provider is configured and working correctly",
|
||||||
provider: "openai",
|
provider: "openai",
|
||||||
};
|
};
|
||||||
queryClient.setQueryData(["provider", "health"], healthData);
|
queryClient.setQueryData(["provider", "health"], healthData);
|
||||||
|
|
||||||
toast.message("OpenAI successfully configured", {
|
toast.message("OpenAI successfully configured", {
|
||||||
description:
|
description:
|
||||||
"You can now access the provided language and embedding models.",
|
"You can now access the provided language and embedding models.",
|
||||||
duration: Infinity,
|
duration: Infinity,
|
||||||
closeButton: true,
|
closeButton: true,
|
||||||
icon: <OpenAILogo className="w-4 h-4" />,
|
icon: <OpenAILogo className="w-4 h-4" />,
|
||||||
action: {
|
action: {
|
||||||
label: "Settings",
|
label: "Settings",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
router.push("/settings");
|
router.push("/settings?focusLlmModel=true");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = async (data: OpenAISettingsFormData) => {
|
const onSubmit = async (data: OpenAISettingsFormData) => {
|
||||||
// Clear any previous validation errors
|
// Clear any previous validation errors
|
||||||
setValidationError(null);
|
setValidationError(null);
|
||||||
|
|
||||||
// Only validate if a new API key was entered
|
// Only validate if a new API key was entered
|
||||||
if (data.apiKey) {
|
if (data.apiKey) {
|
||||||
setIsValidating(true);
|
setIsValidating(true);
|
||||||
const result = await validateCredentials();
|
const result = await validateCredentials();
|
||||||
setIsValidating(false);
|
setIsValidating(false);
|
||||||
|
|
||||||
if (result.isError) {
|
if (result.isError) {
|
||||||
setValidationError(result.error);
|
setValidationError(result.error);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const payload: {
|
const payload: {
|
||||||
openai_api_key?: string;
|
openai_api_key?: string;
|
||||||
} = {};
|
} = {};
|
||||||
|
|
||||||
// Only include api_key if a value was entered
|
// Only include api_key if a value was entered
|
||||||
if (data.apiKey) {
|
if (data.apiKey) {
|
||||||
payload.openai_api_key = data.apiKey;
|
payload.openai_api_key = data.apiKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Submit the update
|
// Submit the update
|
||||||
settingsMutation.mutate(payload);
|
settingsMutation.mutate(payload);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
<DialogContent className="max-w-2xl">
|
<DialogContent className="max-w-2xl">
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
|
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
|
||||||
<DialogHeader className="mb-2">
|
<DialogHeader className="mb-2">
|
||||||
<DialogTitle className="flex items-center gap-3">
|
<DialogTitle className="flex items-center gap-3">
|
||||||
<div className="w-8 h-8 rounded flex items-center justify-center bg-white border">
|
<div className="w-8 h-8 rounded flex items-center justify-center bg-white border">
|
||||||
<OpenAILogo className="text-black" />
|
<OpenAILogo className="text-black" />
|
||||||
</div>
|
</div>
|
||||||
OpenAI Setup
|
OpenAI Setup
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<OpenAISettingsForm
|
<OpenAISettingsForm
|
||||||
modelsError={validationError}
|
modelsError={validationError}
|
||||||
isLoadingModels={isValidating}
|
isLoadingModels={isValidating}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{settingsMutation.isError && (
|
{settingsMutation.isError && (
|
||||||
<motion.div
|
<motion.div
|
||||||
key="error"
|
key="error"
|
||||||
initial={{ opacity: 0, y: 10 }}
|
initial={{ opacity: 0, y: 10 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
exit={{ opacity: 0, y: -10 }}
|
exit={{ opacity: 0, y: -10 }}
|
||||||
>
|
>
|
||||||
<p className="rounded-lg border border-destructive p-4">
|
<p className="rounded-lg border border-destructive p-4">
|
||||||
{settingsMutation.error?.message}
|
{settingsMutation.error?.message}
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
<DialogFooter className="mt-4">
|
<DialogFooter className="mt-4">
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={settingsMutation.isPending || isValidating}
|
disabled={settingsMutation.isPending || isValidating}
|
||||||
>
|
>
|
||||||
{settingsMutation.isPending
|
{settingsMutation.isPending
|
||||||
? "Saving..."
|
? "Saving..."
|
||||||
: isValidating
|
: isValidating
|
||||||
? "Validating..."
|
? "Validating..."
|
||||||
: "Save"}
|
: "Save"}
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</form>
|
</form>
|
||||||
</FormProvider>
|
</FormProvider>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default OpenAISettingsDialog;
|
export default OpenAISettingsDialog;
|
||||||
|
|
|
||||||
|
|
@ -9,171 +9,171 @@ import type { ProviderHealthResponse } from "@/app/api/queries/useProviderHealth
|
||||||
import IBMLogo from "@/components/icons/ibm-logo";
|
import IBMLogo from "@/components/icons/ibm-logo";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
DialogFooter,
|
DialogFooter,
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import {
|
import {
|
||||||
WatsonxSettingsForm,
|
WatsonxSettingsForm,
|
||||||
type WatsonxSettingsFormData,
|
type WatsonxSettingsFormData,
|
||||||
} from "./watsonx-settings-form";
|
} from "./watsonx-settings-form";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
const WatsonxSettingsDialog = ({
|
const WatsonxSettingsDialog = ({
|
||||||
open,
|
open,
|
||||||
setOpen,
|
setOpen,
|
||||||
}: {
|
}: {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
setOpen: (open: boolean) => void;
|
setOpen: (open: boolean) => void;
|
||||||
}) => {
|
}) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const [isValidating, setIsValidating] = useState(false);
|
const [isValidating, setIsValidating] = useState(false);
|
||||||
const [validationError, setValidationError] = useState<Error | null>(null);
|
const [validationError, setValidationError] = useState<Error | null>(null);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const methods = useForm<WatsonxSettingsFormData>({
|
const methods = useForm<WatsonxSettingsFormData>({
|
||||||
mode: "onSubmit",
|
mode: "onSubmit",
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
endpoint: "https://us-south.ml.cloud.ibm.com",
|
endpoint: "https://us-south.ml.cloud.ibm.com",
|
||||||
apiKey: "",
|
apiKey: "",
|
||||||
projectId: "",
|
projectId: "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { handleSubmit, watch } = methods;
|
const { handleSubmit, watch } = methods;
|
||||||
const endpoint = watch("endpoint");
|
const endpoint = watch("endpoint");
|
||||||
const apiKey = watch("apiKey");
|
const apiKey = watch("apiKey");
|
||||||
const projectId = watch("projectId");
|
const projectId = watch("projectId");
|
||||||
|
|
||||||
const { refetch: validateCredentials } = useGetIBMModelsQuery(
|
const { refetch: validateCredentials } = useGetIBMModelsQuery(
|
||||||
{
|
{
|
||||||
endpoint: endpoint,
|
endpoint: endpoint,
|
||||||
apiKey: apiKey,
|
apiKey: apiKey,
|
||||||
projectId: projectId,
|
projectId: projectId,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
enabled: false,
|
enabled: false,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
const settingsMutation = useUpdateSettingsMutation({
|
const settingsMutation = useUpdateSettingsMutation({
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
// Update provider health cache to healthy since backend validated the setup
|
// Update provider health cache to healthy since backend validated the setup
|
||||||
const healthData: ProviderHealthResponse = {
|
const healthData: ProviderHealthResponse = {
|
||||||
status: "healthy",
|
status: "healthy",
|
||||||
message: "Provider is configured and working correctly",
|
message: "Provider is configured and working correctly",
|
||||||
provider: "watsonx",
|
provider: "watsonx",
|
||||||
};
|
};
|
||||||
queryClient.setQueryData(["provider", "health"], healthData);
|
queryClient.setQueryData(["provider", "health"], healthData);
|
||||||
|
|
||||||
toast.message("IBM watsonx.ai successfully configured", {
|
toast.message("IBM watsonx.ai successfully configured", {
|
||||||
description:
|
description:
|
||||||
"You can now access the provided language and embedding models.",
|
"You can now access the provided language and embedding models.",
|
||||||
duration: Infinity,
|
duration: Infinity,
|
||||||
closeButton: true,
|
closeButton: true,
|
||||||
icon: <IBMLogo className="w-4 h-4 text-[#1063FE]" />,
|
icon: <IBMLogo className="w-4 h-4 text-[#1063FE]" />,
|
||||||
action: {
|
action: {
|
||||||
label: "Settings",
|
label: "Settings",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
router.push("/settings");
|
router.push("/settings?focusLlmModel=true");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = async (data: WatsonxSettingsFormData) => {
|
const onSubmit = async (data: WatsonxSettingsFormData) => {
|
||||||
// Clear any previous validation errors
|
// Clear any previous validation errors
|
||||||
setValidationError(null);
|
setValidationError(null);
|
||||||
|
|
||||||
// Validate credentials by fetching models
|
// Validate credentials by fetching models
|
||||||
setIsValidating(true);
|
setIsValidating(true);
|
||||||
const result = await validateCredentials();
|
const result = await validateCredentials();
|
||||||
setIsValidating(false);
|
setIsValidating(false);
|
||||||
|
|
||||||
if (result.isError) {
|
if (result.isError) {
|
||||||
setValidationError(result.error);
|
setValidationError(result.error);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const payload: {
|
const payload: {
|
||||||
watsonx_endpoint: string;
|
watsonx_endpoint: string;
|
||||||
watsonx_api_key?: string;
|
watsonx_api_key?: string;
|
||||||
watsonx_project_id: string;
|
watsonx_project_id: string;
|
||||||
} = {
|
} = {
|
||||||
watsonx_endpoint: data.endpoint,
|
watsonx_endpoint: data.endpoint,
|
||||||
watsonx_project_id: data.projectId,
|
watsonx_project_id: data.projectId,
|
||||||
};
|
};
|
||||||
|
|
||||||
// Only include api_key if a value was entered
|
// Only include api_key if a value was entered
|
||||||
if (data.apiKey) {
|
if (data.apiKey) {
|
||||||
payload.watsonx_api_key = data.apiKey;
|
payload.watsonx_api_key = data.apiKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Submit the update
|
// Submit the update
|
||||||
settingsMutation.mutate(payload);
|
settingsMutation.mutate(payload);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
<DialogContent autoFocus={false} className="max-w-2xl">
|
<DialogContent autoFocus={false} className="max-w-2xl">
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
|
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
|
||||||
<DialogHeader className="mb-2">
|
<DialogHeader className="mb-2">
|
||||||
<DialogTitle className="flex items-center gap-3">
|
<DialogTitle className="flex items-center gap-3">
|
||||||
<div className="w-8 h-8 rounded flex items-center justify-center bg-white border">
|
<div className="w-8 h-8 rounded flex items-center justify-center bg-white border">
|
||||||
<IBMLogo className="text-black" />
|
<IBMLogo className="text-black" />
|
||||||
</div>
|
</div>
|
||||||
IBM watsonx.ai Setup
|
IBM watsonx.ai Setup
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<WatsonxSettingsForm
|
<WatsonxSettingsForm
|
||||||
modelsError={validationError}
|
modelsError={validationError}
|
||||||
isLoadingModels={isValidating}
|
isLoadingModels={isValidating}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{settingsMutation.isError && (
|
{settingsMutation.isError && (
|
||||||
<motion.div
|
<motion.div
|
||||||
key="error"
|
key="error"
|
||||||
initial={{ opacity: 0, y: 10 }}
|
initial={{ opacity: 0, y: 10 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
exit={{ opacity: 0, y: -10 }}
|
exit={{ opacity: 0, y: -10 }}
|
||||||
>
|
>
|
||||||
<p className="rounded-lg border border-destructive p-4">
|
<p className="rounded-lg border border-destructive p-4">
|
||||||
{settingsMutation.error?.message}
|
{settingsMutation.error?.message}
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
<DialogFooter className="mt-4">
|
<DialogFooter className="mt-4">
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={settingsMutation.isPending || isValidating}
|
disabled={settingsMutation.isPending || isValidating}
|
||||||
>
|
>
|
||||||
{settingsMutation.isPending
|
{settingsMutation.isPending
|
||||||
? "Saving..."
|
? "Saving..."
|
||||||
: isValidating
|
: isValidating
|
||||||
? "Validating..."
|
? "Validating..."
|
||||||
: "Save"}
|
: "Save"}
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</form>
|
</form>
|
||||||
</FormProvider>
|
</FormProvider>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default WatsonxSettingsDialog;
|
export default WatsonxSettingsDialog;
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue