feat: select multiple messages and forward

src/common/component/ForwardModal/index.js

@@ -16,7 +16,7 @@ import CloseIcon from "../../../assets/icons/close.circle.svg";
 import StyledCheckbox from "../../component/styled/Checkbox";
 import toast from "react-hot-toast";
 
-export default function ForwardModal({ mid, closeModal }) {
+export default function ForwardModal({ mids, closeModal }) {
   const [appendText, setAppendText] = useState("");
   const { sendMessages } = useSendMessage();
   const { forwardMessage, forwarding } = useForwardMessage();
@@ -45,7 +45,7 @@ export default function ForwardModal({ mid, closeModal }) {
   };
   const handleForward = async () => {
     await forwardMessage({
-      mids: [mid],
+      mids: mids,
       users: selectedMembers,
       channels: selectedChannels,
     });
@@ -170,8 +170,10 @@ export default function ForwardModal({ mid, closeModal }) {
               );
             })}
           </ul>
-          <div className="reply">
-            <Reply mid={mid} interactive={false} />
+          <div className="msgs">
+            {mids.map((mid) => (
+              <Reply key={mid} mid={mid} interactive={false} />
+            ))}
           </div>
           <Input
             className="input"

src/common/component/ForwardModal/styled.js

@@ -62,7 +62,7 @@ const StyledWrapper = styled.div`
     align-items: flex-start;
     /* height: 100%; */
     /* justify-content: space-between; */
-    padding: 16px 32px 32px 32px;
+    padding: 16px;
     box-sizing: border-box;
     .title {
       font-weight: 600;
@@ -87,9 +87,17 @@ const StyledWrapper = styled.div`
         }
       }
     }
-    .reply {
+    .msgs {
+      border-radius: var(--br);
+      padding: 8px;
+      max-height: 200px;
+      overflow: auto;
+      background-color: #f4f4f5;
       width: 280px;
       margin-bottom: 4px;
+      > .reply {
+        background: none;
+      }
     }
     .input {
       margin-bottom: 32px;