fix(chat): move User to BaseHeader, move SettingsModal to ChatDialogs

Author: Magomed-Elbi_Dzhukalaev

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

@@ -7,6 +7,7 @@ import { UnshareDialog } from '@/src/components/Common/UnshareDialog';
 import { UserMobile } from '@/src/components/Header/User/UserMobile';
 import { DeleteMarketplaceEntityDialog } from '@/src/components/Marketplace/DeleteMarketplaceEntityDialog';
 import { PromptModal } from '@/src/components/Promptbar/components/PromptModal';
+import { SettingDialog } from '@/src/components/Settings/SettingDialog';
 
 import { PromptVariablesForApplyDialog } from './ChatInput/PromptVariablesForApplyDialog';
 import { PublishDialog } from './Publish/PublishDialog';
@@ -29,6 +30,7 @@ export function ChatModalsManager() {
       <AgentDialogs />
       <ToolsetDialogs />
       <DeleteMarketplaceEntityDialog />
+      <SettingDialog />
     </>
   );
 }

apps/chat/src/components/Header/BaseHeader.tsx

@@ -3,6 +3,8 @@ import classNames from 'classnames';
 import { useAppSelector } from '@/src/store/hooks';
 import { SettingsSelectors } from '@/src/store/selectors';
 
+import { User } from '@/src/components/Header/User/User';
+
 import { Logo } from './Logo';
 
 interface Props {
@@ -28,6 +30,7 @@ export const BaseHeader: React.FC<Props> = ({ LeftItems, RightItems }) => {
         <Logo />
       </div>
       <div className="flex w-1/2 items-center justify-end pl-20">
+        <User />
         {RightItems && RightItems}
       </div>
     </div>

apps/chat/src/components/Header/EditorHeader.tsx

@@ -8,17 +8,13 @@ import { useTranslation } from '@/src/hooks/useTranslation';
 import { PartialBy } from '@/src/types/common';
 import { Translation } from '@/src/types/translation';
 
-import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import { useAppSelector } from '@/src/store/hooks';
 import { SettingsSelectors } from '@/src/store/settings/settings.selectors';
-import { UIActions } from '@/src/store/ui/ui.reducers';
-import { UISelectors } from '@/src/store/ui/ui.selectors';
 
 import { Stepper } from '@/src/components/Common/Stepper';
 import { Logo } from '@/src/components/Header/Logo';
 import { User } from '@/src/components/Header/User/User';
-import { SettingDialog } from '@/src/components/Settings/SettingDialog';
 
-import { Feature } from '@epam/ai-dial-shared';
 import { ButtonVariant, DialButton } from '@epam/ai-dial-ui-kit';
 
 interface EditorHeaderTab<T extends string> {
@@ -58,22 +54,10 @@ export const EditorHeader = <T extends string>({
 }: EditorHeaderProps<T>) => {
   const { t } = useTranslation(Translation.Chat);
 
-  const dispatch = useAppDispatch();
-
   const isOverlay = useAppSelector(SettingsSelectors.selectIsOverlay);
-  const isUserSettingsOpen = useAppSelector(
-    UISelectors.selectIsUserSettingsOpen,
-  );
-  const isUserMenuHidden = useAppSelector((state) =>
-    SettingsSelectors.isFeatureEnabled(state, Feature.HideUserMenu),
-  );
 
   const [menuOpen, setMenuOpen] = useState(false);
 
-  const handleCloseUserSettings = useCallback(() => {
-    dispatch(UIActions.setIsUserSettingsOpen(false));
-  }, [dispatch]);
-
   const handleTabClose = useCallback(
     (tab: PartialBy<EditorHeaderTab<T>, 'label'>) => {
       onTabClick(tab);
@@ -170,18 +154,9 @@ export const EditorHeader = <T extends string>({
             variant={ButtonVariant.Tertiary}
           ></DialButton>
 
-          {!isUserMenuHidden && (
-            <div className="h-full overflow-hidden max-xl:hidden max-md:pr-2 md:border-l md:border-secondary md:pl-2">
-              <User />
-            </div>
-          )}
+          <User />
         </div>
       </div>
-
-      <SettingDialog
-        open={isUserSettingsOpen}
-        onClose={handleCloseUserSettings}
-      />
     </div>
   );
 };

apps/chat/src/components/Header/Header.tsx

@@ -16,21 +16,17 @@ import {
 } from '@/src/constants/default-ui-settings';
 
 import { ToggleSidebarButton } from '@/src/components/Buttons/ToggleSidebarButton';
-import { SettingDialog } from '@/src/components/Settings/SettingDialog';
 
 import { BaseHeader } from './BaseHeader';
 import { CreateNewConversation } from './CreateNewEntity';
-import { User } from './User/User';
 
 import { Inversify } from '@epam/ai-dial-modulify-ui';
 import { Feature } from '@epam/ai-dial-shared';
 
 export const Header = Inversify.register('Header', () => {
   const showChatbar = useAppSelector(UISelectors.selectShowChatbar);
   const showPromptbar = useAppSelector(UISelectors.selectShowPromptbar);
-  const isUserSettingsOpen = useAppSelector(
-    UISelectors.selectIsUserSettingsOpen,
-  );
+
   const isOverlay = useAppSelector(SettingsSelectors.selectIsOverlay);
 
   const [windowWidth, setWindowWidth] = useState<number | undefined>(() => {
@@ -106,10 +102,6 @@ export const Header = Inversify.register('Header', () => {
     dispatch(UIActions.setShowPromptbar(!showPromptbar));
   }, [chatbarWidth, dispatch, promptbarWidth, showPromptbar, windowWidth]);
 
-  const onClose = () => {
-    dispatch(UIActions.setIsUserSettingsOpen(false));
-  };
-
   const headerIconSize = isOverlay
     ? OVERLAY_HEADER_ICON_SIZE
     : DEFAULT_HEADER_ICON_SIZE;
@@ -142,27 +134,17 @@ export const Header = Inversify.register('Header', () => {
         </>
       }
       RightItems={
-        <>
-          {!enabledFeatures.has(Feature.HideUserMenu) && (
-            <div className="overflow-hidden">
-              <User />
-            </div>
-          )}
-          {enabledFeatures.has(Feature.PromptsSection) && (
-            <ToggleSidebarButton
-              iconSize={headerIconSize}
-              tooltip="Prompt list"
-              isOpened={showPromptbar}
-              onToggle={handleTogglePromtbar}
-              dataQa="right-panel-toggle"
-              rightSide
-              isOverlay={isOverlay}
-            />
-          )}
-          {!enabledFeatures.has(Feature.HideUserMenu) && (
-            <SettingDialog open={isUserSettingsOpen} onClose={onClose} />
-          )}
-        </>
+        enabledFeatures.has(Feature.PromptsSection) && (
+          <ToggleSidebarButton
+            iconSize={headerIconSize}
+            tooltip="Prompt list"
+            isOpened={showPromptbar}
+            onToggle={handleTogglePromtbar}
+            dataQa="right-panel-toggle"
+            rightSide
+            isOverlay={isOverlay}
+          />
+        )
       }
     />
   );

apps/chat/src/components/Header/User/User.tsx

@@ -1,16 +1,36 @@
+import { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { SettingsSelectors } from '@/src/store/settings/settings.selectors';
+
+import { withRenderWhen } from '@/src/components/Common/RenderWhen';
+
 import { ProfileButton } from './ProfileButton';
 import { UserDesktop } from './UserDesktop';
 
-export const User = () => {
+import { Feature } from '@epam/ai-dial-shared';
+
+interface Props {
+  className?: string;
+}
+
+const UserView: FC<Props> = ({ className }) => {
   return (
-    <>
+    <div
+      className={classNames('w-[48px] overflow-hidden md:w-auto', className)}
+    >
       <div className="flex h-full items-center justify-center md:hidden">
         <ProfileButton />
       </div>
 
       <div className="hidden size-full md:block">
         <UserDesktop />
       </div>
-    </>
+    </div>
   );
 };
+
+export const User = withRenderWhen(
+  (state) => !SettingsSelectors.isFeatureEnabled(state, Feature.HideUserMenu),
+)(UserView);

apps/chat/src/components/Marketplace/MarketplaceHeader.tsx

@@ -13,22 +13,12 @@ import {
 
 import { ToggleSidebarButton } from '@/src/components/Buttons/ToggleSidebarButton';
 import { BaseHeader } from '@/src/components/Header/BaseHeader';
-import { User } from '@/src/components/Header/User/User';
-import { SettingDialog } from '@/src/components/Settings/SettingDialog';
-
-import { Feature } from '@epam/ai-dial-shared';
 
 export const MarketplaceHeader = () => {
   const showFilterbar = useAppSelector(
     UISelectors.selectShowMarketplaceFilterbar,
   );
-  const isUserSettingsOpen = useAppSelector(
-    UISelectors.selectIsUserSettingsOpen,
-  );
   const isOverlay = useAppSelector(SettingsSelectors.selectIsOverlay);
-  const isUserMenuHidden = useAppSelector((state) =>
-    SettingsSelectors.isFeatureEnabled(state, Feature.HideUserMenu),
-  );
 
   const dispatch = useAppDispatch();
 
@@ -39,10 +29,6 @@ export const MarketplaceHeader = () => {
     dispatch(UIActions.setShowMarketplaceFilterbar(!showFilterbar));
   }, [dispatch, showFilterbar]);
 
-  const onClose = useCallback(() => {
-    dispatch(UIActions.setIsUserSettingsOpen(false));
-  }, [dispatch]);
-
   const headerIconSize = isOverlay
     ? OVERLAY_HEADER_ICON_SIZE
     : DEFAULT_HEADER_ICON_SIZE;
@@ -59,17 +45,6 @@ export const MarketplaceHeader = () => {
           isOverlay={isOverlay}
         />
       }
-      RightItems={
-        !isUserMenuHidden && (
-          <>
-            <div className="w-[48px] overflow-hidden md:w-auto">
-              <User />
-            </div>
-
-            <SettingDialog open={isUserSettingsOpen} onClose={onClose} />
-          </>
-        )
-      }
     />
   );
 };

apps/chat/src/components/Settings/SettingDialog.tsx

@@ -24,6 +24,7 @@ import { OUTSIDE_PRESS_AND_MOUSE_EVENT } from '@/src/constants/modal';
 
 import { withLabel } from '@/src/components/Common/Forms/Label';
 import { Modal } from '@/src/components/Common/Modal';
+import { withRenderWhen } from '@/src/components/Common/RenderWhen';
 import { ToggleSwitchLabeled } from '@/src/components/Common/ToggleSwitch/ToggleSwitchLabeled';
 
 import { CustomLogoSelect } from './CustomLogoSelect';
@@ -36,15 +37,12 @@ import { ButtonVariant, DialButton } from '@epam/ai-dial-ui-kit';
 
 const ToggleSwitchLabel = withLabel(ToggleSwitchLabeled);
 
-interface Props {
-  open: boolean;
-  onClose: () => void;
-}
-
 const getCustomLogoLocalStoreName = (customLogoId: string | undefined) =>
   customLogoId && splitEntityId(customLogoId).name;
 
-export const SettingDialog: FC<Props> = ({ open, onClose }) => {
+const SettingDialogView: FC = () => {
+  const dispatch = useAppDispatch();
+
   const theme = useAppSelector(UISelectors.selectThemeState);
   const isChatFullWidth = useAppSelector(UISelectors.selectIsChatFullWidth);
   const files = useAppSelector(FilesSelectors.selectFiles);
@@ -65,6 +63,10 @@ export const SettingDialog: FC<Props> = ({ open, onClose }) => {
 
   const screenState = useScreenState();
 
+  const handleCloseDialog = useCallback(() => {
+    dispatch(UIActions.setIsUserSettingsOpen(false));
+  }, [dispatch]);
+
   useEffect(() => {
     setDefaultModelReference(savedDefaultModelReference);
   }, [savedDefaultModelReference]);
@@ -91,8 +93,6 @@ export const SettingDialog: FC<Props> = ({ open, onClose }) => {
 
   const saveBtnRef = useRef<HTMLButtonElement>(null);
 
-  const dispatch = useAppDispatch();
-
   const { t } = useTranslation(Translation.Settings);
 
   const handleClose = useCallback(() => {
@@ -102,13 +102,13 @@ export const SettingDialog: FC<Props> = ({ open, onClose }) => {
     setDeleteLogo(false);
     setDefaultModelReference(savedDefaultModelReference);
     setEnterType(savedEnterType);
-    onClose();
+    handleCloseDialog();
   }, [
     theme,
     isChatFullWidth,
     savedDefaultModelReference,
     savedEnterType,
-    onClose,
+    handleCloseDialog,
   ]);
 
   useEffect(() => {
@@ -158,7 +158,7 @@ export const SettingDialog: FC<Props> = ({ open, onClose }) => {
     dispatch(ModelsActions.setDefaultModelReference(defaultModelReference));
 
     setLocalLogoFile(undefined);
-    onClose();
+    handleCloseDialog();
   }, [
     dispatch,
     localTheme,
@@ -167,7 +167,7 @@ export const SettingDialog: FC<Props> = ({ open, onClose }) => {
     localLogoFile,
     deleteLogo,
     defaultModelReference,
-    onClose,
+    handleCloseDialog,
   ]);
 
   if (!open) {
@@ -179,7 +179,7 @@ export const SettingDialog: FC<Props> = ({ open, onClose }) => {
       portalId="theme-main"
       containerClassName="inline-block w-[400px] overflow-y-auto px-3 py-4 align-bottom transition-all md:max-h-[509px] md:p-6"
       dataQa="settings-modal"
-      state={open ? ModalState.OPENED : ModalState.CLOSED}
+      state={ModalState.OPENED}
       onClose={handleClose}
       initialFocus={saveBtnRef}
       dismissProps={OUTSIDE_PRESS_AND_MOUSE_EVENT}
@@ -244,3 +244,13 @@ export const SettingDialog: FC<Props> = ({ open, onClose }) => {
     </Modal>
   );
 };
+
+export const SettingDialog = withRenderWhen((state) => {
+  const isOpen = UISelectors.selectIsUserSettingsOpen(state);
+  const isUserMenuHidden = SettingsSelectors.isFeatureEnabled(
+    state,
+    Feature.HideUserMenu,
+  );
+
+  return isOpen && !isUserMenuHidden;
+})(SettingDialogView);