diff --git a/apps/meteor/app/livechat/server/methods/sendFileLivechatMessage.ts b/apps/meteor/app/livechat/server/methods/sendFileLivechatMessage.ts
index 7d64763cd634..15577abd76e3 100644
--- a/apps/meteor/app/livechat/server/methods/sendFileLivechatMessage.ts
+++ b/apps/meteor/app/livechat/server/methods/sendFileLivechatMessage.ts
@@ -1,5 +1,5 @@
 import type {
-	MessageAttachment,
+	FileAttachmentProps,
 	ImageAttachmentProps,
 	AudioAttachmentProps,
 	VideoAttachmentProps,
@@ -56,7 +56,7 @@ export const sendFileLivechatMessage = async ({ roomId, visitorToken, file, msgD
 
 	const fileUrl = file.name && FileUpload.getPath(`${file._id}/${encodeURI(file.name)}`);
 
-	const attachment: MessageAttachment = {
+	const attachment: Partial<FileAttachmentProps> = {
 		title: file.name,
 		type: 'file',
 		description: file.description,
diff --git a/apps/meteor/client/components/GenericTable/GenericTable.tsx b/apps/meteor/client/components/GenericTable/GenericTable.tsx
index 00e7ed4f7cba..c44deeaa9016 100644
--- a/apps/meteor/client/components/GenericTable/GenericTable.tsx
+++ b/apps/meteor/client/components/GenericTable/GenericTable.tsx
@@ -1,20 +1,21 @@
 import { Box, Table } from '@rocket.chat/fuselage';
-import type { ReactNode, TableHTMLAttributes } from 'react';
-import React, { forwardRef } from 'react';
+import React, { type ForwardedRef, type ReactNode, type TableHTMLAttributes, forwardRef } from 'react';
 
 import ScrollableContentWrapper from '../ScrollableContentWrapper';
 
 type GenericTableProps = {
 	fixed?: boolean;
 	children: ReactNode;
-} & TableHTMLAttributes<HTMLTableElement>;
+} & Omit<TableHTMLAttributes<HTMLTableElement>, 'is'>;
 
-export const GenericTable = forwardRef<HTMLElement, GenericTableProps>(function GenericTable({ fixed = true, children, ...props }, ref) {
+export const GenericTable = forwardRef(function GenericTable(
+	{ fixed = true, children, ...props }: GenericTableProps,
+	ref: ForwardedRef<HTMLElement>,
+) {
 	return (
 		<Box mi='neg-x24' pi={24} flexShrink={1} flexGrow={1} ref={ref} overflow='hidden'>
 			<ScrollableContentWrapper overflowX>
-				{/* TODO: Fix fuselage */}
-				<Table fixed={fixed} sticky {...(props as any)}>
+				<Table fixed={fixed} sticky {...props}>
 					{children}
 				</Table>
 			</ScrollableContentWrapper>
diff --git a/apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx b/apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx
index 5d0b8e400836..0fd882f2c5cc 100644
--- a/apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx
+++ b/apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx
@@ -1,4 +1,4 @@
-import type { ILivechatDepartment } from '@rocket.chat/core-typings';
+import type { ILivechatDepartment, Serialized } from '@rocket.chat/core-typings';
 import {
 	Field,
 	FieldGroup,
@@ -29,7 +29,7 @@ const CloseChatModal = ({
 	onCancel,
 	onConfirm,
 }: {
-	department?: ILivechatDepartment | null;
+	department?: Serialized<ILivechatDepartment | null>;
 	visitorEmail?: string;
 	onCancel: () => void;
 	onConfirm: (
diff --git a/apps/meteor/client/components/Omnichannel/modals/CloseChatModalData.tsx b/apps/meteor/client/components/Omnichannel/modals/CloseChatModalData.tsx
index eadaa353c806..0edc7bc7af91 100644
--- a/apps/meteor/client/components/Omnichannel/modals/CloseChatModalData.tsx
+++ b/apps/meteor/client/components/Omnichannel/modals/CloseChatModalData.tsx
@@ -1,9 +1,8 @@
-import type { ILivechatDepartment, ILivechatDepartmentAgents } from '@rocket.chat/core-typings';
-import type { ReactElement } from 'react';
+import type { ILivechatDepartment } from '@rocket.chat/core-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import { AsyncStatePhase } from '../../../hooks/useAsyncState';
-import { useEndpointData } from '../../../hooks/useEndpointData';
 import { FormSkeleton } from '../Skeleton';
 import CloseChatModal from './CloseChatModal';
 
@@ -21,32 +20,14 @@ const CloseChatModalData = ({
 		tags?: string[],
 		preferences?: { omnichannelTranscriptPDF: boolean; omnichannelTranscriptEmail: boolean },
 	) => Promise<void>;
-}): ReactElement => {
-	const { value: data, phase: state } = useEndpointData('/v1/livechat/department/:_id', { keys: { _id: departmentId } });
+}) => {
+	const getDepartment = useEndpoint('GET', '/v1/livechat/department/:_id', { _id: departmentId });
+	const { data, isLoading } = useQuery(['/v1/livechat/department/:_id', departmentId], () => getDepartment({}));
 
-	if ([state].includes(AsyncStatePhase.LOADING)) {
+	if (isLoading) {
 		return <FormSkeleton />;
 	}
 
-	// TODO: chapter day: fix issue with rest typing
-	// TODO: This is necessary because of a weird problem
-	// There is an endpoint livechat/department/${departmentId}/agents
-	// that is causing the problem. type A | type B | undefined
-
-	return (
-		<CloseChatModal
-			onCancel={onCancel}
-			onConfirm={onConfirm}
-			visitorEmail={visitorEmail}
-			department={
-				(
-					data as {
-						department: ILivechatDepartment | null;
-						agents?: ILivechatDepartmentAgents[];
-					}
-				).department
-			}
-		/>
-	);
+	return <CloseChatModal onCancel={onCancel} onConfirm={onConfirm} visitorEmail={visitorEmail} department={data?.department} />;
 };
 export default CloseChatModalData;
diff --git a/apps/meteor/client/components/TextCopy.tsx b/apps/meteor/client/components/TextCopy.tsx
index 049ef6a9447a..467e954ddd65 100644
--- a/apps/meteor/client/components/TextCopy.tsx
+++ b/apps/meteor/client/components/TextCopy.tsx
@@ -1,7 +1,9 @@
 import { Box, Button, Scrollable } from '@rocket.chat/fuselage';
-import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
-import React, { useCallback } from 'react';
+import React from 'react';
+
+import useClipboardWithToast from '../hooks/useClipboardWithToast';
 
 const defaultWrapperRenderer = (text: string): ReactElement => (
 	<Box fontFamily='mono' alignSelf='center' fontScale='p2' style={{ wordBreak: 'break-all' }} mie={4} flexGrow={1} maxHeight='x108'>
@@ -14,19 +16,14 @@ type TextCopyProps = {
 	wrapper?: (text: string) => ReactElement;
 } & ComponentProps<typeof Box>;
 
-// TODO: useClipboard instead of navigator API.
 const TextCopy = ({ text, wrapper = defaultWrapperRenderer, ...props }: TextCopyProps): ReactElement => {
 	const t = useTranslation();
-	const dispatchToastMessage = useToastMessageDispatch();
 
-	const onClick = useCallback(() => {
-		try {
-			navigator.clipboard.writeText(text);
-			dispatchToastMessage({ type: 'success', message: t('Copied') });
-		} catch (e) {
-			dispatchToastMessage({ type: 'error', message: e });
-		}
-	}, [dispatchToastMessage, t, text]);
+	const { copy } = useClipboardWithToast(text);
+
+	const handleClick = () => {
+		copy();
+	};
 
 	return (
 		<Box
@@ -41,7 +38,7 @@ const TextCopy = ({ text, wrapper = defaultWrapperRenderer, ...props }: TextCopy
 			{...props}
 		>
 			<Scrollable vertical>{wrapper(text)}</Scrollable>
-			<Button icon='copy' secondary square small flexShrink={0} onClick={onClick} title={t('Copy')} />
+			<Button icon='copy' secondary square small flexShrink={0} onClick={handleClick} title={t('Copy')} />
 		</Box>
 	);
 };
diff --git a/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.styles.css b/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.styles.css
deleted file mode 100644
index f9a363aaa28a..000000000000
--- a/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.ConnectionStatusBar {
-	position: fixed;
-	z-index: 1000000;
-	top: 0;
-
-	width: 100%;
-	padding: 2px;
-
-	text-align: center;
-
-	color: #916302;
-	border-bottom-width: 1px;
-	background-color: #fffdf9;
-
-	&__retry-link {
-		color: var(--color-blue);
-	}
-}
diff --git a/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx b/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx
index 73b92606ba01..6046aecc0bae 100644
--- a/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx
+++ b/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx
@@ -1,81 +1,52 @@
-import { Icon } from '@rocket.chat/fuselage';
-import { useConnectionStatus, useTranslation } from '@rocket.chat/ui-contexts';
-import type { MouseEventHandler } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
+import { Box, Icon } from '@rocket.chat/fuselage';
+import { useConnectionStatus } from '@rocket.chat/ui-contexts';
+import type { MouseEvent } from 'react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 
-import './ConnectionStatusBar.styles.css';
-
-// TODO: frontend chapter day - fix unknown translation keys
-
-const getReconnectCountdown = (retryTime: number): number => {
-	const timeDiff = retryTime - Date.now();
-	return (timeDiff > 0 && Math.round(timeDiff / 1000)) || 0;
-};
-
-const useReconnectCountdown = (
-	retryTime: number | undefined,
-	status: 'connected' | 'connecting' | 'failed' | 'waiting' | 'offline',
-): number => {
-	const reconnectionTimerRef = useRef<ReturnType<typeof setInterval>>();
-	const [reconnectCountdown, setReconnectCountdown] = useState(() => (retryTime ? getReconnectCountdown(retryTime) : 0));
-
-	useEffect(() => {
-		if (status === 'waiting') {
-			if (reconnectionTimerRef.current) {
-				return;
-			}
-
-			reconnectionTimerRef.current = setInterval(() => {
-				retryTime && setReconnectCountdown(getReconnectCountdown(retryTime));
-			}, 500);
-			return;
-		}
-
-		reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current);
-		reconnectionTimerRef.current = undefined;
-	}, [retryTime, status]);
-
-	useEffect(
-		() => (): void => {
-			reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current);
-		},
-		[],
-	);
-
-	return reconnectCountdown;
-};
+import { useReconnectCountdown } from './useReconnectCountdown';
 
 function ConnectionStatusBar() {
 	const { connected, retryTime, status, reconnect } = useConnectionStatus();
 	const reconnectCountdown = useReconnectCountdown(retryTime, status);
-	const t = useTranslation();
+	const { t } = useTranslation();
 
 	if (connected) {
 		return null;
 	}
 
-	const handleRetryClick: MouseEventHandler<HTMLAnchorElement> = (event) => {
+	const handleRetryClick = (event: MouseEvent<HTMLAnchorElement>) => {
 		event.preventDefault();
 		reconnect?.();
 	};
 
 	return (
-		<div className='ConnectionStatusBar' role='alert'>
-			<strong>
-				<Icon name='warning' /> {t('meteor_status' as Parameters<typeof t>[0], { context: status })}
-			</strong>
-
-			{status === 'waiting' && <> {t('meteor_status_reconnect_in', { count: reconnectCountdown })}</>}
-
-			{['waiting', 'offline'].includes(status) && (
-				<>
-					{' '}
-					<a className='ConnectionStatusBar__retry-link' href='#' onClick={handleRetryClick}>
-						{t('meteor_status_try_now' as Parameters<typeof t>[0], { context: status })}
-					</a>
-				</>
-			)}
-		</div>
+		<Box
+			color='status-font-on-warning'
+			bg='status-background-warning'
+			position='fixed'
+			zIndex={1000000}
+			insetBlockStart={0}
+			p={2}
+			width='100%'
+			textAlign='center'
+			borderBlockEndWidth={1}
+			role='alert'
+		>
+			<Icon name='warning' />{' '}
+			<Box is='span' withRichContent>
+				<strong>{t('meteor_status', { context: status })}</strong>
+				{status === 'waiting' && <> {t('meteor_status_reconnect_in', { count: reconnectCountdown })}</>}
+				{['waiting', 'offline'].includes(status) && (
+					<>
+						{' '}
+						<a href='#' onClick={handleRetryClick} role='button'>
+							{t('meteor_status_try_now', { context: status })}
+						</a>
+					</>
+				)}
+			</Box>
+		</Box>
 	);
 }
 
diff --git a/apps/meteor/client/components/connectionStatus/useReconnectCountdown.ts b/apps/meteor/client/components/connectionStatus/useReconnectCountdown.ts
new file mode 100644
index 000000000000..7a409e752ce4
--- /dev/null
+++ b/apps/meteor/client/components/connectionStatus/useReconnectCountdown.ts
@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState } from 'react';
+
+const getReconnectCountdown = (retryTime: number): number => {
+	const timeDiff = retryTime - Date.now();
+	return (timeDiff > 0 && Math.round(timeDiff / 1000)) || 0;
+};
+
+export const useReconnectCountdown = (
+	retryTime: number | undefined,
+	status: 'connected' | 'connecting' | 'failed' | 'waiting' | 'offline',
+): number => {
+	const reconnectionTimerRef = useRef<ReturnType<typeof setInterval>>();
+	const [reconnectCountdown, setReconnectCountdown] = useState(() => (retryTime ? getReconnectCountdown(retryTime) : 0));
+
+	useEffect(() => {
+		if (status === 'waiting') {
+			if (reconnectionTimerRef.current) {
+				return;
+			}
+
+			reconnectionTimerRef.current = setInterval(() => {
+				retryTime && setReconnectCountdown(getReconnectCountdown(retryTime));
+			}, 500);
+			return;
+		}
+
+		reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current);
+		reconnectionTimerRef.current = undefined;
+	}, [retryTime, status]);
+
+	useEffect(
+		() => (): void => {
+			reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current);
+		},
+		[],
+	);
+
+	return reconnectCountdown;
+};
diff --git a/apps/meteor/client/components/message/content/attachments/AttachmentsItem.tsx b/apps/meteor/client/components/message/content/attachments/AttachmentsItem.tsx
index 589549d4bcc1..dd4f9bac9d28 100644
--- a/apps/meteor/client/components/message/content/attachments/AttachmentsItem.tsx
+++ b/apps/meteor/client/components/message/content/attachments/AttachmentsItem.tsx
@@ -4,7 +4,7 @@ import type { ReactElement } from 'react';
 import React, { memo } from 'react';
 
 import DefaultAttachment from './DefaultAttachment';
-import { FileAttachment } from './FileAttachment';
+import FileAttachment from './FileAttachment';
 import { QuoteAttachment } from './QuoteAttachment';
 
 type AttachmentsItemProps = {
diff --git a/apps/meteor/client/components/message/content/attachments/FileAttachment.tsx b/apps/meteor/client/components/message/content/attachments/FileAttachment.tsx
index 942ace9055d3..f80fa62890ec 100644
--- a/apps/meteor/client/components/message/content/attachments/FileAttachment.tsx
+++ b/apps/meteor/client/components/message/content/attachments/FileAttachment.tsx
@@ -1,23 +1,25 @@
-import type { FileAttachmentProps } from '@rocket.chat/core-typings';
-import { isFileAudioAttachment, isFileImageAttachment, isFileVideoAttachment } from '@rocket.chat/core-typings';
-import type { FC } from 'react';
+import { type FileAttachmentProps, isFileAudioAttachment, isFileImageAttachment, isFileVideoAttachment } from '@rocket.chat/core-typings';
 import React from 'react';
 
-import { AudioAttachment } from './file/AudioAttachment';
-import { GenericFileAttachment } from './file/GenericFileAttachment';
-import { ImageAttachment } from './file/ImageAttachment';
-import { VideoAttachment } from './file/VideoAttachment';
+import AudioAttachment from './file/AudioAttachment';
+import GenericFileAttachment from './file/GenericFileAttachment';
+import ImageAttachment from './file/ImageAttachment';
+import VideoAttachment from './file/VideoAttachment';
 
-export const FileAttachment: FC<FileAttachmentProps & { id: string | undefined }> = (attachment) => {
+const FileAttachment = (attachment: FileAttachmentProps) => {
 	if (isFileImageAttachment(attachment)) {
 		return <ImageAttachment {...attachment} />;
 	}
+
 	if (isFileAudioAttachment(attachment)) {
 		return <AudioAttachment {...attachment} />;
 	}
+
 	if (isFileVideoAttachment(attachment)) {
 		return <VideoAttachment {...attachment} />;
 	}
 
-	return <GenericFileAttachment {...(attachment as any)} />; // TODO: fix this
+	return <GenericFileAttachment {...attachment} />;
 };
+
+export default FileAttachment;
diff --git a/apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx b/apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx
index 4dd06de46655..0f2082f96e31 100644
--- a/apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx
+++ b/apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx
@@ -1,14 +1,13 @@
 import type { AudioAttachmentProps } from '@rocket.chat/core-typings';
 import { AudioPlayer } from '@rocket.chat/fuselage';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
-import type { FC } from 'react';
 import React from 'react';
 
 import MarkdownText from '../../../../MarkdownText';
 import MessageCollapsible from '../../../MessageCollapsible';
 import MessageContentBody from '../../../MessageContentBody';
 
-export const AudioAttachment: FC<AudioAttachmentProps> = ({
+const AudioAttachment = ({
 	title,
 	audio_url: url,
 	audio_type: type,
@@ -18,7 +17,7 @@ export const AudioAttachment: FC<AudioAttachmentProps> = ({
 	title_link: link,
 	title_link_download: hasDownload,
 	collapsed,
-}) => {
+}: AudioAttachmentProps) => {
 	const getURL = useMediaUrl();
 	return (
 		<>
@@ -29,3 +28,5 @@ export const AudioAttachment: FC<AudioAttachmentProps> = ({
 		</>
 	);
 };
+
+export default AudioAttachment;
diff --git a/apps/meteor/client/components/message/content/attachments/file/GenericFileAttachment.tsx b/apps/meteor/client/components/message/content/attachments/file/GenericFileAttachment.tsx
index 8610ae26ff6f..4301520c6173 100644
--- a/apps/meteor/client/components/message/content/attachments/file/GenericFileAttachment.tsx
+++ b/apps/meteor/client/components/message/content/attachments/file/GenericFileAttachment.tsx
@@ -20,7 +20,7 @@ const openDocumentViewer = window.RocketChatDesktop?.openDocumentViewer;
 
 type GenericFileAttachmentProps = MessageAttachmentBase;
 
-export const GenericFileAttachment = ({
+const GenericFileAttachment = ({
 	title,
 	description,
 	descriptionMd,
@@ -69,3 +69,5 @@ export const GenericFileAttachment = ({
 		</>
 	);
 };
+
+export default GenericFileAttachment;
diff --git a/apps/meteor/client/components/message/content/attachments/file/ImageAttachment.tsx b/apps/meteor/client/components/message/content/attachments/file/ImageAttachment.tsx
index 13cd375c7eeb..a7e4036e1288 100644
--- a/apps/meteor/client/components/message/content/attachments/file/ImageAttachment.tsx
+++ b/apps/meteor/client/components/message/content/attachments/file/ImageAttachment.tsx
@@ -1,6 +1,5 @@
 import type { ImageAttachmentProps } from '@rocket.chat/core-typings';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
-import type { FC } from 'react';
 import React from 'react';
 
 import MarkdownText from '../../../../MarkdownText';
@@ -9,7 +8,7 @@ import MessageContentBody from '../../../MessageContentBody';
 import AttachmentImage from '../structure/AttachmentImage';
 import { useLoadImage } from './hooks/useLoadImage';
 
-export const ImageAttachment: FC<ImageAttachmentProps & { id: string | undefined }> = ({
+const ImageAttachment = ({
 	id,
 	title,
 	image_url: url,
@@ -24,7 +23,7 @@ export const ImageAttachment: FC<ImageAttachmentProps & { id: string | undefined
 	title_link: link,
 	title_link_download: hasDownload,
 	collapsed,
-}) => {
+}: ImageAttachmentProps) => {
 	const [loadImage, setLoadImage] = useLoadImage();
 	const getURL = useMediaUrl();
 
@@ -45,3 +44,5 @@ export const ImageAttachment: FC<ImageAttachmentProps & { id: string | undefined
 		</>
 	);
 };
+
+export default ImageAttachment;
diff --git a/apps/meteor/client/components/message/content/attachments/file/VideoAttachment.tsx b/apps/meteor/client/components/message/content/attachments/file/VideoAttachment.tsx
index dd32db8d8523..5954baf092d0 100644
--- a/apps/meteor/client/components/message/content/attachments/file/VideoAttachment.tsx
+++ b/apps/meteor/client/components/message/content/attachments/file/VideoAttachment.tsx
@@ -1,7 +1,6 @@
 import type { VideoAttachmentProps } from '@rocket.chat/core-typings';
 import { Box, MessageGenericPreview } from '@rocket.chat/fuselage';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
-import type { FC } from 'react';
 import React from 'react';
 
 import { userAgentMIMETypeFallback } from '../../../../../lib/utils/userAgentMIMETypeFallback';
@@ -9,7 +8,7 @@ import MarkdownText from '../../../../MarkdownText';
 import MessageCollapsible from '../../../MessageCollapsible';
 import MessageContentBody from '../../../MessageContentBody';
 
-export const VideoAttachment: FC<VideoAttachmentProps> = ({
+const VideoAttachment = ({
 	title,
 	video_url: url,
 	video_type: type,
@@ -19,7 +18,7 @@ export const VideoAttachment: FC<VideoAttachmentProps> = ({
 	title_link: link,
 	title_link_download: hasDownload,
 	collapsed,
-}) => {
+}: VideoAttachmentProps) => {
 	const getURL = useMediaUrl();
 
 	return (
@@ -35,3 +34,5 @@ export const VideoAttachment: FC<VideoAttachmentProps> = ({
 		</>
 	);
 };
+
+export default VideoAttachment;
diff --git a/apps/meteor/client/hooks/useEndpointAction.ts b/apps/meteor/client/hooks/useEndpointAction.ts
index 7cc1a68f1020..c7c371a04e1f 100644
--- a/apps/meteor/client/hooks/useEndpointAction.ts
+++ b/apps/meteor/client/hooks/useEndpointAction.ts
@@ -1,7 +1,7 @@
-import type { Method, OperationParams, PathPattern, UrlParams } from '@rocket.chat/rest-typings';
+import type { Method, PathPattern, UrlParams } from '@rocket.chat/rest-typings';
 import type { EndpointFunction } from '@rocket.chat/ui-contexts';
 import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
-import { useCallback } from 'react';
+import { useMutation } from '@tanstack/react-query';
 
 type UseEndpointActionOptions<TPathPattern extends PathPattern> = (undefined extends UrlParams<TPathPattern>
 	? {
@@ -16,26 +16,21 @@ export function useEndpointAction<TMethod extends Method, TPathPattern extends P
 	method: TMethod,
 	pathPattern: TPathPattern,
 	options: UseEndpointActionOptions<TPathPattern> = { keys: {} as UrlParams<TPathPattern> },
-): EndpointFunction<TMethod, TPathPattern> {
+) {
 	const sendData = useEndpoint(method, pathPattern, options.keys as UrlParams<TPathPattern>);
 
 	const dispatchToastMessage = useToastMessageDispatch();
 
-	return useCallback(
-		async (params: OperationParams<TMethod, TPathPattern> | undefined) => {
-			try {
-				const data = await sendData(params as OperationParams<TMethod, TPathPattern>);
-
-				if (options.successMessage) {
-					dispatchToastMessage({ type: 'success', message: options.successMessage });
-				}
-
-				return data;
-			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: error });
-				throw error;
+	const mutation = useMutation(sendData, {
+		onSuccess: () => {
+			if (options.successMessage) {
+				dispatchToastMessage({ type: 'success', message: options.successMessage });
 			}
 		},
-		[dispatchToastMessage, sendData, options.successMessage],
-	);
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+	});
+
+	return mutation.mutateAsync as EndpointFunction<TMethod, TPathPattern>;
 }
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
index fe5b984afa95..2177f8a66f7a 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
@@ -8,7 +8,6 @@ import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import { useUserHasRoomRole } from '../../useUserHasRoomRole';
 import type { UserInfoAction, UserInfoActionType } from '../useUserInfoActions';
 
-// TODO: Remove endpoint concatenation
 export const useChangeLeaderAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const room = useUserRoom(rid);
@@ -20,10 +19,10 @@ export const useChangeLeaderAction = (user: Pick<IUser, '_id' | 'username'>, rid
 		throw Error('Room not provided');
 	}
 
-	const endpointPrefix = room.t === 'p' ? '/v1/groups' : '/v1/channels';
 	const { roomCanSetLeader } = getRoomDirectives({ room, showingUserId: uid, userSubscription });
 	const isLeader = useUserHasRoomRole(uid, rid, 'leader');
 
+	const endpointPrefix = room.t === 'p' ? '/v1/groups' : '/v1/channels';
 	const changeLeaderEndpoint = isLeader ? 'removeLeader' : 'addLeader';
 	const changeLeaderMessage = isLeader ? 'removed__username__as__role_' : 'set__username__as__role_';
 	const changeLeader = useEndpointAction('POST', `${endpointPrefix}.${changeLeaderEndpoint}`, {
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
index 80351857d2d8..f3043f0ddcec 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
@@ -32,7 +32,6 @@ const getWarningModalForFederatedRooms = (
 	</GenericModal>
 );
 
-// TODO: Remove endpoint concatenation
 export const useChangeModeratorAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const room = useUserRoom(rid);
@@ -51,10 +50,10 @@ export const useChangeModeratorAction = (user: Pick<IUser, '_id' | 'username'>,
 		throw Error('Room not provided');
 	}
 
-	const endpointPrefix = room.t === 'p' ? '/v1/groups' : '/v1/channels';
 	const { roomCanSetModerator } = getRoomDirectives({ room, showingUserId: uid, userSubscription });
 	const roomName = room?.t && escapeHTML(roomCoordinator.getRoomName(room.t, room));
 
+	const endpointPrefix = room.t === 'p' ? '/v1/groups' : '/v1/channels';
 	const changeModeratorEndpoint = isModerator ? 'removeModerator' : 'addModerator';
 	const changeModeratorMessage = isModerator
 		? 'User__username__removed_from__room_name__moderators'
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
index c350136d3ba2..ac336e8bbd44 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
@@ -32,7 +32,6 @@ const getWarningModalForFederatedRooms = (
 	</GenericModal>
 );
 
-// TODO: Remove endpoint concatenation
 export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const room = useUserRoom(rid);
@@ -49,14 +48,13 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 		throw Error('Room not provided');
 	}
 
-	const endpointPrefix = room.t === 'p' ? '/v1/groups' : '/v1/channels';
 	const { roomCanSetOwner } = getRoomDirectives({ room, showingUserId: uid, userSubscription });
 	const roomName = room?.t && escapeHTML(roomCoordinator.getRoomName(room.t, room));
 
+	const endpointPrefix = room.t === 'p' ? '/v1/groups' : '/v1/channels';
 	const changeOwnerEndpoint = isOwner ? 'removeOwner' : 'addOwner';
 	const changeOwnerMessage = isOwner ? 'User__username__removed_from__room_name__owners' : 'User__username__is_now_an_owner_of__room_name_';
-
-	const changeOwner = useEndpointAction('POST', `${endpointPrefix}.${changeOwnerEndpoint}` as const, {
+	const changeOwner = useEndpointAction('POST', `${endpointPrefix}.${changeOwnerEndpoint}`, {
 		successMessage: t(changeOwnerMessage, { username: user.username, room_name: roomName }),
 	});
 
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
index 0abe3aba8d5a..f672d68f0d1e 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
@@ -13,23 +13,23 @@ import RemoveUsersModal from '../../../../teams/contextualBar/members/RemoveUser
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import type { UserInfoAction } from '../useUserInfoActions';
 
-// TODO: Remove endpoint concatenation
 export const useRemoveUserAction = (
 	user: Pick<IUser, '_id' | 'username'>,
 	rid: IRoom['_id'],
 	reload?: () => void,
 ): UserInfoAction | undefined => {
-	const t = useTranslation();
 	const room = useUserRoom(rid);
-	const currentUser = useUser();
-	const subscription = useUserSubscription(rid);
-
-	const { _id: uid } = user;
 
 	if (!room) {
 		throw Error('Room not provided');
 	}
 
+	const t = useTranslation();
+	const currentUser = useUser();
+	const subscription = useUserSubscription(rid);
+
+	const { _id: uid } = user;
+
 	const hasPermissionToRemove = usePermission('remove-user', rid);
 	const userCanRemove = isRoomFederated(room)
 		? Federation.isEditableByTheUser(currentUser || undefined, room, subscription)
@@ -38,13 +38,14 @@ export const useRemoveUserAction = (
 	const closeModal = useMutableCallback(() => setModal(null));
 	const roomName = room?.t && escapeHTML(roomCoordinator.getRoomName(room.t, room));
 
-	const endpointPrefix = room.t === 'p' ? '/v1/groups' : '/v1/channels';
 	const { roomCanRemove } = getRoomDirectives({ room, showingUserId: uid, userSubscription: subscription });
 
 	const removeFromTeam = useEndpointAction('POST', '/v1/teams.removeMember', {
 		successMessage: t('User_has_been_removed_from_team'),
 	});
-	const removeFromRoom = useEndpointAction('POST', `${endpointPrefix}.kick`, {
+
+	const removeFromRoomEndpoint = room.t === 'p' ? '/v1/groups.kick' : '/v1/channels.kick';
+	const removeFromRoom = useEndpointAction('POST', removeFromRoomEndpoint, {
 		successMessage: t('User_has_been_removed_from_s', roomName),
 	});
 
diff --git a/packages/core-typings/src/IMessage/MessageAttachment/Files/FileAttachmentProps.ts b/packages/core-typings/src/IMessage/MessageAttachment/Files/FileAttachmentProps.ts
index 8ea81fdeb432..568494fd22a1 100644
--- a/packages/core-typings/src/IMessage/MessageAttachment/Files/FileAttachmentProps.ts
+++ b/packages/core-typings/src/IMessage/MessageAttachment/Files/FileAttachmentProps.ts
@@ -3,9 +3,11 @@ import type { AudioAttachmentProps } from './AudioAttachmentProps';
 import type { ImageAttachmentProps } from './ImageAttachmentProps';
 import type { VideoAttachmentProps } from './VideoAttachmentProps';
 
-export type FileAttachmentProps = {
-	type: 'file';
-} & (VideoAttachmentProps | ImageAttachmentProps | AudioAttachmentProps);
+export type FileAttachmentProps =
+	| ({ type: 'file' } & VideoAttachmentProps)
+	| ({ type: 'file' } & ImageAttachmentProps)
+	| ({ type: 'file' } & AudioAttachmentProps)
+	| ({ type: 'file' } & MessageAttachmentBase);
 
 export const isFileAttachment = (attachment: MessageAttachmentBase): attachment is FileAttachmentProps =>
 	'type' in attachment && (attachment as any).type === 'file';
diff --git a/packages/core-typings/src/IMessage/MessageAttachment/MessageAttachmentBase.ts b/packages/core-typings/src/IMessage/MessageAttachment/MessageAttachmentBase.ts
index 19c60ac2b75b..167975ae014f 100644
--- a/packages/core-typings/src/IMessage/MessageAttachment/MessageAttachmentBase.ts
+++ b/packages/core-typings/src/IMessage/MessageAttachment/MessageAttachmentBase.ts
@@ -1,18 +1,16 @@
 import type { Root } from '@rocket.chat/message-parser';
 
 export type MessageAttachmentBase = {
+	id?: string;
 	title?: string;
-
 	ts?: Date;
 	collapsed?: boolean;
 	description?: string;
 	descriptionMd?: Root;
 	text?: string;
 	md?: Root;
-
 	size?: number;
 	format?: string;
-
 	title_link?: string;
 	title_link_download?: boolean;
 };