wip

src/app/chats/components/chaListItem.tsx

@@ -41,7 +41,7 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
       preventScrollReset={true}
       className={({ isActive }) =>
         twMerge(
-          'flex items-center gap-2.5 px-3 py-2 hover:bg-white/10',
+          'flex items-center gap-2.5 px-3 py-1.5 hover:bg-white/10',
           isActive
             ? 'border-fuchsia-500 bg-white/5 text-white'
             : 'border-transparent text-white/70'
@@ -55,14 +55,10 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
           loading="lazy"
           decoding="async"
           style={{ contentVisibility: 'auto' }}
-          className="h-10 w-10 rounded-lg"
+          className="h-9 w-9 rounded-lg"
         />
         <Avatar.Fallback delayMs={300}>
-          <img
-            src={svgURI}
-            alt={event.pubkey}
-            className="h-10 w-10 rounded-lg border border-white/5 bg-black"
-          />
+          <img src={svgURI} alt={event.pubkey} className="h-9 w-9 rounded-lg bg-white" />
         </Avatar.Fallback>
       </Avatar.Root>
       <div className="flex w-full flex-col">

src/app/chats/components/chatForm.tsx

@@ -1,14 +1,13 @@
 import { nip04 } from 'nostr-tools';
 import { useCallback, useState } from 'react';
-import TextareaAutosize from 'react-textarea-autosize';
 
-import { MediaUploader } from '@app/chats/components/messages/mediaUploader';
+import { MediaUploader } from '@app/chats/components/mediaUploader';
 
 import { EnterIcon } from '@shared/icons';
 
 import { useNostr } from '@utils/hooks/useNostr';
 
-export function ChatMessageForm({
+export function ChatForm({
   receiverPubkey,
   userPrivkey,
 }: {
@@ -46,24 +45,24 @@ export function ChatMessageForm({
   };
 
   return (
-    <div className="flex w-full items-center justify-between rounded-md bg-white/20 px-3">
-      <TextareaAutosize
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={handleEnterPress}
-        spellCheck={false}
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="off"
-        placeholder="Message"
-        className="min-h-[44px] flex-1 resize-none bg-transparent py-3 text-white !outline-none placeholder:text-white"
-      />
-      <div className="inline-flex items-center gap-2">
-        <MediaUploader setState={setValue} />
+    <div className="flex items-center gap-2">
+      <MediaUploader setState={setValue} />
+      <div className="flex w-full items-center justify-between rounded-full bg-white/20 px-3">
+        <input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleEnterPress}
+          spellCheck={false}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          placeholder="Message"
+          className="h-10 flex-1 resize-none bg-transparent px-3 text-white placeholder:text-white/80 focus:outline-none"
+        />
         <button
           type="button"
           onClick={submit}
-          className="inline-flex items-center gap-1.5 text-sm font-medium leading-none text-white/50"
+          className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-white/80"
         >
           <EnterIcon className="h-5 w-5" />
           Send

src/app/chats/components/mediaUploader.tsx

@@ -29,12 +29,12 @@ export function MediaUploader({
           <button
             type="button"
             onClick={() => uploadMedia()}
-            className="group inline-flex h-8 w-8 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
+            className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-xl hover:bg-white/20"
           >
             {loading ? (
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              <LoaderIcon className="h-4 w-4 animate-spin" />
             ) : (
-              <MediaIcon className="h-5 w-5 text-white" />
+              <MediaIcon className="h-4 w-4" />
             )}
           </button>
         </Tooltip.Trigger>

src/app/chats/components/message.tsx

@@ -0,0 +1,54 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+
+import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
+
+import { ImagePreview, LinkPreview, MentionNote, VideoPreview } from '@shared/notes';
+import { User } from '@shared/user';
+
+import { parser } from '@utils/parser';
+
+export function ChatMessage({
+  message,
+  userPubkey,
+  userPrivkey,
+}: {
+  message: NDKEvent;
+  userPubkey: string;
+  userPrivkey: string;
+}) {
+  const decryptedContent = useDecryptMessage(message, userPubkey, userPrivkey);
+  const richContent = parser(decryptedContent) ?? null;
+
+  return (
+    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-white/10">
+      <div className="flex flex-col">
+        <User pubkey={message.pubkey} time={message.created_at} variant="chat" />
+        <div className="-mt-6 flex items-start gap-3">
+          <div className="w-10 shrink-0" />
+          {!richContent ? (
+            <p>Decrypting...</p>
+          ) : (
+            <div>
+              <p className="select-text whitespace-pre-line text-white">
+                {richContent.parsed}
+              </p>
+              <div>
+                {richContent.images.length > 0 && (
+                  <ImagePreview urls={richContent.images} />
+                )}
+                {richContent.videos.length > 0 && (
+                  <VideoPreview urls={richContent.videos} />
+                )}
+                {richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
+                {richContent.notes.length > 0 &&
+                  richContent.notes.map((note: string) => (
+                    <MentionNote key={note} id={note} />
+                  ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,34 +0,0 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
-
-import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
-
-import { TextNote } from '@shared/notes';
-import { User } from '@shared/user';
-
-export function ChatMessageItem({
-  message,
-  userPubkey,
-  userPrivkey,
-}: {
-  message: NDKEvent;
-  userPubkey: string;
-  userPrivkey: string;
-}) {
-  const decryptedContent = useDecryptMessage(message, userPubkey, userPrivkey);
-  // if we have decrypted content, use it instead of the encrypted content
-  if (decryptedContent) {
-    message['content'] = decryptedContent;
-  }
-
-  return (
-    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-white/10">
-      <div className="flex flex-col">
-        <User pubkey={message.pubkey} time={message.created_at} variant="chat" />
-        <div className="-mt-5 flex items-start gap-3">
-          <div className="w-10 shrink-0" />
-          <TextNote content={message.content} />
-        </div>
-      </div>
-    </div>
-  );
-}