✨(images) implement cid: image support (#378)

Parses the email and replaces cid: images with blob urls

Author: sylvinus

src/backend/core/api/openapi.json

@@ -4983,10 +4983,17 @@
                         "readOnly": true,
                         "title": "Created on",
                         "description": "date and time at which a record was created"
+                    },
+                    "cid": {
+                        "type": "string",
+                        "readOnly": true,
+                        "nullable": true,
+                        "description": "Content-ID for inline images"
                     }
                 },
                 "required": [
                     "blobId",
+                    "cid",
                     "created_at",
                     "id",
                     "name",

src/backend/core/api/serializers.py

@@ -377,6 +377,9 @@ class AttachmentSerializer(serializers.ModelSerializer):
     blobId = serializers.UUIDField(source="blob.id", read_only=True)
     type = serializers.CharField(source="content_type", read_only=True)
     sha256 = serializers.SerializerMethodField()
+    cid = serializers.CharField(
+        read_only=True, allow_null=True, help_text="Content-ID for inline images"
+    )
 
     def get_sha256(self, obj):
         """Convert binary SHA256 to hex string."""
@@ -392,6 +395,7 @@ class Meta:
             "type",
             "sha256",
             "created_at",
+            "cid",
         ]
         read_only_fields = fields
 

src/frontend/src/features/api/gen/models/attachment.ts

@@ -21,4 +21,9 @@ export interface Attachment {
   readonly sha256: string;
   /** date and time at which a record was created */
   readonly created_at: string;
+  /**
+   * Content-ID for inline images
+   * @nullable
+   */
+  readonly cid: string | null;
 }

src/frontend/src/features/api/utils.ts

@@ -27,16 +27,18 @@ export const isJson = (str: string) => {
   return true;
 };
 
+export function getApiOrigin() {
+  return process.env.NEXT_PUBLIC_API_ORIGIN ||
+    (typeof window !== "undefined" ? window.location.origin : "");
+}
+
 /**
  * Build the request url from the context url and the base url
  *
  */
 export function getRequestUrl(pathname: string, params?: Record<string, string>): string {
-  const origin =
-    process.env.NEXT_PUBLIC_API_ORIGIN ||
-    (typeof window !== "undefined" ? window.location.origin : "");
 
-  const requestUrl = new URL(`${origin}${pathname}`);
+  const requestUrl = new URL(`${getApiOrigin()}${pathname}`);
 
   if (params) {
     Object.entries(params).forEach(([key, value]) => {

src/frontend/src/features/forms/components/message-form/drive-attachment-picker.tsx

@@ -8,7 +8,7 @@ import { FEATURE_KEYS, useFeatureFlag } from "@/hooks/use-feature";
 import { DriveIcon } from "./drive-icon";
 import { Attachment } from "@/features/api/gen/models/attachment";
 
-export type DriveFile = { url: string } & Omit<Attachment, 'sha256' | 'blobId'>;
+export type DriveFile = { url: string } & Omit<Attachment, 'sha256' | 'blobId' | 'cid'>;
 
 type DriveAttachmentPickerProps = {
     onPick: (attachments: DriveFile[]) => void;

src/frontend/src/features/layouts/components/thread-view/components/thread-message/index.tsx

@@ -275,6 +275,7 @@ export const ThreadMessage = forwardRef<HTMLElement, ThreadMessageProps>(
                 <MessageBody
                     rawTextBody={textBody}
                     rawHtmlBody={htmlBody}
+                    attachments={message.attachments}
                 />
                 <footer className="thread-message__footer">
                     {!message.is_draft && (message.attachments.length > 0 || driveAttachments.length > 0) && (

src/frontend/src/features/layouts/components/thread-view/components/thread-message/message-body.tsx

@@ -1,15 +1,19 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import DomPurify from "dompurify";
 import { useTranslation } from "react-i18next";
+import { Attachment } from "@/features/api/gen/models";
+import { getRequestUrl, getApiOrigin } from "@/features/api/utils";
+import { getBlobDownloadRetrieveUrl } from "@/features/api/gen/blob/blob";
 
 type MessageBodyProps = {
     rawHtmlBody: string;
     rawTextBody: string;
+    attachments?: readonly Attachment[];
 }
 
 const CSP = [
-    // Allow images from our domain and data URIs
-    "img-src 'self' data: http://localhost:8900",
+    // Allow images from our domain, data URIs, and API endpoints
+    `img-src 'self' data: ${getApiOrigin()}`,
     // Disable everything else by default
     "default-src 'none'",
     // No scripts at all
@@ -35,10 +39,22 @@ const CSP = [
     "frame-ancestors 'none'",
   ].join('; ');
 
-const MessageBody = ({ rawHtmlBody, rawTextBody }: MessageBodyProps) => {
+const MessageBody = ({ rawHtmlBody, rawTextBody, attachments = [] }: MessageBodyProps) => {
     const iframeRef = useRef<HTMLIFrameElement>(null);
     const { t } = useTranslation();
 
+    // Create a mapping of CID to blob URL for CID image transformation
+    const cidToBlobUrlMap = useMemo(() => {
+        const map = new Map<string, string>();
+        attachments.forEach(attachment => {
+            if (attachment.cid) {
+                const blobUrl = getRequestUrl(getBlobDownloadRetrieveUrl(attachment.blobId));
+                map.set(attachment.cid, blobUrl);
+            }
+        });
+        return map;
+    }, [attachments]);
+
     DomPurify.addHook(
         'afterSanitizeAttributes',
         function (node) {
@@ -50,6 +66,18 @@ const MessageBody = ({ rawHtmlBody, rawTextBody }: MessageBodyProps) => {
                 }
                 node.setAttribute('rel', 'noopener noreferrer');
             }
+            
+            // Transform CID references in img src attributes
+            if (node.tagName === 'IMG' && cidToBlobUrlMap.size > 0) {
+                const src = node.getAttribute('src');
+                if (src && src.startsWith('cid:')) {
+                    const cid = src.substring(4); // Remove 'cid:' prefix
+                    const blobUrl = cidToBlobUrlMap.get(cid);
+                    if (blobUrl) {
+                        node.setAttribute('src', blobUrl);
+                    }
+                }
+            }
         }
     );
 
@@ -58,7 +86,7 @@ const MessageBody = ({ rawHtmlBody, rawTextBody }: MessageBodyProps) => {
             FORBID_TAGS: ['script', 'object', 'iframe', 'embed', 'audio', 'video'],
             ADD_ATTR: ['target', 'rel'],
         });
-    }, [rawHtmlBody, rawTextBody]);
+    }, [rawHtmlBody, rawTextBody, cidToBlobUrlMap]);
 
     const wrappedHtml = useMemo(() => {
         return `