snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/room/contextualBar/MessageSearchTab/MessageSearchTab.tsx

@@ -0,0 +1,133 @@
+import { Callout, Box, MessageDivider, Throbber } from '@rocket.chat/fuselage';
+import { MessageTypes } from '@rocket.chat/message-types';
+import {
+	ContextualbarClose,
+	ContextualbarContent,
+	ContextualbarHeader,
+	ContextualbarTitle,
+	ContextualbarIcon,
+	ContextualbarSection,
+	ContextualbarDialog,
+	VirtualizedScrollbars,
+	ContextualbarEmptyContent,
+} from '@rocket.chat/ui-client';
+import { useRoomToolbox, useUserPreference, useSetting } from '@rocket.chat/ui-contexts';
+import { useState, memo, Fragment, useId } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
+
+import MessageSearchForm from './components/MessageSearchForm';
+import { useMessageSearchProviderQuery } from './hooks/useMessageSearchProviderQuery';
+import { useMessageSearchQuery } from './hooks/useMessageSearchQuery';
+import ResultsLiveRegion from '../../../../components/ResultsLiveRegion';
+import RoomMessage from '../../../../components/message/variants/RoomMessage';
+import SystemMessage from '../../../../components/message/variants/SystemMessage';
+import { useFormatDate } from '../../../../hooks/useFormatDate';
+import MessageListErrorBoundary from '../../MessageList/MessageListErrorBoundary';
+import { isMessageNewDay } from '../../MessageList/lib/isMessageNewDay';
+import MessageListProvider from '../../MessageList/providers/MessageListProvider';
+import { useRoomSubscription } from '../../contexts/RoomContext';
+
+// TODO: Refactor this component to isolate the data from the visual
+const MessageSearchTab = () => {
+	const { t } = useTranslation();
+	const searchListId = useId();
+	const formatDate = useFormatDate();
+	const { closeTab } = useRoomToolbox();
+	const pageSize = useSetting('PageSize', 10);
+
+	const [limit, setLimit] = useState(pageSize);
+	const subscription = useRoomSubscription();
+	const showUserAvatar = !!useUserPreference<boolean>('displayAvatars');
+
+	const providerQuery = useMessageSearchProviderQuery();
+
+	const [{ searchText, globalSearch }, handleSearch] = useState({ searchText: '', globalSearch: false });
+	const { isSuccess, data: messageSearchData, isPending } = useMessageSearchQuery({ searchText, limit, globalSearch });
+	const itemCount = messageSearchData?.length ?? 0;
+
+	return (
+		<ContextualbarDialog>
+			<ContextualbarHeader>
+				<ContextualbarIcon name='magnifier' />
+				<ContextualbarTitle>{t('Search_Messages')}</ContextualbarTitle>
+				<ContextualbarClose onClick={closeTab} />
+			</ContextualbarHeader>
+			{providerQuery.data && (
+				<ContextualbarSection>
+					<MessageSearchForm provider={providerQuery.data} onSearch={handleSearch} searchListId={searchListId} isSuccess={isSuccess} />
+				</ContextualbarSection>
+			)}
+			<ContextualbarContent flexShrink={1} flexGrow={1} paddingInline={0}>
+				<ResultsLiveRegion shouldAnnounce={isSuccess} itemCount={itemCount} />
+				{providerQuery.isSuccess && (
+					<>
+						{searchText && isPending && <Throbber />}
+						{isSuccess && (
+							<Box id={searchListId} display='flex' flexDirection='column' flexGrow={1} flexShrink={1} flexBasis={0}>
+								{messageSearchData.length === 0 && <ContextualbarEmptyContent title={t('No_results_found')} />}
+								{messageSearchData.length > 0 && (
+									<MessageListErrorBoundary>
+										<MessageListProvider>
+											<Box is='section' display='flex' flexDirection='column' flexGrow={1} flexShrink={1} flexBasis='auto' height='full'>
+												<VirtualizedScrollbars>
+													<Virtuoso
+														totalCount={messageSearchData.length}
+														overscan={25}
+														data={messageSearchData}
+														itemContent={(index, message) => {
+															const previous = messageSearchData[index - 1];
+
+															const newDay = isMessageNewDay(message, previous);
+
+															const system = MessageTypes.isSystemMessage(message);
+
+															const unread = subscription?.tunread?.includes(message._id) ?? false;
+															const mention = subscription?.tunreadUser?.includes(message._id) ?? false;
+															const all = subscription?.tunreadGroup?.includes(message._id) ?? false;
+
+															return (
+																<Fragment key={message._id}>
+																	{newDay && <MessageDivider>{formatDate(message.ts)}</MessageDivider>}
+
+																	{system ? (
+																		<SystemMessage message={message} showUserAvatar={showUserAvatar} />
+																	) : (
+																		<RoomMessage
+																			message={message}
+																			sequential={false}
+																			unread={unread}
+																			mention={mention}
+																			all={all}
+																			context='search'
+																			searchText={searchText}
+																			showUserAvatar={showUserAvatar}
+																		/>
+																	)}
+																</Fragment>
+															);
+														}}
+														endReached={() => {
+															setLimit((limit) => limit + pageSize);
+														}}
+													/>
+												</VirtualizedScrollbars>
+											</Box>
+										</MessageListProvider>
+									</MessageListErrorBoundary>
+								)}
+							</Box>
+						)}
+					</>
+				)}
+				{providerQuery.isError && (
+					<Callout margin={24} type='danger'>
+						{t('Search_current_provider_not_active')}
+					</Callout>
+				)}
+			</ContextualbarContent>
+		</ContextualbarDialog>
+	);
+};
+
+export default memo(MessageSearchTab);

apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearchForm.tsx

@@ -0,0 +1,84 @@
+import type { IMessageSearchProvider } from '@rocket.chat/core-typings';
+import { Box, Field, FieldLabel, FieldHint, Icon, TextInput, ToggleSwitch, Callout } from '@rocket.chat/fuselage';
+import { useDebouncedCallback, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import DOMPurify from 'dompurify';
+import { useEffect, useId } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { getRoomTypeTranslation } from '../../../../../lib/getRoomTypeTranslation';
+import { useRoom } from '../../../contexts/RoomContext';
+
+export type MessageSearchFormProps = {
+	provider: IMessageSearchProvider;
+	onSearch: (params: { searchText: string; globalSearch: boolean }) => void;
+	searchListId: string;
+	isSuccess: boolean;
+};
+
+const MessageSearchForm = ({ provider, onSearch, searchListId, isSuccess }: MessageSearchFormProps) => {
+	const { handleSubmit, register, setFocus, control } = useForm({
+		defaultValues: {
+			searchText: '',
+			globalSearch: false,
+		},
+	});
+
+	const room = useRoom();
+
+	useEffect(() => {
+		setFocus('searchText');
+	}, [setFocus]);
+
+	const debouncedOnSearch = useDebouncedCallback(useStableCallback(onSearch), 300);
+
+	const submitHandler = handleSubmit(({ searchText, globalSearch }) => {
+		debouncedOnSearch.cancel();
+		onSearch({ searchText, globalSearch });
+	});
+
+	const searchText = useWatch({ control, name: 'searchText' });
+	const globalSearch = useWatch({ control, name: 'globalSearch' });
+
+	useEffect(() => {
+		debouncedOnSearch({ searchText, globalSearch });
+	}, [debouncedOnSearch, searchText, globalSearch]);
+
+	const globalSearchEnabled = provider.settings.GlobalSearchEnabled;
+	const globalSearchToggleId = useId();
+
+	const { t } = useTranslation();
+
+	return (
+		<Box is='form' onSubmit={submitHandler} width='full'>
+			<Field>
+				<TextInput
+					endAddon={<Icon name='magnifier' size='x20' />}
+					placeholder={t('Search_Messages')}
+					aria-label={t('Search_Messages')}
+					aria-controls={isSuccess ? searchListId : undefined}
+					autoComplete='off'
+					{...register('searchText')}
+				/>
+				{provider.description && (
+					<FieldHint dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(t(provider.description as TranslationKey)) }} />
+				)}
+			</Field>
+			{globalSearchEnabled && (
+				<Field>
+					<FieldLabel htmlFor={globalSearchToggleId}>{t('Global_Search')}</FieldLabel>
+					<ToggleSwitch id={globalSearchToggleId} {...register('globalSearch')} />
+				</Field>
+			)}
+			{room.encrypted && (
+				<Callout type='warning' marginBlockStart={12} icon='circle-exclamation'>
+					<Box fontScale='p2b'>{t('Encrypted_RoomType', { roomType: getRoomTypeTranslation(room).toLowerCase() })}</Box>
+					{t('Encrypted_content_cannot_be_searched')}
+				</Callout>
+			)}
+		</Box>
+	);
+};
+
+export default MessageSearchForm;

apps/meteor/client/views/room/contextualBar/MessageSearchTab/hooks/useMessageSearchProviderQuery.ts

@@ -0,0 +1,18 @@
+import { useMethod } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+export const useMessageSearchProviderQuery = () => {
+	const getSearchProvider = useMethod('rocketchatSearch.getProvider');
+	return useQuery({
+		queryKey: ['search', 'provider'] as const,
+
+		queryFn: async () => {
+			const provider = await getSearchProvider();
+			if (provider === undefined) {
+				throw new Error('Search provider not found');
+			}
+
+			return provider;
+		},
+	});
+};

apps/meteor/client/views/room/contextualBar/MessageSearchTab/hooks/useMessageSearchQuery.ts

@@ -0,0 +1,33 @@
+import { useMethod, useTranslation, useUserId } from '@rocket.chat/ui-contexts';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+
+import { useRoom } from '../../../contexts/RoomContext';
+
+export const useMessageSearchQuery = ({
+	searchText,
+	limit,
+	globalSearch,
+}: {
+	searchText: string;
+	limit: number;
+	globalSearch: boolean;
+}) => {
+	const uid = useUserId();
+	const room = useRoom();
+
+	const t = useTranslation();
+
+	const searchMessages = useMethod('rocketchatSearch.search');
+	return useQuery({
+		queryKey: ['rooms', room._id, 'message-search', { uid, rid: room._id, searchText, limit, globalSearch }] as const,
+
+		queryFn: async () => {
+			const result = await searchMessages(searchText, { uid, rid: room._id }, { limit, searchAll: globalSearch });
+			return result.message?.docs ?? [];
+		},
+		placeholderData: keepPreviousData,
+		meta: {
+			errorToastMessage: t('Search_message_search_failed'),
+		},
+	});
+};

apps/meteor/client/views/room/contextualBar/MessageSearchTab/index.ts

@@ -0,0 +1 @@
+export { default } from './MessageSearchTab';