style: 历史会话: bg-color 区分发送消息, 当会话钟有多个人员服务时

src/utils/utils.js

@@ -301,7 +301,7 @@ export const cartesianProductArray = (arr, sep = '_', index = 0, prefix = '') =>
   return result;
 };
 
-export const stringToColour = (str) => {
+export const stringToColour_bak = (str) => {
   // Hash the username using SHA256
   const hash = crypto.SHA256(str);
   // Convert the hash to a hexadecimal string
@@ -310,6 +310,19 @@ export const stringToColour = (str) => {
   const color = '#' + hexString.substring(0, 6);
   return color;
 };
+export const stringToColour = (str) => {
+  var hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  var colour = '#'
+  for (let i = 0; i < 3; i++) {
+    var value = (hash >> (i * 8)) & 0xff
+    value = (value % 150) + 50
+    colour += ('00' + value.toString(16)).substr(-2)
+  }
+  return colour
+}
 
 export const debounce = (func, wait, immediate) => {
   var timeout;

src/views/ChatHistory.jsx

@@ -1,10 +1,9 @@
 import { memo, useCallback, useEffect, useRef, useState, forwardRef } from 'react';
-import { Divider, Button, Input, Layout, Select, DatePicker, Form, List, Spin } from 'antd';
+import { Divider, Button, Input, Layout, DatePicker, Form, List, Spin } from 'antd';
 import { ChatItem, MessageBox } from 'react-chat-elements';
 import { fetchConversationsList, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
-import { isEmpty } from '@/utils/utils';
+import { isEmpty, stringToColour } from '@/utils/utils';
 import useFormStore from '@/stores/FormStore';
-import { useShallow } from 'zustand/react/shallow';
 
 import { fetchSalesAgent, fetchCustomerList } from '@/actions/CommonActions';
 import SearchInput from '@/components/SearchInput';
@@ -253,7 +252,7 @@ function ChatHistory() {
                     : {})}
                   renderAddCmp={
                     <div className='border-dashed border-0 border-t border-slate-300 text-slate-600 space-x-2 emoji'>
-                      <span>{message.senderName}</span>
+                      <span className={`p-1 rounded-b ${message.msg_direction === 'outbound' ? 'text-white' : ''} `} style={{backgroundColor: message.msg_direction === 'outbound' ? stringToColour(message.senderName) : 'unset'}}>{message.senderName}</span>
                       <span>{message.dateString || message.localDate}</span>
                       <span>{message.statusCN}</span>
                     </div>