From 54550e1f489947e8bc627eb2982b08876c1056ea Mon Sep 17 00:00:00 2001
From: Deva <97371915+Deva-1903@users.noreply.github.com>
Date: Tue, 26 Sep 2023 12:10:09 +0530
Subject: [PATCH] feat: add quote reply (#252)

* Added quote reply feature

* Made some changes in chat.jsx for quote reply feature

---------

Co-authored-by: Dunsin <78784850+Dun-sin@users.noreply.github.com>
---
 client/src/components/Chat.jsx | 78 +++++++++++++++++++++++++++++++---
 client/src/styles/chat.css     |  4 +-
 2 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Chat.jsx b/client/src/components/Chat.jsx
index 965c7f5c..64797a95 100644
--- a/client/src/components/Chat.jsx
+++ b/client/src/components/Chat.jsx
@@ -329,6 +329,18 @@ const Chat = () => {
         setEditing({ isediting: true, messageID: id });
     };
 
+    const handleQuoteReply = (id) => {
+        inputRef.current.focus();
+
+        const { message } = getMessage(id);
+        if (message.includes('Warning Message')) {
+            cancelEdit();
+            return;
+        }
+        inputRef.current.value = `${message} --> `;
+
+    };
+
     const handleTypingStatus = debounce((e) => {
         if (e.target.value.length > 0) {
             socket
@@ -365,6 +377,15 @@ const Chat = () => {
         );
     };
 
+    const renderIconButtonReceiver = (props) => {
+        return (
+            <BiDotsVerticalRounded
+                {...props}
+                className="fill-white scale-[1.8]"
+            />
+        );
+    };
+
     return (
         <div className="w-full md:h-[90%] min-h-[100%] pb-[25px] flex flex-col justify-between">
             <div className="max-h-[67vh]">
@@ -395,7 +416,7 @@ const Chat = () => {
                                         : 'other'
                                         }`}
                                 >
-                                    <div className="message">
+                                     <div className="message">
                                         <div
                                             className={`content text ${sender.toString() ===
                                                 senderId.toString() &&
@@ -413,7 +434,9 @@ const Chat = () => {
                                                 status !== 'pending' && (
                                                     <Dropdown
                                                         placement="leftStart"
-                                                        style={{ zIndex: 3 }}
+                                                        style={{
+                                                            zIndex: 'auto',
+                                                        }}
                                                         renderToggle={
                                                             renderIconButton
                                                         }
@@ -421,18 +444,52 @@ const Chat = () => {
                                                     >
                                                         <Dropdown.Item
                                                             onClick={() =>
-                                                                handleDelete(id)
+                                                                handleEdit(id)
                                                             }
                                                         >
-                                                            Delete
+                                                            Edit
                                                         </Dropdown.Item>
+
                                                         <Dropdown.Item
                                                             onClick={() =>
-                                                                handleEdit(id)
+                                                                handleCopyToClipBoard(
+                                                                    id
+                                                                )
                                                             }
                                                         >
-                                                            Edit
+                                                            Copy
+                                                        </Dropdown.Item>
+                                                        <Dropdown.Item
+                                                            onClick={() =>
+                                                                handleQuoteReply(
+                                                                    id
+                                                                )
+                                                            }
+                                                        >
+                                                            Quote Reply
                                                         </Dropdown.Item>
+                                                        <Dropdown.Item
+                                                            onClick={() =>
+                                                                handleDelete(id)
+                                                            }
+                                                        >
+                                                            Delete
+                                                        </Dropdown.Item>
+                                                    </Dropdown>
+                                                )}
+                                            {sender.toString() !==
+                                                senderId.toString() &&
+                                                status !== 'pending' && (
+                                                    <Dropdown
+                                                        placement="rightStart"
+                                                        style={{
+                                                            zIndex: 'auto',
+                                                        }}
+                                                        renderToggle={
+                                                            renderIconButtonReceiver
+                                                        }
+                                                        NoCaret
+                                                    >
                                                         <Dropdown.Item
                                                             onClick={() =>
                                                                 handleCopyToClipBoard(
@@ -442,6 +499,15 @@ const Chat = () => {
                                                         >
                                                             Copy
                                                         </Dropdown.Item>
+                                                        <Dropdown.Item
+                                                            onClick={() =>
+                                                                handleQuoteReply(
+                                                                    id
+                                                                )
+                                                            }
+                                                        >
+                                                            Quote Reply
+                                                        </Dropdown.Item>
                                                     </Dropdown>
                                                 )}
                                         </div>
diff --git a/client/src/styles/chat.css b/client/src/styles/chat.css
index 76127d33..9d9b3230 100644
--- a/client/src/styles/chat.css
+++ b/client/src/styles/chat.css
@@ -37,11 +37,11 @@
     }
 
     .message-block .message .content {
-        @apply bg-red rounded-[20px] p-[15px] break-all w-full flex gap-2 items-center;
+        @apply bg-red rounded-[18px] p-[15px] break-all will-change-auto flex gap-2 items-center;
     }
 
     .message-block .message .status {
-        @apply px-[20px] text-[12px] flex gap-2 items-center;
+        @apply px-[10px] text-[12px] flex gap-2 items-center;
     }
 
     .message .content h1,