style:

src/views/Conversations/History/MessagesList.jsx

@@ -4,7 +4,7 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { MessageBox } from 'react-chat-elements';
 import { MESSAGE_PAGE_SIZE, fetchMessagesHistory } from '@/actions/ConversationActions';
 import useFormStore from '@/stores/FormStore';
-import { isEmpty, stringToColour, groupBy, isNotEmpty } from '@/utils/commons';
+import { isEmpty, stringToColour, groupBy, isNotEmpty, TagColorStyle } from '@/utils/commons';
 import { useShallow } from 'zustand/react/shallow';
 import MergeConversationTo from './MergeConversationTo';
 import BubbleIM from '../Online/Components/BubbleIM';
@@ -289,7 +289,7 @@ const MessagesList = ({ ...listProps }) => {
                   <div key={'msg-prefix'} className='border-dashed border-0 border-t border-slate-300 text-slate-600 space-x-2 emoji ' style={{backgroundColor: 'unset'}}>
                     <span
                       className={`p-1 rounded-b ${message.msg_direction === 'outbound' ? 'text-white' : ''} `}
-                      style={{ backgroundColor: message.msg_direction === 'outbound' ? stringToColour(message.senderName) : 'unset' }}>
+                      style={{ backgroundColor: message.msg_direction === 'outbound' ? stringToColour(message.senderName) : 'unset', ...TagColorStyle(message.senderName, true) }}>
                       {message.msg_direction === 'outbound' ? selectedConversation.OPI_Name : message.senderName}
                     </span>
                     <span>{message.dateString || message.localDate}</span>