开发: 成员聊天页面

src/pages/ChatLogs/ChatLogsType.ts

@@ -4,18 +4,54 @@ export interface IStaffsItem {
   telephone: string;
   dep_name: string[];
   position: string;
+  avatar?: string;
 }
 
 export interface ICustFollow {
   cust_id: string;
-  cust_info: {
+
-    avatar: string;
+  avatar: string;
-    cust_id: string;
+
-    gender: number;
+  gender: number;
-    name: string;
+  name: string;
-    sync_time: string;
+
-    type: number;
+  type: number;
-  };
+
+  description: string;
+  oper_user_id: string;
+  remark: string;
+  remark_mobiles: string;
+  state: number;
+  sync_time: string;
+  tags: string;
+}
+
+export interface IGroup {
+  admin_list: string;
+  create_time: string;
+  group_id: string;
+  name: string;
+  owner: string;
+  state: number;
+  status: number;
+  sync_time: string;
+  notice: string;
+}
+
+export interface IGroupMembers {
+  avatar: string;
+
+  cust_id: string;
+  gender: number;
+  group_id: string;
+  // group_members_name: string;
+  name: string;
+  invitor: string;
+  join_scene: number;
+  join_time: string;
+  nick_name: string;
+  state: number;
+  user_id: string;
 }
 
 export interface IChat {
@@ -27,6 +63,15 @@ export interface IChat {
   msg_to_list: string;
   msg_type: string;
   room_id: string;
+  title?: string;
+  votetitle?: string;
+  voteitem?: string;
+  votetype?: string;
+  collect?: string;
+  state: number;
+  seq: number;
+  curr_page: number | string; // 前端自己定义的定位用的
+  show_time: boolean;
 }
 export interface IChatItem {
   from?: IStaffsItem;

src/pages/ChatLogs/components/ChatAgreeOrNot.tsx

@@ -17,7 +17,8 @@ export const ChatAgreeOrNot: React.FC<IProps> = (props) => {
           alignItems: 'center',
         }}
       >
-        对方{props.msg_type == 'agree' ? '' : '不'}同意存档会话内容，你将无法继续提供服务
+        对方{props.msg_type == 'agree' ? '' : '不'}同意存档会话内容，你
+        {props.msg_type == 'agree' ? '可以' : '将无法'}继续提供服务
       </span>
     </div>
   );

src/pages/ChatLogs/components/ChatBar.tsx

@@ -1,6 +1,8 @@
 import { IChatItem } from '../ChatLogsType';
 import { ChatAgreeOrNot } from './ChatAgreeOrNot';
 import { ChatCard } from './ChatCard';
+import { ChatCollect } from './ChatCollect';
+import { ChatDocmsg } from './ChatDocmsg';
 import { ChatEmotion } from './ChatEmotion';
 import { ChatFile } from './ChatFile';
 import { ChatImage } from './ChatImage';
@@ -11,45 +13,119 @@ import { ChatRecord } from './ChatRecord';
 import { ChatRedpacket } from './ChatRedpacket';
 import { ChatRevoke } from './ChatRevoke';
 import { ChatText } from './ChatText';
+import { ChatTodo } from './ChatTodo';
 import { ChatVideo } from './ChatVideo';
 import { ChatVoice } from './ChatVoice';
 import { ChatVoiptext } from './ChatVoiptext';
+import { ChatVote } from './ChatVote';
 import { ChatWeapp } from './ChatWeapp';
+import styles from './index.module.scss';
 
 export const ChatBar: React.FC<IChatItem> = (props) => {
   const { from, to, chat } = props;
-  if (chat?.msg_type == 'text') {
+
-    return <ChatText from={from} to={to} chat={chat}></ChatText>;
+  const chatContent = () => {
-  } else if (chat?.msg_type == 'file') {
+    if (chat?.msg_type == 'text') {
-    return <ChatFile from={from} to={to} chat={chat}></ChatFile>;
+      return <ChatText from={from} to={to} chat={chat}></ChatText>;
-  } else if (chat?.msg_type == 'emotion') {
+    } else if (chat?.msg_type == 'file') {
-    return <ChatEmotion from={from} to={to} chat={chat}></ChatEmotion>;
+      return <ChatFile from={from} to={to} chat={chat}></ChatFile>;
-  } else if (chat?.msg_type == 'card') {
+    } else if (chat?.msg_type == 'emotion') {
-    return <ChatCard from={from} to={to} chat={chat}></ChatCard>;
+      return <ChatEmotion from={from} to={to} chat={chat}></ChatEmotion>;
-  } else if (chat?.msg_type == 'external_redpacket') {
+    } else if (chat?.msg_type == 'card') {
-    return <ChatRedpacket from={from} to={to} chat={chat}></ChatRedpacket>;
+      return <ChatCard from={from} to={to} chat={chat}></ChatCard>;
-  } else if (chat?.msg_type == 'image') {
+    } else if (chat?.msg_type == 'external_redpacket' || chat?.msg_type == 'redpacket') {
-    return <ChatImage from={from} to={to} chat={chat}></ChatImage>;
+      return <ChatRedpacket from={from} to={to} chat={chat}></ChatRedpacket>;
-  } else if (chat?.msg_type == 'link') {
+    } else if (chat?.msg_type == 'image') {
-    return <ChatLink from={from} to={to} chat={chat}></ChatLink>;
+      return <ChatImage from={from} to={to} chat={chat}></ChatImage>;
-  } else if (chat?.msg_type == 'location') {
+    } else if (chat?.msg_type == 'link') {
-    return <ChatLocation from={from} to={to} chat={chat}></ChatLocation>;
+      return <ChatLink from={from} to={to} chat={chat}></ChatLink>;
-  } else if (chat?.msg_type == 'video') {
+    } else if (chat?.msg_type == 'location') {
-    return <ChatVideo from={from} to={to} chat={chat}></ChatVideo>;
+      return <ChatLocation from={from} to={to} chat={chat}></ChatLocation>;
-  } else if (chat?.msg_type == 'voice') {
+    } else if (chat?.msg_type == 'video') {
-    return <ChatVoice from={from} to={to} chat={chat}></ChatVoice>;
+      return <ChatVideo from={from} to={to} chat={chat}></ChatVideo>;
-  } else if (chat?.msg_type == 'chatrecord') {
+    } else if (chat?.msg_type == 'voice') {
-    return <ChatRecord from={from} to={to} chat={chat}></ChatRecord>;
+      return <ChatVoice from={from} to={to} chat={chat}></ChatVoice>;
-  } else if (chat?.msg_type == 'meeting_voice_call') {
+    } else if (chat?.msg_type == 'chatrecord') {
-    return <ChatMeetingVoiceCall from={from} to={to} chat={chat}></ChatMeetingVoiceCall>;
+      return <ChatRecord from={from} to={to} chat={chat}></ChatRecord>;
-  } else if (chat?.msg_type == 'voiptext') {
+    } else if (chat?.msg_type == 'meeting_voice_call') {
-    return <ChatVoiptext from={from} to={to} chat={chat}></ChatVoiptext>;
+      return <ChatMeetingVoiceCall from={from} to={to} chat={chat}></ChatMeetingVoiceCall>;
-  } else if (chat?.msg_type == 'weapp') {
+    } else if (chat?.msg_type == 'voiptext') {
-    return <ChatWeapp from={from} to={to} chat={chat}></ChatWeapp>;
+      return <ChatVoiptext from={from} to={to} chat={chat}></ChatVoiptext>;
-  } else if (chat?.msg_type == 'revoke') {
+    } else if (chat?.msg_type == 'weapp') {
+      return <ChatWeapp from={from} to={to} chat={chat}></ChatWeapp>;
+    } else if (chat?.msg_type == 'todo') {
+      return <ChatTodo from={from} to={to} chat={chat}></ChatTodo>;
+    } else if (chat?.msg_type == 'vote') {
+      return <ChatVote from={from} to={to} chat={chat}></ChatVote>;
+    } else if (chat?.msg_type == 'collect') {
+      return <ChatCollect from={from} to={to} chat={chat}></ChatCollect>;
+    } else if (chat?.msg_type == 'docmsg') {
+      return <ChatDocmsg from={from} to={to} chat={chat}></ChatDocmsg>;
+    } else {
+      return <>未解析的数据类型</>;
+    }
+  };
+
+  if (chat?.msg_type == 'revoke') {
     return <ChatRevoke></ChatRevoke>;
   } else if (chat?.msg_type == 'agree' || chat?.msg_type == 'disagree') {
     return <ChatAgreeOrNot msg_type={chat?.msg_type}></ChatAgreeOrNot>;
+  } else {
+    return (
+      <>
+        {/* {props.chat?.seq} */}
+        {props.from?.user_id == props.chat?.msg_from ? (
+          <div className={styles.chatRight}>
+            <div className={styles.chatContentBox}>
+              <div className={styles.name}>{props.from?.name}</div>
+              <div className={styles.content}>
+                {props.chat?.state == 0 ? (
+                  <div className={styles.revokeMsg}>已撤回的消息</div>
+                ) : null}
+                {chatContent()}
+              </div>
+            </div>
+            <div
+              className={styles.chatAvatar}
+              style={{ background: props.from?.avatar ? '#fff' : '' }}
+            >
+              {props.from?.avatar ? (
+                <img src={props.from?.avatar} alt="" />
+              ) : props.from?.name ? (
+                props.from.name[0]
+              ) : (
+                ''
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className={styles.chatLeft}>
+            <div
+              className={styles.chatAvatar}
+              style={{ background: props.from?.avatar ? '#fff' : '' }}
+            >
+              {props.to?.avatar ? (
+                <img src={props.to?.avatar} alt="" />
+              ) : props.to?.name ? (
+                props.to.name[0]
+              ) : (
+                ''
+              )}
+            </div>
+            <div className={styles.chatContentBox}>
+              <div className={styles.name}>{props.to?.name}</div>
+              <div className={styles.content}>
+                {props.chat?.state == 0 ? (
+                  <div className={styles.revokeMsg}>
+                    <span>已撤回的消息</span>
+                  </div>
+                ) : null}
+                {chatContent()}
+              </div>
+            </div>
+          </div>
+        )}
+      </>
+    );
   }
-  return <div></div>;
 };

src/pages/ChatLogs/components/ChatCard.tsx

@@ -1,5 +1,4 @@
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 export const ChatCard: React.FC<IChatItem> = (props) => {
   function content() {
     // <div style={{ display: 'flex' }}>
@@ -19,7 +18,9 @@ export const ChatCard: React.FC<IChatItem> = (props) => {
       return (
         <div style={{ display: 'flex', color: '#000', flexDirection: 'column', width: 200 }}>
           <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>{msg.corpname}</div>
-          <div style={{ color: '#999', borderTop: '1px solid #ddd' }}>名片</div>
+          <div style={{ color: '#999', borderTop: '1px solid #ddd', marginTop: 8, paddingTop: 8 }}>
+            名片
+          </div>
         </div>
       );
     } catch (_e) {
@@ -31,27 +32,5 @@ export const ChatCard: React.FC<IChatItem> = (props) => {
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/ChatCollect.tsx

@@ -0,0 +1,38 @@
+import { IChatItem } from '../ChatLogsType';
+
+export const ChatCollect: React.FC<IChatItem> = (props) => {
+  function content() {
+    try {
+      const msg = JSON.parse(props.chat?.collect as string);
+      return (
+        <div>
+          <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
+            <div style={{ wordBreak: 'break-all' }}>群名：{msg.room_name}</div>
+            <div style={{ wordBreak: 'break-all' }}>创建者：{msg.creator}</div>
+            <div style={{ wordBreak: 'break-all' }}>表名：{msg.title}</div>
+            <div
+              style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}
+            >
+              填表
+            </div>
+          </div>
+        </div>
+      );
+    } catch (_e) {
+      return (
+        <div>
+          <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
+            <div style={{ wordBreak: 'break-all' }}>{props.chat?.collect}</div>
+            <div
+              style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}
+            >
+              填表
+            </div>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  return <>{content()}</>;
+};

src/pages/ChatLogs/components/ChatDocmsg.tsx

@@ -0,0 +1,38 @@
+import { IChatItem } from '../ChatLogsType';
+
+export const ChatDocmsg: React.FC<IChatItem> = (props) => {
+  function content() {
+    try {
+      const msg = JSON.parse(props.chat?.doc as string);
+      return (
+        <a href={msg.link_url} target="_blank">
+          <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
+            <div style={{ wordBreak: 'break-all' }}>标题：{msg.title}</div>
+            <div style={{ wordBreak: 'break-all' }}>链接：{msg.link_url}</div>
+            <div style={{ wordBreak: 'break-all' }}>创建者：{msg.doc_creator}</div>
+            <div
+              style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}
+            >
+              在线文档
+            </div>
+          </div>
+        </a>
+      );
+    } catch (_e) {
+      return (
+        <div>
+          <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
+            <div style={{ wordBreak: 'break-all' }}>{props.chat?.doc}</div>
+            <div
+              style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}
+            >
+              在线文档
+            </div>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  return <>{content()}</>;
+};

src/pages/ChatLogs/components/ChatEmotion.tsx

@@ -39,27 +39,5 @@ export const ChatEmotion: React.FC<IChatItem> = (props) => {
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/ChatFile.tsx

@@ -1,6 +1,5 @@
 import { FileTextFilled } from '@ant-design/icons';
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatFile: React.FC<IChatItem> = (props) => {
   function content() {
@@ -12,41 +11,19 @@ export const ChatFile: React.FC<IChatItem> = (props) => {
           download={msg.file_name}
           href={`/api/${msg.path}`}
         >
-          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>{msg.file_name}</div>
           <FileTextFilled style={{ fontSize: 40, color: '#FA9D3B', flexShrink: 0 }} />
+          <div style={{ wordBreak: 'break-all', paddingLeft: 12 }}>{msg.file_name}</div>
         </a>
       );
     } catch (_e) {
       return (
         <div>
-          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>{props.chat?.content}</div>
           <FileTextFilled style={{ fontSize: 40, color: '#FA9D3B', flexShrink: 0 }} />
+          <div style={{ wordBreak: 'break-all', paddingLeft: 12 }}>{props.chat?.content}</div>
         </div>
       );
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/ChatImage.tsx

@@ -42,27 +42,5 @@ export const ChatImage: React.FC<IChatItem> = (props) => {
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/ChatLink.tsx

@@ -1,6 +1,5 @@
 import { IeSquareFilled } from '@ant-design/icons';
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatLink: React.FC<IChatItem> = (props) => {
   function content() {
@@ -31,27 +30,5 @@ export const ChatLink: React.FC<IChatItem> = (props) => {
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/ChatLocation.tsx

@@ -1,6 +1,5 @@
 import { EnvironmentFilled } from '@ant-design/icons';
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatLocation: React.FC<IChatItem> = (props) => {
   function content() {
@@ -8,49 +7,23 @@ export const ChatLocation: React.FC<IChatItem> = (props) => {
       const msg = JSON.parse(props.chat?.content as string);
 
       return (
-        <a
+        <div style={{ display: 'flex', color: '#000' }}>
-          style={{ display: 'flex', color: '#000' }}
+          <EnvironmentFilled style={{ fontSize: 40, color: '#FA9D3B', flexShrink: 0 }} />
-          download={msg.file_name}
+          <div style={{ wordBreak: 'break-all', paddingLeft: 12 }}>
-          href={`/api/${msg.path}`}
-        >
-          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>
             <div>{msg.title}</div>
             <div>{msg.address}</div>
           </div>
-          <EnvironmentFilled style={{ fontSize: 40, color: '#FA9D3B', flexShrink: 0 }} />
+        </div>
-        </a>
       );
     } catch (_e) {
       return (
         <div>
-          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>{props.chat?.content}</div>
           <EnvironmentFilled style={{ fontSize: 40, color: '#FA9D3B', flexShrink: 0 }} />
+          <div style={{ wordBreak: 'break-all', paddingLeft: 12 }}>{props.chat?.content}</div>
         </div>
       );
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/ChatMeetingVoiceCall.tsx

@@ -1,50 +1,29 @@
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatMeetingVoiceCall: React.FC<IChatItem> = (props) => {
   function content() {
     try {
       const msg = JSON.parse(props.chat?.content as string);
-      // todo console.log(msg);
       return (
-        <a
+        <audio
-          style={{ display: 'flex', color: '#000' }}
+          controls
-          download={msg.file_name}
+          src={`/api/${msg.path}`}
-          href={`/api/${msg.path}`}
+          onPlay={(e) => {
-        >
+            const audios = document.querySelectorAll('audio');
-          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>// TODO 音频存档</div>
+            if (audios) {
-        </a>
+              audios.forEach((el) => {
-      );
+                if (el != e.target) {
-    } catch (_e) {
+                  el.pause();
-      return (
+                }
-        <div>
+              });
-          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>{props.chat?.content}</div>
+            }
-        </div>
+          }}
+        ></audio>
       );
+    } catch (e) {
+      return <div style={{ wordBreak: 'break-all' }}>{props.chat?.content}</div>;
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/ChatRecord.tsx

@@ -1,17 +1,26 @@
 import { Modal } from 'antd';
 import { useEffect, useState } from 'react';
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatRecord: React.FC<IChatItem> = (props) => {
   const [visible, setVisible] = useState(false);
 
-  function chatRecordContent(data: any) {
+  function chatRecordContent(data: any, type: string) {
-    // todo console.log(msg);
-
     if (data.type == 'ChatRecordText') {
       const content = JSON.parse(data.content);
-      return <div>{content.content}</div>;
+      return (
+        <div
+          style={{
+            maxWidth: type == 'ellipsis' ? 400 : 'inherit',
+            whiteSpace: type == 'ellipsis' ? 'nowrap' : 'normal',
+            minWidth: '0',
+            overflow: type == 'ellipsis' ? 'hidden' : '',
+            textOverflow: type == 'ellipsis' ? 'ellipsis' : 'inherit',
+          }}
+        >
+          {content.content}
+        </div>
+      );
     } else if (data.type == 'ChatRecordImage') {
       return <div>[图片]</div>;
     } else if (data.type == 'ChatRecordFile') {
@@ -40,8 +49,7 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
   function content() {
     try {
       const msg = JSON.parse(props.chat?.content as string);
-      // setRecord(msg);
+      // console.log(msg);
-      console.log(msg);
       return (
         <div
           style={{
@@ -57,13 +65,13 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
         >
           <div style={{ wordBreak: 'break-all', fontSize: 16 }}>{msg.title}</div>
           {msg.item[0] ? (
-            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[0])}</div>
+            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[0], 'ellipsis')}</div>
           ) : null}
           {msg.item[1] ? (
-            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[1])}</div>
+            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[1], 'ellipsis')}</div>
           ) : null}
           {msg.item[2] ? (
-            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[2])}</div>
+            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[2], 'ellipsis')}</div>
           ) : null}
           <div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
             聊天记录
@@ -93,13 +101,12 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
           {record ? (
             <div>
               {record.item.map((item: any) => {
-                console.log(item);
                 return (
                   <div
                     style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}
                     key={`${item.msgtime}_${item.type}_${item.content}`}
                   >
-                    {chatRecordContent(item)}
+                    {chatRecordContent(item, 'no_ellipsis')}
                   </div>
                 );
               })}
@@ -107,25 +114,7 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
           ) : null}
         </div>
       </Modal>
-      {props.from?.user_id == props.chat?.msg_from ? (
+      {content()}
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
     </>
   );
 };

src/pages/ChatLogs/components/ChatRedpacket.tsx

@@ -1,8 +1,12 @@
 import { RedEnvelopeFilled } from '@ant-design/icons';
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatRedpacket: React.FC<IChatItem> = (props) => {
+  const type: any = {
+    1: '普通红包',
+    2: '拼手气群红包',
+    3: '激励群红包',
+  };
   function content() {
     try {
       const msg = JSON.parse(props.chat?.content as string);
@@ -19,7 +23,9 @@ export const ChatRedpacket: React.FC<IChatItem> = (props) => {
               </div>
             </div>
           </div>
-          <div style={{ borderTop: '1px solid #ddd', marginTop: 12 }}>红包</div>
+          <div style={{ borderTop: '1px solid #ddd', marginTop: 8, paddingTop: 8, color: '#999' }}>
+            {type[msg.type]}
+          </div>
         </div>
       );
     } catch (_e) {
@@ -31,33 +37,13 @@ export const ChatRedpacket: React.FC<IChatItem> = (props) => {
             />
             <div style={{ wordBreak: 'break-all' }}>{props.chat?.content}</div>
           </div>
-          <div style={{ borderTop: '1px solid #ddd', marginTop: 12 }}>红包</div>
+          <div style={{ borderTop: '1px solid #ddd', marginTop: 8, paddingTop: 8, color: '#999' }}>
+            红包
+          </div>
         </div>
       );
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/ChatText.tsx

@@ -1,28 +1,5 @@
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatText: React.FC<IChatItem> = (props) => {
-  return (
+  return <>{props.chat?.content}</>;
-    <div>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{props.chat?.content}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{props.chat?.content}</div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
 };

src/pages/ChatLogs/components/ChatTime.tsx

@@ -66,7 +66,7 @@ export const ChatTime: React.FC<IChatTimeProps> = (props) => {
           padding: '0 8px',
           borderRadius: 4,
           lineHeight: 1,
-          height: 26,
+          height: 24,
           display: 'inline-flex',
           justifyContent: 'center',
           alignItems: 'center',

src/pages/ChatLogs/components/ChatTodo.tsx

@@ -0,0 +1,17 @@
+import { IChatItem } from '../ChatLogsType';
+
+export const ChatTodo: React.FC<IChatItem> = (props) => {
+  function content() {
+    return (
+      <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
+        <div style={{ wordBreak: 'break-all' }}>{props.chat?.title}</div>
+        <div style={{ wordBreak: 'break-all' }}>{props.chat?.content}</div>
+        <div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
+          待办
+        </div>
+      </div>
+    );
+  }
+
+  return <>{content()}</>;
+};

src/pages/ChatLogs/components/ChatVideo.tsx

@@ -29,6 +29,12 @@ export const ChatVideo: React.FC<IChatItem> = (props) => {
             className={styles.video}
             onClick={() => {
               setOpen(true);
+              const audios = document.querySelectorAll('audio');
+              if (audios) {
+                audios.forEach((el) => {
+                  el.pause();
+                });
+              }
               setTimeout(() => {
                 videoRef.current.play().catch((error) => {
                   console.log(error);
@@ -89,27 +95,5 @@ export const ChatVideo: React.FC<IChatItem> = (props) => {
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/ChatVoice.tsx

@@ -1,11 +1,18 @@
 import { FileTextFilled } from '@ant-design/icons';
 import { useRef, useState } from 'react';
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatVoice: React.FC<IChatItem> = (props) => {
   const [open, setOpen] = useState(false);
   const audioRef = useRef<any>();
+  function readBlob(blob: Blob, callback: Function) {
+    const reader = new FileReader();
+    reader.onload = function (e) {
+      const data = new Uint8Array(e.target.result);
+      callback(data);
+    };
+    reader.readAsArrayBuffer(blob);
+  }
 
   function content() {
     try {
@@ -19,7 +26,7 @@ export const ChatVoice: React.FC<IChatItem> = (props) => {
               color: '#000',
               justifyContent: 'flex-end',
               alignItems: 'center',
-              marginBottom: 4,
+              cursor: 'pointer',
             }}
             onClick={() => {
               const audios = document.querySelectorAll('audio');
@@ -28,10 +35,28 @@ export const ChatVoice: React.FC<IChatItem> = (props) => {
                   el.pause();
                 });
               }
-              audioRef.current.play().catch((error: any) => {
+              if (!open) {
-                console.log(error);
+                fetch(`/api/${msg.path}`)
-              });
+                  .then((response) => response.blob())
-              setOpen(true);
+                  .then((res) => {
+                    let blob = new Blob([res]);
+                    readBlob(blob, function (data: any) {
+                      if (window.AMR) {
+                        var buffer = window.AMR.toWAV(data);
+                        var url = URL.createObjectURL(new Blob([buffer], { type: 'audio/x-wav' }));
+                        audioRef.current.src = url;
+                        audioRef.current.play().catch((err: any) => {
+                          console.log(err);
+                        });
+                      }
+                    });
+                  });
+                setOpen(true);
+              } else {
+                audioRef.current.play().catch((err: any) => {
+                  console.log(err);
+                });
+              }
             }}
           >
             <span style={{ lineHeight: 1, marginRight: 4, minWidth: 100, textAlign: 'right' }}>
@@ -45,10 +70,9 @@ export const ChatVoice: React.FC<IChatItem> = (props) => {
             </svg>
           </div>
           <audio
-            ref={audioRef}
-            src={`/api/${msg.path}`}
-            style={{ display: `${open ? 'block' : 'none'}` }}
             controls
+            style={{ display: open ? 'block' : 'none', marginTop: 8 }}
+            ref={audioRef}
           ></audio>
         </div>
       );
@@ -62,27 +86,5 @@ export const ChatVoice: React.FC<IChatItem> = (props) => {
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/ChatVoiptext.tsx

@@ -1,18 +1,25 @@
 import { durationFormat } from '@/services/utils';
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatVoiptext: React.FC<IChatItem> = (props) => {
+  const invitetype: any = {
+    '1': '单人视频通话',
+    '2': '单人语音通话',
+    '3': '多人视频通话',
+    '4': '多人语音通话',
+  };
+
   function content() {
     try {
-      // todo ///
       const msg = JSON.parse(props.chat?.content as string);
-      // console.log(msg);
       return (
-        <div style={{ display: 'flex', color: '#000' }}>
+        <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
           <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>
             音视频通话 {durationFormat(msg.callduration)}
           </div>
+          <div style={{ borderTop: '1px solid #ddd', marginTop: 8, paddingTop: 8, color: '#999' }}>
+            {invitetype[msg.invitetype]}
+          </div>
         </div>
       );
     } catch (_e) {
@@ -24,27 +31,5 @@ export const ChatVoiptext: React.FC<IChatItem> = (props) => {
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/ChatVote.tsx

@@ -0,0 +1,19 @@
+import { IChatItem } from '../ChatLogsType';
+
+export const ChatVote: React.FC<IChatItem> = (props) => {
+  const votetype: any = { 101: '发起投票', 102: '参与投票' };
+
+  function content() {
+    return (
+      <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
+        <div style={{ wordBreak: 'break-all' }}>{props.chat?.votetitle}</div>
+        <div style={{ wordBreak: 'break-all' }}>{props.chat?.voteitem}</div>
+        <div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
+          投票 [{votetype[props.chat?.votetype as string]}]
+        </div>
+      </div>
+    );
+  }
+
+  return <>{content()}</>;
+};

src/pages/ChatLogs/components/ChatWeapp.tsx

@@ -1,54 +1,33 @@
-import { FileTextFilled } from '@ant-design/icons';
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatWeapp: React.FC<IChatItem> = (props) => {
   function content() {
     try {
       const msg = JSON.parse(props.chat?.content as string);
-      console.log(msg);
+      // console.log(msg);
 
       return (
-        <a
+        <div style={{ display: 'flex', color: '#000' }}>
-          style={{ display: 'flex', color: '#000' }}
+          <svg viewBox="0 0 1024 1024" width="40" height="40">
-          download={msg.file_name}
+            <path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m256.717 460.186a151.962 151.962 0 0 1-87.347 65.74 83.251 83.251 0 0 1-24.474 4.096 29.082 29.082 0 0 1 0-58.163 15.667 15.667 0 0 0 6.451-1.229 91.443 91.443 0 0 0 55.91-40.96 75.264 75.264 0 0 0 11.06-39.628c0-45.978-42.496-83.866-94.31-83.866a105.267 105.267 0 0 0-51.2 13.414 81.92 81.92 0 0 0-43.725 70.452v244.224a138.445 138.445 0 0 1-72.704 120.422 159.642 159.642 0 0 1-79.77 20.48c-84.378 0-153.6-63.488-153.6-142.029a136.192 136.192 0 0 1 19.763-69.837 151.962 151.962 0 0 1 87.347-65.74 85.914 85.914 0 0 1 24.474-4.096 29.082 29.082 0 1 1 0 58.163 15.667 15.667 0 0 0-6.451 1.229 95.949 95.949 0 0 0-55.91 40.96 75.264 75.264 0 0 0-11.06 39.628c0 45.978 42.496 83.866 94.925 83.866a105.267 105.267 0 0 0 51.2-13.414 81.92 81.92 0 0 0 43.622-70.452V390.35a138.752 138.752 0 0 1 72.807-120.525 151.245 151.245 0 0 1 79.155-21.504c84.378 0 153.6 63.488 153.6 142.029a136.192 136.192 0 0 1-19.763 69.837z"></path>
-          href={`/api/${msg.path}`}
+          </svg>
-        >
+          <div style={{ wordBreak: 'break-all', paddingLeft: 12, minWidth: 100 }}>
-          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>{msg.file_name}</div>
+            <div>{msg.title}</div>
-          <FileTextFilled style={{ fontSize: 40, color: '#FA9D3B', flexShrink: 0 }} />
+            <div>{msg.description}</div>
-        </a>
+          </div>
+        </div>
       );
     } catch (_e) {
       return (
         <div>
-          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>{props.chat?.content}</div>
+          <svg viewBox="0 0 1024 1024" width="40" height="40">
-          <FileTextFilled style={{ fontSize: 40, color: '#FA9D3B', flexShrink: 0 }} />
+            <path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m256.717 460.186a151.962 151.962 0 0 1-87.347 65.74 83.251 83.251 0 0 1-24.474 4.096 29.082 29.082 0 0 1 0-58.163 15.667 15.667 0 0 0 6.451-1.229 91.443 91.443 0 0 0 55.91-40.96 75.264 75.264 0 0 0 11.06-39.628c0-45.978-42.496-83.866-94.31-83.866a105.267 105.267 0 0 0-51.2 13.414 81.92 81.92 0 0 0-43.725 70.452v244.224a138.445 138.445 0 0 1-72.704 120.422 159.642 159.642 0 0 1-79.77 20.48c-84.378 0-153.6-63.488-153.6-142.029a136.192 136.192 0 0 1 19.763-69.837 151.962 151.962 0 0 1 87.347-65.74 85.914 85.914 0 0 1 24.474-4.096 29.082 29.082 0 1 1 0 58.163 15.667 15.667 0 0 0-6.451 1.229 95.949 95.949 0 0 0-55.91 40.96 75.264 75.264 0 0 0-11.06 39.628c0 45.978 42.496 83.866 94.925 83.866a105.267 105.267 0 0 0 51.2-13.414 81.92 81.92 0 0 0 43.622-70.452V390.35a138.752 138.752 0 0 1 72.807-120.525 151.245 151.245 0 0 1 79.155-21.504c84.378 0 153.6 63.488 153.6 142.029a136.192 136.192 0 0 1-19.763 69.837z"></path>
+          </svg>
+          <div style={{ wordBreak: 'break-all', paddingLeft: 12 }}>{props.chat?.content}</div>
         </div>
       );
     }
   }
 
-  return (
+  return <>{content()}</>;
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
 };

src/pages/ChatLogs/components/index.module.scss

@@ -12,21 +12,26 @@
 }
 
 .chatAvatar {
+  display: flex;
   flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
   width: 34px;
   height: 34px;
+  background-color: #69b1ff;
+  border-radius: 4px;
 
   img {
     max-width: 100%;
     max-height: 100%;
     object-fit: cover;
     background-color: #fff;
-    border-radius: 2px;
+    border-radius: 4px;
   }
 }
 
 .name {
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   color: #999;
 }
 
@@ -34,10 +39,12 @@
   position: relative;
   display: flex;
   justify-content: center;
+  min-height: 40px;
   padding: 12px;
   word-break: break-all;
   background-color: #fff;
   border-radius: 4px;
+  flex-direction: column;
 
   &::before {
     position: absolute;
@@ -58,7 +65,7 @@
 
 .chatRight {
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   margin-bottom: 12px;
 
   .name {
@@ -69,7 +76,7 @@
     display: inline-flex;
     flex-direction: column;
     flex-shrink: 0;
-    justify-content: end;
+    justify-content: flex-end;
     max-width: 60%;
     margin-right: 16px;
   }
@@ -112,7 +119,14 @@
 .imgPreview {
   & > div {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
   }
 }
+
+.revokeMsg{
+  background-color: #8c8c8c;
+  color: #fff;
+  border-radius: 4px;
+  padding: 0 12px;
+}

src/pages/ChatLogs/index.module.scss

@@ -41,7 +41,6 @@
   flex: 1;
   align-items: flex-start;
   min-width: 0;
-  height: 40px;
   padding-left: 12px;
 
   .chatAName {
@@ -63,16 +62,20 @@
   width: 40px;
   height: 40px;
   line-height: 1;
-  background-color: #fff;
+  background-color: #69b1ff;
   border-radius: 4px;
 }
 
-
 .chatBBox {
   height: calc(100vh - 212px - 164px);
   overflow: auto;
 }
 
+.state0 {
+  position: relative;
+  background: #eee;
+}
+
 .chatLogBox {
   height: calc(100vh - 212px - 66px);
   padding: 12px;
@@ -103,6 +106,7 @@
   opacity: 0;
   transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
   pointer-events: none;
+  box-shadow: 0 4px 6px #ccc;
 
   &.show {
     z-index: 1;
@@ -112,3 +116,21 @@
     pointer-events: all;
   }
 }
+
+.modalAvatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  margin-right: 12px;
+  overflow: hidden;
+  background-color: #69b1ff;
+  border-radius: 6px;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+  }
+}

src/pages/ChatLogs/index.tsx

@@ -1,31 +1,55 @@
 import { post } from '@/services/ajax';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { Form, Input, Tabs } from 'antd';
+import { Form, Input, Modal, Tabs } from 'antd';
 import Spin from 'antd/lib/spin';
 import { stringify } from 'qs';
 import React, { useEffect, useRef, useState } from 'react';
-import { IChat, ICustFollow, IStaffsItem } from './ChatLogsType';
+import { IChat, ICustFollow, IGroup, IGroupMembers, IStaffsItem } from './ChatLogsType';
 import { ChatBar } from './components/ChatBar';
 import { ChatTime } from './components/ChatTime';
 import styles from './index.module.scss';
-
+interface ISearchWord {
+  '0': string;
+  '1': string;
+  '2': string;
+}
 const ChatLogs: React.FC = () => {
   const [param] = useState({
     curr_page: 1,
     page_count: 20,
     msg_from: '',
     msg_to_list: '',
+    room_id: '',
   });
+  const [tabKey, setTabKey] = useState<string>('0');
   const tabKeyRef = useRef('0');
 
+  const [open, setOpen] = useState(false);
+  // 员工
+  const [staffsList, setStaffsList] = useState<IStaffsItem[]>([]);
   const [selectStaff, setSelectStaff] = useState<IStaffsItem>();
   const selectStaffRef = useRef<IStaffsItem>();
-  const [staffsList, setStaffsList] = useState<IStaffsItem[]>([]);
-  const [custFollowsList, setCustFollowsList] = useState<ICustFollow[]>([]);
 
-  const [selectCustFollow, setCustFollow] = useState<ICustFollow>();
+  // 内部联系人
+  const [innerStaffsList, setInnerStaffsList] = useState<IStaffsItem[]>([]);
+  const selectInnerStaffRef = useRef<IStaffsItem>();
+  const [selectInnerStaff, setSelectInnerStaff] = useState<IStaffsItem>();
+
+  // 外部联系人
+  const [custFollowsList, setCustFollowsList] = useState<ICustFollow[]>([]);
+  const [selectCustFollow, setSelectCustFollow] = useState<ICustFollow>();
   const selectCustFollowRef = useRef<ICustFollow>();
+
+  // 群聊
+  const [groupList, setGroupList] = useState<IGroup[]>([]);
+  const selectGroupRef = useRef<IGroup>();
+  const [selectGroup, setSelectGroup] = useState<IGroup>();
+
+  // 群成员
+  const [groupMembersList, setGroupMembersList] = useState<IGroupMembers[]>([]);
+  const groupMembersObjRef = useRef<any>({});
+
   const [chatLogs, setChatLogs] = useState<IChat[]>([]);
 
   const [tabs] = useState([
@@ -46,8 +70,21 @@ const ChatLogs: React.FC = () => {
     },
   ]);
 
+  const groupStatus = {
+    '0': '跟进人正常',
+    '1': '跟进人离职',
+    '2': '离职继承中',
+    '3': '离职继承完成',
+  };
+
+  const [searchWord, setSearchWord] = useState<ISearchWord>({
+    '0': '',
+    '1': '',
+    '2': '',
+  });
+
   const [flolowsBoxShow, setFlolowsBox] = useState(false);
-  const timeDiffRef = useRef('');
+
   const timeShowRef = useRef(false);
   const chatBoxRef = useRef<any>();
   const isAllChatRef = useRef(false);
@@ -75,9 +112,15 @@ const ChatLogs: React.FC = () => {
     getStaffsList();
 
     observer.observe(chatBoxRef.current, { childList: true });
+    const myScript = document.createElement('script');
+    myScript.src = '/public/scripts/amrnb.js';
+    myScript.async = false;
+    document.body.appendChild(myScript);
+
     return () => {
       document.removeEventListener('click', show, false);
       observer.disconnect();
+      document.body.removeChild(myScript);
     };
   }, []);
 
@@ -95,7 +138,9 @@ const ChatLogs: React.FC = () => {
             }
           });
           setStaffsList(res.data);
+          setInnerStaffsList(res.data);
           getCustFollowsList();
+          getGroupList();
         }
       }
     });
@@ -104,8 +149,14 @@ const ChatLogs: React.FC = () => {
   const page = (curr: number) => {
     param.curr_page = curr;
     param.msg_from = selectStaffRef.current?.user_id + '';
-    param.msg_to_list = selectCustFollowRef.current?.cust_id + '';
+    if (tabKey == '0') {
-    timeDiffRef.current = '';
+      param.msg_to_list = selectInnerStaffRef.current?.user_id + '';
+    } else if (tabKey == '1') {
+      param.msg_to_list = selectCustFollowRef.current?.cust_id + '';
+    } else {
+      param.room_id = selectGroupRef.current?.group_id + '';
+    }
+
     timeShowRef.current = false;
     getChatLogsList();
   };
@@ -114,20 +165,83 @@ const ChatLogs: React.FC = () => {
     chatLogLoadingRef.current = true;
     setChatLogLoading(true);
     post({
-      url: '/ChatLogs/List',
+      url: tabKey == '2' ? '/ChatLogs/GroupList' : '/ChatLogs/List',
       data: stringify(param),
     }).then((res) => {
       const count = res.count || 0;
       chatLogLoadingRef.current = false;
+
       setChatLogLoading(false);
       isAllChatRef.current = count < param.page_count * param.curr_page;
       if (res.err_code == 0) {
-        if (Array.isArray(res.data)) {
+        if (Array.isArray(res.data) && res.data.length) {
+          let arr: IChat[] = [];
+          const temp = res.data.reverse();
+          const mark = { curr_page: param.curr_page, msg_time: temp[temp.length - 1].msg_time };
           if (param.curr_page == 1) {
-            setChatLogs([...res.data.reverse(), { curr_page: param.curr_page }]);
+            arr = [...temp, mark];
           } else {
-            setChatLogs([...res.data.reverse(), { curr_page: param.curr_page }, ...chatLogs]);
+            arr = [...temp, mark, ...chatLogs];
           }
+          if (arr) {
+            let show_time = '';
+            arr.forEach((el, i) => {
+              el.show_time = false;
+              if (i == 0) {
+                el.show_time = true;
+              } else {
+                if (show_time == '') {
+                  show_time = el.msg_time;
+                } else {
+                  if (
+                    new Date(el.msg_time).getTime() - new Date(show_time).getTime() >
+                    5 * 60 * 1000
+                  ) {
+                    el.show_time = true;
+                    show_time = el.msg_time;
+                  }
+                }
+              }
+            });
+          }
+          setChatLogs(arr);
+        }
+      }
+    });
+  };
+
+  const getGroupList = () => {
+    post({
+      url: '/Groups/GroupsList',
+      data: stringify({ user_id: selectStaffRef.current?.user_id }),
+    }).then((res) => {
+      if (res.err_code == 0) {
+        if (Array.isArray(res.data)) {
+          setGroupList(res.data);
+          // if (res.data.length) {
+          // setCustFollow(res.data[0]);
+          // selectCustFollowRef.current = res.data[0];
+          // page(1);
+          // }
+        }
+      }
+    });
+  };
+
+  // 群成员
+  const getGroupMembersList = () => {
+    post({
+      url: '/GroupMembers/GroupMembersList',
+      data: stringify({ group_id: selectGroupRef.current?.group_id }),
+    }).then((res) => {
+      if (res.err_code == 0) {
+        if (Array.isArray(res.data)) {
+          setGroupMembersList(res.data);
+          groupMembersObjRef.current = {};
+          res.data.forEach((item: IGroupMembers) => {
+            groupMembersObjRef.current[item.user_id] = item;
+          });
+          page(1);
         }
       }
     });
@@ -141,17 +255,195 @@ const ChatLogs: React.FC = () => {
       if (res.err_code == 0) {
         if (Array.isArray(res.data)) {
           setCustFollowsList(res.data);
-          if (res.data.length) {
+          // if (res.data.length) {
-            setCustFollow(res.data[0]);
+          // setCustFollow(res.data[0]);
-            selectCustFollowRef.current = res.data[0];
+          // selectCustFollowRef.current = res.data[0];
-            page(1);
+          // page(1);
-          }
+          // }
         }
       }
     });
   };
 
   // const { notification } = App.useApp();
+  const tabContent = () => {
+    if (tabKey == '0') {
+      // 内部联系人
+      return (
+        <>
+          {innerStaffsList.length ? (
+            innerStaffsList.map((item) => {
+              if (item.user_id == selectStaff?.user_id) {
+                return null;
+              }
+              return (
+                <div
+                  key={`${item.user_id}_${item.name}`}
+                  className={`${styles.chatB} ${
+                    selectInnerStaff?.user_id == item.user_id ? styles.active : ''
+                  }`}
+                  onClick={() => {
+                    tabKeyRef.current = tabKey;
+
+                    setSelectCustFollow(undefined);
+                    selectCustFollowRef.current = undefined;
+                    setSelectGroup(undefined);
+                    selectGroupRef.current = undefined;
+
+                    setSelectInnerStaff(item);
+                    selectInnerStaffRef.current = item;
+                    page(1);
+                  }}
+                  style={{ display: item.name.includes(searchWord['0']) ? '' : 'none' }}
+                >
+                  <div className={styles.avatar}>{item.name[0]}</div>
+                  <div className={styles.chatAMsg}>
+                    <div className={styles.chatAName} title={item.name}>
+                      {item.name}
+                    </div>
+                  </div>
+                </div>
+              );
+            })
+          ) : (
+            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
+              暂无内部联系人
+            </div>
+          )}
+        </>
+      );
+    } else if (tabKey == '1') {
+      return (
+        <>
+          {custFollowsList.length ? (
+            custFollowsList.map((item) => {
+              return (
+                <div
+                  key={item.cust_id}
+                  className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
+                    selectCustFollow?.cust_id == item.cust_id ? styles.active : ''
+                  }`}
+                  onClick={() => {
+                    tabKeyRef.current = tabKey;
+
+                    setSelectInnerStaff(undefined);
+                    selectInnerStaffRef.current = undefined;
+                    setSelectGroup(undefined);
+                    selectGroupRef.current = undefined;
+
+                    setSelectCustFollow(item);
+                    selectCustFollowRef.current = item;
+                    page(1);
+                  }}
+                  style={{ display: item.name.includes(searchWord['1']) ? '' : 'none' }}
+                >
+                  <div className={styles.avatar} style={{ background: item?.avatar ? '#fff' : '' }}>
+                    <img
+                      src={item.avatar}
+                      alt=""
+                      style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+                    />
+                  </div>
+                  <div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
+                    <div className={styles.chatAName} title={item.name}>
+                      {item.name}
+                    </div>
+                    <div>{item.remark}</div>
+                  </div>
+                </div>
+              );
+            })
+          ) : (
+            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
+              暂无外部联系人
+            </div>
+          )}
+        </>
+      );
+    } else {
+      return (
+        <>
+          {groupList.length ? (
+            groupList.map((item) => {
+              return (
+                <div
+                  key={item.group_id}
+                  className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
+                    selectGroup?.group_id == item.group_id ? styles.active : ''
+                  }`}
+                  onClick={() => {
+                    tabKeyRef.current = tabKey;
+                    setSelectCustFollow(undefined);
+                    selectCustFollowRef.current = undefined;
+                    setSelectInnerStaff(undefined);
+                    selectInnerStaffRef.current = undefined;
+                    setSelectGroup(item);
+                    selectGroupRef.current = item;
+                    getGroupMembersList();
+                  }}
+                  style={{ display: item.name.includes(searchWord['2']) ? '' : 'none' }}
+                >
+                  <div className={styles.avatar}>{item.name ? item.name[0] : '群'}</div>
+                  <div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
+                    <div className={styles.chatAName} title={item.name}>
+                      {item.name || '未定义群名'}
+                    </div>
+                    <div style={{ color: '#999' }}>{groupStatus[item.status]}</div>
+                  </div>
+                </div>
+              );
+            })
+          ) : (
+            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
+              暂无客户群聊
+            </div>
+          )}
+        </>
+      );
+    }
+  };
+
+  const formatTags = () => {
+    if (selectCustFollow?.tags) {
+      try {
+        const tags = JSON.parse(selectCustFollow?.tags);
+        if (Array.isArray(tags)) {
+          return (
+            <>
+              {tags.map((item) => {
+                return (
+                  <div key={`${item.group_name}_${item.tag_name}`}>
+                    {item.group_name}：{item.tag_name}
+                  </div>
+                );
+              })}
+            </>
+          );
+        }
+      } catch (e) {}
+    }
+    return <></>;
+  };
+
+  function adminList() {
+    if (selectGroupRef.current?.admin_list) {
+      try {
+        const msg = JSON.parse(selectGroupRef.current?.admin_list);
+        if (Array.isArray(msg) && msg.length) {
+          let arr: any = [];
+          msg.forEach((el) => {
+            arr.push(groupMembersObjRef.current[el.userid]?.name);
+          });
+
+          return <div>群管理者：{arr.join('，')}</div>;
+        }
+      } catch (e) {
+        return <></>;
+      }
+    }
+
+    return <></>;
+  }
 
   return (
     <PageContainer>
@@ -164,11 +456,21 @@ const ChatLogs: React.FC = () => {
                   key={item.user_id}
                   className={styles.chatB}
                   onClick={(e) => {
+                    setSelectCustFollow(undefined);
+                    selectCustFollowRef.current = undefined;
+                    setSelectInnerStaff(undefined);
+                    selectInnerStaffRef.current = undefined;
+                    setSelectGroup(undefined);
+                    selectGroupRef.current = undefined;
+                    isAllChatRef.current = false;
+                    setChatLogs([]);
                     setSelectStaff({ ...item });
                     selectStaffRef.current = { ...item };
                     setFlolowsBox(false);
                     getCustFollowsList();
+                    getGroupList();
                   }}
+                  style={{ background: selectStaff?.user_id == item.user_id ? '#e6f4ff' : '' }}
                 >
                   <div className={styles.avatar}>{item.name[0]}</div>
                   <div className={styles.chatAMsg}>
@@ -201,53 +503,186 @@ const ChatLogs: React.FC = () => {
           </div>
           <Form autoComplete="off">
             <Input
+              placeholder="搜索"
               style={{ margin: '0 12px', width: 'calc(100% - 24px)' }}
               autoComplete="off"
+              defaultValue={searchWord[tabKey]}
+              key={tabKey}
+              onChange={(e) => {
+                searchWord[tabKey] = e.target.value.trim();
+                setSearchWord({ ...searchWord });
+              }}
+              allowClear
             ></Input>
           </Form>
-          <Tabs items={tabs} size="small" style={{ padding: '0 12px' }} tabBarGutter={12}></Tabs>
+          <Tabs
-          <div className={styles.chatBBox}>
+            items={tabs}
-            {custFollowsList.map((item) => {
+            size="small"
-              return (
+            style={{ padding: '0 12px' }}
-                <div
+            tabBarGutter={12}
-                  key={item.cust_id}
+            onChange={(val) => {
-                  className={`${styles.chatB} ${
+              setTabKey(val);
-                    selectCustFollow?.cust_id == item.cust_id ? styles.active : ''
+            }}
-                  }`}
+          ></Tabs>
-                  onClick={() => {
+          <div className={styles.chatBBox}>{tabContent()}</div>
-                    setCustFollow(item);
-                    selectCustFollowRef.current = item;
-                    page(1);
-                  }}
-                >
-                  <div className={styles.avatar}>
-                    <img
-                      src={item.cust_info.avatar}
-                      alt=""
-                      style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
-                    />
-                  </div>
-                  <div className={styles.chatAMsg}>
-                    <div className={styles.chatAName} title={item.cust_info.name}>
-                      {item.cust_info.name}
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
         </div>
         <div style={{ flex: 1 }}>
           <div className={styles.logTop}>
-            <div>{selectCustFollowRef.current?.cust_info.name}</div>
+            <div
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                setOpen(true);
+              }}
+            >
+              {tabKeyRef.current == '0' ? (
+                <>{selectInnerStaffRef.current?.name}</>
+              ) : tabKeyRef.current == '1' ? (
+                <>{selectCustFollowRef.current?.name}</>
+              ) : (
+                <>{selectGroupRef.current ? selectGroupRef.current?.name || '未定义群名' : ''}</>
+              )}
+            </div>
+            <Modal
+              title={
+                tabKeyRef.current == '0' ? (
+                  <>{selectInnerStaffRef.current?.name} 详细信息</>
+                ) : tabKeyRef.current == '1' ? (
+                  <>{selectCustFollowRef.current?.name} 详细信息</>
+                ) : (
+                  <>{selectGroupRef.current?.name || '未定义群名'} 详细信息</>
+                )
+              }
+              open={open}
+              centered
+              onCancel={() => setOpen(false)}
+              footer={false}
+            >
+              {tabKeyRef.current == '0' ? (
+                <div>
+                  <div
+                    style={{
+                      display: 'flex',
+                      borderBottom: '1px solid #ddd',
+                      paddingBottom: 12,
+                      marginBottom: 12,
+                    }}
+                  >
+                    <div className={styles.modalAvatar}>{selectInnerStaff?.name[0]}</div>
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                      <div style={{ fontSize: 16 }}>{selectInnerStaff?.name}</div>
+                    </div>
+                  </div>
+                  <div>账号：{selectInnerStaff?.name}</div>
+                  <div>手机：{selectInnerStaff?.telephone}</div>
+                  <div>职务：{selectInnerStaff?.position}</div>
+                </div>
+              ) : tabKeyRef.current == '1' ? (
+                <div>
+                  <div
+                    style={{
+                      display: 'flex',
+                      borderBottom: '1px solid #ddd',
+                      paddingBottom: 12,
+                      marginBottom: 12,
+                    }}
+                  >
+                    <div className={styles.modalAvatar}>
+                      <img src={selectCustFollow?.avatar} alt="" />
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                      <div style={{ fontSize: 16 }}>
+                        <span style={{ marginRight: 8 }}>{selectCustFollow?.name}</span>
+                        {selectCustFollow?.gender == 1 ? (
+                          <svg viewBox="0 0 1024 1024" width="16" height="16">
+                            <path
+                              d="M828.875 765.657c-191.159-16.86-202.516-102.922-202.516-102.922v-85.997c111.656-43.063 145.76-207.699 145.76-207.699 0-65.457-32.153-67.281-32.153-67.281V195.093c7.486-177.753-100.33-136.61-102.25-136.61-1.791 0-60.466-46.774-60.466-46.774-41.751-31.8-134.499 11.262-134.499 11.262l-3.839 0.064c-104.937 2.751-132.387 78.479-132.387 78.479l1.92 196.437c-54.804 0-47.35 76.719-47.35 76.719 0 84.142 147.616 200.148 147.616 200.148 9.47 110.472-49.174 166.46-49.174 166.46s-100.266 3.711-213.84 37.432c-2.72 0.863-5.344 1.6-7.967 2.463C30.617 817.421 0 920.855 0 920.855v101.033l463.579 1.888 68.465-1.92h491.732V943.25c1.92-115.815-194.901-177.593-194.901-177.593z m-244.65 129.22l-71.25 128.675-69.616-128.676-16.124-64.05 30.68-136.354h111.656l29.178 136.354-14.525 64.05z"
+                              fill="#1890ff"
+                            ></path>
+                          </svg>
+                        ) : (
+                          <svg viewBox="0 0 1025 1024" width="16" height="16">
+                            <path
+                              d="M613.312 626.496v-11.2h151.296V318.08c0-124.736-113.152-225.856-252.608-225.856S259.392 193.344 259.392 318.08v297.216h151.36v11.072h-0.256L115.648 820.16v107.136H908.48v-105.92l-295.168-194.88z m7.68 186.752c-72.192 69.824-109.504-36.416-109.504-36.416s-37.312 106.24-109.568 36.416c0 0-31.744-20.544-35.136-158.208l144.704 121.728L656.192 655.04c-3.392 137.6-35.2 158.208-35.2 158.208z"
+                              fill="#1890ff"
+                            ></path>
+                          </svg>
+                        )}
+                      </div>
+                      <div style={{ color: '#666' }}>{selectCustFollow?.description}</div>
+                    </div>
+                  </div>
+                  <div>备注名称：{selectCustFollow?.remark}</div>
+                  {formatTags()}
+                </div>
+              ) : (
+                <div>
+                  <div>
+                    群创建者：{groupMembersObjRef.current[selectGroupRef.current?.owner]?.name}
+                  </div>
+                  <div>{adminList()}</div>
+                  <div>创建时间：{selectGroupRef.current?.create_time}</div>
+                  <div>群公告：{selectGroupRef.current?.notice}</div>
+                  <div style={{ fontWeight: 'bold', marginTop: 8, marginBottom: 8 }}>群成员:</div>
+                  {groupMembersList.map((item) => {
+                    return (
+                      <div
+                        key={item.user_id}
+                        style={{
+                          display: 'inline-flex',
+                          justifyContent: 'flex-start',
+                          alignItems: 'center',
+                          width: 64,
+                          flexDirection: 'column',
+                          verticalAlign: 'top',
+                          marginTop: 12,
+                        }}
+                      >
+                        <div className={styles.avatar}>
+                          {item.avatar ? (
+                            <img
+                              style={{
+                                maxWidth: '100%',
+                                maxHeight: '100%',
+                                objectFit: 'cover',
+                                borderRadius: 4,
+                              }}
+                              src={item.avatar}
+                              alt=""
+                            />
+                          ) : item.name ? (
+                            item.name[0]
+                          ) : (
+                            ''
+                          )}
+                        </div>
+                        <div
+                          style={{
+                            padding: '0 4px',
+                            whiteSpace: 'nowrap',
+                            minWidth: 0,
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                            width: 56,
+                            textAlign: 'center',
+                          }}
+                          title={item.name}
+                        >
+                          {item.name}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </Modal>
           </div>
           <Spin spinning={chatLogLoading} style={{ display: 'block' }}>
             <div
               className={styles.chatLogBox}
               ref={chatBoxRef}
-              onScroll={(e) => {
+              onScroll={(e: any) => {
                 if (
-                  e.target.scrollTop == 0 &&
+                  e.target?.scrollTop == 0 &&
                   !isAllChatRef.current &&
                   !chatLogLoadingRef.current
                 ) {
@@ -270,29 +705,18 @@ const ChatLogs: React.FC = () => {
                     ></div>
                   );
                 } else {
-                  // if (timeDiffRef.current == '') {
-                  //   timeDiffRef.current = item.msg_time;
-                  //   timeShowRef.current = false;
-                  // } else {
-                  //   if (
-                  //     new Date(item.msg_time).getTime() - new Date(timeDiffRef.current).getTime() >
-                  //     5 * 60 * 1000
-                  //   ) {
-                  //     timeDiffRef.current = item.msg_time;
-                  //     timeShowRef.current = true;
-                  //   } else {
-                  //     timeShowRef.current = false;
-                  //   }
-                  // }
-
-                  // if (i == 0) {
-                  //   timeShowRef.current = true;
-                  // }
-
                   return (
                     <div key={item.msg_id}>
-                      <ChatTime msgtime={item.msg_time}></ChatTime>
+                      {item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null}
-                      <ChatBar from={selectStaff} to={selectCustFollow} chat={item}></ChatBar>
+                      {tabKey == '2' ? (
+                        <ChatBar
+                          from={selectStaff}
+                          to={groupMembersObjRef.current[item.msg_from]}
+                          chat={item}
+                        ></ChatBar>
+                      ) : (
+                        <ChatBar from={selectStaff} to={selectCustFollow} chat={item}></ChatBar>
+                      )}
                     </div>
                   );
                 }

src/window.d.ts

@@ -4,5 +4,6 @@ import { NotificationInstance } from 'antd/es/notification/interface';
 declare global {
   interface Window {
     NotificationCF: NotificationInstance;
+    AMR: any;
   }
 }