enhance: if no default text-embedding set, disable knowledge for agen…

…t/workflows (#833)

* enhance: if no default text-embedding set, disable knowledge for agent/workflows

* Update WarningAlert.tsx

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 (
+        <Alert variant="default">
+            <CircleAlertIcon className="w-4 h-4 !text-warning" />
+            <AlertTitle>{title}</AlertTitle>
+            <AlertDescription>{description}</AlertDescription>
+        </Alert>
+    );
+}

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<KnowledgeFile[], Error> = 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 (
         <div className="flex flex-col gap-4 justify-center items-center">
+            {!hasDefaultTextEmbedding && (
+                <WarningAlert
+                    title="Default Text Embedding Model Required!"
+                    description={
+                        <TypographyP>
+                            In order to process the knowledge base for your
+                            agent, you&apos;ll need to set up a default text
+                            embedding model. Click{" "}
+                            <Link to={$path("/model-providers")}>here</Link> to
+                            update your model provider and/or default models.
+                        </TypographyP>
+                    }
+                />
+            )}
             <div className="grid w-full gap-2">
                 <Label htmlFor="message">Knowledge Description</Label>
                 <AutosizeTextarea
+                    disabled={!hasDefaultTextEmbedding}
                     maxHeight={200}
                     placeholder="Provide a brief description of the information contained in this knowledge base. Example: A collection of documents about the human resources policies and procedures for Acme Corporation."
                     id="message"
@@ -437,6 +466,7 @@ export default function AgentKnowledgePanel({
                             <Button
                                 variant="ghost"
                                 className="flex items-center gap-2"
+                                disabled={!hasDefaultTextEmbedding}
                             >
                                 <PlusIcon className="h-5 w-5 text-foreground" />
                                 Add Knowledge

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);
 

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() {
                         <DefaultModelAliasFormDialog disabled={!configured} />
                     </div>
                     {configured ? null : (
-                        <Alert variant="default">
-                            <CircleAlertIcon className="w-4 h-4 !text-warning" />
-                            <AlertTitle>
-                                No Model Providers Configured!
-                            </AlertTitle>
-                            <AlertDescription>
-                                To use Otto&apos;s features, you&apos;ll need to
+                        <WarningAlert
+                            title="No Model Providers Configured!"
+                            description="To use Otto's features, you'll need to
                                 set up a Model Provider. Select and configure
-                                one below to get started!
-                            </AlertDescription>
-                        </Alert>
+                                one below to get started!"
+                        />
                     )}
                 </div>