@weavy/uikit-react 13.0.0 → 14.0.1

package/src/components/ConversationListItem.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useContext, useEffect } from 'react';
-import joypixels from 'emoji-toolkit';
 import dayjs from 'dayjs';
 import { MessengerContext } from '../contexts/MessengerContext';
 import { WeavyContext } from '../contexts/WeavyContext';
@@ -25,24 +24,62 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
     const removeMembers = useMutateRemoveMembers();
     const date = dayjs.utc(item.last_message?.created_at).tz(dayjs.tz.guess());
 
+    
+    // extract and keep all emojis
+    const emojiHtml = item.last_message?.html || '';
+    const emojiRegexp = /<img[^>]+wy-emoji.+>/g;
+    const emojiShortcodeRegexp = /title=\"(:[^:\s]+:)\"/;
+    const messageEmojis: { [index: string]: string } = {};
+
+    emojiHtml.match(emojiRegexp)?.forEach((imgEmoji) => {
+        let shortCode = imgEmoji.match(emojiShortcodeRegexp)![1];
+
+        if (shortCode) {
+            messageEmojis[shortCode] = imgEmoji;
+        }
+    });
+
+    // replace text shortcodes with extracted emojis
+    const shortCodeRegexp = /:[^:\s]*(?:::[^:\s]*)*:/gi;
+    const itemSnippet = (item.last_message?.text || '').replace(shortCodeRegexp, (shortCode) => messageEmojis[shortCode]);
+    
+
     const ChatRoom = "edb400ac-839b-45a7-b2a8-6a01820d1c44";
 
-    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, id: any) => {
-        e.preventDefault();
-        setSelectedConversationId(id);
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>, id: any) => {
+        if (!e.defaultPrevented) {
+            e.preventDefault();
+            setSelectedConversationId(id);
+        }
     }
 
-    const handleAppUpdated = useCallback((data: ConversationType) => {
-        if (data.id !== item.id) return;
+    const handleAppUpdated = useCallback((realtimeEvent: RealtimeApp) => {   
+        if (realtimeEvent.app.id !== item.id) return;
         refetchConversations();
 
-    }, [item.id])
+    }, [item.id]);
+
+    const handleMessageCreated = useCallback((realtimeEvent: RealtimeMessage) => {   
+        if (realtimeEvent.message.app_id !== item.id) return;
+        refetchConversations();
+
+    }, [item.id]);
+
+    const handleMemberAdded = useCallback((realtimeEvent: RealtimeMember) => {   
+        if (realtimeEvent.app.id !== item.id) return;
+        refetchConversations();
+
+    }, [item.id]);
 
     useEffect(() => {
-        client?.subscribe(`a${item.id}`, "app-updated", handleAppUpdated);
+        client?.subscribe(`a${item.id}`, "app_updated", handleAppUpdated);
+        client?.subscribe(`a${item.id}`, "message_created", handleMessageCreated);
+        client?.subscribe(`a${item.id}`, "member_added", handleMemberAdded);
 
         return () => {
-            client?.unsubscribe(`a${item.id}`, "app-updated", handleAppUpdated);
+            client?.unsubscribe(`a${item.id}`, "app_updated", handleAppUpdated);
+            client?.unsubscribe(`a${item.id}`, "message_created", handleMessageCreated);
+            client?.unsubscribe(`a${item.id}`, "member_added", handleMemberAdded);
         }
     }, [item.id])
 
@@ -50,12 +87,12 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
 
     const handleUnread = (e: React.MouseEvent<HTMLAnchorElement>) => {
         e.preventDefault();
-        readMutation.mutate({ id: item.id, read: false });
+        readMutation.mutate({ id: item.id, read: false, messageId: null });
     }
 
     const handleRead = (e: React.MouseEvent<HTMLAnchorElement>) => {
         e.preventDefault();
-        readMutation.mutate({ id: item.id, read: true });
+        readMutation.mutate({ id: item.id, read: true, messageId: item.last_message.id });
     }
 
     const handlePin = (e: React.MouseEvent<HTMLAnchorElement>) => {
@@ -78,24 +115,24 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
     // }
 
     return (
-        <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>
-                        {item.last_message &&
-                            <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={classNames('wy-item wy-item-lg wy-item-hover wy-conversation', {"wy-unread": item.is_unread, "wy-active": selectedConversationId === item.id})} key={item.id} 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-item-body">
+                <div className="wy-item-row">
+                    <div className="wy-item-title">{item.display_name}</div>
+                    {item.last_message &&
+                        <time className="wy-meta" dateTime={item.last_message.created_at.toString()} title={date.format('LLLL')}>{date.fromNow()}</time>
+                    }
+                </div>
+                <div className="wy-item-row">
+                    <div className="wy-item-text">
                         <Typing id={item.id} context="listitem">
 
-                            {item.last_message?.html &&
-                                <span className="wy-typing-hide" dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(item.last_message?.text) }}></span>
+                            {itemSnippet &&
+                                <span className="wy-typing-hide" dangerouslySetInnerHTML={{ __html: itemSnippet }}></span>
                             }
-                            {!item.last_message?.html &&
+                            {!itemSnippet &&
                                 <span className="wy-typing-hide">
                                     {item.last_message?.attachment_ids?.length > 0 &&
                                         <Icon.UI name="attachment" size={1} />
@@ -108,44 +145,43 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
 
                         </Typing>
                     </div>
-                </div>
-            </a>
-
-            <div className="wy-conversation-actions">
-                {item.is_pinned &&
-                    <Button.UI onClick={handleUnpin}>
-                        <Icon.UI name="pin" size={.75} />
-                    </Button.UI>
+                    
 
-                }
-
-                <Dropdown.UI directionX='left'>
-                    <>
-                        {item.is_unread &&
-                            <Dropdown.Item onClick={handleRead}>Mark as read</Dropdown.Item>
-                        }
-                        {!item.is_unread &&
-                            <Dropdown.Item onClick={handleUnread}>Mark as unread</Dropdown.Item>
-                        }
-                    </>
-                    <>
+                </div>
+            </div>
+            <div className="wy-item-actions wy-item-actions-bottom">
                         {item.is_pinned &&
-                            <Dropdown.Item onClick={handleUnpin}>Unpin</Dropdown.Item>
-                        }
-                        {!item.is_pinned &&
-                            <Dropdown.Item onClick={handlePin}>Pin</Dropdown.Item>
-                        }
-                    </>
-                    {item.type === ChatRoom &&
-                        <Dropdown.Item onClick={handleLeaveConversation}>Leave conversation</Dropdown.Item>
-                    }
+                            <Button.UI onClick={handleUnpin}>
+                                <Icon.UI name="pin" size={1/1.5} />
+                            </Button.UI>
 
-                    {/* <li><Button.UI onClick={handleStar}>Star</Button.UI></li> */}
-                </Dropdown.UI>
+                        }
 
+                        <Dropdown.UI directionX='left'>
+                            <>
+                                {item.is_unread &&
+                                    <Dropdown.Item onClick={handleRead}>Mark as read</Dropdown.Item>
+                                }
+                                {!item.is_unread &&
+                                    <Dropdown.Item onClick={handleUnread}>Mark as unread</Dropdown.Item>
+                                }
+                            </>
+                            <>
+                                {item.is_pinned &&
+                                    <Dropdown.Item onClick={handleUnpin}>Unpin</Dropdown.Item>
+                                }
+                                {!item.is_pinned &&
+                                    <Dropdown.Item onClick={handlePin}>Pin</Dropdown.Item>
+                                }
+                            </>
+                            {item.type === ChatRoom &&
+                                <Dropdown.Item onClick={handleLeaveConversation}>Leave conversation</Dropdown.Item>
+                            }
 
+                            {/* <li><Button.UI onClick={handleStar}>Star</Button.UI></li> */}
+                        </Dropdown.UI>
 
-            </div>
+                    </div>
         </div>
     )
 }

package/src/components/FileBrowser.tsx

@@ -1,9 +1,11 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState, useRef, useCallback } from "react";
 import { WeavyContext } from "../contexts/WeavyContext";
 import Button from '../ui/Button';
+import Spinner from '../ui/Spinner';
 import Icon from '../ui/Icon';
 import useMutateExternalBlobs from '../hooks/useMutateExternalBlobs';
-import { UserContext } from "../contexts/UserContext";
+import Overlay from '../ui/Overlay';
+import WeavyPostal from "../utils/postal-parent";
 
 type Props = {
     onFileAdded: Function
@@ -12,72 +14,73 @@ type Props = {
 const FileBrowser = ({ onFileAdded }: Props) => {
 
     const { options } = useContext(WeavyContext);
-    const { user } = useContext(UserContext);
-
+    const [modalOpen, setModalOpen] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const [frameSrc, setFrameSrc] = useState("");
     const addExternalBlobs = useMutateExternalBlobs();
+    const fileBrowserUrl = options?.filebrowserUrl || "";
+
+    const frameRef = useCallback((node: HTMLIFrameElement | null) => {
+        if (node !== null && node.contentWindow != null) {
+            WeavyPostal.registerContentWindow(node.contentWindow.self, "weavy-filebrowser", "wy-filebrowser", new URL(fileBrowserUrl).origin);
+        }
+    }, []);
 
     useEffect(() => {
-        window.addEventListener("message", handleFilebrowserMessage);
+        const origin = window.top?.document.location.origin;
+
+        const filebrowserSrc = fileBrowserUrl + "?origin=" + origin + "&v=X&t=" + Date.now().toString() + "&weavyId=wy-filebrowser";
 
+        setFrameSrc(filebrowserSrc)
+
+        WeavyPostal.on("add-external-blobs", handleFiles);
+        WeavyPostal.on("request:file-browser-close", handleClose);
 
         return () => {
-            window.removeEventListener("message", handleFilebrowserMessage);
+            WeavyPostal.off("add-external-blobs", handleFiles);
+            WeavyPostal.off("request:file-browser-close", handleClose);
         }
-    }, []);
+    }, [onFileAdded]);
 
-    const handleFilebrowserMessage = async (e: any) => {
-        const messageData = e.data;
-
-        switch (messageData.name) {
-            case "addExternalBlobs":
-                var result = await addExternalBlobs.mutateAsync({ blobs: messageData.blobs });
-                onFileAdded(result);
-                closeFilebrowser();
-                break;
-            case "file-browser-close":
-                closeFilebrowser();
-                break;
-        }
+    const toggleModal = (open: boolean) => {
+        setModalOpen(open);
     }
 
-    const closeFilebrowser = () => {
-        let fb = document.getElementById("weavy-filebrowser");
-        if (fb) {
-            fb.style.display = "none";
-        }
+    const handleFiles = async (e: Event, message: any) => {
+        var result = await addExternalBlobs.mutateAsync({ blobs: message.blobs });
+        onFileAdded(result);
+        closeFilebrowser();
     }
 
-    const openFilebrowser = () => {
-        let fb = document.getElementById("weavy-filebrowser");
-
-        if (!fb) {
-            const origin = window.top?.document.location.origin;
-            const fileBrowserUrl = options?.filebrowserUrl;
-            const filebrowserSrc = fileBrowserUrl + "?origin=" + origin + "&v=X&t=" + Date.now().toString() + "&weavyId=-1";
-
-            let $filebrowserFrame = document.createElement("iframe");
-            $filebrowserFrame.id = "weavy-filebrowser";
-            $filebrowserFrame.name = "weavy-filebrowser";
-            $filebrowserFrame.src = filebrowserSrc;
-            $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);
+    const handleClose = () => {
+        closeFilebrowser();
+    }
 
-            $filebrowserFrame.addEventListener('load', () => {
-                $filebrowserFrame.style.display = "block";
-            });
+    const closeFilebrowser = () => {
+        setModalOpen(false);
+        setVisible(false);
+    }
 
-        } else {
-            fb.style.display = "block";
-        }
+    const handleFrameLoad = () => {        
+        setVisible(true);
     }
 
     return (
         <>
-            {options?.enableCloudFiles && 
-                <Button.UI onClick={openFilebrowser} title="Add file from cloud"><Icon.UI name="cloud" /></Button.UI>
-            }            
+            {options?.enableCloudFiles &&
+                <>
+                    <Button.UI onClick={() => toggleModal(true)} title="Add file from cloud"><Icon.UI name="cloud" /></Button.UI>
+
+                    <Overlay.UI isOpen={modalOpen} className="wy-modal wy-panel wy-loaded">
+                        {!visible &&
+                            <Spinner.UI overlay={true} />
+                        }
+
+                        <iframe ref={frameRef} onLoad={handleFrameLoad} src={frameSrc} className="wy-panel-frame" id="weavy-filebrowser" name="weavy-filebrowser"></iframe>
+
+                    </Overlay.UI>
+                </>
+            }
         </>
     )
 }

package/src/components/Image.tsx

@@ -84,8 +84,9 @@ export const ImageGrid = ({ children, limit = 3}: ImageGridProps) => {
     let lastChild = firstImages[firstImages.length - 1];
 
     if (React.isValidElement(lastChild)) {
+        let lastChildProps: { more: number } = { more };
         // Set more property on last image    
-        firstImages[firstImages.length - 1] = React.cloneElement(lastChild, { more });
+        firstImages[firstImages.length - 1] = React.cloneElement(lastChild, lastChildProps);
     }
 
     return (        

package/src/components/MeetingCard.tsx

@@ -1,27 +1,49 @@
 import React from "react";
 import Button from '../ui/Button';
 import Icon from '../ui/Icon';
-
+import dayjs from 'dayjs';
 type Props = {
     meeting: MeetingCardType
 
 }
 const MeetingCard = ({ meeting }: Props) => {
 
-    const handleJoin = () => {
-
-    }
-
     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-list">
+            {meeting.ended_at &&
+                <div className="wy-item wy-meeting">
+                    <Icon.UI name="zoom" size={4} color="#cccccc"/>
+                    <div className="wy-item-body">                        
+                        <div className="wy-item-title">Zoom meeting</div>                        
+                        <div className="wy-item-body">                            
+                            <div>Ended {dayjs.utc(meeting.ended_at).tz(dayjs.tz.guess()).fromNow()}</div>
+                            {meeting.recording_url &&
+                            <div className="wy-meeting-actions">
+                                <a href={meeting.recording_url} target="_blank" className="wy-button wy-button-primary">Play recording</a>
+                            </div>
+                            }
+                        
+                        </div>
+                    </div>
                 </div>
-            </a>
+            }
+
+            {!meeting.ended_at &&
+                <a className="wy-item wy-meeting" href={meeting.join_url} target="_blank">
+                    <Icon.UI name="zoom" color="#4a8cff" size={4} />
+                    <div className="wy-item-body">                        
+                        <div className="wy-item-title">Zoom meeting</div>                        
+                        <div className="wy-item-body">
+                            <div>ID: {`${meeting.provider_id.substring(0, 3)}-${meeting.provider_id.substring(3, 6)}-${meeting.provider_id.substring(6)}`}</div>
+                            <div className="wy-meeting-actions">
+                            <Button.UI className="wy-button-primary">Join meeting</Button.UI>
+                            </div>
+                            
+                        </div>
+                    </div>
+                </a>
+            }
+
         </div>
 
     )

package/src/components/Meetings.tsx

@@ -22,7 +22,7 @@ const Meetings = ({ onMeetingAdded }: Props) => {
         return () => {
             window.removeEventListener("message", createMeeting);
         }
-    }, [])
+    }, [onMeetingAdded])
 
     const createMeeting = async (e: any) => {
 

package/src/components/Message.tsx

@@ -3,7 +3,6 @@ import dayjs from 'dayjs';
 import { MessageProps } from "../types/Message"
 import Attachment from './Attachment';
 import { ReactionsMenu, ReactionsList } from './Reactions';
-import joypixels from 'emoji-toolkit';
 import { Image, ImageGrid } from "./Image"
 import SeenBy from './SeenBy';
 import Avatar from "./Avatar";
@@ -11,12 +10,12 @@ import MeetingCard from './MeetingCard';
 import usePreview from '../hooks/usePreview';
 import classNames from 'classnames';
 
-const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_at, attachments, meeting, parentId, reactions, seenBy }) => {
+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);
 
-    var images = attachments?.filter((a: AttachmentType) => a.kind === "image" && a.thumbnail_url);
-    var files = attachments?.filter((a: AttachmentType) => a.kind !== "image" || !a.thumbnail_url);
+    let images = attachments?.filter((a: AttachmentType) => a.kind === "image" && a.thumbnail_url);
+    let files = attachments?.filter((a: AttachmentType) => a.kind !== "image" || !a.thumbnail_url);
 
     const date = dayjs.utc(created_at).tz(dayjs.tz.guess());
 
@@ -35,50 +34,50 @@ const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_a
                 )}
                 <div className="wy-message-content">
                     <div className="wy-message-meta">
+                        {chatRoom && !me &&
+                            <span>{created_by} · </span>                            
+                        }
                         <time dateTime={created_at} title={date.format('LLLL')}>{date.fromNow()}</time>
                     </div>
-                    <div className="wy-message-content-row">
-                        <div className="wy-message-bubble">
-                            {temp &&
-                                <div className="wy-message-text">{html}</div>
-                            }
-                            {!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} />
-                                        )}
-                                    </ImageGrid>}
-
-                                    {html && <div className="wy-message-text" dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(html || "") }}></div>}
-
-                                    {meeting &&
-                                        <MeetingCard meeting={meeting} />
-                                    }
-
-                                    {files && !!files.length && <div className="wy-attachments">
-                                        {files.map((a: AttachmentType) =>
-                                            <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">
-                            {!temp && <ReactionsMenu id={id} reactions={reactions} />}
-                        </div>
+
+                    <div className="wy-message-bubble">
+                        {temp &&
+                            <div className="wy-content">{html}</div>
+                        }
+                        {!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} />
+                                    )}
+                                </ImageGrid>}
+
+                                {html && <div className="wy-content" dangerouslySetInnerHTML={{ __html: html || "" }}></div>}
+
+                                {meeting &&
+                                    <MeetingCard meeting={meeting} />
+                                }
+
+                                {files && !!files.length && <div className="wy-list-items wy-attachments">
+                                    {files.map((a: AttachmentType) =>
+                                        <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} />}
+                                </div>
+                            </>
+                        }
                     </div>
 
-                    {!temp && (
-                        <div className="wy-reactions">
-                            <ReactionsList id={id} parentId={parentId} reactions={reactions} />
-                        </div>
-                    )}
-                    
+
+
                 </div>
 
-                
+
             </div>
             <SeenBy id={id} parentId={parentId} seenBy={seenBy} createdAt={created_at} />
         </>