Merge pull request #1600 from ecency/feature/reply-to-public-message

Chats: public messages reply

Author: feruzm

src/common/features/chats/components/chat-channel-messages.tsx

@@ -23,7 +23,8 @@ import useDebounce from "react-use/lib/useDebounce";
 import { useCommunityCache } from "../../../core";
 import { ROLES } from "../../../store/communities";
 import { ForwardMessageDialog } from "./forward-message-dialog";
-import { UilMessage } from "@iconscout/react-unicons";
+import { UilCommentAltMessage, UilMessage } from "@iconscout/react-unicons";
+import { usePersistentReplyToMessage } from "../hooks";
 
 interface Props {
   publicMessages: PublicMessage[];
@@ -40,6 +41,7 @@ export function ChatsChannelMessages({ publicMessages, currentChannel, isPage }:
   const [currentInteractingMessageId, setCurrentInteractingMessageId] = useState<string>();
   const [needFetchNextPage, setNeedFetchNextPage] = useState(false);
   const [forwardingMessage, setForwardingMessage] = useState<Message>();
+  const [_, setReply] = usePersistentReplyToMessage(currentChannel);
 
   const { data: community } = useCommunityCache(currentChannel?.communityName);
   const { data: joinedCommunityTeamKeys, isSuccess: isJoinedCommunityTeamKeysFetched } =
@@ -107,11 +109,7 @@ export function ChatsChannelMessages({ publicMessages, currentChannel, isPage }:
                     type={message.creator !== publicKey ? "receiver" : "sender"}
                     message={message}
                     isSameUser={checkContiguousMessage(message, i, publicMessages)}
-                    onContextMenu={() => {
-                      if (isCommunityTeamMember) {
-                        setCurrentInteractingMessageId(message.id);
-                      }
-                    }}
+                    onContextMenu={() => setCurrentInteractingMessageId(message.id)}
                     onAppear={() =>
                       setTimeout(
                         () =>
@@ -137,18 +135,35 @@ export function ChatsChannelMessages({ publicMessages, currentChannel, isPage }:
                       onClick={() => setForwardingMessage(message)}
                     />
                     <DropdownItemWithIcon
-                      icon={isHideMessageLoading ? <Spinner className="w-3.5 h-3.5" /> : hideSvg}
-                      label={_t("chat.hide-message")}
-                      onClick={() => hideMessage({ messageId: message.id, status: 0 })}
+                      icon={<UilCommentAltMessage />}
+                      label={_t("chat.reply")}
+                      onClick={() => setReply(message)}
                     />
-                    {message.creator !== publicKey && (
-                      <DropdownItemWithIcon
-                        icon={
-                          isUserMutingLoading ? <Spinner className="w-3.5 h-3.5" /> : removeUserSvg
-                        }
-                        label={_t("chat.block-author")}
-                        onClick={() => muteUserInChannel({ pubkey: message.creator, status: 0 })}
-                      />
+                    {isCommunityTeamMember && (
+                      <>
+                        <DropdownItemWithIcon
+                          icon={
+                            isHideMessageLoading ? <Spinner className="w-3.5 h-3.5" /> : hideSvg
+                          }
+                          label={_t("chat.hide-message")}
+                          onClick={() => hideMessage({ messageId: message.id, status: 0 })}
+                        />
+                        {message.creator !== publicKey && (
+                          <DropdownItemWithIcon
+                            icon={
+                              isUserMutingLoading ? (
+                                <Spinner className="w-3.5 h-3.5" />
+                              ) : (
+                                removeUserSvg
+                              )
+                            }
+                            label={_t("chat.block-author")}
+                            onClick={() =>
+                              muteUserInChannel({ pubkey: message.creator, status: 0 })
+                            }
+                          />
+                        )}
+                      </>
                     )}
                   </DropdownMenu>
                 </Dropdown>

src/common/features/chats/components/chat-input/chat-input.tsx

@@ -25,7 +25,7 @@ import Gallery from "../../../../components/gallery";
 import useWindowSize from "react-use/lib/useWindowSize";
 import "./_chats.scss";
 import { useMappedStore } from "../../../../store/use-mapped-store";
-import { ChatReplyDirectMessage } from "../reply-to-messages";
+import { ChatReplyDirectMessage, ChatReplyPublicMessage } from "../reply-to-messages";
 import { useChatInputSubmit } from "./hooks";
 
 interface Props {
@@ -104,6 +104,7 @@ export function ChatInput({ currentChannel, currentContact }: Props) {
       ) : (
         <>
           {currentContact && <ChatReplyDirectMessage currentContact={currentContact} />}
+          {currentChannel && <ChatReplyPublicMessage currentChannel={currentChannel} />}
           {showGifPicker && (
             <GifPicker
               rootRef={gifPickerRef}

src/common/features/chats/components/chat-message-item/chat-message-replied-label.tsx

@@ -1,18 +1,23 @@
 import { classNameObject } from "../../../../helper/class-name-object";
-import React from "react";
-import { DirectContact, Message } from "@ecency/ns-query";
+import React, { useMemo } from "react";
+import { Message, useNostrGetUserProfileQuery } from "@ecency/ns-query";
 import { useFocusOnMessageById } from "./hooks";
 
 interface Props {
   message: Message;
-  currentContact?: DirectContact;
   type: "receiver" | "sender";
 }
 
-export function ChatMessageRepliedLabel({ message, currentContact, type }: Props) {
+export function ChatMessageRepliedLabel({ message, type }: Props) {
   const { focus } = useFocusOnMessageById(message.parentMessage?.id);
 
-  return message.parentMessage && currentContact ? (
+  const { data: nostrUserProfiles } = useNostrGetUserProfileQuery(message?.creator);
+  const profile = useMemo(
+    () => nostrUserProfiles?.find((p) => p.creator === message?.creator),
+    [nostrUserProfiles, message?.creator]
+  );
+
+  return message.parentMessage ? (
     <div
       className={classNameObject({
         "rounded-b-xl py-1 px-3 mb-1.5 truncate cursor-pointer": true,
@@ -22,7 +27,7 @@ export function ChatMessageRepliedLabel({ message, currentContact, type }: Props
       })}
       onClick={() => focus()}
     >
-      <div className="text-xs font-semibold">{currentContact?.name}</div>
+      <div className="text-xs font-semibold">{profile?.name}</div>
       <div className="text-xs">{message.parentMessage.content}</div>
     </div>
   ) : (

src/common/features/chats/components/chat-message-item/index.tsx

@@ -153,11 +153,7 @@ export function ChatMessageItem({
               isEmoji={isEmoji}
             />
             <ChatMessageForwardingLabel message={message} type={type} />
-            <ChatMessageRepliedLabel
-              message={message}
-              type={type}
-              currentContact={currentContact}
-            />
+            <ChatMessageRepliedLabel message={message} type={type} />
             <div
               className="sender-message-content [&>img]:rounded-xl"
               dangerouslySetInnerHTML={{ __html: renderedPreview }}

src/common/features/chats/components/reply-to-messages/_chat-reply-message.scss

@@ -0,0 +1,9 @@
+.chat-reply-to-message {
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  align-items: center;
+
+  &-text {
+    @apply truncate;
+  }
+}

src/common/features/chats/components/reply-to-messages/chat-reply-public-message.tsx

@@ -0,0 +1,44 @@
+import { _t } from "../../../../i18n";
+import { Button } from "@ui/button";
+import { UilMessage, UilMultiply } from "@iconscout/react-unicons";
+import React, { useMemo } from "react";
+import { usePersistentReplyToMessage } from "../../hooks";
+import { Channel, useNostrGetUserProfileQuery } from "@ecency/ns-query";
+import { ChatReplyToMessageLayout } from "./chat-reply-to-message-layout";
+
+interface Props {
+  currentChannel?: Channel;
+}
+
+export function ChatReplyPublicMessage({ currentChannel }: Props) {
+  const [reply, _, clearReply] = usePersistentReplyToMessage(currentChannel);
+
+  const { data: nostrUserProfiles } = useNostrGetUserProfileQuery(reply?.creator);
+  const profile = useMemo(
+    () => nostrUserProfiles?.find((p) => p.creator === reply?.creator),
+    [nostrUserProfiles, reply?.creator]
+  );
+
+  return reply ? (
+    <ChatReplyToMessageLayout>
+      <div className="chat-reply-to-message w-full gap-4 px-3 py-2">
+        <UilMessage className="text-blue-dark-sky" />
+        <div className="chat-reply-to-message-text text-sm flex flex-col border-l-[0.25rem] border-blue-dark-sky pl-2">
+          <div className="text-xs text-blue-dark-sky">
+            {_t("chat.reply-to", { account: profile?.name })}
+          </div>
+          <div>{reply.content}</div>
+        </div>
+        <Button
+          appearance="gray-link"
+          size="sm"
+          noPadding={true}
+          icon={<UilMultiply />}
+          onClick={() => clearReply()}
+        />
+      </div>
+    </ChatReplyToMessageLayout>
+  ) : (
+    <></>
+  );
+}

src/common/features/chats/components/reply-to-messages/chat-reply-to-message-layout.tsx

@@ -1,10 +1,11 @@
 import React, { HTMLProps } from "react";
+import "./_chat-reply-message.scss";
 
 export function ChatReplyToMessageLayout(props: HTMLProps<HTMLDivElement>) {
   return (
     <div
       {...props}
-      className="bg-white bg-opacity-50 backdrop-blur border-t border-[--border-color] z-10 left-[-0.5rem] overflow-x-auto w-[calc(100%+0.5rem)] absolute bottom-[100%] flex gap-4"
+      className="bg-white border-t border-[--border-color] z-10 left-[-0.5rem] overflow-x-auto w-[calc(100%+0.5rem)] absolute bottom-[100%] flex gap-4"
     />
   );
 }

src/common/features/chats/components/reply-to-messages/index.ts

@@ -1 +1,2 @@
 export * from "./chat-reply-direct-message";
+export * from "./chat-reply-public-message";