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

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

@@ -0,0 +1,322 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import Icon from '../../../base/icons/components/Icon';
+import {
+    IconArrowDown,
+    IconArrowUp,
+    IconCloseCircle,
+    IconCloseLarge,
+    IconSearch
+} from '../../../base/icons/svg';
+import Input from '../../../base/ui/components/web/Input';
+import { isFileSharingEnabled } from '../../../file-sharing/functions.any';
+import {
+    clearChatSearch,
+    setChatSearchMatchIndex,
+    setChatSearchQuery,
+    toggleChat
+} from '../../actions.web';
+import { ChatTabs } from '../../constants';
+import {
+    getChatSearchMatchIndex,
+    getChatSearchMatches,
+    getChatSearchQuery,
+    getFocusedTab,
+    isChatDisabled
+} from '../../functions';
+
+interface IProps {
+
+    /**
+     * An optional class name.
+     */
+    className: string;
+
+    /**
+     * Whether CC tab is enabled or not.
+     */
+    isCCTabEnabled: boolean;
+
+    /**
+     * Whether the polls feature is enabled or not.
+     */
+    isPollsEnabled: boolean;
+
+    /**
+     * Function to be called when pressing the close button.
+     */
+    onCancel: Function;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        searchContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: theme.spacing(1),
+            flex: 1,
+            marginRight: theme.spacing(3),
+            backgroundColor: theme.palette.inputFieldBackground,
+            borderRadius: theme.shape.borderRadius,
+            paddingRight: theme.spacing(2),
+
+            '&:focus-within': {
+                boxShadow: `0px 0px 0px 2px ${theme.palette.inputFieldFocus}`
+            }
+        },
+        inputWrapper: {
+            flex: 1,
+            minWidth: 0
+        },
+        searchInputField: {
+            backgroundColor: 'transparent !important',
+            background: 'transparent !important',
+            border: '0 !important',
+            boxShadow: 'none !important',
+            paddingRight: '4px !important',
+
+            '&:focus': {
+                boxShadow: 'none !important'
+            }
+        },
+        divider: {
+            width: '1px',
+            alignSelf: 'stretch',
+            margin: `${theme.spacing(1)}px ${theme.spacing(1)}px`,
+            backgroundColor: 'rgba(255, 255, 255, 0.15)'
+        },
+        resultsCount: {
+            ...theme.typography.labelRegular,
+            color: theme.palette.text02,
+            whiteSpace: 'nowrap',
+            minWidth: '48px',
+            textAlign: 'center' as const
+        },
+        navButton: {
+            cursor: 'pointer',
+            opacity: 1,
+
+            '&.disabled': {
+                cursor: 'default',
+                opacity: 0.3
+            }
+        },
+        headerActions: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: theme.spacing(2)
+        }
+    };
+});
+
+/**
+ * Custom header of the {@code ChatDialog}.
+ *
+ * @returns {React$Element<any>}
+ */
+function ChatHeader({ className, isCCTabEnabled, isPollsEnabled, onCancel: onCancelProp }: IProps) {
+    const { classes, cx } = useStyles();
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const _isChatDisabled = useSelector(isChatDisabled);
+    const focusedTab = useSelector(getFocusedTab);
+    const fileSharingTabEnabled = useSelector(isFileSharingEnabled);
+    const [ isSearchOpen, setIsSearchOpen ] = useState(false);
+
+    const query = useSelector(getChatSearchQuery);
+    const matches = useSelector(getChatSearchMatches);
+    const matchIndex = useSelector(getChatSearchMatchIndex);
+    const hasMatches = matches.length > 0;
+    // Local, un-debounced copy of the input value so typing feels instant, while the
+    // Redux dispatch (which drives the expensive getChatSearchMatches filter) is debounced.
+    const [ inputValue, setInputValue ] = useState(query);
+    const debounceRef = useRef<ReturnType<typeof setTimeout>>();
+
+    // Keep the local input in sync when the query is cleared/reset from elsewhere
+    // (e.g. clearChatSearch dispatched on tab switch or panel close).
+    useEffect(() => {
+        setInputValue(query);
+    }, [ query ]);
+
+    const onCancel = useCallback(() => {
+        if (onCancelProp) {
+            onCancelProp();
+        } else {
+            dispatch(toggleChat());
+        }
+    }, [ onCancelProp ]);
+
+    const onKeyPressHandler = useCallback(e => {
+        if (onCancel && (e.key === ' ' || e.key === 'Enter')) {
+            e.preventDefault();
+            onCancel();
+        }
+    }, []);
+
+    const onSearchToggle = useCallback(() => {
+        setIsSearchOpen(open => !open);
+    }, []);
+
+    const onSearchClose = useCallback(() => {
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        dispatch(clearChatSearch());
+        setIsSearchOpen(false);
+    }, [ dispatch ]);
+
+    const onQueryChange = useCallback((value: string) => {
+        setInputValue(value);
+
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        debounceRef.current = setTimeout(() => {
+            dispatch(setChatSearchQuery(value));
+        }, 200);
+    }, [ dispatch ]);
+
+    const onNext = useCallback(() => {
+        if (!hasMatches) {
+            return;
+        }
+        dispatch(setChatSearchMatchIndex((matchIndex + 1) % matches.length));
+    }, [ dispatch, hasMatches, matchIndex, matches.length ]);
+
+    const onPrev = useCallback(() => {
+        if (!hasMatches) {
+            return;
+        }
+        dispatch(setChatSearchMatchIndex((matchIndex - 1 + matches.length) % matches.length));
+    }, [ dispatch, hasMatches, matchIndex, matches.length ]);
+
+    const onSearchKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.shiftKey ? onPrev() : onNext();
+        } else if (e.key === 'Escape') {
+            onSearchClose();
+        }
+    }, [ onNext, onPrev, onSearchClose ]);
+
+    // Clear any pending debounced dispatch on unmount so it doesn't fire after teardown.
+    useEffect(() => {
+        return () => {
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+        };
+    }, []);
+
+    // Keep matchIndex in bounds whenever the match set shrinks (new query, or a message
+    // disappearing) so `matches[matchIndex]` never reads undefined downstream.
+    useEffect(() => {
+        if (matchIndex >= matches.length && matches.length > 0) {
+            dispatch(setChatSearchMatchIndex(0));
+        }
+    }, [ matches.length, matchIndex, dispatch ]);
+
+    // Close the search bar if the user switches away from the Chat tab (e.g. to Polls/CC/
+    // File sharing) without closing the whole panel — search only makes sense on the Chat tab.
+    useEffect(() => {
+        if (isSearchOpen && focusedTab !== ChatTabs.CHAT) {
+            setIsSearchOpen(false);
+            dispatch(clearChatSearch());
+        }
+    }, [ focusedTab ]);
+
+    let title = 'chat.title';
+
+    if (!_isChatDisabled && focusedTab === ChatTabs.CHAT) {
+        title = 'chat.tabs.chat';
+    } else if (isPollsEnabled && focusedTab === ChatTabs.POLLS) {
+        title = 'chat.tabs.polls';
+    } else if (isCCTabEnabled && focusedTab === ChatTabs.CLOSED_CAPTIONS) {
+        title = 'chat.tabs.closedCaptions';
+    } else if (fileSharingTabEnabled && focusedTab === ChatTabs.FILE_SHARING) {
+        title = 'chat.tabs.fileSharing';
+    } else {
+        // If the focused tab is not enabled, don't render the header.
+        // This should not happen in normal circumstances since Chat.tsx already checks
+        // if any tabs are available before rendering.
+        return null;
+    }
+
+    // Only show the search toggle on the actual chat message tab — searching
+    // polls/CC/file-sharing isn't in scope here.
+    const showSearchToggle = !_isChatDisabled && focusedTab === ChatTabs.CHAT;
+
+    return (
+        <div
+            className = { className || 'chat-dialog-header' }>
+            {isSearchOpen ? (
+                <div
+                    className = { classes.searchContainer }
+                    onKeyDown = { onSearchKeyDown }>
+                    <div className = { classes.inputWrapper }>
+                        <Input
+                            autoFocus = { true }
+                            icon = { IconSearch }
+                            id = 'chat-search-input'
+                            inputClassName = { classes.searchInputField }
+                            onChange = { onQueryChange }
+                            placeholder = { t('chat.search.placeholder') }
+                            value = { inputValue } />
+                    </div>
+                    <span className = { classes.resultsCount }>
+                        {query.trim()
+                            ? t('chat.search.resultsCount', {
+                                current: hasMatches ? matchIndex + 1 : 0,
+                                total: matches.length
+                            })
+                            : null}
+                    </span>
+                    <Icon
+                        ariaLabel = { t('chat.search.previous') }
+                        className = { cx(classes.navButton, !hasMatches && 'disabled') }
+                        onClick = { onPrev }
+                        src = { IconArrowUp } />
+                    <Icon
+                        ariaLabel = { t('chat.search.next') }
+                        className = { cx(classes.navButton, !hasMatches && 'disabled') }
+                        onClick = { onNext }
+                        src = { IconArrowDown } />
+                    <span className = { classes.divider } />
+                    <Icon
+                        ariaLabel = { t('chat.search.close') }
+                        onClick = { onSearchClose }
+                        size = { 18 }
+                        src = { IconCloseCircle } />
+                </div>
+            ) : (
+                <span
+                    aria-level = { 1 }
+                    role = 'heading'>
+                    { t(title) }
+                </span>
+            )}
+            <div className = { classes.headerActions }>
+                {!isSearchOpen && showSearchToggle && (
+                    <Icon
+                        ariaLabel = { t('chat.search.open') }
+                        onClick = { onSearchToggle }
+                        role = 'button'
+                        src = { IconSearch }
+                        tabIndex = { 0 } />
+                )}
+                <Icon
+                    ariaLabel = { t('toolbar.closeChat') }
+                    onClick = { onCancel }
+                    onKeyPress = { onKeyPressHandler }
+                    role = 'button'
+                    src = { IconCloseLarge }
+                    tabIndex = { 0 } />
+            </div>
+        </div>
+    );
+}
+
+export default ChatHeader;