@     </span>
  @     <span>Active users (sorted by last message time)</span>
  @   </div>
  @   <div id='chat-user-list'></div>
  @ </div>
  @ <div id='chat-preview' class='hidden chat-view'>
  @  <header>Preview: (<a href='%R/md_rules' target='_blank'>markdown reference</a>)</header>
  @  <div id='chat-preview-content'></div>
  @  <div class='button-bar'><button class='action-close'>Close Preview</button></div>
  @ </div>
  @ <div id='chat-config' class='hidden chat-view'>
  @ <div id='chat-config-options'></div>
    /* ^^^populated client-side */
  @ <div class='button-bar'><button class='action-close'>Close Settings</button></div>
  @ </div>
  @ <div id='chat-search' class='hidden chat-view'>
  @   <div id='chat-search-content'></div>
      /* ^^^populated client-side */
  @   <div class='button-bar'>
  @     <button class='action-clear'>Clear results</button>
  @     <button class='action-close'>Close Search</button>
  @   </div>
  @ </div>
  @ <div id='chat-messages-wrapper' class='chat-view'>

  */
  dom.splitClassList = function f(str){
    if(!f.rx){
      f.rx = /(\s+|\s*,\s*)/;
    }
    return str ? str.split(f.rx) : [str];
  };

  dom.div = dom.createElemFactory('div');
  dom.p = dom.createElemFactory('p');
  dom.code = dom.createElemFactory('code');
  dom.pre = dom.createElemFactory('pre');
  dom.header = dom.createElemFactory('header');
  dom.footer = dom.createElemFactory('footer');
  dom.section = dom.createElemFactory('section');

    finally{
      --f.counter;
    }
    if(!f.counter){
      old.parentNode.removeChild(old);
    }
  };
  dom.replaceNode.counter = 0;
  /**
     Two args == getter: (e,key), returns value

     Three or more == setter: (e,key,val[...,keyN,valN]), returns
     e. If val===null or val===undefined then the attribute is
     removed. If (e) has a forEach method then this routine is applied
     to each element of that collection via that method. Each pair of

        inputX: E1('#chat-input-field-x'),
        input1: E1('#chat-input-field-single'),
        inputM: E1('#chat-input-field-multi'),
        inputFile: E1('#chat-input-file'),
        contentDiv: E1('div.content'),
        viewConfig: E1('#chat-config'),
        viewPreview: E1('#chat-preview'),
        previewContent: E1('#chat-preview-content'),
        viewSearch: E1('#chat-search'),
        searchContent: E1('#chat-search-content'),
        btnPreview: E1('#chat-button-preview'),
        views: document.querySelectorAll('.chat-view'),
        activeUserListWrapper: E1('#chat-user-list-wrapper'),
        activeUserList: E1('#chat-user-list')
      },
      me: F.user.name,
      mxMsg: F.config.chat.initSize ? -F.config.chat.initSize : -50,

      **   at any time.
      */
      this.o = {
        iFirstInTable: o.first,
        iLastInTable: o.last,
        iPrevId: o.previd,
        iNextId: o.nextid,
        bIgnoreClick: false
      };

      this.e = {
        body:    D.addClass(D.div(), 'spacer-widget'),





        up:      D.addClass(
          D.button(zDownArrow+' Load '+nMsgContext+' more '+zDownArrow),
          'up'
        ),
        down:    D.addClass(
          D.button(zUpArrow+' Load '+nMsgContext+' more '+zUpArrow),
          'down'
        ),
        all:     D.addClass(D.button('Load More'), 'all')
      };

      ;
      D.append( this.e.body, this.e.up, this.e.down, this.e.all );


      const ms = this;
      this.e.up.addEventListener('click', ()=>ms.load_messages(false));
      this.e.down.addEventListener('click', ()=>ms.load_messages(true));
      this.e.all.addEventListener('click', ()=>ms.load_messages( (ms.o.iPrevId==0) ));
      this.set_button_visibility();
    };

    cf.prototype = {
      set_button_visibility: function() {
        if( !this.e ) return;
        const o = this.o;

        const iPrevId = (o.iPrevId!=0) ? o.iPrevId : o.iFirstInTable-1;
        const iNextId = (o.iNextId!=0) ? o.iNextId : o.iLastInTable+1;
        let nDiff = (iNextId - iPrevId) - 1;

        for( const x of [this.e.up, this.e.down, this.e.all] ){
          if( x ) D.addClass(x, 'hidden');
        }
        let nVisible = 0;
        if( nDiff>0 ){

          if( nDiff>nMsgContext && (o.iPrevId==0 || o.iNextId==0) ){
            nDiff = nMsgContext;
          }

          if( nDiff<=nMsgContext && o.iPrevId!=0 && o.iNextId!=0 ){
            D.removeClass(this.e.all, 'hidden');
            ++nVisible;
            this.e.all.innerText = (
              zUpArrow + " Load " + nDiff + " more " + zDownArrow
            );
          }else{
            if( o.iPrevId!=0 ){
              ++nVisible;
              D.removeClass(this.e.up, 'hidden');
            }else if( this.e.up ){
              if( this.e.up.parentNode ) D.remove(this.e.up);
              delete this.e.up;
            }
            if( o.iNextId!=0 ){
              ++nVisible;
              D.removeClass(this.e.down, 'hidden');
            }else if( this.e.down ){
              if( this.e.down.parentNode ) D.remove( this.e.down );
              delete this.e.down;
            }
          }
        }
        if( !nVisible ){
          /* The DOM elements can now be disposed of. */
          for( const x of [this.e.up, this.e.down, this.e.all, this.e.body] ){
            if( x?.parentNode ) D.remove(x);
          }
          delete this.e;
        }
      },

      load_messages: function(bDown) {
        if( this.bIgnoreClick ) return;

        var iFirst = 0;           /* msgid of first message to fetch */

          urlParams:{
            q: '',
            n: nFetch,
            i: iFirst
          },
          responseType: "json",
          onload:function(jx){
            if( bDown ) jx.msgs.reverse();
            jx.msgs.forEach((m) => {
              var mw = new Chat.MessageWidget(m);
              if( bDown ){
                /* Inject the message below this object's body, or
                   append it to Chat.e.searchContent if this element
                   is the final one in its parent (Chat.e.searchContent). */
                const eAnchor = e.body.nextElementSibling;
                if( eAnchor ) Chat.e.searchContent.insertBefore(mw.e.body, eAnchor);
                else D.append(Chat.e.searchContent, mw.e.body);
              }else{
                Chat.e.searchContent.insertBefore(mw.e.body, e.body);
              }
            });
            if( bDown ){
              o.iNextId -= jx.msgs.length;
            }else{
              o.iPrevId += jx.msgs.length;
            }

  /**
     Clears the search result view. If addInstructions is true it adds
     text to that view instructing the user to enter their query into
     the message-entry widget (noting that that widget has text
     implying that it's only for submitting a message, which isn't
     exactly true when the search view is active).

     Returns the DOM element which wraps all of the chat search
     result elements.
  */
  Chat.clearSearch = function f(addInstructions=false){
    const e = D.clearElement( this.e.searchContent );


    if(addInstructions){
      D.append(e, "Enter search terms in the message field.");
    }
    return e;
  };
  Chat.clearSearch(true);
  /**

            const mw = new Chat.MessageWidget(m);
            const spacer = new Chat.SearchCtxLoader({
              first: jx.first,
              last: jx.last,
              previd: previd,
              nextid: m.msgid
            });
            if( spacer.e ) D.append( eMsgTgt, spacer.e.body );
            D.append( eMsgTgt, mw.e.body );
            previd = m.msgid;
          });
          if( jx.msgs.length ){
            const spacer = new Chat.SearchCtxLoader({
              first: jx.first,
              last: jx.last,
              previd: previd,
              nextid: 0
            });
            if( spacer.e ) D.append( eMsgTgt, spacer.e.body );
          }else{
            D.append( D.clearElement(eMsgTgt),
                      'No search results found for: ',
                      term );
          }
        }
      }
    );
  }/*Chat.submitSearch()*/;

  const afterFetch = function f(){
    if(true===f.isFirstCall){
      f.isFirstCall = false;
      Chat.ajaxEnd();
      Chat.e.viewMessages.classList.remove('loading');
      setTimeout(function(){

  font-weight: normal;
  white-space: pre-wrap;
  display: inline-block;
  opacity: 0.85;
}
body.chat #chat-config #chat-config-options .menu-entry select {
}
body.chat #chat-preview #chat-preview-content,
body.chat #chat-search #chat-search-content {
  overflow: auto;
  flex: 1 1 auto;
  padding: 0.5em;
  border: 1px dotted;
}

body.chat #chat-preview #chat-preview-content > * {