diff --git a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/assets/css/chatMessage.css b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/assets/css/chatMessage.css new file mode 100644 index 000000000..7482ed24f --- /dev/null +++ b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/assets/css/chatMessage.css @@ -0,0 +1,34 @@ +.chatContainer { + width: 520px; + max-height: 520px; + overflow-y: auto; + padding: 12px; +} + +.messageItem { + display: flex; + margin-bottom: 12px; +} + +.messageItemSender { + flex-direction: row-reverse; +} + +.messageContent { + max-width: 300px; + margin: 0 0 0 12px; + padding: 8px 12px; + border-radius: 8px; + word-break: break-all; + line-height: 1.5; + background-color: #f0f0f0; +} + +.messageContentSender { + margin: 0 12px 0 0; + background-color: #e6f7ff; +} + +.avatar { + flex-shrink: 0; +} diff --git a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/assets/svg/chatMessages.svg b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/assets/svg/chatMessages.svg new file mode 100644 index 000000000..55d2e9939 --- /dev/null +++ b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/assets/svg/chatMessages.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/ChatMessage.tsx b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/ChatMessage.tsx new file mode 100644 index 000000000..f2db0bacd --- /dev/null +++ b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/ChatMessage.tsx @@ -0,0 +1,58 @@ +/** + * This file is part of the NocoBase (R) project. + * Copyright (c) 2020-2024 NocoBase Co., Ltd. + * Authors: NocoBase Team. + * + * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. + * For more information, please refer to: https://www.nocobase.com/agreement. + */ + +import React from 'react'; +import { Avatar } from 'antd'; +import styles from '../assets/css/chatMessage.css'; +import classNames from 'classnames'; + +interface ChatMessage { + speakerRole: 'human' | 'ai'; + content: string; +} + +const ChatMessages: React.FC<{ messages: ChatMessage[] }> = ({ messages }) => { + // 将换行符转换为
+ const formatContent = (content: string) => { + if (!content) return null; + return content.split('\n').map((text, index) => ( + + {text} + {index !== content.split('\n').length - 1 &&
} + + )); + }; + + return ( +
+ {messages.map((message, index) => { + const isHuman = message.speakerRole === 'human'; + + return ( +
+ + {isHuman ? 'AI' : 'U'} + +
+ {formatContent(message.content)} +
+
+ ); + })} +
+ ); +}; + +export default ChatMessages; diff --git a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/ReplyCustomer.tsx b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/ReplyCustomer.tsx index 0814ea886..ec07a6fea 100644 --- a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/ReplyCustomer.tsx +++ b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/ReplyCustomer.tsx @@ -8,12 +8,13 @@ */ import React, { FC, useState, useEffect, useRef } from 'react'; -import { Input, Button, Modal, Flex } from 'antd'; +import { Input, Button, Modal, Flex, message } from 'antd'; import { useInquiryRecord } from '../context/InquiryRecordContext'; const { TextArea } = Input; const ReplyCustomer: FC = () => { + const [messageApi, contextHolder] = message.useMessage(); const { inquiryMaterialsData, selectedRecords, setSelectedRecord } = useInquiryRecord(); const [replyContent, setReplyContent] = useState(''); const initialized = useRef(false); @@ -30,18 +31,20 @@ const ReplyCustomer: FC = () => { }); initialized.current = true; } - }, [inquiryMaterialsData]); + }, [inquiryMaterialsData, setSelectedRecord]); + + const handleGenerateContent = () => { + if (Object.keys(selectedRecords).length <= 0) return messageApi.error('请先选择参考数据'); - // 根据选中记录生成回复内容 - useEffect(() => { const content = Object.entries(selectedRecords) .map(([tabKey, record]) => { return `物料: ${tabKey} -- 价格: ${record.price || '暂无'} 库存状况: ${record.store_status || '暂无'}`; }) .join('\n'); - setReplyContent(content); - }, [selectedRecords]); + setReplyContent((prev) => (prev ? `${prev}\n\n${content}` : content)); + messageApi.success('回复文案已生成，请检查关键信息。'); + }; const handleReply = () => { Modal.confirm({ @@ -56,13 +59,17 @@ const ReplyCustomer: FC = () => { return ( + {contextHolder}