diff --git a/packages/react-chat/src/components/Channels/Channel.tsx b/packages/react-chat/src/components/Channels/Channel.tsx index 2f2ee5fd..59443e5c 100644 --- a/packages/react-chat/src/components/Channels/Channel.tsx +++ b/packages/react-chat/src/components/Channels/Channel.tsx @@ -10,6 +10,7 @@ import { textMediumStyles } from "../Text"; interface ChannelProps { channel: ChannelData; notification?: number; + mention?: number; isActive: boolean; isMuted: boolean; activeView?: boolean; @@ -23,13 +24,13 @@ export function Channel({ activeView, onClick, notification, + mention, }: ChannelProps) { const narrow = useNarrow(); const className = useMemo( () => (narrow && !activeView ? "narrow" : activeView ? "active" : ""), [narrow] ); - const mention = false; return ( {notification && notification > 0 && !activeView && mention && ( - {notification} + {mention} )} {isMuted && !notification && } diff --git a/packages/react-chat/src/components/Channels/Channels.tsx b/packages/react-chat/src/components/Channels/Channels.tsx index d930fcfe..b03c554a 100644 --- a/packages/react-chat/src/components/Channels/Channels.tsx +++ b/packages/react-chat/src/components/Channels/Channels.tsx @@ -21,6 +21,8 @@ export function Channels({ }: ChannelsProps) { const { clearNotifications, + clearMentions, + mentions, notifications, activeChannel, setActiveChannel, @@ -32,6 +34,7 @@ export function Channels({ if (channel) { if (notifications[channel.id] > 0) { clearNotifications(channel.id); + clearMentions(channel.id); } } }, [notifications, activeChannelId]); @@ -49,6 +52,11 @@ export function Channels({ ? notifications[channel.id] : undefined } + mention={ + mentions[channel.id] > 0 && !channel.isMuted + ? mentions[channel.id] + : undefined + } onClick={() => { setActiveChannel(channel); if (onCommunityClick) { diff --git a/packages/react-chat/src/contexts/messengerProvider.tsx b/packages/react-chat/src/contexts/messengerProvider.tsx index 494e62e7..f86cdd7d 100644 --- a/packages/react-chat/src/contexts/messengerProvider.tsx +++ b/packages/react-chat/src/contexts/messengerProvider.tsx @@ -9,6 +9,8 @@ const MessengerContext = createContext({ sendMessage: async () => undefined, notifications: {}, clearNotifications: () => undefined, + mentions: {}, + clearMentions: () => undefined, loadPrevDay: async () => undefined, loadingMessages: false, communityData: undefined, diff --git a/packages/react-chat/src/hooks/messenger/useMessages.ts b/packages/react-chat/src/hooks/messenger/useMessages.ts index 4bf212e7..d1648578 100644 --- a/packages/react-chat/src/hooks/messenger/useMessages.ts +++ b/packages/react-chat/src/hooks/messenger/useMessages.ts @@ -2,20 +2,28 @@ import { useCallback, useMemo, useState } from "react"; import { ApplicationMetadataMessage, Contacts, + Identity, } from "status-communities/dist/cjs"; +import { bufToHex } from "status-communities/dist/cjs/utils"; import { ChatMessage } from "../../models/ChatMessage"; import { binarySetInsert } from "../../utils"; import { useNotifications } from "./useNotifications"; -export function useMessages(chatId: string, contacts?: Contacts) { +export function useMessages( + chatId: string, + identity: Identity | undefined, + contacts?: Contacts +) { const [messages, setMessages] = useState<{ [chatId: string]: ChatMessage[] }>( {} ); const { notifications, incNotification, clearNotifications } = useNotifications(); + const mentions = useNotifications(); + const addMessage = useCallback( (msg: ApplicationMetadataMessage, id: string, date: Date) => { const newMessage = ChatMessage.fromMetadataMessage(msg, date); @@ -33,9 +41,15 @@ export function useMessages(chatId: string, contacts?: Contacts) { }; }); incNotification(id); + if ( + identity && + newMessage.content.includes(`@${bufToHex(identity.publicKey)}`) + ) { + mentions.incNotification(id); + } } }, - [contacts] + [contacts, identity] ); const activeMessages = useMemo( @@ -48,5 +62,7 @@ export function useMessages(chatId: string, contacts?: Contacts) { addMessage, notifications, clearNotifications, + mentions: mentions.notifications, + clearMentions: mentions.clearNotifications, }; } diff --git a/packages/react-chat/src/hooks/messenger/useMessenger.ts b/packages/react-chat/src/hooks/messenger/useMessenger.ts index 65172d4f..0dbc70e2 100644 --- a/packages/react-chat/src/hooks/messenger/useMessenger.ts +++ b/packages/react-chat/src/hooks/messenger/useMessenger.ts @@ -27,6 +27,8 @@ export type MessengerType = { ) => Promise; notifications: { [chatId: string]: number }; clearNotifications: (id: string) => void; + mentions: { [chatId: string]: number }; + clearMentions: (id: string) => void; loadPrevDay: (id: string) => Promise; loadingMessages: boolean; communityData: CommunityData | undefined; @@ -79,8 +81,14 @@ export function useMessenger( }); }, [internalContacts]); - const { addMessage, clearNotifications, notifications, messages } = - useMessages(chatId, contactsClass); + const { + addMessage, + clearNotifications, + notifications, + messages, + mentions, + clearMentions, + } = useMessages(chatId, identity, contactsClass); const [community, setCommunity] = useState(undefined); const { loadPrevDay, loadingMessages } = useLoadPrevDay(chatId, messenger); @@ -180,5 +188,7 @@ export function useMessenger( channels, activeChannel, setActiveChannel, + mentions, + clearMentions, }; }