feat: Voice message blocks (#7057)

Author: diegolmello

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

@@ -157,13 +157,14 @@ export const mappedIcons = {
 	'pause': 59803,
 	'pause-filled': 59802,
 	'pause-shape-filled': 59843,
-	'pause-shape-unfilled': 59879,
+	'pause-shape-unfilled': 59880,
 	'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

@@ -14,7 +14,7 @@ const EndCall = () => {
 				testID='media-call-header-end'
 				accessibilityLabel={I18n.t('End')}
 				onPress={endCall}
-				iconName='phone-end'
+				iconName='phone-off'
 				color={colors.fontDanger}
 			/>
 		</HeaderButton.Container>

app/containers/CustomIcon/selection.json

@@ -645,7 +645,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
               "top": 0,
             },
             {
-              "width": undefined,
+              "width": 350,
             },
             {
               "height": 68,
@@ -994,7 +994,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
               "top": 0,
             },
             {
-              "width": undefined,
+              "width": 350,
             },
             {
               "height": 68,

app/containers/MediaCallHeader/components/EndCall.tsx

@@ -1,22 +1,44 @@
 import React, { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
 import { BlockContext } from '@rocket.chat/ui-kit';
 
 import Button from '../Button';
 import I18n from '../../i18n';
 import { type IActions } from './interfaces';
 
+const styles = StyleSheet.create({
+	hidden: {
+		overflow: 'hidden',
+		height: 0
+	}
+});
+
 export const Actions = ({ blockId, appId, elements, parser }: IActions) => {
 	const [showMoreVisible, setShowMoreVisible] = useState(() => elements && elements.length > 5);
-	const renderedElements = showMoreVisible ? elements?.slice(0, 5) : elements;
 
+	const shouldShowMore = elements && elements.length > 5;
+	const maxVisible = 5;
+
+	if (!elements || !parser) {
+		return null;
+	}
+
+	// Always render all elements to maintain consistent hook calls
+	// This ensures hooks are always called in the same order
+	// Use View wrapper to conditionally hide elements instead of conditionally rendering
 	return (
 		<>
-			<>
-				{renderedElements
-					? renderedElements?.map(element => parser?.renderActions({ blockId, appId, ...element }, BlockContext.ACTION, parser))
-					: null}
-			</>
-			{showMoreVisible && <Button title={I18n.t('Show_more')} onPress={() => setShowMoreVisible(false)} />}
+			{elements.map((element, index) => {
+				const isVisible = !showMoreVisible || index < maxVisible;
+				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}>
+						{component}
+					</View>
+				);
+			})}
+			{shouldShowMore && showMoreVisible && <Button title={I18n.t('Show_more')} onPress={() => setShowMoreVisible(false)} />}
 		</>
 	);
 };

app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap

@@ -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>
+	);
+};