SimpleChatTC:ShowObjPropsEdit:Any depth trapping of ui setup

Maintain the current property hierarchy to its root over recursive
calls.

Allow callers to specify the props to be trapped using the prop
hierarchy.

Pass the prop hierarchy to the fTrapper.

This should allow one to trap any prop wrt its editing ui setup,
irrespective of whether it is a prop of the main object passed,
or a member of a child prop of the main object passed or so ...

Update the setting up of ChatHistoryInCtxt and ApiEndPoint to follow
the new semantic/flow.

Author: hanishkvc

tools/server/public_simplechat/simplechat.js

@@ -1110,20 +1110,20 @@ class Me {
      * @param {HTMLDivElement} elDiv
      */
     show_settings(elDiv) {
-        ui.ui_show_obj_props_edit(elDiv, this, ["baseURL", "headers", "bStream", "tools", "apiRequestOptions", "TRAPME-apiEP", "TRAPME-iRecentUserMsgCnt", "bTrimGarbage", "bCompletionFreshChatAlways", "bCompletionInsertStandardRolePrefix"], "Settings", (prop, elProp)=>{
+        ui.ui_show_obj_props_edit(elDiv, "", this, ["baseURL", "headers", "bStream", "tools", "apiRequestOptions", "TRAPME-apiEP", "TRAPME-iRecentUserMsgCnt", "bTrimGarbage", "bCompletionFreshChatAlways", "bCompletionInsertStandardRolePrefix"], "Settings", (prop, elProp)=>{
             if (prop == "headers:Authorization") {
                 // @ts-ignore
                 elProp.placeholder = "Bearer OPENAI_API_KEY";
             }
-        }, "TRAPME-", (tag, elParent)=>{
-            if (tag == "TRAPME-apiEP") {
+        }, ["apiEP", "iRecentUserMsgCnt"], (propWithPath, prop, elParent)=>{
+            if (propWithPath == "apiEP") {
                 let sel = ui.el_creatediv_select("SetApiEP", "ApiEndPoint", ApiEP.Type, this.apiEP, (val)=>{
                     // @ts-ignore
                     this.apiEP = ApiEP.Type[val];
                 });
                 elParent.appendChild(sel.div);
             }
-            if (tag == "TRAPME-iRecentUserMsgCnt") {
+            if (propWithPath == "iRecentUserMsgCnt") {
                 let sel = ui.el_creatediv_select("SetChatHistoryInCtxt", "ChatHistoryInCtxt", this.sRecentUserMsgCnt, this.iRecentUserMsgCnt, (val)=>{
                     this.iRecentUserMsgCnt = this.sRecentUserMsgCnt[val];
                 });

tools/server/public_simplechat/ui.mjs

@@ -246,14 +246,15 @@ export function el_creatediv_input(id, label, type, defaultValue, cb, className=
  * * fTrapper will be called with the parent ui element
  *   into which the new ui elements created for editting the prop, if any, should be attached
  * @param {HTMLDivElement|HTMLFieldSetElement} elParent
+ * @param {string} propsTreeRoot
  * @param {any} oObj
  * @param {Array<string>} lProps
  * @param {string} sLegend
  * @param {((prop:string, elProp: HTMLElement)=>void)| undefined} fRefiner
- * @param {string | undefined} sTrapTag
- * @param {((tagPlusProp: string, elParent: HTMLFieldSetElement)=>void) | undefined} fTrapper
+ * @param {Array<string> | undefined} lTrapThese
+ * @param {((propWithPath: string, prop: string, elParent: HTMLFieldSetElement)=>void) | undefined} fTrapper
  */
-export function ui_show_obj_props_edit(elParent, oObj, lProps, sLegend, fRefiner=undefined, sTrapTag=undefined, fTrapper=undefined) {
+export function ui_show_obj_props_edit(elParent, propsTreeRoot, oObj, lProps, sLegend, fRefiner=undefined, lTrapThese=undefined, fTrapper=undefined) {
     let typeDict = {
         "string": "text",
         "number": "number",
@@ -264,10 +265,11 @@ export function ui_show_obj_props_edit(elParent, oObj, lProps, sLegend, fRefiner
     elFS.appendChild(elLegend);
     elParent.appendChild(elFS);
     for(const k of lProps) {
-        if (sTrapTag) {
-            if (k.startsWith(sTrapTag)) {
+        let propsTreeRootNew = `${propsTreeRoot}:${k}`
+        if (lTrapThese) {
+            if (propsTreeRootNew in lTrapThese) {
                 if (fTrapper) {
-                    fTrapper(k, elFS)
+                    fTrapper(propsTreeRootNew, k, elFS)
                 }
                 continue
             }
@@ -294,12 +296,12 @@ export function ui_show_obj_props_edit(elParent, oObj, lProps, sLegend, fRefiner
             }
             elFS.appendChild(bbtn.div);
         } else if (type == "object") {
-            ui_show_obj_props_edit(elFS, val, Object.keys(val), k, (prop, elProp)=>{
+            ui_show_obj_props_edit(elFS, propsTreeRootNew, val, Object.keys(val), k, (prop, elProp)=>{
                 if (fRefiner) {
                     let theProp = `${k}:${prop}`
                     fRefiner(theProp, elProp)
                 }
-            })
+            }, lTrapThese, fTrapper)
         }
     }
 }