-
+
+ {zoomScale !== 1 &&
+ {
prevEl: '.rcx-swiper-prev-button',
}}
keyboard
- zoom
+ zoom={{ toggle: false }}
lazyPreloaderClass='rcx-lazy-preloader'
runCallbacksOnInit
onKeyPress={(_, keyCode) => String(keyCode) === '27' && onClose()}
@@ -131,7 +155,7 @@ const ImageGallery = () => {
{images?.map(({ _id, url }) => (
- 
+
+ ,
+ document.body,
+ );
+};
diff --git a/apps/meteor/client/components/ImageGallery/ImageGalleryLoader.tsx b/apps/meteor/client/components/ImageGallery/ImageGalleryLoading.tsx
similarity index 84%
rename from apps/meteor/client/components/ImageGallery/ImageGalleryLoader.tsx
rename to apps/meteor/client/components/ImageGallery/ImageGalleryLoading.tsx
index 131b82780f22..6e5f2d0463b8 100644
--- a/apps/meteor/client/components/ImageGallery/ImageGalleryLoader.tsx
+++ b/apps/meteor/client/components/ImageGallery/ImageGalleryLoading.tsx
@@ -10,7 +10,7 @@ const closeButtonStyle = css`
right: 10px;
`;
-const ImageGalleryLoader = ({ onClose }: { onClose: () => void }) =>
+export const ImageGalleryLoading = ({ onClose }: { onClose: () => void }) =>
createPortal(
,
document.body,
);
-
-export default ImageGalleryLoader;
diff --git a/apps/meteor/client/components/ImageGallery/hooks/useImageGallery.ts b/apps/meteor/client/components/ImageGallery/hooks/useImageGallery.ts
deleted file mode 100644
index 9d058a010fdc..000000000000
--- a/apps/meteor/client/components/ImageGallery/hooks/useImageGallery.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useMemo, useContext } from 'react';
-
-import { ImageGalleryContext } from '../../../contexts/ImageGalleryContext';
-import { useRecordList } from '../../../hooks/lists/useRecordList';
-import { useRoom } from '../../../views/room/contexts/RoomContext';
-import { useImagesList } from './useImagesList';
-
-export const useImageGallery = () => {
- const { _id: rid } = useRoom();
- const { imageId, onClose } = useContext(ImageGalleryContext);
-
- const { filesList, loadMoreItems } = useImagesList(useMemo(() => ({ roomId: rid, startingFromId: imageId }), [imageId, rid]));
- const { phase, items: filesItems } = useRecordList(filesList);
-
- return {
- images: filesItems,
- isLoading: phase === 'loading',
- loadMore: () => loadMoreItems(filesItems.length - 1),
- onClose,
- };
-};
diff --git a/apps/meteor/client/components/ImageGallery/index.ts b/apps/meteor/client/components/ImageGallery/index.ts
index db657797badb..fb1b333e5e15 100644
--- a/apps/meteor/client/components/ImageGallery/index.ts
+++ b/apps/meteor/client/components/ImageGallery/index.ts
@@ -1 +1,3 @@
-export { default } from './ImageGallery';
+export * from './ImageGallery';
+export * from './ImageGalleryError';
+export * from './ImageGalleryLoading';
diff --git a/apps/meteor/client/components/NotFoundState.tsx b/apps/meteor/client/components/NotFoundState.tsx
index 9ed42fc14366..7140a0f67b53 100644
--- a/apps/meteor/client/components/NotFoundState.tsx
+++ b/apps/meteor/client/components/NotFoundState.tsx
@@ -22,9 +22,11 @@ const NotFoundState = ({ title, subtitle }: NotFoundProps): ReactElement => {
{title}
{subtitle}
-
- {t('Homepage')}
-
+
+
+ {t('Homepage')}
+
+
);
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;
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;
-}): 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 = ({ children = undefined, title, onClickB
>
{isMobile && (
-
+
+
)}
{onClickBack &&
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 => (
@@ -14,19 +16,14 @@ type TextCopyProps = {
wrapper?: (text: string) => ReactElement;
} & ComponentProps;
-// 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 (
{wrapper(text)}
-
+
);
};
diff --git a/apps/meteor/client/components/TwoFactorModal/TwoFactorModal.tsx b/apps/meteor/client/components/TwoFactorModal/TwoFactorModal.tsx
index 3e9824673bf2..0382b6eab52e 100644
--- a/apps/meteor/client/components/TwoFactorModal/TwoFactorModal.tsx
+++ b/apps/meteor/client/components/TwoFactorModal/TwoFactorModal.tsx
@@ -1,4 +1,3 @@
-import { useEndpoint } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React from 'react';
@@ -29,24 +28,18 @@ type TwoFactorModalProps = {
);
const TwoFactorModal = ({ onConfirm, onClose, invalidAttempt, ...props }: TwoFactorModalProps): ReactElement => {
- const logoutOtherSessions = useEndpoint('POST', '/v1/users.logoutOtherClients');
-
- const confirm = (code: any, method: Method): void => {
- onConfirm(code, method);
- logoutOtherSessions();
- };
if (props.method === Method.TOTP) {
- return ;
-const BaseAvatar: FC = ({ size, ...props }) => {
- const [error, setError] = useState(false);
+const BaseAvatar: FC = ({ onError, ...props }) => {
+ const [isLoading, setIsLoading] = useState(false);
- if (error) {
- return {
+ setIsLoading(true);
+ onError?.(event);
+ }}
+ {...props}
+ />
+ );
};
export default BaseAvatar;
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
index ae03418be755..eda44e98d87f 100644
--- a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
@@ -1,5 +1,6 @@
import type { IUser, AvatarObject } from '@rocket.chat/core-typings';
-import { Box, Button, TextInput, Margins, Avatar, IconButton } from '@rocket.chat/fuselage';
+import { Box, Button, TextInput, Avatar, IconButton, Label } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
import { useToastMessageDispatch, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
import type { ReactElement, ChangeEvent } from 'react';
import React, { useState, useCallback } from 'react';
@@ -7,17 +8,11 @@ import React, { useState, useCallback } from 'react';
import { useSingleFileInput } from '../../../hooks/useSingleFileInput';
import { isValidImageFormat } from '../../../lib/utils/isValidImageFormat';
import UserAvatar from '../UserAvatar';
+import type { UserAvatarSuggestion } from './UserAvatarSuggestion';
import UserAvatarSuggestions from './UserAvatarSuggestions';
+import { readFileAsDataURL } from './readFileAsDataURL';
-const toDataURL = (file: File, callback: (result: FileReader['result']) => void): void => {
- const reader = new FileReader();
- reader.onloadend = function (e): void {
- callback(e?.target?.result || null);
- };
- reader.readAsDataURL(file);
-};
-
-type UserAvatarEditorType = {
+type UserAvatarEditorProps = {
currentUsername: IUser['username'];
username: IUser['username'];
setAvatarObj: (obj: AvatarObject) => void;
@@ -25,31 +20,33 @@ type UserAvatarEditorType = {
etag: IUser['avatarETag'];
};
-function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, etag }: UserAvatarEditorType): ReactElement {
+function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, etag }: UserAvatarEditorProps): ReactElement {
const t = useTranslation();
const rotateImages = useSetting('FileUpload_RotateImages');
const [avatarFromUrl, setAvatarFromUrl] = useState('');
const [newAvatarSource, setNewAvatarSource] = useState();
+ const imageUrlField = useUniqueId();
const dispatchToastMessage = useToastMessageDispatch();
const setUploadedPreview = useCallback(
async (file, avatarObj) => {
setAvatarObj(avatarObj);
- toDataURL(file, async (dataURL) => {
- if (typeof dataURL === 'string' && (await isValidImageFormat(dataURL))) {
+ try {
+ const dataURL = await readFileAsDataURL(file);
+
+ if (await isValidImageFormat(dataURL)) {
setNewAvatarSource(dataURL);
- return;
}
-
+ } catch (error) {
dispatchToastMessage({ type: 'error', message: t('Avatar_format_invalid') });
- });
+ }
},
[setAvatarObj, t, dispatchToastMessage],
);
const [clickUpload] = useSingleFileInput(setUploadedPreview);
- const clickUrl = (): void => {
+ const handleAddUrl = (): void => {
setNewAvatarSource(avatarFromUrl);
setAvatarObj({ avatarUrl: avatarFromUrl });
};
@@ -65,6 +62,14 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, e
setAvatarFromUrl(event.currentTarget.value);
};
+ const handleSelectSuggestion = useCallback(
+ (suggestion: UserAvatarSuggestion) => {
+ setAvatarObj(suggestion as unknown as AvatarObject);
+ setNewAvatarSource(suggestion.blob);
+ },
+ [setAvatarObj, setNewAvatarSource],
+ );
+
return (
{t('Profile_picture')}
@@ -72,8 +77,11 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, e
dispatchToastMessage({ type: 'error', message: t('error-invalid-image-url') })}
style={{
objectFit: 'contain',
imageOrientation: rotateImages ? 'from-image' : 'none',
@@ -81,32 +89,33 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, disabled, e
/>
-
-
-
-
-
- {t('Use_url_for_avatar')}
-
+
+
+
+
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestion.ts b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestion.ts
new file mode 100644
index 000000000000..e2ac26c6d0f3
--- /dev/null
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestion.ts
@@ -0,0 +1,6 @@
+export type UserAvatarSuggestion = {
+ blob: string;
+ contentType: string;
+ service: string;
+ url: string;
+};
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx
index 04b0c92acd95..4ccb7d304683 100644
--- a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx
@@ -1,43 +1,31 @@
-import type { AvatarObject } from '@rocket.chat/core-typings';
-import { Box, Button, Margins, Avatar } from '@rocket.chat/fuselage';
+import { Button, Avatar } from '@rocket.chat/fuselage';
import React, { useCallback } from 'react';
-import { useAvatarSuggestions } from '../../../hooks/useAvatarSuggestions';
+import type { UserAvatarSuggestion } from './UserAvatarSuggestion';
+import { useUserAvatarSuggestions } from './useUserAvatarSuggestions';
type UserAvatarSuggestionsProps = {
- setAvatarObj: (obj: AvatarObject) => void;
- setNewAvatarSource: (source: string) => void;
disabled?: boolean;
+ onSelectOne?: (suggestion: UserAvatarSuggestion) => void;
};
-const UserAvatarSuggestions = ({ setAvatarObj, setNewAvatarSource, disabled }: UserAvatarSuggestionsProps) => {
- const handleClick = useCallback(
- (suggestion) => () => {
- setAvatarObj(suggestion);
- setNewAvatarSource(suggestion.blob);
- },
- [setAvatarObj, setNewAvatarSource],
- );
+function UserAvatarSuggestions({ disabled, onSelectOne }: UserAvatarSuggestionsProps) {
+ const { data: suggestions = [] } = useUserAvatarSuggestions();
- const { data } = useAvatarSuggestions();
- const suggestions = Object.values(data?.suggestions || {});
+ const handleClick = useCallback((suggestion: UserAvatarSuggestion) => () => onSelectOne?.(suggestion), [onSelectOne]);
return (
-
- {suggestions &&
- suggestions.length > 0 &&
- suggestions.map(
- (suggestion) =>
- suggestion.blob && (
-
- ),
- )}
-
+ <>
+ {suggestions.map(
+ (suggestion) =>
+ suggestion.blob && (
+
+ ),
+ )}
+
);
-};
+}
export default UserAvatarSuggestions;
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/readFileAsDataURL.ts b/apps/meteor/client/components/avatar/UserAvatarEditor/readFileAsDataURL.ts
new file mode 100644
index 000000000000..d2bb3f7beed1
--- /dev/null
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/readFileAsDataURL.ts
@@ -0,0 +1,16 @@
+export const readFileAsDataURL = (file: File) =>
+ new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onloadend = (event) => {
+ const result = event.target?.result;
+ if (typeof result === 'string') {
+ resolve(result);
+ return;
+ }
+ reject(new Error('Failed to read file'));
+ };
+ reader.onerror = (event) => {
+ reject(new Error(`Failed to read file: ${event}`));
+ };
+ reader.readAsDataURL(file);
+ });
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/useUserAvatarSuggestions.ts b/apps/meteor/client/components/avatar/UserAvatarEditor/useUserAvatarSuggestions.ts
new file mode 100644
index 000000000000..42bb09406d3b
--- /dev/null
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/useUserAvatarSuggestions.ts
@@ -0,0 +1,12 @@
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+export const useUserAvatarSuggestions = () => {
+ const getAvatarSuggestions = useEndpoint('GET', '/v1/users.getAvatarSuggestion');
+
+ return useQuery({
+ queryKey: ['account', 'profile', 'avatar-suggestions'],
+ queryFn: async () => getAvatarSuggestions(),
+ select: (data) => Object.values(data.suggestions),
+ });
+};
diff --git a/apps/meteor/client/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 2737a6fc4d4a..6046aecc0bae 100644
--- a/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx
+++ b/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx
@@ -1,82 +1,53 @@
-import { Icon } from '@rocket.chat/fuselage';
-import { useConnectionStatus, useTranslation } from '@rocket.chat/ui-contexts';
-import type { MouseEventHandler, FC } 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';
+import { useReconnectCountdown } from './useReconnectCountdown';
-// 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>();
- 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;
-};
-
-const ConnectionStatusBar: FC = function ConnectionStatusBar() {
+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 = (event) => {
+ const handleRetryClick = (event: MouseEvent) => {
event.preventDefault();
reconnect?.();
};
return (
-
+
+ {t('meteor_status', { context: status })}
+ {status === 'waiting' && <> {t('meteor_status_reconnect_in', { count: reconnectCountdown })}}
+ {['waiting', 'offline'].includes(status) && (
+ <>
+ {' '}
+
+ {t('meteor_status_try_now', { context: status })}
+
+
+ )}
+
+
);
-};
+}
export default ConnectionStatusBar;
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>();
+ 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/IgnoredContent.tsx b/apps/meteor/client/components/message/IgnoredContent.tsx
index 31b62639b849..b1973b13178a 100644
--- a/apps/meteor/client/components/message/IgnoredContent.tsx
+++ b/apps/meteor/client/components/message/IgnoredContent.tsx
@@ -17,7 +17,7 @@ const IgnoredContent = ({ onShowMessageIgnored }: IgnoredContentProps): ReactEle
};
return (
-
+
);
};
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 = ({
+const AudioAttachment = ({
title,
audio_url: url,
audio_type: type,
@@ -18,7 +17,7 @@ export const AudioAttachment: FC = ({
title_link: link,
title_link_download: hasDownload,
collapsed,
-}) => {
+}: AudioAttachmentProps) => {
const getURL = useMediaUrl();
return (
<>
@@ -29,3 +28,5 @@ export const AudioAttachment: FC = ({
);
};
+
+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 cbf1749b9dcd..4301520c6173 100644
--- a/apps/meteor/client/components/message/content/attachments/file/GenericFileAttachment.tsx
+++ b/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 = ({
+const openDocumentViewer = window.RocketChatDesktop?.openDocumentViewer;
+
+type GenericFileAttachmentProps = MessageAttachmentBase;
+
+const GenericFileAttachment = ({
title,
description,
descriptionMd,
@@ -25,9 +29,24 @@ export const GenericFileAttachment: FC = ({
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 ? = ({
+
{title}
{size && (
@@ -50,3 +69,5 @@ export const GenericFileAttachment: FC = ({
);
};
+
+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 = ({
+const ImageAttachment = ({
id,
title,
image_url: url,
@@ -24,7 +23,7 @@ export const ImageAttachment: FC {
+}: ImageAttachmentProps) => {
const [loadImage, setLoadImage] = useLoadImage();
const getURL = useMediaUrl();
@@ -45,3 +44,5 @@ export const ImageAttachment: FC = ({
+const VideoAttachment = ({
title,
video_url: url,
video_type: type,
@@ -19,7 +18,7 @@ export const VideoAttachment: FC = ({
title_link: link,
title_link_download: hasDownload,
collapsed,
-}) => {
+}: VideoAttachmentProps) => {
const getURL = useMediaUrl();
return (
@@ -35,3 +34,5 @@ export const VideoAttachment: FC = ({
);
};
+
+export default VideoAttachment;
diff --git a/apps/meteor/client/components/message/content/reactions/Reaction.tsx b/apps/meteor/client/components/message/content/reactions/Reaction.tsx
index cf68e65b8829..19744674bcd2 100644
--- a/apps/meteor/client/components/message/content/reactions/Reaction.tsx
+++ b/apps/meteor/client/components/message/content/reactions/Reaction.tsx
@@ -1,51 +1,30 @@
import { MessageReaction as MessageReactionTemplate, MessageReactionEmoji, MessageReactionCounter } from '@rocket.chat/fuselage';
-import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import { useTooltipClose, useTooltipOpen, useTranslation } from '@rocket.chat/ui-contexts';
+import { useTooltipClose, useTooltipOpen } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
-import React, { useRef } from 'react';
+import React, { useRef, useContext } from 'react';
import { getEmojiClassNameAndDataTitle } from '../../../../lib/utils/renderEmoji';
-import MarkdownText from '../../../MarkdownText';
+import { MessageListContext } from '../../list/MessageListContext';
+import ReactionTooltip from './ReactionTooltip';
// TODO: replace it with proper usage of i18next plurals
-const getTranslationKey = (users: string[], mine: boolean): TranslationKey => {
- if (users.length === 0) {
- if (mine) {
- return 'You_reacted_with';
- }
- }
-
- if (users.length > 10) {
- if (mine) {
- return 'You_users_and_more_Reacted_with';
- }
- return 'Users_and_more_reacted_with';
- }
-
- if (mine) {
- return 'You_and_users_Reacted_with';
- }
- return 'Users_reacted_with';
-};
-
type ReactionProps = {
hasReacted: (name: string) => boolean;
counter: number;
name: string;
names: string[];
+ messageId: string;
onClick: () => void;
};
-const Reaction = ({ hasReacted, counter, name, names, ...props }: ReactionProps): ReactElement => {
- const t = useTranslation();
+const Reaction = ({ hasReacted, counter, name, names, messageId, ...props }: ReactionProps): ReactElement => {
const ref = useRef(null);
const openTooltip = useTooltipOpen();
const closeTooltip = useTooltipClose();
+ const { showRealName, username } = useContext(MessageListContext);
const mine = hasReacted(name);
- const key = getTranslationKey(names, mine);
-
const emojiProps = getEmojiClassNameAndDataTitle(name);
return (
@@ -55,18 +34,21 @@ const Reaction = ({ hasReacted, counter, name, names, ...props }: ReactionProps)
mine={mine}
tabIndex={0}
role='button'
- onMouseOver={(e): void => {
+ // if data-tooltip is not set, the tooltip will close on first mouse enter
+ data-tooltip
+ onMouseEnter={async (e) => {
e.stopPropagation();
e.preventDefault();
+
ref.current &&
openTooltip(
- 10 ? names.length - 10 : names.length,
- users: names.slice(0, 10).join(', '),
- emoji: name,
- })}
- variant='inline'
+ 10 ? usernames.length - 10 : usernames.length,
+ users: users?.slice(0, 10).join(', ') || '',
+ emoji: emojiName,
+ })}
+ variant='inline'
+ />
+ );
+};
+
+export default ReactionTooltip;
diff --git a/apps/meteor/client/components/message/list/MessageListContext.tsx b/apps/meteor/client/components/message/list/MessageListContext.tsx
index 156679fe5463..82cca7377bb6 100644
--- a/apps/meteor/client/components/message/list/MessageListContext.tsx
+++ b/apps/meteor/client/components/message/list/MessageListContext.tsx
@@ -7,7 +7,6 @@ export type MessageListContextValue = {
useShowFollowing: ({ message }: { message: IMessage }) => boolean;
useMessageDateFormatter: () => (date: Date) => string;
useUserHasReacted: (message: IMessage) => (reaction: string) => boolean;
- useReactionsFilter: (message: IMessage) => (reaction: string) => string[];
useOpenEmojiPicker: (message: IMessage) => (event: React.MouseEvent) => void;
showRoles: boolean;
showRealName: boolean;
@@ -25,6 +24,7 @@ export type MessageListContextValue = {
autoTranslateLanguage?: string;
showColors: boolean;
jumpToMessageParam?: string;
+ username: string | undefined;
scrollMessageList?: (callback: (wrapper: HTMLDivElement | null) => ScrollToOptions | void) => void;
};
@@ -38,15 +38,12 @@ export const MessageListContext = createContext({
(date: Date): string =>
date.toString(),
useOpenEmojiPicker: () => (): void => undefined,
- useReactionsFilter:
- (message) =>
- (reaction: string): string[] =>
- message.reactions ? message.reactions[reaction]?.usernames || [] : [],
showRoles: false,
showRealName: false,
showUsername: false,
showColors: false,
scrollMessageList: () => undefined,
+ username: undefined,
});
export const useShowTranslated: MessageListContextValue['useShowTranslated'] = (...args) =>
@@ -69,5 +66,3 @@ export const useUserHasReacted: MessageListContextValue['useUserHasReacted'] = (
useContext(MessageListContext).useUserHasReacted(message);
export const useOpenEmojiPicker: MessageListContextValue['useOpenEmojiPicker'] = (...args) =>
useContext(MessageListContext).useOpenEmojiPicker(...args);
-export const useReactionsFilter: MessageListContextValue['useReactionsFilter'] = (message: IMessage) =>
- useContext(MessageListContext).useReactionsFilter(message);
diff --git a/apps/meteor/client/components/message/toolbox/DesktopToolboxDropdown.tsx b/apps/meteor/client/components/message/toolbar/DesktopToolbarDropdown.tsx
similarity index 70%
rename from apps/meteor/client/components/message/toolbox/DesktopToolboxDropdown.tsx
rename to apps/meteor/client/components/message/toolbar/DesktopToolbarDropdown.tsx
index 0310cf44c013..8c80bc9005bf 100644
--- a/apps/meteor/client/components/message/toolbox/DesktopToolboxDropdown.tsx
+++ b/apps/meteor/client/components/message/toolbar/DesktopToolbarDropdown.tsx
@@ -2,13 +2,13 @@ import { Tile, PositionAnimated } from '@rocket.chat/fuselage';
import type { ReactNode, Ref, RefObject } from 'react';
import React, { forwardRef } from 'react';
-type DesktopToolboxDropdownProps = {
+type DesktopToolbarDropdownProps = {
children: ReactNode;
reference: RefObject;
};
-const DesktopToolboxDropdown = forwardRef(function ToolboxDropdownDesktop(
- { reference, children }: DesktopToolboxDropdownProps,
+const DesktopToolbarDropdown = forwardRef(function DesktopToolbarDropdown(
+ { reference, children }: DesktopToolbarDropdownProps,
ref: Ref,
) {
return (
@@ -20,4 +20,4 @@ const DesktopToolboxDropdown = forwardRef(function ToolboxDropdownDesktop(
);
});
-export default DesktopToolboxDropdown;
+export default DesktopToolbarDropdown;
diff --git a/apps/meteor/client/components/message/toolbox/MessageActionMenu.tsx b/apps/meteor/client/components/message/toolbar/MessageActionMenu.tsx
similarity index 93%
rename from apps/meteor/client/components/message/toolbox/MessageActionMenu.tsx
rename to apps/meteor/client/components/message/toolbar/MessageActionMenu.tsx
index 937667b817c7..a88d9beb1d99 100644
--- a/apps/meteor/client/components/message/toolbox/MessageActionMenu.tsx
+++ b/apps/meteor/client/components/message/toolbar/MessageActionMenu.tsx
@@ -1,11 +1,11 @@
-import { MessageToolboxItem, Option, OptionDivider, OptionTitle } from '@rocket.chat/fuselage';
+import { MessageToolbarItem, Option, OptionDivider, OptionTitle } from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import type { ComponentProps, MouseEvent, MouseEventHandler, ReactElement } from 'react';
import React, { Fragment, useCallback, useRef, useState } from 'react';
import type { MessageActionConfig } from '../../../../app/ui-utils/client/lib/MessageAction';
import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
-import ToolboxDropdown from './ToolboxDropdown';
+import ToolbarDropdown from './ToolbarDropdown';
type MessageActionConfigOption = Omit & {
action: ((event: MouseEvent) => void) & MouseEventHandler;
@@ -76,7 +76,7 @@ const MessageActionMenu = ({ options, onChangeMenuVisibility, ...props }: Messag
}, [handleChangeMenuVisibility]);
return (
<>
- handleChangeMenuVisibility(!visible)}
@@ -86,7 +86,7 @@ const MessageActionMenu = ({ options, onChangeMenuVisibility, ...props }: Messag
/>
{visible && (
<>
-
+
{groupOptions.map(([section, options], index, arr) => (
{section === 'apps' && Apps }
@@ -110,7 +110,7 @@ const MessageActionMenu = ({ options, onChangeMenuVisibility, ...props }: Messag
{index !== arr.length - 1 &&
))}
-
+
)}
diff --git a/apps/meteor/client/components/message/toolbox/MessageToolbox.tsx b/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx
similarity index 82%
rename from apps/meteor/client/components/message/toolbox/MessageToolbox.tsx
rename to apps/meteor/client/components/message/toolbar/MessageToolbar.tsx
index 3b9cdd84c25d..335fdf1ea158 100644
--- a/apps/meteor/client/components/message/toolbox/MessageToolbox.tsx
+++ b/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx
@@ -1,8 +1,8 @@
import type { IMessage, IRoom, ISubscription, ITranslatedMessage } from '@rocket.chat/core-typings';
import { isThreadMessage, isRoomFederated, isVideoConfMessage } from '@rocket.chat/core-typings';
-import { MessageToolbox as FuselageMessageToolbox, MessageToolboxItem } from '@rocket.chat/fuselage';
+import { MessageToolbar as FuselageMessageToolbar, MessageToolbarItem } from '@rocket.chat/fuselage';
import { useFeaturePreview } from '@rocket.chat/ui-client';
-import { useUser, useSettings, useTranslation, useMethod } from '@rocket.chat/ui-contexts';
+import { useUser, useSettings, useTranslation, useMethod, useLayoutHiddenActions } from '@rocket.chat/ui-contexts';
import { useQuery } from '@tanstack/react-query';
import type { ReactElement } from 'react';
import React, { memo, useMemo } from 'react';
@@ -17,6 +17,7 @@ import { useAutoTranslate } from '../../../views/room/MessageList/hooks/useAutoT
import { useChat } from '../../../views/room/contexts/ChatContext';
import { useRoomToolbox } from '../../../views/room/contexts/RoomToolboxContext';
import MessageActionMenu from './MessageActionMenu';
+import { useWebDAVMessageAction } from './useWebDAVMessageAction';
const getMessageContext = (message: IMessage, room: IRoom, context?: MessageActionContext): MessageActionContext => {
if (context) {
@@ -38,7 +39,7 @@ const getMessageContext = (message: IMessage, room: IRoom, context?: MessageActi
return 'message';
};
-type MessageToolboxProps = {
+type MessageToolbarProps = {
message: IMessage & Partial;
messageContext?: MessageActionContext;
room: IRoom;
@@ -46,13 +47,13 @@ type MessageToolboxProps = {
onChangeMenuVisibility: (visible: boolean) => void;
};
-const MessageToolbox = ({
+const MessageToolbar = ({
message,
messageContext,
room,
subscription,
onChangeMenuVisibility,
-}: MessageToolboxProps): ReactElement | null => {
+}: MessageToolbarProps): ReactElement | null => {
const t = useTranslation();
const user = useUser() ?? undefined;
const settings = useSettings();
@@ -70,13 +71,21 @@ const MessageToolbox = ({
const actionButtonApps = useMessageActionAppsActionButtons(context);
+ const { messageToolbox: hiddenActions } = useLayoutHiddenActions();
+
+ // TODO: move this to another place
+ useWebDAVMessageAction();
+
const actionsQueryResult = useQuery(['rooms', room._id, 'messages', message._id, 'actions'] as const, async () => {
const props = { message, room, user, subscription, settings: mapSettings, chat };
const toolboxItems = await MessageAction.getAll(props, context, 'message');
const menuItems = await MessageAction.getAll(props, context, 'menu');
- return { message: toolboxItems, menu: menuItems };
+ return {
+ message: toolboxItems.filter((action) => !hiddenActions.includes(action.id)),
+ menu: menuItems.filter((action) => !hiddenActions.includes(action.id)),
+ };
});
const toolbox = useRoomToolbox();
@@ -85,7 +94,7 @@ const MessageToolbox = ({
const autoTranslateOptions = useAutoTranslate(subscription);
- if (selecting) {
+ if (selecting || (!actionsQueryResult.data?.message.length && !actionsQueryResult.data?.menu.length)) {
return null;
}
@@ -97,7 +106,7 @@ const MessageToolbox = ({
};
return (
-
+
{quickReactionsEnabled &&
isReactionAllowed &&
quickReactions.slice(0, 3).map(({ emoji, image }) => {
@@ -105,7 +114,7 @@ const MessageToolbox = ({
})}
{actionsQueryResult.isSuccess &&
actionsQueryResult.data.message.map((action) => (
- action.action(e, { message, tabbar: toolbox, room, chat, autoTranslateOptions })}
key={action.id}
icon={action.icon}
@@ -124,8 +133,8 @@ const MessageToolbox = ({
data-qa-type='message-action-menu-options'
/>
)}
-
+
);
};
-export default memo(MessageToolbox);
+export default memo(MessageToolbar);
diff --git a/apps/meteor/client/components/message/toolbox/MobileToolboxDropdown.tsx b/apps/meteor/client/components/message/toolbar/MobileToolbarDropdown.tsx
similarity index 77%
rename from apps/meteor/client/components/message/toolbox/MobileToolboxDropdown.tsx
rename to apps/meteor/client/components/message/toolbar/MobileToolbarDropdown.tsx
index d97d1ff46aee..0d62a0a8e9de 100644
--- a/apps/meteor/client/components/message/toolbox/MobileToolboxDropdown.tsx
+++ b/apps/meteor/client/components/message/toolbar/MobileToolbarDropdown.tsx
@@ -4,12 +4,12 @@ import React, { forwardRef } from 'react';
import ScrollableContentWrapper from '../../ScrollableContentWrapper';
-type MobileToolboxDropdownProps = {
+type MobileToolbarDropdownProps = {
children: ReactNode;
};
-const MobileToolboxDropdown = forwardRef(function MobileToolboxDropdown(
- { children, ...props }: MobileToolboxDropdownProps,
+const MobileToolbarDropdown = forwardRef(function MobileToolbarDropdown(
+ { children, ...props }: MobileToolbarDropdownProps,
ref: Ref,
) {
return (
@@ -35,4 +35,4 @@ const MobileToolboxDropdown = forwardRef(function MobileToolboxDropdown(
);
});
-export default MobileToolboxDropdown;
+export default MobileToolbarDropdown;
diff --git a/apps/meteor/client/components/message/toolbox/ToolboxDropdown.tsx b/apps/meteor/client/components/message/toolbar/ToolbarDropdown.tsx
similarity index 64%
rename from apps/meteor/client/components/message/toolbox/ToolboxDropdown.tsx
rename to apps/meteor/client/components/message/toolbar/ToolbarDropdown.tsx
index eee619454f77..411441c0d1f6 100644
--- a/apps/meteor/client/components/message/toolbox/ToolboxDropdown.tsx
+++ b/apps/meteor/client/components/message/toolbar/ToolbarDropdown.tsx
@@ -4,25 +4,25 @@ import { useLayout } from '@rocket.chat/ui-contexts';
import type { ReactNode, ReactElement } from 'react';
import React, { useRef } from 'react';
-import DesktopToolboxDropdown from './DesktopToolboxDropdown';
-import MobileToolboxDropdown from './MobileToolboxDropdown';
+import DesktopToolbarDropdown from './DesktopToolbarDropdown';
+import MobileToolbarDropdown from './MobileToolbarDropdown';
-type ToolboxDropdownProps = {
+type ToolbarDropdownProps = {
children: ReactNode;
reference: React.RefObject;
handleClose: () => void;
};
-const ToolboxDropdown = ({
+const ToolbarDropdown = ({
children,
handleClose,
reference,
-}: ToolboxDropdownProps): ReactElement => {
+}: ToolbarDropdownProps): ReactElement => {
const { isMobile } = useLayout();
const target = useRef(null);
const boxRef = useRef(null);
- const Dropdown = isMobile ? MobileToolboxDropdown : DesktopToolboxDropdown;
+ const Dropdown = isMobile ? MobileToolbarDropdown : DesktopToolbarDropdown;
useOutsideClick([boxRef], handleClose);
@@ -35,4 +35,4 @@ const ToolboxDropdown = ({
);
};
-export default ToolboxDropdown;
+export default ToolbarDropdown;
diff --git a/apps/meteor/client/components/message/toolbar/useWebDAVMessageAction.tsx b/apps/meteor/client/components/message/toolbar/useWebDAVMessageAction.tsx
new file mode 100644
index 000000000000..a2be70077054
--- /dev/null
+++ b/apps/meteor/client/components/message/toolbar/useWebDAVMessageAction.tsx
@@ -0,0 +1,44 @@
+import { useSetModal, useSetting } from '@rocket.chat/ui-contexts';
+import React, { useEffect } from 'react';
+
+import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction';
+import { getURL } from '../../../../app/utils/client';
+import { useWebDAVAccountIntegrationsQuery } from '../../../hooks/webdav/useWebDAVAccountIntegrationsQuery';
+import { messageArgs } from '../../../lib/utils/messageArgs';
+import SaveToWebdavModal from '../../../views/room/webdav/SaveToWebdavModal';
+
+export const useWebDAVMessageAction = () => {
+ const enabled = useSetting('Webdav_Integration_Enabled', false);
+
+ const { data } = useWebDAVAccountIntegrationsQuery({ enabled });
+
+ const setModal = useSetModal();
+
+ useEffect(() => {
+ if (!enabled) {
+ return;
+ }
+
+ MessageAction.addButton({
+ id: 'webdav-upload',
+ icon: 'upload',
+ label: 'Save_To_Webdav',
+ condition: ({ message, subscription }) => {
+ return !!subscription && !!data?.length && !!message.file;
+ },
+ action(_, props) {
+ const { message = messageArgs(this).msg } = props;
+ const [attachment] = message.attachments || [];
+ const url = getURL(attachment.title_link as string, { full: true });
+
+ setModal( setModal(undefined)} />);
+ },
+ order: 100,
+ group: 'menu',
+ });
+
+ return () => {
+ MessageAction.removeButton('webdav-upload');
+ };
+ }, [data?.length, enabled, setModal]);
+};
diff --git a/apps/meteor/client/components/message/variants/RoomMessage.tsx b/apps/meteor/client/components/message/variants/RoomMessage.tsx
index 2e82753051ae..af8a6c08297c 100644
--- a/apps/meteor/client/components/message/variants/RoomMessage.tsx
+++ b/apps/meteor/client/components/message/variants/RoomMessage.tsx
@@ -17,7 +17,7 @@ import { useJumpToMessage } from '../../../views/room/MessageList/hooks/useJumpT
import { useChat } from '../../../views/room/contexts/ChatContext';
import IgnoredContent from '../IgnoredContent';
import MessageHeader from '../MessageHeader';
-import MessageToolboxHolder from '../MessageToolboxHolder';
+import MessageToolbarHolder from '../MessageToolbarHolder';
import StatusIndicators from '../StatusIndicators';
import MessageAvatar from '../header/MessageAvatar';
import RoomMessageContent from './room/RoomMessageContent';
@@ -104,7 +104,7 @@ const RoomMessage = ({
;
+ setOutlookExchangeUrl?: (url: string, userId: string) => Promise;
+ hasOutlookCredentials?: () => Promise;
+ clearOutlookCredentials?: () => void;
+ openDocumentViewer?: (url: string, format: string, options: any) => void;
+}
diff --git a/apps/meteor/client/definitions/global.d.ts b/apps/meteor/client/definitions/global.d.ts
new file mode 100644
index 000000000000..8b20108e8e48
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/apps/meteor/client/hooks/roomActions/useOmnichannelExternalFrameRoomAction.ts b/apps/meteor/client/hooks/roomActions/useOmnichannelExternalFrameRoomAction.ts
index 7f03b369b449..fe1e704f0b1c 100644
--- a/apps/meteor/client/hooks/roomActions/useOmnichannelExternalFrameRoomAction.ts
+++ b/apps/meteor/client/hooks/roomActions/useOmnichannelExternalFrameRoomAction.ts
@@ -3,7 +3,7 @@ import { lazy, useMemo } from 'react';
import type { RoomToolboxActionConfig } from '../../views/room/contexts/RoomToolboxContext';
-const ExternalFrameContainer = lazy(() => import('../../../app/livechat/client/externalFrame/ExternalFrameContainer'));
+const ExternalFrameContainer = lazy(() => import('../../views/omnichannel/ExternalFrameContainer'));
export const useOmnichannelExternalFrameRoomAction = () => {
const enabled = useSetting('Omnichannel_External_Frame_Enabled', false);
diff --git a/apps/meteor/client/hooks/roomActions/useThreadRoomAction.tsx b/apps/meteor/client/hooks/roomActions/useThreadRoomAction.tsx
index dc72ef26c66b..92cc93e339fd 100644
--- a/apps/meteor/client/hooks/roomActions/useThreadRoomAction.tsx
+++ b/apps/meteor/client/hooks/roomActions/useThreadRoomAction.tsx
@@ -1,5 +1,5 @@
import type { BadgeProps } from '@rocket.chat/fuselage';
-import { HeaderToolboxAction, HeaderToolboxActionBadge } from '@rocket.chat/ui-client';
+import { HeaderToolbarAction, HeaderToolbarActionBadge } from '@rocket.chat/ui-client';
import { useSetting } from '@rocket.chat/ui-contexts';
import React, { lazy, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@@ -46,7 +46,7 @@ export const useThreadRoomAction = () => {
tabComponent: Threads,
order: 2,
renderToolboxItem: ({ id, className, index, icon, title, toolbox: { tab }, action, disabled, tooltip }) => (
- {
disabled={disabled}
tooltip={tooltip}
>
- {!!unread && {unread} }
-
+ {!!unread && {unread} }
+
),
};
}, [enabled, t, unread, variant]);
diff --git a/apps/meteor/client/hooks/useAppActionButtons.ts b/apps/meteor/client/hooks/useAppActionButtons.ts
index 5647ca36656e..5ee20f7772bf 100644
--- a/apps/meteor/client/hooks/useAppActionButtons.ts
+++ b/apps/meteor/client/hooks/useAppActionButtons.ts
@@ -76,7 +76,7 @@ export const useMessageboxAppsActionButtons = () => {
return applyButtonFilters(action);
})
.map((action) => {
- const item: MessageBoxAction = {
+ const item: Omit = {
id: getIdForActionButton(action),
label: Utilities.getI18nKeyForApp(action.labelI18n, action.appId),
action: (params) => {
diff --git a/apps/meteor/client/hooks/useAvatarSuggestions.ts b/apps/meteor/client/hooks/useAvatarSuggestions.ts
deleted file mode 100644
index 223cab8ca4b4..000000000000
--- a/apps/meteor/client/hooks/useAvatarSuggestions.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
-
-export const useAvatarSuggestions = () => {
- const getAvatarSuggestions = useEndpoint('GET', '/v1/users.getAvatarSuggestion');
-
- return useQuery(['getAvatarSuggestion'], async () => getAvatarSuggestions());
-};
diff --git a/apps/meteor/client/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 = (undefined extends UrlParams
? {
@@ -16,26 +16,21 @@ export function useEndpointAction = { keys: {} as UrlParams },
-): EndpointFunction {
+) {
const sendData = useEndpoint(method, pathPattern, options.keys as UrlParams);
const dispatchToastMessage = useToastMessageDispatch();
- return useCallback(
- async (params: OperationParams | undefined) => {
- try {
- const data = await sendData(params as OperationParams);
-
- 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
-
- [0], { context: status })}
-
-
- {status === 'waiting' && <> {t('meteor_status_reconnect_in', { count: reconnectCountdown })}}
-
- {['waiting', 'offline'].includes(status) && (
- <>
- {' '}
-
- {t('meteor_status_try_now' as Parameters[0], { context: status })}
-
-
- )}
-
+