Merge pull request #60 from Permissionless-Software-Foundation/dh-in-chat-menu

feat(nostr): In Chat: clicking on name should open menu

src/components/app-body/nostr-chat/channel-item.js

@@ -4,7 +4,7 @@
 
 // Global npm libraries
 import React, { useCallback, useEffect, useState } from 'react'
-import { ListGroup, Spinner } from 'react-bootstrap'
+import { Spinner } from 'react-bootstrap'
 
 export default function ChannelItem (props) {
   const { channel, selectedChannel, onChangeChannel, channelsData } = props
@@ -20,40 +20,86 @@ export default function ChannelItem (props) {
     }
   }, [chInfo, channelsData, channel])
 
+  const handleClick = () => {
+    if (onChangeChannel) {
+      onChangeChannel(channel)
+    }
+  }
+
   return (
-    <ListGroup.Item
-      onClick={() => { onChangeChannel(channel) }}
-      key={channel}
-      className='border-0 bg-transparent text-dark'
+    <div
+      className={`d-flex align-items-center p-2 rounded-3 mb-2 cursor-pointer ${selectedChannel === channel ? 'bg-primary text-white' : ''}`}
       style={{
         cursor: 'pointer',
-        backgroundColor: selectedChannel === channel ? '#6f42c1' : 'transparent',
-        borderRadius: '8px',
-        marginBottom: '4px',
-        padding: '10px 12px',
         transition: 'all 0.2s ease',
-        border: selectedChannel === channel ? 'none' : '1px solid transparent',
-        boxShadow: selectedChannel === channel ? '0 2px 4px rgba(111, 66, 193, 0.15)' : 'none'
+        backgroundColor: selectedChannel === channel ? '#0d6efd' : 'transparent',
+        border: '1px solid transparent'
+      }}
+      onClick={handleClick}
+      onMouseEnter={(e) => {
+        if (selectedChannel !== channel) {
+          e.currentTarget.style.backgroundColor = '#e9ecef'
+          e.currentTarget.style.borderColor = '#dee2e6'
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (selectedChannel !== channel) {
+          e.currentTarget.style.backgroundColor = 'transparent'
+          e.currentTarget.style.borderColor = 'transparent'
+        }
       }}
     >
-      {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={{
-              fontSize: '14px',
-              color: selectedChannel === channel ? '#444444' : '#495057',
-              fontWeight: selectedChannel === channel ? '600' : '500'
-            }}
+      {/* Channel Avatar/Icon */}
+      <div className='me-3 flex-shrink-0 d-flex align-items-center'>
+        {chInfo?.picture
+          ? (
+            <img
+              src={chInfo.picture}
+              alt={chInfo.name || 'Channel'}
+              className='rounded-circle'
+              style={{ width: '32px', height: '32px' }}
+            />
+            )
+          : (
+            <div
+              className='rounded-circle d-flex align-items-center justify-content-center'
+              style={{
+                width: '32px',
+                height: '32px',
+                backgroundColor: '#e9ecef',
+                color: '#6c757d',
+                fontSize: '14px'
+              }}
+            >
+              #
+            </div>
+            )}
+      </div>
+
+      {/* Channel Info */}
+      <div className='flex-grow-1 min-w-0'>
+        <div
+          className={`${selectedChannel === channel ? 'text-white' : 'text-dark'} fw-medium`}
+          style={{ fontSize: '14px' }}
+        >
+          {chInfo?.name || getShortName(channel)}
+        </div>
+        {!chInfo?.name && (
+          <div
+            className={`small ${selectedChannel === channel ? 'text-white-50' : 'text-muted'}`}
+            style={{ fontSize: '12px' }}
           >
-            {chInfo?.name || getShortName(channel)}
-          </span>
-        </div>}
-      {!chInfo?.name &&
-        <div className='d-flex align-items-center'>
-          {getShortName(channel)} <Spinner animation='border' size='sm' style={{ marginLeft: '5px' }} />
-        </div>}
-    </ListGroup.Item>
+            Loading channel...
+          </div>
+        )}
+      </div>
+
+      {/* Loading indicator */}
+      {!chInfo?.name && (
+        <div className='ms-2'>
+          <Spinner animation='border' size='sm' />
+        </div>
+      )}
+    </div>
   )
 }

src/components/app-body/nostr-chat/channel-list.js

@@ -7,9 +7,9 @@ import React from 'react'
 import { ListGroup } from 'react-bootstrap'
 import ChannelItem from './channel-item'
 function ChannelList (props) {
-  const { channels, selectedChannel } = props
+  const { groupChannels, selectedChannel } = props
 
-  if (!channels || channels.length === 0) {
+  if (!groupChannels || groupChannels.length === 0) {
     return (
       <div className='text-muted small' style={{ fontStyle: 'italic' }}>
         No channels available
@@ -19,7 +19,7 @@ function ChannelList (props) {
 
   return (
     <ListGroup variant='flush' className='bg-transparent'>
-      {channels.map((channel, i) => (
+      {groupChannels.map((channel, i) => (
         <ChannelItem key={`channel${i}`} channel={channel} selectedChannel={selectedChannel} {...props} />
       ))}
     </ListGroup>

src/components/app-body/nostr-chat/chat-header.js

@@ -9,7 +9,8 @@ function ChatHeader (props) {
   const { selectedChannel, channelsData } = props
   const [chInfo, setChInfo] = useState() // channel data
   const getShortName = useCallback((str) => {
-    return str.slice(0, 8) + '...' + str.slice(-5)
+    if (str.length < 20) return str
+    return str.slice(0, 4) + '...' + str.slice(-4)
   }, [])
 
   // Restore ch info
@@ -27,9 +28,9 @@ function ChatHeader (props) {
     <div className='p-3 d-flex justify-content-between align-items-center' style={{ backgroundColor: '#ffffff' }}>
       {chInfo &&
         <div className='d-flex justify-content-center align-items-center'>
-          {chInfo.picture && <img src={chInfo.picture} alt={chInfo.name} style={{ width: '50px', marginRight: '5px' }} />}
+          {chInfo.picture && <img src={chInfo.picture} alt={chInfo.name} style={{ width: '50px', marginRight: '10px', borderRadius: '50%' }} />}
           <div className='flex-grow-1'>
-            <h5 className='mb-1 text-dark'>{chInfo?.name || getShortName(selectedChannel)}</h5>
+            <h5 className='mb-1 text-dark'>{getShortName(chInfo?.name || selectedChannel)}</h5>
             <small className='text-muted'>{chInfo?.about || ''}</small>
           </div>
 

src/components/app-body/nostr-chat/chat-sidebar.js

@@ -7,9 +7,10 @@ import React from 'react'
 
 // Local libraries
 import ChannelList from './channel-list'
+import DMList from './dm-list'
 
 function ChatSidebar (props) {
-  const { channels, selectedChannel } = props
+  const { dmChannels, profiles } = props
 
   return (
     <div className='h-100 d-flex flex-column' style={{ backgroundColor: '#ffffff', borderRight: '1px solid #e9ecef' }}>
@@ -22,10 +23,22 @@ function ChatSidebar (props) {
             </h5>
           </div>
           <ChannelList
-            channels={channels}
-            selectedChannel={selectedChannel}
             {...props}
           />
+
+          {/* DMs Section */}
+          <div className='mt-4 pt-4 border-top'>
+            <div className='d-flex justify-content-between align-items-center mb-3'>
+              <h5 className='mb-0 text-dark fw-semibold' style={{ fontSize: '16px', letterSpacing: '0.5px' }}>
+                DMs
+              </h5>
+            </div>
+            <DMList
+              dms={dmChannels}
+              profiles={profiles}
+              {...props}
+            />
+          </div>
         </div>
       </div>
     </div>

src/components/app-body/nostr-chat/dm-item.js

@@ -0,0 +1,113 @@
+/*
+  Component for displaying direct message item
+*/
+
+// Global npm libraries
+import React, { useCallback } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+
+export default function DMItem (props) {
+  const { dm, profiles, selectedChannel, onChangeChannel } = props
+  const { pubKey } = dm
+  const profile = profiles[pubKey]
+  const isSelected = selectedChannel === pubKey
+
+  const getShortName = useCallback((str) => {
+    if (str.length < 20) return str
+    return str.slice(0, 4) + '...' + str.slice(-4)
+  }, [])
+
+  const handleClick = () => {
+    if (onChangeChannel) {
+      onChangeChannel(pubKey)
+    }
+  }
+
+  return (
+    <div
+      className={`d-flex align-items-center p-2 rounded-3 mb-2 cursor-pointer ${isSelected ? 'bg-primary text-white' : ''}`}
+      style={{
+        cursor: 'pointer',
+        transition: 'all 0.2s ease',
+        backgroundColor: isSelected ? '#0d6efd' : 'transparent',
+        border: '1px solid transparent'
+      }}
+      onClick={handleClick}
+      onMouseEnter={(e) => {
+        if (!isSelected) {
+          e.currentTarget.style.backgroundColor = '#e9ecef'
+          e.currentTarget.style.borderColor = '#dee2e6'
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isSelected) {
+          e.currentTarget.style.backgroundColor = 'transparent'
+          e.currentTarget.style.borderColor = 'transparent'
+        }
+      }}
+    >
+      {/* User Avatar */}
+      <div className='me-3 flex-shrink-0 d-flex align-items-center'>
+        {profile?.picture
+          ? (
+            <img
+              src={profile.picture}
+              alt={`${profile.name || 'User'} Avatar`}
+              className='rounded-circle'
+              style={{ width: '32px', height: '32px' }}
+              onError={(e) => {
+                e.target.style.display = 'none'
+                e.target.nextSibling.style.display = 'flex'
+              }}
+            />
+            )
+          : <FontAwesomeIcon
+              icon={faUser}
+              className='rounded-circle d-flex align-items-center justify-content-center'
+              style={{
+                width: '32px',
+                height: '32px',
+                backgroundColor: profile?.picture ? 'transparent' : '#e9ecef',
+                color: profile?.picture ? 'transparent' : '#6c757d',
+                fontSize: '14px',
+                display: profile?.picture ? 'none' : 'flex'
+              }}
+            />}
+      </div>
+
+      {/* User Info */}
+      <div className='flex-grow-1 min-w-0'>
+        <div
+          className={`${isSelected ? 'text-white' : 'text-dark'} ${dm.unreadCount > 0 ? 'fw-bold' : 'fw-medium'}`}
+          style={{ fontSize: '14px' }}
+        >
+          {getShortName(profile?.name) || 'Unknown User'}
+        </div>
+        <div
+          className={`small ${isSelected ? 'text-white-50' : 'text-muted'} ${dm.unreadCount > 0 ? 'fw-bold' : ''}`}
+          style={{ fontSize: '12px' }}
+        >
+          No messages yet
+        </div>
+      </div>
+
+      {/* Unread indicator */}
+      {/* {dm.unreadCount > 0 && (
+        <div className='ms-2'>
+          <span
+            className='badge rounded-pill'
+            style={{
+              backgroundColor: isSelected ? '#ffffff' : '#dc3545',
+              color: isSelected ? '#0d6efd' : '#ffffff',
+              fontSize: '10px',
+              minWidth: '18px'
+            }}
+          >
+            {dm.unreadCount > 99 ? '99+' : dm.unreadCount}
+          </span>
+        </div>
+      )} */}
+    </div>
+  )
+}

src/components/app-body/nostr-chat/dm-list.js

@@ -0,0 +1,44 @@
+/*
+  Component for displaying a list of direct messages
+*/
+
+// Global npm libraries
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+import DMItem from './dm-item'
+
+function DMList (props) {
+  const { dmChannels, profiles, selectedChannel, onChangeChannel } = props
+
+  if (dmChannels.length === 0) {
+    return (
+      <div className='text-center p-3'>
+        <div className='text-muted mb-2'>
+          <FontAwesomeIcon icon={faUser} style={{ fontSize: '24px', opacity: 0.5 }} />
+        </div>
+        <div className='text-muted small'>No direct messages yet</div>
+        <div className='text-muted small' style={{ fontSize: '11px' }}>
+          Start a conversation to see it here
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='dm-list'>
+      {dmChannels.map((pubKey) => (
+        <DMItem
+          key={pubKey}
+          dm={{ pubKey }}
+          profiles={profiles}
+          selectedChannel={selectedChannel}
+          onChangeChannel={onChangeChannel}
+          {...props}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default DMList

src/components/app-body/nostr-chat/index.js

@@ -20,7 +20,8 @@ function NostrChat (props) {
   const [profiles, setProfiles] = useState({})
   const [channelsData, setChannelsData] = useState({})
   const [channelsLoaded, setChannelsLoaded] = useState(false)
-  const [channels] = useState(config.chatsId)
+  const [groupChannels] = useState(config.chatsId)
+  const [dmChannels, setDmChannels] = useState([])
 
   const [selectedChannel, setSelectedChannel] = useState(config.chatsId[0])
   const profilesRef = useRef({})
@@ -59,6 +60,10 @@ function NostrChat (props) {
       const nostrProfile = await appData.nostrQueries.getProfile(pubKey)
 
       const profile = nostrProfile || defaultProfile
+      const npub = await appData.nostrQueries.hexToNpub(pubKey)
+      // add public key formats to profile object
+      profile.pubKey = pubKey
+      profile.npub = npub
       // Update profiles state
       setProfiles(currentProfiles => {
         const newProfiles = { ...currentProfiles }
@@ -108,8 +113,8 @@ function NostrChat (props) {
   useEffect(() => {
     const loadChData = async () => {
       const loadedChannels = []
-      for (let i = 0; i < channels.length; i++) {
-        const ch = channels[i]
+      for (let i = 0; i < groupChannels.length; i++) {
+        const ch = groupChannels[i]
 
         const exist = loadedChannels.find((val) => { return val === ch })
         if (exist) { continue }
@@ -120,7 +125,7 @@ function NostrChat (props) {
         if (!channelData) channelData = { name: ch.slice(0, 8) + '...' + ch.slice(-5) }
         loadedChannels.push(channelData)
 
-        // Update profile state
+        // Update channels data state
         setChannelsData(currentChs => {
           const newChs = { ...currentChs }
           newChs[ch] = channelData
@@ -132,14 +137,40 @@ function NostrChat (props) {
 
     // loadMessages()
     loadChData()
-  }, [selectedChannel, appData, channels])
+  }, [selectedChannel, appData, groupChannels])
+
+  const addPrivateMessage = async (profile) => {
+    try {
+      const exist = dmChannels.find(val => val === profile.pubKey)
+
+      setSelectedChannel(profile.pubKey)
+      if (exist) return
+      setDmChannels(currentChs => {
+        const newChs = [...currentChs]
+        newChs.push(profile.pubKey)
+        return newChs
+      })
+      setChannelsData(currentChs => {
+        const newChs = { ...currentChs }
+        newChs[profile.pubKey] = profile
+        return newChs
+      })
+
+      setMessages([])
+
+      // setSelectedChannel(profile.pubKey)
+    } catch (error) {
+      console.warn(error)
+    }
+  }
 
   // Reset states on change channel
   const onChangeChannel = useCallback((ch) => {
+    if (selectedChannel === ch) return
     setSelectedChannel(ch)
     setMessages([])
     setLoadedMessages(false)
-  }, [])
+  }, [selectedChannel])
 
   return (
     <>
@@ -147,7 +178,8 @@ function NostrChat (props) {
         <Row className='h-100 g-0'>
           <Col xs={12} md={4} lg={3} className='h-100'>
             <ChatSidebar
-              channels={channels}
+              groupChannels={groupChannels}
+              dmChannels={dmChannels}
               selectedChannel={selectedChannel}
               profiles={profiles}
               channelsData={channelsData}
@@ -163,6 +195,7 @@ function NostrChat (props) {
               profiles={profiles}
               channelsData={channelsData}
               onChangeChannel={onChangeChannel}
+              addPrivateMessage={addPrivateMessage}
               {...props}
             />
           </Col>

src/components/app-body/nostr-chat/message-input.js

@@ -12,7 +12,7 @@ import { hexToBytes } from '@noble/hashes/utils' // already an installed depende
 import { Relay } from 'nostr-tools/relay'
 
 function MessageInput (props) {
-  const { appData, selectedChannel } = props
+  const { appData, selectedChannel, profiles } = props
   const { bchWalletState, writeRelays } = appData
   const [message, setMessage] = useState('')
   const [onFetch, setOnFetch] = useState(false)
@@ -82,7 +82,7 @@ function MessageInput (props) {
           <Form.Control
             as='textarea'
             rows={3}
-            placeholder='Type a message...'
+            placeholder={profiles[selectedChannel] ? 'Coming soon...' : 'Type a message...'}
             className='border-1 bg-transparent text-dark'
             style={{
               backgroundColor: '#f8f9fa',
@@ -96,7 +96,7 @@ function MessageInput (props) {
             }}
             value={message}
             onChange={onChange}
-            disabled={onFetch}
+            disabled={onFetch || profiles[selectedChannel]}
           />
 
           <Button
@@ -110,7 +110,7 @@ function MessageInput (props) {
               marginBottom: '8px'
             }}
             title='Send message'
-            disabled={onFetch}
+            disabled={onFetch || profiles[selectedChannel]}
 
           >
             <FontAwesomeIcon icon={faPaperPlane} />

src/components/app-body/nostr-chat/message-item.js

@@ -8,6 +8,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
 import { Spinner } from 'react-bootstrap'
 import NostrFormat from '../../app-body/nostr/nostr-format'
+import ProfileMenu from './profile-menu'
 
 function MessageItem (props) {
   const { message, profiles } = props
@@ -47,32 +48,54 @@ function MessageItem (props) {
             <div className='me-2 flex-shrink-0'>
               {profile?.picture
                 ? (
-                  <img
-                    src={profile.picture}
-                    alt={`${profile.name} Avatar`}
-                    className='rounded-circle'
-                    style={{ width: '24px', height: '24px' }}
-                    onError={(e) => {
-                      e.target.style.display = 'none'
-                      e.target.nextSibling.style.display = 'block'
-                    }}
-                  />
+                  <ProfileMenu
+                    profile={profile}
+                    {...props}
+                  >
+                    <img
+                      src={profile.picture}
+                      alt={`${profile.name} Avatar`}
+                      className='rounded-circle'
+                      style={{ width: '24px', height: '24px' }}
+                      onError={(e) => {
+                        e.target.style.display = 'none'
+                        e.target.nextSibling.style.display = 'block'
+                      }}
+                    />
+                  </ProfileMenu>
                   )
-                : <FontAwesomeIcon
-                    icon={faUser}
-                    className='rounded-circle d-flex align-items-center justify-content-center'
-                    style={{
-                      width: '24px',
-                      height: '24px',
-                      backgroundColor: '#e9ecef',
-                      color: '#6c757d',
-                      fontSize: '12px',
-                      display: message.avatar ? 'none' : 'flex'
-                    }}
-                  />}
+                : (
+                  <ProfileMenu
+                    profile={profile}
+                    {...props}
+
+                  >
+                    <FontAwesomeIcon
+                      icon={faUser}
+                      className='rounded-circle d-flex align-items-center justify-content-center'
+                      style={{
+                        width: '24px',
+                        height: '24px',
+                        backgroundColor: '#e9ecef',
+                        color: '#6c757d',
+                        fontSize: '12px',
+                        display: message.avatar ? 'none' : 'flex'
+                      }}
+                    />
+                  </ProfileMenu>
+                  )}
             </div>
             {!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>}
+            {profile && profile.name && (
+              <ProfileMenu
+                profile={profile}
+                {...props}
+              >
+                <span className='fw-bold text-dark me-2'>
+                  {profile.name}
+                </span>
+              </ProfileMenu>
+            )}
 
             <small className='text-muted'>{formatTime(message.created_at * 1000)}</small>
           </div>

src/components/app-body/nostr-chat/message-list.js

@@ -69,7 +69,7 @@ function MessageList (props) {
         }}
       >
         {loadedMessages && (!messages || messages.length === 0) && (
-          <div className='h-100 d-flex align-items-center justify-content-center'>
+          <div className='h-100 d-flex align-items-center justify-content-center ' style={{ minHeight: '50vh' }}>
             <div className='text-center text-muted'>
               <p>No messages yet. Start the conversation!</p>
             </div>

src/components/app-body/nostr-chat/profile-menu.js

@@ -0,0 +1,64 @@
+/*
+  Component for displaying a profile menu
+*/
+
+// Global npm libraries
+import React from 'react'
+import Dropdown from 'react-bootstrap/Dropdown'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faMessage, faUser } from '@fortawesome/free-solid-svg-icons'
+
+function ProfileMenu (props) {
+  const { profile, children, addPrivateMessage } = props
+
+  const handlePrivateMessage = () => {
+    addPrivateMessage(profile)
+  }
+
+  const handleUserProfile = () => {
+    const profileUrl = `${window.location.origin}/profile/${profile.npub}#single-view`
+    window.open(profileUrl, '_blank')
+  }
+
+  return (
+    <>
+      <style>
+        {`
+          .dropdown-toggle-no-arrow::after {
+            display: none !important;
+          }
+        `}
+      </style>
+
+      <Dropdown>
+        <Dropdown.Toggle
+          as='div'
+          className='d-inline-block dropdown-toggle-no-arrow'
+          style={{
+            cursor: 'pointer',
+            '--bs-btn-padding-x': '0',
+            '--bs-btn-padding-y': '0'
+          }}
+        >
+          {children}
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu className='shadow-sm' style={{ minWidth: '180px' }}>
+          <Dropdown.Header className='text-muted fw-bold'>
+            Profile Options
+          </Dropdown.Header>
+          <Dropdown.Item onClick={handlePrivateMessage}>
+            <FontAwesomeIcon icon={faMessage} className='me-2' />
+            Private Message
+          </Dropdown.Item>
+          <Dropdown.Item onClick={handleUserProfile}>
+            <FontAwesomeIcon icon={faUser} className='me-2' />
+            User Profile
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  )
+}
+
+export default ProfileMenu

src/services/nostr-queries.js

@@ -20,6 +20,10 @@ export default class NostrQueries {
     return pubHex
   }
 
+  hexToNpub (hex) {
+    return nip19.npubEncode(hex)
+  }
+
   // Load profile from nostr relays
   // It uses multiple relays. It will exit after the first successful retrieval
   // from any relay. If one relay fails, it will move on to the next one.