我们如何自定义发送图标并将麦克风添加到 Azure 聊天机器人框架？ (w.r.t.nodejs 或 javascript)

Question

此代码适用于我的 botframework v4，但是否可以提供自定义 azure 聊天机器人的选项？

我想添加麦克风按钮，还要集成地图选项。

网络聊天频道已与 LUIS 一起使用

const styleSet = window.WebChat.createStyleSet({
   bubbleFromUserBackground: '#d1e6f7',
   bubbleBackground: '#eeeeee',
   bubbleBorderColor: '#E6E6E6',
   bubbleBorderRadius: 2,
   bubbleBorderStyle: 'solid',
   bubbleBorderWidth: 1,
   sendBoxButtonColor: '#faa638',
   microphoneButtonColorOnDictate: '#F33',
   hideUploadButton: true,
   showSpokenText: true,
   hideSendBox: false
});        
// After generated, you can modify the CSS rules
styleSet.textContent = {
   ...styleSet.textContent,
   fontFamily: "'GothamMedium',Calibri,sans-serif",
   fontWeight: 'normal',
   fontSize: '10pt',
   color: '#848484',
   enableUploadThumbnail: true,
   uploadThumbnailContentType: 'image/jpeg',
   uploadThumbnailHeight: 360,
   uploadThumbnailQuality: 0.6,
   uploadThumbnailWidth: 720       
};
styleSet.MicrophoneButton = { ...styleSet.MicrophoneButton

};

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

      // Passing 'styleSet' when rendering Web Chat
      styleSet              
   },
   document.getElementById('webchat')
);
    </script>

Answer 1

关于发送按钮和麦克风按钮的样式：

从技术上讲，可以通过操作 DOM 来显示这两个按钮。问题在于网络聊天（当语音未启用时）依赖于一组类和方法来呈现和使发送按钮起作用。但是，当启用语音并呈现麦克风时，某些类会被覆盖，从而导致发送按钮所需的类无法访问。结果是，虽然两个按钮可以同时显示，但只有语音按钮可以使用。

我之前尝试过同样的概念，但没有成功。要做到这一点，需要对网络聊天进行重大更改。

关于地图和位置：

这更容易实现，不需要任何额外的软件包，但根据您的需要，有些软件包可能有用。

最简单的方法是 post activity 返回给机器人。这可以在页面加载时通过一些页面交互（即按下按钮）等进行。BotFramework-WebChat 存储库中的 d.post-activity-event 示例演示了如何设置类似的内容。

您可以使用浏览器内置的地理定位方法来获取用户的位置。这将要求用户同意共享他们的位置。如果他们同意，位置数据可以在 posted 事件 activity.

中发送给机器人

const geoLoc = async () => {
  await navigator.geolocation.getCurrentPosition(position => {
    console.log('Latitude: ', position.coords.latitude);
    console.log('Longitude: ', position.coords.longitude);
  });
}

geoLoc();

希望得到帮助！

我们如何自定义发送图标并将麦克风添加到 Azure 聊天机器人框架？ (w.r.t.nodejs 或 javascript)

How we can customize send icon and add microphone to a azure chat bot framework? (w.r.t. nodejs or javascript)

user-interface

botframework

chatbot

azure-bot-service

channels

网络聊天频道已与 LUIS 一起使用