feat: 添加图片预览

package.json

@@ -49,6 +49,7 @@
     "react-dom": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-hot-toast": "^2.4.1",
     "react-markdown": "^9.0.1",
     "react-markdown": "^9.0.1",
+    "react-photo-view": "^1.2.6",
     "react-redux": "^9.1.2",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.0",
     "react-router-dom": "^6.26.0",
     "react-virtuoso": "^4.10.0",
     "react-virtuoso": "^4.10.0",

src/components/MarkdownDetail/index.tsx

+import type { ReactNode } from 'react'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import remarkGfm from 'remark-gfm'
+import { Image } from '@nextui-org/image'
+import { PhotoProvider, PhotoView } from 'react-photo-view'
+
+interface MarkdownDetailProps {
+  children: ReactNode
+}
+
+export const MarkdownDetail: React.FC<MarkdownDetailProps> = ({ children }) => {
+  return (
+    <ReactMarkdown
+      rehypePlugins={[rehypeRaw, rehypeSanitize]}
+      remarkPlugins={[remarkGfm]}
+      className="flex flex-col gap-[12px] text-[#27353C] text-[15px]"
+      components={{
+        img: ({ ...data }): JSX.Element => (
+          <PhotoProvider maskOpacity={0.1} bannerVisible={false}>
+            <PhotoView {...(data as any)}>
+              <Image alt="图⽚" width="80%" {...(data as any)} />
+            </PhotoView>
+          </PhotoProvider>
+        ),
+        p(data): JSX.Element {
+          return <p {...data} />
+        },
+        ul(data): JSX.Element {
+          return <ul className="mb-[24px]" {...data} />
+        },
+        strong(data): JSX.Element {
+          return <strong className="text-[#27353C]" {...data} />
+        },
+      }}
+    >
+      {children as string}
+    </ReactMarkdown>
+  )
+}

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
 import { NextUIProvider } from '@nextui-org/react'
 import { NextUIProvider } from '@nextui-org/react'
 import App from './App'
 import App from './App'
 import './styles/index.less'
 import './styles/index.less'
+import 'react-photo-view/dist/react-photo-view.css'
 
 
 const rootEl = document.getElementById('root')
 const rootEl = document.getElementById('root')
 
 

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

@@ -23,7 +23,7 @@ export const ChatAnswerAttachment: React.FC<ChatAnswerAttachmentProps> = ({ answ
           )}
           )}
 
 
           {/* 附件：引用文件 */}
           {/* 附件：引用文件 */}
-          {attachment.type === 'reference' && (
+          {attachment.type === 'reference' && attachment.content.docList.length !== 0 && (
             <div>
             <div>
               <p className="text-[14px] text-[#8D9795] mb-[12px]">
               <p className="text-[14px] text-[#8D9795] mb-[12px]">
                 已为您找到
                 已为您找到

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

-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
-import rehypeSanitize from 'rehype-sanitize'
-import remarkGfm from 'remark-gfm'
 import { formatMarkdown } from './markdownFormatter'
 import { formatMarkdown } from './markdownFormatter'
 import { ChatAnswerAttachment } from './ChatAnswerAttchment'
 import { ChatAnswerAttachment } from './ChatAnswerAttchment'
 import { ChatAnswerOperate } from './ChatAnswerOperate'
 import { ChatAnswerOperate } from './ChatAnswerOperate'
 import type { Answer } from '@/types/chat'
 import type { Answer } from '@/types/chat'
+import { MarkdownDetail } from '@/components/MarkdownDetail'
 
 
 interface ChatAnswerShowerProps {
 interface ChatAnswerShowerProps {
   answer: Answer
   answer: Answer
@@ -14,13 +11,16 @@ interface ChatAnswerShowerProps {
 export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer }) => {
 export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer }) => {
   return (
   return (
     <div className="answerShower">
     <div className="answerShower">
-      <ReactMarkdown
+      <MarkdownDetail>
+        {formatMarkdown(answer.answer || '')}
+      </MarkdownDetail>
+      {/* <ReactMarkdown
         rehypePlugins={[rehypeRaw, rehypeSanitize]}
         rehypePlugins={[rehypeRaw, rehypeSanitize]}
         remarkPlugins={[remarkGfm]}
         remarkPlugins={[remarkGfm]}
         className="markdown-content"
         className="markdown-content"
       >
       >
         {formatMarkdown(answer.answer || '')}
         {formatMarkdown(answer.answer || '')}
-      </ReactMarkdown>
+      </ReactMarkdown> */}
 
 
       {answer.attachmentList && answer.attachmentList?.length !== 0 && <ChatAnswerAttachment answer={answer} />}
       {answer.attachmentList && answer.attachmentList?.length !== 0 && <ChatAnswerAttachment answer={answer} />}
       <ChatAnswerOperate answer={answer} />
       <ChatAnswerOperate answer={answer} />