add record on input functionality

src/components/UI/UIDetails/inputItem.vue

@@ -10,13 +10,45 @@
 
 <script lang="ts">
 import useInputRenderer from "@/composables/inputItem/useInputRenderer";
+import useStreamRecorder from "@/composables/streamRecorder/useStreamRecorder";
 import {
   defineComponent,
+  watch,
+  onMounted
 } from "vue";
 export default defineComponent({
   name: "InputItem",
   setup() {
     const { inputXoffset, input } = useInputRenderer();
+    const { initRecorder } = useStreamRecorder();
+
+    onMounted(async () => {
+
+      // step get streamRecorder reference
+      const { streamRecorder } = await initRecorder();
+      
+      // add event listener for space keyup
+      window.addEventListener("keyup", (e) => {
+        if (e.key === " " && streamRecorder.state === "recording") {
+          console.log("stop recording")
+          streamRecorder.stop();
+          console.log('recorder is', streamRecorder.state);
+          input.value = "";
+        }
+      })
+
+      // begin recording on space
+      watch(input, (input, prevInput) => {
+        if (prevInput !== "" || prevInput.length > 0) {
+          return;
+        }
+        if (input === " ") {
+          console.log("record")
+          streamRecorder.start();
+          console.log('recorder is', streamRecorder.state);
+        }
+      })
+    })
 
    return {
       input,