fix: ui & hide history list (#5510)

* fix: hidden history list

* fix: ui

projects/app/src/pageComponents/chat/ChatSetting/index.tsx

@@ -54,8 +54,8 @@ const ChatSetting = () => {
           </Flex>
 
           <ChatSliderMobileDrawer
-            showHeader
-            showFooter
+            showList={false}
+            showMenu={false}
             banner={chatSettings?.wideLogoUrl}
             menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
           />

projects/app/src/pageComponents/chat/ChatTeamApp/List.tsx

@@ -42,7 +42,7 @@ const ListItem = ({ appType }: { appType: AppTypeEnum | 'all' }) => {
   return (
     <>
       <Grid
-        py={4}
+        py={[0, 4]}
         gridTemplateColumns={[
           '1fr',
           'repeat(2,1fr)',

projects/app/src/pageComponents/chat/ChatTeamApp/index.tsx

@@ -50,22 +50,37 @@ const MyApps = () => {
   const tabs = ['all' as const, AppTypeEnum.simple, AppTypeEnum.workflow, AppTypeEnum.plugin];
 
   return (
-    <Flex flexDirection={'column'} h={'100%'} pt={['46px', 0]}>
+    <Flex flexDirection={'column'} h={'100%'}>
       <NextHead title={chatSettings?.homeTabTitle || 'FastGPT'} icon="/icon/logo.svg" />
 
       {!isPc && (
-        <Flex h="46px" w="100vw" top="0" position="absolute" borderBottom="sm" color="myGray.900">
+        <Flex
+          py={4}
+          color="myGray.900"
+          gap={2}
+          alignItems={'center'}
+          pr={2}
+          justifyContent={'space-between'}
+        >
           <MyIcon
             ml={3}
             w="20px"
-            color="myGray.900"
+            color="myGray.500"
             name="core/chat/sidebar/menu"
             onClick={onOpenSlider}
           />
 
+          <Box w="70%">
+            <SearchInput
+              onChange={(e) => setSearchKey(e.target.value)}
+              placeholder={t('app:search_app')}
+              maxLength={30}
+            />
+          </Box>
+
           <ChatSliderMobileDrawer
-            showHeader
-            showFooter
+            showList={false}
+            showMenu={false}
             banner={chatSettings?.wideLogoUrl}
             menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
           />
@@ -89,6 +104,7 @@ const MyApps = () => {
           />
         </Box>
       )}
+
       <Flex gap={5} flex={'1 0 0'} h={0}>
         <Flex
           px={[3, 6]}
@@ -98,7 +114,7 @@ const MyApps = () => {
           overflowY={'auto'}
           overflowX={'hidden'}
         >
-          <Flex pt={paths.length > 0 ? 3 : [4, 6]} alignItems={'center'} gap={3}>
+          <Flex pt={paths.length > 0 ? 3 : [0, 6]} alignItems={'center'} gap={3}>
             {isPc && (
               <Tabs variant="unstyled" onChange={(index) => setAppType(tabs[index])}>
                 <TabList gap={5}>
@@ -128,19 +144,6 @@ const MyApps = () => {
             )}
           </Flex>
 
-          {!isPc && (
-            <Box mt={2}>
-              {
-                <SearchInput
-                  maxW={['auto', '250px']}
-                  onChange={(e) => setSearchKey(e.target.value)}
-                  placeholder={t('app:search_app')}
-                  maxLength={30}
-                />
-              }
-            </Box>
-          )}
-
           <MyBox flex={'1 0 0'} isLoading={myApps.length === 0 && isFetchingApps}>
             <List appType={appType} />
           </MyBox>

projects/app/src/pageComponents/chat/ChatWindow/AppChatWindow.tsx

@@ -130,8 +130,6 @@ const AppChatWindow = ({ myApps }: Props) => {
         </SideBar>
       ) : (
         <ChatSliderMobileDrawer
-          showHeader
-          showFooter
           banner={chatSettings?.wideLogoUrl}
           menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
         />

projects/app/src/pageComponents/chat/ChatWindow/HomeChatWindow.tsx

@@ -363,8 +363,6 @@ const HomeChatWindow = ({ myApps }: Props) => {
         </SideBar>
       ) : (
         <ChatSliderMobileDrawer
-          showHeader
-          showFooter
           banner={chatSettings?.wideLogoUrl}
           menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
         />

projects/app/src/pageComponents/chat/slider/ChatSliderFooter.tsx

@@ -21,7 +21,7 @@ const ChatSliderFooter = () => {
   const isSettingPane = pane === ChatSidebarPaneEnum.SETTING;
 
   return (
-    <Flex flexShrink={0} gap={2} alignItems="center" justifyContent="space-between" p={2}>
+    <Flex flexShrink={0} gap={2} alignItems="center" justifyContent="space-between" p={2} mt="auto">
       <UserAvatarPopover isCollapsed={false} placement="top-end">
         <Flex alignItems="center" gap={2} borderRadius="50%" p={2}>
           <Avatar src={userInfo?.avatar} w={8} h={8} borderRadius="50%" bg="myGray.200" />

projects/app/src/pageComponents/chat/slider/ChatSliderHeader.tsx

@@ -54,7 +54,7 @@ const ChatSliderHeader = ({ title, banner }: Props) => {
   ) : (
     <>
       <Flex align={'center'} justify={'flex-start'} p={2}>
-        <Image src={banner || DEFAULT_LOGO_BANNER_URL} alt="banner" w="70%" />
+        <Image src={banner || DEFAULT_LOGO_BANNER_URL} alt="banner" w="60%" />
       </Flex>
 
       <MyDivider h="0.5px" bg="myGray.100" my={2} mx={2} w="calc(100% - 16px)" />
@@ -115,8 +115,6 @@ const ChatSliderHeader = ({ title, banner }: Props) => {
           </Flex>
         </GridItem>
       </Grid>
-
-      <MyDivider h="0.5px" bg="myGray.100" my={2} mx={2} w="calc(100% - 16px)" />
     </>
   );
 };

projects/app/src/pageComponents/chat/slider/ChatSliderMobileDrawer.tsx

@@ -7,6 +7,7 @@ import ChatSliderList from '@/pageComponents/chat/slider/ChatSliderList';
 import { useContextSelector } from 'use-context-selector';
 import { ChatContext } from '@/web/core/chat/context/chatContext';
 import ChatSliderFooter from '@/pageComponents/chat/slider/ChatSliderFooter';
+import MyDivider from '@fastgpt/web/components/common/MyDivider';
 
 type Props = {
   title?: string;
@@ -14,14 +15,18 @@ type Props = {
   menuConfirmButtonText?: string;
   showHeader?: boolean;
   showFooter?: boolean;
+  showList?: boolean;
+  showMenu?: boolean;
 };
 
 const ChatSliderMobileDrawer = ({
   title,
   banner,
   menuConfirmButtonText,
-  showHeader = false,
-  showFooter = false
+  showHeader = true,
+  showFooter = true,
+  showList = true,
+  showMenu = true
 }: Props) => {
   const theme = useTheme();
 
@@ -50,9 +55,10 @@ const ChatSliderMobileDrawer = ({
         >
           {showHeader && <ChatSliderHeader title={title} banner={banner} />}
 
-          <ChatSliderMenu menuConfirmButtonText={menuConfirmButtonText} />
+          {showMenu && <MyDivider h="0.5px" bg="myGray.100" my={2} mx={2} w="calc(100% - 16px)" />}
+          {showMenu && <ChatSliderMenu menuConfirmButtonText={menuConfirmButtonText} />}
 
-          <ChatSliderList />
+          {showList && <ChatSliderList />}
 
           {showFooter && <ChatSliderFooter />}
         </MyBox>

projects/app/src/pages/chat/share.tsx

@@ -230,6 +230,8 @@ const OutLink = (props: Props) => {
       <SideBar externalTrigger={!!datasetCiteData}>{Children}</SideBar>
     ) : (
       <ChatSliderMobileDrawer
+        showHeader={false}
+        showFooter={false}
         menuConfirmButtonText={t('common:core.chat.Confirm to clear history')}
       />
     );