Feat #572: add emoji reactions to messages (desktop)

CHANGELOG.md

@@ -32,6 +32,7 @@
 
 * Adds private channels with modifiable membership (no removals) to desktop [#3155](https://github.com/TryQuiet/quiet/issues/3155)
 * Adds private channels with modifiable membership (no removals) to mobile [#3155](https://github.com/TryQuiet/quiet/issues/3155)
+* Adds emoji reactions to messages on desktop [#572](https://github.com/TryQuiet/quiet/issues/572)
 * Private channel creation and modification is limited to admins [#3256](https://github.com/TryQuiet/quiet/issues/3256)
 
 ### Fixes

packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { styled } from '@mui/material/styles'
 import type { Dictionary } from '@reduxjs/toolkit'
 import classNames from 'classnames'
@@ -14,6 +14,7 @@ import ProfilePhoto from '../../ProfilePhoto/ProfilePhoto'
 import type { DisplayableMessage, DownloadStatus, MessageSendingStatus } from '@quiet/types'
 
 import { NestedMessageContent } from './NestedMessageContent'
+import MessageReactionBar from './MessageReactionBar'
 
 import type { FileActionsProps } from '../../Channel/File/FileComponent/FileComponent'
 
@@ -172,6 +173,33 @@ export interface BasicMessageProps {
   duplicatedUsernameModalHandleOpen: HandleOpenModalType
 }
 
+interface MessageWithReactionsProps extends FileActionsProps {
+  message: DisplayableMessage
+  pending: boolean
+  downloadStatus?: DownloadStatus
+  maxAutodownloadSizeBytes: number
+  uploadedFileModal?: UseModalType<{ src: string }>
+  onMathMessageRendered?: () => void
+  openUrl: (url: string) => void
+}
+
+const MessageWithReactions: React.FC<MessageWithReactionsProps> = ({ message, pending, downloadStatus, ...rest }) => {
+  const [hovered, setHovered] = useState(false)
+
+  return (
+    <div
+      onMouseOver={e => {
+        e.stopPropagation()
+        setHovered(true)
+      }}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <NestedMessageContent message={message} pending={pending} downloadStatus={downloadStatus} {...rest} />
+      <MessageReactionBar messageId={message.id} hovered={hovered} />
+    </div>
+  )
+}
+
 export const BasicMessageComponent: React.FC<BasicMessageProps & FileActionsProps> = ({
   messages,
   pendingMessages = {},
@@ -270,7 +298,7 @@ export const BasicMessageComponent: React.FC<BasicMessageProps & FileActionsProp
                   const pending = pendingMessages[message.id] !== undefined
                   const downloadStatus = downloadStatuses[message.id]
                   return (
-                    <NestedMessageContent
+                    <MessageWithReactions
                       key={index}
                       message={message}
                       pending={pending}

packages/desktop/src/renderer/components/widgets/channels/MessageReactionBar.tsx

@@ -0,0 +1,233 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { styled } from '@mui/material/styles'
+import Grid from '@mui/material/Grid'
+import Tooltip from '@mui/material/Tooltip'
+import { reactions, publicChannels } from '@quiet/state-manager'
+import Picker, { EmojiStyle, type Theme } from 'emoji-picker-react'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import { useTheme } from '@mui/material/styles'
+import emojiGray from '../../../static/images/emojiGray.svg'
+
+const QUICK_REACTIONS = ['👍', '👎', '😄', '🎉', '😕', '❤️']
+
+const PREFIX = 'MessageReactionBar'
+const classes = {
+  bar: `${PREFIX}-bar`,
+  pill: `${PREFIX}-pill`,
+  pillActive: `${PREFIX}-pillActive`,
+  addBtn: `${PREFIX}-addBtn`,
+  picker: `${PREFIX}-picker`,
+  quickPicker: `${PREFIX}-quickPicker`,
+  quickEmoji: `${PREFIX}-quickEmoji`,
+  hiddenPicker: `${PREFIX}-hiddenPicker`,
+}
+
+const StyledGrid = styled(Grid)(({ theme }) => ({
+  [`& .${classes.bar}`]: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '4px',
+    marginTop: '4px',
+  },
+  [`& .${classes.pill}`]: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '4px',
+    padding: '2px 8px',
+    borderRadius: '12px',
+    border: `1px solid ${theme.palette.divider}`,
+    background: theme.palette.background.paper,
+    cursor: 'pointer',
+    fontSize: '14px',
+    '&:hover': {
+      background: theme.palette.action.hover,
+    },
+  },
+  [`& .${classes.pillActive}`]: {
+    border: `1px solid ${theme.palette.primary.main}`,
+    background: `${theme.palette.primary.main}22`,
+  },
+  [`& .${classes.addBtn}`]: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '2px 8px',
+    borderRadius: '12px',
+    border: `1px solid ${theme.palette.divider}`,
+    background: 'transparent',
+    cursor: 'pointer',
+    fontSize: '14px',
+    color: theme.palette.text.secondary,
+    '&:hover': {
+      background: theme.palette.action.hover,
+    },
+  },
+  [`& .${classes.quickPicker}`]: {
+    position: 'absolute',
+    bottom: '100%',
+    display: 'flex',
+    gap: '4px',
+    padding: '8px',
+    borderRadius: '8px',
+    background: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    boxShadow: theme.shadows[4],
+    zIndex: 1000,
+  },
+  [`& .${classes.hiddenPicker}`]: {
+    position: 'absolute',
+    bottom: '100%',
+    left: 0,
+    display: 'flex',
+    gap: '4px',
+    padding: '8px',
+    borderRadius: '8px',
+    background: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    boxShadow: theme.shadows[4],
+    zIndex: 1000,
+  },
+  [`& .${classes.quickEmoji}`]: {
+    fontSize: '20px',
+    padding: '4px',
+    cursor: 'pointer',
+    background: 'transparent',
+    border: 'none',
+    borderRadius: '4px',
+    '&:hover': {
+      background: theme.palette.action.hover,
+    },
+  },
+  [`& .${classes.picker}`]: {
+    position: 'fixed',
+    bottom: 60,
+    right: 15,
+    zIndex: 1000,
+  },
+}))
+
+interface Props {
+  messageId: string
+  hovered: boolean
+}
+
+export const MessageReactionBar: React.FC<Props> = ({ messageId, hovered }) => {
+  const dispatch = useDispatch()
+  const [quickPickerOpen, setQuickPickerOpen] = useState(false)
+  const [fullPickerOpen, setFullPickerOpen] = useState(false)
+  const [showHidden, setShowHidden] = useState(false)
+  const [pickerAlign, setPickerAlign] = useState<'left' | 'right'>('left')
+  const addBtnRef = useRef<HTMLDivElement>(null)
+  const groups = useSelector(reactions.selectors.selectReactionsForMessage(messageId))
+  const channelId = useSelector(publicChannels.selectors.currentChannelId)
+  const theme = useTheme()
+
+  useEffect(() => {
+    if (!hovered) {
+      setShowHidden(false)
+    }
+  }, [hovered])
+
+  const react = (emoji: string) => {
+    if (!channelId) return
+    dispatch(reactions.actions.sendReaction({ targetMessageId: messageId, emoji, channelId }))
+    setQuickPickerOpen(false)
+    setFullPickerOpen(false)
+    setShowHidden(false)
+  }
+
+  const closeAll = () => {
+    setQuickPickerOpen(false)
+    setFullPickerOpen(false)
+  }
+
+  const handleOpenQuickPicker = () => {
+    if (addBtnRef.current) {
+      const rect = addBtnRef.current.getBoundingClientRect()
+      const spaceOnRight = window.innerWidth - rect.left
+      setPickerAlign(spaceOnRight < 300 ? 'right' : 'left')
+    }
+    setQuickPickerOpen(v => !v)
+  }
+
+  const MAX_VISIBLE_REACTIONS = 5
+  const visibleGroups = groups.slice(0, MAX_VISIBLE_REACTIONS)
+  const hiddenGroups = groups.slice(MAX_VISIBLE_REACTIONS)
+
+  const showAddButton = hovered || groups.length > 0
+
+  return (
+    <StyledGrid>
+      <div className={classes.bar}>
+        {visibleGroups.map(group => (
+          <Tooltip key={group.emoji} title={group.nicknames.join(', ')}>
+            <button
+              className={`${classes.pill} ${group.reacted ? classes.pillActive : ''}`}
+              onClick={() => react(group.emoji)}
+            >
+              {group.emoji} {group.count}
+            </button>
+          </Tooltip>
+        ))}
+        {hiddenGroups.length > 0 && !showHidden && (
+          <button className={classes.pill} onClick={() => setShowHidden(true)}>
+            +{hiddenGroups.length}
+          </button>
+        )}
+        {showHidden &&
+          hiddenGroups.map(group => (
+            <Tooltip key={group.emoji} title={group.nicknames.join(', ')}>
+              <button
+                className={`${classes.pill} ${group.reacted ? classes.pillActive : ''}`}
+                onClick={() => react(group.emoji)}
+              >
+                {group.emoji} {group.count}
+              </button>
+            </Tooltip>
+          ))}
+        {showAddButton && (
+          <ClickAwayListener onClickAway={closeAll}>
+            <div style={{ position: 'relative' }} ref={addBtnRef}>
+              <Tooltip title='Add reaction'>
+                <button className={classes.addBtn} onClick={handleOpenQuickPicker}>
+                  <img src={emojiGray} style={{ width: 16, height: 16 }} />
+                </button>
+              </Tooltip>
+              {quickPickerOpen && (
+                <div className={classes.quickPicker} style={pickerAlign === 'right' ? { right: 0 } : { left: 0 }}>
+                  {QUICK_REACTIONS.map(emoji => (
+                    <button key={emoji} className={classes.quickEmoji} onClick={() => react(emoji)}>
+                      {emoji}
+                    </button>
+                  ))}
+                  <Tooltip title='More reactions'>
+                    <button
+                      className={classes.quickEmoji}
+                      onClick={() => {
+                        setQuickPickerOpen(false)
+                        setFullPickerOpen(true)
+                      }}
+                    >
+                      <img src={emojiGray} style={{ width: 20, height: 20 }} />
+                    </button>
+                  </Tooltip>
+                </div>
+              )}
+              {fullPickerOpen && (
+                <div className={classes.picker}>
+                  <Picker
+                    onEmojiClick={emojiData => react(emojiData.emoji)}
+                    emojiStyle={EmojiStyle.NATIVE}
+                    theme={theme.palette.mode as Theme}
+                  />
+                </div>
+              )}
+            </div>
+          </ClickAwayListener>
+        )}
+      </div>
+    </StyledGrid>
+  )
+}
+
+export default MessageReactionBar

packages/desktop/src/renderer/testUtils/prepareStore.ts

@@ -12,6 +12,7 @@ import {
   Store,
   network,
   captcha,
+  reactions,
 } from '@quiet/state-manager'
 import { StoreKeys } from '../store/store.keys'
 import { combineReducers, createStore, applyMiddleware } from 'redux'
@@ -37,6 +38,7 @@ export const testReducers = {
   [StateManagerStoreKeys.Files]: files.reducer,
   [StateManagerStoreKeys.Network]: network.reducer,
   [StateManagerStoreKeys.Captcha]: captcha.reducer,
+  [StateManagerStoreKeys.Reactions]: reactions.reducer,
   [StoreKeys.App]: appReducer,
   [StoreKeys.Socket]: socketReducer,
   [StoreKeys.Modals]: modalsReducer,

packages/state-manager/src/index.ts

@@ -25,6 +25,9 @@ import { messagesActions, messagesReducer } from './sagas/messages/messages.slic
 
 import { messagesSelectors } from './sagas/messages/messages.selectors'
 
+import { reactionsReducer, reactionsActions } from './sagas/reactions/reactions.slice'
+import { selectReactionsForMessage } from './sagas/reactions/reactions.selectors'
+
 import { errorsSelectors } from './sagas/errors/errors.selectors'
 import { errorsReducer, errorsActions } from './sagas/errors/errors.slice'
 
@@ -129,6 +132,12 @@ export const messages = {
   selectors: messagesSelectors,
 }
 
+export const reactions = {
+  reducer: reactionsReducer,
+  actions: reactionsActions,
+  selectors: { selectReactionsForMessage },
+}
+
 export const errors = {
   reducer: errorsReducer,
   actions: errorsActions,
@@ -183,6 +192,7 @@ export default {
   users,
   identity,
   messages,
+  reactions,
   errors,
   communities,
   connection,

packages/state-manager/src/sagas/messages/addMessages/addMessages.saga.test.ts

@@ -537,4 +537,40 @@ describe('addMessagesSaga', () => {
       )
       .run()
   })
+
+  test('ignore reaction messages', async () => {
+    const reactionMessage = (
+      await factory.build('TestMessage', {
+        identity: alice,
+        message: {
+          id: Math.random().toString(36).substr(2.9),
+          type: MessageType.Reaction,
+          message: JSON.stringify({ targetMessageId: 'some-id', emoji: '👍', action: 'add' }),
+          createdAt: DateTime.utc().valueOf(),
+          channelId: generalChannel.id,
+          signature: '',
+          pubKey: '',
+        },
+        verifyAutomatically: true,
+      })
+    ).payload.message
+
+    store.dispatch(
+      publicChannelsActions.setCurrentChannel({
+        channelId: generalChannel.id,
+      })
+    )
+
+    const reducer = combineReducers(testReducers)
+    await expectSaga(
+      addMessagesSaga,
+      messagesActions.addMessages({
+        messages: [reactionMessage],
+      })
+    )
+      .withReducer(reducer)
+      .withState(store.getState())
+      .not.put.actionType(publicChannelsActions.cacheMessages.type)
+      .run()
+  })
 })