文章/答案/技术大牛

发布

社区首页 >问答首页 >如何自定义BotFramework webchat react

问如何自定义BotFramework webchat react
EN

Stack Overflow用户

提问于 2022-02-06 08:02:01

回答 2查看 563关注 0票数 1

我刚刚开始探索僵尸框架和React的网络聊天。我一直试图到下面的UI。

当前ui图像

在docs中，它所提到的就像我们可以使用React控制UI的每个部分一样。但是我看不到可以修改webchat消息样式的示例，比如(user/bot消息高度、自定义消息输入字段)。在ReactWebChat组件中，有一个className支柱。

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

是否建议将这个类名与消息类选择器(. selector .webchat__bubble__content p)结合使用来自定义UI？

用户图像检查元件

谢谢

reactjs

botframework

web-chat

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-02-07 16:38:49

本文件应该能让你开始工作。大多数基本样式都可以通过配置设置获得。

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

<!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>

票数 0

Stack Overflow用户

发布于 2022-02-17 02:35:31

BotFramework-网络聊天有一个可以覆盖在以下位置的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}
    />
);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71005239

复制

相似问题

问如何自定义BotFramework webchat react
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何自定义BotFramework webchat reactEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何自定义BotFramework webchat react
EN