From 4e14e40ff143514fd63940d9c64a9d95ba90a545 Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Wed, 13 Nov 2024 15:35:56 +0000
Subject: [PATCH] display errors encountered during conversation import

---
 .../Controls/NewConversationButton.tsx        | 20 +++++-
 workbench-app/src/libs/useWorkbenchService.ts | 62 +++++++++----------
 2 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/workbench-app/src/components/FrontDoor/Controls/NewConversationButton.tsx b/workbench-app/src/components/FrontDoor/Controls/NewConversationButton.tsx
index f2ad67a1..f0fbfada 100644
--- a/workbench-app/src/components/FrontDoor/Controls/NewConversationButton.tsx
+++ b/workbench-app/src/components/FrontDoor/Controls/NewConversationButton.tsx
@@ -3,6 +3,7 @@ import { ChatAddRegular } from '@fluentui/react-icons';
 import React from 'react';
 import { useConversationUtility } from '../../../libs/useConversationUtility';
 import { useCreateConversation } from '../../../libs/useCreateConversation';
+import { useNotify } from '../../../libs/useNotify';
 import { DialogControl } from '../../App/DialogControl';
 import { ConversationsImport } from '../../Conversations/ConversationsImport';
 import { NewConversationForm } from './NewConversationForm';
@@ -17,6 +18,7 @@ export const NewConversationButton: React.FC = () => {
     const [assistantServiceId, setAssistantServiceId] = React.useState<string>();
     const [submitted, setSubmitted] = React.useState(false);
     const { navigateToConversation } = useConversationUtility();
+    const { notifyError } = useNotify();
 
     const handleCreate = React.useCallback(async () => {
         if (submitted || !isValid || !title || !assistantId) {
@@ -57,6 +59,16 @@ export const NewConversationButton: React.FC = () => {
         [navigateToConversation],
     );
 
+    const handleError = React.useCallback(
+        (error: Error) =>
+            notifyError({
+                id: 'new-conversation-error',
+                title: 'Error creating conversation',
+                message: error.message,
+            }),
+        [notifyError],
+    );
+
     return (
         <DialogControl
             open={open}
@@ -78,7 +90,13 @@ export const NewConversationButton: React.FC = () => {
             }
             hideDismissButton
             additionalActions={[
-                <ConversationsImport key="import" appearance="outline" onImport={handleImport} disabled={submitted} />,
+                <ConversationsImport
+                    key="import"
+                    appearance="outline"
+                    onImport={handleImport}
+                    onError={handleError}
+                    disabled={submitted}
+                />,
                 <DialogTrigger key="cancel" disableButtonEnhancement>
                     <Button appearance="secondary" disabled={submitted}>
                         Cancel
diff --git a/workbench-app/src/libs/useWorkbenchService.ts b/workbench-app/src/libs/useWorkbenchService.ts
index ba40994f..520302d1 100644
--- a/workbench-app/src/libs/useWorkbenchService.ts
+++ b/workbench-app/src/libs/useWorkbenchService.ts
@@ -78,26 +78,23 @@ export const useWorkbenchService = () => {
         async (operationTitle: string, url: string, options?: RequestInit): Promise<Response> => {
             const accessToken = await getAccessTokenAsync();
             const idToken = await getIdTokenAsync();
-            try {
-                const response = await fetch(url, {
-                    ...options,
-                    headers: {
-                        ...options?.headers,
-                        Authorization: `Bearer ${accessToken}`,
-                        'X-OpenIdToken': idToken,
-                    },
-                });
-
-                if (!response.ok) {
-                    dispatch(addError({ title: operationTitle, message: response.statusText }));
-                    throw new Error(`failed to fetch: ${response.statusText}`);
-                }
+            const response = await fetch(url, {
+                ...options,
+                headers: {
+                    ...options?.headers,
+                    Authorization: `Bearer ${accessToken}`,
+                    'X-OpenIdToken': idToken,
+                },
+            });
 
-                return response;
-            } catch (error) {
-                dispatch(addError({ title: operationTitle, message: (error as Error).message }));
-                throw error;
+            if (!response.ok) {
+                const json = await response.json();
+                const message = json?.detail ?? json?.detail ?? response.statusText;
+                dispatch(addError({ title: operationTitle, message }));
+                throw new Error(`Failed to ${operationTitle}: ${message}`);
             }
+
+            return response;
         },
         [dispatch, getAccessTokenAsync, getIdTokenAsync],
     );
@@ -106,20 +103,23 @@ export const useWorkbenchService = () => {
         async (operationTitle: string, url: string, options?: RequestInit): Promise<Response> => {
             const accessToken = await getAccessTokenAsync();
             const idToken = await getIdTokenAsync();
-            try {
-                const response = await fetch(url, {
-                    ...options,
-                    headers: {
-                        ...options?.headers,
-                        Authorization: `Bearer ${accessToken}`,
-                        'X-OpenIdToken': idToken,
-                    },
-                });
-                return response;
-            } catch (error) {
-                dispatch(addError({ title: operationTitle, message: (error as Error).message }));
-                throw error;
+            const response = await fetch(url, {
+                ...options,
+                headers: {
+                    ...options?.headers,
+                    Authorization: `Bearer ${accessToken}`,
+                    'X-OpenIdToken': idToken,
+                },
+            });
+
+            if (!response.ok) {
+                const json = await response.json();
+                const message = json?.detail ?? json?.detail ?? response.statusText;
+                dispatch(addError({ title: operationTitle, message }));
+                throw new Error(`Failed to ${operationTitle}: ${message}`);
             }
+
+            return response;
         },
         [dispatch, getAccessTokenAsync, getIdTokenAsync],
     );