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

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,18 @@
+import { BaseAssertion } from '@/src/assertions/baseAssertion';
+import { AgentInfo } from '@/src/ui/webElements';
+
+export class AgentInfoAssertion extends BaseAssertion {
+  readonly agentInfo: AgentInfo;
+
+  constructor(agentInfo: AgentInfo) {
+    super();
+    this.agentInfo = agentInfo;
+  }
+
+  public async assertModelIcon(expectedIcon: string) {
+    await super.assertEntityIcon(
+      await this.agentInfo.getAgentIcon(),
+      expectedIcon,
+    );
+  }
+}

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/tests/isolatedView.test.ts

@@ -15,7 +15,7 @@ dialTest(
     'Isolated view: available features in conversation',
   async ({
     dialHomePage,
-    isolatedView,
+    agentInfo,
     iconApiHelper,
     chat,
     chatBar,
@@ -24,7 +24,7 @@ dialTest(
     chatMessages,
     chatInfoTooltip,
     conversationInfoTooltipAssertion,
-    isolatedViewAssertion,
+    agentInfoAssertion,
     localStorageManager,
     setTestIds,
   }) => {
@@ -43,21 +43,21 @@ dialTest(
         await dialHomePage.navigateToUrl(
           ExpectedConstants.isolatedUrl(expectedModel.id),
         );
-        await isolatedView.waitForState();
-        const modelName = await isolatedView.getEntityName();
+        await agentInfo.waitForState();
+        const modelName = await agentInfo.getAgentName();
         expect
           .soft(modelName, ExpectedMessages.entityNameIsValid)
           .toBe(expectedModelName);
 
-        const modelDescription = await isolatedView.getEntityDescription();
+        const modelDescription = await agentInfo.getAgentDescription();
         //only short description is displayed for isolated models
         const expectedShortDescription =
           expectedModel.description?.split(/\s*\n\s*\n\s*/g)[0];
         expect
           .soft(modelDescription, ExpectedMessages.entityDescriptionIsValid)
           .toBe(expectedShortDescription);
 
-        await isolatedViewAssertion.assertModelIcon(expectedModelIcon);
+        await agentInfoAssertion.assertModelIcon(expectedModelIcon);
       },
     );
 

apps/chat-e2e/src/ui/pages/dialHomePage.ts

@@ -76,13 +76,10 @@ export class DialHomePage extends BasePage {
       await promptPreviewModal.waitForState();
       await promptPreviewModal.promptName.waitForState();
     } else {
-      const conversationSettings = appContainer.getConversationSettings();
-      await conversationSettings
-        .getTalkToSelector()
-        .waitForState({ state: 'attached' });
-      await conversationSettings
-        .getEntitySettings()
-        .waitForState({ state: 'attached' });
+      await chat.getAgentInfo().waitForState({ state: 'attached' });
+      await chat.configureSettingsButton.waitForState({
+        state: 'attached',
+      });
     }
   }
 

apps/chat-e2e/src/ui/selectors/chatSelectors.ts

@@ -32,12 +32,13 @@ export const ChatSettingsSelectors = {
   selectedAddons: '[data-qa="selected-addons"]',
   recentAddons: '[data-qa="recent-addons"]',
   seeAllSelectors: '[data-qa="see-all-addons"]',
-  moreInfo: '[data-qa="more-info"]',
-  entityInfo: '[data-qa="entity-info"]',
-  entityDescription: '[data-qa="entity-descr"]',
+  agentInfoContainer: '[data-qa="agent-info-container"]',
+  agentInfo: '[data-qa="agent-info"]',
+  agentDescription: '[data-qa="entity-descr"]',
   applyChanges: '[data-qa="apply-changes"]',
   playbackButton: '[data-qa="Playback"]',
   replayAsIsButton: '[data-qa="Replay as is"]',
+  configureSettingsButton: '[data-qa="configure-settings"]',
 };
 
 export const MessageInputSelectors = {

apps/chat-e2e/src/ui/webElements/agentInfo.ts

@@ -0,0 +1,39 @@
+import { ChatSettingsSelectors } from '../selectors';
+import { BaseElement } from './baseElement';
+
+import { Tags } from '@/src/ui/domData';
+import { Locator, Page } from '@playwright/test';
+
+export class AgentInfo extends BaseElement {
+  constructor(page: Page, parentLocator: Locator) {
+    super(page, ChatSettingsSelectors.agentInfoContainer, parentLocator);
+  }
+  public agentInfo = this.getChildElementBySelector(
+    ChatSettingsSelectors.agentInfo,
+  );
+
+  public agentDescription = this.getChildElementBySelector(
+    ChatSettingsSelectors.agentDescription,
+  );
+  public agentIcon = this.getChildElementBySelector(Tags.img);
+
+  async getAgentIcon() {
+    await this.agentIcon.waitForState();
+    return this.getElementIcon(this.rootLocator);
+  }
+
+  public async getAgentDescription() {
+    if (await this.agentDescription.isVisible()) {
+      return this.agentDescription.getElementInnerContent();
+    }
+    return undefined;
+  }
+
+  public async getAgentName() {
+    return this.agentInfo
+      .getElementLocator()
+      .locator(Tags.span)
+      .last()
+      .textContent();
+  }
+}

apps/chat-e2e/src/ui/webElements/chat.ts

@@ -10,10 +10,10 @@ import { SendMessage } from './sendMessage';
 
 import { API, ExpectedConstants, ScrollState, Side } from '@/src/testData';
 import { keys } from '@/src/ui/keyboard';
+import { AgentInfo } from '@/src/ui/webElements/agentInfo';
 import { ChatHeader } from '@/src/ui/webElements/chatHeader';
 import { Compare } from '@/src/ui/webElements/compare';
 import { Footer } from '@/src/ui/webElements/footer';
-import { MoreInfo } from '@/src/ui/webElements/moreInfo';
 import { PlaybackControl } from '@/src/ui/webElements/playbackControl';
 import { PublicationReviewControl } from '@/src/ui/webElements/publicationReviewControl';
 import { Locator, Page } from '@playwright/test';
@@ -31,7 +31,7 @@ export class Chat extends BaseElement {
   private chatMessages!: ChatMessages;
   private compare!: Compare;
   private playbackControl!: PlaybackControl;
-  private isolatedView!: MoreInfo;
+  private agentInfo!: AgentInfo;
   private footer!: Footer;
   private publicationReviewControl!: PublicationReviewControl;
   public replay = this.getChildElementBySelector(ReplaySelectors.startReplay);
@@ -51,6 +51,9 @@ export class Chat extends BaseElement {
   public addModelButton = this.getChildElementBySelector(
     ChatSelectors.addModelToWorkspace,
   );
+  public configureSettingsButton = this.getChildElementBySelector(
+    ChatSettingsSelectors.configureSettingsButton,
+  );
 
   getChatHeader(): ChatHeader {
     if (!this.chatHeader) {
@@ -87,11 +90,11 @@ export class Chat extends BaseElement {
     return this.playbackControl;
   }
 
-  getIsolatedView(): MoreInfo {
-    if (!this.isolatedView) {
-      this.isolatedView = new MoreInfo(this.page, this.rootLocator);
+  getAgentInfo(): AgentInfo {
+    if (!this.agentInfo) {
+      this.agentInfo = new AgentInfo(this.page, this.rootLocator);
     }
-    return this.isolatedView;
+    return this.agentInfo;
   }
 
   getFooter(): Footer {

apps/chat-e2e/src/ui/webElements/entitySettings.ts

@@ -4,7 +4,6 @@ import { BaseElement } from './baseElement';
 import { Addons } from '@/src/ui/webElements/addons';
 import { PROMPT_APPLY_DELAY } from '@/src/ui/webElements/chat';
 import { ModelSelector } from '@/src/ui/webElements/modelSelector';
-import { MoreInfo } from '@/src/ui/webElements/moreInfo';
 import { PromptList } from '@/src/ui/webElements/promptList';
 import { TemperatureSlider } from '@/src/ui/webElements/temperatureSlider';
 import { Locator, Page } from '@playwright/test';
@@ -20,7 +19,6 @@ export class EntitySettings extends BaseElement {
   private temperatureSlider!: TemperatureSlider;
   private addons!: Addons;
   private modelSelector!: ModelSelector;
-  private moreInfo!: MoreInfo;
   private promptList!: PromptList;
 
   getPromptList() {
@@ -54,13 +52,6 @@ export class EntitySettings extends BaseElement {
     return this.modelSelector;
   }
 
-  getMoreInfo(): MoreInfo {
-    if (!this.moreInfo) {
-      this.moreInfo = new MoreInfo(this.page, this.rootLocator);
-    }
-    return this.moreInfo;
-  }
-
   public async setSystemPrompt(prompt: string) {
     await this.systemPrompt.typeInInput(prompt);
     // eslint-disable-next-line playwright/no-wait-for-timeout

apps/chat-e2e/src/ui/webElements/index.ts

@@ -17,7 +17,7 @@ export * from './promptModalDialog';
 export * from './temperatureSlider';
 export * from './promptList';
 export * from './variableModalDialog';
-export * from './moreInfo';
+export * from './agentInfo';
 export * from './chatHeader';
 export * from './chatInfoTooltip';
 export * from './compare';