render decrypted images

4 files changed, 176 insertions, 12 deletions

diff --git a/src/components/ChatMessage.svelte b/src/components/ChatMessage.svelte
index aeaac210..d28aefc4 100644
--- a/src/components/ChatMessage.svelte
+++ b/src/components/ChatMessage.svelte
@@ -1,14 +1,50 @@
 <script lang="ts">
   import { parseContent, isImage, isVideo, isAudio } from "$lib/parseContent";
 
-  let { content, tags = [] }: { content: string; tags?: any[] } = $props();
+  let {
+    content,
+    tags = [],
+    decryptMedia,
+  }: {
+    content: string;
+    tags?: any[];
+    decryptMedia?: (tag: string[]) => Promise<string>;
+  } = $props();
 
-  // Extract image URLs from imeta tags (NIP-92)
-  let imageUrls: string[] = $derived(
+  // Detect MIP-04 encrypted media (has "v mip04-v2" field)
+  let encryptedMedia = $derived(
+    tags.filter(
+      (t: string[]) =>
+        t[0] === "imeta" &&
+        t.some((v) => v === "v mip04-v2") &&
+        t.some((v) => v.startsWith("url ")),
+    ),
+  );
+
+  // Plain (unencrypted) media from imeta tags
+  let plainMedia = $derived(
     tags
-      .filter((t: string[]) => t[0] === "imeta" && t.some((v) => v.startsWith("m image/")))
-      .map((t: string[]) => t.find((v) => v.startsWith("url "))?.slice(4))
-      .filter((url): url is string => !!url),
+      .filter(
+        (t: string[]) =>
+          t[0] === "imeta" &&
+          !t.some((v) => v === "v mip04-v2") &&
+          t.some((v) => v.startsWith("url ")),
+      )
+      .map((t: string[]) => ({
+        url: t.find((v) => v.startsWith("url "))?.slice(4) || "",
+        mime: t.find((v) => v.startsWith("m "))?.slice(2) || "",
+      }))
+      .filter((m) => m.url),
+  );
+
+  // Set of all imeta URLs to suppress duplicate link rendering
+  let imetaUrls = $derived(
+    new Set([
+      ...plainMedia.map((m) => m.url),
+      ...encryptedMedia
+        .map((t: string[]) => t.find((v) => v.startsWith("url "))?.slice(4) || "")
+        .filter(Boolean),
+    ]),
   );
 
   let parts = $derived(parseContent({ content, tags }));
@@ -28,12 +64,47 @@
     } catch {}
     return `@${pubkey.slice(0, 8)}...`;
   };
+
+  const getMime = (tag: string[]): string =>
+    tag.find((v) => v.startsWith("m "))?.slice(2) || "image/jpeg";
 </script>
 
-{#each imageUrls as url}
-  <a href={url} target="_blank" rel="noopener noreferrer">
-    <img src={url} alt="" class="chat-img" />
-  </a>
+{#each encryptedMedia as tag}
+  {#if decryptMedia}
+    {@const mime = getMime(tag)}
+    {#await decryptMedia(tag)}
+      <div class="chat-img-placeholder"></div>
+    {:then blobUrl}
+      {#if mime.startsWith("image/")}
+        <a href={blobUrl} target="_blank" rel="noopener noreferrer">
+          <img src={blobUrl} alt="" class="chat-img" />
+        </a>
+      {:else if mime.startsWith("video/")}
+        <!-- svelte-ignore a11y_media_has_caption -->
+        <video src={blobUrl} controls class="chat-video"></video>
+      {:else if mime.startsWith("audio/")}
+        <audio src={blobUrl} controls></audio>
+      {/if}
+    {:catch}
+      {@const url = tag.find((v) => v.startsWith("url "))?.slice(4) || ""}
+      <a href={url} target="_blank" rel="noopener noreferrer" class="chat-link">{truncUrl(url)}</a>
+    {/await}
+  {/if}
+{/each}
+
+{#each plainMedia as media}
+  {#if media.mime.startsWith("image/")}
+    <a href={media.url} target="_blank" rel="noopener noreferrer">
+      <img src={media.url} alt="" class="chat-img" />
+    </a>
+  {:else if media.mime.startsWith("video/")}
+    <!-- svelte-ignore a11y_media_has_caption -->
+    <video src={media.url} controls class="chat-video"></video>
+  {:else if media.mime.startsWith("audio/")}
+    <audio src={media.url} controls></audio>
+  {:else}
+    <a href={media.url} target="_blank" rel="noopener noreferrer" class="chat-link">{truncUrl(media.url)}</a>
+  {/if}
 {/each}
 
 {#each parts as { type, value }}
@@ -42,7 +113,9 @@
   {:else if type === "newline"}
     <br />
   {:else if type === "link"}
-    {#if isImage(value.url)}
+    {#if imetaUrls.has(value.url)}
+      <!-- Already rendered as imeta media above -->
+    {:else if isImage(value.url)}
       <a href={value.url} target="_blank" rel="noopener noreferrer">
         <img src={value.url} alt="" class="chat-img" />
       </a>
@@ -78,6 +151,20 @@
     margin: 4px 0;
   }
 
+  .chat-img-placeholder {
+    width: 200px;
+    height: 150px;
+    border-radius: 8px;
+    margin: 4px 0;
+    background: var(--bg-secondary, #e5e7eb);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 0.5; }
+    50% { opacity: 0.8; }
+  }
+
   .chat-video {
     max-width: 100%;
     border-radius: 8px;
diff --git a/src/lib/messaging.ts b/src/lib/messaging.ts
index becc1714..ba2d21ad 100644
--- a/src/lib/messaging.ts
+++ b/src/lib/messaging.ts
@@ -15,6 +15,7 @@ export {
   findOrCreateDmGroup,
   subscribeToMessages,
   fetchGroupHistory,
+  decryptMediaUrl,
 } from "$lib/mls-relay";
 
 export type { GroupInfo } from "$lib/mls-relay";
diff --git a/src/lib/mls-relay.ts b/src/lib/mls-relay.ts
index 8ab89e98..5eb8dbe3 100644
--- a/src/lib/mls-relay.ts
+++ b/src/lib/mls-relay.ts
@@ -9,6 +9,7 @@ import { nip19 } from "nostr-tools";
 import { SimplePool } from "nostr-tools/pool";
 import { Relay } from "nostr-tools/relay";
 import { getMarmotClient, getInviteReader, DM_RELAYS } from "$lib/marmot";
+import { parseMediaImetaTag } from "@internet-privacy/marmot-ts";
 import { post } from "$lib/utils";
 
 const pool = new SimplePool();
@@ -53,11 +54,21 @@ export interface GroupInfo {
 // LocalStorage cache (per-user)
 // ---------------------------------------------------------------------------
 
+const CACHE_VERSION = 2; // bump to clear stale caches (v1 lacked tags)
+
 function loadLocalCache(userPubkey?: string): void {
   if (userPubkey) _cacheUserPubkey = userPubkey;
   const pk = _cacheUserPubkey;
   if (!pk) return;
   try {
+    const ver = localStorage.getItem(`mls:cacheVersion:${pk}`);
+    if (ver !== String(CACHE_VERSION)) {
+      // Stale cache — clear it so messages are re-fetched with current code
+      localStorage.removeItem(`mls:groupRumours:${pk}`);
+      localStorage.removeItem(`mls:processedEvents:${pk}`);
+      localStorage.setItem(`mls:cacheVersion:${pk}`, String(CACHE_VERSION));
+      return;
+    }
     const cached = localStorage.getItem(`mls:groupRumours:${pk}`);
     if (cached) {
       const obj = JSON.parse(cached);
@@ -598,6 +609,7 @@ async function handleGroupMessageEvent(
           content = rumor.content ?? raw;
           senderPubkey = rumor.pubkey ?? event.pubkey;
           if (Array.isArray(rumor.tags)) tags = rumor.tags;
+          console.log("[mls] decoded rumor:", { content: content?.slice(0, 100), tags, keys: Object.keys(rumor) });
         } catch {
           content = raw;
           senderPubkey = event.pubkey;
@@ -708,3 +720,66 @@ function cacheGroupRumour(groupId: string, rumour: any): void {
   groupRumourCache.set(groupId, existing);
   saveLocalCache();
 }
+
+// ---------------------------------------------------------------------------
+// MIP-04 media decryption
+// ---------------------------------------------------------------------------
+
+const MEDIA_CACHE_NAME = "coinos-media-v1";
+const _mediaBlobCache = new Map<string, string>(); // sha256 → blob URL (in-memory)
+
+async function getCachedMedia(sha256: string, mime: string): Promise<string | null> {
+  if (_mediaBlobCache.has(sha256)) return _mediaBlobCache.get(sha256)!;
+  try {
+    const cache = await caches.open(MEDIA_CACHE_NAME);
+    const resp = await cache.match(`/media/${sha256}`);
+    if (!resp) return null;
+    const blob = await resp.blob();
+    const blobUrl = URL.createObjectURL(blob);
+    _mediaBlobCache.set(sha256, blobUrl);
+    return blobUrl;
+  } catch {
+    return null;
+  }
+}
+
+async function putCachedMedia(sha256: string, data: BlobPart, mime: string): Promise<string> {
+  const blob = new Blob([data], { type: mime });
+  const blobUrl = URL.createObjectURL(blob);
+  _mediaBlobCache.set(sha256, blobUrl);
+  try {
+    const cache = await caches.open(MEDIA_CACHE_NAME);
+    await cache.put(`/media/${sha256}`, new Response(blob.slice()));
+  } catch {}
+  return blobUrl;
+}
+
+/**
+ * Decrypt a MIP-04 encrypted media attachment and return a blob URL.
+ * Results are cached in the Cache API (persists across page loads).
+ */
+export async function decryptMediaUrl(groupId: string, tag: string[]): Promise<string> {
+  const attachment = parseMediaImetaTag(tag);
+  if (!attachment) throw new Error("Invalid MIP-04 imeta tag");
+
+  const cached = await getCachedMedia(attachment.sha256, attachment.type);
+  if (cached) return cached;
+
+  const userPubkey = _cacheUserPubkey;
+  if (!userPubkey) throw new Error("No user pubkey");
+
+  const client = getMarmotClient(userPubkey);
+  const group = await client.getGroup(groupId);
+
+  // Fetch encrypted blob from blossom
+  const url = attachment.url;
+  if (!url) throw new Error("No URL in attachment");
+  const resp = await fetch(url);
+  if (!resp.ok) throw new Error(`Fetch failed: ${resp.status}`);
+  const encryptedBytes = new Uint8Array(await resp.arrayBuffer());
+
+  // Decrypt using group's MLS epoch key
+  const { data } = await group.decryptMedia(encryptedBytes, attachment);
+
+  return putCachedMedia(attachment.sha256, data as BlobPart, attachment.type);
+}
diff --git a/src/routes/(app)/messages/[id]/+page.svelte b/src/routes/(app)/messages/[id]/+page.svelte
index c8ba8051..f9aea4da 100644
--- a/src/routes/(app)/messages/[id]/+page.svelte
+++ b/src/routes/(app)/messages/[id]/+page.svelte
@@ -9,6 +9,7 @@
     subscribeToMessages, fetchGroupHistory,
     findOrCreateDmGroup,
     resolveUser, displayName,
+    decryptMediaUrl,
   } from "$lib/messaging";
   import type { GroupInfo } from "$lib/messaging";
   import { t } from "$lib/translations";
@@ -282,7 +283,7 @@
                   {#if j === 0}
                     <div class="sender-name">{senderName(run.pubkey)}</div>
                   {/if}
-                  <ChatMessage content={rumour.content} tags={rumour.tags} />
+                  <ChatMessage content={rumour.content} tags={rumour.tags} decryptMedia={(tag) => decryptMediaUrl(groupId, tag)} />
                   <span class="timestamp secondary text-xs">
                     {TIME.format(new Date(rumour.created_at * 1000))}
                   </span>