@connectycube/chat-widget 0.19.0 → 0.21.0

package/CHANGELOG.md

@@ -0,0 +1,173 @@
+# CHANGELOG
+
+## 0.21.0
+
+### Features
+
+- Video-preview for video attachment in chat
+
+### Misc
+
+- Added support for node 22
+- Upgraded `connectycube` to 4.2.2 and `@connectycube/use-chat` to 0.18.0 to use import types and enums from "connectycube/types"
+
+### Bug fixes
+
+- Web Push Notifications init and fetch with user setting
+
+## 0.20.0
+
+### Features
+
+- Push Notifications support (receive notifications when browser tab is closed). New props: `webPushNotifications`, `webPushVapidPublicKey`, `serviceWorkerPath`
+- Allow users search from 3 characters min (was 4)
+- New props - `hideNewUserChatOption`, `hideNewGroupChatOption` - To hide 'New group' / 'New message' options in Create Chat dropdown menu
+
+### Bug fixes
+
+- [mobile] can't access own profile page
+- `attachmetsAccept` prop: block sending unsupported attachments when select All Files in file picker
+- Improved block list flow
+
+## 0.19.0
+
+### Bug fixes
+
+- fix user session restore
+
+## 0.18.0
+
+### Misc
+
+- update styles for chat item for not to interfere with host site styles
+
+## 0.17.0
+
+### Features
+
+- added `My Profile`
+- display blocked users list in `My Profile`
+- added Notification Settings in `My Profile` (can on/off notifications and notification sound)
+- shows a toast message when a blocked user tries to send a message;
+- added `attachmentsAccept` prop to specify supported attachments types
+- added `defaultChat` prop to force widget open particular chat
+
+## 0.16.0
+
+### Features
+
+- report user feature (via `enableContentReporting` prop)
+- block user feature (via `enableBlockList` prop)
+- notification on new message (via `showNotifications`, `playSound` and `muted` props)
+
+### Bug fixes
+
+- change `break-all` to `break-word` for chat messages text
+- chats list: last item is not visible
+
+### Misc
+
+- redux store was replaced by [zustand](https://github.com/pmndrs/zustand);
+
+## 0.15.2
+
+### Misc
+
+- update styles for chat item for not to interfere with host site styles
+
+## 0.15.1
+
+### Bug fixes
+
+- User profile link not displayed when open user profile from Users tab
+
+### Misc
+
+- set static height for user profile header
+- set overflow-hidden for user profile container
+
+## 0.15.0
+
+### Features
+
+- highlight links in chat messages;
+- updated attachments to support uploading any file;
+- create 1-1 chat on send 1st message, not when click on a user
+- encapsulated chat widget styles to prevent global styling effects;
+- implemented `open` prop to manage chat widget visibility state;
+- implemented `window.ConnectyCubeChatWidget.toggle()` function to manage chat widget visibility state when used as UMD;
+- implemented `onOpenChange` and `onUnreadCountChange` props as callbacks to receive updates on the visibility of the chat widget and the unread message counter, respectively;
+- implemented `hideWidgetButton` prop to hide the chat widget button and use a custom one;
+- implemented browser notifications and `showNotifications` prop to enable the feature;
+
+### Bug fixes
+
+- blocked sending files as attachments if they do not have `type` or `size` properties.
+- fixed z-index for Chat button and widget view
+
+### Misc
+
+- upgraded tailwindcss to version 4;
+- upgraded ShadCN-UI components to support TailwindCSS version 4;
+
+## 0.14.4
+
+### Bug fixes
+
+- fix avatar crash when chat name is empty
+
+## 0.14.3
+
+### Bug fixes
+
+- fix missing typings declaration
+
+## 0.14.2
+
+### Bug fixes
+
+- fix README
+
+## 0.14.0
+
+### Features
+
+- introduce user profile link via `userProfileLink` prop
+- hide new chat button via `hideNewChatButton` prop
+- English, Greek, Ukrainian languages supported via `translation` prop
+
+## 0.13.0
+
+### Features
+
+- user avatar
+- suggested messages
+
+## 0.12.0
+
+### Features
+
+- message drafts
+- allow to change `userId` prop on the flight
+
+### Bug fixes
+
+- fix mobile UI styles
+
+## 0.11.0
+
+### Features
+
+- displays total unread messages counter;
+- placeholders for empty lists;
+
+### Bug fixes
+
+- can restore expired session;
+- can retrieve messages while the widget is collapsed;
+- incoming notification sound;
+- UI styles;
+
+## 0.10.0
+
+Initial release.

package/README.md

@@ -150,15 +150,17 @@ See all available recipes <https://developers.connectycube.com/js/chat-widget/#r
 
 ## Have an issue?
 
-Join our [Discord](https://discord.gg/wDwbvJmD) for quick answers to your questions
+Join our [Discord](https://discord.com/invite/zqbBWNCCFJ) for quick answers to your questions
 
-## Community and support
+## Community
 
-- [Discord](https://discord.gg/wDwbvJmD)
 - [Blog](https://connectycube.com/blog)
 - X (twitter)[@ConnectyCube](https://x.com/ConnectyCube)
 - [Facebook](https://www.facebook.com/ConnectyCube)
 
+**Want to support our team**:<br>
+<a href="https://www.buymeacoffee.com/connectycube" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+
 ## Changelog
 
 <https://github.com/ConnectyCube/connectycube-chat-widget-samples/blob/main/CHANGELOG.md>

package/dist/App.d.ts

@@ -1,4 +1,4 @@
-import { Config } from '../node_modules/connectycube/src/types';
+import { Config } from 'connectycube/types';
 import { DefaultChat } from './hooks/store/useAppDefaultChatStore';
 import { QuickActions } from './hooks/store/useAppQuickActionsStore';
 export type AppProps = {
@@ -13,9 +13,14 @@ export type AppProps = {
     splitView?: boolean;
     showOnlineUsersTab?: boolean;
     hideNewChatButton?: boolean;
+    hideNewUserChatOption?: boolean;
+    hideNewGroupChatOption?: boolean;
     muted?: boolean;
     showNotifications?: boolean;
     playSound?: boolean;
+    webPushNotifications?: boolean;
+    webPushVapidPublicKey?: string;
+    serviceWorkerPath?: string | URL;
     attachmentsAccept?: string;
     enableContentReporting?: boolean;
     enableBlockList?: boolean;

package/dist/components/home/main/chat-info-user.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
-import { Users } from '../../../../node_modules/connectycube/src/types';
+import { Users } from 'connectycube/types';
 export interface ChatInfoUserProps {
-    user?: Users.User;
+    user?: Users.User | null;
 }
 declare const _default: React.NamedExoticComponent<ChatInfoUserProps>;
 export default _default;

package/dist/components/home/main/chat-input.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { Dialogs } from '../../../../node_modules/connectycube/src/types';
+import { Dialogs } from 'connectycube/types';
 export interface ChatInputProps {
     onSendMessage: (message: string, dialog?: Dialogs.Dialog) => void;
     onSendMessageWithAttachment: (files: File[]) => void;

package/dist/components/home/main/group-member.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 export interface GroupMemberProps {
     userId: number;
     name: string;
-    avatar?: string;
+    avatar?: string | null;
 }
 declare const _default: React.NamedExoticComponent<GroupMemberProps>;
 export default _default;

package/dist/components/home/main/message-attachment.d.ts

@@ -1,4 +1,4 @@
-import { Messages } from '../../../../node_modules/connectycube/src/types';
+import { Messages } from 'connectycube/types';
 import { default as React } from 'react';
 export interface MessageAttachmentProps {
     attachment: Messages.Attachment;

package/dist/components/home/main/message.d.ts

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
-import { Messages } from '../../../../node_modules/connectycube/src/types';
+import { Messages } from 'connectycube/types';
 export interface MessageProps {
     message: Messages.Message;
     isGroupChat: boolean;
     dialogName: string;
     senderName: string;
-    senderAvatar: string;
+    senderAvatar?: string | null;
 }
 declare const Message: React.FC<MessageProps>;
 export default Message;

package/dist/components/home/main/my-profile/my-block-list-item.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { Users } from '../../../../../node_modules/connectycube/src/types';
+import { Users } from 'connectycube/types';
 export interface MyBlockListItemProps {
     user?: Users.User;
 }

package/dist/components/home/main/profile-info.d.ts

@@ -1,3 +1,6 @@
 import { default as React } from 'react';
-declare const ProfileInfo: React.FC;
-export default ProfileInfo;
+type ProfileInfoProps = {
+    profileClassName: string;
+};
+declare const _default: React.NamedExoticComponent<ProfileInfoProps>;
+export default _default;

package/dist/components/home/sidebar/chat-item.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { Dialogs } from '../../../../node_modules/connectycube/src/types';
+import { Dialogs } from 'connectycube/types';
 export interface ChatItemProps {
     dialog: Dialogs.Dialog;
 }

package/dist/components/home/sidebar/new-chat/create-group-chat/create-group-chat.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { Users } from '../../../../../../node_modules/connectycube/src/types';
+import { Users } from 'connectycube/types';
 export interface CreateGroupChatProps {
     users: Users.User[];
     onCreateChat: (name: string) => void;

package/dist/components/shared/alert-busy.d.ts

@@ -0,0 +1,2 @@
+declare const AlertBusy: React.FC;
+export default AlertBusy;

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 export interface AvatarProps {
-    imageUIDOrUrl?: string;
-    name: string;
+    imageUIDOrUrl?: string | null;
+    name?: string;
     className?: string | undefined;
 }
 declare const _default: React.NamedExoticComponent<AvatarProps>;

package/dist/connectycube-chat-widget-sw.js

@@ -0,0 +1,19 @@
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener('push', (event) => {
+  const { data } = event.data?.json() || {};
+  const title = data.title || '';
+  const options = {
+    body: data.message || '',
+    icon: data.photo || '/logo.png',
+  };
+
+  event.waitUntil(self.registration.showNotification(title, options));
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  event.waitUntil(clients.openWindow('/'));
+});

package/dist/helpers/connectycube.d.ts

@@ -1,4 +1,5 @@
-import { Config, Users, Auth, Chat } from '../../node_modules/connectycube/src/types';
+import { Config, Users, Auth, Chat, EmptyResponse, PushNotifications } from 'connectycube/types';
+import { PushSubscriptionData } from './notifications';
 export declare const SESSION_KEY = "@connectycube/chat-widget:session";
 export declare const initConnectyCubeSDK: (credentials: Config.Credentials, config?: Config.Options) => void;
 export declare const tryReuseSession: (userName?: string, userId?: string, userAvatar?: string, userProfileLink?: string) => Promise<boolean>;
@@ -27,4 +28,6 @@ export declare const sha256: (str: string) => Promise<string>;
 export declare const getUserName: (user: Users.User | null | undefined, force?: boolean) => string;
 export declare const getPhotoUrl: (photoOrAvatar?: string | null) => string;
 export declare const generateConnectyCubeLogin: (userId?: string) => string;
-export declare const createUserReport: (reportedUserId: number, reason: string) => Promise<import("@connectycube/types").Data.DataRecord>;
+export declare const createUserReport: (reportedUserId: number, reason: string) => Promise<import("connectycube/types").Data.DataRecord>;
+export declare const subscribeToPushNotifications: (pushSubscriptionData?: PushSubscriptionData) => Promise<PushNotifications.Subscription | undefined>;
+export declare const unsubscribeFromPushNotifications: () => Promise<EmptyResponse[]>;

package/dist/helpers/notifications.d.ts

@@ -1 +1,11 @@
-export declare const requestNotificationPermission: () => Promise<void>;
+export type PushSubscriptionData = {
+    endpoint: string;
+    auth: string;
+    p256dh: string;
+} | undefined;
+export declare const requestNotificationPermission: () => Promise<boolean>;
+export declare const registerWidgetServiceWorker: (serviceWorkerPath?: string | URL) => Promise<boolean>;
+export declare const getWidgetServiceWorker: (serviceWorkerPath?: string | URL) => Promise<ServiceWorkerRegistration | void>;
+export declare const getPushManagerSubscriptionData: (subscription?: PushSubscription | null) => PushSubscriptionData;
+export declare const getPushManagerSubscription: (serviceWorkerPath?: string | URL, applicationServerKey?: PushSubscriptionOptionsInit["applicationServerKey"]) => Promise<PushSubscription | null>;
+export declare const unsubscribePushManager: (serviceWorkerPath?: string | URL) => Promise<boolean>;

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export declare const resetStore: (force?: boolean) => void;
 export { default as useActiveTabsStore } from './store/useActiveTabsStore';
+export { default as useAlertBusyStore } from './store/useAlertBusyStore';
 export { default as useAppDefaultChatStore } from './store/useAppDefaultChatStore';
 export { default as useAppInterfaceStore } from './store/useAppInterfaceStore';
 export { default as useAppSettingsStore } from './store/useAppSettingsStore';

package/dist/hooks/store/useAlertBusyStore.d.ts

@@ -0,0 +1,11 @@
+type AlertBusyStateProps = {
+    visible: boolean;
+    title: string;
+};
+interface AlertBusyState extends AlertBusyStateProps {
+    showAlertBusy: (title: string) => void;
+    hideAlertBusy: () => void;
+}
+declare const useAlertBusyStore: import('zustand').UseBoundStore<import('zustand').StoreApi<AlertBusyState>>;
+export declare const resetAlertBusyStore: () => void;
+export default useAlertBusyStore;

package/dist/hooks/store/useAppInterfaceStore.d.ts

@@ -3,16 +3,22 @@ export type AppInterfaceStoreProps = {
     splitView: boolean;
     showOnlineUsersTab: boolean;
     hideNewChatButton: boolean;
+    hideNewUserChatOption: boolean;
+    hideNewGroupChatOption: boolean;
 };
 export interface AppInterfaceStoreState extends AppInterfaceStoreProps {
     setOpened: (opened: boolean) => void;
     setSplitView: (splitView: boolean) => void;
     setShowOnlineUsersTab: (showOnlineUsersTab: boolean) => void;
     setHideNewChatButton: (hideNewChatButton: boolean) => void;
+    setHideNewUserChatOption: (hideNewUserChatOption: boolean) => void;
+    setHideNewGroupChatOption: (hideNewGroupChatOption: boolean) => void;
     resetOpened: () => void;
     resetSplitView: () => void;
     resetShowOnlineUsersTab: () => void;
     resetHideNewChatButton: () => void;
+    resetHideNewUserChatOption: () => void;
+    resetHideNewGroupChatOption: () => void;
 }
 export declare const appInterfaceStoreInitialState: AppInterfaceStoreProps;
 declare const useAppInterfaceStore: import('zustand').UseBoundStore<import('zustand').StoreApi<AppInterfaceStoreState>>;

package/dist/hooks/store/useAppNotificationStore.d.ts

@@ -2,6 +2,9 @@ type AppNotificationStoreProps = {
     muted: boolean;
     showNotifications: boolean;
     playSound: boolean;
+    webPushNotifications: boolean;
+    webPushVapidPublicKey?: string;
+    serviceWorkerPath?: string | URL;
 };
 export interface AppNotificationStoreState extends AppNotificationStoreProps {
     setMuted: (muted: boolean) => void;
@@ -10,11 +13,20 @@ export interface AppNotificationStoreState extends AppNotificationStoreProps {
     resetShowNotifications: () => void;
     setPlaySound: (playSound: boolean) => void;
     resetPlaySound: () => void;
+    setWebPushNotifications: (webPushNotifications: boolean) => void;
+    resetWebPushNotifications: () => void;
+    setWebPushVapidPublicKey: (webPushVapidPublicKey?: string) => void;
+    resetWebPushVapidPublicKey: () => void;
+    setServiceWorkerPath: (serviceWorkerPath?: string | URL) => void;
+    resetServiceWorkerPath: () => void;
 }
 export declare const notificationStoreInitialState: {
     muted: boolean;
     showNotifications: boolean;
     playSound: boolean;
+    webPushNotifications: boolean;
+    webPushVapidPublicKey: undefined;
+    serviceWorkerPath: undefined;
 };
 declare const useAppNotificationStore: import('zustand').UseBoundStore<import('zustand').StoreApi<AppNotificationStoreState>>;
 export declare const setAppNotificationStore: (state: Partial<AppNotificationStoreProps>) => void;

package/dist/hooks/store/useAppSettingsStore.d.ts

@@ -1,5 +1,6 @@
 export type AppSettingStoreProps = {
     attachmentsAccept: string;
+    attachmentsAcceptList: string[];
     enableContentReporting: boolean;
     enableBlockList: boolean;
 };
@@ -10,9 +11,12 @@ export interface AppSettingStoreState extends AppSettingStoreProps {
     resetAttachmentsAccept: () => void;
     resetEnableContentReporting: () => void;
     resetEnableBlockList: () => void;
+    isSupportedFile: (file: File) => boolean;
 }
 export declare const appSettingsStoreInitialState: AppSettingStoreProps;
 declare const useAppSettingsStore: import('zustand').UseBoundStore<import('zustand').StoreApi<AppSettingStoreState>>;
 export declare const setAppSettingsStore: (state: Partial<AppSettingStoreProps>) => void;
 export declare const resetAppSettingsStore: () => void;
 export default useAppSettingsStore;
+export declare const getAttachmentsAcceptList: (attachmentsAccept: string) => string[];
+export declare const isSupportedFileMimeType: (file: File, attachmentsAcceptList: AppSettingStoreState["attachmentsAcceptList"]) => boolean;

package/dist/hooks/store/useUserSettingsStore.d.ts

@@ -1,11 +1,14 @@
 type UserSettingsStateProps = {
     isNotifications: boolean;
     isNotificationSound: boolean;
+    isPushNotifications: boolean;
 };
 interface UserSettingsState extends UserSettingsStateProps {
     setIsNotifications: (enabled: boolean) => Promise<void>;
     setIsNotificationSound: (enabled: boolean) => Promise<void>;
+    setIsPushNotifications: (enabled: boolean) => Promise<void>;
 }
 declare const useUserSettingsStore: import('zustand').UseBoundStore<import('zustand').StoreApi<UserSettingsState>>;
-export declare const restoreUserSettingsStore: () => void;
+export declare const managePushNotificationsSubscription: (enable: boolean) => Promise<boolean>;
+export declare const restoreUserSettingsStore: () => Promise<void>;
 export default useUserSettingsStore;

package/dist/hooks/useAppAuthorization.d.ts

@@ -1,4 +1,4 @@
-import { Config } from '../../node_modules/connectycube/src/types';
+import { Config } from 'connectycube/types';
 type AppUser = {
     id?: string;
     name?: string;

package/dist/hooks/useNotification.d.ts

@@ -1,6 +1,6 @@
-import { Chat } from '../../node_modules/connectycube/src/types';
+import { Chat } from 'connectycube/types';
 type NotificationHook = {
-    showNotification: (title: string, body: string, icon: string) => Notification | void;
+    showNotification: (title: string, body: string, icon: string) => Promise<Notification | void>;
     notifyOnMessage: (userId: number, message: Chat.Message) => Promise<Notification | void>;
     playAudio: () => void;
 };