@botpress/webchat 4.0.1 → 4.0.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @botpress/webchat@4.0.1 build /home/runner/work/genisys/genisys/packages/webchat-components
+> @botpress/webchat@4.0.2 build /home/runner/work/genisys/genisys/packages/webchat-components
 > vite build
 
 vite v5.4.8 building for production...
@@ -9,13 +9,13 @@ rendering chunks...
 
 [vite:dts] Start generate declaration files...
 computing gzip size...
+dist/style.css   49.55 kB │ gzip:   8.84 kB
+dist/index.js   666.14 kB │ gzip: 180.07 kB
 [vite:dts] Start rollup declaration files...
 Analysis will use the bundled TypeScript version 5.4.2
 *** The target project appears to use TypeScript 5.6.2 which is newer than the bundled compiler engine; consider upgrading API Extractor.
-dist/style.css   49.55 kB │ gzip:   8.84 kB
-dist/index.js   666.14 kB │ gzip: 180.07 kB
-[vite:dts] Declaration files built in 20920ms.
+[vite:dts] Declaration files built in 19670ms.
 
 dist/style.css       49.55 kB │ gzip:   8.84 kB
 dist/index.umd.cjs  443.57 kB │ gzip: 145.67 kB
-✓ built in 25.49s
+✓ built in 24.49s

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.umd.cjs",
@@ -97,8 +97,8 @@
     "vite-plugin-libcss": "^1.1.1",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "1.6.0",
-    "@repo/eslint-config": "0.0.0",
-    "@repo/typescript-config": "0.0.0"
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.0"
   },
   "scripts": {
     "check:type": "tsc --noEmit",

package/readme.md

@@ -1,56 +1,215 @@
-# Webchat
+# @botpress/webchat
+
+A fully customizable React library that lets you seamlessly integrate Botpress Webchat into your React applications.
+
+## Features
+
+- 🎨 **Fully Customizable** - Style and configure every aspect of the webchat experience
+- 🔌 **Easy Integration** - Simple installation and setup process
+- 🛠️ **Flexible Architecture** - Use pre-built components or build custom implementations
+- 📱 **Responsive** - Works seamlessly across desktop and mobile devices
 
 ## Installation
 
 ```bash
-npm install @botpress/webchat # for npm
-yarn add @botpress/webchat # for yarn
-pnpm add @botpress/webchat # for pnpm
+# npm
+npm install @botpress/webchat
+
+# yarn
+yarn add @botpress/webchat
+
+# pnpm
+pnpm install @botpress/webchat
 ```
 
-## Usage
+## Requirements
 
-```tsx
-import { useEffect, useState } from 'react'
-import { getClient, Webchat, WebchatProvider, WebchatClient, Configuration } from '@botpress/webchat'
+- React 18 or higher
+- A published Botpress bot
+- Your bot's Client ID
 
-// also known as the webhookId; You can copy it from the Botpress Dashboard
-const clientId = '$CLIENT_ID'
+## Quick Start
 
-const userData = { foo: 'bar' }
-const configuration: Configuration = {
-  botAvatar: 'https://upload.wikimedia.org/wikipedia/commons/9/91/T-bone-raw-MCB.jpg',
-  botDescription: 'Hello, world!',
-  botName: 'Hello Bot',
-}
+### Get Your Client ID
+
+1. Open your bot in the [Botpress Dashboard](https://app.botpress.cloud)
+2. Navigate to **Webchat** in the left sidebar
+3. Open the **Features** sub menu
+4. Go to the **Advanced Settings** tab
+5. Copy your **Client ID**
+
+### Basic Implementation
+
+```jsx
+import { Fab, Webchat } from '@botpress/webchat'
+import { useState } from 'react'
 
 function App() {
-  const [client, setClient] = useState<WebchatClient | null>(null)
+  const [isWebchatOpen, setIsWebchatOpen] = useState(false)
 
-  useEffect(() => {
-    const client = getClient({ clientId })
-    setClient(client)
+  return (
+    <>
+      <Webchat
+        clientId="YOUR_CLIENT_ID"
+        style={{
+          width: '400px',
+          height: '600px',
+          display: isWebchatOpen ? 'flex' : 'none',
+          position: 'fixed',
+          bottom: '90px',
+          right: '20px',
+        }}
+      />
+      <Fab
+        onClick={() => setIsWebchatOpen(!isWebchatOpen)}
+        style={{
+          position: 'fixed',
+          bottom: '20px',
+          right: '20px',
+          width: '64px',
+          height: '64px',
+        }}
+      />
+    </>
+  )
+}
+```
+
+## Advanced Usage
+
+### Custom Webchat Implementation
 
-    // You can listen on events sent by the Webchat backend like this:
-    client.on('*', (ev) => {
-      console.log('Event:', ev)
+For more control over the webchat experience, build it manually using individual components:
 
-      // You can also call the Webchat backend API like this:
-      client.getUser().then((user) => {
-        console.log('User:', user)
-      })
-    })
-  }, [])
+```jsx
+import { Container, Header, MessageList, Composer, useWebchat, Fab } from '@botpress/webchat'
+import { useState, useMemo } from 'react'
 
-  if (!client) {
-    return <div>Loading...</div>
+function App() {
+  const [isWebchatOpen, setIsWebchatOpen] = useState(false)
+  const { client, messages, isTyping, user, clientState, newConversation } = useWebchat({
+    clientId: 'YOUR_CLIENT_ID',
+  })
+
+  const config = {
+    botName: 'SupportBot',
+    botAvatar: 'https://example.com/avatar.png',
+    botDescription: 'Your virtual assistant',
   }
+
+  const enrichedMessages = useMemo(
+    () =>
+      messages.map((message) => {
+        const direction = message.authorId === user?.userId ? 'outgoing' : 'incoming'
+        return {
+          ...message,
+          direction,
+          sender:
+            direction === 'outgoing'
+              ? { name: user?.name ?? 'You', avatar: user?.pictureUrl }
+              : { name: config.botName, avatar: config.botAvatar },
+        }
+      }),
+    [messages, user, config]
+  )
+
   return (
-    <WebchatProvider client={client} configuration={configuration} userData={userData}>
-      <Webchat />
-    </WebchatProvider>
+    <>
+      <Container
+        connected={clientState !== 'disconnected'}
+        style={{
+          width: '500px',
+          height: '800px',
+          display: isWebchatOpen ? 'flex' : 'none',
+          position: 'fixed',
+          bottom: '90px',
+          right: '20px',
+        }}
+      >
+        <Header
+          closeWindow={() => setIsWebchatOpen(false)}
+          restartConversation={newConversation}
+          configuration={{
+            botName: config.botName,
+            botAvatar: config.botAvatar,
+            botDescription: config.botDescription,
+          }}
+        />
+        <MessageList
+          botName={config.botName}
+          botDescription={config.botDescription}
+          isTyping={isTyping}
+          messages={enrichedMessages}
+          sendMessage={client?.sendMessage}
+        />
+        <Composer
+          connected={clientState !== 'disconnected'}
+          sendMessage={client?.sendMessage}
+          uploadFile={client?.uploadFile}
+          composerPlaceholder="Type a message..."
+        />
+      </Container>
+      <Fab
+        onClick={() => setIsWebchatOpen(!isWebchatOpen)}
+        style={{
+          position: 'fixed',
+          bottom: '20px',
+          right: '20px',
+        }}
+      />
+    </>
   )
 }
+```
+
+## Configuration
+
+### Using the Webchat Component
+
+Pass configuration through the `configuration` prop:
+
+```jsx
+<Webchat
+  clientId="YOUR_CLIENT_ID"
+  configuration={{
+    botName: 'My Bot',
+    botAvatar: 'https://example.com/avatar.png',
+    botDescription: 'Here to help!',
+  }}
+/>
+```
+
+### Custom Styling
+
+Use the `StylesheetProvider` component for custom themes:
 
-export default App
+```jsx
+import { StylesheetProvider } from '@botpress/webchat'
+;<StylesheetProvider>{/* Your webchat components */}</StylesheetProvider>
 ```
+
+## Components
+
+- **Webchat** - All-in-one webchat component
+- **Container** - Webchat container wrapper
+- **Header** - Customizable header with bot info
+- **MessageList** - Message display area
+- **Composer** - Message input and file upload
+- **Fab** - Floating action button
+- **StylesheetProvider** - Custom styling provider
+- **useWebchat** - Hook for webchat state and methods
+
+## Documentation
+
+For detailed documentation, examples, and API reference, visit:
+
+**[Botpress Webchat React Library Documentation](https://www.botpress.com/docs/webchat/react-library/get-started)**
+
+## Support
+
+- 📖 [Documentation](https://www.botpress.com/docs)
+- 💬 [Discord Community](https://discord.com/invite/botpress)
+
+## License
+
+This library is part of the Botpress ecosystem. See the [Botpress repository](https://github.com/botpress/botpress) for license information.