chore: update prettier setting

src/routes/chat/ChannelChat/PinList.js

@@ -96,9 +96,7 @@ export default function PinList({ id }) {
       {noPins ? (
         <div className="none">
           <IconSurprise />
-          <div className="tip">
-            This channel doesn’t have any pinned message yet.
-          </div>
+          <div className="tip">This channel doesn’t have any pinned message yet.</div>
         </div>
       ) : (
         <ul className="list">
@@ -115,11 +113,7 @@ export default function PinList({ id }) {
                     <IconForward />
                   </button> */}
                   {canPin && (
-                    <button
-                      className="btn"
-                      data-mid={mid}
-                      onClick={handleUnpin}
-                    >
+                    <button className="btn" data-mid={mid} onClick={handleUnpin}>
                       <IconClose />
                     </button>
                   )}

src/routes/chat/ChannelChat/index.js

@@ -28,7 +28,7 @@ import {
   // StyledNotification,
   StyledContacts,
   StyledChannelChat,
-  StyledHeader,
+  StyledHeader
 } from "./styled";
 import InviteModal from "../../../common/component/InviteModal";
 import LoadMore from "../LoadMore";
@@ -36,9 +36,14 @@ import LoadMore from "../LoadMore";
 
 export default function ChannelChat({ cid = "", dropFiles = [] }) {
   const { values: agoraConfig } = useConfig("agora");
-  const { list: msgIds, appends, hasMore, pullUp } = useMessageFeed({
+  const {
+    list: msgIds,
+    appends,
+    hasMore,
+    pullUp
+  } = useMessageFeed({
     context: "channel",
-    id: cid,
+    id: cid
   });
   // const scrollObserveRef = useChatScroll([msgIds, appends]);
   const [toolVisible, setToolVisible] = useState("");
@@ -56,7 +61,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
     messageData,
     loginUid,
     loginUser,
-    footprint,
+    footprint
   } = useSelector((store) => {
     return {
       selects: store.ui.selectMessages[`channel_${cid}`],
@@ -66,7 +71,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
       // msgIds: store.channelMessage[cid] || [],
       userIds: store.contacts.ids,
       data: store.channels.byId[cid] || {},
-      messageData: store.message || {},
+      messageData: store.message || {}
     };
   });
   // const ref = useChatScroll(msgIds);
@@ -88,9 +93,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   };
   if (!data) return null;
   const { name, description, is_public, members = [], owner } = data;
-  const memberIds = is_public
-    ? userIds
-    : members.slice(0).sort((n) => (n == owner ? -1 : 0));
+  const memberIds = is_public ? userIds : members.slice(0).sort((n) => (n == owner ? -1 : 0));
   const addVisible = loginUser?.is_admin || owner == loginUid;
   console.log("channel message list", msgIds);
   const readIndex = footprint.readChannels[cid];
@@ -98,9 +101,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   const feeds = [...msgIds, ...appends];
   return (
     <>
-      {addMemberModalVisible && (
-        <InviteModal cid={cid} closeModal={toggleAddVisible} />
-      )}
+      {addMemberModalVisible && <InviteModal cid={cid} closeModal={toggleAddVisible} />}
       <Layout
         to={cid}
         context="channel"
@@ -116,11 +117,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   </Tooltip>
                 </li>
               )}
-              <Tooltip
-                tip="Pin"
-                placement="left"
-                disabled={toolVisible == "pin"}
-              >
+              <Tooltip tip="Pin" placement="left" disabled={toolVisible == "pin"}>
                 <Tippy
                   onShow={() => {
                     setToolVisible("pin");
@@ -145,11 +142,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   </li>
                 </Tippy>
               </Tooltip>
-              <Tooltip
-                tip="Favorite"
-                placement="left"
-                disabled={toolVisible == "favorite"}
-              >
+              <Tooltip tip="Favorite" placement="left" disabled={toolVisible == "favorite"}>
                 <Tippy
                   onShow={() => {
                     setToolVisible("favorite");
@@ -165,9 +158,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   content={<FavList cid={cid} />}
                 >
                   <li
-                    className={`tool fav ${
-                      toolVisible == "favorite" ? "active" : ""
-                    } `}
+                    className={`tool fav ${toolVisible == "favorite" ? "active" : ""} `}
                     data-count={pinCount}
                   >
                     <IconFav />
@@ -246,10 +237,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
             <div className="info">
               <h2 className="title">Welcome to #{name} !</h2>
               <p className="desc">This is the start of the #{name} channel. </p>
-              <NavLink
-                to={`/setting/channel/${cid}?f=${pathname}`}
-                className="edit"
-              >
+              <NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="edit">
                 <EditIcon className="icon" />
                 Edit Channel
               </NavLink>
@@ -270,7 +258,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
               prev,
               curr,
               contextId: cid,
-              context: "channel",
+              context: "channel"
             });
           })}
 

src/routes/chat/ChannelList/NavItem.js

@@ -29,7 +29,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
     visible: contextMenuVisible,
     offset,
     handleContextMenuEvent,
-    hideContextMenu,
+    hideContextMenu
   } = useContextMenu();
   const {
     channel,
@@ -37,7 +37,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
     messageData,
     readIndex,
     muted,
-    loginUid,
+    loginUid
     //  loginUser,
   } = useSelector((store) => {
     return {
@@ -47,7 +47,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
       messageData: store.message,
       loginUid: store.authData.uid,
       readIndex: store.footprint.readChannels[id],
-      muted: store.footprint.muteChannels[id],
+      muted: store.footprint.muteChannels[id]
     };
   });
   const handleChannelSetting = (evt) => {
@@ -72,8 +72,8 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
       }
     },
     collect: (monitor) => ({
-      isActive: monitor.canDrop() && monitor.isOver(),
-    }),
+      isActive: monitor.canDrop() && monitor.isOver()
+    })
   }));
   const handleReadAll = () => {
     const lastMid = mids[mids.length - 1];
@@ -91,9 +91,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
     setInviteModalVisible((prev) => !prev);
   };
   const handleMute = () => {
-    const data = muted
-      ? { remove_groups: [id] }
-      : { add_groups: [{ gid: id }] };
+    const data = muted ? { remove_groups: [id] } : { add_groups: [{ gid: id }] };
     muteChannel(data);
   };
   const { is_public, name, owner } = channel;
@@ -101,7 +99,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
     mids,
     messageData,
     readIndex,
-    loginUid,
+    loginUid
   });
   const isMentions = mentions.length !== 0;
   const inviteIconVisible = is_public || owner == loginUid;
@@ -122,11 +120,11 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
               {
                 title: "Mark As Read",
                 underline: true,
-                handler: handleReadAll,
+                handler: handleReadAll
               },
               {
                 title: muted ? "Unmute" : "Mute",
-                handler: handleMute,
+                handler: handleMute
               },
               // {
               //   title: "Notification Settings",
@@ -134,13 +132,13 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
               // },
               {
                 title: "Invite People",
-                handler: toggleInviteModalVisible,
+                handler: toggleInviteModalVisible
               },
               {
                 title: "Delete Channel",
                 danger: true,
-                handler: toggleRemoveConfirm.bind(null, id),
-              },
+                handler: toggleRemoveConfirm.bind(null, id)
+              }
             ]}
           />
         }
@@ -150,9 +148,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
           onContextMenu={handleContextMenuEvent}
           ref={drop}
           key={id}
-          className={`link ${isActive ? "drop_over" : ""} ${
-            muted ? "muted" : ""
-          }`}
+          className={`link ${isActive ? "drop_over" : ""} ${muted ? "muted" : ""}`}
           activeclassname="link_active"
           to={`/chat/channel/${id}`}
         >

src/routes/chat/DMChat/index.js

@@ -20,25 +20,28 @@ import LoadMore from "../LoadMore";
 import { renderMessageFragment } from "../utils";
 import useMessageFeed from "../../../common/hook/useMessageFeed";
 export default function DMChat({ uid = "", dropFiles = [] }) {
-  const { list: msgIds, appends, hasMore, pullUp } = useMessageFeed({
+  const {
+    list: msgIds,
+    appends,
+    hasMore,
+    pullUp
+  } = useMessageFeed({
     context: "user",
-    id: uid,
+    id: uid
   });
   const [updateReadIndex] = useReadMessageMutation();
   const updateReadDebounced = useDebounce(updateReadIndex, 300);
   console.log("dm files", dropFiles);
   // const [mids, setMids] = useState([]);
-  const { currUser, messageData, footprint, loginUid, selects } = useSelector(
-    (store) => {
-      return {
-        selects: store.ui.selectMessages[`user_${uid}`],
-        loginUid: store.authData.uid,
-        footprint: store.footprint,
-        currUser: store.contacts.byId[uid],
-        messageData: store.message,
-      };
-    }
-  );
+  const { currUser, messageData, footprint, loginUid, selects } = useSelector((store) => {
+    return {
+      selects: store.ui.selectMessages[`user_${uid}`],
+      loginUid: store.authData.uid,
+      footprint: store.footprint,
+      currUser: store.contacts.byId[uid],
+      messageData: store.message
+    };
+  });
   // const ref = useChatScroll(msgIds);
 
   if (!currUser) return null;
@@ -111,7 +114,7 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
             prev,
             curr,
             contextId: uid,
-            context: "user",
+            context: "user"
           });
         })}
       </StyledDMChat>

src/routes/chat/DMList/NavItem.js

@@ -18,25 +18,18 @@ import Contact from "../../../common/component/Contact";
 import { ContentTypes } from "../../../app/config";
 const NavItem = ({ uid, mid, unreads, setFiles }) => {
   const [previewMsg, setPreviewMsg] = useState(null);
-  const {
-    messages: normalizedMessages,
-    normalizeMessage,
-  } = useNormalizeMessage();
+  const { messages: normalizedMessages, normalizeMessage } = useNormalizeMessage();
   const dispatch = useDispatch();
   const pathMatched = useMatch(`/chat/dm/${uid}`);
   const [updateReadIndex] = useReadMessageMutation();
   const { currMsg, currUser } = useSelector((store) => {
     return {
       currUser: store.contacts.byId[uid],
-      currMsg: store.message[mid],
+      currMsg: store.message[mid]
     };
   });
   const navigate = useNavigate();
-  const {
-    visible: contextMenuVisible,
-    handleContextMenuEvent,
-    hideContextMenu,
-  } = useContextMenu();
+  const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
   const [{ isActive }, drop] = useDrop(() => ({
     accept: [NativeTypes.FILE],
     drop({ dataTransfer }) {
@@ -51,8 +44,8 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
       }
     },
     collect: (monitor) => ({
-      isActive: monitor.canDrop() && monitor.isOver(),
-    }),
+      isActive: monitor.canDrop() && monitor.isOver()
+    })
   }));
   useEffect(() => {
     if (currMsg) {
@@ -96,13 +89,13 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
           items={[
             {
               title: "Mark As Read",
-              handler: handleReadAll,
+              handler: handleReadAll
             },
             {
               title: "Hide Session",
               danger: true,
-              handler: handleRemoveSession,
-            },
+              handler: handleRemoveSession
+            }
           ]}
         />
       }
@@ -118,9 +111,7 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
         <div className="details">
           <div className="up">
             <span className="name">{currUser.name}</span>
-            {previewMsg && (
-              <time>{dayjs(previewMsg.created_at).fromNow()}</time>
-            )}
+            {previewMsg && <time>{dayjs(previewMsg.created_at).fromNow()}</time>}
           </div>
 
           <div className="down">

src/routes/chat/DMList/index.js

@@ -5,17 +5,15 @@ import { getUnreadCount } from "../utils";
 
 import NavItem from "./NavItem";
 export default function DMList({ uids, setDropFiles }) {
-  const { userMessage, messageData, readUsers, loginUid } = useSelector(
-    (store) => {
-      return {
-        loginUid: store.authData.uid,
-        readUsers: store.footprint.readUsers,
-        contactData: store.contacts.byId,
-        userMessage: store.userMessage.byId,
-        messageData: store.message,
-      };
-    }
-  );
+  const { userMessage, messageData, readUsers, loginUid } = useSelector((store) => {
+    return {
+      loginUid: store.authData.uid,
+      readUsers: store.footprint.readUsers,
+      contactData: store.contacts.byId,
+      userMessage: store.userMessage.byId,
+      messageData: store.message
+    };
+  });
   const sessions = uids.map((uid) => {
     const mids = userMessage[uid] || [];
     if (mids.length == 0) {
@@ -27,7 +25,7 @@ export default function DMList({ uids, setDropFiles }) {
       mids,
       readIndex,
       messageData,
-      loginUid,
+      loginUid
     });
 
     return { lastMid, unreads, uid };
@@ -40,13 +38,7 @@ export default function DMList({ uids, setDropFiles }) {
     })
     .map(({ lastMid, uid, unreads }) => {
       return (
-        <NavItem
-          key={uid}
-          uid={uid}
-          mid={lastMid}
-          unreads={unreads}
-          setFiles={setDropFiles}
-        />
+        <NavItem key={uid} uid={uid} mid={lastMid} unreads={unreads} setFiles={setDropFiles} />
       );
     });
 }

src/routes/chat/FavList.js

@@ -97,9 +97,7 @@ export default function FavList({ cid = null, uid = null }) {
       {noFavs ? (
         <div className="none">
           <IconSurprise />
-          <div className="tip">
-            This channel doesn’t have any saved message yet.
-          </div>
+          <div className="tip">This channel doesn’t have any saved message yet.</div>
         </div>
       ) : (
         <ul className="list">

src/routes/chat/Layout/Operations.js

@@ -44,9 +44,7 @@ export default function Operations({ context, id }) {
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const { canDelete } = useDeleteMessage();
   const { addFavorite } = useFavMessage({});
-  const mids = useSelector(
-    (store) => store.ui.selectMessages[`${context}_${id}`]
-  );
+  const mids = useSelector((store) => store.ui.selectMessages[`${context}_${id}`]);
   const [forwardModalVisible, setForwardModalVisible] = useState(false);
   const dispatch = useDispatch();
   const handleClose = () => {
@@ -86,18 +84,12 @@ export default function Operations({ context, id }) {
         <button className="opt" onClick={handleFav}>
           <IconBookmark />
         </button>
-        <button
-          className="opt"
-          disabled={!canDel}
-          onClick={toggleDeleteModal.bind(null, false)}
-        >
+        <button className="opt" disabled={!canDel} onClick={toggleDeleteModal.bind(null, false)}>
           <IconDelete />
         </button>
         <IconClose className="close" onClick={handleClose} />
       </Styled>
-      {forwardModalVisible && (
-        <ForwardModal mids={mids} closeModal={toggleForwardModal} />
-      )}
+      {forwardModalVisible && <ForwardModal mids={mids} closeModal={toggleForwardModal} />}
       {deleteModalVisible && (
         <DeleteMessageConfirmModal mids={mids} closeModal={toggleDeleteModal} />
       )}

src/routes/chat/Layout/index.js

@@ -17,7 +17,7 @@ export default function Layout({
   contacts = null,
   dropFiles = [],
   context = "channel",
-  to = null,
+  to = null
 }) {
   const { addStageFile } = useUploadFile({ context, id: to });
   const messagesContainer = useRef(undefined);
@@ -26,7 +26,7 @@ export default function Layout({
     return {
       selects: store.ui.selectMessages[`${context}_${to}`],
       channelsData: store.channels.byId,
-      contactsData: store.contacts.byId,
+      contactsData: store.contacts.byId
     };
   });
   const [{ isActive }, drop] = useDrop(
@@ -44,8 +44,8 @@ export default function Layout({
         }
       },
       collect: (monitor) => ({
-        isActive: monitor.canDrop() && monitor.isOver(),
-      }),
+        isActive: monitor.canDrop() && monitor.isOver()
+      })
     }),
     [context, to]
   );
@@ -72,10 +72,7 @@ export default function Layout({
         (evt) => {
           console.log(evt);
           const { target } = evt;
-          if (
-            target.nodeName == "IMG" &&
-            target.classList.contains("preview")
-          ) {
+          if (target.nodeName == "IMG" && target.classList.contains("preview")) {
             const thumbnail = target.src;
             const originUrl = target.dataset.origin || target.src;
             const downloadLink = target.dataset.download || target.src;
@@ -87,13 +84,10 @@ export default function Layout({
       );
     }
   }, []);
-  const name =
-    context == "channel" ? channelsData[to]?.name : contactsData[to]?.name;
+  const name = context == "channel" ? channelsData[to]?.name : contactsData[to]?.name;
   return (
     <>
-      {previewImage && (
-        <ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />
-      )}
+      {previewImage && <ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />}
       <Styled ref={drop}>
         {header}
         <main className="main" ref={messagesContainer}>
@@ -107,21 +101,11 @@ export default function Layout({
           {contacts && <div className="members">{contacts}</div>}
           {aside && <div className="aside">{aside}</div>}
         </main>
-        <div
-          className={`drag_tip ${
-            isActive ? "visible animate__animated animate__fadeIn" : ""
-          }`}
-        >
-          <div
-            className={`box ${
-              isActive ? "animate__animated animate__bounceIn" : ""
-            }`}
-          >
+        <div className={`drag_tip ${isActive ? "visible animate__animated animate__fadeIn" : ""}`}>
+          <div className={`box ${isActive ? "animate__animated animate__bounceIn" : ""}`}>
             <div className="inner">
               <h4 className="head">{`Send to ${ChatPrefixs[context]}${name}`}</h4>
-              <span className="intro">
-                Photos accept jpg, png, max size limit to 10M.
-              </span>
+              <span className="intro">Photos accept jpg, png, max size limit to 10M.</span>
             </div>
           </div>
         </div>

src/routes/chat/LoadMore.js

@@ -40,13 +40,7 @@ export default function LoadMore({ pullUp = null }) {
   }, [ref, pullUp]);
   return (
     <Styled ref={ref}>
-      <Waveform
-        className="loading"
-        size={24}
-        lineWeight={5}
-        speed={1}
-        color="#ccc"
-      />
+      <Waveform className="loading" size={24} lineWeight={5} speed={1} color="#ccc" />
     </Styled>
   );
 }

src/routes/chat/index.js

@@ -24,7 +24,7 @@ export default function ChatPage() {
   const [userDropFiles, setUserDropFiles] = useState([]);
   const { sessionUids } = useSelector((store) => {
     return {
-      sessionUids: store.userMessage.ids,
+      sessionUids: store.userMessage.ids
     };
   });
   const [channelModalVisible, setChannelModalVisible] = useState(false);
@@ -41,8 +41,7 @@ export default function ChatPage() {
     const listEle = currentTarget.parentElement.parentElement;
     listEle.classList.toggle("collapse");
   };
-  const tmpUid =
-    sessionUids.findIndex((i) => i == user_id) > -1 ? null : user_id;
+  const tmpUid = sessionUids.findIndex((i) => i == user_id) > -1 ? null : user_id;
   // console.log("temp uid", tmpUid);
   const placeholderVisible = !channel_id && !user_id;
   return (
@@ -50,27 +49,18 @@ export default function ChatPage() {
       {channelModalVisible && (
         <ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
       )}
-      {contactsModalVisible && (
-        <ContactsModal closeModal={toggleContactsModalVisible} />
-      )}
+      {contactsModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
       <StyledWrapper>
         <div className="left">
           <Server />
           <div className="list channels">
             <h3 className="title">
               <span className="txt" onClick={handleToggleExpand}>
-                <AiOutlineCaretDown
-                  className="icon"
-                  size={18}
-                  color="#78787C"
-                />
+                <AiOutlineCaretDown className="icon" size={18} color="#78787C" />
                 CHANNELS
               </span>
               <Tooltip tip="New Channel" placement="bottom">
-                <AddIcon
-                  className="add_icon"
-                  onClick={toggleChannelModalVisible}
-                />
+                <AddIcon className="add_icon" onClick={toggleChannelModalVisible} />
               </Tooltip>
             </h3>
             <nav className="nav">
@@ -80,18 +70,11 @@ export default function ChatPage() {
           <div className="list dms">
             <h3 className="title">
               <span className="txt" onClick={handleToggleExpand}>
-                <AiOutlineCaretDown
-                  className="icon"
-                  size={18}
-                  color="#78787C"
-                />
+                <AiOutlineCaretDown className="icon" size={18} color="#78787C" />
                 DIRECT MESSAGE
               </span>
               <Tooltip tip="New DM" placement="bottom">
-                <AddIcon
-                  className="add_icon"
-                  onClick={toggleContactsModalVisible}
-                />
+                <AddIcon className="add_icon" onClick={toggleContactsModalVisible} />
               </Tooltip>
             </h3>
             <nav className="nav">
@@ -105,9 +88,7 @@ export default function ChatPage() {
         </div>
         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
           {placeholderVisible && <BlankPlaceholder />}
-          {channel_id && (
-            <ChannelChat cid={channel_id} dropFiles={channelDropFiles} />
-          )}
+          {channel_id && <ChannelChat cid={channel_id} dropFiles={channelDropFiles} />}
           {user_id && <DMChat uid={user_id} dropFiles={userDropFiles} />}
         </div>
       </StyledWrapper>

src/routes/chat/utils.js

@@ -20,12 +20,7 @@ import { updateSelectMessages } from "../../app/slices/ui";
 //     }
 //   };
 // }
-export function getUnreadCount({
-  mids = [],
-  messageData = {},
-  loginUid = 0,
-  readIndex = 0,
-}) {
+export function getUnreadCount({ mids = [], messageData = {}, loginUid = 0, readIndex = 0 }) {
   // console.log({ mids, loginUid, readIndex });
   // 先过滤掉空信息和from自己的
   const others = mids.filter((mid) => {
@@ -123,19 +118,10 @@ const StyledWrapper = styled.div`
     }
   }
 `;
-const MessageWrapper = ({
-  selectMode = false,
-  context,
-  id,
-  mid,
-  children,
-  ...rest
-}) => {
+const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...rest }) => {
   const dispatch = useDispatch();
 
-  const selects = useSelector(
-    (store) => store.ui.selectMessages[`${context}_${id}`]
-  );
+  const selects = useSelector((store) => store.ui.selectMessages[`${context}_${id}`]);
   const selected = !!(selects && selects.find((s) => s == mid));
   const toggleSelect = () => {
     const operation = selected ? "remove" : "add";
@@ -146,12 +132,7 @@ const MessageWrapper = ({
       <Checkbox className="check" checked={selected} />
       {/* {React.cloneElement(children, { readOnly: selected })} */}
       {children}
-      {selectMode && (
-        <div
-          className="overlay"
-          onClick={selectMode ? toggleSelect : null}
-        ></div>
-      )}
+      {selectMode && <div className="overlay" onClick={selectMode ? toggleSelect : null}></div>}
     </StyledWrapper>
   );
 };
@@ -163,7 +144,7 @@ export const renderMessageFragment = ({
   prev = null,
   curr = null,
   contextId = 0,
-  context = "user",
+  context = "user"
 }) => {
   if (!curr) return null;
   let { created_at, mid } = curr;