From a859859383098321afedc3c9cb9d6fc7d72fa119 Mon Sep 17 00:00:00 2001
From: Armen Derikyan <82438895+Derikyan@users.noreply.github.com>
Date: Fri, 31 Jan 2025 16:14:28 +0400
Subject: [PATCH] fix(chat): make version view user friendly, add validation
 (Issue #2956) (#3065)

---
 .../marketplace/agentDetailsModal.ts          | 20 +++++++++++++------
 .../marketplace/marketplaceAgents.ts          | 19 ++++++++++++++----
 .../src/ui/webElements/talkToAgentDialog.ts   |  4 +++-
 .../components/Chat/ModelVersionSelect.tsx    | 12 ++++++-----
 .../src/components/Chat/TalkTo/TalkToCard.tsx |  2 +-
 .../Common/ApplicationWizard/form.ts          | 17 ++++++++++++----
 .../Marketplace/ApplicationCard.tsx           | 12 ++++++-----
 7 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/apps/chat-e2e/src/ui/webElements/marketplace/agentDetailsModal.ts b/apps/chat-e2e/src/ui/webElements/marketplace/agentDetailsModal.ts
index 665248f223..ce3cd24ce6 100644
--- a/apps/chat-e2e/src/ui/webElements/marketplace/agentDetailsModal.ts
+++ b/apps/chat-e2e/src/ui/webElements/marketplace/agentDetailsModal.ts
@@ -32,11 +32,19 @@ export class AgentDetailsModal extends BaseElement {
   );
   public closeButton = this.getChildElementBySelector(IconSelectors.cancelIcon);
 
-  public async clickUseButton() {
-    const responsePromise = this.page.waitForResponse(
-      (resp) => resp.request().method() === 'PUT',
-    );
-    await this.useButton.click();
-    await responsePromise;
+  public async clickUseButton({
+    isInstalledDeploymentsUpdated = false,
+  }: {
+    isInstalledDeploymentsUpdated?: boolean;
+  }) {
+    if (isInstalledDeploymentsUpdated) {
+      const responsePromise = this.page.waitForResponse(
+        (resp) => resp.request().method() === 'PUT',
+      );
+      await this.useButton.click();
+      await responsePromise;
+    } else {
+      await this.useButton.click();
+    }
   }
 }
diff --git a/apps/chat-e2e/src/ui/webElements/marketplace/marketplaceAgents.ts b/apps/chat-e2e/src/ui/webElements/marketplace/marketplaceAgents.ts
index c87abd74a7..7c87394b54 100644
--- a/apps/chat-e2e/src/ui/webElements/marketplace/marketplaceAgents.ts
+++ b/apps/chat-e2e/src/ui/webElements/marketplace/marketplaceAgents.ts
@@ -101,7 +101,12 @@ export class MarketplaceAgents extends BaseElement {
     }
   }
 
-  public async isAgentUsed(entity: DialAIEntityModel): Promise<boolean> {
+  public async isAgentUsed(
+    entity: DialAIEntityModel,
+    {
+      isInstalledDeploymentsUpdated = false,
+    }: { isInstalledDeploymentsUpdated?: boolean } = {},
+  ): Promise<boolean> {
     let isAgentVisible = false;
     const entityLocator = this.agentName(entity.name);
     //open entity details modal if it is visible
@@ -129,7 +134,9 @@ export class MarketplaceAgents extends BaseElement {
               await agentDetailsModal
                 .getVersionDropdownMenu()
                 .selectMenuOption(entity.version);
-              await agentDetailsModal.clickUseButton();
+              await agentDetailsModal.clickUseButton({
+                isInstalledDeploymentsUpdated,
+              });
               isAgentVisible = true;
             } else {
               await agentDetailsModal.closeButton.click();
@@ -138,11 +145,15 @@ export class MarketplaceAgents extends BaseElement {
             await agentDetailsModal.closeButton.click();
           }
         } else {
-          await agentDetailsModal.clickUseButton();
+          await agentDetailsModal.clickUseButton({
+            isInstalledDeploymentsUpdated,
+          });
           isAgentVisible = true;
         }
       } else {
-        await agentDetailsModal.clickUseButton();
+        await agentDetailsModal.clickUseButton({
+          isInstalledDeploymentsUpdated,
+        });
         isAgentVisible = true;
       }
     }
diff --git a/apps/chat-e2e/src/ui/webElements/talkToAgentDialog.ts b/apps/chat-e2e/src/ui/webElements/talkToAgentDialog.ts
index c67b8eebc3..662835eb57 100644
--- a/apps/chat-e2e/src/ui/webElements/talkToAgentDialog.ts
+++ b/apps/chat-e2e/src/ui/webElements/talkToAgentDialog.ts
@@ -67,7 +67,9 @@ export class TalkToAgentDialog extends BaseElement {
         const expectedAgents = ModelsUtil.getLatestOpenAIEntities();
         const allAgents = marketplace.getAgents();
         await allAgents.waitForAgentByIndex(expectedAgents.length);
-        const isAllApplicationUsed = await allAgents.isAgentUsed(entity);
+        const isAllApplicationUsed = await allAgents.isAgentUsed(entity, {
+          isInstalledDeploymentsUpdated: true,
+        });
         if (!isAllApplicationUsed) {
           throw new Error(
             `Entity with name: ${entity.name} and version: ${entity.version ?? 'N/A'} is not found!`,
diff --git a/apps/chat/src/components/Chat/ModelVersionSelect.tsx b/apps/chat/src/components/Chat/ModelVersionSelect.tsx
index 4d05eaa66c..1ba0d239fb 100644
--- a/apps/chat/src/components/Chat/ModelVersionSelect.tsx
+++ b/apps/chat/src/components/Chat/ModelVersionSelect.tsx
@@ -53,12 +53,14 @@ export const ModelVersionSelect = ({
   if (entities.length < 2) {
     if (entities.length && entities[0].version) {
       return (
-        <div
-          className={classNames('flex truncate', className)}
-          data-qa="version"
-        >
+        <div className={classNames('flex truncate', className)}>
           {showVersionPrefix && <VersionPrefix />}
-          {entities[0].version}
+          <span
+            className="mr-3 max-w-full overflow-hidden truncate whitespace-nowrap"
+            data-qa="version"
+          >
+            {entities[0].version}
+          </span>
         </div>
       );
     }
diff --git a/apps/chat/src/components/Chat/TalkTo/TalkToCard.tsx b/apps/chat/src/components/Chat/TalkTo/TalkToCard.tsx
index e92365e5e4..7b37396060 100644
--- a/apps/chat/src/components/Chat/TalkTo/TalkToCard.tsx
+++ b/apps/chat/src/components/Chat/TalkTo/TalkToCard.tsx
@@ -358,7 +358,7 @@ export const TalkToCard = ({
               <p className="mr-1 text-xs text-secondary">{t('Version')}: </p>
               <ModelVersionSelect
                 readonly={conversation.playback?.isPlayback}
-                className="h-max text-xs"
+                className="h-max truncate text-xs"
                 entities={versionsToSelect}
                 onSelect={handleSelectVersion}
                 currentEntity={entity}
diff --git a/apps/chat/src/components/Common/ApplicationWizard/form.ts b/apps/chat/src/components/Common/ApplicationWizard/form.ts
index dd4a32ebaa..6a6875c24b 100644
--- a/apps/chat/src/components/Common/ApplicationWizard/form.ts
+++ b/apps/chat/src/components/Common/ApplicationWizard/form.ts
@@ -101,10 +101,19 @@ export const validators: Validators = {
     validate: (v) => {
       const reg = /^[0-9]+\.[0-9]+\.[0-9]+$/;
 
-      return (
-        reg.test(v) ||
-        'Version should be in x.y.z format and contain only numbers and dots.'
-      );
+      if (!reg.test(v)) {
+        return 'Version should be in x.y.z format and contain only numbers and dots.';
+      }
+
+      const parts = v.split('.');
+
+      for (const part of parts) {
+        if (part.length > 5) {
+          return 'Each part of the version should contain no more than five numbers.';
+        }
+      }
+
+      return true;
     },
     setValueAs: (v) => {
       return (v as string).replace(/[^0-9.]/g, '');
diff --git a/apps/chat/src/components/Marketplace/ApplicationCard.tsx b/apps/chat/src/components/Marketplace/ApplicationCard.tsx
index bccdaf5320..ee279fc0b8 100644
--- a/apps/chat/src/components/Marketplace/ApplicationCard.tsx
+++ b/apps/chat/src/components/Marketplace/ApplicationCard.tsx
@@ -350,19 +350,21 @@ export const ApplicationCard = ({
               {entity.version && (
                 <div
                   className={classNames(
-                    'text-xs leading-[14px] text-secondary',
-                    !isMyApp && 'mr-6',
+                    'mr-6 flex gap-1 text-xs leading-[14px] text-secondary',
+                    !isMyApp && '!mr-12',
                   )}
                 >
                   {t('Version: ')}
-                  {entity.version}
+                  <span className="max-w-full overflow-hidden truncate whitespace-nowrap">
+                    {entity.version}
+                  </span>
                 </div>
               )}
               <div className="flex whitespace-nowrap">
                 <div
                   className={classNames(
-                    'shrink truncate text-base font-semibold leading-[20px] text-primary',
-                    !isMyApp && !entity.version && 'mr-6',
+                    'mr-6 shrink truncate text-base font-semibold leading-[20px] text-primary',
+                    !isMyApp && !entity.version && '!mr-12',
                   )}
                   data-qa="agent-name"
                 >