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
}
return (
<div className="attachmentList flex flex-col gap-[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>
)}
{answer.attachmentList && answer.attachmentList.map((attachment, index) => {
if (attachment?.type) {
return (
<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' && attachment.content.docList.length !== 0 && (
<div>
<p className="text-[14px] text-[#8D9795] mb-[12px]">
已为您找到
{attachment.content.docList.length}
篇资料作为参考：
</p>
<div className="flex flex-col gap-[9px]">
{ attachment.content.docList.map((doc, docIdx) => (
<Link className="cursor-pointer" onPress={() => handleClickDocLink(doc.docId)} size="sm" key={doc.docId} isExternal showAnchorIcon underline="hover">
{docIdx + 1}
.
{' '}
{doc.docName}
</Link>
))}
</div>
</div>
{/* 附件：引用文件 */}
{attachment.type === 'reference' && attachment.content.docList.length !== 0 && (
<div>
<p className="text-[14px] text-[#8D9795] mb-[12px]">
已为您找到
{attachment.content.docList.length}
篇资料作为参考：
</p>
<div className="flex flex-col gap-[9px]">
{ attachment.content.docList.map((doc, docIdx) => (
<Link className="cursor-pointer" onPress={() => handleClickDocLink(doc.docId)} size="sm" key={doc.docId} isExternal showAnchorIcon underline="hover">
{docIdx + 1}
.
{' '}
{doc.docName}
</Link>
))}
</div>
</div>
)}
)}
{/* 附件：选择 box */}
{
attachment.type === 'box' && attachment.content.productList.length !== 0 && (
<div>
<div className="mb-[12px]">{attachment.description}</div>
<ul
className="flex flex-col gap-[8px]"
>
{attachment.content.productList.map(product => (
// <div key={product.productCode}>{product.productName}</div>
<motion.li
key={product.productCode}
{/* 附件：选择 box */}
{
attachment.type === 'box' && attachment.content.productList.length !== 0 && (
<div>
<div className="mb-[12px]">{attachment.description}</div>
<ul
className="flex flex-col gap-[8px]"
>
<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">
<span className="ml-[8px]">{product.productName}</span>
</div>
</Button>
</motion.li>
))}
</ul>
</div>
)
}
{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">
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span className="ml-[8px]">{product.productName}</span>
</div>
</Button>
</motion.li>
))}
</ul>
</div>
)
}
{
attachment.type?.includes('card-') && (
<div onClick={() => handleClickCard(attachment.url)}>
{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-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-plans' && <img className="w-full max-w-[400px] cursor-pointer" src={CardPlansImg} alt="" />}
</div>
)
}
</div>
))}
{
attachment.type?.includes('card-') && (
<div onClick={() => handleClickCard(attachment.url)}>
{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-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-plans' && <img className="w-full max-w-[400px] cursor-pointer" src={CardPlansImg} alt="" />}
</div>
)
}
</div>
)
}
return null
})}
</div>
)
}
src/pages/Chat/components/ChatItem/ChatAnswerParser.tsx
......@@ -124,7 +124,7 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer
}, [isStopTyping])
useEffect(() => {
setHideOperate((answer.attachmentList || []).some(attachment => attachment.type === 'box'))
setHideOperate((answer.attachmentList || []).some(attachment => attachment?.type === 'box' || attachment?.type?.includes('card-')))
}, [answer.attachmentList])
return (
......
src/pages/Chat/components/ChatItem/ChatAnswerShower.tsx
......@@ -11,7 +11,7 @@ interface ChatAnswerShowerProps {
}
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 (
<div className="answerShower">
{answer.answer && (
......@@ -22,6 +22,7 @@ export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer, isLa
</div>
)}
{answer.attachmentList && answer.attachmentList?.length !== 0 && <ChatAnswerAttachment onSubmitQuestion={onSubmitQuestion} isLastAnswer={isLastAnswer} answer={answer} />}
{/* {} */}
{!hideOperate && <ChatAnswerOperate answer={answer} />}
</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