feat: img

src/components/MarkdownDetail/index.tsx

@@ -3,7 +3,6 @@ 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 {
@@ -20,7 +19,7 @@ export const MarkdownDetail: React.FC<MarkdownDetailProps> = ({ children }) => {
         img: ({ ...data }): JSX.Element => (
           <PhotoProvider maskOpacity={0.1} bannerVisible={false}>
             <PhotoView {...(data as any)}>
-              <Image alt="图⽚" width="80%" {...(data as any)} />
+              <img className="w-2/3 cursor-pointer" {...data} />
             </PhotoView>
           </PhotoProvider>
         ),

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

 import React, { useEffect, useState } from 'react'
-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
-import rehypeSanitize from 'rehype-sanitize'
-import remarkGfm from 'remark-gfm'
 import { ChatAnswerAttachment } from './ChatAnswerAttchment'
 import { ChatAnswerOperate } from './ChatAnswerOperate'
 import { formatMarkdown } from './markdownFormatter'
 import type { Answer } from '@/types/chat'
+import { MarkdownDetail } from '@/components/MarkdownDetail'
 
 interface ChatAnswerParserProps {
   answer: Answer
@@ -37,13 +34,9 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ onComplate,
 
   return (
     <div className="answerParser">
-      <ReactMarkdown
-        rehypePlugins={[rehypeRaw, rehypeSanitize]}
-        remarkPlugins={[remarkGfm]}
-        className="markdown-content"
-      >
+      <MarkdownDetail>
         {displayedText}
-      </ReactMarkdown>
+      </MarkdownDetail>
       {!isTyping
       && answer.attachmentList
       && answer.attachmentList?.length !== 0