CopilotChat: Remove unused /invoke API from webapi service (#1308)

### Motivation and Context
The /invoke API in webapi is no longer being used by the webapp.

### Description
- Removed the SemanticKernelController from webapp
- Removed unused `invokeSkillWithMsalToken` and
`invokeSkillWithGraphToken` from `useConnectors.ts`

---------

Co-authored-by: Teresa Hoang <[email protected]>

samples/apps/copilot-chat-app/webapi/README.md

@@ -1,7 +1,7 @@
 # Semantic Kernel Service - CopilotChat
 
 This ASP.Net web application provides a web service hosting the Semantic Kernel, enabling secure
-and modular access to its features for frontend apps without embedding kernel code and settings,
+and modular access to its features for the Copilot Chat application without embedding kernel code and settings,
 while allowing user interfaces to be developed using frontend frameworks such as React and Angular.
 
 # Configure your environment

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

@@ -14,7 +14,6 @@ import {
     updateConversation,
 } from '../redux/features/conversations/conversationsSlice';
 import { AuthHelper } from './auth/AuthHelper';
-import { useConnectors } from './connectors/useConnectors';
 import { AlertType } from './models/AlertType';
 import { Bot } from './models/Bot';
 import { AuthorRoles, ChatMessageState } from './models/ChatMessage';
@@ -30,13 +29,14 @@ import botIcon4 from '../assets/bot-icons/bot-icon-4.png';
 import botIcon5 from '../assets/bot-icons/bot-icon-5.png';
 import { IChatUser } from './models/ChatUser';
 
+import { AuthHeaderTags } from '../redux/features/plugins/PluginsState';
+
 export const useChat = () => {
     const dispatch = useAppDispatch();
     const { instance, accounts, inProgress } = useMsal();
     const account = useAccount(accounts[0] || {});
     const { conversations } = useAppSelector((state: RootState) => state.conversations);
 
-    const connectors = useConnectors();
     const botService = new BotService(process.env.REACT_APP_BACKEND_URI as string);
     const chatService = new ChatService(process.env.REACT_APP_BACKEND_URI as string);
 
@@ -51,6 +51,8 @@ export const useChat = () => {
         lastTypingTimestamp: 0,
     };
 
+    const plugins = useAppSelector((state: RootState) => state.plugins);
+
     const getChatUserById = (id: string, chatId: string, users: IChatUser[]) => {
         if (id === `${chatId}-bot` || id.toLocaleLowerCase() === 'bot') return Constants.bot.profile;
         return users.find((user) => user.id === id);
@@ -141,7 +143,7 @@ export const useChat = () => {
             var result = await chatService.getBotResponseAsync(
                 ask,
                 await AuthHelper.getSKaaSAccessToken(instance, inProgress),
-                connectors.getEnabledPlugins(),
+                getEnabledPlugins(),
             );
 
             const messageResult = {
@@ -246,6 +248,31 @@ export const useChat = () => {
         return botProfilePictures[index % botProfilePictures.length];
     };
 
+     /*
+     * Once enabled, each plugin will have a custom dedicated header in every Semantic Kernel request
+     * containing respective auth information (i.e., token, encoded client info, etc.)
+     * that the server can use to authenticate to the downstream APIs
+     */
+     const getEnabledPlugins = () => {
+        const enabledPlugins: { headerTag: AuthHeaderTags; authData: string; apiProperties?: any }[] = [];
+
+        Object.entries(plugins).map((entry) => {
+            const plugin = entry[1];
+
+            if (plugin.enabled) {
+                enabledPlugins.push({
+                    headerTag: plugin.headerTag,
+                    authData: plugin.authData!,
+                    apiProperties: plugin.apiProperties,
+                });
+            }
+
+            return entry;
+        });
+
+        return enabledPlugins;
+    };
+
     return {
         getChatUserById,
         createChat,