Merge branch 'feature-better-auth' of https://github.com/microsoft/ch…

…at-copilot into feature-better-auth
microsoft · Aug 8, 2023 · 358b41b · 358b41b
2 parents ab69bc4 + a1fea64
commit 358b41b
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 26 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -46,6 +46,7 @@
       "**/.hg": true,
       "**/CVS": true,
       "**/.DS_Store": true,
-      "**/Thumbs.db": true
+      "**/Thumbs.db": true,
+      "**.lock": true,
     },
   }
diff --git a/webapp/src/components/chat/chat-history/ChatHistoryItem.tsx b/webapp/src/components/chat/chat-history/ChatHistoryItem.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
-import { Persona, Text, makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';
+import { AvatarProps, Persona, Text, makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';
 import { ThumbDislike24Filled, ThumbLike16Filled } from '@fluentui/react-icons';
 import React from 'react';
 import { DefaultChatUser } from '../../../libs/auth/AuthHelper';
@@ -93,9 +93,11 @@ export const ChatHistoryItem: React.FC<ChatHistoryItemProps> = ({ message, getRe
         : chat.getChatUserById(message.userName, selectedId, conversations[selectedId].users);
     const fullName = user?.fullName ?? message.userName;
 
-    const avatar = isBot
+    const avatar: AvatarProps = isBot
         ? { image: { src: conversations[selectedId].botProfilePicture } }
-        : { name: fullName, color: 'colorful' as const };
+        : isDefaultUser
+        ? { idForColor: selectedId, color: 'colorful' }
+        : { name: fullName, color: 'colorful' };
 
     let content: JSX.Element;
     if (isBot && message.type === ChatMessageType.Plan) {

diff --git a/webapp/src/components/open-api-plugins/PluginConnector.tsx b/webapp/src/components/open-api-plugins/PluginConnector.tsx
@@ -18,7 +18,7 @@ import { Dismiss20Regular } from '@fluentui/react-icons';
 import { FormEvent, useState } from 'react';
 import { TokenHelper } from '../../libs/auth/TokenHelper';
 import { useAppDispatch } from '../../redux/app/hooks';
-import { AdditionalApiProperties, PluginAuthRequirements } from '../../redux/features/plugins/PluginsState';
+import { AdditionalApiProperties, Plugin, PluginAuthRequirements } from '../../redux/features/plugins/PluginsState';
 import { connectPlugin } from '../../redux/features/plugins/pluginsSlice';
 import { useDialogClasses } from '../../styles';
 
@@ -28,6 +28,7 @@ interface PluginConnectorProps {
     publisher: string;
     authRequirements: PluginAuthRequirements;
     apiProperties?: AdditionalApiProperties;
+    inactive?: Plugin['inactive'];
 }
 
 export const PluginConnector: React.FC<PluginConnectorProps> = ({
@@ -36,6 +37,7 @@ export const PluginConnector: React.FC<PluginConnectorProps> = ({
     publisher,
     authRequirements,
     apiProperties,
+    inactive,
 }) => {
     const classes = useDialogClasses();
 
@@ -103,7 +105,13 @@ export const PluginConnector: React.FC<PluginConnectorProps> = ({
             modalType="alert"
         >
             <DialogTrigger>
-                <Button data-testid="openPluginDialogButton" aria-label="Enable plugin" appearance="primary">
+                <Button
+                    data-testid="openPluginDialogButton"
+                    aria-label="Enable plugin"
+                    appearance="primary"
+                    disabled={!!inactive}
+                    title={inactive}
+                >
                     Enable
                 </Button>
             </DialogTrigger>

diff --git a/webapp/src/components/open-api-plugins/cards/PluginCard.tsx b/webapp/src/components/open-api-plugins/cards/PluginCard.tsx
@@ -11,7 +11,7 @@ interface PluginCardProps {
 }
 
 export const PluginCard: React.FC<PluginCardProps> = ({ plugin }) => {
-    const { name, publisher, enabled, authRequirements, apiProperties, icon, description } = plugin;
+    const { name, publisher, enabled, authRequirements, apiProperties, icon, description, inactive } = plugin;
     const dispatch = useAppDispatch();
 
     const onDisconnectClick = (event: FormEvent) => {
@@ -42,6 +42,7 @@ export const PluginCard: React.FC<PluginCardProps> = ({ plugin }) => {
                         publisher={publisher}
                         authRequirements={authRequirements}
                         apiProperties={apiProperties}
+                        inactive={inactive}
                     />
                 )
             }

diff --git a/webapp/src/libs/hooks/useChat.ts b/webapp/src/libs/hooks/useChat.ts
@@ -31,6 +31,7 @@ import botIcon2 from '../../assets/bot-icons/bot-icon-2.png';
 import botIcon3 from '../../assets/bot-icons/bot-icon-3.png';
 import botIcon4 from '../../assets/bot-icons/bot-icon-4.png';
 import botIcon5 from '../../assets/bot-icons/bot-icon-5.png';
+import { FeatureKeys } from '../../redux/features/app/AppState';
 
 export interface GetResponseOptions {
     messageType: ChatMessageType;
@@ -43,7 +44,7 @@ export const useChat = () => {
     const dispatch = useAppDispatch();
     const { instance, inProgress } = useMsal();
     const { conversations } = useAppSelector((state: RootState) => state.conversations);
-    const { activeUserInfo } = useAppSelector((state: RootState) => state.app);
+    const { activeUserInfo, features } = useAppSelector((state: RootState) => state.app);
 
     const botService = new BotService(process.env.REACT_APP_BACKEND_URI as string);
     const chatService = new ChatService(process.env.REACT_APP_BACKEND_URI as string);
@@ -74,25 +75,23 @@ export const useChat = () => {
         const chatTitle = `Copilot @ ${new Date().toLocaleString()}`;
         const accessToken = await AuthHelper.getSKaaSAccessToken(instance, inProgress);
         try {
-            await chatService
-                .createChatAsync(chatTitle, accessToken)
-                .then((result: ICreateChatSessionResponse) => {
-                    const newChat: ChatState = {
-                        id: result.chatSession.id,
-                        title: result.chatSession.title,
-                        systemDescription: result.chatSession.systemDescription,
-                        memoryBalance: result.chatSession.memoryBalance,
-                        messages: [result.initialBotMessage],
-                        users: [loggedInUser],
-                        botProfilePicture: getBotProfilePicture(Object.keys(conversations).length),
-                        input: '',
-                        botResponseStatus: undefined,
-                        userDataLoaded: false,
-                    };
+            await chatService.createChatAsync(chatTitle, accessToken).then((result: ICreateChatSessionResponse) => {
+                const newChat: ChatState = {
+                    id: result.chatSession.id,
+                    title: result.chatSession.title,
+                    systemDescription: result.chatSession.systemDescription,
+                    memoryBalance: result.chatSession.memoryBalance,
+                    messages: [result.initialBotMessage],
+                    users: [loggedInUser],
+                    botProfilePicture: getBotProfilePicture(Object.keys(conversations).length),
+                    input: '',
+                    botResponseStatus: undefined,
+                    userDataLoaded: false,
+                };
 
-                    dispatch(addConversation(newChat));
-                    return newChat.id;
-                });
+                dispatch(addConversation(newChat));
+                return newChat.id;
+            });
         } catch (e: any) {
             const errorMessage = `Unable to create new chat. Details: ${getErrorDetails(e)}`;
             dispatch(addAlert({ message: errorMessage, type: AlertType.Error }));
@@ -151,6 +150,10 @@ export const useChat = () => {
 
                     const chatUsers = await chatService.getAllChatParticipantsAsync(chatSession.id, accessToken);
 
+                    if (!features[FeatureKeys.MultiUserChat].enabled && chatUsers.length > 1) {
+                        continue;
+                    }
+
                     loadedConversations[chatSession.id] = {
                         id: chatSession.id,
                         title: chatSession.title,

diff --git a/webapp/src/redux/features/plugins/PluginsState.ts b/webapp/src/redux/features/plugins/PluginsState.ts
@@ -5,6 +5,7 @@ import GithubIcon from '../../../assets/plugin-icons/github.png';
 import JiraIcon from '../../../assets/plugin-icons/jira.png';
 import KlarnaIcon from '../../../assets/plugin-icons/klarna.png';
 import GraphIcon from '../../../assets/plugin-icons/ms-graph.png';
+import { AuthHelper } from '../../../libs/auth/AuthHelper';
 
 /*
  * For each OpenAPI Spec you're supporting in the Kernel,
@@ -60,6 +61,7 @@ export interface Plugin {
     authData?: string; // token or encoded auth header value
     apiProperties?: AdditionalApiProperties;
     manifestDomain?: string; // Website domain hosting the OpenAI Plugin Manifest file for custom plugins
+    inactive?: string; // If truthy, disables the plugin and gives the reason why
 }
 
 export interface PluginsState {
@@ -75,6 +77,7 @@ export const initialState: PluginsState = {
             publisher: 'Microsoft',
             description: 'Use your Microsoft Account to access your personal Graph information and Microsoft services.',
             enabled: false,
+            inactive: AuthHelper.IsAuthAAD ? undefined : 'Only available when using Azure AD authorization',
             authRequirements: {
                 Msal: true,
                 scopes: Constants.plugins.msGraphScopes,