html bubbles, more simplifications, new session protocol

src/render/components/bubble.js

@@ -1,23 +1,36 @@
 const Bubble =
 {
-    props: ["modifier", "text", "child"],
+    props: ["category", "text", "blob", "modifier", "child"],
 
     setup(props)
     {
+        const getUrl = () => {
+            return `data:${props.category};base64,${props.blob}`;
+        }
+
         Vue.onMounted(() => {
-
-            const messengerEl = document.getElementById("messenger");
-
-            if (messengerEl) {
-                messengerEl.dispatchEvent(new CustomEvent('adjust-scroll'));
-            }
-
+            document.getElementById("messenger").dispatchEvent(new CustomEvent('adjust-scroll'));
         });
+
+        return { getUrl };
     },
 
     template: `
-        <div :class="'bubble ' + modifier + '-bubble ' + modifier +'-'+ child" v-html="text">
-        </div> `
+        <div :class="'bubble ' + modifier + '-bubble ' + modifier +'-'+ child">
+
+            <p v-if="category=='text/plain'">{{ text }}</p>
+
+            <p v-else-if="category=='audio/L16'">{{ text }}</p>
+
+            <div v-else-if="category=='text/html'" v-html="text"></div>
+
+            <img v-else-if="category.startsWith('image/')" :src="getUrl()" />
+
+            <a v-else :href="getUrl()">{{ text }}</a>
+
+        </div>`
 };
 
 export default Bubble;
+
+// TODO: should include other styling/actions for audio bubbles