working new protocols

src/render/components/bubble.vue

@@ -6,22 +6,14 @@
 
 <script lang='ts'>
 
- import { defineComponent, ref, onMounted } from 'vue';
+ import { defineComponent } from 'vue';
 
  export default defineComponent({
   name: "Bubble",
 
   props: ["modifier", "content", "child"],
 
-  setup(props) {
-
-    onMounted(() => {
-
-    });
-
-    return {
-
-    };
+  setup() {
 
   }
 
@@ -38,30 +30,18 @@
   font-size: 14px;
   padding: 10px;
   border-radius: 18px;
-  margin-left: 15px;
-  margin-right: 15px;
   margin-bottom: 4px;
-  // animation-name: bubble-init-anim;
-  // animation-duration: 0.5s;
-}
-
-@keyframes bubble-init-anim {
-  from {
-    opacity: 0;
-    transform: translateY(25px);
-  } to {
-    opacity: 1;
-    transform: translateY(0px);
-  }
 }
 
 .ai-bubble {
   background-color: #FFFFFF;
+  margin-left: 15px;
 }
 
 .client-bubble {
   color: white;
   background-color: #58C4FD;
+  margin-right: 15px;
 }
 
 .ai-first-child {
@@ -94,7 +74,6 @@
   border-top-right-radius: 9px;
 }
 
-
 // .notify {
 //   position: absolute;
 //   width: 12px;