@connectycube/chat-widget 0.34.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/helpers/connectycube.d.ts

@@ -40,7 +40,7 @@ export declare const updateUserSettings: (settings: {
 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 isUserIdChanged: (userId?: string | number | null) => boolean;
 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;

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.34.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"
   },
@@ -45,13 +45,18 @@
     },
     "./react19": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/react19.es.js",
-      "default": "./dist/react19.es.js"
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
+    },
+    "./react18": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/react18.es.js",
+      "default": "./dist/react18.es.js"
     }
   },
   "files": [
     "dist",
-    "CHANGELOG.md"
+    "../../CHANGELOG.md"
   ],
   "publishConfig": {
     "access": "public"
@@ -67,26 +72,21 @@
     "tailwindcss": "npx @tailwindcss/cli -i ./src/index.css -o ./src/widget.css",
     "tailwindcss:watch": "npx @tailwindcss/cli -i ./src/index.css -o ./src/widget.css --watch",
     "tailwindcss:minify": "npx @tailwindcss/cli -i ./src/index.css -o ./src/widget.css --minify",
-    "dev": "npx npm-run-all --parallel vite:dev tailwindcss:watch",
     "dev:18": "npm run react:18 && REACT_VERSION=18 BUNDLE_FORMAT=es vite",
     "dev:19": "npm run react:19 && REACT_VERSION=19 BUNDLE_FORMAT=es vite",
-    "build": "npm run tailwindcss:minify && npm run react:18 && REACT_VERSION=18 npm run vite:build:es && KEEP_DIST=true npm run vite:build:umd && npm run react:19 && REACT_VERSION=19 KEEP_DIST=true npm run vite:build:es && npm run react:default",
+    "dev": "npx npm-run-all --parallel vite:dev tailwindcss:watch",
     "build:18": "npm run tailwindcss:minify && npm run react:18 && REACT_VERSION=18 npm run vite:build:es && KEEP_DIST=true npm run vite:build:umd",
     "build:19": "npm run tailwindcss:minify && npm run react:19 && REACT_VERSION=19 npm run vite:build:es",
     "build:default": "npm run tailwindcss:minify && npm run vite:build",
+    "build": "npm run tailwindcss:minify && npm run react:18 && REACT_VERSION=18 npm run vite:build:es && KEEP_DIST=true npm run vite:build:umd && npm run react:19 && REACT_VERSION=19 KEEP_DIST=true npm run vite:build:es && npm run react:default",
     "preview": "npm run tailwindcss && npm run vite:preview",
     "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.7",
+    "@ai-sdk/google": "^2.0.17",
     "@connectycube/use-calls": "^0.12.1",
     "@connectycube/use-chat": "^0.27.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -99,23 +99,23 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "ai": "^5.0.18",
+    "ai": "^5.0.54",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "connectycube": "^4.7.1",
-    "get-browser-fingerprint": "^4.1.0",
-    "i18next": "^25.3.6",
+    "connectycube": "^4.7.2",
+    "get-browser-fingerprint": "^4.1.1",
+    "i18next": "^25.5.2",
     "linkify-react": "^4.3.2",
     "linkifyjs": "^4.3.2",
-    "lucide-react": "^0.540.0",
+    "lucide-react": "^0.544.0",
     "next-themes": "^0.4.6",
-    "react-hook-form": "^7.62.0",
-    "react-i18next": "^15.6.1",
+    "react-hook-form": "^7.63.0",
+    "react-i18next": "^16.0.0",
     "react-icons": "^5.5.0",
     "react-intersection-observer": "^9.16.0",
     "react-player": "^2.16.1",
     "sonner": "^2.0.7",
-    "virtua": "^0.41.5",
+    "virtua": "^0.43.4",
     "zustand": "^5.0.8"
   },
   "peerDependencies": {
@@ -123,37 +123,37 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@eslint/js": "^9.33.0",
-    "@tailwindcss/postcss": "^4.1.12",
-    "@tailwindcss/vite": "^4.1.12",
-    "@types/node": "^24.3.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "^5.0.1",
+    "@eslint/js": "^9.36.0",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.33.0",
+    "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "jsdom": "^26.1.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "jsdom": "^27.0.0",
     "prettier": "3.6.2",
     "tailwind-merge": "^3.3.1",
     "tailwind-scrollbar": "^4.0.2",
-    "tailwindcss": "^4.1.12",
-    "tw-animate-css": "^1.3.7",
+    "tailwindcss": "^4.1.13",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.40.0",
-    "vite": "^7.1.3",
+    "typescript-eslint": "^8.44.1",
+    "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.46.4",
-    "@tailwindcss/oxide-linux-x64-gnu": "^4.1.12",
+    "@rollup/rollup-linux-x64-gnu": "4.52.2",
+    "@tailwindcss/oxide-linux-x64-gnu": "^4.1.13",
     "lightningcss-linux-x64-gnu": "^1.30.1"
   },
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=10.0.0"
   }
-}
+}

package/CHANGELOG.md

@@ -1,160 +0,0 @@
-<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: { textSummarization: boolean }`
-- supported new variable `GOOGLE_GENERATIVE_AI_API_KEY` in `.env` to set `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,194 +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 19
-
-By default, the widget uses the React 18-compatible build. To use it with React 19, import the dedicated ESM-only build instead:
-
-```js
-import ConnectyCubeChatWidget from '@connectycube/chat-widget/react19';
-```
-
-#### 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>