@       </div>
  @       <input type="file" name="file" id="chat-input-file">
  @     </div>
  @     <div id="chat-drop-details"></div>
  @   </div>
  @ </form>
  @ </div>

  /* New chat messages get inserted immediately after this element */
  @ <div id='chat-messages-wrapper'>
  @ <span id='message-inject-point'></span>
  @ </div>

  builtin_fossil_js_bundle_or("popupwidget", "storage", NULL);
  /* Always in-line the javascript for the chat page */
  @ <script nonce="%h(style_nonce())">/* chat.c:%d(__LINE__) */
  /* We need an onload handler to ensure that window.fossil is

/**
   This file contains the client-side implementation of fossil's /chat
   application. 
*/
(function(){
  const F = window.fossil, D = F.dom;
  const E1 = function(selector){
    const e = document.querySelector(selector);
    if(!e) throw new Error("missing required DOM element: "+selector);
    return e;
  };





  //document.body.classList.add('chat-only-mode');



  const Chat = (function(){
    const cs = {
      e:{/*map of certain DOM elements.*/
        messageInjectPoint: E1('#message-inject-point'),
        pageTitle: E1('head title'),
        loadToolbar: undefined /* the load-posts toolbar (dynamically created) */,
        inputWrapper: E1("#chat-input-area"),
        fileSelectWrapper: E1('#chat-input-file-area'),
        messagesWrapper: E1('#chat-messages-wrapper'),
        inputForm: E1('#chat-form'),
        btnSubmit: E1('#chat-message-submit'),
        inputSingle: E1('#chat-input-single'),
        inputMulti: E1('#chat-input-multi'),

           to avoid various race conditions in the UI and long-running
           network requests. */
      ],
      /* Injects element e as a new row in the chat, at the top of the
         list if atEnd is falsy, else at the end of the list, before
         the load-history widget. */
      injectMessageElem: function f(e, atEnd){
        const mip = atEnd ? this.e.loadToolbar : this.e.messageInjectPoint;

        if(atEnd){

          mip.parentNode.insertBefore(e, mip);

        }else{
          const self = this;
          if(false && this.isUiFlipped()){
            /* When UI is flipped, new messages start out under the
               text input area because of its position:sticky
               style. We have to scroll them up. When the page footer
               is not hidden but is not on-screen, this causes a
               slight amount of UI jarring as the footer is *also*
               scrolled into view (for whatever reason).

               The remaining problem here is messages with IMG tags.
               At this point in the process their IMG.src has not yet
               been loaded - that's async. We scroll the message into
               view, but then the downstream loading of IMG.src pushes

               the message content back down, sliding the message
               behind the input field. This can be verified by delaying the

               message scroll by a second or so to give the image time
               to load (from a local server instance).
            */
            D.addClass(self.e.inputWrapper,'unsticky');

          }
          if(mip.nextSibling) mip.parentNode.insertBefore(e, mip.nextSibling);
          else mip.parentNode.appendChild(e);
          if(false && this.isUiFlipped()){
            //e.scrollIntoView();
            setTimeout(function(){
              //self.e.inputWrapper.scrollIntoView();
              //self.e.fileSelectWrapper.scrollIntoView();
              //e.scrollIntoView();
              //D.removeClass(self.e.inputWrapper,'unsticky');
              self.e.inputWrapper.scrollIntoView();
            },0);
          }
        }
      },
      /** Returns true if chat-only mode is enabled. */
      isChatOnlyMode: ()=>document.body.classList.contains('chat-only-mode'),
      /** Returns true if the UI seems to be in "bottom-up" mode. */
      isUiFlipped: function(){
        const style = window.getComputedStyle(this.e.contentDiv);
        return style.flexDirection.indexOf("-reverse")>0;
      },
      /**
         Enters (if passed a truthy value or no arguments) or leaves
         "chat-only" mode. That mode hides the page's header and
         footer, leaving only the chat application visible to the
         user.
      */
      chatOnlyMode: function f(yes){
        if(undefined === f.elemsToToggle){
          f.elemsToToggle = [];
          document.querySelectorAll(
            "body > div.header, body > div.footer"
          ).forEach((e)=>f.elemsToToggle.push(e));
        }
        if(!arguments.length) yes = true;
        if(yes === this.isChatOnlyMode()) return this;
        if(yes){
          D.addClass(f.elemsToToggle, 'hidden');
          D.addClass(document.body, 'chat-only-mode');
          document.body.scroll(0,document.body.height);
        }else{
          D.removeClass(f.elemsToToggle, 'hidden');
          D.removeClass(document.body, 'chat-only-mode');
          if(false){
            setTimeout(()=>document.body.scrollIntoView(
              /*moves to (0,0), whereas scrollTo(0,0) does not!
                setTimeout() is unfortunately necessary to get the scroll
                placement correct.*/
            ), 0);
          }
        }
        const msg = document.querySelector('.message-widget');
        if(msg) setTimeout(()=>msg.scrollIntoView(),0);
        return this;
      },
      toggleChatOnlyMode: function(){
        return this.chatOnlyMode(!this.isChatOnlyMode());
      },
      settings:{
        get: (k,dflt)=>F.storage.get(k,dflt),
        getBool: (k,dflt)=>F.storage.getBool(k,dflt),
        set: (k,v)=>F.storage.set(k,v),
        defaults:{
          "images-inline": !!F.config.chat.imagesInline,
          "monospace-messages": false,
          "bottom-up": true
        }
      }
    };
    /* Install default settings... */
    Object.keys(cs.settings.defaults).forEach(function(k){
      const v = cs.settings.get(k,cs);
      if(cs===v) cs.settings.set(k,cs.settings.defaults[k]);
    });
    if(window.innerWidth<window.innerHeight){
      /* Alignment of 'my' messages: right alignment is conventional
         for mobile chat apps but can be difficult to read in wide
         windows (desktop/tablet landscape mode), so we default to a
         layout based on the apparently "orientation" of the window:
         tall vs wide. Can be toggled via settings popup. */
      document.body.classList.add('my-messages-right');
    }
    if(cs.settings.getBool("bottom-up")){
      document.body.classList.add('chat-bottom-up');
    }
    if(cs.settings.getBool('monospace-messages',false)){
      document.body.classList.add('monospace-messages');
    }
    cs.e.inputCurrent = cs.e.inputSingle;
    cs.pageTitleOrig = cs.e.pageTitle.innerText;

    if(true){

      }
    },{
      label: "Left-align my posts",
      boolValue: ()=>!document.body.classList.contains('my-messages-right'),
      callback: function f(){
        document.body.classList.toggle('my-messages-right');
      }
    },{
      label: "Bottom-up chat",
      boolValue: ()=>document.body.classList.contains('chat-bottom-up'),
      callback: function(){
        document.body.classList.toggle('chat-bottom-up');
        Chat.settings.set('bottom-up',
                          document.body.classList.contains('chat-bottom-up'));
        if(false){
          /* Reminder: in order to get a good scrolling effect when
             sticky mode is enabled for Chat.e.inputWrapper, BOTH of
             these scrollIntoView() calls are needed. */
          const e = document.querySelector(
            '.message-widget'/*this is always the most recent message,
                               even if flexbox placed it at the end of
                               the page!*/
          );
          if(e) e.scrollIntoView();
        }
        setTimeout(()=>Chat.e.inputWrapper.scrollIntoView(), 0);
      }
    },{
      label: "Images inline",
      boolValue: ()=>Chat.settings.getBool('images-inline'),
      callback: function(){
        const v = Chat.settings.getBool('images-inline',true);
        Chat.settings.set('images-inline', !v);
        F.toast.message("Image mode set to "+(v ? "hyperlink" : "inline")+".");

    settingsPopup.hide();
    settingsPopup.options.adjustX = function(x){
      const rect = settingsButton.getBoundingClientRect();
      return rect.right - popupSize.width;
    };
    settingsPopup.options.adjustY = function(y){
      const rect = settingsButton.getBoundingClientRect();
      if(Chat.isUiFlipped()){
        return rect.top - popupSize.height -2;
      }else{
        return rect.bottom + 2;
      }
    };
  })()/*#chat-settings-button setup*/;

  
  /** Callback for poll() to inject new content into the page.  jx ==
      the response from /chat-poll. If atEnd is true, the message is
      appended to the end of the chat list, else the beginning (the

  (function(){
    /** Add toolbar for loading older messages. We use a FIELDSET here
        because a fieldset is the only parent element type which can
        automatically enable/disable its children by
        enabling/disabling the parent element. */
    const loadLegend = D.legend("Load...");
    const toolbar = Chat.e.loadToolbar = D.attr(
      D.fieldset(loadLegend), "id", "load-msg-toolbar"
    );
    Chat.disableDuringAjax.push(toolbar);
    /* Loads the next n oldest messages, or all previous history if n is negative. */
    const loadOldMessages = function(n){
      Chat.ajaxStart();
      var gotMessages = false;

             || 0===gotMessages/*we found no history*/
             || (n>0 && gotMessages<n /*we got fewer history entries than requested*/)
             || (false!==gotMessages && n<0 && gotMessages<Chat.loadMessageCount
                 /*we asked for default amount and got fewer than that.*/)){
            /* We've loaded all history. Permanently disable the
               history-load toolbar and keep it from being re-enabled
               via the ajaxStart()/ajaxEnd() mechanism... */
            const div = Chat.e.loadToolbar.querySelector('div');
            D.append(D.clearElement(div), "All history has been loaded.");
            D.addClass(Chat.e.loadToolbar, 'all-done');
            const ndx = Chat.disableDuringAjax.indexOf(Chat.e.loadToolbar);
            if(ndx>=0) Chat.disableDuringAjax.splice(ndx,1);
            Chat.e.loadToolbar.disabled = true;
          }
          if(gotMessages > 0){
            F.toast.message("Loaded "+gotMessages+" older messages.");
          }
          Chat.ajaxEnd();
        });
    };

    toolbar.disabled = true /*will be enabled when msg load finishes */;
  })()/*end history loading widget setup*/;

  async function poll(isFirstCall){
    if(poll.running) return;
    poll.running = true;
    if(isFirstCall) Chat.ajaxStart();

    var p = fetch("chat-poll?name=" + Chat.mxMsg);
    p.then(x=>x.json())
      .then(y=>newcontent(y))
      .catch(e=>console.error(e))
    /* ^^^ we don't use Chat.reportError(e) here b/c the polling
       fails exepectedly when it times out, but is then immediately
       resumed, and reportError() produces a loud error message. */
      .finally(function(x){
        if(isFirstCall){

          Chat.ajaxEnd();
          Chat.e.inputWrapper.scrollIntoView();
        }
        poll.running=false;
      });
  }
  poll.running = false;
  poll(true);
  setInterval(poll, 1000);
  F.page.chat = Chat/* enables testing the APIs via the dev tools */;
})();

  flex: 1 1 auto/*eliminates dead no-click zones on the right*/;
}
body.chat .chat-settings-popup > span.menu-entry > input[type=checkbox] {
  cursor: inherit;
}
/** Container for the list of /chat messages. */
body.chat #chat-messages-wrapper {
  display: flex;
  flex-direction: column;
}
body.chat.chat-bottom-up #chat-messages-wrapper {
  flex-direction: column-reverse;
  z-index: 99 /* so that it scrolls under input area. If it's
                 lower than div.content then mouse events to it
                 are blocked!*/;
}
body.chat div.content {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;







  align-items: stretch;
}
body.chat.chat-bottom-up div.content {
  flex-direction: column-reverse;
}
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid black;
  padding: 0.5em 1em;
  margin-bottom: 0.5em;
  /*position: sticky; top: 0; disabled for the time being because of
    scroll-related quirks which are still unresolved. */
  z-index: 100
    /* see notes in #chat-messages-wrapper. The various popups require a
       z-index higher than this one. */;
}
body.chat.chat-bottom-up #chat-input-area {
  border-bottom: none;
  border-top: 1px solid black;
  margin-bottom: 0;
  margin-top: 0.5em;
  position: initial /*sticky currently disabled due to scrolling-related issues*/;
  bottom: 0;
}
/* An internal hack to try to help resolve a message-scrolling quirk
   when #chat-input-area is sticky on the bottom of the screen. */
body.chat.chat-bottom-up #chat-input-area.unsticky {
  position: initial;
}
/* Widget holding the chat message input field, send button, and
   settings button. */
body.chat #chat-input-line {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.25em;
  align-items: flex-start;