From 98b188f26c5b61c60bc3e1f79f18dd0f00341c32 Mon Sep 17 00:00:00 2001
From: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>
Date: Wed, 26 Nov 2025 11:13:01 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=9B=EF=B8=8F=20fix:=20Show=20ModelSele?=
 =?UTF-8?q?ctor=20and=20Header=20Buttons=20Regression=20from=20#10521=20(#?=
 =?UTF-8?q?10690)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: show ModelSelector and other buttons properly

* chore: remove string templates and fix import order

* chore: import order

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
---
 client/src/components/Chat/Header.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Chat/Header.tsx b/client/src/components/Chat/Header.tsx
index d1e20f8ad8..966e4ad205 100644
--- a/client/src/components/Chat/Header.tsx
+++ b/client/src/components/Chat/Header.tsx
@@ -1,17 +1,18 @@
 import { useMemo } from 'react';
 import { useMediaQuery } from '@librechat/client';
 import { useOutletContext } from 'react-router-dom';
+import { AnimatePresence, motion } from 'framer-motion';
 import { getConfigDefaults, PermissionTypes, Permissions } from 'librechat-data-provider';
 import type { ContextType } from '~/common';
-import ModelSelector from './Menus/Endpoints/ModelSelector';
 import { PresetsMenu, HeaderNewChat, OpenSidebar } from './Menus';
+import ModelSelector from './Menus/Endpoints/ModelSelector';
 import { useGetStartupConfig } from '~/data-provider';
 import ExportAndShareMenu from './ExportAndShareMenu';
 import BookmarkMenu from './Menus/BookmarkMenu';
 import { TemporaryChat } from './TemporaryChat';
 import AddMultiConvo from './AddMultiConvo';
 import { useHasAccess } from '~/hooks';
-import { AnimatePresence, motion } from 'framer-motion';
+import { cn } from '~/utils';
 
 const defaultInterface = getConfigDefaults().interface;
 
@@ -44,7 +45,7 @@ export default function Header() {
           <AnimatePresence initial={false}>
             {!navVisible && (
               <motion.div
-                className={`flex items-center gap-2`}
+                className="flex items-center gap-2"
                 initial={{ width: 0, opacity: 0 }}
                 animate={{ width: 'auto', opacity: 1 }}
                 exit={{ width: 0, opacity: 0 }}
@@ -61,11 +62,12 @@ export default function Header() {
               </motion.div>
             )}
           </AnimatePresence>
-          {!isSmallScreen && !navVisible && (
+          {!(navVisible && isSmallScreen) && (
             <div
-              className={`flex items-center gap-2 ${
-                !isSmallScreen ? 'transition-all duration-200 ease-in-out' : ''
-              } `}
+              className={cn(
+                'flex items-center gap-2',
+                !isSmallScreen ? 'transition-all duration-200 ease-in-out' : '',
+              )}
             >
               <ModelSelector startupConfig={startupConfig} />
               {interfaceConfig.presets === true && interfaceConfig.modelSelect && <PresetsMenu />}