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

apps/meteor/client/views/mediaCallHistory/CallHistoryPage.tsx

@@ -0,0 +1,233 @@
+import type { CallHistoryItem, Serialized } from '@rocket.chat/core-typings';
+import { Pagination } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { useSort, usePagination, GenericTableLoadingRow } from '@rocket.chat/ui-client';
+import { useEndpoint, useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
+import { MediaCallHistoryTable, isCallHistoryUnknownContact, isCallHistoryInternalContact } from '@rocket.chat/ui-voip';
+import type { CallHistoryContact } from '@rocket.chat/ui-voip';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCallHistoryPageFilters } from './CallHistoryPageFilters';
+import CallHistoryPageLayout from './CallHistoryPageLayout';
+import CallHistoryRowExternalUser from './CallHistoryRowExternalUser';
+import CallHistoryRowInternalUser from './CallHistoryRowInternalUser';
+import CallHistoryRowUnknownUser from './CallHistoryRowUnknownUser';
+import MediaCallHistoryContextualbar from './MediaCallHistoryContextualbar';
+import { getExternalContact } from './MediaCallHistoryExternal';
+import GenericNoResults from '../../components/GenericNoResults';
+import UserInfoWithData from '../room/contextualBar/UserInfo/UserInfoWithData';
+
+const getSort = (sortBy: 'contact' | 'type' | 'status' | 'timestamp', sortDirection: 'asc' | 'desc') => {
+	const sortDirectionValue = sortDirection === 'asc' ? 1 : -1;
+	switch (sortBy) {
+		case 'type':
+			return { direction: sortDirectionValue, ts: -1 };
+		case 'status':
+			return { state: sortDirectionValue, ts: -1 };
+		case 'timestamp':
+			return { ts: sortDirectionValue };
+		case 'contact':
+			return { contactName: sortDirectionValue, contactUsername: sortDirectionValue, contactExtension: sortDirectionValue, ts: -1 };
+		default:
+			return { ts: -1 };
+	}
+};
+
+const getStateFilter = <T extends string[]>(states: T): T | [...T, 'error'] | undefined => {
+	if (states.length === 0) {
+		return undefined;
+	}
+	if (states.includes('failed')) {
+		return [...states, 'error'];
+	}
+	return states;
+};
+
+const getContact = (item: Serialized<CallHistoryItem>): CallHistoryContact => {
+	if (item.external) {
+		return getExternalContact(item);
+	}
+
+	if (!item.contactUsername || !item.contactName) {
+		return { unknown: true };
+	}
+
+	return { _id: item.contactId, username: item.contactUsername, name: item.contactName };
+};
+
+type DetailsTab = {
+	openTab: 'details';
+	rid: string;
+};
+
+type UserInfoTab = {
+	openTab: 'user-info';
+	rid: string;
+	userId: string;
+};
+
+type Tab = DetailsTab | UserInfoTab;
+
+const CallHistoryPage = () => {
+	const { t } = useTranslation();
+	const [tab, setTab] = useState<Tab | null>(null);
+	const sortProps = useSort<'contact' | 'type' | 'status' | 'timestamp'>('timestamp', 'desc');
+
+	const getCallHistory = useEndpoint('GET', '/v1/call-history.list');
+	const { setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
+
+	const router = useRouter();
+	const historyId = useRouteParameter('historyId');
+
+	const filterProps = useCallHistoryPageFilters();
+
+	const { searchText, type, states } = filterProps;
+
+	const debouncedSearchText = useDebouncedValue(searchText, 400);
+
+	const onClickRow = useCallback(
+		(rid: string, _id: string) => {
+			router.navigate(`/call-history/details/${_id}`);
+			setTab({ openTab: 'details', rid });
+		},
+		[router],
+	);
+
+	const openUserInfo = useCallback(
+		(userId: string, rid: string) => {
+			setTab({ openTab: 'user-info', rid, userId });
+		},
+		[setTab],
+	);
+
+	const closeTab = useCallback(() => {
+		setTab(null);
+		router.navigate('/call-history');
+	}, [router]);
+
+	const handleBack = useCallback(() => {
+		if (historyId && tab?.rid) {
+			onClickRow(tab.rid, historyId);
+			return;
+		}
+		setTab(null);
+	}, [setTab, historyId, onClickRow, tab?.rid]);
+
+	const { data, isPending, error, refetch } = useQuery({
+		queryKey: [
+			'call-history',
+			'list',
+			sortProps.sortBy,
+			sortProps.sortDirection,
+			paginationProps.current,
+			paginationProps.itemsPerPage,
+			type,
+			states,
+			debouncedSearchText,
+		],
+		queryFn: () => {
+			const sort = getSort(sortProps.sortBy, sortProps.sortDirection);
+			const stateFilter = getStateFilter(states);
+
+			return getCallHistory({
+				count: paginationProps.itemsPerPage,
+				offset: paginationProps.current,
+				sort: JSON.stringify(sort),
+				...(type !== 'all' && { direction: type }),
+				...(stateFilter && { state: stateFilter }),
+				...(debouncedSearchText && { filter: debouncedSearchText }),
+			});
+		},
+	});
+
+	const tableData = useMemo(() => {
+		return data?.items.map((item) => {
+			return {
+				_id: item._id,
+				...('rid' in item && { rid: item.rid }),
+				contact: getContact(item),
+				...('messageId' in item && { messageId: item.messageId }),
+				type: item.direction,
+				status: item.state,
+				timestamp: item.ts,
+				duration: item.duration,
+			};
+		});
+	}, [data]);
+
+	const contextualBar = (() => {
+		if (tab?.openTab === 'user-info') {
+			return <UserInfoWithData rid={tab.rid} uid={tab.userId} onClose={closeTab} onClickBack={historyId ? handleBack : undefined} />;
+		}
+		if (tab?.openTab === 'details' && historyId) {
+			return <MediaCallHistoryContextualbar historyId={historyId} onClose={closeTab} messageRoomId={tab.rid} openUserInfo={openUserInfo} />;
+		}
+		return null;
+	})();
+
+	const pagination = (
+		<Pagination divider count={data?.total || 0} onSetItemsPerPage={setItemsPerPage} onSetCurrent={setCurrent} {...paginationProps} />
+	);
+
+	if (isPending) {
+		return (
+			<CallHistoryPageLayout filterProps={filterProps}>
+				<MediaCallHistoryTable sort={sortProps}>
+					<GenericTableLoadingRow cols={5} />
+					<GenericTableLoadingRow cols={5} />
+					<GenericTableLoadingRow cols={5} />
+					<GenericTableLoadingRow cols={5} />
+				</MediaCallHistoryTable>
+				{pagination}
+			</CallHistoryPageLayout>
+		);
+	}
+
+	if (error) {
+		return (
+			<CallHistoryPageLayout filterProps={filterProps}>
+				<GenericNoResults
+					icon='warning'
+					title={t('Something_went_wrong')}
+					description={t('Please_try_again')}
+					buttonTitle={t('Reload_page')}
+					buttonAction={() => refetch()}
+				/>
+			</CallHistoryPageLayout>
+		);
+	}
+
+	return (
+		<CallHistoryPageLayout filterProps={filterProps} contextualBar={contextualBar}>
+			{!tableData || (tableData.length === 0 && <GenericNoResults />)}
+			{tableData && tableData.length > 0 && (
+				<MediaCallHistoryTable sort={sortProps}>
+					{tableData.map((item) => {
+						if (isCallHistoryUnknownContact(item.contact)) {
+							return <CallHistoryRowUnknownUser key={item._id} {...item} contact={item.contact} onClick={() => onClickRow('', item._id)} />;
+						}
+						if (isCallHistoryInternalContact(item.contact)) {
+							return (
+								<CallHistoryRowInternalUser
+									key={item._id}
+									{...item}
+									contact={item.contact}
+									onClick={() => onClickRow(item.rid ?? '', item._id)}
+									rid={item.rid ?? ''}
+									onClickUserInfo={item.rid ? openUserInfo : undefined}
+								/>
+							);
+						}
+
+						return <CallHistoryRowExternalUser key={item._id} {...item} contact={item.contact} onClick={() => onClickRow('', item._id)} />;
+					})}
+				</MediaCallHistoryTable>
+			)}
+			{pagination}
+		</CallHistoryPageLayout>
+	);
+};
+
+export default CallHistoryPage;

apps/meteor/client/views/mediaCallHistory/CallHistoryPageFilters.tsx

@@ -0,0 +1,117 @@
+import { Box, Icon, TextInput, Select } from '@rocket.chat/fuselage';
+import type { OptionProp } from '@rocket.chat/ui-client';
+import { MultiSelectCustom } from '@rocket.chat/ui-client';
+import { useCallback, useMemo, useState } from 'react';
+import type { ChangeEvent, Key, SubmitEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type StatesFilter = Array<'ended' | 'transferred' | 'not-answered' | 'failed'>;
+type TypeFilter = 'inbound' | 'outbound' | 'all';
+
+export type CallHistoryPageFiltersProps = {
+	onChangeText: (nameOrUsernameOrExtension: string) => void;
+	onChangeType: (type: TypeFilter) => void;
+	onChangeStates: (states: StatesFilter) => void;
+	searchText: string;
+	type: TypeFilter;
+	states: StatesFilter;
+};
+
+const typeOptions = [
+	{ id: 'inbound', text: 'Inbound' },
+	{ id: 'outbound', text: 'Outbound' },
+	{ id: 'all', text: 'All_directions' },
+] as const;
+
+const statesOptions = [
+	{ id: 'filter_by_status', text: 'Filter_By_Status', isGroupTitle: true },
+	{ id: 'ended', text: 'Ended', icon: { name: 'phone-off', color: 'default' } },
+	{ id: 'transferred', text: 'Transferred', icon: { name: 'arrow-forward', color: 'default' } },
+	{ id: 'not-answered', text: 'Not_answered', icon: { name: 'phone-question-mark', color: 'warning' } },
+	{ id: 'failed', text: 'Failed', icon: { name: 'phone-issue', color: 'danger' } },
+] as const;
+
+export const useCallHistoryPageFilters = () => {
+	const [searchText, setSearchText] = useState('');
+	const [type, setType] = useState<TypeFilter>('all');
+	const [states, setStates] = useState<StatesFilter>(['ended', 'transferred', 'not-answered', 'failed']);
+
+	const onChangeText = useCallback((text: string) => {
+		setSearchText(text);
+	}, []);
+
+	const onChangeType = useCallback((type: TypeFilter) => {
+		setType(type);
+	}, []);
+
+	const onChangeStates = useCallback((states: StatesFilter) => {
+		setStates(states);
+	}, []);
+
+	return { searchText, type, states, onChangeText, onChangeType, onChangeStates };
+};
+
+const CallHistoryPageFilters = ({ onChangeText, onChangeType, onChangeStates, searchText, type, states }: CallHistoryPageFiltersProps) => {
+	const { t } = useTranslation();
+
+	const selectTypeOptions: [string, string, boolean][] = useMemo(() => {
+		return typeOptions.map((option) => [option.id, t(option.text), option.id === type]);
+	}, [type, t]);
+
+	const handleChangeType = useCallback(
+		(options: OptionProp[]) => {
+			onChangeStates(options.map((option) => option.id) as StatesFilter);
+		},
+		[onChangeStates],
+	);
+
+	const dropdownStatesOptions = useMemo(() => {
+		return statesOptions.map((option) => ({
+			...option,
+			checked: option.id !== 'filter_by_status' && states.includes(option.id),
+		}));
+	}, [states]);
+
+	const selectedOptions = useMemo(() => {
+		return statesOptions.filter((option) => option.id !== 'filter_by_status' && states.includes(option.id));
+	}, [states]);
+
+	return (
+		<Box
+			is='form'
+			onSubmit={useCallback((e: SubmitEvent<HTMLFormElement>) => e.preventDefault(), [])}
+			marginBlock='x8'
+			display='flex'
+			flexWrap='wrap'
+			alignItems='center'
+			justifyContent='center'
+		>
+			<Box minWidth='x224' flexBasis='45%' display='flex' margin='x4' flexGrow={2} flexShrink={0}>
+				<TextInput
+					name='search-rooms'
+					alignItems='center'
+					placeholder={t('Search_calls')}
+					endAddon={<Icon name='magnifier' size='x20' />}
+					onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeText(e.currentTarget.value)}
+					value={searchText}
+				/>
+			</Box>
+			<Box display='flex' flexGrow={1} flexShrink={2} flexWrap='wrap'>
+				<Box minWidth='x224' margin='x4' flexGrow={1} flexShrink={1} alignItems='stretch' display='flex'>
+					<Select options={selectTypeOptions} value={type} onChange={(key: Key) => onChangeType(key as TypeFilter)} />
+				</Box>
+				<Box minWidth='x224' margin='x4' flexGrow={1} flexShrink={1}>
+					<MultiSelectCustom
+						dropdownOptions={dropdownStatesOptions}
+						defaultTitle='All_statuses'
+						selectedOptionsTitle='Status'
+						selectedOptions={selectedOptions}
+						setSelectedOptions={handleChangeType}
+					/>
+				</Box>
+			</Box>
+		</Box>
+	);
+};
+
+export default CallHistoryPageFilters;

apps/meteor/client/views/mediaCallHistory/CallHistoryPageLayout.tsx

@@ -0,0 +1,30 @@
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import CallHistoryPageFilters, { type CallHistoryPageFiltersProps } from './CallHistoryPageFilters';
+
+export type CallHistoryPageLayoutProps = {
+	children: ReactNode;
+	contextualBar?: ReactNode;
+	filterProps: CallHistoryPageFiltersProps;
+};
+
+const CallHistoryPageLayout = ({ children, contextualBar, filterProps }: CallHistoryPageLayoutProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<PageHeader title={t('Call_history')} />
+				<PageContent>
+					<CallHistoryPageFilters {...filterProps} />
+					{children}
+				</PageContent>
+			</Page>
+			{contextualBar}
+		</Page>
+	);
+};
+
+export default CallHistoryPageLayout;

apps/meteor/client/views/mediaCallHistory/CallHistoryRowExternalUser.tsx

@@ -0,0 +1,51 @@
+import { GenericMenu } from '@rocket.chat/ui-client';
+import type { CallHistoryExternalContact, CallHistoryTableRowProps } from '@rocket.chat/ui-voip';
+import { CallHistoryTableRow, usePeekMediaSessionState, useWidgetExternalControls } from '@rocket.chat/ui-voip';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type CallHistoryRowExternalUserProps = Omit<CallHistoryTableRowProps<CallHistoryExternalContact>, 'onClick' | 'menu'> & {
+	onClick: (historyId: string) => void;
+};
+
+const CallHistoryRowExternalUser = ({ _id, contact, type, status, duration, timestamp, onClick }: CallHistoryRowExternalUserProps) => {
+	const { t } = useTranslation();
+
+	const state = usePeekMediaSessionState();
+	const { toggleWidget } = useWidgetExternalControls();
+
+	const handleClick = useCallback(() => {
+		onClick(_id);
+	}, [onClick, _id]);
+
+	const actions = useMemo(() => {
+		if (state === 'unavailable') {
+			return [];
+		}
+		const disabled = state !== 'available';
+		return [
+			{
+				id: 'voiceCall',
+				icon: 'phone',
+				content: t('Voice_call'),
+				disabled,
+				tooltip: disabled ? t('Call_in_progress') : undefined,
+				onClick: () => toggleWidget({ number: contact.number }),
+			} as const,
+		];
+	}, [contact, toggleWidget, t, state]);
+
+	return (
+		<CallHistoryTableRow
+			_id={_id}
+			contact={contact}
+			type={type}
+			status={status}
+			duration={duration}
+			timestamp={timestamp}
+			onClick={handleClick}
+			menu={<GenericMenu title={t('Options')} items={actions} />}
+		/>
+	);
+};
+export default CallHistoryRowExternalUser;

apps/meteor/client/views/mediaCallHistory/CallHistoryRowInternalUser.tsx

@@ -0,0 +1,101 @@
+import type { Keys as IconName } from '@rocket.chat/icons';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { CallHistoryTableRow, usePeekMediaSessionState } from '@rocket.chat/ui-voip';
+import type { CallHistoryTableRowProps, CallHistoryInternalContact, PeekMediaSessionStateReturn } from '@rocket.chat/ui-voip';
+import type { TFunction } from 'i18next';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useMediaCallInternalHistoryActions } from './useMediaCallInternalHistoryActions';
+
+export type CallHistoryRowInternalUserProps = Omit<CallHistoryTableRowProps<CallHistoryInternalContact>, 'onClick' | 'menu'> & {
+	messageId?: string;
+	rid: string;
+	onClickUserInfo?: (userId: string, rid: string) => void;
+	onClick: (historyId: string) => void;
+};
+
+type HistoryActions = 'voiceCall' | 'videoCall' | 'jumpToMessage' | 'directMessage' | 'userInfo';
+
+type HistoryActionCallbacks = {
+	[K in HistoryActions]?: () => void;
+};
+
+const iconDictionary: Record<HistoryActions, IconName> = {
+	voiceCall: 'phone',
+	videoCall: 'video',
+	jumpToMessage: 'jump',
+	directMessage: 'balloon',
+	userInfo: 'user',
+} as const;
+
+const i18nDictionary: Record<HistoryActions, string> = {
+	voiceCall: 'Voice_call',
+	videoCall: 'Video_call',
+	jumpToMessage: 'Jump_to_message',
+	directMessage: 'Direct_Message',
+	userInfo: 'User_info',
+} as const;
+
+const getItems = (actions: HistoryActionCallbacks, t: TFunction, state: PeekMediaSessionStateReturn) => {
+	return (Object.entries(actions) as [HistoryActions, () => void][])
+		.filter(([_, callback]) => callback)
+		.map(([action, callback]) => {
+			const disabled = action === 'voiceCall' && state !== 'available';
+			return {
+				id: action,
+				icon: iconDictionary[action],
+				content: t(i18nDictionary[action]),
+				disabled,
+				tooltip: disabled ? t('Call_in_progress') : undefined,
+				onClick: callback,
+			};
+		});
+};
+
+const CallHistoryRowInternalUser = ({
+	_id,
+	contact,
+	type,
+	status,
+	duration,
+	timestamp,
+	messageId,
+	rid,
+	onClickUserInfo,
+	onClick,
+}: CallHistoryRowInternalUserProps) => {
+	const { t } = useTranslation();
+	const state = usePeekMediaSessionState();
+	const actions = useMediaCallInternalHistoryActions({
+		contact: {
+			_id: contact._id,
+			username: contact.username ?? '',
+			name: contact.name,
+			displayName: contact.name || contact.username,
+		},
+		messageId,
+		messageRoomId: rid,
+		openUserInfo: onClickUserInfo ? (userId) => onClickUserInfo(userId, rid) : undefined,
+	});
+
+	const items = getItems(actions, t, state);
+
+	const handleClick = useCallback(() => {
+		onClick(_id);
+	}, [onClick, _id]);
+	return (
+		<CallHistoryTableRow
+			_id={_id}
+			contact={contact}
+			type={type}
+			status={status}
+			duration={duration}
+			timestamp={timestamp}
+			onClick={handleClick}
+			menu={<GenericMenu title={t('Options')} items={items} />}
+		/>
+	);
+};
+
+export default CallHistoryRowInternalUser;

apps/meteor/client/views/mediaCallHistory/CallHistoryRowUnknownUser.tsx

@@ -0,0 +1,30 @@
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { CallHistoryTableRow } from '@rocket.chat/ui-voip';
+import type { CallHistoryTableRowProps, CallHistoryUnknownContact } from '@rocket.chat/ui-voip';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type CallHistoryRowUnknownUserProps = Omit<CallHistoryTableRowProps<CallHistoryUnknownContact>, 'onClick' | 'menu'> & {
+	onClick: (historyId: string) => void;
+};
+
+const CallHistoryRowUnknownUser = ({ _id, contact, type, status, duration, timestamp, onClick }: CallHistoryRowUnknownUserProps) => {
+	const { t } = useTranslation();
+	const handleClick = useCallback(() => {
+		onClick(_id);
+	}, [onClick, _id]);
+
+	return (
+		<CallHistoryTableRow
+			_id={_id}
+			contact={contact}
+			type={type}
+			status={status}
+			duration={duration}
+			timestamp={timestamp}
+			onClick={handleClick}
+			menu={<GenericMenu title={t('Options')} items={[]} />}
+		/>
+	);
+};
+export default CallHistoryRowUnknownUser;

apps/meteor/client/views/mediaCallHistory/MediaCallHistoryContextualbar.tsx

@@ -0,0 +1,85 @@
+import {
+	ContextualbarHeader,
+	ContextualbarIcon,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarEmptyContent,
+	ContextualbarDialog,
+	ContextualbarSkeleton,
+} from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import MediaCallHistoryExternal, { isExternalCallHistoryItem } from './MediaCallHistoryExternal';
+import MediaCallHistoryInternal, { isInternalCallHistoryItem } from './MediaCallHistoryInternal';
+import { callHistoryQueryKeys } from '../../lib/queryKeys';
+
+export type MediaCallHistoryContextualbarProps = {
+	openRoomId?: string;
+	messageRoomId?: string;
+	openUserInfo?: (userId: string, rid: string) => void;
+	onClose: () => void;
+	callId?: string;
+	historyId?: string;
+};
+
+const MediaCallHistoryContextualbar = ({
+	openRoomId,
+	messageRoomId,
+	openUserInfo,
+	callId,
+	historyId,
+	onClose,
+}: MediaCallHistoryContextualbarProps) => {
+	const { t } = useTranslation();
+
+	const getCallHistory = useEndpoint('GET', '/v1/call-history.info');
+	const { data, isPending, isSuccess } = useQuery({
+		queryKey: callHistoryQueryKeys.info(callId || historyId),
+		queryFn: async () => {
+			if (callId) {
+				return getCallHistory({ callId });
+			}
+			if (historyId) {
+				return getCallHistory({ historyId });
+			}
+			throw new Error('Call ID or history ID is required');
+		},
+		staleTime: Infinity, // Call history should never change...
+		enabled: !!callId || !!historyId,
+	});
+
+	if (isPending) {
+		return <ContextualbarSkeleton />;
+	}
+
+	if (isSuccess && isInternalCallHistoryItem(data)) {
+		return (
+			<MediaCallHistoryInternal
+				onClose={onClose}
+				data={data}
+				openUserInfo={openUserInfo}
+				openRoomId={openRoomId}
+				messageRoomId={messageRoomId}
+			/>
+		);
+	}
+
+	if (isSuccess && isExternalCallHistoryItem(data)) {
+		return <MediaCallHistoryExternal onClose={onClose} data={data} />;
+	}
+
+	return (
+		<ContextualbarDialog onClose={onClose}>
+			<ContextualbarHeader>
+				<ContextualbarIcon name='info-circled' />
+				<ContextualbarTitle>{t('Call_info')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<ContextualbarEmptyContent icon='warning' title={t('Call_info_could_not_be_loaded')} subtitle={t('Please_try_again')} />
+		</ContextualbarDialog>
+	);
+};
+
+export default MediaCallHistoryContextualbar;

apps/meteor/client/views/mediaCallHistory/MediaCallHistoryContextualbarRoom.tsx

@@ -0,0 +1,21 @@
+import { useRoomToolbox, useRouteParameter } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+
+import MediaCallHistoryContextualbar from './MediaCallHistoryContextualbar';
+import { useRoom } from '../room/contexts/RoomContext';
+
+const MediaCallHistoryContextualbarRoom = () => {
+	const room = useRoom();
+	const toolbox = useRoomToolbox();
+	const context = useRouteParameter('context');
+	const openUserInfo = useCallback(
+		(userId: string) => {
+			toolbox.openTab('user-info', userId);
+		},
+		[toolbox],
+	);
+
+	return <MediaCallHistoryContextualbar callId={context} openRoomId={room._id} openUserInfo={openUserInfo} onClose={toolbox.closeTab} />;
+};
+
+export default MediaCallHistoryContextualbarRoom;

apps/meteor/client/views/mediaCallHistory/MediaCallHistoryExternal.tsx

@@ -0,0 +1,61 @@
+import type { CallHistoryItem, IInternalMediaCallHistoryItem, IMediaCall, Serialized } from '@rocket.chat/core-typings';
+import {
+	CallHistoryContextualBar,
+	useWidgetExternalControls,
+	usePeekMediaSessionState,
+	type CallHistoryExternalContact,
+	type CallHistoryUnknownContact,
+} from '@rocket.chat/ui-voip';
+import { useMemo } from 'react';
+
+type ExternalCallEndpointData = Serialized<{
+	item: Exclude<CallHistoryItem, IInternalMediaCallHistoryItem>;
+	call?: IMediaCall;
+}>;
+
+export type MediaCallHistoryExternalProps = {
+	data: ExternalCallEndpointData;
+	onClose: () => void;
+};
+
+export const getExternalContact = (item: ExternalCallEndpointData['item']): CallHistoryExternalContact | CallHistoryUnknownContact => {
+	if (item.type === 'media-call') {
+		return {
+			number: item.contactExtension,
+		};
+	}
+
+	return { unknown: true };
+};
+
+export const isExternalCallHistoryItem = (data: { item: Serialized<CallHistoryItem> }): data is ExternalCallEndpointData => {
+	return data.item.type !== 'media-call' || data.item.external;
+};
+
+const MediaCallHistoryExternal = ({ data, onClose }: MediaCallHistoryExternalProps) => {
+	const contact = useMemo(() => getExternalContact(data.item), [data]);
+	const historyData = useMemo(() => {
+		return {
+			callId: data.item.callId,
+			direction: data.item.direction,
+			duration: data.item.duration,
+			startedAt: new Date(data.item.ts),
+			state: data.item.state,
+		};
+	}, [data]);
+	const state = usePeekMediaSessionState();
+	const { toggleWidget } = useWidgetExternalControls();
+
+	const actions = useMemo(() => {
+		if (state !== 'available') {
+			return {};
+		}
+		return {
+			voiceCall: () => toggleWidget(contact),
+		};
+	}, [contact, state, toggleWidget]);
+
+	return <CallHistoryContextualBar onClose={onClose} actions={actions} contact={contact} data={historyData} />;
+};
+
+export default MediaCallHistoryExternal;

apps/meteor/client/views/mediaCallHistory/MediaCallHistoryInternal.tsx

@@ -0,0 +1,63 @@
+import type { CallHistoryItem, IInternalMediaCallHistoryItem, IMediaCall, Serialized } from '@rocket.chat/core-typings';
+import { CallHistoryContextualBar, type CallHistoryInternalContact } from '@rocket.chat/ui-voip';
+import { useMemo } from 'react';
+
+import { useMediaCallInternalHistoryActions } from './useMediaCallInternalHistoryActions';
+
+type InternalCallEndpointData = Serialized<{
+	item: IInternalMediaCallHistoryItem;
+	call: IMediaCall;
+}>;
+
+export type MediaCallHistoryInternalProps = {
+	data: InternalCallEndpointData;
+	onClose: () => void;
+	openUserInfo?: (userId: string, rid: string) => void;
+	openRoomId?: string;
+	messageRoomId?: string;
+};
+
+export const isInternalCallHistoryItem = (data: { item: Serialized<CallHistoryItem> }): data is InternalCallEndpointData => {
+	return data.item.type === 'media-call' && !data.item.external;
+};
+
+const getContact = (item: InternalCallEndpointData['item'], call: InternalCallEndpointData['call']): CallHistoryInternalContact => {
+	const { caller, callee } = call ?? {};
+	const contact = caller?.id === item.contactId ? caller : callee;
+	const { id, sipExtension, username, displayName, ...rest } = contact ?? {};
+	return {
+		...rest,
+		_id: id,
+		username: username ?? '',
+		name: displayName,
+		displayName,
+		voiceCallExtension: sipExtension,
+	};
+};
+
+const MediaCallHistoryInternal = ({ data, onClose, openUserInfo, openRoomId, messageRoomId }: MediaCallHistoryInternalProps) => {
+	const contact = useMemo(() => getContact(data.item, data.call), [data]);
+	const historyData = useMemo(() => {
+		return {
+			callId: data.call._id,
+			direction: data.item.direction,
+			duration: data.item.duration,
+			startedAt: new Date(data.item.ts),
+			state: data.item.state,
+		};
+	}, [data]);
+
+	const rid = messageRoomId || data.item.rid;
+
+	const actions = useMediaCallInternalHistoryActions({
+		contact,
+		messageId: data.item.messageId,
+		openRoomId,
+		messageRoomId: rid,
+		openUserInfo: openUserInfo && rid ? (userId: string) => openUserInfo(userId, rid) : undefined,
+	});
+
+	return <CallHistoryContextualBar onClose={onClose} actions={actions} contact={contact} data={historyData} />;
+};
+
+export default MediaCallHistoryInternal;

apps/meteor/client/views/mediaCallHistory/useMediaCallInternalHistoryActions.ts

@@ -0,0 +1,75 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useGoToDirectMessage } from '@rocket.chat/ui-client';
+import { useRouter, useUserAvatarPath } from '@rocket.chat/ui-contexts';
+import { useWidgetExternalControls, usePeekMediaSessionState, type CallHistoryInternalContact } from '@rocket.chat/ui-voip';
+import { useMemo } from 'react';
+
+type UseMediaCallInternalHistoryActionsBaseOptions = {
+	contact: CallHistoryInternalContact;
+	messageId?: string;
+	openRoomId?: string;
+	messageRoomId?: string;
+	openUserInfo?: (userId: string) => void;
+};
+
+export const useMediaCallInternalHistoryActions = ({
+	contact,
+	messageId,
+	openRoomId,
+	messageRoomId,
+	openUserInfo,
+}: UseMediaCallInternalHistoryActionsBaseOptions) => {
+	const state = usePeekMediaSessionState();
+	const { toggleWidget } = useWidgetExternalControls();
+	const router = useRouter();
+
+	const getAvatarUrl = useUserAvatarPath();
+
+	const voiceCall = useStableCallback(() => {
+		if (state !== 'available') {
+			return;
+		}
+
+		toggleWidget({
+			userId: contact._id,
+			displayName: contact.displayName ?? '',
+			username: contact.username,
+			avatarUrl: getAvatarUrl({ username: contact.username }),
+			callerId: contact.voiceCallExtension,
+		});
+	});
+
+	const goToDirectMessage = useGoToDirectMessage({ username: contact.username }, openRoomId ?? '');
+
+	const jumpToMessage = useStableCallback(() => {
+		const rid = messageRoomId || openRoomId;
+		if (!messageId || !rid) {
+			return;
+		}
+
+		const { msg: _, ...searchParams } = router.getSearchParameters();
+
+		router.navigate({
+			name: 'direct',
+			params: { rid },
+			search: { ...searchParams, msg: messageId },
+		});
+	});
+
+	const userInfo = useStableCallback(() => {
+		if (!openUserInfo) {
+			return;
+		}
+		openUserInfo(contact._id);
+	});
+
+	return useMemo(
+		() => ({
+			voiceCall,
+			directMessage: goToDirectMessage,
+			jumpToMessage: messageId && messageRoomId ? jumpToMessage : undefined,
+			userInfo: openUserInfo ? () => userInfo() : undefined,
+		}),
+		[voiceCall, goToDirectMessage, messageId, messageRoomId, jumpToMessage, openUserInfo, userInfo],
+	);
+};