From 1aebd7cab8640cece57a09ce5e04fca7f5c45555 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Fri, 7 Jul 2023 18:57:26 -0300
Subject: [PATCH 1/5] refactor: Lazy initialization on client-side (#29764)

---
 apps/meteor/app/emoji-emojione/client/lib.ts  |   8 +-
 .../app/emoji-emojione/lib/emojioneRender.ts  |   9 -
 .../app/emoji-emojione/lib/getEmojiConfig.ts  | 281 ++++++++++++++++++
 .../app/emoji-emojione/lib/isSetNotNull.ts    |  10 +
 .../app/emoji-emojione/lib/rocketchat.js      | 280 -----------------
 apps/meteor/app/emoji-emojione/server/lib.ts  |   8 +-
 apps/meteor/app/emoji/client/lib.ts           |   5 +-
 .../client/contexts/EmojiPickerContext.ts     |  44 ++-
 .../client/lib/rooms/roomCoordinator.tsx      |   2 +-
 .../client/providers/EmojiPickerProvider.tsx  |  57 ++--
 .../composer/EmojiPicker/EmojiPicker.tsx      |  18 +-
 .../client/views/room/hooks/useOpenRoom.ts    |  14 +-
 .../client/views/root/MainLayout/index.ts     |   6 +-
 .../meteor/definition/externals/emojione.d.ts |  50 ++++
 apps/meteor/package.json                      |   1 -
 yarn.lock                                     |   1 -
 16 files changed, 429 insertions(+), 365 deletions(-)
 delete mode 100644 apps/meteor/app/emoji-emojione/lib/emojioneRender.ts
 create mode 100644 apps/meteor/app/emoji-emojione/lib/getEmojiConfig.ts
 create mode 100644 apps/meteor/app/emoji-emojione/lib/isSetNotNull.ts
 delete mode 100644 apps/meteor/app/emoji-emojione/lib/rocketchat.js
 create mode 100644 apps/meteor/definition/externals/emojione.d.ts

diff --git a/apps/meteor/app/emoji-emojione/client/lib.ts b/apps/meteor/app/emoji-emojione/client/lib.ts
index 04671a6db6d8..408b053c20f8 100644
--- a/apps/meteor/app/emoji-emojione/client/lib.ts
+++ b/apps/meteor/app/emoji-emojione/client/lib.ts
@@ -1,8 +1,9 @@
 import { Meteor } from 'meteor/meteor';
 
 import { emoji } from '../../emoji/client';
-import { getEmojiConfig, isSetNotNull } from '../lib/rocketchat';
 import { getUserPreference } from '../../utils/client';
+import { isSetNotNull } from '../lib/isSetNotNull';
+import { getEmojiConfig } from '../lib/getEmojiConfig';
 
 const config = getEmojiConfig();
 
@@ -18,16 +19,11 @@ if (emoji.packages.emojione) {
 
 	// RocketChat.emoji.list is the collection of emojis from all emoji packages
 	for (const [key, currentEmoji] of Object.entries(config.emojione.emojioneList)) {
-		// @ts-expect-error - emojione types
 		currentEmoji.emojiPackage = 'emojione';
-		// @ts-expect-error - emojione types
 		emoji.list[key] = currentEmoji;
 
-		// @ts-expect-error - emojione types
 		if (currentEmoji.shortnames) {
-			// @ts-expect-error - emojione types
 			currentEmoji.shortnames.forEach((shortname: string) => {
-				// @ts-expect-error - emojione types
 				emoji.list[shortname] = currentEmoji;
 			});
 		}
diff --git a/apps/meteor/app/emoji-emojione/lib/emojioneRender.ts b/apps/meteor/app/emoji-emojione/lib/emojioneRender.ts
deleted file mode 100644
index 2ed772ce644c..000000000000
--- a/apps/meteor/app/emoji-emojione/lib/emojioneRender.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import emojione from 'emojione';
-
-export function emojioneRender(message: string): string {
-	return emojione.toImage(message);
-}
-
-export function emojioneRenderFromShort(message: string): string {
-	return emojione.shortnameToImage(message);
-}
diff --git a/apps/meteor/app/emoji-emojione/lib/getEmojiConfig.ts b/apps/meteor/app/emoji-emojione/lib/getEmojiConfig.ts
new file mode 100644
index 000000000000..51d2fbc1c4ef
--- /dev/null
+++ b/apps/meteor/app/emoji-emojione/lib/getEmojiConfig.ts
@@ -0,0 +1,281 @@
+import emojione from 'emojione';
+import mem from 'mem';
+
+import { emojisByCategory, emojiCategories, toneList } from './emojiPicker';
+
+// TODO remove fix below when issue is solved: https://github.com/joypixels/emojione/issues/617
+
+// add missing emojis not provided by JS object, but included on emoji.json
+emojione.shortnames +=
+	'|:tm:|:copyright:|:registered:|:digit_zero:|:digit_one:|:digit_two:|:digit_three:|:digit_four:|:digit_five:|:digit_six:|:digit_seven:|:digit_eight:|:digit_nine:|:pound_symbol:|:asterisk_symbol:';
+emojione.regShortNames = new RegExp(
+	`<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(${emojione.shortnames})`,
+	'gi',
+);
+
+emojione.emojioneList[':tm:'] = {
+	uc_base: '2122',
+	uc_output: '2122-fe0f',
+	uc_match: '2122-fe0f',
+	uc_greedy: '2122-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':copyright:'] = {
+	uc_base: '00a9',
+	uc_output: '00a9-f0ef',
+	uc_match: '00a9-fe0f',
+	uc_greedy: '00a9-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':registered:'] = {
+	uc_base: '00ae',
+	uc_output: '00ae-fe0f',
+	uc_match: '00ae-fe0f',
+	uc_greedy: '00ae-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':digit_zero:'] = {
+	uc_base: '0030',
+	uc_output: '0030-fe0f',
+	uc_match: '0030-fe0f',
+	uc_greedy: '0030-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':digit_one:'] = {
+	uc_base: '0031',
+	uc_output: '0031-fe0f',
+	uc_match: '0031-fe0f',
+	uc_greedy: '0031-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':digit_two:'] = {
+	uc_base: '0032',
+	uc_output: '0032-fe0f',
+	uc_match: '0032-fe0f',
+	uc_greedy: '0032-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':digit_three:'] = {
+	uc_base: '0033',
+	uc_output: '0033-fe0f',
+	uc_match: '0033-fe0f',
+	uc_greedy: '0033-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':digit_four:'] = {
+	uc_base: '0034',
+	uc_output: '0034-fe0f',
+	uc_match: '0034-fe0f',
+	uc_greedy: '0034-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':digit_five:'] = {
+	uc_base: '0035',
+	uc_output: '0035-fe0f',
+	uc_match: '0035-fe0f',
+	uc_greedy: '0035-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':digit_six:'] = {
+	uc_base: '0036',
+	uc_output: '0036-fe0f',
+	uc_match: '0036-fe0f',
+	uc_greedy: '0036-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':digit_seven:'] = {
+	uc_base: '0037',
+	uc_output: '0037-fe0f',
+	uc_match: '0037-fe0f',
+	uc_greedy: '0037-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':digit_eight:'] = {
+	uc_base: '0038',
+	uc_output: '0038-fe0f',
+	uc_match: '0038-fe0f',
+	uc_greedy: '0038-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':digit_nine:'] = {
+	uc_base: '0039',
+	uc_output: '0039-fe0f',
+	uc_match: '0039-fe0f',
+	uc_greedy: '0039-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':pound_symbol:'] = {
+	uc_base: '0023',
+	uc_output: '0023-fe0f',
+	uc_match: '0023-fe0f',
+	uc_greedy: '0023-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+
+emojione.emojioneList[':asterisk_symbol:'] = {
+	uc_base: '002a',
+	uc_output: '002a-fe0f',
+	uc_match: '002a-fe0f',
+	uc_greedy: '002a-fe0f',
+	shortnames: [],
+	category: 'symbols',
+	emojiPackage: 'emojione',
+};
+// end fix
+
+// fix for :+1: - had to replace all function that does its conversion: https://github.com/joypixels/emojione/blob/4.5.0/lib/js/emojione.js#L249
+
+emojione.shortnameConversionMap = mem(emojione.shortnameConversionMap, { maxAge: 1000 });
+
+emojione.unicodeCharRegex = mem(emojione.unicodeCharRegex, { maxAge: 1000 });
+
+const convertShortName = mem(
+	(shortname) => {
+		// the fix is basically adding this .replace(/[+]/g, '\\$&')
+		if (typeof shortname === 'undefined' || shortname === '' || emojione.shortnames.indexOf(shortname.replace(/[+]/g, '\\$&')) === -1) {
+			// if the shortname doesnt exist just return the entire match
+			return shortname;
+		}
+
+		// map shortname to parent
+		if (!emojione.emojioneList[shortname]) {
+			for (const emoji in emojione.emojioneList) {
+				if (!emojione.emojioneList.hasOwnProperty(emoji) || emoji === '') {
+					continue;
+				}
+				if (emojione.emojioneList[emoji].shortnames.indexOf(shortname) === -1) {
+					continue;
+				}
+				shortname = emoji;
+				break;
+			}
+		}
+
+		const unicode = emojione.emojioneList[shortname].uc_output;
+		const fname = emojione.emojioneList[shortname].uc_base;
+		const category = fname.indexOf('-1f3f') >= 0 ? 'diversity' : emojione.emojioneList[shortname].category;
+		const title = emojione.imageTitleTag ? `title="${shortname}"` : '';
+		// const size = ns.spriteSize === '32' || ns.spriteSize === '64' ? ns.spriteSize : '32';
+		// if the emoji path has been set, we'll use the provided path, otherwise we'll use the default path
+		const ePath =
+			emojione.defaultPathPNG !== emojione.imagePathPNG ? emojione.imagePathPNG : `${emojione.defaultPathPNG + emojione.emojiSize}/`;
+
+		// depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname
+		const alt = emojione.unicodeAlt ? emojione.convert(unicode.toUpperCase()) : shortname;
+
+		if (emojione.sprites) {
+			return `<span class="emojione emojione-${category} _${fname}" ${title}>${alt}</span>`;
+		}
+		return `<img class="emojione" alt="${alt}" ${title} src="${ePath}${fname}${emojione.fileExtension}"/>`;
+	},
+	{ maxAge: 1000 },
+);
+
+const convertUnicode = mem(
+	(entire, _m1, m2, m3) => {
+		const mappedUnicode = emojione.mapUnicodeToShort();
+
+		if (typeof m3 === 'undefined' || m3 === '' || !(emojione.unescapeHTML(m3) in emojione.asciiList)) {
+			// if the ascii doesnt exist just return the entire match
+			return entire;
+		}
+
+		m3 = emojione.unescapeHTML(m3);
+		const unicode = emojione.asciiList[m3];
+		const shortname = mappedUnicode[unicode];
+		const category = unicode.indexOf('-1f3f') >= 0 ? 'diversity' : emojione.emojioneList[shortname].category;
+		const title = emojione.imageTitleTag ? `title="${emojione.escapeHTML(m3)}"` : '';
+		// const size = ns.spriteSize === '32' || ns.spriteSize === '64' ? ns.spriteSize : '32';
+		// if the emoji path has been set, we'll use the provided path, otherwise we'll use the default path
+		const ePath =
+			emojione.defaultPathPNG !== emojione.imagePathPNG ? emojione.imagePathPNG : `${emojione.defaultPathPNG + emojione.emojiSize}/`;
+
+		// depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname
+		const alt = emojione.unicodeAlt ? emojione.convert(unicode.toUpperCase()) : emojione.escapeHTML(m3);
+
+		if (emojione.sprites) {
+			return `${m2}<span class="emojione emojione-${category} _${unicode}"  ${title}>${alt}</span>`;
+		}
+		return `${m2}<img class="emojione" alt="${alt}" ${title} src="${ePath}${unicode}${emojione.fileExtension}"/>`;
+	},
+	{ maxAge: 1000, cacheKey: JSON.stringify },
+);
+
+emojione.shortnameToImage = (str) => {
+	// replace regular shortnames first
+	str = str.replace(emojione.regShortNames, convertShortName);
+
+	// if ascii smileys are turned on, then we'll replace them!
+	if (emojione.ascii) {
+		const asciiRX = emojione.riskyMatchAscii ? emojione.regAsciiRisky : emojione.regAscii;
+
+		return str.replace(asciiRX, convertUnicode);
+	}
+
+	return str;
+};
+
+const isEmojiSupported = (str: string) => {
+	str = str.replace(emojione.regShortNames, convertShortName);
+
+	// if ascii smileys are turned on, then we'll replace them!
+	if (emojione.ascii) {
+		const asciiRX = emojione.riskyMatchAscii ? emojione.regAsciiRisky : emojione.regAscii;
+
+		return str.replace(asciiRX, convertUnicode);
+	}
+
+	return str;
+};
+
+export const getEmojiConfig = () => ({
+	emojione,
+	emojisByCategory,
+	emojiCategories,
+	toneList,
+	render: emojione.toImage,
+	renderPicker: emojione.shortnameToImage,
+	sprites: true,
+	isEmojiSupported,
+});
diff --git a/apps/meteor/app/emoji-emojione/lib/isSetNotNull.ts b/apps/meteor/app/emoji-emojione/lib/isSetNotNull.ts
new file mode 100644
index 000000000000..000be1279e68
--- /dev/null
+++ b/apps/meteor/app/emoji-emojione/lib/isSetNotNull.ts
@@ -0,0 +1,10 @@
+// http://stackoverflow.com/a/26990347 function isSet() from Gajus
+export const isSetNotNull = async (fn: () => unknown) => {
+	let value;
+	try {
+		value = await fn();
+	} catch (e) {
+		value = null;
+	}
+	return value !== null && value !== undefined;
+};
diff --git a/apps/meteor/app/emoji-emojione/lib/rocketchat.js b/apps/meteor/app/emoji-emojione/lib/rocketchat.js
deleted file mode 100644
index 7e415b99efe8..000000000000
--- a/apps/meteor/app/emoji-emojione/lib/rocketchat.js
+++ /dev/null
@@ -1,280 +0,0 @@
-import emojione from 'emojione';
-import mem from 'mem';
-
-import { emojioneRender, emojioneRenderFromShort } from './emojioneRender';
-import { emojisByCategory, emojiCategories, toneList } from './emojiPicker';
-
-// TODO remove fix below when issue is solved: https://github.com/joypixels/emojione/issues/617
-
-// add missing emojis not provided by JS object, but included on emoji.json
-emojione.shortnames +=
-	'|:tm:|:copyright:|:registered:|:digit_zero:|:digit_one:|:digit_two:|:digit_three:|:digit_four:|:digit_five:|:digit_six:|:digit_seven:|:digit_eight:|:digit_nine:|:pound_symbol:|:asterisk_symbol:';
-emojione.regShortNames = new RegExp(
-	`<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(${emojione.shortnames})`,
-	'gi',
-);
-
-emojione.emojioneList[':tm:'] = {
-	uc_base: '2122',
-	uc_output: '2122-fe0f',
-	uc_match: '2122-fe0f',
-	uc_greedy: '2122-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':copyright:'] = {
-	uc_base: '00a9',
-	uc_output: '00a9-f0ef',
-	uc_match: '00a9-fe0f',
-	uc_greedy: '00a9-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':registered:'] = {
-	uc_base: '00ae',
-	uc_output: '00ae-fe0f',
-	uc_match: '00ae-fe0f',
-	uc_greedy: '00ae-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':digit_zero:'] = {
-	uc_base: '0030',
-	uc_output: '0030-fe0f',
-	uc_match: '0030-fe0f',
-	uc_greedy: '0030-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':digit_one:'] = {
-	uc_base: '0031',
-	uc_output: '0031-fe0f',
-	uc_match: '0031-fe0f',
-	uc_greedy: '0031-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':digit_two:'] = {
-	uc_base: '0032',
-	uc_output: '0032-fe0f',
-	uc_match: '0032-fe0f',
-	uc_greedy: '0032-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':digit_three:'] = {
-	uc_base: '0033',
-	uc_output: '0033-fe0f',
-	uc_match: '0033-fe0f',
-	uc_greedy: '0033-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':digit_four:'] = {
-	uc_base: '0034',
-	uc_output: '0034-fe0f',
-	uc_match: '0034-fe0f',
-	uc_greedy: '0034-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':digit_five:'] = {
-	uc_base: '0035',
-	uc_output: '0035-fe0f',
-	uc_match: '0035-fe0f',
-	uc_greedy: '0035-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':digit_six:'] = {
-	uc_base: '0036',
-	uc_output: '0036-fe0f',
-	uc_match: '0036-fe0f',
-	uc_greedy: '0036-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':digit_seven:'] = {
-	uc_base: '0037',
-	uc_output: '0037-fe0f',
-	uc_match: '0037-fe0f',
-	uc_greedy: '0037-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':digit_eight:'] = {
-	uc_base: '0038',
-	uc_output: '0038-fe0f',
-	uc_match: '0038-fe0f',
-	uc_greedy: '0038-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':digit_nine:'] = {
-	uc_base: '0039',
-	uc_output: '0039-fe0f',
-	uc_match: '0039-fe0f',
-	uc_greedy: '0039-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':pound_symbol:'] = {
-	uc_base: '0023',
-	uc_output: '0023-fe0f',
-	uc_match: '0023-fe0f',
-	uc_greedy: '0023-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-
-emojione.emojioneList[':asterisk_symbol:'] = {
-	uc_base: '002a',
-	uc_output: '002a-fe0f',
-	uc_match: '002a-fe0f',
-	uc_greedy: '002a-fe0f',
-	shortnames: [],
-	category: 'symbols',
-	emojiPackage: 'emojione',
-};
-// end fix
-
-// fix for :+1: - had to replace all function that does its conversion: https://github.com/joypixels/emojione/blob/4.5.0/lib/js/emojione.js#L249
-(function (ns) {
-	ns.shortnameConversionMap = mem(ns.shortnameConversionMap, { maxAge: 1000 });
-
-	ns.unicodeCharRegex = mem(ns.unicodeCharRegex, { maxAge: 1000 });
-
-	const convertShortName = mem(
-		function (shortname) {
-			// the fix is basically adding this .replace(/[+]/g, '\\$&')
-			if (typeof shortname === 'undefined' || shortname === '' || ns.shortnames.indexOf(shortname.replace(/[+]/g, '\\$&')) === -1) {
-				// if the shortname doesnt exist just return the entire match
-				return shortname;
-			}
-
-			// map shortname to parent
-			if (!ns.emojioneList[shortname]) {
-				for (const emoji in ns.emojioneList) {
-					if (!ns.emojioneList.hasOwnProperty(emoji) || emoji === '') {
-						continue;
-					}
-					if (ns.emojioneList[emoji].shortnames.indexOf(shortname) === -1) {
-						continue;
-					}
-					shortname = emoji;
-					break;
-				}
-			}
-
-			const unicode = ns.emojioneList[shortname].uc_output;
-			const fname = ns.emojioneList[shortname].uc_base;
-			const category = fname.indexOf('-1f3f') >= 0 ? 'diversity' : ns.emojioneList[shortname].category;
-			const title = ns.imageTitleTag ? `title="${shortname}"` : '';
-			// const size = ns.spriteSize === '32' || ns.spriteSize === '64' ? ns.spriteSize : '32';
-			// if the emoji path has been set, we'll use the provided path, otherwise we'll use the default path
-			const ePath = ns.defaultPathPNG !== ns.imagePathPNG ? ns.imagePathPNG : `${ns.defaultPathPNG + ns.emojiSize}/`;
-
-			// depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname
-			const alt = ns.unicodeAlt ? ns.convert(unicode.toUpperCase()) : shortname;
-
-			if (ns.sprites) {
-				return `<span class="emojione emojione-${category} _${fname}" ${title}>${alt}</span>`;
-			}
-			return `<img class="emojione" alt="${alt}" ${title} src="${ePath}${fname}${ns.fileExtension}"/>`;
-		},
-		{ maxAge: 1000 },
-	);
-
-	const convertUnicode = mem(
-		function (entire, m1, m2, m3) {
-			const mappedUnicode = ns.mapUnicodeToShort();
-
-			if (typeof m3 === 'undefined' || m3 === '' || !(ns.unescapeHTML(m3) in ns.asciiList)) {
-				// if the ascii doesnt exist just return the entire match
-				return entire;
-			}
-
-			m3 = ns.unescapeHTML(m3);
-			const unicode = ns.asciiList[m3];
-			const shortname = mappedUnicode[unicode];
-			const category = unicode.indexOf('-1f3f') >= 0 ? 'diversity' : ns.emojioneList[shortname].category;
-			const title = ns.imageTitleTag ? `title="${ns.escapeHTML(m3)}"` : '';
-			// const size = ns.spriteSize === '32' || ns.spriteSize === '64' ? ns.spriteSize : '32';
-			// if the emoji path has been set, we'll use the provided path, otherwise we'll use the default path
-			const ePath = ns.defaultPathPNG !== ns.imagePathPNG ? ns.imagePathPNG : `${ns.defaultPathPNG + ns.emojiSize}/`;
-
-			// depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname
-			const alt = ns.unicodeAlt ? ns.convert(unicode.toUpperCase()) : ns.escapeHTML(m3);
-
-			if (ns.sprites) {
-				return `${m2}<span class="emojione emojione-${category} _${unicode}"  ${title}>${alt}</span>`;
-			}
-			return `${m2}<img class="emojione" alt="${alt}" ${title} src="${ePath}${unicode}${ns.fileExtension}"/>`;
-		},
-		{ maxAge: 1000, cacheKey: JSON.stringify },
-	);
-
-	ns.shortnameToImage = function (str) {
-		// replace regular shortnames first
-		str = str.replace(ns.regShortNames, convertShortName);
-
-		// if ascii smileys are turned on, then we'll replace them!
-		if (ns.ascii) {
-			const asciiRX = ns.riskyMatchAscii ? ns.regAsciiRisky : ns.regAscii;
-
-			return str.replace(asciiRX, convertUnicode);
-		}
-
-		return str;
-	};
-})(emojione);
-
-export function getEmojiConfig() {
-	return {
-		emojione,
-		emojisByCategory,
-		emojiCategories,
-		toneList,
-		render: emojioneRender,
-		renderPicker: emojioneRenderFromShort,
-		sprites: true,
-	};
-}
-
-// http://stackoverflow.com/a/26990347 function isSet() from Gajus
-export async function isSetNotNull(fn) {
-	let value;
-	try {
-		value = await fn();
-	} catch (e) {
-		value = null;
-	}
-	return value !== null && value !== undefined;
-}
diff --git a/apps/meteor/app/emoji-emojione/server/lib.ts b/apps/meteor/app/emoji-emojione/server/lib.ts
index 4f1808eba60a..b80b9318a828 100644
--- a/apps/meteor/app/emoji-emojione/server/lib.ts
+++ b/apps/meteor/app/emoji-emojione/server/lib.ts
@@ -1,7 +1,8 @@
 import { Meteor } from 'meteor/meteor';
 
 import { emoji } from '../../emoji/server';
-import { getEmojiConfig, isSetNotNull } from '../lib/rocketchat';
+import { getEmojiConfig } from '../lib/getEmojiConfig';
+import { isSetNotNull } from '../lib/isSetNotNull';
 import { getUserPreference } from '../../utils/server';
 
 const config = getEmojiConfig();
@@ -20,16 +21,11 @@ if (emoji.packages.emojione) {
 	for (const key in config.emojione.emojioneList) {
 		if (config.emojione.emojioneList.hasOwnProperty(key)) {
 			const currentEmoji = config.emojione.emojioneList[key];
-			// @ts-expect-error - emojione types
 			currentEmoji.emojiPackage = 'emojione';
-			// @ts-expect-error - emojione types
 			emoji.list[key] = currentEmoji;
 
-			// @ts-expect-error - emojione types
 			if (currentEmoji.shortnames) {
-				// @ts-expect-error - emojione types
 				currentEmoji.shortnames.forEach((shortname: string) => {
-					// @ts-expect-error - emojione types
 					emoji.list[shortname] = currentEmoji;
 				});
 			}
diff --git a/apps/meteor/app/emoji/client/lib.ts b/apps/meteor/app/emoji/client/lib.ts
index 55b858cb3e11..1d2397c9568d 100644
--- a/apps/meteor/app/emoji/client/lib.ts
+++ b/apps/meteor/app/emoji/client/lib.ts
@@ -1,4 +1,5 @@
-import { emojioneRender } from '../../emoji-emojione/lib/emojioneRender';
+import emojione from 'emojione';
+
 import type { EmojiPackages } from '../lib/rocketchat';
 
 export const emoji: EmojiPackages = {
@@ -10,7 +11,7 @@ export const emoji: EmojiPackages = {
 				recent: [],
 			},
 			toneList: {},
-			render: emojioneRender,
+			render: emojione.toImage,
 			renderPicker(emojiToRender) {
 				const correctPackage = emoji.list[emojiToRender].emojiPackage;
 				if (!correctPackage) {
diff --git a/apps/meteor/client/contexts/EmojiPickerContext.ts b/apps/meteor/client/contexts/EmojiPickerContext.ts
index 50490182d519..4c4257c3dd3d 100644
--- a/apps/meteor/client/contexts/EmojiPickerContext.ts
+++ b/apps/meteor/client/contexts/EmojiPickerContext.ts
@@ -10,7 +10,7 @@ type EmojiPickerContextValue = {
 	handlePreview: (emoji: string, name: string) => void;
 	handleRemovePreview: () => void;
 	addRecentEmoji: (emoji: string) => void;
-	emojiListByCategory: EmojiByCategory[];
+	getEmojiListsByCategory: () => EmojiByCategory[];
 	recentEmojis: string[];
 	setRecentEmojis: (emoji: string[]) => void;
 	actualTone: number;
@@ -44,16 +44,32 @@ export const usePreviewEmoji = () => ({
 	handleRemovePreview: useEmojiPickerContext().handleRemovePreview,
 });
 
-export const useEmojiPickerData = () => ({
-	addRecentEmoji: useEmojiPickerContext().addRecentEmoji,
-	emojiListByCategory: useEmojiPickerContext().emojiListByCategory,
-	recentEmojis: useEmojiPickerContext().recentEmojis,
-	setRecentEmojis: useEmojiPickerContext().setRecentEmojis,
-	actualTone: useEmojiPickerContext().actualTone,
-	currentCategory: useEmojiPickerContext().currentCategory,
-	setCurrentCategory: useEmojiPickerContext().setCurrentCategory,
-	customItemsLimit: useEmojiPickerContext().customItemsLimit,
-	setCustomItemsLimit: useEmojiPickerContext().setCustomItemsLimit,
-	setActualTone: useEmojiPickerContext().setActualTone,
-	quickReactions: useEmojiPickerContext().quickReactions,
-});
+export const useEmojiPickerData = () => {
+	const {
+		actualTone,
+		addRecentEmoji,
+		currentCategory,
+		customItemsLimit,
+		getEmojiListsByCategory,
+		quickReactions,
+		recentEmojis,
+		setActualTone,
+		setCurrentCategory,
+		setCustomItemsLimit,
+		setRecentEmojis,
+	} = useEmojiPickerContext();
+
+	return {
+		addRecentEmoji,
+		getEmojiListsByCategory,
+		recentEmojis,
+		setRecentEmojis,
+		actualTone,
+		currentCategory,
+		setCurrentCategory,
+		customItemsLimit,
+		setCustomItemsLimit,
+		setActualTone,
+		quickReactions,
+	};
+};
diff --git a/apps/meteor/client/lib/rooms/roomCoordinator.tsx b/apps/meteor/client/lib/rooms/roomCoordinator.tsx
index 9a2e3d14ab47..31eda2982a12 100644
--- a/apps/meteor/client/lib/rooms/roomCoordinator.tsx
+++ b/apps/meteor/client/lib/rooms/roomCoordinator.tsx
@@ -19,7 +19,7 @@ import type {
 import { RoomCoordinator } from '../../../lib/rooms/coordinator';
 import { router } from '../../providers/RouterProvider';
 import RoomRoute from '../../views/room/RoomRoute';
-import MainLayout from '../../views/root/MainLayout/MainLayout';
+import MainLayout from '../../views/root/MainLayout';
 import { appLayout } from '../appLayout';
 
 class RoomCoordinatorClient extends RoomCoordinator {
diff --git a/apps/meteor/client/providers/EmojiPickerProvider.tsx b/apps/meteor/client/providers/EmojiPickerProvider.tsx
index 5c9f3a8e9946..84ffa3394c10 100644
--- a/apps/meteor/client/providers/EmojiPickerProvider.tsx
+++ b/apps/meteor/client/providers/EmojiPickerProvider.tsx
@@ -1,5 +1,5 @@
 import { useDebouncedState, useLocalStorage } from '@rocket.chat/fuselage-hooks';
-import type { ReactNode, ReactElement } from 'react';
+import type { ReactNode, ReactElement, ContextType } from 'react';
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 
 import type { EmojiByCategory } from '../../app/emoji/client';
@@ -14,7 +14,6 @@ const EmojiPickerProvider = ({ children }: { children: ReactNode }): ReactElemen
 	const [emojiToPreview, setEmojiToPreview] = useDebouncedState<{ emoji: string; name: string } | null>(null, 100);
 	const [recentEmojis, setRecentEmojis] = useLocalStorage<string[]>('emoji.recent', []);
 	const [actualTone, setActualTone] = useLocalStorage('emoji.tone', 0);
-	const [emojiListByCategory, setEmojiListByCategory] = useState<EmojiByCategory[]>([]);
 	const [currentCategory, setCurrentCategory] = useState('recent');
 	const [customItemsLimit, setCustomItemsLimit] = useState(DEFAULT_ITEMS_LIMIT);
 
@@ -40,26 +39,37 @@ const EmojiPickerProvider = ({ children }: { children: ReactNode }): ReactElemen
 		[frequentEmojis, setFrequentEmojis],
 	);
 
+	const [getEmojiListsByCategory, setEmojiListsByCategoryGetter] = useState<() => EmojiByCategory[]>(() => () => []);
+
 	// TODO: improve this update
 	const updateEmojiListByCategory = useCallback(
 		(categoryKey: string, limit: number = DEFAULT_ITEMS_LIMIT) => {
-			const result = emojiListByCategory.map((category) => {
-				return categoryKey === category.key
-					? {
-							...category,
-							emojis: {
-								list: createEmojiList(category.key, null, recentEmojis, setRecentEmojis),
-								limit: category.key === CUSTOM_CATEGORY ? limit | customItemsLimit : null,
-							},
-					  }
-					: category;
-			});
-
-			setEmojiListByCategory(result);
+			setEmojiListsByCategoryGetter(
+				(getEmojiListsByCategory) => () =>
+					getEmojiListsByCategory().map((category) =>
+						categoryKey === category.key
+							? {
+									...category,
+									emojis: {
+										list: createEmojiList(category.key, null, recentEmojis, setRecentEmojis),
+										limit: category.key === CUSTOM_CATEGORY ? limit | customItemsLimit : null,
+									},
+							  }
+							: category,
+					),
+			);
 		},
-		[customItemsLimit, emojiListByCategory, recentEmojis, setRecentEmojis],
+		[customItemsLimit, recentEmojis, setRecentEmojis],
 	);
 
+	useEffect(() => {
+		if (recentEmojis?.length > 0) {
+			updateRecent(recentEmojis);
+		}
+
+		setEmojiListsByCategoryGetter(() => () => createPickerEmojis(customItemsLimit, actualTone, recentEmojis, setRecentEmojis));
+	}, [actualTone, recentEmojis, customItemsLimit, currentCategory, setRecentEmojis, frequentEmojis]);
+
 	const addRecentEmoji = useCallback(
 		(_emoji: string) => {
 			addFrequentEmojis(_emoji);
@@ -83,21 +93,12 @@ const EmojiPickerProvider = ({ children }: { children: ReactNode }): ReactElemen
 		[recentEmojis, setRecentEmojis, updateEmojiListByCategory, addFrequentEmojis],
 	);
 
-	useEffect(() => {
-		if (recentEmojis?.length > 0) {
-			updateRecent(recentEmojis);
-		}
-
-		const emojis = createPickerEmojis(customItemsLimit, actualTone, recentEmojis, setRecentEmojis);
-		setEmojiListByCategory(emojis);
-	}, [actualTone, recentEmojis, customItemsLimit, currentCategory, setRecentEmojis, frequentEmojis]);
-
 	const open = useCallback((ref: Element, callback: (emoji: string) => void) => {
 		return setEmojiPicker(<EmojiPicker reference={ref} onClose={() => setEmojiPicker(null)} onPickEmoji={(emoji) => callback(emoji)} />);
 	}, []);
 
 	const contextValue = useMemo(
-		() => ({
+		(): ContextType<typeof EmojiPickerContext> => ({
 			isOpen: emojiPicker !== null,
 			close: () => setEmojiPicker(null),
 			open,
@@ -105,7 +106,7 @@ const EmojiPickerProvider = ({ children }: { children: ReactNode }): ReactElemen
 			handlePreview: (emoji: string, name: string) => setEmojiToPreview({ emoji, name }),
 			handleRemovePreview: () => setEmojiToPreview(null),
 			addRecentEmoji,
-			emojiListByCategory,
+			getEmojiListsByCategory,
 			recentEmojis,
 			setRecentEmojis,
 			actualTone,
@@ -122,7 +123,7 @@ const EmojiPickerProvider = ({ children }: { children: ReactNode }): ReactElemen
 			emojiToPreview,
 			setEmojiToPreview,
 			addRecentEmoji,
-			emojiListByCategory,
+			getEmojiListsByCategory,
 			recentEmojis,
 			setRecentEmojis,
 			actualTone,
diff --git a/apps/meteor/client/views/composer/EmojiPicker/EmojiPicker.tsx b/apps/meteor/client/views/composer/EmojiPicker/EmojiPicker.tsx
index cd37a05699fb..47d8ba849201 100644
--- a/apps/meteor/client/views/composer/EmojiPicker/EmojiPicker.tsx
+++ b/apps/meteor/client/views/composer/EmojiPicker/EmojiPicker.tsx
@@ -11,7 +11,7 @@ import {
 } from '@rocket.chat/ui-client';
 import { useTranslation, usePermission, useRoute } from '@rocket.chat/ui-contexts';
 import type { ChangeEvent, KeyboardEvent, MouseEvent, RefObject } from 'react';
-import React, { useLayoutEffect, useState, useEffect, useRef, useCallback } from 'react';
+import React, { useLayoutEffect, useState, useEffect, useRef } from 'react';
 import type { VirtuosoHandle } from 'react-virtuoso';
 
 import type { EmojiItem, EmojiCategoryPosition } from '../../../../app/emoji/client';
@@ -59,13 +59,13 @@ const EmojiPicker = ({ reference, onClose, onPickEmoji }: EmojiPickerProps) => {
 		setRecentEmojis,
 		actualTone,
 		currentCategory,
-		emojiListByCategory,
+		getEmojiListsByCategory,
 		customItemsLimit,
 		setActualTone,
 		setCustomItemsLimit,
 	} = useEmojiPickerData();
 
-	useEffect(() => () => handleRemovePreview(), []);
+	useEffect(() => () => handleRemovePreview(), [handleRemovePreview]);
 
 	const scrollCategories = useMediaQuery('(width < 340px)');
 
@@ -126,16 +126,12 @@ const EmojiPicker = ({ reference, onClose, onPickEmoji }: EmojiPickerProps) => {
 		onClose();
 	};
 
-	const showInitialCategory = useCallback((customEmojiList) => {
-		handleGoToCategory(customEmojiList.length > 0 ? 0 : 1);
-	}, []);
-
 	useEffect(() => {
 		if (recentEmojis.length === 0 && currentCategory === 'recent') {
-			const customEmojiList = emojiListByCategory.filter(({ key }) => key === 'rocket');
-			showInitialCategory(customEmojiList);
+			const customEmojiList = getEmojiListsByCategory().filter(({ key }) => key === 'rocket');
+			handleGoToCategory(customEmojiList.length > 0 ? 0 : 1);
 		}
-	}, [actualTone, recentEmojis, emojiListByCategory, currentCategory, setRecentEmojis, showInitialCategory]);
+	}, [actualTone, recentEmojis, getEmojiListsByCategory, currentCategory, setRecentEmojis]);
 
 	const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
 		setSearchTerm(e.target.value);
@@ -216,7 +212,7 @@ const EmojiPicker = ({ reference, onClose, onPickEmoji }: EmojiPickerProps) => {
 					{!searching && (
 						<CategoriesResult
 							ref={virtuosoRef}
-							emojiListByCategory={emojiListByCategory}
+							emojiListByCategory={getEmojiListsByCategory()}
 							categoriesPosition={categoriesPosition}
 							customItemsLimit={customItemsLimit}
 							handleLoadMore={handleLoadMore}
diff --git a/apps/meteor/client/views/room/hooks/useOpenRoom.ts b/apps/meteor/client/views/room/hooks/useOpenRoom.ts
index 4e109759593a..7fa0114bcd64 100644
--- a/apps/meteor/client/views/room/hooks/useOpenRoom.ts
+++ b/apps/meteor/client/views/room/hooks/useOpenRoom.ts
@@ -3,15 +3,10 @@ import { useMethod, useRoute, useSetting, useUser } from '@rocket.chat/ui-contex
 import { useQuery } from '@tanstack/react-query';
 import { useRef } from 'react';
 
-import { ChatRoom, ChatSubscription } from '../../../../app/models/client';
-import { LegacyRoomManager } from '../../../../app/ui-utils/client';
 import { roomFields } from '../../../../lib/publishFields';
 import { omit } from '../../../../lib/utils/omit';
-import { RoomManager } from '../../../lib/RoomManager';
 import { NotAuthorizedError } from '../../../lib/errors/NotAuthorizedError';
 import { RoomNotFoundError } from '../../../lib/errors/RoomNotFoundError';
-import { fireGlobalEvent } from '../../../lib/utils/fireGlobalEvent';
-import { waitUntilFind } from '../../../lib/utils/waitUntilFind';
 
 export function useOpenRoom({ type, reference }: { type: RoomType; reference: string }) {
 	const user = useUser();
@@ -53,6 +48,8 @@ export function useOpenRoom({ type, reference }: { type: RoomType; reference: st
 				}
 			}
 
+			const { ChatRoom, ChatSubscription } = await import('../../../../app/models/client');
+
 			ChatRoom.upsert({ _id: roomData._id }, { $set, $unset });
 			const room = ChatRoom.findOne({ _id: roomData._id });
 
@@ -60,12 +57,17 @@ export function useOpenRoom({ type, reference }: { type: RoomType; reference: st
 				throw new TypeError('room is undefined');
 			}
 
+			const { LegacyRoomManager } = await import('../../../../app/ui-utils/client');
+
 			if (room._id !== reference && type === 'd') {
 				// Redirect old url using username to rid
 				await LegacyRoomManager.close(type + reference);
 				throw new RoomNotFoundError(undefined, { rid: room._id });
 			}
 
+			const { RoomManager } = await import('../../../lib/RoomManager');
+			const { fireGlobalEvent } = await import('../../../lib/utils/fireGlobalEvent');
+
 			unsubscribeFromRoomOpenedEvent.current();
 			unsubscribeFromRoomOpenedEvent.current = RoomManager.once('opened', () => fireGlobalEvent('room-opened', omit(room, 'usernames')));
 
@@ -95,6 +97,8 @@ export function useOpenRoom({ type, reference }: { type: RoomType; reference: st
 				}
 
 				const { rid } = await createDirectMessage(...reference.split(', '));
+				const { ChatSubscription } = await import('../../../../app/models/client');
+				const { waitUntilFind } = await import('../../../lib/utils/waitUntilFind');
 				await waitUntilFind(() => ChatSubscription.findOne({ rid }));
 				directRoute.push({ rid }, (prev) => prev);
 			},
diff --git a/apps/meteor/client/views/root/MainLayout/index.ts b/apps/meteor/client/views/root/MainLayout/index.ts
index ed5671ffcf21..4b36da185ab3 100644
--- a/apps/meteor/client/views/root/MainLayout/index.ts
+++ b/apps/meteor/client/views/root/MainLayout/index.ts
@@ -1 +1,5 @@
-export { default } from './MainLayout';
+import { lazy } from 'react';
+
+const MainLayout = lazy(() => import('./MainLayout'));
+
+export default MainLayout;
diff --git a/apps/meteor/definition/externals/emojione.d.ts b/apps/meteor/definition/externals/emojione.d.ts
new file mode 100644
index 000000000000..6e9c9deab0c7
--- /dev/null
+++ b/apps/meteor/definition/externals/emojione.d.ts
@@ -0,0 +1,50 @@
+declare module 'emojione' {
+	export as namespace emojione;
+
+	export let sprites: boolean;
+	export let imagePathSVG: string;
+	export let imagePathSVGSprites: string;
+	export let imageType: 'png' | 'svg';
+	export let unicodeAlt: boolean;
+	export let ascii: boolean;
+	export let unicodeRegexp: string;
+	export let cacheBustParam: string;
+	export let emojioneList: {
+		[key: string]: {
+			uc_base: string;
+			uc_output: string;
+			uc_match: string;
+			uc_greedy: string;
+			shortnames: string[];
+			category: string;
+			emojiPackage: string;
+		};
+	};
+
+	type Unicode = string;
+	type MappedUnicode = Record<Unicode, string>;
+
+	export let regShortNames: RegExp;
+	export let shortnames: string;
+	export const imageTitleTag: boolean;
+	export const defaultPathPNG: string;
+	export let imagePathPNG: string;
+	export const emojiSize: string;
+	export const fileExtension: string;
+	export const asciiList: Record<string, Unicode>;
+	export const riskyMatchAscii: boolean;
+	export const regAsciiRisky: RegExp;
+	export const regAscii: RegExp;
+
+	export function toShort(str: string): string;
+	export function toImage(str: string): string;
+	export function shortnameToImage(str: string): string;
+	export function unicodeToImage(str: string): string;
+	export function shortnameToUnicode(str: string): string;
+	export function shortnameConversionMap(): unknown;
+	export function unicodeCharRegex(): unknown;
+	export function convert(str: string): string;
+	export function mapUnicodeToShort(): MappedUnicode;
+	export function escapeHTML(str: string): string;
+	export function unescapeHTML(str: string): string;
+}
diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index 0370b5327b4f..80289d401c38 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -104,7 +104,6 @@
 		"@types/cssom": "^0.4.1",
 		"@types/dompurify": "^2.3.3",
 		"@types/ejson": "^2.2.0",
-		"@types/emojione": "^2.2.6",
 		"@types/express": "^4.17.17",
 		"@types/express-rate-limit": "^5.1.3",
 		"@types/fibers": "^3.1.1",
diff --git a/yarn.lock b/yarn.lock
index 3dcf48ca6520..49aef6230cd1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10299,7 +10299,6 @@ __metadata:
     "@types/cssom": ^0.4.1
     "@types/dompurify": ^2.3.3
     "@types/ejson": ^2.2.0
-    "@types/emojione": ^2.2.6
     "@types/express": ^4.17.17
     "@types/express-rate-limit": ^5.1.3
     "@types/fibers": ^3.1.1

From ad014d1e347104c48823895e7c93c1d350463deb Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Fri, 7 Jul 2023 20:37:02 -0300
Subject: [PATCH 2/5] chore: `CloudRoute` to typescript (#29762)

---
 apps/meteor/app/emoji/client/helpers.ts                       | 2 +-
 apps/meteor/client/lib/constants.ts                           | 1 +
 .../views/admin/cloud/{CloudRoute.js => CloudRoute.tsx}       | 4 ++--
 apps/meteor/client/views/admin/cloud/CopyStep.tsx             | 4 ++--
 apps/meteor/client/views/admin/cloud/RegisterWorkspace.tsx    | 3 +--
 .../views/admin/cloud/components/RegisterWorkspaceMenu.tsx    | 4 ++--
 apps/meteor/client/views/admin/cloud/constants.js             | 1 -
 7 files changed, 9 insertions(+), 10 deletions(-)
 rename apps/meteor/client/views/admin/cloud/{CloudRoute.js => CloudRoute.tsx} (92%)
 delete mode 100644 apps/meteor/client/views/admin/cloud/constants.js

diff --git a/apps/meteor/app/emoji/client/helpers.ts b/apps/meteor/app/emoji/client/helpers.ts
index d9fba8720d1c..35badda26a73 100644
--- a/apps/meteor/app/emoji/client/helpers.ts
+++ b/apps/meteor/app/emoji/client/helpers.ts
@@ -159,7 +159,7 @@ export const updateRecent = (recentList: string[]) => {
 const getEmojiRender = (emojiName: string) => {
 	const emojiPackageName = emoji.list[emojiName]?.emojiPackage;
 	const emojiPackage = emoji.packages[emojiPackageName];
-	return emojiPackage.render(emojiName);
+	return emojiPackage?.render(emojiName);
 };
 
 export const getFrequentEmoji = (frequentEmoji: string[]) => {
diff --git a/apps/meteor/client/lib/constants.ts b/apps/meteor/client/lib/constants.ts
index 89052eea93ac..7e437deb7fd2 100644
--- a/apps/meteor/client/lib/constants.ts
+++ b/apps/meteor/client/lib/constants.ts
@@ -1,3 +1,4 @@
 export const USER_STATUS_TEXT_MAX_LENGTH = 120;
 export const BIO_TEXT_MAX_LENGTH = 260;
 export const VIDEOCONF_STACK_MAX_USERS = 6;
+export const CLOUD_CONSOLE_URL = 'https://cloud.rocket.chat';
diff --git a/apps/meteor/client/views/admin/cloud/CloudRoute.js b/apps/meteor/client/views/admin/cloud/CloudRoute.tsx
similarity index 92%
rename from apps/meteor/client/views/admin/cloud/CloudRoute.js
rename to apps/meteor/client/views/admin/cloud/CloudRoute.tsx
index 705136294a3b..89bf5f1df772 100644
--- a/apps/meteor/client/views/admin/cloud/CloudRoute.js
+++ b/apps/meteor/client/views/admin/cloud/CloudRoute.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import RegisterWorkspace from './RegisterWorkspace';
 
-function CloudRoute() {
+const CloudRoute = () => {
 	const canManageCloud = usePermission('manage-cloud');
 
 	if (!canManageCloud) {
@@ -12,6 +12,6 @@ function CloudRoute() {
 	}
 
 	return <RegisterWorkspace />;
-}
+};
 
 export default CloudRoute;
diff --git a/apps/meteor/client/views/admin/cloud/CopyStep.tsx b/apps/meteor/client/views/admin/cloud/CopyStep.tsx
index 96b6e14eaac5..4232572ea7bf 100644
--- a/apps/meteor/client/views/admin/cloud/CopyStep.tsx
+++ b/apps/meteor/client/views/admin/cloud/CopyStep.tsx
@@ -5,7 +5,7 @@ import type { FC } from 'react';
 import React, { useEffect, useState, useRef } from 'react';
 
 import MarkdownText from '../../../components/MarkdownText';
-import { cloudConsoleUrl } from './constants';
+import { CLOUD_CONSOLE_URL } from '../../../lib/constants';
 
 type CopyStepProps = {
 	onNextButtonClick: () => void;
@@ -61,7 +61,7 @@ const CopyStep: FC<CopyStepProps> = ({ onNextButtonClick }) => {
 						<Icon name='copy' /> {t('Copy')}
 					</Button>
 				</Box>
-				<MarkdownText preserveHtml={true} content={t('Cloud_click_here', { cloudConsoleUrl })} />
+				<MarkdownText preserveHtml={true} content={t('Cloud_click_here', { CLOUD_CONSOLE_URL })} />
 			</Modal.Content>
 			<Modal.Footer>
 				<Modal.FooterControllers>
diff --git a/apps/meteor/client/views/admin/cloud/RegisterWorkspace.tsx b/apps/meteor/client/views/admin/cloud/RegisterWorkspace.tsx
index 9e05ef111be5..9e4e479f16f9 100644
--- a/apps/meteor/client/views/admin/cloud/RegisterWorkspace.tsx
+++ b/apps/meteor/client/views/admin/cloud/RegisterWorkspace.tsx
@@ -2,7 +2,6 @@ import { Box, Tag } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
-import type { ReactNode } from 'react';
 import React from 'react';
 
 import Page from '../../../components/Page';
@@ -12,7 +11,7 @@ import RegisterWorkspaceMenu from './components/RegisterWorkspaceMenu';
 import ConnectWorkspaceModal from './modals/ConnectWorkspaceModal';
 import RegisterWorkspaceModal from './modals/RegisterWorkspaceModal';
 
-const RegisterWorkspace = (): ReactNode => {
+const RegisterWorkspace = () => {
 	const t = useTranslation();
 	const setModal = useSetModal();
 
diff --git a/apps/meteor/client/views/admin/cloud/components/RegisterWorkspaceMenu.tsx b/apps/meteor/client/views/admin/cloud/components/RegisterWorkspaceMenu.tsx
index b24cd12bbab2..a3de1c5384c8 100644
--- a/apps/meteor/client/views/admin/cloud/components/RegisterWorkspaceMenu.tsx
+++ b/apps/meteor/client/views/admin/cloud/components/RegisterWorkspaceMenu.tsx
@@ -3,7 +3,7 @@ import { useSetModal, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 import { useExternalLink } from '../../../../hooks/useExternalLink';
-import { cloudConsoleUrl } from '../constants';
+import { CLOUD_CONSOLE_URL } from '../../../../lib/constants';
 import RegisteredWorkspaceModal from '../modals/RegisteredWorkspaceModal';
 
 type RegisterWorkspaceMenuProps = {
@@ -35,7 +35,7 @@ const RegisterWorkspaceMenu = ({
 		<ButtonGroup>
 			{isWorkspaceRegistered && isConnectedToCloud && (
 				<>
-					<Button role='link' onClick={() => handleLinkClick(cloudConsoleUrl)}>
+					<Button role='link' onClick={() => handleLinkClick(CLOUD_CONSOLE_URL)}>
 						<Icon name='new-window' size='x20' pie={4} />
 						{t('Cloud')}
 					</Button>
diff --git a/apps/meteor/client/views/admin/cloud/constants.js b/apps/meteor/client/views/admin/cloud/constants.js
deleted file mode 100644
index d9cf214b19db..000000000000
--- a/apps/meteor/client/views/admin/cloud/constants.js
+++ /dev/null
@@ -1 +0,0 @@
-export const cloudConsoleUrl = 'https://cloud.rocket.chat';

From 5ff71b3f82199eef39e8dd5ed12bcbc453186b6f Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Sat, 8 Jul 2023 00:06:49 -0300
Subject: [PATCH 3/5] regression: Current Chats tags filter not showing
 department tags (#29758)

---
 .../omnichannel/currentChats/FilterByText.tsx   |  2 +-
 .../chats/contextualBar/RoomEdit/RoomEdit.tsx   |  2 +-
 apps/meteor/ee/client/hooks/useTagsList.ts      | 17 ++++++++++-------
 .../tags/AutoCompleteTagsMultiple.js            |  7 +++++--
 .../client/omnichannel/tags/CurrentChatTags.tsx |  6 ++++--
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx b/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx
index 6587563caa5f..3659f77b394f 100644
--- a/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx
+++ b/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx
@@ -150,7 +150,7 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, customFields, setCu
 				<Box display='flex' flexDirection='row' marginBlockStart='x8' {...props}>
 					<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
 						<Label mb='x4'>{t('Tags')}</Label>
-						<EETagsComponent value={tags} handler={handleTags} />
+						<EETagsComponent value={tags} handler={handleTags} viewAll />
 					</Box>
 				</Box>
 			)}
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/RoomEdit/RoomEdit.tsx b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/RoomEdit/RoomEdit.tsx
index 435e29743469..433af2135068 100644
--- a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/RoomEdit/RoomEdit.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/RoomEdit/RoomEdit.tsx
@@ -134,7 +134,7 @@ function RoomEdit({ room, visitor, reload, reloadInfo, onClose }: RoomEditProps)
 				</Field>
 
 				<Field>
-					<Tags tags={tagsField.value} handler={tagsField.onChange} />
+					<Tags tags={tagsField.value} handler={tagsField.onChange} department={room.departmentId} />
 				</Field>
 
 				{SlaPoliciesSelect && !!slaPolicies?.length && (
diff --git a/apps/meteor/ee/client/hooks/useTagsList.ts b/apps/meteor/ee/client/hooks/useTagsList.ts
index 229e495342e1..78dfc4de0093 100644
--- a/apps/meteor/ee/client/hooks/useTagsList.ts
+++ b/apps/meteor/ee/client/hooks/useTagsList.ts
@@ -9,16 +9,18 @@ import { RecordList } from '../../../client/lib/lists/RecordList';
 type TagsListOptions = {
 	filter: string;
 	department?: string;
+	viewAll?: boolean;
 };
 
-export const useTagsList = (
-	options: TagsListOptions,
-): {
+type UseTagsListResult = {
 	itemsList: RecordList<ILivechatTagRecord>;
 	initialItemCount: number;
 	reload: () => void;
 	loadMoreItems: (start: number, end: number) => void;
-} => {
+};
+
+export const useTagsList = (options: TagsListOptions): UseTagsListResult => {
+	const { viewAll, department, filter } = options;
 	const [itemsList, setItemsList] = useState(() => new RecordList<ILivechatTagRecord>());
 	const reload = useCallback(() => setItemsList(new RecordList<ILivechatTagRecord>()), []);
 
@@ -31,10 +33,11 @@ export const useTagsList = (
 	const fetchData = useCallback(
 		async (start, end) => {
 			const { tags, total } = await getTags({
-				text: options.filter,
+				text: filter,
 				offset: start,
 				count: end + start,
-				...(options.department && { department: options.department }),
+				...(viewAll && { viewAll: 'true' }),
+				...(department && { department }),
 			});
 
 			return {
@@ -47,7 +50,7 @@ export const useTagsList = (
 				itemCount: total,
 			};
 		},
-		[getTags, options.filter, options.department],
+		[getTags, filter, viewAll, department],
 	);
 
 	const { loadMoreItems, initialItemCount } = useScrollableRecordList(itemsList, fetchData, 25);
diff --git a/apps/meteor/ee/client/omnichannel/tags/AutoCompleteTagsMultiple.js b/apps/meteor/ee/client/omnichannel/tags/AutoCompleteTagsMultiple.js
index 5f7fe4a4ffe6..086d796152fc 100644
--- a/apps/meteor/ee/client/omnichannel/tags/AutoCompleteTagsMultiple.js
+++ b/apps/meteor/ee/client/omnichannel/tags/AutoCompleteTagsMultiple.js
@@ -8,7 +8,7 @@ import { AsyncStatePhase } from '../../../../client/hooks/useAsyncState';
 import { useTagsList } from '../../hooks/useTagsList';
 
 const AutoCompleteTagMultiple = (props) => {
-	const { value, onlyMyTags = false, onChange = () => {}, department } = props;
+	const { value, onlyMyTags = false, onChange = () => {}, department, viewAll = false } = props;
 
 	const t = useTranslation();
 	const [tagsFilter, setTagsFilter] = useState('');
@@ -16,7 +16,10 @@ const AutoCompleteTagMultiple = (props) => {
 	const debouncedTagsFilter = useDebouncedValue(tagsFilter, 500);
 
 	const { itemsList: tagsList, loadMoreItems: loadMoreTags } = useTagsList(
-		useMemo(() => ({ filter: debouncedTagsFilter, onlyMyTags, department }), [debouncedTagsFilter, onlyMyTags, department]),
+		useMemo(
+			() => ({ filter: debouncedTagsFilter, onlyMyTags, department, viewAll }),
+			[debouncedTagsFilter, onlyMyTags, department, viewAll],
+		),
 	);
 
 	const { phase: tagsPhase, items: tagsItems, itemCount: tagsTotal } = useRecordList(tagsList);
diff --git a/apps/meteor/ee/client/omnichannel/tags/CurrentChatTags.tsx b/apps/meteor/ee/client/omnichannel/tags/CurrentChatTags.tsx
index 7253764c52b6..61c1d11af947 100644
--- a/apps/meteor/ee/client/omnichannel/tags/CurrentChatTags.tsx
+++ b/apps/meteor/ee/client/omnichannel/tags/CurrentChatTags.tsx
@@ -3,8 +3,10 @@ import React from 'react';
 
 import AutoCompleteTagsMultiple from './AutoCompleteTagsMultiple';
 
-const CurrentChatTags: FC<{ value: Array<string>; handler: () => void; department?: string }> = ({ value, handler, department }) => (
-	<AutoCompleteTagsMultiple onChange={handler} value={value} department={department} />
+type CurrentChatTagsProps = { value: Array<string>; handler: () => void; department?: string; viewAll?: boolean };
+
+const CurrentChatTags: FC<CurrentChatTagsProps> = ({ value, handler, department, viewAll }) => (
+	<AutoCompleteTagsMultiple onChange={handler} value={value} department={department} viewAll={viewAll} />
 );
 
 export default CurrentChatTags;

From 9f18c611846fbdf7e6b8d5ab72d0b2a38c8612bd Mon Sep 17 00:00:00 2001
From: Ujjwal Solanki <75205571+ujjwalsolankii@users.noreply.github.com>
Date: Mon, 10 Jul 2023 02:11:13 +0530
Subject: [PATCH 4/5]  docs: Updated README file (#29770)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f943581a9b1f..a63baba65dd0 100644
--- a/README.md
+++ b/README.md
@@ -75,7 +75,7 @@ yarn turbo run ms
 
 After initialized, you can access the server at http://localhost:4000
 
-> ⚠️ Check more detailed informations in the [Rocket.Chat Environment Setup](https://developer.rocket.chat/rocket.chat/rocket-chat-environment-setup) guide
+> ⚠️ Check more detailed information in the [Rocket.Chat Environment Setup](https://developer.rocket.chat/rocket.chat/rocket-chat-environment-setup) guide
 
 # 💻 Installation
 

From 3df4d266e4cb206bc61010a76d0acd312889ce21 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Sun, 9 Jul 2023 22:27:53 -0300
Subject: [PATCH 5/5] chore: bump fuselage packages

---
 yarn.lock | 155 ++++++++++++++++++++++++------------------------------
 1 file changed, 69 insertions(+), 86 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 49aef6230cd1..4f3bd5af46f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9601,7 +9601,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/css-in-js@npm:^0.31.23, @rocket.chat/css-in-js@npm:~0.31.23-dev.103, @rocket.chat/css-in-js@npm:~0.31.23-dev.157":
+"@rocket.chat/css-in-js@npm:^0.31.23, @rocket.chat/css-in-js@npm:~0.31.23-dev.160":
   version: 0.31.23
   resolution: "@rocket.chat/css-in-js@npm:0.31.23"
   dependencies:
@@ -9615,19 +9615,19 @@ __metadata:
   linkType: hard
 
 "@rocket.chat/css-in-js@npm:next":
-  version: 0.31.23-dev.103
-  resolution: "@rocket.chat/css-in-js@npm:0.31.23-dev.103"
+  version: 0.31.23-dev.160
+  resolution: "@rocket.chat/css-in-js@npm:0.31.23-dev.160"
   dependencies:
     "@emotion/hash": ^0.9.0
-    "@rocket.chat/css-supports": ~0.31.23-dev.103
-    "@rocket.chat/memo": ~0.31.23-dev.103
-    "@rocket.chat/stylis-logical-props-middleware": ~0.31.23-dev.103
+    "@rocket.chat/css-supports": ~0.31.23-dev.160
+    "@rocket.chat/memo": ~0.31.23-dev.160
+    "@rocket.chat/stylis-logical-props-middleware": ~0.31.23-dev.160
     stylis: ~4.1.3
-  checksum: 7fea932e9b60d186722f289989aead15fb6d8af2b11f75a44fefa3158c19d953ad789b161599b33bc5ede7c79c4d6de9b3453ca0dd1fd3ec453fe77891df4e55
+  checksum: b7aad2a07fd37516e3b8d5ef8b5e61be24283c0c52731c0a0a5b09b4a254976eea741867acf5329446aa88d7f14a3344089cea637c777a8f741da59ef40392fd
   languageName: node
   linkType: hard
 
-"@rocket.chat/css-supports@npm:^0.31.23, @rocket.chat/css-supports@npm:~0.31.23-dev.103, @rocket.chat/css-supports@npm:~0.31.23-dev.157":
+"@rocket.chat/css-supports@npm:^0.31.23, @rocket.chat/css-supports@npm:~0.31.23-dev.160":
   version: 0.31.23
   resolution: "@rocket.chat/css-supports@npm:0.31.23"
   dependencies:
@@ -9703,9 +9703,9 @@ __metadata:
   linkType: soft
 
 "@rocket.chat/emitter@npm:next":
-  version: 0.31.23-dev.103
-  resolution: "@rocket.chat/emitter@npm:0.31.23-dev.103"
-  checksum: 5163602cf6793678e1e8b1165fbf4c77a2d24f2536af87d3ceb8464da99ce9bff2ccede931bfd6fde9857890678b82f530b29b088ed41ddac7f4a60363e46f1b
+  version: 0.31.23-dev.160
+  resolution: "@rocket.chat/emitter@npm:0.31.23-dev.160"
+  checksum: ddd5f86dee05445be8001498842021c974d755ba560e48c5c9d661cf59948f73fa823307b2829842d334d5b86924c9468a6ec0f704ad0e17895e64be5aa5cd3d
   languageName: node
   linkType: hard
 
@@ -9796,33 +9796,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-hooks@npm:next":
-  version: 0.32.0-dev.274
-  resolution: "@rocket.chat/fuselage-hooks@npm:0.32.0-dev.274"
+"@rocket.chat/fuselage-hooks@npm:next, @rocket.chat/fuselage-hooks@npm:~0.32.0-dev.299":
+  version: 0.32.0-dev.299
+  resolution: "@rocket.chat/fuselage-hooks@npm:0.32.0-dev.299"
   dependencies:
     use-sync-external-store: ~1.2.0
   peerDependencies:
     "@rocket.chat/fuselage-tokens": "*"
     react: ^17.0.2
-  checksum: 32e0872deb05e8b853aed59cab2cc4b3d3a707f0997009170a12b19d252ca09c203f8139b227c90678c0c06e14228c116ab428b9fba81228d1dab981844d8d54
-  languageName: node
-  linkType: hard
-
-"@rocket.chat/fuselage-hooks@npm:~0.32.0-dev.242":
-  version: 0.32.0-dev.242
-  resolution: "@rocket.chat/fuselage-hooks@npm:0.32.0-dev.242"
-  dependencies:
-    use-sync-external-store: ~1.2.0
-  peerDependencies:
-    "@rocket.chat/fuselage-tokens": "*"
-    react: ^17.0.2
-  checksum: f9dcfe53370b55c417668c32b08ddc81dcd6b8fbbc44d7968109906b3053985b34ee7d1ecdbea895b1d2eaaae7960fe2559cf0a6136799ea4725b986cb69895e
+  checksum: e83001544fe7118fc8dff2fa9a82dbeb2a4153f0d7c21b11dd332805326fe0433682d983914f42622807120bd1390acaf49957625216f357623ddf9e84a69170
   languageName: node
   linkType: hard
 
 "@rocket.chat/fuselage-polyfills@npm:next":
-  version: 0.31.23-dev.103
-  resolution: "@rocket.chat/fuselage-polyfills@npm:0.31.23-dev.103"
+  version: 0.31.23-dev.160
+  resolution: "@rocket.chat/fuselage-polyfills@npm:0.31.23-dev.160"
   dependencies:
     "@juggle/resize-observer": ^3.4.0
     clipboard-polyfill: ^3.0.3
@@ -9830,13 +9818,13 @@ __metadata:
     focus-visible: ^5.2.0
     focus-within-polyfill: ^5.2.1
     new-event-polyfill: ^1.0.1
-  checksum: b4dbda8530718a9d585fbc38ed5d6efcb29d8df64982a7434117e11fc75df39c94faa666fd269cb1139d2431349e23fbb21dc5d7c100abb31f18eee27079d56c
+  checksum: 2fcd4c1720279898a2686753ac3978e23a8928ebcd93f05aca081324c8a602ddead41deacfb3a44c4ec5d426401c6960e3871723707a741e750a3c9040e5ceaf
   languageName: node
   linkType: hard
 
 "@rocket.chat/fuselage-toastbar@npm:next":
-  version: 0.32.0-dev.303
-  resolution: "@rocket.chat/fuselage-toastbar@npm:0.32.0-dev.303"
+  version: 0.32.0-dev.360
+  resolution: "@rocket.chat/fuselage-toastbar@npm:0.32.0-dev.360"
   peerDependencies:
     "@rocket.chat/fuselage": "*"
     "@rocket.chat/fuselage-hooks": "*"
@@ -9844,21 +9832,14 @@ __metadata:
     "@rocket.chat/styled": "*"
     react: ^17.0.2
     react-dom: ^17.0.2
-  checksum: 479f5c50d1f6ce7a7e4cc4bbd0909f3bc1c3e83e3a9fdeb806d2b0540a17c46e30f8e72b816c954257411bd404f693d83bdf9b2499ce13cee2426d03c1dbec76
-  languageName: node
-  linkType: hard
-
-"@rocket.chat/fuselage-tokens@npm:next":
-  version: 0.32.0-dev.280
-  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.280"
-  checksum: d8c7537512a7950ff6f0f3e23b3d6a2b82c0caea42d5b6e5599257fe2319cbd6f53a229c61413b025b20f576521aca67d9cba378f15e19edddae11a55133672a
+  checksum: b2372a9231cf3f7c4b7e37b6441f936c5c137cfb0d0f0c424ba42bcc10c07898b7d7e5b5feb508ce2ecf0806baedbaf101c61352391db563ceaef6f85d852da5
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.333":
-  version: 0.32.0-dev.333
-  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.333"
-  checksum: dd19009e75e6154361be566ecea5f328902fdf25a10fdcc9ecd18076e424dd5f7d1a4b4c56b7679fe28e4a4ff77e32107d2f83a2c9c98f968ef6ff18f5de95db
+"@rocket.chat/fuselage-tokens@npm:next, @rocket.chat/fuselage-tokens@npm:~0.32.0-dev.336":
+  version: 0.32.0-dev.336
+  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.336"
+  checksum: 2cf52211b3a3ee9a6111db46bc05918244190be7a6fef482011dccc0cc9a0777362dd91010e9df45c67b2c3bcaf00e35a7fbdddfdb5e7f683a19baa1fa8211d0
   languageName: node
   linkType: hard
 
@@ -9918,14 +9899,14 @@ __metadata:
   linkType: soft
 
 "@rocket.chat/fuselage@npm:next":
-  version: 0.32.0-dev.383
-  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.383"
-  dependencies:
-    "@rocket.chat/css-in-js": ~0.31.23-dev.157
-    "@rocket.chat/css-supports": ~0.31.23-dev.157
-    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.333
-    "@rocket.chat/memo": ~0.31.23-dev.157
-    "@rocket.chat/styled": ~0.31.23-dev.157
+  version: 0.32.0-dev.386
+  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.386"
+  dependencies:
+    "@rocket.chat/css-in-js": ~0.31.23-dev.160
+    "@rocket.chat/css-supports": ~0.31.23-dev.160
+    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.336
+    "@rocket.chat/memo": ~0.31.23-dev.160
+    "@rocket.chat/styled": ~0.31.23-dev.160
     invariant: ^2.2.4
     react-aria: ~3.23.1
     react-keyed-flatten-children: ^1.3.0
@@ -9937,7 +9918,7 @@ __metadata:
     react: ^17.0.2
     react-dom: ^17.0.2
     react-virtuoso: 1.2.4
-  checksum: 110c59c012dd019a6edddba2a1df6c4ceff6f5f84d5b4db206656ac06349bd5889ddd8ce2ee475bd91e947e457d28382fe938233891b9c81047ac3452ceedf93
+  checksum: 3753fe5939b7fdead82076b824959bc7ed537349f810c104432d2ab1f7aa166a374642664e82e2cdc9efa3d1b4e1807c5ed12777cf7e875de24fca4f0ed58149
   languageName: node
   linkType: hard
 
@@ -10025,9 +10006,9 @@ __metadata:
   linkType: soft
 
 "@rocket.chat/icons@npm:next":
-  version: 0.32.0-dev.362
-  resolution: "@rocket.chat/icons@npm:0.32.0-dev.362"
-  checksum: 1c2096913e154d0db68b8ccc933294486ff06e250983809ce165f1497df05deec8b5165b47dbefdd013013b4cdf4a3a20f2ac191155b629e5ec4a7bcab5d8870
+  version: 0.32.0-dev.368
+  resolution: "@rocket.chat/icons@npm:0.32.0-dev.368"
+  checksum: 3d60bc3b234eb74e5f216df880dad588558b643ba47db3001e1196c796947c68739ded0dcbe1ee13336ab23540cb11789e5f2528fcd39e64f16b83e851fcbd7e
   languageName: node
   linkType: hard
 
@@ -10045,14 +10026,14 @@ __metadata:
   linkType: soft
 
 "@rocket.chat/layout@npm:next":
-  version: 0.32.0-dev.213
-  resolution: "@rocket.chat/layout@npm:0.32.0-dev.213"
+  version: 0.32.0-dev.269
+  resolution: "@rocket.chat/layout@npm:0.32.0-dev.269"
   peerDependencies:
     "@rocket.chat/fuselage": "*"
     react: 17.0.2
     react-dom: 17.0.2
     react-i18next: ~11.15.4
-  checksum: 6a7e069f669fe7201e12ffb287064fe724e69294010b6cc426d4c5936f7e2c93cfe9ae92ee480e0ce7864cd5af37b5f9163dbdcefb850571adc3242ed897a5f1
+  checksum: a5ffa877ef19b63154c1c65fc4fece7dd35a08ede4cd1cb88dca1820a8732f15a8b0838c470af08dcb7efc80d7fc17f0e44b4f8be2855707d7c5c7b2b1d441d5
   languageName: node
   linkType: hard
 
@@ -10153,19 +10134,19 @@ __metadata:
   linkType: soft
 
 "@rocket.chat/logo@npm:next":
-  version: 0.32.0-dev.279
-  resolution: "@rocket.chat/logo@npm:0.32.0-dev.279"
+  version: 0.32.0-dev.336
+  resolution: "@rocket.chat/logo@npm:0.32.0-dev.336"
   dependencies:
-    "@rocket.chat/fuselage-hooks": ~0.32.0-dev.242
-    "@rocket.chat/styled": ~0.31.23-dev.103
+    "@rocket.chat/fuselage-hooks": ~0.32.0-dev.299
+    "@rocket.chat/styled": ~0.31.23-dev.160
   peerDependencies:
     react: 17.0.2
     react-dom: 17.0.2
-  checksum: a79a80a89111633f2c325ace46dc951fe67df94eb192a4ed691e274e19e951f7b22a9a301108f3db4daaac7667f8b9f5f2535a123a0ab72e94796358678acaeb
+  checksum: ac7b8b84ea675a0e6edeb8b108dd2bfbf9877b08144b2d2426f0bf371c8269e446763252c6e3533bcf7a3bc4118805e45067ca768cc01341db267682a810187c
   languageName: node
   linkType: hard
 
-"@rocket.chat/memo@npm:^0.31.23, @rocket.chat/memo@npm:~0.31.23-dev.103, @rocket.chat/memo@npm:~0.31.23-dev.157":
+"@rocket.chat/memo@npm:^0.31.23, @rocket.chat/memo@npm:~0.31.23-dev.160":
   version: 0.31.23
   resolution: "@rocket.chat/memo@npm:0.31.23"
   checksum: 070debb940749a2e4463cf767dd65c6967cea664a5bd67c22a812d611f6c3c46d6fe4bb0bf329e43dcd927493413add37c45ae3b05ec08f0b24e9d7385caebdd
@@ -10173,18 +10154,18 @@ __metadata:
   linkType: hard
 
 "@rocket.chat/memo@npm:next":
-  version: 0.31.23-dev.103
-  resolution: "@rocket.chat/memo@npm:0.31.23-dev.103"
-  checksum: 44b91bb7e02ffbeb2b094e5f283a1ddc3ca205f6ff01f5d044911b8cfc690b7e1472ee9f296de46bc84dcf2eb64d4c314813aa74d2076ec170ec1321f43145a6
+  version: 0.31.23-dev.160
+  resolution: "@rocket.chat/memo@npm:0.31.23-dev.160"
+  checksum: 9179e92af5cb662dcb9d8db3d9b0309fb415d5e82ba663bd689105a2a7ada14ca6c7630d3b509e982b2096949e1f4f9fb51afc821e0481dc5563f6c3d5a8257e
   languageName: node
   linkType: hard
 
 "@rocket.chat/message-parser@npm:next":
-  version: 0.32.0-dev.296
-  resolution: "@rocket.chat/message-parser@npm:0.32.0-dev.296"
+  version: 0.32.0-dev.334
+  resolution: "@rocket.chat/message-parser@npm:0.32.0-dev.334"
   dependencies:
     tldts: ~5.7.112
-  checksum: 2a40090b0b5b94e531da3bd1433c6f60b98f19b85eb9ca81db8706fcf360d8245c97fde2257a6c39e9be7fa4a630eede5abf679847ef3c923594c7156f8eb334
+  checksum: bdbb288f963e72152554ee4af3ae2e57f7c3955c083065b202246286a91f3439fe0eb9a75a5c3b2bea889ac0e98750deaf4b3e95e170ba969ab2a42cf21d9f61
   languageName: node
   linkType: hard
 
@@ -10663,8 +10644,8 @@ __metadata:
   linkType: soft
 
 "@rocket.chat/onboarding-ui@npm:next":
-  version: 0.32.0-dev.329
-  resolution: "@rocket.chat/onboarding-ui@npm:0.32.0-dev.329"
+  version: 0.32.0-dev.386
+  resolution: "@rocket.chat/onboarding-ui@npm:0.32.0-dev.386"
   dependencies:
     i18next: ~21.6.16
     react-hook-form: ~7.27.1
@@ -10679,7 +10660,7 @@ __metadata:
     react: 17.0.2
     react-dom: 17.0.2
     react-i18next: ~11.15.4
-  checksum: 3118c3f3bb91db6e30748a1bf031221b2459b611c260446adf5bafcc9e38fa600a8a3366567a88183b2e93286b538233cb585f0d414b53f02e2eb48b8b2ba3ad
+  checksum: a919f076b7b27f79628fc3f1a63beb6abe6352a19be4d187742f656255670c757326f1732094628d381727b026e4e8f94ba4b900878e028bed927233825f0aba
   languageName: node
   linkType: hard
 
@@ -10956,22 +10937,22 @@ __metadata:
   linkType: soft
 
 "@rocket.chat/string-helpers@npm:next":
-  version: 0.31.23-dev.103
-  resolution: "@rocket.chat/string-helpers@npm:0.31.23-dev.103"
-  checksum: b505564152613d5871dae226b67458d69fbacf2ddeb3f6d10cf81124ccccfd75ad60133bc772db6bf20f4b17f7cfe09fc0ea9c846c2f519b031ce22d0da6688e
+  version: 0.31.23-dev.160
+  resolution: "@rocket.chat/string-helpers@npm:0.31.23-dev.160"
+  checksum: abe26244891bb29243cf8a7db66cdcb44e80a0c6b6e1d38e56efaa1e6bdd5a61f818398473dec1cfdd1f1941dca8b03e641b7ec3460715800a79ae37bd2545f6
   languageName: node
   linkType: hard
 
 "@rocket.chat/styled@npm:next":
-  version: 0.31.23-dev.103
-  resolution: "@rocket.chat/styled@npm:0.31.23-dev.103"
+  version: 0.31.23-dev.160
+  resolution: "@rocket.chat/styled@npm:0.31.23-dev.160"
   dependencies:
-    "@rocket.chat/css-in-js": ~0.31.23-dev.103
-  checksum: aadeb2ffe37e01d694012ec49d301a9a8960b82377fc1daa2c332b657414c4c52839010d3f8ce5114312065b8da0cc41b70bdc93fa1916169c53d333d56428bc
+    "@rocket.chat/css-in-js": ~0.31.23-dev.160
+  checksum: 5e64b9ff9e3cfcd0a885e92071d69dfd6bd46c6d0f23c5490b8bd93cf8c0254e41d83e708e9d523cadb89e84ce789d0d4757d810f38dd7a718375c875e51670d
   languageName: node
   linkType: hard
 
-"@rocket.chat/styled@npm:~0.31.23-dev.103, @rocket.chat/styled@npm:~0.31.23-dev.157":
+"@rocket.chat/styled@npm:~0.31.23-dev.160":
   version: 0.31.23
   resolution: "@rocket.chat/styled@npm:0.31.23"
   dependencies:
@@ -10980,7 +10961,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/stylis-logical-props-middleware@npm:^0.31.23, @rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.103":
+"@rocket.chat/stylis-logical-props-middleware@npm:^0.31.23, @rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.160":
   version: 0.31.23
   resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23"
   dependencies:
@@ -11114,9 +11095,11 @@ __metadata:
   linkType: soft
 
 "@rocket.chat/ui-kit@npm:next":
-  version: 0.32.0-dev.294
-  resolution: "@rocket.chat/ui-kit@npm:0.32.0-dev.294"
-  checksum: cf58890f3fbcfdff3df9436a33c4aa333de34369f89902107dee74c50c11b8af793c9c80a8df5046ffcabf0fd90111f31a6fc2030876e838e43ec4c6a5703fc4
+  version: 0.32.0-dev.321
+  resolution: "@rocket.chat/ui-kit@npm:0.32.0-dev.321"
+  peerDependencies:
+    "@rocket.chat/icons": "*"
+  checksum: 9e237ac9c3553455d2167ef945070fcdfa90c3403599cc0e6a0c0de6d5663851ce29f4cfc9e0b6809a711620431a2a9f69398041ddffcbc41fe99a90aa1ae483
   languageName: node
   linkType: hard