@traiyani/chatsdk-react 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +53 -221
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,238 +1,66 @@
1
- # @traiyani/chatsdk-react
1
+ # ChatSDK React SDK
2
2
 
3
- 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.
3
+ React SDK for ChatSDK - Real-time chat solution with product-based conversations, Socket.io, instant messaging, and file sharing.
4
4
 
5
- ## Installation
6
-
7
- ```bash
8
- npm install @traiyani/chatsdk-react axios socket.io-client
9
- ```
10
-
11
- ### Peer Dependencies
12
-
13
- | Package | Version |
14
- | ------------------- | -------- |
15
- | `react` | >=16.8.0 |
16
- | `react-dom` | >=16.8.0 |
17
- | `axios` | >=0.21.0 |
18
- | `socket.io-client` | >=4.0.0 |
19
-
20
- ## Quick Start
21
-
22
- ```tsx
23
- import React, { useState, useEffect } from 'react';
24
- import { ChatSDK, ConversationList, ChatWindow } from '@traiyani/chatsdk-react';
25
- import '@traiyani/chatsdk-react/dist/chatsdk.css';
26
-
27
- function App() {
28
- const [sdk] = useState(() => ChatSDK.getInstance());
29
- const [currentUser, setCurrentUser] = useState(null);
30
- const [selectedConversation, setSelectedConversation] = useState(null);
31
-
32
- useEffect(() => {
33
- async function init() {
34
- await sdk.init({
35
- apiBaseUrl: 'https://your-api.example.com',
36
- appId: 'your-app-id',
37
- environment: 'production',
38
- });
39
-
40
- const user = await sdk.connect('external-user-id');
41
- setCurrentUser(user);
42
- }
43
- init();
44
- }, []);
45
-
46
- if (!currentUser) return <div>Loading…</div>;
47
-
48
- return (
49
- <div style={{ display: 'flex', height: '100vh' }}>
50
- <ConversationList
51
- currentUser={currentUser}
52
- onSelectConversation={setSelectedConversation}
53
- selectedConversationId={selectedConversation?.id}
54
- />
55
- <ChatWindow
56
- conversation={selectedConversation}
57
- currentUser={currentUser}
58
- onClose={() => setSelectedConversation(null)}
59
- onBack={() => setSelectedConversation(null)}
60
- />
61
- </div>
62
- );
63
- }
64
-
65
- export default App;
66
- ```
67
-
68
- ## Components
69
-
70
- ### `<ConversationList />`
71
-
72
- Displays the list of conversations for the current user.
73
-
74
- | Prop | Type | Required | Description |
75
- | -------------------------- | ----------------------------------- | -------- | -------------------------------------- |
76
- | `currentUser` | `ChatSDKUser` | Yes | The authenticated user |
77
- | `onSelectConversation` | `(conv: Conversation) => void` | Yes | Callback when a conversation is tapped |
78
- | `selectedConversationId` | `string` | No | Highlights the active conversation |
79
-
80
- ### `<ChatWindow />`
81
-
82
- Full chat window with messaging, file sharing, and real-time updates.
83
-
84
- | Prop | Type | Required | Description |
85
- | ---------------- | ----------------------- | -------- | ------------------------------- |
86
- | `conversation` | `Conversation \| null` | Yes | The active conversation |
87
- | `currentUser` | `ChatSDKUser` | Yes | The authenticated user |
88
- | `onClose` | `() => void` | No | Called when close button pressed |
89
- | `onBack` | `() => void` | No | Called when back button pressed |
90
-
91
- ### `<ThemeToggle />`
92
-
93
- A button that cycles through light, dark, and auto themes.
94
-
95
- | Prop | Type | Required | Description |
96
- | ------------ | --------- | -------- | ------------------------ |
97
- | `className` | `string` | No | Additional CSS classes |
98
- | `showLabel` | `boolean` | No | Show current theme label |
99
-
100
- > Wrap your app with `<ThemeProvider>` to use `<ThemeToggle />`.
101
-
102
- ## Hooks
103
-
104
- ### `useTheme()`
105
-
106
- Standalone hook for theme management.
107
-
108
- ```tsx
109
- import { useTheme } from '@traiyani/chatsdk-react';
110
-
111
- function MyComponent() {
112
- const { theme, actualTheme, setTheme, toggleTheme } = useTheme();
113
- return <button onClick={toggleTheme}>Current: {actualTheme}</button>;
114
- }
115
- ```
116
-
117
- ### `useThemeContext()`
118
-
119
- Same API as `useTheme()`, but reads from the nearest `<ThemeProvider>` so all descendants share state.
120
-
121
- ## Theme System
5
+ ## Features
122
6
 
123
- ```tsx
124
- import { ThemeProvider, ThemeToggle } from '@traiyani/chatsdk-react';
125
-
126
- function App() {
127
- return (
128
- <ThemeProvider>
129
- <ThemeToggle showLabel />
130
- {/* chat components */}
131
- </ThemeProvider>
132
- );
133
- }
134
- ```
135
-
136
- You can also initialize the theme imperatively:
137
-
138
- ```tsx
139
- import { initializeTheme } from '@traiyani/chatsdk-react';
140
-
141
- initializeTheme(); // applies saved or system theme to <html>
142
- ```
143
-
144
- ## SDK Configuration
145
-
146
- ```tsx
147
- const sdk = ChatSDK.getInstance();
148
-
149
- await sdk.init({
150
- apiBaseUrl: 'https://your-api.example.com',
151
- wsUrl: 'wss://your-ws.example.com', // optional
152
- appId: 'your-app-id',
153
- apiKey: 'your-api-key', // optional
154
- environment: 'production',
155
- enableLogging: false, // optional
156
- autoConnect: true, // optional
157
- timeout: 30000, // optional, ms
158
- });
159
- ```
160
-
161
- ## Manager Classes (Advanced)
7
+ - Real-time messaging via Socket.IO
8
+ - Product-based conversations with metadata
9
+ - File/image/video uploads and sharing
10
+ - Block/unblock users
11
+ - Internationalization (English + Arabic with RTL)
12
+ - Dark mode support (light / dark / auto)
13
+ - Typing indicators
14
+ - Read receipts and message status
15
+ - Unread message counts
16
+ - Ready-made UI components (Conversation List + Chat Window)
17
+ - Pre-built — works with any bundler, zero config
162
18
 
163
- For fine-grained control you can access individual managers through the SDK instance:
164
-
165
- ```tsx
166
- const sdk = ChatSDK.getInstance();
19
+ ## Requirements
167
20
 
168
- // Users
169
- const users = await sdk.users.searchUsers({ query: 'john', limit: 10 });
21
+ - **React**: >= 16.8.0
22
+ - **Node.js**: >= 16.0.0
170
23
 
171
- // Conversations
172
- const convos = await sdk.conversations.getConversations({ limit: 20 });
173
-
174
- // Messages
175
- const msgs = await sdk.messages.getMessages({ conversationId: 'abc', limit: 50 });
176
-
177
- // Media
178
- const result = await sdk.media.uploadMedia({ file, type: 'image', conversationId: 'abc' });
179
-
180
- // Real-time events
181
- sdk.socket.on('message_received', (data) => console.log('New message:', data));
182
- ```
183
-
184
- Or import the classes directly:
185
-
186
- ```tsx
187
- import {
188
- AuthManager,
189
- UserManager,
190
- ConversationManager,
191
- MessageManager,
192
- MediaManager,
193
- EventManager,
194
- SocketManager,
195
- } from '@traiyani/chatsdk-react';
196
- ```
197
-
198
- ## i18n
199
-
200
- ```tsx
201
- import { changeLanguage, getCurrentLanguage, isRTL, t } from '@traiyani/chatsdk-react';
24
+ ## Installation
202
25
 
203
- changeLanguage('ar'); // switches to Arabic + sets RTL
204
- console.log(t('conversations_title')); // translated string
26
+ ```bash
27
+ npm install @traiyani/chatsdk-react axios socket.io-client
205
28
  ```
206
29
 
207
- Supported locales: `en`, `ar`.
208
-
209
- ## TypeScript
210
-
211
- Full type declarations ship with the package — no extra `@types/*` install needed.
30
+ Import the stylesheet in your app's entry point:
212
31
 
213
32
  ```tsx
214
- import type {
215
- ChatSDKConfig,
216
- ChatSDKUser,
217
- ChatSDKMessage,
218
- ChatSDKConversation,
219
- ProductContext,
220
- ChatWindowProps,
221
- ConversationListProps,
222
- } from '@traiyani/chatsdk-react';
33
+ import '@traiyani/chatsdk-react/dist/chatsdk.css';
223
34
  ```
224
35
 
225
- ## Bundler Compatibility
226
-
227
- | Bundler | Works? |
228
- | ----------------- | ------ |
229
- | Vite | Yes |
230
- | webpack / CRA | Yes |
231
- | Next.js | Yes |
232
- | Parcel | Yes |
233
- | Rollup | Yes |
36
+ ## Quick Start
234
37
 
235
- No aliases, no special plugins — just `npm install` and import.
38
+ See [DOCUMENTATION.md](./DOCUMENTATION.md) for the complete integration guide covering:
39
+
40
+ 1. SDK Initialization
41
+ 2. User Authentication (login with `isLoggedinUser = true`)
42
+ 3. Verify Other User (with `isLoggedinUser = false`)
43
+ 4. Generate `externalGroupId` (GUID for fast room lookup)
44
+ 5. Start Conversations (direct + product-based with metadata)
45
+ 6. Using Ready-Made UI Components (ConversationList + ChatWindow)
46
+ 7. Sending Messages
47
+ 8. File Uploads
48
+ 9. Unread Message Counts
49
+ 10. Block & Unblock Users
50
+ 11. Real-Time Events
51
+ 12. Theme Support
52
+ 13. Internationalization (i18n)
53
+ 14. Logout & Cleanup
54
+ 15. Troubleshooting
55
+
56
+ ## Peer Dependencies
57
+
58
+ | Package | Version |
59
+ |---------|---------|
60
+ | `react` | >= 16.8.0 |
61
+ | `react-dom` | >= 16.8.0 |
62
+ | `axios` | >= 0.21.0 |
63
+ | `socket.io-client` | >= 4.0.0 |
236
64
 
237
65
  ## What's Inside the Package
238
66
 
@@ -248,3 +76,7 @@ dist/
248
76
  ## License
249
77
 
250
78
  MIT
79
+
80
+ ## Support
81
+
82
+ - Documentation: [DOCUMENTATION.md](./DOCUMENTATION.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@traiyani/chatsdk-react",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "ChatSDK React SDK - Pre-built, plug-and-play real-time chat components for React",
5
5
  "main": "dist/chatsdk-react.cjs",
6
6
  "module": "dist/chatsdk-react.mjs",