diff --git a/jam-ui/src/components/client/JKSessionChatButton.js b/jam-ui/src/components/client/JKSessionChatButton.js new file mode 100644 index 000000000..62f4f1507 --- /dev/null +++ b/jam-ui/src/components/client/JKSessionChatButton.js @@ -0,0 +1,78 @@ +import React, { useCallback } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { + openChatWindow, + setActiveChannel, + selectTotalUnreadCount, + selectIsChatWindowOpen +} from '../../store/features/sessionChatSlice'; +import chatIcon from '../../assets/img/client/chat.svg'; + +const JKSessionChatButton = ({ sessionId }) => { + const dispatch = useDispatch(); + const unreadCount = useSelector(selectTotalUnreadCount); + const isWindowOpen = useSelector(selectIsChatWindowOpen); + + const handleClick = useCallback(() => { + if (isWindowOpen) { + // Window already open - do nothing (or focus window if possible) + return; + } + + // Set active channel to session chat + dispatch(setActiveChannel({ + channel: sessionId, + channelType: 'session' + })); + + // Open chat window + dispatch(openChatWindow()); + }, [dispatch, sessionId, isWindowOpen]); + + // Format badge text + const getBadgeText = () => { + if (unreadCount === 0) return ''; + if (unreadCount >= 100) return '99+'; + return String(unreadCount); + }; + + return ( +
+ Chat + {unreadCount > 0 && ( +
+ {getBadgeText()} +
+ )} +
+ ); +}; + +export default JKSessionChatButton;