feat: Add Desktop PDF viewer

apps/meteor/client/components/message/content/attachments/file/GenericFileAttachment.tsx

@@ -7,7 +7,7 @@ import {
 	MessageGenericPreviewDescription,
 } from '@rocket.chat/fuselage';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
-import type { FC } from 'react';
+import type { UIEvent } from 'react';
 import React from 'react';
 
 import { getFileExtension } from '../../../../../../lib/utils/getFileExtension';
@@ -16,7 +16,11 @@ import MessageCollapsible from '../../../MessageCollapsible';
 import MessageContentBody from '../../../MessageContentBody';
 import AttachmentSize from '../structure/AttachmentSize';
 
-export const GenericFileAttachment: FC<MessageAttachmentBase> = ({
+const openDocumentViewer = window.RocketChatDesktop?.openDocumentViewer;
+
+type GenericFileAttachmentProps = MessageAttachmentBase;
+
+export const GenericFileAttachment = ({
 	title,
 	description,
 	descriptionMd,
@@ -25,9 +29,24 @@ export const GenericFileAttachment: FC<MessageAttachmentBase> = ({
 	size,
 	format,
 	collapsed,
-}) => {
+}: GenericFileAttachmentProps) => {
 	const getURL = useMediaUrl();
 
+	const handleTitleClick = (event: UIEvent): void => {
+		if (openDocumentViewer && link && format === 'PDF') {
+			event.preventDefault();
+			openDocumentViewer(getURL(link), format, '');
+		}
+	};
+
+	const getExternalUrl = () => {
+		if (!hasDownload || !link) return undefined;
+
+		if (openDocumentViewer) return `${getURL(link)}?download`;
+
+		return getURL(link);
+	};
+
 	return (
 		<>
 			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
@@ -36,7 +55,7 @@ export const GenericFileAttachment: FC<MessageAttachmentBase> = ({
 					<MessageGenericPreviewContent
 						thumb={<MessageGenericPreviewIcon name='attachment-file' type={format || getFileExtension(title)} />}
 					>
-						<MessageGenericPreviewTitle externalUrl={hasDownload && link ? getURL(link) : undefined} data-qa-type='attachment-title-link'>
+						<MessageGenericPreviewTitle externalUrl={getExternalUrl()} onClick={handleTitleClick} data-qa-type='attachment-title-link'>
 							{title}
 						</MessageGenericPreviewTitle>
 						{size && (

apps/meteor/client/definitions/IRocketChatDesktop.ts

@@ -0,0 +1,10 @@
+type OutlookEventsResponse = { status: 'success' | 'canceled' };
+
+export interface IRocketChatDesktop {
+	openInternalVideoChatWindow?: (url: string, options: { providerName: string | undefined }) => void;
+	getOutlookEvents?: (date: Date) => Promise<OutlookEventsResponse>;
+	setOutlookExchangeUrl?: (url: string, userId: string) => Promise<void>;
+	hasOutlookCredentials?: () => Promise<boolean>;
+	clearOutlookCredentials?: () => void;
+	openDocumentViewer?: (url: string, format: string, options: any) => void;
+}

apps/meteor/client/definitions/global.d.ts

@@ -0,0 +1,8 @@
+import type { IRocketChatDesktop } from './IRocketChatDesktop';
+
+declare global {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Window {
+		RocketChatDesktop?: IRocketChatDesktop;
+	}
+}