Remove context argument

packages/component/src/Activity/Speak.js

@@ -14,7 +14,7 @@ const connectSpeakActivity = (...selectors) =>
     ({ language, markActivity, selectVoice }, { activity }) => ({
       language,
       markAsSpoken: () => markActivity(activity, 'speak', false),
-      selectVoice: voices => selectVoice(voices, { language }, activity)
+      selectVoice: voices => selectVoice(voices, activity)
     }),
     ...selectors
   );

packages/component/src/Composer.js

@@ -196,6 +196,10 @@ class Composer extends React.Component {
 
     this.createContextFromProps = memoize(createLogic, shallowEquals);
 
+    this.createSelectVoice = memoize(
+      (selectVoice, language) => selectVoice || defaultSelectVoice.bind(null, { language })
+    );
+
     this.createWebSpeechPonyfill = memoize(
       (webSpeechPonyfillFactory, referenceGrammarID) =>
         webSpeechPonyfillFactory && webSpeechPonyfillFactory({ referenceGrammarID })
@@ -258,9 +262,11 @@ class Composer extends React.Component {
 
         grammars,
         groupTimestamp,
+        locale,
         referenceGrammarID,
         renderMarkdown,
         scrollToEnd,
+        selectVoice,
         store,
         userID: _userID, // Ignoring eslint no-unused-vars: we just want to remove userID and username from propsForLogic
         username: _username, // Ignoring eslint no-unused-vars: we just want to remove userID and username from propsForLogic
@@ -281,11 +287,13 @@ class Composer extends React.Component {
       {
         activityRenderer,
         attachmentRenderer,
-        groupTimestamp,
         disabled,
+        locale,
         grammars: grammars || EMPTY_ARRAY,
+        groupTimestamp,
         renderMarkdown,
         scrollToEnd,
+        selectVoice: this.createSelectVoice(selectVoice, locale),
         store,
         webSpeechPonyfill: this.createWebSpeechPonyfill(webSpeechPonyfillFactory, referenceGrammarID)
       }
@@ -352,7 +360,7 @@ Composer.defaultProps = {
   locale: window.navigator.language || 'en-US',
   referenceGrammarID: '',
   renderMarkdown: text => text,
-  selectVoice: defaultSelectVoice,
+  selectVoice: undefined,
   sendTimeout: 20000,
   sendTyping: undefined,
   sendTypingIndicator: false,

packages/component/src/defaultSelectVoice.js

@@ -1,4 +1,4 @@
-export default function(voices, { language }, activity) {
+export default function({ language }, voices, activity) {
   // Find the first voice based on this order:
   // 1. Voice with language same as locale as defined in the activity
   // 2. Voice with language same as locale as passed into Web Chat

packages/component/src/defaultSelectVoice.test.js

@@ -24,33 +24,33 @@ beforeEach(() => {
 });
 
 test('Select voice based on activity locale', () => {
-  const actual = selectVoice(VOICES, { language: 'en-US' }, { locale: 'zh-HK' });
+  const actual = selectVoice({ language: 'en-US' }, VOICES, { locale: 'zh-HK' });
 
   expect(actual).toHaveProperty('lang', 'zh-HK');
 });
 
 test('Select voice based on options', () => {
-  const actual = selectVoice(VOICES, { language: 'en-UK' }, { locale: 'en-XX' });
+  const actual = selectVoice({ language: 'en-UK' }, VOICES, { locale: 'en-XX' });
 
   expect(actual).toHaveProperty('lang', 'en-UK');
 });
 
 test('Select voice based on browser', () => {
-  const actual = selectVoice(VOICES, { language: 'en-XX' }, { locale: 'en-XX' });
+  const actual = selectVoice({ language: 'en-XX' }, VOICES, { locale: 'en-XX' });
 
   expect(actual).toHaveProperty('lang', 'ja-JP');
 });
 
 test('Select voice of "en-US"', () => {
   global.window.navigator.language = 'en-XX';
 
-  const actual = selectVoice(VOICES, { language: 'en-XX' }, { locale: 'en-XX' });
+  const actual = selectVoice({ language: 'en-XX' }, VOICES, { locale: 'en-XX' });
 
   expect(actual).toHaveProperty('lang', 'en-US');
 });
 
 test('Select first voice', () => {
-  const actual = selectVoice([{ lang: 'ko-KR' }], { language: 'en-XX' }, { locale: 'en-XX' });
+  const actual = selectVoice({ language: 'en-XX' }, [{ lang: 'ko-KR' }], { locale: 'en-XX' });
 
   expect(actual).toHaveProperty('lang', 'ko-KR');
 });
@@ -67,7 +67,7 @@ test('Prefer voice powered by deep neural network', () => {
     }
   ];
 
-  const actual = selectVoice(voices, { language: 'en-US' }, { locale: 'en-US' });
+  const actual = selectVoice({ language: 'en-US' }, voices, { locale: 'en-US' });
 
   expect(actual).toHaveProperty('name', 'GuyNeural');
 });

packages/playground/src/App.js

@@ -326,11 +326,11 @@ export default class extends React.Component {
     this.setState(() => ({ wordBreak: value }));
   }
 
-  selectVoiceWithGender(voices, { language }, activity) {
+  selectVoiceWithGender(voices, activity) {
     const { voiceGenderPreference } = this.state;
 
     return (
-      [activity.locale, language, window.navigator.language, 'en-US'].reduce(
+      [activity.locale, this.state.language, window.navigator.language, 'en-US'].reduce(
         (result, targetLanguage) =>
           result ||
           voices.find(

samples/06.g.select-voice/README.md

@@ -47,7 +47,7 @@ In the sample code below, if the activity is for language "zh-HK", we will use a
 
   window.WebChat.renderWebChat({
     directLine: window.WebChat.createDirectLine({ token }),
-+   selectVoice: (voices, { language }, activity) =>
++   selectVoice: (voices, activity) =>
 +     // If the activity is in zh-HK, use a voice with keyword "TracyRUS" (Cantonese).
 +     // Otherwise, use "JessaNeural" (preferred) or "Jessa".
 +     activity.locale === 'zh-HK' ?
@@ -72,7 +72,7 @@ webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechSer
 
 window.WebChat.renderWebChat({
   directLine: window.WebChat.createDirectLine({ token }),
-  selectVoice: (voices, { language }, activity) =>
+  selectVoice: (voices, activity) =>
     // If the activity is in zh-HK, use a voice with keyword "TracyRUS" (Cantonese).
     // Otherwise, use "JessaNeural" (preferred) or "Jessa".
     activity.locale === 'zh-HK' ?

samples/06.g.select-voice/index.html

@@ -39,7 +39,7 @@
 
         window.WebChat.renderWebChat({
           directLine: window.WebChat.createDirectLine({ token }),
-          selectVoice: (voices, { language }, activity) =>
+          selectVoice: (voices, activity) =>
             // If the activity is in zh-HK, use a voice with keyword "TracyRUS" (Cantonese).
             // Otherwise, use "JessaNeural" (preferred) or "Jessa".
             activity.locale === 'zh-HK' ?