fix(chat): redesign of empty conversation settings (Issue #2045, #2697,

#1691) (#2657)

Co-authored-by: Irina_Kartun <[email protected]>

README.md

@@ -12,13 +12,13 @@ This repository is managed as monorepo by [NX](https://nx.dev/) tools.
 
 ## Docs
 
-* `DIAL Chat` documentation placed [here](./apps/chat/README.md).
-* `DIAL Chat Theming` documentation is placed [here](./docs/THEME-CUSTOMIZATION.md).
-* `DIAL Overlay` documentation is placed [here](./libs/overlay/README.md).
-* `DIAL Chat Visualizer Connector` documentation is placed [here](./libs/chat-visualizer-connector/README.md).
-* `DIAL Visualizer Connector` documentation is placed [here](./libs/visualizer-connector/README.md).
+- `DIAL Chat` documentation placed [here](./apps/chat/README.md).
+- `DIAL Chat Theming` documentation is placed [here](./docs/THEME-CUSTOMIZATION.md).
+- `DIAL Overlay` documentation is placed [here](./libs/overlay/README.md).
+- `DIAL Chat Visualizer Connector` documentation is placed [here](./libs/chat-visualizer-connector/README.md).
+- `DIAL Visualizer Connector` documentation is placed [here](./libs/visualizer-connector/README.md).
 
-> In [AI DIAL repository](https://github.com/epam/ai-dial/blob/main/docs/user-guide.md), you can find a user guide for the AI DIAL Chat application. 
+> In [AI DIAL repository](https://github.com/epam/ai-dial/blob/main/docs/user-guide.md), you can find a user guide for the AI DIAL Chat application.
 
 ## Development
 

apps/chat-e2e/src/assertions/agentInfoAssertion.ts

@@ -0,0 +1,27 @@
+import { BaseAssertion } from '@/src/assertions/baseAssertion';
+import { ExpectedMessages } from '@/src/testData';
+import { AgentInfo } from '@/src/ui/webElements';
+import { expect } from '@playwright/test';
+
+export class AgentInfoAssertion extends BaseAssertion {
+  readonly agentInfo: AgentInfo;
+
+  constructor(agentInfo: AgentInfo) {
+    super();
+    this.agentInfo = agentInfo;
+  }
+
+  public async assertAgentIcon(expectedIcon: string) {
+    await super.assertEntityIcon(
+      await this.agentInfo.getAgentIcon(),
+      expectedIcon,
+    );
+  }
+
+  public async assertDescription(expectedDescription?: string) {
+    const description = await this.agentInfo.getAgentDescription();
+    expect
+      .soft(description, ExpectedMessages.agentDescriptionIsValid)
+      .toBe(expectedDescription ?? '');
+  }
+}

apps/chat-e2e/src/assertions/index.ts

@@ -34,7 +34,7 @@ export * from './manageAttachmentsAssertion';
 export * from './selectFolderModalAssertion';
 export * from './baseAssertion';
 export * from './conversationInfoTooltipAssertion';
-export * from './isolatedViewAssertion';
+export * from './agentInfoAssertion';
 export * from './addonsDialogAssertion';
 export * from './marketplaceApplicationsAssertion';
 export * from './conversationToCompareAssertion';

apps/chat-e2e/src/core/dialFixtures.ts

@@ -1,6 +1,7 @@
 import config from '../../config/chat.playwright.config';
 import { DialHomePage, MarketplacePage } from '../ui/pages';
 import {
+  AgentInfo,
   AttachFilesModal,
   Chat,
   ChatBar,
@@ -10,14 +11,14 @@ import {
   ConversationSettings,
   ConversationToCompare,
   EntitySelector,
-  MoreInfo,
   PromptBar,
   SelectFolderModal,
   SendMessage,
 } from '../ui/webElements';
 
 import {
   AccountSettingsAssertion,
+  AgentInfoAssertion,
   ApiAssertion,
   ChatAssertion,
   ChatHeaderAssertion,
@@ -31,7 +32,6 @@ import {
   ErrorToastAssertion,
   FolderAssertion,
   FooterAssertion,
-  IsolatedViewAssertion,
   MarketplaceApplicationsAssertion,
   MenuAssertion,
   PlaybackAssertion,
@@ -169,7 +169,7 @@ const dialTest = test.extend<
     temperatureSlider: TemperatureSlider;
     addons: Addons;
     addonsDialog: AddonsDialog;
-    isolatedView: MoreInfo;
+    agentInfo: AgentInfo;
     conversationData: ConversationData;
     promptData: PromptData;
     conversationDropdownMenu: DropdownMenu;
@@ -179,7 +179,6 @@ const dialTest = test.extend<
     promptModalDialog: PromptModalDialog;
     variableModalDialog: VariableModalDialog;
     chatHeader: ChatHeader;
-    moreInfo: MoreInfo;
     chatInfoTooltip: ChatInfoTooltip;
     compare: Compare;
     compareConversation: ConversationToCompare;
@@ -267,7 +266,7 @@ const dialTest = test.extend<
     selectFoldersAssertion: FolderAssertion<Folders>;
     selectFolderModalAssertion: SelectFolderModalAssertion;
     conversationInfoTooltipAssertion: ConversationInfoTooltipAssertion;
-    isolatedViewAssertion: IsolatedViewAssertion;
+    agentInfoAssertion: AgentInfoAssertion;
     addonsDialogAssertion: AddonsDialogAssertion;
     marketplaceApplicationsAssertion: MarketplaceApplicationsAssertion;
     conversationToCompareAssertion: ConversationToCompareAssertion;
@@ -474,9 +473,9 @@ const dialTest = test.extend<
     const addonsDialog = addons.getAddonsDialog();
     await use(addonsDialog);
   },
-  isolatedView: async ({ chat }, use) => {
-    const isolatedView = chat.getIsolatedView();
-    await use(isolatedView);
+  agentInfo: async ({ chat }, use) => {
+    const agentInfo = chat.getAgentInfo();
+    await use(agentInfo);
   },
   modelSelector: async ({ entitySettings }, use) => {
     const modelSelector = entitySettings.getModelSelector();
@@ -506,10 +505,6 @@ const dialTest = test.extend<
     const variableModalDialog = new VariableModalDialog(page);
     await use(variableModalDialog);
   },
-  moreInfo: async ({ entitySettings }, use) => {
-    const moreInfo = entitySettings.getMoreInfo();
-    await use(moreInfo);
-  },
   chatHeader: async ({ chat }, use) => {
     const chatHeader = chat.getChatHeader();
     await use(chatHeader);
@@ -919,9 +914,9 @@ const dialTest = test.extend<
       new ConversationInfoTooltipAssertion(chatInfoTooltip);
     await use(conversationInfoTooltipAssertion);
   },
-  isolatedViewAssertion: async ({ isolatedView }, use) => {
-    const isolatedViewAssertion = new IsolatedViewAssertion(isolatedView);
-    await use(isolatedViewAssertion);
+  agentInfoAssertion: async ({ agentInfo }, use) => {
+    const agentInfoAssertion = new AgentInfoAssertion(agentInfo);
+    await use(agentInfoAssertion);
   },
   addonsDialogAssertion: async ({ addonsDialog }, use) => {
     const addonsDialogAssertion = new AddonsDialogAssertion(addonsDialog);

apps/chat-e2e/src/core/dialOverlayFixtures.ts

@@ -1,4 +1,5 @@
 import {
+  AgentInfo,
   Chat,
   ChatHeader,
   ChatMessages,
@@ -7,7 +8,9 @@ import {
 } from '../ui/webElements';
 
 import {
+  AgentInfoAssertion,
   ApiAssertion,
+  BaseAssertion,
   ChatHeaderAssertion,
   ChatMessagesAssertion,
   EntitySettingAssertion,
@@ -30,6 +33,7 @@ const dialOverlayTest = base.extend<{
   overlayHomePage: OverlayHomePage;
   overlayContainer: AppContainer;
   overlayChat: Chat;
+  overlayAgentInfo: AgentInfo;
   overlayHeader: Header;
   overlayChatHeader: ChatHeader;
   overlayChatMessages: ChatMessages;
@@ -39,6 +43,8 @@ const dialOverlayTest = base.extend<{
   overlayIconApiHelper: IconApiHelper;
   overlayApiInjector: ApiInjector;
   overlayDataInjector: DataInjectorInterface;
+  overlayBaseAssertion: BaseAssertion;
+  overlayAgentInfoAssertion: AgentInfoAssertion;
   overlayChatHeaderAssertion: ChatHeaderAssertion<ChatHeader>;
   overlayChatMessagesAssertion: ChatMessagesAssertion;
   overlayApiAssertion: ApiAssertion;
@@ -68,6 +74,10 @@ const dialOverlayTest = base.extend<{
     const overlayChat = overlayContainer.getChat();
     await use(overlayChat);
   },
+  overlayAgentInfo: async ({ overlayChat }, use) => {
+    const overlayAgentInfo = overlayChat.getAgentInfo();
+    await use(overlayAgentInfo);
+  },
   overlayHeader: async ({ overlayContainer }, use) => {
     const overlayHeader = overlayContainer.getHeader();
     await use(overlayHeader);
@@ -105,6 +115,15 @@ const dialOverlayTest = base.extend<{
   overlayDataInjector: async ({ overlayApiInjector }, use) => {
     await use(overlayApiInjector);
   },
+  // eslint-disable-next-line no-empty-pattern
+  overlayBaseAssertion: async ({}, use) => {
+    const baseAssertion = new BaseAssertion();
+    await use(baseAssertion);
+  },
+  overlayAgentInfoAssertion: async ({ overlayAgentInfo }, use) => {
+    const overlayAgentInfoAssertion = new AgentInfoAssertion(overlayAgentInfo);
+    await use(overlayAgentInfoAssertion);
+  },
   overlayChatHeaderAssertion: async ({ overlayChatHeader }, use) => {
     const chatHeaderAssertion = new ChatHeaderAssertion(overlayChatHeader);
     await use(chatHeaderAssertion);

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

@@ -76,7 +76,7 @@ export const ExpectedConstants = {
   backgroundAccentAttribute: 'bg-accent-primary-alpha',
   noResults: 'No results found',
   notAllowedModelError:
-    'Not available model selected. Please, change the model to proceed',
+    'Not available agent selected. Please, change the agent to proceed',
   replayAsIsDescr:
     'This mode replicates user requests from the original conversation including settings set in each message.',
   replayOldVersionWarning:

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

@@ -77,7 +77,7 @@ export enum ExpectedMessages {
   infoAppIsValid = 'More info application is valid',
   infoAppDescriptionIsValid = 'More info application description is valid',
   entityHasDescription = 'Entity has description',
-  entityDescriptionIsValid = 'Entity description is valid',
+  agentDescriptionIsValid = 'Agent description is valid',
   entityDescriptionHasFullWidth = 'Entity description has full width',
   descriptionLinkIsBlue = 'Description link color is blue',
   descriptionLinkOpened = 'Description link is opened in a new window',

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

@@ -162,7 +162,7 @@ dialTest(
     await dialTest.step(
       'Apply model change and verify model icon is updated in the header, Replay icon stays on chat bar',
       async () => {
-        await chat.applyNewEntity();
+        await chat.applyNewAgent();
         await chatHeaderAssertion.assertHeaderIcon(expectedNewModelIcon);
         await conversationAssertion.assertReplayIconState(
           {
@@ -362,7 +362,7 @@ dialTest(
     await dialTest.step(
       'Continue generation with "Replay as is" option and verify model icons are updated on chat bar',
       async () => {
-        await chat.applyNewEntity();
+        await chat.applyNewAgent();
         await dialHomePage.mockChatTextResponse(
           MockedChatApiResponseBodies.simpleTextBody,
         );

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

@@ -860,9 +860,8 @@ dialTest(
     folderPrompts,
     prompts,
     promptBar,
-    talkToSelector,
-    entitySettings,
-    baseAssertion,
+    agentInfoAssertion,
+    agentInfo,
     setTestIds,
   }) => {
     setTestIds('EPMRTC-611');
@@ -968,8 +967,10 @@ dialTest(
         .isVisible();
 
       if (!isOrganisationVisible && !isSharedWithMeVisible) {
-        await baseAssertion.assertElementState(talkToSelector, 'visible');
-        await baseAssertion.assertElementState(entitySettings, 'visible');
+        await agentInfoAssertion.assertElementState(
+          agentInfo.getElementLocator(),
+          'visible',
+        );
       }
 
       if (i === 1) {

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

@@ -498,7 +498,7 @@ dialTest(
     conversationAssertion,
     chat,
     iconApiHelper,
-    conversationSettings,
+    agentInfo,
   }) => {
     dialTest.skip(
       [
@@ -601,7 +601,7 @@ dialTest(
         await conversations.selectConversation(
           ExpectedConstants.newConversationTitle,
         );
-        await conversationSettings.waitForState();
+        await agentInfo.waitForState();
         await chat.sendRequestWithButton('1+1=', false);
         const todayConversations = await conversations.getTodayConversations();
         expect

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

@@ -346,7 +346,7 @@ dialTest(
             simpleRequestModel,
             marketplacePage,
           );
-          await chat.applyNewEntity();
+          await chat.applyNewAgent();
           await chat.sendRequestWithButton('1+2=');
           const messagesCount =
             await chatMessages.chatMessages.getElementsCount();
@@ -370,7 +370,8 @@ dialTest(
     conversationDropdownMenu,
     chatBar,
     confirmationDialog,
-    recentEntitiesAssertion,
+    agentInfo,
+    agentInfoAssertion,
     chatMessages,
     chat,
     playbackAssertion,
@@ -455,7 +456,7 @@ dialTest(
           { name: playbackConversation.name },
           'visible',
         );
-        await recentEntitiesAssertion.assertPlaybackIconState('visible');
+        await agentInfoAssertion.assertElementState(agentInfo, 'visible');
       },
     );
 

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

@@ -173,8 +173,9 @@ dialTest(
     conversationData,
     dataInjector,
     chatHeader,
-    conversationSettings,
     confirmationDialog,
+    agentInfoAssertion,
+    agentInfo,
     conversations,
   }) => {
     setTestIds('EPMRTC-490', 'EPMRTC-491');
@@ -209,13 +210,7 @@ dialTest(
       async () => {
         await chatHeader.clearConversation.click();
         await confirmationDialog.confirm({ triggeredHttpMethod: 'PUT' });
-
-        await expect
-          .soft(
-            conversationSettings.getElementLocator(),
-            ExpectedMessages.conversationSettingsVisible,
-          )
-          .toBeVisible();
+        await agentInfoAssertion.assertElementState(agentInfo, 'visible');
       },
     );
   },

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

@@ -837,7 +837,7 @@ dialTest(
         await rightEntitySettings
           .getTemperatureSlider()
           .setTemperature(secondUpdatedTemp);
-        await chat.applyNewEntity();
+        await chat.applyNewAgent();
       },
     );