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>

Is there a reason you are using `styleSet` instead of `styleOptions`? `styleSet` is an available option, but is not preferred as it is more susceptible to breaking changes should code change in the future. — Steven Kanberg, Jan 21 '20 at 10:06
As for your actual question, I'm not sure I'm following what you are asking. Are you wanting to style and display both the send button and the microphone button, simultaneously? Just style and display the microphone button? Or, something else? — Steven Kanberg, Jan 21 '20 at 10:08
Lastly, what do you mean you wish to "integrate map option as well"? — Steven Kanberg, Jan 21 '20 at 10:09
@steven Kanberg , yes i want to style and display both send button and the microphone button, simultaneously. — Deepak Vyas, Jan 22 '20 at 11:50
REASON : its new for me, i just follow the default style sample code to proceed. — Deepak Vyas, Jan 22 '20 at 11:51
For Map i means location ... i did some research and got to know about botbuilder-location that supports V3 it seems. Even for community they have dotnet sample for botbuilder-location. but not for nodejs. in context.activity.events there we can have some geo or place object that might provide help to us (azure framework V4) Any help is like oxygen at this moment. — Deepak Vyas, Jan 22 '20 at 12:29

score 0 · Accepted Answer · answered Jan 23 '20 at 23:06

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!

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

webchat channel has been used with LUIS

1 Answers1