我们如何自定义发送图标并将麦克风添加到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显示两个按钮。问题在于，Web聊天（在未启用语音的情况下）依赖于一组类和方法来呈现并使发送按钮起作用。但是，启用语音并渲染麦克风后，某些类别将被覆盖，从而使发送按钮所需的类别无法访问。结果是，虽然两个按钮可以同时显示，但是只有语音按钮才可以工作。

前一段时间，我尝试过使用相同的概念，但是没有运气。要实现这一点，需要对网络聊天进行重大更改。

关于地图和位置：

这是更容易实现的，不需要任何其他软件包，根据您的需要，可能会有一些可用的软件包。

最简单的方法是将活动发布回机器人。这可以是在页面加载时，通过某些页面交互（即，按下按钮）等来完成的。BotFramework-WebChat存储库中的d.post-activity-event示例演示了如何设置类似的内容。

您可以使用浏览器内置的地理位置方法来获取用户的位置。这将需要用户同意共享他们的位置。如果征得他们的同意，则可以在发布的事件活动中将位置数据发送到机器人。

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

geoLoc();

希望获得帮助！