feat(web): voice search integration in search components

[bietkul]

This PR contains voice search implementation in the search components with the following specs:

• To enable voice search showVoiceSearch prop must be set to true.
• Mic icon is fully customizable with the following new props.

1. inner class named mic
2. getMicInstance prop can be used to get the instance of SpeechRecognition object, which can be used to override the default configurations.
3. renderMic can be used to render the custom mic UI.

renderMic = ({ handleClick, status }) => (
  <div>
    {...}
  </div>
)

Note
status is an enum which can have one of these values:
INACTIVE - mic is in inactive state i.e not listening
STOPPED - mic has been stopped by the user
ACTIVE - mic is listening
DENIED - mic permission is not available

[jyash97]

Here are some points that I found:

1. The mic is listening even after the search has been applied. Ideally, we should stop the mic after the search has been applied or should append results if we are listening to it. Check the following gif:

2. When we block the mic permission we should disable the mic, I think showing a tooltip about the details can be a great experience rather than toggling the icon. Check the following gif:

3. iconPosition in Mic component is set to left but it is on right. Are we making use of this prop?

4. Can we have a better image when in a listening state? The current image doesn't look good and it doesn't seem to be smooth on my machine as seen in the first gif.

Thoughts @lakhansamani @siddharthlatest ?

[bietkul]

1, 2: I'll check on it.
3: iconPosition is just for internal use, it is coming from DataSearch.
4: I agree that the images aren't perfect.