Fossil

  @ <form action="%R/setup_notification" method="post"><div>
  @ <input type="submit"  name="submit" value="Apply Changes"><hr>
  login_insert_csrf_secret();

  entry_attribute("Canonical Server URL", 40, "email-url",
                   "eurl", "", 0);
  @ <p><b>Required.</b>
  @ This is URL used as the basename for hyperlinks included in
  @ This URL is used as the basename for hyperlinks included in
  @ email alert text.  Omit the trailing "/".
  @ Suggested value: "%h(g.zBaseURL)"
  @ (Property: "email-url")</p>
  @ <hr>

  entry_attribute("Administrator email address", 40, "email-admin",
                   "eadmin", "", 0);

/*
** WEBPAGE: chat loadavg-exempt
**
** Start up a browser-based chat session.
**
** This is the main page that humans use to access the chatroom.  Simply
** point a web-browser at /chat and the screen fills with the latest
** chat messages, and waits for new one.
** chat messages, and waits for new ones.
**
** Other /chat-OP pages are used by XHR requests from this page to
** send new chat message, delete older messages, or poll for changes.
*/
void chat_webpage(void){
  char *zAlert;
  char *zProjectName;

  @     <div contenteditable id="chat-input-field-x" \
  @      data-placeholder0="%h(zInputPlaceholder0)" \
  @      data-placeholder="%h(zInputPlaceholder0)" \
  @      class="chat-input-field hidden"></div>
  @     <div id='chat-buttons-wrapper'>
  @       <span class='cbutton' id="chat-button-preview" \
  @         title="Preview message (Shift-Enter)">&#128065;</span>
  @       <span class='cbutton' id="chat-button-search" \
  @         title="Search chat history">&#x1f50d;</span>
  @       <span class='cbutton' id="chat-button-attach" \
  @         title="Attach file to message">%s(zPaperclip)</span>
  @       <span class='cbutton' id="chat-button-settings" \
  @         title="Configure chat">&#9881;</span>
  @       <span class='cbutton' id="chat-button-submit" \
  @         title="Send message (Ctrl-Enter)">&#128228;</span>
  @     </div>

  @     <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' class='message-widget-content'></div>
  @  <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></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 */
  @ <button>Close Settings</button>
  @ <div class='button-bar'><button class='action-close'>Close Settings</button></div>
  @ </div>
  @ <div id='chat-search' class='hidden chat-view'>
  @   <div class='message-widget-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'>
  /* New chat messages get inserted immediately after this element */
  @ <span id='message-inject-point'></span>
  @ </div>
  fossil_free(zProjectName);
  fossil_free(zInputPlaceholder0);

  chat_emit_alert_list();
  @ }, false);
  @ </script>
  builtin_request_js("fossil.page.chat.js");
  style_finish_page();
}

/*
/* Definition of repository tables used by chat
** Definition of repository tables used by chat
*/
static const char zChatSchema1[] =
@ CREATE TABLE repository.chat(
@   msgid INTEGER PRIMARY KEY AUTOINCREMENT,
@   mtime JULIANDAY,  -- Time for this entry - Julianday Zulu
@   lmtime TEXT,      -- Client YYYY-MM-DDZHH:MM:SS when message originally sent
@   xfrom TEXT,       -- Login of the sender

    db_multi_exec(zChatSchema1/*works-like:""*/);
  }else if( !db_table_has_column("repository","chat","lmtime") ){
    if( !db_table_has_column("repository","chat","mdel") ){
      db_multi_exec("ALTER TABLE chat ADD COLUMN mdel INT");
    }
    db_multi_exec("ALTER TABLE chat ADD COLUMN lmtime TEXT");
  }

  if( !db_table_exists("repository", "chatfts1") ){
    db_multi_exec(
      "CREATE VIRTUAL TABLE repository.chatfts1 USING fts5("
      "    xmsg, content=chat, content_rowid=msgid, tokenize=porter"
      ");"
      "CREATE TRIGGER repository.chat_ai AFTER INSERT ON chat BEGIN "
      "  INSERT INTO chatfts1(rowid, xmsg) VALUES(new.msgid, new.xmsg);"
      "END;"
      "CREATE TRIGGER repository.chat_ad AFTER DELETE ON chat BEGIN "
      "  INSERT INTO chatfts1(chatfts1, rowid, xmsg) "
      "    VALUES('delete', old.msgid, old.xmsg);"
      "END;"
      "INSERT INTO repository.chatfts1(chatfts1) VALUES('rebuild');"
    );
  }
}

/*
** Delete old content from the chat table.
*/
static void chat_purge(void){
   int mxCnt = db_get_int("chat-keep-count",50);

  }
  return blob_str(&out);
}

/*
** COMMAND: test-chat-formatter
**
** Usage: %fossil test-chat-formatter STRING ...
** Usage: %fossil test-chat-formatter ?OPTIONS? STRING ...
**
** Transform each argument string into HTML that will display the
** chat message.  This is used to test the formatter and to verify
** that a malicious message text will not cause HTML or JS injection
** into the chat display in a browser.
**
** Options:
**
**     -w|--wiki     Assume fossil wiki format instead of markdown
*/
void chat_test_formatter_cmd(void){
  int i;
  char *zOut;
  int const isWiki = find_option("w","wiki",0)!=0;
  db_find_and_open_repository(0,0);
  g.perm.Hyperlink = 1;
  for(i=0; i<g.argc; i++){
    zOut = chat_format_to_html(g.argv[i], 0);
    fossil_print("[%d]: %s\n", i, zOut);
  for(i=2; i<g.argc; i++){
    zOut = chat_format_to_html(g.argv[i], isWiki);
    fossil_print("[%d]: %s\n", i-1, zOut);
    fossil_free(zOut);
  }
}

/*
**
*/
static int chat_poll_rowstojson(
  Stmt *p,                        /* Statement to read rows from */
  const char *zChatUser,          /* Current user */
  int bRaw,                       /* True to return raw format xmsg */
  Blob *pJson                     /* Append json array entries here */
){
  int cnt = 0;
  while( db_step(p)==SQLITE_ROW ){
    int isWiki = 0;             /* True if chat message is x-fossil-wiki */
    int id = db_column_int(p, 0);
    const char *zDate = db_column_text(p, 1);
    const char *zFrom = db_column_text(p, 2);
    const char *zRawMsg = db_column_text(p, 3);
    int nByte = db_column_int(p, 4);
    const char *zFName = db_column_text(p, 5);
    const char *zFMime = db_column_text(p, 6);
    int iToDel = db_column_int(p, 7);
    const char *zLMtime = db_column_text(p, 8);
    char *zMsg;
    if(cnt++){
      blob_append(pJson, ",\n", 2);
    }
    blob_appendf(pJson, "{\"msgid\":%d,", id);
    blob_appendf(pJson, "\"mtime\":\"%.10sT%sZ\",", zDate, zDate+11);
    if( zLMtime && zLMtime[0] ){
      blob_appendf(pJson, "\"lmtime\":%!j,", zLMtime);
    }
    blob_append(pJson, "\"xfrom\":", -1);
    if(zFrom){
      blob_appendf(pJson, "%!j,", zFrom);
      isWiki = fossil_strcmp(zFrom,zChatUser)==0;
    }else{
      /* see https://fossil-scm.org/forum/forumpost/e0be0eeb4c */
      blob_appendf(pJson, "null,");
      isWiki = 0;
    }
    blob_appendf(pJson, "\"uclr\":%!j,",
        isWiki ? "transparent" : user_color(zFrom ? zFrom : "nobody"));

    if(bRaw){
      blob_appendf(pJson, "\"xmsg\":%!j,", zRawMsg);
    }else{
      zMsg = chat_format_to_html(zRawMsg ? zRawMsg : "", isWiki);
      blob_appendf(pJson, "\"xmsg\":%!j,", zMsg);
      fossil_free(zMsg);
    }

    if( nByte==0 ){
      blob_appendf(pJson, "\"fsize\":0");
    }else{
      blob_appendf(pJson, "\"fsize\":%d,\"fname\":%!j,\"fmime\":%!j",
          nByte, zFName, zFMime);
    }

    if( iToDel ){
      blob_appendf(pJson, ",\"mdel\":%d}", iToDel);
    }else{
      blob_append(pJson, "}", 1);
    }
  }
  db_reset(p);

  return cnt;
}

/*
** WEBPAGE: chat-poll hidden loadavg-exempt
**
** The chat page generated by /chat using an XHR to this page to
** request new chat content.  A typical invocation is:
**

*/
void chat_poll_webpage(void){
  Blob json;                  /* The json to be constructed and returned */
  sqlite3_int64 dataVersion;  /* Data version.  Used for polling. */
  const int iDelay = 1000;    /* Delay until next poll (milliseconds) */
  int nDelay;                 /* Maximum delay.*/
  const char *zChatUser;      /* chat-timeline-user */
  int isWiki = 0;             /* True if chat message is x-fossil-wiki */
  int msgid = atoi(PD("name","0"));
  const int msgBefore = atoi(PD("before","0"));
  int nLimit = msgBefore>0 ? atoi(PD("n","0")) : 0;
  const int bRaw = P("raw")!=0;

  Blob sql = empty_blob;
  Stmt q1;

      msgid
    );
  }
  db_prepare(&q1, "%s", blob_sql_text(&sql));
  blob_reset(&sql);
  blob_init(&json, "{\"msgs\":[\n", -1);
  while( nDelay>0 ){
    int cnt = 0;
    int cnt = chat_poll_rowstojson(&q1, zChatUser, bRaw, &json);
    while( db_step(&q1)==SQLITE_ROW ){
      int id = db_column_int(&q1, 0);
      const char *zDate = db_column_text(&q1, 1);
      const char *zFrom = db_column_text(&q1, 2);
      const char *zRawMsg = db_column_text(&q1, 3);
      int nByte = db_column_int(&q1, 4);
      const char *zFName = db_column_text(&q1, 5);
      const char *zFMime = db_column_text(&q1, 6);
      int iToDel = db_column_int(&q1, 7);
      const char *zLMtime = db_column_text(&q1, 8);
      char *zMsg;
      if(cnt++){
        blob_append(&json, ",\n", 2);
      }
      blob_appendf(&json, "{\"msgid\":%d,", id);
      blob_appendf(&json, "\"mtime\":\"%.10sT%sZ\",", zDate, zDate+11);
      if( zLMtime && zLMtime[0] ){
        blob_appendf(&json, "\"lmtime\":%!j,", zLMtime);
      }
      blob_append(&json, "\"xfrom\":", -1);
      if(zFrom){
        blob_appendf(&json, "%!j,", zFrom);
        isWiki = fossil_strcmp(zFrom,zChatUser)==0;
      }else{
        /* see https://fossil-scm.org/forum/forumpost/e0be0eeb4c */
        blob_appendf(&json, "null,");
        isWiki = 0;
      }
      blob_appendf(&json, "\"uclr\":%!j,",
                 isWiki ? "transparent" : user_color(zFrom ? zFrom : "nobody"));

      if(bRaw){
        blob_appendf(&json, "\"xmsg\":%!j,", zRawMsg);
      }else{
        zMsg = chat_format_to_html(zRawMsg ? zRawMsg : "", isWiki);
        blob_appendf(&json, "\"xmsg\":%!j,", zMsg);
        fossil_free(zMsg);
      }

      if( nByte==0 ){
        blob_appendf(&json, "\"fsize\":0");
      }else{
        blob_appendf(&json, "\"fsize\":%d,\"fname\":%!j,\"fmime\":%!j",
               nByte, zFName, zFMime);
      }

      if( iToDel ){
        blob_appendf(&json, ",\"mdel\":%d}", iToDel);
      }else{
        blob_append(&json, "}", 1);
      }
    }
    db_reset(&q1);
    if( cnt || msgBefore>0 ){
      break;
    }
    sqlite3_sleep(iDelay); nDelay--;
    while( nDelay>0 ){
      sqlite3_int64 newDataVers = db_int64(0,"PRAGMA repository.data_version");
      if( newDataVers!=dataVersion ){
        dataVersion = newDataVers;
        break;
      }
      sqlite3_sleep(iDelay); nDelay--;
    }
  } /* Exit by "break" */
  db_finalize(&q1);
  blob_append(&json, "\n]}", 3);
  cgi_set_content(&json);
  return;
}


/*
** WEBPAGE: chat-query hidden loadavg-exempt
*/
void chat_query_webpage(void){
  Blob json;                  /* The json to be constructed and returned */
  int nLimit = atoi(PD("n","500"));
  const char *zQuery = PD("q", "");
  int iFirst = atoi(PD("i","0"));

  Blob sql = empty_blob;
  Stmt q1;
  i64 iMin = 0;
  i64 iMax = 0;

  login_check_credentials();
  if( !g.perm.Chat ) {
    chat_emit_permissions_error(1);
    return;
  }
  chat_create_tables();
  cgi_set_content_type("application/json");

  if( zQuery[0] ){
    char *zChatRobot = db_get("chat-timeline-user", 0);
    iMax = db_int64(0, "SELECT max(msgid) FROM chat");
    iMin = db_int64(0, "SELECT min(msgid) FROM chat");
    blob_append_sql(&sql,
        "SELECT * FROM ("
        "SELECT c.msgid, datetime(c.mtime), c.xfrom, "
        "  highlight(chatfts1, 0, '<span class=\"match\">', '</span>'), "
        "  octet_length(c.file), c.fname, c.fmime, c.mdel, c.lmtime"
        "  FROM chatfts1(%Q) f, chat c WHERE f.rowid=c.msgid ",
        zQuery
    );
    if( zChatRobot!=0 ){
      if( zChatRobot[0]!=0 ){
        blob_append_sql(&sql, "AND c.xfrom IS NOT %Q ", zChatRobot);
      }
      fossil_free( zChatRobot );
    }
    blob_append_sql(&sql,
        "  ORDER BY f.rowid DESC LIMIT %d"
        ") ORDER BY 1 ASC", nLimit
    );
  }else{
    blob_append_sql(&sql,
        "SELECT msgid, datetime(mtime), xfrom, "
        "  xmsg, octet_length(file), fname, fmime, mdel, lmtime"
        "  FROM chat WHERE msgid>=%d LIMIT %d",
        iFirst, nLimit
    );
  }

  db_prepare(&q1, "%s", blob_sql_text(&sql));
  blob_reset(&sql);
  blob_init(&json, "{\"msgs\":[\n", -1);
  chat_poll_rowstojson(&q1, "", 0, &json);
  db_finalize(&q1);
  blob_appendf(&json, "\n], \"first\":%lld, \"last\":%lld}", iMin, iMax);
  cgi_set_content(&json);
  return;
}

/*
** WEBPAGE: chat-fetch-one hidden loadavg-exempt
**
** /chat-fetch-one/N
**
** Fetches a single message with the given ID, if available.
**

        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'),
        viewSearch: E1('#chat-search'),
        previewContent: E1('#chat-preview-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,

      },
      filterState:{
        activeUser: undefined,
        match: function(uname){
          return this.activeUser===uname || !this.activeUser;
        }
      },
      /** Gets (no args) or sets (1 arg) the current input text field value,
          taking into account single- vs multi-line input. The getter returns
          a string and the setter returns this object. */
      inputValue: function(){
      /** Gets (no args) or sets (1 arg) the current input text field
          value, taking into account single- vs multi-line input. The
          getter returns a string and the setter returns this
          object. As a special case, if arguments[0] is a boolean
          value, it behaves like a getter and, if arguments[0]===true
          it clears the input field before returning. */
      inputValue: function(/*string newValue | bool clearInputField*/){
        const e = this.inputElement();
        if(arguments.length){
        if(arguments.length && 'boolean'!==typeof arguments[0]){
          if(e.isContentEditable) e.innerText = arguments[0];
          else e.value = arguments[0];
          return this;
        }
        return e.isContentEditable ? e.innerText : e.value;
        const rc = e.isContentEditable ? e.innerText : e.value;
        if( true===arguments[0] ){
          if(e.isContentEditable) e.innerText = '';
          else e.value = '';
        }
        return rc;
      },
      /** Asks the current user input field to take focus. Returns this. */
      inputFocus: function(){
        this.inputElement().focus();
        return this;
      },
      /** Returns the current message input element. */

          callee.addUserElem = function(u){
            const uSpan = D.addClass(D.span(), 'chat-user');
            const uDate = self.usersLastSeen[u];
            if(self.filterState.activeUser===u){
              uSpan.classList.add('selected');
            }
            uSpan.dataset.uname = u;
            D.append(uSpan, u, "\n", 
            D.append(uSpan, u, "\n",
                     D.append(
                       D.addClass(D.span(),'timestamp'),
                       localTimeString(uDate)//.substr(5/*chop off year*/)
                     ));
            if(uDate.$uColor){
              uSpan.style.backgroundColor = uDate.$uColor;
            }

    /* Left-zero-pad a number to at least 2 digits */
    const dowMap = {
      /* Map of Date.getDay() values to weekday names. */
      0: "Sunday", 1: "Monday", 2: "Tuesday",
      3: "Wednesday", 4: "Thursday", 5: "Friday",
      6: "Saturday"
    };
    /* Given a Date, returns the timestamp string used in the
       "tab" part of message widgets. */
    const theTime = function(d){
      return [
        //d.getFullYear(),'-',pad2(d.getMonth()+1/*sigh*/),
        //'-',pad2(d.getDate()), ' ',
        d.getHours(),":",
        (d.getMinutes()+100).toString().slice(1,3),
        ' ', dowMap[d.getDay()]
      ].join('');
    /* Given a Date, returns the timestamp string used in the "tab"
       part of message widgets. If longFmt is true then a verbose
       format is used, else a brief format is used. The returned string
       is in client-local time. */
    const theTime = function(d, longFmt=true){
      const li = [];
      if( longFmt ){
        //li.push( d.toISOString() );
        li.push(
          d.getFullYear(),
          '-', pad2(d.getMonth()+1/*sigh*/),
          '-', pad2(d.getDate()),
          ' ',
          d.getHours(), ":",
          (d.getMinutes()+100).toString().slice(1,3)
        );
      }else{
        li.push(
          d.getHours(),":",
          (d.getMinutes()+100).toString().slice(1,3),
          ' ', dowMap[d.getDay()]
        );
      }
      return li.join('');
    };

    /**
       Returns true if this page believes it can embed a view of the
       file wrapped by the given message object, else returns false.
    */
    const canEmbedFile = function f(msg){

        const isHidden = iframe.classList.contains('hidden');
        if(isHidden) D.removeClass(iframe, 'hidden');
        iframe.style.maxHeight = iframe.style.height
          = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
        if(isHidden) D.addClass(iframe, 'hidden');
      }
    };
    

    cf.prototype = {
      scrollIntoView: function(){
        this.e.content.scrollIntoView();
      },
      setMessage: function(m){
        const ds = this.e.body.dataset;
        ds.timestamp = m.mtime;

        D.clearElement(this.e.tab);
        var contentTarget = this.e.content;
        var eXFrom /* element holding xfrom name */;
        if(m.xfrom){
          eXFrom = D.append(D.addClass(D.span(), 'xfrom'), m.xfrom);
          const wrapper = D.append(
            D.span(), eXFrom,
            D.text(" #",(m.msgid||'???'),' @ ',theTime(d)))
            D.text(" #",(m.msgid||'???'),' ',theTime(d)))
          D.append(this.e.tab, wrapper);
        }else{/*notification*/
          D.addClass(this.e.body, 'notification');
          if(m.isError){
            D.addClass([contentTarget, this.e.tab], 'error');
          }
          D.append(

        const theMsg = findMessageWidgetParent(ev.target);
        if(theMsg) f.popup.show(theMsg);
      }/*_handleLegendClicked()*/
    };
    return cf;
  })()/*MessageWidget*/;

  /**
     A widget for loading more messages (context) around a /chat-query
     result message.
  */
  Chat.SearchCtxLoader = (function(){
    const nMsgContext = 5;
    const zUpArrow = '\u25B2';
    const zDownArrow = '\u25BC';
    const cf = function(o){

      /* iFirstInTable:
      **   msgid of first row in chatfts table.
      **
      ** iLastInTable:
      **   msgid of last row in chatfts table.
      **
      ** iPrevId:
      **   msgid of message immediately above this spacer. Or 0 if this
      **   spacer is above all results.
      **
      ** iNextId:
      **   msgid of message immediately below this spacer. Or 0 if this
      **   spacer is below all results.
      **
      ** bIgnoreClick:
      **   ignore any clicks if this is true. This is used to ensure there
      **   is only ever one request belonging to this widget outstanding
      **   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'),

        above:   D.addClass(D.div(), 'spacer-widget-above'),
        buttons: D.addClass(D.div(), 'spacer-widget-buttons'),
        below:   D.addClass(D.div(), 'spacer-widget-below'),

        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.buttons, this.e.up, this.e.down, this.e.all);
      D.append(this.e.body, this.e.above, this.e.buttons, this.e.below);

      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() {
        const o = this.o;

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

        D.addClass([this.e.up, this.e.down, this.e.all], 'hidden');

        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');
            this.e.all.innerText = (
              zUpArrow + " Load " + nDiff + " more " + zDownArrow
            );
          }else{
            if( o.iPrevId!=0 ) D.removeClass(this.e.up, 'hidden');
            if( o.iNextId!=0 ) D.removeClass(this.e.down, 'hidden');
          }
        }
      },

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

        var iFirst = 0;           /* msgid of first message to fetch */
        var nFetch = 0;           /* Number of messages to fetch */
        var iEof = 0;             /* last msgid in spacers range, plus 1 */

        const e = this.e, o = this.o;
        this.bIgnoreClick = true;

        /* Figure out the required range of messages. */
        if( bDown ){
          iFirst = this.o.iNextId - nMsgContext;
          if( iFirst<this.o.iFirstInTable ){
            iFirst = this.o.iFirstInTable;
          }
        }else{
          iFirst = this.o.iPrevId+1;
        }
        nFetch = nMsgContext;
        iEof = (this.o.iNextId > 0) ? this.o.iNextId : this.o.iLastInTable+1;
        if( iFirst+nFetch>iEof ){
          nFetch = iEof - iFirst;
        }
        const ms = this;
        F.fetch("chat-query",{
          urlParams:{
            q: '',
            n: nFetch,
            i: iFirst
          },
          responseType: "json",
          onload:function(jx){
            const firstChildOfBelow = e.below.firstChild;
            jx.msgs.forEach((m) => {
              var mw = new Chat.MessageWidget(m);
              if( bDown ){
                e.below.insertBefore(mw.e.body, firstChildOfBelow);
              }else{
                D.append(e.above, mw.e.body);
              }
            });
            if( bDown ){
              o.iNextId -= jx.msgs.length;
            }else{
              o.iPrevId += jx.msgs.length;
            }
            ms.set_button_visibility();
            ms.bIgnoreClick = false;
          }
        });
      }
    };

    return cf;
  })() /*SearchCtxLoader*/;

  const BlobXferState = (function(){
    /* State for paste and drag/drop */
    const bxs = {
      dropDetails: document.querySelector('#chat-drop-details'),
      blob: undefined,
      clear: function(){
        this.blob = undefined;

    Chat.reportErrorAsMessage(w);
  };

  /**
     Submits the contents of the message input field (if not empty)
     and/or the file attachment field to the server. If both are
     empty, this is a no-op.

     If the current view is the history search, this instead sends the
     input text to that widget.
  */
  Chat.submitMessage = function f(){
    if(!f.spaces){
      f.spaces = /\s+$/;
      f.markdownContinuation = /\\\s+$/;
      f.spaces2 = /\s{3,}$/;
    }
    if( this.e.currentView===this.e.viewSearch ){
      this.submitSearch();
      return;
    }
    this.setCurrentView(this.e.viewMessages);
    const fd = new FormData();
    const fallback = {msg: this.inputValue()};
    var msg = fallback.msg;
    if(msg && (msg.indexOf('\n')>0 || f.spaces.test(msg))){
      /* Cosmetic: trim most whitespace from the ends of lines to try to

         windows (desktop/tablet landscape mode), so we default to a
         layout based on the apparent "orientation" of the window:
         tall vs wide. Can be toggled via settings. */
      document.body.classList.add('my-messages-right');
    }
    const settingsButton = document.querySelector('#chat-button-settings');
    const optionsMenu = E1('#chat-config-options');
    const cbToggle = function(ev){
    const eToggleView = function(ev){
      ev.preventDefault();
      ev.stopPropagation();
      Chat.setCurrentView(Chat.e.currentView===Chat.e.viewConfig
                          ? Chat.e.viewMessages : Chat.e.viewConfig);
      return false;
    };
    D.attr(settingsButton, 'role', 'button').addEventListener('click', cbToggle, false);
    Chat.e.viewConfig.querySelector('button').addEventListener('click', cbToggle, false);
    D.attr(settingsButton, 'role', 'button').addEventListener('click', eToggleView, false);
    Chat.e.viewConfig.querySelector('button.action-close').addEventListener('click', eToggleView, false);

    /** Internal acrobatics to allow certain settings toggles to access
        related toggles. */
    const namedOptions = {
      activeUsers:{
        label: "Show active users list",
        hint: "List users who have messages in the currently-loaded chat history.",

      if(op.persistentSetting){
        Chat.settings.addListener(
          op.persistentSetting,
          function(setting){
            if(op.checkbox) op.checkbox.checked = !!setting.value;
            else if(op.select) op.select.value = setting.value;
            if(op.callback) op.callback(setting);
          }             
          }
        );
        if(op.checkbox){
          op.checkbox.addEventListener(
            'change', function(){
              Chat.settings.set(op.persistentSetting, op.checkbox.checked)
            }, false);
        }

      }
      Chat.e.inputElementWrapper.classList[
        s.value ? 'add' : 'remove'
      ]('compact');
      Chat.e.inputFields[Chat.e.inputFields.$currentIndex].focus();
    });
    Chat.settings.addListener('edit-ctrl-send',function(s){
      const label = (s.value ? "Ctrl-" : "")+"Enter submits messages.";
      const label = "Submit message ("+(s.value ? "Ctrl-" : "")+"Enter)";
      Chat.e.inputFields.forEach((e)=>{
        const v = e.dataset.placeholder0 + " " +label;
        if(e.isContentEditable) e.dataset.placeholder = v;
        else D.attr(e,'placeholder',v);
      });
      Chat.e.btnSubmit.title = label;
    });

    const btnPreview = Chat.e.btnPreview;
    Chat.setPreviewText = function(t){
      this.setCurrentView(this.e.viewPreview);
      this.e.previewContent.innerHTML = t;
      this.e.viewPreview.querySelectorAll('a').forEach(addAnchorTargetBlank);
      this.inputFocus();
    };
    Chat.e.viewPreview.querySelector('#chat-preview-close').
    Chat.e.viewPreview.querySelector('button.action-close').
      addEventListener('click', ()=>Chat.setCurrentView(Chat.e.viewMessages), false);
    let previewPending = false;
    const elemsToEnable = [btnPreview, Chat.e.btnSubmit, Chat.e.inputFields];
    const submit = function(ev){
      ev.preventDefault();
      ev.stopPropagation();
      if(previewPending) return false;

          D.enable(elemsToEnable);
        }
      });
      return false;
    };
    btnPreview.addEventListener('click', submit, false);
  })()/*message preview setup*/;

  (function(){/*Set up #chat-search and related bits */
    const btn = document.querySelector('#chat-button-search');
    D.attr(btn, 'role', 'button').addEventListener('click', function(ev){
      ev.preventDefault();
      ev.stopPropagation();
      const msg = Chat.inputValue();
      if( Chat.e.currentView===Chat.e.viewSearch ){
        if( msg ) Chat.submitSearch();
        else Chat.setCurrentView(Chat.e.viewMessages);
      }else{
        Chat.setCurrentView(Chat.e.viewSearch);
        if( msg ) Chat.submitSearch();
      }
      return false;
    }, false);
    Chat.e.viewSearch.querySelector('button.action-close').addEventListener('click', function(ev){
      ev.preventDefault();
      ev.stopPropagation();
      Chat.setCurrentView(Chat.e.viewMessages);
      return false;
    }, false);
  })()/*search view 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 (for loading older
      messages), else the beginning (the default). */
  const newcontent = function f(jx,atEnd){
    if(!f.processPost){

    btn.addEventListener('click',()=>loadOldMessages(Chat.loadMessageCount));
    btn = D.button("All previous messages");
    D.append(wrapper, btn);
    btn.addEventListener('click',()=>loadOldMessages(-1));
    D.append(Chat.e.viewMessages, toolbar);
    toolbar.disabled = true /*will be enabled when msg load finishes */;
  })()/*end history loading widget setup*/;

  /**
     Submits a history search using the main input field's current
     text. It is assumed that Chat.e.viewSearch===Chat.e.currentView.
  */
  Chat.submitSearch = function(){
    const term = this.inputValue(true);
    const eMsgTgt = D.clearElement(
      this.e.viewSearch.querySelector('.message-widget-content')
    )
    if( !term ) return;
    D.append( eMsgTgt, "Searching for ",term," ...");
    F.fetch(
      "chat-query", {
        urlParams: {q: term},
        responseType: 'json',
        onload:function(jx){
          let previd = 0;
          D.clearElement(eMsgTgt);
          jx.msgs.forEach((m)=>{
            const mw = new Chat.MessageWidget(m);
            const spacer = new Chat.SearchCtxLoader({
              first: jx.first,
              last: jx.last,
              previd: previd,
              nextid: m.msgid
            });
            D.append( eMsgTgt, spacer.e.body, 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
            });
            D.append( eMsgTgt, spacer.e.body );
          }else{
            D.append( D.clearElement(eMsgTgt),
                      'No results matching the search term: ',
                      term );
          }
        }
      }
    );
  };

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

  };
  poll.isFirstCall = true;
  Chat._gotServerError = poll.running = false;
  if( window.fossil.config.chat.fromcli ){
    Chat.chatOnlyMode(true);
  }
  Chat.intervalTimer = setInterval(poll, 1000);
  if(0){
    const flip = (ev)=>Chat.animate(ev.target,'anim-flip-h');
    document.querySelectorAll('#chat-buttons-wrapper .cbutton').forEach(function(e){
      e.addEventListener('click',flip, false);
    });
  }
  delete ForceResizeKludge.$disabled;
  ForceResizeKludge();
  Chat.animate.$disabled = false;
  setTimeout( ()=>Chat.inputFocus(), 0 );
  F.page.chat = Chat/* enables testing the APIs via the dev tools */;
});

/*
** This file contains the client-side implementation of fossil's
** /chat-search application.
*/
window.fossil.onPageLoad(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;
  };

/************************************************************************/
/************************************************************************/
/************************************************************************/

  /**
     Custom widget type for rendering messages (one message per
     instance). These are modelled after FIELDSET elements but we
     don't use FIELDSET because of cross-browser inconsistencies in
     features of the FIELDSET/LEGEND combination, e.g. inability to
     align legends via CSS in Firefox and clicking-related
     deficiencies in Safari.
  */
  var MessageWidget = (function(){
    /**
       Constructor. If passed an argument, it is passed to
       this.setMessage() after initialization.
    */
    const cf = function(){
      this.e = {
        body: D.addClass(D.div(), 'message-widget'),
        tab: D.addClass(D.div(), 'message-widget-tab'),
        content: D.addClass(D.div(), 'message-widget-content')
      };
      D.append(this.e.body, this.e.tab, this.e.content);
      this.e.tab.setAttribute('role', 'button');
      if(arguments.length){
        this.setMessage(arguments[0]);
      }
    };

    /**
       Returns true if this page believes it can embed a view of the
       file wrapped by the given message object, else returns false.
    */
    const canEmbedFile = function f(msg){
      if(!f.$rx){
        f.$rx = /\.((html?)|(txt)|(md)|(wiki)|(pikchr))$/i;
        f.$specificTypes = [
          'text/plain',
          'text/html',
          'text/x-markdown',
          /* Firefox sends text/markdown when uploading .md files */
          'text/markdown',
          'text/x-pikchr',
          'text/x-fossil-wiki'
          // add more as we discover which ones Firefox won't
          // force the user to try to download.
        ];
      }
      if(msg.fmime){
        if(msg.fmime.startsWith("image/")
           || f.$specificTypes.indexOf(msg.fmime)>=0){
          return true;
        }
      }
      return (msg.fname && f.$rx.test(msg.fname));
    };

    /**
      Returns true if the given message object "should"
      be embedded in fossil-rendered form instead of
      raw content form. This is only intended to be passed
      message objects for which canEmbedFile() returns true.
    */
    const shouldWikiRenderEmbed = function f(msg){
      if(!f.$rx){
        f.$rx = /\.((md)|(wiki)|(pikchr))$/i;
        f.$specificTypes = [
          'text/x-markdown',
          'text/markdown' /* Firefox-uploaded md files */,
          'text/x-pikchr',
          'text/x-fossil-wiki'
          // add more as we discover which ones Firefox won't
          // force the user to try to download.
        ];
      }
      if(msg.fmime){
        if(f.$specificTypes.indexOf(msg.fmime)>=0) return true;
      }
      return msg.fname && f.$rx.test(msg.fname);
    };

    const adjustIFrameSize = function(msgObj){
      const iframe = msgObj.e.iframe;
      const body = iframe.contentWindow.document.querySelector('body');
      if(body && !body.style.fontSize){
        /** _Attempt_ to force the iframe to inherit the message's text size
            if the body has no explicit size set. On desktop systems
            the size is apparently being inherited in that case, but on mobile
            not. */
        body.style.fontSize = window.getComputedStyle(msgObj.e.content);
      }
      if('' === iframe.style.maxHeight){
        /* Resize iframe height to fit the content. Workaround: if we
           adjust the iframe height while it's hidden then its height
           is 0, so we must briefly unhide it. */
        const isHidden = iframe.classList.contains('hidden');
        if(isHidden) D.removeClass(iframe, 'hidden');
        iframe.style.maxHeight = iframe.style.height
          = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
        if(isHidden) D.addClass(iframe, 'hidden');
      }
    };

    cf.prototype = {
      scrollIntoView: function(){
        this.e.content.scrollIntoView();
      },
      setMessage: function(m){
        const ds = this.e.body.dataset;
        ds.timestamp = m.mtime;
        ds.lmtime = m.lmtime;
        ds.msgid = m.msgid;
        ds.xfrom = m.xfrom || '';

        if(m.uclr){
          this.e.content.style.backgroundColor = m.uclr;
          this.e.tab.style.backgroundColor = m.uclr;
        }
        const d = new Date(m.mtime);
        D.clearElement(this.e.tab);
        var contentTarget = this.e.content;
        var eXFrom /* element holding xfrom name */;
        var eXFrom = D.append(D.addClass(D.span(), 'xfrom'), m.xfrom);
        const wrapper = D.append(
            D.span(), eXFrom,
            D.text(" #",(m.msgid||'???'),' @ ',d.toLocaleString()));
        D.append(this.e.tab, wrapper);

        if( m.xfrom && m.fsize>0 ){
          if( m.fmime
              && m.fmime.startsWith("image/")
              /* && Chat.settings.getBool('images-inline',true) */
            ){
            const extension = m.fname.split('.').pop();
            contentTarget.appendChild(D.img("chat-download/" + m.msgid +(
              extension ? ('.'+extension) : ''/*So that IMG tag mimetype guessing works*/
            )));
            ds.hasImage = 1;
          }else{
            // Add a download link.
            const downloadUri = window.fossil.rootPath+
                  'chat-download/' + m.msgid+'/'+encodeURIComponent(m.fname);
            const w = D.addClass(D.div(), 'attachment-link');
            const a = D.a(downloadUri,
              // ^^^ add m.fname to URL to cause downloaded file to have that name.
              "(" + m.fname + " " + m.fsize + " bytes)"
            )
            D.attr(a,'target','_blank');
            D.append(w, a);
            if(canEmbedFile(m)){
              /* Add an option to embed HTML attachments in an iframe. The primary
                 use case is attached diffs. */
              const shouldWikiRender = shouldWikiRenderEmbed(m);
              const downloadArgs = shouldWikiRender ? '?render' : '';
              D.addClass(contentTarget, 'wide');
              const embedTarget = this.e.content;
              const self = this;
              const btnEmbed = D.attr(D.checkbox("1", false), 'id',
                                      'embed-'+ds.msgid);
              const btnLabel = D.label(btnEmbed, shouldWikiRender
                                       ? "Embed (fossil-rendered)" : "Embed");
              /* Maintenance reminder: do not disable the toggle
                 button while the content is loading because that will
                 cause it to get stuck in disabled mode if the browser
                 decides that loading the content should prompt the
                 user to download it, rather than embed it in the
                 iframe. */
              btnEmbed.addEventListener('change',function(){
                if(self.e.iframe){
                  if(btnEmbed.checked){
                    D.removeClass(self.e.iframe, 'hidden');
                    if(self.e.$iframeLoaded) adjustIFrameSize(self);
                  }
                  else D.addClass(self.e.iframe, 'hidden');
                  return;
                }
                const iframe = self.e.iframe = document.createElement('iframe');
                D.append(embedTarget, iframe);
                iframe.addEventListener('load', function(){
                  self.e.$iframeLoaded = true;
                  adjustIFrameSize(self);
                });
                iframe.setAttribute('src', downloadUri + downloadArgs);
              });
              D.append(w, btnEmbed, btnLabel);
            }
            contentTarget.appendChild(w);
          }
        }
        if(m.xmsg){
          if(m.fsize>0){
            /* We have file/image content, so need another element for
               the message text. */
            contentTarget = D.div();
            D.append(this.e.content, contentTarget);
          }
          D.addClass(contentTarget, 'content-target'
                     /*target element for the 'toggle text mode' feature*/);
          // The m.xmsg text comes from the same server as this script and
          // is guaranteed by that server to be "safe" HTML - safe in the
          // sense that it is not possible for a malefactor to inject HTML
          // or javascript or CSS.  The m.xmsg content might contain
          // hyperlinks, but otherwise it will be markup-free.  See the
          // chat_format_to_html() routine in the server for details.
          //
          // Hence, even though innerHTML is normally frowned upon, it is
          // perfectly safe to use in this context.
          if(m.xmsg && 'string' !== typeof m.xmsg){
            // Used by Chat.reportErrorAsMessage()
            D.append(contentTarget, m.xmsg);
          }else{
            contentTarget.innerHTML = m.xmsg;
            // contentTarget.querySelectorAll('a').forEach(addAnchorTargetBlank);
            if(F.pikchr){
              F.pikchr.addSrcView(contentTarget.querySelectorAll('svg.pikchr'));
            }
          }
        }
        //console.debug("tab",this.e.tab);
        //console.debug("this.e.tab.firstElementChild",this.e.tab.firstElementChild);
        // this.e.tab.firstElementChild.addEventListener('click', this._handleLegendClicked, false);
        /*if(eXFrom){
          eXFrom.addEventListener('click', ()=>this.e.tab.click(), false);
        }*/
        return this;
      }
    };
    return cf;
  })()/*MessageWidget*/;

/************************************************************************/
/************************************************************************/
/************************************************************************/

  var MessageSpacer = (function(){
    const nMsgContext = 5;
    const zUpArrow = '\u25B2';
    const zDownArrow = '\u25BC';

    const cf = function(o){

      /* iFirstInTable:
      **   msgid of first row in chatfts table.
      **
      ** iLastInTable:
      **   msgid of last row in chatfts table.
      **
      ** iPrevId:
      **   msgid of message immediately above this spacer. Or 0 if this
      **   spacer is above all results.
      **
      ** iNextId:
      **   msgid of message immediately below this spacer. Or 0 if this
      **   spacer is below all results.
      **
      ** bIgnoreClick:
      **   ignore any clicks if this is true. This is used to ensure there
      **   is only ever one request belonging to this widget outstanding
      **   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'),

        above:   D.addClass(D.div(), 'spacer-widget-above'),
        buttons: D.addClass(D.div(), 'spacer-widget-buttons'),
        below:   D.addClass(D.div(), 'spacer-widget-below'),

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

      D.addClass(this.e.up, 'up');
      D.addClass(this.e.down, 'down');
      D.addClass(this.e.all, 'all');

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

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

      this.set_button_visibility();
    };

    cf.prototype = {
      set_button_visibility: function() {
        var o = this.o;

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

        D.addClass([this.e.up, this.e.down, this.e.all], 'hidden');

        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');
            this.e.all.innerText = (
              zUpArrow + " Load " + nDiff + " more " + zDownArrow
            );
          }else{
            if( o.iPrevId!=0 ) D.removeClass(this.e.up, 'hidden');
            if( o.iNextId!=0 ) D.removeClass(this.e.down, 'hidden');
          }
        }
      },

      load_messages: function(bDown) {
        var iFirst = 0;           /* msgid of first message to fetch */
        var nFetch = 0;           /* Number of messages to fetch */
        var iEof = 0;             /* last msgid in spacers range, plus 1 */

        var e = this.e;
        var o = this.o;

        if( this.bIgnoreClick ) return;
        this.bIgnoreClick = true;

        /* Figure out the required range of messages. */
        if( bDown ){
          iFirst = this.o.iNextId - nMsgContext;
          if( iFirst<this.o.iFirstInTable ){
            iFirst = this.o.iFirstInTable;
          }
        }else{
          iFirst = this.o.iPrevId+1;
        }
        nFetch = nMsgContext;
        iEof = (this.o.iNextId > 0) ? this.o.iNextId : this.o.iLastInTable+1;
        if( iFirst+nFetch>iEof ){
          nFetch = iEof - iFirst;
        }


        const ms = this;
        F.fetch("chat-query",{
          urlParams:{
            q: '',
            n: nFetch,
            i: iFirst
          },
          responseType: "json",

          onerror:function(err){
            console.error(err);
            alert(err.toString());
          },

          onload:function(jx){
            const firstChildOfBelow = e.below.firstChild;
            jx.msgs.forEach((m) => {
              var mw = new MessageWidget(m);
              if( bDown ){
                e.below.insertBefore(mw.e.body, firstChildOfBelow);
              }else{
                D.append(e.above, mw.e.body);
              }
            });

            if( bDown ){
              o.iNextId -= jx.msgs.length;
            }else{
              o.iPrevId += jx.msgs.length;
            }

            ms.set_button_visibility();
            ms.bIgnoreClick = false;
          }
        });
      }
    };

    return cf;
  })(); /* MessageSpacer */

  /* This is called to submit a search - because the user clicked the
  ** search button or pressed Enter in the input box.
  */
  const submit_search = function() {
    const v = E1('#textinput').value;
    F.fetch("chat-query",{
      urlParams:{
        q: v
      },
      responseType: "json",

      onerror:function(err){
        console.error(err);
        alert(err.toString());
      },

      onload:function(jx){
        var res = E1('#results');
        var previd = 0;

        D.clearElement(res);
        jx.msgs.forEach((m) => {
          var mw = new MessageWidget(m);
          var spacer = new MessageSpacer({
            first: jx.first,
            last: jx.last,
            previd: previd,
            nextid: m.msgid
          });

          D.append( res, spacer.e.body );
          D.append( res, mw.e.body );

          previd = m.msgid;
        });

        if( jx.msgs.length>0 ){
          var spacer = new MessageSpacer({
            first: jx.first,
            last: jx.last,
            previd: previd,
            nextid: 0
          });
          D.append( res, spacer.e.body );
        } else {
          res.innerHTML = '<center><i>No query results</i></center>';
        }

        window.scrollTo(0, E1('body').scrollHeight);
      }
    });
  }

  /* Add event listeners to call submit_search() if the user presses Enter
  ** or clicks the search button.
  */
  E1('#searchbutton').addEventListener('click', function(){
    submit_search();
  });
  E1('#textinput').addEventListener('keydown', function(ev){
    if( 13==ev.keyCode ){
      /* If the key pressed was Enter */
      submit_search();
    }
  });

  /* Focus the input widget */
  E1('#textinput').focus();

});

  $(SRCDIR)/fossil.copybutton.js \
  $(SRCDIR)/fossil.diff.js \
  $(SRCDIR)/fossil.dom.js \
  $(SRCDIR)/fossil.fetch.js \
  $(SRCDIR)/fossil.numbered-lines.js \
  $(SRCDIR)/fossil.page.brlist.js \
  $(SRCDIR)/fossil.page.chat.js \
  $(SRCDIR)/fossil.page.chatsearch.js \
  $(SRCDIR)/fossil.page.fileedit.js \
  $(SRCDIR)/fossil.page.forumpost.js \
  $(SRCDIR)/fossil.page.pikchrshow.js \
  $(SRCDIR)/fossil.page.pikchrshowasm.js \
  $(SRCDIR)/fossil.page.whistory.js \
  $(SRCDIR)/fossil.page.wikiedit.js \
  $(SRCDIR)/fossil.pikchr.js \

** This URL will include query parameters such as "id=" and "once&skin="
** to cause the correct stylesheet to be loaded after a skin change
** or after a change to the stylesheet.
*/
static void stylesheet_url_var(void){
  char *zBuiltin;              /* Auxiliary page-specific CSS page */
  Blob url;                    /* The URL */
  const char * zPage = local_zCurrentPage ? local_zCurrentPage : g.zPath;

  /* Initialize the URL to its baseline */
  url = empty_blob;
  blob_appendf(&url, "%R/style.css");

  /* If page-specific CSS exists for the current page, then append
  ** the pathname for the page-specific CSS.  The default CSS is
  **
  **     /style.css
  **
  ** But for the "/wikiedit" page (to name but one example), we
  ** append a path as follows:
  **
  **     /style.css/wikiedit
  **
  ** The /style.css page (implemented below) will detect this extra "wikiedit"
  ** path information and include the page-specific CSS along with the
  ** default CSS when it delivers the page.
  */
  zBuiltin = mprintf("style.%s.css", g.zPath);
  zBuiltin = mprintf("style.%s.css", zPage);
  if( builtin_file(zBuiltin,0)!=0 ){
    blob_appendf(&url, "/%s", g.zPath);
    blob_appendf(&url, "/%s", zPage);
  }
  fossil_free(zBuiltin);

  /* Add query parameters that will change whenever the skin changes
  ** or after any updates to the CSS files
  */
  blob_appendf(&url, "?id=%x", skin_id("css"));

body.chat .message-widget-content> a {
  /* Cosmetic: keep skin-induced on-hover underlining from shifting
     content placed below this. */
  border-bottom: 1px transparent;
}
body.chat.monospace-messages .message-widget-content,
body.chat.monospace-messages .chat-input-field{
  font-family: monospace;  
  font-family: monospace;
}
body.chat .message-widget-content > * {
  margin: 0;
  padding: 0;
}
body.chat .message-widget-content > pre {
  white-space: pre-wrap;

}
body.chat .message-widget .message-widget-tab .xfrom {
  /* Element which holds the "this message is from user X" part
     of the message banner. */
  font-style: italic;
  font-weight: bold;
}

body.chat .message-widget .match {
  font-weight: bold;
  background-color: yellow;
}

body.chat.fossil-dark-style .message-widget .match {
  background-color: #ff4800;
}

/* The popup element for displaying message timestamps
   and deletion controls. */
body.chat .chat-message-popup {
  font-family: monospace;
  font-size: 0.9em;
  text-align: left;
  display: flex;

/* "Chat-only mode" hides the site header/footer, showing only
   the chat app. */
body.chat.chat-only-mode{
  padding: 0;
  margin: 0 auto;
}
body.chat #chat-button-settings {}
/** Popup widget for the /chat settings. */
body.chat .chat-settings-popup {
  font-size: 0.8em;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.25em;
  z-index: 200;
}

/** Container for the list of /chat messages. */
body.chat #chat-messages-wrapper {
  overflow: auto;
  padding: 0 0.25em;
}
body.chat #chat-messages-wrapper.loading > * {

  font-size: 130%;
}
body.chat #chat-buttons-wrapper > .cbutton:hover {
  background-color: rgba(200,200,200,0.3);
}
body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper > .cbutton {
  margin: 2px 0.125em 0 0.125em;
  min-width: 6ex;
  max-width: 6ex;
  min-width: 4.5ex;
  max-width: 4.5ex;
  min-height: 2.3ex;
  max-height: 2.3ex;
  font-size: 120%;
}
body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper #chat-button-submit {
  min-width: 12ex;
  min-width: 10ex;
}
.chat-input-field {
  font-family: inherit
}
body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-multi,
body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-x {
  min-height: 4rem;

body.chat .chat-view {
  flex: 20 1 auto
  /*ensure that these grow more than the non-.chat-view elements.
    Note that setting flex shrink to 0 breaks/disables scrolling!*/;
  margin-bottom: 0.2em;
}
body.chat #chat-config,
body.chat #chat-search,
body.chat #chat-preview {
  /* /chat configuration widget */
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0;
  margin: 0;

  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-preview .message-widget-content,
body.chat #chat-search .message-widget-content {
  overflow: auto;
  flex: 1 1 auto;
  padding: 0.5em;
  border: 1px dotted;
}

body.chat #chat-preview #chat-preview-content > * {
  margin: 0;
  padding: 0;
}
body.chat #chat-preview #chat-preview-buttons {
body.chat .chat-view .button-bar {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
}
body.chat #chat-config > button,
body.chat .chat-view .button-bar button {
body.chat #chat-preview #chat-preview-buttons > button {
  padding: 0.5em;
  flex: 0 1 auto;
  margin: 0.25em 0;
}

body.chat #chat-user-list-wrapper {
  /* Safari can't do fieldsets right, so we emulate one. */

  text-decoration: underline;
}

body.chat.fossil-dark-style #chat-button-attach > svg {
  /* The black paperclip is barely visible in dark-mode
     skins when they have dark buttons */
  filter: invert(0.8);
  transform: scale(130%);
}

body.cpage-chat-search .searchForm {
  margin-top: 1em;
}
body.cpage-chat-search .spacer-widget button {
  margin-left: 1ex;
  margin-right: 1ex;
  display: block;
}

body.chat .spacer-widget-buttons .up {
  margin-top: 0.5em;
  margin-bottom: 1em;
}
body.chat .spacer-widget-buttons .down {
  margin-top: 1em;
  margin-bottom: 0.5em;
}
body.chat .spacer-widget-buttons .all {
  margin-bottom: 0.75em;
}


body.chat .anim-rotate-360 {
  animation: rotate-360 750ms linear;
}
@keyframes rotate-360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }

body.chat .anim-fade-out-fast {
  animation: fade-out 250ms linear;
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

  $(SRCDIR)/fossil.copybutton.js \
  $(SRCDIR)/fossil.diff.js \
  $(SRCDIR)/fossil.dom.js \
  $(SRCDIR)/fossil.fetch.js \
  $(SRCDIR)/fossil.numbered-lines.js \
  $(SRCDIR)/fossil.page.brlist.js \
  $(SRCDIR)/fossil.page.chat.js \
  $(SRCDIR)/fossil.page.chatsearch.js \
  $(SRCDIR)/fossil.page.fileedit.js \
  $(SRCDIR)/fossil.page.forumpost.js \
  $(SRCDIR)/fossil.page.pikchrshow.js \
  $(SRCDIR)/fossil.page.pikchrshowasm.js \
  $(SRCDIR)/fossil.page.whistory.js \
  $(SRCDIR)/fossil.page.wikiedit.js \
  $(SRCDIR)/fossil.pikchr.js \

        "$(SRCDIR)\fossil.copybutton.js" \
        "$(SRCDIR)\fossil.diff.js" \
        "$(SRCDIR)\fossil.dom.js" \
        "$(SRCDIR)\fossil.fetch.js" \
        "$(SRCDIR)\fossil.numbered-lines.js" \
        "$(SRCDIR)\fossil.page.brlist.js" \
        "$(SRCDIR)\fossil.page.chat.js" \
        "$(SRCDIR)\fossil.page.chatsearch.js" \
        "$(SRCDIR)\fossil.page.fileedit.js" \
        "$(SRCDIR)\fossil.page.forumpost.js" \
        "$(SRCDIR)\fossil.page.pikchrshow.js" \
        "$(SRCDIR)\fossil.page.pikchrshowasm.js" \
        "$(SRCDIR)\fossil.page.whistory.js" \
        "$(SRCDIR)\fossil.page.wikiedit.js" \
        "$(SRCDIR)\fossil.pikchr.js" \

	echo "$(SRCDIR)\fossil.copybutton.js" >> $@
	echo "$(SRCDIR)\fossil.diff.js" >> $@
	echo "$(SRCDIR)\fossil.dom.js" >> $@
	echo "$(SRCDIR)\fossil.fetch.js" >> $@
	echo "$(SRCDIR)\fossil.numbered-lines.js" >> $@
	echo "$(SRCDIR)\fossil.page.brlist.js" >> $@
	echo "$(SRCDIR)\fossil.page.chat.js" >> $@
	echo "$(SRCDIR)\fossil.page.chatsearch.js" >> $@
	echo "$(SRCDIR)\fossil.page.fileedit.js" >> $@
	echo "$(SRCDIR)\fossil.page.forumpost.js" >> $@
	echo "$(SRCDIR)\fossil.page.pikchrshow.js" >> $@
	echo "$(SRCDIR)\fossil.page.pikchrshowasm.js" >> $@
	echo "$(SRCDIR)\fossil.page.whistory.js" >> $@
	echo "$(SRCDIR)\fossil.page.wikiedit.js" >> $@
	echo "$(SRCDIR)\fossil.pikchr.js" >> $@