feat: system messages

caesar.json

@@ -1,5 +1,6 @@
 {
     "title": "Julius Caesar",
+    "interactive": true,
     "characters": [
         "Mark Antony",
         "Julius Caesar"

ides-of-march.json

@@ -1,5 +1,6 @@
 {
     "title": "Operation Ides of March",
+    "interactive": false,
     "characters": [
         "Mark Antony",
         "Cassius",
@@ -9,6 +10,8 @@
         "Trebonius"
     ],
     "messages": [
+        { "character": -1, "text": "Cassius created Operation Ides of March." },
+        { "character": -1, "text": "Cassius added Brutus, Casca, Decimus, Trebonius and Mark Antony." },
         { "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?" },
@@ -30,6 +33,8 @@
         { "character": 2, "text": "For Rome." },
         { "character": 3, "text": "For the Republic." },
         { "character": 5, "text": "For our future." },
-        { "character": 0, "text": "uh" }
+        { "character": 0, "text": "uh" },
+        { "character": 1, "text": "shit" },
+        { "character": -1, "text": "You have been removed from Operation Ides of March." }
     ]
 }

lepidus.json

@@ -1,5 +1,6 @@
 {
     "title": "Lepidus",
+    "interactive": true,
     "characters": [
         "Mark Antony",
         "Lepidus"

lucius.json

@@ -1,5 +1,6 @@
 {
     "title": "Lucius Antony",
+    "interactive": true,
     "characters": [
         "Mark Antony",
         "Lucius Antony"

main.js

@@ -8,6 +8,13 @@ class Conversation {
         this.name = name;
     }
 
+    setInteractive(isInteractive) {
+        const children = document.getElementById("textbox").children;
+        for (let i = 0; i < children.length; i++) {
+            children[i].disabled = !isInteractive;
+        }
+    }
+
     initialize(initialMessages) {
         document.title = this.name;
         document.getElementById("header-title").innerHTML = this.name;
@@ -57,6 +64,7 @@ class AgentMessage {
 
     getElement() {
         const liElem = document.createElement("li");
+        liElem.className = "message";
 
         const contentElem = document.createElement("span");
         contentElem.className = "message-content rounded-rectangle theirs";
@@ -90,6 +98,7 @@ class UserMessage {
 
     getElement() {
         const liElem = document.createElement("li");
+        liElem.className = "message";
 
         const contentElem = document.createElement("span");
         contentElem.className = "message-content rounded-rectangle ours";
@@ -113,6 +122,20 @@ class UserMessage {
     }
 }
 
+class SystemMessage {
+    constructor(text) {
+        this.text = text;
+    }
+
+    getElement() {
+        const liElem = document.createElement("li");
+        liElem.className = "system-message";
+        liElem.innerHTML = this.text;
+
+        return liElem;
+    }
+}
+
 function setTypingIndicator(isTyping) {
     document.getElementById("typing-indicator").innerHTML = isTyping
         ? `${conversation.contactName} is typing...`
@@ -245,7 +268,10 @@ function showConversation(path) {
         for (let i = 0; i < jsonMessages.length; i++) {
             const data = jsonMessages[i];
             const text = data.text;
-            if (data.character == 0) {
+            if (data.character == -1) {
+                const message = new SystemMessage(text);
+                initialMessages.push(message);
+            } else if (data.character == 0) {
                 const message = new UserMessage(text);
                 message.updateStatus("delivered");
                 initialMessages.push(message);
@@ -258,6 +284,7 @@ function showConversation(path) {
         }
 
         conversation.initialize(initialMessages);
+        conversation.setInteractive(json.interactive);
         conversation.render();
     });
 }
@@ -301,5 +328,5 @@ function populateConversationList() {
 setTypingIndicator(false);
 populateConversationList();
 
-showConversation("lucius.json");
+showConversation("ides-of-march.json");
 

styles.css

@@ -159,6 +159,12 @@ h1 {
     color: var(--dark-purple);
 }
 
+.system-message {
+    color: color-mix(in hsl, var(--eggshell) 80%, var(--dark-purple) 100%);
+    width: 100%;
+    text-align: center;
+}
+
 ul {
     overflow: scroll;
     /*height:100%;*/
@@ -169,15 +175,18 @@ ul {
 }
 
 li {
+    position: relative;
+    display: inline-table;
+    margin-bottom: 0.5em;
+}
+
+li.message {
     height: 2.5em;
     width: 100%;
 
     margin-bottom: 1.5em;
-    position: relative;
-    display: inline-table;
 }
 
-
 #textbox {
     width: 100%;
     display: flex;