From ae7e66d27a434cade76c85dc00278f535bb84419 Mon Sep 17 00:00:00 2001
From: HanishKVC <hanishkvc@gmail.com>
Date: Sun, 26 May 2024 22:27:35 +0530
Subject: [PATCH] SimpleChat:UI: Add and use a para-create-append helper

Also update the config params dump to indicate that now one needs
to use document to get hold of gMe global object, this is bcas of
moving to module type js.

Also add ui.mjs to importmap
---
 examples/server/public_simplechat/index.html  |  3 ++-
 .../server/public_simplechat/simplechat.js    | 25 ++++++-------------
 examples/server/public_simplechat/ui.mjs      | 18 +++++++++++++
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/examples/server/public_simplechat/index.html b/examples/server/public_simplechat/index.html
index 212f507b9..f6a0c79b7 100644
--- a/examples/server/public_simplechat/index.html
+++ b/examples/server/public_simplechat/index.html
@@ -11,7 +11,8 @@
         <script type="importmap">
             {
                 "imports": {
-                    "datautils": "./datautils.mjs"
+                    "datautils": "./datautils.mjs",
+                    "ui": "./ui.mjs"
                 }
             }
         </script>
diff --git a/examples/server/public_simplechat/simplechat.js b/examples/server/public_simplechat/simplechat.js
index 6da12fcc6..e87f80524 100644
--- a/examples/server/public_simplechat/simplechat.js
+++ b/examples/server/public_simplechat/simplechat.js
@@ -124,10 +124,8 @@ class SimpleChat {
         }
         let last = undefined;
         for(const x of this.recent_chat(gMe.iRecentUserMsgCnt)) {
-            let entry = document.createElement("p");
+            let entry = ui.el_create_append_p(`${x.role}: ${x.content}`, div);
             entry.className = `role-${x.role}`;
-            entry.innerText = `${x.role}: ${x.content}`;
-            div.appendChild(entry);
             last = entry;
         }
         if (last !== undefined) {
@@ -547,30 +545,21 @@ class Me {
     }
 
     /**
+     * Show the configurable parameters info in the passed Div element.
      * @param {HTMLDivElement} elDiv
      */
     show_info(elDiv) {
 
-        var p = document.createElement("p");
-        p.innerText = "Settings (devel-tools-console gMe)";
+        let p = ui.el_create_append_p("Settings (devel-tools-console document[gMe])", elDiv);
         p.className = "role-system";
-        elDiv.appendChild(p);
 
-        var p = document.createElement("p");
-        p.innerText = `bCompletionFreshChatAlways:${this.bCompletionFreshChatAlways}`;
-        elDiv.appendChild(p);
+        ui.el_create_append_p(`bCompletionFreshChatAlways:${this.bCompletionFreshChatAlways}`, elDiv);
 
-        p = document.createElement("p");
-        p.innerText = `bCompletionInsertStandardRolePrefix:${this.bCompletionInsertStandardRolePrefix}`;
-        elDiv.appendChild(p);
+        ui.el_create_append_p(`bCompletionInsertStandardRolePrefix:${this.bCompletionInsertStandardRolePrefix}`, elDiv);
 
-        p = document.createElement("p");
-        p.innerText = `iRecentUserMsgCnt:${this.iRecentUserMsgCnt}`;
-        elDiv.appendChild(p);
+        ui.el_create_append_p(`iRecentUserMsgCnt:${this.iRecentUserMsgCnt}`, elDiv);
 
-        p = document.createElement("p");
-        p.innerText = `chatRequestOptions:${JSON.stringify(this.chatRequestOptions)}`;
-        elDiv.appendChild(p);
+        ui.el_create_append_p(`chatRequestOptions:${JSON.stringify(this.chatRequestOptions)}`, elDiv);
 
     }
 
diff --git a/examples/server/public_simplechat/ui.mjs b/examples/server/public_simplechat/ui.mjs
index 5241f4f3b..a8187a158 100644
--- a/examples/server/public_simplechat/ui.mjs
+++ b/examples/server/public_simplechat/ui.mjs
@@ -42,3 +42,21 @@ export function el_create_button(id, callback, name=undefined, innerText=undefin
     btn.addEventListener("click", callback);
     return btn;
 }
+
+/**
+ * Create a para and set it up. Optionaly append it to a passed parent.
+ * @param {string} text
+ * @param {HTMLElement | undefined} elParent
+ * @param {string | undefined} id
+ */
+export function el_create_append_p(text, elParent=undefined, id=undefined) {
+    let para = document.createElement("p");
+    para.innerText = text;
+    if (id) {
+        para.id = id;
+    }
+    if (elParent) {
+        elParent.appendChild(para);
+    }
+    return para;
+}