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,
};
}