From 62b14e3168a87807bca9ab5789adc92f21e63dc2 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 3 Apr 2024 10:31:19 -0400
Subject: [PATCH 01/27] scafoldding for generalized dialogue and TTS dialogue
 done

---
 app/components/TransitionDialogue.tsx         |  56 ++++++++
 app/modules/ButtonDialogue/ButtonDialogue.tsx | 103 +++++---------
 app/pages/PageEnigma/PageEnigmaComponent.tsx  |   2 +
 .../ControlsTopButtons/ControlsTopButtons.tsx | 126 +-----------------
 .../TestFeaturesButtons.tsx                   |  97 ++++++++++++++
 .../comps/DialogueTTS/DialogueTTS.tsx         |  24 ++++
 .../PageEnigma/comps/DialogueTTS/index.tsx    |   0
 .../reducers/appUiReducer/reducer.tsx         |  18 ++-
 .../reducers/appUiReducer/types.tsx           |  12 +-
 .../reducers/appUiReducer/values.tsx          |   1 +
 10 files changed, 244 insertions(+), 195 deletions(-)
 create mode 100644 app/components/TransitionDialogue.tsx
 create mode 100644 app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx
 create mode 100644 app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
 create mode 100644 app/pages/PageEnigma/comps/DialogueTTS/index.tsx

diff --git a/app/components/TransitionDialogue.tsx b/app/components/TransitionDialogue.tsx
new file mode 100644
index 0000000000..9d6be6634c
--- /dev/null
+++ b/app/components/TransitionDialogue.tsx
@@ -0,0 +1,56 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, ReactNode } from "react";
+
+export const TransitionDialogue = ({
+  isOpen, title, onClose, children,
+}:{
+  isOpen: boolean;
+  title?: string;
+  onClose:()=>void;
+  children: ReactNode;
+  
+})=>{
+  return(
+    <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10 " onClose={onClose}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black/40" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all">
+                  {title && (
+                    <Dialog.Title
+                      as="h4"
+                      className="mb-4 text-xl font-bold text-white"
+                    >
+                      {title}
+                    </Dialog.Title>
+                  )}
+                  {children}
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+  );
+};
\ No newline at end of file
diff --git a/app/modules/ButtonDialogue/ButtonDialogue.tsx b/app/modules/ButtonDialogue/ButtonDialogue.tsx
index 2cf1ceb539..5ef713b2c2 100644
--- a/app/modules/ButtonDialogue/ButtonDialogue.tsx
+++ b/app/modules/ButtonDialogue/ButtonDialogue.tsx
@@ -1,6 +1,5 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-
+import { TransitionDialogue } from "~/components/TransitionDialogue";
 import { Button, ButtonPropsI } from "~/components/Button";
 
 type UnionedButtonProps = { label?: string } & ButtonPropsI;
@@ -36,74 +35,40 @@ export const ButtonDialogue = ({
         {buttonLabel}
       </Button>
 
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10 " onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+      <TransitionDialogue
+        title={title}
+        isOpen={isOpen}
+        onClose={closeModal}
+      >
+        <div className="mt-2">{children}</div>
+
+        <div className="mt-6 flex justify-end gap-2">
+          <Button
+            type="button"
+            onClick={closeModal}
+            {...closeButtonProps}
+            variant="secondary"
           >
-            <div className="fixed inset-0 bg-black/40" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all">
-                  {title && (
-                    <Dialog.Title
-                      as="h4"
-                      className="mb-4 text-xl font-bold text-white"
-                    >
-                      {title}
-                    </Dialog.Title>
-                  )}
-                  <div className="mt-2">{children}</div>
-
-                  <div className="mt-6 flex justify-end gap-2">
-                    <Button
-                      type="button"
-                      onClick={closeModal}
-                      {...closeButtonProps}
-                      variant="secondary"
-                    >
-                      {closeButtonLabel}
-                    </Button>
-                    {confirmButtonProps && (
-                      <Button
-                        type="button"
-                        {...confirmButtonProps}
-                        onClick={(e) => {
-                          if (confirmButtonProps.onClick) {
-                            confirmButtonProps.onClick(e);
-                          }
-                          closeModal();
-                        }}
-                      >
-                        {confirmButtonProps.label
-                          ? confirmButtonProps.label
-                          : "Confirm"}
-                      </Button>
-                    )}
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
+            {closeButtonLabel}
+          </Button>
+          {confirmButtonProps && (
+            <Button
+              type="button"
+              {...confirmButtonProps}
+              onClick={(e) => {
+                if (confirmButtonProps.onClick) {
+                  confirmButtonProps.onClick(e);
+                }
+                closeModal();
+              }}
+            >
+              {confirmButtonProps.label
+                ? confirmButtonProps.label
+                : "Confirm"}
+            </Button>
+          )}
+        </div>
+        </TransitionDialogue>
     </>
   );
 };
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index b8416749c1..5cf6dfef33 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -10,6 +10,7 @@ import { Controls3D } from "./comps/Controls3D";
 import { ControlsTopButtons } from "./comps/ControlsTopButtons";
 import { ControlsVideo } from "./comps/ControlsVideo";
 import { ControlPanelSceneObject } from "./comps/ControlPanelSceneObject";
+import { DialogueTTS } from "./comps/DialogueTTS/DialogueTTS";
 import { PreviewEngineCamera } from "./comps/PreviewEngineCamera";
 import { ViewSideBySide } from "./comps/ViewSideBySide";
 import { SidePanelTabs } from "./comps/SidePanelTabs";
@@ -72,6 +73,7 @@ export const PageEnigmaComponent = () => {
                 <PreviewEngineCamera />
                 <ControlsVideo />
                 <ControlPanelSceneObject />
+                <DialogueTTS />
               </div>
             </div>
             {appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE && (
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
index 7a064d7f7a..77d1148bf4 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
@@ -1,115 +1,24 @@
 import { useContext, useState } from "react";
-import { Button, Input } from "~/components";
+import { Input } from "~/components";
 import { ButtonDialogue } from "~/modules/ButtonDialogue";
-import { AppUiContext } from "../../contexts/AppUiContext";
 import { EngineContext } from "../../contexts/EngineContext";
-import { APPUI_ACTION_TYPES } from "../../reducers";
-import { ClipGroup } from "~/pages/PageEnigma/models/track";
+
+import { TestFeaturesButtons } from "./TestFeaturesButtons";
 
 export const ControlsTopButtons = () => {
   const editorEngine = useContext(EngineContext);
-  const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
+
   const [sceneName, setSceneName] = useState<string>("");
   const [sceneToken, setSceneToken] = useState<string>("");
 
   const handleButtonSave = () => {
-    console.log(`SceneName is ${sceneName}`);
     editorEngine?.saveScene(sceneName);
   };
 
   const handleButtonLoadScene = () => {
-    console.log(`Scene Token is ${sceneToken}`);
     editorEngine?.loadScene(sceneToken);
   };
 
-  const handleButtonTest = () => {
-    editorEngine?.testStylizeRequest();
-
-    // if(appUiState?.showEditorLoadingBar.isShowing){
-    //TO GO TO A HUNDRED AND DISAPPER
-    // dispatchAppUiState({
-    //   type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR,
-    //   payload:{
-    //     showEditorLoadingBar: {
-    //       progress: 100,
-    //     }
-    //   }
-    // });
-    // setTimeout(() => {
-    //   dispatchAppUiState({
-    //     type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADINGBAR,
-    //   });
-    // }, 1000);
-    //END :TO GO TO A HUNDRED AND DISAPPER
-
-    //EAMPLE OF CHANING LOADING MESSAGE
-    //  dispatchAppUiState({
-    //   type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR,
-    //   payload:{
-    //     showEditorLoadingBar: {
-    //       message: "new message",
-    //     }
-    //   }
-    // });
-    // }else{
-    //   dispatchAppUiState({
-    //     type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADINGBAR,
-    //     payload:{
-    //       showEditorLoadingBar: {
-    //         message: 'display of LoadingBar triggered by Test Button',
-    //         progress: 10,
-    //       }
-    //     }
-
-    //   });
-    //}
-  };
-
-  const handleObjectPanelTest = () => {
-    if (appUiState?.controlPanel.isShowing) {
-      dispatchAppUiState({
-        type: APPUI_ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT,
-      });
-    } else {
-      dispatchAppUiState({
-        type: APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT,
-        payload: {
-          group: ClipGroup.OBJECT,
-          object_name: "TEST BUTTON",
-          object_uuid: "",
-          version: "1",
-          objectVectors: {
-            position: { x: 1, y: 2, z: 3 },
-            rotation: { x: 4, y: 5, z: 6 },
-            scale: { x: 7, y: 8, z: 9 },
-          },
-        },
-      });
-    }
-  };
-
-  const handleButtonCameraView = () => {
-    editorEngine?.switchCameraView();
-  };
-  const handleButtonPlayBack = () => {
-    editorEngine?.startPlayback();
-  };
-  const handleButtonRender = () => {
-    editorEngine?.generateVideo();
-  };
-
-  const handleButtonTakeFrame = () => {
-    editorEngine?.take_timeline_cam_clip();
-  };
-
-  const handleButtonLoad = () => {
-    console.log("LOADING");
-  };
-
-  const handleButtonSingleFrame = () => {
-    editorEngine?.generateFrame();
-  };
-
   return (
     <div className="flex flex-col gap-2 pl-3 pt-3">
       <div className="flex gap-2">
@@ -166,32 +75,7 @@ export const ControlsTopButtons = () => {
           <p>Ask Wil about React</p>
         </ButtonDialogue>
       </div>
-
-      <div className="flex gap-2">
-        <Button variant="secondary" onClick={handleButtonCameraView}>
-          Toggle Camera View
-        </Button>
-        <Button
-          onClick={handleObjectPanelTest}
-          className="bg-brand-tertiary hover:bg-brand-teriary-400 focus-visible:outline-brand-tertiary"
-        >
-          Show Object Panel
-        </Button>
-      </div>
-      <div className="flex gap-2">
-        <Button onClick={handleButtonSingleFrame}>Render Single Frame</Button>
-        <Button onClick={handleButtonTakeFrame}>Take Frame</Button>
-        <Button onClick={handleButtonRender}>Render</Button>
-        {/* <Button onClick={handleButtonLoad}>Load</Button>
-        <Button onClick={handleButtonRender}>Render</Button> */}
-        <Button
-          onClick={handleButtonTest}
-          className="bg-brand-tertiary hover:bg-brand-teriary-400 focus-visible:outline-brand-tertiary"
-          style={{ zIndex: 9001 }}
-        >
-          Test
-        </Button>
-      </div>
+      <TestFeaturesButtons />
     </div>
   );
 };
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx
new file mode 100644
index 0000000000..2a5376de50
--- /dev/null
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx
@@ -0,0 +1,97 @@
+import { useContext, useState } from "react";
+import { Button, } from "~/components";
+import { ClipGroup } from "~/pages/PageEnigma/models/track";
+import { APPUI_ACTION_TYPES } from "../../reducers";
+import { AppUiContext } from "../../contexts/AppUiContext";
+import { EngineContext } from "../../contexts/EngineContext";
+
+export const TestFeaturesButtons = ()=>{
+  const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
+  const editorEngine = useContext(EngineContext);
+
+  const testObjectPanel = () => {
+    if (appUiState?.controlPanel.isShowing) {
+      dispatchAppUiState({
+        type: APPUI_ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT,
+      });
+    } else {
+      dispatchAppUiState({
+        type: APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT,
+        payload: {
+          group: ClipGroup.OBJECT,
+          object_name: "TEST BUTTON",
+          object_uuid: "",
+          version: "1",
+          objectVectors: {
+            position: { x: 1, y: 2, z: 3 },
+            rotation: { x: 4, y: 5, z: 6 },
+            scale: { x: 7, y: 8, z: 9 },
+          },
+        },
+      });
+    }
+  };
+
+  const testTTSPanel = () =>{
+    dispatchAppUiState({
+      type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
+    })
+  };
+
+  const handleButtonCameraView = () => {
+    editorEngine?.switchCameraView();
+  };
+  const testStylizeRequest = () => {
+    editorEngine?.testStylizeRequest();
+  };
+  const handleButtonRender = () => {
+    editorEngine?.generateVideo();
+  };
+
+  const handleButtonTakeFrame = () => {
+    editorEngine?.take_timeline_cam_clip();
+  };
+
+  const handleButtonSingleFrame = () => {
+    editorEngine?.generateFrame();
+  };
+  const handleButtonPlayBack = () => {
+    editorEngine?.startPlayback();
+  };
+
+  const smallButtons = "text-xs p-2 h-6 ";
+  const tertiaryColor = "bg-brand-tertiary hover:bg-brand-teriary-400 focus-visible:outline-brand-tertiary ";
+  return(
+    <>
+      <div className="flex gap-1">
+        <Button variant="secondary" onClick={handleButtonCameraView} className={smallButtons}>
+          Toggle Camera View
+        </Button>
+        <Button
+          onClick={testObjectPanel}
+          className={smallButtons}
+        >
+          Object Panel
+        </Button>
+        <Button
+          onClick={testTTSPanel}
+          className={tertiaryColor + smallButtons}
+        >
+          TTS Panel
+        </Button>
+      </div>
+      <div className="flex gap-1">
+        <Button onClick={handleButtonSingleFrame} className={smallButtons}>Render Single Frame</Button>
+        <Button onClick={handleButtonTakeFrame} className={smallButtons}>Take Frame</Button>
+        <Button onClick={handleButtonRender} className={smallButtons}>Render</Button>
+        <Button
+          onClick={testStylizeRequest}
+          className={"bg-brand-tertiary hover:bg-brand-teriary-400 focus-visible:outline-brand-tertiary " +smallButtons}
+          style={{ zIndex: 9001 }}
+        >
+          Test Stylize
+        </Button>
+      </div>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
new file mode 100644
index 0000000000..4597723b7a
--- /dev/null
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -0,0 +1,24 @@
+import { useContext, useState } from "react";
+
+import { AppUiContext } from "../../contexts/AppUiContext";
+import { APPUI_ACTION_TYPES } from "../../reducers";
+import { TransitionDialogue } from "~/components/TransitionDialogue";
+
+export const DialogueTTS = ()=>{
+  const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
+  const handleClose = ()=> {
+    dispatchAppUiState({
+      type: APPUI_ACTION_TYPES.CLOSE_DIALOGUE_TTS
+    })
+  };
+
+  return(
+    <TransitionDialogue
+      title={"Generate TTS"}
+      isOpen={appUiState.diagloueTts.isOpen}
+      onClose={handleClose}
+    >
+      <p>TTS PANEL BODY</p>
+    </TransitionDialogue>
+  );
+};
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/index.tsx b/app/pages/PageEnigma/comps/DialogueTTS/index.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx b/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx
index 407450407d..74cd098279 100644
--- a/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx
+++ b/app/pages/PageEnigma/reducers/appUiReducer/reducer.tsx
@@ -2,8 +2,24 @@ import { State, Action, ACTION_TYPES } from "./types";
 
 export function reducer(state: State, action: Action): State {
   switch (action.type) {
+    case ACTION_TYPES.OPEN_DIALOGUE_TTS:{
+      return{
+        ...state,
+        diagloueTts:{
+          isOpen: true,
+        }
+      }
+    }
+    case ACTION_TYPES.CLOSE_DIALOGUE_TTS:{
+      return{
+        ...state,
+        diagloueTts:{
+          isOpen: false,
+        }
+      }
+    }
     case ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT: {
-      console.log("pay", action.payload);
+      // console.log("pay", action.payload);
       return {
         ...state,
         controlPanel: {
diff --git a/app/pages/PageEnigma/reducers/appUiReducer/types.tsx b/app/pages/PageEnigma/reducers/appUiReducer/types.tsx
index ccbc7fd068..36d3e5c549 100644
--- a/app/pages/PageEnigma/reducers/appUiReducer/types.tsx
+++ b/app/pages/PageEnigma/reducers/appUiReducer/types.tsx
@@ -34,6 +34,9 @@ export type State = {
     useFakeTimer?: number;
   };
   controlPanel: ControlPanel;
+  diagloueTts: {
+    isOpen: boolean;
+  }
 };
 
 export enum ACTION_TYPES {
@@ -47,13 +50,14 @@ export enum ACTION_TYPES {
   SHOW_CONTROLPANELS_SCENEOBJECT = "show_controlpanels_sceneobject",
   UPDATE_CONTROLPANELS_SCENEOBJECT = "update_controlpanels_sceneobject",
   HIDE_CONTROLPANELS_SCENEOBJECT = "hide_controlpanels_sceneobject",
+  OPEN_DIALOGUE_TTS = "open_dialogue_tts",
+  CLOSE_DIALOGUE_TTS = "close_dialogue_tts",
 }
 
 export type Action =
-  | {
-      // Not sure why we need this but type script won't stop complaning fix wil.
-      type: ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT;
-    }
+  | { type: ACTION_TYPES.OPEN_DIALOGUE_TTS }
+  | { type: ACTION_TYPES.CLOSE_DIALOGUE_TTS }
+  | { type: ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT }
   | {
       type: ACTION_TYPES.UPDATE_CONTROLPANELS_SCENEOBJECT;
       payload: SceneObject;
diff --git a/app/pages/PageEnigma/reducers/appUiReducer/values.tsx b/app/pages/PageEnigma/reducers/appUiReducer/values.tsx
index 51f8a64f01..8aeedf70ae 100644
--- a/app/pages/PageEnigma/reducers/appUiReducer/values.tsx
+++ b/app/pages/PageEnigma/reducers/appUiReducer/values.tsx
@@ -27,4 +27,5 @@ export const initialStateValues: State = {
       },
     },
   },
+  diagloueTts:{isOpen:false}
 };

From 98a9736198714fa30072a08a7174a0c6596b69a0 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 3 Apr 2024 11:01:28 -0400
Subject: [PATCH 02/27] dialogue ui

---
 app/components/TransitionDialogue.tsx         |  9 ++--
 app/components/index.tsx                      |  2 +
 .../comps/DialogueTTS/DialogueTTS.tsx         | 51 +++++++++++++++++--
 3 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/app/components/TransitionDialogue.tsx b/app/components/TransitionDialogue.tsx
index 9d6be6634c..6e2d87b4c6 100644
--- a/app/components/TransitionDialogue.tsx
+++ b/app/components/TransitionDialogue.tsx
@@ -1,12 +1,13 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, ReactNode } from "react";
-
+import { twMerge } from "tailwind-merge";
 export const TransitionDialogue = ({
-  isOpen, title, onClose, children,
+  isOpen, title, onClose, className, children,
 }:{
   isOpen: boolean;
-  title?: string;
+  title?: ReactNode;
   onClose:()=>void;
+  className: string;
   children: ReactNode;
   
 })=>{
@@ -36,7 +37,7 @@ export const TransitionDialogue = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className={twMerge("w-full max-w-md transform overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all", className)}>
                   {title && (
                     <Dialog.Title
                       as="h4"
diff --git a/app/components/index.tsx b/app/components/index.tsx
index d3c627d58c..65a2917ac6 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -7,6 +7,7 @@ import { InputVector } from "./InputVector";
 import { H1, H2, H3, H4, H5, H6, P, Label} from "./Typography";
 import { ItemPicker } from "./ItemPicker";
 import { Textarea } from "./Textarea";
+import { TransitionDialogue } from "./TransitionDialogue";
 import { LoadingBar } from "./LoadingBar";
 import { LoadingDots, LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
 
@@ -18,6 +19,7 @@ export {
   H1,H2,H3,H4,H5,H6,P,Label,
   ItemPicker,
   Textarea,
+  TransitionDialogue,
   Input,
   InputVector,
   LoadingBar,
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index 4597723b7a..eafd7b372a 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -1,8 +1,15 @@
 import { useContext, useState } from "react";
-
+import { faVolume, faShuffle } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AppUiContext } from "../../contexts/AppUiContext";
 import { APPUI_ACTION_TYPES } from "../../reducers";
-import { TransitionDialogue } from "~/components/TransitionDialogue";
+import { 
+  Button,
+  H5,
+  Label,
+  TransitionDialogue,
+  Textarea
+} from "~/components";
 
 export const DialogueTTS = ()=>{
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
@@ -14,11 +21,47 @@ export const DialogueTTS = ()=>{
 
   return(
     <TransitionDialogue
-      title={"Generate TTS"}
+      title={
+        <>
+          <FontAwesomeIcon icon={faVolume} className="pr-2"/>
+          Generate TTS
+        </>
+      }
+      className="max-w-xl"
       isOpen={appUiState.diagloueTts.isOpen}
       onClose={handleClose}
     >
-      <p>TTS PANEL BODY</p>
+      <>
+        <Label>Select a Voice</Label>
+        <div className="flex w-full justify-between">
+          <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
+        />
+
+        <div className="mt-6 flex justify-end gap-2">
+          <Button
+            type="button"
+            onClick={handleClose}
+            variant="secondary"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            variant="primary"
+            onClick={(e) => {
+              console.log("Add to Lip Sync Track Triggered")
+            }}
+          >
+            Add to Lip Sync Track
+          </Button>
+        </div>
+      </>
     </TransitionDialogue>
   );
 };
\ No newline at end of file

From 6feef930b9a1b809d8bed3366a4b6c5a52feafe2 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 3 Apr 2024 12:18:13 -0400
Subject: [PATCH 03/27] ListDropdown Component

---
 app/components/ListDropdown.tsx               | 64 +++++++++++++++++++
 app/components/TransitionDialogue.tsx         |  2 +-
 app/components/index.tsx                      |  2 +
 .../comps/DialogueTTS/DialogueTTS.tsx         | 21 ++++--
 4 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 app/components/ListDropdown.tsx

diff --git a/app/components/ListDropdown.tsx b/app/components/ListDropdown.tsx
new file mode 100644
index 0000000000..2a0661e99f
--- /dev/null
+++ b/app/components/ListDropdown.tsx
@@ -0,0 +1,64 @@
+import { Fragment, useState } from 'react'
+import { Listbox, Transition } from '@headlessui/react'
+import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+
+interface ListDropdownProps {
+  list: {[key: string] : string}[];
+}
+export const ListDropdown = ({
+  list
+}:ListDropdownProps) => {
+  const [selected, setSelected] = useState(list[0])
+
+  return (
+    <Listbox value={selected} onChange={setSelected}>
+      <div className="relative mt-1">
+        <Listbox.Button className="relative w-full h-10 cursor-pointer rounded-md bg-brand-secondary py-2 pl-3 pr-10 text-left outline-none outline-offset-0 transition-all duration-150 ease-in-out focus:outline-brand-primary sm:text-sm">
+          <span className="block truncate">{selected.name}</span>
+          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <FontAwesomeIcon icon={faChevronDown} aria-hidden="true"/>
+          </span>
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-brand-secondary py-1 text-base shadow-lg focus:outline-none sm:text-sm">
+            {list.map((item, itemIdx) => (
+              <Listbox.Option
+                key={itemIdx}
+                className={({ active }) =>
+                  `relative cursor-pointer select-none py-2 pl-10 pr-4  text-white ${
+                    active ? 'bg-brand-secondary-400' : ''
+                  }`
+                }
+                value={item}
+              >
+                {({ selected }) => (
+                  <>
+                    <span
+                      className={`block truncate ${
+                        selected ? 'font-medium' : 'font-normal'
+                      }`}
+                    >
+                      {Object.values(item)[0]}
+                    </span>
+                    {selected ? (
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+                        <FontAwesomeIcon icon={faCheck} aria-hidden="true"/>
+                      </span>
+                    ) : null}
+                  </>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </div>
+    </Listbox>
+  )
+}
\ No newline at end of file
diff --git a/app/components/TransitionDialogue.tsx b/app/components/TransitionDialogue.tsx
index 6e2d87b4c6..f897a01e8e 100644
--- a/app/components/TransitionDialogue.tsx
+++ b/app/components/TransitionDialogue.tsx
@@ -37,7 +37,7 @@ export const TransitionDialogue = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className={twMerge("w-full max-w-md transform overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all", className)}>
+                <Dialog.Panel className={twMerge("w-full max-w-md transform rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all", className)}>
                   {title && (
                     <Dialog.Title
                       as="h4"
diff --git a/app/components/index.tsx b/app/components/index.tsx
index 65a2917ac6..6f375b52e6 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -8,6 +8,7 @@ import { H1, H2, H3, H4, H5, H6, P, Label} from "./Typography";
 import { ItemPicker } from "./ItemPicker";
 import { Textarea } from "./Textarea";
 import { TransitionDialogue } from "./TransitionDialogue";
+import { ListDropdown } from "./ListDropdown"
 import { LoadingBar } from "./LoadingBar";
 import { LoadingDots, LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
 
@@ -22,6 +23,7 @@ export {
   TransitionDialogue,
   Input,
   InputVector,
+  ListDropdown,
   LoadingBar,
   LoadingDots,
   LoadingDotsBricks,
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index eafd7b372a..c39cceb105 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -7,10 +7,20 @@ import {
   Button,
   H5,
   Label,
+  ListDropdown,
   TransitionDialogue,
   Textarea
 } from "~/components";
 
+const testdata = [
+  { name: 'Wade Cooper' },
+  { name: 'Arlene Mccoy' },
+  { name: 'Devon Webb' },
+  { name: 'Tom Cook' },
+  { name: 'Tanya Fox' },
+  { name: 'Hellen Schmidt' },
+]
+
 export const DialogueTTS = ()=>{
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
   const handleClose = ()=> {
@@ -31,9 +41,11 @@ export const DialogueTTS = ()=>{
       isOpen={appUiState.diagloueTts.isOpen}
       onClose={handleClose}
     >
-      <>
-        <Label>Select a Voice</Label>
-        <div className="flex w-full justify-between">
+      <div className="flex flex-col">
+        <Label className="mb-1">Select a Voice</Label>
+        <ListDropdown list={testdata}/>
+
+        <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}/>
@@ -41,6 +53,7 @@ export const DialogueTTS = ()=>{
           </div>
         </div>
         <Textarea
+          placeholder="Enter what you want the voice to say here."
         />
 
         <div className="mt-6 flex justify-end gap-2">
@@ -61,7 +74,7 @@ export const DialogueTTS = ()=>{
             Add to Lip Sync Track
           </Button>
         </div>
-      </>
+      </div>
     </TransitionDialogue>
   );
 };
\ No newline at end of file

From 3c83d51110adf204b7ff57a35c15b687417ca1d2 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 3 Apr 2024 13:45:33 -0400
Subject: [PATCH 04/27] even better list dropdowns

---
 app/components/ListDropdown.tsx               |  6 +-
 app/components/ListSearchDropdown.tsx         | 89 +++++++++++++++++++
 app/components/index.tsx                      |  2 +
 .../comps/DialogueTTS/DialogueTTS.tsx         |  3 +-
 app/routes/ComponentLibrary.tsx               | 19 +++-
 5 files changed, 114 insertions(+), 5 deletions(-)
 create mode 100644 app/components/ListSearchDropdown.tsx

diff --git a/app/components/ListDropdown.tsx b/app/components/ListDropdown.tsx
index 2a0661e99f..5bb2af5fc3 100644
--- a/app/components/ListDropdown.tsx
+++ b/app/components/ListDropdown.tsx
@@ -27,13 +27,13 @@ export const ListDropdown = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-brand-secondary py-1 text-base shadow-lg focus:outline-none sm:text-sm">
+          <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-brand-secondary py-1 text-base shadow-lg focus:outline-none sm:text-sm z-10">
             {list.map((item, itemIdx) => (
               <Listbox.Option
                 key={itemIdx}
                 className={({ active }) =>
                   `relative cursor-pointer select-none py-2 pl-10 pr-4  text-white ${
-                    active ? 'bg-brand-secondary-400' : ''
+                    active ? 'text-white' : 'text-gray-400'
                   }`
                 }
                 value={item}
@@ -48,7 +48,7 @@ export const ListDropdown = ({
                       {Object.values(item)[0]}
                     </span>
                     {selected ? (
-                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3">
                         <FontAwesomeIcon icon={faCheck} aria-hidden="true"/>
                       </span>
                     ) : null}
diff --git a/app/components/ListSearchDropdown.tsx b/app/components/ListSearchDropdown.tsx
new file mode 100644
index 0000000000..cf2756c238
--- /dev/null
+++ b/app/components/ListSearchDropdown.tsx
@@ -0,0 +1,89 @@
+import { Fragment, useState } from 'react'
+import { Combobox, Transition } from '@headlessui/react'
+import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+interface ListDropdownProps {
+  list: {[key: string] : string}[];
+}
+export const ListSearchDropdown = ({
+  list
+}:ListDropdownProps) => {
+  const [selected, setSelected] = useState(list[0])
+  const [query, setQuery] = useState('')
+
+  const filteredList =
+    query === ''
+      ? list
+      : list.filter((item) =>
+          Object.values(item)[0]
+            .toLowerCase()
+            .replace(/\s+/g, '')
+            .includes(query.toLowerCase().replace(/\s+/g, ''))
+        )
+
+  return (
+    <Combobox value={selected} onChange={setSelected}>
+      <div className="relative mt-1">
+        <div className="relative w-full cursor-default overflow-hidden rounded-md text-left shadow-md sm:text-sm">
+          <Combobox.Input
+            className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 bg-brand-secondary text-white outline-none outline-offset-0 transition-all duration-150 ease-in-out focus:outline-brand-primary"
+            displayValue={(item: {[key: string] : string}) => Object.values(item)[0]}
+            onChange={(event) => setQuery(event.target.value)}
+          />
+          <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+            <FontAwesomeIcon icon={faChevronDown} aria-hidden="true"/>
+          </Combobox.Button>
+        </div>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          afterLeave={() => setQuery('')}
+        >
+          <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-brand-secondary py-1 text-base shadow-lg focus:outline-none sm:text-sm z-10">
+            {filteredList.length === 0 && query !== '' ? (
+              <div className="relative cursor-default select-none px-4 py-2 text-white">
+                Nothing found.
+              </div>
+            ) : (
+              filteredList.map((item, itemIdx) => (
+                <Combobox.Option
+                  key={itemIdx}
+                  className={({ active }) =>
+                    `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
+                      active ? 'text-white' : 'text-gray-400'
+                    }`
+                  }
+                  value={item}
+                >
+                  {({ selected, active }) => (
+                    <>
+                      <span
+                        className={`block truncate ${
+                          selected ? 'font-medium' : 'font-normal'
+                        }`}
+                      >
+                        {Object.values(item)[0]}
+                      </span>
+                      {selected ? (
+                        <span
+                          className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
+                            active ? 'text-white' : 'text-teal-600'
+                          }`}
+                        >
+                          <FontAwesomeIcon icon={faCheck} aria-hidden="true"/>
+                        </span>
+                      ) : null}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            )}
+          </Combobox.Options>
+        </Transition>
+      </div>
+    </Combobox>
+  )
+}
\ No newline at end of file
diff --git a/app/components/index.tsx b/app/components/index.tsx
index 6f375b52e6..8a2451ce4b 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -9,6 +9,7 @@ import { ItemPicker } from "./ItemPicker";
 import { Textarea } from "./Textarea";
 import { TransitionDialogue } from "./TransitionDialogue";
 import { ListDropdown } from "./ListDropdown"
+import { ListSearchDropdown } from "./ListSearchDropdown"
 import { LoadingBar } from "./LoadingBar";
 import { LoadingDots, LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
 
@@ -24,6 +25,7 @@ export {
   Input,
   InputVector,
   ListDropdown,
+  ListSearchDropdown,
   LoadingBar,
   LoadingDots,
   LoadingDotsBricks,
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index c39cceb105..5f46c5d125 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -8,6 +8,7 @@ import {
   H5,
   Label,
   ListDropdown,
+  ListSearchDropdown,
   TransitionDialogue,
   Textarea
 } from "~/components";
@@ -43,7 +44,7 @@ export const DialogueTTS = ()=>{
     >
       <div className="flex flex-col">
         <Label className="mb-1">Select a Voice</Label>
-        <ListDropdown list={testdata}/>
+        <ListSearchDropdown  list={testdata}/>
 
         <div className="flex w-full justify-between mt-4">
           <Label>What would you like to say?</Label>
diff --git a/app/routes/ComponentLibrary.tsx b/app/routes/ComponentLibrary.tsx
index c0e6719021..d544d4666d 100644
--- a/app/routes/ComponentLibrary.tsx
+++ b/app/routes/ComponentLibrary.tsx
@@ -3,6 +3,8 @@ import {
   Button,
   ButtonLink,
   H1,H2,H3,H4,H5,H6,P,Label,
+  ListDropdown,
+  ListSearchDropdown,
   LoadingBar,
   LoadingDotsTyping,
   LoadingDotsBricks,
@@ -13,6 +15,15 @@ export default function ComponentLibrary () {
   const [progress, setProgress] = useState(0);
   const loopRef = useRef<NodeJS.Timeout | null>(null);
 
+  const testdata = [
+    { name: 'Wade Cooper' },
+    { name: 'Arlene Mccoy' },
+    { name: 'Devon Webb' },
+    { name: 'Tom Cook' },
+    { name: 'Tanya Fox' },
+    { name: 'Hellen Schmidt' },
+  ]
+
   const pushProgressBar: ()=>void = useCallback(()=>{
     loopRef.current = setInterval(function timer(){
       setProgress((curr)=>{
@@ -72,6 +83,12 @@ export default function ComponentLibrary () {
           <ButtonLink to="/">Back to /</ButtonLink>
         </div>
 
+        <div className="flex flex-col gap-2 mb-4 max-w-2xl">
+          <H4>List Dropdowns</H4>
+          <ListDropdown list={testdata}/>
+          <ListSearchDropdown list={testdata}/>
+        </div>
+
         <div className="flex flex-col gap-2 mb-4">
           <H4>Loading Dots</H4>
           <div className="flex gap-2">
@@ -84,7 +101,7 @@ export default function ComponentLibrary () {
           </div>
         </div>
 
-        <div className="flex flex-col gap-2 mb-4">
+        <div className="flex flex-col gap-2 mb-4  max-w-2xl">
           <H4>Loading Bar</H4>
           <div className="flex gap-2 items-center">
             <LoadingBar

From db06ee5be9730b6414324eae3e6cb22df58309c7 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 3 Apr 2024 14:19:28 -0400
Subject: [PATCH 05/27] hook up different ui elements to get ready for API hook
 up

---
 app/components/ListDropdown.tsx               | 11 +++--
 app/components/ListSearchDropdown.tsx         |  8 +++-
 .../comps/DialogueTTS/DialogueTTS.tsx         | 47 +++++++++++++++++--
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/app/components/ListDropdown.tsx b/app/components/ListDropdown.tsx
index 5bb2af5fc3..aeb04875fc 100644
--- a/app/components/ListDropdown.tsx
+++ b/app/components/ListDropdown.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import { Listbox, Transition } from '@headlessui/react'
 import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -6,11 +6,16 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 interface ListDropdownProps {
   list: {[key: string] : string}[];
+  onSelect: (val:string)=>void;
 }
 export const ListDropdown = ({
-  list
+  list, onSelect
 }:ListDropdownProps) => {
-  const [selected, setSelected] = useState(list[0])
+  const [selected, setSelected] = useState(list[0]);
+  
+  useEffect(()=>{
+    onSelect(Object.values(selected)[0]);
+  }, [selected]);
 
   return (
     <Listbox value={selected} onChange={setSelected}>
diff --git a/app/components/ListSearchDropdown.tsx b/app/components/ListSearchDropdown.tsx
index cf2756c238..78f9f74b26 100644
--- a/app/components/ListSearchDropdown.tsx
+++ b/app/components/ListSearchDropdown.tsx
@@ -1,13 +1,14 @@
-import { Fragment, useState } from 'react'
+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'
 
 interface ListDropdownProps {
   list: {[key: string] : string}[];
+  onSelect: (val:string)=>void
 }
 export const ListSearchDropdown = ({
-  list
+  list, onSelect
 }:ListDropdownProps) => {
   const [selected, setSelected] = useState(list[0])
   const [query, setQuery] = useState('')
@@ -22,6 +23,9 @@ export const ListSearchDropdown = ({
             .includes(query.toLowerCase().replace(/\s+/g, ''))
         )
 
+  useEffect(()=>{
+    onSelect(Object.values(selected)[0]);
+  }, [selected]);
   return (
     <Combobox value={selected} onChange={setSelected}>
       <div className="relative mt-1">
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index 5f46c5d125..3d4582f499 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -1,5 +1,5 @@
 import { useContext, useState } from "react";
-import { faVolume, faShuffle } from "@fortawesome/pro-solid-svg-icons";
+import { faVolume, faShuffle, faPlay } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AppUiContext } from "../../contexts/AppUiContext";
 import { APPUI_ACTION_TYPES } from "../../reducers";
@@ -7,7 +7,6 @@ import {
   Button,
   H5,
   Label,
-  ListDropdown,
   ListSearchDropdown,
   TransitionDialogue,
   Textarea
@@ -21,15 +20,41 @@ const testdata = [
   { name: 'Tanya Fox' },
   { name: 'Hellen Schmidt' },
 ]
-
+type TtsState = {
+  voice: string;
+  text: string;
+  hasAudio: boolean;
+}
 export const DialogueTTS = ()=>{
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
+  const [ttsState, setTtsState] = useState<TtsState>({
+    voice:"",
+    text:"",
+    hasAudio:false
+  });
+
   const handleClose = ()=> {
     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)=>{
+    setTtsState((curr)=>({
+      ...curr,
+      voices: val,
+    }));
+  }
+
   return(
     <TransitionDialogue
       title={
@@ -44,7 +69,7 @@ export const DialogueTTS = ()=>{
     >
       <div className="flex flex-col">
         <Label className="mb-1">Select a Voice</Label>
-        <ListSearchDropdown  list={testdata}/>
+        <ListSearchDropdown list={testdata} onSelect={handleOnSelect}/>
 
         <div className="flex w-full justify-between mt-4">
           <Label>What would you like to say?</Label>
@@ -55,8 +80,19 @@ export const DialogueTTS = ()=>{
         </div>
         <Textarea
           placeholder="Enter what you want the voice to say here."
+          value={ttsState.text}
+          onChange={handleTextInput}
         />
-
+        <div className="mt-6 flex gap-2">
+          <Button
+            variant={ttsState.hasAudio ? "secondary" : "primary" }
+            disabled={ttsState.text === ""}
+            icon={faPlay}
+            // className="px-6 py-3.5"
+          >
+            Speak
+          </Button>
+        </div>
         <div className="mt-6 flex justify-end gap-2">
           <Button
             type="button"
@@ -68,6 +104,7 @@ export const DialogueTTS = ()=>{
           <Button
             type="button"
             variant="primary"
+            disabled={!ttsState.hasAudio}
             onClick={(e) => {
               console.log("Add to Lip Sync Track Triggered")
             }}

From 59b03fc0b11b89d4529ff3a338e2fda1972dac71 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 3 Apr 2024 16:27:53 -0400
Subject: [PATCH 06/27] retrieving list of voices from server

---
 app/components/ListSearchDropdown.tsx         | 82 +++++++++++--------
 .../comps/DialogueTTS/DialogueTTS.tsx         | 33 +++++++-
 .../comps/DialogueTTS/utilities.tsx           | 55 +++++++++++++
 3 files changed, 131 insertions(+), 39 deletions(-)
 create mode 100644 app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx

diff --git a/app/components/ListSearchDropdown.tsx b/app/components/ListSearchDropdown.tsx
index 78f9f74b26..36c198c6d1 100644
--- a/app/components/ListSearchDropdown.tsx
+++ b/app/components/ListSearchDropdown.tsx
@@ -5,10 +5,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 interface ListDropdownProps {
   list: {[key: string] : string}[];
+  listDisplayKey?: string;
   onSelect: (val:string)=>void
 }
 export const ListSearchDropdown = ({
-  list, onSelect
+  list, listDisplayKey, onSelect
 }:ListDropdownProps) => {
   const [selected, setSelected] = useState(list[0])
   const [query, setQuery] = useState('')
@@ -26,13 +27,17 @@ export const ListSearchDropdown = ({
   useEffect(()=>{
     onSelect(Object.values(selected)[0]);
   }, [selected]);
+
   return (
     <Combobox value={selected} onChange={setSelected}>
       <div className="relative mt-1">
-        <div className="relative w-full cursor-default overflow-hidden rounded-md text-left shadow-md sm:text-sm">
+        <div className="relative w-full cursor-default rounded-md text-left shadow-md sm:text-sm">
           <Combobox.Input
-            className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 bg-brand-secondary text-white outline-none outline-offset-0 transition-all duration-150 ease-in-out focus:outline-brand-primary"
-            displayValue={(item: {[key: string] : string}) => Object.values(item)[0]}
+            className="w-full border-none rounded-md py-2 pl-3 pr-10 text-sm leading-5 bg-brand-secondary text-white outline-none outline-offset-0 transition-all duration-150 ease-in-out focus:outline-brand-primary"
+            displayValue={(item: {[key: string] : string}) => {
+              if(listDisplayKey) return item[listDisplayKey];
+              else return Object.values(item)[0]
+            }}
             onChange={(event) => setQuery(event.target.value)}
           />
           <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
@@ -52,38 +57,43 @@ export const ListSearchDropdown = ({
                 Nothing found.
               </div>
             ) : (
-              filteredList.map((item, itemIdx) => (
-                <Combobox.Option
-                  key={itemIdx}
-                  className={({ active }) =>
-                    `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
-                      active ? 'text-white' : 'text-gray-400'
-                    }`
-                  }
-                  value={item}
-                >
-                  {({ selected, active }) => (
-                    <>
-                      <span
-                        className={`block truncate ${
-                          selected ? 'font-medium' : 'font-normal'
-                        }`}
-                      >
-                        {Object.values(item)[0]}
-                      </span>
-                      {selected ? (
-                        <span
-                          className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
-                            active ? 'text-white' : 'text-teal-600'
-                          }`}
-                        >
-                          <FontAwesomeIcon icon={faCheck} aria-hidden="true"/>
-                        </span>
-                      ) : null}
-                    </>
-                  )}
-                </Combobox.Option>
-              ))
+              filteredList.map((item, itemIdx) => {
+                if(itemIdx <= 10)
+                  return (
+                    <Combobox.Option
+                      key={itemIdx}
+                      className={({ active }) =>
+                        `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
+                          active ? 'text-white' : 'text-gray-400'
+                        }`
+                      }
+                      value={item}
+                    >
+                      {({ selected, active }) => (
+                        <>
+                          <span
+                            className={`block truncate ${
+                              selected ? 'font-medium' : 'font-normal'
+                            }`}
+                          >
+                            {!listDisplayKey && Object.values(item)[0]}
+                            {listDisplayKey && item[listDisplayKey]}
+                          </span>
+                          {selected ? (
+                            <span
+                              className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
+                                active ? 'text-white' : 'text-teal-600'
+                              }`}
+                            >
+                              <FontAwesomeIcon icon={faCheck} aria-hidden="true"/>
+                            </span>
+                          ) : null}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  );
+                return null;
+              })
             )}
           </Combobox.Options>
         </Transition>
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index 3d4582f499..bf597f016d 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { faVolume, faShuffle, faPlay } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AppUiContext } from "../../contexts/AppUiContext";
@@ -11,6 +11,7 @@ import {
   TransitionDialogue,
   Textarea
 } from "~/components";
+import { ListTtsModels, TtsModelListItem } from "./utilities";
 
 const testdata = [
   { name: 'Wade Cooper' },
@@ -33,6 +34,28 @@ export const DialogueTTS = ()=>{
     hasAudio:false
   });
 
+  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(() => {
+  //   console.log(ttsModels);
+  // }, [ttsModels]);
+
   const handleClose = ()=> {
     dispatchAppUiState({
       type: APPUI_ACTION_TYPES.CLOSE_DIALOGUE_TTS
@@ -69,8 +92,12 @@ export const DialogueTTS = ()=>{
     >
       <div className="flex flex-col">
         <Label className="mb-1">Select a Voice</Label>
-        <ListSearchDropdown list={testdata} onSelect={handleOnSelect}/>
-
+        {/* <ListSearchDropdown list={testdata} onSelect={handleOnSelect}/> */}
+        <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">
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx b/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx
new file mode 100644
index 0000000000..cb2b6bf037
--- /dev/null
+++ b/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx
@@ -0,0 +1,55 @@
+// https://api.fakeyou.com/tts/list
+
+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,
+}
+
+export async function ListTtsModels() : Promise<Array<TtsModelListItem>| undefined> {
+  const endpoint = 'https://api.fakeyou.com/tts/list';
+  
+  return await fetch(endpoint, {
+    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;
+  });
+}
\ No newline at end of file

From af48fd4a895f51ed392a710655a357dd73b6001c Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 3 Apr 2024 16:34:33 -0400
Subject: [PATCH 07/27] fixed filtering

---
 app/components/ListSearchDropdown.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/components/ListSearchDropdown.tsx b/app/components/ListSearchDropdown.tsx
index 36c198c6d1..cd6b0a78e1 100644
--- a/app/components/ListSearchDropdown.tsx
+++ b/app/components/ListSearchDropdown.tsx
@@ -17,12 +17,18 @@ export const ListSearchDropdown = ({
   const filteredList =
     query === ''
       ? list
-      : list.filter((item) =>
-          Object.values(item)[0]
+      : list.filter((item) =>{
+        if(listDisplayKey)
+          return item[listDisplayKey]
             .toLowerCase()
             .replace(/\s+/g, '')
-            .includes(query.toLowerCase().replace(/\s+/g, ''))
-        )
+            .includes(query.toLowerCase().replace(/\s+/g, ''));
+        
+        return Object.values(item)[0]
+          .toLowerCase()
+          .replace(/\s+/g, '')
+          .includes(query.toLowerCase().replace(/\s+/g, ''));
+        })
 
   useEffect(()=>{
     onSelect(Object.values(selected)[0]);
@@ -100,4 +106,4 @@ export const ListSearchDropdown = ({
       </div>
     </Combobox>
   )
-}
\ No newline at end of file
+}

From 924e9468be2d68a2ac7bb5f425dc6289ffe8b425 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 3 Apr 2024 17:45:33 -0400
Subject: [PATCH 08/27] Side Panel Audio Tab scaffolding done

---
 .../comps/SidePanelTabs/TabAudio.tsx          | 68 +++++++++++++++++++
 .../PageEnigma/comps/SidePanelTabs/index.tsx  |  4 +-
 2 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx
new file mode 100644
index 0000000000..c466cb9c9e
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx
@@ -0,0 +1,68 @@
+import { useContext, useEffect, useState } from "react";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
+import { APPUI_ACTION_TYPES } from "../../reducers";
+import { AppUiContext } from "../../contexts/AppUiContext";
+import { useSignals } from "@preact/signals-react/runtime";
+import { timelineHeight } from "~/pages/PageEnigma/store";
+
+import { AnimationElement } from "./AnimationElement";
+import { Button, Label, P } from "~/components";
+
+export const TabAudio = () => {
+  const { audioClips } = useContext(TrackContext);
+  const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
+
+  useSignals();
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    setHeight(window.outerHeight - timelineHeight.value);
+  }, []);
+
+  const openTTSPanel = () =>{
+    dispatchAppUiState({
+      type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
+    })
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col">
+        <Label>Generate</Label>
+        <Button
+          onClick={openTTSPanel}
+          variant="secondary"
+        >
+          Create TTS Audio
+        </Button>
+        <span className="w-full h-3" />
+        <Button
+          disabled
+          variant="secondary"
+        >
+          Create Voice to Voice Audio
+        </Button>
+      </div>
+      <div className="flex flex-col mt-1">
+        <Label>Preset Dialogues</Label>
+      
+        <div className="flex flex-wrap gap-2">
+          {audioClips.map((clip) => {
+            return (
+              <AnimationElement key={clip.media_id} clip={clip} type="audio" />
+            );
+        })}
+        </div>
+      </div>
+
+      <div className="flex flex-col mt-1">
+        <Label>My Dialogues</Label>
+        <div className="flex justify-center items-center text-center w-full h-40">
+          <P className="text-brand-secondary-300"> No audio generated yet</P>
+        </div>
+      </div>
+
+      <Button className="w-fit m-auto px-6 py-2"> Add to Lip Sync Track</Button>
+    </div>
+  );
+};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
index 8a3a31b967..02911e9b53 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
@@ -1,7 +1,7 @@
 import { Tabs } from "~/modules/Tabs";
 import { TabStylization } from "./TabStylization";
 import { AnimationElements } from "./AnimationElements";
-import { AudioElements } from "~/pages/PageEnigma/comps/SidePanelTabs/AudioElements";
+import { TabAudio } from "~/pages/PageEnigma/comps/SidePanelTabs/TabAudio";
 
 export const SidePanelTabs = () => {
   return (
@@ -17,7 +17,7 @@ export const SidePanelTabs = () => {
         },
         {
           header: "Audio",
-          children: <AudioElements />,
+          children: <TabAudio />,
         },
         {
           header: "Stylization",

From 3dc154942e61fa197bfd3ce6d61753ca7e8ca24f Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Thu, 4 Apr 2024 17:43:58 -0400
Subject: [PATCH 09/27] housekeeping, code organization

---
 app/api.tsx                                   | 11 ++++
 app/contexts/Authentication/utilities.tsx     |  8 +--
 .../TestFeaturesButtons.tsx                   |  2 +-
 .../comps/DialogueTTS/DialogueTTS.tsx         | 33 ++++++----
 .../PageEnigma/comps/DialogueTTS/types.tsx    | 65 +++++++++++++++++++
 .../comps/DialogueTTS/utilities.tsx           | 43 ++----------
 6 files changed, 106 insertions(+), 56 deletions(-)
 create mode 100644 app/api.tsx
 create mode 100644 app/pages/PageEnigma/comps/DialogueTTS/types.tsx

diff --git a/app/api.tsx b/app/api.tsx
new file mode 100644
index 0000000000..666b25afbb
--- /dev/null
+++ b/app/api.tsx
@@ -0,0 +1,11 @@
+export const apiHost = 'https://api.fakeyou.com';
+
+// Authentications
+// const createAccount = `${apiHost}}/create_account`;
+export const login = `${apiHost}/v1/login`;
+export const getSession = `${apiHost}/v1/session`;
+export const logout = `${apiHost}/v1/logout`;
+
+// TTS
+export const inferTts = `${apiHost}/tts/inference`;
+export const listTts = `${apiHost}/tts/list`;
\ No newline at end of file
diff --git a/app/contexts/Authentication/utilities.tsx b/app/contexts/Authentication/utilities.tsx
index ccd7915e30..0cc54b8f46 100644
--- a/app/contexts/Authentication/utilities.tsx
+++ b/app/contexts/Authentication/utilities.tsx
@@ -1,14 +1,8 @@
-
+import { login, getSession, logout } from '~/api';
 import {
   SessionResponse,
 } from "./types";
 
-const apiHost = "https://api.fakeyou.com";
-// const createAccount = `${apiHost}}/create_account`;
-const login = `${apiHost}/v1/login`;
-const getSession = `${apiHost}/v1/session`;
-const logout = `${apiHost}/v1/logout`;
-
 export const CreateSession = async ({
   usernameOrEmail, password
 }:{
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx
index 2a5376de50..19c84a06a1 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext } from "react";
 import { Button, } from "~/components";
 import { ClipGroup } from "~/pages/PageEnigma/models/track";
 import { APPUI_ACTION_TYPES } from "../../reducers";
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index bf597f016d..1936ac16c5 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -11,16 +11,17 @@ import {
   TransitionDialogue,
   Textarea
 } from "~/components";
-import { ListTtsModels, TtsModelListItem } from "./utilities";
+import { ListTtsModels } from "./utilities";
+import { TtsModelListItem } from "./types";
 
-const testdata = [
-  { name: 'Wade Cooper' },
-  { name: 'Arlene Mccoy' },
-  { name: 'Devon Webb' },
-  { name: 'Tom Cook' },
-  { name: 'Tanya Fox' },
-  { name: 'Hellen Schmidt' },
-]
+// const testdata = [
+//   { name: 'Wade Cooper' },
+//   { name: 'Arlene Mccoy' },
+//   { name: 'Devon Webb' },
+//   { name: 'Tom Cook' },
+//   { name: 'Tanya Fox' },
+//   { name: 'Hellen Schmidt' },
+// ]
 type TtsState = {
   voice: string;
   text: string;
@@ -52,9 +53,17 @@ export const DialogueTTS = ()=>{
     listModels();
   }, [listModels]);
 
-  // useEffect(() => {
-  //   console.log(ttsModels);
-  // }, [ttsModels]);
+  const requestTts = useCallback(()=>{
+    // const modelToken = props.maybeSelectedTtsModel!.model_token;
+
+    // const request = {
+    //   uuid_idempotency_token: uuidv4(),
+    //   tts_model_token: modelToken,
+    //   inference_text: props.textBuffer,
+    // };
+
+    // const response = await GenerateTtsAudio(request);
+  },[]);
 
   const handleClose = ()=> {
     dispatchAppUiState({
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/types.tsx b/app/pages/PageEnigma/comps/DialogueTTS/types.tsx
new file mode 100644
index 0000000000..76ebee3837
--- /dev/null
+++ b/app/pages/PageEnigma/comps/DialogueTTS/types.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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; 
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx b/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx
index cb2b6bf037..7084dc91ef 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx
@@ -1,40 +1,11 @@
-// https://api.fakeyou.com/tts/list
+import { listTts } from '~/api';
+import {
+  TtsModelListItem,
+  TtsModelListResponsePayload
+} from './types';
 
-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,
-}
-
-export async function ListTtsModels() : Promise<Array<TtsModelListItem>| undefined> {
-  const endpoint = 'https://api.fakeyou.com/tts/list';
-  
-  return await fetch(endpoint, {
+export async function ListTtsModels() : Promise<Array<TtsModelListItem>| undefined> {  
+  return await fetch(listTts, {
     method: 'GET',
     headers: {
       'Accept': 'application/json',

From a102b9e4b53916cde830e0402aa7eee8f26d82ac Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Thu, 4 Apr 2024 20:19:36 -0400
Subject: [PATCH 10/27] generate function successcully sent and result can be
 seen on fakeyou.com

---
 app/components/ListSearchDropdown.tsx         |  3 +-
 app/modules/withProtectedRoute/index.tsx      |  2 +-
 .../comps/DialogueTTS/DialogueTTS.tsx         | 49 ++++++------
 .../PageEnigma/comps/DialogueTTS/generate.tsx | 78 +++++++++++++++++++
 .../PageEnigma/comps/DialogueTTS/types.tsx    | 20 ++++-
 .../comps/DialogueTTS/utilities.tsx           | 17 +++-
 6 files changed, 142 insertions(+), 27 deletions(-)
 create mode 100644 app/pages/PageEnigma/comps/DialogueTTS/generate.tsx

diff --git a/app/components/ListSearchDropdown.tsx b/app/components/ListSearchDropdown.tsx
index cd6b0a78e1..cd0dd6dffd 100644
--- a/app/components/ListSearchDropdown.tsx
+++ b/app/components/ListSearchDropdown.tsx
@@ -31,7 +31,8 @@ export const ListSearchDropdown = ({
         })
 
   useEffect(()=>{
-    onSelect(Object.values(selected)[0]);
+    if (listDisplayKey) onSelect(selected[listDisplayKey]);
+    else onSelect(Object.values(selected)[0]);
   }, [selected]);
 
   return (
diff --git a/app/modules/withProtectedRoute/index.tsx b/app/modules/withProtectedRoute/index.tsx
index 823f77a476..68630e83c2 100644
--- a/app/modules/withProtectedRoute/index.tsx
+++ b/app/modules/withProtectedRoute/index.tsx
@@ -4,7 +4,7 @@ import { AuthenticationContext } from "~/contexts/Authentication";
 
 export const withProtectionRoute = <P extends {}>(Component: ComponentType<P>) => (rest:P) => {
   const { authState } = useContext(AuthenticationContext);
-  console.log(authState);
+
   if (authState.isLoggedIn === undefined ) {
     return <>waiting</>;
   }
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index 1936ac16c5..eb52b684ed 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
 import { faVolume, faShuffle, faPlay } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AppUiContext } from "../../contexts/AppUiContext";
@@ -13,30 +14,23 @@ import {
 } from "~/components";
 import { ListTtsModels } from "./utilities";
 import { TtsModelListItem } from "./types";
+import { GenerateTtsAudio } from "./generate";
 
-// const testdata = [
-//   { name: 'Wade Cooper' },
-//   { name: 'Arlene Mccoy' },
-//   { name: 'Devon Webb' },
-//   { name: 'Tom Cook' },
-//   { name: 'Tanya Fox' },
-//   { name: 'Hellen Schmidt' },
-// ]
 type TtsState = {
-  voice: string;
+  voice: TtsModelListItem | undefined;
   text: string;
   hasAudio: boolean;
 }
+
 export const DialogueTTS = ()=>{
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
   const [ttsState, setTtsState] = useState<TtsState>({
-    voice:"",
+    voice:undefined,
     text:"",
     hasAudio:false
   });
 
   const [ttsModels, setTtsModels] = useState<Array<TtsModelListItem>>([]);
- 
 
   const listModels = useCallback(async () => {
     const ttsModelsLoaded = ttsModels.length > 0;
@@ -53,17 +47,22 @@ export const DialogueTTS = ()=>{
     listModels();
   }, [listModels]);
 
-  const requestTts = useCallback(()=>{
-    // const modelToken = props.maybeSelectedTtsModel!.model_token;
+  const requestTts = useCallback(async ()=>{
 
-    // const request = {
-    //   uuid_idempotency_token: uuidv4(),
-    //   tts_model_token: modelToken,
-    //   inference_text: props.textBuffer,
-    // };
+    const modelToken = ttsState.voice ? ttsState.voice.model_token : undefined;
 
-    // const response = await GenerateTtsAudio(request);
-  },[]);
+    if(modelToken){
+      const request = {
+        uuid_idempotency_token: uuidv4(),
+        tts_model_token: modelToken,
+        inference_text: ttsState.text,
+      };
+      console.log(request);
+      const response = await GenerateTtsAudio(request);
+    }else{
+      console.log("no voice model selected");
+    }
+  },[ttsState]);
 
   const handleClose = ()=> {
     dispatchAppUiState({
@@ -81,9 +80,14 @@ export const DialogueTTS = ()=>{
   };
 
   const handleOnSelect = (val:string)=>{
+    const voiceModel = ttsModels.find((item)=>{
+      if (item.title === val) return item
+    })
+    console.log(val);
+    console.log(voiceModel);
     setTtsState((curr)=>({
       ...curr,
-      voices: val,
+      voice: voiceModel,
     }));
   }
 
@@ -101,7 +105,6 @@ export const DialogueTTS = ()=>{
     >
       <div className="flex flex-col">
         <Label className="mb-1">Select a Voice</Label>
-        {/* <ListSearchDropdown list={testdata} onSelect={handleOnSelect}/> */}
         <ListSearchDropdown
           list={ttsModels}
           listDisplayKey="title"
@@ -124,7 +127,7 @@ export const DialogueTTS = ()=>{
             variant={ttsState.hasAudio ? "secondary" : "primary" }
             disabled={ttsState.text === ""}
             icon={faPlay}
-            // className="px-6 py-3.5"
+            onClick={requestTts}
           >
             Speak
           </Button>
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/generate.tsx b/app/pages/PageEnigma/comps/DialogueTTS/generate.tsx
new file mode 100644
index 0000000000..7c3d256357
--- /dev/null
+++ b/app/pages/PageEnigma/comps/DialogueTTS/generate.tsx
@@ -0,0 +1,78 @@
+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 => {
+    console.log(res);
+    return;
+  })
+  .catch(e => {
+    let maybeError = maybeMapError(e);
+    if (maybeError !== undefined) {
+      return { error: maybeError };
+    }
+    return { error: GenerateTtsAudioErrorType.UnknownError };
+  });
+
+  // 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(data => ({ status: <number>res.status, body: <EndpointResponse>data })))
+  // .then((fullResponse) => {
+  //   let maybeError = maybeMapError(fullResponse);
+  //   if (maybeError !== undefined) {
+  //     return { error: maybeError };
+  //   }
+  //   if (!fullResponse.body || !fullResponse.body.success) {
+  //     return { error: GenerateTtsAudioErrorType.UnknownError };
+  //   }
+
+  //   if (!('inference_job_token' in fullResponse.body)) {
+  //     return { error: GenerateTtsAudioErrorType.UnknownError };
+  //   } else {
+  //     return <GenerateTtsAudioSuccess> {
+  //       inference_job_token: fullResponse.body.inference_job_token,
+  //       inference_job_token_type: fullResponse.body.inference_job_token_type,
+  //     };
+  //   }
+  // }) 
+  // .catch(e => {
+  //   let maybeError = maybeMapError(e);
+  //   if (maybeError !== undefined) {
+  //     return { error: maybeError };
+  //   }
+  //   return { error: GenerateTtsAudioErrorType.UnknownError };
+  // });
+};
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/types.tsx b/app/pages/PageEnigma/comps/DialogueTTS/types.tsx
index 76ebee3837..774c9aa428 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/types.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/types.tsx
@@ -62,4 +62,22 @@ export enum GenerateTtsAudioErrorType {
   ServerError,
   UnknownError,
 }
-export type GenerateTtsAudioResponse = GenerateTtsAudioSuccess | GenerateTtsAudioError; 
\ No newline at end of file
+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
index 7084dc91ef..53c87be9af 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/utilities.tsx
@@ -1,7 +1,9 @@
 import { listTts } from '~/api';
 import {
   TtsModelListItem,
-  TtsModelListResponsePayload
+  TtsModelListResponsePayload,
+  GenerateTtsAudioErrorType,
+  StatusLike
 } from './types';
 
 export async function ListTtsModels() : Promise<Array<TtsModelListItem>| undefined> {  
@@ -23,4 +25,17 @@ export async function ListTtsModels() : Promise<Array<TtsModelListItem>| undefin
   .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

From d46a5946bbabe8485605602cf2724c2a6bbbb388 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Thu, 4 Apr 2024 22:55:53 -0400
Subject: [PATCH 11/27] fetching user media works, generate tts works

---
 app/api.tsx                                   |   5 +-
 .../Authentication/Authentication.tsx         |   8 +-
 .../comps/SidePanelTabs/AudioElements.tsx     |  30 -----
 .../comps/SidePanelTabs/TabAudio.tsx          |  68 ----------
 .../{ => TabAudio}/AudioElement.tsx           |   0
 .../comps/SidePanelTabs/TabAudio/TabAudio.tsx | 101 ++++++++++++++
 .../comps/SidePanelTabs/TabAudio/index.tsx    |   1 +
 .../TabAudio/listAudioByUser.tsx              |  55 ++++++++
 .../comps/SidePanelTabs/TabAudio/types.tsx    | 124 ++++++++++++++++++
 .../PageEnigma/comps/SidePanelTabs/index.tsx  |   2 +-
 10 files changed, 290 insertions(+), 104 deletions(-)
 delete mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioElements.tsx
 delete mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx
 rename app/pages/PageEnigma/comps/SidePanelTabs/{ => TabAudio}/AudioElement.tsx (100%)
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/index.tsx
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/listAudioByUser.tsx
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/types.tsx

diff --git a/app/api.tsx b/app/api.tsx
index 666b25afbb..0e0bcc77a1 100644
--- a/app/api.tsx
+++ b/app/api.tsx
@@ -8,4 +8,7 @@ export const logout = `${apiHost}/v1/logout`;
 
 // TTS
 export const inferTts = `${apiHost}/tts/inference`;
-export const listTts = `${apiHost}/tts/list`;
\ No newline at end of file
+export const listTts = `${apiHost}/tts/list`;
+
+// User Media
+export const listMediaByUser = (username:string) => `${apiHost}/v1/media_files/list/user/${username}`;
\ No newline at end of file
diff --git a/app/contexts/Authentication/Authentication.tsx b/app/contexts/Authentication/Authentication.tsx
index 8e770955d1..615a1bed5d 100644
--- a/app/contexts/Authentication/Authentication.tsx
+++ b/app/contexts/Authentication/Authentication.tsx
@@ -31,8 +31,8 @@ export const AuthenticationContext = createContext<{
 });
 
 export const AuthenticationProvider = ({children}:{children:ReactNode})=>{
-  console.log('auth provider rerender');
-  const [authCookies, setAuthCookie, removeAuthCookie] = useCookies([STORAGE_KEYS.USER_INFO]);
+  // console.log('auth provider rerender');
+  const [, setAuthCookie, removeAuthCookie] = useCookies([STORAGE_KEYS.USER_INFO]);
   const [authState, setAuthState] = useState<AuthState>({});
 
   const loginAndGetUserInfo = useCallback((
@@ -78,9 +78,9 @@ export const AuthenticationProvider = ({children}:{children:ReactNode})=>{
     if(authState.isLoggedIn === undefined){
       //Persist Login if Session Data exist
       const sessionData = localStorage.getItem(STORAGE_KEYS.USER_INFO);
-      console.log(`Session Data: ${sessionData?.substring(0, 30)}${sessionData ? '...':''}`);
+      // console.log(`Session Data: ${sessionData?.substring(0, 30)}${sessionData ? '...':''}`);
       if (sessionData !== null){
-        console.log('Getting session to persist login');
+        // console.log('Getting session to persist login');
         GetSession().then((
           res: SessionResponse
         )=>{
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioElements.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioElements.tsx
deleted file mode 100644
index ee3eb38341..0000000000
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioElements.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useContext, useEffect, useState } from "react";
-import { AnimationElement } from "./AnimationElement";
-import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
-import { useSignals } from "@preact/signals-react/runtime";
-import { timelineHeight } from "~/pages/PageEnigma/store";
-import { ClipType } from "~/pages/PageEnigma/models/track";
-
-export const AudioElements = () => {
-  const { audioClips } = useContext(TrackContext);
-  useSignals();
-  const [height, setHeight] = useState(0);
-
-  useEffect(() => {
-    setHeight(window.outerHeight - timelineHeight.value);
-  }, []);
-
-  return (
-    <div className="flex flex-wrap gap-3 overflow-y-auto" style={{ height }}>
-      {audioClips.map((clip) => {
-        return (
-          <AnimationElement
-            key={clip.media_id}
-            clip={clip}
-            type={ClipType.AUDIO}
-          />
-        );
-      })}
-    </div>
-  );
-};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx
deleted file mode 100644
index c466cb9c9e..0000000000
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useContext, useEffect, useState } from "react";
-import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
-import { APPUI_ACTION_TYPES } from "../../reducers";
-import { AppUiContext } from "../../contexts/AppUiContext";
-import { useSignals } from "@preact/signals-react/runtime";
-import { timelineHeight } from "~/pages/PageEnigma/store";
-
-import { AnimationElement } from "./AnimationElement";
-import { Button, Label, P } from "~/components";
-
-export const TabAudio = () => {
-  const { audioClips } = useContext(TrackContext);
-  const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
-
-  useSignals();
-  const [height, setHeight] = useState(0);
-
-  useEffect(() => {
-    setHeight(window.outerHeight - timelineHeight.value);
-  }, []);
-
-  const openTTSPanel = () =>{
-    dispatchAppUiState({
-      type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
-    })
-  };
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="flex flex-col">
-        <Label>Generate</Label>
-        <Button
-          onClick={openTTSPanel}
-          variant="secondary"
-        >
-          Create TTS Audio
-        </Button>
-        <span className="w-full h-3" />
-        <Button
-          disabled
-          variant="secondary"
-        >
-          Create Voice to Voice Audio
-        </Button>
-      </div>
-      <div className="flex flex-col mt-1">
-        <Label>Preset Dialogues</Label>
-      
-        <div className="flex flex-wrap gap-2">
-          {audioClips.map((clip) => {
-            return (
-              <AnimationElement key={clip.media_id} clip={clip} type="audio" />
-            );
-        })}
-        </div>
-      </div>
-
-      <div className="flex flex-col mt-1">
-        <Label>My Dialogues</Label>
-        <div className="flex justify-center items-center text-center w-full h-40">
-          <P className="text-brand-secondary-300"> No audio generated yet</P>
-        </div>
-      </div>
-
-      <Button className="w-fit m-auto px-6 py-2"> Add to Lip Sync Track</Button>
-    </div>
-  );
-};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/AudioElement.tsx
similarity index 100%
rename from app/pages/PageEnigma/comps/SidePanelTabs/AudioElement.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/AudioElement.tsx
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
new file mode 100644
index 0000000000..6a564263d2
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
@@ -0,0 +1,101 @@
+import { useContext, useEffect, useState } from "react";
+import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
+
+import { APPUI_ACTION_TYPES } from "../../../reducers";
+import { AppUiContext } from "../../../contexts/AppUiContext";
+import { AuthenticationContext } from "~/contexts/Authentication";
+import { useSignals } from "@preact/signals-react/runtime";
+import { timelineHeight } from "~/pages/PageEnigma/store";
+
+import { Button, Label, P } from "~/components";
+import { ClipType } from "../../../models/track";
+import { AudioElement } from "./AudioElement";
+import { ListAudioByUser, MediaFile } from "./listAudioByUser";
+
+export const TabAudio = () => {
+  const { audioClips } = useContext(TrackContext);
+  const { authState } = useContext(AuthenticationContext);
+  const [, dispatchAppUiState] = useContext(AppUiContext);
+  const [ userAudioClips, setUserAudioClips] = useState<MediaFile[]>([]);
+
+  useSignals();
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    setHeight(window.outerHeight - timelineHeight.value);
+    if(authState.userInfo && authState.userInfo.username)
+      ListAudioByUser(authState.userInfo.username)
+        .then(res=>{
+          setUserAudioClips([...res]);
+        });
+  }, []);
+
+  const openTTSPanel = () =>{
+    dispatchAppUiState({
+      type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
+    })
+  };
+
+  return (
+    <div 
+      className="flex flex-col gap-3"
+    >
+      <div className="flex flex-col">
+        <Label>Generate</Label>
+        <Button
+          onClick={openTTSPanel}
+          variant="secondary"
+        >
+          Create TTS Audio
+        </Button>
+        <span className="w-full h-3" />
+        <Button
+          disabled
+          variant="secondary"
+        >
+          Create Voice to Voice Audio
+        </Button>
+      </div>
+      <div className="flex flex-col mt-1">
+        <Label>Preset Dialogues</Label>
+      
+        <div className="flex flex-wrap gap-2">
+          {audioClips.map((clip) => {
+            return (
+              <AudioElement
+                key={clip.media_id}
+                clip={clip}
+                type={ClipType.AUDIO}
+              />
+            );
+        })}
+        </div>
+      </div>
+
+      <div className="flex flex-col mt-1">
+        <Label>My Dialogues</Label>
+        {userAudioClips.length === 0 && 
+          <div className="flex justify-center items-center text-center w-full h-40">
+            <P className="text-brand-secondary-300"> No audio generated yet</P>
+          </div>
+        }
+        { userAudioClips.length >= 0 &&
+          <div>
+            {userAudioClips.map(item =>
+              <>
+                <P>{item.origin['maybe_model'].title || "No Name"}</P>
+                <AudioElement 
+                  key={item.token}
+                  clip={item}
+                  type={ClipType.AUDIO}
+                />
+              </>
+            )}
+          </div>
+        }
+      </div>
+
+      <Button className="w-fit m-auto px-6 py-2"> Add to Lip Sync Track</Button>
+    </div>
+  );
+};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/index.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/index.tsx
new file mode 100644
index 0000000000..803333183c
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/index.tsx
@@ -0,0 +1 @@
+export { TabAudio } from "./TabAudio";
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/listAudioByUser.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/listAudioByUser.tsx
new file mode 100644
index 0000000000..b277c03941
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/listAudioByUser.tsx
@@ -0,0 +1,55 @@
+import { listMediaByUser } from "~/api";
+import {
+  MediaFileType,
+  MediaFileClass,
+  MediaFileSubtype,
+  UserDetailsLight,
+  WeightCategory,
+  WeightType
+} from "./types";
+
+
+export interface MediaFile {
+  token: string;
+  media_type: MediaFileType;
+  media_class: MediaFileClass | null;
+  maybe_media_subtype: MediaFileSubtype | null;
+  public_bucket_path: string;
+  maybe_engine_extension: string | null;
+  maybe_batch_token: string;
+  maybe_title: string | null;
+  maybe_original_filename: string | null;
+  maybe_creator_user: UserDetailsLight | null;
+  maybe_prompt_token: string | null;
+  creator_set_visibility: string;
+  created_at: Date;
+  updated_at: Date;
+  maybe_model_weight_info: {
+    title: string;
+    weight_token: string;
+    weight_category: WeightCategory;
+    weight_type: WeightType;
+    maybe_weight_creator: UserDetailsLight;
+    maybe_cover_image_public_bucket_path: string;
+  };
+}
+
+export const ListAudioByUser = async(username:string) => {
+  return await fetch(listMediaByUser(username),{
+    method: 'GET',
+    headers: {
+      "Accept": "application/json",
+    },
+    credentials: 'include'
+  })
+  .then(res => res.json())
+  .then(res => { 
+    if(res.success && res.results){
+      return res.results.filter((item:MediaFile)=>item['media_type']==='audio');
+    }else{
+      Promise.reject();
+    }
+  })
+  .catch(e => ({ success : false }));
+}
+
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/types.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/types.tsx
new file mode 100644
index 0000000000..098a7e0dfe
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/types.tsx
@@ -0,0 +1,124 @@
+export enum WeightCategory {
+  TTS = "text_to_speech",
+  VOCODER = "vocoder",
+  VC = "voice_conversion",
+  ZS = "zero_shot",
+  SD = "image_generation",
+  WF = "workflow_config",
+}
+
+
+export enum MediaFileClass {
+  /// Unknown (default value)
+ /// This will be present until we migrate all old files.
+ Unknown = "unknown",
+
+ /// Audio files: wav, mp3, etc.
+ Audio = "audio",
+
+ /// Image files: png, jpeg, etc.
+ Image = "image",
+
+ /// Video files: mp4, etc.
+ Video = "video",
+
+ /// Engine "animations"
+ Animation = "animation",
+
+ /// Engine "characters"
+ Character = "character",
+
+ /// Engine "prop" items
+ Prop = "prop",
+
+ /// Engine scenes (internal and external scenes)
+ Scene = "scene",
+}
+
+
+export enum MediaFileType {
+  Audio = "audio",
+  Video = "video",
+  Image = "image",
+
+  // BVH is a very popular file format for motion capture.
+  // It is compatible with our engine.
+  BVH = "bvh",
+
+  // GLTF is the text-based format of GLB. Unforunately it requires a
+  // second file to include the visual data, so we strongly discourage
+  // the use of this format in favor of GLB.
+  GLTF = "gltf",
+
+  // GLB is the format we convert FBX files into. It's a very popular
+  // open source 3D file format.
+  GLB = "glb",
+
+  // FBX isn't supported by Storyteller Engine, but we can get
+  // uploads in this format. It's a very popular 3D graphics format.
+  FBX = "fbx",
+
+  // Full Storyteller Engine scenes (RON = Rusty Object Notation)
+  // This is a temporary format that will eventually go away.
+  SceneRon = "scene_ron",
+
+  None = "none",
+}
+
+
+export enum MediaFileSubtype {
+  /// Animation file from Mixamo
+  /// Primarily used for FBX and GLB.
+  Mixamo = "mixamo",
+
+  /// Animation file from MocapNet
+  /// Primarily used for BVH.
+  MocapNet = "mocap_net",
+
+  /// Generic animation case
+  /// Used for BVH files, but can also pertain to animation-only files of other types.
+  AnimationOnly = "animation_only",
+
+  // TODO(bt,2024-03-08): Migrate records and code, then remove
+  /// DEPRECATED: Use `SceneImport` instead.
+  Scene = "scene",
+
+  /// Generic 3D scene file.
+  /// Can pertain to glTF, glB, FBX, etc.
+  SceneImport = "scene_import",
+
+  /// Native Storyteller scene format.
+  /// Typically stored in a `.scn.ron` file.
+  StorytellerScene = "storyteller_scene",
+}
+
+/// A common type returned by several endpoints.
+/// Basic information to display a user and their avatar.
+export interface UserDetailsLight {
+  user_token: string,
+  /// Username (lowercase)
+  username: string,
+  /// Username with user-specified capitalization
+  display_name: string,
+  gravatar_hash: string,
+  default_avatar: DefaultAvatarInfo,
+
+}
+
+export interface DefaultAvatarInfo {
+  image_index: number,
+  color_index: number,
+}
+
+
+export enum WeightType {
+  TT2 = "tt2",
+  HIFIGAN_TT2 = "hifigan_tt2",
+  RVCv2 = "rvc_v2",
+  SD_15 = "sd_1.5",
+  SDXL = "sdxl",
+  SVC = "so_vits_svc",
+  LORA = "loRA",
+  VALL_E = "vall_e",
+  NONE = "none",
+}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
index 02911e9b53..6645d5a559 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx
@@ -1,7 +1,7 @@
 import { Tabs } from "~/modules/Tabs";
 import { TabStylization } from "./TabStylization";
 import { AnimationElements } from "./AnimationElements";
-import { TabAudio } from "~/pages/PageEnigma/comps/SidePanelTabs/TabAudio";
+import { TabAudio } from "./TabAudio";
 
 export const SidePanelTabs = () => {
   return (

From 3e476f8299205b543cca918c6f8d0859e0cb8080 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Thu, 4 Apr 2024 23:16:54 -0400
Subject: [PATCH 12/27] set height seems to be not needed, set key to avoid
 error message

---
 .../PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
index 6a564263d2..45d7e8bc87 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
@@ -5,7 +5,7 @@ import { APPUI_ACTION_TYPES } from "../../../reducers";
 import { AppUiContext } from "../../../contexts/AppUiContext";
 import { AuthenticationContext } from "~/contexts/Authentication";
 import { useSignals } from "@preact/signals-react/runtime";
-import { timelineHeight } from "~/pages/PageEnigma/store";
+// import { timelineHeight } from "~/pages/PageEnigma/store";
 
 import { Button, Label, P } from "~/components";
 import { ClipType } from "../../../models/track";
@@ -19,10 +19,9 @@ export const TabAudio = () => {
   const [ userAudioClips, setUserAudioClips] = useState<MediaFile[]>([]);
 
   useSignals();
-  const [height, setHeight] = useState(0);
 
   useEffect(() => {
-    setHeight(window.outerHeight - timelineHeight.value);
+
     if(authState.userInfo && authState.userInfo.username)
       ListAudioByUser(authState.userInfo.username)
         .then(res=>{
@@ -82,14 +81,14 @@ export const TabAudio = () => {
         { userAudioClips.length >= 0 &&
           <div>
             {userAudioClips.map(item =>
-              <>
+              <div key={item.token}>
                 <P>{item.origin['maybe_model'].title || "No Name"}</P>
                 <AudioElement 
                   key={item.token}
                   clip={item}
                   type={ClipType.AUDIO}
                 />
-              </>
+              </div>
             )}
           </div>
         }

From d6e07db32e468ea7decd7f1ff8bb63b2dd2c7936 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Sat, 6 Apr 2024 23:30:19 -0400
Subject: [PATCH 13/27] generate tts call works, refresh of audio panel works

---
 .../comps/DialogueTTS/DialogueTTS.tsx         | 83 ++++++++++++-------
 .../{generate.tsx => generateTts.tsx}         | 11 ++-
 .../comps/SidePanelTabs/TabAudio/TabAudio.tsx | 23 +++--
 3 files changed, 81 insertions(+), 36 deletions(-)
 rename app/pages/PageEnigma/comps/DialogueTTS/{generate.tsx => generateTts.tsx} (87%)

diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index eb52b684ed..b3de23dd9e 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -1,6 +1,11 @@
 import { useCallback, useContext, useEffect, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
-import { faVolume, faShuffle, faPlay } from "@fortawesome/pro-solid-svg-icons";
+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";
@@ -8,17 +13,21 @@ import {
   Button,
   H5,
   Label,
+  LoadingDotsTyping,
   ListSearchDropdown,
   TransitionDialogue,
   Textarea
 } from "~/components";
 import { ListTtsModels } from "./utilities";
 import { TtsModelListItem } from "./types";
-import { GenerateTtsAudio } from "./generate";
+import { GenerateTtsAudio } from "./generateTts";
+
 
 type TtsState = {
   voice: TtsModelListItem | undefined;
   text: string;
+  hasEnqueued :boolean;
+  inferenceToken?: string;
   hasAudio: boolean;
 }
 
@@ -27,7 +36,8 @@ export const DialogueTTS = ()=>{
   const [ttsState, setTtsState] = useState<TtsState>({
     voice:undefined,
     text:"",
-    hasAudio:false
+    hasEnqueued:false,
+    hasAudio:false,
   });
 
   const [ttsModels, setTtsModels] = useState<Array<TtsModelListItem>>([]);
@@ -47,8 +57,7 @@ export const DialogueTTS = ()=>{
     listModels();
   }, [listModels]);
 
-  const requestTts = useCallback(async ()=>{
-
+  const requestTts = useCallback( ()=>{
     const modelToken = ttsState.voice ? ttsState.voice.model_token : undefined;
 
     if(modelToken){
@@ -57,8 +66,16 @@ export const DialogueTTS = ()=>{
         tts_model_token: modelToken,
         inference_text: ttsState.text,
       };
-      console.log(request);
-      const response = await GenerateTtsAudio(request);
+      // console.log(request);
+      GenerateTtsAudio(request).then(res=>{
+        if(res.inference_job_token){
+          setTtsState((curr)=>({
+            ...curr,
+            hasEnqueued: true,
+            inferenceToken: res.inference_job_token
+          }));
+        }
+      });
     }else{
       console.log("no voice model selected");
     }
@@ -83,8 +100,8 @@ export const DialogueTTS = ()=>{
     const voiceModel = ttsModels.find((item)=>{
       if (item.title === val) return item
     })
-    console.log(val);
-    console.log(voiceModel);
+    // console.log(val);
+    // console.log(voiceModel);
     setTtsState((curr)=>({
       ...curr,
       voice: voiceModel,
@@ -123,32 +140,42 @@ export const DialogueTTS = ()=>{
           onChange={handleTextInput}
         />
         <div className="mt-6 flex gap-2">
-          <Button
-            variant={ttsState.hasAudio ? "secondary" : "primary" }
-            disabled={ttsState.text === ""}
-            icon={faPlay}
-            onClick={requestTts}
-          >
-            Speak
-          </Button>
+          <div className="w-40 h-12">
+            {!ttsState.hasAudio && !ttsState.hasEnqueued &&
+              <Button
+                className="w-full 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 &&
+              <Button
+                className="w-full h-full text-xl"
+                variant={ttsState.hasAudio ? "secondary" : "primary" }
+                disabled={ttsState.text === ""}
+                icon={faPlay}
+                // onClick={requestTts}
+              >
+                Speak
+              </Button>
+            }
+          </div>
         </div>
+
         <div className="mt-6 flex justify-end gap-2">
           <Button
             type="button"
             onClick={handleClose}
             variant="secondary"
           >
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            variant="primary"
-            disabled={!ttsState.hasAudio}
-            onClick={(e) => {
-              console.log("Add to Lip Sync Track Triggered")
-            }}
-          >
-            Add to Lip Sync Track
+            {ttsState.hasEnqueued ? 'Close':'Cancel'}
           </Button>
         </div>
       </div>
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/generate.tsx b/app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx
similarity index 87%
rename from app/pages/PageEnigma/comps/DialogueTTS/generate.tsx
rename to app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx
index 7c3d256357..eaeb358993 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/generate.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx
@@ -29,8 +29,15 @@ export async function GenerateTtsAudio(request: GenerateTtsAudioRequest) : Promi
   })
   .then(res =>  res.json())
   .then(res => {
-    console.log(res);
-    return;
+    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);
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
index 45d7e8bc87..1ef913ffbd 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
@@ -1,4 +1,7 @@
 import { useContext, useEffect, useState } from "react";
+
+import { faArrowsRotate } from "@fortawesome/pro-solid-svg-icons";
+
 import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
 
 import { APPUI_ACTION_TYPES } from "../../../reducers";
@@ -7,7 +10,7 @@ import { AuthenticationContext } from "~/contexts/Authentication";
 import { useSignals } from "@preact/signals-react/runtime";
 // import { timelineHeight } from "~/pages/PageEnigma/store";
 
-import { Button, Label, P } from "~/components";
+import { Button, ButtonIcon, Label, P } from "~/components";
 import { ClipType } from "../../../models/track";
 import { AudioElement } from "./AudioElement";
 import { ListAudioByUser, MediaFile } from "./listAudioByUser";
@@ -21,20 +24,25 @@ export const TabAudio = () => {
   useSignals();
 
   useEffect(() => {
-
-    if(authState.userInfo && authState.userInfo.username)
+    if(authState.userInfo && authState.userInfo.username && userAudioClips.length === 0)
       ListAudioByUser(authState.userInfo.username)
         .then(res=>{
           setUserAudioClips([...res]);
         });
-  }, []);
+  }, [authState]);
 
   const openTTSPanel = () =>{
     dispatchAppUiState({
       type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
     })
   };
-
+  const handleRefreshUserMedia = ()=>{
+    if(authState.userInfo && authState.userInfo.username)
+      ListAudioByUser(authState.userInfo.username)
+        .then(res=>{
+          setUserAudioClips([...res]);
+        });
+  }
   return (
     <div 
       className="flex flex-col gap-3"
@@ -72,7 +80,10 @@ export const TabAudio = () => {
       </div>
 
       <div className="flex flex-col mt-1">
-        <Label>My Dialogues</Label>
+        <div className="flex justify-between">
+          <Label>My Dialogues</Label>
+          <ButtonIcon icon={faArrowsRotate} onClick={handleRefreshUserMedia}/>
+        </div>
         {userAudioClips.length === 0 && 
           <div className="flex justify-center items-center text-center w-full h-40">
             <P className="text-brand-secondary-300"> No audio generated yet</P>

From bb450ba8c31c5060917422dfa4f834f8a9545dd5 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Sat, 6 Apr 2024 23:36:01 -0400
Subject: [PATCH 14/27] drag works, maybe not so much for drop

---
 .../comps/SidePanelTabs/TabAudio/AudioElement.tsx  |  2 +-
 .../comps/SidePanelTabs/TabAudio/TabAudio.tsx      | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/AudioElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/AudioElement.tsx
index ca444a10e3..cd3460c25b 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/AudioElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/AudioElement.tsx
@@ -64,7 +64,7 @@ export const AudioElement = ({ clip, type }: Props) => {
   );
 
   return (
-    <div className="relative h-16 w-16">
+    <div className="relative h-16 w-16 overflow-hidden">
       <div
         id={`ani-clip-${clip.media_id}`}
         className="absolute block h-16 w-16 rounded-lg bg-brand-secondary-700 p-2"
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
index 1ef913ffbd..797e2f7601 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
@@ -90,16 +90,19 @@ export const TabAudio = () => {
           </div>
         }
         { userAudioClips.length >= 0 &&
-          <div>
+          <div className="flex flex-wrap gap-1">
             {userAudioClips.map(item =>
-              <div key={item.token}>
-                <P>{item.origin['maybe_model'].title || "No Name"}</P>
                 <AudioElement 
                   key={item.token}
-                  clip={item}
+                  clip={{
+                    version: 0,
+                    type: ClipType.AUDIO,
+                    media_id: item.token,
+                    name: item.origin['maybe_model'].title || "Unknown",
+                    length: 0,
+                  }}
                   type={ClipType.AUDIO}
                 />
-              </div>
             )}
           </div>
         }
@@ -109,3 +112,4 @@ export const TabAudio = () => {
     </div>
   );
 };
+

From 7fc6df1eeb80eab1b12f22a81da35061f20a537f Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 9 Apr 2024 10:12:06 -0400
Subject: [PATCH 15/27] queueing inference job done

---
 app/pages/PageEnigma/Queue/Queue.ts           |  24 ++-
 app/pages/PageEnigma/Queue/QueueNames.ts      |   3 +-
 .../PageEnigma/Queue/toInferenceActions.ts    |   3 +
 .../comps/DialogueTTS/DialogueTTS.tsx         |  21 +-
 .../AudioElement.tsx                          |   4 -
 .../AudioTabComponent/AudioTabComponent.tsx   | 181 ++++++++++++++++++
 .../SidePanelTabs/AudioTabComponent/index.tsx |   1 +
 .../listAudioByUser.tsx                       |   0
 .../{TabAudio => AudioTabComponent}/types.tsx |   0
 .../comps/SidePanelTabs/TabAudio/TabAudio.tsx | 115 -----------
 .../comps/SidePanelTabs/TabAudio/index.tsx    |   1 -
 .../comps/SidePanelTabs/itemTabs/AudioTab.tsx |  66 +------
 app/pages/PageEnigma/models/index.ts          |   1 +
 app/pages/PageEnigma/models/inferenceJobs.tsx |   5 +
 app/pages/PageEnigma/store/inferenceJobs.ts   |  16 ++
 15 files changed, 245 insertions(+), 196 deletions(-)
 create mode 100644 app/pages/PageEnigma/Queue/toInferenceActions.ts
 rename app/pages/PageEnigma/comps/SidePanelTabs/{TabAudio => AudioTabComponent}/AudioElement.tsx (90%)
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
 create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/index.tsx
 rename app/pages/PageEnigma/comps/SidePanelTabs/{TabAudio => AudioTabComponent}/listAudioByUser.tsx (100%)
 rename app/pages/PageEnigma/comps/SidePanelTabs/{TabAudio => AudioTabComponent}/types.tsx (100%)
 delete mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
 delete mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/index.tsx
 create mode 100644 app/pages/PageEnigma/models/inferenceJobs.tsx
 create mode 100644 app/pages/PageEnigma/store/inferenceJobs.ts

diff --git a/app/pages/PageEnigma/Queue/Queue.ts b/app/pages/PageEnigma/Queue/Queue.ts
index d793335c08..5ca88513f4 100644
--- a/app/pages/PageEnigma/Queue/Queue.ts
+++ b/app/pages/PageEnigma/Queue/Queue.ts
@@ -1,25 +1,33 @@
+import { toInferenceActions } from './toInferenceActions';
+
 import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
+
 import {
   QueueClip,
   QueueKeyframe,
+  InferenceJob,
   UpdateTime,
 } from "~/pages/PageEnigma/models";
 import { toTimelineActions } from "./toTimelineActions";
+
+type UnionedActionTypes = fromEngineActions | toEngineActions | toTimelineActions | toInferenceActions;
+type UnionedDataTypes = QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | InferenceJob;
+
 import { ClipUI } from "../datastructures/clips/clip_ui";
 class Queue {
   private _queue: Record<
     string,
     {
-      action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[];
+      action: UnionedActionTypes;
+      data: UnionedDataTypes;
     }[]
   > = {};
   private _subscribers: Record<
     string,
     (entry: {
-      action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[];
+      action: UnionedActionTypes;
+      data: UnionedDataTypes;
     }) => void
   > = {};
 
@@ -29,8 +37,8 @@ class Queue {
     data,
   }: {
     queueName: string;
-    action: fromEngineActions | toEngineActions | toTimelineActions;
-    data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] ;
+    action: UnionedActionTypes;
+    data: UnionedDataTypes ;
   }) {
     if (!this._queue[queueName]) {
       this._queue[queueName] = [];
@@ -46,8 +54,8 @@ class Queue {
   public subscribe(
     queueName: string,
     onMessage: (entry: {
-      action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[];
+      action: UnionedActionTypes;
+      data: UnionedDataTypes;
     }) => void,
   ) {
     this._subscribers[queueName] = onMessage;
diff --git a/app/pages/PageEnigma/Queue/QueueNames.ts b/app/pages/PageEnigma/Queue/QueueNames.ts
index 9a046d7c85..b558ef002f 100644
--- a/app/pages/PageEnigma/Queue/QueueNames.ts
+++ b/app/pages/PageEnigma/Queue/QueueNames.ts
@@ -1,5 +1,6 @@
 export enum QueueNames {
   FROM_ENGINE = "FROM_ENGINE",
   TO_ENGINE = "TO_ENGINE",
-  TO_TIMELINE = "TO_TIMELINE"
+  TO_TIMELINE = "TO_TIMELINE",
+  TO_INFERENCE = "TO_INFERENCE", 
 }
diff --git a/app/pages/PageEnigma/Queue/toInferenceActions.ts b/app/pages/PageEnigma/Queue/toInferenceActions.ts
new file mode 100644
index 0000000000..b3ed965a6b
--- /dev/null
+++ b/app/pages/PageEnigma/Queue/toInferenceActions.ts
@@ -0,0 +1,3 @@
+export enum toInferenceActions {
+  ADD_TTS_JOB = "add_tts_job"
+}
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index b3de23dd9e..c32ef6d61a 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -21,13 +21,14 @@ import {
 import { ListTtsModels } from "./utilities";
 import { TtsModelListItem } from "./types";
 import { GenerateTtsAudio } from "./generateTts";
-
+import { addInferenceJob } from "../../store/inferenceJobs";
 
 type TtsState = {
   voice: TtsModelListItem | undefined;
   text: string;
   hasEnqueued :boolean;
   inferenceToken?: string;
+  inferenceJobType?: string;
   hasAudio: boolean;
 }
 
@@ -57,6 +58,17 @@ export const DialogueTTS = ()=>{
     listModels();
   }, [listModels]);
 
+  useEffect(()=> {
+    if(ttsState.hasEnqueued && ttsState.inferenceToken && ttsState.inferenceJobType){
+      console.log(`tts has Enqueued`);
+      addInferenceJob({
+        version:1,
+        job_id: ttsState.inferenceToken,
+        jobt_type: ttsState.inferenceJobType,
+      })
+    }
+  },[ttsState.hasEnqueued]);
+
   const requestTts = useCallback( ()=>{
     const modelToken = ttsState.voice ? ttsState.voice.model_token : undefined;
 
@@ -68,11 +80,16 @@ export const DialogueTTS = ()=>{
       };
       // console.log(request);
       GenerateTtsAudio(request).then(res=>{
+        console.log('inference job returned >>>')
+        console.log(res);
+        console.log('<<<');
+
         if(res.inference_job_token){
           setTtsState((curr)=>({
             ...curr,
             hasEnqueued: true,
-            inferenceToken: res.inference_job_token
+            inferenceToken: res.inference_job_token,
+            inferenceJobType: res.inference_job_token_type
           }));
         }
       });
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/AudioElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioElement.tsx
similarity index 90%
rename from app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/AudioElement.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioElement.tsx
index f7f9148f9d..7944f94d64 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/AudioElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioElement.tsx
@@ -63,16 +63,12 @@ export const ItemElement = ({ item }: Props) => {
   );
 
   return (
-<<<<<<<< HEAD:app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/AudioElement.tsx
-    <div className="relative h-16 w-16 overflow-hidden">
-========
     <div
       className="relative rounded-lg"
       style={{ width: 91, height: 114 }}
       onPointerDown={onPointerDown}
     >
       <img src={item.thumbnail} alt={item.name} className="rounded-t-lg" />
->>>>>>>> test:app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElement.tsx
       <div
         className="w-full rounded-b-lg py-1 text-center text-sm"
         style={{ backgroundColor: "#39394D" }}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
new file mode 100644
index 0000000000..9510496113
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
@@ -0,0 +1,181 @@
+import { audioFilter, audioItems } from "~/pages/PageEnigma/store";
+import { AssetFilterOption } from "~/pages/PageEnigma/models";
+import { useSignals } from "@preact/signals-react/runtime";
+import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements";
+
+export const AudioTabComponent = () => {
+  useSignals();
+
+  return (
+    <>
+      <div className="w-full overflow-x-auto">
+        <div className="mb-4 mt-2 flex justify-start gap-2 px-2">
+          <button
+            className={[
+              "bg-assets-background rounded-lg px-3 py-1 text-sm",
+              audioFilter.value === AssetFilterOption.ALL
+                ? "border-2 border-brand-primary"
+                : "",
+            ].join(" ")}
+            onClick={() => (audioFilter.value = AssetFilterOption.ALL)}
+          >
+            All
+          </button>
+          <button
+            className={[
+              "bg-assets-background text-nowrap rounded-lg px-3 py-1 text-sm",
+              "disabled:text-gray-500",
+              audioFilter.value === AssetFilterOption.MINE
+                ? "border-2 border-brand-primary"
+                : "",
+            ].join(" ")}
+            onClick={() => (audioFilter.value = AssetFilterOption.MINE)}
+            disabled={!audioItems.value.some((item) => item.isMine)}
+          >
+            My Audios
+          </button>
+          <button
+            className={[
+              "bg-assets-background rounded-lg px-3 py-1 text-sm",
+              "disabled:text-gray-500",
+              audioFilter.value === AssetFilterOption.BOOKMARKED
+                ? "border-2 border-brand-primary"
+                : "",
+            ].join(" ")}
+            onClick={() => (audioFilter.value = AssetFilterOption.BOOKMARKED)}
+            disabled={!audioItems.value.some((item) => item.isBookmarked)}
+          >
+            Bookmarked
+          </button>
+        </div>
+      </div>
+      <div className="px-2">
+        <button className="bg-assets-background w-full rounded-lg py-2">
+          Upload Audio
+        </button>
+      </div>
+      <div className="overflow-y-auto px-2 pt-2">
+        <ItemElements
+          items={audioItems.value}
+          assetFilter={audioFilter.value}
+        />
+      </div>
+    </>
+  );
+};
+
+// import { useContext, useEffect, useState } from "react";
+
+// import { faArrowsRotate } from "@fortawesome/pro-solid-svg-icons";
+
+// import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
+
+// import { APPUI_ACTION_TYPES } from "../../../reducers";
+// import { AppUiContext } from "../../../contexts/AppUiContext";
+// import { AuthenticationContext } from "~/contexts/Authentication";
+// import { useSignals } from "@preact/signals-react/runtime";
+// // import { timelineHeight } from "~/pages/PageEnigma/store";
+
+// import { Button, ButtonIcon, Label, P } from "~/components";
+// import { ClipType } from "../../../models/track";
+// import { AudioElement } from "./AudioElement";
+// import { ListAudioByUser, MediaFile } from "./listAudioByUser";
+
+// export const TabAudio = () => {
+//   const { audioClips } = useContext(TrackContext);
+//   const { authState } = useContext(AuthenticationContext);
+//   const [, dispatchAppUiState] = useContext(AppUiContext);
+//   const [ userAudioClips, setUserAudioClips] = useState<MediaFile[]>([]);
+
+//   useSignals();
+
+//   useEffect(() => {
+//     if(authState.userInfo && authState.userInfo.username && userAudioClips.length === 0)
+//       ListAudioByUser(authState.userInfo.username)
+//         .then(res=>{
+//           setUserAudioClips([...res]);
+//         });
+//   }, [authState]);
+
+//   const openTTSPanel = () =>{
+//     dispatchAppUiState({
+//       type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
+//     })
+//   };
+//   const handleRefreshUserMedia = ()=>{
+//     if(authState.userInfo && authState.userInfo.username)
+//       ListAudioByUser(authState.userInfo.username)
+//         .then(res=>{
+//           setUserAudioClips([...res]);
+//         });
+//   }
+//   return (
+//     <div 
+//       className="flex flex-col gap-3"
+//     >
+//       <div className="flex flex-col">
+//         <Label>Generate</Label>
+//         <Button
+//           onClick={openTTSPanel}
+//           variant="secondary"
+//         >
+//           Create TTS Audio
+//         </Button>
+//         <span className="w-full h-3" />
+//         <Button
+//           disabled
+//           variant="secondary"
+//         >
+//           Create Voice to Voice Audio
+//         </Button>
+//       </div>
+//       <div className="flex flex-col mt-1">
+//         <Label>Preset Dialogues</Label>
+      
+//         <div className="flex flex-wrap gap-2">
+//           {audioClips.map((clip) => {
+//             return (
+//               <AudioElement
+//                 key={clip.media_id}
+//                 clip={clip}
+//                 type={ClipType.AUDIO}
+//               />
+//             );
+//         })}
+//         </div>
+//       </div>
+
+//       <div className="flex flex-col mt-1">
+//         <div className="flex justify-between">
+//           <Label>My Dialogues</Label>
+//           <ButtonIcon icon={faArrowsRotate} onClick={handleRefreshUserMedia}/>
+//         </div>
+//         {userAudioClips.length === 0 && 
+//           <div className="flex justify-center items-center text-center w-full h-40">
+//             <P className="text-brand-secondary-300"> No audio generated yet</P>
+//           </div>
+//         }
+//         { userAudioClips.length >= 0 &&
+//           <div className="flex flex-wrap gap-1">
+//             {userAudioClips.map(item =>
+//                 <AudioElement 
+//                   key={item.token}
+//                   clip={{
+//                     version: 0,
+//                     type: ClipType.AUDIO,
+//                     media_id: item.token,
+//                     name: item.origin['maybe_model'].title || "Unknown",
+//                     length: 0,
+//                   }}
+//                   type={ClipType.AUDIO}
+//                 />
+//             )}
+//           </div>
+//         }
+//       </div>
+
+//       <Button className="w-fit m-auto px-6 py-2"> Add to Lip Sync Track</Button>
+//     </div>
+//   );
+// };
+
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/index.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/index.tsx
new file mode 100644
index 0000000000..e74b437cf5
--- /dev/null
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/index.tsx
@@ -0,0 +1 @@
+export { AudioTabComponent } from "./AudioTabComponent";
\ No newline at end of file
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/listAudioByUser.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx
similarity index 100%
rename from app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/listAudioByUser.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/listAudioByUser.tsx
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/types.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx
similarity index 100%
rename from app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/types.tsx
rename to app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/types.tsx
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
deleted file mode 100644
index 797e2f7601..0000000000
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useContext, useEffect, useState } from "react";
-
-import { faArrowsRotate } from "@fortawesome/pro-solid-svg-icons";
-
-import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
-
-import { APPUI_ACTION_TYPES } from "../../../reducers";
-import { AppUiContext } from "../../../contexts/AppUiContext";
-import { AuthenticationContext } from "~/contexts/Authentication";
-import { useSignals } from "@preact/signals-react/runtime";
-// import { timelineHeight } from "~/pages/PageEnigma/store";
-
-import { Button, ButtonIcon, Label, P } from "~/components";
-import { ClipType } from "../../../models/track";
-import { AudioElement } from "./AudioElement";
-import { ListAudioByUser, MediaFile } from "./listAudioByUser";
-
-export const TabAudio = () => {
-  const { audioClips } = useContext(TrackContext);
-  const { authState } = useContext(AuthenticationContext);
-  const [, dispatchAppUiState] = useContext(AppUiContext);
-  const [ userAudioClips, setUserAudioClips] = useState<MediaFile[]>([]);
-
-  useSignals();
-
-  useEffect(() => {
-    if(authState.userInfo && authState.userInfo.username && userAudioClips.length === 0)
-      ListAudioByUser(authState.userInfo.username)
-        .then(res=>{
-          setUserAudioClips([...res]);
-        });
-  }, [authState]);
-
-  const openTTSPanel = () =>{
-    dispatchAppUiState({
-      type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
-    })
-  };
-  const handleRefreshUserMedia = ()=>{
-    if(authState.userInfo && authState.userInfo.username)
-      ListAudioByUser(authState.userInfo.username)
-        .then(res=>{
-          setUserAudioClips([...res]);
-        });
-  }
-  return (
-    <div 
-      className="flex flex-col gap-3"
-    >
-      <div className="flex flex-col">
-        <Label>Generate</Label>
-        <Button
-          onClick={openTTSPanel}
-          variant="secondary"
-        >
-          Create TTS Audio
-        </Button>
-        <span className="w-full h-3" />
-        <Button
-          disabled
-          variant="secondary"
-        >
-          Create Voice to Voice Audio
-        </Button>
-      </div>
-      <div className="flex flex-col mt-1">
-        <Label>Preset Dialogues</Label>
-      
-        <div className="flex flex-wrap gap-2">
-          {audioClips.map((clip) => {
-            return (
-              <AudioElement
-                key={clip.media_id}
-                clip={clip}
-                type={ClipType.AUDIO}
-              />
-            );
-        })}
-        </div>
-      </div>
-
-      <div className="flex flex-col mt-1">
-        <div className="flex justify-between">
-          <Label>My Dialogues</Label>
-          <ButtonIcon icon={faArrowsRotate} onClick={handleRefreshUserMedia}/>
-        </div>
-        {userAudioClips.length === 0 && 
-          <div className="flex justify-center items-center text-center w-full h-40">
-            <P className="text-brand-secondary-300"> No audio generated yet</P>
-          </div>
-        }
-        { userAudioClips.length >= 0 &&
-          <div className="flex flex-wrap gap-1">
-            {userAudioClips.map(item =>
-                <AudioElement 
-                  key={item.token}
-                  clip={{
-                    version: 0,
-                    type: ClipType.AUDIO,
-                    media_id: item.token,
-                    name: item.origin['maybe_model'].title || "Unknown",
-                    length: 0,
-                  }}
-                  type={ClipType.AUDIO}
-                />
-            )}
-          </div>
-        }
-      </div>
-
-      <Button className="w-fit m-auto px-6 py-2"> Add to Lip Sync Track</Button>
-    </div>
-  );
-};
-
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/index.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/index.tsx
deleted file mode 100644
index 803333183c..0000000000
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { TabAudio } from "./TabAudio";
\ 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 b4571ad496..cfcd271fc0 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab.tsx
@@ -1,65 +1 @@
-import { audioFilter, audioItems } from "~/pages/PageEnigma/store";
-import { AssetFilterOption } from "~/pages/PageEnigma/models";
-import { useSignals } from "@preact/signals-react/runtime";
-import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements";
-
-export const AudioTab = () => {
-  useSignals();
-
-  return (
-    <>
-      <div className="w-full overflow-x-auto">
-        <div className="mb-4 mt-2 flex justify-start gap-2 px-2">
-          <button
-            className={[
-              "bg-assets-background rounded-lg px-3 py-1 text-sm",
-              audioFilter.value === AssetFilterOption.ALL
-                ? "border-2 border-brand-primary"
-                : "",
-            ].join(" ")}
-            onClick={() => (audioFilter.value = AssetFilterOption.ALL)}
-          >
-            All
-          </button>
-          <button
-            className={[
-              "bg-assets-background text-nowrap rounded-lg px-3 py-1 text-sm",
-              "disabled:text-gray-500",
-              audioFilter.value === AssetFilterOption.MINE
-                ? "border-2 border-brand-primary"
-                : "",
-            ].join(" ")}
-            onClick={() => (audioFilter.value = AssetFilterOption.MINE)}
-            disabled={!audioItems.value.some((item) => item.isMine)}
-          >
-            My Audios
-          </button>
-          <button
-            className={[
-              "bg-assets-background rounded-lg px-3 py-1 text-sm",
-              "disabled:text-gray-500",
-              audioFilter.value === AssetFilterOption.BOOKMARKED
-                ? "border-2 border-brand-primary"
-                : "",
-            ].join(" ")}
-            onClick={() => (audioFilter.value = AssetFilterOption.BOOKMARKED)}
-            disabled={!audioItems.value.some((item) => item.isBookmarked)}
-          >
-            Bookmarked
-          </button>
-        </div>
-      </div>
-      <div className="px-2">
-        <button className="bg-assets-background w-full rounded-lg py-2">
-          Upload Audio
-        </button>
-      </div>
-      <div className="overflow-y-auto px-2 pt-2">
-        <ItemElements
-          items={audioItems.value}
-          assetFilter={audioFilter.value}
-        />
-      </div>
-    </>
-  );
-};
+export { AudioTabComponent as AudioTab } from "../AudioTabComponent";
\ No newline at end of file
diff --git a/app/pages/PageEnigma/models/index.ts b/app/pages/PageEnigma/models/index.ts
index c85b38614c..6454e0342f 100644
--- a/app/pages/PageEnigma/models/index.ts
+++ b/app/pages/PageEnigma/models/index.ts
@@ -2,3 +2,4 @@ export * from "./assets";
 export * from "./message";
 export * from "./sidePanel";
 export * from "./track";
+export * from "./inferenceJobs";
diff --git a/app/pages/PageEnigma/models/inferenceJobs.tsx b/app/pages/PageEnigma/models/inferenceJobs.tsx
new file mode 100644
index 0000000000..fb195ac456
--- /dev/null
+++ b/app/pages/PageEnigma/models/inferenceJobs.tsx
@@ -0,0 +1,5 @@
+export interface InferenceJob {
+  version: number;
+  job_id: string;
+  jobt_type: string;
+}
diff --git a/app/pages/PageEnigma/store/inferenceJobs.ts b/app/pages/PageEnigma/store/inferenceJobs.ts
new file mode 100644
index 0000000000..784281ff74
--- /dev/null
+++ b/app/pages/PageEnigma/store/inferenceJobs.ts
@@ -0,0 +1,16 @@
+import Queue from  "~/pages/PageEnigma/Queue/Queue";
+import { QueueNames } from "../Queue/QueueNames";
+import { toInferenceActions } from "../Queue/toInferenceActions";
+// import * as uuid from "uuid";
+// import { signal } from "@preact/signals-core";
+
+import { InferenceJob } from "../models";
+
+export function addInferenceJob(
+  inferenceJob: InferenceJob){
+  Queue.publish({
+    queueName: QueueNames.TO_INFERENCE,
+    action: toInferenceActions.ADD_TTS_JOB,
+    data: inferenceJob,
+  });
+}
\ No newline at end of file

From 0bff2dcf5cbe5a730bd4694dc5b55e669fa528dc Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 9 Apr 2024 11:14:24 -0400
Subject: [PATCH 16/27] can read inference job list

---
 .../AudioTabComponent/AudioTabComponent.tsx   | 23 ++++++++++++++++---
 app/pages/PageEnigma/store/inferenceJobs.ts   | 17 ++++++++++----
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
index d302578f11..cf3ca8b2c5 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
@@ -2,13 +2,17 @@ import { audioFilter, audioItems } from "~/pages/PageEnigma/store";
 import { AssetFilterOption } from "~/pages/PageEnigma/models";
 import { useSignals } from "@preact/signals-react/runtime";
 import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements";
-import { Button } from "~/components";
+import { Button, H4 } from "~/components";
 import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
 import { twMerge } from "tailwind-merge";
+import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
+
 
 export const AudioTabComponent = () => {
-  useSignals();
-
+  const singals = useSignals();
+  console.log('Audio Tab Component > Singals >>>')
+  console.log(inferenceJobs);
+  console.log('<<<');
   return (
     <>
       <div className="w-full overflow-x-auto">
@@ -63,6 +67,19 @@ export const AudioTabComponent = () => {
           items={audioItems.value}
           assetFilter={audioFilter.value}
         />
+      
+      <H4 className="mt-10">inference jobs</H4>
+      {inferenceJobs.value.length > 0 &&
+        <ul>
+          {inferenceJobs.value.map(job=>
+            <li key={job.job_id}>{job.jobt_type}:{job.job_id}</li>
+          )}
+        </ul>
+      }
+      {
+        inferenceJobs.value.length === 0 && 
+        <p>no inference jobs</p>
+      }
       </div>
     </>
   );
diff --git a/app/pages/PageEnigma/store/inferenceJobs.ts b/app/pages/PageEnigma/store/inferenceJobs.ts
index 784281ff74..2177093854 100644
--- a/app/pages/PageEnigma/store/inferenceJobs.ts
+++ b/app/pages/PageEnigma/store/inferenceJobs.ts
@@ -1,3 +1,5 @@
+import { signal } from "@preact/signals-core";
+
 import Queue from  "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "../Queue/QueueNames";
 import { toInferenceActions } from "../Queue/toInferenceActions";
@@ -6,11 +8,16 @@ import { toInferenceActions } from "../Queue/toInferenceActions";
 
 import { InferenceJob } from "../models";
 
+export const inferenceJobs = signal<InferenceJob[]>([]);
+
 export function addInferenceJob(
   inferenceJob: InferenceJob){
-  Queue.publish({
-    queueName: QueueNames.TO_INFERENCE,
-    action: toInferenceActions.ADD_TTS_JOB,
-    data: inferenceJob,
-  });
+  const existingInferenceJobs = inferenceJobs.value;
+  
+  existingInferenceJobs.push(inferenceJob);
+  // Queue.publish({
+  //   queueName: QueueNames.TO_INFERENCE,
+  //   action: toInferenceActions.ADD_TTS_JOB,
+  //   data: inferenceJob,
+  // });
 }
\ No newline at end of file

From 30b363310f54fee5a276c3465472691dbefc249f Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 9 Apr 2024 12:22:49 -0400
Subject: [PATCH 17/27] panel to show infrerence jobs done

---
 app/components/TransitionDialogue.tsx         |  2 +-
 .../DialogueInference/DialogueInference.tsx   | 58 +++++++++++++++++++
 app/modules/DialogueInference/index.tsx       |  1 +
 app/modules/TopBar/AuthButtons.tsx            |  6 +-
 .../AudioTabComponent/AudioTabComponent.tsx   |  8 +--
 app/pages/PageEnigma/store/inferenceJobs.ts   | 11 ++--
 6 files changed, 75 insertions(+), 11 deletions(-)
 create mode 100644 app/modules/DialogueInference/DialogueInference.tsx
 create mode 100644 app/modules/DialogueInference/index.tsx

diff --git a/app/components/TransitionDialogue.tsx b/app/components/TransitionDialogue.tsx
index f897a01e8e..103cd4147a 100644
--- a/app/components/TransitionDialogue.tsx
+++ b/app/components/TransitionDialogue.tsx
@@ -7,7 +7,7 @@ export const TransitionDialogue = ({
   isOpen: boolean;
   title?: ReactNode;
   onClose:()=>void;
-  className: string;
+  className?: string;
   children: ReactNode;
   
 })=>{
diff --git a/app/modules/DialogueInference/DialogueInference.tsx b/app/modules/DialogueInference/DialogueInference.tsx
new file mode 100644
index 0000000000..b534f624e7
--- /dev/null
+++ b/app/modules/DialogueInference/DialogueInference.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+
+import { useSignals } from "@preact/signals-react/runtime";
+import { faClipboard, faClipboardList } from "@fortawesome/pro-solid-svg-icons";
+import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
+import { ButtonDialogue } from "../ButtonDialogue";
+import { H4, P } from "~/components";
+import Queue from "~/pages/PageEnigma/Queue/Queue";
+import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
+import { InferenceJob } from "~/pages/PageEnigma/models";
+
+
+export const DialogueInference = () =>{
+  useSignals();
+  const [inferenceJobsState, setInferenceJobsState] = useState<InferenceJob[]>(inferenceJobs.value);
+
+  const handleInferenceJobs = (data:any)=>{
+    console.log('Dialogue Inference > useEffect >>>');
+    console.log(data);
+    console.log(inferenceJobs.value);
+    setInferenceJobsState([...inferenceJobs.value]);
+    console.log('<<< Dialogue Inference');
+  }
+  useEffect(()=>{
+    Queue.subscribe(
+      QueueNames.TO_INFERENCE,
+      handleInferenceJobs,
+    );
+
+  },[]);
+
+  const buttonIcon = inferenceJobs.value.length > 0 
+    ? faClipboardList : faClipboard;
+  return(
+    <ButtonDialogue
+      title="My Jobs"
+      buttonProps={{
+        icon: buttonIcon,
+        variant: "secondary",
+        label: "My Jobs"
+      }}
+    >
+      <H4>List :-</H4>
+      {inferenceJobsState.length > 0 &&
+        <ul>
+          {inferenceJobsState.map(job=>
+            <li key={job.job_id}>{job.jobt_type} : {job.job_id}</li>
+          )}
+        </ul>
+      }
+      {
+        inferenceJobsState.length === 0 && 
+        <P>no inference jobs</P>
+      }
+    </ButtonDialogue>
+  );
+}
+
diff --git a/app/modules/DialogueInference/index.tsx b/app/modules/DialogueInference/index.tsx
new file mode 100644
index 0000000000..df44438efa
--- /dev/null
+++ b/app/modules/DialogueInference/index.tsx
@@ -0,0 +1 @@
+export { DialogueInference } from './DialogueInference'
\ No newline at end of file
diff --git a/app/modules/TopBar/AuthButtons.tsx b/app/modules/TopBar/AuthButtons.tsx
index 972cc9e2df..b009f98b82 100644
--- a/app/modules/TopBar/AuthButtons.tsx
+++ b/app/modules/TopBar/AuthButtons.tsx
@@ -2,6 +2,7 @@ import { useContext, } from "react";
 
 import { AuthenticationContext } from "~/contexts/Authentication";
 import { Button, ButtonLink } from "~/components";
+import { DialogueInference } from "../DialogueInference";
 
 export const AuthButtons = ()=>{
   const {authState, logout} = useContext(AuthenticationContext);
@@ -10,7 +11,10 @@ export const AuthButtons = ()=>{
   }
   if ( authState && authState.isLoggedIn ) {
     return(
-      <Button onClick={handleLogout}>Log Out</Button>
+      <>
+        <DialogueInference />
+        <Button onClick={handleLogout}>Log Out</Button>
+      </>
     );
   }else{
     return(
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
index cf3ca8b2c5..c22bf81168 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
@@ -10,9 +10,9 @@ import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
 
 export const AudioTabComponent = () => {
   const singals = useSignals();
-  console.log('Audio Tab Component > Singals >>>')
-  console.log(inferenceJobs);
-  console.log('<<<');
+  // console.log('Audio Tab Component > Singals >>>')
+  // console.log(inferenceJobs);
+  // console.log('<<<');
   return (
     <>
       <div className="w-full overflow-x-auto">
@@ -72,7 +72,7 @@ export const AudioTabComponent = () => {
       {inferenceJobs.value.length > 0 &&
         <ul>
           {inferenceJobs.value.map(job=>
-            <li key={job.job_id}>{job.jobt_type}:{job.job_id}</li>
+            <li key={job.job_id}>{job.jobt_type} : {job.job_id}</li>
           )}
         </ul>
       }
diff --git a/app/pages/PageEnigma/store/inferenceJobs.ts b/app/pages/PageEnigma/store/inferenceJobs.ts
index 2177093854..092168dcd0 100644
--- a/app/pages/PageEnigma/store/inferenceJobs.ts
+++ b/app/pages/PageEnigma/store/inferenceJobs.ts
@@ -15,9 +15,10 @@ export function addInferenceJob(
   const existingInferenceJobs = inferenceJobs.value;
   
   existingInferenceJobs.push(inferenceJob);
-  // Queue.publish({
-  //   queueName: QueueNames.TO_INFERENCE,
-  //   action: toInferenceActions.ADD_TTS_JOB,
-  //   data: inferenceJob,
-  // });
+
+  Queue.publish({
+    queueName: QueueNames.TO_INFERENCE,
+    action: toInferenceActions.ADD_TTS_JOB,
+    data: inferenceJob,
+  });
 }
\ No newline at end of file

From f19bafdb0c43d20b0fa7963f9326f15d8364cd20 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 9 Apr 2024 21:28:13 -0400
Subject: [PATCH 18/27] inference panel and inference manager are doing great

---
 app/hooks/index.tsx                           |   1 +
 app/hooks/useInferenceJobManager/index.tsx    |   1 +
 .../useInferenceJobManager.tsx                | 116 ++++++++++++++++++
 .../DialogueInference/DialogueInference.tsx   |  29 +----
 app/pages/PageEnigma/PageEnigma.tsx           |   5 +
 app/pages/PageEnigma/Queue/Queue.ts           |  16 ++-
 app/pages/PageEnigma/Queue/QueueNames.ts      |   1 -
 .../comps/DialogueTTS/DialogueTTS.tsx         |  17 ++-
 .../AudioTabComponent/AudioTabComponent.tsx   |  42 +++----
 app/pages/PageEnigma/models/inferenceJobs.tsx |   3 +-
 app/pages/PageEnigma/store/inferenceJobs.ts   |  23 ++--
 app/root.tsx                                  |   6 +
 12 files changed, 187 insertions(+), 73 deletions(-)
 create mode 100644 app/hooks/index.tsx
 create mode 100644 app/hooks/useInferenceJobManager/index.tsx
 create mode 100644 app/hooks/useInferenceJobManager/useInferenceJobManager.tsx

diff --git a/app/hooks/index.tsx b/app/hooks/index.tsx
new file mode 100644
index 0000000000..5cc28acb16
--- /dev/null
+++ b/app/hooks/index.tsx
@@ -0,0 +1 @@
+export { useInferenceJobManager } from "./useInferenceJobManager";
\ No newline at end of file
diff --git a/app/hooks/useInferenceJobManager/index.tsx b/app/hooks/useInferenceJobManager/index.tsx
new file mode 100644
index 0000000000..e048c44906
--- /dev/null
+++ b/app/hooks/useInferenceJobManager/index.tsx
@@ -0,0 +1 @@
+export { useInferenceJobManager } from './useInferenceJobManager';
diff --git a/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx b/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx
new file mode 100644
index 0000000000..cc4e91928b
--- /dev/null
+++ b/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx
@@ -0,0 +1,116 @@
+import { useEffect, useCallback } from "react";
+import { useSignals } from "@preact/signals-react/runtime";
+import { inferenceJobs, updateInferenceJob } from '~/pages/PageEnigma/store/inferenceJobs';
+
+export enum JobState {
+  UNKNOWN = "unknown", // Only on frontend.
+  PENDING = "pending",
+  STARTED = "started",
+  COMPLETE_SUCCESS = "complete_success",
+  COMPLETE_FAILURE = "complete_failure",
+  ATTEMPT_FAILED = "attempt_failed",
+  DEAD = "dead",
+  CANCELED_BY_USER = "canceled_by_user",
+}
+export interface RequestDetails {
+  inference_category: string,
+  maybe_model_type?: string,
+  maybe_model_token?: string,
+  maybe_model_title?: string,
+  maybe_raw_inference_text?: string,
+}
+
+export interface StatusDetails {
+  status: string,
+  maybe_extra_status_description?: string,
+  maybe_failure_category?: string,
+  attempt_count: number,
+}
+
+export interface ResultDetails {
+  entity_type: string,
+  entity_token: string,
+  maybe_public_bucket_media_path?: string,
+}
+
+export interface JobStatus {
+  job_token: string,
+  request: RequestDetails,
+  status: StatusDetails,
+  maybe_result?: ResultDetails,
+  created_at: Date,
+  updated_at: Date,
+}
+
+export interface GetJobStatusResponse {
+  success: boolean;
+  state: JobStatus
+}
+type ErrorResponse = {
+  success: boolean;
+  error_reason: string;
+}
+export async function GetInferenceJobStatus(jobToken:string) : Promise<GetJobStatusResponse | null> {
+
+  const endpoint = `https://api.fakeyou.com/v1/model_inference/job_status/${jobToken}`;
+  
+  return await fetch(endpoint, {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+    },
+    credentials: 'include',
+  })
+  .then(res => res.json())
+  .then(res => {
+    const response : GetJobStatusResponse = res;
+    return response;
+  })
+  .catch(e => {
+    return null;
+  });
+}
+
+function shouldKeepPolling(currStatus:string){
+  if(currStatus === JobState.PENDING 
+    || currStatus === JobState.STARTED
+  ) return true;
+  return false
+}
+
+export const useInferenceJobManager = () => {
+  useSignals();
+
+  const pollInferenceJobs = useCallback(()=>{
+    if(inferenceJobs.value.length > 0 ){
+      inferenceJobs.value.forEach(job=>{
+        if(shouldKeepPolling(job.job_status)){
+          GetInferenceJobStatus(job.job_id).then((res:GetJobStatusResponse|null)=>{
+            if(res!==null){
+              if(res.state.status.status !== job.job_status){
+                console.log(`${res.state.job_token} has new state: ${res.state.status.status}`)
+                if(res.state.status.status === JobState.COMPLETE_SUCCESS){
+                  console.log(res.state);
+                }
+                updateInferenceJob({
+                  ...job,
+                  job_status: res.state.status.status
+                })
+              }
+            }
+          });
+        }
+      });
+    }
+  }, []);
+
+  useEffect(()=>{
+    console.log('useInferenceJobManager Mounted');
+    const intervalTimer = setInterval(pollInferenceJobs,2000);
+    return()=>{
+      console.log('useInferenceJobManager Dismounted');
+      clearInterval(intervalTimer);
+    }
+  },[]);
+};
+
diff --git a/app/modules/DialogueInference/DialogueInference.tsx b/app/modules/DialogueInference/DialogueInference.tsx
index b534f624e7..0b27257eb8 100644
--- a/app/modules/DialogueInference/DialogueInference.tsx
+++ b/app/modules/DialogueInference/DialogueInference.tsx
@@ -1,33 +1,12 @@
-import { useEffect, useState } from "react";
-
 import { useSignals } from "@preact/signals-react/runtime";
 import { faClipboard, faClipboardList } from "@fortawesome/pro-solid-svg-icons";
 import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
 import { ButtonDialogue } from "../ButtonDialogue";
 import { H4, P } from "~/components";
-import Queue from "~/pages/PageEnigma/Queue/Queue";
-import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
-import { InferenceJob } from "~/pages/PageEnigma/models";
 
 
 export const DialogueInference = () =>{
   useSignals();
-  const [inferenceJobsState, setInferenceJobsState] = useState<InferenceJob[]>(inferenceJobs.value);
-
-  const handleInferenceJobs = (data:any)=>{
-    console.log('Dialogue Inference > useEffect >>>');
-    console.log(data);
-    console.log(inferenceJobs.value);
-    setInferenceJobsState([...inferenceJobs.value]);
-    console.log('<<< Dialogue Inference');
-  }
-  useEffect(()=>{
-    Queue.subscribe(
-      QueueNames.TO_INFERENCE,
-      handleInferenceJobs,
-    );
-
-  },[]);
 
   const buttonIcon = inferenceJobs.value.length > 0 
     ? faClipboardList : faClipboard;
@@ -41,15 +20,15 @@ export const DialogueInference = () =>{
       }}
     >
       <H4>List :-</H4>
-      {inferenceJobsState.length > 0 &&
+      {inferenceJobs.value.length > 0 &&
         <ul>
-          {inferenceJobsState.map(job=>
-            <li key={job.job_id}>{job.jobt_type} : {job.job_id}</li>
+          {inferenceJobs.value.map(job=>
+            <li key={job.job_id}>{job.job_type}: {job.job_status} : {job.job_id}</li>
           )}
         </ul>
       }
       {
-        inferenceJobsState.length === 0 && 
+        inferenceJobs.value.length === 0 && 
         <P>no inference jobs</P>
       }
     </ButtonDialogue>
diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index 67f3530d30..168d595ce2 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -3,12 +3,16 @@ import { TrackProvider } from "~/pages/PageEnigma/contexts/TrackContext/TrackPro
 import { AppUIProvider } from "~/pages/PageEnigma/contexts/AppUiContext";
 import { EngineProvider } from "~/pages/PageEnigma/contexts/EngineProvider";
 import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragComponent";
+
+import { useInferenceJobManager } from "~/hooks";
+
 // import { toast, ToastBar, Toaster } from "react-hot-toast";
 // import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 // import {
 //   faTriangleExclamation,
 //   faXmark,
 // } from "@fortawesome/pro-solid-svg-icons";
+
 import { useEffect } from "react";
 import { useSignals } from "@preact/signals-react/runtime";
 import {
@@ -20,6 +24,7 @@ import {
 
 export const PageEnigma = () => {
   useSignals();
+  useInferenceJobManager();
   useEffect(() => {
     function setPage() {
       // TODO address this issue with zooming
diff --git a/app/pages/PageEnigma/Queue/Queue.ts b/app/pages/PageEnigma/Queue/Queue.ts
index 31c5b31d63..5b989dbdff 100644
--- a/app/pages/PageEnigma/Queue/Queue.ts
+++ b/app/pages/PageEnigma/Queue/Queue.ts
@@ -1,19 +1,20 @@
-import { toInferenceActions } from './toInferenceActions';
-
 import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
 
 import {
   QueueClip,
   QueueKeyframe,
-  InferenceJob,
   UpdateTime,
 } from "~/pages/PageEnigma/models";
 import { toTimelineActions } from "./toTimelineActions";
 
-type UnionedActionTypes = fromEngineActions | toEngineActions | toTimelineActions | toInferenceActions;
-type UnionedDataTypes = QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem | InferenceJob;
+type UnionedActionTypes = fromEngineActions | toEngineActions | toTimelineActions;
+type UnionedDataTypes = QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem;
 
+export type QueueSubscribeType = {
+    action: UnionedActionTypes;
+    data: UnionedDataTypes;
+}
 import { ClipUI } from "../datastructures/clips/clip_ui";
 import { MediaItem } from "~/pages/PageEnigma/models";
 class Queue {
@@ -54,10 +55,7 @@ class Queue {
 
   public subscribe(
     queueName: string,
-    onMessage: (entry: {
-      action: UnionedActionTypes;
-      data: UnionedDataTypes;
-    }) => void,
+    onMessage: (entry: QueueSubscribeType) => void,
   ) {
     this._subscribers[queueName] = onMessage;
     while (this._queue[queueName]?.length) {
diff --git a/app/pages/PageEnigma/Queue/QueueNames.ts b/app/pages/PageEnigma/Queue/QueueNames.ts
index b558ef002f..813a726847 100644
--- a/app/pages/PageEnigma/Queue/QueueNames.ts
+++ b/app/pages/PageEnigma/Queue/QueueNames.ts
@@ -2,5 +2,4 @@ export enum QueueNames {
   FROM_ENGINE = "FROM_ENGINE",
   TO_ENGINE = "TO_ENGINE",
   TO_TIMELINE = "TO_TIMELINE",
-  TO_INFERENCE = "TO_INFERENCE", 
 }
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index c32ef6d61a..78eb11eca9 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -64,7 +64,8 @@ export const DialogueTTS = ()=>{
       addInferenceJob({
         version:1,
         job_id: ttsState.inferenceToken,
-        jobt_type: ttsState.inferenceJobType,
+        job_type: ttsState.inferenceJobType,
+        job_status: "pending",
       })
     }
   },[ttsState.hasEnqueued]);
@@ -157,7 +158,7 @@ export const DialogueTTS = ()=>{
           onChange={handleTextInput}
         />
         <div className="mt-6 flex gap-2">
-          <div className="w-40 h-12">
+          <div className="w-36 h-12">
             {!ttsState.hasAudio && !ttsState.hasEnqueued &&
               <Button
                 className="w-full h-full text-xl "
@@ -186,7 +187,17 @@ export const DialogueTTS = ()=>{
           </div>
         </div>
 
-        <div className="mt-6 flex justify-end gap-2">
+        <div className="mt-6 flex justify-between gap-2">
+          { ttsState.hasEnqueued &&
+            <Button
+              type="button"
+              className="w-36"
+              // onClick={}
+            >
+              Generate Another
+            </Button>
+          }
+          <span />
           <Button
             type="button"
             onClick={handleClose}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
index c22bf81168..395c55314f 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
@@ -1,18 +1,28 @@
+import { useContext } from "react";
+import { twMerge } from "tailwind-merge";
+import { useSignals } from "@preact/signals-react/runtime";
+import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
+
+import { AppUiContext } from "~/pages/PageEnigma/contexts/AppUiContext";
+import { APPUI_ACTION_TYPES } from "~/pages/PageEnigma/reducers";
 import { audioFilter, audioItems } from "~/pages/PageEnigma/store";
 import { AssetFilterOption } from "~/pages/PageEnigma/models";
-import { useSignals } from "@preact/signals-react/runtime";
+
+import { Button } from "~/components";
+
 import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements";
-import { Button, H4 } from "~/components";
-import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
-import { twMerge } from "tailwind-merge";
-import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
+
+
 
 
 export const AudioTabComponent = () => {
-  const singals = useSignals();
-  // console.log('Audio Tab Component > Singals >>>')
-  // console.log(inferenceJobs);
-  // console.log('<<<');
+  useSignals();
+  const [, dispatchAppUiState] = useContext(AppUiContext);
+  const handleOpenTtsDialogue = ()=>{
+      dispatchAppUiState({
+      type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
+    })
+  }
   return (
     <>
       <div className="w-full overflow-x-auto">
@@ -58,6 +68,7 @@ export const AudioTabComponent = () => {
           icon={faCirclePlus}
           variant="action"
           className="w-full py-3 text-sm font-medium"
+          onClick={handleOpenTtsDialogue}
         >
           Generate Audio
         </Button>
@@ -67,19 +78,6 @@ export const AudioTabComponent = () => {
           items={audioItems.value}
           assetFilter={audioFilter.value}
         />
-      
-      <H4 className="mt-10">inference jobs</H4>
-      {inferenceJobs.value.length > 0 &&
-        <ul>
-          {inferenceJobs.value.map(job=>
-            <li key={job.job_id}>{job.jobt_type} : {job.job_id}</li>
-          )}
-        </ul>
-      }
-      {
-        inferenceJobs.value.length === 0 && 
-        <p>no inference jobs</p>
-      }
       </div>
     </>
   );
diff --git a/app/pages/PageEnigma/models/inferenceJobs.tsx b/app/pages/PageEnigma/models/inferenceJobs.tsx
index fb195ac456..12039bd041 100644
--- a/app/pages/PageEnigma/models/inferenceJobs.tsx
+++ b/app/pages/PageEnigma/models/inferenceJobs.tsx
@@ -1,5 +1,6 @@
 export interface InferenceJob {
   version: number;
   job_id: string;
-  jobt_type: string;
+  job_type: string;
+  job_status: string;
 }
diff --git a/app/pages/PageEnigma/store/inferenceJobs.ts b/app/pages/PageEnigma/store/inferenceJobs.ts
index 092168dcd0..1d3dd62ca9 100644
--- a/app/pages/PageEnigma/store/inferenceJobs.ts
+++ b/app/pages/PageEnigma/store/inferenceJobs.ts
@@ -1,11 +1,5 @@
 import { signal } from "@preact/signals-core";
 
-import Queue from  "~/pages/PageEnigma/Queue/Queue";
-import { QueueNames } from "../Queue/QueueNames";
-import { toInferenceActions } from "../Queue/toInferenceActions";
-// import * as uuid from "uuid";
-// import { signal } from "@preact/signals-core";
-
 import { InferenceJob } from "../models";
 
 export const inferenceJobs = signal<InferenceJob[]>([]);
@@ -13,12 +7,17 @@ export const inferenceJobs = signal<InferenceJob[]>([]);
 export function addInferenceJob(
   inferenceJob: InferenceJob){
   const existingInferenceJobs = inferenceJobs.value;
-  
   existingInferenceJobs.push(inferenceJob);
+  inferenceJobs.value = [...existingInferenceJobs];
+}
 
-  Queue.publish({
-    queueName: QueueNames.TO_INFERENCE,
-    action: toInferenceActions.ADD_TTS_JOB,
-    data: inferenceJob,
-  });
+export function updateInferenceJob(
+  inferenceJob: InferenceJob){
+  const existingInferenceJobs = inferenceJobs.value;
+  existingInferenceJobs.forEach(job=>{
+    if(job.job_id === inferenceJob.job_id){
+      job.job_status = inferenceJob.job_status
+    }
+  })
+  inferenceJobs.value = [...existingInferenceJobs];
 }
\ No newline at end of file
diff --git a/app/root.tsx b/app/root.tsx
index 1017fbe028..03e56f23ed 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -18,6 +18,12 @@ import { LoadingDotsBricks } from "~/components";
 import { TopBar } from "./modules/TopBar";
 import { TopBarInnerContext } from "~/contexts/TopBarInner";
 import { AuthenticationProvider, UserInfo } from "./contexts/Authentication";
+// The following import prevents a Font Awesome icon server-side rendering bug,
+// where the icons flash from a very large icon down to a properly sized one:
+import '@fortawesome/fontawesome-svg-core/styles.css';
+// Prevent fontawesome from adding its CSS since we did it manually above:
+import { config } from '@fortawesome/fontawesome-svg-core';
+config.autoAddCss = false; /* eslint-disable import/first */
 
 export const links: LinksFunction = () => [
   {

From b71c4a15d668505ade2739ea092c54137d814a22 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 10 Apr 2024 00:13:52 -0400
Subject: [PATCH 19/27] simpler tts panel

---
 .../useInferenceJobManager.tsx                | 14 +++-
 .../comps/DialogueTTS/DialogueTTS.tsx         | 73 +++++++++++++------
 app/pages/PageEnigma/models/inferenceJobs.tsx |  1 +
 app/pages/PageEnigma/store/inferenceJobs.ts   | 18 +++--
 4 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx b/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx
index cc4e91928b..89c5206542 100644
--- a/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx
+++ b/app/hooks/useInferenceJobManager/useInferenceJobManager.tsx
@@ -91,11 +91,17 @@ export const useInferenceJobManager = () => {
                 console.log(`${res.state.job_token} has new state: ${res.state.status.status}`)
                 if(res.state.status.status === JobState.COMPLETE_SUCCESS){
                   console.log(res.state);
+                  updateInferenceJob({
+                    ...job,
+                    job_status: res.state.status.status,
+                    result: res.state.maybe_result
+                  });
+                }else{
+                  updateInferenceJob({
+                    ...job,
+                    job_status: res.state.status.status
+                  });
                 }
-                updateInferenceJob({
-                  ...job,
-                  job_status: res.state.status.status
-                })
               }
             }
           });
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index 78eb11eca9..2ae668e961 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useState } from "react";
+import { useSignalEffect } from "@preact/signals-react/runtime";
 import { v4 as uuidv4 } from "uuid";
 import {
   faVolume,
@@ -11,6 +12,7 @@ import { AppUiContext } from "../../contexts/AppUiContext";
 import { APPUI_ACTION_TYPES } from "../../reducers";
 import { 
   Button,
+  H2,
   H5,
   Label,
   LoadingDotsTyping,
@@ -21,7 +23,8 @@ import {
 import { ListTtsModels } from "./utilities";
 import { TtsModelListItem } from "./types";
 import { GenerateTtsAudio } from "./generateTts";
-import { addInferenceJob } from "../../store/inferenceJobs";
+import { addInferenceJob, inferenceJobs} from "../../store/inferenceJobs";
+import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
 
 type TtsState = {
   voice: TtsModelListItem | undefined;
@@ -30,9 +33,11 @@ type TtsState = {
   inferenceToken?: string;
   inferenceJobType?: string;
   hasAudio: boolean;
+  audioFile?: any;
 }
 
 export const DialogueTTS = ()=>{
+
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
   const [ttsState, setTtsState] = useState<TtsState>({
     voice:undefined,
@@ -41,6 +46,22 @@ export const DialogueTTS = ()=>{
     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 () => {
@@ -74,21 +95,25 @@ export const DialogueTTS = ()=>{
     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,
       };
-      // console.log(request);
-      GenerateTtsAudio(request).then(res=>{
-        console.log('inference job returned >>>')
-        console.log(res);
-        console.log('<<<');
 
+      GenerateTtsAudio(request).then(res=>{
         if(res.inference_job_token){
           setTtsState((curr)=>({
             ...curr,
-            hasEnqueued: true,
             inferenceToken: res.inference_job_token,
             inferenceJobType: res.inference_job_token_type
           }));
@@ -100,6 +125,16 @@ export const DialogueTTS = ()=>{
   },[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
     })
@@ -158,10 +193,10 @@ export const DialogueTTS = ()=>{
           onChange={handleTextInput}
         />
         <div className="mt-6 flex gap-2">
-          <div className="w-36 h-12">
+          <div className="w-full h-12">
             {!ttsState.hasAudio && !ttsState.hasEnqueued &&
               <Button
-                className="w-full h-full text-xl "
+                className="w-36 h-full text-xl "
                 variant={ttsState.hasAudio ? "secondary" : "primary" }
                 disabled={ttsState.text === ""}
                 icon={faBrainCircuit}
@@ -173,26 +208,22 @@ export const DialogueTTS = ()=>{
             {!ttsState.hasAudio && ttsState.hasEnqueued &&
               <LoadingDotsTyping className="bg-brand-secondary-500 rounded-lg"/>
             }
-            {ttsState.hasAudio &&
-              <Button
-                className="w-full h-full text-xl"
-                variant={ttsState.hasAudio ? "secondary" : "primary" }
-                disabled={ttsState.text === ""}
-                icon={faPlay}
-                // onClick={requestTts}
-              >
-                Speak
-              </Button>
+            { 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"
-              className="w-36"
-              // onClick={}
+              disabled={!ttsState.hasAudio}
+              onClick={requestTts}
+              icon={faBrainCircuit}
             >
               Generate Another
             </Button>
diff --git a/app/pages/PageEnigma/models/inferenceJobs.tsx b/app/pages/PageEnigma/models/inferenceJobs.tsx
index 12039bd041..61a643b0b0 100644
--- a/app/pages/PageEnigma/models/inferenceJobs.tsx
+++ b/app/pages/PageEnigma/models/inferenceJobs.tsx
@@ -3,4 +3,5 @@ export interface InferenceJob {
   job_id: string;
   job_type: string;
   job_status: string;
+  result?: any;
 }
diff --git a/app/pages/PageEnigma/store/inferenceJobs.ts b/app/pages/PageEnigma/store/inferenceJobs.ts
index 1d3dd62ca9..d9bae726bd 100644
--- a/app/pages/PageEnigma/store/inferenceJobs.ts
+++ b/app/pages/PageEnigma/store/inferenceJobs.ts
@@ -5,18 +5,24 @@ import { InferenceJob } from "../models";
 export const inferenceJobs = signal<InferenceJob[]>([]);
 
 export function addInferenceJob(
-  inferenceJob: InferenceJob){
+  newJob: InferenceJob){
   const existingInferenceJobs = inferenceJobs.value;
-  existingInferenceJobs.push(inferenceJob);
-  inferenceJobs.value = [...existingInferenceJobs];
+  const jobExist = existingInferenceJobs.find(job=>job.job_id==newJob.job_id)
+  if(!jobExist){
+    inferenceJobs.value = [...existingInferenceJobs, newJob]
+  };
+  // else do nothing
 }
 
 export function updateInferenceJob(
-  inferenceJob: InferenceJob){
+  updatableJob: InferenceJob){
   const existingInferenceJobs = inferenceJobs.value;
   existingInferenceJobs.forEach(job=>{
-    if(job.job_id === inferenceJob.job_id){
-      job.job_status = inferenceJob.job_status
+    if(job.job_id === updatableJob.job_id){
+      job.job_status = updatableJob.job_status
+    }
+    if(updatableJob.result){
+      job.result = updatableJob.result;
     }
   })
   inferenceJobs.value = [...existingInferenceJobs];

From b8c5dc0d681998fbb01a51765636eaea4da994e0 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 10 Apr 2024 00:18:47 -0400
Subject: [PATCH 20/27] backmerge and stablized code

---
 .../comps/DialogueTTS/DialogueTTS.tsx         |   4 +-
 package-lock.json                             | 230 +++++++++---------
 2 files changed, 113 insertions(+), 121 deletions(-)

diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
index 2ae668e961..7d674e2882 100644
--- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
+++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx
@@ -86,10 +86,10 @@ export const DialogueTTS = ()=>{
         version:1,
         job_id: ttsState.inferenceToken,
         job_type: ttsState.inferenceJobType,
-        job_status: "pending",
+        job_status: JobState.PENDING,
       })
     }
-  },[ttsState.hasEnqueued]);
+  },[ttsState]);
 
   const requestTts = useCallback( ()=>{
     const modelToken = ttsState.voice ? ttsState.voice.model_token : undefined;
diff --git a/package-lock.json b/package-lock.json
index afe29ba415..99779ed447 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -838,9 +838,9 @@
       "dev": true
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
-      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
       "cpu": [
         "ppc64"
       ],
@@ -5264,16 +5264,16 @@
       }
     },
     "node_modules/express": {
-      "version": "4.18.3",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.3.tgz",
-      "integrity": "sha512-6VyCijWQ+9O7WuVMTRBTl+cjNNIzD5cY5mQ1WM8r/LEkI2u8EYpOotESNwzNlyCn3g+dmjKYI6BmNneSr/FSRw==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
         "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -5304,14 +5304,6 @@
         "node": ">= 0.10.0"
       }
     },
-    "node_modules/express/node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/express/node_modules/cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
@@ -9858,9 +9850,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.37",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.37.tgz",
-      "integrity": "sha512-7iB/v/r7Woof0glKLH8b1SPHrsX7uhdO+Geb41QpF/+mWZHU3uxxSlN+UXGVit1PawOYDToO+AbZzhBzWRDwbQ==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "devOptional": true,
       "funding": [
         {
@@ -11888,9 +11880,9 @@
       }
     },
     "node_modules/tar": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
-      "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
       "dev": true,
       "dependencies": {
         "chownr": "^2.0.0",
@@ -12708,14 +12700,14 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.3.tgz",
-      "integrity": "sha512-UfmUD36DKkqhi/F75RrxvPpry+9+tTkrXfMNZD+SboZqBCMsxKtO52XeGzzuh7ioz+Eo/SYDBbdb0Z7vgcDJew==",
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+      "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
       "devOptional": true,
       "dependencies": {
-        "esbuild": "^0.19.3",
-        "postcss": "^8.4.35",
-        "rollup": "^4.2.0"
+        "esbuild": "^0.20.1",
+        "postcss": "^8.4.38",
+        "rollup": "^4.13.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -12804,9 +12796,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/android-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
-      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
       "cpu": [
         "arm"
       ],
@@ -12820,9 +12812,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/android-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
-      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
       "cpu": [
         "arm64"
       ],
@@ -12836,9 +12828,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/android-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
-      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
       "cpu": [
         "x64"
       ],
@@ -12852,9 +12844,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
-      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
       "cpu": [
         "arm64"
       ],
@@ -12868,9 +12860,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
-      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
       "cpu": [
         "x64"
       ],
@@ -12884,9 +12876,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
-      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
       "cpu": [
         "arm64"
       ],
@@ -12900,9 +12892,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
-      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
       "cpu": [
         "x64"
       ],
@@ -12916,9 +12908,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
-      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
       "cpu": [
         "arm"
       ],
@@ -12932,9 +12924,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
-      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
       "cpu": [
         "arm64"
       ],
@@ -12948,9 +12940,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
-      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
       "cpu": [
         "ia32"
       ],
@@ -12964,9 +12956,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
-      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
       "cpu": [
         "loong64"
       ],
@@ -12980,9 +12972,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
-      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
       "cpu": [
         "mips64el"
       ],
@@ -12996,9 +12988,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
-      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
       "cpu": [
         "ppc64"
       ],
@@ -13012,9 +13004,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
-      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
       "cpu": [
         "riscv64"
       ],
@@ -13028,9 +13020,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
-      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
       "cpu": [
         "s390x"
       ],
@@ -13044,9 +13036,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
-      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
       "cpu": [
         "x64"
       ],
@@ -13060,9 +13052,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
       "cpu": [
         "x64"
       ],
@@ -13076,9 +13068,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
       "cpu": [
         "x64"
       ],
@@ -13092,9 +13084,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
-      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
       "cpu": [
         "x64"
       ],
@@ -13108,9 +13100,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
-      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
       "cpu": [
         "arm64"
       ],
@@ -13124,9 +13116,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
-      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
       "cpu": [
         "ia32"
       ],
@@ -13140,9 +13132,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/win32-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
-      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
       "cpu": [
         "x64"
       ],
@@ -13156,9 +13148,9 @@
       }
     },
     "node_modules/vite/node_modules/esbuild": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
-      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
       "devOptional": true,
       "hasInstallScript": true,
       "bin": {
@@ -13168,29 +13160,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.19.12",
-        "@esbuild/android-arm": "0.19.12",
-        "@esbuild/android-arm64": "0.19.12",
-        "@esbuild/android-x64": "0.19.12",
-        "@esbuild/darwin-arm64": "0.19.12",
-        "@esbuild/darwin-x64": "0.19.12",
-        "@esbuild/freebsd-arm64": "0.19.12",
-        "@esbuild/freebsd-x64": "0.19.12",
-        "@esbuild/linux-arm": "0.19.12",
-        "@esbuild/linux-arm64": "0.19.12",
-        "@esbuild/linux-ia32": "0.19.12",
-        "@esbuild/linux-loong64": "0.19.12",
-        "@esbuild/linux-mips64el": "0.19.12",
-        "@esbuild/linux-ppc64": "0.19.12",
-        "@esbuild/linux-riscv64": "0.19.12",
-        "@esbuild/linux-s390x": "0.19.12",
-        "@esbuild/linux-x64": "0.19.12",
-        "@esbuild/netbsd-x64": "0.19.12",
-        "@esbuild/openbsd-x64": "0.19.12",
-        "@esbuild/sunos-x64": "0.19.12",
-        "@esbuild/win32-arm64": "0.19.12",
-        "@esbuild/win32-ia32": "0.19.12",
-        "@esbuild/win32-x64": "0.19.12"
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
       }
     },
     "node_modules/vite/node_modules/rollup": {

From af60e2c9c92e70d03b865cbc5190e1edd9c03fb3 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 10 Apr 2024 10:02:15 -0400
Subject: [PATCH 21/27] fix props

---
 .../PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx  | 2 +-
 .../PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
index 0bbf59d9fb..ce94d09b9b 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
@@ -112,7 +112,7 @@ export const ControlsTopButtons = () => {
           <p>Ask Wil about React</p>
         </ButtonDialogue>
       </div>
-      <TestFeaturesButtons />
+      <TestFeaturesButtons debug={false}/>
     </div>
   );
 };
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx
index f9b8355724..763a6b662a 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx
@@ -5,7 +5,7 @@ import { APPUI_ACTION_TYPES } from "../../reducers";
 import { AppUiContext } from "../../contexts/AppUiContext";
 import { EngineContext } from "../../contexts/EngineContext";
 
-export const TestFeaturesButtons = (debug:boolean)=>{
+export const TestFeaturesButtons = ({debug}:{debug:boolean})=>{
   if (!debug) return null;
   
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);

From b725c6816c11671627e5f7afcbeb899f4ae87f5f Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 10 Apr 2024 11:38:08 -0400
Subject: [PATCH 22/27] loading list of audio works

---
 .../AudioTabComponent/AudioTabComponent.tsx   | 50 +++++++++++++++++--
 app/pages/PageEnigma/store/mediaFromServer.ts |  3 ++
 2 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 app/pages/PageEnigma/store/mediaFromServer.ts

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
index 9d5686b783..2c8c830dac 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
@@ -1,25 +1,65 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
-import { useSignals } from "@preact/signals-react/runtime";
+import { useSignals, useSignalEffect } from "@preact/signals-react/runtime";
 import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
 
 import { AppUiContext } from "~/pages/PageEnigma/contexts/AppUiContext";
+import { AuthenticationContext } from "~/contexts/Authentication";
 import { APPUI_ACTION_TYPES } from "~/pages/PageEnigma/reducers";
 import { audioFilter, audioItems } from "~/pages/PageEnigma/store";
 import { AssetFilterOption } from "~/pages/PageEnigma/models";
 
 import { Button } from "~/components";
 
+import { MediaItem, AssetType } from "~/pages/PageEnigma/models";
 import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements";
+import { audioItemsFromServer } from "~/pages/PageEnigma/store/mediaFromServer";
+import { ListAudioByUser } from "./listAudioByUser";
 
 export const AudioTabComponent = () => {
   useSignals();
+  const [ state, setState ] = useState({
+    firstLoad: false,
+  });
+  const { authState } = useContext(AuthenticationContext);
   const [, dispatchAppUiState] = useContext(AppUiContext);
   const handleOpenTtsDialogue = ()=>{
       dispatchAppUiState({
       type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS
     })
   }
+  const allAudioItems = [...audioItems.value, ...audioItemsFromServer.value];
+
+  useEffect(()=>{
+    if ( authState.userInfo ){
+      if(state.firstLoad === false && audioItemsFromServer.value.length === 0){
+        ListAudioByUser(authState.userInfo.username).then((res:any[])=>{
+          // console.log(res)
+          audioItemsFromServer.value = res.map(item=>{
+            const morphedItem:MediaItem = {
+              version: 1,
+              type: AssetType.AUDIO,
+              media_id: item.token,
+              object_uuid: item.token,
+              name: item.maybe_title || item.origin.maybe_model.title,
+              // length?: number;
+              thumbnail: "resources/placeholders/audio_placeholder.png",
+              isMine: true,
+              // isBookmarked?: boolean;
+            }
+            return morphedItem;
+          });
+        });
+      }
+    }
+  }, [authState, state]);
+
+  useSignalEffect(()=>{
+    if (state.firstLoad === false && audioItemsFromServer.value.length > 0){
+      setState({firstLoad: true});
+    }
+  });
+
   return (
     <>
       <div className="w-full overflow-x-auto">
@@ -41,7 +81,7 @@ export const AudioTabComponent = () => {
               "disabled",
             )}
             onClick={() => (audioFilter.value = AssetFilterOption.MINE)}
-            disabled={!audioItems.value.some((item) => item.isMine)}
+            disabled={!allAudioItems.some((item) => item.isMine)}
           >
             My Audios
           </button>
@@ -54,7 +94,7 @@ export const AudioTabComponent = () => {
               "disabled",
             )}
             onClick={() => (audioFilter.value = AssetFilterOption.BOOKMARKED)}
-            disabled={!audioItems.value.some((item) => item.isBookmarked)}
+            disabled={!allAudioItems.some((item) => item.isBookmarked)}
           >
             Bookmarked
           </button>
@@ -72,7 +112,7 @@ export const AudioTabComponent = () => {
       </div>
       <div className="h-full w-full overflow-y-auto px-4 pt-4">
         <ItemElements
-          items={audioItems.value}
+          items={allAudioItems}
           assetFilter={audioFilter.value}
         />
       </div>
diff --git a/app/pages/PageEnigma/store/mediaFromServer.ts b/app/pages/PageEnigma/store/mediaFromServer.ts
new file mode 100644
index 0000000000..7bb5168e13
--- /dev/null
+++ b/app/pages/PageEnigma/store/mediaFromServer.ts
@@ -0,0 +1,3 @@
+import { signal } from "@preact/signals-core";
+import { AssetType, MediaItem } from "~/pages/PageEnigma/models";
+export const audioItemsFromServer = signal<MediaItem[]>([]);
\ No newline at end of file

From fc9cb366965fd914061e6d8c674086dcdb4b6c37 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 10 Apr 2024 11:53:56 -0400
Subject: [PATCH 23/27] code clean and set default length

---
 .../ControlsTopButtons/ControlsTopButtons.tsx |  2 +-
 .../AudioTabComponent/AudioElement.tsx        | 80 -------------------
 .../AudioTabComponent/AudioTabComponent.tsx   |  4 +-
 app/pages/PageEnigma/store/mediaFromServer.ts |  2 +-
 4 files changed, 4 insertions(+), 84 deletions(-)
 delete mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioElement.tsx

diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
index ce94d09b9b..dcc148adcb 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
@@ -3,7 +3,7 @@ import { Input } from "~/components";
 import { ButtonDialogue } from "~/modules/ButtonDialogue";
 import { EngineContext } from "../../contexts/EngineContext";
 import { ToasterContext } from "~/pages/PageEnigma/contexts/ToasterContext";
-import { APPUI_ACTION_TYPES } from "~/pages/PageEnigma/reducers";
+// import { APPUI_ACTION_TYPES } from "~/pages/PageEnigma/reducers";
 
 import { TestFeaturesButtons } from "./TestFeaturesButtons";
 
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioElement.tsx
deleted file mode 100644
index 7944f94d64..0000000000
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioElement.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useCallback, useContext, useEffect } from "react";
-import { MediaItem } from "~/pages/PageEnigma/models";
-import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext";
-import {
-  canDrop,
-  currPosition,
-  dragItem,
-  initPosition,
-} from "~/pages/PageEnigma/store";
-import { useSignals } from "@preact/signals-react/runtime";
-
-interface Props {
-  item: MediaItem;
-}
-
-export const ItemElement = ({ item }: Props) => {
-  useSignals();
-  const { startDrag, endDrag } = useContext(TrackContext);
-  const { initX, initY } = initPosition.value;
-
-  useEffect(() => {
-    const onPointerUp = () => {
-      if (dragItem.value) {
-        endDrag();
-      }
-    };
-
-    const onMouseMove = (event: MouseEvent) => {
-      if (dragItem.value) {
-        event.stopPropagation();
-        event.preventDefault();
-        const deltaX = event.pageX - initX;
-        const deltaY = event.pageY - initY;
-        currPosition.value = { currX: initX + deltaX, currY: initY + deltaY };
-      }
-    };
-
-    window.addEventListener("pointerup", onPointerUp);
-    window.addEventListener("pointermove", onMouseMove);
-
-    return () => {
-      window.removeEventListener("pointerup", onPointerUp);
-      window.removeEventListener("pointermove", onMouseMove);
-    };
-  }, [startDrag, endDrag, initX, initY]);
-
-  const onPointerDown = useCallback(
-    (event: React.PointerEvent<HTMLDivElement>) => {
-      if (event.button === 0) {
-        startDrag(item);
-        currPosition.value = {
-          currX: event.pageX,
-          currY: event.pageY,
-        };
-        initPosition.value = {
-          initX: event.pageX,
-          initY: event.pageY,
-        };
-        canDrop.value = false;
-      }
-    },
-    [item, startDrag],
-  );
-
-  return (
-    <div
-      className="relative rounded-lg"
-      style={{ width: 91, height: 114 }}
-      onPointerDown={onPointerDown}
-    >
-      <img src={item.thumbnail} alt={item.name} className="rounded-t-lg" />
-      <div
-        className="w-full rounded-b-lg py-1 text-center text-sm"
-        style={{ backgroundColor: "#39394D" }}
-      >
-        {item.name}
-      </div>
-    </div>
-  );
-};
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
index 2c8c830dac..7b676b9395 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
@@ -34,7 +34,7 @@ export const AudioTabComponent = () => {
     if ( authState.userInfo ){
       if(state.firstLoad === false && audioItemsFromServer.value.length === 0){
         ListAudioByUser(authState.userInfo.username).then((res:any[])=>{
-          // console.log(res)
+          console.log(res)
           audioItemsFromServer.value = res.map(item=>{
             const morphedItem:MediaItem = {
               version: 1,
@@ -42,7 +42,7 @@ export const AudioTabComponent = () => {
               media_id: item.token,
               object_uuid: item.token,
               name: item.maybe_title || item.origin.maybe_model.title,
-              // length?: number;
+              length: 25,
               thumbnail: "resources/placeholders/audio_placeholder.png",
               isMine: true,
               // isBookmarked?: boolean;
diff --git a/app/pages/PageEnigma/store/mediaFromServer.ts b/app/pages/PageEnigma/store/mediaFromServer.ts
index 7bb5168e13..dd8bbc52b1 100644
--- a/app/pages/PageEnigma/store/mediaFromServer.ts
+++ b/app/pages/PageEnigma/store/mediaFromServer.ts
@@ -1,3 +1,3 @@
 import { signal } from "@preact/signals-core";
-import { AssetType, MediaItem } from "~/pages/PageEnigma/models";
+import { MediaItem } from "~/pages/PageEnigma/models";
 export const audioItemsFromServer = signal<MediaItem[]>([]);
\ No newline at end of file

From c8ae419405d4e129f3bab41a2cafd196e802233a Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 10 Apr 2024 13:54:01 -0400
Subject: [PATCH 24/27] audio panel auto updates on inference completion

---
 app/components/ButtonIcon.tsx                 |  5 +-
 .../AudioTabComponent/AudioTabComponent.tsx   | 86 ++++++++++++++-----
 2 files changed, 67 insertions(+), 24 deletions(-)

diff --git a/app/components/ButtonIcon.tsx b/app/components/ButtonIcon.tsx
index 2db55e172f..a2679c6c1d 100644
--- a/app/components/ButtonIcon.tsx
+++ b/app/components/ButtonIcon.tsx
@@ -4,13 +4,15 @@ import { twMerge } from "tailwind-merge";
 
 interface ButtonIconProps {
   icon: IconDefinition;
-  fill?: boolean;
   onClick: () => void;
+  className?: string;
+  fill?: boolean;
 }
 
 export const ButtonIcon = ({
   icon,
   onClick,
+  className : propsClassName,
   fill = false,
 }: ButtonIconProps) => {
   const className = twMerge(
@@ -18,6 +20,7 @@ export const ButtonIcon = ({
     fill
       ? "bg-ui-controls-button hover:bg-ui-controls-button/[0.75]"
       : "bg-transparent hover:bg-ui-panel/[0.4]",
+    propsClassName,
   );
 
   return (
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
index 7b676b9395..c685ebb909 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx
@@ -1,7 +1,7 @@
-import { useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { useSignals, useSignalEffect } from "@preact/signals-react/runtime";
-import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
+import { faCirclePlus, faArrowsRotate } from "@fortawesome/pro-solid-svg-icons";
 
 import { AppUiContext } from "~/pages/PageEnigma/contexts/AppUiContext";
 import { AuthenticationContext } from "~/contexts/Authentication";
@@ -9,17 +9,20 @@ import { APPUI_ACTION_TYPES } from "~/pages/PageEnigma/reducers";
 import { audioFilter, audioItems } from "~/pages/PageEnigma/store";
 import { AssetFilterOption } from "~/pages/PageEnigma/models";
 
-import { Button } from "~/components";
+import { Button, ButtonIcon } from "~/components";
 
 import { MediaItem, AssetType } from "~/pages/PageEnigma/models";
 import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements";
 import { audioItemsFromServer } from "~/pages/PageEnigma/store/mediaFromServer";
 import { ListAudioByUser } from "./listAudioByUser";
+import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
+import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
 
 export const AudioTabComponent = () => {
   useSignals();
   const [ state, setState ] = useState({
     firstLoad: false,
+    fetchingUserAudio: false,
   });
   const { authState } = useContext(AuthenticationContext);
   const [, dispatchAppUiState] = useContext(AppUiContext);
@@ -30,40 +33,65 @@ export const AudioTabComponent = () => {
   }
   const allAudioItems = [...audioItems.value, ...audioItemsFromServer.value];
 
+  const handleListAudioByUser = useCallback((username:string)=>{
+    setState((curr)=>({...curr, fetchingUserAudio:true}));
+    ListAudioByUser(username).then((res:any[])=>{
+      console.log(res)
+      setState((curr)=>({...curr, fetchingUserAudio:false}));
+      audioItemsFromServer.value = res.map(item=>{
+        const morphedItem:MediaItem = {
+          version: 1,
+          type: AssetType.AUDIO,
+          media_id: item.token,
+          object_uuid: item.token,
+          name: item.maybe_title || item.origin.maybe_model.title,
+          length: 25,
+          thumbnail: "resources/placeholders/audio_placeholder.png",
+          isMine: true,
+          // isBookmarked?: boolean;
+        }
+        return morphedItem;
+      });
+    });
+  }, []);
+
   useEffect(()=>{
     if ( authState.userInfo ){
       if(state.firstLoad === false && audioItemsFromServer.value.length === 0){
-        ListAudioByUser(authState.userInfo.username).then((res:any[])=>{
-          console.log(res)
-          audioItemsFromServer.value = res.map(item=>{
-            const morphedItem:MediaItem = {
-              version: 1,
-              type: AssetType.AUDIO,
-              media_id: item.token,
-              object_uuid: item.token,
-              name: item.maybe_title || item.origin.maybe_model.title,
-              length: 25,
-              thumbnail: "resources/placeholders/audio_placeholder.png",
-              isMine: true,
-              // isBookmarked?: boolean;
-            }
-            return morphedItem;
-          });
-        });
+        handleListAudioByUser(authState.userInfo.username);
       }
     }
-  }, [authState, state]);
+  }, [authState, state, handleListAudioByUser]);
 
   useSignalEffect(()=>{
+    // flagging first load is done
     if (state.firstLoad === false && audioItemsFromServer.value.length > 0){
-      setState({firstLoad: true});
+      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)=>{
+        if(job.job_status === JobState.COMPLETE_SUCCESS){
+          console.log(job);
+
+          const foundItemOfJob = audioItemsFromServer.value.find((item)=>{
+            return item.media_id === job.result.entity_token
+          });
+
+          return foundItemOfJob !== undefined;
+        }
+      });
+      if(found === undefined){
+        handleListAudioByUser(authState.userInfo.username);
+      }
     }
   });
 
   return (
     <>
       <div className="w-full overflow-x-auto">
-        <div className="mb-4 mt-4 flex justify-start gap-2 px-4">
+        <div className="mb-4 mt-4 flex justify-start items-center gap-2 px-4">
           <button
             className={twMerge(
               "filter-tab",
@@ -98,6 +126,18 @@ export const AudioTabComponent = () => {
           >
             Bookmarked
           </button>
+          <ButtonIcon
+            className={twMerge(
+              "absolute right-0 mr-4", 
+              // state.fetchingUserAudio ? "animate-spin" : "",
+            )}
+            icon={faArrowsRotate}
+            onClick={()=>{
+              if(authState.userInfo?.username){
+                handleListAudioByUser(authState.userInfo?.username);
+              }
+            }}
+          />
         </div>
       </div>
       <div className="w-full px-4">

From 86007a33eecf824f57c0e3a4ef79a600c9d481c3 Mon Sep 17 00:00:00 2001
From: Michael Chung <6252325+ArEnSc@users.noreply.github.com>
Date: Wed, 10 Apr 2024 14:07:43 -0400
Subject: [PATCH 25/27] Modified timeline so less changes are present.

---
 app/pages/PageEnigma/js/timeline.ts | 1021 +++++++++++++--------------
 1 file changed, 477 insertions(+), 544 deletions(-)

diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 5e0ce1f103..a1fe8a693d 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -13,561 +13,494 @@ import { toEngineActions } from "../Queue/toEngineActions";
 import { fromEngineActions } from "../Queue/fromEngineActions";
 import { ClipGroup, ClipType } from "~/pages/PageEnigma/models/track";
 import { MediaItem } from "~/pages/PageEnigma/models";
-import Editor from "~/pages/PageEnigma/js/editor";
-
 // Every object uuid / entity has a track.
 export class TimelineDataState {
-  timeline_items: ClipUI[];
-  scrubber_frame_position: number;
-  constructor(
-    timeline_items: ClipUI[] = [],
-    scrubber_frame_position: number = 0,
-  ) {
-    this.timeline_items = timeline_items;
-    this.scrubber_frame_position = scrubber_frame_position;
-  }
+    timeline_items: ClipUI[];
+    scrubber_frame_position: number;
+    constructor(
+        timeline_items: ClipUI[] = [],
+        scrubber_frame_position: number = 0,
+    ) {
+        this.timeline_items = timeline_items;
+        this.scrubber_frame_position = scrubber_frame_position;
+    }
 }
 
 export class TimeLine {
-  editorEngine: Editor;
-  timeline_items: ClipUI[];
+    timeline_items: ClipUI[];
 
-  timeline_limit: number;
-  absolute_end: number;
-  scrubber_frame_position: number;
-  is_playing: boolean;
+    timeline_limit: number;
+    absolute_end: number;
+    scrubber_frame_position: number;
+    is_playing: boolean;
 
-  // plays audio
-  audio_engine: AudioEngine;
-  // key framing
-  transform_engine: TransformEngine;
-  // animation engine
-  animation_engine: AnimationEngine;
-  // lip sync engine
-  lipSync_engine: LipSyncEngine;
-  characters: { [key: string]: ClipGroup };
+    // plays audio
+    audio_engine: AudioEngine;
+    // key framing
+    transform_engine: TransformEngine;
+    // animation engine
+    animation_engine: AnimationEngine;
+    // lip sync engine
+    lipSync_engine: LipSyncEngine;
+    characters: { [key: string]: ClipGroup };
 
-  scene: Scene;
+    scene: Scene;
 
-  current_time: number;
+    current_time: number;
 
-  // ensure that the elements are loaded first.
-  constructor(
-    editor: Editor,
-    audio_engine: AudioEngine,
-    transform_engine: TransformEngine,
-    lipsync_engine: LipSyncEngine,
-    animation_engine: AnimationEngine,
-    scene: Scene,
-  ) {
-    this.editorEngine = editor;
-    this.timeline_items = [];
-    this.characters = {};
-    this.absolute_end = 60 * 12;
-    this.timeline_limit = 0; // 5 seconds
-
-    this.is_playing = false;
-    this.scrubber_frame_position = 0; // in frames into the tl
-
-    // this will be used to play the audio clips
-    this.audio_engine = audio_engine;
-    this.transform_engine = transform_engine;
-    this.lipSync_engine = lipsync_engine;
-    this.animation_engine = animation_engine;
-
-    this.scene = scene;
-
-    Queue.subscribe(
-      QueueNames.TO_ENGINE,
-      this.handleTimelineActions.bind(this),
-    );
-
-    this.current_time = 0;
-  }
-
-  public async updateUI() {
-    Queue.publish({
-      queueName: QueueNames.FROM_ENGINE,
-      action: fromEngineActions.UPDATE_TIME_LINE,
-      data: this.timeline_items,
-    });
-  }
-
-  public async pushEvent(action: fromEngineActions, data: any) {
-    this.current_time += 1;
-    Queue.publish({
-      queueName: QueueNames.FROM_ENGINE,
-      action: fromEngineActions.UPDATE_TIME,
-      data: data,
-    });
-  }
-
-  public async handleTimelineActions(data: any) {
-    const action = data["action"];
-    switch (action) {
-      case toEngineActions.ADD_KEYFRAME:
-        await this.addKeyFrame(data);
-        break;
-      case toEngineActions.UPDATE_KEYFRAME:
-        await this.updateKeyFrame(data);
-        break;
-      case toEngineActions.DELETE_KEYFRAME:
-        await this.deleteKeyFrame(data);
-        break;
-      case toEngineActions.ADD_CLIP:
-        await this.addClip(data);
-        break;
-      case toEngineActions.DELETE_CLIP:
-        await this.deleteClip(data);
-        break;
-      case toEngineActions.UPDATE_CLIP:
-        await this.updateClip(data);
-        break;
-      case toEngineActions.UPDATE_TIME:
-        await this.scrub(data);
-        break;
-      case toEngineActions.MUTE:
-        await this.mute(data, false);
-        break;
-      case toEngineActions.UNMUTE:
-        await this.mute(data, true);
-        break;
-      case toEngineActions.ADD_CHARACTER:
-        await this.addCharacter(data);
-        break;
-      case toEngineActions.ADD_OBJECT:
-        await this.addObject(data);
-        break;
-      case toEngineActions.ADD_SHAPE:
-        await this.addShape(data);
-        break;
-      default:
-        console.log("Action Not Wired", action);
-    }
-  }
-
-  public async addCharacter(data: { data: MediaItem }) {
-    const media_id = data.data.media_id;
-    const name = data.data.name;
-
-    const obj = await this.scene.load_glb(media_id);
-    obj.userData["name"] = name;
-    obj.name = name;
-    const object_uuid = obj.uuid;
-
-    this.characters[object_uuid] = ClipGroup.CHARACTER;
-
-    data.data["object_uuid"] = object_uuid;
-    Queue.publish({
-      queueName: QueueNames.FROM_ENGINE,
-      action: fromEngineActions.UPDATE_CHARACTER_ID,
-      data: data.data,
-    });
-
-    this.addPlayableClip(
-      new ClipUI(
-        data.data["version"],
-        ClipType.FAKE,
-        ClipGroup.CHARACTER,
-        "Default",
-        media_id,
-        obj.uuid,
-        obj.uuid,
-        name,
-        0,
-        0,
-        0,
-      ),
-    );
-  }
-
-  public async addObject(data: { data: MediaItem }) {
-    const media_id = data.data.media_id;
-    const name = data.data.name;
-    const obj = await this.scene.load_glb(media_id);
-    obj.userData["name"] = name;
-    obj.name = name;
-  }
-
-  public async addShape({ data }: { data: MediaItem }) {
-    this.editorEngine.create_parim(data.media_id);
-  }
-
-  public async addKeyFrame(data: any) {
-    // KeyFrame Object
-    // version: number;
-    // clip_uuid: string;
-    // group: ClipGroup;
-    // object_uuid?: string;
-    // offset: number;
-    // position: XYZ
-    // rotation: XYZ;
-    // scale: XYZ;
-    // selected?: boolean;
-    const data_json = data["data"];
-    const uuid = data_json["object_uuid"];
-    const keyframe_uuid = data_json["keyframe_uuid"];
-
-    let object_name = this.scene.get_object_by_uuid(uuid)?.name;
-    if (object_name === undefined) {
-      object_name = "undefined";
-    }
-
-    const new_item = this.transform_engine.addFrame(
-      uuid,
-      this.absolute_end,
-      data_json["position"],
-      data_json["rotation"],
-      data_json["scale"],
-      data_json["offset"],
-      data_json["keyframe_uuid"],
-    );
-
-    await this.addPlayableClip(
-      new ClipUI(
-        data_json["version"],
-        ClipType.TRANSFORM,
-        data_json["group"],
-        object_name,
-        "",
-        keyframe_uuid,
-        uuid,
-        object_name,
-        0,
-        this.absolute_end,
-        data_json["offset"],
-      ),
-    );
-
-    this.scene.createPoint(data_json["position"], data_json["keyframe_uuid"]);
-  }
-
-  public deleteObject(object_uuid: string) {
-    this.timeline_items = this.timeline_items.filter(
-      (element) => element.object_uuid !== object_uuid,
-    );
-    // Update react land here.
-  }
-
-  public async addClip(data: any) {
-    const object_uuid = data["data"]["object_uuid"];
-    const media_id = data["data"]["media_id"];
-    const name = data["data"]["name"];
-    const group = data["data"]["group"];
-    const version = data["data"]["group"];
-    const type = data["data"]["type"];
-    const offset = data["data"]["offset"];
-    const end_offset = data["data"]["length"] + offset;
-    let object_name = this.scene.get_object_by_uuid(object_uuid)?.name;
-    const clip_uuid = data["data"]["clip_uuid"];
-
-    if (object_name === undefined) {
-      object_name = "Undefined.";
-    }
-
-    switch (type) {
-      case "animation":
-        this.animation_engine.load_object(object_uuid, media_id, name);
-        break;
-      case "transform":
-        this.transform_engine.loadObject(object_uuid, data["data"]["length"]);
-        break;
-      case "audio":
-        if (group === "character") {
-          this.lipSync_engine.load_object(object_uuid, media_id);
-          // media id for this as well it can be downloaded
-          this.addPlayableClip(
-            new ClipUI(
-              version,
-              ClipType.AUDIO,
-              ClipGroup.CHARACTER,
-              name,
-              media_id,
-              clip_uuid,
-              object_uuid,
-              object_name,
-              offset,
-              end_offset,
-            ),
-          );
-          return;
-        } else {
-          this.audio_engine.loadClip(media_id);
-        }
-        break;
-    }
-
-    // media id for this as well it can be downloaded
-    this.addPlayableClip(
-      new ClipUI(
-        version,
-        type,
-        group,
-        name,
-        media_id,
-        clip_uuid,
-        object_uuid,
-        object_name,
-        offset,
-        end_offset,
-      ),
-    );
-  }
-
-  public async deleteKeyFrame(data: any) {
-    const keyframe_uuid = data["data"]["keyframe_uuid"];
-    const object_uuid = data["data"]["object_uuid"];
-    this.transform_engine.clips[object_uuid].removeKeyframe(keyframe_uuid);
-    this.scene.deletePoint(keyframe_uuid);
-  }
-
-  public async updateKeyFrame(data: any) {
-    const keyframe_uuid = data["data"]["keyframe_uuid"];
-    const keyframe_offset = data["data"]["offset"];
-    const object_uuid = data["data"]["object_uuid"];
-    this.transform_engine.clips[object_uuid].setOffset(
-      keyframe_uuid,
-      keyframe_offset,
-    );
-  }
-
-  public async updateClip(data: any) {
-    // only length and offset changes here.
-    const object_uuid = data["data"]["object_uuid"];
-    const media_id = data["data"]["media_id"];
-    const offset = data["data"]["offset"];
-    const length = data["data"]["length"] + offset;
-
-    for (const element of this.timeline_items) {
-      if (
-        element.media_id === media_id &&
-        element.object_uuid === object_uuid
-      ) {
-        element.length = length;
-        element.offset = offset;
-      }
-    }
-  }
-
-  public async deleteClip(data: any) {
-    const json_data = data["data"];
-    const object_uuid = data["data"]["object_uuid"];
-    const media_id = data["data"]["media_id"];
-    const type = data["type"];
-
-    for (let i = 0; i < this.timeline_items.length; i++) {
-      const element = this.timeline_items[i];
-      if (
-        element.media_id === media_id &&
-        element.object_uuid === object_uuid
-      ) {
-        this.timeline_items.splice(i, 1);
-        break;
-      }
-    }
-  }
-
-  public async scrubberUpdate(data: any) {
-    console.log(data);
-  }
-
-  public async mute(data: any, isMute: boolean) {
-    this.timeline_items.forEach((element) => {
-      if (element.group === data.data["group"]) {
-        element.should_play = isMute;
-      }
-    });
-  }
-
-  public async addPlayableClip(clip: ClipUI): Promise<void> {
-    this.timeline_items.push(clip);
-  }
-
-  // when given a media id item it will create the clip.
-  // Then the clip will be loaded by the engines, if they come from outside of the loaded scene.
-  public async createClipOffset(
-    media_id: string,
-    object_uuid: string,
-    type: string,
-  ): Promise<void> {
-    // use engine to load based off media id and type animation | transform |
-  }
-
-  // this will update the state of the clips based off uuid easing?
-  public async updatePlayableClip(
-    clip_uuid: string,
-    updates: AnyJson,
-  ): Promise<void> {}
-
-  public async deletePlayableClip(clip_uuid: string): Promise<void> {}
-
-  public async scrub(data: any): Promise<void> {
-    if (this.is_playing) {
-      return;
-    }
-    this.update();
-    this.setScrubberPosition(data["data"]["currentTime"]);
-  }
-
-  public async stepFrame(frames: number) {
-    this.update();
-    this.scrubber_frame_position += frames;
-    this.pushEvent(fromEngineActions.UPDATE_TIME, {
-      currentTime: this.scrubber_frame_position,
-    });
-  }
-
-  public async scrubberDidStop(offset_frame: number) {}
-  // public streaming events into the timeline from
-  public async setScrubberPosition(offset: number) {
-    this.scrubber_frame_position = offset; // in ms
-  }
-
-  // should play from the clip that is closest to the to scrubber
-  public async play(): Promise<void> {
-    console.log(`Starting Timeline`);
-    this.is_playing = true;
-  }
-
-  private async resetScene() {
-    for (const element of this.timeline_items) {
-      if (element.type === ClipType.TRANSFORM) {
-        const object = this.scene.get_object_by_uuid(element.object_uuid);
-        if (object && this.transform_engine.clips[element.object_uuid]) {
-          this.transform_engine.clips[element.object_uuid].reset(object);
-        }
-      } else if (
-        element.type === ClipType.AUDIO &&
-        element.group !== ClipGroup.CHARACTER
-      ) {
-        this.audio_engine.loadClip(element.media_id);
-        this.audio_engine.stopClip(element.media_id);
-      } else if (element.type === ClipType.ANIMATION) {
-        this.animation_engine.clips[
-          element.object_uuid + element.media_id
-        ].stop();
-      } else if (
-        element.type === ClipType.AUDIO &&
-        element.group === ClipGroup.CHARACTER
-      ) {
-        this.lipSync_engine.clips[
-          element.object_uuid + element.media_id
-        ].reset();
-      }
-    }
-  }
-
-  private getEndPoint(): number {
-    let longest = 0;
-    for (const element of this.timeline_items) {
-      if (longest < element.length) {
-        longest = element.length;
-      }
-    }
-    return longest;
-  }
-
-  // called by the editor update loop on each frame
-  public async update(isRendering = false): Promise<boolean> {
-    //if (this.is_playing === false) return; // start and stop
-    this.timeline_limit = this.getEndPoint();
-    if (this.is_playing) {
-      this.current_time += 1;
-      this.pushEvent(fromEngineActions.UPDATE_TIME, {
-        currentTime: this.current_time,
-      });
-      this.scrubber_frame_position = this.current_time;
-    }
-
-    if (this.scrubber_frame_position <= 0) {
-      await this.resetScene();
-    }
-
-    //this.scrubber_frame_position += 1;
-    //2. allow stopping.
-    //3. smallest unit is a frame and it is set by the scene and is in fps, our videos will be 60fps but we can reprocess them using the pipeline.
-    for (const element of this.timeline_items) {
-      if (
-        element.offset <= this.scrubber_frame_position &&
-        this.scrubber_frame_position <= element.length &&
-        element.should_play === true
-      ) {
-        // run async
-        // element.play()
-        // remove the element from the list
-        const object = this.scene.get_object_by_uuid(element.object_uuid);
-        if (element.type === ClipType.TRANSFORM) {
-          if (object && this.transform_engine.clips[element.object_uuid]) {
-            this.transform_engine.clips[element.object_uuid].step(
-              object,
-              element.offset,
-              this.scrubber_frame_position,
-            );
-            element.length =
-              this.transform_engine.clips[element.object_uuid].length;
-          }
-        } else if (
-          element.type === ClipType.AUDIO &&
-          element.group !== ClipGroup.CHARACTER
-        ) {
-          if (this.scrubber_frame_position + 1 >= element.length) {
-            this.audio_engine.stopClip(element.media_id);
-          } else {
-            this.audio_engine.playClip(element.media_id);
-          }
-        } else if (
-          element.type === ClipType.AUDIO &&
-          element.group === ClipGroup.CHARACTER
-        ) {
-          // we will remove this when we know which group it will come from character + audio === lip sync audio.
-          if (this.scrubber_frame_position + 1 >= element.length) {
-            this.lipSync_engine.clips[
-              element.object_uuid + element.media_id
-            ].stop();
-          } else if (object) {
-            await this.lipSync_engine.clips[
-              element.object_uuid + element.media_id
-            ].play(object);
-            this.lipSync_engine.clips[
-              element.object_uuid + element.media_id
-            ].step();
-          }
-        } else if (element.type === ClipType.ANIMATION) {
-          if (object) {
-            await this.animation_engine.clips[
-              object.uuid + element.media_id
-            ].play(object);
-            let fps = 120;
-            if (isRendering) {
-              fps = 60;
-            }
-            this.animation_engine.clips[object.uuid + element.media_id].step(
-              this.scrubber_frame_position / fps, // Double FPS for best result.
-            );
-          }
-        }
-        //this.timelineItems = this.timelineItems.filter(item => item !== element)
-      }
-    }
-
-    if (
-      this.scrubber_frame_position >= this.timeline_limit &&
-      this.is_playing
+    // ensure that the elements are loaded first.
+    constructor(
+        audio_engine: AudioEngine,
+        transform_engine: TransformEngine,
+        lipsync_engine: LipSyncEngine,
+        animation_engine: AnimationEngine,
+        scene: Scene,
     ) {
-      await this.stop();
-      return true;
+        this.timeline_items = [];
+        this.characters = {};
+        this.absolute_end = 60 * 12;
+        this.timeline_limit = 0; // 5 seconds
+
+        this.is_playing = false;
+        this.scrubber_frame_position = 0; // in frames into the tl
+
+        // this will be used to play the audio clips
+        this.audio_engine = audio_engine;
+        this.transform_engine = transform_engine;
+        this.lipSync_engine = lipsync_engine;
+        this.animation_engine = animation_engine;
+
+        this.scene = scene;
+
+        Queue.subscribe(
+            QueueNames.TO_ENGINE,
+            this.handleTimelineActions.bind(this),
+        );
+
+        this.current_time = 0;
     }
 
-    return false;
-  }
+    public async updateUI() {
+        Queue.publish({
+            queueName: QueueNames.FROM_ENGINE,
+            action: fromEngineActions.UPDATE_TIME_LINE,
+            data: this.timeline_items,
+        });
+    }
 
-  private async stop(): Promise<void> {
-    await this.resetScene();
-    this.is_playing = false;
-    console.log(`Stopping Timeline`);
-    this.current_time = 0;
-    this.pushEvent(fromEngineActions.UPDATE_TIME, {
-      currentTime: this.current_time,
-    });
-  }
-}
+    public async pushEvent(action: fromEngineActions, data: any) {
+        this.current_time += 1;
+        Queue.publish({
+            queueName: QueueNames.FROM_ENGINE,
+            action: fromEngineActions.UPDATE_TIME,
+            data: data,
+        });
+    }
+
+    public async handleTimelineActions(data: any) {
+        const action = data["action"];
+        switch (action) {
+            case toEngineActions.ADD_KEYFRAME:
+                await this.addKeyFrame(data);
+                break;
+            case toEngineActions.UPDATE_KEYFRAME:
+                await this.updateKeyFrame(data);
+                break;
+            case toEngineActions.DELETE_KEYFRAME:
+                await this.deleteKeyFrame(data);
+                break;
+            case toEngineActions.ADD_CLIP:
+                await this.addClip(data);
+                break;
+            case toEngineActions.DELETE_CLIP:
+                await this.deleteClip(data);
+                break;
+            case toEngineActions.UPDATE_CLIP:
+                await this.updateClip(data);
+                break;
+            case toEngineActions.UPDATE_TIME:
+                await this.scrub(data);
+                break;
+            case toEngineActions.MUTE:
+                await this.mute(data, false);
+                break;
+            case toEngineActions.UNMUTE:
+                await this.mute(data, true);
+                break;
+            case toEngineActions.ADD_CHARACTER:
+                await this.addCharacter(data);
+                break;
+            case toEngineActions.ADD_OBJECT:
+                await this.addObject(data);
+                break;
+            case toEngineActions.ADD_SHAPE:
+                    await this.addShape(data);
+                    break;
+            default:
+                console.log("Action Not Wired", action);
+        }
+    }
+
+    public async addShape({ data }: { data: MediaItem }) {
+        this.scene.instantiate(data.media_id);
+      }
+
+    public async addCharacter(data: any) {
+        let media_id = data.data['media_id'];
+        let name = data.data['name'];
+        let type = data.data['type'];
+
+        let obj = await this.scene.load_glb(media_id);
+        obj.userData['name'] = name;
+        obj.name = name;
+        let object_uuid = obj.uuid;
+
+        this.characters[object_uuid] = ClipGroup.CHARACTER;
+
+        data.data['object_uuid'] = object_uuid;
+        Queue.publish({
+            queueName: QueueNames.FROM_ENGINE,
+            action: fromEngineActions.UPDATE_CHARACTER_ID,
+            data: data.data,
+        });
+
+        this.addPlayableClip(new ClipUI(data.data['version'], ClipType.FAKE, ClipGroup.CHARACTER, "Default", media_id, obj.uuid, obj.uuid, name, 0, 0, 0));
+    }
+
+    public async addObject(data: any) {
+        let media_id = data.data['media_id'];
+        let name = data.data['name'];
+        let obj = await this.scene.load_glb(media_id);
+        obj.userData['name'] = name;
+        obj.name = name;
+    }
+
+    public async addKeyFrame(data: any) {
+        // KeyFrame Object
+        // version: number;
+        // clip_uuid: string;
+        // group: ClipGroup;
+        // object_uuid?: string;
+        // offset: number;
+        // position: XYZ
+        // rotation: XYZ;
+        // scale: XYZ;
+        // selected?: boolean;
+        let data_json = data['data'];
+        let uuid = data_json['object_uuid'];
+        let keyframe_uuid = data_json['keyframe_uuid'];
+
+        let object_name = this.scene.get_object_by_uuid(uuid)?.name;
+        if (object_name === undefined) {
+            object_name = "undefined"
+        }
+
+        let new_item = this.transform_engine.addFrame(uuid,
+            this.absolute_end,
+            data_json['position'],
+            data_json['rotation'],
+            data_json['scale'],
+            data_json['offset'],
+            data_json['keyframe_uuid']);
+        
+        await this.addPlayableClip(new ClipUI(
+            data_json['version'],
+            ClipType.TRANSFORM,
+            data_json['group'],
+            object_name,
+            "",
+            keyframe_uuid,
+            uuid,
+            object_name,
+            0,
+            this.absolute_end,
+            data_json['offset']))
+
+        this.scene.createPoint(data_json['position'], data_json['keyframe_uuid']);
+    }
+
+    public deleteObject(object_uuid: string) {
+        this.timeline_items = this.timeline_items.filter(element => element.object_uuid !== object_uuid);
+        // Update react land here.
+    }
+
+    public async addClip(data: any) {
+        const object_uuid = data["data"]["object_uuid"];
+        const media_id = data["data"]["media_id"];
+        const name = data["data"]["name"];
+        const group = data["data"]["group"];
+        const version = data["data"]["group"];
+        const type = data["data"]["type"];
+        const offset = data["data"]["offset"];
+        const end_offset = data["data"]["length"] + offset;
+        let object_name = this.scene.get_object_by_uuid(object_uuid)?.name;
+        const clip_uuid = data["data"]['clip_uuid'];
+
+        if (object_name === undefined) {
+            object_name = "Undefined."
+        }
+
+        switch (type) {
+            case "animation":
+                this.animation_engine.load_object(object_uuid, media_id, name);
+                break;
+            case "transform":
+                this.transform_engine.loadObject(object_uuid, data["data"]["length"]);
+                break;
+            case "audio":
+                if (group === "character") {
+                    this.lipSync_engine.load_object(object_uuid, media_id);
+                    // media id for this as well it can be downloaded
+                    this.addPlayableClip(
+                        new ClipUI(
+                            version,
+                            ClipType.AUDIO,
+                            ClipGroup.CHARACTER,
+                            name,
+                            media_id,
+                            clip_uuid,
+                            object_uuid,
+                            object_name,
+                            offset,
+                            end_offset));
+                    return;
+                } else {
+                    this.audio_engine.loadClip(media_id);
+                }
+                break;
+        }
+
+        // media id for this as well it can be downloaded
+        this.addPlayableClip(
+            new ClipUI(
+                version,
+                type,
+                group,
+                name,
+                media_id,
+                clip_uuid,
+                object_uuid,
+                object_name,
+                offset,
+                end_offset,
+            ),
+        );
+    }
+
+    public async deleteKeyFrame(data: any) {
+        let keyframe_uuid = data['data']["keyframe_uuid"];
+        let object_uuid = data['data']['object_uuid'];
+        this.transform_engine.clips[object_uuid].removeKeyframe(keyframe_uuid);
+        this.scene.deletePoint(keyframe_uuid);
+    }
+
+    public async updateKeyFrame(data: any) {
+        let keyframe_uuid = data['data']["keyframe_uuid"];
+        let keyframe_offset = data['data']["offset"];
+        let object_uuid = data['data']['object_uuid'];
+        this.transform_engine.clips[object_uuid].setOffset(keyframe_uuid, keyframe_offset);
+    }
+
+    public async updateClip(data: any) {
+        // only length and offset changes here.
+        let object_uuid = data["data"]["object_uuid"];
+        const media_id = data["data"]["media_id"];
+        const offset = data["data"]["offset"];
+        const length = data["data"]["length"] + offset;
+
+        for (const element of this.timeline_items) {
+            if (element.media_id === media_id && element.object_uuid === object_uuid) {
+                element.length = length;
+                element.offset = offset;
+            }
+        }
+    }
+
+    public async deleteClip(data: any) {
+        let json_data = data['data'];
+        let object_uuid = data["data"]["object_uuid"];
+        let media_id = data["data"]["media_id"];
+        let type = data['type']
+
+        for (let i = 0; i < this.timeline_items.length; i++) {
+            const element = this.timeline_items[i];
+            if (element.media_id === media_id && element.object_uuid ===object_uuid) {
+                this.timeline_items.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    public async scrubberUpdate(data: any) {
+        console.log(data);
+    }
+
+    public async mute(data: any, isMute: boolean) {
+        this.timeline_items.forEach(element => {
+            if (element.group === data.data['group']) {
+                element.should_play = isMute;
+            }
+        });
+    }
+
+    public async addPlayableClip(clip: ClipUI): Promise<void> {
+        this.timeline_items.push(clip);
+    }
+
+    // when given a media id item it will create the clip.
+    // Then the clip will be loaded by the engines, if they come from outside of the loaded scene.
+    public async createClipOffset(
+        media_id: string,
+        object_uuid: string,
+        type: string,
+    ): Promise<void> {
+        // use engine to load based off media id and type animation | transform |
+    }
+
+    // this will update the state of the clips based off uuid easing?
+    public async updatePlayableClip(
+        clip_uuid: string,
+        updates: AnyJson,
+    ): Promise<void> { }
+
+    public async deletePlayableClip(clip_uuid: string): Promise<void> { }
+
+    public async scrub(data: any): Promise<void> {
+        if (this.is_playing) {
+            return;
+        }
+        this.update();
+        this.setScrubberPosition(data["data"]["currentTime"]);
+    }
+
+    public async stepFrame(frames: number) {
+        this.update();
+        this.scrubber_frame_position += frames;
+        this.pushEvent(fromEngineActions.UPDATE_TIME, {
+            currentTime: this.scrubber_frame_position,
+        });
+    }
+
+    public async scrubberDidStop(offset_frame: number) { }
+    // public streaming events into the timeline from
+    public async setScrubberPosition(offset: number) {
+        this.scrubber_frame_position = offset; // in ms
+    }
+
+    // should play from the clip that is closest to the to scrubber
+    public async play(): Promise<void> {
+        console.log(`Starting Timeline`);
+        this.is_playing = true;
+    }
+
+    private async resetScene() {
+        for (const element of this.timeline_items) {
+            if (element.type === ClipType.TRANSFORM) {
+                const object = this.scene.get_object_by_uuid(element.object_uuid);
+                if (object && this.transform_engine.clips[element.object_uuid]) {
+                    this.transform_engine.clips[element.object_uuid].reset(object);
+                }
+            } else if (element.type === ClipType.AUDIO  && element.group !== ClipGroup.CHARACTER) {
+                this.audio_engine.loadClip(element.media_id);
+                this.audio_engine.stopClip(element.media_id);
+            } else if (element.type === ClipType.ANIMATION) {
+                this.animation_engine.clips[element.object_uuid + element.media_id].stop();
+            } else if (element.type === ClipType.AUDIO  && element.group === ClipGroup.CHARACTER) {
+                this.lipSync_engine.clips[element.object_uuid + element.media_id].reset();
+            }
+        }
+    }
+
+    private getEndPoint(): number {
+        let longest = 0;
+        for (const element of this.timeline_items) {
+            if (longest < element.length) {
+                longest = element.length;
+            }
+        }
+        return longest;
+    }
+
+    // called by the editor update loop on each frame
+    public async update(isRendering = false): Promise<boolean> {
+        //if (this.is_playing === false) return; // start and stop
+        this.timeline_limit = this.getEndPoint();
+        if (this.is_playing) {
+            this.current_time += 1;
+            this.pushEvent(fromEngineActions.UPDATE_TIME, {
+                currentTime: this.current_time,
+            });
+            this.scrubber_frame_position = this.current_time;
+        }
+
+        if (this.scrubber_frame_position <= 0) {
+            await this.resetScene();
+        }
+
+        //this.scrubber_frame_position += 1;
+        //2. allow stopping.
+        //3. smallest unit is a frame and it is set by the scene and is in fps, our videos will be 60fps but we can reprocess them using the pipeline.
+        for (const element of this.timeline_items) {
+            if (
+                element.offset <= this.scrubber_frame_position &&
+                this.scrubber_frame_position <= element.length &&
+                element.should_play === true
+            ) {
+                // run async
+                // element.play()
+                // remove the element from the list
+                const object = this.scene.get_object_by_uuid(element.object_uuid);
+                if (element.type === ClipType.TRANSFORM) {
+                    if (object && this.transform_engine.clips[element.object_uuid]) {
+                        this.transform_engine.clips[element.object_uuid].step(
+                            object,
+                            element.offset,
+                            this.scrubber_frame_position,
+                        );
+                        element.length = this.transform_engine.clips[element.object_uuid].length;
+                    }
+                } else if (element.type === ClipType.AUDIO && element.group !== ClipGroup.CHARACTER) {
+                    if (this.scrubber_frame_position + 1 >= element.length) {
+                        this.audio_engine.stopClip(element.media_id);
+                    } else {
+                        this.audio_engine.playClip(element.media_id);
+                    }
+                } else if (element.type === ClipType.AUDIO  && element.group === ClipGroup.CHARACTER) { // we will remove this when we know which group it will come from character + audio === lip sync audio.
+                    if (this.scrubber_frame_position + 1 >= element.length) {
+                        this.lipSync_engine.clips[element.object_uuid + element.media_id].stop();
+                    } else if (object) {
+                        await this.lipSync_engine.clips[element.object_uuid + element.media_id].play(object);
+                        this.lipSync_engine.clips[element.object_uuid + element.media_id].step();
+                    }
+                } else if (element.type === ClipType.ANIMATION) {
+                    if (object) {
+                        await this.animation_engine.clips[object.uuid + element.media_id].play(object);
+                        let fps = 120;
+                        if (isRendering) { fps = 60; }
+                        this.animation_engine.clips[object.uuid + element.media_id].step(
+                            this.scrubber_frame_position / fps, // Double FPS for best result.
+                        );
+                    }
+                }
+                //this.timelineItems = this.timelineItems.filter(item => item !== element)
+            }
+        }
+
+        if (this.scrubber_frame_position >= this.timeline_limit && this.is_playing) {
+            await this.stop();
+            return true;
+        }
+
+        return false;
+    }
+
+    private async stop(): Promise<void> {
+        await this.resetScene();
+        this.is_playing = false;
+        console.log(`Stopping Timeline`);
+        this.current_time = 0;
+        this.pushEvent(fromEngineActions.UPDATE_TIME, {
+            currentTime: this.current_time,
+        });
+    }
+}
\ No newline at end of file

From 0eb1708a71724663d47d2afa9319d582e5ce99f2 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 10 Apr 2024 17:19:47 -0400
Subject: [PATCH 26/27] betterment of some comp/modules, pretty and verbose ui
 for inference jobs dialogue, can clear completed inference jobs

---
 app/components/ButtonIcon.tsx                 |  15 ++-
 app/components/TransitionDialogue.tsx         |   2 +-
 app/modules/ButtonDialogue/ButtonDialogue.tsx |   7 +-
 .../DialogueInference/DialogueInference.tsx   | 122 ++++++++++++++++--
 app/modules/TopBar/AuthButtons.tsx            |   4 +
 .../comps/Controls3D/Controls3D.tsx           |   2 +-
 app/pages/PageEnigma/store/inferenceJobs.ts   |  16 +++
 7 files changed, 149 insertions(+), 19 deletions(-)

diff --git a/app/components/ButtonIcon.tsx b/app/components/ButtonIcon.tsx
index a2679c6c1d..124ca12943 100644
--- a/app/components/ButtonIcon.tsx
+++ b/app/components/ButtonIcon.tsx
@@ -1,23 +1,24 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-interface ButtonIconProps {
-  icon: IconDefinition;
+interface ButtonIconProps extends FontAwesomeIconProps {
+  // icon: IconDefinition;
   onClick: () => void;
   className?: string;
-  fill?: boolean;
+  hoverFill?: boolean;
 }
 
 export const ButtonIcon = ({
   icon,
+  size,
   onClick,
   className : propsClassName,
-  fill = false,
+  hoverFill = false,
 }: ButtonIconProps) => {
   const className = twMerge(
     "flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150",
-    fill
+    hoverFill
       ? "bg-ui-controls-button hover:bg-ui-controls-button/[0.75]"
       : "bg-transparent hover:bg-ui-panel/[0.4]",
     propsClassName,
@@ -25,7 +26,7 @@ export const ButtonIcon = ({
 
   return (
     <button className={className} onClick={onClick}>
-      <FontAwesomeIcon icon={icon} />
+      <FontAwesomeIcon icon={icon} size={size}/>
     </button>
   );
 };
diff --git a/app/components/TransitionDialogue.tsx b/app/components/TransitionDialogue.tsx
index 103cd4147a..73003bd2d4 100644
--- a/app/components/TransitionDialogue.tsx
+++ b/app/components/TransitionDialogue.tsx
@@ -37,7 +37,7 @@ export const TransitionDialogue = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className={twMerge("w-full max-w-md transform rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all", className)}>
+                <Dialog.Panel className={twMerge("w-full max-w-lg transform rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all", className)}>
                   {title && (
                     <Dialog.Title
                       as="h4"
diff --git a/app/modules/ButtonDialogue/ButtonDialogue.tsx b/app/modules/ButtonDialogue/ButtonDialogue.tsx
index 5ef713b2c2..e83bf0c149 100644
--- a/app/modules/ButtonDialogue/ButtonDialogue.tsx
+++ b/app/modules/ButtonDialogue/ButtonDialogue.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from "react";
+import { useState } from "react";
 import { TransitionDialogue } from "~/components/TransitionDialogue";
 import { Button, ButtonPropsI } from "~/components/Button";
 
@@ -8,11 +8,15 @@ interface ButtonDialoguePropsI {
   buttonProps?: UnionedButtonProps;
   confirmButtonProps?: UnionedButtonProps;
   closeButtonProps?: UnionedButtonProps;
+  dialogProps?:{
+    className?: string;
+  };
   title?: string;
   children: React.ReactNode;
 }
 
 export const ButtonDialogue = ({
+  dialogProps = {},
   buttonProps: unionedButtonProps,
   confirmButtonProps,
   closeButtonProps: unionedCloseButtonProps,
@@ -39,6 +43,7 @@ export const ButtonDialogue = ({
         title={title}
         isOpen={isOpen}
         onClose={closeModal}
+        className={dialogProps.className}
       >
         <div className="mt-2">{children}</div>
 
diff --git a/app/modules/DialogueInference/DialogueInference.tsx b/app/modules/DialogueInference/DialogueInference.tsx
index 0b27257eb8..1439dd4d37 100644
--- a/app/modules/DialogueInference/DialogueInference.tsx
+++ b/app/modules/DialogueInference/DialogueInference.tsx
@@ -1,9 +1,110 @@
 import { useSignals } from "@preact/signals-react/runtime";
-import { faClipboard, faClipboardList } from "@fortawesome/pro-solid-svg-icons";
-import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
-import { ButtonDialogue } from "../ButtonDialogue";
-import { H4, P } from "~/components";
+import {
+  faClipboard,
+  faClipboardList,
+  faCircleCheck,
+  faCircleExclamation,
+  faLoader,
+  faSpinner,
+  faSquareXmark,
+} from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { deleteInferenceJob, inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
+import { InferenceJob } from "~/pages/PageEnigma/models";
+
+import { ButtonDialogue } from "../ButtonDialogue";
+import { ButtonIcon, H4,H6,P } from "~/components";
+import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
+
+const printJobType = (jobType : string)=>{
+  switch (jobType){
+    case "generic":
+      return "Text to Speech";
+    default:
+      return "Unknown";
+  }
+};
+
+const printJobStatus = (jobStatus : string)=>{
+  switch (jobStatus){
+    case JobState.PENDING:
+      return "Adding to the queue.";
+    case JobState.STARTED:
+      return "Processing, please wait...";
+    case JobState.COMPLETE_SUCCESS:
+      return "Completed! See Audio Panel for the result. file."
+    default:
+      return "Unknown Status";
+  }
+};
+
+const JobStatusIcon = ({jobStatus} : {jobStatus:string})=>{
+  switch (jobStatus){
+    case JobState.PENDING:{
+      return(
+        <FontAwesomeIcon
+          className="col-span-1 animate-spin"
+          icon={faSpinner}
+          size="2xl"
+        />
+      );
+    }
+    case JobState.STARTED:{
+      return(
+          <FontAwesomeIcon
+          className="col-span-1 animate-spin"
+          icon={faLoader}
+          size="2xl"
+        />
+      );
+    }
+    case JobState.COMPLETE_SUCCESS:{
+      return(
+        <FontAwesomeIcon
+          className="col-span-1"
+          icon={faCircleCheck}
+          size="2xl"
+        />
+      );
+    }
+    default:{
+      return(
+        <FontAwesomeIcon
+          className="col-span-1"
+          icon={faCircleExclamation}
+          size="2xl"
+        />
+      );
+    }
+  }
+};
+
+const InferenceItem = ({job}:{job:InferenceJob}) => {
+  // console.log(job);
+  return(
+    <li
+      className="grid grid-cols-12 gap-2 items-center bg-brand-secondary rounded-md py-2 px-4"
+    >
+      <JobStatusIcon jobStatus={job.job_status} />
+      <div className="col-span-10 flex flex-col">
+          <H4>{printJobType(job.job_type)}</H4>
+          <H6>{printJobStatus(job.job_status)} </H6>
+      </div>
+      {job.job_status === JobState.COMPLETE_SUCCESS &&
+        <div className="col-span-1 flex justify-end">
+          <ButtonIcon
+            icon={faSquareXmark}
+            size="2xl"
+            onClick={()=>{
+              deleteInferenceJob(job);
+            }}
+          />
+        </div>
+      }
+    </li>
+  );
+};
 
 export const DialogueInference = () =>{
   useSignals();
@@ -13,23 +114,26 @@ export const DialogueInference = () =>{
   return(
     <ButtonDialogue
       title="My Jobs"
+      dialogProps={{
+        className:"w-1/2 max-w-full"
+      }}
       buttonProps={{
         icon: buttonIcon,
         variant: "secondary",
-        label: "My Jobs"
+        label: "My Jobs",
+        className:( inferenceJobs.value.length === 0 ? "invisible" : "visible")
       }}
     >
-      <H4>List :-</H4>
       {inferenceJobs.value.length > 0 &&
-        <ul>
+        <ul className="flex flex-col gap-2">
           {inferenceJobs.value.map(job=>
-            <li key={job.job_id}>{job.job_type}: {job.job_status} : {job.job_id}</li>
+            <InferenceItem key={job.job_id} job={job} />
           )}
         </ul>
       }
       {
         inferenceJobs.value.length === 0 && 
-        <P>no inference jobs</P>
+        <P>You currently have no running proccesses.</P>
       }
     </ButtonDialogue>
   );
diff --git a/app/modules/TopBar/AuthButtons.tsx b/app/modules/TopBar/AuthButtons.tsx
index b009f98b82..1f7474667a 100644
--- a/app/modules/TopBar/AuthButtons.tsx
+++ b/app/modules/TopBar/AuthButtons.tsx
@@ -1,10 +1,14 @@
 import { useContext, } from "react";
+import { useSignals } from "@preact/signals-react/runtime";
 
 import { AuthenticationContext } from "~/contexts/Authentication";
 import { Button, ButtonLink } from "~/components";
 import { DialogueInference } from "../DialogueInference";
+import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
 
 export const AuthButtons = ()=>{
+  useSignals();
+
   const {authState, logout} = useContext(AuthenticationContext);
   const handleLogout = ()=>{
     if(logout)logout();
diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
index a5ad366e1f..fed4fa9829 100644
--- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
+++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
@@ -66,7 +66,7 @@ export const Controls3D = () => {
       <div className="flex justify-center">
         <div className="rounded-b-lg border-x border-b border-ui-panel-border bg-ui-controls p-2 text-white">
           <div className="flex items-center justify-center gap-2">
-            <ButtonIcon icon={faPlus} onClick={handlePlus} fill={true} />
+            <ButtonIcon icon={faPlus} onClick={handlePlus} hoverFill={true} />
 
             <span className="h-4 w-0 border-l border-white/[0.15]" />
 
diff --git a/app/pages/PageEnigma/store/inferenceJobs.ts b/app/pages/PageEnigma/store/inferenceJobs.ts
index d9bae726bd..3f79a68714 100644
--- a/app/pages/PageEnigma/store/inferenceJobs.ts
+++ b/app/pages/PageEnigma/store/inferenceJobs.ts
@@ -26,4 +26,20 @@ export function updateInferenceJob(
     }
   })
   inferenceJobs.value = [...existingInferenceJobs];
+}
+
+export function deleteInferenceJob(
+  deletableJob: InferenceJob){
+  console.log('delete')
+  let newList:InferenceJob[] = []
+  inferenceJobs.value.forEach(job=>{
+    if(job.job_id !== deletableJob.job_id) {
+      newList.push(job);
+    } else {
+      // do nothing
+    }
+  });
+  console.log(newList);
+  inferenceJobs.value = [...newList];
+
 }
\ No newline at end of file

From c3f25faaba98458ab67da7cee13deaee4d8a6789 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 10 Apr 2024 18:03:51 -0400
Subject: [PATCH 27/27] patching timeline.ts

---
 app/pages/PageEnigma/js/timeline.ts | 979 +++++++++++++++-------------
 1 file changed, 523 insertions(+), 456 deletions(-)

diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index a1fe8a693d..74d910ae28 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -13,494 +13,561 @@ import { toEngineActions } from "../Queue/toEngineActions";
 import { fromEngineActions } from "../Queue/fromEngineActions";
 import { ClipGroup, ClipType } from "~/pages/PageEnigma/models/track";
 import { MediaItem } from "~/pages/PageEnigma/models";
+import Editor from "~/pages/PageEnigma/js/editor";
+
 // Every object uuid / entity has a track.
 export class TimelineDataState {
-    timeline_items: ClipUI[];
-    scrubber_frame_position: number;
-    constructor(
-        timeline_items: ClipUI[] = [],
-        scrubber_frame_position: number = 0,
-    ) {
-        this.timeline_items = timeline_items;
-        this.scrubber_frame_position = scrubber_frame_position;
-    }
+  timeline_items: ClipUI[];
+  scrubber_frame_position: number;
+  constructor(
+    timeline_items: ClipUI[] = [],
+    scrubber_frame_position: number = 0,
+  ) {
+    this.timeline_items = timeline_items;
+    this.scrubber_frame_position = scrubber_frame_position;
+  }
 }
 
 export class TimeLine {
-    timeline_items: ClipUI[];
+  editorEngine: Editor;
+  timeline_items: ClipUI[];
 
-    timeline_limit: number;
-    absolute_end: number;
-    scrubber_frame_position: number;
-    is_playing: boolean;
+  timeline_limit: number;
+  absolute_end: number;
+  scrubber_frame_position: number;
+  is_playing: boolean;
 
-    // plays audio
-    audio_engine: AudioEngine;
-    // key framing
-    transform_engine: TransformEngine;
-    // animation engine
-    animation_engine: AnimationEngine;
-    // lip sync engine
-    lipSync_engine: LipSyncEngine;
-    characters: { [key: string]: ClipGroup };
+  // plays audio
+  audio_engine: AudioEngine;
+  // key framing
+  transform_engine: TransformEngine;
+  // animation engine
+  animation_engine: AnimationEngine;
+  // lip sync engine
+  lipSync_engine: LipSyncEngine;
+  characters: { [key: string]: ClipGroup };
 
-    scene: Scene;
+  scene: Scene;
 
-    current_time: number;
+  current_time: number;
 
-    // ensure that the elements are loaded first.
-    constructor(
-        audio_engine: AudioEngine,
-        transform_engine: TransformEngine,
-        lipsync_engine: LipSyncEngine,
-        animation_engine: AnimationEngine,
-        scene: Scene,
-    ) {
-        this.timeline_items = [];
-        this.characters = {};
-        this.absolute_end = 60 * 12;
-        this.timeline_limit = 0; // 5 seconds
+  // ensure that the elements are loaded first.
+  constructor(
+    editor: Editor,
+    audio_engine: AudioEngine,
+    transform_engine: TransformEngine,
+    lipsync_engine: LipSyncEngine,
+    animation_engine: AnimationEngine,
+    scene: Scene,
+  ) {
+    this.editorEngine = editor;
+    this.timeline_items = [];
+    this.characters = {};
+    this.absolute_end = 60 * 12;
+    this.timeline_limit = 0; // 5 seconds
 
-        this.is_playing = false;
-        this.scrubber_frame_position = 0; // in frames into the tl
+    this.is_playing = false;
+    this.scrubber_frame_position = 0; // in frames into the tl
 
-        // this will be used to play the audio clips
-        this.audio_engine = audio_engine;
-        this.transform_engine = transform_engine;
-        this.lipSync_engine = lipsync_engine;
-        this.animation_engine = animation_engine;
+    // this will be used to play the audio clips
+    this.audio_engine = audio_engine;
+    this.transform_engine = transform_engine;
+    this.lipSync_engine = lipsync_engine;
+    this.animation_engine = animation_engine;
 
-        this.scene = scene;
+    this.scene = scene;
 
-        Queue.subscribe(
-            QueueNames.TO_ENGINE,
-            this.handleTimelineActions.bind(this),
-        );
+    Queue.subscribe(
+      QueueNames.TO_ENGINE,
+      this.handleTimelineActions.bind(this),
+    );
 
-        this.current_time = 0;
+    this.current_time = 0;
+  }
+
+  public async updateUI() {
+    Queue.publish({
+      queueName: QueueNames.FROM_ENGINE,
+      action: fromEngineActions.UPDATE_TIME_LINE,
+      data: this.timeline_items,
+    });
+  }
+
+  public async pushEvent(action: fromEngineActions, data: any) {
+    this.current_time += 1;
+    Queue.publish({
+      queueName: QueueNames.FROM_ENGINE,
+      action: fromEngineActions.UPDATE_TIME,
+      data: data,
+    });
+  }
+
+  public async handleTimelineActions(data: any) {
+    const action = data["action"];
+    switch (action) {
+      case toEngineActions.ADD_KEYFRAME:
+        await this.addKeyFrame(data);
+        break;
+      case toEngineActions.UPDATE_KEYFRAME:
+        await this.updateKeyFrame(data);
+        break;
+      case toEngineActions.DELETE_KEYFRAME:
+        await this.deleteKeyFrame(data);
+        break;
+      case toEngineActions.ADD_CLIP:
+        await this.addClip(data);
+        break;
+      case toEngineActions.DELETE_CLIP:
+        await this.deleteClip(data);
+        break;
+      case toEngineActions.UPDATE_CLIP:
+        await this.updateClip(data);
+        break;
+      case toEngineActions.UPDATE_TIME:
+        await this.scrub(data);
+        break;
+      case toEngineActions.MUTE:
+        await this.mute(data, false);
+        break;
+      case toEngineActions.UNMUTE:
+        await this.mute(data, true);
+        break;
+      case toEngineActions.ADD_CHARACTER:
+        await this.addCharacter(data);
+        break;
+      case toEngineActions.ADD_OBJECT:
+        await this.addObject(data);
+        break;
+      case toEngineActions.ADD_SHAPE:
+        await this.addShape(data);
+        break;
+      default:
+        console.log("Action Not Wired", action);
+    }
+  }
+
+  public async addCharacter(data: { data: MediaItem }) {
+    const media_id = data.data.media_id;
+    const name = data.data.name;
+
+    const obj = await this.scene.load_glb(media_id);
+    obj.userData["name"] = name;
+    obj.name = name;
+    const object_uuid = obj.uuid;
+
+    this.characters[object_uuid] = ClipGroup.CHARACTER;
+
+    data.data["object_uuid"] = object_uuid;
+    Queue.publish({
+      queueName: QueueNames.FROM_ENGINE,
+      action: fromEngineActions.UPDATE_CHARACTER_ID,
+      data: data.data,
+    });
+
+    this.addPlayableClip(
+      new ClipUI(
+        data.data["version"],
+        ClipType.FAKE,
+        ClipGroup.CHARACTER,
+        "Default",
+        media_id,
+        obj.uuid,
+        obj.uuid,
+        name,
+        0,
+        0,
+        0,
+      ),
+    );
+  }
+
+  public async addObject(data: { data: MediaItem }) {
+    const media_id = data.data.media_id;
+    const name = data.data.name;
+    const obj = await this.scene.load_glb(media_id);
+    obj.userData["name"] = name;
+    obj.name = name;
+  }
+
+  public async addShape({ data }: { data: MediaItem }) {
+    this.editorEngine.create_parim(data.media_id);
+  }
+
+  public async addKeyFrame(data: any) {
+    // KeyFrame Object
+    // version: number;
+    // clip_uuid: string;
+    // group: ClipGroup;
+    // object_uuid?: string;
+    // offset: number;
+    // position: XYZ
+    // rotation: XYZ;
+    // scale: XYZ;
+    // selected?: boolean;
+    const data_json = data["data"];
+    const uuid = data_json["object_uuid"];
+    const keyframe_uuid = data_json["keyframe_uuid"];
+
+    let object_name = this.scene.get_object_by_uuid(uuid)?.name;
+    if (object_name === undefined) {
+      object_name = "undefined";
     }
 
-    public async updateUI() {
-        Queue.publish({
-            queueName: QueueNames.FROM_ENGINE,
-            action: fromEngineActions.UPDATE_TIME_LINE,
-            data: this.timeline_items,
-        });
+    const new_item = this.transform_engine.addFrame(
+      uuid,
+      this.absolute_end,
+      data_json["position"],
+      data_json["rotation"],
+      data_json["scale"],
+      data_json["offset"],
+      data_json["keyframe_uuid"],
+    );
+
+    await this.addPlayableClip(
+      new ClipUI(
+        data_json["version"],
+        ClipType.TRANSFORM,
+        data_json["group"],
+        object_name,
+        "",
+        keyframe_uuid,
+        uuid,
+        object_name,
+        0,
+        this.absolute_end,
+        data_json["offset"],
+      ),
+    );
+
+    this.scene.createPoint(data_json["position"], data_json["keyframe_uuid"]);
+  }
+
+  public deleteObject(object_uuid: string) {
+    this.timeline_items = this.timeline_items.filter(
+      (element) => element.object_uuid !== object_uuid,
+    );
+    // Update react land here.
+  }
+
+  public async addClip(data: any) {
+    const object_uuid = data["data"]["object_uuid"];
+    const media_id = data["data"]["media_id"];
+    const name = data["data"]["name"];
+    const group = data["data"]["group"];
+    const version = data["data"]["group"];
+    const type = data["data"]["type"];
+    const offset = data["data"]["offset"];
+    const end_offset = data["data"]["length"] + offset;
+    let object_name = this.scene.get_object_by_uuid(object_uuid)?.name;
+    const clip_uuid = data["data"]["clip_uuid"];
+
+    if (object_name === undefined) {
+      object_name = "Undefined.";
     }
 
-    public async pushEvent(action: fromEngineActions, data: any) {
-        this.current_time += 1;
-        Queue.publish({
-            queueName: QueueNames.FROM_ENGINE,
-            action: fromEngineActions.UPDATE_TIME,
-            data: data,
-        });
-    }
-
-    public async handleTimelineActions(data: any) {
-        const action = data["action"];
-        switch (action) {
-            case toEngineActions.ADD_KEYFRAME:
-                await this.addKeyFrame(data);
-                break;
-            case toEngineActions.UPDATE_KEYFRAME:
-                await this.updateKeyFrame(data);
-                break;
-            case toEngineActions.DELETE_KEYFRAME:
-                await this.deleteKeyFrame(data);
-                break;
-            case toEngineActions.ADD_CLIP:
-                await this.addClip(data);
-                break;
-            case toEngineActions.DELETE_CLIP:
-                await this.deleteClip(data);
-                break;
-            case toEngineActions.UPDATE_CLIP:
-                await this.updateClip(data);
-                break;
-            case toEngineActions.UPDATE_TIME:
-                await this.scrub(data);
-                break;
-            case toEngineActions.MUTE:
-                await this.mute(data, false);
-                break;
-            case toEngineActions.UNMUTE:
-                await this.mute(data, true);
-                break;
-            case toEngineActions.ADD_CHARACTER:
-                await this.addCharacter(data);
-                break;
-            case toEngineActions.ADD_OBJECT:
-                await this.addObject(data);
-                break;
-            case toEngineActions.ADD_SHAPE:
-                    await this.addShape(data);
-                    break;
-            default:
-                console.log("Action Not Wired", action);
-        }
-    }
-
-    public async addShape({ data }: { data: MediaItem }) {
-        this.scene.instantiate(data.media_id);
-      }
-
-    public async addCharacter(data: any) {
-        let media_id = data.data['media_id'];
-        let name = data.data['name'];
-        let type = data.data['type'];
-
-        let obj = await this.scene.load_glb(media_id);
-        obj.userData['name'] = name;
-        obj.name = name;
-        let object_uuid = obj.uuid;
-
-        this.characters[object_uuid] = ClipGroup.CHARACTER;
-
-        data.data['object_uuid'] = object_uuid;
-        Queue.publish({
-            queueName: QueueNames.FROM_ENGINE,
-            action: fromEngineActions.UPDATE_CHARACTER_ID,
-            data: data.data,
-        });
-
-        this.addPlayableClip(new ClipUI(data.data['version'], ClipType.FAKE, ClipGroup.CHARACTER, "Default", media_id, obj.uuid, obj.uuid, name, 0, 0, 0));
-    }
-
-    public async addObject(data: any) {
-        let media_id = data.data['media_id'];
-        let name = data.data['name'];
-        let obj = await this.scene.load_glb(media_id);
-        obj.userData['name'] = name;
-        obj.name = name;
-    }
-
-    public async addKeyFrame(data: any) {
-        // KeyFrame Object
-        // version: number;
-        // clip_uuid: string;
-        // group: ClipGroup;
-        // object_uuid?: string;
-        // offset: number;
-        // position: XYZ
-        // rotation: XYZ;
-        // scale: XYZ;
-        // selected?: boolean;
-        let data_json = data['data'];
-        let uuid = data_json['object_uuid'];
-        let keyframe_uuid = data_json['keyframe_uuid'];
-
-        let object_name = this.scene.get_object_by_uuid(uuid)?.name;
-        if (object_name === undefined) {
-            object_name = "undefined"
-        }
-
-        let new_item = this.transform_engine.addFrame(uuid,
-            this.absolute_end,
-            data_json['position'],
-            data_json['rotation'],
-            data_json['scale'],
-            data_json['offset'],
-            data_json['keyframe_uuid']);
-        
-        await this.addPlayableClip(new ClipUI(
-            data_json['version'],
-            ClipType.TRANSFORM,
-            data_json['group'],
-            object_name,
-            "",
-            keyframe_uuid,
-            uuid,
-            object_name,
-            0,
-            this.absolute_end,
-            data_json['offset']))
-
-        this.scene.createPoint(data_json['position'], data_json['keyframe_uuid']);
-    }
-
-    public deleteObject(object_uuid: string) {
-        this.timeline_items = this.timeline_items.filter(element => element.object_uuid !== object_uuid);
-        // Update react land here.
-    }
-
-    public async addClip(data: any) {
-        const object_uuid = data["data"]["object_uuid"];
-        const media_id = data["data"]["media_id"];
-        const name = data["data"]["name"];
-        const group = data["data"]["group"];
-        const version = data["data"]["group"];
-        const type = data["data"]["type"];
-        const offset = data["data"]["offset"];
-        const end_offset = data["data"]["length"] + offset;
-        let object_name = this.scene.get_object_by_uuid(object_uuid)?.name;
-        const clip_uuid = data["data"]['clip_uuid'];
-
-        if (object_name === undefined) {
-            object_name = "Undefined."
-        }
-
-        switch (type) {
-            case "animation":
-                this.animation_engine.load_object(object_uuid, media_id, name);
-                break;
-            case "transform":
-                this.transform_engine.loadObject(object_uuid, data["data"]["length"]);
-                break;
-            case "audio":
-                if (group === "character") {
-                    this.lipSync_engine.load_object(object_uuid, media_id);
-                    // media id for this as well it can be downloaded
-                    this.addPlayableClip(
-                        new ClipUI(
-                            version,
-                            ClipType.AUDIO,
-                            ClipGroup.CHARACTER,
-                            name,
-                            media_id,
-                            clip_uuid,
-                            object_uuid,
-                            object_name,
-                            offset,
-                            end_offset));
-                    return;
-                } else {
-                    this.audio_engine.loadClip(media_id);
-                }
-                break;
-        }
-
-        // media id for this as well it can be downloaded
-        this.addPlayableClip(
+    switch (type) {
+      case "animation":
+        this.animation_engine.load_object(object_uuid, media_id, name);
+        break;
+      case "transform":
+        this.transform_engine.loadObject(object_uuid, data["data"]["length"]);
+        break;
+      case "audio":
+        if (group === "character") {
+          this.lipSync_engine.load_object(object_uuid, media_id);
+          // media id for this as well it can be downloaded
+          this.addPlayableClip(
             new ClipUI(
-                version,
-                type,
-                group,
-                name,
-                media_id,
-                clip_uuid,
-                object_uuid,
-                object_name,
-                offset,
-                end_offset,
+              version,
+              ClipType.AUDIO,
+              ClipGroup.CHARACTER,
+              name,
+              media_id,
+              clip_uuid,
+              object_uuid,
+              object_name,
+              offset,
+              end_offset,
             ),
-        );
+          );
+          return;
+        } else {
+          this.audio_engine.loadClip(media_id);
+        }
+        break;
     }
 
-    public async deleteKeyFrame(data: any) {
-        let keyframe_uuid = data['data']["keyframe_uuid"];
-        let object_uuid = data['data']['object_uuid'];
-        this.transform_engine.clips[object_uuid].removeKeyframe(keyframe_uuid);
-        this.scene.deletePoint(keyframe_uuid);
+    // media id for this as well it can be downloaded
+    this.addPlayableClip(
+      new ClipUI(
+        version,
+        type,
+        group,
+        name,
+        media_id,
+        clip_uuid,
+        object_uuid,
+        object_name,
+        offset,
+        end_offset,
+      ),
+    );
+  }
+
+  public async deleteKeyFrame(data: any) {
+    const keyframe_uuid = data["data"]["keyframe_uuid"];
+    const object_uuid = data["data"]["object_uuid"];
+    this.transform_engine.clips[object_uuid].removeKeyframe(keyframe_uuid);
+    this.scene.deletePoint(keyframe_uuid);
+  }
+
+  public async updateKeyFrame(data: any) {
+    const keyframe_uuid = data["data"]["keyframe_uuid"];
+    const keyframe_offset = data["data"]["offset"];
+    const object_uuid = data["data"]["object_uuid"];
+    this.transform_engine.clips[object_uuid].setOffset(
+      keyframe_uuid,
+      keyframe_offset,
+    );
+  }
+
+  public async updateClip(data: any) {
+    // only length and offset changes here.
+    const object_uuid = data["data"]["object_uuid"];
+    const media_id = data["data"]["media_id"];
+    const offset = data["data"]["offset"];
+    const length = data["data"]["length"] + offset;
+
+    for (const element of this.timeline_items) {
+      if (
+        element.media_id === media_id &&
+        element.object_uuid === object_uuid
+      ) {
+        element.length = length;
+        element.offset = offset;
+      }
+    }
+  }
+
+  public async deleteClip(data: any) {
+    const json_data = data["data"];
+    const object_uuid = data["data"]["object_uuid"];
+    const media_id = data["data"]["media_id"];
+    const type = data["type"];
+
+    for (let i = 0; i < this.timeline_items.length; i++) {
+      const element = this.timeline_items[i];
+      if (
+        element.media_id === media_id &&
+        element.object_uuid === object_uuid
+      ) {
+        this.timeline_items.splice(i, 1);
+        break;
+      }
+    }
+  }
+
+  public async scrubberUpdate(data: any) {
+    console.log(data);
+  }
+
+  public async mute(data: any, isMute: boolean) {
+    this.timeline_items.forEach((element) => {
+      if (element.group === data.data["group"]) {
+        element.should_play = isMute;
+      }
+    });
+  }
+
+  public async addPlayableClip(clip: ClipUI): Promise<void> {
+    this.timeline_items.push(clip);
+  }
+
+  // when given a media id item it will create the clip.
+  // Then the clip will be loaded by the engines, if they come from outside of the loaded scene.
+  public async createClipOffset(
+    media_id: string,
+    object_uuid: string,
+    type: string,
+  ): Promise<void> {
+    // use engine to load based off media id and type animation | transform |
+  }
+
+  // this will update the state of the clips based off uuid easing?
+  public async updatePlayableClip(
+    clip_uuid: string,
+    updates: AnyJson,
+  ): Promise<void> {}
+
+  public async deletePlayableClip(clip_uuid: string): Promise<void> {}
+
+  public async scrub(data: any): Promise<void> {
+    if (this.is_playing) {
+      return;
+    }
+    this.update();
+    this.setScrubberPosition(data["data"]["currentTime"]);
+  }
+
+  public async stepFrame(frames: number) {
+    this.update();
+    this.scrubber_frame_position += frames;
+    this.pushEvent(fromEngineActions.UPDATE_TIME, {
+      currentTime: this.scrubber_frame_position,
+    });
+  }
+
+  public async scrubberDidStop(offset_frame: number) {}
+  // public streaming events into the timeline from
+  public async setScrubberPosition(offset: number) {
+    this.scrubber_frame_position = offset; // in ms
+  }
+
+  // should play from the clip that is closest to the to scrubber
+  public async play(): Promise<void> {
+    console.log(`Starting Timeline`);
+    this.is_playing = true;
+  }
+
+  private async resetScene() {
+    for (const element of this.timeline_items) {
+      if (element.type === ClipType.TRANSFORM) {
+        const object = this.scene.get_object_by_uuid(element.object_uuid);
+        if (object && this.transform_engine.clips[element.object_uuid]) {
+          this.transform_engine.clips[element.object_uuid].reset(object);
+        }
+      } else if (
+        element.type === ClipType.AUDIO &&
+        element.group !== ClipGroup.CHARACTER
+      ) {
+        this.audio_engine.loadClip(element.media_id);
+        this.audio_engine.stopClip(element.media_id);
+      } else if (element.type === ClipType.ANIMATION) {
+        this.animation_engine.clips[
+          element.object_uuid + element.media_id
+        ].stop();
+      } else if (
+        element.type === ClipType.AUDIO &&
+        element.group === ClipGroup.CHARACTER
+      ) {
+        this.lipSync_engine.clips[
+          element.object_uuid + element.media_id
+        ].reset();
+      }
+    }
+  }
+
+  private getEndPoint(): number {
+    let longest = 0;
+    for (const element of this.timeline_items) {
+      if (longest < element.length) {
+        longest = element.length;
+      }
+    }
+    return longest;
+  }
+
+  // called by the editor update loop on each frame
+  public async update(isRendering = false): Promise<boolean> {
+    //if (this.is_playing === false) return; // start and stop
+    this.timeline_limit = this.getEndPoint();
+    if (this.is_playing) {
+      this.current_time += 1;
+      this.pushEvent(fromEngineActions.UPDATE_TIME, {
+        currentTime: this.current_time,
+      });
+      this.scrubber_frame_position = this.current_time;
     }
 
-    public async updateKeyFrame(data: any) {
-        let keyframe_uuid = data['data']["keyframe_uuid"];
-        let keyframe_offset = data['data']["offset"];
-        let object_uuid = data['data']['object_uuid'];
-        this.transform_engine.clips[object_uuid].setOffset(keyframe_uuid, keyframe_offset);
+    if (this.scrubber_frame_position <= 0) {
+      await this.resetScene();
     }
 
-    public async updateClip(data: any) {
-        // only length and offset changes here.
-        let object_uuid = data["data"]["object_uuid"];
-        const media_id = data["data"]["media_id"];
-        const offset = data["data"]["offset"];
-        const length = data["data"]["length"] + offset;
-
-        for (const element of this.timeline_items) {
-            if (element.media_id === media_id && element.object_uuid === object_uuid) {
-                element.length = length;
-                element.offset = offset;
+    //this.scrubber_frame_position += 1;
+    //2. allow stopping.
+    //3. smallest unit is a frame and it is set by the scene and is in fps, our videos will be 60fps but we can reprocess them using the pipeline.
+    for (const element of this.timeline_items) {
+      if (
+        element.offset <= this.scrubber_frame_position &&
+        this.scrubber_frame_position <= element.length &&
+        element.should_play === true
+      ) {
+        // run async
+        // element.play()
+        // remove the element from the list
+        const object = this.scene.get_object_by_uuid(element.object_uuid);
+        if (element.type === ClipType.TRANSFORM) {
+          if (object && this.transform_engine.clips[element.object_uuid]) {
+            this.transform_engine.clips[element.object_uuid].step(
+              object,
+              element.offset,
+              this.scrubber_frame_position,
+            );
+            element.length =
+              this.transform_engine.clips[element.object_uuid].length;
+          }
+        } else if (
+          element.type === ClipType.AUDIO &&
+          element.group !== ClipGroup.CHARACTER
+        ) {
+          if (this.scrubber_frame_position + 1 >= element.length) {
+            this.audio_engine.stopClip(element.media_id);
+          } else {
+            this.audio_engine.playClip(element.media_id);
+          }
+        } else if (
+          element.type === ClipType.AUDIO &&
+          element.group === ClipGroup.CHARACTER
+        ) {
+          // we will remove this when we know which group it will come from character + audio === lip sync audio.
+          if (this.scrubber_frame_position + 1 >= element.length) {
+            this.lipSync_engine.clips[
+              element.object_uuid + element.media_id
+            ].stop();
+          } else if (object) {
+            await this.lipSync_engine.clips[
+              element.object_uuid + element.media_id
+            ].play(object);
+            this.lipSync_engine.clips[
+              element.object_uuid + element.media_id
+            ].step();
+          }
+        } else if (element.type === ClipType.ANIMATION) {
+          if (object) {
+            await this.animation_engine.clips[
+              object.uuid + element.media_id
+            ].play(object);
+            let fps = 120;
+            if (isRendering) {
+              fps = 60;
             }
+            this.animation_engine.clips[object.uuid + element.media_id].step(
+              this.scrubber_frame_position / fps, // Double FPS for best result.
+            );
+          }
         }
+        //this.timelineItems = this.timelineItems.filter(item => item !== element)
+      }
     }
 
-    public async deleteClip(data: any) {
-        let json_data = data['data'];
-        let object_uuid = data["data"]["object_uuid"];
-        let media_id = data["data"]["media_id"];
-        let type = data['type']
-
-        for (let i = 0; i < this.timeline_items.length; i++) {
-            const element = this.timeline_items[i];
-            if (element.media_id === media_id && element.object_uuid ===object_uuid) {
-                this.timeline_items.splice(i, 1);
-                break;
-            }
-        }
+    if (
+      this.scrubber_frame_position >= this.timeline_limit &&
+      this.is_playing
+    ) {
+      await this.stop();
+      return true;
     }
 
-    public async scrubberUpdate(data: any) {
-        console.log(data);
-    }
+    return false;
+  }
 
-    public async mute(data: any, isMute: boolean) {
-        this.timeline_items.forEach(element => {
-            if (element.group === data.data['group']) {
-                element.should_play = isMute;
-            }
-        });
-    }
-
-    public async addPlayableClip(clip: ClipUI): Promise<void> {
-        this.timeline_items.push(clip);
-    }
-
-    // when given a media id item it will create the clip.
-    // Then the clip will be loaded by the engines, if they come from outside of the loaded scene.
-    public async createClipOffset(
-        media_id: string,
-        object_uuid: string,
-        type: string,
-    ): Promise<void> {
-        // use engine to load based off media id and type animation | transform |
-    }
-
-    // this will update the state of the clips based off uuid easing?
-    public async updatePlayableClip(
-        clip_uuid: string,
-        updates: AnyJson,
-    ): Promise<void> { }
-
-    public async deletePlayableClip(clip_uuid: string): Promise<void> { }
-
-    public async scrub(data: any): Promise<void> {
-        if (this.is_playing) {
-            return;
-        }
-        this.update();
-        this.setScrubberPosition(data["data"]["currentTime"]);
-    }
-
-    public async stepFrame(frames: number) {
-        this.update();
-        this.scrubber_frame_position += frames;
-        this.pushEvent(fromEngineActions.UPDATE_TIME, {
-            currentTime: this.scrubber_frame_position,
-        });
-    }
-
-    public async scrubberDidStop(offset_frame: number) { }
-    // public streaming events into the timeline from
-    public async setScrubberPosition(offset: number) {
-        this.scrubber_frame_position = offset; // in ms
-    }
-
-    // should play from the clip that is closest to the to scrubber
-    public async play(): Promise<void> {
-        console.log(`Starting Timeline`);
-        this.is_playing = true;
-    }
-
-    private async resetScene() {
-        for (const element of this.timeline_items) {
-            if (element.type === ClipType.TRANSFORM) {
-                const object = this.scene.get_object_by_uuid(element.object_uuid);
-                if (object && this.transform_engine.clips[element.object_uuid]) {
-                    this.transform_engine.clips[element.object_uuid].reset(object);
-                }
-            } else if (element.type === ClipType.AUDIO  && element.group !== ClipGroup.CHARACTER) {
-                this.audio_engine.loadClip(element.media_id);
-                this.audio_engine.stopClip(element.media_id);
-            } else if (element.type === ClipType.ANIMATION) {
-                this.animation_engine.clips[element.object_uuid + element.media_id].stop();
-            } else if (element.type === ClipType.AUDIO  && element.group === ClipGroup.CHARACTER) {
-                this.lipSync_engine.clips[element.object_uuid + element.media_id].reset();
-            }
-        }
-    }
-
-    private getEndPoint(): number {
-        let longest = 0;
-        for (const element of this.timeline_items) {
-            if (longest < element.length) {
-                longest = element.length;
-            }
-        }
-        return longest;
-    }
-
-    // called by the editor update loop on each frame
-    public async update(isRendering = false): Promise<boolean> {
-        //if (this.is_playing === false) return; // start and stop
-        this.timeline_limit = this.getEndPoint();
-        if (this.is_playing) {
-            this.current_time += 1;
-            this.pushEvent(fromEngineActions.UPDATE_TIME, {
-                currentTime: this.current_time,
-            });
-            this.scrubber_frame_position = this.current_time;
-        }
-
-        if (this.scrubber_frame_position <= 0) {
-            await this.resetScene();
-        }
-
-        //this.scrubber_frame_position += 1;
-        //2. allow stopping.
-        //3. smallest unit is a frame and it is set by the scene and is in fps, our videos will be 60fps but we can reprocess them using the pipeline.
-        for (const element of this.timeline_items) {
-            if (
-                element.offset <= this.scrubber_frame_position &&
-                this.scrubber_frame_position <= element.length &&
-                element.should_play === true
-            ) {
-                // run async
-                // element.play()
-                // remove the element from the list
-                const object = this.scene.get_object_by_uuid(element.object_uuid);
-                if (element.type === ClipType.TRANSFORM) {
-                    if (object && this.transform_engine.clips[element.object_uuid]) {
-                        this.transform_engine.clips[element.object_uuid].step(
-                            object,
-                            element.offset,
-                            this.scrubber_frame_position,
-                        );
-                        element.length = this.transform_engine.clips[element.object_uuid].length;
-                    }
-                } else if (element.type === ClipType.AUDIO && element.group !== ClipGroup.CHARACTER) {
-                    if (this.scrubber_frame_position + 1 >= element.length) {
-                        this.audio_engine.stopClip(element.media_id);
-                    } else {
-                        this.audio_engine.playClip(element.media_id);
-                    }
-                } else if (element.type === ClipType.AUDIO  && element.group === ClipGroup.CHARACTER) { // we will remove this when we know which group it will come from character + audio === lip sync audio.
-                    if (this.scrubber_frame_position + 1 >= element.length) {
-                        this.lipSync_engine.clips[element.object_uuid + element.media_id].stop();
-                    } else if (object) {
-                        await this.lipSync_engine.clips[element.object_uuid + element.media_id].play(object);
-                        this.lipSync_engine.clips[element.object_uuid + element.media_id].step();
-                    }
-                } else if (element.type === ClipType.ANIMATION) {
-                    if (object) {
-                        await this.animation_engine.clips[object.uuid + element.media_id].play(object);
-                        let fps = 120;
-                        if (isRendering) { fps = 60; }
-                        this.animation_engine.clips[object.uuid + element.media_id].step(
-                            this.scrubber_frame_position / fps, // Double FPS for best result.
-                        );
-                    }
-                }
-                //this.timelineItems = this.timelineItems.filter(item => item !== element)
-            }
-        }
-
-        if (this.scrubber_frame_position >= this.timeline_limit && this.is_playing) {
-            await this.stop();
-            return true;
-        }
-
-        return false;
-    }
-
-    private async stop(): Promise<void> {
-        await this.resetScene();
-        this.is_playing = false;
-        console.log(`Stopping Timeline`);
-        this.current_time = 0;
-        this.pushEvent(fromEngineActions.UPDATE_TIME, {
-            currentTime: this.current_time,
-        });
-    }
+  private async stop(): Promise<void> {
+    await this.resetScene();
+    this.is_playing = false;
+    console.log(`Stopping Timeline`);
+    this.current_time = 0;
+    this.pushEvent(fromEngineActions.UPDATE_TIME, {
+      currentTime: this.current_time,
+    });
+  }
 }
\ No newline at end of file