@traiyani/chatsdk-react 1.0.1 → 1.0.2

package/README.md

@@ -2,303 +2,81 @@
 
 React SDK for ChatSDK - Real-time chat solution with product-based conversations, Socket.io, instant messaging, and file sharing.
 
-## Installation
+## Features
 
-```bash
-npm install @traiyani/chatsdk-react axios socket.io-client
-```
+- Real-time messaging via Socket.IO
+- Product-based conversations with metadata
+- File/image/video uploads and sharing
+- Block/unblock users
+- Internationalization (English + Arabic with RTL)
+- Dark mode support (light / dark / auto)
+- Typing indicators
+- Read receipts and message status
+- Unread message counts
+- Ready-made UI components (Conversation List + Chat Window)
+- Pre-built — works with any bundler, zero config
 
-### Peer Dependencies
+## Requirements
 
-Ensure your project has these installed:
+- **React**: >= 16.8.0
+- **Node.js**: >= 16.0.0
+
+## Installation
 
 ```bash
-npm install react react-dom axios socket.io-client
+npm install @traiyani/chatsdk-react 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
+Import the stylesheet in your app's entry point:
 
 ```tsx
-import React, { useState, useEffect } from 'react';
-import { ChatSDK, ChatWindow, ConversationList } from '@traiyani/chatsdk-react';
 import '@traiyani/chatsdk-react/dist/chatsdk.css';
-
-function App() {
-  const [currentUser, setCurrentUser] = useState(null);
-  const [selectedConversation, setSelectedConversation] = useState(null);
-
-  useEffect(() => {
-    const init = async () => {
-      const sdk = ChatSDK.getInstance();
-
-      await sdk.init({
-        apiBaseUrl: 'https://your-chat-api.com',
-        appId: 'your-app-id',
-        environment: 'production',
-        enableLogging: false,
-        autoConnect: false,
-      });
-
-      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>;
-
-  return (
-    <div style={{ display: 'flex', height: '100vh' }}>
-      <ConversationList
-        currentUser={currentUser}
-        onSelectConversation={setSelectedConversation}
-        selectedConversationId={selectedConversation?.id}
-      />
-      {selectedConversation && (
-        <ChatWindow
-          conversation={selectedConversation}
-          currentUser={currentUser}
-          onClose={() => setSelectedConversation(null)}
-          onBack={() => setSelectedConversation(null)}
-        />
-      )}
-    </div>
-  );
-}
-```
-
-**Zero build configuration changes required. Works with Vite, webpack, Next.js, Create React App, Parcel, and any React bundler.**
-
-## Components
-
-### ChatWindow
-
-Displays the chat interface with messages, file uploads, block/unblock, and real-time updates.
-
-```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
-
-Displays the list of conversations with search, unread counts, and real-time updates.
-
-```tsx
-<ConversationList
-  currentUser={currentUser}
-  onSelectConversation={handleSelect}
-  selectedConversationId={activeConversationId}
-/>
-```
-
-| 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
-
-A button that cycles through light, dark, and auto themes. Must be wrapped in `<ThemeProvider>`.
-
-```tsx
-<ThemeProvider>
-  <ThemeToggle showLabel />
-</ThemeProvider>
-```
-
-| Prop | Type | Required | Description |
-|---|---|---|---|
-| `className` | `string` | No | Additional CSS class name |
-| `showLabel` | `boolean` | No | Show current theme label text |
-
-## Hooks
-
-### useTheme
-
-Theme management (light, dark, auto).
-
-```tsx
-import { useTheme } from '@traiyani/chatsdk-react';
-
-function MyComponent() {
-  const { theme, actualTheme, setTheme, toggleTheme } = useTheme();
-  return <button onClick={toggleTheme}>Current: {actualTheme}</button>;
-}
-```
-
-### useThemeContext
-
-Same API as `useTheme`, but reads from the nearest `<ThemeProvider>` so all descendants share state.
-
-```tsx
-import { useThemeContext } from '@traiyani/chatsdk-react';
-
-const { theme, actualTheme, setTheme, toggleTheme } = useThemeContext();
-```
-
-## Configuration
-
-Config values can come from any source — environment variables, server-rendered props, a config file, or hardcoded values:
-
-```tsx
-// 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, ... })
-
-// Hardcoded / server-rendered
-await sdk.init({ apiBaseUrl: 'https://chat-api.example.com', ... })
-```
-
-### 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();
-
-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 Usage)
-
-Access individual managers through the SDK instance for fine-grained control:
-
-```tsx
-const sdk = ChatSDK.getInstance();
-
-// Users
-const users = await sdk.users.searchUsers({ query: 'john', limit: 10 });
-
-// Conversations
-const convos = await sdk.conversations.getConversations({ limit: 20 });
-
-// Messages
-const msgs = await sdk.messages.getMessages({ conversationId: 'abc', limit: 50 });
-
-// Media
-const result = await sdk.media.uploadMedia({ file, type: 'image', conversationId: 'abc' });
-
-// Real-time events
-sdk.socket.on('message_received', (data) => console.log('New message:', data));
 ```
 
-## Internationalization
-
-```tsx
-import { t, changeLanguage, getCurrentLanguage, isRTL } from '@traiyani/chatsdk-react';
+## Quick Start
 
-// Get translated string
-const message = t('welcome_message');
+See [DOCUMENTATION.md](./DOCUMENTATION.md) for the complete integration guide covering:
+
+1. SDK Initialization
+2. User Authentication (login with `isLoggedinUser = true`)
+3. Verify Other User (with `isLoggedinUser = false`)
+4. Generate `externalGroupId` (GUID for fast room lookup)
+5. Start Conversations (direct + product-based with metadata)
+6. Using Ready-Made UI Components (ConversationList + ChatWindow)
+7. Sending Messages
+8. File Uploads
+9. Unread Message Counts
+10. Block & Unblock Users
+11. Real-Time Events
+12. Theme Support
+13. Internationalization (i18n)
+14. Logout & Cleanup
+15. Troubleshooting
+
+## Peer Dependencies
+
+| Package | Version |
+|---------|---------|
+| `react` | >= 16.8.0 |
+| `react-dom` | >= 16.8.0 |
+| `axios` | >= 0.21.0 |
+| `socket.io-client` | >= 4.0.0 |
 
-// Change language
-changeLanguage('ar'); // or 'en'
+## What's Inside the Package
 
-// Check if RTL
-if (isRTL()) {
-  // Apply RTL styles
-}
 ```
-
-Supported locales: `en`, `ar`.
-
-## TypeScript Support
-
-Full type definitions are included. Import types directly:
-
-```tsx
-import type {
-  ChatSDKUser,
-  ChatSDKMessage,
-  ChatSDKConversation,
-  ChatSDKConfig,
-  ProductContext,
-  ChatWindowProps,
-  ConversationListProps,
-} from '@traiyani/chatsdk-react';
+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
 ```
 
-## Styling
-
-Import the CSS file once in your app entry point:
-
-```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
+
+## Support
+
+- Documentation: [DOCUMENTATION.md](./DOCUMENTATION.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@traiyani/chatsdk-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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",