时间戳

首页 > 解决方案 > 如何使用 SDK V4 在 C# 中修改 WEBCHAT 中 BOT 和 USER 输入的 UI？

c# - 如何使用 SDK V4 在 C# 中修改 WEBCHAT 中 BOT 和 USER 输入的 UI？

问题描述

我正在尝试更改我的网络聊天机器人的布局，以便： 1. 用户消息有不同的颜色和气泡 2. 机器人回复应该有不同的颜色和气泡 谁能解释或指导我一步一步的代码相同为了使用 C# 在 BOT V4 中应用？一步一步我的意思是： 1. 如果有任何配置或设置要在哪里、做什么和以什么顺序完成 2. 如果有任何代码要在哪里编写、如何编写以及在哪个区域或部分编写什么代码，如明智的详细步骤步骤指南，对不起，但我是机器人和编码的新手，因此询问详细指南

预期结果：机器人和用户应该在不同的 UI 或颜色或气泡中实际结果：需要逐步指导如何实现它。

标签： c#botframeworkchatbot

解决方案

您的案例在网络聊天的 GitHub 页面中的“自定义”部分中进行了描述。

关于气泡的颜色：https ://github.com/Microsoft/BotFramework-WebChat/blob/master/SAMPLES.md#change-font-or-color

如您所见，它如下所示：

<!DOCTYPE html>
<html>
  <body>
    <div id="webchat" role="main"></div>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
      const styleOptions = {
        bubbleBackground: 'rgba(0, 0, 255, .1)',
        bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
      };

      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ secret: 'YOUR_BOT_SECRET' }),

        // Passing "styleOptions" when rendering Web Chat
        styleOptions
      }, document.getElementById('webchat'));
    </script>
  </body>
</html>

推荐阅读