Chats: added saved messages

package.json

@@ -13,7 +13,7 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "@ecency/ns-query": "^1.1.2",
+    "@ecency/ns-query": "^1.1.3",
     "@ecency/render-helper": "^2.2.29",
     "@ecency/render-helper-amp": "^1.1.0",
     "@emoji-mart/data": "^1.1.2",

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

@@ -1,11 +1,19 @@
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import { History } from "history";
 import ChatsCommunityDropdownMenu from "./chats-community-actions";
 import UserAvatar from "../../../components/user-avatar";
 import Link from "../../../components/alink";
 import { expandSideBar } from "../../../img/svg";
 import { Button } from "@ui/button";
-import { Channel, ChatContext, formattedUserName, useChannelsQuery } from "@ecency/ns-query";
+import {
+  Channel,
+  ChatContext,
+  formattedUserName,
+  useChannelsQuery,
+  useKeysQuery
+} from "@ecency/ns-query";
+import { ChatSidebarSavedMessagesAvatar } from "./chats-sidebar/chat-sidebar-saved-messages-avatar";
+import { _t } from "../../../i18n";
 
 interface Props {
   username: string;
@@ -15,9 +23,13 @@ interface Props {
 
 export default function ChatsMessagesHeader(props: Props) {
   const { username } = props;
-  const { setReceiverPubKey } = useContext(ChatContext);
+  const { setReceiverPubKey, receiverPubKey } = useContext(ChatContext);
+
+  const { publicKey } = useKeysQuery();
   const { data: channels } = useChannelsQuery();
 
+  const isActiveUser = useMemo(() => receiverPubKey === publicKey, [publicKey, receiverPubKey]);
+
   const formattedName = (username: string) => {
     if (username && !username.startsWith("@")) {
       const community = channels?.find((channel) => channel.communityName === username);
@@ -44,8 +56,12 @@ export default function ChatsMessagesHeader(props: Props) {
           to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
           target="_blank"
         >
-          <UserAvatar username={formattedUserName(username)} size="medium" />
-          <div>{formattedName(username)}</div>
+          {isActiveUser ? (
+            <ChatSidebarSavedMessagesAvatar />
+          ) : (
+            <UserAvatar username={formattedUserName(username)} size="medium" />
+          )}
+          <div>{isActiveUser ? _t("chat.saved-messages") : formattedName(username)}</div>
         </Link>
       </div>
 

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

@@ -10,6 +10,7 @@ import {
   DirectContact,
   DirectMessage,
   PublicMessage,
+  useKeysQuery,
   useMessagesQuery,
   useOriginalJoinedChannelsQuery
 } from "@ecency/ns-query";
@@ -23,13 +24,18 @@ interface Props {
 export default function ChatsMessagesView({ currentContact, currentChannel }: Props) {
   const messagesBoxRef = useRef<HTMLDivElement>(null);
 
+  const { publicKey } = useKeysQuery();
   const { data: messages } = useMessagesQuery(currentContact, currentChannel);
   const { data: channels } = useOriginalJoinedChannelsQuery();
 
   const isJoinedToChannel = useMemo(
     () => channels?.some((c) => c.id === currentChannel?.id) === true,
     [currentChannel, channels]
   );
+  const isActiveUser = useMemo(
+    () => currentContact?.pubkey === publicKey,
+    [publicKey, currentContact]
+  );
 
   return (
     <>
@@ -39,16 +45,18 @@ export default function ChatsMessagesView({ currentContact, currentChannel }: Pr
         })}
         ref={messagesBoxRef}
       >
-        <Link
-          className="after:!hidden"
-          to={!!currentChannel ? `/created/${currentChannel?.name}` : `/@${currentContact?.name}`}
-          target="_blank"
-        >
-          <ChatsProfileBox
-            communityName={currentChannel?.communityName}
-            currentUser={currentContact?.name}
-          />
-        </Link>
+        {!isActiveUser && (
+          <Link
+            className="after:!hidden"
+            to={!!currentChannel ? `/created/${currentChannel?.name}` : `/@${currentContact?.name}`}
+            target="_blank"
+          >
+            <ChatsProfileBox
+              communityName={currentChannel?.communityName}
+              currentUser={currentContact?.name}
+            />
+          </Link>
+        )}
         {currentChannel ? (
           <>
             <ChatsChannelMessages

src/common/features/chats/components/chat-popup/chat-popup-header.tsx

@@ -9,6 +9,7 @@ import React, { useContext, useMemo } from "react";
 import UserAvatar from "../../../../components/user-avatar";
 import { Channel, ChatContext, DirectContact, useKeysQuery } from "@ecency/ns-query";
 import { useCommunityCache } from "../../../../core";
+import { ChatSidebarSavedMessagesAvatar } from "../chats-sidebar/chat-sidebar-saved-messages-avatar";
 
 interface Props {
   directContact?: DirectContact;
@@ -35,11 +36,21 @@ export function ChatPopupHeader({
 
   const { data: community } = useCommunityCache(channel?.communityName);
   const { privateKey } = useKeysQuery();
+  const { publicKey } = useKeysQuery();
+
+  const isActiveUser = useMemo(
+    () => directContact?.pubkey === publicKey,
+    [publicKey, directContact]
+  );
   const title = useMemo(() => {
     if (revealPrivateKey) {
       return _t("chat.manage-chat-key");
     }
 
+    if (isActiveUser) {
+      return _t("chat.saved-messages");
+    }
+
     if (directContact) {
       return directContact.name;
     }
@@ -53,7 +64,7 @@ export function ChatPopupHeader({
     }
 
     return _t("chat.page-title");
-  }, [directContact, community, showSearchUser, revealPrivateKey]);
+  }, [directContact, community, showSearchUser, revealPrivateKey, isActiveUser]);
   const isExpanded = useMemo(
     () => (directContact || community || showSearchUser || revealPrivateKey) && expanded,
     [directContact, community, showSearchUser, revealPrivateKey, expanded]
@@ -79,9 +90,12 @@ export function ChatPopupHeader({
           </Tooltip>
         )}
         <div className="flex items-center" onClick={() => setExpanded(!expanded)}>
-          {(directContact || channel) && (
-            <UserAvatar username={community?.name ?? directContact?.name ?? ""} size="small" />
-          )}
+          {(directContact || channel) &&
+            (isActiveUser ? (
+              <ChatSidebarSavedMessagesAvatar width={24} height={24} />
+            ) : (
+              <UserAvatar username={community?.name ?? directContact?.name ?? ""} size="small" />
+            ))}
 
           <div
             className={classNameObject({

src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import ChatsProfileBox from "../chat-profile-box";
 import ChatsDirectMessages from "../chats-direct-messages";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useCommunityCache } from "../../../../core";
 import { ChatsChannelMessages } from "../chat-channel-messages";
 import {
@@ -10,6 +10,7 @@ import {
   DirectMessage,
   PublicMessage,
   useDirectContactsQuery,
+  useKeysQuery,
   useMessagesQuery,
   useUpdateChannelLastSeenDate,
   useUpdateDirectContactsLastSeenDate
@@ -22,12 +23,19 @@ interface Props {
 
 export function ChatPopupMessagesList({ currentContact, currentChannel }: Props) {
   const { data: currentCommunity } = useCommunityCache(currentChannel?.communityName);
+
+  const { publicKey } = useKeysQuery();
   const { data: messages } = useMessagesQuery(currentContact, currentChannel);
   const { isSuccess: isDirectContactsLoaded } = useDirectContactsQuery();
 
   const updateDirectContactsLastSeenDate = useUpdateDirectContactsLastSeenDate();
   const updateChannelLastSeenDate = useUpdateChannelLastSeenDate();
 
+  const isActiveUser = useMemo(
+    () => currentContact?.pubkey === publicKey,
+    [publicKey, currentContact]
+  );
+
   // Whenever current contact is exists need to turn unread to 0
   useEffect(() => {
     if (currentContact && isDirectContactsLoaded) {
@@ -50,14 +58,16 @@ export function ChatPopupMessagesList({ currentContact, currentChannel }: Props)
   return (
     <div className="chats h-full">
       {" "}
-      <Link
-        to={!!currentChannel ? `/created/${currentCommunity?.name}` : `/@${currentContact?.name}`}
-      >
-        <ChatsProfileBox
-          communityName={currentChannel?.communityName}
-          currentUser={currentContact?.name}
-        />
-      </Link>
+      {!isActiveUser && (
+        <Link
+          to={!!currentChannel ? `/created/${currentCommunity?.name}` : `/@${currentContact?.name}`}
+        >
+          <ChatsProfileBox
+            communityName={currentChannel?.communityName}
+            currentUser={currentContact?.name}
+          />
+        </Link>
+      )}
       {!!currentChannel ? (
         <ChatsChannelMessages
           publicMessages={messages as PublicMessage[]}

src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx

@@ -16,6 +16,7 @@ import { informationOutlineSvg } from "../../../../img/svg";
 import { Button } from "@ui/button";
 import { Link } from "react-router-dom";
 import { Badge } from "@ui/badge";
+import { ChatSidebarSavedMessagesAvatar } from "./chat-sidebar-saved-messages-avatar";
 
 interface Props {
   contact: DirectContact;
@@ -40,6 +41,7 @@ export function ChatSidebarDirectContact({ contact, onClick, isLink = true }: Pr
     () => (contactKeys && isJoined ? contact.pubkey !== contactKeys.pubkey : false),
     [contactKeys, contact, isJoined]
   );
+  const isActiveUser = useMemo(() => contact.pubkey === publicKey, [publicKey, contact]);
 
   const content = (
     <>
@@ -48,7 +50,11 @@ export function ChatSidebarDirectContact({ contact, onClick, isLink = true }: Pr
           grayscale: isContactKeysLoading ? true : isReadOnly || !isJoined
         })}
       >
-        <UserAvatar username={contact.name} size="medium" />
+        {isActiveUser ? (
+          <ChatSidebarSavedMessagesAvatar />
+        ) : (
+          <UserAvatar username={contact.name} size="medium" />
+        )}
       </div>
       <div className="flex flex-col w-[calc(100%-40px-0.75rem)]">
         <div className="flex justify-between w-full items-center">
@@ -69,18 +75,20 @@ export function ChatSidebarDirectContact({ contact, onClick, isLink = true }: Pr
                 </Tooltip>
               </div>
             )}
-            <div className="font-semibold truncate dark:text-white">{contact.name}</div>
+            <div className="font-semibold truncate dark:text-white">
+              {isActiveUser ? _t("chat.saved-messages") : contact.name}
+            </div>
           </div>
           <div className="text-xs text-gray-500">{lastMessageDate}</div>
         </div>
         <div className="flex justify-between">
           <div className="text-sm text-gray-600 truncate">
-            {lastMessage?.creator === publicKey && (
+            {lastMessage?.creator === publicKey && !isActiveUser && (
               <span className="mr-1 text-gray-500 dark:text-gray-700">{_t("g.you")}:</span>
             )}
             {lastMessage?.content}
           </div>
-          {!!unread && <Badge appearance="secondary">{unread}</Badge>}
+          {!!unread && !isActiveUser && <Badge appearance="secondary">{unread}</Badge>}
         </div>
       </div>
     </>

src/common/features/chats/components/chats-sidebar/chat-sidebar-saved-messages-avatar.tsx

@@ -0,0 +1,22 @@
+import { savedMessagesSvg } from "../../../../img/svg";
+import React from "react";
+
+export function ChatSidebarSavedMessagesAvatar({
+  width = 40,
+  height = 40
+}: {
+  width?: number;
+  height?: number;
+}) {
+  return (
+    <div
+      className="text-white flex items-center justify-center bg-gradient-to-tl rounded-full from-blue-dark-sky to-blue-dark-sky-010"
+      style={{
+        width,
+        height
+      }}
+    >
+      {savedMessagesSvg}
+    </div>
+  );
+}

src/common/i18n/locales/en-US.json

@@ -1921,6 +1921,7 @@
     "upload-image": "Upload image",
     "hidden-messages": "Hidden messages",
     "hidden-messages-management": "Hidden messages management",
+    "saved-messages": "Saved messages",
     "welcome": {
       "title": "Welcome to Chats",
       "description": "Create or import an account start using Chats",

src/common/img/svg.tsx

@@ -2301,3 +2301,30 @@ export const attachFileSvg = (
     />
   </svg>
 );
+
+export const savedMessagesSvg = (
+  <svg width={16} height={16} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12.89 5.87988H5.10999C3.39999 5.87988 2 7.27987 2 8.98987V20.3499C2 21.7999 3.04 22.4199 4.31 21.7099L8.23999 19.5199C8.65999 19.2899 9.34 19.2899 9.75 19.5199L13.68 21.7099C14.95 22.4199 15.99 21.7999 15.99 20.3499V8.98987C16 7.27987 14.6 5.87988 12.89 5.87988Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16 8.98987V20.3499C16 21.7999 14.96 22.4099 13.69 21.7099L9.76001 19.5199C9.34001 19.2899 8.65999 19.2899 8.23999 19.5199L4.31 21.7099C3.04 22.4099 2 21.7999 2 20.3499V8.98987C2 7.27987 3.39999 5.87988 5.10999 5.87988H12.89C14.6 5.87988 16 7.27987 16 8.98987Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M22 5.10999V16.47C22 17.92 20.96 18.53 19.69 17.83L16 15.77V8.98999C16 7.27999 14.6 5.88 12.89 5.88H8V5.10999C8 3.39999 9.39999 2 11.11 2H18.89C20.6 2 22 3.39999 22 5.10999Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

yarn.lock

@@ -1374,10 +1374,10 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@ecency/ns-query@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-1.1.2.tgz#2f8421df8c3098abf6174f32e38d3d041a3679b8"
-  integrity sha512-vtlAk4ccZidfLTo6cRLsZTQA4LmNA8D6NwP39ZGLBrzk30vvIewYzvmaig4tdmZFomxy558uW8v08IaQ0dJCsQ==
+"@ecency/ns-query@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-1.1.3.tgz#1ed409b00adf3825899dec99174bf65b2c8da4d3"
+  integrity sha512-p0c/GbxTbIajWoEOkWlDuziegRk4nNVujlgU/74LYxyeR7+uptWaRp9xLUVsgTxyW+KWDcT0Z0j1SiG2jTvQyA==
   dependencies:
     "@tanstack/react-query" "^4.29.7"
     axios "^0.21.2"