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

Question

This code works for me botframework v4, but can there are options to customize azure chat bot?

i want to add microphone button , also integrate map option as well.

webchat channel has been used with 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

Regarding styling both the send button and microphone button:

Technically, it is possible to display both buttons by manipulating the DOM. The problem is that Web Chat (when speech is not enabled) relies on a set of classes and methods for rendering and making the send button functional. But, when speech is enabled and the microphone is rendered, certain classes are overwritten making the classes needed for the send button unreachable. The result is that, while both buttons can be displayed simultaneously, only the speech button would ever be functional.

I tried playing with this same concept awhile ago to no luck. To pull this off would require a significant change to Web Chat.

Regarding maps & locations:

This is much more achievable and doesn't require any additional packages, tho there are ones out there that may be of use depending on your need.

The easiest way to pull this off is to post an activity back to the bot. This can be upon page load, via some page interaction (i.e. a button is pressed), etc. The d.post-activity-event sample from the BotFramework-WebChat repo demonstrates how you could set something like this up.

You can use the browsers built-in geolocation method to get the user's location. This will require the user to consent to sharing their location. Providing they consent, the location data can be sent to the bot in the posted event activity.

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

geoLoc();

Hope of help!