add microphone component

src/components/UI/UIDetails/messageItem.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } from 'vue';
+import { defineComponent, computed, onMounted, ref, reactive } from 'vue';
  export default defineComponent({
   name: "MessageItem",
   props: {
@@ -70,8 +70,6 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
       const msgID = ref(props.item.id);
       const bubbleTag = ref(`bubble${msgID.value}`);
       const contentTag = ref(`content${msgID.value}`);
-
-
       let bubble: any;
       let content: any;
 
@@ -133,10 +131,12 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
         bubble.setAttribute("width", bbox.width + 2 * padding);
         bubble.setAttribute("height", bbox.height + 2 * padding);
       }
+
+      // make textbox before mount
       createTextBox(props.item.content, 32);
+
       onMounted(async () => {
-          console.log(bubbleTag.value);
-          console.log(contentTag.value)
+          // update bubble and content for current message
           bubble = bubbleTag.value;
           content = contentTag.value;
           await adjustRect();
@@ -144,7 +144,6 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
 
       })
       return {
-          bubble,
           textFill,
           bubbleFill,
           startingOffset,