diff --git a/src/common/useModal.tsx b/src/common/useModal.tsx index e92dc99..29b5d7e 100644 --- a/src/common/useModal.tsx +++ b/src/common/useModal.tsx @@ -1,3 +1,5 @@ +//TODO + import { useRef, useState, useCallback, useMemo } from 'react'; interface State { @@ -34,7 +36,7 @@ export const useModal = () => { const onCancel = useCallback(() => { const { reject } = promiseConfig.current || {}; hide(); - reject?.(); + reject?.('Declined'); }, [hide]); return useMemo( diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx index 2af7c2d..f75758e 100644 --- a/src/components/Chat/ChatGroup.tsx +++ b/src/components/Chat/ChatGroup.tsx @@ -31,18 +31,28 @@ import { subscribeToEvent, unsubscribeFromEvent, } from '../../utils/events'; -import { Box, ButtonBase, Divider, Typography, useTheme } from '@mui/material'; +import { + Box, + ButtonBase, + Divider, + IconButton, + Tooltip, + Typography, + useTheme, +} from '@mui/material'; import ShortUniqueId from 'short-unique-id'; import { ReplyPreview } from './MessageItem'; import { ExitIcon } from '../../assets/Icons/ExitIcon'; import { RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS } from '../../constants/resourceTypes'; -import { isExtMsg } from '../../background'; +import { getFee, isExtMsg } from '../../background'; import AppViewerContainer from '../Apps/AppViewerContainer'; import CloseIcon from '@mui/icons-material/Close'; import { throttle } from 'lodash'; - +import ImageIcon from '@mui/icons-material/Image'; +import { messageHasImage } from '../../utils/chat'; const uid = new ShortUniqueId({ length: 5 }); const uidImages = new ShortUniqueId({ length: 12 }); + export const ChatGroup = ({ selectedGroup, secretKey, @@ -59,7 +69,7 @@ export const ChatGroup = ({ hideView, isPrivate, }) => { - const { isUserBlocked } = useContext(MyContext); + const { isUserBlocked, show } = useContext(MyContext); const [messages, setMessages] = useState([]); const [chatReferences, setChatReferences] = useState({}); const [isSending, setIsSending] = useState(false); @@ -72,7 +82,7 @@ export const ChatGroup = ({ const [replyMessage, setReplyMessage] = useState(null); const [onEditMessage, setOnEditMessage] = useState(null); const [isOpenQManager, setIsOpenQManager] = useState(null); - + const [isDeleteImage, setIsDeleteImage] = useState(false); const [messageSize, setMessageSize] = useState(0); const [chatImagesToSave, setChatImagesToSave] = useState([]); const hasInitializedWebsocket = useRef(false); @@ -780,15 +790,34 @@ export const ChatGroup = ({ isEdited: chatReference ? true : false, }; const imagesToPublish = []; - if (!chatReference && chatImagesToSave?.length > 0) { - chatImagesToSave.forEach((base64Img) => { - const identifier = `qchat_1_group_${selectedGroup}_${uidImages.rnd()}`; - imagesToPublish.push({ - service: 'IMAGE', - identifier, - name: myName, - base64: base64Img, - }); + const deleteImage = + onEditMessage && isDeleteImage && messageHasImage(onEditMessage); + if (deleteImage) { + const fee = await getFee('ARBITRARY'); + + await show({ + publishFee: fee.fee + ' QORT', + message: 'Would you like to delete your previous chat image?', + }); + await window.sendMessage('publishOnQDN', { + data: 'RA==', + identifier: onEditMessage?.images[0]?.identifier, + service: onEditMessage?.images[0]?.service, + }); + } + if (chatImagesToSave?.length > 0) { + const imageToSave = chatImagesToSave[0]; + + const base64ToSave = isPrivate + ? await encryptChatMessage(imageToSave, secretKeyObject) + : imageToSave; + // 1 represents public group, 0 is private + const identifier = `grp-q-manager_${isPrivate ? 0 : 1}_group_${selectedGroup}_${uidImages.rnd()}`; + imagesToPublish.push({ + service: 'IMAGE', + identifier, + name: myName, + base64: base64ToSave, }); const res = await window.sendMessage( @@ -800,24 +829,29 @@ export const ChatGroup = ({ 240000, true ); - console.log('res', res); if (res !== true) throw new Error('Unable to publish images'); } + const images = + imagesToPublish?.length > 0 + ? imagesToPublish.map((item) => { + return { + name: item.name, + identifier: item.identifier, + service: item.service, + timestamp: Date.now(), + }; + }) + : chatReference + ? onEditMessage?.images || [] + : []; + const otherData = { repliedTo, ...(onEditMessage?.decryptedData || {}), type: chatReference ? 'edit' : '', specialId: uid.rnd(), - images: - onEditMessage?.images || - imagesToPublish.map((item) => { - return { - name: item.name, - identifier: item.identifier, - service: item.service, - }; - }), + images: images, ...publicData, }; const objectMessage = { @@ -825,6 +859,7 @@ export const ChatGroup = ({ [isPrivate ? 'message' : 'messageText']: message, version: 3, }; + const message64: any = await objectToBase64(objectMessage); const encryptSingle = @@ -859,6 +894,7 @@ export const ChatGroup = ({ clearEditorContent(); setReplyMessage(null); setOnEditMessage(null); + setIsDeleteImage(false); setChatImagesToSave([]); } // send chat message @@ -925,6 +961,8 @@ export const ChatGroup = ({ } setReplyMessage(message); setOnEditMessage(null); + setIsDeleteImage(false); + setChatImagesToSave([]); editorRef?.current?.chain().focus(); }, [onEditMessage] @@ -1022,10 +1060,23 @@ export const ChatGroup = ({ const theme = useTheme(); - const insertImage = useCallback((img) => { - setChatImagesToSave((prev) => [...prev, img]); - }, []); - + const insertImage = useCallback( + (img) => { + if ( + chatImagesToSave?.length > 0 || + (messageHasImage(onEditMessage) && !isDeleteImage) + ) { + setInfoSnack({ + type: 'error', + message: 'This message already has an image', + }); + setOpenSnack(true); + return; + } + setChatImagesToSave((prev) => [...prev, img]); + }, + [chatImagesToSave, onEditMessage?.images, isDeleteImage] + ); return (
- {chatImagesToSave?.map((imgBase64) => { - return ( - ( +
+ + + setIsDeleteImage(true)} + size="small" + sx={{ + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + backgroundColor: (theme) => + theme.palette.background.paper, + color: (theme) => theme.palette.text.primary, + borderRadius: '50%', + opacity: 0, + transition: 'opacity 0.2s', + boxShadow: (theme) => theme.shadows[2], + '&:hover': { + backgroundColor: (theme) => + theme.palette.background.default, + opacity: 1, + }, + pointerEvents: 'auto', + }} + > + + + +
+ ))} + {chatImagesToSave.map((imgBase64, index) => ( +
+ - ); - })} + + + setChatImagesToSave((prev) => + prev.filter((_, i) => i !== index) + ) + } + size="small" + sx={{ + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + backgroundColor: (theme) => + theme.palette.background.paper, + color: (theme) => theme.palette.text.primary, + borderRadius: '50%', + opacity: 0, + transition: 'opacity 0.2s', + boxShadow: (theme) => theme.shadows[2], + '&:hover': { + backgroundColor: (theme) => + theme.palette.background.default, + opacity: 1, + }, + pointerEvents: 'auto', + }} + > + + + +
+ ))} {replyMessage && ( @@ -1149,7 +1289,8 @@ export const ChatGroup = ({ onClick={() => { setReplyMessage(null); setOnEditMessage(null); - + setIsDeleteImage(false); + setChatImagesToSave([]); clearEditorContent(); }} > diff --git a/src/components/Chat/ChatList.tsx b/src/components/Chat/ChatList.tsx index 8362fad..a7adc41 100644 --- a/src/components/Chat/ChatList.tsx +++ b/src/components/Chat/ChatList.tsx @@ -292,6 +292,11 @@ export const ChatList = ({ message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp; } + if (chatReferences[message.signature]?.edit?.images) { + message.images = + chatReferences[message.signature]?.edit?.images; + message.isEdit = true; + } } // Check if message is updating diff --git a/src/components/Chat/MessageItem.tsx b/src/components/Chat/MessageItem.tsx index d861dac..a29e417 100644 --- a/src/components/Chat/MessageItem.tsx +++ b/src/components/Chat/MessageItem.tsx @@ -45,6 +45,8 @@ import level7Img from '../../assets/badges/level-7.png'; import level8Img from '../../assets/badges/level-8.png'; import level9Img from '../../assets/badges/level-9.png'; import level10Img from '../../assets/badges/level-10.png'; +import { Embed } from '../Embeds/Embed'; +import { buildImageEmbedLink, messageHasImage } from '../../utils/chat'; const getBadgeImg = (level) => { switch (level?.toString()) { @@ -366,7 +368,9 @@ export const MessageItem = React.memo( ) : ( )} - + {message?.images && messageHasImage(message) && ( + + )} { - console.log('data', data); const requiredFields = ['resources']; const missingFields: string[] = []; let feeAmount = null; @@ -1695,7 +1694,7 @@ export const sendChatMessage = async (data, isFromExtension, appInfo) => { ? fullMessageObject : { messageText: tiptapJson, - images: [''], + images: [], repliedTo: '', version: 3, }; diff --git a/src/utils/chat.ts b/src/utils/chat.ts new file mode 100644 index 0000000..c7099c0 --- /dev/null +++ b/src/utils/chat.ts @@ -0,0 +1,22 @@ +export function buildImageEmbedLink(image?: { + name?: string; + identifier?: string; + service?: string; + timestamp?: number; +}): string | null { + if (!image?.name || !image.identifier || !image.service) return null; + + const base = `qortal://use-embed/IMAGE?name=${image.name}&identifier=${image.identifier}&service=${image.service}&mimeType=image%2Fpng×tamp=${image?.timestamp || ''}`; + + const isEncrypted = image.identifier.startsWith('grp-q-manager_0'); + return isEncrypted ? `${base}&encryptionType=group` : base; +} + +export const messageHasImage = (message) => { + return ( + Array.isArray(message?.images) && + message.images[0]?.identifier && + message.images[0]?.name && + message.images[0]?.service + ); +};