unread message indicator, message previews, user app metadata on conversations, message pinning

assistants/prospector-assistant/assistant/agents/document_agent.py

@@ -70,7 +70,8 @@ def _error_check(self) -> None:
         # should this throw an exception?
 
     def reset(self) -> None:
-        self = Step()  # not sure what to do about this squiggly.
+        # TODO: consider if this is the right way to reset a step, fix the # noqa: F841
+        self = Step()  # noqa: F841
 
     def set_name(self, name: StepName) -> None:
         if name is StepName.UNDEFINED:  # need to reset step
@@ -113,7 +114,8 @@ def _error_check(self) -> None:
         # should this throw an exception?
 
     def reset(self) -> None:
-        self = Mode()  # not sure what to do about this squiggly.
+        # TODO: consider if this is the right way to reset a mode, fix the # noqa: F841
+        self = Mode()  # noqa: F841
 
     def set_name(self, name: ModeName) -> None:
         if name is ModeName.UNDEFINED:  # need to reset mode

workbench-app/.vscode/settings.json

@@ -227,6 +227,7 @@
         "workbenchservice",
         "workflowdefinition",
         "workflowrun",
-        "workflowuserparticipant"
+        "workflowuserparticipant",
+        "YYYYMMDDH"
     ]
 }

workbench-app/src/components/App/PresenceMotionList.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
-import { makeStyles, tokens } from '@fluentui/react-components';
+import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
 import { PresenceGroup, createPresenceComponent, motionTokens } from '@fluentui/react-motions-preview';
 import React from 'react';
 
@@ -28,15 +28,16 @@ const ItemMotion = createPresenceComponent({
 });
 
 interface PresenceMotionListProps {
+    className?: string;
     items?: React.ReactNode[];
 }
 
 export const PresenceMotionList: React.FC<PresenceMotionListProps> = (props) => {
-    const { items } = props;
+    const { className, items } = props;
     const classes = useClasses();
 
     return (
-        <div className={classes.root}>
+        <div className={mergeClasses(classes.root, className)}>
             <PresenceGroup>
                 {items?.map((item, index) => (
                     <ItemMotion key={index}>

workbench-app/src/components/Conversations/Canvas/AssistantInspector.tsx

@@ -8,7 +8,7 @@ import Form from '@rjsf/fluentui-rc';
 import { RegistryWidgetsType } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 import React from 'react';
-import { WorkbenchEventSource } from '../../../libs/WorkbenchEventSource';
+import { WorkbenchEventSource, WorkbenchEventSourceType } from '../../../libs/WorkbenchEventSource';
 import { useEnvironment } from '../../../libs/useEnvironment';
 import { AssistantStateDescription } from '../../../models/AssistantStateDescription';
 import { useGetConversationStateQuery, useUpdateConversationStateMutation } from '../../../services/workbench';
@@ -92,7 +92,11 @@ export const AssistantInspector: React.FC<AssistantInspectorProps> = (props) =>
         };
 
         (async () => {
-            workbenchEventSource = await WorkbenchEventSource.createOrUpdate(environment.url, conversationId);
+            workbenchEventSource = await WorkbenchEventSource.createOrUpdate(
+                environment.url,
+                WorkbenchEventSourceType.Conversation,
+                conversationId,
+            );
             workbenchEventSource.addEventListener('assistant.state.updated', handleEvent);
         })();
 

workbench-app/src/components/Conversations/Canvas/CanvasControls.tsx

@@ -6,7 +6,7 @@ import { EventSourceMessage } from '@microsoft/fetch-event-source';
 import React from 'react';
 import { useEnvironment } from '../../../libs/useEnvironment';
 import { useInteractCanvasController } from '../../../libs/useInteractCanvasController';
-import { WorkbenchEventSource } from '../../../libs/WorkbenchEventSource';
+import { WorkbenchEventSource, WorkbenchEventSourceType } from '../../../libs/WorkbenchEventSource';
 import { useAppSelector } from '../../../redux/app/hooks';
 
 const useClasses = makeStyles({
@@ -49,7 +49,11 @@ export const CanvasControls: React.FC<CanvasControlsProps> = (props) => {
         };
 
         (async () => {
-            workbenchEventSource = await WorkbenchEventSource.createOrUpdate(environment.url, conversationId);
+            workbenchEventSource = await WorkbenchEventSource.createOrUpdate(
+                environment.url,
+                WorkbenchEventSourceType.Conversation,
+                conversationId,
+            );
             workbenchEventSource.addEventListener('assistant.state.focus', handleFocusEvent);
         })();
 

workbench-app/src/components/Conversations/ConversationTranscript.tsx

@@ -1,19 +1,13 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import { ArrowDownload24Regular } from '@fluentui/react-icons';
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
 import React from 'react';
+import { Utility } from '../../libs/Utility';
 import { Conversation } from '../../models/Conversation';
 import { ConversationParticipant } from '../../models/ConversationParticipant';
 import { useGetConversationMessagesQuery } from '../../services/workbench';
 import { CommandButton } from '../App/CommandButton';
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.tz.guess();
-
 interface ConversationTranscriptProps {
     conversation: Conversation;
     participants: ConversationParticipant[];
@@ -39,14 +33,14 @@ export const ConversationTranscript: React.FC<ConversationTranscriptProps> = (pr
             return;
         }
 
-        const currentDateTime = dayjs.utc().tz(dayjs.tz.guess()).format('YYYYMMDDHHmmss');
-        const filename = `transcript_${conversation.title.replaceAll(' ', '_')}_${currentDateTime}.md`;
+        const timestampForFilename = Utility.getTimestampForFilename();
+        const filename = `transcript_${conversation.title.replaceAll(' ', '_')}_${timestampForFilename}.md`;
 
         const markdown = messages
             .filter((message) => message.messageType !== 'log')
             .map((message) => {
-                const date = dayjs.utc(message.timestamp).tz(dayjs.tz.guess()).format('dddd, MMMM D');
-                const time = dayjs.utc(message.timestamp).tz(dayjs.tz.guess()).format('h:mm A');
+                const date = Utility.toFormattedDateString(message.timestamp, 'dddd, MMMM D');
+                const time = Utility.toFormattedDateString(message.timestamp, 'h:mm A');
                 const participant = participants.find(
                     (possible_participant) => possible_participant.id === message.sender.participantId,
                 );

workbench-app/src/components/Conversations/FileItem.tsx

@@ -11,22 +11,16 @@ import {
     Tooltip,
 } from '@fluentui/react-components';
 import { ArrowDownloadRegular, Delete16Regular } from '@fluentui/react-icons';
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
 import React from 'react';
 import * as StreamSaver from 'streamsaver';
 import { useWorkbenchService } from '../../libs/useWorkbenchService';
+import { Utility } from '../../libs/Utility';
 import { Conversation } from '../../models/Conversation';
 import { ConversationFile } from '../../models/ConversationFile';
 import { useDeleteConversationFileMutation } from '../../services/workbench';
 import { CommandButton } from '../App/CommandButton';
 import { ConversationFileIcon } from './ConversationFileIcon';
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.tz.guess();
-
 const useClasses = makeStyles({
     cardHeader: {
         '> .fui-CardHeader__header': {
@@ -53,7 +47,7 @@ export const FileItem: React.FC<FileItemProps> = (props) => {
     const workbenchService = useWorkbenchService();
     const [deleteConversationFile] = useDeleteConversationFileMutation();
 
-    const time = dayjs.utc(conversationFile.updated).tz(dayjs.tz.guess()).format('M/D/YYYY h:mm A');
+    const time = Utility.toFormattedDateString(conversationFile.updated, 'M/D/YYYY h:mm A');
 
     const sizeToDisplay = (size: number) => {
         if (size < 1024) {

workbench-app/src/components/Conversations/InteractHistory.tsx

@@ -10,10 +10,12 @@ import { useLocation } from 'react-router-dom';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Constants } from '../../Constants';
-import { WorkbenchEventSource } from '../../libs/WorkbenchEventSource';
+import { Utility } from '../../libs/Utility';
+import { WorkbenchEventSource, WorkbenchEventSourceType } from '../../libs/WorkbenchEventSource';
+import { useConversationUtility } from '../../libs/useConversationUtility';
 import { useEnvironment } from '../../libs/useEnvironment';
 import { Conversation } from '../../models/Conversation';
-import { conversationMessageFromJSON } from '../../models/ConversationMessage';
+import { ConversationMessage, conversationMessageFromJSON } from '../../models/ConversationMessage';
 import { ConversationParticipant } from '../../models/ConversationParticipant';
 import { useAppDispatch } from '../../redux/app/hooks';
 import {
@@ -62,6 +64,7 @@ export const InteractHistory: React.FC<InteractHistoryProps> = (props) => {
     const { hash } = useLocation();
     const [items, setItems] = React.useState<React.ReactNode[]>([]);
     const [hashItemIndex, setHashItemIndex] = React.useState<number>();
+    const { setLastRead } = useConversationUtility();
     const environment = useEnvironment();
     const dispatch = useAppDispatch();
 
@@ -110,6 +113,13 @@ export const InteractHistory: React.FC<InteractHistoryProps> = (props) => {
         performScrollToBottom();
     }, [performScrollToBottom]);
 
+    const handleOnRead = React.useCallback(
+        (message: ConversationMessage) => {
+            setLastRead(conversation, message.timestamp);
+        },
+        [setLastRead, conversation],
+    );
+
     React.useEffect(() => {
         if (isLoadingMessages || !messages) {
             setItems([]);
@@ -150,7 +160,7 @@ export const InteractHistory: React.FC<InteractHistoryProps> = (props) => {
                         </>
                     );
                 }
-                const date = dayjs.utc(message.timestamp).tz(dayjs.tz.guess()).format('M/D/YY');
+                const date = Utility.toFormattedDateString(message.timestamp, 'M/D/YY');
                 let displayDate = false;
                 if (date !== lastDate) {
                     displayDate = true;
@@ -186,6 +196,7 @@ export const InteractHistory: React.FC<InteractHistoryProps> = (props) => {
                             participant={senderParticipant}
                             hideParticipant={hideParticipant}
                             displayDate={displayDate}
+                            onRead={handleOnRead}
                         />
                     </div>
                 );
@@ -210,6 +221,7 @@ export const InteractHistory: React.FC<InteractHistoryProps> = (props) => {
         classes.item,
         classes.status,
         conversation,
+        handleOnRead,
         handleParticipantStatusChange,
         hash,
         hashItemIndex,
@@ -268,7 +280,11 @@ export const InteractHistory: React.FC<InteractHistoryProps> = (props) => {
 
         (async () => {
             // create or update the event source
-            const workbenchEventSource = await WorkbenchEventSource.createOrUpdate(environment.url, conversation.id);
+            const workbenchEventSource = await WorkbenchEventSource.createOrUpdate(
+                environment.url,
+                WorkbenchEventSourceType.Conversation,
+                conversation.id,
+            );
             workbenchEventSource.addEventListener('message.created', messageHandler);
             workbenchEventSource.addEventListener('message.deleted', messageHandler);
             workbenchEventSource.addEventListener('participant.created', participantCreatedHandler);
@@ -277,7 +293,9 @@ export const InteractHistory: React.FC<InteractHistoryProps> = (props) => {
 
         return () => {
             (async () => {
-                const workbenchEventSource = await WorkbenchEventSource.getInstance();
+                const workbenchEventSource = await WorkbenchEventSource.getInstance(
+                    WorkbenchEventSourceType.Conversation,
+                );
                 workbenchEventSource.removeEventListener('message.created', messageHandler);
                 workbenchEventSource.removeEventListener('message.deleted', messageHandler);
                 workbenchEventSource.removeEventListener('participant.created', participantCreatedHandler);

workbench-app/src/components/Conversations/InteractInput.tsx

@@ -150,8 +150,8 @@ export const InteractInput: React.FC<InteractInputProps> = (props) => {
     const editorRef = React.useRef<LexicalEditor | null>();
     const attachmentInputRef = React.useRef<HTMLInputElement>(null);
     const dispatch = useAppDispatch();
-    const localUserAccount = useLocalUserAccount();
-    const userId = localUserAccount.getUserId();
+    const { getUserId } = useLocalUserAccount();
+    const userId = getUserId();
 
     const {
         data: conversationMessages,

workbench-app/src/components/Conversations/InteractMessage.tsx

@@ -32,10 +32,9 @@ import {
     PersonRegular,
     TextBulletListSquareSparkleRegular,
 } from '@fluentui/react-icons';
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
 import React from 'react';
+import { useConversationUtility } from '../../libs/useConversationUtility';
+import { Utility } from '../../libs/Utility';
 import { Conversation } from '../../models/Conversation';
 import { ConversationMessage } from '../../models/ConversationMessage';
 import { ConversationParticipant } from '../../models/ConversationParticipant';
@@ -48,10 +47,6 @@ import { MessageDelete } from './MessageDelete';
 import { MessageLink } from './MessageLink';
 import { RewindConversation } from './RewindConversation';
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.tz.guess();
-
 const useClasses = makeStyles({
     root: {
         display: 'flex',
@@ -151,17 +146,19 @@ interface InteractMessageProps {
     hideParticipant?: boolean;
     displayDate?: boolean;
     readOnly: boolean;
+    onRead?: (message: ConversationMessage) => void;
 }
 
 export const InteractMessage: React.FC<InteractMessageProps> = (props) => {
-    const { conversation, message, participant, hideParticipant, displayDate, readOnly } = props;
+    const { conversation, message, participant, hideParticipant, displayDate, readOnly, onRead } = props;
     const classes = useClasses();
     const [createConversationMessage] = useCreateConversationMessageMutation();
+    const { isMessageVisibleRef, isMessageVisible, isUnread } = useConversationUtility();
 
     const isUser = participant.role === 'user';
 
-    const date = dayjs.utc(message.timestamp).tz(dayjs.tz.guess()).format('dddd, MMMM D');
-    const time = dayjs.utc(message.timestamp).tz(dayjs.tz.guess()).format('h:mm A');
+    const date = Utility.toFormattedDateString(message.timestamp, 'dddd, MMMM D');
+    const time = Utility.toFormattedDateString(message.timestamp, 'h:mm A');
 
     const attribution = React.useMemo(() => {
         if (message.metadata?.attribution) {
@@ -180,6 +177,13 @@ export const InteractMessage: React.FC<InteractMessageProps> = (props) => {
         contentClassName = mergeClasses(contentClassName, classes.userContent);
     }
 
+    React.useEffect(() => {
+        // if the message is visible, mark it as read
+        if (isMessageVisible && isUnread(conversation, message.timestamp)) {
+            onRead?.(message);
+        }
+    }, [isMessageVisible, isUnread, message.timestamp, onRead, conversation, message]);
+
     const content = React.useMemo(() => {
         const onSubmit = async (data: string) => {
             if (message.metadata?.command) {
@@ -322,7 +326,7 @@ export const InteractMessage: React.FC<InteractMessageProps> = (props) => {
             );
         }
         const footerContent = (
-            <div className={classes.footer}>
+            <div ref={isMessageVisibleRef} className={classes.footer}>
                 {aiGeneratedDisclaimer}
                 {footerItems}
             </div>
@@ -338,7 +342,23 @@ export const InteractMessage: React.FC<InteractMessageProps> = (props) => {
                 {attachmentList}
             </>
         );
-    }, [actions, classes, content, contentClassName, isUser, message.filenames, message.messageType, message.metadata]);
+    }, [
+        actions,
+        classes.actions,
+        classes.attachments,
+        classes.footer,
+        classes.generated,
+        classes.innerContent,
+        classes.noteContent,
+        classes.noticeContent,
+        content,
+        contentClassName,
+        isUser,
+        isMessageVisibleRef,
+        message.filenames,
+        message.messageType,
+        message.metadata,
+    ]);
 
     const renderedContent = getRenderedMessage();
 

workbench-app/src/components/FrontDoor/Chat/Chat.tsx

@@ -1,9 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 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';
 import React from 'react';
 import { useGetAssistantCapabilitiesSet } from '../../../libs/useAssistantCapabilities';
 import { Assistant } from '../../../models/Assistant';
@@ -21,10 +18,6 @@ import { InteractInput } from '../../Conversations/InteractInput';
 import { ChatCanvas } from './ChatCanvas';
 import { ChatControls } from './ChatControls';
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.tz.guess();
-
 const useClasses = makeStyles({
     // centered content, two rows
     // first is for chat history, fills the space and scrolls