client/src/components/Message.tsx

/*
 * Copyright (C) 2022 Savoir-faire Linux Inc.
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation; either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public
 * License along with this program.  If not, see
 * <https://www.gnu.org/licenses/>.
 */
import { Box, Chip, Divider, Link, Stack, Tooltip, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import dayjs, { Dayjs } from 'dayjs';
import { Message } from 'jami-web-common';
import Linkify from 'linkify-react';
import * as linkify from 'linkifyjs';
import { ReactElement, ReactNode, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { Account } from '../models/account';
import { Contact } from '../models/contact';
import { useLinkPreviewQuery } from '../services/linkPreviewQueries';
import { getMessageCallText, getMessageMemberText } from '../utils/chatmessages';
import { formatRelativeDate, formatTime } from '../utils/dates&times';
import { EmojiButton, MoreButton, ReplyMessageButton } from './Button';
import ConversationAvatar from './ConversationAvatar';
import LoadingPage from './Loading';
import PopoverList, { PopoverListItemData } from './PopoverList';
import {
  ArrowLeftCurved,
  ArrowLeftDown,
  ArrowRightUp,
  OppositeArrowsIcon,
  TrashBinIcon,
  TwoSheetsIcon,
} from './SvgIcon';

type MessagePosition = 'start' | 'end';

const notificationMessageTypes = ['initial', 'member'] as const;
type NotificationMessageType = typeof notificationMessageTypes[number];
const checkIsNotificationMessageType = (type: Message['type'] | undefined): type is NotificationMessageType => {
  return notificationMessageTypes.includes(type as NotificationMessageType);
};

const invisibleMessageTypes = ['application/update-profile', 'merge', 'vote'] as const;
type InvisibleMessageType = typeof invisibleMessageTypes[number];
const checkIsInvisibleMessageType = (type: Message['type'] | undefined): type is InvisibleMessageType => {
  return invisibleMessageTypes.includes(type as InvisibleMessageType);
};

const userMessageTypes = ['text/plain', 'application/data-transfer+json', 'application/call-history+json'] as const;
type UserMessageType = typeof userMessageTypes[number];
const checkIsUserMessageType = (type: Message['type'] | undefined): type is UserMessageType => {
  return userMessageTypes.includes(type as UserMessageType);
};

const checkShowsTime = (time: Dayjs, previousTime: Dayjs) => {
  return !previousTime.isSame(time) && !time.isBetween(previousTime, previousTime?.add(1, 'minute'));
};

const findPreviousVisibleMessage = (messages: Message[], messageIndex: number) => {
  for (let i = messageIndex + 1; i < messages.length; ++i) {
    const message = messages[i];
    if (!checkIsInvisibleMessageType(message?.type)) {
      return message;
    }
  }
};

const findNextVisibleMessage = (messages: Message[], messageIndex: number) => {
  for (let i = messageIndex - 1; i >= 0; --i) {
    const message = messages[i];
    if (!checkIsInvisibleMessageType(message?.type)) {
      return message;
    }
  }
};

const avatarSize = '22px';
const spacingBetweenAvatarAndBubble = '10px';
const bubblePadding = '16px';

interface MessageCallProps {
  message: Message;
  isAccountMessage: boolean;
  isFirstOfGroup: boolean;
  isLastOfGroup: boolean;
}

const MessageCall = ({ message, isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageCallProps) => {
  const position = isAccountMessage ? 'end' : 'start';

  const { i18n } = useTranslation();
  const { bubbleColor, Icon, text, textColor } = useMemo(() => {
    const text = getMessageCallText(isAccountMessage, message, i18n);
    const callDuration = dayjs.duration(parseInt(message?.duration || ''));
    if (callDuration.asSeconds() === 0) {
      if (isAccountMessage) {
        return {
          text,
          Icon: ArrowLeftCurved,
          textColor: 'white',
          bubbleColor: '#005699' + '80', // opacity 50%
        };
      } else {
        return {
          text,
          Icon: ArrowLeftCurved,
          textColor: 'black',
          bubbleColor: '#C6C6C6',
        };
      }
    } else {
      if (isAccountMessage) {
        return {
          text,
          Icon: ArrowRightUp,
          textColor: 'white',
          bubbleColor: '#005699',
        };
      } else {
        return {
          text,
          Icon: ArrowLeftDown,
          textcolor: 'black',
          bubbleColor: '#E5E5E5',
        };
      }
    }
  }, [isAccountMessage, message, i18n]);

  return (
    <Bubble position={position} isFirstOfGroup={isFirstOfGroup} isLastOfGroup={isLastOfGroup} bubbleColor={bubbleColor}>
      <Stack direction="row" spacing="10px" alignItems="center">
        <Icon sx={{ fontSize: '16px', color: textColor }} />
        <Typography variant="body1" color={textColor} textAlign={position} fontWeight="bold" textTransform="uppercase">
          {text}
        </Typography>
      </Stack>
    </Bubble>
  );
};

const MessageInitial = () => {
  const { t } = useTranslation();
  return <>{t('message_swarm_created')}</>;
};

interface MessageDataTransferProps {
  message: Message;
  isAccountMessage: boolean;
  isFirstOfGroup: boolean;
  isLastOfGroup: boolean;
}

const MessageDataTransfer = ({ isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageDataTransferProps) => {
  const position = isAccountMessage ? 'end' : 'start';
  return (
    <Bubble bubbleColor="#E5E5E5" position={position} isFirstOfGroup={isFirstOfGroup} isLastOfGroup={isLastOfGroup}>
      &quot;data-transfer&quot;
    </Bubble>
  );
};

interface MessageMemberProps {
  message: Message;
}

const MessageMember = ({ message }: MessageMemberProps) => {
  const { i18n } = useTranslation();

  const text = getMessageMemberText(message, i18n);
  return (
    <Chip
      sx={{
        width: 'fit-content',
      }}
      label={text}
    />
  );
};

type LinkPreviewProps = {
  isAccountMessage: boolean;
  link: string;
};

const LinkPreview = ({ isAccountMessage, link }: LinkPreviewProps) => {
  const [imageIsWorking, setImageIsWorking] = useState(true);
  const linkPreviewQuery = useLinkPreviewQuery(link);
  if (linkPreviewQuery.isLoading) {
    return <LoadingPage />;
  }
  if (!linkPreviewQuery.isSuccess) {
    return null;
  }
  const linkPreview = linkPreviewQuery.data;

  return (
    <a href={link} style={{ textDecorationLine: 'none' }}>
      <Stack>
        {imageIsWorking && linkPreview.image && (
          <img
            style={{
              padding: '15px 0',
            }}
            alt={linkPreview.title}
            src={linkPreview.image}
            onError={() => setImageIsWorking(false)}
          />
        )}
        <Typography variant="body1" color={isAccountMessage ? '#cccccc' : 'black'}>
          {linkPreview.title}
        </Typography>
        {linkPreview.description && (
          <Typography variant="body1" sx={{ color: isAccountMessage ? '#ffffff' : '#005699' }}>
            {linkPreview.description}
          </Typography>
        )}
        <Typography variant="body1" color={isAccountMessage ? '#cccccc' : 'black'}>
          {new URL(link).hostname}
        </Typography>
      </Stack>
    </a>
  );
};

type RenderLinkProps = {
  attributes: {
    isAccountMessage: boolean;
    href: string;
  };
  content: ReactNode;
};

const RenderLink = ({ attributes, content }: RenderLinkProps) => {
  const { href, isAccountMessage, ...props } = attributes;
  return (
    <Link href={href} {...props} variant="body1" color={isAccountMessage ? '#ffffff' : undefined}>
      {content}
    </Link>
  );
};

interface MessageTextProps {
  message: Message;
  isAccountMessage: boolean;
  isFirstOfGroup: boolean;
  isLastOfGroup: boolean;
}

const MessageText = ({ message, isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageTextProps) => {
  const position = isAccountMessage ? 'end' : 'start';
  const bubbleColor = isAccountMessage ? '#005699' : '#E5E5E5';
  const textColor = isAccountMessage ? 'white' : 'black';

  const link = useMemo(() => linkify.find(message?.body ?? '', 'url')[0]?.href, [message]);

  return (
    <MessageTooltip position={position}>
      <Bubble
        bubbleColor={bubbleColor}
        position={position}
        isFirstOfGroup={isFirstOfGroup}
        isLastOfGroup={isLastOfGroup}
        maxWidth={link ? '400px' : undefined}
      >
        <Typography variant="body1" color={textColor} textAlign={position}>
          <Linkify options={{ render: RenderLink as any, attributes: { isAccountMessage } }}>{message.body}</Linkify>
        </Typography>
        {link && <LinkPreview isAccountMessage={isAccountMessage} link={link} />}
      </Bubble>
    </MessageTooltip>
  );
};

interface DateIndicatorProps {
  time: Dayjs;
}

const DateIndicator = ({ time }: DateIndicatorProps) => {
  const { i18n } = useTranslation();
  const textDate = useMemo(() => formatRelativeDate(time, i18n), [time, i18n]);

  return (
    <Box marginTop="30px">
      <Divider
        sx={{
          '.MuiDivider-wrapper': {
            margin: 0,
            padding: 0,
          },
          '&::before': {
            borderTop: '1px solid #E5E5E5',
          },
          '&::after': {
            borderTop: '1px solid #E5E5E5',
          },
        }}
      >
        <Typography
          variant="caption"
          fontWeight={700}
          border="1px solid #E5E5E5"
          borderRadius="5px"
          padding="10px 16px"
          textTransform="capitalize"
        >
          {textDate}
        </Typography>
      </Divider>
    </Box>
  );
};

interface TimeIndicatorProps {
  time: Dayjs;
  hasDateOnTop: boolean;
}

const TimeIndicator = ({ time, hasDateOnTop }: TimeIndicatorProps) => {
  const { i18n } = useTranslation();
  const textTime = useMemo(() => formatTime(time, i18n), [time, i18n]);

  return (
    <Stack direction="row" justifyContent="center" marginTop={hasDateOnTop ? '20px' : '30px'}>
      <Typography variant="caption" color="#A7A7A7" fontWeight={700}>
        {textTime}
      </Typography>
    </Stack>
  );
};

interface NotificationMessageRowProps {
  message: Message;
}

const NotificationMessageRow = ({ message }: NotificationMessageRowProps) => {
  let messageComponent;
  switch (message.type) {
    case 'initial':
      messageComponent = <MessageInitial />;
      break;
    case 'member':
      messageComponent = <MessageMember message={message} />;
      break;
    default:
      console.error(`${NotificationMessageRow.name} received unhandled message type: ${message.type}`);
      return null;
  }

  return (
    <Stack paddingTop={'30px'} alignItems="center">
      {messageComponent}
    </Stack>
  );
};

interface UserMessageRowProps {
  message: Message;
  isAccountMessage: boolean;
  previousMessage: Message | undefined;
  nextMessage: Message | undefined;
  time: Dayjs;
  showsTime: boolean;
  author: Account | Contact;
}

const UserMessageRow = ({
  message,
  previousMessage,
  nextMessage,
  isAccountMessage,
  time,
  showsTime,
  author,
}: UserMessageRowProps) => {
  const authorName = author.getDisplayName();
  const position = isAccountMessage ? 'end' : 'start';

  const previousIsUserMessageType = checkIsUserMessageType(previousMessage?.type);
  const nextIsUserMessageType = checkIsUserMessageType(nextMessage?.type);
  const nextTime = dayjs.unix(Number(nextMessage?.timestamp));
  const nextShowsTime = checkShowsTime(nextTime, time);
  const isFirstOfGroup = showsTime || !previousIsUserMessageType || previousMessage?.author !== message.author;
  const isLastOfGroup = nextShowsTime || !nextIsUserMessageType || message.author !== nextMessage?.author;

  const props = {
    message,
    isAccountMessage,
    isFirstOfGroup,
    isLastOfGroup,
  };

  let MessageComponent;
  switch (message.type) {
    case 'text/plain':
      MessageComponent = MessageText;
      break;
    case 'application/data-transfer+json':
      MessageComponent = MessageDataTransfer;
      break;
    case 'application/call-history+json':
      MessageComponent = MessageCall;
      break;
    default:
      console.error(`${UserMessageRow.name} received unhandled message type: ${message.type}`);
      return null;
  }

  const participantNamePadding = isAccountMessage
    ? bubblePadding
    : parseInt(avatarSize) + parseInt(spacingBetweenAvatarAndBubble) + parseInt(bubblePadding) + 'px';

  return (
    <Stack alignItems={position}>
      {isFirstOfGroup && (
        <Box padding={`30px ${participantNamePadding} 0 ${participantNamePadding}`}>
          <ParticipantName name={authorName} />
        </Box>
      )}
      <Stack
        direction="row"
        justifyContent={position}
        alignItems="end"
        spacing={spacingBetweenAvatarAndBubble}
        paddingTop="6px"
        width="66.66%"
      >
        <Box sx={{ width: avatarSize }}>
          {!isAccountMessage && isLastOfGroup && (
            <ConversationAvatar
              displayName={authorName}
              sx={{ width: avatarSize, height: avatarSize, fontSize: '15px' }}
            />
          )}
        </Box>
        <MessageComponent {...props} />
      </Stack>
    </Stack>
  );
};

interface MessageTooltipProps {
  className?: string;
  position: MessagePosition;
  children: ReactElement;
}

const MessageTooltip = styled(({ className, position, children }: MessageTooltipProps) => {
  const [open, setOpen] = useState(false);
  const emojis = ['😎', '😄', '😍']; // Should be last three used emojis
  const additionalOptions: PopoverListItemData[] = [
    {
      Icon: TwoSheetsIcon,
      label: 'Copy',
      onClick: () => {},
    },
    {
      Icon: OppositeArrowsIcon,
      label: 'Transfer',
      onClick: () => {},
    },
    {
      Icon: TrashBinIcon,
      label: 'Delete message',
      onClick: () => {},
    },
  ];

  const toggleMoreMenu = useCallback(() => setOpen((open) => !open), [setOpen]);

  const onClose = useCallback(() => {
    setOpen(false);
  }, [setOpen]);

  return (
    <Tooltip
      classes={{ tooltip: className }} // Required for styles. Don't know why
      placement={position === 'start' ? 'right-start' : 'left-start'}
      PopperProps={{
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: [-2, -30],
            },
          },
        ],
      }}
      onClose={onClose}
      title={
        <Stack>
          <Stack // Main options
            direction="row"
            spacing="16px"
            padding="16px"
          >
            {emojis.map((emoji) => (
              <EmojiButton key={emoji} emoji={emoji} />
            ))}
            <ReplyMessageButton />
            <MoreButton onClick={toggleMoreMenu} />
          </Stack>
          {open && (
            <>
              <Divider sx={{ marginX: '16px' }} />
              <PopoverList items={additionalOptions} />
            </>
          )}
        </Stack>
      }
    >
      {/* div fixes 'Function components cannot be given refs' error */}
      <div>{children}</div>
    </Tooltip>
  );
})(({ position }) => {
  const largeRadius = '20px';
  const smallRadius = '5px';
  return {
    backgroundColor: 'white',
    padding: '0px',
    boxShadow: '3px 3px 7px #00000029',
    borderRadius: largeRadius,
    borderStartStartRadius: position === 'start' ? smallRadius : largeRadius,
    borderStartEndRadius: position === 'end' ? smallRadius : largeRadius,
    overflow: 'hidden',
  };
});

interface BubbleProps {
  position: MessagePosition;
  isFirstOfGroup: boolean;
  isLastOfGroup: boolean;
  bubbleColor: string;
  maxWidth?: string;
  children: ReactNode;
}

const Bubble = ({ position, isFirstOfGroup, isLastOfGroup, bubbleColor, maxWidth, children }: BubbleProps) => {
  const largeRadius = '20px';
  const smallRadius = '5px';
  const radius = useMemo(() => {
    if (position === 'start') {
      return {
        borderStartStartRadius: isFirstOfGroup ? largeRadius : smallRadius,
        borderStartEndRadius: largeRadius,
        borderEndStartRadius: isLastOfGroup ? largeRadius : smallRadius,
        borderEndEndRadius: largeRadius,
      };
    }
    return {
      borderStartStartRadius: largeRadius,
      borderStartEndRadius: isFirstOfGroup ? largeRadius : smallRadius,
      borderEndStartRadius: largeRadius,
      borderEndEndRadius: isLastOfGroup ? largeRadius : smallRadius,
    };
  }, [isFirstOfGroup, isLastOfGroup, position]);

  return (
    <Box
      sx={{
        width: 'fit-content',
        maxWidth,
        backgroundColor: bubbleColor,
        padding: bubblePadding,
        overflow: 'hidden',
        wordWrap: 'break-word',
        ...radius,
      }}
    >
      {children}
    </Box>
  );
};

interface ParticipantNameProps {
  name: string;
}

const ParticipantName = ({ name }: ParticipantNameProps) => {
  return (
    <Typography variant="caption" color="#A7A7A7" fontWeight={700}>
      {name}
    </Typography>
  );
};

interface MessageProps {
  messageIndex: number;
  messages: Message[];
  isAccountMessage: boolean;
  author: Account | Contact;
}

export const MessageRow = ({ messageIndex, messages, isAccountMessage, author }: MessageProps) => {
  const message = messages[messageIndex];
  const previousMessage = findPreviousVisibleMessage(messages, messageIndex);
  const nextMessage = findNextVisibleMessage(messages, messageIndex);
  const time = dayjs.unix(Number(message.timestamp));
  const previousTime = dayjs.unix(Number(previousMessage?.timestamp));
  const showDate =
    message?.type === 'initial' || previousTime.year() !== time.year() || previousTime.dayOfYear() !== time.dayOfYear();
  const showTime = checkShowsTime(time, previousTime);
  let messageComponent;
  if (checkIsUserMessageType(message.type)) {
    messageComponent = (
      <UserMessageRow
        message={message}
        previousMessage={previousMessage}
        nextMessage={nextMessage}
        time={time}
        showsTime={showTime}
        isAccountMessage={isAccountMessage}
        author={author}
      />
    );
  } else if (checkIsNotificationMessageType(message.type)) {
    messageComponent = <NotificationMessageRow message={message} />;
  } else if (checkIsInvisibleMessageType(message.type)) {
    return null;
  } else {
    const _exhaustiveCheck: never = message.type;
    return _exhaustiveCheck;
  }

  return (
    <Stack>
      {showDate && <DateIndicator time={time} />}
      {showTime && <TimeIndicator time={time} hasDateOnTop={showDate} />}
      {messageComponent}
    </Stack>
  );
};