@traiyani/chatsdk-react 1.0.0 → 1.0.1

package/README.md

@@ -1,6 +1,6 @@
-# @traiyani/chatsdk-react
+# ChatSDK React SDK
 
-Pre-built, plug-and-play React SDK for real-time chat. Ships as compiled JavaScript (ESM + CJS) with a single CSS file and full TypeScript declarations — works with any bundler.
+React SDK for ChatSDK - Real-time chat solution with product-based conversations, Socket.io, instant messaging, and file sharing.
 
 ## Installation
 
@@ -10,40 +10,56 @@ npm install @traiyani/chatsdk-react axios socket.io-client
 
 ### Peer Dependencies
 
-| Package             | Version  |
-| ------------------- | -------- |
-| `react`             | >=16.8.0 |
-| `react-dom`         | >=16.8.0 |
-| `axios`             | >=0.21.0 |
-| `socket.io-client`  | >=4.0.0  |
+Ensure your project has these installed:
+
+```bash
+npm install react react-dom axios socket.io-client
+```
+
+| Dependency | Minimum Version |
+|---|---|
+| `react` | >= 16.8.0 |
+| `react-dom` | >= 16.8.0 |
+| `axios` | >= 0.21.0 |
+| `socket.io-client` | >= 4.0.0 |
 
 ## Quick Start
 
 ```tsx
 import React, { useState, useEffect } from 'react';
-import { ChatSDK, ConversationList, ChatWindow } from '@traiyani/chatsdk-react';
+import { ChatSDK, ChatWindow, ConversationList } from '@traiyani/chatsdk-react';
 import '@traiyani/chatsdk-react/dist/chatsdk.css';
 
 function App() {
-  const [sdk] = useState(() => ChatSDK.getInstance());
   const [currentUser, setCurrentUser] = useState(null);
   const [selectedConversation, setSelectedConversation] = useState(null);
 
   useEffect(() => {
-    async function init() {
+    const init = async () => {
+      const sdk = ChatSDK.getInstance();
+
       await sdk.init({
-        apiBaseUrl: 'https://your-api.example.com',
+        apiBaseUrl: 'https://your-chat-api.com',
         appId: 'your-app-id',
         environment: 'production',
+        enableLogging: false,
+        autoConnect: false,
       });
 
-      const user = await sdk.connect('external-user-id');
+      const user = await sdk.chatUsers.authenticate(
+        'user-123',          // your app's user ID
+        'your-app-id',       // your ChatSDK app ID
+        'John Doe',          // display name
+        'john@example.com'   // email
+      );
+
+      await sdk.connect(user.id);
       setCurrentUser(user);
-    }
+    };
     init();
   }, []);
 
-  if (!currentUser) return <div>Loading…</div>;
+  if (!currentUser) return <div>Loading...</div>;
 
   return (
     <div style={{ display: 'flex', height: '100vh' }}>
@@ -52,58 +68,81 @@ function App() {
         onSelectConversation={setSelectedConversation}
         selectedConversationId={selectedConversation?.id}
       />
-      <ChatWindow
-        conversation={selectedConversation}
-        currentUser={currentUser}
-        onClose={() => setSelectedConversation(null)}
-        onBack={() => setSelectedConversation(null)}
-      />
+      {selectedConversation && (
+        <ChatWindow
+          conversation={selectedConversation}
+          currentUser={currentUser}
+          onClose={() => setSelectedConversation(null)}
+          onBack={() => setSelectedConversation(null)}
+        />
+      )}
     </div>
   );
 }
-
-export default App;
 ```
 
+**Zero build configuration changes required. Works with Vite, webpack, Next.js, Create React App, Parcel, and any React bundler.**
+
 ## Components
 
-### `<ConversationList />`
+### ChatWindow
 
-Displays the list of conversations for the current user.
+Displays the chat interface with messages, file uploads, block/unblock, and real-time updates.
 
-| Prop                       | Type                                | Required | Description                            |
-| -------------------------- | ----------------------------------- | -------- | -------------------------------------- |
-| `currentUser`              | `ChatSDKUser`                       | Yes      | The authenticated user                 |
-| `onSelectConversation`     | `(conv: Conversation) => void`      | Yes      | Callback when a conversation is tapped |
-| `selectedConversationId`   | `string`                            | No       | Highlights the active conversation     |
+```tsx
+<ChatWindow
+  conversation={selectedConversation}
+  currentUser={currentUser}
+  onClose={handleClose}
+  onBack={handleBack}
+/>
+```
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `conversation` | `ChatSDKConversation \| null` | Yes | Active conversation object |
+| `currentUser` | `ChatSDKUser` | Yes | Authenticated user object |
+| `onClose` | `() => void` | No | Called when user clicks close |
+| `onBack` | `() => void` | No | Called when user clicks back (mobile) |
+
+### ConversationList
 
-### `<ChatWindow />`
+Displays the list of conversations with search, unread counts, and real-time updates.
 
-Full chat window with messaging, file sharing, and real-time updates.
+```tsx
+<ConversationList
+  currentUser={currentUser}
+  onSelectConversation={handleSelect}
+  selectedConversationId={activeConversationId}
+/>
+```
 
-| Prop             | Type                    | Required | Description                     |
-| ---------------- | ----------------------- | -------- | ------------------------------- |
-| `conversation`   | `Conversation \| null`  | Yes      | The active conversation         |
-| `currentUser`    | `ChatSDKUser`           | Yes      | The authenticated user          |
-| `onClose`        | `() => void`            | No       | Called when close button pressed |
-| `onBack`         | `() => void`            | No       | Called when back button pressed  |
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `currentUser` | `ChatSDKUser` | Yes | Authenticated user object |
+| `onSelectConversation` | `(conv: ChatSDKConversation) => void` | Yes | Called when user selects a conversation |
+| `selectedConversationId` | `string` | No | ID of currently selected conversation |
 
-### `<ThemeToggle />`
+### ThemeToggle
 
-A button that cycles through light, dark, and auto themes.
+A button that cycles through light, dark, and auto themes. Must be wrapped in `<ThemeProvider>`.
 
-| Prop         | Type      | Required | Description              |
-| ------------ | --------- | -------- | ------------------------ |
-| `className`  | `string`  | No       | Additional CSS classes   |
-| `showLabel`  | `boolean` | No       | Show current theme label |
+```tsx
+<ThemeProvider>
+  <ThemeToggle showLabel />
+</ThemeProvider>
+```
 
-> Wrap your app with `<ThemeProvider>` to use `<ThemeToggle />`.
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `className` | `string` | No | Additional CSS class name |
+| `showLabel` | `boolean` | No | Show current theme label text |
 
 ## Hooks
 
-### `useTheme()`
+### useTheme
 
-Standalone hook for theme management.
+Theme management (light, dark, auto).
 
 ```tsx
 import { useTheme } from '@traiyani/chatsdk-react';
@@ -114,53 +153,71 @@ function MyComponent() {
 }
 ```
 
-### `useThemeContext()`
-
-Same API as `useTheme()`, but reads from the nearest `<ThemeProvider>` so all descendants share state.
+### useThemeContext
 
-## Theme System
+Same API as `useTheme`, but reads from the nearest `<ThemeProvider>` so all descendants share state.
 
 ```tsx
-import { ThemeProvider, ThemeToggle } from '@traiyani/chatsdk-react';
+import { useThemeContext } from '@traiyani/chatsdk-react';
 
-function App() {
-  return (
-    <ThemeProvider>
-      <ThemeToggle showLabel />
-      {/* chat components */}
-    </ThemeProvider>
-  );
-}
+const { theme, actualTheme, setTheme, toggleTheme } = useThemeContext();
 ```
 
-You can also initialize the theme imperatively:
+## Configuration
+
+Config values can come from any source — environment variables, server-rendered props, a config file, or hardcoded values:
 
 ```tsx
-import { initializeTheme } from '@traiyani/chatsdk-react';
+// Create React App
+await sdk.init({ apiBaseUrl: process.env.REACT_APP_API_URL, ... })
+
+// Vite
+await sdk.init({ apiBaseUrl: import.meta.env.VITE_API_URL, ... })
+
+// Next.js
+await sdk.init({ apiBaseUrl: process.env.NEXT_PUBLIC_API_URL, ... })
 
-initializeTheme(); // applies saved or system theme to <html>
+// Hardcoded / server-rendered
+await sdk.init({ apiBaseUrl: 'https://chat-api.example.com', ... })
 ```
 
-## SDK Configuration
+### Full Configuration
+
+```typescript
+interface ChatSDKConfig {
+  apiBaseUrl: string;
+  wsUrl?: string;
+  appId: string;
+  apiKey?: string;
+  environment: 'development' | 'staging' | 'production';
+  enableLogging?: boolean;
+  autoConnect?: boolean;
+  timeout?: number;
+}
+```
+
+## Starting a Product-Based Chat
 
 ```tsx
 const sdk = ChatSDK.getInstance();
 
-await sdk.init({
-  apiBaseUrl: 'https://your-api.example.com',
-  wsUrl: 'wss://your-ws.example.com',       // optional
-  appId: 'your-app-id',
-  apiKey: 'your-api-key',                    // optional
-  environment: 'production',
-  enableLogging: false,                      // optional
-  autoConnect: true,                         // optional
-  timeout: 30000,                            // optional, ms
-});
+const conversation = await sdk.chatUsers.startChatWithProduct(
+  'unique-group-id',   // externalGroupId for deduplication
+  'seller-user-id',    // the other participant's chat user ID
+  {
+    productId: 'prod-123',
+    productName: 'iPhone 15 Pro',
+    productImage: 'https://example.com/iphone.jpg',
+    price: 4999,
+    currency: 'QAR',
+    category: 'Electronics',
+  }
+);
 ```
 
-## Manager Classes (Advanced)
+## Manager Classes (Advanced Usage)
 
-For fine-grained control you can access individual managers through the SDK instance:
+Access individual managers through the SDK instance for fine-grained control:
 
 ```tsx
 const sdk = ChatSDK.getInstance();
@@ -181,70 +238,67 @@ const result = await sdk.media.uploadMedia({ file, type: 'image', conversationId
 sdk.socket.on('message_received', (data) => console.log('New message:', data));
 ```
 
-Or import the classes directly:
+## Internationalization
 
 ```tsx
-import {
-  AuthManager,
-  UserManager,
-  ConversationManager,
-  MessageManager,
-  MediaManager,
-  EventManager,
-  SocketManager,
-} from '@traiyani/chatsdk-react';
-```
+import { t, changeLanguage, getCurrentLanguage, isRTL } from '@traiyani/chatsdk-react';
 
-## i18n
+// Get translated string
+const message = t('welcome_message');
 
-```tsx
-import { changeLanguage, getCurrentLanguage, isRTL, t } from '@traiyani/chatsdk-react';
+// Change language
+changeLanguage('ar'); // or 'en'
 
-changeLanguage('ar'); // switches to Arabic + sets RTL
-console.log(t('conversations_title')); // translated string
+// Check if RTL
+if (isRTL()) {
+  // Apply RTL styles
+}
 ```
 
 Supported locales: `en`, `ar`.
 
-## TypeScript
+## TypeScript Support
 
-Full type declarations ship with the package — no extra `@types/*` install needed.
+Full type definitions are included. Import types directly:
 
 ```tsx
 import type {
-  ChatSDKConfig,
   ChatSDKUser,
   ChatSDKMessage,
   ChatSDKConversation,
+  ChatSDKConfig,
   ProductContext,
   ChatWindowProps,
   ConversationListProps,
 } from '@traiyani/chatsdk-react';
 ```
 
-## Bundler Compatibility
-
-| Bundler           | Works? |
-| ----------------- | ------ |
-| Vite              | Yes    |
-| webpack / CRA     | Yes    |
-| Next.js           | Yes    |
-| Parcel            | Yes    |
-| Rollup            | Yes    |
+## Styling
 
-No aliases, no special plugins — just `npm install` and import.
+Import the CSS file once in your app entry point:
 
-## What's Inside the Package
-
-```
-dist/
-  chatsdk-react.mjs   – ES module build
-  chatsdk-react.cjs   – CommonJS build
-  chatsdk.css          – single merged stylesheet
-  index.d.ts           – TypeScript declarations
-  *.map                – source maps
+```tsx
+import '@traiyani/chatsdk-react/dist/chatsdk.css';
 ```
 
+All theme colors, conversation styles, and utility classes are bundled into this single file.
+
+## Features
+
+- React 16.8+ with TypeScript
+- Real-time messaging via Socket.io
+- File/image uploads with progress
+- Product-based conversations
+- Block/unblock users
+- Theme support (light / dark / auto)
+- Internationalization (EN / AR with RTL)
+- Responsive design (desktop + mobile)
+- Message status (sending, sent, delivered, read)
+- Typing indicators
+- Unread message counts with badges
+- Search conversations
+- Pre-built — works with any bundler, no build config needed
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@traiyani/chatsdk-react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "ChatSDK React SDK - Pre-built, plug-and-play real-time chat components for React",
   "main": "dist/chatsdk-react.cjs",
   "module": "dist/chatsdk-react.mjs",