diff --git a/public/index.html b/public/index.html index 02dabcc8..7893ce58 100644 --- a/public/index.html +++ b/public/index.html @@ -11,7 +11,7 @@ /> - React App + Nitro diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss index d472cfe1..d5880584 100644 --- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss +++ b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss @@ -15,6 +15,18 @@ } } +.chat-mention { + padding: 1px 5px; + font-weight: bold; + background: rgba(0, 0, 0, .2); + cursor: pointer; + border-radius: 100px; + + &:hover { + color: blue; + } +} + .bubble-container { position: absolute; width: fit-content; diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx b/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx index 6492a106..1bf2756d 100644 --- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx +++ b/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx @@ -1,10 +1,12 @@ import { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react'; +import { GetSessionDataManager } from '../../../../../api'; import { ChatWidgetMessageViewProps } from './ChatWidgetMessageView.types'; export const ChatWidgetMessageView: FC = props => { const { chat = null, makeRoom = null } = props; - const [ isVisible, setIsVisible ] = useState(false); + const [ isVisible, setIsVisible ] = useState(true); + const [ messageParts, setMessageParts ] = useState<{text: string, className?: string, style?: any, onClick?: () => void}[]>(null); const elementRef = useRef(); const onClick = useCallback((event: MouseEvent) => @@ -12,6 +14,38 @@ export const ChatWidgetMessageView: FC = props => }, []); + useEffect(() => + { + if(messageParts) return; + + const userNameMention = '@' + GetSessionDataManager().userName; + + const matches = [...chat.text.matchAll(new RegExp(userNameMention + '\\b', 'gi'))]; + + if(matches.length > 0) + { + const prevText = chat.text.substr(0, matches[0].index); + const postText = chat.text.substring(matches[0].index + userNameMention.length, chat.text.length); + + setMessageParts( + [ + { text: prevText }, + { text: userNameMention, className: 'chat-mention', onClick: () => {alert('I clicked in the mention')}}, + { text: postText } + ] + ); + } + else + { + setMessageParts( + [ + { text: chat.text } + ] + ); + } + + }, [ chat ]); + useEffect(() => { const element = elementRef.current; @@ -62,7 +96,12 @@ export const ChatWidgetMessageView: FC = props => { (chat.imageUrl && (chat.imageUrl !== '')) &&
}
- { chat.username } { chat.text } + { chat.username } { + messageParts && messageParts.map((part, index) => + { + return { part.text } + }) + }