feat(chat): change available agent error message ( Issue #4034)

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

@@ -30,10 +30,10 @@ export class ChatAssertion extends BaseAssertion {
     await this.assertElementState(changeAgentButton, expectedState);
   }
 
-  public async assertNotAllowedModelLabelContent() {
+  public async assertNotAllowedModelLabelContent(model: string) {
     await this.assertElementText(
       this.chat.notAllowedModelLabel,
-      ExpectedConstants.notAllowedModelError,
+      ExpectedConstants.notAllowedAgentError(model),
       ExpectedMessages.notAllowedModelErrorDisplayed,
     );
   }

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

@@ -76,6 +76,8 @@ export const ExpectedConstants = {
   noResults: 'No results found',
   notAllowedModelError:
     'Not available agent selected. Please, change the agent to proceed',
+  notAllowedAgentError: (agent: string) =>
+    `Agent is not available. Please, change the agent "${agent}" to proceed.`,
   replayAsIsDescr:
     'This mode replicates user requests from the original conversation including settings set in each message.',
   replayOldVersionWarning:

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

@@ -141,6 +141,8 @@ dialTest(
     chatBar,
     confirmationDialog,
     chatMessages,
+    chatMessagesAssertion,
+    toast,
     chat,
     chatHeader,
     talkToAgentDialog,
@@ -352,12 +354,12 @@ dialTest(
             simpleRequestModel,
             marketplacePage,
           );
+          await toast.closeToast();
+          await dialHomePage.mockChatTextResponse(
+            MockedChatApiResponseBodies.simpleTextBody,
+          );
           await chat.sendRequestWithButton('1+2=');
-          const messagesCount =
-            await chatMessages.chatMessages.getElementsCount();
-          expect
-            .soft(messagesCount, ExpectedMessages.messageCountIsCorrect)
-            .toBe(6);
+          await chatMessagesAssertion.assertMessagesCount(6);
         }
       },
     );

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

@@ -756,7 +756,7 @@ dialTest(
         );
         //TODO: add conversation screen verification when fixed https://github.com/epam/ai-dial-chat/issues/2697
         await chatAssertion.assertReplayButtonState('hidden');
-        await chatAssertion.assertNotAllowedModelLabelContent();
+        await chatAssertion.assertNotAllowedModelLabelContent(notAllowedModel);
       },
     );
 

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

@@ -672,7 +672,9 @@ dialTest(
         await dialHomePage.reloadPage();
         await dialHomePage.waitForPageLoaded();
         await conversations.selectEntity(conversation.name);
-        await chatAssertion.assertNotAllowedModelLabelContent();
+        await chatAssertion.assertNotAllowedModelLabelContent(
+          conversation.model.id,
+        );
       },
     );
 

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

@@ -529,7 +529,9 @@ dialTest(
         await dialHomePage.openHomePage();
         await dialHomePage.waitForPageLoaded();
         await conversations.selectEntity(conversationWithNonExistentApp.name);
-        await chatAssertion.assertNotAllowedModelLabelContent(); // Assert error message
+        await chatAssertion.assertNotAllowedModelLabelContent(
+          nonExistentAppName,
+        ); // Assert error message
       },
     );
 

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

@@ -132,8 +132,8 @@ export class BaseElement {
     return this.rootLocator.boundingBox();
   }
 
-  async isElementEnabled() {
-    return this.rootLocator.isEnabled();
+  async isElementEnabled(options?: { timeout?: number }) {
+    return this.rootLocator.isEnabled(options);
   }
 
   async scrollIntoElementView() {

apps/chat/public/locales/en/chat.json

@@ -1,4 +1,6 @@
 {
     "chat.error.incorrect-selected_addon": "Not allowed addon selected. Please, change the addon to proceed",
-    "chat.error.incorrect-selected_model": "Not available agent selected. Please, change the agent to proceed"
+    "chat.error.incorrect-selected_model": "Not available agent selected. Please, change the agent to proceed",
+    "chat.error.agent-not-available": "Agent is not available. Please, {{click}} {{agentId}} to proceed.",
+    "chat.error.agents-not-available": "Agents are not available. Please, change the agents {{agentId}} and {{agentId}} to proceed."
 }

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

@@ -20,8 +20,6 @@ import { clearStateForMessages } from '@/src/utils/app/clear-messages-state';
 import {
   excludeSystemMessages,
   getConversationModelParams,
-  isReplayAsIsConversation,
-  isReplayConversation,
 } from '@/src/utils/app/conversation';
 import {
   isConversationWithFormSchema,
@@ -32,7 +30,6 @@ import { is4XLScreen } from '@/src/utils/app/mobile';
 import { doesModelHaveConfiguration } from '@/src/utils/app/models';
 import { isEntityReadOnly } from '@/src/utils/app/permissions';
 
-import { ApplicationStatus } from '@/src/types/applications';
 import {
   Conversation,
   ConversationsTemporarySettings,
@@ -99,10 +96,8 @@ const ChatView = memo(() => {
   const dispatch = useAppDispatch();
   const router = useRouter();
 
-  const models = useAppSelector(ModelsSelectors.selectModels);
   const modelsMap = useAppSelector(ModelsSelectors.selectModelsMap);
   const modelError = useAppSelector(ModelsSelectors.selectModelsError);
-  const areModelsLoaded = useAppSelector(ModelsSelectors.selectAreModelsLoaded);
   const addonsMap = useAppSelector(AddonsSelectors.selectAddonsMap);
   const isCompareMode = useAppSelector(UISelectors.selectIsCompareMode);
   const selectedConversationsIds = useAppSelector(
@@ -216,60 +211,27 @@ const ChatView = memo(() => {
     installedModelIds.has(conv.model.id),
   );
 
+  const notAllowedItemsForDisplay = useAppSelector(
+    ConversationsSelectors.selectNotAllowedItemsForDisplay,
+  );
+
+  const isNotAllowed = useAppSelector(
+    ConversationsSelectors.selectIsNotAllowed,
+  );
+
+  const hasNotAllowedAddons = useAppSelector(
+    ConversationsSelectors.selectHasNotAllowedAddons,
+  );
+
   useLayoutEffect(() => {
-    const isNotAllowedModel =
-      areModelsLoaded &&
-      (models.length === 0 ||
-        selectedConversations.some((conv) => {
-          if (
-            isReplayConversation(conv) &&
-            isReplayAsIsConversation(conv) &&
-            conv.replay?.replayUserMessagesStack &&
-            conv.replay?.replayUserMessagesStack[0].model
-          ) {
-            return conv.replay.replayUserMessagesStack.some(
-              (message) =>
-                message.role === Role.User &&
-                message.model?.id &&
-                !modelsMap[message.model.id],
-            );
-          }
-
-          const model = modelsMap[conv.model.id];
-          const isNotDeployedCustomApp =
-            model &&
-            model.type === EntityType.Application &&
-            model.functionStatus &&
-            model?.functionStatus !== ApplicationStatus.DEPLOYED;
-
-          return (
-            !model ||
-            isNotDeployedCustomApp ||
-            (model.type === EntityType.Assistant &&
-              conv.assistantModelId &&
-              !modelsMap[conv.assistantModelId])
-          );
-        }));
-
-    if (isNotAllowedModel) {
+    if (isNotAllowed) {
       dispatch(ChatActions.setNotAvailableEntityType(EntityType.Model));
-    } else if (
-      selectedConversations.some((conversation) =>
-        conversation.selectedAddons.some((addonId) => !addonsMap[addonId]),
-      )
-    ) {
+    } else if (hasNotAllowedAddons) {
       dispatch(ChatActions.setNotAvailableEntityType(EntityType.Addon));
     } else {
       dispatch(ChatActions.setNotAvailableEntityType(undefined));
     }
-  }, [
-    selectedConversations,
-    models,
-    areModelsLoaded,
-    addonsMap,
-    modelsMap,
-    dispatch,
-  ]);
+  }, [dispatch, isNotAllowed, hasNotAllowedAddons]);
 
   const onLikeHandler = useCallback(
     (index: number, conversation: Conversation) => (rate: LikeState) => {
@@ -887,12 +849,14 @@ const ChatView = memo(() => {
                       </div>
                     </div>
                     {!isPlayback &&
+                    !selectedPublicationUrl &&
                     notAvailableEntityType &&
-                    !selectedPublicationUrl ? (
+                    notAllowedItemsForDisplay.length ? (
                       <NotAllowedModel
                         showScrollDownButton={isScrollDownButton}
                         onScrollDownClick={handleScrollDown}
-                        type={notAvailableEntityType}
+                        notAllowedItemsForDisplay={notAllowedItemsForDisplay}
+                        onShowChangeModel={handleTalkToConversationId}
                       />
                     ) : (
                       <>

apps/chat/src/components/Chat/ChatInput/ChatInputFooter.tsx

@@ -5,7 +5,7 @@ import { withRenderForScreen } from '@/src/components/Common/ScreenRender';
 
 function ChatInputFooterView() {
   return (
-    <div className="p-5 empty:hidden max-md:hidden">
+    <div className="px-5 pb-5 empty:hidden max-md:hidden">
       <FooterMessage />
     </div>
   );

apps/chat/src/components/Chat/ChatInput/ChatInputMessage.tsx

@@ -144,6 +144,7 @@ export const ChatInputMessage = Inversify.register(
     const isChatInputDisabled = useAppSelector(
       ConversationsSelectors.selectIsSelectedConversationBlocksInput,
     );
+
     const configurationSchema = useAppSelector(
       ChatSelectors.selectConfigurationSchema,
     );
@@ -493,6 +494,11 @@ export const ChatInputMessage = Inversify.register(
       return t('Talk to your agent');
     }, [isChatInputDisabled, t]);
 
+    const isDisabled = useMemo(
+      () => isLoading || isChatInputDisabled,
+      [isLoading, isChatInputDisabled],
+    );
+
     const paddingLeftClass = canAttach
       ? isOverlay
         ? 'pl-11'
@@ -521,7 +527,7 @@ export const ChatInputMessage = Inversify.register(
             )}
             maxHeight={MAX_HEIGHT}
             placeholder={chatInputPlaceholder}
-            disabled={isLoading || isChatInputDisabled}
+            disabled={isDisabled}
             value={content}
             rows={1}
             onCompositionStart={() => setIsTyping(true)}