时间戳

首页 > 解决方案 > 我们如何自定义发送图标并将麦克风添加到 azure 聊天机器人框架？（写 nodejs 或 javascript）

user-interface - 我们如何自定义发送图标并将麦克风添加到 azure 聊天机器人框架？（写 nodejs 或 javascript）

问题描述

此代码适用于我的 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>

标签： user-interfacebotframeworkchatbotazure-bot-servicechannels

解决方案

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

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

不久前我尝试过使用相同的概念，但没有成功。要实现这一目标，需要对网络聊天进行重大更改。

关于地图和位置：

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

实现这一目标的最简单方法是将活动发布回机器人。这可以在页面加载时，通过一些页面交互（即按下按钮）等。来自 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();

希望有帮助！

推荐阅读