369 lines
21 KiB
TypeScript
369 lines
21 KiB
TypeScript
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
|
|
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
|
|
import { getInitialsColor, isMessageDeliveredByTime } from "@/app/utils/utils";
|
|
import { Avatar, Box, Flex, MantineColor, Text, useComputedColorScheme, useMantineTheme } from "@mantine/core";
|
|
import { IconCheck, IconChecks, IconCircleCheck, IconCircleCheckFilled, IconCircleX, IconClock, IconTextCaption } from "@tabler/icons-react";
|
|
import { MessageError } from "../MessageError/MessageError";
|
|
import { DeliveredMessageState } from "@/app/providers/DialogProvider/DialogProvider";
|
|
import { Attachment, AttachmentType } from "@/app/providers/ProtocolProvider/protocol/packets/packet.message";
|
|
import { MessageAttachments } from "../MessageAttachments/MessageAttachments";
|
|
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
|
|
import { useContextMenu } from "@/app/providers/ContextMenuProvider/useContextMenu";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { MessageReply, useReplyMessages } from "@/app/providers/DialogProvider/useReplyMessages";
|
|
import { useSetting } from "@/app/providers/SettingsProvider/useSetting";
|
|
import { useRosettaBreakpoints } from "@/app/hooks/useRosettaBreakpoints";
|
|
import { TextParser } from "../TextParser/TextParser";
|
|
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { ATTACHMENTS_NOT_ALLOWED_TO_REPLY, ENTITY_LIMITS_TO_PARSE_IN_MESSAGE } from "@/app/constants";
|
|
import { useDialog } from "@/app/providers/DialogProvider/useDialog";
|
|
import { VerifiedBadge } from "../VerifiedBadge/VerifiedBadge";
|
|
import { useGroupMembers } from "@/app/providers/InformationProvider/useGroupMembers";
|
|
|
|
|
|
export enum MessageStyle {
|
|
BUBBLES = 'bubbles',
|
|
ROWS = 'rows'
|
|
}
|
|
|
|
export interface MessageProps {
|
|
message: string;
|
|
from_me?: boolean;
|
|
readed?: boolean;
|
|
avatar_no_render?: boolean;
|
|
delivered: DeliveredMessageState;
|
|
from: string;
|
|
timestamp: number;
|
|
message_id: string;
|
|
attachments: Attachment[];
|
|
replyed?: boolean;
|
|
is_last_message_in_stack?: boolean;
|
|
chacha_key_plain: string;
|
|
parent?: MessageProps;
|
|
}
|
|
|
|
interface MessageSystemProps {
|
|
message: string;
|
|
c?: MantineColor;
|
|
}
|
|
|
|
export function MessageSystem(props: MessageSystemProps) {
|
|
const [wallpaper] = useSetting<string>
|
|
('wallpaper', '');
|
|
return (<>
|
|
<Flex w={'100%'} mt={'xs'} mb={'xs'} justify={'center'} align={'center'}>
|
|
<Box p={'sm'} style={{
|
|
cursor: 'pointer',
|
|
backgroundColor: wallpaper != '' ? (useComputedColorScheme() == 'light' ? 'white' : '#2C2E33') : 'transparent',
|
|
maxWidth: 200,
|
|
borderRadius: 10,
|
|
padding: 0
|
|
}}>
|
|
<Flex h={8} align={'center'} justify={'center'}>
|
|
<Text fz={12} c={props.c || 'gray'} fw={600}>
|
|
{props.message}
|
|
</Text>
|
|
</Flex>
|
|
</Box>
|
|
</Flex>
|
|
</>);
|
|
}
|
|
|
|
export function Message(props: MessageProps) {
|
|
const computedTheme = useComputedColorScheme();
|
|
const theme = useMantineTheme();
|
|
const publicKey = usePublicKey();
|
|
const openContextMenu = useContextMenu();
|
|
const colors = useRosettaColors();
|
|
const navigate = useNavigate();
|
|
const { isSelectionStarted,
|
|
selectMessage,
|
|
deselectMessage,
|
|
isMessageSelected,
|
|
translateMessagesToDialogInput
|
|
} = useReplyMessages();
|
|
const { dialog } = useDialog();
|
|
const { md } = useRosettaBreakpoints();
|
|
const { members } = useGroupMembers(dialog);
|
|
|
|
const [showTimeInReplyMessages] = useSetting<boolean>
|
|
('showTimeInReplyMessages', false);
|
|
const [wallpaper] = useSetting<string>
|
|
('wallpaper', '');
|
|
|
|
const [userInfo] = useUserInformation(publicKey);
|
|
const [opponent] = useUserInformation(props.from);
|
|
const user = props.from_me ? userInfo : {
|
|
...opponent,
|
|
avatar: ""
|
|
};
|
|
|
|
const messageReply: MessageReply = {
|
|
timestamp: props.timestamp,
|
|
publicKey: user.publicKey,
|
|
message: props.message,
|
|
attachments: props.attachments.filter(a => a.type != AttachmentType.MESSAGES),
|
|
message_id: props.message_id
|
|
};
|
|
|
|
const avatars = useAvatars(user.publicKey);
|
|
|
|
const [messageStyle] = useSetting<MessageStyle>
|
|
('messageStyle', MessageStyle.ROWS);
|
|
|
|
const computedMessageStyle = props.replyed ? MessageStyle.ROWS : messageStyle;
|
|
|
|
|
|
const navigateToUserProfile = () => {
|
|
if (isSelectionStarted()) {
|
|
return;
|
|
}
|
|
navigate(`/main/profile/${user.publicKey}`);
|
|
}
|
|
|
|
const canReply = () => {
|
|
if (props.replyed) {
|
|
return false;
|
|
}
|
|
if (messageReply.attachments.find((v) => ATTACHMENTS_NOT_ALLOWED_TO_REPLY.includes(v.type))) {
|
|
return false;
|
|
}
|
|
if (messageReply.message.trim().length == 0 && messageReply.attachments.length == 0) {
|
|
return false;
|
|
}
|
|
if (props.delivered != DeliveredMessageState.DELIVERED) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
const onMessageSelectClick = () => {
|
|
if (props.replyed || !canReply()) {
|
|
return;
|
|
}
|
|
if (isMessageSelected(messageReply)) {
|
|
deselectMessage(messageReply);
|
|
} else {
|
|
selectMessage(messageReply);
|
|
}
|
|
}
|
|
|
|
const onDobuleClick = () => {
|
|
if (!canReply()) {
|
|
return;
|
|
}
|
|
if (isSelectionStarted()) {
|
|
return;
|
|
}
|
|
selectMessage(messageReply);
|
|
translateMessagesToDialogInput(dialog);
|
|
}
|
|
|
|
return (<>
|
|
<Box onDoubleClick={onDobuleClick} onClick={isSelectionStarted() ? onMessageSelectClick : undefined} onContextMenu={() => !props.replyed && openContextMenu([
|
|
{
|
|
label: 'Copy Message',
|
|
action: () => {
|
|
navigator.clipboard.writeText(props.message);
|
|
},
|
|
icon: <IconTextCaption size={14}></IconTextCaption>,
|
|
cond: async () => {
|
|
return props.message.trim().length > 0;
|
|
}
|
|
},
|
|
{
|
|
label: !isMessageSelected(messageReply) ? 'Select' : 'Deselect',
|
|
action: onMessageSelectClick,
|
|
icon: !isMessageSelected(messageReply) ? <IconCircleCheck size={14}></IconCircleCheck> : <IconCircleX color={theme.colors.red[5]} size={14}></IconCircleX>,
|
|
cond: () => {
|
|
return canReply();
|
|
},
|
|
}
|
|
])} p={'sm'} pt={props.avatar_no_render ? 0 : 'sm'} style={{
|
|
cursor: 'pointer',
|
|
userSelect: 'auto'
|
|
}}>
|
|
{computedMessageStyle == MessageStyle.ROWS && (
|
|
<Flex direction={'row'} justify={'space-between'} gap={'sm'}>
|
|
<Flex direction={'row'} gap={'sm'}>
|
|
{(!props.avatar_no_render && (md || !props.replyed)) && <Avatar onClick={navigateToUserProfile} src={avatars.length > 0 ? avatars[0].avatar : undefined} name={user.title} variant={props.parent ? 'filled' : 'light'} color="initials"></Avatar>}
|
|
<Flex direction={'column'}>
|
|
<Flex direction={'row'} gap={3} align={'center'}>
|
|
{!props.avatar_no_render && (
|
|
/** Только если не установлен флаг который
|
|
* запрещает рендеринг аватарки и имени*/
|
|
<>
|
|
<Text style={{
|
|
userSelect: 'none'
|
|
}} size={'sm'} onClick={navigateToUserProfile} c={getInitialsColor(user.title)} fw={500}>{user.title}</Text>
|
|
{(members.length > 0 && members[0] == props.from) && (
|
|
<VerifiedBadge size={18} color={'gold'} verified={3}></VerifiedBadge>
|
|
)}
|
|
</>
|
|
)}
|
|
</Flex>
|
|
{props.attachments.length > 0 &&
|
|
<Box ml={props.avatar_no_render ? 50 : undefined}>
|
|
<MessageAttachments parent={props} chacha_key_plain={props.chacha_key_plain} text={props.message.trim()} key={props.message_id} timestamp={props.timestamp} delivered={props.delivered} attachments={props.attachments}></MessageAttachments>
|
|
</Box>
|
|
}
|
|
<Box style={{
|
|
whiteSpace: 'pre-wrap',
|
|
wordBreak: 'break-word',
|
|
userSelect: 'text',
|
|
fontSize: '13px',
|
|
color: messageStyle == MessageStyle.BUBBLES ? (computedTheme == 'light' ? (props.parent?.from_me ? 'white' : 'black') : 'white') : (computedTheme == 'light' ? 'black' : 'white')
|
|
}} ml={props.avatar_no_render ? 50 : undefined}>
|
|
<TextParser performanceEntityLimit={ENTITY_LIMITS_TO_PARSE_IN_MESSAGE} oversizeIfTextSmallerThan={1} text={props.message.trim()}></TextParser>
|
|
</Box>
|
|
</Flex>
|
|
</Flex>
|
|
<Flex gap={5} justify={'end'} align={'flex-start'} style={{ flexShrink: 0, minWidth: props.replyed ? 0 : 50 }}>
|
|
<Flex gap={5} justify={'end'} align={'center'}>
|
|
{!isSelectionStarted() && <>
|
|
{props.delivered == DeliveredMessageState.DELIVERED && <>
|
|
{props.from_me && !props.readed && (
|
|
<IconCheck color={theme.colors.gray[5]} stroke={3} size={16}></IconCheck>
|
|
)}
|
|
{props.from_me && props.readed && (
|
|
<IconChecks stroke={3} size={16} color={theme.colors.blue[5]}></IconChecks>
|
|
)}
|
|
</>}
|
|
{(props.delivered == DeliveredMessageState.WAITING && (isMessageDeliveredByTime(props.timestamp, props.attachments.length))) && <>
|
|
<IconClock stroke={2} size={14} color={theme.colors.gray[5]}></IconClock>
|
|
</>}
|
|
{(props.delivered == DeliveredMessageState.ERROR || ((!isMessageDeliveredByTime(props.timestamp, props.attachments.length)) && props.delivered != DeliveredMessageState.DELIVERED)) && (
|
|
<MessageError messageId={props.message_id} text={props.message}></MessageError>
|
|
)}
|
|
</>}
|
|
{(isSelectionStarted() && !props.replyed && canReply()) && <>
|
|
{isMessageSelected(messageReply) ?
|
|
<IconCircleCheckFilled size={16} color={theme.colors.green[5]}></IconCircleCheckFilled>
|
|
:
|
|
<IconCircleCheck size={16} color={theme.colors.gray[5]}></IconCircleCheck>
|
|
}
|
|
</>}
|
|
{(isSelectionStarted() && !canReply() && !props.replyed) && <IconCircleX size={16} color={theme.colors.red[5]}></IconCircleX>}
|
|
{(showTimeInReplyMessages || !props.replyed) && <Text style={{
|
|
userSelect: 'none'
|
|
}} fz={12} c={colors.chevrons.active} w={30}>{
|
|
new Date(props.timestamp).toLocaleTimeString('en-GB', {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
}</Text>}
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
)}
|
|
{computedMessageStyle == MessageStyle.BUBBLES && (() => {
|
|
const hasOnlyAttachments = props.attachments.length > 0 && props.message.trim().length === 0;
|
|
|
|
return (
|
|
<Flex direction={props.from_me ? 'row-reverse' : 'row'} gap={'sm'} align={'flex-end'}>
|
|
{(md && props.is_last_message_in_stack) && (
|
|
<Avatar onClick={navigateToUserProfile} src={avatars.length > 0 ? avatars[0].avatar : undefined} name={user.title} color="initials" variant={wallpaper != '' ? 'filled' : 'light'} style={{ flexShrink: 0 }}></Avatar>
|
|
)}
|
|
{(md && !props.is_last_message_in_stack) && (
|
|
<Box style={{ width: 40, height: 40, flexShrink: 0 }}></Box>
|
|
)}
|
|
<Flex direction={'column'} align={props.from_me ? 'flex-end' : 'flex-start'} gap={4}>
|
|
{(!props.avatar_no_render && dialog.includes("#group") && wallpaper == '') && (
|
|
<Flex direction={'row'} ml={2} gap={3} align={'center'}>
|
|
<Text style={{
|
|
userSelect: 'none'
|
|
}} size={'sm'} onClick={navigateToUserProfile} c={getInitialsColor(user.title)} fw={500}>{user.title}</Text>
|
|
{(members.length > 0 && members[0] == props.from) && (
|
|
<VerifiedBadge size={18} color={'gold'} verified={3}></VerifiedBadge>
|
|
)}
|
|
</Flex>
|
|
)}
|
|
<Box style={{
|
|
backgroundColor: hasOnlyAttachments ? 'transparent' : (props.from_me
|
|
? (computedTheme == 'light' ? theme.colors.blue[6] : theme.colors.blue[9])
|
|
: (computedTheme == 'light' ? (wallpaper != '' ? 'white' : theme.colors.gray[3]) : theme.colors.dark[6])),
|
|
borderRadius: props.avatar_no_render ? '8px' : '12px',
|
|
//borderTopLeftRadius: (!props.from_me && props.avatar_no_render) ? '2px' : undefined,
|
|
//borderTopRightRadius: (props.from_me && props.avatar_no_render) ? '2px' : undefined,
|
|
padding: hasOnlyAttachments ? 0 : '8px 12px',
|
|
maxWidth: md ? '500px' : '280px',
|
|
position: 'relative',
|
|
marginLeft: !props.from_me && props.is_last_message_in_stack ? 2 : 0
|
|
}}>
|
|
{props.attachments.length > 0 &&
|
|
<Box mb={props.message.trim().length > 0 ? 4 : 0}>
|
|
<MessageAttachments parent={props} chacha_key_plain={props.chacha_key_plain} text={props.message.trim()} key={props.message_id} timestamp={props.timestamp} delivered={props.delivered} attachments={props.attachments}></MessageAttachments>
|
|
</Box>
|
|
}
|
|
{props.message.trim().length > 0 && (
|
|
<Box style={{
|
|
whiteSpace: 'pre-wrap',
|
|
wordBreak: 'break-word',
|
|
userSelect: 'text',
|
|
fontSize: '14px',
|
|
color: props.from_me ? 'white' : (computedTheme == 'light' ? 'black' : 'white')
|
|
}}>
|
|
<TextParser __reserved_2 performanceEntityLimit={ENTITY_LIMITS_TO_PARSE_IN_MESSAGE} oversizeIfTextSmallerThan={1} text={props.message.trim()}></TextParser>
|
|
</Box>
|
|
)}
|
|
<Flex gap={5} justify={'flex-end'} align={'center'} mt={hasOnlyAttachments ? 0 : 4} style={{
|
|
...(hasOnlyAttachments && props.attachments.find(a => a.type != AttachmentType.MESSAGES) ? {
|
|
position: 'absolute',
|
|
bottom: 8,
|
|
right: 8,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
padding: '3px 8px',
|
|
borderRadius: '10px',
|
|
backdropFilter: 'blur(4px)'
|
|
} : {})
|
|
}}>
|
|
{wallpaper != '' && dialog.includes("#group") && (
|
|
<Text style={{
|
|
userSelect: 'none',
|
|
color: hasOnlyAttachments ? 'white' : (props.from_me ? (computedTheme == 'light' ? theme.colors.blue[2] : theme.colors.blue[4]) : (computedTheme == 'light' ? theme.colors.gray[6] : theme.colors.gray[4]))
|
|
}} fz={11} mr={4}>
|
|
{user.title}
|
|
</Text>
|
|
)}
|
|
{!isSelectionStarted() && <>
|
|
{props.delivered == DeliveredMessageState.DELIVERED && <>
|
|
{props.from_me && !props.readed && (
|
|
<IconCheck color={hasOnlyAttachments ? 'white' : theme.colors.gray[5]} stroke={3} size={14}></IconCheck>
|
|
)}
|
|
{props.from_me && props.readed && (
|
|
<IconChecks stroke={3} size={14} color={hasOnlyAttachments ? 'white' : theme.colors.blue[2]}></IconChecks>
|
|
)}
|
|
</>}
|
|
{(props.delivered == DeliveredMessageState.WAITING && (isMessageDeliveredByTime(props.timestamp, props.attachments.length))) && <>
|
|
<IconClock stroke={2} size={12} color={hasOnlyAttachments ? 'white' : theme.colors.gray[5]}></IconClock>
|
|
</>}
|
|
{(props.delivered == DeliveredMessageState.ERROR || ((!isMessageDeliveredByTime(props.timestamp, props.attachments.length)) && props.delivered != DeliveredMessageState.DELIVERED)) && (
|
|
<MessageError messageId={props.message_id} text={props.message}></MessageError>
|
|
)}
|
|
</>}
|
|
{(isSelectionStarted() && !props.replyed && canReply()) && <>
|
|
{isMessageSelected(messageReply) ?
|
|
<IconCircleCheckFilled size={14} color={hasOnlyAttachments ? 'white' : theme.colors.green[5]}></IconCircleCheckFilled>
|
|
:
|
|
<IconCircleCheck size={14} color={hasOnlyAttachments ? 'white' : theme.colors.gray[5]}></IconCircleCheck>
|
|
}
|
|
</>}
|
|
{(isSelectionStarted() && !canReply() && !props.replyed) && <IconCircleX size={14} color={hasOnlyAttachments ? 'white' : theme.colors.red[5]}></IconCircleX>}
|
|
{(showTimeInReplyMessages || !props.replyed) && <Text style={{
|
|
userSelect: 'none',
|
|
color: hasOnlyAttachments ? 'white' : (props.from_me ? (computedTheme == 'light' ? theme.colors.blue[2] : theme.colors.blue[4]) : (computedTheme == 'light' ? theme.colors.gray[6] : theme.colors.gray[4]))
|
|
}} fz={11}>
|
|
{new Date(props.timestamp).toLocaleTimeString('en-GB', {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})}
|
|
</Text>}
|
|
</Flex>
|
|
</Box>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
})()}
|
|
</Box>
|
|
</>);
|
|
} |