format
This commit is contained in:
Cole Goldsmith
parent
cf8eb9ccce
commit
697baceb5f
5 changed files with 146 additions and 140 deletions
|
|
@ -9,162 +9,161 @@ import type { ProviderHealthResponse } from "@/app/api/queries/useProviderHealth
|
|||
import AnthropicLogo from "@/components/icons/anthropic-logo";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
AnthropicSettingsForm,
|
||||
type AnthropicSettingsFormData,
|
||||
AnthropicSettingsForm,
|
||||
type AnthropicSettingsFormData,
|
||||
} from "./anthropic-settings-form";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const AnthropicSettingsDialog = ({
|
||||
open,
|
||||
setOpen,
|
||||
open,
|
||||
setOpen,
|
||||
}: {
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
}) => {
|
||||
const queryClient = useQueryClient();
|
||||
const [isValidating, setIsValidating] = useState(false);
|
||||
const [validationError, setValidationError] = useState<Error | null>(null);
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const [isValidating, setIsValidating] = useState(false);
|
||||
const [validationError, setValidationError] = useState<Error | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
const methods = useForm<AnthropicSettingsFormData>({
|
||||
mode: "onSubmit",
|
||||
defaultValues: {
|
||||
apiKey: "",
|
||||
},
|
||||
});
|
||||
const methods = useForm<AnthropicSettingsFormData>({
|
||||
mode: "onSubmit",
|
||||
defaultValues: {
|
||||
apiKey: "",
|
||||
},
|
||||
});
|
||||
|
||||
const { handleSubmit, watch } = methods;
|
||||
const apiKey = watch("apiKey");
|
||||
const { handleSubmit, watch } = methods;
|
||||
const apiKey = watch("apiKey");
|
||||
|
||||
const { refetch: validateCredentials } = useGetAnthropicModelsQuery(
|
||||
{
|
||||
apiKey: apiKey,
|
||||
},
|
||||
{
|
||||
enabled: false,
|
||||
},
|
||||
);
|
||||
const { refetch: validateCredentials } = useGetAnthropicModelsQuery(
|
||||
{
|
||||
apiKey: apiKey,
|
||||
},
|
||||
{
|
||||
enabled: false,
|
||||
},
|
||||
);
|
||||
|
||||
const settingsMutation = useUpdateSettingsMutation({
|
||||
onSuccess: () => {
|
||||
// Update provider health cache to healthy since backend validated the setup
|
||||
const healthData: ProviderHealthResponse = {
|
||||
status: "healthy",
|
||||
message: "Provider is configured and working correctly",
|
||||
provider: "anthropic",
|
||||
};
|
||||
queryClient.setQueryData(["provider", "health"], healthData);
|
||||
const settingsMutation = useUpdateSettingsMutation({
|
||||
onSuccess: () => {
|
||||
// Update provider health cache to healthy since backend validated the setup
|
||||
const healthData: ProviderHealthResponse = {
|
||||
status: "healthy",
|
||||
message: "Provider is configured and working correctly",
|
||||
provider: "anthropic",
|
||||
};
|
||||
queryClient.setQueryData(["provider", "health"], healthData);
|
||||
|
||||
toast.message("Anthropic successfully configured", {
|
||||
description:
|
||||
"You can now access the provided language models.",
|
||||
duration: Infinity,
|
||||
closeButton: true,
|
||||
icon: <AnthropicLogo className="w-4 h-4 text-[#D97757]" />,
|
||||
action: {
|
||||
label: "Settings",
|
||||
onClick: () => {
|
||||
router.push("/settings");
|
||||
},
|
||||
},
|
||||
});
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
toast.message("Anthropic successfully configured", {
|
||||
description: "You can now access the provided language models.",
|
||||
duration: Infinity,
|
||||
closeButton: true,
|
||||
icon: <AnthropicLogo className="w-4 h-4 text-[#D97757]" />,
|
||||
action: {
|
||||
label: "Settings",
|
||||
onClick: () => {
|
||||
router.push("/settings");
|
||||
},
|
||||
},
|
||||
});
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: AnthropicSettingsFormData) => {
|
||||
// Clear any previous validation errors
|
||||
setValidationError(null);
|
||||
const onSubmit = async (data: AnthropicSettingsFormData) => {
|
||||
// Clear any previous validation errors
|
||||
setValidationError(null);
|
||||
|
||||
// Only validate if a new API key was entered
|
||||
if (data.apiKey) {
|
||||
setIsValidating(true);
|
||||
const result = await validateCredentials();
|
||||
setIsValidating(false);
|
||||
// Only validate if a new API key was entered
|
||||
if (data.apiKey) {
|
||||
setIsValidating(true);
|
||||
const result = await validateCredentials();
|
||||
setIsValidating(false);
|
||||
|
||||
if (result.isError) {
|
||||
setValidationError(result.error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (result.isError) {
|
||||
setValidationError(result.error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const payload: {
|
||||
anthropic_api_key?: string;
|
||||
} = {};
|
||||
const payload: {
|
||||
anthropic_api_key?: string;
|
||||
} = {};
|
||||
|
||||
// Only include api_key if a value was entered
|
||||
if (data.apiKey) {
|
||||
payload.anthropic_api_key = data.apiKey;
|
||||
}
|
||||
// Only include api_key if a value was entered
|
||||
if (data.apiKey) {
|
||||
payload.anthropic_api_key = data.apiKey;
|
||||
}
|
||||
|
||||
// Submit the update
|
||||
settingsMutation.mutate(payload);
|
||||
};
|
||||
// Submit the update
|
||||
settingsMutation.mutate(payload);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
|
||||
<DialogHeader className="mb-2">
|
||||
<DialogTitle className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded flex items-center justify-center bg-white border">
|
||||
<AnthropicLogo className="text-black" />
|
||||
</div>
|
||||
Anthropic Setup
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
|
||||
<DialogHeader className="mb-2">
|
||||
<DialogTitle className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded flex items-center justify-center bg-white border">
|
||||
<AnthropicLogo className="text-black" />
|
||||
</div>
|
||||
Anthropic Setup
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<AnthropicSettingsForm
|
||||
modelsError={validationError}
|
||||
isLoadingModels={isValidating}
|
||||
/>
|
||||
<AnthropicSettingsForm
|
||||
modelsError={validationError}
|
||||
isLoadingModels={isValidating}
|
||||
/>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{settingsMutation.isError && (
|
||||
<motion.div
|
||||
key="error"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
>
|
||||
<p className="rounded-lg border border-destructive p-4">
|
||||
{settingsMutation.error?.message}
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={settingsMutation.isPending || isValidating}
|
||||
>
|
||||
{settingsMutation.isPending
|
||||
? "Saving..."
|
||||
: isValidating
|
||||
? "Validating..."
|
||||
: "Save"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</FormProvider>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
<AnimatePresence mode="wait">
|
||||
{settingsMutation.isError && (
|
||||
<motion.div
|
||||
key="error"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
>
|
||||
<p className="rounded-lg border border-destructive p-4">
|
||||
{settingsMutation.error?.message}
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={settingsMutation.isPending || isValidating}
|
||||
>
|
||||
{settingsMutation.isPending
|
||||
? "Saving..."
|
||||
: isValidating
|
||||
? "Validating..."
|
||||
: "Save"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</FormProvider>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default AnthropicSettingsDialog;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const OllamaSettingsDialog = ({
|
|||
const [isValidating, setIsValidating] = useState(false);
|
||||
const [validationError, setValidationError] = useState<Error | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
const { data: settings = {} } = useGetSettingsQuery({
|
||||
enabled: isAuthenticated || isNoAuthMode,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const OpenAISettingsDialog = ({
|
|||
const [isValidating, setIsValidating] = useState(false);
|
||||
const [validationError, setValidationError] = useState<Error | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
const methods = useForm<OpenAISettingsFormData>({
|
||||
mode: "onSubmit",
|
||||
defaultValues: {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const WatsonxSettingsDialog = ({
|
|||
const [isValidating, setIsValidating] = useState(false);
|
||||
const [validationError, setValidationError] = useState<Error | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
const methods = useForm<WatsonxSettingsFormData>({
|
||||
mode: "onSubmit",
|
||||
defaultValues: {
|
||||
|
|
@ -67,7 +67,7 @@ const WatsonxSettingsDialog = ({
|
|||
provider: "watsonx",
|
||||
};
|
||||
queryClient.setQueryData(["provider", "health"], healthData);
|
||||
|
||||
|
||||
toast.message("IBM watsonx.ai successfully configured", {
|
||||
description:
|
||||
"You can now access the provided language and embedding models.",
|
||||
|
|
|
|||
|
|
@ -785,7 +785,12 @@ function KnowledgeSourcesPage() {
|
|||
<div className="flex flex-col gap-3">
|
||||
<div className="mb-1">
|
||||
<div
|
||||
className={cn("w-8 h-8 rounded flex items-center justify-center border", connector?.available ? "bg-white" : "bg-muted grayscale")}
|
||||
className={cn(
|
||||
"w-8 h-8 rounded flex items-center justify-center border",
|
||||
connector?.available
|
||||
? "bg-white"
|
||||
: "bg-muted grayscale",
|
||||
)}
|
||||
>
|
||||
{connector.icon}
|
||||
</div>
|
||||
|
|
@ -794,7 +799,9 @@ function KnowledgeSourcesPage() {
|
|||
{connector.name}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm">
|
||||
{connector?.available ? `${connector.name} is configured.` : "Not configured."}
|
||||
{connector?.available
|
||||
? `${connector.name} is configured.`
|
||||
: "Not configured."}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue