@weavy/uikit-react 11.0.0 → 11.2.0

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

@@ -1,5 +1,5 @@
 export default class WeavyClient {
-    uri: string;
+    url: string;
     tokenFactory: () => string | Promise<string>;
     connection: import("@microsoft/signalr").HubConnection;
     groups: string[];

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

@@ -2,7 +2,6 @@ import React from "react";
 export declare const MessengerContext: React.Context<MessengerContextProps>;
 declare type Props = {
     children: React.ReactNode;
-    options?: MessengerContextOptions;
 };
-declare const MessengerProvider: ({ children, options }: Props) => JSX.Element;
+declare const MessengerProvider: ({ children }: Props) => JSX.Element;
 export default MessengerProvider;

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

@@ -1 +1,2 @@
-export default function useUser(client: any): import("react-query").UseQueryResult<UserType, unknown>;
+import WeavyClient from "../client/WeavyClient";
+export default function useUser(client: WeavyClient): import("react-query").UseQueryResult<UserType, unknown>;

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

@@ -1,3 +1,2 @@
 export interface Messenger {
-    options?: MessengerContextOptions;
 }

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

@@ -1,29 +1,33 @@
 /// <reference types="react" />
+interface WeavyClient {
+    url: string;
+    tokenFactory: (() => string | Promise<string>);
+    subscribe: Function;
+    unsubscribe: Function;
+}
 declare type WeavyClientOptions = {
-    uri: string;
+    url: string;
     tokenFactory: (() => string | Promise<string>);
 };
 declare type WeavyContextProps = {
-    client: any;
+    client: WeavyClient | null;
     options?: WeavyContextOptions;
 };
 declare type WeavyContextOptions = {
     zoomAuthenticationUrl?: string;
     teamsAuthenticationUrl?: string;
     enableCloudFiles?: boolean;
+    enableScrollbarDetection?: boolean;
     filebrowserUrl?: string;
+    reactions?: string[];
 };
 declare type MessengerContextProps = {
-    options?: MessengerContextOptions;
     selectedConversationId: null | number;
     setSelectedConversationId: Function;
 };
 declare type UserContextProps = {
     user: UserType;
 };
-declare type MessengerContextOptions = {
-    reactions?: string[];
-};
 declare type PreviewContextProps = {
     openPreview: Function;
     closePreview: Function;

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

@@ -4,13 +4,13 @@
  */
 export declare function setPrefix(prefix: string): void;
 /**
- * Prefixes one or more classnames (with or without dot) using the themePrefix
+ * Prefixes one or more classnames (with or without dot or double dash) using the themePrefix
  * @param {...string} strs
  * @returns string[]
  */
 export declare function prefixes(...strs: string[]): string[];
 /**
- * Prefixes one classname (with or without dot) using the themePrefix
+ * Prefixes a classname string (containing one or multiple space-separated classnames, with or without dot or double dash) using the themePrefix
  * @param {string} str
  * @returns string
  */

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import React, { FC } from 'react';
 import { Styles } from 'react-modal';
 
 declare class WeavyClient {
-    uri: string;
+    url: string;
     tokenFactory: () => string | Promise<string>;
     connection: _microsoft_signalr.HubConnection;
     groups: string[];
@@ -31,9 +31,8 @@ declare const WeavyProvider: ({ children, client, options }: Props$2) => JSX.Ele
 declare const MessengerContext: React.Context<MessengerContextProps>;
 declare type Props$1 = {
     children: React.ReactNode;
-    options?: MessengerContextOptions;
 };
-declare const MessengerProvider: ({ children, options }: Props$1) => JSX.Element;
+declare const MessengerProvider: ({ children }: Props$1) => JSX.Element;
 
 declare const Messenger: FC<Messenger>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "11.0.0",
+  "version": "11.2.0",
   "author": "Weavy",
   "description": "React UI-kit for Weavy",
   "homepage": "https://github.com/weavy/weavy-uikit-react",

package/src/client/WeavyClient.ts

@@ -1,7 +1,7 @@
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 
 export default class WeavyClient {
-    uri;
+    url;
     tokenFactory;
     connection;
     groups: string[];
@@ -14,14 +14,14 @@ export default class WeavyClient {
     EVENT_RECONNECTED = "reconnected";
 
     constructor(options: WeavyClientOptions) {
-        this.uri = options.uri;
+        this.url = options.url;
         this.tokenFactory = options.tokenFactory
         this.groups = [];
         this.connectionEvents = [];
          
         this.connection = new HubConnectionBuilder()
             .configureLogging(LogLevel.None)
-            .withUrl(this.uri + "/hubs/rtm", {
+            .withUrl(this.url + "/hubs/rtm", {
                 accessTokenFactory: this.tokenFactory
             })
             .withAutomaticReconnect()

package/src/components/Chat.tsx

@@ -37,19 +37,16 @@ const Chat = ({ id }: ChatProps) => {
     }, [dataChat]);
 
     return (
-        <>
+        <div className={wy('messenger-conversation scroll-y')}>
             <header className={wy('appbars')}>
                 <nav className={wy('appbar')}>
-
+                    <div></div>
                     {selectedId && dataConversation &&
-
-                        <>
-                            <div>
-                                <Typing id={selectedId} context="conversation">
-                                    {dataConversation.display_name}
-                                </Typing>
-                            </div>
-                        </>
+                        <div className="wy-appbar-text">
+                            <Typing id={selectedId} context="conversation">
+                                {dataConversation.display_name}
+                            </Typing>
+                        </div>
                     }
                 </nav>
             </header>
@@ -61,7 +58,7 @@ const Chat = ({ id }: ChatProps) => {
             {selectedId && dataMembers &&
                 <Messages id={selectedId} members={dataMembers} />
             }
-        </>
+        </div>
     )
 }
 

package/src/components/Conversation.tsx

@@ -131,7 +131,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                     {selectedConversationId && dataConversation &&
 
                         <>
-                            <div>
+                            <div className='wy-appbar-text'>
                                 <Typing id={selectedConversationId} context="conversation">
                                     {dataConversation.display_name}
                                 </Typing>
@@ -157,7 +157,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                 <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>
-                    Select a conversation to get started
+                    Create or select a conversation to get started
                 </div>
             }
             {selectedConversationId && dataMembers &&

package/src/components/ConversationListItem.tsx

@@ -40,10 +40,10 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
     }, [item.id])
 
     useEffect(() => {
-        client.subscribe(`a${item.id}`, "app-updated", handleAppUpdated);
+        client?.subscribe(`a${item.id}`, "app-updated", handleAppUpdated);
 
         return () => {
-            client.unsubscribe(`a${item.id}`, "app-updated", handleAppUpdated);
+            client?.unsubscribe(`a${item.id}`, "app-updated", handleAppUpdated);
         }
     }, [item.id])
 

package/src/components/FileBrowser.tsx

@@ -61,7 +61,7 @@ const FileBrowser = ({ onFileAdded }: Props) => {
             $filebrowserFrame.name = "weavy-filebrowser";
             $filebrowserFrame.src = filebrowserSrc;
             $filebrowserFrame.className = wy('filebrowser-frame');
-            $filebrowserFrame.style.cssText = "position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(1,1,1,.4); z-index: 10000; display:none"
+            $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);
 

package/src/components/Messages.tsx

@@ -64,7 +64,7 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
                     })
                 }
             })
-            console.log("rs scroller", reverseScroller.root);
+            
         } else {
             reverseScroller?.disconnect();
             reverseScroller = null;
@@ -94,30 +94,31 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
             // 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-inserted", handleRealtimeMessage);
+            client?.subscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);            
+            client?.subscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
+            client?.subscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
         }
 
         return () => {
             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.splice(0, 1),
-                        pageParams: data?.pageParams.splice(0, 1),
-                    }));
+                        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-inserted", handleRealtimeMessage);
+                client?.unsubscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);                
+                client?.unsubscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
+                client?.unsubscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
             }
         }
     }, [id]);

package/src/components/Messenger.tsx

@@ -6,7 +6,7 @@ import { Messenger } from '../types/Messenger';
 import { WeavyContext } from '../contexts/WeavyContext';
 import { prefix as wy } from "../utils/styles";
 
-const Messenger: FC<Messenger> = ({ options }) => {
+const Messenger: FC<Messenger> = () => {
 
     const { client } = useContext(WeavyContext);
 
@@ -15,14 +15,14 @@ const Messenger: FC<Messenger> = ({ options }) => {
     }
     
     return (
-        <MessengerProvider options={options}>
+        <MessengerProvider>
             <div className={wy('messenger-provider')}>
 
-                <div className={wy('messenger-sidebar')}>
+                <div className={wy('messenger-sidebar scroll-y')}>
                     <ConversationList />
                 </div>
 
-                <div  className={wy('messenger-conversation')}>
+                <div className={wy('messenger-conversation scroll-y')}>
                     <Conversation id={null} />
                 </div>
             </div>

package/src/components/Reactions.tsx

@@ -8,6 +8,7 @@ import classNames from "classnames";
 import { prefix as wy } from "../utils/styles";
 import useReactions from "../hooks/useReactions";
 import useMutateDeleteReaction from "../hooks/useMutateDeleteReaction";
+import { WeavyContext } from "../contexts/WeavyContext";
 
 type ReactionMenuProps = {
     id: number,
@@ -25,7 +26,7 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
     const reactionMutation = useMutateReaction();
     const reactionDeleteMutation = useMutateDeleteReaction();
     const [visible, setVisible] = useState<boolean>(false);
-    const { options } = useContext(MessengerContext);
+    const { options } = useContext(WeavyContext);
     const [reactedEmoji, setReactedEmoji] = useState<string>('');
 
     const emojis = options?.reactions;

package/src/components/SearchUsers.tsx

@@ -60,8 +60,8 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
                                     <td className={wy('search-result-table-icon')}>
                                         <Avatar src={user.avatar_url} size={24} id={user.id} presence={user.presence} name={user.display_name} />
                                     </td>
-                                    <td>{user.display_name}</td>
-                                    <td className={wy('search-result-table-icon')}><input type="checkbox" checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></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>
                                 </tr>
                             )
                         })}

package/src/components/Typing.tsx

@@ -26,12 +26,12 @@ const Typing = ({ children, id, context }: Props) => {
     useEffect(() => {
         setActiveTypers([]);
         
-        client.subscribe(`a${id}`, "typing", handleTyping);        
-        client.subscribe(`a${id}`, "message-inserted", handleStopTyping);
+        client?.subscribe(`a${id}`, "typing", handleTyping);        
+        client?.subscribe(`a${id}`, "message-inserted", handleStopTyping);
 
         return () => {
-            client.unsubscribe(`a${id}`, "typing", handleTyping);            
-            client.unsubscribe(`a${id}`, "message-inserted", handleStopTyping);
+            client?.unsubscribe(`a${id}`, "typing", handleTyping);            
+            client?.unsubscribe(`a${id}`, "message-inserted", handleStopTyping);
         }
     }, [id])
 

package/src/contexts/MessengerContext.tsx

@@ -3,22 +3,14 @@ import usePresence from "../hooks/usePresence";
 
 export const MessengerContext = createContext<MessengerContextProps>({
     selectedConversationId: null,
-    setSelectedConversationId: (id: any) => { },
-    options: {}
+    setSelectedConversationId: (id: any) => { }    
 });
 
 type Props = {
-    children: React.ReactNode,
-    options?: MessengerContextOptions
+    children: React.ReactNode    
 }
 
-const MessengerProvider = ({ children, options }: Props) => {
-
-    let defaultOptions: MessengerContextOptions = {
-        reactions: ['😍', '😎', '😉', '😜', '👍']
-    };
-
-    let opts = { ...defaultOptions, ...options };
+const MessengerProvider = ({ children }: Props) => {
 
     const [selectedConversationId, setSelectedConversation] = useState(null);
 
@@ -31,7 +23,7 @@ const MessengerProvider = ({ children, options }: Props) => {
 
     return (
         <>
-            <MessengerContext.Provider value={{ options: opts, selectedConversationId, setSelectedConversationId }}>
+            <MessengerContext.Provider value={{ selectedConversationId, setSelectedConversationId }}>
                 {children}
             </MessengerContext.Provider>
         </>

package/src/contexts/WeavyContext.tsx

@@ -8,6 +8,7 @@ import timezone from 'dayjs/plugin/timezone';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import PreviewProvider from "./PreviewContext";
 import WeavyClient from "../client/WeavyClient";
+import detectScrollbars from '../utils/scrollbarDetection';
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -40,11 +41,17 @@ const WeavyProvider = ({ children, client, options }: Props) => {
     zoomAuthenticationUrl: undefined,
     teamsAuthenticationUrl: undefined,
     enableCloudFiles: true,
-    filebrowserUrl: "https://filebrowser.weavycloud.com/index10.html"
+    enableScrollbarDetection: true,
+    filebrowserUrl: "https://filebrowser.weavycloud.com/index10.html",
+    reactions: ['😍', '😎', '😉', '😜', '👍']
   };
 
   let opts = { ...defaultOptions, ...options }
 
+  if (opts.enableScrollbarDetection) {
+    detectScrollbars();
+  }
+
   return (
     <>
       {client &&

package/src/hooks/useBadge.ts

@@ -12,7 +12,7 @@ export default function useBadge() {
 
     const getBadge = async () => {
 
-        const response = await fetch(client.uri + "/api/conversations/badge", {
+        const response = await fetch(client.url + "/api/conversations/badge", {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useChat.ts

@@ -12,7 +12,7 @@ export default function useChat(id: string, options: any) {
 
     const getConversation = async () => {
 
-        const response = await fetch(client.uri + "/api/apps/idf/" + id, {
+        const response = await fetch(client.url + "/api/apps/idf/" + id, {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useConversation.ts

@@ -13,7 +13,7 @@ export default function useConversation(id: number | null, options: any) {
 
     const getConversation = async () => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id, {
+        const response = await fetch(client.url + "/api/conversations/" + id, {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useConversations.ts

@@ -12,7 +12,7 @@ export default function useConversations() {
 
     const getConversations = async () => {
 
-        const response = await fetch(client.uri + "/api/conversations?contextual=false", {
+        const response = await fetch(client.url + "/api/conversations?contextual=false", {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useFileUploader.ts

@@ -7,13 +7,17 @@ export default function useFileUploader(callback: Function) {
 
     const { client } = useContext(WeavyContext);
 
+    if (!client) {
+        throw new Error('useFileUploader must be used within an WeavyProvider');
+    }
+
     return useMutation(
         async ({ request }: any) => {
 
             const formData = new FormData();
             formData.append('blob', request.file);
 
-            var response = await fetch(client.uri + "/api/blobs", {
+            var response = await fetch(client.url + "/api/blobs", {
                 method: 'POST',
                 body: formData,
                 headers: {

package/src/hooks/useMembers.ts

@@ -12,7 +12,7 @@ export default function useMembers(id: number | null, options: any) {
 
     const getConversationMembers = async () => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id + "/members", {
+        const response = await fetch(client.url + "/api/apps/" + id + "/members", {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useMessages.ts

@@ -14,7 +14,7 @@ export default function useMessages(id: number | null, options: any) {
     const getMessages = async (opt: any) => {
         let skip = opt.pageParam || 0;
 
-        const response = await fetch(client.uri + "/api/apps/" + id + "/messages?orderby=createdat+desc&skip=" + skip + "&top=" + PAGE_SIZE, {
+        const response = await fetch(client.url + "/api/apps/" + id + "/messages?orderby=createdat+desc&skip=" + skip + "&top=" + PAGE_SIZE, {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useMutateChat.ts

@@ -21,7 +21,7 @@ export default function useMutateChat() {
     // create new conversation
     const mutateChat = async ({ identifier, members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/", {
+        const response = await fetch(client.url + "/api/apps/", {
             method: "POST",
             body: JSON.stringify({ 
                 identifier: identifier,

package/src/hooks/useMutateConversation.ts

@@ -20,7 +20,7 @@ export default function useMutateConversation() {
     // create new conversation
     const mutateConversation = async ({ members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/", {
+        const response = await fetch(client.url + "/api/conversations/", {
             method: "POST",
             body: JSON.stringify({ members: members }),
             headers: {

package/src/hooks/useMutateConversationName.ts

@@ -20,7 +20,7 @@ export default function useMutateConversationName() {
 
     const mutateConversationName = async ({ id, name }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id, {
+        const response = await fetch(client.url + "/api/apps/" + id, {
             method: "PATCH",
             body: JSON.stringify({ name: name }),
             headers: {

package/src/hooks/useMutateDeleteReaction.ts

@@ -22,7 +22,7 @@ export default function useMutateDeleteReaction() {
     const mutateDeleteReaction = async ({ id, reaction }: MutateProps) => {
 
         // remove the existing reaction
-        const response = await fetch(client.uri + "/api/messages/" + id + "/reactions/", {
+        const response = await fetch(client.url + "/api/messages/" + id + "/reactions/", {
             method: "DELETE",
             headers: {
                 "content-type": "application/json",

package/src/hooks/useMutateExternalBlobs.ts

@@ -19,7 +19,7 @@ export default function useMutateExternalBlobs() {
 
     const mutateExternalBlobs = async ({ blobs }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/blobs/external", {
+        const response = await fetch(client.url + "/api/blobs/external", {
             method: "POST",
             body: JSON.stringify(blobs),
             headers: {

package/src/hooks/useMutateMeeting.ts

@@ -19,7 +19,7 @@ export default function useMutateMeeting() {
 
     const mutateMeeting = async ({ provider }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/meetings", {
+        const response = await fetch(client.url + "/api/meetings", {
             method: "POST",
             body: JSON.stringify({provider: provider}),
             headers: {

package/src/hooks/useMutateMembers.ts

@@ -21,7 +21,7 @@ export default function useMutateMembers() {
     // add members to conversation
     const mutateMembers = async ({ id, members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id + "/members/", {
+        const response = await fetch(client.url + "/api/apps/" + id + "/members/", {
             method: "POST",
             body: JSON.stringify(members),
             headers: {

package/src/hooks/useMutateMessage.ts

@@ -22,7 +22,7 @@ export default function useMutateMessage() {
     }
 
     const mutateMessage = async ({ id, text, userId, attachments, meetings }: MutateProps) => {
-        const response = await fetch(client.uri + "/api/apps/" + id + "/messages", {
+        const response = await fetch(client.url + "/api/apps/" + id + "/messages", {
             method: "POST",
             body: JSON.stringify({
                 text: text,
@@ -86,6 +86,7 @@ export default function useMutateMessage() {
                 let pageMessages = [...data, {
                     id: tempId,
                     text: variables.text,
+                    html: variables.text,
                     display_name: "",
                     temp: true,
                     parent_id: null,

package/src/hooks/useMutatePinned.ts

@@ -20,7 +20,7 @@ export default function useMutatePinned() {
 
     const mutatePinned = async ({ id, pin }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id + "/pin", {
+        const response = await fetch(client.url + "/api/conversations/" + id + "/pin", {
             method:  + !pin ? "DELETE": "PUT",
             body: "",
             headers: {

package/src/hooks/useMutateReaction.ts

@@ -22,7 +22,7 @@ export default function useMutateReaction() {
     const mutateReaction = async ({id, reaction }: MutateProps) => {
 
       
-        const response = await fetch(client.uri + "/api/messages/" + id + "/reactions/", {
+        const response = await fetch(client.url + "/api/messages/" + id + "/reactions/", {
             method: "POST",
             body: JSON.stringify({ content: reaction}),
             headers: {

package/src/hooks/useMutateRead.ts

@@ -20,7 +20,7 @@ export default function useMutateRead() {
 
     const mutateRead = async ({ id, read }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id + "/read", {
+        const response = await fetch(client.url + "/api/conversations/" + id + "/read", {
             method:  !read ? "DELETE": "PUT",
             body: "",
             headers: {

package/src/hooks/useMutateRemoveMembers.ts

@@ -22,7 +22,7 @@ export default function useMutateRemoveMembers() {
 
     const mutateRemove = async ({ id, members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id + "/members/" + members.join(","), {
+        const response = await fetch(client.url + "/api/apps/" + id + "/members/" + members.join(","), {
             method: "DELETE",        
             body: JSON.stringify(members),    
             headers: {