feat: h5历史记录

src/assets/svg/close.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>蒙版</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="16" height="16"></rect>
+    </defs>
+    <g id="H5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="主页6" transform="translate(-343.000000, -342.000000)">
+            <g id="编组-19" transform="translate(0.000000, 326.000000)">
+                <g id="关闭" transform="translate(343.000000, 16.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="蒙版"></g>
+                    <path d="M-1,7 L7,7 L7,7 L7,-1 C7,-1.55228475 7.44771525,-2 8,-2 C8.55228475,-2 9,-1.55228475 9,-1 L9,7 L9,7 L17,7 C17.5522847,7 18,7.44771525 18,8 C18,8.55228475 17.5522847,9 17,9 L9,9 L9,9 L9,17 C9,17.5522847 8.55228475,18 8,18 C7.44771525,18 7,17.5522847 7,17 L7,9 L7,9 L-1,9 C-1.55228475,9 -2,8.55228475 -2,8 C-2,7.44771525 -1.55228475,7 -1,7 Z" id="矩形" fill="#ffffff" mask="url(#mask-2)" transform="translate(8.000000, 8.000000) rotate(-315.000000) translate(-8.000000, -8.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/layouts/HistoryBar/HistoryBar.tsx

@@ -8,12 +8,14 @@ import HistoryMenuIcon from '@/assets/svg/historyMenu.svg?react'
 import { ConversationModal } from '@/components/ConversationModal'
 import { useAppSelector } from '@/store/hook'
 import useToast from '@/hooks/useToast'
+import CloseIcon from '@/assets/svg/close.svg?react'
 
 interface HistoryBarProps {
   isVisible: boolean
+  onSetHistoryVisible: (visible: boolean) => void
 }
 
-export const HistoryBar: React.FC<HistoryBarProps> = ({ isVisible }) => {
+export const HistoryBar: React.FC<HistoryBarProps> = ({ isVisible, onSetHistoryVisible }) => {
   const showToast = useToast()
   const [isOpenConversationModal, setIsOpenConversationModal] = useState(false)
   const { conversations } = useAppSelector(state => state.conversation)
@@ -36,14 +38,17 @@ export const HistoryBar: React.FC<HistoryBarProps> = ({ isVisible }) => {
           animate="visible"
           exit="exit"
           variants={variants}
-          className="w-[252px] rounded-[20px] sm:h-[80vh] sm:max-h-[800px] bg-[#F0FAFF] border-[1px] border-solid border-white ml-[12px]"
+          className="fixed top-0 right-0 h-[100vh] w-[100vw] sm:relative sm:w-[252px] sm:rounded-[20px] sm:h-[80vh] sm:max-h-[800px] bg-[#F0FAFF] border-[1px] border-solid border-white ml-[12px]"
         >
           <div className="pt-[24px] flex flex-col h-full">
-            <div className="px-[32px] h-[40px]">
+            <div className="flex gap-[12px] px-[32px] h-[40px] sm:block">
               <Input value={searchValue} onValueChange={setSearchValue} classNames={{ inputWrapper: ['bg-white', 'data-[hover=true]:bg-[#fff]', 'group-data-[focus=true]:bg-white', 'rounded-[24px]'] }} placeholder="搜索历史记录" startContent={<SearchIcon />} />
+              <Button className="flex sm:hidden" onClick={() => onSetHistoryVisible(false)} isIconOnly color="danger">
+                <CloseIcon />
+              </Button>
             </div>
             <div className="px-[32px] flex-1 overflow-y-auto scrollbar-hide">
-              <HistoryBarList searchValue={searchValue} />
+              <HistoryBarList onSetHistoryVisible={onSetHistoryVisible} searchValue={searchValue} />
             </div>
             <div className="text-[12px] border-t-solid border-t-[1px] border-t-[#82969C12] w-full h-[48px] flex items-center justify-center">
               <Button onClick={handleOpen} className="w-full" color="primary" variant="light" startContent={<HistoryMenuIcon />}>

src/layouts/HistoryBar/components/HistoryBarList/index.tsx

@@ -8,16 +8,21 @@ import EmptyIcon from '@/assets/svg/empty.svg?react'
 import { useAppSelector } from '@/store/hook'
 import type { Conversation } from '@/types/conversation'
 import { processConversationData } from '@/store/conversationSlice.helper'
+import { isMobile } from '@/utils'
 
 interface HistoryBarListProps {
   searchValue: string
+  onSetHistoryVisible: (visible: boolean) => void
 }
 
-export const HistoryBarList: React.FC<HistoryBarListProps> = ({ searchValue }) => {
+export const HistoryBarList: React.FC<HistoryBarListProps> = ({ searchValue, onSetHistoryVisible }) => {
   const navigate = useNavigate()
   const { currentConversationId, conversations } = useAppSelector(state => state.conversation)
   const [allItems, setAllItems] = useState<Conversation[]>([])
   const handleClick = (conversation: Conversation) => {
+    if (isMobile()) {
+      onSetHistoryVisible(false)
+    }
     navigate(`/chat/${conversation.conversationId}`)
   }
 

src/layouts/MainLayout/MainLayout.tsx

@@ -10,6 +10,7 @@ import { LoginModal } from '@/components/LoginModal'
 import { useAppDispatch } from '@/store/hook'
 import { fetchConversations } from '@/store/conversationSlice'
 import MingcuteArrowsRightFill from '@/assets/svg/MingcuteArrowsRightFill.svg?react'
+import { isMobile } from '@/utils'
 
 interface MainLayoutProps {
   children: React.ReactNode
@@ -21,7 +22,7 @@ const contentVariants = {
     transition: { type: 'spring', stiffness: 300, damping: 30 },
   },
   shrunk: {
-    width: '340px',
+    width: isMobile() ? '90px' : '340px',
     transition: { type: 'spring', stiffness: 300, damping: 30 },
   },
 }
@@ -51,10 +52,10 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
       <motion.div
         animate={isHistoryVisible ? 'shrunk' : 'expanded'}
         variants={contentVariants}
-        className={`fixed right-[2px] top-[22px] z-[10] h-auto sm:relative flex sm:h-full pl-[12px] items-center ${isHistoryVisible ? 'w-[340px]' : 'w-[90px]'} box-border`}
+        className={`fixed right-[2px] top-[22px] z-[49] h-auto sm:relative flex sm:h-full pl-[12px] items-center ${isHistoryVisible && !isMobile() ? 'w-[340px]' : 'w-[90px]'} box-border`}
       >
         <Navbar isHistoryVisible={isHistoryVisible} onSetHistoryVisible={setHistoryVisible} />
-        <HistoryBar isVisible={isHistoryVisible} />
+        <HistoryBar isVisible={isHistoryVisible} onSetHistoryVisible={setHistoryVisible} />
         {!isHistoryVisible && (
           <motion.div
             initial="hidden"

src/layouts/Navbar/Navbar.tsx

@@ -87,7 +87,7 @@ const NavbarBase: React.FC<NavbarProps & WithAuthProps> = ({ isHistoryVisible, c
   return (
     <motion.nav ref={navRef} className="h-full flex-shrink-0 flex flex-col items-center justify-center">
       {/* hidden */}
-      <motion.div className={`${styles.layoutNavBarAgent}  rounded-full ${isH5NavVisible ? 'h-[55px] bg-white/20' : 'h-[380px]'} w-[54px] overflow-hidden py-[8px] sm:w-[64px] sm:bg-white gap-[24px] sm:h-auto sm:rounded-3xl sm:flex sm:py-[24px] sm:px-[8px]`}>
+      <motion.div className={`${styles.layoutNavBarAgent}  rounded-full ${isH5NavVisible ? 'h-[55px] bg-white/40' : 'h-[380px]'} w-[54px] overflow-hidden py-[8px] sm:w-[64px] sm:bg-white gap-[24px] sm:h-auto sm:rounded-3xl sm:flex sm:py-[24px] sm:px-[8px]`}>
         <NavBarItem isHistoryVisible={isHistoryVisible} onClick={handleClick} icon={Logo} label="" key="logo" type={isMobile() ? 'logo3' : 'logo'} />
 
         {NAV_BAR_ITEMS.map((item) => {

src/pages/Chat/components/ChatItem/ChatAnswerAttchment.tsx

@@ -48,7 +48,7 @@ export const ChatAnswerAttachment: React.FC<ChatAnswerAttachmentProps> = ({ from
                 <div className="bg-[#29B6FD0A] text-[14px] text-primary py-[4px] px-[16px] w-fit flex items-center">
                   <AnswerProDetailIcon />
                   {/* <span className="ml-[6px]">{attachment.name}</span> */}
-                  <div className="ml-[6px] w-[120px] sm:w-full text-nowrap text-ellipsis overflow-hidden">
+                  <div className="ml-[6px] w-[150px] sm:w-full text-nowrap text-ellipsis overflow-hidden">
                     {attachment.name}
                   </div>
                 </div>

src/pages/Chat/components/ChatItem/ChatAnswerShower.tsx

@@ -15,7 +15,7 @@ export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer, isLa
   return (
     <div className="answerShower">
       {answer.answer && (
-        <div className={answer.attachmentList?.length ? 'mb-[20px]' : ''}>
+        <div className={answer.attachmentList?.length ? 'sm:mb-[20px]' : ''}>
           <MarkdownDetail>
             {formatMarkdown(answer.answer || '')}
           </MarkdownDetail>