Skip to content

S
sdream-ai-fe
Commit ff4515aa by HoMeTown
Options

feat: 回答的operate调整

parent 2e98e73c
Showing with 76 additions and 70 deletions
src/pages/Chat/components/ChatItem/ChatAnswerAttchment.tsx
...@@ -39,79 +39,84 @@ export const ChatAnswerAttachment: React.FC<ChatAnswerAttachmentProps> = ({ from ...@@ -39,79 +39,84 @@ export const ChatAnswerAttachment: React.FC<ChatAnswerAttachmentProps> = ({ from
} }
return ( return (
<div className="attachmentList flex flex-col gap-[20px]"> <div className="attachmentList flex flex-col gap-[20px]">
{answer.attachmentList && answer.attachmentList.map((attachment, index) => ( {answer.attachmentList && answer.attachmentList.map((attachment, index) => {
<div key={`${attachment.type}_${index}`}> if (attachment?.type) {
{/* 附件：product-detail */} return (
{attachment.type === 'product-detail' && ( <div key={`${attachment.type}_${index}`}>
<div className="bg-[#29B6FD0A] text-[14px] text-primary py-[4px] px-[16px] w-fit flex items-center"> {/* 附件：product-detail */}
<AnswerProDetailIcon /> {attachment.type === 'product-detail' && (
{/* <span className="ml-[6px]">{attachment.name}</span> */} <div className="bg-[#29B6FD0A] text-[14px] text-primary py-[4px] px-[16px] w-fit flex items-center">
<div className="ml-[6px] w-[120px] sm:w-full text-nowrap text-ellipsis overflow-hidden"> <AnswerProDetailIcon />
{attachment.name} {/* <span className="ml-[6px]">{attachment.name}</span> */}
</div> <div className="ml-[6px] w-[120px] sm:w-full text-nowrap text-ellipsis overflow-hidden">
</div> {attachment.name}
)} </div>
</div>
)}
{/* 附件：引用文件 */} {/* 附件：引用文件 */}
{attachment.type === 'reference' && attachment.content.docList.length !== 0 && ( {attachment.type === 'reference' && attachment.content.docList.length !== 0 && (
<div> <div>
<p className="text-[14px] text-[#8D9795] mb-[12px]"> <p className="text-[14px] text-[#8D9795] mb-[12px]">
已为您找到 已为您找到
{attachment.content.docList.length} {attachment.content.docList.length}
篇资料作为参考： 篇资料作为参考：
</p> </p>
<div className="flex flex-col gap-[9px]"> <div className="flex flex-col gap-[9px]">
{ attachment.content.docList.map((doc, docIdx) => ( { attachment.content.docList.map((doc, docIdx) => (
<Link className="cursor-pointer" onPress={() => handleClickDocLink(doc.docId)} size="sm" key={doc.docId} isExternal showAnchorIcon underline="hover"> <Link className="cursor-pointer" onPress={() => handleClickDocLink(doc.docId)} size="sm" key={doc.docId} isExternal showAnchorIcon underline="hover">
{docIdx + 1} {docIdx + 1}
. .
{' '} {' '}
{doc.docName} {doc.docName}
</Link> </Link>
))} ))}
</div> </div>
</div> </div>
)} )}
{/* 附件：选择 box */} {/* 附件：选择 box */}
{ {
attachment.type === 'box' && attachment.content.productList.length !== 0 && ( attachment.type === 'box' && attachment.content.productList.length !== 0 && (
<div> <div>
<div className="mb-[12px]">{attachment.description}</div> <div className="mb-[12px]">{attachment.description}</div>
<ul <ul
className="flex flex-col gap-[8px]" className="flex flex-col gap-[8px]"
>
{attachment.content.productList.map(product => (
// <div key={product.productCode}>{product.productName}</div>
<motion.li
key={product.productCode}
> >
<Button onClick={() => handleClickBoxItem(product.productName, product.productCode)} isDisabled={!isLastAnswer} color="primary" variant="light" className="text-left bg-[#F7FCFF] w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary"> {attachment.content.productList.map(product => (
<div className="w-full text-nowrap text-ellipsis overflow-hidden"> // <div key={product.productCode}>{product.productName}</div>
<span className="ml-[8px]">{product.productName}</span> <motion.li
</div> key={product.productCode}
</Button> >
</motion.li> <Button onClick={() => handleClickBoxItem(product.productName, product.productCode)} isDisabled={!isLastAnswer} color="primary" variant="light" className="text-left bg-[#F7FCFF] w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
))} <div className="w-full text-nowrap text-ellipsis overflow-hidden">
</ul> <span className="ml-[8px]">{product.productName}</span>
</div> </div>
) </Button>
} </motion.li>
))}
</ul>
</div>
)
}
{ {
attachment.type?.includes('card-') && ( attachment.type?.includes('card-') && (
<div onClick={() => handleClickCard(attachment.url)}> <div onClick={() => handleClickCard(attachment.url)}>
{attachment.type === 'card-nav' && <img className="w-full max-w-[400px] cursor-pointer" src={CardNavImg} alt="" />} {attachment.type === 'card-nav' && <img className="w-full max-w-[400px] cursor-pointer" src={CardNavImg} alt="" />}
{attachment.type === 'card-detail' && <img className="w-full max-w-[400px] cursor-pointer" src={CardDetailImg} alt="" />} {attachment.type === 'card-detail' && <img className="w-full max-w-[400px] cursor-pointer" src={CardDetailImg} alt="" />}
{attachment.type === 'card-calculation' && <img className="w-full max-w-[400px] cursor-pointer" src={CardCalculation} alt="" />} {attachment.type === 'card-calculation' && <img className="w-full max-w-[400px] cursor-pointer" src={CardCalculation} alt="" />}
{attachment.type === 'card-product-compare' && <img className="w-full max-w-[400px] cursor-pointer" src={CardProductCompareImg} alt="" />} {attachment.type === 'card-product-compare' && <img className="w-full max-w-[400px] cursor-pointer" src={CardProductCompareImg} alt="" />}
{attachment.type === 'card-plans' && <img className="w-full max-w-[400px] cursor-pointer" src={CardPlansImg} alt="" />} {attachment.type === 'card-plans' && <img className="w-full max-w-[400px] cursor-pointer" src={CardPlansImg} alt="" />}
</div> </div>
) )
} }
</div> </div>
))} )
}
return null
})}
</div> </div>
) )
} }
src/pages/Chat/components/ChatItem/ChatAnswerParser.tsx
...@@ -124,7 +124,7 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer ...@@ -124,7 +124,7 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer
}, [isStopTyping]) }, [isStopTyping])
useEffect(() => { useEffect(() => {
setHideOperate((answer.attachmentList || []).some(attachment => attachment.type === 'box')) setHideOperate((answer.attachmentList || []).some(attachment => attachment?.type === 'box' || attachment?.type?.includes('card-')))
}, [answer.attachmentList]) }, [answer.attachmentList])
return ( return (
......
src/pages/Chat/components/ChatItem/ChatAnswerShower.tsx
...@@ -11,7 +11,7 @@ interface ChatAnswerShowerProps { ...@@ -11,7 +11,7 @@ interface ChatAnswerShowerProps {
} }
export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer, isLastAnswer, onSubmitQuestion }) => { export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer, isLastAnswer, onSubmitQuestion }) => {
const hideOperate = (answer.attachmentList || []).some(attachment => attachment.type === 'box') const hideOperate = (answer.attachmentList || []).some(attachment => attachment.type === 'box' || attachment?.type?.includes('card-'))
return ( return (
<div className="answerShower"> <div className="answerShower">
{answer.answer && ( {answer.answer && (
...@@ -22,6 +22,7 @@ export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer, isLa ...@@ -22,6 +22,7 @@ export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer, isLa
</div> </div>
)} )}
{answer.attachmentList && answer.attachmentList?.length !== 0 && <ChatAnswerAttachment onSubmitQuestion={onSubmitQuestion} isLastAnswer={isLastAnswer} answer={answer} />} {answer.attachmentList && answer.attachmentList?.length !== 0 && <ChatAnswerAttachment onSubmitQuestion={onSubmitQuestion} isLastAnswer={isLastAnswer} answer={answer} />}
{/* {} */}
{!hideOperate && <ChatAnswerOperate answer={answer} />} {!hideOperate && <ChatAnswerOperate answer={answer} />}
</div> </div>
) )
......
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