Merge branch 'development' of github.com:epam/ai-dial-chat into e2e/l…

…ong_names_truncate_sidebar_search_tests # Conflicts: # e2e/src/testData/expectedMessages.ts # e2e/src/tests/compareMode.test.ts # e2e/src/tests/workWithModels.test.ts # e2e/src/ui/domData/styles.ts
epam · Dec 11, 2023 · f5ab47c · f5ab47c
2 parents 685c681 + e81f3c9
commit f5ab47c
Show file tree

Hide file tree

Showing 18 changed files with 139 additions and 86 deletions.
diff --git a/e2e/src/testData/expectedMessages.ts b/e2e/src/testData/expectedMessages.ts
@@ -81,6 +81,7 @@ export enum ExpectedMessages {
   sendMessageButtonEnabled = 'Send message button is enabled',
   tooltipContentIsValid = 'Tooltip content is valid',
   headerTitleCorrespondRequest = 'Chat header title correspond sent request',
+  headerTitleIsValid = 'Chat header title is valid',
   headerTitleIsFullyVisible = 'Chat header title is fully visible on tooltip',
   headerIconsCountIsValid = 'Chat header icons number is valid',
   headerCleanConversationIconVisible = 'Chat header Clean Conversation icon is visible',

diff --git a/e2e/src/tests/compareMode.test.ts b/e2e/src/tests/compareMode.test.ts
@@ -45,12 +45,14 @@ test('Compare mode button creates two new chats and opens them in compare mode',
 
     const todayConversations = await conversations.getTodayConversations();
     expect
-      .soft(todayConversations, ExpectedMessages.conversationOfToday)
-      .toEqual([
-        ExpectedConstants.newConversationTitle,
-        ExpectedConstants.newConversationTitle,
-        ExpectedConstants.newConversationTitle,
-      ]);
+      .soft(todayConversations.length, ExpectedMessages.conversationOfToday)
+      .toBe(3);
+
+    todayConversations.forEach((value) =>
+      expect
+        .soft(value, ExpectedMessages.conversationOfToday)
+        .toContain(ExpectedConstants.newConversationTitle),
+    );
   });
 });
 
@@ -235,6 +237,7 @@ test(
     localStorageManager,
     compare,
     rightChatHeader,
+    leftChatHeader,
   }) => {
     setTestIds('EPMRTC-544', 'EPMRTC-545');
     let firstConversation: Conversation;
@@ -257,11 +260,26 @@ test(
     await test.step('Remove 1st conversation from compare mode using Close btn in the header', async () => {
       await dialHomePage.openHomePage();
       await dialHomePage.waitForPageLoaded();
-      await rightChatHeader.removeConversationFromComparison.click();
+      const randomSide = GeneratorUtil.randomArrayElement(Object.values(Side));
+      let activeChat;
+      if (randomSide === Side.right) {
+        await rightChatHeader.removeConversationFromComparison.click();
+        activeChat = firstConversation.name;
+      } else {
+        await leftChatHeader.removeConversationFromComparison.click();
+        activeChat = secondConversation.name;
+      }
+
       const isCompareModeOn = await compare.isVisible();
       expect
         .soft(isCompareModeOn, ExpectedMessages.compareModeClosed)
         .toBeFalsy();
+
+      const activeChatHeader =
+        await leftChatHeader.chatTitle.getElementContent();
+      expect
+        .soft(activeChatHeader, ExpectedMessages.headerTitleIsValid)
+        .toBe(activeChat);
     });
   },
 );
@@ -407,7 +425,7 @@ test(
       await dialHomePage.waitForPageLoaded();
       await compare.waitForComparedConversationsLoaded();
       const requestsData = await chat.sendRequestInCompareMode(
-        'test message',
+        'how are you?',
         {
           rightEntity: firstConversation.model.id,
           leftEntity: secondConversation.model.id,

diff --git a/e2e/src/tests/defaultModelSettings.test.ts b/e2e/src/tests/defaultModelSettings.test.ts
@@ -53,7 +53,9 @@ test(
       for (const todayConversation of todayConversations) {
         expect
           .soft(todayConversation, ExpectedMessages.conversationOfToday)
-          .toBe(ExpectedConstants.newConversationTitle);
+          .toEqual(
+            expect.stringContaining(ExpectedConstants.newConversationTitle),
+          );
       }
     });
 

diff --git a/e2e/src/ui/selectors/sideBarSelectors.ts b/e2e/src/ui/selectors/sideBarSelectors.ts
@@ -8,6 +8,8 @@ export const SideBarSelectors = {
   dotsMenu: '[aria-haspopup="menu"]',
   renameInput: (value: string) =>
     `${Tags.input}[${Attributes.value}="${value}"]`,
+  renameDefaultNameInput: (value: string) =>
+    `${Tags.input}[${Attributes.value}^="${value}"]`,
   dropdownMenu: '[data-qa="dropdown-menu"]',
   import: '[data-qa="import"]',
   draggableArea: '[data-qa="draggable-area"]',

diff --git a/e2e/src/ui/webElements/chatMessages.ts b/e2e/src/ui/webElements/chatMessages.ts
@@ -64,6 +64,10 @@ export class ChatMessages extends BaseElement {
     return this.getChatMessage(message).locator(ChatSelectors.rate(rate));
   }
 
+  public getChatMessageRate(message: string, rate: Rate) {
+    return this.getChatMessage(message).locator(ChatSelectors.rate(rate));
+  }
+
   public async getGeneratedChatContent(messagesCount: number) {
     const chatContent = await this.chatMessages.getElementsInnerContent();
     return chatContent.slice(0, messagesCount - 1).join('\n');

diff --git a/e2e/src/ui/webElements/conversations.ts b/e2e/src/ui/webElements/conversations.ts
@@ -39,9 +39,9 @@ export class Conversations extends BaseElement {
     if (!this.conversationInput) {
       this.conversationInput = new Input(
         this.page,
-        `${ChatBarSelectors.conversation} >> ${SideBarSelectors.renameInput(
-          name,
-        )}`,
+        `${
+          ChatBarSelectors.conversation
+        } >> ${SideBarSelectors.renameDefaultNameInput(name)}`,
       );
     }
     return this.conversationInput;

diff --git a/src/components/Chatbar/components/ChatbarSettings.tsx b/src/components/Chatbar/components/ChatbarSettings.tsx
@@ -36,9 +36,6 @@ export const ChatbarSettings = () => {
 
   const dispatch = useAppDispatch();
 
-  const conversations = useAppSelector(
-    ConversationsSelectors.selectConversations,
-  );
   const isStreaming = useAppSelector(
     ConversationsSelectors.selectIsConversationsStreaming,
   );
@@ -65,12 +62,11 @@ export const ChatbarSettings = () => {
   const menuItems: DisplayMenuItemProps[] = useMemo(
     () => [
       {
-        name: t('Delete all conversations'),
-        display: conversations.length > 0,
-        dataQa: 'delete-conversations',
-        Icon: IconTrashX,
+        name: t('Create new folder'),
+        dataQa: 'create-folder',
+        Icon: FolderPlus,
         onClick: () => {
-          setIsClearModalOpen(true);
+          dispatch(ConversationsActions.createFolder());
         },
       },
       {
@@ -93,13 +89,11 @@ export const ChatbarSettings = () => {
         },
       },
       {
-        name: t('Create new folder'),
-        dataQa: 'create-folder',
-        Icon: FolderPlus,
+        name: t('Delete all conversations'),
+        dataQa: 'delete-conversations',
+        Icon: IconTrashX,
         onClick: () => {
-          dispatch(
-            ConversationsActions.createFolder({ name: t('New folder') }),
-          );
+          setIsClearModalOpen(true);
         },
       },
       {
@@ -122,14 +116,7 @@ export const ChatbarSettings = () => {
         },
       },
     ],
-    [
-      conversations,
-      dispatch,
-      enabledFeatures,
-      handleToggleCompare,
-      isStreaming,
-      t,
-    ],
+    [dispatch, enabledFeatures, handleToggleCompare, isStreaming, t],
   );
 
   return (

diff --git a/src/components/Chatbar/components/Conversation.tsx b/src/components/Chatbar/components/Conversation.tsx
@@ -11,14 +11,11 @@ import {
   useState,
 } from 'react';
 
-import { useTranslation } from 'next-i18next';
-
 import classNames from 'classnames';
 
 import { Conversation } from '@/src/types/chat';
 import { FeatureType, HighlightColor } from '@/src/types/common';
 import { Feature } from '@/src/types/features';
-import { Translation } from '@/src/types/translation';
 
 import {
   ConversationsActions,
@@ -97,7 +94,6 @@ interface Props {
 }
 
 export const ConversationComponent = ({ item: conversation, level }: Props) => {
-  const { t } = useTranslation(Translation.Chat);
   const dispatch = useAppDispatch();
 
   const modelsMap = useAppSelector(ModelsSelectors.selectModelsMap);
@@ -299,7 +295,6 @@ export const ConversationComponent = ({ item: conversation, level }: Props) => {
         localFolderId = uuidv4();
         dispatch(
           ConversationsActions.createFolder({
-            name: t('New folder'),
             folderId: localFolderId,
           }),
         );
@@ -311,7 +306,7 @@ export const ConversationComponent = ({ item: conversation, level }: Props) => {
         }),
       );
     },
-    [conversation.id, dispatch, t],
+    [conversation.id, dispatch],
   );
 
   const handleContextMenuOpen = (e: MouseEvent) => {

diff --git a/src/components/Promptbar/components/Prompt.tsx b/src/components/Promptbar/components/Prompt.tsx
@@ -8,14 +8,11 @@ import {
   useState,
 } from 'react';
 
-import { useTranslation } from 'next-i18next';
-
 import classNames from 'classnames';
 
 import { FeatureType, HighlightColor } from '@/src/types/common';
 import { Feature } from '@/src/types/features';
 import { Prompt } from '@/src/types/prompt';
-import { Translation } from '@/src/types/translation';
 
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 import {
@@ -47,7 +44,6 @@ export interface PromptMoveToFolderProps {
 }
 
 export const PromptComponent = ({ item: prompt, level }: Props) => {
-  const { t } = useTranslation(Translation.Chat);
   const dispatch = useAppDispatch();
 
   const folders = useAppSelector(PromptsSelectors.selectFolders);
@@ -187,7 +183,6 @@ export const PromptComponent = ({ item: prompt, level }: Props) => {
         localFolderId = uuidv4();
         dispatch(
           PromptsActions.createFolder({
-            name: t('New folder'),
             folderId: localFolderId,
           }),
         );
@@ -200,7 +195,7 @@ export const PromptComponent = ({ item: prompt, level }: Props) => {
       );
       setIsContextMenu(false);
     },
-    [dispatch, prompt.id, t],
+    [dispatch, prompt.id],
   );
 
   const handleClose = useCallback(() => {

diff --git a/src/components/Promptbar/components/PromptbarSettings.tsx b/src/components/Promptbar/components/PromptbarSettings.tsx
@@ -13,8 +13,10 @@ import { Prompt } from '@/src/types/prompt';
 import { Translation } from '@/src/types/translation';
 
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
-import { PromptsActions } from '@/src/store/prompts/prompts.reducers';
-import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
+import {
+  PromptsActions,
+  PromptsSelectors,
+} from '@/src/store/prompts/prompts.reducers';
 
 import { ConfirmDialog } from '@/src/components/Common/ConfirmDialog';
 import SidebarMenu from '@/src/components/Common/SidebarMenu';
@@ -30,20 +32,17 @@ export const PromptbarSettings: FC<PromptbarSettingsProps> = ({
 }) => {
   const { t } = useTranslation(Translation.PromptBar);
   const dispatch = useAppDispatch();
-  const [isOpen, setIsOpen] = useState(false);
-  const enabledFeatures = useAppSelector(
-    SettingsSelectors.selectEnabledFeatures,
-  );
+  const [isClearModalOpen, setIsClearModalOpen] = useState(false);
+  const folders = useAppSelector(PromptsSelectors.selectFolders);
 
   const menuItems: DisplayMenuItemProps[] = useMemo(
     () => [
       {
-        name: t('Delete all prompts'),
-        display: allPrompts.length > 0,
-        dataQa: 'delete-prompts',
-        Icon: IconTrashX,
+        name: t('Create new folder'),
+        dataQa: 'create-prompt-folder',
+        Icon: FolderPlus,
         onClick: () => {
-          setIsOpen(true);
+          dispatch(PromptsActions.createFolder());
         },
       },
       {
@@ -58,6 +57,7 @@ export const PromptbarSettings: FC<PromptbarSettingsProps> = ({
         CustomTriggerRenderer: Import,
       },
       {
+        display: allPrompts.length > 0 || folders.length > 0,
         name: t('Export prompts'),
         dataQa: 'export-prompts',
         Icon: IconFileArrowRight,
@@ -66,15 +66,16 @@ export const PromptbarSettings: FC<PromptbarSettingsProps> = ({
         },
       },
       {
-        name: t('Create new folder'),
-        dataQa: 'create-prompt-folder',
-        Icon: FolderPlus,
+        name: t('Delete all'),
+        display: allPrompts.length > 0 || folders.length > 0,
+        dataQa: 'delete-prompts',
+        Icon: IconTrashX,
         onClick: () => {
-          dispatch(PromptsActions.createFolder({ name: t('New folder') }));
+          setIsClearModalOpen(true);
         },
       },
     ],
-    [allPrompts, dispatch, enabledFeatures, t],
+    [allPrompts.length, dispatch, folders.length, t],
   );
 
   return (
@@ -85,15 +86,15 @@ export const PromptbarSettings: FC<PromptbarSettingsProps> = ({
       />
 
       <ConfirmDialog
-        isOpen={isOpen}
+        isOpen={isClearModalOpen}
         heading={t('Confirm clearing all prompts')}
         description={
           t('Are you sure that you want to delete all prompts?') || ''
         }
         confirmLabel={t('Clear')}
         cancelLabel={t('Cancel')}
         onClose={(result) => {
-          setIsOpen(false);
+          setIsClearModalOpen(false);
           if (result) {
             dispatch(PromptsActions.clearPrompts());
           }