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 0dd626e..a4f6e5a 100644 --- a/src/components/Chat/ChatGroup.tsx +++ b/src/components/Chat/ChatGroup.tsx @@ -31,17 +31,27 @@ 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, @@ -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,8 +82,9 @@ 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); const socketRef = useRef(null); // WebSocket reference const timeoutIdRef = useRef(null); // Timeout ID reference @@ -778,11 +789,71 @@ export const ChatGroup = ({ : { isEdited: chatReference ? true : false, }; + const imagesToPublish = []; + 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( + 'PUBLISH_MULTIPLE_QDN_RESOURCES', + + { + resources: imagesToPublish, + }, + 240000, + true + ); + 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 + ? isDeleteImage + ? [] + : onEditMessage?.images || [] + : []; + const otherData = { repliedTo, ...(onEditMessage?.decryptedData || {}), type: chatReference ? 'edit' : '', specialId: uid.rnd(), + images: images, ...publicData, }; const objectMessage = { @@ -790,6 +861,7 @@ export const ChatGroup = ({ [isPrivate ? 'message' : 'messageText']: message, version: 3, }; + const message64: any = await objectToBase64(objectMessage); const encryptSingle = @@ -824,6 +896,8 @@ export const ChatGroup = ({ clearEditorContent(); setReplyMessage(null); setOnEditMessage(null); + setIsDeleteImage(false); + setChatImagesToSave([]); } // send chat message } catch (error) { @@ -889,6 +963,8 @@ export const ChatGroup = ({ } setReplyMessage(message); setOnEditMessage(null); + setIsDeleteImage(false); + setChatImagesToSave([]); editorRef?.current?.chain().focus(); }, [onEditMessage] @@ -986,6 +1062,23 @@ export const ChatGroup = ({ const theme = useTheme(); + 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 (
+ + {!isDeleteImage && + onEditMessage && + messageHasImage(onEditMessage) && + onEditMessage?.images?.map((_, index) => ( +
+ + + 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 && ( @@ -1086,7 +1291,8 @@ export const ChatGroup = ({ onClick={() => { setReplyMessage(null); setOnEditMessage(null); - + setIsDeleteImage(false); + setChatImagesToSave([]); clearEditorContent(); }} > @@ -1104,6 +1310,7 @@ export const ChatGroup = ({ isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent} membersWithNames={members} + insertImage={insertImage} /> {messageSize > 750 && ( { switch (level?.toString()) { @@ -366,7 +368,9 @@ export const MessageItem = React.memo( ) : ( )} - + {message?.images && messageHasImage(message) && ( + + )} { - if (editor) { + if (editor && !isChat) { editor.view.dom.addEventListener('paste', handlePaste); return () => { editor.view.dom.removeEventListener('paste', handlePaste); }; } - }, [editor]); + }, [editor, isChat]); return (
@@ -366,12 +367,46 @@ export default ({ customEditorHeight, membersWithNames, enableMentions, + insertImage, }) => { const theme = useTheme(); const [isDisabledEditorEnter, setIsDisabledEditorEnter] = useAtom( isDisabledEditorEnterAtom ); + const handleImageUpload = useCallback( + async (file) => { + try { + if (!file.type.includes('image')) return; + let compressedFile = file; + if (file.type !== 'image/gif') { + await new Promise((resolve) => { + new Compressor(file, { + quality: 0.6, + maxWidth: 1200, + mimeType: 'image/webp', + success(result) { + compressedFile = result; + resolve(); + }, + error(err) { + console.error('Image compression error:', err); + }, + }); + }); + } + + if (compressedFile) { + const toBase64 = await fileToBase64(compressedFile); + insertImage(toBase64); + } + } catch (error) { + console.error(error); + } + }, + [insertImage] + ); + const extensionsFiltered = isChat ? extensions.filter((item) => item?.name !== 'image') : extensions; @@ -543,6 +578,24 @@ export default ({ } return false; }, + handlePaste(view, event) { + if (!isChat) return; + const items = event.clipboardData?.items; + if (!items) return false; + + for (const item of items) { + if (item.type.startsWith('image/')) { + const file = item.getAsFile(); + if (file) { + event.preventDefault(); // Block the default paste + handleImageUpload(file); // Custom handler + return true; // Let ProseMirror know we handled it + } + } + } + + return false; // fallback to default behavior otherwise + }, }} /> diff --git a/src/qortalRequests/get.ts b/src/qortalRequests/get.ts index d4ce1bf..a14676a 100644 --- a/src/qortalRequests/get.ts +++ b/src/qortalRequests/get.ts @@ -1694,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 + ); +};