166 lines
9.4 KiB
TypeScript
166 lines
9.4 KiB
TypeScript
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
|
||
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
||
import { Avatar, Badge, Box, Divider, Flex, Loader, Skeleton, Text, useComputedColorScheme, useMantineTheme } from "@mantine/core";
|
||
import { IconAlertCircle, IconBellOff, IconBookmark, IconCheck, IconChecks, IconClock, IconPin } from "@tabler/icons-react";
|
||
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
|
||
import { VerifiedBadge } from "../VerifiedBadge/VerifiedBadge";
|
||
import { OnlineState } from "@/app/providers/ProtocolProvider/protocol/packets/packet.onlinestate";
|
||
import { DeliveredMessageState } from "@/app/providers/DialogProvider/DialogProvider";
|
||
import { dotMessageIfNeeded, isMessageDeliveredByTime } from "@/app/utils/utils";
|
||
import { usePacket } from "@/app/providers/ProtocolProvider/usePacket";
|
||
import { useRef, useState } from "react";
|
||
import { PacketTyping } from "@/app/providers/ProtocolProvider/protocol/packets/packet.typeing";
|
||
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
|
||
import { TextParser } from "../TextParser/TextParser";
|
||
import { useMemory } from "@/app/providers/MemoryProvider/useMemory";
|
||
import { DialogRow } from "@/app/providers/DialogListProvider/DialogListProvider";
|
||
import { useDialogInfo } from "@/app/providers/DialogListProvider/useDialogInfo";
|
||
import { useDialogContextMenu } from "@/app/hooks/useDialogContextMenu";
|
||
import { useDialogPin } from "@/app/providers/DialogStateProvider.tsx/useDialogPin";
|
||
import { useDialogMute } from "@/app/providers/DialogStateProvider.tsx/useDialogMute";
|
||
|
||
export interface DialogProps extends DialogRow {
|
||
onClickDialog: (dialog: string) => void;
|
||
}
|
||
|
||
export function Dialog(props : DialogProps) {
|
||
const colors = useRosettaColors();
|
||
const theme = useMantineTheme();
|
||
const computedTheme = useComputedColorScheme();
|
||
const publicKey = usePublicKey();
|
||
|
||
/**
|
||
* Принимает public_key оппонента, для групп
|
||
* есть отдельный компонент GroupDialog
|
||
*/
|
||
const opponent = props.dialog_id;
|
||
const {isMuted} = useDialogMute(opponent);
|
||
const {isPinned} = useDialogPin(opponent);
|
||
|
||
const [userInfo] = useUserInformation(opponent);
|
||
|
||
const {lastMessage, unreaded, loading} = useDialogInfo(props);
|
||
|
||
const lastMessageFromMe = lastMessage.from_me == 1;
|
||
const fromMe = opponent == publicKey;
|
||
const [userTypeing, setUserTypeing] = useState(false);
|
||
const timeoutRef = useRef<NodeJS.Timeout>(undefined);
|
||
const avatars = useAvatars(opponent);
|
||
const [сurrentDialogPublicKeyView] = useMemory("current-dialog-public-key-view", "", true);
|
||
const {openContextMenu} = useDialogContextMenu();
|
||
|
||
const isInCurrentDialog = props.dialog_id == сurrentDialogPublicKeyView;
|
||
const currentDialogColor = computedTheme == 'dark' ? '#2a6292' :'#438fd1';
|
||
|
||
usePacket(0x0B, (packet : PacketTyping) => {
|
||
if(packet.getFromPublicKey() == opponent && packet.getToPublicKey() == publicKey && !fromMe){
|
||
console.info("User typeing packet received in Dialog");
|
||
setUserTypeing(true);
|
||
clearTimeout(timeoutRef.current);
|
||
timeoutRef.current = setTimeout(() => {
|
||
setUserTypeing(false);
|
||
}, 3000);
|
||
}
|
||
}, [opponent]);
|
||
|
||
return (
|
||
<Box style={{
|
||
cursor: 'pointer',
|
||
userSelect: 'none',
|
||
backgroundColor: isInCurrentDialog ? currentDialogColor : 'unset',
|
||
}}
|
||
onClick={() => props.onClickDialog(props.dialog_id)}
|
||
onContextMenu={() => {
|
||
openContextMenu(props.dialog_id)
|
||
}}
|
||
>
|
||
<Flex p={'sm'} gap={'sm'}>
|
||
{
|
||
fromMe ?
|
||
<Avatar
|
||
size={50}
|
||
color={'blue'}
|
||
variant={'filled'}
|
||
>
|
||
<IconBookmark stroke={2} size={20}></IconBookmark>
|
||
</Avatar> :
|
||
<Box style={{ position: 'relative', display: 'inline-block' }}>
|
||
<Avatar src={avatars.length > 0 ? avatars[0].avatar : undefined} variant={isInCurrentDialog ? 'filled' : 'light'} name={userInfo.title} size={50} color={'initials'} />
|
||
{userInfo.online == OnlineState.ONLINE && (
|
||
<Box
|
||
style={{
|
||
position: 'absolute',
|
||
width: 12,
|
||
height: 12,
|
||
backgroundColor: colors.brandColor,
|
||
borderRadius: '50%',
|
||
border: computedTheme == 'dark' ? '2px solid #1A1B1E' : '2px solid #FFFFFF',
|
||
bottom: 4,
|
||
right: 0,
|
||
}}
|
||
/>
|
||
)}
|
||
</Box>
|
||
}
|
||
<Flex w={'100%'} justify={'space-between'} direction={'row'} gap={'sm'}>
|
||
<Flex direction={'column'} gap={3}>
|
||
<Flex align={'center'} gap={5}>
|
||
<Text size={'sm'} c={computedTheme == 'light' && !isInCurrentDialog ? 'black' : 'white'} fw={500}>
|
||
{fromMe ? "Saved messages" : dotMessageIfNeeded(userInfo.title, 15)}
|
||
</Text>
|
||
<VerifiedBadge color={isInCurrentDialog ? 'white' : ''} size={15} verified={userInfo.verified}></VerifiedBadge>
|
||
{isMuted && <IconBellOff color={isInCurrentDialog ? '#fff' : colors.chevrons.active} size={13}></IconBellOff>}
|
||
{isPinned && <IconPin color={isInCurrentDialog ? '#fff' : colors.chevrons.active} size={13}></IconPin>}
|
||
</Flex>
|
||
{!userTypeing && <>
|
||
<Text component="div" c={
|
||
isInCurrentDialog ? '#fff' : colors.chevrons.active
|
||
} size={'xs'} style={{
|
||
maxWidth: '130px',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
}}>
|
||
{loading && <Skeleton height={10} mt={4} width={100}></Skeleton>}
|
||
{!loading && <TextParser __reserved_1={isInCurrentDialog} noHydrate={true} text={lastMessage.plain_message}></TextParser>}
|
||
</Text>
|
||
</>}
|
||
{userTypeing && <>
|
||
<Flex gap={5} align={'center'}>
|
||
<Text c={isInCurrentDialog ? '#fff' : theme.colors.blue[3]} fz={12}>typing </Text>
|
||
<Loader size={15} color={isInCurrentDialog ? '#fff' : theme.colors.blue[3]} type={'dots'}></Loader>
|
||
</Flex>
|
||
</>}
|
||
</Flex>
|
||
<Flex direction={'column'} align={'flex-end'} gap={8}>
|
||
{!loading && (
|
||
<Text c={сurrentDialogPublicKeyView == props.dialog_id ? '#fff' : colors.chevrons.active} fz={10}>
|
||
{new Date(lastMessage.timestamp).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })}
|
||
</Text>
|
||
)}
|
||
{loading && (
|
||
<Skeleton height={8} mt={4} width={30}></Skeleton>
|
||
)}
|
||
{lastMessage.delivered == DeliveredMessageState.DELIVERED && <>
|
||
{lastMessageFromMe && unreaded > 0 &&
|
||
<IconCheck stroke={3} color={isInCurrentDialog ? '#fff' : theme.colors.blue[3]} size={14}></IconCheck>}
|
||
{lastMessageFromMe && unreaded <= 0 &&
|
||
<IconChecks stroke={3} color={isInCurrentDialog ? '#fff' : theme.colors.blue[3]} size={14}></IconChecks>}
|
||
</>}
|
||
{(lastMessage.delivered == DeliveredMessageState.WAITING && (isMessageDeliveredByTime(lastMessage.timestamp, lastMessage.attachments.length))) && <>
|
||
<IconClock stroke={2} size={13} color={theme.colors.gray[5]}></IconClock>
|
||
</>}
|
||
{!loading && (lastMessage.delivered == DeliveredMessageState.ERROR || (!isMessageDeliveredByTime(lastMessage.timestamp, lastMessage.attachments.length) && lastMessage.delivered != DeliveredMessageState.DELIVERED)) && (
|
||
<IconAlertCircle stroke={3} size={15} color={colors.error}></IconAlertCircle>
|
||
)}
|
||
{unreaded > 0 && !lastMessageFromMe && <Badge
|
||
color={isInCurrentDialog ? 'white' : (isMuted ? colors.chevrons.active : colors.brandColor)}
|
||
c={isInCurrentDialog ? colors.brandColor : 'white'}
|
||
size={'sm'} circle={unreaded < 10}>{unreaded > 99 ? '99+' : unreaded}</Badge>}
|
||
</Flex>
|
||
</Flex>
|
||
</Flex>
|
||
<Divider></Divider>
|
||
</Box>
|
||
)
|
||
} |