feat: Voice message blocks (#7057)

Author: diegolmello

android/app/src/main/assets/fonts/custom.ttf

@@ -160,9 +160,10 @@ export const mappedIcons = {
 	'percentage': 59777,
 	'phone': 59806,
 	'phone-disabled': 59804,
-	'phone-end': 59805,
 	'phone-in': 59809,
-	'phone-issue': 59835,
+	'phone-issue': 59879,
+	'phone-off': 59805,
+	'phone-question-mark': 59835,
 	'pin': 59808,
 	'pin-map': 59807,
 	'play': 59811,

app/containers/CustomIcon/mappedIcons.js

@@ -30,7 +30,7 @@ export const Actions = ({ blockId, appId, elements, parser }: IActions) => {
 		<>
 			{elements.map((element, index) => {
 				const isVisible = !showMoreVisible || index < maxVisible;
-				const component = parser.renderActions({ blockId, appId, ...element }, BlockContext.ACTION, parser);
+				const component = parser?.renderActions({ blockId, appId, ...element }, BlockContext.ACTION);
 				// Always render the component, but hide it with styles if needed
 				return (
 					<View key={element.actionId || `action-${index}`} style={!isVisible ? styles.hidden : undefined}>

app/containers/CustomIcon/selection.json

@@ -13,5 +13,11 @@ const styles = StyleSheet.create({
 });
 
 export const Context = ({ elements, parser }: IContext) => (
-	<View style={styles.container}>{elements?.map(element => parser?.renderContext(element, BlockContext.CONTEXT, parser))}</View>
+	<View style={styles.container}>
+		{elements?.map((element, index) => (
+			<React.Fragment key={(element as any).type ? `${(element as any).type}-${index}` : `context-${index}`}>
+				{parser?.renderContext(element, BlockContext.CONTEXT)}
+			</React.Fragment>
+		))}
+	</View>
 );

app/containers/UIKit/Actions.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { Icon, resolveIconName } from './Icon';
+
+const mockHasIcon = jest.fn();
+const mockCustomIcon = jest.fn(() => <Text testID='custom-icon'>icon</Text>);
+
+jest.mock('../CustomIcon', () => ({
+	hasIcon: (...args: unknown[]) => mockHasIcon(...args),
+	CustomIcon: (...props: Parameters<typeof mockCustomIcon>) => mockCustomIcon(...props)
+}));
+
+jest.mock('../../theme', () => ({
+	useTheme: () => ({
+		colors: {
+			fontDefault: '#000000',
+			fontDanger: '#d00000',
+			fontSecondaryInfo: '#0060d0',
+			statusFontWarning: '#d09000',
+			statusFontDanger: '#ff2020',
+			surfaceTint: '#f2f2f2'
+		}
+	})
+}));
+
+describe('UIKit Icon', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('resolveIconName', () => {
+		it('returns original icon when available', () => {
+			mockHasIcon.mockImplementation((name: string) => name === 'bell');
+
+			expect(resolveIconName('bell')).toBe('bell');
+		});
+
+		it('resolves known alias when alias icon exists', () => {
+			mockHasIcon.mockImplementation((name: string) => name === 'phone-off');
+
+			expect(resolveIconName('phone-end')).toBe('phone-off');
+		});
+
+		it('falls back to info when icon and alias are unavailable', () => {
+			mockHasIcon.mockReturnValue(false);
+
+			expect(resolveIconName('unknown')).toBe('info');
+		});
+	});
+
+	it('renders secondary variant color', () => {
+		mockHasIcon.mockReturnValue(true);
+		render(<Icon element={{ icon: 'bell', type: 'icon', variant: 'secondary' } as any} />);
+
+		expect(mockCustomIcon).toHaveBeenCalledTimes(1);
+		const firstCallArg = (mockCustomIcon.mock.calls[0] as any[])[0];
+		expect(firstCallArg).toEqual(
+			expect.objectContaining({
+				name: 'bell',
+				color: '#0060d0',
+				size: 20
+			})
+		);
+	});
+
+	it('uses framed danger color and frame background', () => {
+		mockHasIcon.mockReturnValue(true);
+		const { toJSON } = render(<Icon element={{ icon: 'bell', type: 'icon', variant: 'danger', framed: true } as any} />);
+
+		expect(mockCustomIcon).toHaveBeenCalledTimes(1);
+		const firstCallArg = (mockCustomIcon.mock.calls[0] as any[])[0];
+		expect(firstCallArg).toEqual(
+			expect.objectContaining({
+				name: 'bell',
+				color: '#ff2020',
+				size: 20
+			})
+		);
+		expect(toJSON()).toMatchObject({
+			props: {
+				style: expect.arrayContaining([expect.objectContaining({ backgroundColor: '#f2f2f2' })])
+			}
+		});
+	});
+});

app/containers/UIKit/Context.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { hasIcon, CustomIcon } from '../CustomIcon';
+import { useTheme } from '../../theme';
+import { type IIcon } from './interfaces';
+
+const iconAliases: Record<string, string> = {
+	'phone-end': 'phone-off'
+};
+
+const styles = StyleSheet.create({
+	frame: {
+		width: 28,
+		height: 28,
+		borderRadius: 4,
+		alignItems: 'center',
+		justifyContent: 'center'
+	}
+});
+
+export const resolveIconName = (icon: string) => {
+	if (hasIcon(icon)) {
+		return icon as any;
+	}
+
+	const aliasedIcon = iconAliases[icon];
+	if (aliasedIcon && hasIcon(aliasedIcon)) {
+		return aliasedIcon as any;
+	}
+
+	return 'info' as any;
+};
+
+const getIconColor = (variant: IIcon['variant'], colors: ReturnType<typeof useTheme>['colors'], framed?: boolean) => {
+	switch (variant) {
+		case 'danger':
+			return framed ? colors.statusFontDanger : colors.fontDanger;
+		case 'secondary':
+			return colors.fontSecondaryInfo;
+		case 'warning':
+			return colors.statusFontWarning;
+		default:
+			return colors.fontDefault;
+	}
+};
+
+export const Icon = ({ element }: { element: IIcon }) => {
+	const { colors } = useTheme();
+	const { icon, variant = 'default', framed } = element;
+	const color = getIconColor(variant, colors, framed);
+	const renderedIcon = <CustomIcon name={resolveIconName(icon)} size={20} color={color} />;
+
+	if (!framed) {
+		return renderedIcon;
+	}
+
+	return <View style={[styles.frame, { backgroundColor: colors.surfaceTint }]}>{renderedIcon}</View>;
+};

app/containers/UIKit/Icon.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import { type BlockContext } from '@rocket.chat/ui-kit';
+
+import ActivityIndicator from '../ActivityIndicator';
+import { BUTTON_HIT_SLOP } from '../message/utils';
+import openLink from '../../lib/methods/helpers/openLink';
+import { useTheme } from '../../theme';
+import { useBlockContext } from './utils';
+import { Icon } from './Icon';
+import { type IIconButton, type IText } from './interfaces';
+
+const styles = StyleSheet.create({
+	button: {
+		width: 32,
+		height: 32,
+		borderWidth: 1,
+		borderRadius: 8,
+		alignItems: 'center',
+		justifyContent: 'center'
+	},
+	loading: {
+		padding: 0
+	}
+});
+
+const getLabel = (label?: string | IText, fallback?: string) => {
+	if (typeof label === 'string') {
+		return label;
+	}
+
+	if (label?.text) {
+		return label.text;
+	}
+
+	return fallback || 'icon button';
+};
+
+export const IconButton = ({ element, context }: { element: IIconButton; context: BlockContext }) => {
+	const { theme, colors } = useTheme();
+	const [{ loading }, action] = useBlockContext(element, context);
+	const label = getLabel(element.label, element.icon?.icon);
+
+	const onPress = async () => {
+		if (element.url) {
+			await Promise.allSettled([action({ value: element.value }), openLink(element.url, theme)]);
+			return;
+		}
+
+		await action({ value: element.value });
+	};
+
+	return (
+		<Pressable
+			onPress={onPress}
+			disabled={loading}
+			hitSlop={BUTTON_HIT_SLOP}
+			android_ripple={{ color: colors.surfaceNeutral, borderless: false }}
+			style={({ pressed }) => [
+				styles.button,
+				{
+					borderColor: colors.strokeLight,
+					backgroundColor: colors.surfaceLight,
+					opacity: pressed ? 0.7 : 1
+				}
+			]}
+			accessibilityRole={element.url ? 'link' : 'button'}
+			accessibilityLabel={label}>
+			{loading ? <ActivityIndicator style={styles.loading} /> : <Icon element={element.icon} />}
+		</Pressable>
+	);
+};

app/containers/UIKit/Icon.tsx

@@ -5,7 +5,7 @@ import { BlockContext } from '@rocket.chat/ui-kit';
 
 import ImageContainer from '../message/Components/Attachments/Image';
 import Navigation from '../../lib/navigation/appNavigation';
-import { type IThumb, type IImage, type IElement } from './interfaces';
+import { type IThumb, type IImage } from './interfaces';
 import { type IAttachment } from '../../definitions';
 
 const styles = StyleSheet.create({
@@ -33,7 +33,7 @@ export const Media = ({ element }: IImage) => {
 	return <ImageContainer file={{ image_url: imageUrl }} showAttachment={showAttachment} />;
 };
 
-const genericImage = (element: IElement, context?: number) => {
+const genericImage = ({ element, context }: IImage) => {
 	switch (context) {
 		case BlockContext.SECTION:
 			return <Thumb element={element} />;
@@ -44,4 +44,4 @@ const genericImage = (element: IElement, context?: number) => {
 	}
 };
 
-export const Image = ({ element, context }: IImage) => genericImage(element, context);
+export const Image = (props: IImage) => genericImage(props);

app/containers/UIKit/IconButton.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { InfoCard } from './InfoCard';
+
+jest.mock('../../theme', () => ({
+	useTheme: () => ({
+		colors: {
+			surfaceTint: '#f7f7f7',
+			strokeExtraLight: '#e1e1e1',
+			surfaceLight: '#ffffff'
+		}
+	})
+}));
+
+describe('InfoCard', () => {
+	it('renders row elements in order and applies row background', () => {
+		const parser = {
+			icon: jest.fn((element: any) => <Text>{`icon:${element.icon}`}</Text>),
+			plain_text: jest.fn((element: any) => <Text>{`text:${element.text}`}</Text>),
+			mrkdwn: jest.fn((element: any) => <Text>{`md:${element.text}`}</Text>),
+			icon_button: jest.fn(() => <Text>action</Text>)
+		};
+
+		const { getByText, toJSON, UNSAFE_getAllByType } = render(
+			<InfoCard
+				type='info_card'
+				parser={parser as any}
+				blockId='info-card'
+				rows={[
+					{
+						background: 'default',
+						elements: [
+							{ type: 'icon', icon: 'info', variant: 'default' },
+							{ type: 'plain_text', text: 'Plain text' },
+							{ type: 'mrkdwn', text: '*Markdown*' }
+						]
+					}
+				]}
+			/>
+		);
+
+		expect(getByText('icon:info')).toBeTruthy();
+		expect(getByText('text:Plain text')).toBeTruthy();
+		expect(getByText('md:*Markdown*')).toBeTruthy();
+
+		const allTexts = UNSAFE_getAllByType(Text).map(node => node.props.children);
+		expect(allTexts).toEqual(expect.arrayContaining(['icon:info', 'text:Plain text', 'md:*Markdown*']));
+
+		expect(toJSON()).toMatchObject({
+			children: expect.arrayContaining([
+				expect.objectContaining({
+					props: {
+						style: expect.arrayContaining([expect.objectContaining({ backgroundColor: '#ffffff' })])
+					}
+				})
+			])
+		});
+	});
+
+	it('ignores row action rendering for now (non-interactive)', () => {
+		const parser = {
+			icon: jest.fn((element: any) => <Text>{`icon:${element.icon}`}</Text>),
+			plain_text: jest.fn((element: any) => <Text>{`text:${element.text}`}</Text>),
+			mrkdwn: jest.fn((element: any) => <Text>{`md:${element.text}`}</Text>),
+			icon_button: jest.fn(() => <Text>action</Text>)
+		};
+
+		const { queryByText } = render(
+			<InfoCard
+				type='info_card'
+				parser={parser as any}
+				rows={[
+					{
+						background: 'default',
+						elements: [{ type: 'plain_text', text: 'Line' }],
+						action: {
+							type: 'icon_button',
+							actionId: 'act-id',
+							icon: { type: 'icon', icon: 'phone' }
+						} as any
+					}
+				]}
+			/>
+		);
+
+		expect(queryByText('text:Line')).toBeTruthy();
+		expect(queryByText('action')).toBeNull();
+		expect(parser.icon_button).not.toHaveBeenCalled();
+	});
+});