feat: 消息展示倒序 & 头像预览

ldq1220 · Dec 13, 2024 · 2e75ef6 · 2e75ef6
1 parent d6b00d5
commit 2e75ef6
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 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
@@ -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
@@ -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 }) => {
-  // 将换行符转换为<br/>
   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 (
     <div className="chatContainer">
-      {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'}
             </Avatar>
-            <div className={classNames('messageContent', isAi && 'messageContentSender')}>
-              {formatContent(message.content)}
+            <div>
+              <div className="messageTime">{formatTime(message.createdAt)}</div>
+              <div className={classNames('messageContent', isAi && 'messageContentSender')}>
+                {formatContent(message.content)}
+              </div>
             </div>
           </div>
         );

diff --git a/...es/plugins/@gemel/plugin-inquiry-record-detail/src/client/component/InquiryRecordView.tsx b/...es/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 = () => {
                   </Descriptions.Item>
                   <Descriptions.Item label="机器人ID">{inquiryRecordData?.imBotUserId}</Descriptions.Item>
                   <Descriptions.Item label="IM客户(群)ID">{inquiryRecordData?.imUserId}</Descriptions.Item>
-                  <Descriptions.Item label="IM客户(群)头像">{inquiryRecordData?.imAvatarUrl}</Descriptions.Item>
+                  <Descriptions.Item label="IM客户(群)头像">
+                    {inquiryRecordData?.imAvatarUrl ? (
+                      <Image
+                        src={inquiryRecordData.imAvatarUrl}
+                        width={32}
+                        style={{ borderRadius: '50%' }}
+                        preview={{
+                          src: inquiryRecordData.imAvatarUrl,
+                        }}
+                      />
+                    ) : (
+                      <Avatar size={32}>未设置</Avatar>
+                    )}
+                  </Descriptions.Item>
+
                   <Descriptions.Item label="IM客户(群)备注">{inquiryRecordData?.imRemark}</Descriptions.Item>
                 </Descriptions>
               ),

diff --git a/.../plugins/@gemel/plugin-inquiry-record-detail/src/client/component/MaterialInquiryView.tsx b/.../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 (
     <div style={{ marginTop: 16 }}>
       <Tabs type="card">
         {inquiryMaterialsData.map((material: any) => (
           <Tabs.TabPane key={material.material_code} tab={material.material_code}>
-            <Space size={28} wrap style={{ padding: '0 20px' }}>
+            <Space size={14} wrap style={{ padding: '0 20px' }}>
               <Space>
                 <Typography.Text type="secondary">状态:</Typography.Text>
                 <Tag color={inquiryRecordMaterialMap(material.inquiry_material_status)?.color}>
@@ -43,6 +47,11 @@ const MaterialInquiryView: FC = () => {
                 <Typography.Text type="secondary">需求品牌:</Typography.Text>
                 <Typography.Text>{material.manufacturer}</Typography.Text>
               </Space>
+
+              <Space>
+                <Typography.Text type="secondary">供应商:</Typography.Text>
+                <Typography.Text>{joinSupplierName(material.suppliers)}</Typography.Text>
+              </Space>
             </Space>
 
             <SupplierInquiryRecordTable