@connectycube/chat-widget 0.35.0 → 0.36.0

package/dist/types/App.d.ts

@@ -1,8 +1,8 @@
 import { Config } from 'connectycube/types';
 import { AppPresets } from './hooks/useAppPresets';
 export type AppProps = AppPresets & {
-    appId: Config.Credentials['appId'];
-    authKey: Config.Credentials['authKey'];
+    appId: number | string;
+    authKey: string;
     config?: Config.Options;
     userId?: string;
     userName?: string;

package/dist/types/index.d.ts

@@ -1,3 +1,5 @@
+export { default } from './App';
+export type { AppProps as ConnectyCubeChatWidgetProps } from './App';
 export type ChatWidgetInWindow = {
     initialNotification?: MessageEvent['data'];
     open?: () => void;
@@ -7,4 +9,3 @@ export type ChatWidgetInWindow = {
 export type WindowWithChatWidget = Window & typeof globalThis & {
     ConnectyCubeChatWidget?: ChatWidgetInWindow;
 };
-export { default } from './App';

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@connectycube/chat-widget",
-  "description": "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.",
-  "version": "0.35.0",
+  "description": "A customizable React chat widget built on the ConnectyCube platform, enabling real-time messaging, calls, and user engagement in any web app.",
+  "version": "0.36.0",
   "license": "GPL-3.0-only",
-  "homepage": "https://github.com/ConnectyCube/connectycube-chat-widget#readme",
+  "homepage": "https://github.com/ConnectyCube/connectycube-chat-widget/chat-widget#readme",
   "bugs": {
     "url": "https://github.com/ConnectyCube/connectycube-chat-widget/issues"
   },
@@ -56,7 +56,7 @@
   },
   "files": [
     "dist",
-    "CHANGELOG.md"
+    "../../CHANGELOG.md"
   ],
   "publishConfig": {
     "access": "public"
@@ -83,12 +83,7 @@
     "lint": "eslint .",
     "test": "vitest",
     "test:ci": "vitest run",
-    "coverage": "vitest run --coverage",
-    "version": "node ./scripts/bump-version.cjs",
-    "version:patch": "npm run version patch",
-    "version:minor": "npm run version minor",
-    "version:major": "npm run version major",
-    "changelog": "node ./scripts/changelog.cjs"
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@ai-sdk/google": "^2.0.17",
@@ -161,4 +156,4 @@
     "node": ">=20.0.0",
     "npm": ">=10.0.0"
   }
-}
+}

package/CHANGELOG.md

@@ -1,172 +0,0 @@
-<a name="0.35.0"></a>
-
-## 0.35.0
-
-### Bug Fixes
-
-- “Unknown“ user name and login issue on first open
-
-### Chores
-
-- imports build of the Chat Widget for react@19 as default for ESM. Use `import ChatWidget from "@connectycube/chat-widget/react18"` to import the build for react@18
-
-<a name="0.34.0"></a>
-
-## 0.34.0
-
-### Chores
-
-- new commands in `package.json` to bump major/minor/patch versions
-
-### Features
-
-- call history
-- implemented auto-grow text input for typing message
-- ability to change tone of message for typed text via AI
-- AI text summarization in chat
-- new prop `ai` to configure AI options. `ai: { apiKey: string; textSummarization?: boolean; changeMessageTone?: boolean; }`
-- supported new variable `CHAT_WIDGET_CONNECTYCUBE_GOOGLE_GENERATIVE_AI_API_KEY` in `.env` to set `ai.apiKey` for "gemini-2.5-flash" model
-
-<a name="0.33.0"></a>
-
-## 0.33.0
-
-<a name="0.32.1"></a>
-
-## 0.32.1
-
-<a name="0.32.0"></a>
-
-## 0.32.0
-
-<a name="0.31.0"></a>
-
-## 0.31.0
-
-<a name="0.30.2"></a>
-
-## 0.30.2
-
-<a name="0.30.1"></a>
-
-## 0.30.1
-
-<a name="0.30.0"></a>
-
-## 0.30.0
-
-<a name="0.29.0"></a>
-
-## 0.29.0
-
-<a name="0.28.0"></a>
-
-## 0.28.0
-
-<a name="0.27.0"></a>
-
-## 0.27.0
-
-<a name="0.26.1"></a>
-
-## 0.26.1
-
-<a name="0.26.0"></a>
-
-## 0.26.0
-
-<a name="0.25.0"></a>
-
-## 0.25.0
-
-<a name="0.24.0"></a>
-
-## 0.24.0
-
-<a name="0.23.0"></a>
-
-## 0.23.0
-
-<a name="0.22.0"></a>
-
-## 0.22.0
-
-<a name="0.21.1"></a>
-
-## 0.21.1
-
-<a name="0.21.0"></a>
-
-## 0.21.0
-
-<a name="0.20.0"></a>
-
-## 0.20.0
-
-### Reverts
-
-- bump connectycube[@4](https://github.com/4).1.4
-
-<a name="0.19.0"></a>
-
-## 0.19.0
-
-<a name="0.18.0"></a>
-
-## 0.18.0
-
-<a name="0.17.0"></a>
-
-## 0.17.0
-
-<a name="0.16.0"></a>
-
-## 0.16.0
-
-<a name="0.15.2"></a>
-
-## 0.15.2
-
-<a name="0.15.1"></a>
-
-## 0.15.1
-
-<a name="0.15.0"></a>
-
-## 0.15.0
-
-<a name="0.14.4"></a>
-
-## 0.14.4
-
-<a name="0.14.3"></a>
-
-## 0.14.3
-
-### Reverts
-
-- [JS-59] update attachments
-
-<a name="0.14.2"></a>
-
-## 0.14.2
-
-<a name="0.14.0"></a>
-
-## 0.14.0
-
-<a name="0.13.0"></a>
-
-## 0.13.0
-
-<a name="0.12.0"></a>
-
-## 0.12.0
-
-<a name="0.11.0"></a>
-
-## 0.11.0
-
-<a name="0.10.0"></a>
-
-## 0.10.0

package/README.md

@@ -1,202 +0,0 @@
-# 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.
-
-## Overview
-
-The ConnectyCube Web Chat Widget for React is designed to simplify the process of adding chat functionality to your React apps. With a few configuration steps and minimal code, you can quickly enable robust, real-time communication powered by ConnectyCube. Key benefits include:
-
-- **Easy Integration:** Plug the widget into your existing React projects.
-- **Customizable Interface:** Adjust the look and feel to match your brand.
-- **Real-Time Messaging:** Leverage ConnectyCube's reliable backend for instant communication.
-- **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>
-
-## Documentation
-
-<https://developers.connectycube.com/js/chat-widget>
-
-## Installation
-
-### React
-
-```bash
-# npm
-npm install @connectycube/chat-widget
-
-# yarn
-yarn add @connectycube/chat-widget
-```
-
-### Vanilla JS
-
-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>
-<script src="https://unpkg.com/@connectycube/chat-widget@latest/dist/index.umd.js"></script>
-```
-
-## Usage
-
-### Before you start
-
-Before you start, make sure:
-
-1. You have access to your ConnectyCube account. If you don’t have an account, [sign up here](https://admin.connectycube.com/register).
-2. An app created in ConnectyCube dashboard. Once logged into [your ConnectyCube account](https://admin.connectycube.com/), create a new application and make a note of the app credentials (**App ID** and **Authorization Key**) that you’ll need for authentication.
-
-### Display widget
-
-#### React
-
-Import and place the following component in your app:
-
-```js
-import ConnectyCubeChatWidget from "@connectycube/chat-widget";
-
-...
-
-<ConnectyCubeChatWidget
-  appId="111"
-  authKey="11111111-2222-3333-4444-55555555"
-  config={{ debug: { mode: 1 } }}
-  userId="112233"
-  userName="Samuel"
-  showOnlineUsersTab={false}
-  splitView={true}
-/>
-
-// userName - how other users will see your user name
-// 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.
-
-#### React version support
-
-Since v0.35.0, the default build of the widget targets React 19 and is provided as an ESM module.
-For React 18 projects, use the dedicated ESM-only build:
-
-```js
-// v0.35.0 and later:
-import ConnectyCubeChatWidget from '@connectycube/chat-widget'; // default: React 19
-import ConnectyCubeChatWidget from '@connectycube/chat-widget/react19'; // explicit React 19 build
-import ConnectyCubeChatWidget from '@connectycube/chat-widget/react18'; // dedicated React 18 build
-
-// v0.34.0 and earlier:
-import ConnectyCubeChatWidget from '@connectycube/chat-widget'; // default: React 18
-import ConnectyCubeChatWidget from '@connectycube/chat-widget/react19'; // React 19 build
-```
-
-#### Vanilla JS
-
-Place the following script in your app:
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <!-- ... -->
-  </head>
-  <body>
-    <!-- ... -->
-    <!-- @connectycube/chat-widget - start -->
-    <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>
-    <script src="https://unpkg.com/@connectycube/chat-widget@latest/dist/index.umd.js"></script>
-    <script>
-      const chatWidgetContainer = document.createElement('div');
-      chatWidgetContainer.id = 'ConnectyCube_chat-widget';
-      document.body.appendChild(chatWidgetContainer);
-      const props = {
-        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
-        showOnlineUsersTab: false,
-        splitView: true,
-        hideWidgetButton: false,
-        onOpenChange: (open) => {
-          console.log('Chat widget is open:', open);
-        },
-        onUnreadCountChange: (count) => {
-          console.log('Unread messages count:', count);
-        },
-      };
-      ReactDOM.createRoot(chatWidgetContainer).render(React.createElement(ConnectyCubeChatWidget, props));
-
-      // use the code below as an example to toggle the chat widget visibility state for custom button
-      document.getElementById('someCustomButton').addEventListener('click', () => {
-        ConnectyCubeChatWidget.toggle();
-      });
-    </script>
-    <!-- @connectycube/chat-widget - end -->
-  </body>
-</html>
-```
-
-See chat widget code samples <https://github.com/ConnectyCube/connectycube-chat-widget-samples> as a reference for faster integration.
-
-## Props
-
-See all available props <https://developers.connectycube.com/js/chat-widget/#props>
-
-## Recipes
-
-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) community to get real-time help from our team
-
-## Community
-
-- [Blog](https://connectycube.com/blog)
-- X (twitter)[@ConnectyCube](https://x.com/ConnectyCube)
-- [Facebook](https://www.facebook.com/ConnectyCube)
-- [Medium](https://medium.com/@connectycube)
-- [YouTube](https://www.youtube.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>