@weavy/uikit-react 12.1.0 → 13.0.0

package/dist/esm/types/client/WeavyClient.d.ts

@@ -1,16 +1,23 @@
 export default class WeavyClient {
     url: string;
-    tokenFactory: () => string | Promise<string>;
     connection: import("@microsoft/signalr").HubConnection;
+    tokenFactory: (refresh: boolean) => Promise<string>;
     groups: string[];
     connectionEvents: any[];
     isConnectionStarted: any;
+    token: string;
+    tokenPromise: Promise<string> | null;
     EVENT_NAMESPACE: string;
     EVENT_CLOSE: string;
     EVENT_RECONNECTING: string;
     EVENT_RECONNECTED: string;
     constructor(options: WeavyClientOptions);
+    get(url: string, retry?: boolean): Promise<Response>;
+    post(url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType?: string, retry?: boolean): Promise<Response>;
+    getToken(refresh: boolean): Promise<string>;
+    tokenFactoryInternal(refresh?: boolean, fromSR?: boolean): Promise<string>;
     subscribe(group: string, event: string, callback: any): Promise<void>;
     unsubscribe(group: string, event: string, callback: any): Promise<void>;
+    destroy(): void;
     triggerHandler(name: string, ...data: any): void;
 }

package/dist/esm/types/components/Attachment.d.ts

@@ -8,6 +8,7 @@ declare type Props = {
     kind: string;
     size: number;
     provider: string;
+    onClick?: (e: any) => void;
 };
-declare const Attachment: ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider }: Props) => JSX.Element;
+declare const Attachment: ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider, onClick }: Props) => JSX.Element;
 export default Attachment;

package/dist/esm/types/components/Chat.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ChatProps } from '../types/Chat';
-declare const Chat: ({ id }: ChatProps) => JSX.Element;
+declare const Chat: ({ uid }: ChatProps) => JSX.Element;
 export default Chat;

package/dist/esm/types/components/PdfViewer.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 declare type Props = {
     src: string;
+    pdfCMapsUrl: string;
+    pdfWorkerUrl: string;
 };
-declare const PdfViewer: ({ src }: Props) => JSX.Element;
+declare const PdfViewer: ({ src, pdfCMapsUrl, pdfWorkerUrl }: Props) => JSX.Element;
 export default PdfViewer;

package/dist/esm/types/components/Preview.d.ts

@@ -7,20 +7,16 @@ declare type ImageProps = {
 export declare const PreviewImage: ({ src, width, height }: ImageProps) => JSX.Element;
 declare type DocumentProps = {
     src: string;
+    client: any;
 };
-export declare const PreviewDocument: ({ src }: DocumentProps) => JSX.Element;
-declare type VideoProps = {
+export declare const PreviewDocument: ({ src, client }: DocumentProps) => JSX.Element;
+declare type MediaProps = {
+    format: string;
     src: string;
     name: string;
     mediaType?: string;
 };
-export declare const PreviewVideo: ({ src, name, mediaType }: VideoProps) => JSX.Element;
-declare type AudioProps = {
-    src: string;
-    name: string;
-    mediaType?: string;
-};
-export declare const PreviewAudio: ({ src, name, mediaType }: AudioProps) => JSX.Element;
+export declare const PreviewMedia: ({ format, src, name, mediaType }: MediaProps) => JSX.Element;
 declare type TextProps = {
     src: string;
     html?: boolean;
@@ -45,7 +41,9 @@ declare type IconProps = {
 };
 export declare const PreviewIcon: ({ children, src, icon, name, provider, download, className }: IconProps) => JSX.Element;
 declare type PreviewProps = {
+    client: any;
     src: string;
+    link?: string;
     format: PreviewFormatType;
     name: string;
     icon: string;
@@ -54,5 +52,5 @@ declare type PreviewProps = {
     mediaType?: string;
     provider?: string;
 };
-export declare const Preview: ({ src, format, name, icon, width, height, mediaType, provider }: PreviewProps) => JSX.Element;
+export declare const Preview: ({ client, src, link, format, name, icon, width, height, mediaType, provider }: PreviewProps) => JSX.Element;
 export default Preview;

package/dist/esm/types/contexts/PreviewContext.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 export declare const PreviewContext: React.Context<PreviewContextProps>;
 declare type Props = {
+    client: any;
     children: React.ReactNode;
 };
-declare const PreviewProvider: ({ children }: Props) => JSX.Element;
+declare const PreviewProvider: ({ client, children }: Props) => JSX.Element;
 export default PreviewProvider;

package/dist/esm/types/contexts/WeavyContext.d.ts

@@ -1,10 +1,9 @@
 import React from "react";
-import WeavyClient from "../client/WeavyClient";
 export declare const WeavyContext: React.Context<WeavyContextProps>;
-declare type Props = {
+declare type WeavyProviderProperties = {
     children: React.ReactNode;
     client: WeavyClient;
     options?: WeavyContextOptions;
 };
-declare const WeavyProvider: ({ children, client, options }: Props) => JSX.Element;
+declare const WeavyProvider: ({ children, client, options }: WeavyProviderProperties) => JSX.Element;
 export default WeavyProvider;

package/dist/esm/types/types/Chat.d.ts

@@ -1,3 +1,3 @@
 export interface ChatProps {
-    id: string;
+    uid: string;
 }

package/dist/esm/types/types/types.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
 interface WeavyClient {
     url: string;
-    tokenFactory: (() => string | Promise<string>);
+    tokenFactoryInternal: () => Promise<string>;
     subscribe: Function;
     unsubscribe: Function;
+    destroy: Function;
+    get: (url: string, retry?: boolean) => Promise<Response>;
+    post: (url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType?: string, retry?: boolean) => Promise<Response>;
 }
 declare type WeavyClientOptions = {
     url: string;
-    tokenFactory: (() => string | Promise<string>);
+    tokenFactory: (refresh: boolean) => Promise<string>;
 };
 declare type WeavyContextProps = {
     client: WeavyClient | null;
@@ -19,6 +22,8 @@ declare type WeavyContextOptions = {
     enableCloudFiles?: boolean;
     enableScrollbarDetection?: boolean;
     filebrowserUrl?: string;
+    pdfWorkerUrl?: string;
+    pdfCMapsUrl?: string;
     reactions?: string[];
 };
 declare type MessengerContextProps = {
@@ -114,11 +119,17 @@ declare type AttachmentType = {
     size: number;
     provider: string;
     download_url: string;
-    preview_url: string;
-    thumbnail_url: string;
+    embed_url: string;
     external_url: string;
+    thumbnail_url: string;
+    preview_format: PreviewFormatType;
+    application_url: string;
+    preview_url: string;
+    created_at: string;
+    created_by?: UserType;
+    createdById?: number;
 };
-declare type PreviewFormatType = "text" | "code" | "markup" | "image" | "video" | "audio" | "document" | "embed" | "link" | "download" | "none";
+declare type PreviewFormatType = "audio" | "code" | "embed" | "html" | "image" | "pdf" | "text" | "video" | "none";
 declare type ReactionType = {
     id: number;
     parent: MessageType;

package/dist/esm/types/ui/Spinner.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type SpinnerProps = {
+    size?: number;
+    spin?: boolean;
+};
+declare const UISpinner: {
+    UI: ({ spin, size }: SpinnerProps) => JSX.Element;
+};
+export default UISpinner;

package/dist/esm/types/utils/fileUtilities.d.ts

@@ -6,15 +6,12 @@ export declare function isWebImage(path: string): boolean;
 export declare function isBitmap(path: string): boolean;
 export declare function isMetaFile(path: string): boolean;
 export declare function isVideo(ext: string): boolean;
+export declare function isMarkdown(ext: string): boolean;
 export declare function isMarkup(ext: string): boolean;
 export declare function isCode(ext: string): boolean;
 export declare function isText(ext: string): boolean;
 export declare function isOfficeDocument(path: string): boolean;
-export declare function canResize(path: string): boolean;
-export declare function canConvertToImage(filename: string): boolean;
-export declare function canConvertToPdf(filename: string): boolean;
 export declare function getIcon(name: string, mediaType?: string): {
     icon: string;
     color?: string;
 };
-export declare function getPreviewFormat(filename: string): PreviewFormatType;

package/dist/index.d.ts

@@ -3,30 +3,37 @@ import * as _microsoft_signalr from '@microsoft/signalr';
 import React, { FC } from 'react';
 import { Styles } from 'react-modal';
 
-declare class WeavyClient {
+declare class WeavyClient$1 {
     url: string;
-    tokenFactory: () => string | Promise<string>;
     connection: _microsoft_signalr.HubConnection;
+    tokenFactory: (refresh: boolean) => Promise<string>;
     groups: string[];
     connectionEvents: any[];
     isConnectionStarted: any;
+    token: string;
+    tokenPromise: Promise<string> | null;
     EVENT_NAMESPACE: string;
     EVENT_CLOSE: string;
     EVENT_RECONNECTING: string;
     EVENT_RECONNECTED: string;
     constructor(options: WeavyClientOptions);
+    get(url: string, retry?: boolean): Promise<Response>;
+    post(url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType?: string, retry?: boolean): Promise<Response>;
+    getToken(refresh: boolean): Promise<string>;
+    tokenFactoryInternal(refresh?: boolean, fromSR?: boolean): Promise<string>;
     subscribe(group: string, event: string, callback: any): Promise<void>;
     unsubscribe(group: string, event: string, callback: any): Promise<void>;
+    destroy(): void;
     triggerHandler(name: string, ...data: any): void;
 }
 
 declare const WeavyContext: React.Context<WeavyContextProps>;
-declare type Props$2 = {
+declare type WeavyProviderProperties = {
     children: React.ReactNode;
     client: WeavyClient;
     options?: WeavyContextOptions;
 };
-declare const WeavyProvider: ({ children, client, options }: Props$2) => JSX.Element;
+declare const WeavyProvider: ({ children, client, options }: WeavyProviderProperties) => JSX.Element;
 
 declare const MessengerContext: React.Context<MessengerContextProps>;
 declare type Props$1 = {
@@ -48,10 +55,10 @@ interface ConversationProps {
 declare const _default: React.MemoExoticComponent<({ id, showBackButton }: ConversationProps) => JSX.Element>;
 
 interface ChatProps {
-    id: string;
+    uid: string;
 }
 
-declare const Chat: ({ id }: ChatProps) => JSX.Element;
+declare const Chat: ({ uid }: ChatProps) => JSX.Element;
 
 declare const UIButton: {
     UI: any;
@@ -94,4 +101,4 @@ declare const UIOverlay: {
     UI: ({ children, className, isOpen, style }: OverlayProps) => JSX.Element;
 };
 
-export { UIButton as Button, Chat, _default as Conversation, ConversationBadge, ConversationList, UIDropdown as Dropdown, UIIcon as Icon, Messenger, MessengerContext, MessengerProvider, UIOverlay as Overlay, WeavyClient, WeavyContext, WeavyProvider };
+export { UIButton as Button, Chat, _default as Conversation, ConversationBadge, ConversationList, UIDropdown as Dropdown, UIIcon as Icon, Messenger, MessengerContext, MessengerProvider, UIOverlay as Overlay, WeavyClient$1 as WeavyClient, WeavyContext, WeavyProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "12.1.0",
+  "version": "13.0.0",
   "author": "Weavy",
   "description": "React UI-kit for Weavy",
   "homepage": "https://github.com/weavy/weavy-uikit-react",
@@ -50,7 +50,7 @@
     "emoji-toolkit": "^6.6.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "pdfjs-dist": "^2.14.305",
+    "pdfjs-dist": "^2.15.349",
     "react-modal": "^3.14.4",
     "react-query": "^3.34.16"
   }

package/rollup.config.js

@@ -24,7 +24,9 @@ export default [
         ],
         plugins: [
             peerDepsExternal(),
-            resolve(),
+            resolve({ 
+                browser: true 
+            }),
             commonjs(),
             typescript({ tsconfig: "./tsconfig.json" }),
             terser(),

package/src/client/WeavyClient.ts

@@ -2,77 +2,158 @@ import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 
 export default class WeavyClient {
     url;
-    tokenFactory;
     connection;
-    groups: string[];
-    connectionEvents: any[];
+    tokenFactory;
+    groups: string[] = [];
+    connectionEvents: any[] = [];
     isConnectionStarted: any;
-
+    token: string = "";
+    tokenPromise: Promise<string> | null;
     EVENT_NAMESPACE = ".connection";
     EVENT_CLOSE = "close";
     EVENT_RECONNECTING = "reconnecting";
     EVENT_RECONNECTED = "reconnected";
 
+
     constructor(options: WeavyClientOptions) {
         this.url = options.url;
-        this.tokenFactory = options.tokenFactory
-        this.groups = [];
-        this.connectionEvents = [];
-         
+        this.tokenFactory = options.tokenFactory;
+        this.tokenPromise = null;        
         this.connection = new HubConnectionBuilder()
             .configureLogging(LogLevel.None)
             .withUrl(this.url + "/hubs/rtm", {
-                accessTokenFactory: this.tokenFactory
+                accessTokenFactory: () => { return this.tokenFactoryInternal.call(this, true, true) }
             })
             .withAutomaticReconnect()
             .build();
-        
-            this.isConnectionStarted = this.connection.start();           
+
+        this.isConnectionStarted = this.connection.start();
 
         this.connection.onclose(error => this.triggerHandler(this.EVENT_CLOSE, error));
         this.connection.onreconnecting(error => this.triggerHandler(this.EVENT_RECONNECTING, error));
         this.connection.onreconnected(connectionId => this.triggerHandler(this.EVENT_RECONNECTED, connectionId));
-        
+
+    }
+
+    async get(url: string, retry: boolean = true): Promise<Response> {
+        //const token = await this.tokenFactoryInternal();
+        //console.log("GET:", url, " - t:", token);
+        const response = await fetch(this.url + url, {
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await this.tokenFactoryInternal()
+            }
+        });
+
+        if (!response.ok) {            
+            if ((response.status === 401 || response.status === 403) && retry) {
+                await this.tokenFactoryInternal(true);                
+                return await this.get(url, false);
+            }
+
+            console.error(`Error calling endpoint ${url}`, response)
+        }
+
+        return response;
     }
 
+    async post(url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType: string = "application/json", retry: boolean = true): Promise<Response> {
+        let headers: HeadersInit = {         
+            "Authorization": "Bearer " + await this.tokenFactoryInternal()
+        };
+
+        if(contentType !== ""){
+            headers["content-type"] = contentType
+        }
+        const response = await fetch(this.url + url, {
+            method: method,
+            body: body,
+            headers: headers
+        });
+
+        if (!response.ok) {
+            if ((response.status === 401 || response.status === 403) && retry) {
+                await this.tokenFactoryInternal(true);                
+                return await this.post(url, method, body, contentType, false);
+            }
 
-    async subscribe(group: string, event: string, callback: any) {        
+            console.error(`Error calling endpoint ${url}`, response)
+        }
+
+        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...")
+        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;
+        } else{
+            //console.log("Already a promise in action, wait for it to resolve...")
+            return this.tokenPromise;
+        }
+    }
+
+    async subscribe(group: string, event: string, callback: any) {
         await this.isConnectionStarted;
-        
+
         try {
             var name = group ? group + ":" + event : event;
             await this.connection.invoke("AddToGroup", name);
             this.groups.push(name);
             this.connection.on(name, callback);
-        } catch(err: any){
+        } catch (err: any) {
             console.warn("Error in AddToGroup:", err)
         }
-        
+
     }
 
     async unsubscribe(group: string, event: string, callback: any) {
         await this.isConnectionStarted;
         var name = group ? group + ":" + event : event;
-        
+
         // get first occurence of group name and remove it                        
         const index = this.groups.findIndex(e => e === name);
-        if(index !== -1){
+        if (index !== -1) {
             this.groups = this.groups.splice(index, 1);
 
-            try {                
+            try {
                 // if no more groups, remove from server
-                if(!this.groups.find(e => e === name)){
+                if (!this.groups.find(e => e === name)) {
                     await this.connection.invoke("RemoveFromGroup", name);
                 }
-                
-            } catch(err: any){
+
+            } catch (err: any) {
                 console.warn("Error in RemoveFromGroup:", err)
             }
         }
-            
+
         this.connection.off(name, callback);
     }
- 
+
+    destroy(){
+        this.connection.stop();        
+    }
+
     triggerHandler(name: string, ...data: any) {
         name = name.endsWith(this.EVENT_NAMESPACE) ? name : name + this.EVENT_NAMESPACE;
         let event = new CustomEvent(name, { cancelable: false });

package/src/components/Attachment.tsx

@@ -10,19 +10,20 @@ type Props = {
     name: string,
     kind: string,
     size: number,
-    provider: string
+    provider: string,
+    onClick?: (e: any) => void
 }
 
-const Attachment = ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider }: Props) => {
+const Attachment = ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider, onClick }: Props) => {
     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}>
-            <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-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>
                 {fileSize &&
-                    <div className={'wy-attachment-meta'} title={fileSize}>{fileSize}</div>
+                    <div className="wy-attachment-meta" title={fileSize}>{fileSize}</div>
                 }
             </div>
         </a>

package/src/components/Chat.tsx

@@ -7,7 +7,7 @@ import useMembers from '../hooks/useMembers';
 import Typing from './Typing';
 import useConversation from '../hooks/useConversation';
 
-const Chat = ({ id }: ChatProps) => {
+const Chat = ({ uid }: ChatProps) => {
     const { client } = useContext(WeavyContext);
     const [selectedId, setSelectedId] = useState<number | null>(null)
 
@@ -15,7 +15,7 @@ const Chat = ({ id }: ChatProps) => {
         throw new Error('Weavy Chat component must be used within an WeavyProvider');
     }
 
-    const { isLoading: isLoadingChat, data: dataChat } = useChat(id, {});
+    const { isLoading: isLoadingChat, data: dataChat } = useChat(uid, {});
 
     const { isLoading: isLoadingMembers, data: dataMembers } = useMembers(selectedId, {
         // The query will not execute until the activeConversation exists
@@ -51,7 +51,7 @@ 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 &&

package/src/components/Conversation.tsx

@@ -25,7 +25,7 @@ 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 ChatRoom = "edb400ac-839b-45a7-b2a8-6a01820d1c44";
@@ -186,7 +186,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                             <div className="wy-pane-group">
                                 <table className="wy-search-result-table">
                                     <tbody>
-                                        {dataMembers?.data.map((m: MemberType) => {
+                                        {dataMembers && dataMembers.data && dataMembers.data.map((m: MemberType) => {
                                             return (
                                                 <tr key={m.id} className="wy-search-result-table-checkbox">
                                                     <td className="wy-search-result-table-icon"><Avatar src={m.avatar_url} name={m.display_name} id={m.id} size={24} presence={m.presence} /></td>
@@ -203,7 +203,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                 </div>
             </Overlay.UI>
 
-           
+
         </>
     )
 }

package/src/components/Message.tsx

@@ -58,7 +58,7 @@ const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_a
 
                                     {files && !!files.length && <div className="wy-attachments">
                                         {files.map((a: AttachmentType) =>
-                                            <Attachment key={a.id} name={a.name} previewFormat={a.kind} provider={a.provider} url={a.download_url} previewUrl={a.provider ? a.external_url : a.preview_url} mediaType={a.media_type} kind={a.kind} size={a.size} />
+                                            <Attachment key={a.id} onClick={(e) => handlePreviewClick(e, a.id)} name={a.name} previewFormat={a.kind} provider={a.provider} url={a.download_url} previewUrl={a.provider ? a.external_url : a.preview_url} mediaType={a.media_type} kind={a.kind} size={a.size} />
                                         )}
                                     </div>}
                                 </>

package/src/components/Messages.tsx

@@ -234,7 +234,7 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
                                 parentId={id}
                                 reactions={item.reactions}
                                 //reactions_count={item.reactions_count}
-                                seenBy={members.data.length > 0 ? members.data.filter((member) => {
+                                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;