@botpress/webchat 2.1.14 → 2.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "2.1.14",
+  "version": "2.1.16",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.umd.cjs",

package/readme.md

@@ -0,0 +1,56 @@
+# Webchat
+
+## Installation
+
+```bash
+npm install @botpress/webchat # for npm
+yarn add @botpress/webchat # for yarn
+pnpm add @botpress/webchat # for pnpm
+```
+
+## Usage
+
+```tsx
+import { useEffect, useState } from 'react'
+import { getClient, Webchat, WebchatProvider, WebchatClient, Configuration } from '@botpress/webchat'
+
+// also known as the webhookId; You can copy it from the Botpress Dashboard
+const clientId = '$CLIENT_ID'
+
+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',
+}
+
+function App() {
+  const [client, setClient] = useState<WebchatClient | null>(null)
+
+  useEffect(() => {
+    const client = getClient({ clientId })
+    setClient(client)
+
+    // You can listen on events sent by the Webchat backend like this:
+    client.on('*', (ev) => {
+      console.log('Event:', ev)
+
+      // You can also call the Webchat backend API like this:
+      client.getUser().then((user) => {
+        console.log('User:', user)
+      })
+    })
+  }, [])
+
+  if (!client) {
+    return <div>Loading...</div>
+  }
+  return (
+    <WebchatProvider theme={{}} client={client} configuration={configuration} userData={userData}>
+      <Webchat />
+    </WebchatProvider>
+  )
+}
+
+export default App
+```