Question

是否可以在Microsoft chatbot模拟器的顶部创建自己的UI？如果是的话，我想将我的聊天机器人的用户界面设计为与BLUE-WHITES无聊的微缩模型用户界面完全不同。帮助我实现这个极客。

Answer 1

有很多方法可以做到这一点，你的方法将取决于你的能力和需求。如果这将是一个移动应用程序，最干净的方法可能是使用其他api使用xamarin进行此操作，以便轻松进行交叉平台。

如果你精通web反应并想要一个干净的Web视图（最好的web界面选项），你可以获得微软发布的代码库here.如果你需要它作为一个快速和脏的Web视图测试你可以在需要的地方注入css / js。

如果你的网络开发技能很低，但你想要一个干净稳定的界面（或者你不需要大量的自定义），你可以运行一个直线网站，只需修改为基本机器人托管的css / js文件。我建议下载这些托管文件而不是引用它们，这样你就可以直接操作它了。最后一个选项实际上就是我正在使用的。我计划在有足够时间的时候用xamarin构建一个漂亮的跨平台视图。

<!DOCTYPE html>
<html>
  <head>
    <!-- CSS -->
    <link href="https://unpkg.com/botframework-webchat/botchat.css" rel="stylesheet" />
  </head>
  <body>
    <div id="bot"/>
    <!-- JAVASCRIPT -->
    <script src="https://unpkg.com/botframework-webchat/botchat.js"></script>
    <script>
      BotChat.App({
        directLine: { secret: direct_line_secret },
        user: { id: 'userid' },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("bot"));
    </script>
  </body>
</html>

编辑：我忘了提到你可以在bitbucket上免费托管这个网页界面并将其嵌入你的移动应用程序中，你可以将它托管在你的机器人中。您可以通过创建一个新的index.html来实现这一点，并在web.config文件中使用default.htm，您可以将其替换为index.html并将其托管，而无需额外的Web主机。

Answer 2

编辑：看到诺克斯的好答案。

Edit2：我开始在mvc应用程序中为webchat bot设置外观： https://skinnedwebchatbot.azurewebsites.net/bot/webchat https://github.com/EricDahlvang/SkinnedWebChat

education.microsoft.com

上有一个经过修改的网络聊天Bot的示例

您也可以使用DirectLine api，并创建您喜欢的任何前端：https://docs.botframework.com/en-us/restapi/directline3/

Answer 3

如果要创建Bot框架模拟器的自定义版本，请分叉存储库Microsoft/BotFramework-Emulator。该应用程序本身使用Electron构建，与VSCode和Slack等应用程序背后的技术相同。

创建Microsoft Bot Framework的UI

3 个答案: