fix: carousel display + refactor attachment url

frontend/src/components/contents/ContentDialog.tsx

@@ -117,6 +117,7 @@ const ContentFieldInput: React.FC<ContentFieldInput> = ({
           value={field.value?.payload?.id}
           accept={MIME_TYPES["images"].join(",")}
           format="full"
+          size={256}
           resourceRef={AttachmentResourceRef.ContentAttachment}
         />
       );

frontend/src/components/inbox/components/AttachmentViewer.tsx

@@ -11,8 +11,8 @@ import { Button, Dialog, DialogContent } from "@mui/material";
 import { FC } from "react";
 
 import { DialogTitle } from "@/app-components/dialogs";
-import { useConfig } from "@/hooks/useConfig";
 import { useDialog } from "@/hooks/useDialog";
+import { useGetAttachmentUrl } from "@/hooks/useGetAttachmentUrl";
 import { useTranslate } from "@/hooks/useTranslate";
 import {
   FileType,
@@ -95,19 +95,19 @@ export const AttachmentViewer = (props: {
   message: StdIncomingAttachmentMessage | StdOutgoingAttachmentMessage;
 }) => {
   const message = props.message;
-  const { apiUrl } = useConfig();
+  const getUrl = useGetAttachmentUrl();
 
   // if the attachment is an array show a 4x4 grid with a +{number of remaining attachment} and open a modal to show the list of attachments
   // Remark: Messenger doesn't send multiple attachments when user sends multiple at once, it only relays the first one to Hexabot
   // TODO: Implenent this
-  if (Array.isArray(message.attachment)) {
+  if (!message.attachment) {
+    return <>No attachment to display</>;
+  } else if (Array.isArray(message.attachment)) {
     return <>Not yet Implemented</>;
   }
+
   const AttachmentViewerForType = componentMap[message.attachment.type];
-  const url =
+  const url = getUrl(message.attachment?.payload);
-    "id" in message.attachment?.payload && message.attachment?.payload.id
-      ? `${apiUrl}attachment/download/${message.attachment?.payload.id}`
-      : message.attachment?.payload?.url;
 
   return <AttachmentViewerForType url={url} />;
 };

frontend/src/components/inbox/components/Carousel.tsx

@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import {
@@ -18,8 +19,9 @@ import {
   styled,
   Typography,
 } from "@mui/material";
-import { forwardRef, useEffect, useRef, useState, useCallback } from "react";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 
+import { useGetAttachmentUrl } from "@/hooks/useGetAttachmentUrl";
 import {
   AnyButton as ButtonType,
   OutgoingPopulatedListMessage,
@@ -188,6 +190,8 @@ const ListCard = forwardRef<
     buttons: ButtonType[];
   }
 >(function ListCardRef(props, ref) {
+  const getUrl = useGetAttachmentUrl();
+
   return (
     <Card
       style={{
@@ -203,7 +207,7 @@ const ListCard = forwardRef<
     >
       {props.content.image_url ? (
         <CardMedia
-          image={props.content.image_url?.payload?.url as string}
+          image={getUrl(props.content.image_url.payload)}
           sx={{ height: "185px" }}
           title={props.content.title}
         />

frontend/src/hooks/useGetAttachmentUrl.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { AttachmentForeignKey } from "@/types/message.types";
+import { getAttachmentDownloadUrl } from "@/utils/attachment";
+
+import { useConfig } from "./useConfig";
+
+export const useGetAttachmentUrl = () => {
+  const { apiUrl } = useConfig();
+
+  return (attachment: AttachmentForeignKey) => {
+    return getAttachmentDownloadUrl(apiUrl, attachment);
+  };
+};

frontend/src/utils/attachment.ts

@@ -1,12 +1,15 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { FileType } from "@/types/message.types";
+
+import { AttachmentForeignKey, FileType } from "@/types/message.types";
+
+import { buildURL } from "./URL";
 
 export const MIME_TYPES = {
   images: ["image/jpeg", "image/png", "image/gif", "image/webp"],
@@ -34,3 +37,12 @@ export function getFileType(mimeType: string): FileType {
     return FileType.file;
   }
 }
+
+export function getAttachmentDownloadUrl(
+  baseUrl: string,
+  attachment: AttachmentForeignKey,
+) {
+  return "id" in attachment && attachment.id
+    ? buildURL(baseUrl, `/attachment/download/${attachment.id}`)
+    : attachment.url;
+}