feat(chat): show tooltips for disabled header buttons (Issue #2810, #…

…2798) (#2811)
epam · Dec 12, 2024 · 5a5dad3 · 5a5dad3
1 parent ebadd84
commit 5a5dad3
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 61 deletions.
diff --git a/apps/chat/src/components/Chat/Chat.tsx b/apps/chat/src/components/Chat/Chat.tsx
@@ -561,13 +561,6 @@ export const ChatView = memo(() => {
                                   !isReplay &&
                                   !isExternal
                                 }
-                                isShowSettingsButton={
-                                  enabledFeatures.has(
-                                    Feature.TopChatModelSettings,
-                                  ) &&
-                                  !isPlayback &&
-                                  !isExternal
-                                }
                                 isShowSettings={isShowChatSettings}
                                 setShowSettings={(isShow) => {
                                   if (isShow) {

diff --git a/apps/chat/src/components/Chat/ChatHeader/Header.tsx b/apps/chat/src/components/Chat/ChatHeader/Header.tsx
@@ -52,7 +52,6 @@ interface Props {
   isCompareMode: boolean;
   selectedConversationIds: string[];
   isShowChatInfo: boolean;
-  isShowSettingsButton: boolean;
   isShowClearConversation: boolean;
   isShowSettings: boolean;
   onClearConversation: () => void;
@@ -66,7 +65,6 @@ export const ChatHeader = ({
   isCompareMode,
   selectedConversationIds,
   isShowChatInfo,
-  isShowSettingsButton,
   isShowClearConversation,
   isShowSettings,
   onClearConversation,
@@ -92,6 +90,9 @@ export const ChatHeader = ({
   const isSelectMode = useAppSelector(
     ConversationsSelectors.selectIsSelectMode,
   );
+  const isTopChatModelSettingsEnabled = useAppSelector((state) =>
+    SettingsSelectors.isFeatureEnabled(state, Feature.TopChatModelSettings),
+  );
   const isChatbarEnabled = useAppSelector((state) =>
     SettingsSelectors.isFeatureEnabled(state, Feature.ConversationsSection),
   );
@@ -171,6 +172,10 @@ export const ChatHeader = ({
     screenState === ScreenState.MOBILE && conversationSelectedAddons.length > 2;
   const isConversationInvalid = isEntityNameOrPathInvalid(conversation);
 
+  const disallowChangeAgent = isChangeAgentDisallowed || isExternal;
+  const disallowChangeSettings =
+    conversation.replay?.replayAsIs || isPlayback || isExternal;
+
   return (
     <>
       <div
@@ -213,6 +218,7 @@ export const ChatHeader = ({
                     <HeaderModelTooltip
                       model={model}
                       conversationModelId={conversation.model.id}
+                      disallowChangeAgent={disallowChangeAgent}
                     />
                   }
                 >
@@ -222,11 +228,7 @@ export const ChatHeader = ({
                         !isChangeAgentDisallowed &&
                         'cursor-not-allowed',
                     )}
-                    disabled={
-                      isMessageStreaming ||
-                      isChangeAgentDisallowed ||
-                      isExternal
-                    }
+                    disabled={isMessageStreaming || disallowChangeAgent}
                     onClick={() => onModelClick(conversation.id)}
                   >
                     <ModelIcon
@@ -302,51 +304,49 @@ export const ChatHeader = ({
             </>
           )}
           <div className="flex items-center gap-2">
-            {isShowSettingsButton &&
-              !isConversationInvalid &&
-              !conversation.replay?.replayAsIs &&
-              !conversation.playback?.isPlayback && (
-                <Tooltip
-                  isTriggerClickable
-                  tooltip={
-                    <HeaderSettingsTooltip
-                      subModel={
-                        conversation.assistantModelId &&
-                        model?.type === EntityType.Assistant
-                          ? modelsMap[conversation.assistantModelId]
-                          : undefined
-                      }
-                      systemPrompt={
-                        model?.type === EntityType.Model
-                          ? conversation.prompt
-                          : ''
-                      }
-                      temperature={
-                        model?.type !== EntityType.Application
-                          ? conversation.temperature
-                          : null
-                      }
-                      selectedAddons={
-                        model
-                          ? selectedAddons
-                          : getValidEntitiesFromIds(
-                              conversation.selectedAddons,
-                              addonsMap,
-                            )
-                      }
-                    />
-                  }
+            {isTopChatModelSettingsEnabled && !isConversationInvalid && (
+              <Tooltip
+                isTriggerClickable
+                tooltip={
+                  <HeaderSettingsTooltip
+                    disallowChangeSettings={disallowChangeSettings}
+                    subModel={
+                      conversation.assistantModelId &&
+                      model?.type === EntityType.Assistant
+                        ? modelsMap[conversation.assistantModelId]
+                        : undefined
+                    }
+                    systemPrompt={
+                      model?.type === EntityType.Model
+                        ? conversation.prompt
+                        : ''
+                    }
+                    temperature={
+                      model?.type !== EntityType.Application
+                        ? conversation.temperature
+                        : null
+                    }
+                    selectedAddons={
+                      model
+                        ? selectedAddons
+                        : getValidEntitiesFromIds(
+                            conversation.selectedAddons,
+                            addonsMap,
+                          )
+                    }
+                  />
+                }
+              >
+                <button
+                  className="cursor-pointer text-secondary hover:text-accent-primary disabled:cursor-not-allowed disabled:text-controls-disable"
+                  onClick={() => setShowSettings(!isShowSettings)}
+                  data-qa="conversation-setting"
+                  disabled={isMessageStreaming || disallowChangeSettings}
                 >
-                  <button
-                    className="cursor-pointer text-secondary hover:text-accent-primary disabled:cursor-not-allowed disabled:text-controls-disable"
-                    onClick={() => setShowSettings(!isShowSettings)}
-                    data-qa="conversation-setting"
-                    disabled={isMessageStreaming}
-                  >
-                    <IconSettings size={iconSize} />
-                  </button>
-                </Tooltip>
-              )}
+                  <IconSettings size={iconSize} />
+                </button>
+              </Tooltip>
+            )}
 
             {isShowClearConversation &&
               !isConversationInvalid &&

diff --git a/apps/chat/src/components/Chat/ChatHeader/HeaderModelTooltip.tsx b/apps/chat/src/components/Chat/ChatHeader/HeaderModelTooltip.tsx
@@ -8,17 +8,24 @@ import { Translation } from '@/src/types/translation';
 interface Props {
   model: DialAIEntityModel | undefined;
   conversationModelId: string;
+  disallowChangeAgent: boolean;
 }
 
-export const HeaderModelTooltip = ({ model, conversationModelId }: Props) => {
+export const HeaderModelTooltip = ({
+  model,
+  conversationModelId,
+  disallowChangeAgent,
+}: Props) => {
   const { t } = useTranslation(Translation.Chat);
 
   return (
     <div
       className="grid max-w-[880px] grid-cols-1 p-2"
       data-qa="chat-model-tooltip"
     >
-      <div className="font-semibold">{t('Change current agent')}:</div>
+      <div className="font-semibold">
+        {t(disallowChangeAgent ? 'Current agent' : 'Change current agent')}:
+      </div>
       <div className="mt-3 grid grid-cols-[auto,1fr] gap-x-4 gap-y-2">
         <>
           <span className="text-secondary">{t('Agent')}:</span>

diff --git a/apps/chat/src/components/Chat/ChatHeader/HeaderSettingsTooltip.tsx b/apps/chat/src/components/Chat/ChatHeader/HeaderSettingsTooltip.tsx
@@ -14,6 +14,7 @@ interface Props {
   systemPrompt: string;
   temperature: number | null;
   selectedAddons: DialAIEntityAddon[] | null;
+  disallowChangeSettings: boolean;
 }
 
 const SM_HEIGHT_THRESHOLDS = [
@@ -29,6 +30,7 @@ export const HeaderSettingsTooltip = ({
   systemPrompt,
   temperature,
   selectedAddons,
+  disallowChangeSettings,
 }: Props) => {
   const { t } = useTranslation(Translation.Chat);
 
@@ -42,8 +44,23 @@ export const HeaderSettingsTooltip = ({
       className="grid max-w-[880px] grid-cols-1 p-2"
       data-qa="chat-settings-tooltip"
     >
-      <div className="font-semibold">{t('Change conversation settings')}:</div>
+      <div className="font-semibold">
+        {t(
+          disallowChangeSettings
+            ? 'Conversation settings'
+            : 'Change conversation settings',
+        )}
+        :
+      </div>
       <div className="mt-3 grid max-w-full grid-cols-[auto,1fr] gap-x-4 gap-y-2">
+        {!subModel &&
+          !systemPrompt &&
+          temperature === null &&
+          !selectedAddons?.length && (
+            <span className="text-secondary">
+              {t('There are no conversation settings for this agent ')}
+            </span>
+          )}
         {subModel && (
           <>
             <span className="text-secondary">{t('Assistant model')}:</span>