@connectycube/chat-widget 0.11.0 → 0.13.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,26 +122,125 @@ 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
 
-| Prop Name            | Type                  | Description                                                   |
-| -------------------- | --------------------- | ------------------------------------------------------------- |
-| `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  |
-| `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 |
-| `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                      |
-| `buttonClassName`    | `string`              | _(Optional)_ CSS class or Tailwind CSS classes for the button |
-| `portalClassName`    | `string`              | _(Optional)_ CSS class or Tailwind CSS classes for the chat   |
-| `badgeClassName`     | `string`              | _(Optional)_ CSS class or Tailwind CSS classes for the badge  |
+| Prop Name            | Type                  | Description                                                                            | Default Value |
+| -------------------- | --------------------- | -------------------------------------------------------------------------------------- | ------------- |
+| `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                                                             |               |
+| `userName`           | `string`              | User name. This is how other users will see your user name                             |               |
+| `userAvatar`         | `string`              | _(Optional)_ User Avatar URL                                                           |               |
+| `muted`              | `boolean`             | _(Optional)_ Do not play sound on incoming message                                     | false         |
+| `splitView`          | `boolean`             | _(Optional)_ Displays the chats in split view or single view                           | false         |
+| `showOnlineUsersTab` | `boolean`             | _(Optional)_ Displays users tab with the list of online users                          | false         |
+| `buttonTitle`        | `string`              | _(Optional)_ The text displayed on the chat button                                     | "Chat"        |
+| `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                                               |               |
+| `buttonClassName`    | `string`              | _(Optional)_ CSS class or Tailwind CSS classes for the button                          |               |
+| `portalClassName`    | `string`              | _(Optional)_ CSS class or Tailwind CSS classes for the chat                            |               |
+| `badgeClassName`     | `string`              | _(Optional)_ CSS class or Tailwind CSS classes for the badge                           |               |
+| `quickActions`       | `object`              | _(Optional)_ Configuration for quick actions dialog. See [QuickActions](#quickactions) |               |
+
+## QuickActions
+
+| Prop Name     | Type       | Description                                      | Default Value |
+| ------------- | ---------- | ------------------------------------------------ | ------------- |
+| `title`       | `string`   | _(Optional)_ Title for the quick actions section |               |
+| `description` | `string`   | _(Optional)_ Description for the quick actions   |               |
+| `actions`     | `string[]` | List of action strings                           |               |
+
+## 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"
+};
+```
+
+## Changelog
+
+<https://github.com/ConnectyCube/connectycube-chat-widget-samples/blob/main/CHANGELOG.md>
 
 ## Community and support
 

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,23 @@
+import { Config } from '../../../node_modules/connectycube/dist/types/types';
+import { QuickActions } from './redux/slices/quickActions';
+export type AppProps = {
+    appId: Config.Credentials['appId'];
+    authKey: Config.Credentials['authKey'];
+    userId?: string;
+    userName?: string;
+    userAvatar?: string;
+    config?: Config.Options;
+    muted?: boolean;
+    splitView?: boolean;
+    showOnlineUsersTab?: boolean;
+    quickActions?: QuickActions;
+    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/components/home/main/quick-actions.d.ts

@@ -0,0 +1,5 @@
+export interface QuickActionsProps {
+    sendMessage: (text: string) => void;
+}
+declare const QuickActions: React.FC<QuickActionsProps>;
+export default QuickActions;

package/dist/components/login.d.ts

@@ -1,6 +1,7 @@
 type LoginProps = {
     login?: string;
     name?: string;
+    avatar?: string;
 };
 declare const Login: React.FC<LoginProps>;
 export default Login;

package/dist/components/shared/avatar.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 export interface AvatarProps {
-    imageUID?: string;
+    imageUIDOrUrl?: string;
     name: string;
     className?: string | undefined;
 }

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, userAvatar?: 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, userAvatar?: 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, userAvatar?: 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, avatar?: string) => Promise<Auth.Session>;
 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;
+};