fix all dms bugs

src/app/chats/components/chatForm.tsx

@@ -1,6 +1,6 @@
-import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
-import { nip04 } from 'nostr-tools';
-import { useCallback, useState } from 'react';
+import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
+import { useState } from 'react';
+import { toast } from 'sonner';
 
 import { MediaUploader } from '@app/chats/components/mediaUploader';
 
@@ -8,34 +8,26 @@ import { useNDK } from '@libs/ndk/provider';
 
 import { EnterIcon } from '@shared/icons';
 
-export function ChatForm({
-  receiverPubkey,
-  userPrivkey,
-}: {
-  receiverPubkey: string;
-  userPubkey: string;
-  userPrivkey: string;
-}) {
+export function ChatForm({ receiverPubkey }: { receiverPubkey: string }) {
   const { ndk } = useNDK();
   const [value, setValue] = useState('');
 
-  const encryptMessage = useCallback(async () => {
-    return await nip04.encrypt(userPrivkey, receiverPubkey, value);
-  }, [receiverPubkey, value]);
-
   const submit = async () => {
-    const message = await encryptMessage();
-    const tags = [['p', receiverPubkey]];
+    try {
+      const recipient = new NDKUser({ pubkey: receiverPubkey });
+      const message = await ndk.signer.encrypt(recipient, value);
 
-    const event = new NDKEvent(ndk);
-    event.content = message;
-    event.kind = NDKKind.EncryptedDirectMessage;
-    event.tags = tags;
+      const event = new NDKEvent(ndk);
+      event.content = message;
+      event.kind = NDKKind.EncryptedDirectMessage;
+      event.tag(recipient);
 
-    await event.publish();
+      const publish = await event.publish();
 
-    // reset state
-    setValue('');
+      if (publish) setValue('');
+    } catch (e) {
+      toast.error(e);
+    }
   };
 
   const handleEnterPress = (e: {
@@ -61,7 +53,7 @@ export function ChatForm({
           autoComplete="off"
           autoCorrect="off"
           autoCapitalize="off"
-          placeholder="Message"
+          placeholder="Message..."
           className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-600 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
         />
         <button

src/app/chats/components/message.tsx

@@ -3,14 +3,14 @@ import { twMerge } from 'tailwind-merge';
 
 import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
 
-export function ChatMessage({ message, self }: { message: NDKEvent; self: boolean }) {
+export function ChatMessage({ message, isSelf }: { message: NDKEvent; isSelf: boolean }) {
   const decryptedContent = useDecryptMessage(message);
 
   return (
     <div
       className={twMerge(
         'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
-        self
+        isSelf
           ? 'ml-auto rounded-l-xl bg-blue-500 text-white'
           : 'rounded-r-xl bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
       )}
@@ -18,9 +18,7 @@ export function ChatMessage({ message, self }: { message: NDKEvent; self: boolea
       {!decryptedContent ? (
         <p>Decrypting...</p>
       ) : (
-        <div>
-          <p className="select-text whitespace-pre-line">{decryptedContent}</p>
-        </div>
+        <p className="select-text whitespace-pre-line break-all">{decryptedContent}</p>
       )}
     </div>
   );