Add mentions in activity center (#152)

packages/react-chat/src/components/ActivityCenter.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
 import { useActivities } from "../contexts/activityProvider";
@@ -9,6 +9,7 @@ import { Activity } from "../models/Activity";
 import { equalDate } from "../utils/equalDate";
 
 import { buttonStyles } from "./Buttons/buttonStyle";
+import { Mention } from "./Chat/ChatMessageContent";
 import {
   ContentWrapper,
   DateSeparator,
@@ -63,6 +64,32 @@ function ActivityMessage({
     [activity.user, contacts]
   );
 
+  const [elements, setElements] = useState<
+    (string | React.ReactElement | undefined)[]
+  >([activity.message?.content]);
+
+  useEffect(() => {
+    if (activity.message) {
+      const split = activity.message?.content.split(" ");
+      const newSplit = split.flatMap((element, idx) => {
+        if (element.startsWith("@")) {
+          return [
+            <Mention
+              key={idx}
+              id={element}
+              setMentioned={() => true}
+              className="activity"
+            />,
+            " ",
+          ];
+        }
+        return [element, " "];
+      });
+      newSplit.pop();
+      setElements(newSplit);
+    }
+  }, [activity.message?.content]);
+
   return (
     <MessageOuterWrapper>
       <ActivityDate>
@@ -116,8 +143,10 @@ function ActivityMessage({
               </ContextHeading>
             )}
             <ActivityText>
-              {activity.message?.content ||
-                (activity.requestType === "income" && activity.request)}
+              {activity.message?.content && (
+                <div>{elements.map((el) => el)}</div>
+              )}
+              {activity.requestType === "income" && activity.request}
             </ActivityText>
             {type === "mention" &&
               activity.channel &&

packages/react-chat/src/components/Chat/ChatMessageContent.tsx

@@ -15,9 +15,10 @@ import { textMediumStyles, textSmallStyles } from "../Text";
 interface MentionProps {
   id: string;
   setMentioned: (val: boolean) => void;
+  className?: string;
 }
 
-function Mention({ id, setMentioned }: MentionProps) {
+export function Mention({ id, setMentioned, className }: MentionProps) {
   const { contacts } = useMessengerContext();
   const contact = useMemo(() => contacts[id.slice(1)], [id, contacts]);
   const [showMenu, setShowMenu] = useState(false);
@@ -30,7 +31,7 @@ function Mention({ id, setMentioned }: MentionProps) {
   }, [contact.id]);
 
   return (
-    <MentionBLock onClick={() => setShowMenu(!showMenu)}>
+    <MentionBLock onClick={() => setShowMenu(!showMenu)} className={className}>
       {`@${contact.customName ?? contact.id}`}
       {showMenu && <ContactMenu id={id.slice(1)} setShowMenu={setShowMenu} />}
     </MentionBLock>
@@ -207,6 +208,13 @@ const MentionBLock = styled.div`
     background: ${({ theme }) => theme.mentionHover};
   }
 
+  &.activity {
+    max-width: 488px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   ${textMediumStyles}
 `;