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-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 18 | import { |
| 19 | Box, |
| 20 | Chip, |
| 21 | Divider, |
| 22 | List, |
| 23 | ListItemButton, |
| 24 | ListItemText, |
| 25 | Stack, |
| 26 | Theme, |
| 27 | Tooltip, |
| 28 | Typography, |
| 29 | } from '@mui/material'; |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 30 | import { styled } from '@mui/material/styles'; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 31 | import dayjs, { Dayjs } from 'dayjs'; |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 32 | import dayOfYear from 'dayjs/plugin/dayOfYear'; |
| 33 | import isBetween from 'dayjs/plugin/isBetween'; |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 34 | import isToday from 'dayjs/plugin/isToday'; |
| 35 | import isYesterday from 'dayjs/plugin/isYesterday'; |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 36 | import { Account, Contact, Message } from 'jami-web-common'; |
| 37 | import { ReactElement, ReactNode, useCallback, useMemo, useState } from 'react'; |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 38 | import { useTranslation } from 'react-i18next'; |
simon | 07b4eb0 | 2022-09-29 17:50:26 -0400 | [diff] [blame] | 39 | |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 40 | import { EmojiButton, MoreButton, ReplyMessageButton } from './Button'; |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 41 | import ConversationAvatar from './ConversationAvatar'; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 42 | import { OppositeArrowsIcon, TrashBinIcon, TwoSheetsIcon } from './SvgIcon'; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 43 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 44 | dayjs.extend(dayOfYear); |
| 45 | dayjs.extend(isBetween); |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 46 | dayjs.extend(isToday); |
| 47 | dayjs.extend(isYesterday); |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 48 | |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 49 | type MessagePosition = 'start' | 'end'; |
| 50 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 51 | const notificationMessageTypes = ['initial', 'member'] as const; |
| 52 | type NotificationMessageType = typeof notificationMessageTypes[number]; |
| 53 | const checkIsNotificationMessageType = (type: Message['type'] | undefined): type is NotificationMessageType => { |
| 54 | return notificationMessageTypes.includes(type as NotificationMessageType); |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 55 | }; |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 56 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 57 | const invisibleMessageTypes = ['application/update-profile', 'merge', 'vote'] as const; |
| 58 | type InvisibleMessageType = typeof invisibleMessageTypes[number]; |
| 59 | const checkIsInvisibleMessageType = (type: Message['type'] | undefined): type is InvisibleMessageType => { |
| 60 | return invisibleMessageTypes.includes(type as InvisibleMessageType); |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 61 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 62 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 63 | const userMessageTypes = ['text/plain', 'application/data-transfer+json', 'application/call-history+json'] as const; |
| 64 | type UserMessageType = typeof userMessageTypes[number]; |
| 65 | const checkIsUserMessageType = (type: Message['type'] | undefined): type is UserMessageType => { |
| 66 | return userMessageTypes.includes(type as UserMessageType); |
| 67 | }; |
| 68 | |
| 69 | const checkShowsTime = (time: Dayjs, previousTime: Dayjs) => { |
| 70 | return !previousTime.isSame(time) && !time.isBetween(previousTime, previousTime?.add(1, 'minute')); |
| 71 | }; |
| 72 | |
| 73 | const findPreviousVisibleMessage = (messages: Message[], messageIndex: number) => { |
| 74 | for (let i = messageIndex + 1; i < messages.length; ++i) { |
| 75 | const message = messages[i]; |
| 76 | if (!checkIsInvisibleMessageType(message?.type)) { |
| 77 | return message; |
| 78 | } |
| 79 | } |
| 80 | }; |
| 81 | |
| 82 | const findNextVisibleMessage = (messages: Message[], messageIndex: number) => { |
| 83 | for (let i = messageIndex - 1; i >= 0; --i) { |
| 84 | const message = messages[i]; |
| 85 | if (!checkIsInvisibleMessageType(message?.type)) { |
| 86 | return message; |
| 87 | } |
| 88 | } |
| 89 | }; |
| 90 | |
| 91 | const avatarSize = '22px'; |
| 92 | const spacingBetweenAvatarAndBubble = '10px'; |
| 93 | const bubblePadding = '16px'; |
| 94 | |
| 95 | interface MessageCallProps { |
| 96 | message: Message; |
| 97 | isAccountMessage: boolean; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 98 | isFirstOfGroup: boolean; |
| 99 | isLastOfGroup: boolean; |
| 100 | } |
| 101 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 102 | const MessageCall = ({ isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageCallProps) => { |
| 103 | const position = isAccountMessage ? 'end' : 'start'; |
| 104 | const bubbleColor = isAccountMessage ? '#005699' : '#E5E5E5'; |
| 105 | const textColor = isAccountMessage ? 'white' : 'black'; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 106 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 107 | <Bubble position={position} isFirstOfGroup={isFirstOfGroup} isLastOfGroup={isLastOfGroup} bubbleColor={bubbleColor}> |
| 108 | <Typography variant="body1" color={textColor} textAlign={position}> |
| 109 | "Appel" |
| 110 | </Typography> |
| 111 | </Bubble> |
| 112 | ); |
| 113 | }; |
| 114 | |
| 115 | const MessageInitial = () => { |
| 116 | const { t } = useTranslation(); |
| 117 | return <>{t('message_swarm_created')}</>; |
| 118 | }; |
| 119 | |
| 120 | interface MessageDataTransferProps { |
| 121 | message: Message; |
| 122 | isAccountMessage: boolean; |
| 123 | isFirstOfGroup: boolean; |
| 124 | isLastOfGroup: boolean; |
| 125 | } |
| 126 | |
| 127 | const MessageDataTransfer = ({ isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageDataTransferProps) => { |
| 128 | const position = isAccountMessage ? 'end' : 'start'; |
| 129 | return ( |
| 130 | <Bubble bubbleColor="#E5E5E5" position={position} isFirstOfGroup={isFirstOfGroup} isLastOfGroup={isLastOfGroup}> |
simon | 80b7b3b | 2022-09-28 17:50:10 -0400 | [diff] [blame] | 131 | "data-transfer" |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 132 | </Bubble> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 133 | ); |
| 134 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 135 | |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 136 | interface MessageMemberProps { |
| 137 | message: Message; |
| 138 | } |
| 139 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 140 | const MessageMember = ({ message }: MessageMemberProps) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 141 | const { t } = useTranslation(); |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 142 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 143 | <Chip |
| 144 | sx={{ |
| 145 | width: 'fit-content', |
| 146 | }} |
| 147 | label={t('message_user_joined', { user: message.author })} |
| 148 | /> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 149 | ); |
| 150 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 151 | |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 152 | interface MessageTextProps { |
| 153 | message: Message; |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 154 | isAccountMessage: boolean; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 155 | isFirstOfGroup: boolean; |
| 156 | isLastOfGroup: boolean; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 157 | } |
| 158 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 159 | const MessageText = ({ message, isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageTextProps) => { |
| 160 | const position = isAccountMessage ? 'end' : 'start'; |
| 161 | const bubbleColor = isAccountMessage ? '#005699' : '#E5E5E5'; |
| 162 | const textColor = isAccountMessage ? 'white' : 'black'; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 163 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 164 | <MessageTooltip position={position}> |
| 165 | <Bubble |
| 166 | bubbleColor={bubbleColor} |
| 167 | position={position} |
| 168 | isFirstOfGroup={isFirstOfGroup} |
| 169 | isLastOfGroup={isLastOfGroup} |
| 170 | > |
| 171 | <Typography variant="body1" color={textColor} textAlign={position}> |
| 172 | {message.body} |
| 173 | </Typography> |
| 174 | </Bubble> |
| 175 | </MessageTooltip> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 176 | ); |
| 177 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 178 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 179 | interface DateIndicatorProps { |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 180 | time: Dayjs; |
| 181 | } |
| 182 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 183 | const DateIndicator = ({ time }: DateIndicatorProps) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 184 | let textDate; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 185 | |
| 186 | if (time.isToday()) { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 187 | textDate = 'Today'; |
| 188 | } else if (time.isYesterday()) { |
| 189 | textDate = 'Yesterday'; |
| 190 | } else { |
| 191 | const date = time.date().toString().padStart(2, '0'); |
| 192 | const month = (time.month() + 1).toString().padStart(2, '0'); |
| 193 | textDate = `${date}/${month}/${time.year()}`; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 194 | } |
| 195 | |
| 196 | return ( |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 197 | <Box marginTop="30px"> |
idillon | 04245a1 | 2022-09-01 11:12:17 -0400 | [diff] [blame] | 198 | <Divider |
| 199 | sx={{ |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 200 | '.MuiDivider-wrapper': { |
idillon | 04245a1 | 2022-09-01 11:12:17 -0400 | [diff] [blame] | 201 | margin: 0, |
| 202 | padding: 0, |
| 203 | }, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 204 | '&::before': { |
| 205 | borderTop: '1px solid #E5E5E5', |
idillon | 04245a1 | 2022-09-01 11:12:17 -0400 | [diff] [blame] | 206 | }, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 207 | '&::after': { |
| 208 | borderTop: '1px solid #E5E5E5', |
idillon | 04245a1 | 2022-09-01 11:12:17 -0400 | [diff] [blame] | 209 | }, |
| 210 | }} |
| 211 | > |
| 212 | <Typography |
| 213 | variant="caption" |
| 214 | fontWeight={700} |
| 215 | border="1px solid #E5E5E5" |
| 216 | borderRadius="5px" |
| 217 | padding="10px 16px" |
| 218 | > |
| 219 | {textDate} |
| 220 | </Typography> |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 221 | </Divider> |
| 222 | </Box> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 223 | ); |
| 224 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 225 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 226 | interface TimeIndicatorProps { |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 227 | time: Dayjs; |
| 228 | hasDateOnTop: boolean; |
| 229 | } |
| 230 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 231 | const TimeIndicator = ({ time, hasDateOnTop }: TimeIndicatorProps) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 232 | const hour = time.hour().toString().padStart(2, '0'); |
| 233 | const minute = time.minute().toString().padStart(2, '0'); |
| 234 | const textTime = `${hour}:${minute}`; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 235 | |
| 236 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 237 | <Stack direction="row" justifyContent="center" marginTop={hasDateOnTop ? '20px' : '30px'}> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 238 | <Typography variant="caption" color="#A7A7A7" fontWeight={700}> |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 239 | {textTime} |
| 240 | </Typography> |
| 241 | </Stack> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 242 | ); |
| 243 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 244 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 245 | interface NotificationMessageRowProps { |
| 246 | message: Message; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 247 | } |
| 248 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 249 | const NotificationMessageRow = ({ message }: NotificationMessageRowProps) => { |
| 250 | let messageComponent; |
| 251 | switch (message.type) { |
| 252 | case 'initial': |
| 253 | messageComponent = <MessageInitial />; |
| 254 | break; |
| 255 | case 'member': |
| 256 | messageComponent = <MessageMember message={message} />; |
| 257 | break; |
| 258 | default: |
| 259 | console.error(`${NotificationMessageRow.name} received unhandled message type: ${message.type}`); |
| 260 | return null; |
idillon | ae655dd | 2022-10-14 18:11:02 -0400 | [diff] [blame] | 261 | } |
| 262 | |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 263 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 264 | <Stack paddingTop={'30px'} alignItems="center"> |
| 265 | {messageComponent} |
| 266 | </Stack> |
| 267 | ); |
| 268 | }; |
| 269 | |
| 270 | interface UserMessageRowProps { |
| 271 | message: Message; |
| 272 | isAccountMessage: boolean; |
| 273 | previousMessage: Message | undefined; |
| 274 | nextMessage: Message | undefined; |
| 275 | time: Dayjs; |
| 276 | showsTime: boolean; |
| 277 | author: Account | Contact; |
| 278 | } |
| 279 | |
| 280 | const UserMessageRow = ({ |
| 281 | message, |
| 282 | previousMessage, |
| 283 | nextMessage, |
| 284 | isAccountMessage, |
| 285 | time, |
| 286 | showsTime, |
| 287 | author, |
| 288 | }: UserMessageRowProps) => { |
| 289 | const authorName = author.getDisplayName(); |
| 290 | const position = isAccountMessage ? 'end' : 'start'; |
| 291 | |
| 292 | const previousIsUserMessageType = checkIsUserMessageType(previousMessage?.type); |
| 293 | const nextIsUserMessageType = checkIsUserMessageType(nextMessage?.type); |
| 294 | const nextTime = dayjs.unix(Number(nextMessage?.timestamp)); |
| 295 | const nextShowsTime = checkShowsTime(nextTime, time); |
| 296 | const isFirstOfGroup = showsTime || !previousIsUserMessageType || previousMessage?.author !== message.author; |
| 297 | const isLastOfGroup = nextShowsTime || !nextIsUserMessageType || message.author !== nextMessage?.author; |
| 298 | |
| 299 | const props = { |
| 300 | message, |
| 301 | isAccountMessage, |
| 302 | isFirstOfGroup, |
| 303 | isLastOfGroup, |
| 304 | }; |
| 305 | |
| 306 | let MessageComponent; |
| 307 | switch (message.type) { |
| 308 | case 'text/plain': |
| 309 | MessageComponent = MessageText; |
| 310 | break; |
| 311 | case 'application/data-transfer+json': |
| 312 | MessageComponent = MessageDataTransfer; |
| 313 | break; |
| 314 | case 'application/call-history+json': |
| 315 | MessageComponent = MessageCall; |
| 316 | break; |
| 317 | default: |
| 318 | console.error(`${UserMessageRow.name} received unhandled message type: ${message.type}`); |
| 319 | return null; |
| 320 | } |
| 321 | |
| 322 | const participantNamePadding = isAccountMessage |
| 323 | ? bubblePadding |
| 324 | : parseInt(avatarSize) + parseInt(spacingBetweenAvatarAndBubble) + parseInt(bubblePadding) + 'px'; |
| 325 | |
| 326 | return ( |
| 327 | <Stack alignItems={position}> |
| 328 | {isFirstOfGroup && ( |
| 329 | <Box padding={`30px ${participantNamePadding} 0 ${participantNamePadding}`}> |
| 330 | <ParticipantName name={authorName} /> |
| 331 | </Box> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 332 | )} |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 333 | <Stack |
| 334 | direction="row" |
| 335 | justifyContent={position} |
| 336 | alignItems="end" |
| 337 | spacing={spacingBetweenAvatarAndBubble} |
| 338 | paddingTop="6px" |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 339 | width="66.66%" |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 340 | > |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 341 | <Box sx={{ width: avatarSize }}> |
| 342 | {!isAccountMessage && isLastOfGroup && ( |
| 343 | <ConversationAvatar |
| 344 | displayName={authorName} |
| 345 | sx={{ width: avatarSize, height: avatarSize, fontSize: '15px' }} |
| 346 | /> |
| 347 | )} |
| 348 | </Box> |
| 349 | <MessageComponent {...props} /> |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 350 | </Stack> |
| 351 | </Stack> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 352 | ); |
| 353 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 354 | |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 355 | interface MessageTooltipProps { |
| 356 | className?: string; |
| 357 | position: MessagePosition; |
| 358 | children: ReactElement; |
| 359 | } |
| 360 | |
| 361 | const MessageTooltip = styled(({ className, position, children }: MessageTooltipProps) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 362 | const [open, setOpen] = useState(false); |
| 363 | const emojis = ['😎', '😄', '😍']; // Should be last three used emojis |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 364 | const additionalOptions = [ |
| 365 | { |
| 366 | Icon: TwoSheetsIcon, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 367 | text: 'Copy', |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 368 | action: () => {}, |
| 369 | }, |
| 370 | { |
| 371 | Icon: OppositeArrowsIcon, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 372 | text: 'Transfer', |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 373 | action: () => {}, |
| 374 | }, |
| 375 | { |
| 376 | Icon: TrashBinIcon, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 377 | text: 'Delete message', |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 378 | action: () => {}, |
| 379 | }, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 380 | ]; |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 381 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 382 | const toggleMoreMenu = useCallback(() => setOpen((open) => !open), [setOpen]); |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 383 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 384 | const onClose = useCallback(() => { |
| 385 | setOpen(false); |
| 386 | }, [setOpen]); |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 387 | |
| 388 | return ( |
| 389 | <Tooltip |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 390 | classes={{ tooltip: className }} // Required for styles. Don't know why |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 391 | placement={position === 'start' ? 'right-start' : 'left-start'} |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 392 | PopperProps={{ |
| 393 | modifiers: [ |
| 394 | { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 395 | name: 'offset', |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 396 | options: { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 397 | offset: [-2, -30], |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 398 | }, |
| 399 | }, |
| 400 | ], |
| 401 | }} |
| 402 | onClose={onClose} |
| 403 | title={ |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 404 | <Stack> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 405 | {/* Whole tooltip's content */} |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 406 | <Stack // Main options |
| 407 | direction="row" |
| 408 | spacing="16px" |
| 409 | > |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 410 | {emojis.map((emoji) => ( |
| 411 | <EmojiButton key={emoji} emoji={emoji} /> |
| 412 | ))} |
| 413 | <ReplyMessageButton /> |
| 414 | <MoreButton onClick={toggleMoreMenu} /> |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 415 | </Stack> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 416 | {open && ( // Additional menu options |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 417 | <> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 418 | <Divider sx={{ paddingTop: '16px' }} /> |
| 419 | <List sx={{ padding: 0, paddingTop: '8px', marginBottom: '-8px' }}> |
| 420 | {additionalOptions.map((option) => ( |
| 421 | <ListItemButton |
| 422 | key={option.text} |
| 423 | sx={{ |
| 424 | padding: '8px', |
| 425 | }} |
| 426 | > |
| 427 | <Stack // Could not find proper way to set spacing between ListItemIcon and ListItemText |
| 428 | direction="row" |
| 429 | spacing="16px" |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 430 | > |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 431 | <option.Icon |
| 432 | sx={{ |
| 433 | height: '16px', |
| 434 | margin: 0, |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 435 | color: (theme: Theme) => theme?.palette?.primary?.dark, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 436 | }} |
| 437 | /> |
| 438 | <ListItemText |
| 439 | primary={option.text} |
| 440 | primaryTypographyProps={{ |
| 441 | fontSize: '12px', |
| 442 | lineHeight: '16px', |
| 443 | }} |
| 444 | sx={{ |
| 445 | height: '16px', |
| 446 | margin: 0, |
| 447 | }} |
| 448 | /> |
| 449 | </Stack> |
| 450 | </ListItemButton> |
| 451 | ))} |
| 452 | </List> |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 453 | </> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 454 | )} |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 455 | </Stack> |
| 456 | } |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 457 | > |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 458 | {/* div fixes 'Function components cannot be given refs' error */} |
| 459 | <div>{children}</div> |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 460 | </Tooltip> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 461 | ); |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 462 | })(({ position }) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 463 | const largeRadius = '20px'; |
| 464 | const smallRadius = '5px'; |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 465 | return { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 466 | backgroundColor: 'white', |
| 467 | padding: '16px', |
| 468 | boxShadow: '3px 3px 7px #00000029', |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 469 | borderRadius: largeRadius, |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 470 | borderStartStartRadius: position === 'start' ? smallRadius : largeRadius, |
| 471 | borderStartEndRadius: position === 'end' ? smallRadius : largeRadius, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 472 | }; |
idillon | 927b759 | 2022-09-15 12:56:45 -0400 | [diff] [blame] | 473 | }); |
| 474 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 475 | interface BubbleProps { |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 476 | position: MessagePosition; |
| 477 | isFirstOfGroup: boolean; |
| 478 | isLastOfGroup: boolean; |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 479 | bubbleColor: string; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 480 | children: ReactNode; |
| 481 | } |
| 482 | |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 483 | const Bubble = ({ position, isFirstOfGroup, isLastOfGroup, bubbleColor, children }: BubbleProps) => { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 484 | const largeRadius = '20px'; |
| 485 | const smallRadius = '5px'; |
Adrien Béraud | 023f7cf | 2022-09-18 14:57:53 -0400 | [diff] [blame] | 486 | const radius = useMemo(() => { |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 487 | if (position === 'start') { |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 488 | return { |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 489 | borderStartStartRadius: isFirstOfGroup ? largeRadius : smallRadius, |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 490 | borderStartEndRadius: largeRadius, |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 491 | borderEndStartRadius: isLastOfGroup ? largeRadius : smallRadius, |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 492 | borderEndEndRadius: largeRadius, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 493 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 494 | } |
| 495 | return { |
| 496 | borderStartStartRadius: largeRadius, |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 497 | borderStartEndRadius: isFirstOfGroup ? largeRadius : smallRadius, |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 498 | borderEndStartRadius: largeRadius, |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 499 | borderEndEndRadius: isLastOfGroup ? largeRadius : smallRadius, |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 500 | }; |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 501 | }, [isFirstOfGroup, isLastOfGroup, position]); |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 502 | |
| 503 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 504 | <Box |
| 505 | sx={{ |
| 506 | width: 'fit-content', |
| 507 | backgroundColor: bubbleColor, |
| 508 | padding: bubblePadding, |
| 509 | ...radius, |
| 510 | }} |
| 511 | > |
| 512 | {children} |
| 513 | </Box> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 514 | ); |
| 515 | }; |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 516 | |
idillon-sfl | 9d956ab | 2022-10-20 16:33:24 -0400 | [diff] [blame] | 517 | interface ParticipantNameProps { |
| 518 | name: string; |
| 519 | } |
| 520 | |
| 521 | const ParticipantName = ({ name }: ParticipantNameProps) => { |
idillon | bef18a5 | 2022-09-01 01:51:40 -0400 | [diff] [blame] | 522 | return ( |
idillon-sfl | 118ae44 | 2022-10-25 10:42:54 -0400 | [diff] [blame^] | 523 | <Typography variant="caption" color="#A7A7A7" fontWeight={700}> |
| 524 | {name} |
| 525 | </Typography> |
| 526 | ); |
| 527 | }; |
| 528 | |
| 529 | interface MessageProps { |
| 530 | messageIndex: number; |
| 531 | messages: Message[]; |
| 532 | isAccountMessage: boolean; |
| 533 | author: Account | Contact; |
| 534 | } |
| 535 | |
| 536 | export const MessageRow = ({ messageIndex, messages, isAccountMessage, author }: MessageProps) => { |
| 537 | const message = messages[messageIndex]; |
| 538 | const previousMessage = findPreviousVisibleMessage(messages, messageIndex); |
| 539 | const nextMessage = findNextVisibleMessage(messages, messageIndex); |
| 540 | const time = dayjs.unix(Number(message.timestamp)); |
| 541 | const previousTime = dayjs.unix(Number(previousMessage?.timestamp)); |
| 542 | const showDate = |
| 543 | message?.type === 'initial' || previousTime.year() !== time.year() || previousTime.dayOfYear() !== time.dayOfYear(); |
| 544 | const showTime = checkShowsTime(time, previousTime); |
| 545 | let messageComponent; |
| 546 | if (checkIsUserMessageType(message.type)) { |
| 547 | messageComponent = ( |
| 548 | <UserMessageRow |
| 549 | message={message} |
| 550 | previousMessage={previousMessage} |
| 551 | nextMessage={nextMessage} |
| 552 | time={time} |
| 553 | showsTime={showTime} |
| 554 | isAccountMessage={isAccountMessage} |
| 555 | author={author} |
| 556 | /> |
| 557 | ); |
| 558 | } else if (checkIsNotificationMessageType(message.type)) { |
| 559 | messageComponent = <NotificationMessageRow message={message} />; |
| 560 | } else if (checkIsInvisibleMessageType(message.type)) { |
| 561 | return null; |
| 562 | } else { |
| 563 | const _exhaustiveCheck: never = message.type; |
| 564 | return _exhaustiveCheck; |
| 565 | } |
| 566 | |
| 567 | return ( |
| 568 | <Stack> |
| 569 | {showDate && <DateIndicator time={time} />} |
| 570 | {showTime && <TimeIndicator time={time} hasDateOnTop={showDate} />} |
| 571 | {messageComponent} |
| 572 | </Stack> |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 573 | ); |
| 574 | }; |