From f7363563ade86ad18dd21ce3b577af60f5bbd4bb Mon Sep 17 00:00:00 2001 From: Mohamed Marrouchi Date: Fri, 17 Jan 2025 07:17:54 +0100 Subject: [PATCH] fix: carousel display + refactor attachment url --- .../src/components/contents/ContentDialog.tsx | 1 + .../inbox/components/AttachmentViewer.tsx | 14 ++++++------- .../components/inbox/components/Carousel.tsx | 10 +++++++--- frontend/src/hooks/useGetAttachmentUrl.ts | 20 +++++++++++++++++++ frontend/src/utils/attachment.ts | 16 +++++++++++++-- 5 files changed, 49 insertions(+), 12 deletions(-) create mode 100644 frontend/src/hooks/useGetAttachmentUrl.ts diff --git a/frontend/src/components/contents/ContentDialog.tsx b/frontend/src/components/contents/ContentDialog.tsx index 642f9d91..164e69aa 100644 --- a/frontend/src/components/contents/ContentDialog.tsx +++ b/frontend/src/components/contents/ContentDialog.tsx @@ -117,6 +117,7 @@ const ContentFieldInput: React.FC = ({ value={field.value?.payload?.id} accept={MIME_TYPES["images"].join(",")} format="full" + size={256} resourceRef={AttachmentResourceRef.ContentAttachment} /> ); diff --git a/frontend/src/components/inbox/components/AttachmentViewer.tsx b/frontend/src/components/inbox/components/AttachmentViewer.tsx index e8b98306..4784cf87 100644 --- a/frontend/src/components/inbox/components/AttachmentViewer.tsx +++ b/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 = - "id" in message.attachment?.payload && message.attachment?.payload.id - ? `${apiUrl}attachment/download/${message.attachment?.payload.id}` - : message.attachment?.payload?.url; + const url = getUrl(message.attachment?.payload); return ; }; diff --git a/frontend/src/components/inbox/components/Carousel.tsx b/frontend/src/components/inbox/components/Carousel.tsx index ab883bf7..eb0c732f 100644 --- a/frontend/src/components/inbox/components/Carousel.tsx +++ b/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 ( {props.content.image_url ? ( diff --git a/frontend/src/hooks/useGetAttachmentUrl.ts b/frontend/src/hooks/useGetAttachmentUrl.ts new file mode 100644 index 00000000..c3bfcfac --- /dev/null +++ b/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); + }; +}; diff --git a/frontend/src/utils/attachment.ts b/frontend/src/utils/attachment.ts index db7a3f86..59c2ba8b 100644 --- a/frontend/src/utils/attachment.ts +++ b/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; +}