From c845cfa3fc7ed4e802e6995f0b3d51507edef6dd Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Mon, 22 Apr 2024 21:42:57 -0400
Subject: [PATCH] code optimization

---
 app/components/ListSearchDropdown.tsx         |   7 +
 .../WaveformPlayer.tsx                        |   0
 app/components/index.tsx                      |   4 +-
 app/pages/PageEnigma/PageEditor.tsx           |   2 -
 .../comps/DialogueTTS/DialogueTTS.tsx         | 243 ------------------
 .../comps/DialogueTTS/generateTts.tsx         |  50 ----
 .../PageEnigma/comps/DialogueTTS/index.tsx    |   0
 .../PageEnigma/comps/DialogueTTS/types.tsx    |  83 ------
 .../comps/DialogueTTS/utilities.tsx           |  41 ---
 .../AudioTab.tsx}                             |  43 +++-
 .../audioItemElement.tsx                      |   2 +-
 .../audioItemElements.tsx                     |   0
 .../comps/SidePanelTabs/AudioTab/index.tsx    |   1 +
 .../pageLibrary.tsx                           |   0
 .../pageTTS.tsx                               |  39 +--
 .../{AudioTabComponent => AudioTab}/types.tsx |   0
 .../utilities.tsx                             |   0
 .../SidePanelTabs/AudioTabComponent/index.tsx |   1 -
 .../comps/SidePanelTabs/itemTabs/AudioTab.tsx |   2 +-
 19 files changed, 57 insertions(+), 461 deletions(-)
 rename app/{pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent => components}/WaveformPlayer.tsx (100%)
 delete mode 100644 app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
 delete mode 100644 app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx
 delete mode 100644 app/pages/PageEnigma/comps/DialogueTTS/index.tsx
 delete mode 100644 app/pages/PageEnigma/comps/DialogueTTS/types.tsx
 delete mode 100644 app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx
 rename app/pages/PageEnigma/comps/SidePanelTabs/{AudioTabComponent/AudioTabComponent.tsx => AudioTab/AudioTab.tsx} (74%)
 rename app/pages/PageEnigma/comps/SidePanelTabs/{AudioTabComponent => AudioTab}/audioItemElement.tsx (98%)
 rename app/pages/PageEnigma/comps/SidePanelTabs/{AudioTabComponent => AudioTab}/audioItemElements.tsx (100%)
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/index.tsx
 rename app/pages/PageEnigma/comps/SidePanelTabs/{AudioTabComponent => AudioTab}/pageLibrary.tsx (100%)
 rename app/pages/PageEnigma/comps/SidePanelTabs/{AudioTabComponent => AudioTab}/pageTTS.tsx (87%)
 rename app/pages/PageEnigma/comps/SidePanelTabs/{AudioTabComponent => AudioTab}/types.tsx (100%)
 rename app/pages/PageEnigma/comps/SidePanelTabs/{AudioTabComponent => AudioTab}/utilities.tsx (100%)
 delete mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/index.tsx

diff --git a/app/components/ListSearchDropdown.tsx b/app/components/ListSearchDropdown.tsx
index cd0dd6dffd..0369c8e39d 100644
--- a/app/components/ListSearchDropdown.tsx
+++ b/app/components/ListSearchDropdown.tsx
@@ -2,6 +2,7 @@ import { Fragment, useState, useEffect } from 'react'
 import { Combobox, Transition } from '@headlessui/react'
 import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { disableHotkeyInput,enableHotkeyInput,DomLevels } from "~/pages/PageEnigma/store";
 
 interface ListDropdownProps {
   list: {[key: string] : string}[];
@@ -45,6 +46,12 @@ export const ListSearchDropdown = ({
               if(listDisplayKey) return item[listDisplayKey];
               else return Object.values(item)[0]
             }}
+            onFocus={(e) => {
+              disableHotkeyInput(DomLevels.INPUT)
+            }}
+            onBlur={(e) => {
+              enableHotkeyInput(DomLevels.INPUT)
+            }}
             onChange={(event) => setQuery(event.target.value)}
           />
           <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx b/app/components/WaveformPlayer.tsx
similarity index 100%
rename from app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/WaveformPlayer.tsx
rename to app/components/WaveformPlayer.tsx
diff --git a/app/components/index.tsx b/app/components/index.tsx
index 2133a89322..96e86d7f31 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -13,6 +13,7 @@ import { ListSearchDropdown } from "./ListSearchDropdown"
 import { LoadingBar } from "./LoadingBar";
 import { LoadingDots, LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
 import { Pill } from "./Pill";
+import { WaveformPlayer } from "./WaveformPlayer";
 
 export {
   Button,
@@ -31,5 +32,6 @@ export {
   LoadingDots,
   LoadingDotsBricks,
   LoadingDotsTyping,
-  Pill
+  Pill,
+  WaveformPlayer
 };
diff --git a/app/pages/PageEnigma/PageEditor.tsx b/app/pages/PageEnigma/PageEditor.tsx
index d944354378..e542a05a20 100644
--- a/app/pages/PageEnigma/PageEditor.tsx
+++ b/app/pages/PageEnigma/PageEditor.tsx
@@ -25,7 +25,6 @@ import { useSignals } from "@preact/signals-react/runtime";
 import { AppUiContext } from "~/contexts/AppUiContext";
 import { pageHeight, pageWidth } from "~/store";
 import { TopBar } from "~/modules/TopBar";
-import { DialogueTTS } from "./comps/DialogueTTS/DialogueTTS";
 import { Pages } from "~/pages/PageEnigma/constants/page";
 import { AssetType } from "./models/assets";
 
@@ -133,7 +132,6 @@ export const PageEditor = ({ setPage }: Props) => {
                 <PreviewEngineCamera />
                 <ControlsVideo />
                 <ControlPanelSceneObject />
-                <DialogueTTS />
               </div>
             </div>
             {appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE && (
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
deleted file mode 100644
index 061e1c02b4..0000000000
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import { useCallback, useContext, useEffect, useState } from "react";
-import { useSignalEffect } from "@preact/signals-react/runtime";
-import { v4 as uuidv4 } from "uuid";
-import {
-  faVolume,
-  faShuffle,
-  // faPlay,
-  faBrainCircuit,
-} from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { AppUiContext } from "~/contexts/AppUiContext";
-import { APPUI_ACTION_TYPES } from "~/reducers";
-import { 
-  Button,
-  H2,
-  H5,
-  Label,
-  LoadingDotsTyping,
-  ListSearchDropdown,
-  TransitionDialogue,
-  Textarea
-} from "~/components";
-import { ListTtsModels } from "./utilities";
-import { TtsModelListItem } from "./types";
-import { GenerateTtsAudio } from "./generateTts";
-import { addInferenceJob, inferenceJobs} from "../../store/inferenceJobs";
-import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
-
-type TtsState = {
-  voice: TtsModelListItem | undefined;
-  text: string;
-  hasEnqueued :boolean;
-  inferenceToken?: string;
-  inferenceJobType?: string;
-  hasAudio: boolean;
-  audioFile?: any;
-}
-
-export const DialogueTTS = ()=>{
-
-  const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
-  const [ttsState, setTtsState] = useState<TtsState>({
-    voice:undefined,
-    text:"",
-    hasEnqueued:false,
-    hasAudio:false,
-  });
-
-  useSignalEffect(()=>{
-    console.log(inferenceJobs.value);
-    if(ttsState.hasEnqueued && ttsState.inferenceToken){
-      const found = inferenceJobs.value.find((job)=>job.job_id===ttsState.inferenceToken);
-      console.log(`finding: ${ttsState.inferenceToken}`);
-      console.log(found);
-      if(found?.job_status === JobState.COMPLETE_SUCCESS){
-        setTtsState((curr)=>({
-          ...curr,
-          hasAudio: true,
-          audioFile: found.result
-        }))
-      }
-    }
-  });
-
-  const [ttsModels, setTtsModels] = useState<Array<TtsModelListItem>>([]);
-
-  const listModels = useCallback(async () => {
-    const ttsModelsLoaded = ttsModels.length > 0;
-    if (ttsModelsLoaded) {
-      return; // Already queried.
-    }
-    const models = await ListTtsModels();
-    if (models) {
-      setTtsModels(models);
-    }
-  }, []);
-
-  useEffect(() => {
-    listModels();
-  }, [listModels]);
-
-  useEffect(()=> {
-    if(ttsState.hasEnqueued && ttsState.inferenceToken && ttsState.inferenceJobType){
-      console.log(`tts has Enqueued`);
-      addInferenceJob({
-        version:1,
-        job_id: ttsState.inferenceToken,
-        job_type: ttsState.inferenceJobType,
-        job_status: JobState.PENDING,
-      })
-    }
-  },[ttsState]);
-
-  const requestTts = useCallback( ()=>{
-    const modelToken = ttsState.voice ? ttsState.voice.model_token : undefined;
-
-    if(modelToken){
-      setTtsState((curr)=>({
-        ...curr,
-        hasEnqueued: true,
-        inferenceToken: undefined,
-        inferenceJobType: undefined,
-        hasAudio: false,
-        result: undefined,
-      }));
-
-      const request = {
-        uuid_idempotency_token: uuidv4(),
-        tts_model_token: modelToken,
-        inference_text: ttsState.text,
-      };
-
-      GenerateTtsAudio(request).then(res=>{
-        if(res.inference_job_token){
-          setTtsState((curr)=>({
-            ...curr,
-            inferenceToken: res.inference_job_token,
-            inferenceJobType: res.inference_job_token_type
-          }));
-        }
-      });
-    }else{
-      console.log("no voice model selected");
-    }
-  },[ttsState]);
-
-  const handleClose = ()=> {
-    if(ttsState.hasAudio){
-      setTtsState((curr)=>({
-        ...curr,
-        hasEnqueued: false,
-        inferenceToken: undefined,
-        inferenceJobType: undefined,
-        hasAudio: false,
-        result: undefined,
-      }));
-    }
-    dispatchAppUiState({
-      type: APPUI_ACTION_TYPES.CLOSE_DIALOGUE_TTS
-    })
-  };
-
-  const handleTextInput = (
-    e: React.ChangeEvent<HTMLTextAreaElement>
-  )=>{
-    setTtsState((curr)=>({
-      ...curr,
-      text: e.target.value,
-    }));
-  };
-
-  const handleOnSelect = (val:string)=>{
-    const voiceModel = ttsModels.find((item)=>{
-      if (item.title === val) return item
-    })
-    // console.log(val);
-    // console.log(voiceModel);
-    setTtsState((curr)=>({
-      ...curr,
-      voice: voiceModel,
-    }));
-  }
-
-  return(
-    <TransitionDialogue
-      title={
-        <>
-          <FontAwesomeIcon icon={faVolume} className="pr-2"/>
-          Generate TTS
-        </>
-      }
-      className="max-w-xl"
-      isOpen={appUiState.diagloueTts.isOpen}
-      onClose={handleClose}
-    >
-      <div className="flex flex-col">
-        <Label className="mb-1">Select a Voice</Label>
-        <ListSearchDropdown
-          list={ttsModels}
-          listDisplayKey="title"
-          onSelect={handleOnSelect}
-        />
-        <div className="flex w-full justify-between mt-4">
-          <Label>What would you like to say?</Label>
-          <div className="flex gap-2 items-center">
-            <FontAwesomeIcon className="text-brand-primary" icon={faShuffle}/>
-            <H5 className="text-brand-primary">Randomized Text</H5>
-          </div>
-        </div>
-        <Textarea
-          placeholder="Enter what you want the voice to say here."
-          value={ttsState.text}
-          onChange={handleTextInput}
-        />
-        <div className="mt-6 flex gap-2">
-          <div className="w-full h-12">
-            {!ttsState.hasAudio && !ttsState.hasEnqueued &&
-              <Button
-                className="w-36 h-full text-xl "
-                variant={ttsState.hasAudio ? "secondary" : "primary" }
-                disabled={ttsState.text === ""}
-                icon={faBrainCircuit}
-                onClick={requestTts}
-              >
-                Generate
-              </Button>
-            }
-            {!ttsState.hasAudio && ttsState.hasEnqueued &&
-              <LoadingDotsTyping className="bg-brand-secondary-500 rounded-lg"/>
-            }
-            { ttsState.hasAudio &&
-              <div className="bg-success w-full h-full rounded-lg flex items-center justify-center">
-                <H2>Success!! Please Check "My Audio" in the Audio Panel.</H2>
-              </div>
-            }
-          </div>
-          
-        </div>
-
-        <div className="mt-6 flex justify-between gap-2">
-          { ttsState.hasEnqueued &&
-            <Button
-              type="button"
-              disabled={!ttsState.hasAudio}
-              onClick={requestTts}
-              icon={faBrainCircuit}
-            >
-              Generate Another
-            </Button>
-          }
-          <span />
-          <Button
-            type="button"
-            onClick={handleClose}
-            variant="secondary"
-          >
-            {ttsState.hasEnqueued ? 'Close':'Cancel'}
-          </Button>
-        </div>
-      </div>
-    </TransitionDialogue>
-  );
-};
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx b/app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx
deleted file mode 100644
index c2ed530190..0000000000
--- a/app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { inferTts } from "~/api";
-import {
-  GenerateTtsAudioRequest,
-  GenerateTtsAudioSuccess,
-  GenerateTtsAudioError,
-  GenerateTtsAudioResponse,
-  GenerateTtsAudioErrorType,
-  EndpointResponse
-} from './types';
-
-import {
-  maybeMapError
-} from './utilities';
-
-export function GenerateTtsAudioIsError(response: GenerateTtsAudioResponse): response is GenerateTtsAudioError {
-  return !('inference_job_token' in response);
-}
-
-export async function GenerateTtsAudio(request: GenerateTtsAudioRequest) : Promise<GenerateTtsAudioResponse | undefined>
-{
-  return await fetch(inferTts, {
-    method: 'POST',
-    headers: {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json',
-    },
-    // credentials: 'include',
-    body: JSON.stringify(request),
-  })
-  .then(res =>  res.json())
-  .then(res => {
-    if (!('inference_job_token' in res)) {
-      return { error: GenerateTtsAudioErrorType.UnknownError };
-    }
-    const ret:GenerateTtsAudioSuccess = {
-      success: true,
-      inference_job_token: res.inference_job_token,
-      inference_job_token_type: res.inference_job_token_type,
-    }
-    return ret;
-  })
-  .catch(e => {
-    let maybeError = maybeMapError(e);
-    if (maybeError !== undefined) {
-      return { error: maybeError };
-    }
-    return { error: GenerateTtsAudioErrorType.UnknownError };
-  });
-
-};
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/index.tsx b/app/pages/PageEnigma/comps/DialogueTTS/index.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/types.tsx b/app/pages/PageEnigma/comps/DialogueTTS/types.tsx
deleted file mode 100644
index 774c9aa428..0000000000
--- a/app/pages/PageEnigma/comps/DialogueTTS/types.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * Types for Listing TTS Models
- */
-
-export interface TtsModelListResponsePayload {
-  success: boolean,
-  models: Array<TtsModelListItem>,
-}
-
-export interface UserRatings {
-  positive_count: number,
-  negative_count: number,
-  // Total count does not take into account "neutral" ratings.
-  total_count: number,
-}
-
-export interface TtsModelListItem {
-  model_token: string,
-  tts_model_type: string,
-  creator_user_token: string,
-  creator_username: string,
-  creator_display_name: string,
-  creator_gravatar_hash: string,
-  ietf_language_tag: string,
-  ietf_primary_language_subtag: string,
-  updatable_slug: string,
-  title: string,
-  is_front_page_featured: boolean,
-  is_twitch_featured: boolean,
-  user_ratings: UserRatings,
-  category_tokens: string[],
-  created_at: string,
-  updated_at: string,
-}
-
-/*
- * Types for Making a TTS Generation Request
- */
-export interface GenerateTtsAudioRequest {
-  uuid_idempotency_token: string,
-  tts_model_token: string,
-  inference_text: string,
-  // TODO(2022-03): TEMPORARY
-  is_storyteller_demo?: boolean,
-}
-
-export interface GenerateTtsAudioSuccess {
-  success: boolean,
-  inference_job_token: string,
-  // Which queue to poll
-  inference_job_token_type?: string,
-}
-
-export interface GenerateTtsAudioError {
-  error: GenerateTtsAudioErrorType,
-}
-
-export enum GenerateTtsAudioErrorType {
-  BadRequest,
-  NotFound,
-  TooManyRequests,
-  ServerError,
-  UnknownError,
-}
-export type GenerateTtsAudioResponse = GenerateTtsAudioSuccess | GenerateTtsAudioError; 
-
-
-
-export interface EndpointSuccessResponse {
-  success: boolean,
-  inference_job_token: string,
-  inference_job_token_type?: string,
-}
-
-export interface EndpointErrorResponse {
-  success: boolean,
-}
-
-export type EndpointResponse = EndpointSuccessResponse | EndpointErrorResponse;
-
-export interface StatusLike {
-  status: number,
-}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx b/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx
deleted file mode 100644
index 53c87be9af..0000000000
--- a/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { listTts } from '~/api';
-import {
-  TtsModelListItem,
-  TtsModelListResponsePayload,
-  GenerateTtsAudioErrorType,
-  StatusLike
-} from './types';
-
-export async function ListTtsModels() : Promise<Array<TtsModelListItem>| undefined> {  
-  return await fetch(listTts, {
-    method: 'GET',
-    headers: {
-      'Accept': 'application/json',
-    },
-    credentials: 'include',
-  })
-  .then(res => res.json())
-  .then(res => {
-    const response : TtsModelListResponsePayload = res;
-    if (!response.success) {
-      return;
-    }
-    return response?.models;
-  })
-  .catch(e => {
-    return undefined;
-  });
-}
-
-export function maybeMapError(statuslike: StatusLike) : GenerateTtsAudioErrorType | undefined {
-  switch (statuslike.status) {
-    case 400:
-      return GenerateTtsAudioErrorType.BadRequest;
-    case 404:
-      return GenerateTtsAudioErrorType.NotFound;
-    case 429:
-      return GenerateTtsAudioErrorType.TooManyRequests;
-    case 500:
-      return GenerateTtsAudioErrorType.ServerError;
-  }
-}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/AudioTab.tsx
similarity index 74%
rename from app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/AudioTab.tsx
index d3efc45118..b65e27f3cd 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/AudioTab.tsx
@@ -3,8 +3,9 @@ import { useSignals, useSignalEffect } from "@preact/signals-react/runtime";
 
 import { AuthenticationContext } from "~/contexts/Authentication";
 import { MediaItem, AssetType } from "~/pages/PageEnigma/models";
+import { TtsModelListItem } from "~/pages/PageEnigma/models/tts";
 import { audioItemsFromServer } from "~/pages/PageEnigma/store/mediaFromServer";
-import { ListAudioByUser } from "./utilities";
+import { ListAudioByUser, ListTtsModels } from "./utilities";
 import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
 import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
 
@@ -12,14 +13,21 @@ import { PageLibrary } from "./pageLibrary";
 import { PageTTS } from "./pageTTS";
 import { AudioTabPages } from "./types";
 
-export const AudioTabComponent = () => {
+export const AudioTab = () => {
+  // app wide data
   useSignals();
+  const { authState } = useContext(AuthenticationContext);
+
+  // local states and data
   const [ state, setState ] = useState({
     firstLoad: false,
     fetchingUserAudio: false,
+    fetchingVoiceModels: false,
     page: AudioTabPages.LIBRARY,
   });
-  const { authState } = useContext(AuthenticationContext);
+
+  const [voiceModels, setVoiceModels] = useState<Array<TtsModelListItem>>([]);
+
 
   const handleListAudioByUser = useCallback((username:string, sessionToken:string)=>{
     setState((curr)=>({...curr, fetchingUserAudio:true}));
@@ -44,21 +52,33 @@ export const AudioTabComponent = () => {
     });
   }, []);
 
+  const fetchVoiceModels = useCallback(async (sessionToken:string) => {
+    ListTtsModels(sessionToken).then(res=>{
+      if(res) setVoiceModels(res);
+    });
+  }, []);
+
   useEffect(()=>{
     if (authState.userInfo && authState.sessionToken){
-      if(state.firstLoad === false && audioItemsFromServer.value.length === 0){
-        handleListAudioByUser(authState.userInfo.username, authState.sessionToken);
+      if(state.firstLoad === false){
+        if( audioItemsFromServer.value.length === 0){
+          handleListAudioByUser(authState.userInfo.username, authState.sessionToken);
+        }
+        if( voiceModels.length === 0){
+          fetchVoiceModels(authState.sessionToken);
+        }
         setState((curr)=>({...curr, firstLoad:true}));
+        // completed the first load
       }
     }
-  }, [authState, state, handleListAudioByUser]);
+  }, [authState, state, handleListAudioByUser, voiceModels, fetchVoiceModels]);
+
+  useEffect(()=>{
+    console.info('Audio Tab is mounting')
+    return()=>{console.info('Audio Tab is dismounting')}
+  }, []);
 
   useSignalEffect(()=>{
-    // flagging first load is done
-    if (state.firstLoad === false && audioItemsFromServer.value.length > 0){
-      setState(curr=>({...curr, firstLoad: true}));
-    }
-
     // when inference changes, check if there's a new audio to refresh for
     if (inferenceJobs.value.length > 0 && authState.userInfo){
       const found = inferenceJobs.value.find((job)=>{
@@ -91,6 +111,7 @@ export const AudioTabComponent = () => {
       <PageTTS
         changePage={changePage}
         sessionToken={authState.sessionToken}
+        voiceModels={voiceModels}
       />
     );
   }else{
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/audioItemElement.tsx
similarity index 98%
rename from app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/audioItemElement.tsx
index 9ea1cf7a4b..d5528f7e64 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/audioItemElement.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useContext, useEffect } from "react";
 import { useSignals } from "@preact/signals-react/runtime";
 
-import { WaveformPlayer } from "./WaveformPlayer";
+import { WaveformPlayer } from "~/components";
 import { MediaItem } from "~/pages/PageEnigma/models";
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 import {
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElements.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/audioItemElements.tsx
similarity index 100%
rename from app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/audioItemElements.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/audioItemElements.tsx
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/index.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/index.tsx
new file mode 100644
index 0000000000..46f5f39be0
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/index.tsx
@@ -0,0 +1 @@
+export { AudioTab } from "./AudioTab";
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageLibrary.tsx
similarity index 100%
rename from app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageLibrary.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageLibrary.tsx
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageTTS.tsx
similarity index 87%
rename from app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageTTS.tsx
index fd641f5bbf..cbf214443c 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/pageTTS.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageTTS.tsx
@@ -13,12 +13,13 @@ import {
   ListSearchDropdown,
   Textarea
 } from "~/components";
+import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
 
 import { TtsModelListItem, GenerateTtsAudioResponse } from "~/pages/PageEnigma/models/tts";
 
-import { addInferenceJob, inferenceJobs} from "../../../store/inferenceJobs";
-import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
-import { ListTtsModels, GenerateTtsAudio, GetMediaFileByToken } from "./utilities";
+import { addInferenceJob, inferenceJobs} from "~/pages/PageEnigma/store/inferenceJobs";
+
+import { GenerateTtsAudio, GetMediaFileByToken } from "./utilities";
 import { AudioTabPages } from "./types";
 import { AudioItemElement } from "./audioItemElement";
 import { MediaItem, AssetType } from "~/pages/PageEnigma/models";
@@ -44,9 +45,11 @@ const initialState:TtsState =
 export const PageTTS =({
   changePage,
   sessionToken,
+  voiceModels
 }:{
   changePage: (newPage:AudioTabPages) => void;
   sessionToken: string;
+  voiceModels: Array<TtsModelListItem>
 })=>{
   const [ttsState, setTtsState] = useState<TtsState>(initialState);
 
@@ -56,8 +59,8 @@ export const PageTTS =({
     console.log(inferenceJobs.value);
     if(ttsState.hasEnqueued && ttsState.inferenceToken){
       const found = inferenceJobs.value.find((job)=>job.job_id===ttsState.inferenceToken);
-      console.log(`finding: ${ttsState.inferenceToken}`);
-      console.log(found);
+      // console.log(`finding: ${ttsState.inferenceToken}`);
+      // console.log(found);
       if(found?.job_status === JobState.COMPLETE_SUCCESS){
         setTtsState((curr)=>({
           ...curr,
@@ -85,23 +88,6 @@ export const PageTTS =({
     }
   });
 
-  const [ttsModels, setTtsModels] = useState<Array<TtsModelListItem>>([]);
-
-  const listModels = useCallback(async () => {
-    const ttsModelsLoaded = ttsModels.length > 0;
-    if (ttsModelsLoaded) {
-      return; // Already queried.
-    }
-    const models = await ListTtsModels(sessionToken);
-    if (models) {
-      setTtsModels(models);
-    }
-  }, []);
-
-  useEffect(() => {
-    listModels();
-  }, [listModels]);
-
   useEffect(()=> {
     if(ttsState.hasEnqueued && ttsState.inferenceToken && ttsState.inferenceJobType){
       console.log(`tts has Enqueued`);
@@ -158,13 +144,12 @@ export const PageTTS =({
   };
 
   const handleOnSelect = (val:string)=>{
-    console.log( val);
-    const voiceModel = ttsModels.find((item)=>{
+    const currVoiceModel = voiceModels.find((item)=>{
       if (item.title === val) return item
     })
     setTtsState((curr)=>({
       ...curr,
-      voice: voiceModel,
+      voice: currVoiceModel,
     }));
   }
 
@@ -178,8 +163,8 @@ export const PageTTS =({
         <H2>Generate TTS</H2>
       </div>
       <Label className="mb-1">Select a Voice</Label>
-      {ttsModels.length > 0 && <ListSearchDropdown
-        list={ttsModels}
+      {voiceModels.length > 0 && <ListSearchDropdown
+        list={voiceModels}
         listDisplayKey="title"
         onSelect={handleOnSelect}
       /> }
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/types.tsx
similarity index 100%
rename from app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/types.tsx
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/utilities.tsx
similarity index 100%
rename from app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/utilities.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/utilities.tsx
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/index.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/index.tsx
deleted file mode 100644
index e74b437cf5..0000000000
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { AudioTabComponent } from "./AudioTabComponent";
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab.tsx
index e6ec8b81e2..6f157060dd 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab.tsx
@@ -1 +1 @@
-export { AudioTabComponent as AudioTab } from "../AudioTabComponent";
+export { AudioTab} from "../AudioTab";