b88c8b20df
* models query combined * make endpoint to handle provider health * provider health banner * update-pdf-to-include-provider-selection (#344) * polishing the error fixing experience * fix agent instructions and up char limit * fix provider * disable tracing in langflow * improve docling serve banner remove false positives * Changed pyproject.toml docling versions * Added another uv lock revision * version bump * unused things and fix bad conflicts * add isFetching to the hook * put back settings for models queries to never cache results * update banner refetching indicator * validate provider settings when saving * fix settings page layout issue * Added retry as false on the get models, to not take a long time --------- Co-authored-by: Mendon Kissling <59585235+mendonk@users.noreply.github.com> Co-authored-by: Mike Fortman <michael.fortman@datastax.com> Co-authored-by: phact <estevezsebastian@gmail.com> Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>
74 lines
2 KiB
TypeScript
74 lines
2 KiB
TypeScript
"use client";
|
|
|
|
import { AlertTriangle } from "lucide-react";
|
|
import { Banner, BannerIcon, BannerTitle } from "@/components/ui/banner";
|
|
import { cn } from "@/lib/utils";
|
|
import { useProviderHealthQuery } from "@/src/app/api/queries/useProviderHealthQuery";
|
|
import { Button } from "./ui/button";
|
|
import { useRouter } from "next/navigation";
|
|
import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
|
|
|
|
interface ProviderHealthBannerProps {
|
|
className?: string;
|
|
}
|
|
|
|
// Custom hook to check provider health status
|
|
export function useProviderHealth() {
|
|
const {
|
|
data: health,
|
|
isLoading,
|
|
isFetching,
|
|
error,
|
|
isError,
|
|
} = useProviderHealthQuery();
|
|
|
|
const isHealthy = health?.status === "healthy" && !isError;
|
|
const isUnhealthy =
|
|
health?.status === "unhealthy" || health?.status === "error" || isError;
|
|
|
|
return {
|
|
health,
|
|
isLoading,
|
|
isFetching,
|
|
error,
|
|
isError,
|
|
isHealthy,
|
|
isUnhealthy,
|
|
};
|
|
}
|
|
|
|
export function ProviderHealthBanner({ className }: ProviderHealthBannerProps) {
|
|
const { isLoading, isHealthy, error } = useProviderHealth();
|
|
const router = useRouter();
|
|
|
|
const { data: settings = {} } = useGetSettingsQuery();
|
|
|
|
if (!isHealthy && !isLoading) {
|
|
const errorMessage = error?.message || "Provider validation failed";
|
|
const settingsUrl = settings.provider?.model_provider
|
|
? `/settings?setup=${settings.provider?.model_provider}`
|
|
: "/settings";
|
|
|
|
return (
|
|
<Banner
|
|
className={cn(
|
|
"bg-red-50 dark:bg-red-950 text-foreground border-accent-red border-b w-full",
|
|
className
|
|
)}
|
|
>
|
|
<BannerIcon
|
|
className="text-accent-red-foreground"
|
|
icon={AlertTriangle}
|
|
/>
|
|
<BannerTitle className="font-medium flex items-center gap-2">
|
|
{errorMessage}
|
|
</BannerTitle>
|
|
<Button size="sm" onClick={() => router.push(settingsUrl)}>
|
|
Fix Setup
|
|
</Button>
|
|
</Banner>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|