Skip to content

S
sdream-ai-fe
Commit 1fda93a3 by HoMeTown
Options

feat: 处理2个附件

parent 67aec29e
Showing with 146 additions and 1 deletions
src/assets/link.png 0 → 100644
This diff was suppressed by a .gitattributes entry.
src/assets/svg/answerProDetail.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>蒙版</title>
<defs>
<rect id="path-1" x="0" y="0" width="14" height="14"></rect>
</defs>
<g id="晓得---PC端页面-草稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="晓得-PC端---当前对话提问" transform="translate(-602.000000, -610.000000)">
<g id="对话流" transform="translate(498.000000, 144.000000)">
<g id="编组-10" transform="translate(0.000000, 224.000000)">
<g id="编组-7备份" transform="translate(64.000000, 0.000000)">
<g id="产品标签" transform="translate(24.000000, 236.000000)">
<g id="编组-22" transform="translate(16.000000, 6.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="蒙版"></g>
<g mask="url(#mask-2)" stroke="#6DD2FE" stroke-width="1.1">
<g transform="translate(0.000000, 0.500000)">
<path d="M6.85330581,0.690559535 C6.94553799,0.643906232 7.05446201,0.643906232 7.14669419,0.690559535 L7.14669419,0.690559535 L12.1991883,3.24623516 C12.2614767,3.27774215 12.3119658,3.32846658 12.3431829,3.39090076 C12.3833187,3.47117227 12.3871183,3.56011271 12.3608162,3.63901921 C12.334514,3.7179257 12.27811,3.78679827 12.1978385,3.82693402 L12.1978385,3.82693402 L7.14534442,6.35318106 C7.05384798,6.39892928 6.94615202,6.39892928 6.85465558,6.35318106 L6.85465558,6.35318106 L1.8021615,3.82693402 C1.73972732,3.79571693 1.68900289,3.74522776 1.6574959,3.68293938 C1.61698742,3.60285532 1.61277434,3.51393351 1.63870941,3.43490559 L1.63870941,3.43490559 Z" id="路径-4"></path>
<path d="M1.75,6.9375 L6.6086881,9.36684405 C6.85502466,9.49001233 7.14497534,9.49001233 7.3913119,9.36684405 L12.25,6.9375 L12.25,6.9375" id="路径-5" stroke-linecap="round"></path>
<path d="M1.75,10 L6.6086881,12.4293441 C6.85502466,12.5525123 7.14497534,12.5525123 7.3913119,12.4293441 L12.25,10 L12.25,10" id="路径-5备份" stroke-linecap="round"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/svg/link.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>链接</title>
<defs>
<rect id="path-1" x="0" y="0" width="16" height="16"></rect>
<rect id="path-3" x="0" y="0" width="16" height="16" rx="6"></rect>
</defs>
<g id="晓得---PC端页面-草稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.797119141">
<g id="晓得-PC端---当前对话提问" transform="translate(-598.000000, -686.000000)">
<g id="对话流" transform="translate(498.000000, 144.000000)">
<g id="编组-10" transform="translate(0.000000, 224.000000)">
<g id="编组-7备份" transform="translate(64.000000, 0.000000)">
<g id="参考资料" transform="translate(24.000000, 282.000000)">
<g id="1" transform="translate(0.000000, 28.000000)">
<g id="链接" transform="translate(12.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="矩形"></g>
<g id="-链接" mask="url(#mask-2)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="矩形" fill="#F7B96C" xlink:href="#path-3"></use>
<path d="M9.5,16 C5.91014675,16 3,13.0898532 3,9.5 C3,5.91014675 5.91014675,3 9.5,3 C13.0898532,3 16,5.91014675 16,9.5 C16,13.0898532 13.0898532,16 9.5,16 Z" id="路径" fill="#F8B057" fill-rule="nonzero" mask="url(#mask-4)"></path>
<path d="M11.5,16 C9.01471698,16 7,13.985283 7,11.5 C7,9.01471698 9.01471698,7 11.5,7 C13.985283,7 16,9.01471698 16,11.5 C16,13.985283 13.985283,16 11.5,16 Z" id="路径备份" fill="#F7A540" fill-rule="nonzero" mask="url(#mask-4)"></path>
<path d="M11.9678731,4.0686964 L11.9311664,4.03198971 C11.0853002,3.18629503 9.7,3.18629503 8.85411664,4.03198971 L6.89265866,5.99308748 C6.04679245,6.83878216 6.04679245,8.22382505 6.89265866,9.06951973 L6.92936535,9.10622642 C6.9990909,9.17591768 7.07430532,9.24013723 7.15137221,9.29885077 L7.86881647,8.58154374 C7.78440823,8.53202402 7.705506,8.47331046 7.63394512,8.40178387 L7.59723841,8.36507719 C7.13854202,7.90646656 7.13854202,7.15799314 7.59723841,6.69936535 L9.55871355,4.73830188 C10.0174271,4.27967409 10.7660377,4.27967409 11.2247513,4.73830188 L11.261458,4.77499142 C11.7201715,5.23360205 11.7201715,5.98207547 11.261458,6.44068611 L10.3752144,7.32675815 C10.5293482,7.70650086 10.6027444,8.1119211 10.5954031,8.51734133 L11.9678731,7.1451458 C12.8137393,6.29945112 12.8137393,4.91440823 11.9678731,4.06871355 L11.9678731,4.0686964 Z M9.06878217,6.89380789 C8.99905662,6.82409949 8.9238422,6.75987993 8.84677531,6.70118354 L8.1293482,7.41847341 C8.21373928,7.46799313 8.2926415,7.52670668 8.3642024,7.59823327 L8.40090909,7.63493996 C8.85960548,8.09355059 8.85960548,8.842024 8.40090909,9.3006518 L6.43945112,11.2617153 C5.98073756,11.7203431 5.23212693,11.7203431 4.77341337,11.2617153 L4.73670668,11.2250257 C4.27799313,10.7664151 4.27799313,10.0179417 4.73670668,9.55933105 L5.6247856,8.673259 C5.47065181,8.29351629 5.39725558,7.88809604 5.40459691,7.48267581 L4.03212693,8.85487136 C3.18626072,9.70056604 3.18626072,11.0856089 4.03212693,11.9313036 L4.06883362,11.9680103 C4.91469984,12.813705 6.3,12.813705 7.14588336,11.9680103 L9.10734134,10.0069297 C9.95320755,9.16123499 9.95320755,7.7761921 9.10734134,6.93049743 L9.06879931,6.89379074 L9.06878217,6.89380789 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-4)"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/pages/Chat/components/ChatItem/ChatAnswerAttchment.tsx 0 → 100644
import { Button } from '@nextui-org/react'
import type { Answer } from '@/types/chat'
import AnswerProDetailIcon from '@/assets/svg/answerProDetail.svg?react'
import LinkIcon from '@/assets/svg/link.svg?react'
interface ChatAnswerAttachmentProps {
answer: Answer
}
export const ChatAnswerAttachment: React.FC<ChatAnswerAttachmentProps> = ({ answer }) => {
const handleReferenceLink = (link: string) => {
window.open(link)
}
return (
<div className="attachmentList flex flex-col gap-[20px] mt-[20px]">
{answer.attachmentList && answer.attachmentList.map((attachment, index) => (
<div key={`${attachment.type}_${index}`}>
{/* 附件：product-detail */}
{attachment.type === 'product-detail' && (
<div className="bg-[#29B6FD0A] text-[14px] text-primary py-[4px] px-[16px] w-fit flex items-center">
<AnswerProDetailIcon />
{/* <span className="ml-[6px]">{attachment.name}</span> */}
<div className="ml-[6px] w-[120px] sm:w-full text-nowrap text-ellipsis overflow-hidden">
{attachment.name}
</div>
</div>
)}
{/* 附件：引用文件 */}
{attachment.type === 'reference' && (
<div>
<p className="text-[14px] text-[#8D9795] mb-[12px] pl-[14px]">
已为您找到
{attachment.content.docList.length}
篇资料作为参考
</p>
<div className="flex flex-col gap-[12px]">
{ attachment.content.docList.map(doc => (
<Button onClick={() => handleReferenceLink(doc.docId)} key={doc.docId} color="primary" variant="light" className="text-left bg-[#F6F6F8] w-fit text-[#333] rounded-[8px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
<LinkIcon />
<div className="w-[150px] sm:w-full text-nowrap text-ellipsis overflow-hidden">
{doc.docName}
</div>
</Button>
))}
</div>
</div>
)}
</div>
))}
</div>
)
}
src/pages/Chat/components/ChatItem/ChatAnswerParser.tsx
......@@ -3,6 +3,7 @@ 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 type { Answer } from '@/types/chat'
interface ChatAnswerParserProps {
......@@ -12,8 +13,10 @@ interface ChatAnswerParserProps {
export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ answer }) => {
const [displayedText, setDisplayedText] = useState('')
const [currentIndex, setCurrentIndex] = useState(0)
const [isTyping, setIsTyping] = useState(false)
useEffect(() => {
setIsTyping(true)
if (currentIndex < answer.answer.length) {
const timer = setTimeout(() => {
setDisplayedText(answer.answer.slice(0, currentIndex + 1))
......@@ -22,6 +25,9 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ answer }) =>
return () => clearTimeout(timer)
}
else {
setIsTyping(false)
}
}, [answer, currentIndex])
return (
......@@ -33,6 +39,7 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ answer }) =>
>
{displayedText}
</ReactMarkdown>
{!isTyping && <ChatAnswerAttachment answer={answer} />}
</div>
)
}
src/pages/Chat/components/ChatItem/ChatAnswerShower.tsx
......@@ -3,6 +3,7 @@ import rehypeRaw from 'rehype-raw'
import rehypeSanitize from 'rehype-sanitize'
import remarkGfm from 'remark-gfm'
import { formatMarkdown } from './markdownFormatter'
import { ChatAnswerAttachment } from './ChatAnswerAttchment'
import type { Answer } from '@/types/chat'
interface ChatAnswerShowerProps {
......@@ -19,6 +20,8 @@ export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer }) =>
>
{formatMarkdown(answer.answer || '')}
</ReactMarkdown>
<ChatAnswerAttachment answer={answer} />
</div>
)
}
src/pages/Chat/components/ChatItem/ChatItemUser.tsx
......@@ -10,7 +10,7 @@ export const ChatItemUser: React.FC<ChatItemUserProps> = ({ record }) => {
return (
<div className="chatItemUser">
<div className="flex justify-end">
<div className="mr-[20px] bg-[#BFE9FE] rounded-[20px] box-border px-[24px] py-[20px] text-[#27353C]">{record.question}</div>
<div className="mr-[20px] bg-[#29B6FD] rounded-[20px] box-border px-[18px] py-[18px] text-[#fff]">{record.question}</div>
<Avatar className="flex-shrink-0" src={AvatarUser} />
</div>
<div className="h-[32px] w-full"></div>
......
src/types/chat.ts
interface AttachmentContentDoc {
docId: string
docName: string
}
interface AttachmentContent {
docList: AttachmentContentDoc[]
}
export interface Attachment {
type: string
name: string
description: string
content: AttachmentContent
}
export interface Answer {
......
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