From 2e75ef696a08c6d69687a220831e4fb53919f504 Mon Sep 17 00:00:00 2001 From: ldq <1582649509@qq.com> Date: Fri, 13 Dec 2024 20:29:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B6=88=E6=81=AF=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E5=80=92=E5=BA=8F=20&=20=E5=A4=B4=E5=83=8F=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/client/assets/css/chatMessage.css | 11 + .../src/client/component/ChatMessage.tsx | 23 +- .../client/component/InquiryRecordView.tsx | 18 +- .../client/component/MaterialInquiryView.tsx | 11 +- .../client/context/InquiryRecordContext.tsx | 801 ++++-------------- 5 files changed, 234 insertions(+), 630 deletions(-) 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 index 63f9af091..7290085c5 100644 --- 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 @@ -32,3 +32,14 @@ .avatar { flex-shrink: 0; } + +.messageTime { + font-size: 12px; + color: #999; + margin-bottom: 2px; + padding: 0 12px; +} + +.messageItemSender .messageTime { + text-align: right; +} 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 index 38b188733..bb2db53c5 100644 --- 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 @@ -9,16 +9,17 @@ import React from 'react'; import { Avatar } from 'antd'; +import dayjs from 'dayjs'; import '../assets/css/chatMessage.css'; import classNames from 'classnames'; interface ChatMessage { speakerRole: 'human' | 'ai'; content: string; + createdAt: number; } const ChatMessages: React.FC<{ messages: ChatMessage[] }> = ({ messages }) => { - // 将换行符转换为
const formatContent = (content: string) => { if (!content) return null; return content.split('\n').map((text, index) => ( @@ -29,9 +30,19 @@ const ChatMessages: React.FC<{ messages: ChatMessage[] }> = ({ messages }) => { )); }; + const formatTime = (timestamp: number) => { + const messageDate = dayjs.unix(timestamp); + const today = dayjs(); + + if (messageDate.isSame(today, 'day')) { + return messageDate.format('HH:mm'); + } + return messageDate.format('YYYY-MM-DD HH:mm'); + }; + return (
- {messages.map((message, index) => { + {[...messages].reverse().map((message, index) => { const isAi = message.speakerRole === 'ai'; return ( @@ -41,12 +52,16 @@ const ChatMessages: React.FC<{ messages: ChatMessage[] }> = ({ messages }) => { size="small" style={{ backgroundColor: isAi ? '#1890ff' : '#87d068', + marginTop: '10px', }} > {isAi ? 'AI' : 'U'} -
- {formatContent(message.content)} +
+
{formatTime(message.createdAt)}
+
+ {formatContent(message.content)} +
); diff --git a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/InquiryRecordView.tsx b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/InquiryRecordView.tsx index 5d17a4d6a..a6c00928d 100644 --- a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/InquiryRecordView.tsx +++ b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/InquiryRecordView.tsx @@ -8,7 +8,7 @@ */ import React, { FC } from 'react'; -import { Descriptions, Tag, Collapse, Space } from 'antd'; +import { Descriptions, Tag, Collapse, Space, Avatar, Image } from 'antd'; import { useInquiryRecord } from '../context/InquiryRecordContext'; import { inquiryRecordMap } from '../utils'; import dayjs from 'dayjs'; @@ -56,7 +56,21 @@ const InquiryRecordView: FC = () => { {inquiryRecordData?.imBotUserId} {inquiryRecordData?.imUserId} - {inquiryRecordData?.imAvatarUrl} + + {inquiryRecordData?.imAvatarUrl ? ( + + ) : ( + 未设置 + )} + + {inquiryRecordData?.imRemark} ), diff --git a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/MaterialInquiryView.tsx b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/MaterialInquiryView.tsx index 5b4999b57..4b0a1e7a0 100644 --- a/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/MaterialInquiryView.tsx +++ b/packages/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/MaterialInquiryView.tsx @@ -17,12 +17,16 @@ const MaterialInquiryView: FC = () => { const { inquiryMaterialsData } = useInquiryRecord(); if (!inquiryMaterialsData) return null; + const joinSupplierName = (suppliers: any[]) => { + return suppliers.map((supplier: any) => supplier.company_name).join(' 、 '); + }; + return (
{inquiryMaterialsData.map((material: any) => ( - + 状态: @@ -43,6 +47,11 @@ const MaterialInquiryView: FC = () => { 需求品牌: {material.manufacturer} + + + 供应商: + {joinSupplierName(material.suppliers)} +