@weavy/uikit-react 12.1.0 → 14.0.0

package/src/components/Chat.tsx

@@ -6,8 +6,9 @@ import Messages from './Messages';
 import useMembers from '../hooks/useMembers';
 import Typing from './Typing';
 import useConversation from '../hooks/useConversation';
+import classNames from 'classnames';
 
-const Chat = ({ id }: ChatProps) => {
+const Chat = ({ uid, className }: ChatProps) => {
     const { client } = useContext(WeavyContext);
     const [selectedId, setSelectedId] = useState<number | null>(null)
 
@@ -15,7 +16,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
@@ -36,8 +37,8 @@ const Chat = ({ id }: ChatProps) => {
     }, [dataChat]);
 
     return (
-        <div className="wy-messenger-conversation wy-scroll-y">
-            <header className="wy-appbars">
+        <div className={classNames("wy-messenger-conversation wy-scroll-y", className)}>
+            <header className="wy-appbars" data-adjust-scrollbar-top>
                 <nav className="wy-appbar">
                     <div></div>
                     {selectedId && dataConversation &&
@@ -51,11 +52,11 @@ const Chat = ({ id }: ChatProps) => {
             </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} />
+            {selectedId && dataMembers && dataChat &&
+                <Messages id={selectedId} chatRoom={true} members={dataMembers} lastMessageId={dataChat.last_message?.id} />
             }
         </div>
     )

package/src/components/Conversation.tsx

@@ -25,10 +25,12 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
     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 [isRoomOrChat, setIsRoomOrChat] = useState<boolean>(false);
 
     const ChatRoom = "edb400ac-839b-45a7-b2a8-6a01820d1c44";
+    const Chat = "d65dd4bc-418e-403c-9f56-f9cf4da931ed";
 
     if (!client) {
         throw new Error('Weavy Conversation component must be used within an WeavyProvider');
@@ -50,8 +52,8 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
     const updateNameMutation = useMutateConversationName();
     const removeMembers = useMutateRemoveMembers();
 
-    const handleRealtimeAppUpdated = useCallback((data: ConversationType) => {
-        if (data.id !== selectedConversationId) return;
+    const handleRealtimeAppUpdated = useCallback((realtimeEvent: RealtimeApp) => {        
+        if (realtimeEvent.app.id !== selectedConversationId) return;
         queryClient.invalidateQueries(['conversation', selectedConversationId]);
     }, [selectedConversationId]);
 
@@ -93,14 +95,14 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
     useEffect(() => {
 
         if (selectedConversationId) {
-            client.subscribe(`a${selectedConversationId}`, "app-updated", handleRealtimeAppUpdated);
+            client.subscribe(`a${selectedConversationId}`, "app_updated", handleRealtimeAppUpdated);
         }
 
         return () => {
 
             if (selectedConversationId) {
 
-                client.unsubscribe(`a${selectedConversationId}`, "app-updated", handleRealtimeAppUpdated);
+                client.unsubscribe(`a${selectedConversationId}`, "app_updated", handleRealtimeAppUpdated);
             }
         }
     }, [selectedConversationId]);
@@ -109,11 +111,14 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
         if (dataConversation && dataConversation.type === ChatRoom) {
             setTitle(dataConversation?.display_name);
         }
+        if(dataConversation && (dataConversation.type === ChatRoom || dataConversation.type === Chat)){
+            setIsRoomOrChat(true)
+        }
     }, [dataConversation]);
 
     return (
         <>
-            <header className="wy-appbars">
+            <header className="wy-appbars" data-adjust-scrollbar-top>
                 <nav className="wy-appbar">
                     <div>
                         {showBackButton &&
@@ -146,17 +151,17 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
 
             {!selectedConversationId &&
                 <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>
+                    <Avatar src={user.avatar_url} name={user.display_name} presence={user.presence} id={user.id} size={256} />
+                    <h2 className='wy-title'>Welcome {user.name}!</h2>
                     Create or select a conversation to get started
                 </div>
             }
-            {selectedConversationId && dataMembers &&
-                <Messages id={selectedConversationId} members={dataMembers} displayName={dataConversation?.display_name} avatarUrl={dataConversation?.avatar_url} />
+            {selectedConversationId && dataMembers && dataConversation &&
+                <Messages id={selectedConversationId} chatRoom={isRoomOrChat} members={dataMembers} displayName={dataConversation?.display_name} avatarUrl={dataConversation?.avatar_url} lastMessageId={dataConversation?.last_message?.id}/>
             }
 
             <Overlay.UI isOpen={modalAddOpen} className="wy-modal">
-                <header className="wy-appbars">
+                <header className="wy-appbars" data-adjust-scrollbar-top>
                     <nav className="wy-appbar">
                         <Button.UI onClick={() => toggleAddModal(false)}><Icon.UI name='close' /></Button.UI>
                         <div className="wy-appbar-text">Add people</div>
@@ -172,11 +177,13 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                         <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?.type !== ChatRoom &&
-                        <h4 className="wy-avatar-display-name">{dataConversation?.display_name}</h4>
-                    }
+                <div className='wy-scroll-y'>
+                    {dataConversation && <div className="wy-avatar-header">                        
+                        <Avatar src={dataConversation?.avatar_url} name={title} size={128} />
+                        {dataConversation?.type !== ChatRoom &&                        
+                        <h3 className="wy-headline">{dataConversation?.display_name}</h3>                    
+                        }
+                    </div>}
 
                     {dataConversation?.type === ChatRoom && (
                         <>
@@ -184,14 +191,13 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                                 <input className="wy-input" value={title} onChange={(e) => handleUpdateTitle(e)} />
                             </div>
                             <div className="wy-pane-group">
-                                <table className="wy-search-result-table">
+                                <table className="wy-table 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>
-                                                    <td>{m.display_name}</td>
-                                                    <td></td>
+                                                <tr key={m.id}>
+                                                    <td className="wy-table-cell-icon wy-search-result-table-icon"><Avatar src={m.avatar_url} name={m.display_name} id={m.id} size={24} presence={m.presence} /></td>
+                                                    <td className='wy-table-cell-text'>{m.display_name}</td>
                                                 </tr>
                                             )
                                         })}
@@ -203,7 +209,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                 </div>
             </Overlay.UI>
 
-           
+
         </>
     )
 }

package/src/components/ConversationBadge.tsx

@@ -10,10 +10,10 @@ const ConversationBadge = () => {
         throw new Error('Weavy Badge component must be used within an WeavyProvider');
     }
 
-    const { isLoading, data } = useBadge();
+    const { isLoading, data, refetch } = useBadge();
 
-    const handleBadge = (data: BadgeType) => {
-        setBadge(data.private + data.rooms);
+    const handleBadge = (data: BadgeType) => {        
+        refetch();
     }
 
     useEffect(() => {
@@ -23,10 +23,12 @@ const ConversationBadge = () => {
     }, [data])
 
     useEffect(() => {
-        client.subscribe(null, "conversation-badge", handleBadge);
+        client.subscribe(null, "message_created", handleBadge);
+        client.subscribe(null, "conversation_marked", handleBadge);
 
         return () => {
-            client.unsubscribe(null, "conversation-badge", handleBadge);
+            client.unsubscribe(null, "message_created", handleBadge);
+            client.unsubscribe(null, "conversation_marked", handleBadge);
         }
     }, [])
 

package/src/components/ConversationForm.tsx

@@ -199,7 +199,7 @@ const ConversationForm = ({ conversationId, handleInsert }: Props) => {
                     <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">
-                    <Button.UI type="button" onClick={handleInsertMessage} ><Icon.UI name="send"/></Button.UI>
+                    <Button.UI type="button" onClick={handleInsertMessage} ><Icon.UI color="primary" name="send"/></Button.UI>
                 </div>
             </div>
         </form>

package/src/components/ConversationList.tsx

@@ -1,28 +1,63 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import { WeavyContext } from '../contexts/WeavyContext';
 import useConversations from '../hooks/useConversations';
 import ConversationListItem from './ConversationListItem';
 import NewConversation from './NewConversation';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
+import Button from '../ui/Button';
+import { createScroller } from "../utils/infiniteScroll";
 
 const ConversationList = () => {
     const { client } = useContext(WeavyContext);
     const { user } = useContext(UserContext);
-    const { data, isLoading, refetch } = useConversations();
+    const { data, isLoading, refetch, fetchNextPage, hasNextPage, isFetchingNextPage } = useConversations({});
+    const loadMoreRef = useRef<any>();
+    const [resolveScrollerFetch, setResolveScrollerFetch] = useState<Function | null>()
+    let scroller: IntersectionObserver | null;
 
     if (!client) {
         throw new Error('Weavy ConversationList component must be used within an WeavyProvider');
     }
 
+
+    useLayoutEffect(() => {
+        if(!isLoading){
+            scroller?.disconnect();
+
+            scroller = createScroller(loadMoreRef.current, () => {
+                if (hasNextPage) {
+                    return fetchNextPage().then(() => {
+                        // Wait for useLayoutEffect before resolving
+                        return new Promise((resolve: Function) => setResolveScrollerFetch(resolve))
+                    })
+                }
+            })
+        }
+
+        return () => {
+            scroller?.disconnect();
+            scroller = null;
+        }
+       
+    }, [isLoading]);
+
+    useLayoutEffect(() => {
+        // Resolve fetchNextPage after layout has been painted
+        if (!isFetchingNextPage && resolveScrollerFetch) {
+            resolveScrollerFetch()
+            setResolveScrollerFetch(null);
+        }
+    }, [data]);
+
     useEffect(() => {
 
-        client.subscribe(null, "app-inserted", handleAppInserted);
-        client.subscribe(null, "member-added", handleAppInserted);
+        client.subscribe(null, "app_created", handleAppInserted);
+        client.subscribe(null, "member_added", handleAppInserted);
 
         return () => {
-            client.unsubscribe(null, "app-inserted", handleAppInserted);
-            client.unsubscribe(null, "member-added", handleAppInserted);
+            client.unsubscribe(null, "app_created", handleAppInserted);
+            client.unsubscribe(null, "member_added", handleAppInserted);
         }
     }, []);
 
@@ -37,21 +72,34 @@ const ConversationList = () => {
         )
     }
 
+    let loadMoreButton = <Button.UI onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage} className="wy-message-readmore">Load more</Button.UI>;
+
     return (
         <>
-            <header className="wy-appbars">
+            <header className="wy-appbars" data-adjust-scrollbar-top>
                 <nav className="wy-appbar">
-                    <Avatar src={user.avatar_url} name={user.title} presence={user.presence} id={user.id} size={24} />
+                    <Avatar src={user.avatar_url} name={user.display_name} presence={user.presence} id={user.id} size={24} />
                     <div>Messenger</div>
                     <NewConversation />
                 </nav>
             </header>
             <div className="wy-conversations">
-                {data && data.data?.map((item) =>
-                    <ConversationListItem key={item.id} refetchConversations={refetch} item={item} />
+                {data && data.pages && data.pages.map((group, i) => {
+                    return group.data?.map((item) => {
+                        return < ConversationListItem key={item.id} refetchConversations={refetch} item={item} />
+                    })
+
+                }
+
                 )}
+                <div className="wy-message-readmore" ref={loadMoreRef}>
+                    {isFetchingNextPage
+                        ? 'Loading more...'
+                        : hasNextPage
+                            ? loadMoreButton
+                            : ""}
 
-                {/* <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>                
             </div>
         </>
     )

package/src/components/ConversationListItem.tsx

@@ -27,22 +27,40 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
 
     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 +68,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,18 +96,18 @@ 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 &&
@@ -108,44 +126,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>
+                </>
+            }
         </>
     )
 }