@connectycube/chat-widget 0.11.0 → 0.12.0

package/README.md

@@ -12,6 +12,18 @@ The ConnectyCube Web Chat Widget for React is designed to simplify the process o
 - **Responsive Design:** Works seamlessly on both desktop and mobile devices.
 - **Modular and Extensible:** Adapt the widget to your unique requirements.
 
+## Demo
+
+<https://connectycube-chat-widget.onrender.com>
+
+Split-view chat widget:
+
+<kbd><img alt="ConnectyCube chat widget, split view image demo" src="https://developers.connectycube.com/images/chat_widget/chat-widget-1.png" width="400" /></kbd>
+
+Single-view chat widget:
+
+<kbd><img alt="ConnectyCube chat widget, single view image demo" src="https://developers.connectycube.com/images/chat_widget/chat-widget-2.png" width="400" /></kbd>
+
 ## Installation
 
 ### React
@@ -58,11 +70,11 @@ import ConnectyCubeChatWidget from "@connectycube/chat-widget";
 ...
 
 <ConnectyCubeChatWidget
-  userName={"Samuel"}
-  userId={111}
   appId="111"
   authKey="11111111-2222-3333-4444-55555555"
   config={{ debug: { mode: 1 } }}
+  userId="112233"
+  userName="Samuel"
   showOnlineUsersTab={false}
   splitView={true}
 />
@@ -71,7 +83,7 @@ import ConnectyCubeChatWidget from "@connectycube/chat-widget";
 // userId - a User Id from your system
 ```
 
-See chat widget code samples https://github.com/ConnectyCube/connectycube-chat-widget-samples as a reference for faster integration.
+See chat widget code samples <https://github.com/ConnectyCube/connectycube-chat-widget-samples> as a reference for faster integration.
 
 #### Vanilla JS
 
@@ -95,11 +107,11 @@ Place the following script in your app:
       chatWidgetContainer.id = 'ConnectyCube_chat-widget';
       document.body.appendChild(chatWidgetContainer);
       const props = {
-        appId: 1111,
+        appId: 111,
         authKey: '11111111-2222-3333-4444-55555555',
         config: { debug: { mode: 1 } },
+        userId: '112233', // a User Id from your system
         userName: 'Samuel', // how other users will see your user name
-        userId: 111, // a User Id from your system
         showOnlineUsersTab: false,
         splitView: true,
       };
@@ -110,7 +122,7 @@ Place the following script in your app:
 </html>
 ```
 
-See chat widget code samples https://github.com/ConnectyCube/connectycube-chat-widget-samples as a reference for faster integration.
+See chat widget code samples <https://github.com/ConnectyCube/connectycube-chat-widget-samples> as a reference for faster integration.
 
 ## Props
 
@@ -119,11 +131,12 @@ See chat widget code samples https://github.com/ConnectyCube/connectycube-chat-w
 | `appId`              | `number \| string`    | The ConnectyCube Application ID                               |
 | `authKey`            | `string`              | The ConnectyCube Authentication Key                           |
 | `config`             | `object`              | _(Optional)_ Configuration options for ConnectyCube SDK       |
-| `userId`             | `string`              | A User Id from your system (at least 3 characters)            |
-| `userName`           | `string`              | User's name. This is how other users will see your user name  |
+| `userId`             | `string`              | A User Id from your system                                    |
+| `userName`           | `string`              | User name. This is how other users will see your user name    |
 | `muted`              | `boolean` (`false`)   | _(Optional)_ Do not play sound on incoming message            |
 | `splitView`          | `boolean` (`false`)   | _(Optional)_ Displays the chats in split view or single view  |
 | `showOnlineUsersTab` | `boolean` (`false`)   | _(Optional)_ Displays users tab with the list of online users |
+| `buttonTitle`        | `string` ("Chat")     | _(Optional)_ The text displayed on the chat button            |
 | `buttonStyle`        | `React.CSSProperties` | _(Optional)_ Inline styles for the button                     |
 | `portalStyle`        | `React.CSSProperties` | _(Optional)_ Inline styles for the portal                     |
 | `badgeStyle`         | `React.CSSProperties` | _(Optional)_ Inline styles for the badge                      |
@@ -131,6 +144,90 @@ See chat widget code samples https://github.com/ConnectyCube/connectycube-chat-w
 | `portalClassName`    | `string`              | _(Optional)_ CSS class or Tailwind CSS classes for the chat   |
 | `badgeClassName`     | `string`              | _(Optional)_ CSS class or Tailwind CSS classes for the badge  |
 
+## Recipes
+
+### Split view
+
+React:
+
+```js
+<ConnectyCubeChatWidget
+  ...
+  splitView={true}
+/>
+```
+
+Vanilla JS:
+
+```js
+const props = {
+  ...
+  splitView: true,
+};
+```
+
+### Single view
+
+React:
+
+```js
+<ConnectyCubeChatWidget
+  ...
+  splitView={false}
+/>
+```
+
+Vanilla JS:
+
+```js
+const props = {
+  ...
+  splitView: false,
+};
+```
+
+### Show online users tab
+
+React:
+
+```js
+<ConnectyCubeChatWidget
+  ...
+  showOnlineUsersTab={true}
+/>
+```
+
+Vanilla JS:
+
+```js
+const props = {
+  ...
+  showOnlineUsersTab: true,
+};
+```
+
+### Display Chat button bottom left
+
+React:
+
+```js
+<ConnectyCubeChatWidget
+  ...
+  buttonClassName={"left-2 right-auto"}
+  portalClassName={"left-2 right-auto"}
+/>
+```
+
+Vanilla JS:
+
+```js
+const props = {
+  ...
+  buttonClassName: "left-2 right-auto",
+  portalClassName: "left-2 right-auto"
+};
+```
+
 ## Community and support
 
 - [Blog](https://connectycube.com/blog)

package/dist/App.d.ts

@@ -1,19 +1,3 @@
-import { Config } from '../../../node_modules/connectycube/dist/types/types';
-type AppProps = {
-    appId: Config.Credentials['appId'];
-    authKey: Config.Credentials['authKey'];
-    userId?: string;
-    userName?: string;
-    config?: Config.Options;
-    muted?: boolean;
-    splitView?: boolean;
-    showOnlineUsersTab?: boolean;
-    buttonStyle?: React.CSSProperties;
-    portalStyle?: React.CSSProperties;
-    badgeStyle?: React.CSSProperties;
-    buttonClassName?: string;
-    portalClassName?: string;
-    badgeClassName?: string;
-};
+import { AppProps } from './AppContainer';
 declare const App: React.FC<AppProps>;
 export default App;

package/dist/AppContainer.d.ts

@@ -0,0 +1,20 @@
+import { Config } from '../../../node_modules/connectycube/dist/types/types';
+export type AppProps = {
+    appId: Config.Credentials['appId'];
+    authKey: Config.Credentials['authKey'];
+    userId?: string;
+    userName?: string;
+    config?: Config.Options;
+    muted?: boolean;
+    splitView?: boolean;
+    showOnlineUsersTab?: boolean;
+    buttonTitle?: string;
+    buttonStyle?: React.CSSProperties;
+    portalStyle?: React.CSSProperties;
+    badgeStyle?: React.CSSProperties;
+    buttonClassName?: string;
+    portalClassName?: string;
+    badgeClassName?: string;
+};
+declare const AppContainer: React.FC<AppProps>;
+export default AppContainer;

package/dist/connectycube.d.ts

@@ -1,18 +1,21 @@
 import { Chat, Users, Auth } from '../../../node_modules/connectycube/dist/types/types';
 export declare const SESSION_KEY = "@connectycube/chat-widget:session";
-export declare const tryReuseSession: (userName?: string) => Promise<boolean>;
+export declare const tryReuseSession: (userName?: string, userId?: string) => Promise<boolean>;
 export declare const tryRestoreSession: () => Promise<Auth.Session | null>;
 export declare const createUserSession: (login: string, password: string) => Promise<Auth.Session>;
-export declare const createSession: (login?: string, name?: string) => Promise<Auth.Session | null>;
+export declare const createSession: (userId?: string, userName?: string) => Promise<Auth.Session | null>;
 export declare const destroyUserSession: () => Promise<void>;
-export declare const userSignup: (login: string, password: string, name?: string) => Promise<Auth.Session>;
+export declare const userSignup: (login: string, password: string, name?: string, externalId?: string) => Promise<Auth.Session>;
 export declare const chatCredentials: () => Chat.ConnectionParams | null;
-export declare const updateUserProfileIfNeeded: (session: Auth.Session, name?: string) => Promise<void>;
+export declare const updateUserProfileIfNeeded: (session: Auth.Session, name?: string, externalId?: string) => Promise<void>;
 export declare const setSessionToLocalStorage: (session: Auth.Session) => void;
 export declare const getSessionFromLocalStorage: () => Auth.Session | null;
+export declare const clearSessionInLocalStorage: () => void;
 export declare const getCurrentUser: () => Users.User | null | undefined;
 export declare const getSessionToken: () => string | null;
 export declare const getSessionUserId: () => number | null;
 export declare const isSessionExpired: () => boolean;
+export declare const isUserIdChanged: (userId?: string) => boolean;
 export declare const sha256: (str: string) => Promise<string>;
 export declare const getUserName: (user: Users.User | null | undefined) => string;
+export declare const generateConnectyCubeLogin: (userId?: string) => string;

package/dist/hooks/debounce.d.ts

@@ -0,0 +1,3 @@
+export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): T & {
+    cancel: () => void;
+};

package/dist/hooks/throttle.d.ts

@@ -0,0 +1,3 @@
+export declare function throttle<T extends (...args: any[]) => void>(func: T, delay: number): T & {
+    cancel: () => void;
+};