[9.4] [Agent Builder] Recommended Connectors (#263865)

x-pack/platform/packages/shared/kbn-inference-connectors/src/use_load_connectors.ts

@@ -51,32 +51,30 @@ export const useLoadConnectors = ({
   featureId,
 }: UseLoadConnectorsProps): UseLoadConnectorsResult => {
   const [soEntryFound, setSoEntryFound] = useState(false);
-  const query = useQuery(
-    [...QUERY_KEY, featureId],
-    async () => {
+  const query = useQuery({
+    queryKey: [...QUERY_KEY, featureId],
+    queryFn: async () => {
       const result = await fetchConnectorsForFeature(http, featureId);
       setSoEntryFound(result.soEntryFound);
       return result.connectors.map(toAIConnector);
     },
-    {
-      retry: false,
-      keepPreviousData: true,
-      onError: (error: IHttpFetchError) => {
-        if (error.name !== 'AbortError') {
-          toasts?.addError(
-            error.body && (error.body as { message?: string }).message
-              ? new Error((error.body as { message: string }).message)
-              : error,
-            {
-              title: i18n.translate('inferenceConnectors.useLoadConnectors.errorMessage', {
-                defaultMessage: 'Error loading models',
-              }),
-            }
-          );
-        }
-      },
-    }
-  );
+    retry: false,
+    keepPreviousData: true,
+    onError: (error: IHttpFetchError) => {
+      if (error.name !== 'AbortError') {
+        toasts?.addError(
+          error.body && (error.body as { message?: string }).message
+            ? new Error((error.body as { message: string }).message)
+            : error,
+          {
+            title: i18n.translate('inferenceConnectors.useLoadConnectors.errorMessage', {
+              defaultMessage: 'Error loading models',
+            }),
+          }
+        );
+      }
+    },
+  });
 
   return { ...query, soEntryFound };
 };

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_input/input_actions/connector_selector/connector_selector.test.tsx

@@ -34,10 +34,6 @@ jest.mock('../../../../../hooks/use_ui_privileges', () => ({
   useUiPrivileges: () => ({ write: true }),
 }));
 
-jest.mock('../../../../../../../common/recommended_connectors', () => ({
-  isRecommendedConnector: () => false,
-}));
-
 jest.mock('../input_actions.styles', () => ({
   getMaxListHeight: () => 200,
   selectorPopoverPanelStyles: undefined,

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_input/input_actions/connector_selector/connector_selector.tsx

@@ -24,7 +24,6 @@ import { useNavigation } from '../../../../../hooks/use_navigation';
 import { useSendMessage } from '../../../../../context/send_message/send_message_context';
 import { useDefaultConnector } from '../../../../../hooks/chat/use_default_connector';
 import { useKibana } from '../../../../../hooks/use_kibana';
-import { isRecommendedConnector } from '../../../../../../../common/recommended_connectors';
 import {
   getMaxListHeight,
   selectorPopoverPanelStyles,
@@ -168,13 +167,24 @@ export const ConnectorSelector: React.FC<{}> = () => {
   const connectors = useMemo(() => aiConnectors ?? [], [aiConnectors]);
 
   const { recommendedConnectors, otherConnectors, customConnectors } = useMemo(() => {
-    const recommended = connectors.filter((c) => isRecommendedConnector(c.id));
-    const notRecommended = connectors.filter((c) => !isRecommendedConnector(c.id));
-    return {
-      recommendedConnectors: recommended,
-      otherConnectors: notRecommended.filter((c) => c.isPreconfigured),
-      customConnectors: notRecommended.filter((c) => !c.isPreconfigured),
-    };
+    const groupedConnectors = connectors.reduce<{
+      recommendedConnectors: typeof connectors;
+      otherConnectors: typeof connectors;
+      customConnectors: typeof connectors;
+    }>(
+      (acc, c) => {
+        if (c.isRecommended) {
+          acc.recommendedConnectors.push(c);
+        } else if (c.isPreconfigured) {
+          acc.otherConnectors.push(c);
+        } else {
+          acc.customConnectors.push(c);
+        }
+        return acc;
+      },
+      { recommendedConnectors: [], otherConnectors: [], customConnectors: [] }
+    );
+    return groupedConnectors;
   }, [connectors]);
 
   const togglePopover = () => setIsPopoverOpen(!isPopoverOpen);

x-pack/platform/plugins/shared/agent_builder/public/application/hooks/chat/use_default_connector.ts

@@ -6,9 +6,8 @@
  */
 
 import { useMemo } from 'react';
-import type { AIConnector } from '@kbn/elastic-assistant';
+import type { AIConnector } from '@kbn/inference-connectors';
 import { PREFERRED_DEFAULT_CONNECTOR_ID } from '../../../../common/constants';
-import { getFirstRecommendedConnectorId } from '../../../../common/recommended_connectors';
 
 interface UseDefaultConnectorParams {
   connectors: AIConnector[];
@@ -30,7 +29,8 @@ export function useDefaultConnector({
     }
 
     // 2. Prefer the first recommended connector when available (SOTA per provider + open-weight)
-    const recommendedId = getFirstRecommendedConnectorId(connectors.map((c) => c.id));
+    const recommendedConnector = connectors.find((c) => c.isRecommended);
+    const recommendedId = recommendedConnector?.id;
     if (recommendedId) {
       return recommendedId;
     }