added reply message to channel

src/components/channels/channelMessageItem.tsx

@@ -1,22 +0,0 @@
-import { MessageUser } from '@components/chats/messageUser';
-
-import { memo } from 'react';
-
-const ChannelMessageItem = ({ data }: { data: any }) => {
-  return (
-    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
-      <div className="flex flex-col">
-        <MessageUser pubkey={data.pubkey} time={data.created_at} />
-        <div className="-mt-[17px] pl-[48px]">
-          <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none break-words text-sm leading-tight dark:prose-invert prose-p:m-0 prose-p:text-sm prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-              {data.content}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default memo(ChannelMessageItem);

src/components/channels/messages/index.tsx

@@ -1,9 +1,9 @@
-import ChannelMessageItem from '@components/channels/channelMessageItem';
+import ChannelMessageItem from '@components/channels/messages/item';
 
 import { useCallback, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-export const ChannelMessageList = ({ data }: { data: any }) => {
+export const ChannelMessages = ({ data }: { data: any }) => {
   const virtuosoRef = useRef(null);
 
   const itemContent: any = useCallback(

src/components/channels/messages/item.tsx

@@ -0,0 +1,37 @@
+import { ReplyButton } from '@components/channels/messages/replyButton';
+import { MessageUser } from '@components/chats/messageUser';
+
+import HideIcon from '@assets/icons/hide';
+import MuteIcon from '@assets/icons/mute';
+
+import { memo } from 'react';
+
+const ChannelMessageItem = ({ data }: { data: any }) => {
+  return (
+    <div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
+      <div className="flex flex-col">
+        <MessageUser pubkey={data.pubkey} time={data.created_at} />
+        <div className="-mt-[17px] pl-[48px]">
+          <div className="flex flex-col gap-2">
+            <div className="prose prose-zinc max-w-none break-words text-sm leading-tight dark:prose-invert prose-p:m-0 prose-p:text-sm prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
+              {data.content}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="absolute -top-4 right-4 z-10 hidden group-hover:inline-flex">
+        <div className="inline-flex h-7 items-center justify-center gap-1 rounded bg-zinc-900 px-0.5 shadow-md shadow-black/20 ring-1 ring-zinc-800">
+          <ReplyButton id={data.id} pubkey={data.pubkey} content={data.content} />
+          <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
+            <HideIcon className="h-4 w-4 text-zinc-400" />
+          </button>
+          <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
+            <MuteIcon className="h-4 w-4 text-zinc-400" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default memo(ChannelMessageItem);

src/components/channels/messages/replyButton.tsx

@@ -0,0 +1,38 @@
+import { channelReplyAtom } from '@stores/channel';
+
+import ReplyIcon from '@assets/icons/reply';
+
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useSetAtom } from 'jotai';
+
+export const ReplyButton = ({ id, pubkey, content }: { id: string; pubkey: string; content: string }) => {
+  const setChannelReplyAtom = useSetAtom(channelReplyAtom);
+
+  const createReply = () => {
+    setChannelReplyAtom({ id: id, pubkey: pubkey, content: content });
+  };
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            onClick={() => createReply()}
+            className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800"
+          >
+            <ReplyIcon className="h-4 w-4 text-zinc-400" />
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            className="select-none rounded-md bg-zinc-800 px-4 py-2 text-sm leading-none text-zinc-100 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
+            sideOffset={4}
+          >
+            Reply
+            <Tooltip.Arrow className="fill-zinc-800" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+};

src/components/chats/chatModal.tsx

@@ -11,7 +11,7 @@ export const ChatModal = () => {
 
   const fetchPlebsByAccount = useCallback(async (id) => {
     const { getPlebs } = await import('@utils/bindings');
-    return await getPlebs({ account_id: id });
+    return await getPlebs({ account_id: id, kind: 0 });
   }, []);
 
   useEffect(() => {

src/components/form/channelMessage.tsx

@@ -1,9 +1,15 @@
 import ImagePicker from '@components/form/imagePicker';
 import { RelayContext } from '@components/relaysProvider';
+import { UserMini } from '@components/user/mini';
+
+import { channelReplyAtom } from '@stores/channel';
 
 import { dateToUnix } from '@utils/getDate';
 
+import { Cross1Icon } from '@radix-ui/react-icons';
 import useLocalStorage from '@rehooks/local-storage';
+import { useAtomValue } from 'jotai';
+import { useResetAtom } from 'jotai/utils';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useCallback, useContext, useState } from 'react';
 
@@ -13,13 +19,28 @@ export default function FormChannelMessage({ eventId }: { eventId: string | stri
   const [value, setValue] = useState('');
   const [activeAccount]: any = useLocalStorage('activeAccount', {});
 
+  const channelReply = useAtomValue(channelReplyAtom);
+  const resetChannelReply = useResetAtom(channelReplyAtom);
+
   const submitEvent = useCallback(() => {
+    let tags;
+
+    if (channelReply.id !== null) {
+      tags = [
+        ['e', eventId, '', 'root'],
+        ['e', channelReply.id, '', 'reply'],
+        ['p', channelReply.pubkey, ''],
+      ];
+    } else {
+      tags = [['e', eventId, '', 'root']];
+    }
+
     const event: any = {
       content: value,
       created_at: dateToUnix(),
       kind: 42,
       pubkey: activeAccount.pubkey,
-      tags: [['e', eventId, '', 'root']],
+      tags: tags,
     };
     event.id = getEventHash(event);
     event.sig = signEvent(event, activeAccount.privkey);
@@ -28,7 +49,19 @@ export default function FormChannelMessage({ eventId }: { eventId: string | stri
     pool.publish(event, relays);
     // reset state
     setValue('');
-  }, [activeAccount.privkey, activeAccount.pubkey, eventId, value, pool, relays]);
+    // reset channel reply
+    resetChannelReply();
+  }, [
+    value,
+    channelReply.id,
+    channelReply.pubkey,
+    activeAccount.pubkey,
+    activeAccount.privkey,
+    eventId,
+    resetChannelReply,
+    pool,
+    relays,
+  ]);
 
   const handleEnterPress = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -37,18 +70,44 @@ export default function FormChannelMessage({ eventId }: { eventId: string | stri
     }
   };
 
+  const stopReply = () => {
+    resetChannelReply();
+  };
+
   return (
-    <div className="relative h-24 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
-      <div>
-        <textarea
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          onKeyDown={handleEnterPress}
-          spellCheck={false}
-          placeholder="Message"
-          className="relative h-24 w-full resize-none rounded-lg border border-black/5 px-3.5 py-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
-        />
-      </div>
+    <div
+      className={`relative ${
+        channelReply.id ? 'h-36' : 'h-24'
+      } w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20`}
+    >
+      {channelReply.id && (
+        <div className="absolute left-0 top-0 z-10 h-14 w-full p-[2px]">
+          <div className="flex h-full w-full items-center justify-between rounded-t-md border-b border-zinc-700/70 bg-zinc-900 px-3">
+            <div className="flex w-full flex-col">
+              <UserMini pubkey={channelReply.pubkey} />
+              <div className="-mt-3.5 pl-[32px]">
+                <div className="text-xs text-zinc-200">{channelReply.content}</div>
+              </div>
+            </div>
+            <button
+              onClick={() => stopReply()}
+              className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
+            >
+              <Cross1Icon className="h-3 w-3 text-zinc-100" />
+            </button>
+          </div>
+        </div>
+      )}
+      <textarea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleEnterPress}
+        spellCheck={false}
+        placeholder="Message"
+        className={`relative ${
+          channelReply.id ? 'h-36 pt-16' : 'h-24 pt-3'
+        } w-full resize-none rounded-lg border border-black/5 px-3.5 pb-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500`}
+      />
       <div className="absolute bottom-2 w-full px-2">
         <div className="flex w-full items-center justify-between bg-zinc-800">
           <div className="flex items-center gap-2 divide-x divide-zinc-700">

src/components/multiAccounts/activeAccount.tsx

@@ -31,7 +31,7 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
       const { createPleb } = await import('@utils/bindings');
 
       for (const tag of tags) {
-        const metadata: any = await fetchMetadata(tag[1], pool, relays);
+        const metadata: any = await fetchMetadata(tag[1]);
         createPleb({
           pleb_id: tag[1] + '-lume' + user.id.toString(),
           pubkey: tag[1],
@@ -41,7 +41,7 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
         }).catch(console.error);
       }
     },
-    [pool, relays, user.id]
+    [user.id]
   );
 
   useEffect(() => {

src/components/user/mini.tsx

@@ -0,0 +1,26 @@
+import { ImageWithFallback } from '@components/imageWithFallback';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { useMetadata } from '@utils/metadata';
+import { truncate } from '@utils/truncate';
+
+export const UserMini = ({ pubkey }: { pubkey: string }) => {
+  const profile = useMetadata(pubkey);
+
+  return (
+    <div className="group flex items-start gap-1">
+      <div className="relative h-7 w-7 shrink overflow-hidden rounded border border-white/10">
+        <ImageWithFallback
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          fill={true}
+          className="rounded object-cover"
+        />
+      </div>
+      <span className="text-xs font-medium leading-none text-zinc-500">
+        Replying to {profile?.name || truncate(pubkey, 16, ' .... ')}
+      </span>
+    </div>
+  );
+};