feat: 处理answer中的图片

src/api/common.ts

@@ -17,3 +17,15 @@ export function fetchLoginByUid(uid: string) {
 export function fetchGetAgreementList() {
   return http.post('/config-center/api/commonconfig/mobile/v1/query_agreement_list')
 }
+
+/**
+ * 获取文档链接s
+ * @param recordId
+ * @returns
+ */
+export function fetchGetDocumentLinks(docIdList: string[]) {
+  return http.post('/conversation/api/conversation/mobile/v1/query_batch_document', {
+    ossType: 'private',
+    docIdList,
+  })
+}

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

@@ -5,6 +5,7 @@ import { formatMarkdown } from './markdownFormatter'
 import type { Answer } from '@/types/chat'
 import { MarkdownDetail } from '@/components/MarkdownDetail'
 import { fetchTerminateQuestion } from '@/api/chat'
+import { fetchGetDocumentLinks } from '@/api/common'
 
 interface ChatAnswerParserProps {
   answer: Answer
@@ -21,6 +22,54 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer
   const [currentIndex, setCurrentIndex] = useState(0)
   const [isTyping, setIsTyping] = useState(false)
   const [hideOperate, setHideOperate] = useState(false)
+  const [isImageAnswer, setIsImageAnswer] = useState(false)
+
+  function extractImageSources(htmlString: string): string[] {
+    const imgRegex = /<img[^>]+src="([^">]+)"/gi
+    const srcRegex = /src="([^">]+)"/i
+    const matches = htmlString.match(imgRegex)
+
+    const sources: string[] = []
+
+    if (matches) {
+      matches.forEach((match) => {
+        const srcMatch = match.match(srcRegex)
+        if (srcMatch && srcMatch[1])
+          sources.push(srcMatch[1])
+      })
+    }
+
+    return sources
+  }
+
+  function replaceImageSources(str: string, originalSrcs: string[], newSrcs: string[]): string {
+    if (originalSrcs.length !== newSrcs.length)
+      return str
+
+    return originalSrcs.reduce((acc, originalSrc, index) => {
+      const newSrc = newSrcs[index]
+      const regex = new RegExp(originalSrc, 'g')
+      return acc.replace(regex, newSrc)
+    }, str)
+  }
+
+  async function formatImgAnswer(str: string) {
+    const imagesSrc = extractImageSources(str)
+    const res = await fetchGetDocumentLinks(imagesSrc)
+    if (res.data) {
+      const arr = replaceImageSources(str, imagesSrc, res.data.map((item: any) => item.docUrl))
+      return arr
+    }
+
+    else { return replaceImageSources(str, imagesSrc, []) }
+  }
+
+  const handleImageAnswer = async () => {
+    const res = await formatImgAnswer(formatAnswer)
+    setDisplayedText(res)
+    setIsTyping(false)
+    onComplate()
+  }
 
   useEffect(() => {
     if (isStopTyping) {
@@ -31,17 +80,31 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer
       setIsTyping(true)
     }
     if (currentIndex < formatAnswer.length) {
-      const timer = setTimeout(() => {
-        setDisplayedText(formatAnswer.slice(0, currentIndex + 1))
-        setCurrentIndex(prevIndex => prevIndex + 1)
-      }, 20) // 调整此值以改变打字速度
-
-      return () => clearTimeout(timer)
+      const nextChar = formatAnswer[currentIndex]
+      if (nextChar === '<' || isImageAnswer) {
+        setIsImageAnswer(true)
+        const timer = setTimeout(() => {
+          setCurrentIndex(prevIndex => prevIndex + 1)
+        }, 20) // 调整此值以改变打字速度
+        return () => clearTimeout(timer)
+      }
+      else {
+        const timer = setTimeout(() => {
+          setDisplayedText(formatAnswer.slice(0, currentIndex + 1))
+          setCurrentIndex(prevIndex => prevIndex + 1)
+        }, 20) // 调整此值以改变打字速度
+        return () => clearTimeout(timer)
+      }
     }
     else {
       if (answer.endAnswerFlag) {
-        setIsTyping(false)
-        onComplate()
+        if (isImageAnswer) {
+          handleImageAnswer()
+        }
+        else {
+          setIsTyping(false)
+          onComplate()
+        }
       }
     }
   }, [answer, currentIndex])