How to use the botframework-webchat.Speech function in botframework-webchat

id: botId || 'bot',
      name: 'Bot'
    },
    botConnection: directLine,
    formatOptions: {
      showHeader: false
    },
    selectedActivity: selectedActivity$,
    showShell: mode === 'livechat',
    speechOptions:
      (endpoint && endpoint.appId && endpoint.appPassword) ? {
        speechRecognizer: new CognitiveServices.SpeechRecognizer({
          fetchCallback: getSpeechToken.bind(null, endpoint, false),
          fetchOnExpiryCallback: getSpeechToken.bind(null, endpoint, true)
        }),
        speechSynthesizer: new WebChat.Speech.BrowserSpeechSynthesizer()
      } : null,
    user: {
      id: userId || 'default-user',
      name: 'User'
    }
  };
}

adaptiveCardsHostConfig: AdaptiveCardsHostConfig,
                botConnection: this.directline,
                locale: activeBot.locale || remote.app.getLocale(),
                formatOptions: {
                    showHeader: false
                },
                selectedActivity: selectedActivity$() as any,
                user: this.getCurrentUser(settings.serverSettings),
                bot: { name: "Bot", id: activeBot.botId },
                resize: 'detect',
                speechOptions: {
                    speechRecognizer: new CognitiveServices.SpeechRecognizer({
                        fetchCallback: this.fetchSpeechToken.bind(this),
                        fetchOnExpiryCallback: this.fetchSpeechTokenOnExpiry.bind(this)
                    }),
                    speechSynthesizer: new BotChat.Speech.BrowserSpeechSynthesizer()
                }
            }
            InspectorActions.clear();
            return <div> this.initBotChatContainerRef(ref, initialWidth)}&gt;</div>
        } else {
            return (
                <div>
                    <div>
                </div>
            );
        }
    }
</div>