snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/chat/components/web/ReactButton.tsx

@@ -0,0 +1,87 @@
+import { Theme } from '@mui/material';
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IconFaceSmile } from '../../../base/icons/svg';
+import Popover from '../../../base/popover/components/Popover.web';
+import Button from '../../../base/ui/components/web/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.any';
+import { sendReaction } from '../../actions.any';
+
+import EmojiSelector from './EmojiSelector';
+
+interface IProps {
+    messageId: string;
+    receiverId: string;
+}
+
+const useStyles = makeStyles()((theme: Theme) => {
+    return {
+        reactButton: {
+            padding: '2px'
+        },
+        reactionPanelContainer: {
+            position: 'relative',
+            display: 'inline-block'
+        },
+        popoverContent: {
+            backgroundColor: theme.palette.background.paper,
+            borderRadius: theme.shape.borderRadius,
+            boxShadow: theme.shadows[3],
+            overflow: 'hidden'
+        }
+    };
+});
+
+const ReactButton = ({ messageId, receiverId }: IProps) => {
+    const { classes } = useStyles();
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+
+    const onSendReaction = useCallback(emoji => {
+        dispatch(sendReaction(emoji, messageId, receiverId));
+    }, [ dispatch, messageId, receiverId ]);
+
+    const [ isPopoverOpen, setIsPopoverOpen ] = useState(false);
+
+    const handleReactClick = useCallback(() => {
+        setIsPopoverOpen(true);
+    }, []);
+
+    const handleClose = useCallback(() => {
+        setIsPopoverOpen(false);
+    }, []);
+
+    const handleEmojiSelect = useCallback((emoji: string) => {
+        onSendReaction(emoji);
+        handleClose();
+    }, [ onSendReaction, handleClose ]);
+
+    const popoverContent = (
+        <div className = { classes.popoverContent }>
+            <EmojiSelector onSelect = { handleEmojiSelect } />
+        </div>
+    );
+
+    return (
+        <Popover
+            content = { popoverContent }
+            onPopoverClose = { handleClose }
+            position = 'top'
+            trigger = 'click'
+            visible = { isPopoverOpen }>
+            <div className = { classes.reactionPanelContainer }>
+                <Button
+                    accessibilityLabel = { t('toolbar.accessibilityLabel.react') }
+                    className = { classes.reactButton }
+                    icon = { IconFaceSmile }
+                    onClick = { handleReactClick }
+                    type = { BUTTON_TYPES.TERTIARY } />
+            </div>
+        </Popover>
+    );
+};
+
+export default ReactButton;