@weavy/uikit-react 13.0.0 → 14.0.1

package/dist/esm/types/{types/Chat.d.ts → Chat.d.ts}

@@ -1,3 +1,4 @@
 export interface ChatProps {
     uid: string;
+    className?: string;
 }

package/dist/{cjs/types → esm}/types/Message.d.ts

@@ -6,10 +6,12 @@ export interface MessageProps {
     avatar?: string;
     name: string;
     created_at: string;
+    created_by: string;
     attachments: AttachmentType[];
     meeting: MeetingCardType;
     parentId: number | null;
     reactions: ReactableType[];
     reactions_count?: number;
     seenBy: MemberType[];
+    chatRoom: boolean;
 }

package/dist/esm/types/{types/types.d.ts → types.d.ts}

@@ -78,9 +78,14 @@ declare type MemberType = {
     name: string;
     display_name: string;
     avatar_url: string;
-    delivered_at: string;
-    read_at: string;
+    delivered_at?: string;
+    read_at?: string;
     presence: string;
+    marked_id?: number;
+    marked_at?: string;
+};
+declare type MemberTypingType = MemberType & {
+    time: number;
 };
 declare type MessageType = {
     id: number;
@@ -90,6 +95,7 @@ declare type MessageType = {
     temp?: boolean;
     created_at: string;
     created_by: MemberType;
+    created_by_id: number;
     attachments: AttachmentType[];
     attachment_ids: number[];
     meeting: MeetingCardType;
@@ -98,10 +104,11 @@ declare type MessageType = {
 };
 declare type UserType = {
     id: number;
+    uid: string;
+    name: string;
     username: string;
     email: string;
-    name: string;
-    title: string;
+    display_name: string;
     avatar_url: string;
     presence: string;
 };
@@ -164,3 +171,39 @@ declare type BadgeType = {
     rooms: number;
     chat: number;
 };
+declare type EntityType = {
+    id: number;
+    type: string;
+};
+declare type RealtimeMessage = {
+    action: string;
+    id: number;
+    actor: UserType;
+    message: MessageType;
+};
+declare type RealtimeReaction = {
+    action: string;
+    id: number;
+    actor: UserType;
+    entity: EntityType;
+    reaction: string;
+};
+declare type RealtimeApp = {
+    action: string;
+    id: number;
+    actor: UserType;
+    app: ConversationType;
+};
+declare type RealtimeMember = {
+    action: string;
+    id: number;
+    actor: UserType;
+    app: ConversationType;
+    member: MemberType;
+};
+declare type RealtimeTyping = {
+    action: string;
+    id: number;
+    actor: MemberTypingType;
+    conversation: ConversationType;
+};

package/dist/esm/{types/ui → ui}/Spinner.d.ts

@@ -2,8 +2,9 @@
 declare type SpinnerProps = {
     size?: number;
     spin?: boolean;
+    overlay?: boolean;
 };
 declare const UISpinner: {
-    UI: ({ spin, size }: SpinnerProps) => JSX.Element;
+    UI: ({ spin, size, overlay }: SpinnerProps) => JSX.Element;
 };
 export default UISpinner;

package/dist/index.d.ts

@@ -56,9 +56,10 @@ declare const _default: React.MemoExoticComponent<({ id, showBackButton }: Conve
 
 interface ChatProps {
     uid: string;
+    className?: string;
 }
 
-declare const Chat: ({ uid }: ChatProps) => JSX.Element;
+declare const Chat: ({ uid, className }: ChatProps) => JSX.Element;
 
 declare const UIButton: {
     UI: any;

package/package.json

@@ -1,32 +1,32 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "13.0.0",
+  "version": "14.0.1",
   "author": "Weavy",
   "description": "React UI-kit for Weavy",
   "homepage": "https://github.com/weavy/weavy-uikit-react",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "./dist/cjs/types/index.d.ts",
+  "types": "./dist/cjs/types/types.d.ts",
   "style": "dist/css/weavy-react.css",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.1",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.1.0",
+    "@rollup/plugin-typescript": "^9.0.2",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.throttle": "^4.1.7",
-    "@types/react": "^18.0.8",
-    "@types/react-dom": "^18.0.3",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
     "@types/react-modal": "^3.13.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "rollup": "^2.72.0",
-    "rollup-plugin-dts": "^4.2.1",
+    "rollup": "^3.2.5",
+    "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.53.0",
-    "tslib": "^2.4.0",
-    "typescript": "^4.6.4"
+    "sass": "^1.56.0",
+    "tslib": "^2.4.1",
+    "typescript": "^4.8.4"
   },
   "peerDependencies": {
     "react": "^18.1.0",
@@ -47,11 +47,14 @@
     "@microsoft/signalr": "^6.0.3",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.1",
-    "emoji-toolkit": "^6.6.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "pdfjs-dist": "^2.15.349",
+    "pdfjs-dist": "^2.16.105",
     "react-modal": "^3.14.4",
     "react-query": "^3.34.16"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
   }
 }

package/{rollup.config.js → rollup.config.mjs}

@@ -2,10 +2,17 @@ import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
-import { terser } from "rollup-plugin-terser";
+import terser from "@rollup/plugin-terser";
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
-const packageJson = require("./package.json");
+//import packageJson from `./package.json` assert { type: `json` };
+
+//const packageJson = require("./package.json");
+const { default: packageJson } = await import("./package.json", {
+    assert: {
+      type: "json",
+    },
+  });
 
 export default [
     {
@@ -34,7 +41,7 @@ export default [
         external: ["react", "react-dom"]
     },
     {
-        input: "dist/esm/types/index.d.ts",
+        input: "dist/esm/index.d.ts",
         output: [{ file: "dist/index.d.ts", format: "esm" }],
         plugins: [dts()],
     },

package/src/client/WeavyClient.ts

@@ -83,27 +83,22 @@ export default class WeavyClient {
         return response;
     }
 
-    async getToken(refresh: boolean) {
-        console.log("Refresh, ", refresh)
-        if (!this.token || refresh) {
-            console.log("Getting new token...")
-            this.token = await this.tokenFactory(true);
-            //return await this.tokenFactory(refresh);
-        }
-        //this.tokenPromise = null;
-        console.log("Resolve new token...")
+    async getToken(refresh: boolean) {        
+        if (!this.token || refresh) {        
+            this.token = await this.tokenFactory(true);            
+        }        
         return this.token;
     }
 
     async tokenFactoryInternal(refresh: boolean = false, fromSR: boolean = false): Promise<string> {
-        //console.log("Get token with refresh: ", refresh, fromSR)
+        
         if(this.token && !refresh) return this.token;
 
         if(!this.tokenPromise){
-            //console.log("No ongoing promise, create new one. Refresh: ", refresh)
+        
             this.tokenPromise = this.tokenFactory(refresh);
             let token = await this.tokenPromise;
-            //console.log("Got token: ", token)
+            
             this.tokenPromise = null;
             this.token = token;
             return this.token;
@@ -118,11 +113,11 @@ export default class WeavyClient {
 
         try {
             var name = group ? group + ":" + event : event;
-            await this.connection.invoke("AddToGroup", name);
+            await this.connection.invoke("Subscribe", name);
             this.groups.push(name);
             this.connection.on(name, callback);
         } catch (err: any) {
-            console.warn("Error in AddToGroup:", err)
+            console.warn("Error in Subscribe:", err)
         }
 
     }
@@ -139,11 +134,11 @@ export default class WeavyClient {
             try {
                 // if no more groups, remove from server
                 if (!this.groups.find(e => e === name)) {
-                    await this.connection.invoke("RemoveFromGroup", name);
+                    await this.connection.invoke("Unsubscribe", name);
                 }
 
             } catch (err: any) {
-                console.warn("Error in RemoveFromGroup:", err)
+                console.warn("Error in Unsubscribe:", err)
             }
         }
 
@@ -169,7 +164,7 @@ export default class WeavyClient {
         if (name === this.EVENT_RECONNECTED + this.EVENT_NAMESPACE) {
             // re-add to signalr groups after reconnect
             for (var i = 0; i < this.groups.length; i++) {
-                this.connection.invoke("AddToGroup", this.groups[i]);
+                this.connection.invoke("Subscribe", this.groups[i]);
             }
         }
     }

package/src/components/Attachment.tsx

@@ -18,12 +18,12 @@ const Attachment = ({ previewFormat, url, previewUrl, mediaType, name, kind, siz
     let fileSize = size > 0 ? fileSizeAsString(size) : null;
     let { icon, color } = getIcon(name, mediaType)
     return (
-        <a href={previewUrl || url} className="wy-attachment" target={"_blank"} title={name} onClick={onClick ? (e) => onClick(e) : undefined}>
-            <div className="wy-attachment-icon" title={kind}><Icon.UI name={icon} color={color} size={2} /></div>
-            <div className="wy-attachment-content">
-                <div className="wy-attachment-title">{name}</div>
+        <a href={previewUrl || url} className="wy-item wy-item-hover wy-item-lg wy-attachment" target={"_blank"} title={name} onClick={onClick ? (e) => onClick(e) : undefined}>
+            <Icon.UI name={icon} color={color} size={2} />
+            <div className="wy-item-body wy-attachment-content">
+                <div className="wy-item-title wy-attachment-title">{name}</div>
                 {fileSize &&
-                    <div className="wy-attachment-meta" title={fileSize}>{fileSize}</div>
+                    <div className="wy-item-text wy-attachment-meta" title={fileSize}>{fileSize}</div>
                 }
             </div>
         </a>

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 = ({ uid }: ChatProps) => {
+const Chat = ({ uid, className }: ChatProps) => {
     const { client } = useContext(WeavyContext);
     const [selectedId, setSelectedId] = useState<number | null>(null)
 
@@ -36,8 +37,8 @@ const Chat = ({ uid }: 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 &&
@@ -54,8 +55,8 @@ const Chat = ({ uid }: ChatProps) => {
                 <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

@@ -27,8 +27,10 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
     const [modalAddOpen, setModalAddOpen] = 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 && 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>
                                             )
                                         })}

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>
         </>
     )