Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
S
sdream-ai-fe
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
侯明涛
sdream-ai-fe
Commits
556f96ae
Commit
556f96ae
authored
Aug 15, 2024
by
HoMeTown
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 处理answer中的图片
parent
ba160da4
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
83 additions
and
8 deletions
+83
-8
src/api/common.ts
+12
-0
src/pages/Chat/components/ChatItem/ChatAnswerParser.tsx
+71
-8
No files found.
src/api/common.ts
View file @
556f96ae
...
@@ -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
,
})
}
src/pages/Chat/components/ChatItem/ChatAnswerParser.tsx
View file @
556f96ae
...
@@ -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
])
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment