如何自定义 BotFramework 网络聊天反应 UI

Question

我刚刚开始使用 React 探索 botframework 网络聊天。我试过一直到 UI.

以下

current ui image

在文档中，它提到我们可以使用 React 控制 UI 的每个部分。但是我看不到可以修改网络聊天消息样式的示例，例如（user/bot 消息高度，自定义消息输入字段）。在 ReactWebChat 组件中，有一个 className prop.

<ReactWebChat 
    className={`${className || ''} web-chat`}

是否建议将此 class 名称与消息 class 选择器 (.web-chat .webchat__bubble__content p) 结合使用来自定义 UI？

user image inspect element

谢谢

Answer 1

This document 应该可以帮助您入门。大多数基本样式可通过 configuration-settings.

获得

例如，文本消息的边框可以通过样式选项实现：

<!DOCTYPE html>
<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
  <div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
  <script>
     // Set the CSS rules.
     const styleSet = window.WebChat.createStyleSet({
         ...
         bubbleBorderColor: '#E6E6E6',
         bubbleBorderRadius: 2,
         bubbleBorderStyle: 'solid',
         bubbleBorderWidth: 1,
         ...
      });

    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
          token: '<Your Direct Line token>'}),
      styleSet
    }, document.getElementById('webchat'));
    
  </script>
</body>

Answer 2

BotFramework-WebChat 有一个您可以覆盖的 StyleOptions 列表，位于此处：

https://github.com/microsoft/BotFramework-WebChat/blob/main/packages/api/src/defaultStyleOptions.ts

可以使用 WebChat 的 activityMiddleware 呈现您自己的自定义消息气泡组件：

const activityMiddleware = () => (next: any) => (...args) => {
    const [card] = args;
    if (card.activity) {
        if (condition) {
            return (
                <div key={card.activity.id} className='custom-class'>
                    {next(card)(children)}
                </div>
            )
        }
    }
}

... 

return (
    <ReactWebChat
        activityMiddleware={activityMiddleware}
        directLine={adapter}
        styleOptions={styleOptions}
    />
);

如何自定义 BotFramework 网络聊天反应 UI

How to customize BotFramework webchat react UI

reactjs

web-chat

botframework