@ <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 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 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;
  char * zInputPlaceholder0;  /* Common text input placeholder value */


















  login_check_credentials();
  if( !g.perm.Chat ){
    login_needed(g.anon.Chat);
    return;
  }
  zAlert = mprintf("%s/builtin/%s", g.zBaseURL,

  @     <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">&#x1f4ce;</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>
  @   </div>
  @   <div id='chat-input-file-area'>

  @     </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'>
  /* 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
*/
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
@   xmsg  TEXT,       -- Raw, unformatted text of the message
@   fname TEXT,       -- Filename of the uploaded file, or NULL
@   fmime TEXT,       -- MIMEType of the upload file, or NULL
@   mdel INT,         -- msgid of another message to delete
@   file  BLOB        -- Text of the uploaded file, or NULL
@ );
;


/*
** Create or rebuild the /chat search index. Requires that the
** repository.chat table exists. If bForce is true, it will drop the
** chatfts1 table and recreate/reindex it. If bForce is 0, it will
** only index the chat content if the chatfts1 table does not already
** exist.
*/
void chat_rebuild_index(int bForce){
  if( bForce!=0 ){
    db_multi_exec("DROP TABLE IF EXISTS chatfts1");
  }
  if( bForce!=0 || !db_table_exists("repository", "chatfts1") ){
    const int tokType = search_tokenizer_type(0);
    const char *zTokenizer = search_tokenize_arg_for_type(
      tokType==FTS5TOK_NONE ? FTS5TOK_PORTER : tokType
      /* Special case: if fts search is disabled for the main repo
      ** content, use a default tokenizer here. */
    );
    assert( zTokenizer && zTokenizer[0] );
    db_multi_exec(
      "CREATE VIRTUAL TABLE repository.chatfts1 USING fts5("
      "    xmsg, content=chat, content_rowid=msgid%s"
      ");"
      "INSERT INTO repository.chatfts1(chatfts1) VALUES('rebuild');",
      zTokenizer/*safe-for-%s*/
    );
  }
}

/*
** Make sure the repository data tables used by chat exist.  Create
** them if they do not. Set up TEMP triggers (if needed) to update the
** chatfts1 table as the chat table is updated.
*/
static void chat_create_tables(void){
  if( !db_table_exists("repository","chat") ){
    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");
  }
  chat_rebuild_index(0);
  db_multi_exec(
    "CREATE TEMP TRIGGER IF NOT EXISTS chat_ai AFTER INSERT ON chat BEGIN "
    "  INSERT INTO chatfts1(rowid, xmsg) VALUES(new.msgid, new.xmsg);"
    "END;"
    "CREATE TEMP TRIGGER IF NOT EXISTS chat_ad AFTER DELETE ON chat BEGIN "
    "  INSERT INTO chatfts1(chatfts1, rowid, xmsg) "
    "    VALUES('delete', old.msgid, old.xmsg);"
    "END;"
  );
}

/*
** 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 ?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=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 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 = chat_poll_rowstojson(&q1, zChatUser, bRaw, &json);





















































    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 */
  Blob sql = empty_blob;
  Stmt q1;
  int nLimit = atoi(PD("n","500"));
  int iFirst = atoi(PD("i","0"));
  const char *zQuery = PD("q", "");
  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] ){
    iMax = db_int64(0, "SELECT max(msgid) FROM chat");
    iMin = db_int64(0, "SELECT min(msgid) FROM chat");
    if( '#'==zQuery[0] ){
      /* Assume we're looking for an exact msgid match. */
      ++zQuery;
      blob_append_sql(&sql,
        "SELECT msgid, datetime(mtime), xfrom, "
        "  xmsg, octet_length(file), fname, fmime, mdel, lmtime "
        "  FROM chat WHERE msgid=+%Q",
        zQuery
      );
    }else{
      char * zPat = search_simplify_pattern(zQuery);
      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"
        "  ORDER BY f.rowid DESC LIMIT %d"
        ") ORDER BY 1 ASC", zPat, nLimit
      );
      fossil_free(zPat);
    }
  }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.
**

  */
  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

/**
   urlTransform() must refer to a function which accepts a relative path
   to the same site as fetch() is served from and an optional set of
   URL parameters to pass with it (in the form a of a string
   ("a=b&c=d...") or an object of key/value pairs (which it converts
   to such a string), and returns the resulting URL or URI as a string.
*/
fossil.fetch.urlTransform = (u,p)=>fossil.repoUrl(u,p);
fossil.fetch.beforesend = function(){};
fossil.fetch.aftersend = function(){};
fossil.fetch.timeout = 15000/* Default timeout, in ms. */;
})(window.fossil);

        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,

      },
      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 trim()'d 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 && 'boolean'!==typeof arguments[0]){
          if(e.isContentEditable) e.innerText = arguments[0];
          else e.value = arguments[0];
          return this;
        }
        const rc = e.isContentEditable ? e.innerText : e.value;
        if( true===arguments[0] ){
          if(e.isContentEditable) e.innerText = '';
          else e.value = '';
        }
        return rc && rc.trim();
      },
      /** 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(
                       D.addClass(D.span(),'timestamp'),
                       localTimeString(uDate)//.substr(5/*chop off year*/)
                     ));
            if(uDate.$uColor){
              uSpan.style.backgroundColor = uDate.$uColor;
            }

     deficiencies in Safari.
  */
  Chat.MessageWidget = (function(){
    /**
       Constructor. If passed an argument, it is passed to
       this.setMessage() after initialization.
    */
    const ctor = 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]);
      }
    };
    /* 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. 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=false){
      const li = [];
      if( longFmt ){
        li.push(
          d.getFullYear(),
          '-', pad2(d.getMonth()+1),
          '-', 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){
      if(!f.$rx){
        f.$rx = /\.((html?)|(txt)|(md)|(wiki)|(pikchr))$/i;
        f.$specificTypes = [
          /* Mime types we know we can embed, sans image/... */
          '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 shouldFossilRenderEmbed = 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'


        ];
      }
      if(msg.fmime){
        if(f.$specificTypes.indexOf(msg.fmime)>=0) return true;
      }
      return msg.fname && f.$rx.test(msg.fname);
    };

        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');
      }
    };

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

        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.append(D.addClass(D.span(), 'msgid'),
                     '#' + (m.msgid||'???')),
            (m.isSearchResult ? ' ' : ' @ '),
            D.append(D.addClass(D.span(), 'timestamp'),
                     theTime(d,!!m.isSearchResult))
          );
          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(
            this.e.tab,
            D.append(D.code(), 'notification @ ',theTime(d,false))
          );
        }
        if( m.xfrom && m.fsize>0 ){
          if( m.fmime
              && m.fmime.startsWith("image/")
              && Chat.settings.getBool('images-inline',true)
            ){

              "(" + 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 shouldFossilRender = shouldFossilRenderEmbed(m);
              const downloadArgs = shouldFossilRender ? '?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, shouldFossilRender
                                       ? "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. */

            }
          }/*f.popup*/;
        }/*end static init*/
        const theMsg = findMessageWidgetParent(ev.target);
        if(theMsg) f.popup.show(theMsg);
      }/*_handleLegendClicked()*/
    };
    return ctor;
  })()/*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 ctor = 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'),
        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();
    };

    ctor.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 */
        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){
            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;
            }
            ms.set_button_visibility();
            ms.bIgnoreClick = false;
          }
        });
      }
    };

    return ctor;
  })() /*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,}$/;
    }
    switch( this.e.currentView ){
      case this.e.viewSearch: this.submitSearch();
        return;
      case this.e.viewPreview: this.e.btnPreview.click();
        return;
      default: break;
    }
    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

    const text = Chat.inputValue().trim();
    const ctrlMode = Chat.settings.getBool('edit-ctrl-send', false);
    //console.debug("Enter key event:", ctrlMode, ev.ctrlKey, ev.shiftKey, ev);
    if(ev.shiftKey){
      const compactMode = Chat.settings.getBool('edit-compact-mode', false);
      ev.preventDefault();
      ev.stopPropagation();
      /* Shift-enter will run preview mode UNLESS the input field is empty
         AND (preview or search mode) is active, in which cases it will
         switch back to message view. */
      if(!text &&
         (Chat.e.currentView===Chat.e.viewPreview
          | Chat.e.currentView===Chat.e.viewSearch)){
        Chat.setCurrentView(Chat.e.viewMessages);
      }else if(!text){
        f.$toggleCompact(compactMode);
      }else if(Chat.settings.getBool('edit-shift-enter-preview', true)){
        Chat.e.btnPreview.click();
      }
      return false;

         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 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', 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.",

          "then Ctrl-Enter toggles this setting."
        ].join(''),
        boolValue: 'edit-ctrl-send'
      },{
        label: "Compact mode",
        hint: [
          "Toggle between a space-saving or more spacious writing area. ",
          "When the input field has focus and is empty ",
          "then Shift-Enter may (depending on the current view) toggle this setting."
        ].join(''),
        boolValue: 'edit-compact-mode'
      },{
        label: "Use 'contenteditable' editing mode",
        boolValue: 'edit-widget-x',
        hint: [
          "When enabled, chat input uses a so-called 'contenteditable' ",
          "field. Though generally more comfortable and modern than ",

      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 message";
      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('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-clear').addEventListener('click', function(ev){
      ev.preventDefault();
      ev.stopPropagation();
      Chat.clearSearch(true);
      Chat.setCurrentView(Chat.e.viewMessages);
      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 = 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*/;

  /**
     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(addInstructions=false){
    const e = D.clearElement( this.e.searchContent );
    if(addInstructions){
      D.append(e, "Enter search terms in the message field. "+
               "Use #NNNNN to search for the message with ID NNNNN.");
    }
    return e;
  };
  Chat.clearSearch(true);
  /**
     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 = this.clearSearch(true);
    if( !term ) return;
    D.append( eMsgTgt, "Searching for ",term," ...");
    const fd = new FormData();
    fd.set('q', term);
    F.fetch(
      "chat-query", {
        payload: fd,
        responseType: 'json',
        onerror:function(err){
          Chat.setCurrentView(Chat.e.viewMessages);
          Chat.reportErrorAsMessage(err);
        },
        onload:function(jx){
          let previd = 0;
          D.clearElement(eMsgTgt);
          jx.msgs.forEach((m)=>{
            m.isSearchResult = 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(){
        Chat.scrollMessagesTo(1);
      }, 250);
    }
    if(Chat._gotServerError && Chat.intervalTimer){
      clearInterval(Chat.intervalTimer);
      Chat.reportErrorAsMessage(
        "Shutting down chat poller due to server-side error. ",
        "Reload this page to reactivate it.");
      delete Chat.intervalTimer;
    }
    poll.running = false;
  };
  afterFetch.isFirstCall = true;
  /**
     FIXME: when polling fails because the remote server is
     reachable but it's not accepting HTTP requests, we should back
     off on polling for a while. e.g. if the remote web server process
     is killed, the poll fails quickly and immediately retries,
     hammering the remote server until the httpd is back up. That
     happens often during development of this application.

     XHR does not offer a direct way of distinguishing between
     HTTP/connection errors, but we can hypothetically use the
     xhrRequest.status value to do so, with status==0 being a
     connection error. We do not currently have a clean way of passing
     that info back to the fossil.fetch() client, so we'll need to
     hammer on that API a bit to get this working.
  */
  const poll = async function f(){
    if(f.running) return;
    f.running = true;
    Chat._isBatchLoading = f.isFirstCall;
    if(true===f.isFirstCall){
      f.isFirstCall = false;
      Chat.ajaxStart();

  };
  poll.isFirstCall = true;
  Chat._gotServerError = poll.running = false;
  if( window.fossil.config.chat.fromcli ){
    Chat.chatOnlyMode(true);
  }
  Chat.intervalTimer = setInterval(poll, 1000);






  delete ForceResizeKludge.$disabled;
  ForceResizeKludge();
  Chat.animate.$disabled = false;
  setTimeout( ()=>Chat.inputFocus(), 0 );
  F.page.chat = Chat/* enables testing the APIs via the dev tools */;
});

    blob_appendf(&x," r=%g", r);
    sqlite3_result_text(context, blob_str(&x), -1, fossil_free);
  }
#else
  sqlite3_result_double(context, r);
#endif
}

/*
** Expects a search pattern string. Makes a copy of the string,
** replaces all non-alphanum ASCII characters with a space, and
** lower-cases all upper-case ASCII characters. The intent is to avoid
** causing errors in FTS5 searches with inputs which contain AND, OR,
** and symbols like #. The caller is responsible for passing the
** result to fossil_free().
*/
char *search_simplify_pattern(const char * zPattern){
  char *zPat = mprintf("%s",zPattern);
  int i;
  for(i=0; zPat[i]; i++){
    if( (zPat[i]&0x80)==0 && !fossil_isalnum(zPat[i]) ) zPat[i] = ' ';
    if( fossil_isupper(zPat[i]) ) zPat[i] = fossil_tolower(zPat[i]);
  }
  for(i--; i>=0 && zPat[i]==' '; i--){}
  if( i<0 ){
    fossil_free(zPat);
    zPat = mprintf("\"\"");
  }
  return zPat;
}

/*
** When this routine is called, there already exists a table
**
**       x(label,url,score,id,snip).
**
** label:  The "name" of the document containing the match

** The companion full-scan search routine is search_fullscan().
*/
LOCAL void search_indexed(
  const char *zPattern,       /* The query pattern */
  unsigned int srchFlags      /* What to search over */
){
  Blob sql;
  char *zPat;

  static const char *zSnippetCall;
  if( srchFlags==0 ) return;
  sqlite3_create_function(g.db, "rank", 1, SQLITE_UTF8|SQLITE_INNOCUOUS, 0,
     search_rank_sqlfunc, 0, 0);







  zPat = search_simplify_pattern(zPattern);

  blob_init(&sql, 0, 0);
  if( search_index_type(0)==4 ){
    /* If this repo is still using the legacy FTS4 search index, then
    ** the snippet() function is slightly different */
    zSnippetCall = "snippet(ftsidx,'<mark>','</mark>',' ... ',-1,35)";
  }else{
    /* This is the common case - Using newer FTS5 search index */

@ CREATE VIRTUAL TABLE IF NOT EXISTS repository.ftsidx
@   USING fts5(content="ftscontent", title, body%s);
;
static const char zFtsDrop[] =
@ DROP TABLE IF EXISTS repository.ftsidx;
@ DROP VIEW IF EXISTS repository.ftscontent;
@ DROP TABLE IF EXISTS repository.ftsdocs;
@ DROP TABLE IF EXISTS repository.chatfts1;
;

#if INTERFACE
/*
** Values for the search-tokenizer config option.
*/
#define FTS5TOK_NONE      0 /* disabled */

    iFtsTokenizer = FTS5TOK_TRIGRAM;
  }else{
    iFtsTokenizer = is_truth(z) ? FTS5TOK_PORTER : FTS5TOK_NONE;
  }
  fossil_free(z);
  return iFtsTokenizer;
}

/*
** Returns a string in the form ",tokenize=X", where X is the string
** counterpart of the given FTS5TOK_xyz value.  Returns "" if tokType
** does not correspond to a known FTS5 tokenizer.
*/
const char * search_tokenize_arg_for_type(int tokType){
  switch( tokType ){
    case FTS5TOK_PORTER: return ",tokenize=porter";
    case FTS5TOK_UNICODE61: return ",tokenize=unicode61";
    case FTS5TOK_TRIGRAM: return ",tokenize=trigram";
    case FTS5TOK_NONE:
    default: return "";
  }
}

/*
** Returns a string value suitable for use as the search-tokenizer
** setting's value, depending on the value of z. If z is 0 then the
** current search-tokenizer value is used as the basis for formulating
** the result (which may differ from the current value but will have
** the same meaning). Any unknown/unsupported value is interpreted as

}

/*
** Create or drop the tables associated with a full-text index.
*/
static int searchIdxExists = -1;
void search_create_index(void){

  const char *zExtra =
    search_tokenize_arg_for_type(search_tokenizer_type(0));



  assert( zExtra );

  search_sql_setup(g.db);
  db_multi_exec(zFtsSchema/*works-like:"%s"*/, zExtra/*safe-for-%s*/);
  searchIdxExists = 1;
}
void search_drop_index(void){
  db_multi_exec(zFtsDrop/*works-like:""*/);
  searchIdxExists = 0;

*/
void search_rebuild_index(void){
  fossil_print("rebuilding the search index...");
  fflush(stdout);
  search_create_index();
  search_fill_index();
  search_update_index(search_restrict(SRCH_ALL));
  if( db_table_exists("repository","chat") ){
    chat_rebuild_index(1);
  }
  fossil_print(" done\n");
}

/*
** COMMAND: fts-config*
**
** Usage: fossil fts-config ?SUBCOMMAND? ?ARGUMENT?

** 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", zPage);
  if( builtin_file(zBuiltin,0)!=0 ){
    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;
}
body.chat .message-widget-content > * {
  margin: 0;
  padding: 0;
}
body.chat .message-widget-content > pre {
  white-space: pre-wrap;

  padding: 0 0.5em 0.15em 0.5em;
  cursor: pointer;
  white-space: nowrap;
}
body.chat .fossil-tooltip.help-buttonlet-content {
  font-size: 80%;
}

body.chat .message-widget .message-widget-tab {
  /* Element which renders the main metadata for a given message. */
}
body.chat .message-widget .message-widget-tab .xfrom {
  /* xfrom part of the message tab */
  font-style: italic;
  font-weight: bold;
}

body.chat .message-widget .message-widget-tab .mtime {
  /* mtime part of the message tab */
}

body.chat .message-widget .message-widget-tab .msgid {
  /* msgid part of the message tab */
}

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 {}











/** 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: 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: 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-search #chat-search-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-view .button-bar {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
}
body.chat .chat-view .button-bar button {

  padding: 0.5em;
  flex: 1 1 auto;
  margin: 0.25em 0;
}

body.chat #chat-search .button-bar {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
}

body.chat #chat-user-list-wrapper {
  /* Safari can't do fieldsets right, so we emulate one. */
  border-radius: 0.5em;
  margin: 1em 0 0.2em 0;
  padding: 0 0.5em;
  border-style: inset;

  display: none;
}
body.chat #chat-user-list .chat-user.selected {
  font-weight: bold;
  text-decoration: underline;
}

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

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

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

  *  On case-insensitive filesystems, store files using the filesystem's
     preferred case rather than the case typed in by the user.
  *  Change the name "fossil cherry-pick" command to "fossil cherrypick",
     which is more familiar to Git users.  Retain the legacy name for
     compatibility.
  *  Add new query parameters to the [/help?cmd=/timeline|/timeline page]:
     d2=, p2=, and dp2=.
  *  Add options to the [/help?cmd=tag|fossil tag] command that will list tag values.
  *  Add ability to upload unversioned files via the [/help?cmd=/uvlist|/uvlist page].
  *  Add history search to the [/help?cmd=/chat|/chat page].


<h2 id='v2_24'>Changes for version 2.24 (2024-04-23)</h2>

  *  Apache change work-around &rarr; As part of a security fix, the Apache webserver
     mod_cgi module has stopped relaying the Content-Length field of the HTTP
     reply header from the CGI programs back to the client in cases where the

     <li>  Reworked the default skin to make everything more readable: larger
           fonts, more whitespace, deeper indents to show hierarchy and to
           offset command examples, etc.  Adjusted colors slightly to bring
           things into better accord with the WCAG accessibility guidelines.
           This constitutes a <strong>breaking change</strong> for those with
           custom skins; see [./customskin.md#version-2.24 | this section of
           the docs] for migration advice.
     <li>  Add a new link added to the [/login] page that allows the user to
           [/skins|select their preferred skin]. This preference is stored in
           the [/fdscookie|fossil display_settings cookie].
     <li>  The /setup_skin_admin page is simplified to let administrators easily
           select one of the built-in skins as a default, or to specify a
           custom skin.
     </ul>
  *  If an "ssh:" sync fails in a way that suggests that the fossil executable