From 65772e49a06a4d9360a187b1c60a303d45733d14 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Mon, 15 Jan 2024 13:28:02 -0300
Subject: [PATCH] refactor(client): Move components from `app/` to `client/`
 (#31234)

---
 .../client/lib/{userCard.tsx => userCard.ts}  | 22 ++---
 .../UserAvatarEditor/UserAvatarEditor.tsx     | 83 ++++++++++---------
 .../UserAvatarEditor/UserAvatarSuggestion.ts  |  6 ++
 .../UserAvatarSuggestions.tsx                 | 48 ++++-------
 .../UserAvatarEditor/readFileAsDataURL.ts     | 16 ++++
 .../useUserAvatarSuggestions.ts               | 12 +++
 .../useOmnichannelExternalFrameRoomAction.ts  |  2 +-
 .../client/hooks/useAvatarSuggestions.ts      |  8 --
 .../client/lib/portals/portalsSubscription.ts |  8 +-
 .../omnichannel}/ExternalFrameContainer.tsx   | 10 +--
 .../client/views/room/UserCardHolder.tsx      | 22 +++++
 .../views/room/composer}/ComposerBoxPopup.tsx |  6 +-
 .../ComposerBoxPopupCannedResponse.tsx        |  6 +-
 .../room/composer}/ComposerBoxPopupEmoji.tsx  |  8 +-
 .../composer}/ComposerBoxPopupPreview.tsx     | 33 ++++----
 .../room/composer}/ComposerBoxPopupRoom.tsx   |  6 +-
 .../ComposerBoxPopupSlashCommand.tsx          |  6 +-
 .../room/composer}/ComposerBoxPopupUser.tsx   |  8 +-
 .../composer}/hooks/useComposerBoxPopup.ts    |  4 +-
 .../hooks/useComposerBoxPopupQueries.ts       |  4 +-
 .../composer}/hooks/useEnablePopupPreview.ts  |  2 +-
 .../room/composer/messageBox/MessageBox.tsx   |  8 +-
 .../room/providers/ComposerPopupProvider.tsx  | 26 +++---
 .../server/methods/getAvatarSuggestion.ts     | 18 ++--
 package.json                                  |  2 +-
 packages/rest-typings/src/v1/users.ts         | 20 ++---
 yarn.lock                                     | 60 +++++++-------
 27 files changed, 241 insertions(+), 213 deletions(-)
 rename apps/meteor/app/ui/client/lib/{userCard.tsx => userCard.ts} (70%)
 create mode 100644 apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestion.ts
 create mode 100644 apps/meteor/client/components/avatar/UserAvatarEditor/readFileAsDataURL.ts
 create mode 100644 apps/meteor/client/components/avatar/UserAvatarEditor/useUserAvatarSuggestions.ts
 delete mode 100644 apps/meteor/client/hooks/useAvatarSuggestions.ts
 rename apps/meteor/{app/livechat/client/externalFrame => client/views/omnichannel}/ExternalFrameContainer.tsx (83%)
 create mode 100644 apps/meteor/client/views/room/UserCardHolder.tsx
 rename apps/meteor/{app/ui-message/client/popup => client/views/room/composer}/ComposerBoxPopup.tsx (97%)
 rename apps/meteor/{app/ui-message/client/popup/components/composerBoxPopup => client/views/room/composer}/ComposerBoxPopupCannedResponse.tsx (69%)
 rename apps/meteor/{app/ui-message/client/popup/components/composerBoxPopup => client/views/room/composer}/ComposerBoxPopupEmoji.tsx (63%)
 rename apps/meteor/{app/ui-message/client/popup/components/composerBoxPopupPreview => client/views/room/composer}/ComposerBoxPopupPreview.tsx (86%)
 rename apps/meteor/{app/ui-message/client/popup/components/composerBoxPopup => client/views/room/composer}/ComposerBoxPopupRoom.tsx (74%)
 rename apps/meteor/{app/ui-message/client/popup/components/composerBoxPopup => client/views/room/composer}/ComposerBoxPopupSlashCommand.tsx (74%)
 rename apps/meteor/{app/ui-message/client/popup/components/composerBoxPopup => client/views/room/composer}/ComposerBoxPopupUser.tsx (84%)
 rename apps/meteor/{app/ui-message/client/popup => client/views/room/composer}/hooks/useComposerBoxPopup.ts (97%)
 rename apps/meteor/{app/ui-message/client/popup => client/views/room/composer}/hooks/useComposerBoxPopupQueries.ts (89%)
 rename apps/meteor/{app/ui-message/client/popup => client/views/room/composer}/hooks/useEnablePopupPreview.ts (71%)

diff --git a/apps/meteor/app/ui/client/lib/userCard.tsx b/apps/meteor/app/ui/client/lib/userCard.ts
similarity index 70%
rename from apps/meteor/app/ui/client/lib/userCard.tsx
rename to apps/meteor/app/ui/client/lib/userCard.ts
index e4fd5b343140..90b3d4ec5201 100644
--- a/apps/meteor/app/ui/client/lib/userCard.tsx
+++ b/apps/meteor/app/ui/client/lib/userCard.ts
@@ -1,14 +1,12 @@
 import type { ComponentProps } from 'react';
-import React, { Suspense, createElement, lazy } from 'react';
+import { createElement } from 'react';
 import { createPortal } from 'react-dom';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 import { registerPortal } from '../../../../client/lib/portals/portalsSubscription';
 import { queueMicrotask } from '../../../../client/lib/utils/queueMicrotask';
+import UserCardHolder from '../../../../client/views/room/UserCardHolder';
 
-const UserCard = lazy(() => import('../../../../client/views/room/UserCard'));
-
-type UserCardProps = ComponentProps<typeof UserCard>;
+type UserCardProps = ReturnType<ComponentProps<typeof UserCardHolder>['getProps']>;
 
 let props: UserCardProps;
 
@@ -29,16 +27,6 @@ const subscribeToProps = (callback: () => void) => {
 	};
 };
 
-const UserCardWithProps = () => {
-	const props = useSyncExternalStore(subscribeToProps, getProps);
-
-	return (
-		<Suspense fallback={null}>
-			<UserCard {...props} />
-		</Suspense>
-	);
-};
-
 const createContainer = () => {
 	const container = document.createElement('div');
 	container.id = 'react-user-card';
@@ -67,8 +55,8 @@ export const openUserCard = (params: Omit<UserCardProps, 'onClose'>) => {
 	}
 
 	if (!unregisterPortal) {
-		const children = createElement(UserCardWithProps);
-		const portal = <>{createPortal(children, container)}</>;
+		const children = createElement(UserCardHolder, { getProps, subscribeToProps });
+		const portal = createPortal(children, container);
 		unregisterPortal = registerPortal(container, portal);
 	}
 
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
index ae03418be755..aec9961e8631 100644
--- a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
@@ -1,5 +1,5 @@
 import type { IUser, AvatarObject } from '@rocket.chat/core-typings';
-import { Box, Button, TextInput, Margins, Avatar, IconButton } from '@rocket.chat/fuselage';
+import { Box, Button, TextInput, Avatar, IconButton } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ChangeEvent } from 'react';
 import React, { useState, useCallback } from 'react';
@@ -7,17 +7,11 @@ import React, { useState, useCallback } from 'react';
 import { useSingleFileInput } from '../../../hooks/useSingleFileInput';
 import { isValidImageFormat } from '../../../lib/utils/isValidImageFormat';
 import UserAvatar from '../UserAvatar';
+import type { UserAvatarSuggestion } from './UserAvatarSuggestion';
 import UserAvatarSuggestions from './UserAvatarSuggestions';
+import { readFileAsDataURL } from './readFileAsDataURL';
 
-const toDataURL = (file: File, callback: (result: FileReader['result']) => void): void => {
-	const reader = new FileReader();
-	reader.onloadend = function (e): void {
-		callback(e?.target?.result || null);
-	};
-	reader.readAsDataURL(file);
-};
-
-type UserAvatarEditorType = {
+type UserAvatarEditorProps = {
 	currentUsername: IUser['username'];
 	username: IUser['username'];
 	setAvatarObj: (obj: AvatarObject) => void;
@@ -25,7 +19,7 @@ type UserAvatarEditorType = {
 	etag: IUser['avatarETag'];
 };
 
-function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, etag }: UserAvatarEditorType): ReactElement {
+function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, etag }: UserAvatarEditorProps): ReactElement {
 	const t = useTranslation();
 	const rotateImages = useSetting('FileUpload_RotateImages');
 	const [avatarFromUrl, setAvatarFromUrl] = useState('');
@@ -35,14 +29,15 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, e
 	const setUploadedPreview = useCallback(
 		async (file, avatarObj) => {
 			setAvatarObj(avatarObj);
-			toDataURL(file, async (dataURL) => {
-				if (typeof dataURL === 'string' && (await isValidImageFormat(dataURL))) {
+			try {
+				const dataURL = await readFileAsDataURL(file);
+
+				if (await isValidImageFormat(dataURL)) {
 					setNewAvatarSource(dataURL);
-					return;
 				}
-
+			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: t('Avatar_format_invalid') });
-			});
+			}
 		},
 		[setAvatarObj, t, dispatchToastMessage],
 	);
@@ -65,6 +60,14 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, e
 		setAvatarFromUrl(event.currentTarget.value);
 	};
 
+	const handleSelectSuggestion = useCallback(
+		(suggestion: UserAvatarSuggestion) => {
+			setAvatarObj(suggestion as unknown as AvatarObject);
+			setNewAvatarSource(suggestion.blob);
+		},
+		[setAvatarObj, setNewAvatarSource],
+	);
+
 	return (
 		<Box display='flex' flexDirection='column' fontScale='p2m' color='default'>
 			{t('Profile_picture')}
@@ -81,32 +84,30 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, e
 				/>
 				<Box display='flex' flexDirection='column' flexGrow='1' justifyContent='space-between' mis={4}>
 					<Box display='flex' flexDirection='row' mbs='none'>
-						<Margins inline={4}>
-							<Button square mis='none' onClick={clickReset} disabled={disabled} mie={4} title={t('Accounts_SetDefaultAvatar')}>
-								<Avatar url={`/avatar/%40${username}`} />
-							</Button>
-							<IconButton icon='upload' secondary onClick={clickUpload} disabled={disabled} title={t('Upload')} />
-							<IconButton
-								data-qa-id='UserAvatarEditorSetAvatarLink'
-								icon='permalink'
-								secondary
-								onClick={clickUrl}
-								disabled={disabled || !avatarFromUrl}
-								title={t('Add_URL')}
-							/>
-							<UserAvatarSuggestions setAvatarObj={setAvatarObj} setNewAvatarSource={setNewAvatarSource} disabled={disabled} />
-						</Margins>
-					</Box>
-					<Margins inlineStart={4}>
-						<Box>{t('Use_url_for_avatar')}</Box>
-						<TextInput
-							data-qa-id='UserAvatarEditorLink'
-							flexGrow={0}
-							placeholder={t('Use_url_for_avatar')}
-							value={avatarFromUrl}
-							onChange={handleAvatarFromUrlChange}
+						<Button square disabled={disabled} mi={4} title={t('Accounts_SetDefaultAvatar')} onClick={clickReset}>
+							<Avatar url={`/avatar/%40${username}`} />
+						</Button>
+						<IconButton icon='upload' secondary disabled={disabled} title={t('Upload')} mi={4} onClick={clickUpload} />
+						<IconButton
+							icon='permalink'
+							secondary
+							disabled={disabled || !avatarFromUrl}
+							title={t('Add_URL')}
+							mi={4}
+							onClick={clickUrl}
+							data-qa-id='UserAvatarEditorSetAvatarLink'
 						/>
-					</Margins>
+						<UserAvatarSuggestions disabled={disabled} onSelectOne={handleSelectSuggestion} />
+					</Box>
+					<Box mis={4}>{t('Use_url_for_avatar')}</Box>
+					<TextInput
+						data-qa-id='UserAvatarEditorLink'
+						flexGrow={0}
+						placeholder={t('Use_url_for_avatar')}
+						value={avatarFromUrl}
+						mis={4}
+						onChange={handleAvatarFromUrlChange}
+					/>
 				</Box>
 			</Box>
 		</Box>
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestion.ts b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestion.ts
new file mode 100644
index 000000000000..e2ac26c6d0f3
--- /dev/null
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestion.ts
@@ -0,0 +1,6 @@
+export type UserAvatarSuggestion = {
+	blob: string;
+	contentType: string;
+	service: string;
+	url: string;
+};
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx
index 04b0c92acd95..4ccb7d304683 100644
--- a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx
@@ -1,43 +1,31 @@
-import type { AvatarObject } from '@rocket.chat/core-typings';
-import { Box, Button, Margins, Avatar } from '@rocket.chat/fuselage';
+import { Button, Avatar } from '@rocket.chat/fuselage';
 import React, { useCallback } from 'react';
 
-import { useAvatarSuggestions } from '../../../hooks/useAvatarSuggestions';
+import type { UserAvatarSuggestion } from './UserAvatarSuggestion';
+import { useUserAvatarSuggestions } from './useUserAvatarSuggestions';
 
 type UserAvatarSuggestionsProps = {
-	setAvatarObj: (obj: AvatarObject) => void;
-	setNewAvatarSource: (source: string) => void;
 	disabled?: boolean;
+	onSelectOne?: (suggestion: UserAvatarSuggestion) => void;
 };
 
-const UserAvatarSuggestions = ({ setAvatarObj, setNewAvatarSource, disabled }: UserAvatarSuggestionsProps) => {
-	const handleClick = useCallback(
-		(suggestion) => () => {
-			setAvatarObj(suggestion);
-			setNewAvatarSource(suggestion.blob);
-		},
-		[setAvatarObj, setNewAvatarSource],
-	);
+function UserAvatarSuggestions({ disabled, onSelectOne }: UserAvatarSuggestionsProps) {
+	const { data: suggestions = [] } = useUserAvatarSuggestions();
 
-	const { data } = useAvatarSuggestions();
-	const suggestions = Object.values(data?.suggestions || {});
+	const handleClick = useCallback((suggestion: UserAvatarSuggestion) => () => onSelectOne?.(suggestion), [onSelectOne]);
 
 	return (
-		<Margins inline='x4'>
-			{suggestions &&
-				suggestions.length > 0 &&
-				suggestions.map(
-					(suggestion) =>
-						suggestion.blob && (
-							<Button key={suggestion.service} disabled={disabled} square onClick={handleClick(suggestion)}>
-								<Box mie={4}>
-									<Avatar title={suggestion.service} url={suggestion.blob as unknown as string} />
-								</Box>
-							</Button>
-						),
-				)}
-		</Margins>
+		<>
+			{suggestions.map(
+				(suggestion) =>
+					suggestion.blob && (
+						<Button key={suggestion.service} square disabled={disabled} mi={4} onClick={handleClick(suggestion)}>
+							<Avatar title={suggestion.service} url={suggestion.blob} />
+						</Button>
+					),
+			)}
+		</>
 	);
-};
+}
 
 export default UserAvatarSuggestions;
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/readFileAsDataURL.ts b/apps/meteor/client/components/avatar/UserAvatarEditor/readFileAsDataURL.ts
new file mode 100644
index 000000000000..d2bb3f7beed1
--- /dev/null
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/readFileAsDataURL.ts
@@ -0,0 +1,16 @@
+export const readFileAsDataURL = (file: File) =>
+	new Promise<string>((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onloadend = (event) => {
+			const result = event.target?.result;
+			if (typeof result === 'string') {
+				resolve(result);
+				return;
+			}
+			reject(new Error('Failed to read file'));
+		};
+		reader.onerror = (event) => {
+			reject(new Error(`Failed to read file: ${event}`));
+		};
+		reader.readAsDataURL(file);
+	});
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/useUserAvatarSuggestions.ts b/apps/meteor/client/components/avatar/UserAvatarEditor/useUserAvatarSuggestions.ts
new file mode 100644
index 000000000000..42bb09406d3b
--- /dev/null
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/useUserAvatarSuggestions.ts
@@ -0,0 +1,12 @@
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+export const useUserAvatarSuggestions = () => {
+	const getAvatarSuggestions = useEndpoint('GET', '/v1/users.getAvatarSuggestion');
+
+	return useQuery({
+		queryKey: ['account', 'profile', 'avatar-suggestions'],
+		queryFn: async () => getAvatarSuggestions(),
+		select: (data) => Object.values(data.suggestions),
+	});
+};
diff --git a/apps/meteor/client/hooks/roomActions/useOmnichannelExternalFrameRoomAction.ts b/apps/meteor/client/hooks/roomActions/useOmnichannelExternalFrameRoomAction.ts
index 7f03b369b449..fe1e704f0b1c 100644
--- a/apps/meteor/client/hooks/roomActions/useOmnichannelExternalFrameRoomAction.ts
+++ b/apps/meteor/client/hooks/roomActions/useOmnichannelExternalFrameRoomAction.ts
@@ -3,7 +3,7 @@ import { lazy, useMemo } from 'react';
 
 import type { RoomToolboxActionConfig } from '../../views/room/contexts/RoomToolboxContext';
 
-const ExternalFrameContainer = lazy(() => import('../../../app/livechat/client/externalFrame/ExternalFrameContainer'));
+const ExternalFrameContainer = lazy(() => import('../../views/omnichannel/ExternalFrameContainer'));
 
 export const useOmnichannelExternalFrameRoomAction = () => {
 	const enabled = useSetting('Omnichannel_External_Frame_Enabled', false);
diff --git a/apps/meteor/client/hooks/useAvatarSuggestions.ts b/apps/meteor/client/hooks/useAvatarSuggestions.ts
deleted file mode 100644
index 223cab8ca4b4..000000000000
--- a/apps/meteor/client/hooks/useAvatarSuggestions.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
-
-export const useAvatarSuggestions = () => {
-	const getAvatarSuggestions = useEndpoint('GET', '/v1/users.getAvatarSuggestion');
-
-	return useQuery(['getAvatarSuggestion'], async () => getAvatarSuggestions());
-};
diff --git a/apps/meteor/client/lib/portals/portalsSubscription.ts b/apps/meteor/client/lib/portals/portalsSubscription.ts
index 24295d624936..513393eb983a 100644
--- a/apps/meteor/client/lib/portals/portalsSubscription.ts
+++ b/apps/meteor/client/lib/portals/portalsSubscription.ts
@@ -1,9 +1,9 @@
 import { Emitter } from '@rocket.chat/emitter';
 import { Random } from '@rocket.chat/random';
-import type { ReactElement } from 'react';
+import type { ReactPortal } from 'react';
 
 type SubscribedPortal = {
-	portal: ReactElement;
+	portal: ReactPortal;
 	key: string;
 };
 
@@ -11,7 +11,7 @@ type PortalsSubscription = {
 	subscribe: (callback: () => void) => () => void;
 	getSnapshot: () => SubscribedPortal[];
 	has: (key: unknown) => boolean;
-	set: (key: unknown, portal: ReactElement) => void;
+	set: (key: unknown, portal: ReactPortal) => void;
 	delete: (key: unknown) => void;
 };
 
@@ -43,7 +43,7 @@ export const unregisterPortal = (key: unknown): void => {
 	portalsSubscription.delete(key);
 };
 
-export const registerPortal = (key: unknown, portal: ReactElement): (() => void) => {
+export const registerPortal = (key: unknown, portal: ReactPortal): (() => void) => {
 	portalsSubscription.set(key, portal);
 	return (): void => {
 		unregisterPortal(key);
diff --git a/apps/meteor/app/livechat/client/externalFrame/ExternalFrameContainer.tsx b/apps/meteor/client/views/omnichannel/ExternalFrameContainer.tsx
similarity index 83%
rename from apps/meteor/app/livechat/client/externalFrame/ExternalFrameContainer.tsx
rename to apps/meteor/client/views/omnichannel/ExternalFrameContainer.tsx
index 5b37ee8de2d2..e339d48af103 100644
--- a/apps/meteor/app/livechat/client/externalFrame/ExternalFrameContainer.tsx
+++ b/apps/meteor/client/views/omnichannel/ExternalFrameContainer.tsx
@@ -2,11 +2,11 @@ import { useSetting, useUserId } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import React, { useMemo } from 'react';
 
-import { useRoom } from '../../../../client/views/room/contexts/RoomContext';
-import { sdk } from '../../../utils/client/lib/SDKClient';
-import { encrypt, getKeyFromString } from './crypto';
+import { encrypt, getKeyFromString } from '../../../app/livechat/client/externalFrame/crypto';
+import { sdk } from '../../../app/utils/client/lib/SDKClient';
+import { useRoom } from '../room/contexts/RoomContext';
 
-const ExternalFrameContainer = () => {
+function ExternalFrameContainer() {
 	const uid = useUserId();
 	const room = useRoom();
 	const { 'X-Auth-Token': authToken } = sdk.rest.getCredentials() || {};
@@ -42,6 +42,6 @@ const ExternalFrameContainer = () => {
 			<iframe className='external-frame' src={externalFrameUrl} />
 		</div>
 	);
-};
+}
 
 export default ExternalFrameContainer;
diff --git a/apps/meteor/client/views/room/UserCardHolder.tsx b/apps/meteor/client/views/room/UserCardHolder.tsx
new file mode 100644
index 000000000000..0f9729217b4c
--- /dev/null
+++ b/apps/meteor/client/views/room/UserCardHolder.tsx
@@ -0,0 +1,22 @@
+import type { ComponentProps } from 'react';
+import React, { Suspense, lazy } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+const UserCard = lazy(() => import('./UserCard'));
+
+type UserCardHolderProps = {
+	getProps: () => ComponentProps<typeof UserCard>;
+	subscribeToProps: (callback: () => void) => () => void;
+};
+
+function UserCardHolder({ getProps, subscribeToProps }: UserCardHolderProps) {
+	const props = useSyncExternalStore(subscribeToProps, getProps);
+
+	return (
+		<Suspense fallback={null}>
+			<UserCard {...props} />
+		</Suspense>
+	);
+}
+
+export default UserCardHolder;
diff --git a/apps/meteor/app/ui-message/client/popup/ComposerBoxPopup.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx
similarity index 97%
rename from apps/meteor/app/ui-message/client/popup/ComposerBoxPopup.tsx
rename to apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx
index 5ead8ef295a5..dd7b19797530 100644
--- a/apps/meteor/app/ui-message/client/popup/ComposerBoxPopup.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx
@@ -18,7 +18,7 @@ export type ComposerBoxPopupProps<
 	renderItem?: ({ item }: { item: T }) => ReactElement;
 };
 
-const ComposerBoxPopup = <
+function ComposerBoxPopup<
 	T extends {
 		_id: string;
 		sort?: number;
@@ -29,7 +29,7 @@ const ComposerBoxPopup = <
 	focused,
 	select,
 	renderItem = ({ item }: { item: T }) => <>{JSON.stringify(item)}</>,
-}: ComposerBoxPopupProps<T>): ReactElement | null => {
+}: ComposerBoxPopupProps<T>): ReactElement | null {
 	const t = useTranslation();
 	const id = useUniqueId();
 	const composerBoxPopupRef = useRef<HTMLElement>(null);
@@ -105,6 +105,6 @@ const ComposerBoxPopup = <
 			</Tile>
 		</Box>
 	);
-};
+}
 
 export default memo(ComposerBoxPopup);
diff --git a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupCannedResponse.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopupCannedResponse.tsx
similarity index 69%
rename from apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupCannedResponse.tsx
rename to apps/meteor/client/views/room/composer/ComposerBoxPopupCannedResponse.tsx
index 5ce1b4f11e9e..6a11cf6ff5aa 100644
--- a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupCannedResponse.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerBoxPopupCannedResponse.tsx
@@ -7,7 +7,7 @@ type ComposerBoxPopupCannedResponseProps = {
 	shortcut: string;
 };
 
-const ComposerPopupCannedResponse = ({ shortcut, text }: ComposerBoxPopupCannedResponseProps) => {
+function ComposerBoxPopupCannedResponse({ shortcut, text }: ComposerBoxPopupCannedResponseProps) {
 	return (
 		<>
 			<OptionColumn>
@@ -16,6 +16,6 @@ const ComposerPopupCannedResponse = ({ shortcut, text }: ComposerBoxPopupCannedR
 			<OptionContent>{text}</OptionContent>
 		</>
 	);
-};
+}
 
-export default ComposerPopupCannedResponse;
+export default ComposerBoxPopupCannedResponse;
diff --git a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupEmoji.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopupEmoji.tsx
similarity index 63%
rename from apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupEmoji.tsx
rename to apps/meteor/client/views/room/composer/ComposerBoxPopupEmoji.tsx
index c8586e027040..1df9eed0b0a3 100644
--- a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupEmoji.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerBoxPopupEmoji.tsx
@@ -1,13 +1,13 @@
 import { OptionColumn, OptionContent } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import Emoji from '../../../../../../client/components/Emoji';
+import Emoji from '../../../components/Emoji';
 
 export type ComposerBoxPopupEmojiProps = {
 	_id: string;
 };
 
-const ComposerPopupEmoji = ({ _id }: ComposerBoxPopupEmojiProps) => {
+function ComposerBoxPopupEmoji({ _id }: ComposerBoxPopupEmojiProps) {
 	return (
 		<>
 			<OptionColumn>
@@ -16,6 +16,6 @@ const ComposerPopupEmoji = ({ _id }: ComposerBoxPopupEmojiProps) => {
 			<OptionContent>{_id}</OptionContent>
 		</>
 	);
-};
+}
 
-export default ComposerPopupEmoji;
+export default ComposerBoxPopupEmoji;
diff --git a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopupPreview/ComposerBoxPopupPreview.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopupPreview.tsx
similarity index 86%
rename from apps/meteor/app/ui-message/client/popup/components/composerBoxPopupPreview/ComposerBoxPopupPreview.tsx
rename to apps/meteor/client/views/room/composer/ComposerBoxPopupPreview.tsx
index 0a2478f7bf9a..aa6bb4b3a1d7 100644
--- a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopupPreview/ComposerBoxPopupPreview.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerBoxPopupPreview.tsx
@@ -1,25 +1,30 @@
 import { Box, Skeleton, Tile } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useMethod } from '@rocket.chat/ui-contexts';
+import type { ForwardedRef } from 'react';
 import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 
-import { useChat } from '../../../../../../client/views/room/contexts/ChatContext';
-import type { ComposerBoxPopupProps } from '../../ComposerBoxPopup';
+import { useChat } from '../contexts/ChatContext';
+import type { ComposerBoxPopupProps } from './ComposerBoxPopup';
 
 type ComposerBoxPopupPreviewItem = { _id: string; type: 'image' | 'video' | 'audio' | 'text' | 'other'; value: string; sort?: number };
 
-const ComposerBoxPopupPreview = forwardRef<
-	| {
-			getFilter?: () => unknown;
-			select?: (s: ComposerBoxPopupPreviewItem) => void;
-	  }
-	| undefined,
-	ComposerBoxPopupProps<ComposerBoxPopupPreviewItem> & {
-		rid: string;
-		tmid?: string;
-		suspended?: boolean;
-	}
->(function ComposerBoxPopupPreview({ focused, items, rid, tmid, select, suspended }, ref) {
+type ComposerBoxPopupPreviewProps = ComposerBoxPopupProps<ComposerBoxPopupPreviewItem> & {
+	rid: string;
+	tmid?: string;
+	suspended?: boolean;
+};
+
+const ComposerBoxPopupPreview = forwardRef(function ComposerBoxPopupPreview(
+	{ focused, items, rid, tmid, select, suspended }: ComposerBoxPopupPreviewProps,
+	ref: ForwardedRef<
+		| {
+				getFilter?: () => unknown;
+				select?: (s: ComposerBoxPopupPreviewItem) => void;
+		  }
+		| undefined
+	>,
+) {
 	const id = useUniqueId();
 	const chat = useChat();
 	const executeSlashCommandPreviewMethod = useMethod('executeSlashCommandPreview');
diff --git a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupRoom.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopupRoom.tsx
similarity index 74%
rename from apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupRoom.tsx
rename to apps/meteor/client/views/room/composer/ComposerBoxPopupRoom.tsx
index 368276e70b98..a5bfbeba50d1 100644
--- a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupRoom.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerBoxPopupRoom.tsx
@@ -2,11 +2,11 @@ import type { IRoom } from '@rocket.chat/core-typings';
 import { OptionColumn, OptionContent } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import { RoomIcon } from '../../../../../../client/components/RoomIcon';
+import { RoomIcon } from '../../../components/RoomIcon';
 
 export type ComposerBoxPopupRoomProps = Pick<IRoom, 't' | 'name' | 'fname' | '_id' | 'prid' | 'teamMain' | 'u'>;
 
-const ComposerBoxPopupRoom = ({ fname, name, ...props }: ComposerBoxPopupRoomProps) => {
+function ComposerBoxPopupRoom({ fname, name, ...props }: ComposerBoxPopupRoomProps) {
 	return (
 		<>
 			<OptionColumn>
@@ -17,6 +17,6 @@ const ComposerBoxPopupRoom = ({ fname, name, ...props }: ComposerBoxPopupRoomPro
 			</OptionContent>
 		</>
 	);
-};
+}
 
 export default ComposerBoxPopupRoom;
diff --git a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupSlashCommand.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopupSlashCommand.tsx
similarity index 74%
rename from apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupSlashCommand.tsx
rename to apps/meteor/client/views/room/composer/ComposerBoxPopupSlashCommand.tsx
index e24c44c9a1ed..24dd07d067b3 100644
--- a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupSlashCommand.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerBoxPopupSlashCommand.tsx
@@ -7,7 +7,7 @@ export type ComposerBoxPopupSlashCommandProps = {
 	params?: string;
 };
 
-const ComposerPopupSlashCommand = ({ _id, description, params }: ComposerBoxPopupSlashCommandProps) => {
+function ComposerBoxPopupSlashCommand({ _id, description, params }: ComposerBoxPopupSlashCommandProps) {
 	return (
 		<>
 			<OptionContent>
@@ -18,6 +18,6 @@ const ComposerPopupSlashCommand = ({ _id, description, params }: ComposerBoxPopu
 			</OptionColumn>
 		</>
 	);
-};
+}
 
-export default ComposerPopupSlashCommand;
+export default ComposerBoxPopupSlashCommand;
diff --git a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupUser.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx
similarity index 84%
rename from apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupUser.tsx
rename to apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx
index 20e20aae4238..9a9e5f1bfda0 100644
--- a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupUser.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerBoxPopupUser.tsx
@@ -2,8 +2,8 @@ import { OptionAvatar, OptionColumn, OptionContent, OptionInput } from '@rocket.
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
-import ReactiveUserStatus from '../../../../../../client/components/UserStatus/ReactiveUserStatus';
-import UserAvatar from '../../../../../../client/components/avatar/UserAvatar';
+import ReactiveUserStatus from '../../../components/UserStatus/ReactiveUserStatus';
+import UserAvatar from '../../../components/avatar/UserAvatar';
 
 export type ComposerBoxPopupUserProps = {
 	_id: string;
@@ -18,7 +18,7 @@ export type ComposerBoxPopupUserProps = {
 	variant?: 'small' | 'large';
 };
 
-const ComposerBoxPopupUser = ({ _id, system, username, name, nickname, outside, suggestion, variant }: ComposerBoxPopupUserProps) => {
+function ComposerBoxPopupUser({ _id, system, username, name, nickname, outside, suggestion, variant }: ComposerBoxPopupUserProps) {
 	const t = useTranslation();
 
 	return (
@@ -57,6 +57,6 @@ const ComposerBoxPopupUser = ({ _id, system, username, name, nickname, outside,
 			)}
 		</>
 	);
-};
+}
 
 export default ComposerBoxPopupUser;
diff --git a/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopup.ts b/apps/meteor/client/views/room/composer/hooks/useComposerBoxPopup.ts
similarity index 97%
rename from apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopup.ts
rename to apps/meteor/client/views/room/composer/hooks/useComposerBoxPopup.ts
index 81a20f3bef12..fc65ed84ca02 100644
--- a/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopup.ts
+++ b/apps/meteor/client/views/room/composer/hooks/useComposerBoxPopup.ts
@@ -3,8 +3,8 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import type { MutableRefObject } from 'react';
 import { useEffect, useCallback, useState, useRef } from 'react';
 
-import { useChat } from '../../../../../client/views/room/contexts/ChatContext';
-import type { ComposerPopupOption } from '../../../../../client/views/room/contexts/ComposerPopupContext';
+import { useChat } from '../../contexts/ChatContext';
+import type { ComposerPopupOption } from '../../contexts/ComposerPopupContext';
 import { useComposerBoxPopupQueries } from './useComposerBoxPopupQueries';
 
 type ComposerBoxPopupImperativeCommands<T> = MutableRefObject<
diff --git a/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopupQueries.ts b/apps/meteor/client/views/room/composer/hooks/useComposerBoxPopupQueries.ts
similarity index 89%
rename from apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopupQueries.ts
rename to apps/meteor/client/views/room/composer/hooks/useComposerBoxPopupQueries.ts
index dceac6887191..f5e0c7ca710c 100644
--- a/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopupQueries.ts
+++ b/apps/meteor/client/views/room/composer/hooks/useComposerBoxPopupQueries.ts
@@ -2,8 +2,8 @@ import type { QueriesResults } from '@tanstack/react-query';
 import { useQueries } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 
-import type { ComposerPopupOption } from '../../../../../client/views/room/contexts/ComposerPopupContext';
-import { slashCommands } from '../../../../utils/lib/slashCommand';
+import { slashCommands } from '../../../../../app/utils/lib/slashCommand';
+import type { ComposerPopupOption } from '../../contexts/ComposerPopupContext';
 import { useEnablePopupPreview } from './useEnablePopupPreview';
 
 export const useComposerBoxPopupQueries = <T extends { _id: string; sort?: number }>(filter: unknown, popup?: ComposerPopupOption<T>) => {
diff --git a/apps/meteor/app/ui-message/client/popup/hooks/useEnablePopupPreview.ts b/apps/meteor/client/views/room/composer/hooks/useEnablePopupPreview.ts
similarity index 71%
rename from apps/meteor/app/ui-message/client/popup/hooks/useEnablePopupPreview.ts
rename to apps/meteor/client/views/room/composer/hooks/useEnablePopupPreview.ts
index 14280d310552..d8afeba55191 100644
--- a/apps/meteor/app/ui-message/client/popup/hooks/useEnablePopupPreview.ts
+++ b/apps/meteor/client/views/room/composer/hooks/useEnablePopupPreview.ts
@@ -1,4 +1,4 @@
-import type { ComposerPopupOption } from '../../../../../client/views/room/contexts/ComposerPopupContext';
+import type { ComposerPopupOption } from '../../contexts/ComposerPopupContext';
 
 export const useEnablePopupPreview = <T extends { _id: string; sort?: number }>(filter: unknown, popup?: ComposerPopupOption<T>) =>
 	popup && !popup.preview && (popup?.triggerLength ? typeof filter === 'string' && popup.triggerLength - 1 < filter.length : true);
diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
index 25bc84e2a64e..1f183ddfd893 100644
--- a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
+++ b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
@@ -20,10 +20,6 @@ import { useSubscription } from 'use-subscription';
 import { createComposerAPI } from '../../../../../app/ui-message/client/messageBox/createComposerAPI';
 import type { FormattingButton } from '../../../../../app/ui-message/client/messageBox/messageBoxFormatting';
 import { formattingButtons } from '../../../../../app/ui-message/client/messageBox/messageBoxFormatting';
-import ComposerBoxPopup from '../../../../../app/ui-message/client/popup/ComposerBoxPopup';
-import ComposerBoxPopupPreview from '../../../../../app/ui-message/client/popup/components/composerBoxPopupPreview/ComposerBoxPopupPreview';
-import { useComposerBoxPopup } from '../../../../../app/ui-message/client/popup/hooks/useComposerBoxPopup';
-import { useEnablePopupPreview } from '../../../../../app/ui-message/client/popup/hooks/useEnablePopupPreview';
 import { getImageExtensionFromMime } from '../../../../../lib/getImageExtensionFromMime';
 import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
 import { useReactiveValue } from '../../../../hooks/useReactiveValue';
@@ -35,8 +31,12 @@ import VideoMessageRecorder from '../../../composer/VideoMessageRecorder';
 import { useChat } from '../../contexts/ChatContext';
 import { useComposerPopup } from '../../contexts/ComposerPopupContext';
 import { useRoom } from '../../contexts/RoomContext';
+import ComposerBoxPopup from '../ComposerBoxPopup';
+import ComposerBoxPopupPreview from '../ComposerBoxPopupPreview';
 import ComposerUserActionIndicator from '../ComposerUserActionIndicator';
 import { useAutoGrow } from '../RoomComposer/hooks/useAutoGrow';
+import { useComposerBoxPopup } from '../hooks/useComposerBoxPopup';
+import { useEnablePopupPreview } from '../hooks/useEnablePopupPreview';
 import { useMessageComposerMergedRefs } from '../hooks/useMessageComposerMergedRefs';
 import MessageBoxActionsToolbar from './MessageBoxActionsToolbar';
 import MessageBoxFormattingToolbar from './MessageBoxFormattingToolbar';
diff --git a/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx b/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx
index 93ce06320574..fa94a69ebe23 100644
--- a/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx
+++ b/apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx
@@ -9,18 +9,18 @@ import type { ReactNode } from 'react';
 import { hasAtLeastOnePermission } from '../../../../app/authorization/client';
 import { emoji } from '../../../../app/emoji/client';
 import { Subscriptions } from '../../../../app/models/client';
-import ComposerPopupCannedResponse from '../../../../app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupCannedResponse';
-import type { ComposerBoxPopupEmojiProps } from '../../../../app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupEmoji';
-import ComposerPopupEmoji from '../../../../app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupEmoji';
-import type { ComposerBoxPopupRoomProps } from '../../../../app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupRoom';
-import ComposerBoxPopupRoom from '../../../../app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupRoom';
-import type { ComposerBoxPopupSlashCommandProps } from '../../../../app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupSlashCommand';
-import ComposerPopupSlashCommand from '../../../../app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupSlashCommand';
-import ComposerBoxPopupUser from '../../../../app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupUser';
-import type { ComposerBoxPopupUserProps } from '../../../../app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupUser';
 import { usersFromRoomMessages } from '../../../../app/ui-message/client/popup/messagePopupConfig';
 import { slashCommands } from '../../../../app/utils/client';
 import { CannedResponse } from '../../../../ee/app/canned-responses/client/collections/CannedResponse';
+import ComposerBoxPopupCannedResponse from '../composer/ComposerBoxPopupCannedResponse';
+import type { ComposerBoxPopupEmojiProps } from '../composer/ComposerBoxPopupEmoji';
+import ComposerBoxPopupEmoji from '../composer/ComposerBoxPopupEmoji';
+import ComposerBoxPopupRoom from '../composer/ComposerBoxPopupRoom';
+import type { ComposerBoxPopupRoomProps } from '../composer/ComposerBoxPopupRoom';
+import type { ComposerBoxPopupSlashCommandProps } from '../composer/ComposerBoxPopupSlashCommand';
+import ComposerBoxPopupSlashCommand from '../composer/ComposerBoxPopupSlashCommand';
+import ComposerBoxPopupUser from '../composer/ComposerBoxPopupUser';
+import type { ComposerBoxPopupUserProps } from '../composer/ComposerBoxPopupUser';
 import type { ComposerPopupContextValue } from '../contexts/ComposerPopupContext';
 import { ComposerPopupContext, createMessageBoxPopupConfig } from '../contexts/ComposerPopupContext';
 
@@ -207,7 +207,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room:
 						return [];
 					},
 					getValue: (item) => `${item._id.substring(1)}`,
-					renderItem: ({ item }) => <ComposerPopupEmoji {...item} />,
+					renderItem: ({ item }) => <ComposerBoxPopupEmoji {...item} />,
 				}),
 			createMessageBoxPopupConfig<ComposerBoxPopupEmojiProps>({
 				title: t('Emoji'),
@@ -264,7 +264,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room:
 					return [];
 				},
 				getValue: (item) => `${item._id}`,
-				renderItem: ({ item }) => <ComposerPopupEmoji {...item} />,
+				renderItem: ({ item }) => <ComposerBoxPopupEmoji {...item} />,
 			}),
 
 			createMessageBoxPopupConfig<ComposerBoxPopupSlashCommandProps>({
@@ -272,7 +272,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room:
 				trigger: '/',
 				suffix: ' ',
 				triggerAnywhere: false,
-				renderItem: ({ item }) => <ComposerPopupSlashCommand {...item} />,
+				renderItem: ({ item }) => <ComposerBoxPopupSlashCommand {...item} />,
 				getItemsFromLocal: async (filter: string) => {
 					return Object.keys(slashCommands.commands)
 						.map((command) => {
@@ -313,7 +313,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room:
 					trigger: '!',
 					prefix: '',
 					triggerAnywhere: true,
-					renderItem: ({ item }) => <ComposerPopupCannedResponse {...item} />,
+					renderItem: ({ item }) => <ComposerBoxPopupCannedResponse {...item} />,
 					getItemsFromLocal: async (filter: string) => {
 						const exp = new RegExp(filter, 'i');
 						return CannedResponse.find(
diff --git a/apps/meteor/server/methods/getAvatarSuggestion.ts b/apps/meteor/server/methods/getAvatarSuggestion.ts
index 755b9053c569..5cf8cdd2e4b1 100644
--- a/apps/meteor/server/methods/getAvatarSuggestion.ts
+++ b/apps/meteor/server/methods/getAvatarSuggestion.ts
@@ -8,16 +8,14 @@ import { methodDeprecationLogger } from '../../app/lib/server/lib/deprecationWar
 declare module '@rocket.chat/ui-contexts' {
 	// eslint-disable-next-line @typescript-eslint/naming-convention
 	interface ServerMethods {
-		getAvatarSuggestion(): Promise<
-			Record<
-				string,
-				{
-					blob: string;
-					contentType: string;
-					service: string;
-					url: string;
-				}
-			>
+		getAvatarSuggestion(): Record<
+			string,
+			{
+				blob: string;
+				contentType: string;
+				service: string;
+				url: string;
+			}
 		>;
 	}
 }
diff --git a/package.json b/package.json
index b6e3ba26cc0f..32ffdc28fb41 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
 		"@changesets/cli": "^2.26.2",
 		"@types/chart.js": "^2.9.39",
 		"@types/js-yaml": "^4.0.8",
-		"turbo": "~1.10.16"
+		"turbo": "~1.11.2"
 	},
 	"workspaces": [
 		"apps/*",
diff --git a/packages/rest-typings/src/v1/users.ts b/packages/rest-typings/src/v1/users.ts
index c47f4be6404d..15f9ad840d42 100644
--- a/packages/rest-typings/src/v1/users.ts
+++ b/packages/rest-typings/src/v1/users.ts
@@ -1,12 +1,4 @@
-import type {
-	IExportOperation,
-	AvatarServiceObject,
-	ISubscription,
-	ITeam,
-	IUser,
-	IPersonalAccessToken,
-	UserStatus,
-} from '@rocket.chat/core-typings';
+import type { IExportOperation, ISubscription, ITeam, IUser, IPersonalAccessToken, UserStatus } from '@rocket.chat/core-typings';
 import Ajv from 'ajv';
 
 import type { PaginatedRequest } from '../helpers/PaginatedRequest';
@@ -241,7 +233,15 @@ export type UsersEndpoints = {
 
 	'/v1/users.getAvatarSuggestion': {
 		GET: () => {
-			suggestions: Record<string, AvatarServiceObject>;
+			suggestions: Record<
+				string,
+				{
+					blob: string;
+					contentType: string;
+					service: string;
+					url: string;
+				}
+			>;
 		};
 	};
 
diff --git a/yarn.lock b/yarn.lock
index a31fa7be0b8f..230636d6cd3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -35870,7 +35870,7 @@ __metadata:
     "@types/chart.js": ^2.9.39
     "@types/js-yaml": ^4.0.8
     node-gyp: ^9.4.1
-    turbo: ~1.10.16
+    turbo: ~1.11.2
   languageName: unknown
   linkType: soft
 
@@ -39368,58 +39368,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"turbo-darwin-64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-darwin-64@npm:1.10.16"
+"turbo-darwin-64@npm:1.11.2":
+  version: 1.11.2
+  resolution: "turbo-darwin-64@npm:1.11.2"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-darwin-arm64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-darwin-arm64@npm:1.10.16"
+"turbo-darwin-arm64@npm:1.11.2":
+  version: 1.11.2
+  resolution: "turbo-darwin-arm64@npm:1.11.2"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo-linux-64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-linux-64@npm:1.10.16"
+"turbo-linux-64@npm:1.11.2":
+  version: 1.11.2
+  resolution: "turbo-linux-64@npm:1.11.2"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-linux-arm64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-linux-arm64@npm:1.10.16"
+"turbo-linux-arm64@npm:1.11.2":
+  version: 1.11.2
+  resolution: "turbo-linux-arm64@npm:1.11.2"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo-windows-64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-windows-64@npm:1.10.16"
+"turbo-windows-64@npm:1.11.2":
+  version: 1.11.2
+  resolution: "turbo-windows-64@npm:1.11.2"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"turbo-windows-arm64@npm:1.10.16":
-  version: 1.10.16
-  resolution: "turbo-windows-arm64@npm:1.10.16"
+"turbo-windows-arm64@npm:1.11.2":
+  version: 1.11.2
+  resolution: "turbo-windows-arm64@npm:1.11.2"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"turbo@npm:~1.10.16":
-  version: 1.10.16
-  resolution: "turbo@npm:1.10.16"
-  dependencies:
-    turbo-darwin-64: 1.10.16
-    turbo-darwin-arm64: 1.10.16
-    turbo-linux-64: 1.10.16
-    turbo-linux-arm64: 1.10.16
-    turbo-windows-64: 1.10.16
-    turbo-windows-arm64: 1.10.16
+"turbo@npm:~1.11.2":
+  version: 1.11.2
+  resolution: "turbo@npm:1.11.2"
+  dependencies:
+    turbo-darwin-64: 1.11.2
+    turbo-darwin-arm64: 1.11.2
+    turbo-linux-64: 1.11.2
+    turbo-linux-arm64: 1.11.2
+    turbo-windows-64: 1.11.2
+    turbo-windows-arm64: 1.11.2
   dependenciesMeta:
     turbo-darwin-64:
       optional: true
@@ -39435,7 +39435,7 @@ __metadata:
       optional: true
   bin:
     turbo: bin/turbo
-  checksum: 69d1892593449b264e0bd48b851317a743016ab62cf470e7293b2cc3781240e863c48232c89f65a5a4ce97eb791ca550b201593449350da073db07703a19cfa5
+  checksum: 427b31807fe39d83ce002fd8da92029ac7ff93f4891e1da7c3c1a2c9b15257e3f4a8d9688186bd0228bda70965c4bf7db15dfd1f5de2c1208e058efd5401c352
   languageName: node
   linkType: hard