fix: 修复滚动问题

package.json

@@ -48,6 +48,7 @@
     "github-markdown-css": "^5.8.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-draggable": "^4.4.6",
     "react-hot-toast": "^2.4.1",
     "react-joyride": "^2.9.3",
     "react-markdown": "^9.0.1",

src/App.css

@@ -13,8 +13,15 @@
    color: #161823;
    line-height: 24px;
  }
+ @media screen and (max-width: 480px)  {
   img {
-   width: 100%;
+    width: 100% !important;
+    display: block;
+    margin: 12px 0;
+  }
+ }  
+ img {
+   width: 40%;
    display: block;
    margin: 12px 0;
  }

src/components/MarkdownDetail/index.tsx

-import type { ReactNode } from 'react'
+import { type ReactNode, memo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
@@ -9,7 +9,7 @@ interface MarkdownDetailProps {
   children: ReactNode
 }
 
-export const MarkdownDetail: React.FC<MarkdownDetailProps> = ({ children }) => {
+export const MarkdownDetail: React.FC<MarkdownDetailProps> = memo(({ children }) => {
   return (
     <ReactMarkdown
       rehypePlugins={[rehypeRaw, rehypeSanitize]}
@@ -37,4 +37,4 @@ export const MarkdownDetail: React.FC<MarkdownDetailProps> = ({ children }) => {
       {children as string}
     </ReactMarkdown>
   )
-}
+})

src/layouts/MainLayout/MainLayout.tsx

@@ -52,9 +52,11 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
       <motion.div
         animate={isHistoryVisible ? 'shrunk' : 'expanded'}
         variants={contentVariants}
-        className={`fixed right-[0] top-[22px] z-[49] h-auto sm:relative flex sm:h-full pl-[12px] items-center ${isHistoryVisible && !isMobile() ? 'w-[340px]' : 'w-[90px]'} box-border`}
+        className={`fixed right-[-12px] top-[10px] 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} onSetHistoryVisible={setHistoryVisible} />
         {!isHistoryVisible && (
           <motion.div

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

 import { Avatar, Button } from '@nextui-org/react'
-import { motion } from 'framer-motion'
 import { useEffect, useState } from 'react'
 import { ChatAnswerShower } from './ChatAnswerShower'
 import { ChatAnswerParser } from './ChatAnswerParser'
@@ -45,6 +44,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
   useEffect(() => {
     setInnerRecord(record)
   }, [record])
+
   return (
     <div>
       {innerRecord.answerList.map((item, index) => {
@@ -53,7 +53,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
             <div className="chatItemBotContainer w-full" key={`${item.recordId}-${index}`}>
               <div className="flex">
                 <Avatar className="flex-shrink-0" src={AvatarBot} />
-                <motion.div
+                <div
                   className="ml-[20px] bg-white rounded-[20px] box-border px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]"
                 >
                   {(item.answer?.length || item.attachmentList?.length)
@@ -64,7 +64,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
                         </div>
                       )
                     : <SdreamLoading />}
-                </motion.div>
+                </div>
                 <div className="hidden sm:block w-[65px] flex-shrink-0"></div>
               </div>
               {isTyping && (

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

@@ -43,10 +43,10 @@ export const ChatAnswerRecommend: React.FC<ChatAnswerRecommendProps> = ({ answer
       {
         questionList.length === 0 && (
           <div className="flex flex-col gap-[8px]">
-            <Skeleton className="w-full rounded-lg">
+            <Skeleton className="w-full sm:w-[300px] rounded-lg">
               <div className="h-[40px] w-full rounded-lg bg-[#fff]"></div>
             </Skeleton>
-            <Skeleton className="w-full rounded-lg">
+            <Skeleton className="w-full sm:w-[300px] rounded-lg">
               <div className="h-[40px] w-full rounded-lg bg-[#fff]"></div>
             </Skeleton>
           </div>

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

@@ -10,7 +10,8 @@ export const ChatItemUser: React.FC<ChatItemUserProps> = ({ record }) => {
   return (
     <div className="chatItemUser">
       <div className="flex justify-end">
-        <div className="mr-[20px] bg-[#29B6FD] rounded-[20px] box-border  text-[#fff] px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]">{record.question}</div>
+        <div className="sm:block w-[65px] flex-shrink-0"></div>
+        <div className="text-[14px] mr-[20px] bg-[#29B6FD] rounded-[20px] box-border  text-[#fff] px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]">{record.question}</div>
         <Avatar className="flex-shrink-0" src={AvatarUser} />
       </div>
       <div className="h-[32px] w-full"></div>

src/pages/Chat/components/ChatMaskBar/index.tsx

 export const ChatMaskBar: React.FC = () => {
   return (
-    <div className="absolute w-full h-[32px] z-[2] top-[110px] bg-gradient-to-b from-[hsl(var(--sdream-background))] to-transparent"></div>
+    <div className="absolute top-[85px] w-full h-[32px] z-[2] sm:top-[110px] bg-gradient-to-b from-[hsl(var(--sdream-background))] to-transparent"></div>
   )
 }

src/pages/Chat/components/ChatSlogan/ChatSlogan.tsx

@@ -6,7 +6,7 @@ export const ChatSlogan: React.FC = () => {
   const navigate = useNavigate()
   return (
     <div className="w-full">
-      <div className="max-w-[912px] mx-auto h-[112px] flex flex-col justify-center">
+      <div className="h-[86px] max-w-[912px] mx-auto sm:h-[112px] flex flex-col justify-center">
         <div className="flex items-center cursor-pointer" onClick={() => navigate('/')}>
           <TextLogo className="w-[70px]" />
           <GradualSpacing text="晓得解惑，让沟通更智能" className="ml-[8px] text-[16px] text-[#333] font-medium" />