SimpleChatJS: Roles Class, submitClick

Define Role class with static members corresponding to the roles.

Update startme to

* Get hold of the ui elements.

* Attach a click handler to submit button, which adds the user input
  to xchats array and shows the chat messages till now in chat div
  element.

Trap DOMContentLoaded to trigger startme

examples/server/public/simplechat.js

@@ -1,5 +1,11 @@
 // @ts-check
 
+class Roles {
+    static System = "system";
+    static User = "user";
+    static Assistant = "assistant";
+}
+
 class SimpleChat {
 
     constructor() {
@@ -13,9 +19,12 @@ class SimpleChat {
     /**
      * Add an entry into xchat
      * @param {string} role
-     * @param {string} content
+     * @param {string|undefined|null} content
      */
     add(role, content) {
+        if ((content == undefined) || (content == null) || (content == "")) {
+            return;
+        }
         this.xchat.push( {role: role, content: content} );
     }
 
@@ -52,6 +61,22 @@ let gChatURL = `${gBaseURL}/chat/completions`;
 
 
 function startme() {
-    let divChat = document.getElementById("chat");
+
-    let btnSubmit = document.getElementById()
+    let divChat = /** @type{HTMLDivElement} */(document.getElementById("chat"));
+    let btnSubmit = document.getElementById("submit");
+    let inputUser = document.getElementById("user");
+
+    if (divChat == null) {
+        throw Error("ERRR:StartMe:Chat element missing");
     }
+
+    btnSubmit?.addEventListener("click", (ev)=>{
+        let content = inputUser?.textContent;
+        console.debug("DBUG:BtnSubmit:Click:", content)
+        gChat.add(Roles.User, content);
+        gChat.show(divChat);
+    });
+
+}
+
+document.addEventListener("DOMContentLoaded", startme);