feat(chat)!: Implement the ability to access entity metadata. (Issue #3148)

apps/chat-e2e/src/testData/conversationHistory/conversationBuilder.ts

@@ -22,7 +22,7 @@ export class ConversationBuilder {
       temperature: DEFAULT_TEMPERATURE,
       replay: defaultReplay,
       selectedAddons: model.selectedAddons ?? [],
-      lastActivityDate: Date.now(),
+      updatedAt: Date.now(),
       folderId: '',
     };
   }
@@ -81,8 +81,8 @@ export class ConversationBuilder {
     return this;
   }
 
-  withLastActivityDate(lastActivityDate: number): ConversationBuilder {
-    this.conversation.lastActivityDate = lastActivityDate;
+  withUpdatedAt(updatedAt: number): ConversationBuilder {
+    this.conversation.updatedAt = updatedAt;
     return this;
   }
 

apps/chat-e2e/src/testData/conversationHistory/conversationData.ts

@@ -447,13 +447,13 @@ export class ConversationData extends FolderData {
     name?: string,
   ) {
     const conversation = this.prepareDefaultConversation(model, name);
-    conversation.lastActivityDate = DateUtil.getYesterdayDate();
+    conversation.updatedAt = DateUtil.getYesterdayDate();
     return conversation;
   }
 
   public prepareLastWeekConversation(model?: DialAIEntityModel, name?: string) {
     const conversation = this.prepareDefaultConversation(model, name);
-    conversation.lastActivityDate = DateUtil.getLastWeekDate();
+    conversation.updatedAt = DateUtil.getLastWeekDate();
     return conversation;
   }
 
@@ -462,13 +462,13 @@ export class ConversationData extends FolderData {
     name?: string,
   ) {
     const conversation = this.prepareDefaultConversation(model, name);
-    conversation.lastActivityDate = DateUtil.getLastMonthDate();
+    conversation.updatedAt = DateUtil.getLastMonthDate();
     return conversation;
   }
 
   public prepareOlderConversation(model?: DialAIEntityModel, name?: string) {
     const conversation = this.prepareDefaultConversation(model, name);
-    conversation.lastActivityDate = DateUtil.getOlderDate();
+    conversation.updatedAt = DateUtil.getOlderDate();
     return conversation;
   }
 

apps/chat-e2e/src/testData/expectedConstants.ts

@@ -258,6 +258,7 @@ export enum MenuOptions {
   select = 'Select',
   view = 'View',
   use = 'Use',
+  info = 'Info',
 }
 
 export enum FilterMenuOptions {

apps/chat-e2e/src/tests/chatBarConversation.test.ts

@@ -358,6 +358,7 @@ dialTest.skip(
         MenuOptions.rename,
         MenuOptions.compare,
         MenuOptions.moveTo,
+        MenuOptions.info,
         MenuOptions.delete,
       ]);
   },
@@ -490,6 +491,7 @@ dialTest(
             MenuOptions.moveTo,
             MenuOptions.share,
             MenuOptions.publish,
+            MenuOptions.info,
             MenuOptions.delete,
           ]);
       },
@@ -572,8 +574,8 @@ dialTest(
 //TODO: enable when item modification date is implemented on backend
 dialTest.skip(
   'Chat sorting. Yesterday.\n' +
-    'Chat sorting. Last 7 days when chat with lastActivityDate is the day before yesterday.\n' +
-    'Chat sorting. Last 30 days when chat with lastActivityDate is the 8th day.\n' +
+    'Chat sorting. Last 7 days when chat with updatedAt is the day before yesterday.\n' +
+    'Chat sorting. Last 30 days when chat with updatedAt is the 8th day.\n' +
     'Chat sorting. Yesterday chat is moved to Today section after regenerate response.\n' +
     'Chat sorting. Last 7 Days chat is moved to Today section after editing already answered message',
   async ({

apps/chat-e2e/src/tests/overlay/events.test.ts

@@ -142,7 +142,7 @@ dialOverlayTest(
               isPlayback: newConversationData.request.isPlayback ?? false,
               isReplay: newConversationData.request.isReplay ?? false,
               id: newConversationData.request.id,
-              lastActivityDate: newConversationData.response.updatedAt,
+              updatedAt: newConversationData.response.updatedAt,
               folderId: newConversationData.request.folderId,
               bucket: newConversationData.response.bucket,
             },
@@ -304,7 +304,7 @@ dialOverlayTest(
         //     id: conversation.id,
         //     folderId: conversation.folderId,
         //     publishedWithMe: !parentPath,
-        //     lastActivityDate: actualPublishedConversation.updatedAt,
+        //     updatedAt: actualPublishedConversation.updatedAt,
         //     bucket: actualPublishedConversation.bucket,
         //     ...(parentPath && { parentPath }),
         //   });
@@ -314,7 +314,7 @@ dialOverlayTest(
         let actualConversationsList = await overlayItemApiHelper.listItems(
           API.conversationsHost(),
         );
-        //need to sort conversations by 'lastActivityDate' and 'name' in order to define the last conversation
+        //need to sort conversations by 'updatedAt' and 'name' in order to define the last conversation
         actualConversationsList =
           SortingUtil.sortBackendConversationsByDateAndName(
             actualConversationsList,
@@ -338,7 +338,7 @@ dialOverlayTest(
             isPlayback: isPlayback ?? false,
             isReplay: isReplay ?? false,
             id: conversation.id,
-            lastActivityDate: actualConversation.updatedAt,
+            updatedAt: actualConversation.updatedAt,
             folderId: conversation.folderId,
           };
 

apps/chat-e2e/src/tests/prompts.test.ts

@@ -309,6 +309,7 @@ dialTest(
         MenuOptions.moveTo,
         MenuOptions.share,
         MenuOptions.publish,
+        MenuOptions.info,
         MenuOptions.delete,
       ]);
   },

apps/chat-e2e/src/tests/publishConversation.test.ts

@@ -200,6 +200,7 @@ dialAdminTest(
             MenuOptions.replay,
             MenuOptions.playback,
             MenuOptions.export,
+            MenuOptions.info,
           ],
         );
       },
@@ -365,6 +366,7 @@ dialAdminTest(
           MenuOptions.playback,
           MenuOptions.export,
           MenuOptions.unpublish,
+          MenuOptions.info,
         ]);
       },
     );

apps/chat-e2e/src/tests/shareConversationWithContent.test.ts

@@ -982,6 +982,7 @@ dialSharedWithMeTest(
           .toEqual([
             MenuOptions.duplicate,
             MenuOptions.export,
+            MenuOptions.info,
             MenuOptions.delete,
           ]);
       },

apps/chat/src/components/Chat/ChatModalsManager.jsx

@@ -1,3 +1,4 @@
+import { InfoModal } from '../Common/InfoModal';
 import { ReplaceConfirmationModal } from '../Common/ReplaceConfirmationModal/ReplaceConfirmationModal';
 import { UnshareDialog } from '../Common/UnshareDialog';
 import { UserMobile } from '../Header/User/UserMobile';
@@ -8,6 +9,7 @@ import { ShareModal } from './ShareModal';
 export function ChatModalsManager() {
   return (
     <>
+      <InfoModal />
       <UserMobile />
       <ShareModal />
       <UnshareDialog />

apps/chat/src/components/Chat/ConversationContextMenu.tsx

@@ -32,6 +32,7 @@ import { ContextMenuProps } from '@/src/types/menu';
 import { SharingType } from '@/src/types/share';
 import { Translation } from '@/src/types/translation';
 
+import { ChatActions } from '@/src/store/chat/chat.reducer';
 import {
   ConversationsActions,
   ConversationsSelectors,
@@ -354,6 +355,16 @@ export const ConversationContextMenu = ({
     dispatch(ConversationsActions.setRenamingConversationId(conversation.id));
   }, [conversation, dispatch]);
 
+  const handleOpenInfoModal = useCallback(() => {
+    const { id, updatedAt, createdAt, author, sharedWithMe } = conversation;
+
+    dispatch(
+      ChatActions.getEntityInfo({
+        entityInfo: { id, updatedAt, createdAt, author, sharedWithMe },
+      }),
+    );
+  }, [conversation, dispatch]);
+
   return (
     <>
       <button
@@ -391,6 +402,7 @@ export const ConversationContextMenu = ({
           isLoading={conversation.status !== UploadStatus.LOADED}
           onSelect={isHeaderMenu ? undefined : handleSelect}
           useStandardColor={isHeaderMenu}
+          onShowInfo={handleOpenInfoModal}
         />
       </button>
 

apps/chat/src/components/Chatbar/Conversations.tsx

@@ -60,7 +60,8 @@ const _Conversations = ({ conversations }: Props) => {
       other: [],
     };
     sortByDateAndName(conversationsToDisplay).forEach((conv) => {
-      const lastActivityDateNumber = conv.lastActivityDate;
+      const lastActivityDateNumber = conv.updatedAt;
+
       if (
         !lastActivityDateNumber ||
         typeof lastActivityDateNumber !== 'number'

apps/chat/src/components/Common/InfoModal.tsx

@@ -0,0 +1,85 @@
+import { useTranslation } from '@/src/hooks/useTranslation';
+
+import { ModalState } from '@/src/types/modal';
+import { Translation } from '@/src/types/translation';
+
+import { ChatActions } from '@/src/store/chat/chat.reducer';
+import { ChatSelectors } from '@/src/store/chat/chat.selectors';
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+
+import { OUTSIDE_PRESS_AND_MOUSE_EVENT } from '@/src/constants/modal';
+
+import { Modal } from './Modal';
+import { withRenderWhen } from './RenderWhen';
+
+interface infoRowProps {
+  dataQa: string;
+  infoLabel: string;
+  info: string;
+}
+
+function InfoRow({ dataQa, infoLabel, info }: infoRowProps) {
+  return (
+    <div className="grid grid-cols-3 gap-4" data-qa={dataQa}>
+      <span className="col-span-1 whitespace-pre-wrap break-words text-secondary">
+        {infoLabel}:
+      </span>
+      <span className="col-span-2 whitespace-pre-wrap break-words">{info}</span>
+    </div>
+  );
+}
+
+export function InfoModalView() {
+  const { t } = useTranslation(Translation.Chat);
+  const dispatch = useAppDispatch();
+
+  const modalState = useAppSelector(ChatSelectors.selectInfoModalState);
+  const entityInfo = useAppSelector(ChatSelectors.selectSelectedEntityInfo);
+
+  const handleClose = () => {
+    dispatch(ChatActions.setInfoModalState(ModalState.CLOSED));
+  };
+  return (
+    <Modal
+      portalId="theme-main"
+      state={modalState}
+      onClose={handleClose}
+      dataQa="info-modal"
+      containerClassName="inline-block w-full min-w-[90%] px-3 py-4 md:p-6 md:min-w-[300px] md:max-w-[400px]"
+      dismissProps={OUTSIDE_PRESS_AND_MOUSE_EVENT}
+      heading={t('Information')}
+      headingClassName="mb-4"
+      loaderClassName="min-h-[80px]"
+    >
+      <div className="flex flex-col justify-between gap-4">
+        {entityInfo?.updatedAt && (
+          <InfoRow
+            infoLabel={t('Last updated')}
+            info={entityInfo.updatedAt}
+            dataQa="updated-at"
+          />
+        )}
+
+        {entityInfo?.createdAt && (
+          <InfoRow
+            infoLabel={t('Creation date')}
+            info={entityInfo.createdAt}
+            dataQa="created-at"
+          />
+        )}
+
+        {(entityInfo?.isPublic || entityInfo?.sharedWithMe) && (
+          <InfoRow
+            infoLabel={t('Author')}
+            info={entityInfo.author ?? t('Unknown')}
+            dataQa="author"
+          />
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+export const InfoModal = withRenderWhen(ChatSelectors.selectInfoModalOpened)(
+  InfoModalView,
+);

apps/chat/src/components/Common/ItemContextMenu.tsx

@@ -5,6 +5,7 @@ import {
   IconFileArrowRight,
   IconFolderPlus,
   IconFolderShare,
+  IconInfoCircle,
   IconPencilMinus,
   IconPlayerPlay,
   IconRefreshDot,
@@ -73,6 +74,7 @@ interface ItemContextMenuProps {
   onUse?: MouseEventHandler<unknown>;
   isLoading?: boolean;
   TriggerIcon?: ContextMenuProps['TriggerIcon'];
+  onShowInfo?: () => void;
 }
 
 export default function ItemContextMenu({
@@ -103,6 +105,7 @@ export default function ItemContextMenu({
   onSelect,
   disableUse,
   onUse,
+  onShowInfo,
   TriggerIcon,
 }: ItemContextMenuProps) {
   const { t } = useTranslation(Translation.SideBar);
@@ -308,6 +311,13 @@ export default function ItemContextMenu({
         onClick: onUnpublish,
         disabled: disableAll,
       },
+      {
+        name: t('Info'),
+        display: !!onShowInfo,
+        dataQa: 'info',
+        Icon: IconInfoCircle,
+        onClick: onShowInfo,
+      },
       {
         name: t('Delete'),
         dataQa: 'delete',
@@ -341,6 +351,7 @@ export default function ItemContextMenu({
       onReplay,
       onSelect,
       onShare,
+      onShowInfo,
       onUnpublish,
       onUnshare,
       onUse,

apps/chat/src/components/Common/Modal.tsx

@@ -32,6 +32,7 @@ export interface Props extends FormHTMLAttributes<HTMLFormElement> {
   state?: ModalState | boolean;
   heading?: string | ReactNode;
   headingClassName?: string;
+  loaderClassName?: string;
   dataQa: string;
   initialFocus?: number | MutableRefObject<HTMLElement | null>;
   overlayClassName?: string;
@@ -52,6 +53,7 @@ function ModalView({
   state = ModalState.CLOSED,
   heading,
   headingClassName,
+  loaderClassName,
   onClose,
   children,
   dataQa,
@@ -145,7 +147,12 @@ function ModalView({
               )}
 
               {state === ModalState.LOADING ? (
-                <div className="flex min-h-[200px] items-center justify-center">
+                <div
+                  className={classNames(
+                    'flex min-h-[200px] items-center justify-center',
+                    loaderClassName,
+                  )}
+                >
                   <Spinner size={60} />
                 </div>
               ) : (