display images

src/components/Chat/ChatList.tsx

@@ -271,7 +271,11 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
                   message.isEdit = true
                   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

src/components/Chat/MessageItem.tsx

@@ -33,6 +33,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()){
@@ -346,6 +348,9 @@ const onSeenFunc = useCallback(()=> {
         ) : (
           <MessageDisplay setMobileViewModeKeepOpen={setMobileViewModeKeepOpen} htmlContent={message.text} />
         )}
+         {message?.images && messageHasImage(message) && (
+                <Embed embedLink={buildImageEmbedLink(message.images[0])} />
+              )}
         <Box
           sx={{
             display: "flex",

src/components/Embeds/ImageEmbed.tsx

@@ -239,6 +239,9 @@ export const ImageCard = ({
               position: "relative",
               width: "100%",
               height: "100%",
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
               backgroundColor: "#000", 
             }}
           >

src/qortalRequests/get.ts

@@ -1531,7 +1531,7 @@ if (!skip) {
     };
     const messageObject = fullMessageObject ? fullMessageObject : {
       messageText: tiptapJson,
-      images: [""],
+      images: [],
       repliedTo: "",
       version: 3,
     };

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&timestamp=${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
+  );
+};