@ bottpress/ webchat (中文(简体) )

一个完全自定义的 React 库,可以让你无缝地将 Botpress Webchat 集成到您的 React 应用程序中.

特征

• 🎨 完全自定义 - 网络聊天经验的每个方面的样式和配置
• 🔌 简单整合 - 简单的安装和设置程序
• 🛠️ 弹性结构 - 使用预建组件或构建自定义执行
• 📱 响应 - 桌面和移动设备之间无缝工作

安装

# npm
npm install @botpress/webchat

# yarn
yarn add @botpress/webchat

# pnpm
pnpm install @botpress/webchat

所需资源

• 反应 18 或以上
• 一个已出版的 Botpress Bot
• 您的机器人客户端身份

快速启动

获取客户端身份

1. 打开你的机器人 自动压板
2. 导航到 网络聊天 在左侧边栏
3. 打开 特征 子菜单
4. 转到 高级设置 选项卡
5. 收到吗 客户身份

基本执行

import { Fab, Webchat } from '@botpress/webchat'
import { useState } from 'react'

function App() {
  const [isWebchatOpen, setIsWebchatOpen] = useState(false)

  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',
        }}
      />
    </>
  )
}

高级使用

自定义 Webchat 执行

为了更好地控制网络聊天的经验,请使用单个组件手动构建:

import { Container, Header, MessageList, Composer, useWebchat, Fab } from '@botpress/webchat'
import { useState, useMemo } from 'react'

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 (
    <>
      <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',
        }}
      />
    </>
  )
}

配置

使用 Webchat 组件

通过配置 configuration 道具 :

<Webchat
  clientId="YOUR_CLIENT_ID"
  configuration={{
    botName: 'My Bot',
    botAvatar: 'https://example.com/avatar.png',
    botDescription: 'Here to help!',
  }}
/>

自定义样式

使用 StylesheetProvider 自定义主题的组件 :

import { StylesheetProvider } from '@botpress/webchat'
;<StylesheetProvider />
{
  /* Your webchat components */
}

构成部分

• 网络聊天 - 全网聊天部分
• 集装箱 - 网络聊天集装箱包装器
• 页眉 - 装有机器人信息的自定义标题
• 信件列表 - 信件显示区域
• 作曲家 - 消息输入和文件上传
• 发型 - 浮动动作按钮
• 样式表提供程序 - 自定义型式提供者
• 使用网络聊天 - 网络聊天状态和方法

文档

详细文件、实例和API参考,访问:

Botpress Webchat 反应库文档

支助

• 📖 文档
• 💬 迪斯科德社区

许可证

这个图书馆是Botpress生态系统的一部分. 见 Botpress 仓库 获取许可证信息.