fixes for new ux: avoid reload on new input, force refetch on convers…

…ation switch, etc. (microsoft#179) * force refetch on conversation change * stop reloading chat history on new message input * improved error message layout at top of chat * default to empty assistant capability list while loading to prevent error state
markwaddle · Oct 28, 2024 · a7c67c7 · a7c67c7
1 parent 1cb0de6
commit a7c67c7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git a/workbench-app/src/components/App/ErrorList.tsx b/workbench-app/src/components/App/ErrorList.tsx
@@ -5,8 +5,10 @@ import {
     MessageBar,
     MessageBarActions,
     MessageBarBody,
+    MessageBarGroup,
     MessageBarTitle,
     makeStyles,
+    mergeClasses,
     shorthands,
     tokens,
 } from '@fluentui/react-components';
@@ -25,14 +27,15 @@ const useClasses = makeStyles({
         backgroundColor: tokens.colorPaletteRedBackground2,
         gap: tokens.spacingVerticalM,
         ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalM),
-        ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
-    },
-    actions: {
-        marginBottom: 0,
     },
 });
 
-export const ErrorList: React.FC = () => {
+interface ErrorListProps {
+    className?: string;
+}
+
+export const ErrorList: React.FC<ErrorListProps> = (props) => {
+    const { className } = props;
     const classes = useClasses();
     const { errors } = useAppSelector((state: RootState) => state.app);
     const dispatch = useAppDispatch();
@@ -42,15 +45,14 @@ export const ErrorList: React.FC = () => {
     }
 
     return (
-        <div className={classes.root}>
+        <MessageBarGroup className={mergeClasses(classes.root, className)}>
             {errors.map((error) => (
                 <MessageBar key={error.id} intent="error" layout="multiline">
                     <MessageBarBody>
-                        <MessageBarTitle>{error.title ?? 'Error'}</MessageBarTitle>
+                        <MessageBarTitle>{error.title ?? 'Error'}:</MessageBarTitle>
                         {error.message}
                     </MessageBarBody>
                     <MessageBarActions
-                        className={classes.actions}
                         containerAction={
                             <Button
                                 appearance="transparent"
@@ -61,6 +63,6 @@ export const ErrorList: React.FC = () => {
                     />
                 </MessageBar>
             ))}
-        </div>
+        </MessageBarGroup>
     );
 };
diff --git a/workbench-app/src/components/FrontDoor/Chat/Chat.tsx b/workbench-app/src/components/FrontDoor/Chat/Chat.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
@@ -45,26 +45,34 @@ const useClasses = makeStyles({
         zIndex: tokens.zIndexOverlay,
         display: 'flex',
         flexDirection: 'row',
-        alignItems: 'center',
         justifyContent: 'space-between',
         backgroundImage: `linear-gradient(to bottom, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}, transparent, transparent)`,
         ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalM, tokens.spacingVerticalXXXL),
     },
     headerControls: {
+        position: 'relative',
         pointerEvents: 'auto',
         display: 'flex',
         flexDirection: 'row',
-        alignItems: 'center',
         gap: tokens.spacingHorizontalM,
+        flex: '1 1 auto',
 
         '&.before': {
             left: 0,
+            flex: '0 0 auto',
         },
 
         '&.after': {
             right: 0,
+            flex: '0 0 auto',
         },
     },
+    errorList: {
+        position: 'absolute',
+        top: 0,
+        left: tokens.spacingHorizontalM,
+        right: tokens.spacingHorizontalM,
+    },
     content: {
         flex: '1 1 auto',
         display: 'flex',
@@ -117,8 +125,8 @@ export const Chat: React.FC<ChatProps> = (props) => {
     const {
         data: conversation,
         error: conversationError,
-        isFetching: conversationIsFetching,
-    } = useGetConversationQuery(conversationId);
+        isLoading: conversationIsLoading,
+    } = useGetConversationQuery(conversationId, { refetchOnMountOrArgChange: true });
     const {
         data: conversationParticipants,
         error: conversationParticipantsError,
@@ -190,7 +198,7 @@ export const Chat: React.FC<ChatProps> = (props) => {
     }, [assistants, conversationParticipants, assistantsRefetch]);
 
     if (
-        conversationIsFetching ||
+        conversationIsLoading ||
         conversationParticipantsIsLoading ||
         assistantsIsLoading ||
         conversationFilesIsLoading ||
@@ -211,10 +219,6 @@ export const Chat: React.FC<ChatProps> = (props) => {
         throw new Error(`Assistants (${conversationId}) not found`);
     }
 
-    if (!assistantCapabilities) {
-        throw new Error(`Assistant capabilities (${conversationId}) not found`);
-    }
-
     if (!conversationFiles) {
         throw new Error(`Conversation files (${conversationId}) not found`);
     }
@@ -224,9 +228,11 @@ export const Chat: React.FC<ChatProps> = (props) => {
     return (
         <div className={classes.root}>
             <div className={classes.header}>
-                <div className={`${classes.headerControls} before`}>{headerBefore}</div>
-                <ErrorList />
-                <div className={`${classes.headerControls} after`}>
+                <div className={mergeClasses(classes.headerControls, 'before')}>{headerBefore}</div>
+                <div className={classes.headerControls}>
+                    <ErrorList className={classes.errorList} />
+                </div>
+                <div className={mergeClasses(classes.headerControls, 'after')}>
                     <ConversationShare iconOnly conversation={conversation} />
                     <ChatControls conversationId={conversation.id} />
                     {headerAfter}

diff --git a/workbench-app/src/libs/useAssistantCapabilities.ts b/workbench-app/src/libs/useAssistantCapabilities.ts
@@ -5,7 +5,7 @@ import { useWorkbenchService } from './useWorkbenchService';
 
 export function useGetAssistantCapabilitiesSet(assistants: Assistant[]) {
     const [isFetching, setIsFetching] = React.useState<boolean>(false);
-    const [assistantCapabilities, setAssistantCapabilities] = React.useState<Set<AssistantCapability> | undefined>();
+    const [assistantCapabilities, setAssistantCapabilities] = React.useState(new Set<AssistantCapability>());
     const workbenchService = useWorkbenchService();
 
     // Build a memo-ized set of all capabilities to be used as a default for assistants that do not