Copilot Chat: No error when upload an invalid bot file (microsoft#651)

### Motivation and Context
The app does nothing when uploading an invalid bot file (e.g. a plain
text file). No error displayed to users that leads to non-ideal user
experience.

### Description
1. Handle exceptions in client when parse the upload file. Set app error
state if there's exception.
2. Make the AIService property in a bot file string value.

samples/apps/copilot-chat-app/webapi/Model/BotEmbeddingConfig.cs

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 using System.ComponentModel.DataAnnotations;
+using System.Text.Json.Serialization;
 using SemanticKernel.Service.Config;
 
 namespace SemanticKernel.Service.Model;
@@ -14,6 +15,7 @@ public class BotEmbeddingConfig
     /// The AI service.
     /// </summary>
     [Required]
+    [JsonConverter(typeof(JsonStringEnumConverter))]
     public AIServiceOptions.AIServiceType AIService { get; set; } = AIServiceOptions.AIServiceType.AzureOpenAI;
 
     /// <summary>

samples/apps/copilot-chat-app/webapp/src/components/chat/chat-list/NewBotMenu.tsx

@@ -8,8 +8,12 @@ import { useChat } from '../../../libs/useChat';
 import { FileUploader } from '../../FileUploader';
 import { useFile } from '../../../libs/useFile';
 import { Bot } from '../../../libs/models/Bot';
+import { useAppDispatch } from '../../../redux/app/hooks';
+import { addAlert } from '../../../redux/features/app/appSlice';
+import { AlertType } from '../../../libs/models/AlertType';
 
 export const NewBotMenu: FC = () => {
+    const dispatch = useAppDispatch();
     const chat = useChat();
     const fileHandler = useFile();
     const [isNewBotMenuOpen, setIsNewBotMenuOpen] = useState(false);
@@ -23,10 +27,16 @@ export const NewBotMenu: FC = () => {
 
     const onUpload = useCallback(
         (file: File) => {
-            fileHandler.loadFile<Bot>(file, chat.uploadBot);
+            fileHandler
+                .loadFile<Bot>(file, chat.uploadBot)
+                .catch((error) =>
+                    dispatch(
+                        addAlert({ message: `Failed to parse uploaded file. ${error.message}`, type: AlertType.Error }),
+                    ),
+                );
             setIsNewBotMenuOpen(false);
         },
-        [fileHandler, chat],
+        [fileHandler, chat, dispatch],
     );
 
     return (

samples/apps/copilot-chat-app/webapp/src/libs/useFile.ts

@@ -1,15 +1,22 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 export const useFile = () => {
-    function loadFile<T>(file: File, loadCallBack: (bot: T) => Promise<void>) {
-        const fileReader = new FileReader();
-        fileReader.onload = async (event: ProgressEvent<FileReader>) => {
-            const content = event?.target?.result as string;
-            const parsedData = JSON.parse(content) as T;
-
-            return await loadCallBack(parsedData);
-        };
-        fileReader.readAsText(file);
+    function loadFile<T>(file: File, loadCallBack: (data: T) => Promise<void>): Promise<T> {
+        return new Promise((resolve, reject) => {
+            const fileReader = new FileReader();
+            fileReader.onload = async (event: ProgressEvent<FileReader>) => {
+                const content = event?.target?.result as string;
+                try {
+                    const parsedData = JSON.parse(content) as T;
+                    await loadCallBack(parsedData);
+                    resolve(parsedData);
+                } catch (e) {
+                    reject(e);
+                }
+            };
+            fileReader.onerror = reject;
+            fileReader.readAsText(file);
+        });
     }
 
     function downloadFile(filename: string, content: string, type: string) {