simon | 26e79f7 | 2022-10-05 22:16:08 -0400 | [diff] [blame] | 1 | /* |
| 2 | * Copyright (C) 2022 Savoir-faire Linux Inc. |
| 3 | * |
| 4 | * This program is free software; you can redistribute it and/or modify |
| 5 | * it under the terms of the GNU Affero General Public License as |
| 6 | * published by the Free Software Foundation; either version 3 of the |
| 7 | * License, or (at your option) any later version. |
| 8 | * |
| 9 | * This program is distributed in the hope that it will be useful, |
| 10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of |
| 11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| 12 | * GNU Affero General Public License for more details. |
| 13 | * |
| 14 | * You should have received a copy of the GNU Affero General Public |
| 15 | * License along with this program. If not, see |
| 16 | * <https://www.gnu.org/licenses/>. |
| 17 | */ |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 18 | import { Box, Chip, Divider, Link, Stack, Tooltip, Typography } from '@mui/material'; |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 19 | import { styled } from '@mui/material/styles'; |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 20 | import dayjs, { Dayjs } from 'dayjs'; |
Misha Krieger-Raynauld | 6bbdacf | 2022-11-29 21:45:40 -0500 | [diff] [blame] | 21 | import { Message } from 'jami-web-common'; |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 22 | import Linkify from 'linkify-react'; |
| 23 | import * as linkify from 'linkifyjs'; |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 24 | import { ReactElement, ReactNode, useCallback, useMemo, useState } from 'react'; |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 25 | import { useTranslation } from 'react-i18next'; |
simon | 07b4eb0 | 2022-09-29 17:50:26 -0400 | [diff] [blame] | 26 | |
Misha Krieger-Raynauld | cfa4430 | 2022-11-30 18:36:36 -0500 | [diff] [blame] | 27 | import { Account } from '../models/account'; |
| 28 | import { Contact } from '../models/contact'; |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 29 | import { useLinkPreviewQuery } from '../services/linkPreviewQueries'; |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 30 | import { getMessageCallText, getMessageMemberText } from '../utils/chatmessages'; |
| 31 | import { formatRelativeDate, formatTime } from '../utils/dates×'; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 32 | import { EmojiButton, MoreButton, ReplyMessageButton } from './Button'; |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 33 | import ConversationAvatar from './ConversationAvatar'; |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 34 | import LoadingPage from './Loading'; |
idillon | ef9ab81 | 2022-11-18 13:46:24 -0500 | [diff] [blame] | 35 | import PopoverList, { PopoverListItemData } from './PopoverList'; |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 36 | import { |
| 37 | ArrowLeftCurved, |
| 38 | ArrowLeftDown, |
| 39 | ArrowRightUp, |
| 40 | OppositeArrowsIcon, |
| 41 | TrashBinIcon, |
| 42 | TwoSheetsIcon, |
| 43 | } from './SvgIcon'; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 44 | |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 45 | type MessagePosition = 'start' | 'end'; |
| 46 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 47 | const notificationMessageTypes = ['initial', 'member'] as const; |
| 48 | type NotificationMessageType = typeof notificationMessageTypes[number]; |
| 49 | const checkIsNotificationMessageType = (type: Message['type'] | undefined): type is NotificationMessageType => { |
| 50 | return notificationMessageTypes.includes(type as NotificationMessageType); |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 51 | }; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 52 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 53 | const invisibleMessageTypes = ['application/update-profile', 'merge', 'vote'] as const; |
| 54 | type InvisibleMessageType = typeof invisibleMessageTypes[number]; |
| 55 | const checkIsInvisibleMessageType = (type: Message['type'] | undefined): type is InvisibleMessageType => { |
| 56 | return invisibleMessageTypes.includes(type as InvisibleMessageType); |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 57 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 58 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 59 | const userMessageTypes = ['text/plain', 'application/data-transfer+json', 'application/call-history+json'] as const; |
| 60 | type UserMessageType = typeof userMessageTypes[number]; |
| 61 | const checkIsUserMessageType = (type: Message['type'] | undefined): type is UserMessageType => { |
| 62 | return userMessageTypes.includes(type as UserMessageType); |
| 63 | }; |
| 64 | |
| 65 | const checkShowsTime = (time: Dayjs, previousTime: Dayjs) => { |
| 66 | return !previousTime.isSame(time) && !time.isBetween(previousTime, previousTime?.add(1, 'minute')); |
| 67 | }; |
| 68 | |
| 69 | const findPreviousVisibleMessage = (messages: Message[], messageIndex: number) => { |
| 70 | for (let i = messageIndex + 1; i < messages.length; ++i) { |
| 71 | const message = messages[i]; |
| 72 | if (!checkIsInvisibleMessageType(message?.type)) { |
| 73 | return message; |
| 74 | } |
| 75 | } |
| 76 | }; |
| 77 | |
| 78 | const findNextVisibleMessage = (messages: Message[], messageIndex: number) => { |
| 79 | for (let i = messageIndex - 1; i >= 0; --i) { |
| 80 | const message = messages[i]; |
| 81 | if (!checkIsInvisibleMessageType(message?.type)) { |
| 82 | return message; |
| 83 | } |
| 84 | } |
| 85 | }; |
| 86 | |
| 87 | const avatarSize = '22px'; |
| 88 | const spacingBetweenAvatarAndBubble = '10px'; |
| 89 | const bubblePadding = '16px'; |
| 90 | |
| 91 | interface MessageCallProps { |
| 92 | message: Message; |
| 93 | isAccountMessage: boolean; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 94 | isFirstOfGroup: boolean; |
| 95 | isLastOfGroup: boolean; |
| 96 | } |
| 97 | |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 98 | const MessageCall = ({ message, isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageCallProps) => { |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 99 | const position = isAccountMessage ? 'end' : 'start'; |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 100 | |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 101 | const { i18n } = useTranslation(); |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 102 | const { bubbleColor, Icon, text, textColor } = useMemo(() => { |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 103 | const text = getMessageCallText(isAccountMessage, message, i18n); |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 104 | const callDuration = dayjs.duration(parseInt(message?.duration || '')); |
| 105 | if (callDuration.asSeconds() === 0) { |
| 106 | if (isAccountMessage) { |
| 107 | return { |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 108 | text, |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 109 | Icon: ArrowLeftCurved, |
| 110 | textColor: 'white', |
| 111 | bubbleColor: '#005699' + '80', // opacity 50% |
| 112 | }; |
| 113 | } else { |
| 114 | return { |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 115 | text, |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 116 | Icon: ArrowLeftCurved, |
| 117 | textColor: 'black', |
| 118 | bubbleColor: '#C6C6C6', |
| 119 | }; |
| 120 | } |
| 121 | } else { |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 122 | if (isAccountMessage) { |
| 123 | return { |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 124 | text, |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 125 | Icon: ArrowRightUp, |
| 126 | textColor: 'white', |
| 127 | bubbleColor: '#005699', |
| 128 | }; |
| 129 | } else { |
| 130 | return { |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 131 | text, |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 132 | Icon: ArrowLeftDown, |
| 133 | textcolor: 'black', |
| 134 | bubbleColor: '#E5E5E5', |
| 135 | }; |
| 136 | } |
| 137 | } |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 138 | }, [isAccountMessage, message, i18n]); |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 139 | |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 140 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 141 | <Bubble position={position} isFirstOfGroup={isFirstOfGroup} isLastOfGroup={isLastOfGroup} bubbleColor={bubbleColor}> |
idillon-sfl | ec73545 | 2022-10-27 13:18:41 -0400 | [diff] [blame] | 142 | <Stack direction="row" spacing="10px" alignItems="center"> |
| 143 | <Icon sx={{ fontSize: '16px', color: textColor }} /> |
| 144 | <Typography variant="body1" color={textColor} textAlign={position} fontWeight="bold" textTransform="uppercase"> |
| 145 | {text} |
| 146 | </Typography> |
| 147 | </Stack> |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 148 | </Bubble> |
| 149 | ); |
| 150 | }; |
| 151 | |
| 152 | const MessageInitial = () => { |
| 153 | const { t } = useTranslation(); |
| 154 | return <>{t('message_swarm_created')}</>; |
| 155 | }; |
| 156 | |
| 157 | interface MessageDataTransferProps { |
| 158 | message: Message; |
| 159 | isAccountMessage: boolean; |
| 160 | isFirstOfGroup: boolean; |
| 161 | isLastOfGroup: boolean; |
| 162 | } |
| 163 | |
| 164 | const MessageDataTransfer = ({ isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageDataTransferProps) => { |
| 165 | const position = isAccountMessage ? 'end' : 'start'; |
| 166 | return ( |
| 167 | <Bubble bubbleColor="#E5E5E5" position={position} isFirstOfGroup={isFirstOfGroup} isLastOfGroup={isLastOfGroup}> |
simon | 80b7b3b | 2022-09-28 17:50:10 -0400 | [diff] [blame] | 168 | "data-transfer" |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 169 | </Bubble> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 170 | ); |
| 171 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 172 | |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 173 | interface MessageMemberProps { |
| 174 | message: Message; |
| 175 | } |
| 176 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 177 | const MessageMember = ({ message }: MessageMemberProps) => { |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 178 | const { i18n } = useTranslation(); |
| 179 | |
| 180 | const text = getMessageMemberText(message, i18n); |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 181 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 182 | <Chip |
| 183 | sx={{ |
| 184 | width: 'fit-content', |
| 185 | }} |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 186 | label={text} |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 187 | /> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 188 | ); |
| 189 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 190 | |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 191 | type LinkPreviewProps = { |
| 192 | isAccountMessage: boolean; |
| 193 | link: string; |
| 194 | }; |
| 195 | |
| 196 | const LinkPreview = ({ isAccountMessage, link }: LinkPreviewProps) => { |
| 197 | const [imageIsWorking, setImageIsWorking] = useState(true); |
| 198 | const linkPreviewQuery = useLinkPreviewQuery(link); |
| 199 | if (linkPreviewQuery.isLoading) { |
| 200 | return <LoadingPage />; |
| 201 | } |
| 202 | if (!linkPreviewQuery.isSuccess) { |
| 203 | return null; |
| 204 | } |
| 205 | const linkPreview = linkPreviewQuery.data; |
| 206 | |
| 207 | return ( |
| 208 | <a href={link} style={{ textDecorationLine: 'none' }}> |
| 209 | <Stack> |
| 210 | {imageIsWorking && linkPreview.image && ( |
| 211 | <img |
| 212 | style={{ |
| 213 | padding: '15px 0', |
| 214 | }} |
| 215 | alt={linkPreview.title} |
| 216 | src={linkPreview.image} |
| 217 | onError={() => setImageIsWorking(false)} |
| 218 | /> |
| 219 | )} |
| 220 | <Typography variant="body1" color={isAccountMessage ? '#cccccc' : 'black'}> |
| 221 | {linkPreview.title} |
| 222 | </Typography> |
| 223 | {linkPreview.description && ( |
| 224 | <Typography variant="body1" sx={{ color: isAccountMessage ? '#ffffff' : '#005699' }}> |
| 225 | {linkPreview.description} |
| 226 | </Typography> |
| 227 | )} |
| 228 | <Typography variant="body1" color={isAccountMessage ? '#cccccc' : 'black'}> |
| 229 | {new URL(link).hostname} |
| 230 | </Typography> |
| 231 | </Stack> |
| 232 | </a> |
| 233 | ); |
| 234 | }; |
| 235 | |
| 236 | type RenderLinkProps = { |
| 237 | attributes: { |
| 238 | isAccountMessage: boolean; |
| 239 | href: string; |
| 240 | }; |
| 241 | content: ReactNode; |
| 242 | }; |
| 243 | |
| 244 | const RenderLink = ({ attributes, content }: RenderLinkProps) => { |
| 245 | const { href, isAccountMessage, ...props } = attributes; |
| 246 | return ( |
| 247 | <Link href={href} {...props} variant="body1" color={isAccountMessage ? '#ffffff' : undefined}> |
| 248 | {content} |
| 249 | </Link> |
| 250 | ); |
| 251 | }; |
| 252 | |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 253 | interface MessageTextProps { |
| 254 | message: Message; |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 255 | isAccountMessage: boolean; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 256 | isFirstOfGroup: boolean; |
| 257 | isLastOfGroup: boolean; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 258 | } |
| 259 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 260 | const MessageText = ({ message, isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageTextProps) => { |
| 261 | const position = isAccountMessage ? 'end' : 'start'; |
| 262 | const bubbleColor = isAccountMessage ? '#005699' : '#E5E5E5'; |
| 263 | const textColor = isAccountMessage ? 'white' : 'black'; |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 264 | |
| 265 | const link = useMemo(() => linkify.find(message?.body ?? '', 'url')[0]?.href, [message]); |
| 266 | |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 267 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 268 | <MessageTooltip position={position}> |
| 269 | <Bubble |
| 270 | bubbleColor={bubbleColor} |
| 271 | position={position} |
| 272 | isFirstOfGroup={isFirstOfGroup} |
| 273 | isLastOfGroup={isLastOfGroup} |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 274 | maxWidth={link ? '400px' : undefined} |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 275 | > |
| 276 | <Typography variant="body1" color={textColor} textAlign={position}> |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 277 | <Linkify options={{ render: RenderLink as any, attributes: { isAccountMessage } }}>{message.body}</Linkify> |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 278 | </Typography> |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 279 | {link && <LinkPreview isAccountMessage={isAccountMessage} link={link} />} |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 280 | </Bubble> |
| 281 | </MessageTooltip> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 282 | ); |
| 283 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 284 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 285 | interface DateIndicatorProps { |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 286 | time: Dayjs; |
| 287 | } |
| 288 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 289 | const DateIndicator = ({ time }: DateIndicatorProps) => { |
idillon-sfl | 0e1a0d9 | 2022-10-25 16:52:44 -0400 | [diff] [blame] | 290 | const { i18n } = useTranslation(); |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 291 | const textDate = useMemo(() => formatRelativeDate(time, i18n), [time, i18n]); |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 292 | |
| 293 | return ( |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 294 | <Box marginTop="30px"> |
idillon | 04245a1 | 2022-09-01 11:12:17 -0400 | [diff] [blame] | 295 | <Divider |
| 296 | sx={{ |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 297 | '.MuiDivider-wrapper': { |
idillon | 04245a1 | 2022-09-01 11:12:17 -0400 | [diff] [blame] | 298 | margin: 0, |
| 299 | padding: 0, |
| 300 | }, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 301 | '&::before': { |
| 302 | borderTop: '1px solid #E5E5E5', |
idillon | 04245a1 | 2022-09-01 11:12:17 -0400 | [diff] [blame] | 303 | }, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 304 | '&::after': { |
| 305 | borderTop: '1px solid #E5E5E5', |
idillon | 04245a1 | 2022-09-01 11:12:17 -0400 | [diff] [blame] | 306 | }, |
| 307 | }} |
| 308 | > |
| 309 | <Typography |
| 310 | variant="caption" |
| 311 | fontWeight={700} |
| 312 | border="1px solid #E5E5E5" |
| 313 | borderRadius="5px" |
| 314 | padding="10px 16px" |
idillon-sfl | 0e1a0d9 | 2022-10-25 16:52:44 -0400 | [diff] [blame] | 315 | textTransform="capitalize" |
idillon | 04245a1 | 2022-09-01 11:12:17 -0400 | [diff] [blame] | 316 | > |
| 317 | {textDate} |
| 318 | </Typography> |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 319 | </Divider> |
| 320 | </Box> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 321 | ); |
| 322 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 323 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 324 | interface TimeIndicatorProps { |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 325 | time: Dayjs; |
| 326 | hasDateOnTop: boolean; |
| 327 | } |
| 328 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 329 | const TimeIndicator = ({ time, hasDateOnTop }: TimeIndicatorProps) => { |
idillon-sfl | 0e1a0d9 | 2022-10-25 16:52:44 -0400 | [diff] [blame] | 330 | const { i18n } = useTranslation(); |
idillon | 9e542ca | 2022-12-15 17:54:07 -0500 | [diff] [blame] | 331 | const textTime = useMemo(() => formatTime(time, i18n), [time, i18n]); |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 332 | |
| 333 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 334 | <Stack direction="row" justifyContent="center" marginTop={hasDateOnTop ? '20px' : '30px'}> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 335 | <Typography variant="caption" color="#A7A7A7" fontWeight={700}> |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 336 | {textTime} |
| 337 | </Typography> |
| 338 | </Stack> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 339 | ); |
| 340 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 341 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 342 | interface NotificationMessageRowProps { |
| 343 | message: Message; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 344 | } |
| 345 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 346 | const NotificationMessageRow = ({ message }: NotificationMessageRowProps) => { |
| 347 | let messageComponent; |
| 348 | switch (message.type) { |
| 349 | case 'initial': |
| 350 | messageComponent = <MessageInitial />; |
| 351 | break; |
| 352 | case 'member': |
| 353 | messageComponent = <MessageMember message={message} />; |
| 354 | break; |
| 355 | default: |
| 356 | console.error(`${NotificationMessageRow.name} received unhandled message type: ${message.type}`); |
| 357 | return null; |
idillon | ae655dd | 2022-10-14 18:11:02 -0400 | [diff] [blame] | 358 | } |
| 359 | |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 360 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 361 | <Stack paddingTop={'30px'} alignItems="center"> |
| 362 | {messageComponent} |
| 363 | </Stack> |
| 364 | ); |
| 365 | }; |
| 366 | |
| 367 | interface UserMessageRowProps { |
| 368 | message: Message; |
| 369 | isAccountMessage: boolean; |
| 370 | previousMessage: Message | undefined; |
| 371 | nextMessage: Message | undefined; |
| 372 | time: Dayjs; |
| 373 | showsTime: boolean; |
| 374 | author: Account | Contact; |
| 375 | } |
| 376 | |
| 377 | const UserMessageRow = ({ |
| 378 | message, |
| 379 | previousMessage, |
| 380 | nextMessage, |
| 381 | isAccountMessage, |
| 382 | time, |
| 383 | showsTime, |
| 384 | author, |
| 385 | }: UserMessageRowProps) => { |
| 386 | const authorName = author.getDisplayName(); |
| 387 | const position = isAccountMessage ? 'end' : 'start'; |
| 388 | |
| 389 | const previousIsUserMessageType = checkIsUserMessageType(previousMessage?.type); |
| 390 | const nextIsUserMessageType = checkIsUserMessageType(nextMessage?.type); |
| 391 | const nextTime = dayjs.unix(Number(nextMessage?.timestamp)); |
| 392 | const nextShowsTime = checkShowsTime(nextTime, time); |
| 393 | const isFirstOfGroup = showsTime || !previousIsUserMessageType || previousMessage?.author !== message.author; |
| 394 | const isLastOfGroup = nextShowsTime || !nextIsUserMessageType || message.author !== nextMessage?.author; |
| 395 | |
| 396 | const props = { |
| 397 | message, |
| 398 | isAccountMessage, |
| 399 | isFirstOfGroup, |
| 400 | isLastOfGroup, |
| 401 | }; |
| 402 | |
| 403 | let MessageComponent; |
| 404 | switch (message.type) { |
| 405 | case 'text/plain': |
| 406 | MessageComponent = MessageText; |
| 407 | break; |
| 408 | case 'application/data-transfer+json': |
| 409 | MessageComponent = MessageDataTransfer; |
| 410 | break; |
| 411 | case 'application/call-history+json': |
| 412 | MessageComponent = MessageCall; |
| 413 | break; |
| 414 | default: |
| 415 | console.error(`${UserMessageRow.name} received unhandled message type: ${message.type}`); |
| 416 | return null; |
| 417 | } |
| 418 | |
| 419 | const participantNamePadding = isAccountMessage |
| 420 | ? bubblePadding |
| 421 | : parseInt(avatarSize) + parseInt(spacingBetweenAvatarAndBubble) + parseInt(bubblePadding) + 'px'; |
| 422 | |
| 423 | return ( |
| 424 | <Stack alignItems={position}> |
| 425 | {isFirstOfGroup && ( |
| 426 | <Box padding={`30px ${participantNamePadding} 0 ${participantNamePadding}`}> |
| 427 | <ParticipantName name={authorName} /> |
| 428 | </Box> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 429 | )} |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 430 | <Stack |
| 431 | direction="row" |
| 432 | justifyContent={position} |
| 433 | alignItems="end" |
| 434 | spacing={spacingBetweenAvatarAndBubble} |
| 435 | paddingTop="6px" |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 436 | width="66.66%" |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 437 | > |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 438 | <Box sx={{ width: avatarSize }}> |
| 439 | {!isAccountMessage && isLastOfGroup && ( |
| 440 | <ConversationAvatar |
| 441 | displayName={authorName} |
| 442 | sx={{ width: avatarSize, height: avatarSize, fontSize: '15px' }} |
| 443 | /> |
| 444 | )} |
| 445 | </Box> |
| 446 | <MessageComponent {...props} /> |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 447 | </Stack> |
| 448 | </Stack> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 449 | ); |
| 450 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 451 | |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 452 | interface MessageTooltipProps { |
| 453 | className?: string; |
| 454 | position: MessagePosition; |
| 455 | children: ReactElement; |
| 456 | } |
| 457 | |
| 458 | const MessageTooltip = styled(({ className, position, children }: MessageTooltipProps) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 459 | const [open, setOpen] = useState(false); |
| 460 | const emojis = ['😎', '😄', '😍']; // Should be last three used emojis |
idillon | ef9ab81 | 2022-11-18 13:46:24 -0500 | [diff] [blame] | 461 | const additionalOptions: PopoverListItemData[] = [ |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 462 | { |
| 463 | Icon: TwoSheetsIcon, |
idillon | ef9ab81 | 2022-11-18 13:46:24 -0500 | [diff] [blame] | 464 | label: 'Copy', |
| 465 | onClick: () => {}, |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 466 | }, |
| 467 | { |
| 468 | Icon: OppositeArrowsIcon, |
idillon | ef9ab81 | 2022-11-18 13:46:24 -0500 | [diff] [blame] | 469 | label: 'Transfer', |
| 470 | onClick: () => {}, |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 471 | }, |
| 472 | { |
| 473 | Icon: TrashBinIcon, |
idillon | ef9ab81 | 2022-11-18 13:46:24 -0500 | [diff] [blame] | 474 | label: 'Delete message', |
| 475 | onClick: () => {}, |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 476 | }, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 477 | ]; |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 478 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 479 | const toggleMoreMenu = useCallback(() => setOpen((open) => !open), [setOpen]); |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 480 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 481 | const onClose = useCallback(() => { |
| 482 | setOpen(false); |
| 483 | }, [setOpen]); |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 484 | |
| 485 | return ( |
| 486 | <Tooltip |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 487 | classes={{ tooltip: className }} // Required for styles. Don't know why |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 488 | placement={position === 'start' ? 'right-start' : 'left-start'} |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 489 | PopperProps={{ |
| 490 | modifiers: [ |
| 491 | { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 492 | name: 'offset', |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 493 | options: { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 494 | offset: [-2, -30], |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 495 | }, |
| 496 | }, |
| 497 | ], |
| 498 | }} |
| 499 | onClose={onClose} |
| 500 | title={ |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 501 | <Stack> |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 502 | <Stack // Main options |
| 503 | direction="row" |
| 504 | spacing="16px" |
idillon | ef9ab81 | 2022-11-18 13:46:24 -0500 | [diff] [blame] | 505 | padding="16px" |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 506 | > |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 507 | {emojis.map((emoji) => ( |
| 508 | <EmojiButton key={emoji} emoji={emoji} /> |
| 509 | ))} |
| 510 | <ReplyMessageButton /> |
| 511 | <MoreButton onClick={toggleMoreMenu} /> |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 512 | </Stack> |
idillon | ef9ab81 | 2022-11-18 13:46:24 -0500 | [diff] [blame] | 513 | {open && ( |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 514 | <> |
idillon | ef9ab81 | 2022-11-18 13:46:24 -0500 | [diff] [blame] | 515 | <Divider sx={{ marginX: '16px' }} /> |
| 516 | <PopoverList items={additionalOptions} /> |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 517 | </> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 518 | )} |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 519 | </Stack> |
| 520 | } |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 521 | > |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 522 | {/* div fixes 'Function components cannot be given refs' error */} |
| 523 | <div>{children}</div> |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 524 | </Tooltip> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 525 | ); |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 526 | })(({ position }) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 527 | const largeRadius = '20px'; |
| 528 | const smallRadius = '5px'; |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 529 | return { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 530 | backgroundColor: 'white', |
idillon | ef9ab81 | 2022-11-18 13:46:24 -0500 | [diff] [blame] | 531 | padding: '0px', |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 532 | boxShadow: '3px 3px 7px #00000029', |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 533 | borderRadius: largeRadius, |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 534 | borderStartStartRadius: position === 'start' ? smallRadius : largeRadius, |
| 535 | borderStartEndRadius: position === 'end' ? smallRadius : largeRadius, |
idillon | ef9ab81 | 2022-11-18 13:46:24 -0500 | [diff] [blame] | 536 | overflow: 'hidden', |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 537 | }; |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 538 | }); |
| 539 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 540 | interface BubbleProps { |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 541 | position: MessagePosition; |
| 542 | isFirstOfGroup: boolean; |
| 543 | isLastOfGroup: boolean; |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 544 | bubbleColor: string; |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 545 | maxWidth?: string; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 546 | children: ReactNode; |
| 547 | } |
| 548 | |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 549 | const Bubble = ({ position, isFirstOfGroup, isLastOfGroup, bubbleColor, maxWidth, children }: BubbleProps) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 550 | const largeRadius = '20px'; |
| 551 | const smallRadius = '5px'; |
Adrien Béraud | 023f7cf | 2022-09-18 14:57:53 -0400 | [diff] [blame] | 552 | const radius = useMemo(() => { |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 553 | if (position === 'start') { |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 554 | return { |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 555 | borderStartStartRadius: isFirstOfGroup ? largeRadius : smallRadius, |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 556 | borderStartEndRadius: largeRadius, |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 557 | borderEndStartRadius: isLastOfGroup ? largeRadius : smallRadius, |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 558 | borderEndEndRadius: largeRadius, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 559 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 560 | } |
| 561 | return { |
| 562 | borderStartStartRadius: largeRadius, |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 563 | borderStartEndRadius: isFirstOfGroup ? largeRadius : smallRadius, |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 564 | borderEndStartRadius: largeRadius, |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 565 | borderEndEndRadius: isLastOfGroup ? largeRadius : smallRadius, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 566 | }; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 567 | }, [isFirstOfGroup, isLastOfGroup, position]); |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 568 | |
| 569 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 570 | <Box |
| 571 | sx={{ |
| 572 | width: 'fit-content', |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 573 | maxWidth, |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 574 | backgroundColor: bubbleColor, |
| 575 | padding: bubblePadding, |
idillon | a3c2fad | 2022-12-18 23:49:10 -0500 | [diff] [blame] | 576 | overflow: 'hidden', |
| 577 | wordWrap: 'break-word', |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 578 | ...radius, |
| 579 | }} |
| 580 | > |
| 581 | {children} |
| 582 | </Box> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 583 | ); |
| 584 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 585 | |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 586 | interface ParticipantNameProps { |
| 587 | name: string; |
| 588 | } |
| 589 | |
| 590 | const ParticipantName = ({ name }: ParticipantNameProps) => { |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 591 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame] | 592 | <Typography variant="caption" color="#A7A7A7" fontWeight={700}> |
| 593 | {name} |
| 594 | </Typography> |
| 595 | ); |
| 596 | }; |
| 597 | |
| 598 | interface MessageProps { |
| 599 | messageIndex: number; |
| 600 | messages: Message[]; |
| 601 | isAccountMessage: boolean; |
| 602 | author: Account | Contact; |
| 603 | } |
| 604 | |
| 605 | export const MessageRow = ({ messageIndex, messages, isAccountMessage, author }: MessageProps) => { |
| 606 | const message = messages[messageIndex]; |
| 607 | const previousMessage = findPreviousVisibleMessage(messages, messageIndex); |
| 608 | const nextMessage = findNextVisibleMessage(messages, messageIndex); |
| 609 | const time = dayjs.unix(Number(message.timestamp)); |
| 610 | const previousTime = dayjs.unix(Number(previousMessage?.timestamp)); |
| 611 | const showDate = |
| 612 | message?.type === 'initial' || previousTime.year() !== time.year() || previousTime.dayOfYear() !== time.dayOfYear(); |
| 613 | const showTime = checkShowsTime(time, previousTime); |
| 614 | let messageComponent; |
| 615 | if (checkIsUserMessageType(message.type)) { |
| 616 | messageComponent = ( |
| 617 | <UserMessageRow |
| 618 | message={message} |
| 619 | previousMessage={previousMessage} |
| 620 | nextMessage={nextMessage} |
| 621 | time={time} |
| 622 | showsTime={showTime} |
| 623 | isAccountMessage={isAccountMessage} |
| 624 | author={author} |
| 625 | /> |
| 626 | ); |
| 627 | } else if (checkIsNotificationMessageType(message.type)) { |
| 628 | messageComponent = <NotificationMessageRow message={message} />; |
| 629 | } else if (checkIsInvisibleMessageType(message.type)) { |
| 630 | return null; |
| 631 | } else { |
| 632 | const _exhaustiveCheck: never = message.type; |
| 633 | return _exhaustiveCheck; |
| 634 | } |
| 635 | |
| 636 | return ( |
| 637 | <Stack> |
| 638 | {showDate && <DateIndicator time={time} />} |
| 639 | {showTime && <TimeIndicator time={time} hasDateOnTop={showDate} />} |
| 640 | {messageComponent} |
| 641 | </Stack> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 642 | ); |
| 643 | }; |