diff --git a/ui/admin/app/components/composed/WarningAlert.tsx b/ui/admin/app/components/composed/WarningAlert.tsx new file mode 100644 index 00000000..af24df32 --- /dev/null +++ b/ui/admin/app/components/composed/WarningAlert.tsx @@ -0,0 +1,19 @@ +import { CircleAlertIcon } from "lucide-react"; + +import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert"; + +export function WarningAlert({ + title, + description, +}: { + title: string; + description: React.ReactNode; +}) { + return ( + + + {title} + {description} + + ); +} diff --git a/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx b/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx index 90ce7254..f4dc28e2 100644 --- a/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx +++ b/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx @@ -11,6 +11,7 @@ import { UploadIcon, } from "lucide-react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { $path } from "remix-routes"; import useSWR, { SWRResponse } from "swr"; import { Agent } from "~/lib/model/agents"; @@ -23,10 +24,14 @@ import { getKnowledgeSourceDisplayName, getKnowledgeSourceType, } from "~/lib/model/knowledge"; +import { ModelAlias } from "~/lib/model/models"; +import { DefaultModelAliasApiService } from "~/lib/service/api/defaultModelAliasApiService"; import { KnowledgeService } from "~/lib/service/api/knowledgeService"; import { assetUrl } from "~/lib/utils"; +import { TypographyP } from "~/components/Typography"; import { ErrorDialog } from "~/components/composed/ErrorDialog"; +import { WarningAlert } from "~/components/composed/WarningAlert"; import AddSourceModal from "~/components/knowledge/AddSourceModal"; import FileStatusIcon from "~/components/knowledge/FileStatusIcon"; import RemoteFileAvatar from "~/components/knowledge/KnowledgeSourceAvatar"; @@ -41,6 +46,7 @@ import { } from "~/components/ui/dropdown-menu"; import { Input } from "~/components/ui/input"; import { Label } from "~/components/ui/label"; +import { Link } from "~/components/ui/link"; import { AutosizeTextarea } from "~/components/ui/textarea"; import { Tooltip, @@ -80,6 +86,11 @@ export default function AgentKnowledgePanel({ const [errorDialogError, setErrorDialogError] = useState(""); + const { data: defaultAliases } = useSWR( + DefaultModelAliasApiService.getAliases.key(), + DefaultModelAliasApiService.getAliases + ); + const getLocalFiles: SWRResponse = useSWR( KnowledgeService.getLocalKnowledgeFilesForAgent.key(agentId), ({ agentId }) => @@ -216,11 +227,29 @@ export default function AgentKnowledgePanel({ ); }, [knowledgeSources, selectedKnowledgeSourceId]); + const hasDefaultTextEmbedding = defaultAliases?.some( + (alias) => alias.alias === ModelAlias.TextEmbedding && !!alias.model + ); return (
+ {!hasDefaultTextEmbedding && ( + + In order to process the knowledge base for your + agent, you'll need to set up a default text + embedding model. Click{" "} + here to + update your model provider and/or default models. + + } + /> + )}
Add Knowledge diff --git a/ui/admin/app/routes/_auth.agents.$agent.tsx b/ui/admin/app/routes/_auth.agents.$agent.tsx index 0f7d8693..22d14732 100644 --- a/ui/admin/app/routes/_auth.agents.$agent.tsx +++ b/ui/admin/app/routes/_auth.agents.$agent.tsx @@ -6,8 +6,10 @@ import { } from "@remix-run/react"; import { useCallback } from "react"; import { $path } from "remix-routes"; +import { preload } from "swr"; import { AgentService } from "~/lib/service/api/agentService"; +import { DefaultModelAliasApiService } from "~/lib/service/api/defaultModelAliasApiService"; import { RouteQueryParams, RouteService } from "~/lib/service/routeService"; import { noop } from "~/lib/utils"; @@ -37,6 +39,11 @@ export const clientLoader = async ({ throw redirect("/agents"); } + await preload( + DefaultModelAliasApiService.getAliases.key(), + DefaultModelAliasApiService.getAliases + ); + // preload the agent const agent = await AgentService.getAgentById(agentId).catch(noop); diff --git a/ui/admin/app/routes/_auth.model-providers.tsx b/ui/admin/app/routes/_auth.model-providers.tsx index 3b580711..e77cf901 100644 --- a/ui/admin/app/routes/_auth.model-providers.tsx +++ b/ui/admin/app/routes/_auth.model-providers.tsx @@ -1,4 +1,3 @@ -import { CircleAlertIcon } from "lucide-react"; import useSWR, { preload } from "swr"; import { ModelProvider } from "~/lib/model/modelProviders"; @@ -7,10 +6,10 @@ import { ModelApiService } from "~/lib/service/api/modelApiService"; import { ModelProviderApiService } from "~/lib/service/api/modelProviderApiService"; import { TypographyH2 } from "~/components/Typography"; +import { WarningAlert } from "~/components/composed/WarningAlert"; import { ModelProviderList } from "~/components/model-providers/ModelProviderLists"; import { CommonModelProviderIds } from "~/components/model-providers/constants"; import { DefaultModelAliasFormDialog } from "~/components/model/DefaultModelAliasForm"; -import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert"; export async function clientLoader() { await Promise.all([ @@ -75,17 +74,12 @@ export default function ModelProviders() {
{configured ? null : ( - - - - No Model Providers Configured! - - - To use Otto's features, you'll need to + )}