diff --git a/scripts/publish-react-components.js b/scripts/publish-react-components.js index b52d51de6..cbe894712 100644 --- a/scripts/publish-react-components.js +++ b/scripts/publish-react-components.js @@ -203,52 +203,13 @@ function App() { return ( - - console.log('Conversation loaded')} - onError={(err) => console.error('Error:', err)} - /> - - - ); -} -\`\`\` - -### Multiple Conversations - -\`\`\`jsx -import React, { useState } from 'react'; -import { ChatwootProvider, ChatwootConversation } from '@chatwoot/react-components'; - -function App() { - const [activeConversation, setActiveConversation] = useState(123); - - return ( - - - - setActiveConversation(123)}> - Conversation 123 - - setActiveConversation(456)}> - Conversation 456 - - - - - - - + ); } @@ -262,8 +223,9 @@ Root provider component that manages global configuration and initialization. **Props:** - \`baseURL\` (string, required): Your Chatwoot instance URL -- \`userId\` (string|number, required): User identifier +- \`accountId\` (string|number, required): account identifier - \`userToken\` (string, required): Authentication token +- \`conversationId\` (number, required): ID of the conversation to display - \`websocketURL\` (string, optional): WebSocket endpoint, defaults to baseURL/cable - \`pubsubToken\` (string, optional): PubSub token, defaults to userToken @@ -271,13 +233,6 @@ Root provider component that manages global configuration and initialization. Component that renders a specific conversation interface. -**Props:** -- \`conversationId\` (string|number, required): ID of the conversation to display -- \`className\` (string, optional): CSS class name -- \`style\` (object, optional): Inline styles -- \`onLoad\` (function, optional): Callback when conversation loads -- \`onError\` (function, optional): Callback when an error occurs - ### useChatwoot Hook to access the Chatwoot configuration within a ChatwootProvider. @@ -290,56 +245,6 @@ function MyComponent() { // Use configuration as needed } \`\`\` - -## Demo Components - -The package also includes demo components for testing: - -### HelloWorld - -A simple React component with counter functionality. - -### VueWebComponentWrapper - -A React wrapper demonstrating Vue Web Component integration. - -## Architecture - -This package provides: -- 🔄 **Vue → Web Components**: Using Vue 3's \`defineCustomElement\` -- ⚛️ **React Integration**: Clean React API wrapping Web Components -- 📦 **Dual Build**: ES modules + CommonJS for maximum compatibility -- 🎨 **CSS Isolation**: Scoped styles via Shadow DOM -- 🌐 **Global State**: Centralized Chatwoot ecosystem initialization -- 🔌 **Real-time**: ActionCable integration for live updates - -## Requirements - -- React 16.8+ (hooks support) -- Modern browsers with Web Components support -- Valid Chatwoot instance with API access - -## Error Handling - -The components include built-in error handling: - -\`\`\`jsx - { - console.error('Chatwoot error:', error); - // Handle error (show notification, fallback UI, etc.) - }} -/> -\`\`\` - -## Development - -This package is part of the [Chatwoot](https://chatwoot.com) project. - -## License - -MIT © [Chatwoot](https://chatwoot.com) `; fs.writeFileSync(path.join(packageDir, 'README.md'), readme);