From 697baceb5f3fe68ab72e4b1a512609ff4c8a8c17 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.goldsmith@ibm.com>
Date: Wed, 19 Nov 2025 13:16:59 -0600
Subject: [PATCH] format

---
 .../_components/anthropic-settings-dialog.tsx | 267 +++++++++---------
 .../_components/ollama-settings-dialog.tsx    |   2 +-
 .../_components/openai-settings-dialog.tsx    |   2 +-
 .../_components/watsonx-settings-dialog.tsx   |   4 +-
 frontend/app/settings/page.tsx                |  11 +-
 5 files changed, 146 insertions(+), 140 deletions(-)

diff --git a/frontend/app/settings/_components/anthropic-settings-dialog.tsx b/frontend/app/settings/_components/anthropic-settings-dialog.tsx
index 189d8afe..131515f1 100644
--- a/frontend/app/settings/_components/anthropic-settings-dialog.tsx
+++ b/frontend/app/settings/_components/anthropic-settings-dialog.tsx
@@ -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;
diff --git a/frontend/app/settings/_components/ollama-settings-dialog.tsx b/frontend/app/settings/_components/ollama-settings-dialog.tsx
index 90a1f580..ef47c859 100644
--- a/frontend/app/settings/_components/ollama-settings-dialog.tsx
+++ b/frontend/app/settings/_components/ollama-settings-dialog.tsx
@@ -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,
   });
diff --git a/frontend/app/settings/_components/openai-settings-dialog.tsx b/frontend/app/settings/_components/openai-settings-dialog.tsx
index 1bb57df3..7def5795 100644
--- a/frontend/app/settings/_components/openai-settings-dialog.tsx
+++ b/frontend/app/settings/_components/openai-settings-dialog.tsx
@@ -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: {
diff --git a/frontend/app/settings/_components/watsonx-settings-dialog.tsx b/frontend/app/settings/_components/watsonx-settings-dialog.tsx
index fb9b62f7..1d69e64b 100644
--- a/frontend/app/settings/_components/watsonx-settings-dialog.tsx
+++ b/frontend/app/settings/_components/watsonx-settings-dialog.tsx
@@ -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.",
diff --git a/frontend/app/settings/page.tsx b/frontend/app/settings/page.tsx
index d81f204d..ca8158a8 100644
--- a/frontend/app/settings/page.tsx
+++ b/frontend/app/settings/page.tsx
@@ -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>