refactor: message wrapper

src/common/component/Divider.tsx

@@ -1,10 +1,12 @@
 import { FC } from "react";
+import clsx from "clsx";
 interface Props {
   content: string;
+  className?: string
 }
 
-const Divider: FC<Props> = ({ content }) => {
+const Divider: FC<Props> = ({ content, className = "" }) => {
-  return <div className="relative border-none h-[1px] bg-slate-200 dark:bg-gray-500 my-6 overflow-visible">
+  return <div className={clsx("relative border-none h-[1px] bg-slate-200 dark:bg-gray-500 my-6 overflow-visible", className)}>
     <span className="p-1 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-gray-500 dark:text-gray-300 font-semibold bg-white dark:bg-gray-700">{content}</span>
   </div>;
 };

src/routes/chat/utils.tsx

@@ -86,7 +86,7 @@ export const renderPreviewMessage = (message = null) => {
   return res;
 };
 
-const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...rest }) => {
+const MessageWrapper = ({ selectMode = false, context, id, mid, divider, children, ...rest }) => {
   const dispatch = useDispatch();
 
   const selects = useAppSelector((store) => store.ui.selectMessages[`${context}_${id}`]);
@@ -96,9 +96,13 @@ const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...res
     dispatch(updateSelectMessages({ context, id, operation, data: mid }));
   };
   return (
-    <div className={`flex items-start gap-2 relative w-full ${selectMode ? "hover:bg-slate-100 dark:hover:bg-slate-900" : ""}`} {...rest}>
+    <div className={`group flex flex-col items-start gap-2 relative w-full `} {...rest}>
-      {selectMode && <Checkbox className="!mt-4 !ml-2" checked={selected} />}
+      {divider}
-      {children}
+      <div className={`w-full flex items-center ${selectMode ? "group-hover:bg-slate-100 dark:group-hover:bg-slate-900" : ""}`}>
+
+        {selectMode && <Checkbox className="!ml-2" checked={selected} />}
+        {children}
+      </div>
       {selectMode && (
         <div className="absolute left-0 top-0 w-full h-full cursor-pointer" onClick={selectMode ? toggleSelect : undefined}></div>
       )}
@@ -141,27 +145,25 @@ export const renderMessageFragment = ({
   }
   const _key = local_id || mid;
   return (
-    <React.Fragment key={_key}>
+    <MessageWrapper
-      {divider && <Divider content={divider}></Divider>}
+      key={_key}
-      <MessageWrapper
+      data-key={_key}
-        key={_key}
+      context={context}
-        data-key={_key}
+      id={contextId}
+      mid={mid}
+      selectMode={selectMode}
+      divider={divider ? <Divider className="w-full" content={divider}></Divider> : null}
+    >
+      <Message
+        readOnly={selectMode || readonly}
+        updateReadIndex={updateReadIndex}
+        read={read}
         context={context}
-        id={contextId}
         mid={mid}
-        selectMode={selectMode}
+        key={_key}
-      >
+        contextId={contextId}
-        <Message
+      />
-          readOnly={selectMode || readonly}
+    </MessageWrapper>
-          updateReadIndex={updateReadIndex}
-          read={read}
-          context={context}
-          mid={mid}
-          key={_key}
-          contextId={contextId}
-        />
-      </MessageWrapper>
-    </React.Fragment>
   );
 };