feat: (poc) Unified AI Search

.changeset/fancy-deserts-mate.md

@@ -0,0 +1,10 @@
+---
+'@rocket.chat/core-services': minor
+'@rocket.chat/rest-typings': minor
+'@rocket.chat/ai-search': minor
+'@rocket.chat/ui-client': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Adds AI Search with semantic message results, optional OpenAI-compatible answers, and AI Center configuration.

apps/meteor/client/navbar/NavBarNavigation.tsx

@@ -1,9 +1,11 @@
 import { FocusScope } from '@react-aria/focus';
 import { NavBarGroup, NavBarItem, Box } from '@rocket.chat/fuselage';
+import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
 import { useLayout, useRouter } from '@rocket.chat/ui-contexts';
 import { useTranslation } from 'react-i18next';
 
 import NavBarSearch from './NavBarSearch';
+import NavBarAISearch from './NavBarSearch/NavBarAISearch';
 
 const NavbarNavigation = () => {
 	const { t } = useTranslation();
@@ -13,7 +15,14 @@ const NavbarNavigation = () => {
 	return (
 		<Box display='flex' flexGrow={1} justifyContent='center'>
 			<FocusScope>
-				<NavBarSearch />
+				<FeaturePreview feature='aiSearch'>
+					<FeaturePreviewOff>
+						<NavBarSearch />
+					</FeaturePreviewOff>
+					<FeaturePreviewOn>
+						<NavBarAISearch />
+					</FeaturePreviewOn>
+				</FeaturePreview>
 			</FocusScope>
 			{!isMobile && (
 				<Box marginInlineEnd={8}>

apps/meteor/client/navbar/NavBarSearch/NavBarAISearch.tsx

@@ -0,0 +1,128 @@
+import { useFocusManager } from '@react-aria/focus';
+import { useOverlayTrigger } from '@react-aria/overlays';
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { emptySearchFilters, type NavBarSearchFormValues } from '@rocket.chat/ai-search';
+import { Box, TextInput } from '@rocket.chat/fuselage';
+import { useMergedRefs, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useCallback, useEffect, useRef } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import tinykeys from 'tinykeys';
+
+import NavBarAISearchListBox from './NavBarAISearchListbox';
+import NavBarSearchInputAddon from './NavBarSearchInputAddon';
+import NavBarSearchListBox from './NavBarSearchListbox';
+import { getShortcutLabel } from './getShortcutLabel';
+import { useNavBarAISearch } from './hooks/useNavBarAISearch';
+import { useSearchClick } from './hooks/useSearchClick';
+import { useSearchFocus } from './hooks/useSearchFocus';
+import { useSearchInputNavigation } from './hooks/useSearchNavigation';
+
+const NavBarAISearch = () => {
+	const { t } = useTranslation();
+	const focusManager = useFocusManager();
+	const shortcut = getShortcutLabel();
+
+	const methods = useForm<NavBarSearchFormValues>({ defaultValues: { filterText: '', appliedFilters: emptySearchFilters() } });
+	const {
+		formState: { isDirty },
+		register,
+		reset,
+		setFocus,
+		setValue,
+		watch,
+	} = methods;
+	const { filterText, appliedFilters } = watch();
+
+	const { ref: filterRef, ...rest } = register('filterText');
+
+	const triggerRef = useRef(null);
+	const mergedRefs = useMergedRefs(filterRef, triggerRef);
+
+	const state = useOverlayTriggerState({});
+	const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'listbox' }, state, triggerRef);
+	delete triggerProps.onPress;
+
+	const handleKeyDown = useSearchInputNavigation(state);
+	const handleFocus = useSearchFocus(state);
+	const handleClick = useSearchClick(state);
+
+	const { aiSearchActive, canSearchWithAIFromTopBar, appliedFilterChips, aiSearchButtonTooltip, handleRemoveFilter, handleToggleAISearch } =
+		useNavBarAISearch({ filterText, appliedFilters, setFocus, setValue, state, t });
+
+	const searchLabel = aiSearchActive ? t('Search_rooms_or_ask_AI') : t('Search_rooms');
+	const placeholder = [searchLabel, shortcut].filter(Boolean).join(' ');
+
+	const handleEscSearch = useCallback(() => {
+		reset();
+		state.close();
+	}, [reset, state]);
+
+	const handleClearText = useStableCallback(() => {
+		reset();
+		setFocus('filterText');
+	});
+
+	useEffect(() => {
+		const unsubscribe = tinykeys(window, {
+			'$mod+K': (event) => {
+				event.preventDefault();
+				setFocus('filterText');
+			},
+			'$mod+P': (event) => {
+				event.preventDefault();
+				setFocus('filterText');
+			},
+			'Escape': (event) => {
+				event.preventDefault();
+				handleEscSearch();
+			},
+		});
+
+		return (): void => {
+			unsubscribe();
+		};
+	}, [focusManager, handleEscSearch, setFocus]);
+
+	return (
+		<FormProvider {...methods}>
+			<Box width='100%' maxWidth='x622' role='search' aria-label={searchLabel} mi={8} position='relative'>
+				<TextInput
+					{...rest}
+					{...triggerProps}
+					onFocus={handleFocus}
+					onKeyDown={handleKeyDown}
+					onClick={handleClick}
+					autoComplete='off'
+					placeholder={placeholder}
+					ref={mergedRefs}
+					role='combobox'
+					aria-label={searchLabel}
+					aria-autocomplete='list'
+					aria-keyshortcuts='Control+K Meta+K Control+P Meta+P'
+					small
+					endAddon={
+						<NavBarSearchInputAddon
+							appliedFilterChips={appliedFilterChips}
+							aiSearchActive={aiSearchActive}
+							aiSearchButtonTooltip={aiSearchButtonTooltip}
+							isDirty={isDirty}
+							onClearText={handleClearText}
+							onRemoveFilter={handleRemoveFilter}
+							onToggleAISearch={handleToggleAISearch}
+							t={t}
+						/>
+					}
+				/>
+				{state.isOpen &&
+					(aiSearchActive ? (
+						<NavBarAISearchListBox state={state} overlayProps={overlayProps} aiSearchActive aiSearchAvailable={canSearchWithAIFromTopBar} />
+					) : (
+						<NavBarSearchListBox state={state} overlayProps={overlayProps} />
+					))}
+			</Box>
+		</FormProvider>
+	);
+};
+
+export default NavBarAISearch;

apps/meteor/client/navbar/NavBarSearch/NavBarAISearchListbox.tsx

@@ -0,0 +1,81 @@
+import type { OverlayTriggerAria } from '@react-aria/overlays';
+import type { OverlayTriggerState } from '@react-stately/overlays';
+import type { NavBarSearchFormValues } from '@rocket.chat/ai-search';
+import { Tile } from '@rocket.chat/fuselage';
+import { useOutsideClick, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { CustomScrollbars } from '@rocket.chat/ui-client';
+import { useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import NavBarSearchFilterSuggestions from './NavBarSearchFilterSuggestions';
+import NavBarSearchIntelligentSection from './NavBarSearchIntelligentSection';
+import NavBarSearchRoomSection from './NavBarSearchRoomSection';
+import { useAISearchItems } from './hooks/useAISearchItems';
+import { useAISearchRooms } from './hooks/useAISearchRooms';
+import { useListboxNavigation } from './hooks/useSearchNavigation';
+import ResultsLiveRegion from '../../components/ResultsLiveRegion';
+
+export type NavBarAISearchListBoxProps = {
+	state: OverlayTriggerState;
+	overlayProps: OverlayTriggerAria['overlayProps'];
+	aiSearchActive: boolean;
+	aiSearchAvailable: boolean;
+};
+
+const NavBarAISearchListBox = ({ state, overlayProps, aiSearchActive, aiSearchAvailable }: NavBarAISearchListBoxProps) => {
+	const { t } = useTranslation();
+	const containerRef = useRef<HTMLElement>(null);
+
+	const handleKeyDown = useListboxNavigation(state);
+	useOutsideClick([containerRef], state.close);
+
+	const { reset, watch } = useFormContext<NavBarSearchFormValues>();
+	const { filterText, appliedFilters } = watch();
+
+	const handleSelect = useStableCallback(() => {
+		state.close();
+		reset();
+	});
+
+	const { data: aiItems, isFetching } = useAISearchItems(filterText, appliedFilters, aiSearchActive);
+	const { items: rooms, isLoading } = useAISearchRooms(aiSearchActive ? aiItems.searchText : filterText);
+	const itemCount = rooms.length + aiItems.intelligent.length + aiItems.filterSuggestions.length;
+	const isSearchLoading = isLoading || isFetching;
+	const listboxLabel = aiSearchActive ? t('AI_Search_results') : t('Channels');
+
+	return (
+		<Tile
+			ref={containerRef}
+			position='absolute'
+			zIndex={99}
+			padding={0}
+			pb={16}
+			mbs={4}
+			minHeight='x52'
+			maxHeight='50vh'
+			display='flex'
+			width='100%'
+			flexDirection='column'
+		>
+			<ResultsLiveRegion shouldAnnounce={!isSearchLoading} itemCount={itemCount} isLoading={isSearchLoading} />
+			<CustomScrollbars>
+				<div {...overlayProps} role='listbox' aria-label={listboxLabel} aria-busy={isSearchLoading} tabIndex={-1} onKeyDown={handleKeyDown}>
+					<NavBarSearchIntelligentSection items={aiItems.intelligent} onSelect={handleSelect} onClose={state.close} />
+					<NavBarSearchFilterSuggestions suggestions={aiItems.filterSuggestions} />
+					<NavBarSearchRoomSection
+						filterText={filterText}
+						itemCount={itemCount}
+						isLoading={isLoading}
+						isFetching={isFetching}
+						rooms={rooms}
+						suggestAISearch={aiSearchAvailable && !aiSearchActive}
+						onSelect={handleSelect}
+					/>
+				</div>
+			</CustomScrollbars>
+		</Tile>
+	);
+};
+
+export default NavBarAISearchListBox;

apps/meteor/client/navbar/NavBarSearch/NavBarAISearchNoResults.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next';
+
+import GenericNoResults from '../../components/GenericNoResults';
+
+export type NavBarAISearchNoResultsProps = {
+	suggestAISearch: boolean;
+};
+
+const NavBarAISearchNoResults = ({ suggestAISearch }: NavBarAISearchNoResultsProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<GenericNoResults
+			description={t(suggestAISearch ? 'Try_entering_a_different_search_term_or_search_with_AI' : 'Try_entering_a_different_search_term')}
+		/>
+	);
+};
+
+export default NavBarAISearchNoResults;

apps/meteor/client/navbar/NavBarSearch/NavBarSearchFilterSuggestions.tsx

@@ -0,0 +1,82 @@
+import {
+	mergeSearchFilters,
+	parseSearchFilterText,
+	type NavBarSearchFormValues,
+	type SearchFilterSuggestion,
+} from '@rocket.chat/ai-search';
+import { Box, Icon, SidebarV2Item, SidebarV2ItemIcon, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
+import type { MouseEvent, ReactElement } from 'react';
+import { useCallback, useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+const filterSuggestionGroupLabels = {
+	rooms: 'Search_filter_rooms',
+	users: 'Search_filter_users',
+	dates: 'Search_filter_dates',
+} as const;
+
+export type NavBarSearchFilterSuggestionsProps = {
+	suggestions: SearchFilterSuggestion[];
+};
+
+const groupFilterSuggestions = (suggestions: SearchFilterSuggestion[]): [SearchFilterSuggestion['group'], SearchFilterSuggestion[]][] => {
+	const grouped: Record<SearchFilterSuggestion['group'], SearchFilterSuggestion[]> = { rooms: [], users: [], dates: [] };
+	for (const suggestion of suggestions) {
+		grouped[suggestion.group].push(suggestion);
+	}
+
+	const groups: [SearchFilterSuggestion['group'], SearchFilterSuggestion[]][] = [];
+	for (const group of ['rooms', 'users', 'dates'] as const) {
+		if (grouped[group].length > 0) {
+			groups.push([group, grouped[group]]);
+		}
+	}
+
+	return groups;
+};
+
+const NavBarSearchFilterSuggestions = ({ suggestions }: NavBarSearchFilterSuggestionsProps): ReactElement | null => {
+	const { t } = useTranslation();
+	const { getValues, setFocus, setValue } = useFormContext<NavBarSearchFormValues>();
+	const filterSuggestionGroups = useMemo(() => groupFilterSuggestions(suggestions), [suggestions]);
+
+	const handleFilterSuggestion = useCallback(
+		(event: MouseEvent, value: string) => {
+			event.preventDefault();
+			event.stopPropagation();
+			const { searchText, filters } = parseSearchFilterText(value);
+			setValue('appliedFilters', mergeSearchFilters(getValues('appliedFilters'), filters), { shouldDirty: true });
+			setValue('filterText', searchText, { shouldDirty: true });
+			setFocus('filterText');
+		},
+		[getValues, setFocus, setValue],
+	);
+
+	if (!filterSuggestionGroups.length) {
+		return null;
+	}
+
+	return (
+		<>
+			{filterSuggestionGroups.map(([group, groupSuggestions]) => (
+				<Box key={group} display='flex' flexDirection='column' pbs={8}>
+					<Box color='titles-labels' fontScale='c1' fontWeight='bold' pi={12} mbe={4} role='presentation' aria-hidden>
+						{t(filterSuggestionGroupLabels[group])}
+					</Box>
+					{groupSuggestions.map((item) => (
+						<SidebarV2Item key={item.key} role='option' onClick={(event) => handleFilterSuggestion(event, item.value)}>
+							<SidebarV2ItemIcon icon={<Icon name={item.icon} size='x16' />} />
+							<SidebarV2ItemTitle>{item.title}</SidebarV2ItemTitle>
+							<Box color='hint' fontScale='c1' flexShrink={0}>
+								{item.description}
+							</Box>
+						</SidebarV2Item>
+					))}
+				</Box>
+			))}
+		</>
+	);
+};
+
+export default NavBarSearchFilterSuggestions;