@connectycube/chat-widget 0.30.2 → 0.32.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # CHANGELOG
 
+## 0.32.0
+
+### Misc
+
+- SSR (Server-Side Rendering) support
+  - implemented `localStorage` and `document` guards
+  - updated authentication logic
+
+### Fixed
+
+- removed unnecessary text from `README.md`
+- word "Messed" changed to "Missed" in `en/translation.json` file
+- resets specific store data to prevent displaying the useless toast about a missed call
+
+## 0.31.0
+
+### Misc
+
+- Uses the `<VList/>` component from the `virtua` scroll library
+- Added infinite scroll to load and prepend earlier messages in chat history
+- Added infinite scroll to load and append more dialogs in the chat list
+- Updated messages styles and alignment
+- Updated dialog list styles
+- Can open the widget by clicking on the push notification
+
+### Fixed
+
+- Playing stop call audio on app start
+
 ## 0.30.2
 
 ### Fixed

package/README.md

@@ -1,10 +1,3 @@
-WebRTCPeerConnection.ts:134 [VideoChat]: onSignalingStateHandler: have-remote-offer
-helpers.ts:7 [useCalls][onRemoteStream][Log]: {session: e, userID: 13308918, stream: MediaStream}
-WebRTCPeerConnection.ts:134 [VideoChat]: setRemoteSessionDescription - success
-WebRTCPeerConnection.ts:134 [VideoChat]: onSignalingStateHandler: stable
-WebRTCPeerConnection.ts:134 [VideoChat]: Set maxBandwidth success [13308918]: 0 kbps
-WebRTCPeerConnection.ts:134 [VideoChat]: getAndSetLocalSessionDescription - success
-
 # ConnectyCube Chat Widget
 
 A React component that seamlessly integrates ConnectyCube's real-time chat capabilities into your web applications. This widget offers an out-of-the-box solution for embedding chat features—such as instant messaging, user presence, and file sharing—without the overhead of building a complete chat system from scratch.
@@ -39,13 +32,11 @@ Single-view chat widget:
 
 ### React
 
-```
+```bash
+# npm
 npm install @connectycube/chat-widget
-```
-
-or
 
-```
+# yarn
 yarn add @connectycube/chat-widget
 ```
 
@@ -53,7 +44,7 @@ yarn add @connectycube/chat-widget
 
 Add the following scripts on your html page somewhere in `head` element:
 
-```
+```html
 <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
 <script src="https://unpkg.com/connectycube@4/dist/connectycube.min.js"></script>
@@ -163,6 +154,26 @@ See all available props <https://developers.connectycube.com/js/chat-widget/#pro
 
 See all available recipes <https://developers.connectycube.com/js/chat-widget/#recipes>
 
+## SSR (Server-Side Rendering) Guide
+
+When using `@connectycube/chat-widget` in SSR environments (e.g., Next.js, Remix), some native Node.js modules like events may cause errors due to differences between Node and browser environments. Here are recommendations to ensure smooth SSR integration:
+
+### Usage
+
+```bash
+# npm
+npm install @connectycube/chat-widget
+npx connectycube patch-ssr      # Apply SSR patches
+# npx connectycube revert-ssr   # Revert SSR patches
+
+# yarn
+yarn add @connectycube/chat-widget
+yarn connectycube patch-ssr     # Apply SSR patches
+# yarn connectycube revert-ssr  # Revert SSR patches
+```
+
+The `connectycube` CLI will be available as part of the `connectycube` package, which is installed automatically as a dependency of `@connectycube/chat-widget`. This script applies fixes to make the SDK compatible with SSR environments.
+
 ## Have an issue?
 
 Join our [Discord](https://discord.com/invite/zqbBWNCCFJ) for quick answers to your questions

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

@@ -15,5 +15,30 @@ self.addEventListener('push', (event) => {
 
 self.addEventListener('notificationclick', (event) => {
   event.notification.close();
-  event.waitUntil(clients.openWindow('/'));
+  event.waitUntil(
+    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
+      const matchedClient = clientList.find((client) =>
+        client.url.startsWith(self.location.origin) && 'focus' in client
+      );
+
+      if (matchedClient) {
+        matchedClient.focus();
+      } else {
+        clients.openWindow('/').then((chatWidget) => {
+          const payload = {
+            badge: event.notification.badge || '',
+            body: event.notification.body || '',
+            data: event.notification.data || null,
+            dir: event.notification.dir || '',
+            lang: event.notification.lang || '',
+            title: event.notification.title || '',
+            icon: event.notification.icon || '',
+            timestamp: event.notification.timestamp || Date.now(),
+          };
+
+          chatWidget?.postMessage({ action: 'connectycube-chat-widget-sw/initialNotification', payload });
+        });
+      }
+    })
+  );
 });