html bubbles, more simplifications, new session protocol

src/render/components/messenger.js

@@ -17,33 +17,54 @@ const Messenger = {
     setup()
     {
         const person = Vue.ref("");
-        const messages = Vue.ref([]);
+        const messages = Vue.ref([{
+            modifier: "ai",
+            content: [{
+                category: "text/html",
+                text: `<div class="mail">
+                           <h4>About HTML Parser</h4>
+                           <p>Return the text of the most recently opened start tag. This should not normally be needed for structured processing, but may be useful in dealing with HTML “as deployed” or for re-generating input with minimal changes (whitespace between attributes can be preserved, etc.).</p>
+                       </div>`,
+                blob: null
+            }],
+            context: "Email from David Spade",
+            avatar: null,
+            id: 0
+        }]);
+
+        const onDrop = async (e) => {
+            const file = e.dataTransfer.items[0].getAsFile();
+
+            const buffer = await file.arrayBuffer();
+            const b64String = await window.mainApi.invoke("encode", buffer);
+
+            window.mainApi.send("message", {
+                category: file.type,
+                text: file.name,
+                blob: b64String
+            });
+        }
 
         Vue.onMounted(() => {
 
-            window.mainApi.on("ui-init", (ui) => {
-                person.value = ui.person;
-                messages.value = ui.messages;
-            });
-
-            window.mainApi.on("ui-update", (message) => {
-
-                if (message.hasOwnProperty("person"))
+            window.mainApi.on("message", (message) => {
+                if (message.person)
                 {
                     person.value = message.person;
-                    return;
+                    messages.value = message.messages;
                 }
-
-                let index = messages.value.findIndex(m => m.id===message.id);
-                if (index >= 0) 
+                else if (message.name) 
                 {
-                    messages.value[index] = message;
-                } 
-                else 
+                    person.value = message;
+                }
+                else if (message.content)
                 {
                     messages.value.push(message);
                 }
-
+                else
+                {
+                    messages.value[messages.value.length - 1].content.push(message);
+                }
             });
 
             initScroll("messenger");
@@ -54,7 +75,7 @@ const Messenger = {
             messages.value = [];
         });
 
-        return { person, messages };
+        return { person, messages, onDrop };
     },
 
     template: `
@@ -62,28 +83,20 @@ const Messenger = {
         <WS />
         <Input :person="person" />
 
-        <div id="messenger">
+        <div id="messenger"
+            @drop="onDrop($event)"
+            @dragover.prevent
+            @dragenter.prevent
+        >
             <Message
                 v-for="message in messages"
                 :modifier="message.modifier"
                 :content="message.content"
                 :context="message.context"
                 :avatar="message.avatar"
-                :audio="message.audio"
                 :id="message.id"
             />
         </div> `
 }
 
 export default Messenger;
-
-// {
-//     modifier: "ai",
-//     content: [
-//         "This is test 2\r\n"
-//     ],
-//     context: "Email from adgundersen@gmail.com",
-//     avatar: "./assets/mailAvatar.svg",
-//     audio: null,
-//     id: 0
-// }