Skip to content

Commit

Permalink
fix: prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@iwilltry42
iwilltry42 committed Jan 15, 2025
1 parent 06f4cf1 commit c633205
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 151 deletions.
195 changes: 90 additions & 105 deletions ui/admin/app/components/model-providers/ModelProviderForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,37 +125,32 @@ export function ModelProviderForm({
}
);

const validateAndConfigureModelProvider = useAsync(
ModelProviderApiService.validateModelProviderById,
{
onSuccess: async (data, params) => {
// Only configure the model provider if validation was successful
const [modelProviderId, configParams] = params;
await configureModelProvider.execute(
modelProviderId,
configParams
);
},
onError: (error) => {
// Handle validation errors
console.error("Validation failed:", error);
},
}
);
const validateAndConfigureModelProvider = useAsync(
ModelProviderApiService.validateModelProviderById,
{
onSuccess: async (data, params) => {
// Only configure the model provider if validation was successful
const [modelProviderId, configParams] = params;
await configureModelProvider.execute(modelProviderId, configParams);
},
onError: (error) => {
// Handle validation errors
console.error("Validation failed:", error);
},
}
);

const configureModelProvider = useAsync(
ModelProviderApiService.configureModelProviderById,
{
onSuccess: async () => {
mutate(
ModelProviderApiService.revealModelProviderById.key(
modelProvider.id
)
);
await fetchAvailableModels.execute(modelProvider.id);
},
}
);
const configureModelProvider = useAsync(
ModelProviderApiService.configureModelProviderById,
{
onSuccess: async () => {
mutate(
ModelProviderApiService.revealModelProviderById.key(modelProvider.id)
);
await fetchAvailableModels.execute(modelProvider.id);
},
}
);

const form = useForm<ModelProviderFormValues>({
resolver: zodResolver(formSchema),
Expand Down Expand Up @@ -204,87 +199,77 @@ export function ModelProviderForm({
}
);

await validateAndConfigureModelProvider.execute(
modelProvider.id,
allConfigParams
);
}
);
await validateAndConfigureModelProvider.execute(
modelProvider.id,
allConfigParams
);
}
);

const FORM_ID = "model-provider-form";
const showCustomConfiguration =
modelProvider.id === "azure-openai-model-provider";

const loading =
validateAndConfigureModelProvider.isLoading ||
fetchAvailableModels.isLoading ||
configureModelProvider.isLoading ||
isLoading;
const loading =
validateAndConfigureModelProvider.isLoading ||
fetchAvailableModels.isLoading ||
configureModelProvider.isLoading ||
isLoading;

return (
<div className="flex flex-col">
{validateAndConfigureModelProvider.error !== null && (
<div className="px-4">
<Alert variant="destructive">
<CircleAlertIcon className="w-4 h-4" />
<AlertTitle>An error occurred!</AlertTitle>
<AlertDescription>
Your configuration could not be saved, because it
failed validation:{" "}
<strong>
{(typeof validateAndConfigureModelProvider.error ===
"object" &&
"message" in
validateAndConfigureModelProvider.error &&
(validateAndConfigureModelProvider.error
.message as string)) ??
"Unknown error"}
</strong>
</AlertDescription>
</Alert>
</div>
)}
{validateAndConfigureModelProvider.error === null &&
fetchAvailableModels.error !== null && (
<div className="px-4">
<Alert variant="destructive">
<CircleAlertIcon className="w-4 h-4" />
<AlertTitle>An error occurred!</AlertTitle>
<AlertDescription>
Your configuration was saved, but we were not
able to connect to the model provider. Please
check your configuration and try again:{" "}
<strong>
{(typeof fetchAvailableModels.error ===
"object" &&
"message" in
fetchAvailableModels.error &&
(fetchAvailableModels.error
.message as string)) ??
"Unknown error"}
</strong>
</AlertDescription>
</Alert>
</div>
)}
<ScrollArea className="max-h-[50vh]">
<div className="flex flex-col gap-4 p-4">
<h4 className="font-semibold text-md">
Required Configuration
</h4>
<Form {...form}>
<form
id={FORM_ID}
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-col gap-4"
>
{requiredConfigParamFields.fields.map(
(field, i) => {
const type = ModelProviderSensitiveFields[
field.name
]
? "password"
: "text";
return (
<div className="flex flex-col">
{validateAndConfigureModelProvider.error !== null && (
<div className="px-4">
<Alert variant="destructive">
<CircleAlertIcon className="h-4 w-4" />
<AlertTitle>An error occurred!</AlertTitle>
<AlertDescription>
Your configuration could not be saved, because it failed
validation:{" "}
<strong>
{(typeof validateAndConfigureModelProvider.error === "object" &&
"message" in validateAndConfigureModelProvider.error &&
(validateAndConfigureModelProvider.error
.message as string)) ??
"Unknown error"}
</strong>
</AlertDescription>
</Alert>
</div>
)}
{validateAndConfigureModelProvider.error === null &&
fetchAvailableModels.error !== null && (
<div className="px-4">
<Alert variant="destructive">
<CircleAlertIcon className="h-4 w-4" />
<AlertTitle>An error occurred!</AlertTitle>
<AlertDescription>
Your configuration was saved, but we were not able to connect to
the model provider. Please check your configuration and try
again:{" "}
<strong>
{(typeof fetchAvailableModels.error === "object" &&
"message" in fetchAvailableModels.error &&
(fetchAvailableModels.error.message as string)) ??
"Unknown error"}
</strong>
</AlertDescription>
</Alert>
</div>
)}
<ScrollArea className="max-h-[50vh]">
<div className="flex flex-col gap-4 p-4">
<h4 className="text-md font-semibold">Required Configuration</h4>
<Form {...form}>
<form
id={FORM_ID}
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-col gap-4"
>
{requiredConfigParamFields.fields.map((field, i) => {
const type = ModelProviderSensitiveFields[field.name]
? "password"
: "text";

return (
<div
Expand Down
53 changes: 24 additions & 29 deletions ui/admin/app/hooks/useAsync.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,35 +47,30 @@ export function useAsync<TData, TParams extends unknown[]>(
setLastCallParams(params);
const promise = callback(...params);

promise
.then((data) => {
setData(data);
onSuccess?.(data, params);
})
.catch((error) => {
// If the response data is a JSON string with an error field
// unpack that error field's value into the error message
if (
error.response &&
typeof error.response.data === "string"
) {
const errorMessageMatch =
error.response.data.match(/{"error":\s+"(.*?)"}/);
if (errorMessageMatch) {
const errorMessage = JSON.parse(
errorMessageMatch[0]
).error;
console.log("Error: ", errorMessage);
error.message = errorMessage;
}
}
setError(error);
onError?.(error, params);
})
.finally(() => {
setIsLoading(false);
onSettled?.({ params });
});
promise
.then((data) => {
setData(data);
onSuccess?.(data, params);
})
.catch((error) => {
// If the response data is a JSON string with an error field
// unpack that error field's value into the error message
if (error.response && typeof error.response.data === "string") {
const errorMessageMatch =
error.response.data.match(/{"error":\s+"(.*?)"}/);
if (errorMessageMatch) {
const errorMessage = JSON.parse(errorMessageMatch[0]).error;
console.log("Error: ", errorMessage);
error.message = errorMessage;
}
}
setError(error);
onError?.(error, params);
})
.finally(() => {
setIsLoading(false);
onSettled?.({ params });
});

return await handlePromise(promise);
},
Expand Down
4 changes: 2 additions & 2 deletions ui/admin/app/lib/routers/apiRoutes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,8 +262,8 @@ export const ApiRoutes = {
getModelProviders: () => buildUrl("/model-providers"),
getModelProviderById: (modelProviderKey: string) =>
buildUrl(`/model-providers/${modelProviderKey}`),
validateModelProviderById: (modelProviderKey: string) =>
buildUrl(`/model-providers/${modelProviderKey}/validate`),
validateModelProviderById: (modelProviderKey: string) =>
buildUrl(`/model-providers/${modelProviderKey}/validate`),
configureModelProviderById: (modelProviderKey: string) =>
buildUrl(`/model-providers/${modelProviderKey}/configure`),
revealModelProviderById: (modelProviderKey: string) =>
Expand Down
29 changes: 14 additions & 15 deletions ui/admin/app/lib/service/api/modelProviderApiService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,19 @@ getModelProviderById.key = (modelProviderId?: string) => {
};

const validateModelProviderById = async (
modelProviderKey: string,
modelProviderConfig: ModelProviderConfig
modelProviderKey: string,
modelProviderConfig: ModelProviderConfig
) => {
const res = await request<ModelProvider>({
url: ApiRoutes.modelProviders.validateModelProviderById(
modelProviderKey
).url,
method: "POST",
data: modelProviderConfig,
errorMessage:
"Failed to validate configuration values on the requested modal provider.",
});
const res = await request<ModelProvider>({
url: ApiRoutes.modelProviders.validateModelProviderById(modelProviderKey)
.url,
method: "POST",
data: modelProviderConfig,
errorMessage:
"Failed to validate configuration values on the requested modal provider.",
});

return res.data;
return res.data;
};

const configureModelProviderById = async (
Expand Down Expand Up @@ -99,7 +98,7 @@ export const ModelProviderApiService = {
getModelProviders,
getModelProviderById,
validateModelProviderById,
configureModelProviderById,
revealModelProviderById,
deconfigureModelProviderById,
configureModelProviderById,
revealModelProviderById,
deconfigureModelProviderById,
};

0 comments on commit c633205

Please sign in to comment.