From 36c709f580721c080a9a1aa93efb255d610ccc61 Mon Sep 17 00:00:00 2001
From: Daniel Gonzalez <danielhumgon@gmail.com>
Date: Sat, 30 Aug 2025 15:02:10 -0400
Subject: [PATCH] feat(nostr): Added channel PFPs

---
 .../app-body/nostr-chat/channel-item.js       |  1 +
 .../app-body/nostr-chat/chat-header.js        | 10 +++++++---
 src/components/app-body/nostr-chat/index.js   |  6 ++++--
 .../app-body/nostr-chat/message-item.js       | 18 ++++-------------
 .../app-body/nostr-chat/message-list.js       | 20 +++++++++++++++----
 src/config/index.js                           |  2 +-
 6 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/components/app-body/nostr-chat/channel-item.js b/src/components/app-body/nostr-chat/channel-item.js
index 4a47699..af652a4 100644
--- a/src/components/app-body/nostr-chat/channel-item.js
+++ b/src/components/app-body/nostr-chat/channel-item.js
@@ -38,6 +38,7 @@ export default function ChannelItem (props) {
     >
       {chInfo?.name &&
         <div className='d-flex align-items-center'>
+          {chInfo.picture && <img src={chInfo.picture} alt={chInfo.name} style={{ width: '30px', marginRight: '5px' }} />}
           <span
             className='fw-medium'
             style={{
diff --git a/src/components/app-body/nostr-chat/chat-header.js b/src/components/app-body/nostr-chat/chat-header.js
index faa4320..76bbf08 100644
--- a/src/components/app-body/nostr-chat/chat-header.js
+++ b/src/components/app-body/nostr-chat/chat-header.js
@@ -26,9 +26,13 @@ function ChatHeader (props) {
   return (
     <div className='p-3 d-flex justify-content-between align-items-center' style={{ backgroundColor: '#ffffff' }}>
       {chInfo &&
-        <div className='flex-grow-1'>
-          <h5 className='mb-1 text-dark'>{chInfo?.name || getShortName(selectedChannel)}</h5>
-          <small className='text-muted'>{chInfo?.about || ''}</small>
+        <div className='d-flex justify-content-center align-items-center'>
+          {chInfo.picture && <img src={chInfo.picture} alt={chInfo.name} style={{ width: '50px', marginRight: '5px' }} />}
+          <div className='flex-grow-1'>
+            <h5 className='mb-1 text-dark'>{chInfo?.name || getShortName(selectedChannel)}</h5>
+            <small className='text-muted'>{chInfo?.about || ''}</small>
+          </div>
+
         </div>}
 
       {!chInfo &&
diff --git a/src/components/app-body/nostr-chat/index.js b/src/components/app-body/nostr-chat/index.js
index fd24e69..3dd74a2 100644
--- a/src/components/app-body/nostr-chat/index.js
+++ b/src/components/app-body/nostr-chat/index.js
@@ -19,6 +19,7 @@ function NostrChat (props) {
   const [loadedMessages, setLoadedMessages] = useState(false)
   const [profiles, setProfiles] = useState({})
   const [channelsData, setChannelsData] = useState({})
+  const [channelsLoaded, setChannelsLoaded] = useState(false)
   const [channels] = useState(config.chatsId)
 
   const [selectedChannel, setSelectedChannel] = useState(config.chatsId[0])
@@ -68,7 +69,7 @@ function NostrChat (props) {
 
   // Handle nostr pool
   useEffect(() => {
-    if (!selectedChannel) return
+    if (!selectedChannel || !channelsLoaded) return
 
     const relays = nostrQueries.relays
     if (relays.length === 0) {
@@ -96,7 +97,7 @@ function NostrChat (props) {
       console.log('Close existing pool')
       pool.close()
     }
-  }, [onMsgRead, selectedChannel, nostrQueries])
+  }, [onMsgRead, selectedChannel, nostrQueries, channelsLoaded])
 
   // Load channels data
   useEffect(() => {
@@ -120,6 +121,7 @@ function NostrChat (props) {
           newChs[ch] = channelData
           return newChs
         })
+        setChannelsLoaded(true)
       }
     }
 
diff --git a/src/components/app-body/nostr-chat/message-item.js b/src/components/app-body/nostr-chat/message-item.js
index fccec0c..e1af9a8 100644
--- a/src/components/app-body/nostr-chat/message-item.js
+++ b/src/components/app-body/nostr-chat/message-item.js
@@ -3,16 +3,15 @@
 */
 
 // Global npm libraries
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { Spinner } from 'react-bootstrap'
 
 function MessageItem (props) {
   const { message, profiles } = props
   const [profile, setProfile] = useState(null)
 
-  const msgRef = useRef(null)
-
   // Format timestamp
   const formatTime = (timestamp) => {
     return new Date(timestamp).toLocaleTimeString([], {
@@ -28,17 +27,8 @@ function MessageItem (props) {
     }
   }, [profiles, message])
 
-  useEffect(() => {
-    if (msgRef.current && message.latest) {
-      msgRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end'
-      })
-    }
-  }, [msgRef.current, message])
-
   return (
-    <div className='mb-3 d-flex align-items-start' ref={msgRef}>
+    <div className='mb-3 d-flex align-items-start'>
       {/* Message Content */}
       <div className='flex-grow-1'>
         <div
@@ -80,7 +70,7 @@ function MessageItem (props) {
                     }}
                   />}
             </div>
-            {!profile && <span className='fw-bold text-dark me-2'>{message.pubkey}</span>}
+            {!profile && <span className='fw-bold text-dark me-2'>{message.pubkey}<Spinner animation='border' size='sm' /></span>}
             {profile && profile.name && <span className='fw-bold text-dark me-2'>{profile.name}</span>}
 
             <small className='text-muted'>{formatTime(message.created_at * 1000)}</small>
diff --git a/src/components/app-body/nostr-chat/message-list.js b/src/components/app-body/nostr-chat/message-list.js
index 6a6beda..f6ed2e1 100644
--- a/src/components/app-body/nostr-chat/message-list.js
+++ b/src/components/app-body/nostr-chat/message-list.js
@@ -3,7 +3,7 @@
 */
 
 // Global npm libraries
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useEffect, useState, useCallback, useRef } from 'react'
 
 // Local libraries
 import MessageItem from './message-item'
@@ -13,12 +13,11 @@ import { Spinner } from 'react-bootstrap'
 function MessageList (props) {
   const { messages, loadedMessages } = props
   const [groupedMessages, setGroupedMessages] = useState([])
-
+  const msgContainerRef = useRef()
   // Group messages by date
   const groupMessagesByDate = useCallback((messages) => {
     const grouped = {}
     messages.forEach((message, i) => {
-      if (i === messages.length - 1) message.latest = true
       const date = new Date(message.created_at * 1000).toDateString()
       if (!grouped[date]) {
         grouped[date] = []
@@ -33,6 +32,19 @@ function MessageList (props) {
     const grouped = groupMessagesByDate(messages)
 
     setGroupedMessages(grouped)
+
+    // Scroll to end of the message container.
+    // Wait few seconds before load render.
+    setTimeout(() => {
+      if (msgContainerRef.current) {
+        console.log('scrolling')
+        msgContainerRef.current.scrollTo({
+          top: msgContainerRef.current.scrollHeight - msgContainerRef.current.clientHeight,
+          behavior: 'smooth'
+        })
+        msgContainerRef.current = null // scroll one time
+      }
+    }, 500)
   }, [messages, groupMessagesByDate])
 
   return (
@@ -66,7 +78,7 @@ function MessageList (props) {
         )}
 
         {loadedMessages && messages && messages.length > 0 && (
-          <div className='p-3' style={{ overflowY: 'auto', maxHeight: '50vh' }}>
+          <div ref={msgContainerRef} className='p-3' style={{ overflowY: 'auto', maxHeight: '50vh' }}>
             {Object.entries(groupedMessages).map(([date, dateMessages]) => (
               <div key={date}>
                 <DateSeparator date={date} />
diff --git a/src/config/index.js b/src/config/index.js
index b54a9a0..bab4cc5 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -24,7 +24,7 @@ const config = {
     'wss://nos.lol',
     'wss://relay.damus.io'
   ],
-  chatsId: [ 
+  chatsId: [
     '32b0ebc01c984008977fbe476e064946990df75525331b24b37bbba5e89f4039'
   ]