@robylon/web-react-sdk 1.1.28-staging.7 → 1.1.30-staging.0

package/README.md

@@ -1,6 +1,6 @@
-# Robylon SDK
+# Robylon Web React SDK
 
-The Robylon SDK provides chatbot functionality that can be used in both React and vanilla JavaScript applications.
+A lightweight SDK for integrating Robylon's AI-powered chatbot into your web applications. Available for both React and vanilla JavaScript.
 
 ## Installation
 
@@ -8,64 +8,238 @@ The Robylon SDK provides chatbot functionality that can be used in both React an
 
 ```bash
 npm install @robylon/web-react-sdk
+# or
+yarn add @robylon/web-react-sdk
 ```
 
 ### Vanilla JavaScript
 
 ```html
-<script src="https://staging-cdn.robylon.com/1.1.28-staging.6/robylon.min.js"></script>
+<script src="https://unpkg.com/@robylon/web-react-sdk/dist/umd/robylon-chatbot.js"></script>
 ```
 
-Or via npm:
-
-```bash
-npm install @robylon/web-react-sdk
-```
-
-## Usage
+## Quick Start
 
 ### React
 
 ```jsx
-import { Chatbot } from '@robylon/web-react-sdk/react';
+import { Chatbot } from "@robylon/web-react-sdk";
 
 function App() {
+  const handleChatbotEvent = (event) => {
+    logger.log(`Chatbot event: ${event.type}`, event);
+  };
+
   return (
-    <div className="App">
-      <Chatbot 
-        api_key="your-api-key"
-        user_id="optional-user-id"
-        onEvent={(event) => console.log(event)}
-      />
-    </div>
+    <Chatbot
+      api_key="your-api-key"
+      user_id="user-id"
+      user_token="optional-auth-token"
+      user_profile={{
+        email: "user@example.com",
+        name: "John Doe",
+        mobile: "1234567890",
+      }}
+      onEvent={handleChatbotEvent}
+    />
   );
 }
 ```
 
 ### Vanilla JavaScript
 
-```javascript
-// From CDN
-Robylon.create({
-  api_key: 'your-api-key',
-  user_id: 'optional-user-id',
-  onEvent: (event) => console.log(event)
-}).then(chatbot => {
-  // The chatbot is now ready to use
-  chatbot.show();
-});
+```html
+<!-- Include the SDK -->
+<script src="https://unpkg.com/@robylon/web-react-sdk/dist/umd/robylon-chatbot.js"></script>
+
+<script>
+  // Initialize the chatbot
+  const chatbot = new RobylonChatbot.RobylonChatbot({
+    api_key: "your-api-key",
+    user_id: "optional-user-id", // Optional
+    user_token: "optional-token", // Optional
+    user_profile: {
+      // Optional
+      name: "John Doe",
+      email: "user@example.com",
+      mobile: "1234567890",
+    },
+    onEvent: function (event) {
+      // Handle events
+      console.log("Event:", event);
+    },
+  });
+
+  // Control methods
+  // chatbot.show();    // Show the chatbot
+  // chatbot.hide();    // Hide the chatbot
+  // chatbot.toggle();  // Toggle visibility
+  // chatbot.destroy(); // Remove the chatbot
+</script>
+```
+
+## Configuration
+
+### Required Props
+
+- `api_key`: Your Robylon API key
+- `user_id`: Unique identifier for the current user
+
+### Optional Props
+
+- `user_token`: Authentication token for the user
+- `user_profile`: Object containing user information
+  - `email`: User's email address
+  - `name`: User's name
+  - `mobile`: User's mobile number
+- `onEvent`: Callback function to handle chatbot events
+
+### Event Handling
+
+The SDK emits various events that you can listen to using the `onEvent` prop. Each event has the following structure:
+
+```typescript
+interface ChatbotEvent {
+  type: ChatbotEventType;
+  timestamp: number;
+  data?: any;
+}
+```
+
+Available event types:
+
+```typescript
+enum ChatbotEventType {
+  CHATBOT_BUTTON_LOADED = "CHATBOT_BUTTON_LOADED", // When the chat button is rendered
+  CHATBOT_OPENED = "CHATBOT_OPENED", // When chat window is opened
+  CHATBOT_CLOSED = "CHATBOT_CLOSED", // When chat window is closed
+  CHATBOT_APP_READY = "CHATBOT_APP_READY", // When SDK is fully initialized
+  CHATBOT_LOADED = "CHATBOT_LOADED", // When chatbot iframe is loaded
+  CHAT_INITIALIZED = "CHAT_INITIALIZED", // When chat session is initialized
+  SESSION_REFRESHED = "SESSION_REFRESHED", // When chat session is refreshed
+  CHAT_INITIALIZATION_FAILED = "CHAT_INITIALIZATION_FAILED", // When initialization fails
+}
+```
+
+Example usage:
+
+```jsx
+function App() {
+  const handleChatbotEvent = (event) => {
+    switch (event.type) {
+      case "CHATBOT_BUTTON_CLICKED":
+        logger.log("Chat button clicked at:", new Date(event.timestamp));
+        break;
+      case "CHATBOT_OPENED":
+        logger.log("Chat window opened at:", new Date(event.timestamp));
+        break;
+      case "CHAT_INITIALIZED":
+        logger.log("Chat session initialized");
+        break;
+      case "CHAT_INITIALIZATION_FAILED":
+        console.error("Chat initialization failed:", event.data);
+        break;
+    }
+  };
+
+  return (
+    <Chatbot
+      api_key="your-api-key"
+      user_id="user-id"
+      onEvent={handleChatbotEvent}
+    />
+  );
+}
+```
+
+### Automatically Included Information
+
+The SDK automatically collects and includes the following system information:
+
+- `platform`: Always set to "web"
+- `os`: User's operating system
+- `browser`: User's browser type
+- `device`: Device type (desktop/mobile/tablet)
+- `screen_size`: User's screen dimensions (width and height)
+- `sdk_version`: Current version of the SDK
+
+## Features
+
+- Persistent chat interface
+- Responsive design for all screen sizes
+- Automatic system information collection
+- Customizable chat bubble
+- Session management
+- Secure communication channel
+- Cross-browser compatibility
+- Comprehensive event system
+
+## Browser Support
+
+The SDK supports all modern browsers and includes fallbacks for:
+
+- User agent detection
+- Screen size detection
+- Browser identification
+- Device type detection
+
+## Development
+
+### Creating Branches
 
-// From npm module
-import { create } from '@robylon/web-react-sdk';
+Always use the provided script to create new branches:
 
-create({
-  api_key: 'your-api-key',
-  user_id: 'optional-user-id'
-}).then(chatbot => {
-  chatbot.show();
+```bash
+npm run branch
+```
+
+This ensures proper version control and naming conventions.
+
+## Vanilla JavaScript API
+
+The vanilla JavaScript version provides a simple API for controlling the chatbot:
+
+### Initialization
+
+```javascript
+const chatbot = new RobylonChatbot.RobylonChatbot({
+  api_key: "your-api-key",
+  user_id: "optional-user-id",
+  user_token: "optional-token",
+  user_profile: {
+    name: "John Doe",
+    email: "user@example.com",
+  },
+  onEvent: function (event) {
+    console.log("Event:", event);
+  },
 });
 ```
 
-## Documentation
+### Methods
+
+- `chatbot.show()` - Shows the chatbot
+- `chatbot.hide()` - Hides the chatbot
+- `chatbot.toggle()` - Toggles the chatbot visibility
+- `chatbot.destroy()` - Removes the chatbot from the DOM
+
+### Event Handling
+
+Event handling works the same way as in the React version:
 
-For detailed documentation, please visit: [https://app.robylon.ai/docs](https://app.robylon.ai/docs)
+```javascript
+const chatbot = new RobylonChatbot.RobylonChatbot({
+  api_key: "your-api-key",
+  onEvent: function (event) {
+    switch (event.type) {
+      case "CHATBOT_BUTTON_CLICKED":
+        console.log("Chat button clicked at:", new Date(event.timestamp));
+        break;
+      case "CHATBOT_OPENED":
+        console.log("Chat window opened at:", new Date(event.timestamp));
+        break;
+      // Handle other events...
+    }
+  },
+});
+```