fix(ui): improve error handling for model_providers query (#1314)

Signed-off-by: Petr Kadlec <[email protected]>

Author: kapetr

apps/beeai-ui/src/contexts/QueryProvider/types.ts

@@ -7,13 +7,13 @@ import type { QueryKey } from '@tanstack/react-query';
 
 import type { useHandleError } from '#hooks/useHandleError.ts';
 
+export interface QueryMetadataError {
+  title?: string;
+  message?: string;
+  includeErrorMessage?: boolean;
+}
 export interface QueryMetadata extends Record<string, unknown> {
-  errorToast?:
-    | false
-    | {
-        title?: string;
-        includeErrorMessage?: boolean;
-      };
+  errorToast?: false | QueryMetadataError;
 }
 
 export type HandleError = ReturnType<typeof useHandleError>;

apps/beeai-ui/src/contexts/Toast/ToastProvider.module.scss

@@ -45,8 +45,6 @@
   margin-block-start: $spacing-02;
   font-size: rem(12px);
   font-family: font-family('mono');
-  background: $background-inverse;
-  color: $text-inverse;
-  padding: $spacing-03;
+  padding-block: $spacing-03;
   max-block-size: 10.2rem;
 }

apps/beeai-ui/src/hooks/useHandleError.ts

@@ -32,7 +32,8 @@ export function useHandleError() {
 
         addToast({
           title: errorToast?.title ?? errorTitle,
-          subtitle: errorMessage,
+          subtitle: errorToast?.message,
+          apiError: errorMessage,
         });
       } else {
         console.error(error);

apps/beeai-ui/src/modules/platform-context/api/mutations/useMatchProviders.ts

@@ -17,67 +17,23 @@ const MAX_PROVIDERS = 5;
 
 type MatchProvidersResult = Record<string, string[]>;
 
-export function useMatchEmbeddingProviders(
-  demands: EmbeddingDemand['embedding_demands'],
-  onSuccess: (data: MatchProvidersResult) => void,
-) {
-  const {
-    config: { featureFlags },
-  } = useApp();
-  const demandKey = Object.entries(demands)
-    .map(([key, value]) => [key, ...(value.suggested ?? [])])
-    .join();
-
-  const query = useQuery({
-    queryKey: ['matchEmbeddingProviders', demandKey],
-    enabled: featureFlags.ModelProviders && Object.keys(demands).length > 0,
-    queryFn: async () => {
-      const demandKeys = Object.keys(demands);
-
-      const allProviders = await Promise.all(
-        demandKeys.map(async (demandKey) => {
-          const result = await matchProviders({
-            suggested_models: demands[demandKey].suggested ?? [],
-            capability: ModelCapability.Embedding,
-          });
-          return {
-            key: demandKey,
-            providers: result?.items.map((item) => item.model_id).slice(0, MAX_PROVIDERS) ?? [],
-          };
-        }),
-      );
-
-      return allProviders.reduce<MatchProvidersResult>((acc, { key, providers }) => {
-        acc[key] = providers;
-        return acc;
-      }, {});
-    },
-  });
-
-  const { isSuccess, data } = query;
-
-  useEffect(() => {
-    if (isSuccess && data) {
-      onSuccess(data);
-    }
-  }, [isSuccess, data, onSuccess]);
-
-  return query;
+interface Props {
+  demands: EmbeddingDemand['embedding_demands'] | LLMDemand['llm_demands'];
+  onSuccess: (data: MatchProvidersResult) => void;
+  capability: ModelCapability;
 }
 
-export function useMatchLLMProviders(
-  demands: LLMDemand['llm_demands'],
-  onSuccess: (data: MatchProvidersResult) => void,
-) {
+export function useMatchProviders({ demands, onSuccess, capability }: Props) {
   const {
-    config: { featureFlags },
+    config: { featureFlags, isAuthEnabled },
   } = useApp();
+
   const demandKey = Object.entries(demands)
     .map(([key, value]) => [key, ...(value.suggested ?? [])])
     .join();
 
   const query = useQuery({
-    queryKey: ['matchLLMProviders', demandKey],
+    queryKey: [capability === ModelCapability.Embedding ? 'matchEmbeddingProviders' : 'matchLLMProviders', demandKey],
     enabled: featureFlags.ModelProviders && Object.keys(demands).length > 0,
     queryFn: async () => {
       const demandKeys = Object.keys(demands);
@@ -86,7 +42,7 @@ export function useMatchLLMProviders(
         demandKeys.map(async (demandKey) => {
           const result = await matchProviders({
             suggested_models: demands[demandKey].suggested ?? [],
-            capability: ModelCapability.Llm,
+            capability,
           });
           return {
             key: demandKey,
@@ -100,6 +56,13 @@ export function useMatchLLMProviders(
         return acc;
       }, {});
     },
+    meta: {
+      errorToast: {
+        title: 'Model providers query failed',
+        message: !isAuthEnabled ? 'Have you configured providers by running `beeai model setup`?' : undefined,
+        includeErrorMessage: true,
+      },
+    },
   });
 
   const { isSuccess, data } = query;

apps/beeai-ui/src/modules/runs/contexts/agent-demands/AgentDemandsProvider.tsx

@@ -8,11 +8,9 @@ import { type PropsWithChildren, useCallback, useEffect, useState } from 'react'
 import type { AgentA2AClient } from '#api/a2a/types.ts';
 import { useApp } from '#contexts/App/index.ts';
 import { useCreateContextToken } from '#modules/platform-context/api/mutations/useCreateContextToken.ts';
-import {
-  useMatchEmbeddingProviders,
-  useMatchLLMProviders,
-} from '#modules/platform-context/api/mutations/useMatchProviders.ts';
+import { useMatchProviders } from '#modules/platform-context/api/mutations/useMatchProviders.ts';
 import { usePlatformContext } from '#modules/platform-context/contexts/index.ts';
+import { ModelCapability } from '#modules/platform-context/types.ts';
 
 import { useAgentSecrets } from '../agent-secrets';
 import { AgentDemandsContext } from './agent-demands-context';
@@ -54,10 +52,11 @@ export function AgentDemandsProvider<UIGenericPart>({
     [setSelectedLLMProviders],
   );
 
-  const { data: matchedLLMProviders } = useMatchLLMProviders(
-    agentClient?.llmDemands ?? {},
-    setDefaultSelectedLLMProviders,
-  );
+  const { data: matchedLLMProviders } = useMatchProviders({
+    demands: agentClient?.llmDemands ?? {},
+    onSuccess: setDefaultSelectedLLMProviders,
+    capability: ModelCapability.Llm,
+  });
 
   const setDefaultSelectedEmbeddingProviders = useCallback(
     (data: Record<string, string[]>) => {
@@ -76,10 +75,11 @@ export function AgentDemandsProvider<UIGenericPart>({
     [setSelectedEmbeddingProviders],
   );
 
-  const { data: matchedEmbeddingProviders } = useMatchEmbeddingProviders(
-    agentClient?.embeddingDemands ?? {},
-    setDefaultSelectedEmbeddingProviders,
-  );
+  const { data: matchedEmbeddingProviders } = useMatchProviders({
+    demands: agentClient?.embeddingDemands ?? {},
+    onSuccess: setDefaultSelectedEmbeddingProviders,
+    capability: ModelCapability.Embedding,
+  });
 
   const selectLLMProvider = useCallback(
     (key: string, value: string) => {