Avoid querying capabilities from offline assistants

workbench-app/src/components/FrontDoor/Chat/Chat.tsx

@@ -148,8 +148,10 @@ export const Chat: React.FC<ChatProps> = (props) => {
         isLoading: conversationFilesIsLoading,
     } = useGetConversationFilesQuery(conversationId);
 
-    const { data: assistantCapabilities, isFetching: assistantCapabilitiesIsFetching } =
-        useGetAssistantCapabilities(assistants);
+    const { data: assistantCapabilities, isFetching: assistantCapabilitiesIsFetching } = useGetAssistantCapabilities(
+        assistants ?? [],
+        { skip: assistantsIsLoading || assistantsError !== undefined },
+    );
 
     if (conversationError) {
         const errorMessage = JSON.stringify(conversationError);

workbench-app/src/components/FrontDoor/MainContent.tsx

@@ -107,43 +107,35 @@ export const MainContent: React.FC<MainContentProps> = (props) => {
 
     return (
         <div className={classes.root}>
-            {activeConversationId ? (
-                <Chat conversationId={activeConversationId} headerBefore={headerBefore} headerAfter={headerAfter} />
-            ) : (
-                <>
-                    <div className={classes.header}>
-                        {headerBefore}
-                        <ExperimentalNotice />
-                        {headerAfter}
-                    </div>
-                    <div className={classes.body}>
-                        <div className={classes.content}>
-                            <Title3>Create a new conversation with an assistant</Title3>
-                            <NewConversationForm
-                                onSubmit={handleCreate}
-                                onChange={(isValid, data) => {
-                                    setIsValid(isValid);
-                                    setTitle(data.title);
-                                    setAssistantId(data.assistantId);
-                                    setAssistantServiceId(data.assistantServiceId);
-                                    setName(data.name);
-                                }}
-                                disabled={submitted}
-                            />
-                            <div className={classes.actions}>
-                                <ConversationsImport
-                                    appearance="outline"
-                                    onImport={handleImport}
-                                    disabled={submitted}
-                                />
-                                <Button appearance="primary" onClick={handleCreate} disabled={!isValid || submitted}>
-                                    Create
-                                </Button>
-                            </div>
+            <>
+                <div className={classes.header}>
+                    {headerBefore}
+                    <ExperimentalNotice />
+                    {headerAfter}
+                </div>
+                <div className={classes.body}>
+                    <div className={classes.content}>
+                        <Title3>Create a new conversation with an assistant</Title3>
+                        <NewConversationForm
+                            onSubmit={handleCreate}
+                            onChange={(isValid, data) => {
+                                setIsValid(isValid);
+                                setTitle(data.title);
+                                setAssistantId(data.assistantId);
+                                setAssistantServiceId(data.assistantServiceId);
+                                setName(data.name);
+                            }}
+                            disabled={submitted}
+                        />
+                        <div className={classes.actions}>
+                            <ConversationsImport appearance="outline" onImport={handleImport} disabled={submitted} />
+                            <Button appearance="primary" onClick={handleCreate} disabled={!isValid || submitted}>
+                                Create
+                            </Button>
                         </div>
                     </div>
-                </>
-            )}
+                </div>
+            </>
         </div>
     );
 };

workbench-app/src/libs/useAssistantCapabilities.ts

@@ -3,10 +3,8 @@ import { Assistant } from '../models/Assistant';
 import { AssistantCapability } from '../models/AssistantCapability';
 import { useWorkbenchService } from './useWorkbenchService';
 
-export function useGetAssistantCapabilities(assistants?: Assistant[]) {
-    const [isFetching, setIsFetching] = React.useState<boolean>(false);
-    const [assistantCapabilities, setAssistantCapabilities] = React.useState(new Set<AssistantCapability>());
-    const workbenchService = useWorkbenchService();
+export function useGetAssistantCapabilities(assistants: Assistant[], skipToken: { skip: boolean } = { skip: false }) {
+    const [isFetching, setIsFetching] = React.useState<boolean>(true);
 
     // Build a memoized set of all capabilities to be used as a default for assistants that do not
     // specify capabilities
@@ -19,32 +17,35 @@ export function useGetAssistantCapabilities(assistants?: Assistant[]) {
         [],
     );
 
+    const [assistantCapabilities, setAssistantCapabilities] = React.useState<Set<AssistantCapability>>(allCapabilities);
+    const workbenchService = useWorkbenchService();
+
     // Load the capabilities for all assistants and update the state with the result
     React.useEffect(() => {
-        let ignore = false;
+        if (skipToken.skip) {
+            return;
+        }
 
-        if (!assistants || assistants?.length === 0) {
-            if (ignore) {
-                return;
-            }
-            // only update the state if the capabilities have changed
-            if (!assistantCapabilities || allCapabilities.symmetricDifference(assistantCapabilities).size > 0) {
+        let active = true;
+
+        if (assistants.length === 0) {
+            if (assistantCapabilities.symmetricDifference(allCapabilities).size > 0) {
                 setAssistantCapabilities(allCapabilities);
             }
+            setIsFetching(false);
             return;
         }
 
         (async () => {
-            setIsFetching(true);
+            if (active) {
+                setIsFetching(true);
+            }
 
             // Get the service info for each assistant
-            const serviceInfos = (
-                await Promise.all(
-                    assistants.map(async (assistant) => {
-                        return await workbenchService.getAssistantServiceInfoAsync(assistant.assistantServiceId);
-                    }),
-                )
-            ).filter((info) => info !== undefined);
+            const infosResponse = await workbenchService.getAssistantServiceInfosAsync(
+                assistants.map((assistant) => assistant.assistantServiceId),
+            );
+            const serviceInfos = infosResponse.filter((info) => info !== undefined);
 
             // Combine all capabilities from all assistants into a single set
             const capabilities = serviceInfos.reduce<Set<AssistantCapability>>((acc, info) => {
@@ -65,20 +66,18 @@ export function useGetAssistantCapabilities(assistants?: Assistant[]) {
                 return acc;
             }, new Set<AssistantCapability>());
 
-            if (!ignore) {
-                // only update the state if the capabilities have changed
-                if (!assistantCapabilities || capabilities.symmetricDifference(assistantCapabilities).size > 0) {
+            if (active) {
+                if (assistantCapabilities.symmetricDifference(capabilities).size > 0) {
                     setAssistantCapabilities(capabilities);
                 }
+                setIsFetching(false);
             }
-
-            setIsFetching(false);
         })();
 
         return () => {
-            ignore = true;
+            active = false;
         };
-    }, [allCapabilities, assistantCapabilities, assistants, workbenchService]);
+    }, [allCapabilities, assistants, assistantCapabilities, skipToken.skip, workbenchService]);
 
     return {
         data: assistantCapabilities,

workbench-app/src/libs/useWorkbenchService.ts

@@ -4,10 +4,11 @@ import { InteractionRequiredAuthError } from '@azure/msal-browser';
 import { useAccount, useMsal } from '@azure/msal-react';
 import React from 'react';
 import { AssistantServiceInfo } from '../models/AssistantServiceInfo';
+import { AssistantServiceRegistration } from '../models/AssistantServiceRegistration';
 import { ConversationFile } from '../models/ConversationFile';
 import { useAppDispatch } from '../redux/app/hooks';
 import { addError } from '../redux/features/app/appSlice';
-import { assistantApi, workbenchApi, workflowApi } from '../services/workbench';
+import { assistantApi, assistantServiceRegistrationApi, workbenchApi, workflowApi } from '../services/workbench';
 import { AuthHelper } from './AuthHelper';
 import { Utility } from './Utility';
 import { useEnvironment } from './useEnvironment';
@@ -225,15 +226,52 @@ export const useWorkbenchService = () => {
     );
 
     const getAssistantServiceInfoAsync = React.useCallback(
-        async (assistant_service_id: string): Promise<AssistantServiceInfo | undefined> => {
+        async (assistantServiceId: string): Promise<AssistantServiceInfo | undefined> => {
+            const results = await dispatch(assistantApi.endpoints.getAssistantServiceInfo.initiate(assistantServiceId));
+            if (results.isError) {
+                throw results.error;
+            }
+            return results.data;
+        },
+        [dispatch],
+    );
+
+    const getAssistantServiceRegistrationAsync = React.useCallback(
+        async (assistantServiceId: string): Promise<AssistantServiceRegistration | undefined> => {
             const results = await dispatch(
-                assistantApi.endpoints.getAssistantServiceInfo.initiate(assistant_service_id),
+                assistantServiceRegistrationApi.endpoints.getAssistantServiceRegistration.initiate(assistantServiceId),
             );
+            if (results.isError) {
+                throw results.error;
+            }
             return results.data;
         },
         [dispatch],
     );
 
+    const getAssistantServiceInfosAsync = React.useCallback(
+        async (assistantServiceIds: string[]): Promise<Array<AssistantServiceInfo | undefined>> => {
+            return await Promise.all(
+                assistantServiceIds.map(async (assistantServiceId) => {
+                    try {
+                        const registration = await getAssistantServiceRegistrationAsync(assistantServiceId);
+                        if (!registration?.assistantServiceOnline) {
+                            return undefined;
+                        }
+                    } catch (error) {
+                        return undefined;
+                    }
+                    try {
+                        return await getAssistantServiceInfoAsync(assistantServiceId);
+                    } catch (error) {
+                        return undefined;
+                    }
+                }),
+            );
+        },
+        [getAssistantServiceInfoAsync, getAssistantServiceRegistrationAsync],
+    );
+
     const exportWorkflowDefinitionAsync = React.useCallback(
         async (workflowId: string) => {
             const results = await dispatch(workflowApi.endpoints.getWorkflowDefinition.initiate(workflowId));
@@ -273,6 +311,7 @@ export const useWorkbenchService = () => {
         exportAssistantAsync,
         duplicateAssistantAsync,
         getAssistantServiceInfoAsync,
+        getAssistantServiceInfosAsync,
         exportWorkflowDefinitionAsync,
         getWorkflowDefinitionDefaultsAsync,
     };

workbench-app/src/routes/Interact.tsx

@@ -100,6 +100,7 @@ export const Interact: React.FC = () => {
     const localUserId = useAppSelector((state) => state.localUser.id);
     const { data: assistantCapabilities, isFetching: isFetchingAssistantCapabilities } = useGetAssistantCapabilities(
         assistants ?? [],
+        { skip: isLoadingAssistants || assistantsError !== undefined },
     );
 
     const siteUtility = useSiteUtility();