rafactor input handler + renderer

src/components/UI/UIDetails/messageRenderer.vue

@@ -29,7 +29,7 @@
 
 <script lang="ts">
 import useMessageRenderer from "@/composables/messageRenderer/useMessageRenderer";
-import useScroller from "@/composables/scroller/useScroller";
+import useScrollView from "@/composables/scrollView/useScrollView";
 import {
   defineComponent,
   reactive,
@@ -55,7 +55,7 @@ export default defineComponent({
     }
 
     const { beforeEnter, enter, afterEnter } = useMessageRenderer();
-    const {scrollView} = useScroller({ targetId: "messageRenderer"});
+    const {scrollView} = useScrollView({ targetId: "messageRenderer"});
 
     return {
       renderArr,

src/components/input/inputDetails/audioInput.vue

@@ -1,7 +1,7 @@
 <template>
-<svg xmlns="http://www.w3.org/2000/svg" :width="reactiveWidth" height="34" x="50%" y="450" >
+<svg xmlns="http://www.w3.org/2000/svg" :width="bubbleWidth" height="34" :x="center" y="450" >
   <g id="Group_126" data-name="Group 126" transform="translate(0 0)">
-    <rect id="Rectangle_478" data-name="Rectangle 478" :width="reactiveWidth" height="34" rx="10" transform="translate(0 0)" fill="#b9b9b9"/>
+    <rect id="Rectangle_478" data-name="Rectangle 478" :width="bubbleWidth" height="34" rx="10" transform="translate(0 0)" fill="#b9b9b9"/>
     <g id="Group_125" data-name="Group 125">
       <!-- <path id="Path_328" data-name="Path 328" d="M0,25v-10" transform="translate(10 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
       <path id="Path_328" data-name="Path 328" d="M0,25v-15" transform="translate(15 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
@@ -18,26 +18,19 @@
 </template>
 
 <script lang="ts">
-import {ref, defineComponent, onMounted, watch} from 'vue'
-import useInputRenderer from "@/composables/inputItem/useInputRenderer";
+import { defineComponent, computed } from 'vue'
 export default defineComponent ({
   name: 'AudioInput',
-  setup() {
-
-  const { reactiveWidth, input } = useInputRenderer();
-
-
-
-    return {
-      reactiveWidth
-    }
-    // const { initRecorder } = useStreamRecorder(record);
-
-    // onMounted(async () => {
-    //   // step get streamRecorder reference
-    //   const { streamRecorder } = await initRecorder();
-
-    // });
+  props: {
+    bubbleWidth: Number
+  },
+  setup(props){
+    const center = computed(() => {
+      if (props.bubbleWidth) {
+        return 175 - props.bubbleWidth / 2;
+      }
+    })
+    return { center }
   }
 })
 </script>

src/components/input/inputDetails/textInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <foreignObject class="inputContainer" :x="inputXoffset" y="450" width="55%" height="50%">
+  <foreignObject class="inputContainer" :x="textXoffset" 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>
@@ -9,20 +9,12 @@
 </template>
 
 <script lang="ts">
-import useInputRenderer from "@/composables/inputItem/useInputRenderer";
-import useStreamRecorder from "@/composables/streamRecorder/useStreamRecorder";
 import { defineComponent, watch, onMounted, ref } from "vue";
-import useTextInput from '@/composables/inputItem/useTextInput';
 export default defineComponent({
   name: "TextInput",
-  setup() {
-    const record = ref(false);
-    const { inputXoffset, input } = useTextInput();
-
-    return {
-      input,
-      inputXoffset,
-    };
+  props: {
+    input: String,
+    textXoffset: String
   },
 });
 </script>

src/components/input/inputItem.vue

@@ -1,6 +1,13 @@
 <template>
-  <audio-input v-if="renderAudio" />
-  <text-input v-else />
+  <audio-input 
+    v-if="renderAudio" 
+    :bubbleWidth="reactiveWidth" 
+  />
+  <text-input 
+    v-else 
+    :input="input" 
+    :textXoffset="textInputXoffset"  
+  />
 </template>
 
 <script lang="ts">
@@ -12,10 +19,14 @@ export default defineComponent({
   name: "InputItem",
   components: {TextInput, AudioInput},
   setup() {
-    const { renderAudio } = useInputRenderer();
+
+    const { input, renderAudio, reactiveWidth, textInputXoffset } = useInputRenderer();
 
     return {
-      renderAudio
+      input,
+      textInputXoffset,
+      renderAudio,
+      reactiveWidth
     }
   }
 })