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}
+      <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,8 +145,6 @@ export const renderMessageFragment = ({
   }
   const _key = local_id || mid;
   return (
-    <React.Fragment key={_key}>
-      {divider && <Divider content={divider}></Divider>}
     <MessageWrapper
       key={_key}
       data-key={_key}
@@ -150,6 +152,7 @@ export const renderMessageFragment = ({
       id={contextId}
       mid={mid}
       selectMode={selectMode}
+      divider={divider ? <Divider className="w-full" content={divider}></Divider> : null}
     >
       <Message
         readOnly={selectMode || readonly}
@@ -161,7 +164,6 @@ export const renderMessageFragment = ({
         contextId={contextId}
       />
     </MessageWrapper>
-    </React.Fragment>
   );
 };