@weavy/uikit-react 11.1.0 → 13.0.0

package/src/components/Chat.tsx

@@ -6,9 +6,8 @@ import Messages from './Messages';
 import useMembers from '../hooks/useMembers';
 import Typing from './Typing';
 import useConversation from '../hooks/useConversation';
-import { prefix as wy } from "../utils/styles";
 
-const Chat = ({ id }: ChatProps) => {
+const Chat = ({ uid }: ChatProps) => {
     const { client } = useContext(WeavyContext);
     const [selectedId, setSelectedId] = useState<number | null>(null)
 
@@ -16,7 +15,7 @@ const Chat = ({ id }: ChatProps) => {
         throw new Error('Weavy Chat component must be used within an WeavyProvider');
     }
 
-    const { isLoading: isLoadingChat, data: dataChat } = useChat(id, {});
+    const { isLoading: isLoadingChat, data: dataChat } = useChat(uid, {});
 
     const { isLoading: isLoadingMembers, data: dataMembers } = useMembers(selectedId, {
         // The query will not execute until the activeConversation exists
@@ -37,31 +36,28 @@ const Chat = ({ id }: ChatProps) => {
     }, [dataChat]);
 
     return (
-        <>
-            <header className={wy('appbars')}>
-                <nav className={wy('appbar')}>
-
+        <div className="wy-messenger-conversation wy-scroll-y">
+            <header className="wy-appbars">
+                <nav className="wy-appbar">
+                    <div></div>
                     {selectedId && dataConversation &&
-
-                        <>
-                            <div>
-                                <Typing id={selectedId} context="conversation">
-                                    {dataConversation.display_name}
-                                </Typing>
-                            </div>
-                        </>
+                        <div className="wy-appbar-text">
+                            <Typing id={selectedId} context="conversation">
+                                {dataConversation.display_name}
+                            </Typing>
+                        </div>
                     }
                 </nav>
             </header>
 
             {!isLoadingChat && !dataChat &&
-                <div>No chat with the contextual id <strong>{id}</strong></div>
+                <div>No chat with the contextual id <strong>{uid}</strong></div>
             }
 
             {selectedId && dataMembers &&
                 <Messages id={selectedId} members={dataMembers} />
             }
-        </>
+        </div>
     )
 }
 

package/src/components/Conversation.tsx

@@ -13,7 +13,6 @@ import SearchUsers from './SearchUsers';
 import useMutateMembers from '../hooks/useMutateMembers';
 import useConversation from '../hooks/useConversation';
 import useMutateConversationName from '../hooks/useMutateConversationName';
-import { prefix as wy } from "../utils/styles";
 import useMutateRemoveMembers from '../hooks/useMutateRemoveMembers';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
@@ -21,13 +20,12 @@ import Messages from './Messages';
 
 const Conversation = ({ id, showBackButton }: ConversationProps) => {
 
-
     const queryClient = useQueryClient();
     const { client } = useContext(WeavyContext);
     const { selectedConversationId, setSelectedConversationId } = useContext(MessengerContext);
     const { user } = useContext(UserContext);
     const [modalAddOpen, setModalAddOpen] = useState(false);
-    const [modalDetailsOpen, setModalDetailsOpen] = useState(false);    
+    const [modalDetailsOpen, setModalDetailsOpen] = useState(false);
     const [title, setTitle] = useState<string>("");
 
     const ChatRoom = "edb400ac-839b-45a7-b2a8-6a01820d1c44";
@@ -85,10 +83,6 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
         setSelectedConversationId(null);
     }
 
-    
-
-
-
     // set selected conversation id if id is supplied to component
     useEffect(() => {
         if (id) {
@@ -117,13 +111,10 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
         }
     }, [dataConversation]);
 
-
-
-
     return (
         <>
-            <header className={wy('appbars')}>
-                <nav className={wy('appbar')}>
+            <header className="wy-appbars">
+                <nav className="wy-appbar">
                     <div>
                         {showBackButton &&
                             <Button.UI onClick={handleBack}><Icon.UI name="back" /></Button.UI>
@@ -131,7 +122,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                     {selectedConversationId && dataConversation &&
 
                         <>
-                            <div>
+                            <div className="wy-appbar-text">
                                 <Typing id={selectedConversationId} context="conversation">
                                     {dataConversation.display_name}
                                 </Typing>
@@ -154,7 +145,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
             </header>
 
             {!selectedConversationId &&
-                <div className={wy('avatar-header')}>
+                <div className="wy-avatar-header">
                     <Avatar src={user.avatar_url} name={user.title} presence={user.presence} id={user.id} size={256} />
                     <h2>Welcome {user.name}!</h2>
                     Create or select a conversation to get started
@@ -164,41 +155,41 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                 <Messages id={selectedConversationId} members={dataMembers} displayName={dataConversation?.display_name} avatarUrl={dataConversation?.avatar_url} />
             }
 
-            <Overlay.UI isOpen={modalAddOpen} className={wy('modal')}>
-                <header className={wy('appbars')}>
-                    <nav className={wy('appbar')}>
+            <Overlay.UI isOpen={modalAddOpen} className="wy-modal">
+                <header className="wy-appbars">
+                    <nav className="wy-appbar">
                         <Button.UI onClick={() => toggleAddModal(false)}><Icon.UI name='close' /></Button.UI>
-                        <div className={wy('appbar-text')}>Add people</div>
+                        <div className="wy-appbar-text">Add people</div>
                     </nav>
                 </header>
                 <SearchUsers handleSubmit={handleAdd} buttonTitle="Add selected" />
             </Overlay.UI>
 
-            <Overlay.UI isOpen={modalDetailsOpen} className={wy('modal')}>
-                <header className={wy('appbars')}>
-                    <nav className={wy('appbar')}>
+            <Overlay.UI isOpen={modalDetailsOpen} className="wy-modal">
+                <header className="wy-appbars">
+                    <nav className="wy-appbar">
                         <Button.UI onClick={() => toggleDetailsModal(false)}><Icon.UI name='close' /></Button.UI>
-                        <div className={wy('appbar-text')}>Conversation details</div>
+                        <div className="wy-appbar-text">Conversation details</div>
                     </nav>
                 </header>
                 <div>
-                    {dataConversation && <div className={wy('avatar-header')}><Avatar src={dataConversation?.avatar_url} name={title} size={128} /></div>}
+                    {dataConversation && <div className="wy-avatar-header"><Avatar src={dataConversation?.avatar_url} name={title} size={128} /></div>}
                     {dataConversation?.type !== ChatRoom &&
-                        <h4 className={wy('avatar-display-name')}>{dataConversation?.display_name}</h4>
+                        <h4 className="wy-avatar-display-name">{dataConversation?.display_name}</h4>
                     }
 
                     {dataConversation?.type === ChatRoom && (
                         <>
-                            <div className={wy('pane-group')}>
-                                <input className={wy('input')} value={title} onChange={(e) => handleUpdateTitle(e)} />
+                            <div className="wy-pane-group">
+                                <input className="wy-input" value={title} onChange={(e) => handleUpdateTitle(e)} />
                             </div>
-                            <div className={wy('pane-group')}>
-                                <table className={wy('search-result-table')}>
+                            <div className="wy-pane-group">
+                                <table className="wy-search-result-table">
                                     <tbody>
-                                        {dataMembers?.data.map((m: MemberType) => {
+                                        {dataMembers && dataMembers.data && dataMembers.data.map((m: MemberType) => {
                                             return (
-                                                <tr key={m.id} className={wy('search-result-table-checkbox')}>
-                                                    <td className={wy('search-result-table-icon')}><Avatar src={m.avatar_url} name={m.display_name} id={m.id} size={24} presence={m.presence} /></td>
+                                                <tr key={m.id} className="wy-search-result-table-checkbox">
+                                                    <td className="wy-search-result-table-icon"><Avatar src={m.avatar_url} name={m.display_name} id={m.id} size={24} presence={m.presence} /></td>
                                                     <td>{m.display_name}</td>
                                                     <td></td>
                                                 </tr>
@@ -212,7 +203,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                 </div>
             </Overlay.UI>
 
-           
+
         </>
     )
 }

package/src/components/ConversationBadge.tsx

@@ -1,7 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { WeavyContext } from "../contexts/WeavyContext";
 import useBadge from "../hooks/useBadge";
-import { prefix as wy } from "../utils/styles";
 
 const ConversationBadge = () => {
     const { client } = useContext(WeavyContext);
@@ -34,7 +33,7 @@ const ConversationBadge = () => {
     return (
         <>
             {!isLoading && badge > 0 &&
-                <span className={wy('badge badge-danger')}>{badge}</span>
+                <span className="wy-badge wy-badge-danger">{badge}</span>
             }
         </>
 

package/src/components/ConversationForm.tsx

@@ -11,8 +11,6 @@ import Meetings from './Meetings';
 import Meeting from './Meeting';
 import FileBrowser from './FileBrowser';
 import { getIcon } from '../utils/fileUtilities';
-import { prefix as wy } from "../utils/styles";
-
 
 type Props = {
     conversationId: number,
@@ -46,13 +44,10 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
                 setAttachments([...attachments, attachment[0]]);
             }
         })
-
-
     }
 
     const { mutateAsync: uploadFile, isSuccess: uploadSuccess } = useFileUploader(handleUploaded);
 
-
     useEffect(() => {
         // set stored text and attachments if available
         let textValue: any = queryClient.getQueryData(["form-text", conversationId]) || "";
@@ -71,8 +66,6 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
         handleAutoGrow();
     }, [text])
 
-
-
     const handleInsertMessage = (e: React.KeyboardEvent<EventTarget>) => {
 
         if(e.type === 'keydown' && !(e.key === "Enter" && e.ctrlKey )) return;
@@ -159,7 +152,7 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
 
 
     return (
-        <form className={wy('message-form')}>
+        <form className="wy-message-form">
             {uploadError &&
                 <div>{uploadError}</div>
             }
@@ -169,12 +162,12 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
                     {working &&
                         <div>Now uploading ({currentUploadCount} of {fileCount}) selected files</div>
                     }
-                    <div className={wy('picker-list')}>
+                    <div className="wy-picker-list">
                         {attachments.map((a: FileType) => {
                             let { icon } = getIcon(a.name);
                             return (
-                                <div key={a.id} className={wy('picker-list-item')}>
-                                    <File id={a.id} name={a.name} className={wy('picker-list-item-title')} icon={ icon } />
+                                <div key={a.id} className="wy-picker-list-item">
+                                    <File id={a.id} name={a.name} className="wy-picker-list-item-title" icon={ icon } />
                                     <Button.UI onClick={handleRemoveFile.bind(ConversationForm, a.id)}><Icon.UI name='close-circle' /></Button.UI>
                                 </div>
 
@@ -183,8 +176,8 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
 
                         {meetings.map((m: MeetingType) => {
                             return (
-                                <div key={m.id} className={wy('picker-list-item')}>
-                                    <Meeting id={m.id} title={m.provider} className={wy('picker-list-item-title')} />
+                                <div key={m.id} className="wy-picker-list-item">
+                                    <Meeting id={m.id} title={m.provider} className="wy-picker-list-item-title" />
                                     <Button.UI onClick={handleRemoveMeeting.bind(ConversationForm, m.id)}><Icon.UI name='close-circle' /></Button.UI>
                                 </div>
 
@@ -193,19 +186,19 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
                     </div>
                 </div>
             }
-            <div className={wy('message-editor-inputs')}>
+            <div className="wy-message-editor-inputs">
 
-                <div className={wy('message-editor-buttons')}>
+                <div className="wy-message-editor-buttons">
                     <input type="file" ref={input => fileInput = input} value={files} onChange={handleFileUpload} multiple hidden tabIndex={-1} />
                     <Button.UI title="Upload attachment" onClick={openFileInput}><Icon.UI name="attachment" /></Button.UI>
                     <Meetings onMeetingAdded={handleAddMeeting} />
                     <FileBrowser onFileAdded={handleExternalFileAdded} />
                 </div>
 
-                <div className={wy('message-editor-text message-editor-grow')}>
-                    <textarea rows={1} ref={textInput} className={wy('message-editor-textfield message-editor-textcontent')}  value={text} onChange={handleChange} onKeyDown={handleInsertMessage} onKeyPress={useThrottle(handleKeyPress, 4000)}></textarea>
+                <div className="wy-message-editor-text wy-message-editor-grow">
+                    <textarea rows={1} ref={textInput} className="wy-message-editor-textfield wy-message-editor-textcontent"  value={text} onChange={handleChange} onKeyDown={handleInsertMessage} onKeyPress={useThrottle(handleKeyPress, 4000)}></textarea>
                 </div>
-                <div className={wy('message-editor-buttons')}>
+                <div className="wy-message-editor-buttons">
                     <Button.UI type="button" onClick={handleInsertMessage} ><Icon.UI name="send"/></Button.UI>
                 </div>
             </div>

package/src/components/ConversationList.tsx

@@ -5,7 +5,6 @@ import ConversationListItem from './ConversationListItem';
 import NewConversation from './NewConversation';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
-import { prefix as wy } from "../utils/styles";
 
 const ConversationList = () => {
     const { client } = useContext(WeavyContext);
@@ -40,19 +39,19 @@ const ConversationList = () => {
 
     return (
         <>
-            <header className={wy('appbars')}>
-                <nav className={wy('appbar')}>
+            <header className="wy-appbars">
+                <nav className="wy-appbar">
                     <Avatar src={user.avatar_url} name={user.title} presence={user.presence} id={user.id} size={24} />
                     <div>Messenger</div>
                     <NewConversation />
                 </nav>
             </header>
-            <div className={wy('conversations')}>
+            <div className="wy-conversations">
                 {data && data.data?.map((item) =>
                     <ConversationListItem key={item.id} refetchConversations={refetch} item={item} />
                 )}
 
-                {/* <a className={wy('pager')}><svg className={wy('spinner spin')} width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle fill="none" cx="12" cy="12" r="11" stroke-linecap="butt" stroke-width="2"></circle></svg></a> */}
+                {/* <a className="wy-pager"><svg className="wy-spinner wy-spin" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle fill="none" cx="12" cy="12" r="11" stroke-linecap="butt" stroke-width="2"></circle></svg></a> */}
             </div>
         </>
     )

package/src/components/ConversationListItem.tsx

@@ -13,8 +13,7 @@ import Typing from './Typing';
 import useMutateRemoveMembers from '../hooks/useMutateRemoveMembers';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
-import { prefix as wy } from "../utils/styles";
-
+import classNames from 'classnames';
 
 const ConversationListItem = ({ item, refetchConversations }: ConversationListItemProps) => {
 
@@ -79,25 +78,25 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
     // }
 
     return (
-        <div className={wy('conversation' + (item.is_unread ? ' unread' : ''))} key={item.id}>
-            <a className={wy('conversation-link' + (selectedConversationId === item.id ? ' active': ''))} href="#" onClick={(e) => handleClick(e, item.id)}>
+        <div className={classNames('wy-conversation', {"wy-unread": item.is_unread})} key={item.id}>
+            <a className={classNames('wy-conversation-link', { "wy-active": selectedConversationId === item.id})} href="#" onClick={(e) => handleClick(e, item.id)}>
                 <Avatar src={item.avatar_url} id={otherId || -1} presence={item.type !== ChatRoom ? "away" : ""} name={item.display_name} />
 
-                <div className={wy('conversation-body')}>
-                    <div className={wy('conversation-header')}>
-                        <div className={wy('conversation-title')}>{item.display_name}</div>
+                <div className="wy-conversation-body">
+                    <div className="wy-conversation-header">
+                        <div className="wy-conversation-title">{item.display_name}</div>
                         {item.last_message &&
-                            <time className={wy('conversation-time')} dateTime={item.last_message.created_at.toString()} title={date.format('LLLL')}>{date.fromNow()}</time>
+                            <time className="wy-conversation-time" dateTime={item.last_message.created_at.toString()} title={date.format('LLLL')}>{date.fromNow()}</time>
                         }
                     </div>
-                    <div className={wy('conversation-summary')}>
+                    <div className="wy-conversation-summary">
                         <Typing id={item.id} context="listitem">
 
                             {item.last_message?.html &&
-                                <span className={wy('typing-hide')} dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(item.last_message?.text) }}></span>
+                                <span className="wy-typing-hide" dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(item.last_message?.text) }}></span>
                             }
                             {!item.last_message?.html &&
-                                <span className={wy('typing-hide')}>
+                                <span className="wy-typing-hide">
                                     {item.last_message?.attachment_ids?.length > 0 &&
                                         <Icon.UI name="attachment" size={1} />
                                     }
@@ -112,7 +111,7 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
                 </div>
             </a>
 
-            <div className={wy('conversation-actions')}>
+            <div className="wy-conversation-actions">
                 {item.is_pinned &&
                     <Button.UI onClick={handleUnpin}>
                         <Icon.UI name="pin" size={.75} />
@@ -120,7 +119,6 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
 
                 }
 
-
                 <Dropdown.UI directionX='left'>
                     <>
                         {item.is_unread &&

package/src/components/FileBrowser.tsx

@@ -4,7 +4,6 @@ import Button from '../ui/Button';
 import Icon from '../ui/Icon';
 import useMutateExternalBlobs from '../hooks/useMutateExternalBlobs';
 import { UserContext } from "../contexts/UserContext";
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     onFileAdded: Function
@@ -60,8 +59,8 @@ const FileBrowser = ({ onFileAdded }: Props) => {
             $filebrowserFrame.id = "weavy-filebrowser";
             $filebrowserFrame.name = "weavy-filebrowser";
             $filebrowserFrame.src = filebrowserSrc;
-            $filebrowserFrame.className = wy('filebrowser-frame');
-            $filebrowserFrame.style.cssText = "position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(1,1,1,.4); z-index: 10000; display:none"
+            $filebrowserFrame.className = "wy-filebrowser-frame";
+            $filebrowserFrame.style.cssText = "position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(1,1,1,.4); z-index: 10000; display:none"
 
             window.top?.document.body.appendChild($filebrowserFrame);
 

package/src/components/Image.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from "react";
-import { prefix as wy } from "../utils/styles";
+import React, { useCallback } from "react";
 
 type ImageProps = {
     src: string,
@@ -10,6 +9,33 @@ type ImageProps = {
     onClick: (e: any) => void
 }
 
+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")
+        img.classList.add("wy-loading", "wy-loaded");
+      } else {
+        img.decode().then(() => {
+          console.debug("image is loaded after delay")
+          img.classList.add("wy-loaded");
+        })
+      }
+
+      
+    } else {
+      console.debug("image is loading")
+      img.classList.add("wy-loading");
+    }
+  }
+
+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")
+      }
+  }
+
 export const Image = ({src, previewSrc, width, height, more, onClick}: ImageProps) => {
     let ratio = width / height;
     let baseSize = 64;
@@ -20,17 +46,23 @@ export const Image = ({src, previewSrc, width, height, more, onClick}: ImageProp
     let intrinsicWidth = width + "px"
     let maxWidth = (maxScale * width) + "px";
 
+    const imageRef = useCallback((element: HTMLImageElement) => {
+        if (element) {
+            checkImageLoad(element);
+        }
+    }, [])
+
     return (
-        <a href={src} className={wy('image')} onClick={(e) => onClick(e)} style={{
+        <a href={src} className="wy-image" onClick={(e) => onClick(e)} style={{
             flexBasis: flexBasis,
             flexGrow: flexRatio,
             flexShrink: flexRatio,
             width: intrinsicWidth,
             maxWidth: maxWidth
         }}>
-            <div className={wy('image-area')} style={{ paddingBottom: padding}}>
-                <img src={previewSrc} alt="" loading="lazy" decoding="async" />
-                {!!more && <span className={wy('more')}>+{more}</span>}
+            <div className="wy-image-area" style={{ paddingBottom: padding }}>
+                <img ref={imageRef} src={previewSrc} onLoad={imageLoaded} alt="" loading="lazy" decoding="async" />
+                {!!more && <span className="wy-more">+{more}</span>}
             </div>
         </a>
     );
@@ -57,7 +89,7 @@ export const ImageGrid = ({ children, limit = 3}: ImageGridProps) => {
     }
 
     return (        
-        <div className={wy('image-grid')}>
+        <div className="wy-image-grid">
             {firstImages}
         </div>        
     );

package/src/components/MeetingCard.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Button from '../ui/Button';
 import Icon from '../ui/Icon';
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     meeting: MeetingCardType
@@ -14,13 +13,13 @@ const MeetingCard = ({ meeting }: Props) => {
     }
 
     return (
-        <div className={wy('attachments')}>
-            <a className={wy('attachment')} href={meeting.join_url} target="_blank">
-                <div className={wy('attachment-icon')} title="Zoom meeting"><Icon.UI name="zoom" color="#4a8cff" size={4} /></div>
-                <div className={wy('attachment-content')}>
-                    <div className={wy('attachment-title')}>Zoom meeting</div>
-                    <div className={wy('attachment-meta')}>Meeting ID: {`${meeting.provider_id.substring(0,3)}-${meeting.provider_id.substring(3,6)}-${meeting.provider_id.substring(6)}`}</div>                    
-                    <Button.UI className={wy('button-primary')}>Join meeting</Button.UI>
+        <div className="wy-attachments">
+            <a className="wy-attachment" href={meeting.join_url} target="_blank">
+                <div className="wy-attachment-icon" title="Zoom meeting"><Icon.UI name="zoom" color="#4a8cff" size={4} /></div>
+                <div className="wy-attachment-content">
+                    <div className="wy-attachment-title">Zoom meeting</div>
+                    <div className="wy-attachment-meta">Meeting ID: {`${meeting.provider_id.substring(0,3)}-${meeting.provider_id.substring(3,6)}-${meeting.provider_id.substring(6)}`}</div>                    
+                    <Button.UI className="wy-button-primary">Join meeting</Button.UI>
                 </div>
             </a>
         </div>

package/src/components/Message.tsx

@@ -9,13 +9,12 @@ import SeenBy from './SeenBy';
 import Avatar from "./Avatar";
 import MeetingCard from './MeetingCard';
 import usePreview from '../hooks/usePreview';
-import { prefix as wy } from "../utils/styles";
+import classNames from 'classnames';
 
 const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_at, attachments, meeting, parentId, reactions, seenBy }) => {
 
     const { open, close } = usePreview(attachments);
 
-    var messageClassName = wy("message" + (me ? " message-me" : ""));
     var images = attachments?.filter((a: AttachmentType) => a.kind === "image" && a.thumbnail_url);
     var files = attachments?.filter((a: AttachmentType) => a.kind !== "image" || !a.thumbnail_url);
 
@@ -28,20 +27,20 @@ const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_a
 
     return (
         <>
-            <div className={messageClassName}>
+            <div className={classNames("wy-message", { "wy-message-me": me })}>
                 {!me && (
-                    <div className={wy('message-author')}>
+                    <div className="wy-message-author">
                         {avatar && <Avatar src={avatar} size={32} name={name} />}
                     </div>
                 )}
-                <div className={wy('message-content')}>
-                    <div className={wy('message-meta')}>
+                <div className="wy-message-content">
+                    <div className="wy-message-meta">
                         <time dateTime={created_at} title={date.format('LLLL')}>{date.fromNow()}</time>
                     </div>
-                    <div className={wy('message-content-row')}>
-                        <div className={wy('message-bubble')}>
+                    <div className="wy-message-content-row">
+                        <div className="wy-message-bubble">
                             {temp &&
-                                <div className={wy('message-text')}>{html}</div>
+                                <div className="wy-message-text">{html}</div>
                             }
                             {!temp &&
                                 <>
@@ -51,28 +50,28 @@ const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_a
                                         )}
                                     </ImageGrid>}
 
-                                    {html && <div className={wy('message-text')} dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(html || "") }}></div>}
+                                    {html && <div className="wy-message-text" dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(html || "") }}></div>}
 
                                     {meeting &&
                                         <MeetingCard meeting={meeting} />
                                     }
 
-                                    {files && !!files.length && <div className={wy('attachments')}>
+                                    {files && !!files.length && <div className="wy-attachments">
                                         {files.map((a: AttachmentType) =>
-                                            <Attachment key={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} />
+                                            <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>
-                        <div className={wy('message-buttons')}>
+                        <div className="wy-message-buttons">
                             {!temp && <ReactionsMenu id={id} reactions={reactions} />}
                         </div>
                     </div>
 
                     {!temp && (
-                        <div className={wy('reactions')}>
+                        <div className="wy-reactions">
                             <ReactionsList id={id} parentId={parentId} reactions={reactions} />
                         </div>
                     )}