Commit 556f96ae by HoMeTown

feat: 处理answer中的图片

parent ba160da4
...@@ -17,3 +17,15 @@ export function fetchLoginByUid(uid: string) { ...@@ -17,3 +17,15 @@ export function fetchLoginByUid(uid: string) {
export function fetchGetAgreementList() { export function fetchGetAgreementList() {
return http.post('/config-center/api/commonconfig/mobile/v1/query_agreement_list') 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,
})
}
...@@ -5,6 +5,7 @@ import { formatMarkdown } from './markdownFormatter' ...@@ -5,6 +5,7 @@ import { formatMarkdown } from './markdownFormatter'
import type { Answer } from '@/types/chat' import type { Answer } from '@/types/chat'
import { MarkdownDetail } from '@/components/MarkdownDetail' import { MarkdownDetail } from '@/components/MarkdownDetail'
import { fetchTerminateQuestion } from '@/api/chat' import { fetchTerminateQuestion } from '@/api/chat'
import { fetchGetDocumentLinks } from '@/api/common'
interface ChatAnswerParserProps { interface ChatAnswerParserProps {
answer: Answer answer: Answer
...@@ -21,6 +22,54 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer ...@@ -21,6 +22,54 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer
const [currentIndex, setCurrentIndex] = useState(0) const [currentIndex, setCurrentIndex] = useState(0)
const [isTyping, setIsTyping] = useState(false) const [isTyping, setIsTyping] = useState(false)
const [hideOperate, setHideOperate] = 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(() => { useEffect(() => {
if (isStopTyping) { if (isStopTyping) {
...@@ -31,17 +80,31 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer ...@@ -31,17 +80,31 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer
setIsTyping(true) setIsTyping(true)
} }
if (currentIndex < formatAnswer.length) { if (currentIndex < formatAnswer.length) {
const timer = setTimeout(() => { const nextChar = formatAnswer[currentIndex]
setDisplayedText(formatAnswer.slice(0, currentIndex + 1)) if (nextChar === '<' || isImageAnswer) {
setCurrentIndex(prevIndex => prevIndex + 1) setIsImageAnswer(true)
}, 20) // 调整此值以改变打字速度 const timer = setTimeout(() => {
setCurrentIndex(prevIndex => prevIndex + 1)
return () => clearTimeout(timer) }, 20) // 调整此值以改变打字速度
return () => clearTimeout(timer)
}
else {
const timer = setTimeout(() => {
setDisplayedText(formatAnswer.slice(0, currentIndex + 1))
setCurrentIndex(prevIndex => prevIndex + 1)
}, 20) // 调整此值以改变打字速度
return () => clearTimeout(timer)
}
} }
else { else {
if (answer.endAnswerFlag) { if (answer.endAnswerFlag) {
setIsTyping(false) if (isImageAnswer) {
onComplate() handleImageAnswer()
}
else {
setIsTyping(false)
onComplate()
}
} }
} }
}, [answer, currentIndex]) }, [answer, currentIndex])
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment