@weavy/uikit-react 14.0.4 → 15.0.0

package/src/components/FileVersions.tsx

@@ -0,0 +1,100 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { triggerDownload } from './FileItem';
+import useFileVersions from '../hooks/useFileVersions';
+import classNames from 'classnames';
+import Icon from '../ui/Icon';
+import { getExtension, getIcon } from '../utils/fileUtilities';
+import Dropdown from '../ui/Dropdown';
+import { useMutateFileVersionDelete, useMutateFileVersionRestore } from '../hooks/useMutateFileVersion';
+import { QueryKey } from 'react-query';
+import { toKebabCase } from '../utils/utils';
+import Spinner from '../ui/Spinner';
+import dayjs from 'dayjs';
+
+
+type Props = {
+    filesKey: QueryKey,
+    file: FileType,
+    onVersionSelect?: (currentVersionFile: FileType) => void
+}
+
+const FileVersions = ({ filesKey, file, onVersionSelect }: Props) => {    
+    const fileVersionList = useFileVersions(filesKey, file.id, {});
+    const { isLoading, isError, data, error, isFetching } = fileVersionList;
+
+    const mutateFileVersionRestore = useMutateFileVersionRestore(filesKey);
+    const mutateFileVersionDelete = useMutateFileVersionDelete(filesKey);
+
+    const [activeVersion, setActiveVersion] = useState<FileType>()
+
+    useEffect(() => {
+        setActiveVersion(file);
+    }, [file, file.version])
+
+
+    const handleSelect = (versionFile: FileType) => {
+        setActiveVersion(versionFile);
+        onVersionSelect && onVersionSelect(versionFile);
+    }
+
+    const handleSelectWrapper = (versionFile: FileType, e: React.MouseEvent<HTMLTableRowElement>) => {
+        if (!e.defaultPrevented) {
+            handleSelect(versionFile);
+        }
+    }
+
+    const handleRevert = (versionFile: FileType) => {
+        console.log("reverting file version", versionFile.version);
+        mutateFileVersionRestore.mutate({versionFile});
+        handleSelect(versionFile);
+    }
+
+    const handleRemove = (versionFile: FileType) => {
+        console.log("removing file version", versionFile.version);
+        mutateFileVersionDelete.mutate({versionFile});
+        if (activeVersion === versionFile) {
+            setActiveVersion(file);
+        }
+    }
+
+    if (isLoading) {
+        return (
+            <Spinner.UI spin={true} overlay={true} />
+        )
+    }
+
+    return (
+        <div className="wy-list wy-versions" key={"file-versions" + file.id}>
+            {data && data.map((versionFile: FileType, index) => {
+                let versionIcon = getIcon(versionFile.name || '').icon;
+                let num = data.length - index;
+                let ext = getExtension(versionFile.name);
+                const modifiedAt = dayjs.utc(versionFile.modified_at || versionFile.created_at).tz(dayjs.tz.guess());
+
+                return <div key={'file-version' + versionFile.version} className={classNames("wy-item wy-item-hover wy-item-lg", {"wy-active": versionFile.version == activeVersion?.version})} onClick={handleSelectWrapper.bind(FileVersions, versionFile)}>
+                    {
+                        file.status === "error" ? <Icon.UI name="alert-octagon" color="error" size={48/16/1.5} /> :
+                        file.status === "conflict" ? <Icon.UI name="alert" color="yellow" size={48/16/1.5} /> :
+                        file.status === "pending" ? <Spinner.UI spin={!versionFile.progress} progress={versionFile.progress} size={48} /> :
+                        <Icon.UI name={versionIcon} size={48/16/1.5} className={classNames("wy-kind-" + toKebabCase(versionFile.kind), "wy-ext-" + ext.substring(1))} />
+                    }
+                    <div className="wy-item-body">
+                        <div className="wy-item-title">{num}. {versionFile.name}</div>
+                        <div className="wy-item-text"><time dateTime={versionFile.modified_at || versionFile.created_at} title={modifiedAt.format('LLLL')}>{modifiedAt.fromNow()}</time> · {versionFile.modified_by?.display_name}</div>
+                    </div>
+                
+                    <Dropdown.UI directionX='left'>
+                        <Dropdown.Item onClick={() => triggerDownload(versionFile)}><Icon.UI name="download" /> Download</Dropdown.Item>
+                        {versionFile.version !== file.version && <>
+                            <Dropdown.Divider/>
+                            <Dropdown.Item onClick={() => handleRevert(versionFile)}><Icon.UI name='restore' /> Revert</Dropdown.Item>
+                            <Dropdown.Item onClick={() => handleRemove(versionFile)}><Icon.UI name='delete' /> Remove</Dropdown.Item>
+                        </>}
+                    </Dropdown.UI>
+                </div>
+            })}    
+        </div>
+     )
+}
+
+export default FileVersions;

package/src/components/Files.tsx

@@ -0,0 +1,294 @@
+import React, { useState, useContext, useEffect, useCallback } from 'react';
+import { WeavyContext } from '../contexts/WeavyContext';
+import { FilesProps } from '../types/Files';
+import useFiles from '../hooks/useApps';
+import classNames from 'classnames';
+import FileList from './FileList';
+import Dropdown from '../ui/Dropdown';
+import Icon from '../ui/Icon';
+import Button from '../ui/Button';
+import Spinner from '../ui/Spinner';
+import Sheet from '../ui/Sheet';
+import FileItem from './FileItem';
+import useCloudFiles from '../hooks/useCloudFiles';
+import { useMutateFileUpload, useMutateFileCreate, useMutatingFileUploads, useRemoveMutatingFileUpload, CreateFileProps, FileMutation } from '../hooks/useMutateFile';
+import { useMutateFilesCreate } from '../hooks/useMutateFiles';
+import { useSessionState } from '../hooks/useSessionState';
+import { useMutateAppsSubscribe } from '../hooks/useMutateApps';
+import openUrl from '../utils/openUrl';
+import { useDropzone } from 'react-dropzone';
+
+const Files = ({ 
+    uid, 
+    className, 
+    view: initView = "list", 
+    order: initOrder = { by: "name", descending: false },
+    trashed: initTrashed = false
+}: FilesProps) => {
+
+    const { client } = useContext(WeavyContext);
+    const [appId, setAppId] = useState<number>();
+    const [selectedFiles, setSelectedFiles] = useState<string>("");
+ 
+    if (!client) {
+        throw new Error('Weavy Files component must be used within an WeavyProvider');
+    }
+
+    // init app
+    const { isLoading, data } = useFiles(uid, {});
+    const mutateFilesSubscribe = useMutateAppsSubscribe(["apps", uid]);
+
+    const [showUploadDetails, setShowUploadDetails] = useState<boolean>(false);
+
+    const createFile = useMutateFilesCreate(appId!);
+    const uploadFileMutation = useMutateFileUpload(['files', appId!], createFile);
+    const createFileMutation = useMutateFileCreate(['files', appId!], createFile);
+    const { mutations, status, progress } = useMutatingFileUploads(['files', appId!]);
+    const removeMutatingFileUpload = useRemoveMutatingFileUpload(['files', appId!]);
+
+    let fileInput: HTMLInputElement | null;
+
+    const [view, setView] = useSessionState<FileView>(`files-view-${uid}`, initView);
+    const [order, setOrder] = useSessionState<FileOrder>(`files-order-${uid}`, initOrder);
+    const [showTrashed, setShowTrashed] = useSessionState<boolean>(`files-trashed-${uid}`, initTrashed);
+
+    useEffect(() => {
+        if (data) {
+            setAppId(data.id);
+        } else {
+            setAppId(undefined);
+        }
+    }, [data]);
+
+    useEffect(() => {
+        if (status === "error" || status === "conflict") {
+            setShowUploadDetails(true);
+        }
+        if (mutations.length === 0) {
+            setShowUploadDetails(false)
+        }
+    }, [status, mutations.length])
+
+    // add external file
+    const handleExternalFileAdded = (addedBlobs: BlobType[]) => {
+        addedBlobs.forEach((blob) => handleCreateFile(blob));
+    }
+
+    const { openCloudFiles } = useCloudFiles(handleExternalFileAdded);
+
+    const handleSubscribe = (subscribe: boolean) => {
+        if (appId) {
+            mutateFilesSubscribe.mutateAsync({appId, subscribe})
+        }
+    }
+
+    // add uploaded files
+    const handleCreateFile = async (blob: BlobType, file?: FileType, replace?: boolean) => {
+        let fileProps: CreateFileProps = { blob, file, replace };
+        await createFileMutation.mutateAsync(fileProps, {
+            onSuccess: (data: FileType) => {
+                //console.log("All cloud files added")
+            }
+        });
+    }
+
+    // upload files
+    const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files) {
+            for (var i = 0; i < e.target.files.length; i++) {
+                let file = e.target.files[i];
+                let fileProps = { file: file }
+                uploadFileMutation.mutateAsync(fileProps, {
+                    onSuccess: (data: BlobType) => {
+                        //console.log("All files uploaded")
+                    }
+                });
+            }
+            setSelectedFiles("")
+        }
+    }
+
+    // open file dialog
+    const openFileInput = (e: any) => {
+        //console.log("click")
+        fileInput?.click();
+    }
+
+    // remove file attachment
+    const handleRemoveUpload = (mutation: FileMutation) => {
+        removeMutatingFileUpload(mutation);
+    }
+
+    const handleOverwriteUpload = (mutation: FileMutation) => {
+        removeMutatingFileUpload(mutation);
+        
+        let fileBlob = mutation.state.context?.blob;
+        if (fileBlob) {
+            handleCreateFile(fileBlob, mutation.state.context?.file, true);
+        }
+    }
+      // Pasted file(s)
+
+
+    const handleDownloadArchive = () => {
+        if (appId && data && data.archive_url) {
+            //const archiveUrl = new URL(`/api/apps/${appId}/files.zip`, client.url).toString();
+            openUrl(data.archive_url, "_top", `${uid}.zip`, true);
+        }
+    }
+
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+        // this callback will be called after files get dropped, we will get the acceptedFiles. If you want, you can even access the rejected files too
+        if (acceptedFiles.length > 0) {
+            for (var i = 0; i < acceptedFiles.length; i++) {
+                let file = acceptedFiles[i];
+                let fileProps = { file: file }
+                uploadFileMutation.mutateAsync(fileProps, {});
+            }
+            return true;
+        }
+
+    }, []);
+
+    const { getRootProps, rootRef: pasteRef, isDragActive } = useDropzone({
+        onDrop,
+        noClick: true,
+        noKeyboard: true,
+        disabled: !appId
+    });
+
+    // Pasted file(s)
+    const handlePaste = (evt: any) => {
+        console.debug("File(s) pasted");
+        let files: File[] = [];
+        const items = (evt.clipboardData || evt.originalEvent.clipboardData).items;
+        for (let index in items) {
+        const item = items[index];
+        if (item.kind === 'file') {
+            files = [...files, item.getAsFile()];
+        }
+        }
+        if (files.length) {
+            for (var i = 0; i < files.length; i++) {
+                let file = files[i];
+                let fileProps = { file: file }
+                uploadFileMutation.mutateAsync(fileProps, {
+                    onSuccess: (data: BlobType) => {
+                        //console.log("All files uploaded")
+                    }
+                });
+            }
+        }
+    }
+
+    const delegateHandlePaste = (evt: any) => {
+        if (pasteRef.current) {
+            var targ = evt.target;
+            do {
+                if (pasteRef.current === targ) {
+                    handlePaste(evt);
+                }
+            } while ((targ = targ.parentNode) && targ !== evt.currentTarget);
+        }
+    }
+
+    useEffect(() => {
+        if (appId) {
+            document.addEventListener("paste", delegateHandlePaste);
+            return () => {
+                document.removeEventListener("paste", delegateHandlePaste);
+            }
+        }
+    }, [appId])
+
+    return (!isLoading && !data &&
+        <div>No files app with the contextual id <strong>{uid}</strong> was found.</div>
+    || appId &&
+        
+            <div className={classNames("wy-files", className, { "wy-files-dragging": isDragActive })} {...getRootProps()}>
+                <header className="wy-appbars">
+                    <nav className="wy-toolbar">
+
+                        <div className="wy-toolbar-buttons">
+                            <Dropdown.UI title="Add files" disabled={!appId} buttonContent={
+                                <><span>Add files</span><Icon.UI name="plus"/></>
+                                }>
+                                <>
+                                    <Dropdown.Item onClick={openFileInput}><Icon.UI name="attachment"/> From device</Dropdown.Item>
+                                    <input type="file" value={selectedFiles}  ref={input => fileInput = input} onChange={handleFileUpload} multiple hidden tabIndex={-1} />
+                                </>
+                                <Dropdown.Item onClick={openCloudFiles}><Icon.UI name="cloud"/> From cloud</Dropdown.Item>
+                            </Dropdown.UI>
+                        </div>
+
+                        <div className="wy-toolbar-buttons wy-toolbar-buttons-last">
+                            {mutations.length > 0 && <Button.UI onClick={() => setShowUploadDetails(!showUploadDetails)}>
+                                {
+                                    status === "conflict" ? <Icon.UI name="alert" color="yellow" title="File conflict" /> :
+                                    status === "error" ? <Icon.UI name="alert-octagon" color="error" title="Upload error" /> : 
+                                    status === "pending" ? <Spinner.UI spin={progress === undefined} progress={progress} />:
+                                    <Icon.UI name="check" title='All uploads finished' />
+                                }
+                            </Button.UI>}
+                            <Sheet.UI title={"Uploads"} isOpen={showUploadDetails} onClose={() => setShowUploadDetails(false)}>
+                                {mutations.map((mutation) => {
+                                    let file = mutation.state.context?.file;
+                                    if (file) {  
+                                        return (
+                                            <FileItem.Item key={"file-mutation" + mutation.mutationId} file={file} statusText={file.status === "conflict" ? "Replace existing file?" : ''} title={file.name + (file.statusText ? `: ${file.statusText}` : '')}>
+                                                <div className='wy-item-actions'>
+                                                    {file.status === "conflict" && <>
+                                                        <Button.UI onClick={handleOverwriteUpload.bind(Files, mutation) } title="Replace"><Icon.UI name='check' /></Button.UI>
+                                                    </>}
+                                                    <Button.UI onClick={handleRemoveUpload.bind(Files, mutation)} title="Discard"><Icon.UI name='close' /></Button.UI>
+                                                </div>
+                                            </FileItem.Item>
+                                        )
+                                    }
+                                    return undefined;
+                                })}
+                            </Sheet.UI>
+
+                            <Dropdown.UI icon="sort" title="Sort items by" directionX='left'>
+                                <Dropdown.Item className={classNames("wy-option", { "wy-selected": order.by === "name" })} onClick={(e: any) => setOrder({...order, by: "name" })}><Icon.UI name="check"/> Name</Dropdown.Item>
+                                <Dropdown.Item className={classNames("wy-option", { "wy-selected": order.by === "modified_at" })} onClick={(e: any) => setOrder({...order, by: "modified_at" })}><Icon.UI name="check"/> Modified</Dropdown.Item>
+                                <Dropdown.Item className={classNames("wy-option", { "wy-selected": order.by === "size" })} onClick={(e: any) => setOrder({...order, by: "size" })}><Icon.UI name="check"/> Size</Dropdown.Item>
+                                <Dropdown.Divider/>
+                                <Dropdown.Item className={classNames("wy-option", { "wy-selected": !order.descending })} onClick={(e: any) => setOrder({...order, descending: false })}><Icon.UI name="check"/> Ascending</Dropdown.Item>
+                                <Dropdown.Item className={classNames("wy-option", { "wy-selected": order.descending })} onClick={(e: any) => setOrder({...order, descending: true })}><Icon.UI name="check"/> Descending</Dropdown.Item>
+                            </Dropdown.UI>
+
+                            <Dropdown.UI icon={view === "grid" ? "view-module-outline" :"view-list-outline"} title="View options" directionX='left'>
+                                <Dropdown.Item className={classNames("wy-option", { "wy-selected": view === "list" })} onClick={(e: any) => setView("list")}><Icon.UI name="check"/> List view</Dropdown.Item>
+                                <Dropdown.Item className={classNames("wy-option", { "wy-selected": view === "grid" })} onClick={(e: any) => setView("grid")}><Icon.UI name="check"/> Grid view</Dropdown.Item>
+                                <Dropdown.Divider/>
+                                <Dropdown.Item className={classNames("wy-option", { "wy-selected": !showTrashed })} onClick={(e: any) => setShowTrashed(false)}><Icon.UI name="check" /> Hide trashed</Dropdown.Item>
+                                <Dropdown.Item className={classNames("wy-option", { "wy-selected": showTrashed })} onClick={(e: any) => setShowTrashed(true)}><Icon.UI name="check" /> Show trashed</Dropdown.Item>
+                            </Dropdown.UI>
+
+                            <Dropdown.UI directionX='left' disabled={isLoading || !data}>
+                                {data && <>
+                                    {data.is_subscribed ?
+                                        <Dropdown.Item onClick={() => handleSubscribe(false)}><Icon.UI name="bell-off" size={1} /> Unsubscribe</Dropdown.Item>
+                                    :
+                                        <Dropdown.Item onClick={() => handleSubscribe(true)}><Icon.UI name="bell" size={1} /> Subscribe</Dropdown.Item>
+                                    }
+                                    {data.archive_url && 
+                                        <Dropdown.Item onClick={() => openUrl(data.archive_url, "_top", `${uid}.zip`, true)}><Icon.UI name="download"/> Download files</Dropdown.Item>
+                                    }
+                                    
+                                </>}
+                            </Dropdown.UI>
+            
+                        </div>
+                        
+                    </nav>
+                </header>
+
+                <FileList appId={appId} view={view} order={order} trashed={showTrashed} onSorting={(sortOrder) => setOrder(sortOrder)} onHandleError={(errorFile) => setShowUploadDetails(true)} />
+            </div>
+        
+    )
+}
+
+export default Files;

package/src/components/Image.tsx

@@ -2,9 +2,9 @@ import React, { useCallback } from "react";
 
 type ImageProps = {
     src: string,
-    previewSrc: string,
-    width: number
-    height: number,
+    previewSrc?: string,
+    width?: number
+    height?: number,
     more?: number,
     onClick: (e: any) => void
 }
@@ -13,18 +13,18 @@ export function checkImageLoad(img: HTMLImageElement) {
     var isLoaded = img.complete && img.naturalHeight !== 0;
     if (isLoaded) {
       if (!img.classList.contains("wy-loading")) {
-        console.debug("image is instantly loaded")
+        //console.debug("image is instantly loaded")
         img.classList.add("wy-loading", "wy-loaded");
       } else {
         img.decode().then(() => {
-          console.debug("image is loaded after delay")
+          //console.debug("image is loaded after delay")
           img.classList.add("wy-loaded");
         })
       }
 
       
     } else {
-      console.debug("image is loading")
+      //console.debug("image is loading")
       img.classList.add("wy-loading");
     }
   }
@@ -32,19 +32,20 @@ export function checkImageLoad(img: HTMLImageElement) {
 export function imageLoaded(event: any) {
     var img = event.target;
     if (img.tagName === 'IMG' && img.classList.contains("wy-loading") && !img.classList.contains("wy-loaded")) {
-      console.debug("load event"); img.classList.add("wy-loaded")
-      }
+      //console.debug("load event"); 
+      img.classList.add("wy-loaded")
+    }
   }
 
 export const Image = ({src, previewSrc, width, height, more, onClick}: ImageProps) => {
-    let ratio = width / height;
+    let ratio = width! / height! || 1;
     let baseSize = 64;
     let maxScale = 2;
     let flexRatio = ratio.toPrecision(5);
     let flexBasis = (ratio * baseSize).toPrecision(5) + "px";
     let padding = (100 / ratio).toPrecision(5) + "%"
     let intrinsicWidth = width + "px"
-    let maxWidth = (maxScale * width) + "px";
+    let maxWidth = width! > 0 ? (maxScale * width!) + "px" : "none";
 
     const imageRef = useCallback((element: HTMLImageElement) => {
         if (element) {

package/src/components/Meeting.tsx

@@ -12,8 +12,7 @@ const Meeting = ({ id, title, className }: Props) => {
         <>
             {/* <div className={className}>{title}</div> */}
             <Icon.UI name="zoom" />
-            <div className={className}>Zoom meeting</div>
-            <input type="hidden" value={id} name="meeting"/>
+            <div className={className}>Zoom meeting</div>            
         </>
     )
 }

package/src/components/MeetingCard.tsx

@@ -3,7 +3,7 @@ import Button from '../ui/Button';
 import Icon from '../ui/Icon';
 import dayjs from 'dayjs';
 type Props = {
-    meeting: MeetingCardType
+    meeting: MeetingType
 
 }
 const MeetingCard = ({ meeting }: Props) => {

package/src/components/Meetings.tsx

@@ -4,12 +4,14 @@ import { WeavyContext } from "../contexts/WeavyContext";
 import useMutateMeeting from "../hooks/useMutateMeeting";
 import Button from '../ui/Button';
 import Icon from '../ui/Icon';
+import Dropdown from '../ui/Dropdown';
 
 type Props = {
-    onMeetingAdded: Function
+    onMeetingAdded: Function,
+    dropdown?: boolean
 }
 
-const Meetings = ({ onMeetingAdded }: Props) => {
+const Meetings = ({ onMeetingAdded, dropdown = false }: Props) => {
 
     const { options } = useContext(WeavyContext);
     const { user } = useContext(UserContext);
@@ -28,7 +30,7 @@ const Meetings = ({ onMeetingAdded }: Props) => {
 
         switch (e.data.name) {
             case "zoom-signed-in":
-                var meeting = await addMeeting.mutateAsync({ provider: "zoom" });                
+                var meeting = await addMeeting.mutateAsync({ provider: "zoom" });
                 onMeetingAdded(meeting)
                 break;
 
@@ -47,8 +49,14 @@ const Meetings = ({ onMeetingAdded }: Props) => {
 
     return (
         <>
-            {options?.zoomAuthenticationUrl &&
-                <Button.UI onClick={handleZoom} title="Add Zoom meeting"><Icon.UI name="zoom" /></Button.UI>
+            {options?.zoomAuthenticationUrl && dropdown &&                
+                <Dropdown.Item onClick={handleZoom}>
+                    <Icon.UI name="zoom" /> Zoom meeting
+                </Dropdown.Item>
+            }
+
+            {options?.zoomAuthenticationUrl && !dropdown &&
+                <Button.UI onClick={handleZoom} title="Zoom meeting"><Icon.UI name="zoom" /></Button.UI>                
             }
         </>
 

package/src/components/Message.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useContext } from 'react';
 import dayjs from 'dayjs';
 import { MessageProps } from "../types/Message"
 import Attachment from './Attachment';
@@ -7,21 +7,22 @@ import { Image, ImageGrid } from "./Image"
 import SeenBy from './SeenBy';
 import Avatar from "./Avatar";
 import MeetingCard from './MeetingCard';
-import usePreview from '../hooks/usePreview';
+import { PreviewContext } from "../contexts/PreviewContext";
 import classNames from 'classnames';
 
 const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_at, created_by, attachments, meeting, parentId, reactions, seenBy, chatRoom }) => {
 
-    const { open, close } = usePreview(attachments);
+    const { openPreview, setPreviewFiles } = useContext(PreviewContext);
 
-    let images = attachments?.filter((a: AttachmentType) => a.kind === "image" && a.thumbnail_url);
-    let files = attachments?.filter((a: AttachmentType) => a.kind !== "image" || !a.thumbnail_url);
+    let images = attachments?.filter((a: FileType) => a.kind === "image" && a.thumbnail_url);
+    let files = attachments?.filter((a: FileType) => a.kind !== "image" || !a.thumbnail_url);
 
     const date = dayjs.utc(created_at).tz(dayjs.tz.guess());
 
     const handlePreviewClick = (e: React.MouseEvent<HTMLInputElement>, attachmentId: number) => {
         e.preventDefault();
-        open(attachmentId);
+        setPreviewFiles(attachments);
+        openPreview(attachmentId);
     }
 
     return (
@@ -47,8 +48,9 @@ const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_a
                         {!temp &&
                             <>
                                 {images && !!images.length && <ImageGrid>
-                                    {images.map((a: AttachmentType) =>
-                                        <Image onClick={(e) => handlePreviewClick(e, a.id)} key={a.id} src={a.download_url} previewSrc={a.preview_url} width={a.width} height={a.height} />
+                                    {images.map((a: FileType) => 
+                                        a.download_url &&
+                                        <Image onClick={(e) => handlePreviewClick(e, a.id)} key={a.id} src={a.download_url} previewSrc={a.preview_url} width={a.width} height={a.height} /> || null
                                     )}
                                 </ImageGrid>}
 
@@ -58,26 +60,19 @@ const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_a
                                     <MeetingCard meeting={meeting} />
                                 }
 
-                                {files && !!files.length && <div className="wy-list-items wy-attachments">
-                                    {files.map((a: AttachmentType) =>
+                                {files && !!files.length && <div className="wy-list wy-list-bordered">
+                                    {files.map((a: FileType) =>
                                         <Attachment key={a.id} onClick={(e) => handlePreviewClick(e, a.id)} name={a.name} previewFormat={a.kind} provider={a.provider} url={a.download_url} previewUrl={a.provider ? a.external_url : a.preview_url} mediaType={a.media_type} kind={a.kind} size={a.size} />
                                     )}
                                 </div>}
                                 <div className="wy-reactions-line">
-                                    <div className="wy-reactions">
-                                        <ReactionsList id={id} parentId={parentId} reactions={reactions} />
-                                    </div>
-                                    {!temp && <ReactionsMenu id={id} reactions={reactions} />}
+                                    <ReactionsList id={id}  type="messages" parentId={parentId} reactions={reactions} />
+                                    {!temp && <ReactionsMenu  parentId={parentId}id={id} type="messages" reactions={reactions} placement={ me ? "top-end" : "top-start"} />}
                                 </div>
                             </>
                         }
                     </div>
-
-
-
                 </div>
-
-
             </div>
             <SeenBy id={id} parentId={parentId} seenBy={seenBy} createdAt={created_at} />
         </>