set tts model token

packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx

@@ -9,7 +9,6 @@ import { faAngleLeft, faSave } from '@fortawesome/free-solid-svg-icons';
 import { EventMatchPredicate } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventMatchPredicate';
 import { EventResponse } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventResponse';
 import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels';
-import { EventResponseType } from './event_response_builder/EventResponseType';
 import { EventResponseComponent } from './event_response_builder/EventResponseComponent';
 import { EventMatchPredicateBuilderComponent } from './event_match_predicate_builder/EventMatchPredicateBuilderComponent';
 

packages/storyteller/src/pages/tts_configs/event_response_builder/BuildEventResponse.ts

@@ -0,0 +1,25 @@
+import { EventResponse } from "@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventResponse";
+import { EventResponseType } from "./EventResponseType";
+
+export function buildEventResponse(ttsModelTokens: string[], eventResponseType: EventResponseType) {
+  let eventResponse : EventResponse = {};
+
+  switch (eventResponseType) {
+    case EventResponseType.TtsSingleVoice:
+      let ttsModelToken = '';
+      if (ttsModelTokens.length > 0) {
+        ttsModelToken = ttsModelTokens[0];
+      }
+      eventResponse.tts_single_voice =  {
+        tts_model_token: ttsModelToken,
+      }
+      break;
+    case EventResponseType.TtsRandomVoice:
+      eventResponse.tts_random_voice=  {
+        tts_model_tokens: [...ttsModelTokens],
+      }
+      break;
+  }
+
+  return eventResponse;
+}

packages/storyteller/src/pages/tts_configs/event_response_builder/EventResponseComponent.tsx

@@ -3,6 +3,7 @@ import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsMod
 import { TtsSingleVoiceForm } from './TtsSingleVoiceForm';
 import { EventResponseType } from './EventResponseType';
 import { EventResponse } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventResponse';
+import { buildEventResponse } from './BuildEventResponse';
 
 interface EventResponseComponentProps {
   // Original response from server.
@@ -68,13 +69,16 @@ function EventResponseComponent(props: EventResponseComponentProps) {
     // the "random voices" view, etc.
     let updatedTokens = [... selectedTtsModelTokens];
 
-    if (updatedTokens.length > 1) {
+    if (updatedTokens.length > 0) {
       updatedTokens[0] = token;
     } else if (updatedTokens.length === 0) {
       updatedTokens.push(token);
     }
 
+    const newEventResponse = buildEventResponse(updatedTokens, eventResponseType);
+
     setSelectedTtsModelTokens(updatedTokens);
+    props.updateModifiedEventResponse(newEventResponse);
   }
 
   return (

packages/storyteller/src/pages/tts_configs/event_response_builder/TtsSingleVoiceForm.tsx

@@ -19,13 +19,11 @@ function TtsSingleVoiceForm(props: TtsSingleVoiceFormProps) {
   //  https://stackoverflow.com/a/54866051 (less clear by also using useState(), but good comments)
   //  https://stackoverflow.com/a/62982753
   useEffect(() => {
-    console.log(props.selectedTtsModelTokens);
     if (props.selectedTtsModelTokens.length > 0) {
       setTtsModelToken(props.selectedTtsModelTokens[0]);
     }
   }, [props.selectedTtsModelTokens]);
 
-
   const handleModelSelect = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
     const value = (ev.target as HTMLSelectElement).value;
 
@@ -34,7 +32,7 @@ function TtsSingleVoiceForm(props: TtsSingleVoiceFormProps) {
     }
 
     setTtsModelToken(value);
-    //props.setTtsModelToken(value);
+    props.updateSelectedTtsModelToken(value);
     return true;
   }