added streamRender animation

src/components/UI/UIDetails/audioInput.vue

@@ -0,0 +1,20 @@
+<template>
+  <foreignObject  x="100" y="450" width="55%" height="50%">
+    <div xmlns="http://www.w3.org/1999/xhtml">
+      <div>
+        <canvas width="640" height="100"></canvas>
+      </div>
+    </div>
+  </foreignObject>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import useStreamRecorder from "@/composables/streamRecorder/useStreamRecorder";
+export default defineComponent ({
+  name: 'AudioInput',
+  setup() {
+
+  }
+})
+</script>

src/components/UI/UIDetails/inputItem.vue

@@ -1,8 +1,9 @@
 <template>
-  <foreignObject class="inputContainer" :x="inputXoffset" y="450" width="55%" height="50%">
+  <foreignObject class="inputContainer" :x="renderAudio? reactiveWidth: inputXoffset" y="450" width="55%" height="50%">
     <div xmlns="http://www.w3.org/1999/xhtml">
       <div class="inputBubble" contenteditable v-show="input.length > 0">
-        <p>{{ input }}</p>
+        <p v-if="!renderAudio">{{ input }}</p>
+        <canvas v-else class="audioCanvas" height="20" width="10" ></canvas>
       </div>
     </div>
   </foreignObject>
@@ -16,57 +17,20 @@ export default defineComponent({
   name: "InputItem",
   setup() {
     const record = ref(false);
-    const { inputXoffset, input } = useInputRenderer();
+    const { inputXoffset, input, renderAudio, reactiveWidth } = useInputRenderer();
     const { initRecorder } = useStreamRecorder(record);
 
     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");
-          record.value = false;
-          streamRecorder.stop();
-
-          // window.postMessage(
-          //   {
-          //     myTypeField: "audio-stream",
-          //     stream: false,
-          //   },
-          //   "*"
-          // );
-          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");
-          record.value = true;
-
-          // window.postMessage(
-          //   {
-          //     myTypeField: "audio-stream",
-          //     stream: true,
-          //   },
-          //   "*"
-          // );
-          streamRecorder.start();
-          console.log("recorder is", streamRecorder.state);
-        }
-      });
     });
 
     return {
       input,
       inputXoffset,
+      renderAudio,
+      reactiveWidth
     };
   },
 });
@@ -86,6 +50,9 @@ div[contenteditable] {
   background-color: #585858;
   font-size: 14;
   text-align: left;
+  .audioCanvas {
+    max-width: 190px
+  }
   p {
     max-width: 150px;
     overflow-wrap: break-word;

src/components/UI/index.vue

@@ -8,6 +8,7 @@
   >
     <!-- <AI /> -->
     <MessageRenderer />
+    <AudioInput />
     <InputItem />
     <!-- <TitleBar /> -->
   </svg>
@@ -19,11 +20,12 @@ import MessageRenderer from "./UIDetails/messageRenderer.vue";
 import InputItem from "./UIDetails/inputItem.vue";
 import TitleBar from "./UIDetails/titleBar.vue";
 import Messages from "./UIDetails/messages";
+import AudioInput from './UIDetails/audioInput.vue';
 import { Mitt } from "@/types/mitt/index";
 import { defineComponent, ref, inject } from "vue";
 export default defineComponent({
   name: "UI",
-  components: {  MessageRenderer, InputItem },
+  components: {  MessageRenderer, InputItem, AudioInput },
   setup() {
     const messages = Messages;
     const count = ref(0);