update chat

src/app/chat/components/messageList.tsx

@@ -0,0 +1,45 @@
+import { ChatMessageItem } from '@lume/app/chat/components/messages/item';
+import { sortedChatMessagesAtom } from '@lume/stores/chat';
+import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
+
+import { useAtomValue } from 'jotai';
+import { useCallback, useRef } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+
+export default function ChatMessageList() {
+  const { account } = useActiveAccount();
+
+  const virtuosoRef = useRef(null);
+  const data = useAtomValue(sortedChatMessagesAtom);
+
+  const itemContent: any = useCallback(
+    (index: string | number) => {
+      return <ChatMessageItem data={data[index]} userPubkey={account.pubkey} userPrivkey={account.privkey} />;
+    },
+    [account.privkey, account.pubkey, data]
+  );
+
+  const computeItemKey = useCallback(
+    (index: string | number) => {
+      return data[index].id;
+    },
+    [data]
+  );
+
+  return (
+    <div className="h-full w-full">
+      <Virtuoso
+        ref={virtuosoRef}
+        data={data}
+        itemContent={itemContent}
+        computeItemKey={computeItemKey}
+        initialTopMostItemIndex={data.length - 1}
+        alignToBottom={true}
+        followOutput={true}
+        overscan={50}
+        increaseViewportBy={{ top: 200, bottom: 200 }}
+        className="scrollbar-hide h-full w-full overflow-y-auto"
+      />
+    </div>
+  );
+}

src/app/chat/components/messages/form.tsx

@@ -0,0 +1,87 @@
+import { ImagePicker } from '@lume/shared/form/imagePicker';
+import { chatContentAtom } from '@lume/stores/chat';
+import { FULL_RELAYS, WRITEONLY_RELAYS } from '@lume/stores/constants';
+import { dateToUnix } from '@lume/utils/getDate';
+import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
+
+import { useAtom } from 'jotai';
+import { useResetAtom } from 'jotai/utils';
+import { RelayPool } from 'nostr-relaypool';
+import { getEventHash, nip04, signEvent } from 'nostr-tools';
+import { useCallback } from 'react';
+
+export default function ChatMessageForm({ receiverPubkey }: { receiverPubkey: string }) {
+  const { account, isLoading, isError } = useActiveAccount();
+
+  const [value, setValue] = useAtom(chatContentAtom);
+  const resetValue = useResetAtom(chatContentAtom);
+
+  const encryptMessage = useCallback(
+    async (privkey: string) => {
+      return await nip04.encrypt(privkey, receiverPubkey, value);
+    },
+    [receiverPubkey, value]
+  );
+
+  const submitEvent = () => {
+    if (!isError && !isLoading && account) {
+      encryptMessage(account.privkey)
+        .then((encryptedContent) => {
+          const pool = new RelayPool(WRITEONLY_RELAYS);
+          const event: any = {
+            content: encryptedContent,
+            created_at: dateToUnix(),
+            kind: 4,
+            pubkey: account.pubkey,
+            tags: [['p', receiverPubkey]],
+          };
+          event.id = getEventHash(event);
+          event.sig = signEvent(event, account.privkey);
+          // publish note
+          pool.publish(event, FULL_RELAYS);
+          // reset state
+          resetValue();
+        })
+        .catch(console.error);
+    }
+  };
+
+  const handleEnterPress = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      submitEvent();
+    }
+  };
+
+  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="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">
+            <ImagePicker type="chat" />
+            <div className="flex items-center gap-2 pl-2"></div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => submitEvent()}
+              disabled={value.length === 0 ? true : false}
+              className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              Send
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/chat/components/messages/item.tsx

@@ -0,0 +1,27 @@
+import ChatMessageUser from '@lume/app/chat/components/messages/user';
+import { useDecryptMessage } from '@lume/utils/hooks/useDecryptMessage';
+
+import { memo } from 'react';
+
+export const ChatMessageItem = memo(function MessageListItem({
+  data,
+  userPubkey,
+  userPrivkey,
+}: {
+  data: any;
+  userPubkey: string;
+  userPrivkey: string;
+}) {
+  const content = useDecryptMessage(userPubkey, userPrivkey, data.pubkey, data.tags, data.content);
+
+  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">
+        <ChatMessageUser pubkey={data.pubkey} time={data.created_at} />
+        <div className="-mt-[17px] pl-[48px]">
+          <div className="whitespace-pre-line break-words break-words text-sm leading-tight">{content}</div>
+        </div>
+      </div>
+    </div>
+  );
+});

src/app/chat/components/messages/user.tsx

@@ -0,0 +1,48 @@
+import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
+
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
+
+export default function ChatMessageUser({ pubkey, time }: { pubkey: string; time: number }) {
+  const { user, isError, isLoading } = useProfile(pubkey);
+
+  return (
+    <div className="group flex items-start gap-3">
+      {isError || isLoading ? (
+        <>
+          <div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800"></div>
+          <div className="flex w-full flex-1 items-start justify-between">
+            <div className="flex items-baseline gap-2 text-sm">
+              <div className="h-4 w-20 animate-pulse rounded bg-zinc-800"></div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="relative h-9 w-9 shrink rounded-md">
+            <img
+              src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
+              alt={pubkey}
+              className="h-9 w-9 rounded-md object-cover"
+              loading="lazy"
+              fetchpriority="high"
+            />
+          </div>
+          <div className="flex w-full flex-1 items-start justify-between">
+            <div className="flex items-baseline gap-2 text-sm">
+              <span className="font-semibold leading-none text-zinc-200 group-hover:underline">
+                {user?.display_name || user?.name || shortenKey(pubkey)}
+              </span>
+              <span className="leading-none text-zinc-500">·</span>
+              <span className="leading-none text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/app/chat/pages/index.page.tsx

@@ -1,82 +1,66 @@
-import { AccountContext } from '@lume/shared/accountProvider';
-import { MessageListItem } from '@lume/shared/chats/messageListItem';
-import FormChat from '@lume/shared/form/chat';
-import { RelayContext } from '@lume/shared/relaysProvider';
+import ChatMessageForm from '@lume/app/chat/components/messages/form';
+import { chatMessagesAtom } from '@lume/stores/chat';
 import { FULL_RELAYS } from '@lume/stores/constants';
+import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
 import { usePageContext } from '@lume/utils/hooks/usePageContext';
-import { sortMessages } from '@lume/utils/transform';
 
-import { useContext } from 'react';
+import { useSetAtom } from 'jotai';
+import { useResetAtom } from 'jotai/utils';
+import { RelayPool } from 'nostr-relaypool';
+import { Suspense, lazy, useEffect } from 'react';
 import useSWRSubscription from 'swr/subscription';
 
+const ChatMessageList = lazy(() => import('@lume/app/chat/components/messageList'));
+
 export function Page() {
   const pageContext = usePageContext();
   const searchParams: any = pageContext.urlParsed.search;
 
   const pubkey = searchParams.pubkey;
 
-  const pool: any = useContext(RelayContext);
-  const activeAccount: any = useContext(AccountContext);
+  const { account } = useActiveAccount();
 
-  const { data, error } = useSWRSubscription(
-    pubkey
-      ? [
-          {
-            kinds: [4],
-            authors: [pubkey],
-            '#p': [activeAccount.pubkey],
-          },
-          {
-            kinds: [4],
-            authors: [activeAccount.pubkey],
-            '#p': [pubkey],
-          },
-        ]
-      : null,
-    (key, { next }) => {
-      const unsubscribe = pool.subscribe(key, FULL_RELAYS, (event: any) => {
-        next(null, (prev) => (prev ? [event, ...prev] : [event]));
-      });
+  const setChatMessages = useSetAtom(chatMessagesAtom);
+  const resetChatMessages = useResetAtom(chatMessagesAtom);
 
-      return () => {
-        unsubscribe();
-      };
-    }
-  );
+  useSWRSubscription(pubkey ? pubkey : null, (key: string, {}: any) => {
+    const pool = new RelayPool(FULL_RELAYS);
+    const unsubscribe = pool.subscribe(
+      [
+        {
+          kinds: [4],
+          authors: [key],
+          '#p': [account.pubkey],
+        },
+        {
+          kinds: [4],
+          authors: [account.pubkey],
+          '#p': [key],
+        },
+      ],
+      FULL_RELAYS,
+      (event: any) => {
+        setChatMessages((prev) => [...prev, event]);
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  useEffect(() => {
+    // reset channel messages
+    resetChatMessages();
+  });
 
   return (
     <div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
-      <div className="scrollbar-hide flex h-full w-full flex-col-reverse overflow-y-auto">
-        {error && <div>failed to load</div>}
-        {!data ? (
-          <div className="flex h-min min-h-min w-full animate-pulse select-text flex-col px-5 py-2 hover:bg-black/20">
-            <div className="flex flex-col">
-              <div className="group flex items-start gap-3">
-                <div className="bg-zinc relative h-9 w-9 shrink rounded-md bg-zinc-700"></div>
-                <div className="flex w-full flex-1 items-start justify-between">
-                  <div className="flex items-baseline gap-2 text-sm">
-                    <span className="h-2 w-16 bg-zinc-700"></span>
-                  </div>
-                </div>
-              </div>
-              <div className="-mt-[17px] pl-[48px]">
-                <div className="h-3 w-full bg-zinc-700"></div>
-              </div>
-            </div>
-          </div>
-        ) : (
-          sortMessages(data).map((message) => (
-            <MessageListItem
-              key={message.id}
-              data={message}
-              userPubkey={activeAccount.pubkey}
-              userPrivkey={activeAccount.privkey}
-            />
-          ))
-        )}
-      </div>
+      <Suspense fallback={<p>Loading...</p>}>
+        <ChatMessageList />
+      </Suspense>
       <div className="shrink-0 p-3">
-        <FormChat receiverPubkey={pubkey} />
+        <ChatMessageForm receiverPubkey={pubkey} />
       </div>
     </div>
   );