feat: add participant names to group chat

caesar.json

@@ -1,4 +1,11 @@
-[
+{
+    "characters": [
+        "Mark Antony",
+        "Julius Caesar"
+    ],
+    "messages":
+    [
         { "character": 0, "text": "Sire! Forgive my informal message. We must speak."},
         { "character": 1, "text": "What is the meaning of this? What is so urgent it cannot wait for our usual meeting? Speak plainly and get to the pooint. I have more important matters to attend to than deciphering vague missives."}
-]
+    ]
+}

ides-of-march.json

@@ -1,4 +1,13 @@
-[
+{
+    "characters": [
+        "Mark Antony",
+        "Cassius",
+        "Brutus",
+        "Casca",
+        "Decimus",
+        "Trebonius"
+    ],
+    "messages": [
         { "character": 1, "text": "Alright, it’s time. We need to finalize the plan. Everyone good for tomorrow?" },
         { "character": 2, "text": "Yes, it has to be tomorrow. No more delays." },
         { "character": 3, "text": "Do we know exactly where he’s going to be?" },
@@ -19,5 +28,7 @@
         { "character": 1, "text": "Tomorrow, at the Senate. Let’s end this tyranny." },
         { "character": 2, "text": "For Rome." },
         { "character": 3, "text": "For the Republic." },
-  { "character": 5, "text": "For our future." }
-]
+        { "character": 5, "text": "For our future." },
+        { "character": 0, "text": "uh" }
+    ]
+}

lepidus.json

@@ -0,0 +1,18 @@
+{
+    "characters": [
+        "Mark Antony",
+        "Lepidus"
+    ],
+    "messages": [
+        { "character": 0, "text": "Lepidus, how’s the Senate holding up without Caesar?" },
+        { "character": 0, "text": "I’m guessing things are getting messier by the day." },
+        { "character": 1, "text": "You have no idea." },
+        { "character": 1, "text": "Yesterday, half of them couldn’t even agree on the order of the agenda." },
+        { "character": 0, "text": "Sounds like a circus." },
+        { "character": 0, "text": "Need me to step in and straighten things out?" },
+        { "character": 1, "text": "Might need more than that. We’re stretched thin on allies." },
+        { "character": 0, "text": "We’ll make it work. Caesar’s return should stabilize things." },
+        { "character": 1, "text": "Hopefully. Until then, I’ll try not to let it all fall apart." }
+    ]
+}
+

lucius.json

@@ -1,4 +1,10 @@
-[
+{
+    "characters": [
+        "Mark Antony",
+        "Lucius Antony"
+    ],
+    "messages":
+    [
         { "character": 0, "text": "How’s everything in Rome, Lucius?" },
         { "character": 1, "text": "Same old chaos. Senate’s split on everything." },
         { "character": 0, "text": "Let them bicker. You’re holding up, right?" },
@@ -8,5 +14,5 @@
         { "character": 0, "text": "Hang in there. I’ll be back soon." },
         { "character": 1, "text": "You better. You owe me a break." },
         { "character": 0, "text": "It’s coming, trust me." }
-]
-
+    ]
+}

main.js

@@ -46,8 +46,9 @@ function getMessageList() {
 }
 
 class AgentMessage {
-    constructor(text) {
+    constructor(text, senderName) {
         this.text = text;
+        this.senderName = senderName;
     }
 
     getIsOurs() {
@@ -61,6 +62,12 @@ class AgentMessage {
         contentElem.className = "message-content rounded-rectangle theirs";
         liElem.appendChild(contentElem);
 
+        if (this.senderName) {
+            const nameElem = document.createElement("h3");
+            nameElem.innerHTML = this.senderName;
+            contentElem.appendChild(nameElem);
+        }
+
         const textElem = document.createElement("span");
         textElem.className = "message-text";
         textElem.innerHTML = this.text;
@@ -191,7 +198,7 @@ function setVisibleOnMobile(element, isVisible) {
             classes.splice(idx, 1);
         }
         classes.push(visibleClass);
-    } else if (!classes.includes(invisibleClass)) {
+    } else if (!isVisible && !classes.includes(invisibleClass)) {
         const idx = classes.indexOf(visibleClass);
         if (idx != -1) {
             classes.splice(idx, 1);
@@ -213,6 +220,12 @@ function showSidePanel() {
     setVisibleOnMobile(conversationListElem, true);
 }
 
+function readConversationJson(path, callback) {
+    fetch(path)
+        .then(response => response.json())
+        .then(json => callback(json));
+}
+
 function showConversation(path) {
 
     const mainPanel = document.getElementById("main-panel");
@@ -223,22 +236,24 @@ function showConversation(path) {
 
     const title = path.split(".")[0];
 
-    fetch(path)
-        .then(response => response.json())
-        .then(json => {
+    readConversationJson(path, json => {
         conversation = new Conversation(title);
+        const jsonMessages = json.messages;
+        const participants = json.characters;
 
         let initialMessages = [];
 
-            for (let i = 0; i < json.length; i++) {
-                const data = json[i];
+        for (let i = 0; i < jsonMessages.length; i++) {
+            const data = jsonMessages[i];
             const text = data.text;
             if (data.character == 0) {
                 const message = new UserMessage(text);
                 message.updateStatus("delivered");
                 initialMessages.push(message);
             } else {
-                    const message = new AgentMessage(text);
+                const message = participants.length > 2 
+                    ? new AgentMessage(text, participants[data.character])
+                    : new AgentMessage(text);
                 initialMessages.push(message);
             }
         }
@@ -252,9 +267,9 @@ function addConversationPreview(path) {
     const title = path.split(".")[0];
     const listRoot = document.getElementById("side-panel");
 
-    fetch(path)
-        .then(response => response.json())
-        .then(json => {
+    readConversationJson(path, json => {
+        const messages = json.messages;
+
         const elem = document.createElement("div");
         elem.onclick = () => showConversation(path);
         elem.className = "conversation";
@@ -264,7 +279,7 @@ function addConversationPreview(path) {
         elem.appendChild(headerElem);
 
         const previewElem = document.createElement("span");
-            previewElem.innerHTML = json[json.length - 1].text;
+        previewElem.innerHTML = messages[messages.length - 1].text;
         elem.appendChild(previewElem);
 
         listRoot.appendChild(elem);
@@ -275,7 +290,8 @@ function populateConversationList() {
     const conversationFiles = [
         "caesar.json",
         "lucius.json",
-        "ides-of-march.json"
+        "ides-of-march.json",
+        "lepidus.json"
     ];
 
     for (let i = 0; i < conversationFiles.length; i++) {

styles.css

@@ -134,7 +134,17 @@ h1 {
     float: left;
 }
 
+.message-content.theirs h3 {
+    color: color-mix(in hsl, var(--eggshell) 50%, white 50%);
+    margin: 0;
+    margin-bottom: 3px;
+    font-size: .85em;
+    font-weight: bolder;
+    letter-spacing: .03em;
+}
+
 .theirs .message-text {
+    /*TODO: move this up to .message-content.theirs?*/
     color: var(--eggshell);
 }
 
@@ -171,12 +181,8 @@ li {
 #textbox {
     width: 100%;
     display: flex;
-    /*position: sticky;*/
-    /*flex-position: end;*/
     bottom: 0;
 
-    margin-top: 0.5em;
-
     z-index: 1;
 
     background-color: var(--dark-purple);
@@ -194,7 +200,7 @@ li {
 }
 
 #textbox input {
-    flex-grow: 2;
+    flex-grow: 4;
 
     color: var(--dark-purple);
     background-color: var(--eggshell);