SimpleChatTC:ShowObjPropsEdit:Any depth trapping of ui setup - t2

Fix up the oversights wrt any depth trapping flow

Remember to start the propWithTree being checked/trapped with :
to indicate the root of the prop hierarchy and also use : as sep
between the elements of the props hierarchy tree

Also had forgotten about the goof up possible with using in in a
condition statement to check for array to contain a entry of interest
in JS, fixed it now.

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", "apiEP", "iRecentUserMsgCnt", "bTrimGarbage", "bCompletionFreshChatAlways", "bCompletionInsertStandardRolePrefix"], "Settings", (prop, elProp)=>{
             if (prop == "headers:Authorization") {
                 // @ts-ignore
                 elProp.placeholder = "Bearer OPENAI_API_KEY";
             }
-        }, ["apiEP", "iRecentUserMsgCnt"], (propWithPath, prop, elParent)=>{
-            if (propWithPath == "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 (propWithPath == "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

@@ -242,9 +242,13 @@ export function el_creatediv_input(id, label, type, defaultValue, cb, className=
  * The fRefiner callback even helps work with Obj with-in Obj scenarios.
  *
  * For some reason if caller wants to handle certain properties on their own
- * * prefix the prop name in lProps with sTrapTag
+ * * specify the prop name of interest along with its prop-tree-hierarchy in lTrapThese
+ *   * always start with : when ever refering to propWithPath,
+ *     as it indirectly signifies root of properties tree
+ *   * remember to seperate the properties tree hierarchy members using :
  * * 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
+ *   into which the new ui elements created for editting the prop, if any, should be attached,
+ *   along with the current prop of interest and its full propWithPath representation.
  * @param {HTMLDivElement|HTMLFieldSetElement} elParent
  * @param {string} propsTreeRoot
  * @param {any} oObj
@@ -267,7 +271,7 @@ export function ui_show_obj_props_edit(elParent, propsTreeRoot, oObj, lProps, sL
     for(const k of lProps) {
         let propsTreeRootNew = `${propsTreeRoot}:${k}`
         if (lTrapThese) {
-            if (propsTreeRootNew in lTrapThese) {
+            if (lTrapThese.indexOf(propsTreeRootNew) != -1) {
                 if (fTrapper) {
                     fTrapper(propsTreeRootNew, k, elFS)
                 }