UI component refactor

src/composables/messageItem/useMessageItemComp.ts

@@ -0,0 +1,51 @@
+import { computed } from "vue";
+// takes in message modifier as param
+export default function useMessageItemComp(m: string) {
+  const textFill = computed(() => {
+    switch (m) {
+      case "fr":
+        return "#000";
+      default:
+        return "#fff";
+    }
+  });
+
+  const bubbleFill = computed(() => {
+    switch (m) {
+      case "sf":
+        return "#61b4f4";
+      case "ai":
+        return "#585858";
+      default:
+        return "#fff";
+    }
+  });
+
+  const startingOffset = computed(() => {
+    const messageRenderer = document.getElementById('messageRenderer')
+    if (messageRenderer) {
+      const rect = messageRenderer.getBoundingClientRect();
+      const sfX = 120;
+      const aiX = 200;
+      const dX = 40;
+      let Y = 600;
+      if (rect.height > 500) {
+        Y = rect.height + 75;
+      }
+      switch (m) {
+        case "sf":
+          return `translate(${sfX} ${Y})`;
+        case "ai":
+          return `translate(${aiX} ${Y})`;
+        default:
+          return `translate(${dX} ${Y})`;
+      }
+    }
+  });
+
+  return {
+    textFill,
+    bubbleFill,
+    startingOffset
+  };
+}