@weavy/uikit-react 13.0.0 → 14.0.0

package/src/components/Messages.tsx

@@ -17,11 +17,13 @@ type Props = {
     id: number,
     members: MembersResult | undefined,
     displayName?: string,
-    avatarUrl?: string 
+    avatarUrl?: string,
+    lastMessageId: number | null,
+    chatRoom: boolean
 }
 
-const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
-    var reverseScroller:IntersectionObserver | null;
+const Messages = ({ id, members, displayName, avatarUrl, lastMessageId, chatRoom }: Props) => {
+    var reverseScroller: IntersectionObserver | null;
 
     const { user } = useContext(UserContext);
 
@@ -31,7 +33,7 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
     const readMoreRef = useRef<any>();
     const messagesEndRef = useRef<any>();
     const [resolveScrollerFetch, setResolveScrollerFetch] = useState<Function | null>()
-   
+
     const { dispatch, on, events } = useEvents();
 
     const { isLoading, isError, data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } = useMessages(id, {});
@@ -44,7 +46,6 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
     useLayoutEffect(() => {
         //if (id && !isLoading && !isLoadingMembers && !isLoadingConversation) {
         if (id && !isLoading) {
-            //console.log("useLayoutEffect scroller", id)
             // scroll to bottom when selecting a conversation
             scrollParentToBottom(messagesEndRef.current);
 
@@ -63,7 +64,7 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
                     })
                 }
             })
-            
+
         } else {
             reverseScroller?.disconnect();
             reverseScroller = null;
@@ -85,60 +86,63 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
     }, [data]);
 
     useEffect(() => {
+        // mark conversation as read
+        if (id && lastMessageId) {
+            readMessageMutation.mutate({ id: id, read: true, messageId: lastMessageId })
+        }
+    }, [id, lastMessageId])
 
+    useEffect(() => {
         if (id) {
-
-            window.addEventListener('focus', handleFocus, false)
-
-            // mark conversation as read
-            readMessageMutation.mutate({ id: id, read: true })
-
-            client?.subscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
-            client?.subscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);            
-            client?.subscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
-            client?.subscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
+            client?.subscribe(`a${id}`, "message_created", handleRealtimeMessage);
+            client?.subscribe(`a${id}`, "conversation_marked", handleRealtimeSeenBy);
+            client?.subscribe(`a${id}`, "reaction_added", handleRealtimeReactionInserted);
+            client?.subscribe(`a${id}`, "reaction_removed", handleRealtimeReactionDeleted);
         }
 
         return () => {
-            window.removeEventListener('focus', handleFocus, false)
+
+            //window.removeEventListener('focus', handleFocus, false);
 
             if (id) {
                 // remove additional pages in cache. Only get first page
                 let qd = queryClient.getQueryData(["messages", id]);
-                
+
                 if (qd) {
-                    
+
                     queryClient.setQueryData(["messages", id], (data: any) => ({
-                        pages: data?.pages.slice(0,1),
-                        pageParams: [undefined]                        
-                    }));                    
+                        pages: data?.pages.slice(0, 1),
+                        pageParams: [undefined]
+                    }));
                 }
 
-                client?.unsubscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
-                client?.unsubscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);                
-                client?.unsubscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
-                client?.unsubscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
+                client?.unsubscribe(`a${id}`, "message_created", handleRealtimeMessage);
+                client?.unsubscribe(`a${id}`, "conversation_marked", handleRealtimeSeenBy);
+                client?.unsubscribe(`a${id}`, "reaction_added", handleRealtimeReactionInserted);
+                client?.unsubscribe(`a${id}`, "reaction_removed", handleRealtimeReactionDeleted);
             }
         }
     }, [id]);
 
-    const handleRealtimeReactionInserted = useCallback((data: ReactionType) => {                
-        dispatch("reaction-inserted", data);
+
+    const handleRealtimeReactionInserted = useCallback((realtimeEvent: RealtimeReaction) => {
+        dispatch("reaction_added_" + realtimeEvent.entity.id, realtimeEvent);
     }, [id]);
 
-    const handleRealtimeReactionDeleted = useCallback((data: ReactionType) => {                
-        dispatch("reaction-deleted", data);
+    const handleRealtimeReactionDeleted = useCallback((realtimeEvent: RealtimeReaction) => {
+        dispatch("reaction_deleted_" + realtimeEvent.entity.id, realtimeEvent);
     }, [id]);
 
     // handle new message from post form
     const handleNewMessage = (text: string, attachments: [], meetings: []) => {
         addMessageMutation.mutate({ id: id, text: text, userId: user.id, attachments: attachments, meetings: meetings }, {
-            onSuccess: () => { requestAnimationFrame(() => scrollParentToBottom(messagesEndRef.current, true))}
-        });
-
-        // mark conversation as read
-        setTimeout(() => { readMessageMutation.mutate({ id: id, read: true }) }, 1000);
+            onSuccess: (data: MessageType) => {
+                // mark conversation as read
+                readMessageMutation.mutate({ id: id, read: true, messageId: data.id });
 
+                requestAnimationFrame(() => scrollParentToBottom(messagesEndRef.current, true))
+            }
+        });
 
         requestAnimationFrame(() => scrollParentToBottom(readMoreRef.current, true));
     }
@@ -146,7 +150,7 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
     const handleRealtimeSeenBy = async (data: any) => {
         let isAtBottom = isParentAtBottom(readMoreRef.current);
         // how to do this better?                
-        queryClient.invalidateQueries(["members", id])
+        queryClient.invalidateQueries(["members", id]);
 
         if (isAtBottom) {
             requestAnimationFrame(() => scrollParentToBottom(readMoreRef.current, true));
@@ -154,11 +158,14 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
     }
 
     // real time insert-message handler
-    const handleRealtimeMessage = useCallback((message: MessageType) => {
-        if (message.app_id !== id || message.created_by.id === user.id) return;
+    const handleRealtimeMessage = useCallback((realtimeEvent: RealtimeMessage) => {
+        if (realtimeEvent.message.app_id !== id || realtimeEvent.message.created_by_id === user.id) return;
+
+        // set created_by
+        realtimeEvent.message.created_by = realtimeEvent.actor;
 
         // mark conversation as read
-        readMessageMutation.mutate({ id: id, read: true })
+        readMessageMutation.mutate({ id: id, read: true, messageId: realtimeEvent.message.id })
 
         const previousData = queryClient.getQueryData<any>(['messages', id]);
 
@@ -166,13 +173,13 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
             let isAtBottom = isParentAtBottom(readMoreRef.current);
 
             const newPagesArray = previousData.pages.map((page: any, i: number) => {
-                // remove temp message                    
+                // add realtime message                    
+
                 if (i === 0) {
                     page.data = [
                         ...page.data,
-                        message
+                        realtimeEvent.message
                     ]
-
                 }
                 return page;
 
@@ -191,15 +198,9 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
 
     }, [id]);
 
-    const handleFocus = useCallback(() => {
-        if (!id) return;
-
-        readMessageMutation.mutate({ id: id, read: true })
-    }, [id]);
-
     let messageHeader = <div className="wy-avatar-header">
         {avatarUrl && displayName && <Avatar src={avatarUrl} name={displayName} id={id} size={128} /> || ''}
-        {displayName && <div className="wy-avatar-display-name">{displayName}</div> || ''}
+        {displayName && <div className="wy-headline">{displayName}</div> || ''}
     </div>;
 
     let loadMoreButton = <Button.UI onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage} className="wy-message-readmore">Load more</Button.UI>;
@@ -207,19 +208,19 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
     let messages = (
         <>
             <div className="wy-message-readmore" ref={readMoreRef}>
-            {isFetchingNextPage
-                        ? 'Loading more...'
-                        : hasNextPage
-                            ? loadMoreButton
-                            : messageHeader}
-                
+                {isFetchingNextPage
+                    ? 'Loading more...'
+                    : hasNextPage
+                        ? loadMoreButton
+                        : messageHeader}
+
             </div>
             {data && members && data.pages && data.pages.map((group, i) => {
                 // Reverse key since page loading is reversed
                 return <React.Fragment key={data.pages.length - i}>
                     {
                         group.data?.map((item: MessageType) => {
-                            
+
                             return <Message
                                 key={item.id}
                                 id={item.id}
@@ -229,15 +230,15 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
                                 avatar={item.created_by.avatar_url}
                                 name={item.created_by.display_name}
                                 created_at={item.created_at}
+                                created_by={item.created_by.display_name}
                                 attachments={item.attachments}
                                 meeting={item.meeting}
                                 parentId={id}
                                 reactions={item.reactions}
+                                chatRoom={chatRoom}
                                 //reactions_count={item.reactions_count}
                                 seenBy={(members.data && members.data.length > 0) ? members.data.filter((member) => {
-                                    const hasRead = member.read_at >= item.created_at;
-                                    const nothingLaterRead = !data.pages.map((p) => p.data).flat().find((message: MessageType) => { return message.id > item.id && member.read_at >= message.created_at });
-                                    return hasRead && nothingLaterRead && member.id !== user.id;
+                                    return member.marked_id === item.id && member.id !== user.id;
                                 }) : []}
                             />
                         })
@@ -260,7 +261,7 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
             <div id="container" className="wy-messages">
                 {messages}
             </div>
-            <div className="wy-message-editor">
+            <div className="wy-footerbar wy-footerbar-sticky wy-message-editor wy-message-editor-bottom">
                 <ConversationForm key={id} conversationId={id} handleInsert={handleNewMessage} />
             </div>
         </>

package/src/components/Messenger.tsx

@@ -4,8 +4,13 @@ import Conversation from './Conversation';
 import ConversationList from './ConversationList';
 import { Messenger } from '../types/Messenger';
 import { WeavyContext } from '../contexts/WeavyContext';
+import classNames from 'classnames';
 
-const Messenger: FC<Messenger> = () => {
+type Props = {
+    className?: string,
+}
+
+const Messenger: FC<Messenger> = ({ className }: Props) => {
 
     const { client } = useContext(WeavyContext);
 
@@ -15,7 +20,7 @@ const Messenger: FC<Messenger> = () => {
     
     return (
         <MessengerProvider>
-            <div className="wy-messenger-provider">
+            <div className={classNames("wy-messenger-provider", className)}>
 
                 <div className="wy-messenger-sidebar wy-scroll-y">
                     <ConversationList />

package/src/components/NewConversation.tsx

@@ -29,7 +29,7 @@ const NewConversation = () => {
             <Button.UI onClick={handleOpen}><Icon.UI name="plus" /></Button.UI>
 
             <Overlay.UI isOpen={modalOpen} className="wy-modal">
-                <header className="wy-appbars">
+                <header className="wy-appbars" data-adjust-scrollbar-top>
                     <nav className="wy-appbar">
                         <Button.UI onClick={handleClose}><Icon.UI name='close' /></Button.UI>
                         <div className="wy-appbar-text">Create conversation</div>

package/src/components/PdfViewer.tsx

@@ -248,19 +248,19 @@ const PdfViewer = ({ src, pdfCMapsUrl, pdfWorkerUrl }: Props) => {
 
     return (
         <div className="wy-content-pdf" data-controller="pdf" data-pdf-url-value="">
-            <div className="wy-toolbar">
-                <nav className="wy-tools">
-                    <div className="wy-tool">
+            <div className="wy-toolbars-bottom">
+                <nav className="wy-toolbar">
+                    <div className="wy-toolbar-buttons">
                         <input type="text" className="wy-input" ref={pageNumberRef} onChange={updatePage} onClick={select} data-pdf-target="pageNumber"/>
                         <span>/</span>
                         <span ref={totalPagesRef}>1</span>
                     </div>
-                    <div className="wy-tool">
+                    <div className="wy-toolbar-buttons">
                         <button className="wy-button wy-button-icon btn-zoom-out" onClick={zoomOut} title="Zoom out"><Icon.UI name="minus" /></button>
                         <input type="text" className="wy-input" ref={zoomLevelRef} onChange={updateZoom} onClick={select} value="100%" data-pdf-target="zoomLevel"/>
                         <button className="wy-button wy-button-icon btn-zoom-in" onClick={zoomIn} title="Zoom in"><Icon.UI name="plus" /></button>
                     </div>
-                    <div className="wy-tool">
+                    <div className="wy-toolbar-buttons">
                         <button className="wy-button wy-button-icon btn-fit-page" onClick={fitToWidth} title="Fit to width"><Icon.UI name="fit-width" /></button>
                         <button className="wy-button wy-button-icon" onClick={fitToPage} title="Fit to screen"><Icon.UI name="fit-screen" /></button>
                     </div>

package/src/components/Preview.tsx

@@ -200,14 +200,14 @@ export const PreviewText = ({ src, html = false, code = false }: TextProps) => {
                 code ?
                     <div className="wy-content-code wy-code" dangerouslySetInnerHTML={{ __html: textContent }}></div>
                     :
-                    <div className="wy-document">
+                    <div className="wy-document wy-light">
                         <div className="wy-content-html" dangerouslySetInnerHTML={{ __html: textContent }}></div>
                     </div>
                 :
                 code ?
                     <div className="wy-content-code">{textContent}</div>
                     :
-                    <div className="wy-document">
+                    <div className="wy-document wy-light">
                         <pre className="wy-content-text">{textContent}</pre>
                     </div>
             }

package/src/components/Reactions.tsx

@@ -50,7 +50,7 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
     }
 
     const handleReaction = async (e: any) => {
-        // check if the reaction already exists for the user
+        // check if the reaction already exists for the user        
         const existing = reactionsList.find((r) => r.has_reacted)
         const emoji = e.target.dataset.emoji;
 
@@ -69,7 +69,7 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
 
     return (
         <div className={classNames({ "wy-active": visible })} style={{ position: 'relative' }}>
-            <Button.UI onClick={toggleReactionMenu}><Icon.UI name="emoticon-plus" size={1} /></Button.UI>
+            <Button.UI className="wy-reaction-menu-button" onClick={toggleReactionMenu}><Icon.UI name="emoticon-plus" size={1.25/1.5} /></Button.UI>
             <div className="wy-reaction-menu wy-dropdown-menu" style={{ display: visible ? 'block' : 'none', position: 'absolute', top: '-3.25rem' }}>
                 <div className="wy-reaction-picker">
                     {emojis?.map((r: string, i: number) => {
@@ -83,13 +83,19 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
 }
 
 export const ReactionsList = ({ id, reactions }: ReactionsProps) => {
-    const { reactionsList } = useReactions(id, reactions);
-
+    const { reactionsList } = useReactions(id, reactions);  
+    
+    let reactionCount = reactionsList.reduce(
+        (previousValue, currentItem) => previousValue + currentItem.count,
+        0,
+    );
+    
     return (
         <>
-            {reactionsList && reactionsList.map((r: ReactionGroup, i: number) => {
+            {!!reactionsList && reactionsList.map((r: ReactionGroup, i: number) => {
                 return <span key={i} className="wy-reaction" title={r.count.toString()}>{r.content}</span> //r.has_reacted
             })}
+            {reactionCount > 1 && <span className="wy-reaction-count">{reactionCount}</span>}
         </>
     )
 }

package/src/components/SearchUsers.tsx

@@ -22,6 +22,13 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
     const throttledCb = useDebounce(() => refetch(), 250);
     useEffect(throttledCb, [text])
 
+    const toggleChecked = (e: any) => {
+        let checkbox = e.currentTarget.querySelector("input[type=checkbox]");
+        if (checkbox !== e.target && !e.target.matches("label, input[type=checkbox]")) {
+            checkbox?.click();
+        }
+    };
+
     const isChecked = (id: number): boolean => {
         return selected.find((u) => { return u.id === id }) != null;
     }
@@ -42,25 +49,28 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
 
     return (
         <div className="wy-search wy-scroll-y">
-            <div className="wy-search-form wy-pane-group">
-                <Button.UI><Icon.UI name="magnify" /></Button.UI>
-                <input className="wy-search-input" value={text} onChange={(e) => setText(e.target.value)} name="text" placeholder='Search...' />
+            <div className="wy-pane-group">
+                <div className="wy-search-form wy-input-group">
+                    <input className="wy-search-input wy-input wy-input-filled" value={text} onChange={(e) => setText(e.target.value)} name="text" placeholder='Search...' />
+                    <Button.UI type="reset" onClick={() => clear()}><Icon.UI name="close-circle" /></Button.UI>
+                    <Button.UI><Icon.UI name="magnify" /></Button.UI>
+                </div>
             </div>
 
             <div className="wy-pane-group">
                 {data && (!data.data || data.data.length === 0) &&
-                    <div className="wy-search-no-result">Your search did not match any people.</div>
+                    <div className="wy-table-no-result">Your search did not match any people.</div>
                 }
-                <table className="wy-search-result-table">
+                <table className="wy-table wy-table-hover wy-search-result-table">
                     <tbody>
                         {data && data.data && data.data.length > 0 && data.data.map((user: MemberType) => {
                             return (
-                                <tr key={user.id} className="wy-search-result-table-checkbox">
-                                    <td className="wy-search-result-table-icon">
+                                <tr key={user.id} onClick={toggleChecked}>
+                                    <td className="wy-table-cell-icon">
                                         <Avatar src={user.avatar_url} size={24} id={user.id} presence={user.presence} name={user.display_name} />
                                     </td>
-                                    <td><label htmlFor={'chk' + user.id}>{user.display_name}</label></td>
-                                    <td className="wy-search-result-table-icon"><input type="checkbox" id={'chk' + user.id} checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
+                                    <td className="wy-table-cell-text"><label htmlFor={'chk' + user.id}>{user.display_name}</label></td>
+                                    <td className="wy-table-cell-icon"><input type="checkbox" id={'chk' + user.id} checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
                                 </tr>
                             )
                         })}

package/src/components/SeenBy.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Avatar from "./Avatar";
-import dayjs  from 'dayjs';
+import dayjs from 'dayjs';
 
 type Props = {
     id: number,
@@ -10,14 +10,20 @@ type Props = {
 }
 
 const SeenBy = ({ seenBy }: Props) => {
-   
+
     return (
-        <div className="wy-readby-status">
-            {seenBy && seenBy.length > 0 && seenBy.map((member: MemberType) => {
-                const date = dayjs.utc(member.read_at).tz(dayjs.tz.guess());
-                return (<Avatar name={`Seen by ${member.name} at ${date.format('LLLL')}`} src={member.avatar_url} size={16} key={member.id}/>)})
+        <>
+            {seenBy && seenBy.length > 0 &&
+                <div className="wy-readby-status">
+                    {seenBy.map((member: MemberType) => {
+                        const date = dayjs.utc(member.marked_at).tz(dayjs.tz.guess());                        
+                        return (<Avatar name={`Seen by ${member.display_name} at ${date.format('LLLL')}`} src={member.avatar_url} size={16} key={member.id} />)
+                    })
+                    }
+                </div>
             }
-        </div>
+        </>
+
     )
 }
 

package/src/components/Typing.tsx

@@ -27,11 +27,11 @@ const Typing = ({ children, id, context }: Props) => {
         setActiveTypers([]);
         
         client?.subscribe(`a${id}`, "typing", handleTyping);        
-        client?.subscribe(`a${id}`, "message-inserted", handleStopTyping);
+        client?.subscribe(`a${id}`, "message_created", handleStopTyping);
 
         return () => {
             client?.unsubscribe(`a${id}`, "typing", handleTyping);            
-            client?.unsubscribe(`a${id}`, "message-inserted", handleStopTyping);
+            client?.unsubscribe(`a${id}`, "message_created", handleStopTyping);
         }
     }, [id])
 
@@ -87,29 +87,28 @@ const Typing = ({ children, id, context }: Props) => {
         }
     }
 
-    const setTypers = (data: any) => {
+    const setTypers = (actor: MemberTypingType) => {
         
         // remove existing typing events by this user (can only type in one conversation at a time)
         activeTypers.forEach(function (item: any, index: number) {
-            if (item.member.id === data.member.id) {
+            if (item.member.id === actor.id) {
                 setActiveTypers(activeTypers.splice(index, 1));
             }
         });
 
         // track time when we received this event
-        data.member.time = Date.now();
-        setActiveTypers([...activeTypers, data.member]);
+        actor.time = Date.now();
+        setActiveTypers([...activeTypers, actor]);
     }
 
-    const handleTyping = useCallback((data: any) => {               
-        if (data.conversation.id === id && data.member.id !== user.id) {            
-            setTypers(data);
+    const handleTyping = useCallback((realtimeEvent: RealtimeTyping) => {        
+        if (realtimeEvent.conversation.id === id && realtimeEvent.actor.id !== user.id) {            
+            setTypers(realtimeEvent.actor);
         }
-
     }, [id, context, activeTypers]);
 
-    const handleStopTyping = useCallback((data: any) => {        
-        if (data.app_id === id) {
+    const handleStopTyping = useCallback((realtimeEvent: RealtimeMessage) => {        
+        if (realtimeEvent.message.app_id === id) {
             setActiveTypers([]);
         }
     }, [id, context, activeTypers]);

package/src/contexts/UserContext.tsx

@@ -2,7 +2,7 @@ import React, { createContext} from "react";
 import useUser from "../hooks/useUser";
 
 export const UserContext = createContext<UserContextProps>({
-    user: { id: -1, username: "anonymous", name: "Anonymous", email: "", title: "", presence: "", avatar_url: "" }    
+    user: { id: -1, uid: "", username: "anonymous", name: "Anonymous", email: "", display_name: "", presence: "", avatar_url: "" }    
 });
 
 type Props = {

package/src/contexts/WeavyContext.tsx

@@ -7,7 +7,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import PreviewProvider from "./PreviewContext";
-import detectScrollbars from '../utils/scrollbarDetection';
+import { detectScrollbars, detectScrollbarAdjustments } from '../utils/scrollbarDetection';
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -41,14 +41,14 @@ const WeavyProvider = ({ children, client, options }: WeavyProviderProperties) =
     teamsAuthenticationUrl: undefined,
     enableCloudFiles: true,
     enableScrollbarDetection: true,
-    filebrowserUrl: "https://filebrowser.weavycloud.com/index10.html",
+    filebrowserUrl: "https://filebrowser.weavy.io/v14/",
     reactions: ['😍', '😎', '😉', '😜', '👍']
   };
 
   let opts = { ...defaultOptions, ...options }
 
   if (opts.enableScrollbarDetection) {
-    detectScrollbars();
+    detectScrollbars().then(() => detectScrollbarAdjustments());
   }
 
   if(!client){

package/src/hooks/useConversations.ts

@@ -1,21 +1,31 @@
 import { useContext } from "react";
-import { useQuery } from "react-query";
+import { useInfiniteQuery } from "react-query";
 import { WeavyContext } from "../contexts/WeavyContext";
 
 /// GET all conversations
-export default function useConversations() {
+export default function useConversations(options: any) {
     const { client } = useContext(WeavyContext);
+    const PAGE_SIZE = 25;
 
     if (!client) {
         throw new Error('useConversations must be used within an WeavyProvider');
     }
 
-    const getConversations = async () => {
-        const response = await client.get("/api/conversations?contextual=false");
+    const getConversations = async (opt: any) => {
+        let skip = opt.pageParam || 0;
+        const response = await client.get("/api/conversations?contextual=false&skip=" + skip + "&top=" + PAGE_SIZE);
         const data = await response.json();                        
         return data;
     };
 
+    var opts = {
+        ...options, 
+        getNextPageParam: (lastPage:any, pages:any) => { 
+            if (lastPage?.end < lastPage?.count)  {                
+                return pages.length * PAGE_SIZE;
+            }
+        }      
+    };
 
-    return useQuery<ConversationsResult>("conversations", getConversations);
+    return useInfiniteQuery<ConversationsResult>("conversations", getConversations, opts);
 }

package/src/hooks/useMutateMessage.ts

@@ -34,22 +34,18 @@ export default function useMutateMessage() {
     };
 
     return useMutation(mutateMessage, {
-        onSuccess: (data: any, variables: any, context: any) => {
+        onSuccess: (data: MessageType, variables: any, context: any) => {
 
             const previousData = queryClient.getQueryData<any>(['messages', variables.id]);
             if (previousData && previousData.pages) {
                 // update cache
                 const newPagesArray = previousData.pages.map((page: any, i: number) => {
-
-
-
                     // remove temp message                    
                     if (i === 0) {
                         page.data = [
                             ...page.data.filter((message: MessageType) => message.id !== context.tempId),
                             data
                         ]
-
                     }
 
                     return page;

package/src/hooks/useMutateRead.ts

@@ -15,11 +15,13 @@ export default function useMutateRead() {
 
     type MutateProps = {
         id: number | null,
-        read: boolean
+        read: boolean,
+        messageId: number | null
     }
 
-    const mutateRead = async ({ id, read }: MutateProps) => {
-        const response = await client.post("/api/conversations/" + id + "/read", !read ? "DELETE": "PUT", "")
+    const mutateRead = async ({ id, read, messageId }: MutateProps) => {
+        const url = read ? `/api/conversations/${id}/read?messageId=${messageId}`: `/api/conversations/${id}/read`;
+        const response = await client.post(url, !read ? "DELETE": "PUT", "")
         return response.json();
     };
 

package/src/hooks/usePresence.ts

@@ -10,11 +10,10 @@ export default function usePresence() {
     }
 
     useEffect(() => {
-        client.subscribe("online", "online", handlePresenceChange)
+        client.subscribe(null, "online", handlePresenceChange)
     }, []);
 
-    const handlePresenceChange = (data: any) => {        
-        
+    const handlePresenceChange = (data: any) => {                
         if (Array.isArray(data)) {
             document.querySelectorAll(".wy-presence").forEach(function (item) {
                 item.classList.remove("wy-presence-active");