update urls and user page

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

@@ -0,0 +1,71 @@
+import { nip04 } from 'nostr-tools';
+import { useCallback, useState } from 'react';
+
+import { EnterIcon } from '@shared/icons';
+import { MediaUploader } from '@shared/mediaUploader';
+
+import { usePublish } from '@utils/hooks/usePublish';
+
+export function ChatMessageForm({
+  receiverPubkey,
+  userPrivkey,
+}: {
+  receiverPubkey: string;
+  userPubkey: string;
+  userPrivkey: string;
+}) {
+  const { publish } = usePublish();
+  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]];
+
+    // publish message
+    await publish({ content: message, kind: 4, tags });
+
+    // reset state
+    setValue('');
+  };
+
+  const handleEnterPress = (e: {
+    key: string;
+    shiftKey: any;
+    preventDefault: () => void;
+  }) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+    }
+  };
+
+  return (
+    <div className="relative h-11 w-full">
+      <input
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleEnterPress}
+        spellCheck={false}
+        placeholder="Message"
+        className="relative h-11 w-full resize-none rounded-md bg-zinc-800 px-5 !outline-none placeholder:text-zinc-500"
+      />
+      <div className="absolute right-2 top-0 h-11">
+        <div className="flex h-full items-center justify-end gap-3 text-zinc-500">
+          <MediaUploader setState={setValue} />
+          <button
+            type="button"
+            onClick={submit}
+            className="inline-flex items-center gap-1 text-sm leading-none"
+          >
+            <EnterIcon width={14} height={14} className="" />
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
+
+import { MentionNote } from '@shared/notes/mentions/note';
+import { ImagePreview } from '@shared/notes/preview/image';
+import { LinkPreview } from '@shared/notes/preview/link';
+import { VideoPreview } from '@shared/notes/preview/video';
+import { User } from '@shared/user';
+
+import { parser } from '@utils/parser';
+
+export function ChatMessageItem({
+  data,
+  userPubkey,
+  userPrivkey,
+}: {
+  data: any;
+  userPubkey: string;
+  userPrivkey: string;
+}) {
+  const decryptedContent = useDecryptMessage(data, userPubkey, userPrivkey);
+  // if we have decrypted content, use it instead of the encrypted content
+  if (decryptedContent) {
+    data['content'] = decryptedContent;
+  }
+  // parse the note content
+  const content = parser(data);
+
+  return (
+    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
+      <div className="flex flex-col">
+        <User pubkey={data.sender_pubkey} time={data.created_at} isChat={true} />
+        <div className="-mt-[20px] pl-[49px]">
+          <p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
+            {content.parsed}
+          </p>
+          {content.images.length > 0 && <ImagePreview urls={content.images} />}
+          {content.videos.length > 0 && <VideoPreview urls={content.videos} />}
+          {content.links.length > 0 && <LinkPreview urls={content.links} />}
+          {content.notes.length > 0 &&
+            content.notes.map((note: string) => <MentionNote key={note} id={note} />)}
+        </div>
+      </div>
+    </div>
+  );
+}