Fossil

  @   flex: 5 1 auto;
  @ }
  @ #chat-input-file {
  @   display: flex;
  @   flex-direction: row;
  @   align-items: center;
  @ }

  @ #chat-input-file > input[type=file] {
  @   align-self: flex-start;

  @   flex: 1 1 auto;
  @ }
  @ #chat-input-file > input {
  @   flex: 1 0 auto;
  @ }
  @ #chat-input-file > *:nth-child(1) { margin-right: 0.5em; }
  @ #chat-input-file > *:nth-child(2) { margin-left: 0.5em; }
  @ .chat-timestamp {
  @    font-family: monospace;
  @    font-size: 0.8em;
  @    white-space: pre;
  @    text-align: left;
  @    opacity: 0.8;
  @ }
  @ #chat-drop-zone {
  @   box-sizing: content-box;
  @   background-color: #e0e0e0;
  @   flex: 1 1 auto;
  @   padding: 0.5em 1em;
  @   border: 1px solid #808080;
  @   border-radius: 0.25em;
  @ }
  @ #chat-drop-zone.dragover {
  @   border: 1px dashed green;
  @ }
  @ #chat-drop-details {



  @   white-space: pre;
  @   font-family: monospace;

  @ }
  @ </style>
  @ <form accept-encoding="utf-8" id="chat-form">
  @ <div id='chat-input-area'>
  @   <div id='chat-input-line'>
  @     <input type="text" name="msg" id="sbox" \
  @      placeholder="Type message here.">
  @     <input type="submit" value="Send">
  @   </div>
  @   <div id='chat-input-file'>
  @     <input type="file" name="file">
  @     <div id="chat-drop-zone">
  @        <div id="chat-drop-details"></div>
  @      </div>
  @   </div>
  @ </div>
  @ </form>
  @ <hr>

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

(function(){
  const form = document.querySelector('#chat-form');
  let mxMsg = 0;
  const F = window.fossil, D = F.dom;
  const _me = F.user.name;
  /* State for paste and drag/drop */
  const BlobXferState = {
    dropZone: document.querySelector('#chat-drop-zone'),
    dropDetails: document.querySelector('#chat-drop-details'),
    blob: undefined
  };
  /** Updates the paste/drop zone with details of the pasted/dropped
      data. */
  const updateDropZoneContent = function(blob){
    const bx = BlobXferState, dd = bx.dropDetails;
    bx.blob = blob;
    D.clearElement(dd);
    if(!blob) return;



    D.append(dd, "Name: ", blob.name,
             D.br(), "Size: ",blob.size);
    if(blob.type && blob.type.startsWith("image/")){
      const img = D.img();
      D.append(dd, D.br(), img);
      const reader = new FileReader();
      reader.onload = (e)=>img.setAttribute('src', e.target.result);
      reader.readAsDataURL(blob);
    }
    const btn = D.button("Cancel");
    D.append(dd, D.br(), btn);
    btn.addEventListener('click', ()=>updateDropZoneContent(), false);
  };
  ////////////////////////////////////////////////////////////
  // File drag/drop.
  // Adapted from: https://stackoverflow.com/a/58677161
  const dropHighlight = BlobXferState.dropZone /* target zone */;
  const dropEvents = {
    drop: function(ev){
      ev.preventDefault();
      D.removeClass(dropHighlight, 'dragover');
      const file = ev.dataTransfer.files[0];
      if(file) {
        updateDropZoneContent(file);
      }
    },
    dragenter: function(ev){
      ev.preventDefault();
      ev.dataTransfer.dropEffect = "copy";
      D.addClass(dropHighlight, 'dragover');
    },
    dragover: function(ev){
      ev.preventDefault();
    },
    dragend: function(ev){
      ev.preventDefault();
    },
    dragleave: function(ev){
      ev.preventDefault();
      D.removeClass(dropHighlight, 'dragover');
    }
  };
  /*
    The idea here is to accept drops at multiple points or, ideally,
    document.body, and apply them to P.e.taContent, but the precise
    combination of event handling needed to pull this off is eluding
    me.
  */
  [BlobXferState.dropZone
   /* ideally we'd link only to document.body, but the events seem to
      get out of whack, with dropleave being triggered at unexpected
      points. */
  ].forEach(function(e){
    Object.keys(dropEvents).forEach(
      (k)=>e.addEventListener(k, dropEvents[k], true)
    );
  });

  form.addEventListener('submit',(e)=>{
    e.preventDefault();
    const fd = new FormData(form);
    if(BlobXferState.blob/*replace file content with this*/){
      fd.set("file", BlobXferState.blob);

      updateDropZoneContent(items[0].getAsFile());
    }else if('string'===item.kind){
      item.getAsString((v)=>form.msg.value = v);
    }
  };
  if(true){/* Add help button for drag/drop/paste zone */
    const help = D.div();
    BlobXferState.dropDetails.parentNode.insertBefore(
      help,BlobXferState.dropDetails
    );
    F.helpButtonlets.create(
      help,
      "Drag/drop a file into this spot, or paste an image "+
        "from the clipboard if supported by your environment."

    );
  }

  /* Injects element e as a new row in the chat, at the top of the list */
  const injectMessage = function f(e){
    if(!f.injectPoint){
      f.injectPoint = document.querySelector('#message-inject-point');