solid-ui 2.4.14-bbf45639-e81d3e08 → 2.4.15-348f23a8

package/lib/webpack-bundle.js

@@ -5284,7 +5284,6 @@ var UI = {
 var $rdf = UI.rdf;
 var BOOK = $rdf.Namespace('http://www.w3.org/2002/01/bookmark#');
 var BOOKMARK_ICON = 'noun_45961.svg';
-var kb = _logic.store;
 var label = utils.label;
 var dom = window.document || null;
 /** Create a resource if it really does not exist
@@ -5295,19 +5294,20 @@ var dom = window.document || null;
 
 function createIfNotExists(doc) {
   return new Promise(function (resolve, reject) {
-    kb.fetcher.load(doc).then(function (response) {
-      debug.log('createIfNotExists doc exists, all good ' + doc); // kb.fetcher.webOperation('HEAD', doc.uri).then(response => {
+    _logic.store.fetcher.load(doc).then(function (response) {
+      debug.log('createIfNotExists doc exists, all good ' + doc); // store.fetcher.webOperation('HEAD', doc.uri).then(response => {
 
       resolve(response);
     }, function (err) {
       if (err.response.status === 404) {
         debug.log('createIfNotExists doc does NOT exist, will create... ' + doc);
-        kb.fetcher.webOperation('PUT', doc.uri, {
+
+        _logic.store.fetcher.webOperation('PUT', doc.uri, {
           data: '',
           contentType: 'text/turtle'
         }).then(function (response) {
           // fetcher.requested[doc.uri] = 'done' // do not need to read ??  but no headers
-          delete kb.fetcher.requested[doc.uri]; // delete cached 404 error
+          delete _logic.store.fetcher.requested[doc.uri]; // delete cached 404 error
 
           debug.log('createIfNotExists doc created ok ' + doc);
           resolve(response);
@@ -5326,13 +5326,14 @@ function createIfNotExists(doc) {
 
 function updatePromise(del, ins) {
   return new Promise(function (resolve, reject) {
-    kb.updater.update(del, ins, function (uri, ok, errorBody) {
+    _logic.store.updater.update(del, ins, function (uri, ok, errorBody) {
       if (!ok) {
         reject(new Error(errorBody));
       } else {
         resolve();
       }
     }); // callback
+
   }); // promise
 } // export findBookmarkDocument,
 
@@ -5461,8 +5462,8 @@ function _addBookmark() {
             throw new Error('Must be logged on to add Bookmark');
 
           case 4:
-            author = kb.any(target, ns.foaf('maker'));
-            title = label(author) + ': ' + kb.anyValue(target, ns.sioc('content')).slice(0, 80); // @@ add chat title too?
+            author = _logic.store.any(target, ns.foaf('maker'));
+            title = label(author) + ': ' + _logic.store.anyValue(target, ns.sioc('content')).slice(0, 80); // @@ add chat title too?
 
             bookmarkDoc = context.bookmarkDocument;
             bookmark = UI.widgets.newThing(bookmarkDoc, title);
@@ -5500,17 +5501,17 @@ function toggleBookmark(_x4, _x5, _x6) {
 }
 
 function _toggleBookmark() {
-  _toggleBookmark = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(userContext, target, bookmarkButton) {
+  _toggleBookmark = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(userContext, target, bookmarstoreutton) {
     var bookmarks, i, bookmark;
     return _regenerator["default"].wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
             _context3.next = 2;
-            return kb.fetcher.load(userContext.bookmarkDocument);
+            return _logic.store.fetcher.load(userContext.bookmarkDocument);
 
           case 2:
-            bookmarks = kb.each(null, BOOK('recalls'), target, userContext.bookmarkDocument);
+            bookmarks = _logic.store.each(null, BOOK('recalls'), target, userContext.bookmarkDocument);
 
             if (!bookmarks.length) {
               _context3.next = 24;
@@ -5535,10 +5536,10 @@ function _toggleBookmark() {
 
             _context3.prev = 8;
             _context3.next = 11;
-            return updatePromise(kb.connectedStatements(bookmarks[i]), []);
+            return updatePromise(_logic.store.connectedStatements(bookmarks[i]), []);
 
           case 11:
-            bookmarkButton.style.backgroundColor = 'white';
+            bookmarstoreutton.style.backgroundColor = 'white';
             debug.log('Bookmark deleted: ' + bookmarks[i]);
             _context3.next = 19;
             break;
@@ -5564,7 +5565,7 @@ function _toggleBookmark() {
 
           case 26:
             bookmark = _context3.sent;
-            bookmarkButton.style.backgroundColor = 'yellow';
+            bookmarstoreutton.style.backgroundColor = 'yellow';
             debug.log('Bookmark added: ' + bookmark);
 
           case 29:
@@ -5583,26 +5584,26 @@ function renderBookmarksButton(_x7, _x8) {
 
 function _renderBookmarksButton() {
   _renderBookmarksButton = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(userContext, target) {
-    var setBookmarkButtonColor, _setBookmarkButtonColor, bookmarkButton;
+    var setBookmarstoreuttonColor, _setBookmarstoreuttonColor, bookmarstoreutton;
 
     return _regenerator["default"].wrap(function _callee5$(_context5) {
       while (1) {
         switch (_context5.prev = _context5.next) {
           case 0:
-            _setBookmarkButtonColor = function _setBookmarkButtonCol2() {
-              _setBookmarkButtonColor = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(bookmarkButton) {
+            _setBookmarstoreuttonColor = function _setBookmarstoreutton2() {
+              _setBookmarstoreuttonColor = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(bookmarstoreutton) {
                 var bookmarked;
                 return _regenerator["default"].wrap(function _callee4$(_context4) {
                   while (1) {
                     switch (_context4.prev = _context4.next) {
                       case 0:
                         _context4.next = 2;
-                        return kb.fetcher.load(userContext.bookmarkDocument);
+                        return _logic.store.fetcher.load(userContext.bookmarkDocument);
 
                       case 2:
-                        bookmarked = kb.any(null, BOOK('recalls'), bookmarkButton.target, userContext.bookmarkDocument);
-                        bookmarkButton.style = UI.style.buttonStyle;
-                        if (bookmarked) bookmarkButton.style.backgroundColor = 'yellow';
+                        bookmarked = _logic.store.any(null, BOOK('recalls'), bookmarstoreutton.target, userContext.bookmarkDocument);
+                        bookmarstoreutton.style = UI.style.buttonStyle;
+                        if (bookmarked) bookmarstoreutton.style.backgroundColor = 'yellow';
 
                       case 5:
                       case "end":
@@ -5611,11 +5612,11 @@ function _renderBookmarksButton() {
                   }
                 }, _callee4);
               }));
-              return _setBookmarkButtonColor.apply(this, arguments);
+              return _setBookmarstoreuttonColor.apply(this, arguments);
             };
 
-            setBookmarkButtonColor = function _setBookmarkButtonCol(_x9) {
-              return _setBookmarkButtonColor.apply(this, arguments);
+            setBookmarstoreuttonColor = function _setBookmarstoreutton(_x9) {
+              return _setBookmarstoreuttonColor.apply(this, arguments);
             };
 
             if (!userContext.bookmarkDocument) {
@@ -5623,15 +5624,15 @@ function _renderBookmarksButton() {
               break;
             }
 
-            bookmarkButton = UI.widgets.button(dom, UI.icons.iconBase + BOOKMARK_ICON, label(BOOK('Bookmark')), function () {
-              toggleBookmark(userContext, target, bookmarkButton);
+            bookmarstoreutton = UI.widgets.button(dom, UI.icons.iconBase + BOOKMARK_ICON, label(BOOK('Bookmark')), function () {
+              toggleBookmark(userContext, target, bookmarstoreutton);
             });
-            bookmarkButton.target = target;
+            bookmarstoreutton.target = target;
             _context5.next = 7;
-            return setBookmarkButtonColor(bookmarkButton);
+            return setBookmarstoreuttonColor(bookmarstoreutton);
 
           case 7:
-            return _context5.abrupt("return", bookmarkButton);
+            return _context5.abrupt("return", bookmarstoreutton);
 
           case 8:
           case "end":
@@ -5646,6 +5647,357 @@ function _renderBookmarksButton() {
 
 /***/ }),
 
+/***/ "./lib/chat/chatLogic.js":
+/*!*******************************!*\
+  !*** ./lib/chat/chatLogic.js ***!
+  \*******************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");
+
+var _typeof = __webpack_require__(/*! @babel/runtime/helpers/typeof */ "./node_modules/@babel/runtime/helpers/typeof.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatChannel = void 0;
+exports._createIfNotExists = _createIfNotExists;
+exports.isDeleted = isDeleted;
+exports.isHidden = isHidden;
+exports.isReplaced = isReplaced;
+exports.mostRecentVersion = mostRecentVersion;
+exports.nick = nick;
+exports.originalVersion = originalVersion;
+
+var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js"));
+
+var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ "./node_modules/@babel/runtime/helpers/asyncToGenerator.js"));
+
+var _classCallCheck2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js"));
+
+var _createClass2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js"));
+
+var debug = _interopRequireWildcard(__webpack_require__(/*! ../debug */ "./lib/debug.js"));
+
+var _index = __webpack_require__(/*! ../authn/index */ "./lib/authn/index.js");
+
+var _dateFolder = __webpack_require__(/*! ./dateFolder */ "./lib/chat/dateFolder.js");
+
+var _logic = __webpack_require__(/*! ../logic */ "./lib/logic.js");
+
+var ns = _interopRequireWildcard(__webpack_require__(/*! ../ns */ "./lib/ns.js"));
+
+var $rdf = _interopRequireWildcard(__webpack_require__(/*! rdflib */ "./node_modules/rdflib/esm/index.js"));
+
+var utils = _interopRequireWildcard(__webpack_require__(/*! ../utils */ "./lib/utils/index.js"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Contains the [[ChatChannel]] class and logic for Solid Chat
+ * @packageDocumentation
+ */
+// pull in first avoid cross-refs
+
+/* The Solid logic for a 'LongChat'
+*/
+
+/**
+ * Common code for a chat (discussion area of messages about something)
+ * This version runs over a series of files for different time periods
+ *
+ * Parameters for the whole chat -- like its title -- are stored at
+ * index.ttl#this and the chat messages are stored in YYYY/MM/DD/chat.ttl
+ *
+ */
+var ChatChannel = /*#__PURE__*/function () {
+  function ChatChannel(channel, options) {
+    (0, _classCallCheck2["default"])(this, ChatChannel);
+    this.channel = channel;
+    this.channelRoot = channel.doc();
+    this.options = options;
+    this.dateFolder = new _dateFolder.DateFolder(this.channelRoot, 'chat.ttl');
+    this.div = null; // : HTMLElement
+  }
+  /* Store a new message in the web,
+  */
+
+
+  (0, _createClass2["default"])(ChatChannel, [{
+    key: "createMessage",
+    value: function () {
+      var _createMessage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(text) {
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", this.updateMessage(text));
+
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function createMessage(_x) {
+        return _createMessage.apply(this, arguments);
+      }
+
+      return createMessage;
+    }()
+    /* Store a new message in the web,
+      as a replacement for an existing one.
+      The old one is left, and the two are linked
+    */
+
+  }, {
+    key: "updateMessage",
+    value: function () {
+      var _updateMessage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(text) {
+        var oldMsg,
+            deleteIt,
+            sts,
+            now,
+            timestamp,
+            dateStamp,
+            chatDocument,
+            message,
+            me,
+            msg,
+            _args2 = arguments;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                oldMsg = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : null;
+                deleteIt = _args2.length > 2 ? _args2[2] : undefined;
+                sts = [];
+                now = new Date();
+                timestamp = '' + now.getTime();
+                dateStamp = $rdf.term(now);
+                chatDocument = oldMsg ? oldMsg.doc() : this.dateFolder.leafDocumentFromDate(now);
+                message = _logic.store.sym(chatDocument.uri + '#' + 'Msg' + timestamp); // const content = store.literal(text)
+
+                me = _index.authn.currentUser(); // If already logged on
+
+                if (oldMsg) {
+                  // edited message replaces old one
+                  sts.push($rdf.st(mostRecentVersion(oldMsg), ns.dct('isReplacedBy'), message, chatDocument));
+
+                  if (deleteIt) {
+                    sts.push($rdf.st(message, ns.schema('dateDeleted'), dateStamp, chatDocument));
+                  }
+                } else {
+                  // link new message to channel
+                  sts.push($rdf.st(this.channel, ns.wf('message'), message, chatDocument));
+                }
+
+                sts.push($rdf.st(message, ns.sioc('content'), _logic.store.literal(text), chatDocument));
+                sts.push($rdf.st(message, ns.dct('created'), dateStamp, chatDocument));
+
+                if (me) {
+                  sts.push($rdf.st(message, ns.foaf('maker'), me, chatDocument));
+                }
+
+                _context2.prev = 13;
+                _context2.next = 16;
+                return _logic.store.updater.update([], sts);
+
+              case 16:
+                _context2.next = 24;
+                break;
+
+              case 18:
+                _context2.prev = 18;
+                _context2.t0 = _context2["catch"](13);
+                msg = 'Error saving chat message: ' + _context2.t0;
+                debug.warn(msg);
+                alert(msg);
+                throw new Error(msg);
+
+              case 24:
+                return _context2.abrupt("return", message);
+
+              case 25:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this, [[13, 18]]);
+      }));
+
+      function updateMessage(_x2) {
+        return _updateMessage.apply(this, arguments);
+      }
+
+      return updateMessage;
+    }()
+    /* Mark a message as deleted
+    * We add a new version of the message, with a deletion flag (deletion date)
+    * so that the deletion can be revoked by adding another non-deleted update
+    */
+
+  }, {
+    key: "deleteMessage",
+    value: function () {
+      var _deleteMessage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(message) {
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                return _context3.abrupt("return", this.updateMessage('(message deleted)', message, true));
+
+              case 1:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function deleteMessage(_x3) {
+        return _deleteMessage.apply(this, arguments);
+      }
+
+      return deleteMessage;
+    }()
+  }]);
+  return ChatChannel;
+}(); // class ChatChannel
+
+
+exports.ChatChannel = ChatChannel;
+
+function originalVersion(message) {
+  var msg = message;
+
+  while (msg) {
+    message = msg;
+    msg = _logic.store.any(null, ns.dct('isReplacedBy'), message, message.doc());
+  }
+
+  return message;
+}
+
+function mostRecentVersion(message) {
+  var msg = message;
+
+  while (msg) {
+    message = msg;
+    msg = _logic.store.any(message, ns.dct('isReplacedBy'), null, message.doc());
+  }
+
+  return message;
+}
+
+function isDeleted(message) {
+  return _logic.store.holds(message, ns.schema('dateDeleted'), null, message.doc());
+}
+
+function isReplaced(message) {
+  return _logic.store.holds(message, ns.dct('isReplacedBy'), null, message.doc());
+}
+
+function isHidden(message) {
+  return this.isDeleted(message) || this.isReplaced(message);
+} // A Nickname for a person
+
+
+function nick(person) {
+  var s = _logic.store.any(person, ns.foaf('nick'));
+
+  if (s) return '' + s.value;
+  return '' + utils.label(person);
+}
+
+function _createIfNotExists(_x4) {
+  return _createIfNotExists2.apply(this, arguments);
+} // ends
+
+
+function _createIfNotExists2() {
+  _createIfNotExists2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(doc) {
+    var contentType,
+        data,
+        response,
+        _args4 = arguments;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            contentType = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 'text/turtle';
+            data = _args4.length > 2 && _args4[2] !== undefined ? _args4[2] : '';
+            _context4.prev = 2;
+            _context4.next = 5;
+            return _logic.store.fetcher.load(doc);
+
+          case 5:
+            response = _context4.sent;
+            _context4.next = 28;
+            break;
+
+          case 8:
+            _context4.prev = 8;
+            _context4.t0 = _context4["catch"](2);
+
+            if (!(_context4.t0.response.status === 404)) {
+              _context4.next = 26;
+              break;
+            }
+
+            debug.log('createIfNotExists: doc does NOT exist, will create... ' + doc);
+            _context4.prev = 12;
+            _context4.next = 15;
+            return _logic.store.fetcher.webOperation('PUT', doc.uri, {
+              data: data,
+              contentType: contentType
+            });
+
+          case 15:
+            response = _context4.sent;
+            _context4.next = 22;
+            break;
+
+          case 18:
+            _context4.prev = 18;
+            _context4.t1 = _context4["catch"](12);
+            debug.log('createIfNotExists doc FAILED: ' + doc + ': ' + _context4.t1);
+            throw _context4.t1;
+
+          case 22:
+            delete _logic.store.fetcher.requested[doc.uri]; // delete cached 404 error
+            // debug.log('createIfNotExists doc created ok ' + doc)
+
+            return _context4.abrupt("return", response);
+
+          case 26:
+            debug.log('createIfNotExists doc load error NOT 404:  ' + doc + ': ' + _context4.t0);
+            throw _context4.t0;
+
+          case 28:
+            return _context4.abrupt("return", response);
+
+          case 29:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4, null, [[2, 8], [12, 18]]);
+  }));
+  return _createIfNotExists2.apply(this, arguments);
+}
+//# sourceMappingURL=chatLogic.js.map
+
+/***/ }),
+
 /***/ "./lib/chat/dateFolder.js":
 /*!********************************!*\
   !*** ./lib/chat/dateFolder.js ***!
@@ -5687,14 +6039,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /**
  * Contains the [[DateFolder]] class
- * @packageDocumentation
+ * This tracks data stored in dated folders and sub-folders
+ *
  */
 // pull in first avoid cross-refs
-var kb = _logic.store;
+
 /**
  * Track back through the YYYY/MM/DD tree to find the previous/next day
  */
-
 var DateFolder = /*#__PURE__*/function () {
   function DateFolder(rootThing, leafFileName, membershipProperty) {
     (0, _classCallCheck2["default"])(this, DateFolder);
@@ -5718,7 +6070,7 @@ var DateFolder = /*#__PURE__*/function () {
       var path = isoDate.split('T')[0].replace(/-/g, '/'); //  Like "2018/05/07"
 
       path = this.root.dir().uri + path + '/' + this.leafFileName;
-      return kb.sym(path);
+      return _logic.store.sym(path);
     }
     /* Generate a date object from the leaf file name
      */
@@ -5780,12 +6132,12 @@ var DateFolder = /*#__PURE__*/function () {
                                         }
 
                                         _folder = siblings.pop();
-                                        leafDocument = kb.sym(_folder.uri + thisDateFolder.leafFileName);
+                                        leafDocument = _logic.store.sym(_folder.uri + thisDateFolder.leafFileName);
                                         _context.next = 10;
-                                        return kb.fetcher.load(leafDocument);
+                                        return _logic.store.fetcher.load(leafDocument);
 
                                       case 10:
-                                        if (!(kb.statementsMatching(null, ns.dct('created'), null, leafDocument).length > 0)) {
+                                        if (!(_logic.store.statementsMatching(null, ns.dct('created'), null, leafDocument).length > 0)) {
                                           _context.next = 12;
                                           break;
                                         }
@@ -5829,10 +6181,10 @@ var DateFolder = /*#__PURE__*/function () {
                             // debug.log('  previousPeriod level' + level + ' file ' + file)
                             parent = file.dir();
                             _context2.next = 7;
-                            return kb.fetcher.load(parent);
+                            return _logic.store.fetcher.load(parent);
 
                           case 7:
-                            siblings = kb.each(parent, ns.ldp('contains'));
+                            siblings = _logic.store.each(parent, ns.ldp('contains'));
                             siblings = siblings.filter(younger);
                             _context2.next = 11;
                             return lastNonEmpty(siblings);
@@ -5871,10 +6223,10 @@ var DateFolder = /*#__PURE__*/function () {
 
                           case 21:
                             _context2.next = 23;
-                            return kb.fetcher.load(uncle);
+                            return _logic.store.fetcher.load(uncle);
 
                           case 23:
-                            cousins = kb.each(uncle, ns.ldp('contains'));
+                            cousins = _logic.store.each(uncle, ns.ldp('contains'));
                             _context2.next = 26;
                             return lastNonEmpty(cousins);
 
@@ -5910,7 +6262,7 @@ var DateFolder = /*#__PURE__*/function () {
                   break;
                 }
 
-                doc = kb.sym(found.uri + this.leafFileName);
+                doc = _logic.store.sym(found.uri + this.leafFileName);
                 return _context3.abrupt("return", this.dateFromLeafDocument(doc));
 
               case 10:
@@ -6081,166 +6433,103 @@ var _typeof = __webpack_require__(/*! @babel/runtime/helpers/typeof */ "./node_m
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createIfNotExists = createIfNotExists;
 exports.desktopNotification = desktopNotification;
 exports.infiniteMessageArea = infiniteMessageArea;
+exports.insertMessageIntoTable = insertMessageIntoTable;
 
 var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js"));
 
 var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ "./node_modules/@babel/runtime/helpers/asyncToGenerator.js"));
 
-var _index = __webpack_require__(/*! ../authn/index */ "./lib/authn/index.js");
-
 var debug = _interopRequireWildcard(__webpack_require__(/*! ../debug */ "./lib/debug.js"));
 
 var _iconBase = __webpack_require__(/*! ../iconBase */ "./lib/iconBase.js");
 
 var _logic = __webpack_require__(/*! ../logic */ "./lib/logic.js");
 
-var _index2 = __webpack_require__(/*! ../media/index */ "./lib/media/index.js");
-
 var ns = _interopRequireWildcard(__webpack_require__(/*! ../ns */ "./lib/ns.js"));
 
-var pad = _interopRequireWildcard(__webpack_require__(/*! ../pad */ "./lib/pad.js"));
-
-var _dateFolder = __webpack_require__(/*! ./dateFolder */ "./lib/chat/dateFolder.js");
+var _chatLogic = __webpack_require__(/*! ./chatLogic */ "./lib/chat/chatLogic.js");
 
 var _message = __webpack_require__(/*! ./message */ "./lib/chat/message.js");
 
-var _bookmarks = __webpack_require__(/*! ./bookmarks */ "./lib/chat/bookmarks.js");
-
 var $rdf = _interopRequireWildcard(__webpack_require__(/*! rdflib */ "./node_modules/rdflib/esm/index.js"));
 
-var style = _interopRequireWildcard(__webpack_require__(/*! ../style */ "./lib/style.js"));
-
-var utils = _interopRequireWildcard(__webpack_require__(/*! ../utils */ "./lib/utils/index.js"));
-
 var widgets = _interopRequireWildcard(__webpack_require__(/*! ../widgets */ "./lib/widgets/index.js"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+/**
+ * Contains the [[infiniteMessageArea]] class
+ * @packageDocumentation
+ */
+// import { authn } from '../authn/index'
+// import { media } from '../media/index'
+// import * as pad from '../pad'
+// import { DateFolder } from './dateFolder'
+// import { findBookmarkDocument } from './bookmarks'
+// pull in first avoid cross-refs
+// import * as style from '../style'
+// import * as utils from '../utils'
+// const UI = { authn, icons, ns, media, pad, $rdf, store, style, utils, widgets }
+function desktopNotification(str) {
+  // Let's check if the browser supports notifications
+  if (!('Notification' in window)) {
+    debug.warn('This browser does no t support desktop notification');
+  } else if (Notification.permission === 'granted') {
+    // Let's check whether notificatio n permissions have already been granted
+    // eslint-disable-next-line no-new
+    new Notification(str);
+  } else if (Notification.permission !== 'denied') {
+    // Otherwise, we need to ask the user for permission
+    Notification.requestPermission().then(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === 'granted') {
+        // eslint-disable-next-line no-new
+        new Notification(str);
+      }
+    });
+  } // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
 
-var UI = {
-  authn: _index.authn,
-  icons: _iconBase.icons,
-  ns: ns,
-  media: _index2.media,
-  pad: pad,
-  $rdf: $rdf,
-  store: _logic.store,
-  style: style,
-  utils: utils,
-  widgets: widgets
-};
-/* global alert */
-
-var SERVER_MKDIRP_BUG = false; // Set false timbl 2021-10-31 should be fixed by now
-
-function createIfNotExists(_x) {
-  return _createIfNotExists.apply(this, arguments);
 }
+/**
+ * Renders a chat message inside a `messageTable`
+ */
 
-function _createIfNotExists() {
-  _createIfNotExists = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(doc) {
-    var contentType,
-        data,
-        fetcher,
-        response,
-        _args = arguments;
-    return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            contentType = _args.length > 1 && _args[1] !== undefined ? _args[1] : 'text/turtle';
-            data = _args.length > 2 && _args[2] !== undefined ? _args[2] : '';
-            fetcher = UI.store.fetcher;
-            _context.prev = 3;
-            _context.next = 6;
-            return fetcher.load(doc);
-
-          case 6:
-            response = _context.sent;
-            _context.next = 29;
-            break;
-
-          case 9:
-            _context.prev = 9;
-            _context.t0 = _context["catch"](3);
-
-            if (!(_context.t0.response.status === 404)) {
-              _context.next = 27;
-              break;
-            }
-
-            debug.log('createIfNotExists: doc does NOT exist, will create... ' + doc);
-            _context.prev = 13;
-            _context.next = 16;
-            return fetcher.webOperation('PUT', doc.uri, {
-              data: data,
-              contentType: contentType
-            });
-
-          case 16:
-            response = _context.sent;
-            _context.next = 23;
-            break;
-
-          case 19:
-            _context.prev = 19;
-            _context.t1 = _context["catch"](13);
-            debug.log('createIfNotExists doc FAILED: ' + doc + ': ' + _context.t1);
-            throw _context.t1;
 
-          case 23:
-            delete fetcher.requested[doc.uri]; // delete cached 404 error
-            // debug.log('createIfNotExists doc created ok ' + doc)
+function insertMessageIntoTable(channelObject, messageTable, message, fresh, options, userContext) {
+  var messageRow = (0, _message.renderMessageRow)(channelObject, message, fresh, options, userContext); // const message = messageRow.AJAR_subject
 
-            return _context.abrupt("return", response);
+  if (options.selectedMessage && options.selectedMessage.sameTerm(message)) {
+    messageRow.style.backgroundColor = 'yellow';
+    options.selectedElement = messageRow;
+    messageTable.selectedElement = messageRow;
+  }
 
-          case 27:
-            debug.log('createIfNotExists doc load error NOT 404:  ' + doc + ': ' + _context.t0);
-            throw _context.t0;
+  var done = false;
 
-          case 29:
-            return _context.abrupt("return", response);
+  for (var ele = messageTable.firstChild;; ele = ele.nextSibling) {
+    if (!ele) {
+      // empty
+      break;
+    }
 
-          case 30:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee, null, [[3, 9], [13, 19]]);
-  }));
-  return _createIfNotExists.apply(this, arguments);
-}
+    var newestFirst = options.newestfirst === true;
+    var dateString = messageRow.AJAR_date;
 
-function desktopNotification(str) {
-  // Let's check if the browser supports notifications
-  if (!('Notification' in window)) {
-    debug.warn('This browser does not support desktop notification');
-  } else if (Notification.permission === 'granted') {
-    // Let's check whether notification permissions have already been granted
-    // eslint-disable-next-line no-new
-    new Notification(str);
-  } else if (Notification.permission !== 'denied') {
-    // Otherwise, we need to ask the user for permission
-    Notification.requestPermission().then(function (permission) {
-      // If the user accepts, let's create a notification
-      if (permission === 'granted') {
-        // eslint-disable-next-line no-new
-        new Notification(str);
-      }
-    });
-  } // At last, if the user has denied notifications, and you
-  // want to be respectful there is no need to bother them any more.
+    if (dateString > ele.AJAR_date && newestFirst || dateString < ele.AJAR_date && !newestFirst) {
+      messageTable.insertBefore(messageRow, ele);
+      done = true;
+      break;
+    }
+  }
 
+  if (!done) {
+    messageTable.appendChild(messageRow);
+  }
 }
 /**
  * Common code for a chat (discussion area of messages about something)
@@ -6248,27 +6537,42 @@ function desktopNotification(str) {
  *
  * Parameters for the whole chat like its title are stored on
  * index.ttl#this and the chats messages are stored in YYYY/MM/DD/chat.ttl
+ *
+ * Use to import store as param 2, now ignores it and uses the UI main store
+ *
+ * Options include:
+
+ - shiftEnterSendsMessage: Use shift/enter to send message, Enter to add newline, instead of the reverse.
+ - authorDateOnLeft:  Display the author's anme and date of the message in the left column instead of first above the content
+ - selectedMessage: Display one message highlighted with the chat around it
+ - solo: By itelf on a webpage, so user scroll anywhere in the web page scan scroll the chat.
+ - newestFirst: Arrange the chat messages chronologically newest at the top insted of at the bottom
+ - infinite:  Use infinite scroll
+ - showDeletedMessages: Show messages which have been delted as "deleted message". Otherwise hide them.
+ - expandImagesInline: If a URI by itself in a message looks like an image URI, replace it with the image
+ - inlineImageHeightEms: The height (in ems) of images expaned from their URIs in the chat.
+
  */
 
 
-function infiniteMessageArea(_x2, _x3, _x4, _x5) {
+function infiniteMessageArea(_x, _x2, _x3, _x4) {
   return _infiniteMessageArea.apply(this, arguments);
 }
 
 function _infiniteMessageArea() {
-  _infiniteMessageArea = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee17(dom, kb, chatChannel, options) {
-    var ns, WF, DCT, newestFirst, dateFolder, messageBodyStyle, div, menuButton, statusArea, userContext, me, updater, newMessageForm, syncMessages, addMessage, insertPreviousMessages, _insertPreviousMessages, removePreviousMessages, createMessageTable, _createMessageTable, renderMessageTable, addNewTableIfNewDay, _addNewTableIfNewDay, appendCurrentMessages, _appendCurrentMessages, liveMessageTable, earliest, latest, lock, loadMoreWhereNeeded, _loadMoreWhereNeeded, loadInitialContent, _loadInitialContent;
+  _infiniteMessageArea = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12(dom, wasStore, chatChannel, options) {
+    var syncMessages, addMessage, insertPreviousMessages, _insertPreviousMessages, removePreviousMessages, createMessageTable, _createMessageTable, renderMessageTable, addNewChatDocumentIfNewDay, _addNewChatDocumentIfNewDay, appendCurrentMessages, _appendCurrentMessages, loadMoreWhereNeeded, _loadMoreWhereNeeded, loadInitialContent, _loadInitialContent, newestFirst, channelObject, dateFolder, div, statusArea, userContext, liveMessageTable, earliest, latest, lock;
 
-    return _regenerator["default"].wrap(function _callee17$(_context17) {
+    return _regenerator["default"].wrap(function _callee12$(_context12) {
       while (1) {
-        switch (_context17.prev = _context17.next) {
+        switch (_context12.prev = _context12.next) {
           case 0:
             _loadInitialContent = function _loadInitialContent3() {
-              _loadInitialContent = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
+              _loadInitialContent = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
                 var yank, fixScroll, live, selectedDocument, now, todayDocument, selectedMessageTable, selectedDate;
-                return _regenerator["default"].wrap(function _callee16$(_context16) {
+                return _regenerator["default"].wrap(function _callee11$(_context11) {
                   while (1) {
-                    switch (_context16.prev = _context16.next) {
+                    switch (_context11.prev = _context11.next) {
                       case 0:
                         fixScroll = function _fixScroll() {
                           if (options.selectedElement) {
@@ -6296,27 +6600,27 @@ function _infiniteMessageArea() {
                         }
 
                         if (!(options.selectedMessage && !live)) {
-                          _context16.next = 15;
+                          _context11.next = 15;
                           break;
                         }
 
                         selectedDate = dateFolder.dateFromLeafDocument(selectedDocument);
-                        _context16.next = 7;
+                        _context11.next = 7;
                         return createMessageTable(selectedDate, live);
 
                       case 7:
-                        selectedMessageTable = _context16.sent;
+                        selectedMessageTable = _context11.sent;
                         div.appendChild(selectedMessageTable);
                         earliest.messageTable = selectedMessageTable;
                         latest.messageTable = selectedMessageTable;
                         yank();
                         setTimeout(yank, 1000); // @@ kludge - restore position distubed by other cHANGES
 
-                        _context16.next = 19;
+                        _context11.next = 19;
                         break;
 
                       case 15:
-                        _context16.next = 17;
+                        _context11.next = 17;
                         return appendCurrentMessages();
 
                       case 17:
@@ -6324,7 +6628,7 @@ function _infiniteMessageArea() {
                         latest.messageTable = liveMessageTable;
 
                       case 19:
-                        _context16.next = 21;
+                        _context11.next = 21;
                         return loadMoreWhereNeeded(null, fixScroll);
 
                       case 21:
@@ -6336,10 +6640,10 @@ function _infiniteMessageArea() {
 
                       case 23:
                       case "end":
-                        return _context16.stop();
+                        return _context11.stop();
                     }
                   }
-                }, _callee16);
+                }, _callee11);
               }));
               return _loadInitialContent.apply(this, arguments);
             };
@@ -6349,18 +6653,18 @@ function _infiniteMessageArea() {
             };
 
             _loadMoreWhereNeeded = function _loadMoreWhereNeeded3() {
-              _loadMoreWhereNeeded = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15(event, fixScroll) {
+              _loadMoreWhereNeeded = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10(event, fixScroll) {
                 var freeze, magicZone, done, scrollBottom, scrollTop;
-                return _regenerator["default"].wrap(function _callee15$(_context15) {
+                return _regenerator["default"].wrap(function _callee10$(_context10) {
                   while (1) {
-                    switch (_context15.prev = _context15.next) {
+                    switch (_context10.prev = _context10.next) {
                       case 0:
                         if (!lock) {
-                          _context15.next = 2;
+                          _context10.next = 2;
                           break;
                         }
 
-                        return _context15.abrupt("return");
+                        return _context10.abrupt("return");
 
                       case 2:
                         lock = true;
@@ -6370,12 +6674,12 @@ function _infiniteMessageArea() {
 
                       case 5:
                         if (!(div.scrollTop < magicZone && earliest.messageTable && !earliest.messageTable.initial && earliest.messageTable.extendBackwards)) {
-                          _context15.next = 21;
+                          _context10.next = 21;
                           break;
                         }
 
                         if (!(div.scrollHeight === 0)) {
-                          _context15.next = 10;
+                          _context10.next = 10;
                           break;
                         }
 
@@ -6383,17 +6687,17 @@ function _infiniteMessageArea() {
                         setTimeout(loadMoreWhereNeeded, 2000); // couple be less
 
                         lock = false;
-                        return _context15.abrupt("return");
+                        return _context10.abrupt("return");
 
                       case 10:
                         // console.log('    chat/loadMoreWhereNeeded: Going now')
                         scrollBottom = div.scrollHeight - div.scrollTop;
                         debug.log('infinite scroll: adding above: top ' + div.scrollTop);
-                        _context15.next = 14;
+                        _context10.next = 14;
                         return earliest.messageTable.extendBackwards();
 
                       case 14:
-                        done = _context15.sent;
+                        done = _context10.sent;
 
                         if (freeze) {
                           div.scrollTop = div.scrollHeight - scrollBottom;
@@ -6402,14 +6706,14 @@ function _infiniteMessageArea() {
                         if (fixScroll) fixScroll();
 
                         if (!done) {
-                          _context15.next = 19;
+                          _context10.next = 19;
                           break;
                         }
 
-                        return _context15.abrupt("break", 21);
+                        return _context10.abrupt("break", 21);
 
                       case 19:
-                        _context15.next = 5;
+                        _context10.next = 5;
                         break;
 
                       case 21:
@@ -6417,17 +6721,17 @@ function _infiniteMessageArea() {
                         div.scrollHeight - div.scrollTop - div.clientHeight < magicZone && // we are scrolled right to the bottom
                         latest.messageTable && !latest.messageTable["final"] && // there is more data to come
                         latest.messageTable.extendForwards)) {
-                          _context15.next = 33;
+                          _context10.next = 33;
                           break;
                         }
 
                         scrollTop = div.scrollTop;
                         debug.log('infinite scroll: adding below: bottom: ' + (div.scrollHeight - div.scrollTop - div.clientHeight));
-                        _context15.next = 26;
+                        _context10.next = 26;
                         return latest.messageTable.extendForwards();
 
                       case 26:
-                        done = _context15.sent;
+                        done = _context10.sent;
 
                         // then add more data on the bottom
                         if (freeze) {
@@ -6437,14 +6741,14 @@ function _infiniteMessageArea() {
                         if (fixScroll) fixScroll();
 
                         if (!done) {
-                          _context15.next = 31;
+                          _context10.next = 31;
                           break;
                         }
 
-                        return _context15.abrupt("break", 33);
+                        return _context10.abrupt("break", 33);
 
                       case 31:
-                        _context15.next = 21;
+                        _context10.next = 21;
                         break;
 
                       case 33:
@@ -6452,72 +6756,68 @@ function _infiniteMessageArea() {
 
                       case 34:
                       case "end":
-                        return _context15.stop();
+                        return _context10.stop();
                     }
                   }
-                }, _callee15);
+                }, _callee10);
               }));
               return _loadMoreWhereNeeded.apply(this, arguments);
             };
 
-            loadMoreWhereNeeded = function _loadMoreWhereNeeded2(_x18, _x19) {
+            loadMoreWhereNeeded = function _loadMoreWhereNeeded2(_x10, _x11) {
               return _loadMoreWhereNeeded.apply(this, arguments);
             };
 
             _appendCurrentMessages = function _appendCurrentMessage2() {
-              _appendCurrentMessages = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
+              _appendCurrentMessages = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
                 var now, chatDocument, messageTable;
-                return _regenerator["default"].wrap(function _callee14$(_context14) {
+                return _regenerator["default"].wrap(function _callee9$(_context9) {
                   while (1) {
-                    switch (_context14.prev = _context14.next) {
+                    switch (_context9.prev = _context9.next) {
                       case 0:
                         now = new Date();
-                        chatDocument = dateFolder.leafDocumentFromDate(now);
-                        /*   Don't actually make the documemnt until a message is sent  @@@@@ WHEN SERVER FIXED
-                         * currently server won't patch to a file ina non-existent directory
-                         */
-
-                        /*
-                        if (SERVER_MKDIRP_BUG) {
-                          try {
-                            await createIfNotExists(chatDocument)
-                          } catch (e) {
-                            div.appendChild(UI.widgets.errorMessageBlock(
-                              dom, 'Problem accessing chat file: ' + e))
-                            return
-                          }
-                        }
-                        */
-                        /// ///////////////////////////////////////////////////////////
+                        chatDocument = dateFolder.leafDocumentFromDate(now); /// ///////////////////////////////////////////////////////////
 
-                        _context14.next = 4;
+                        _context9.next = 4;
                         return createMessageTable(now, true);
 
                       case 4:
-                        messageTable = _context14.sent;
+                        messageTable = _context9.sent;
                         div.appendChild(messageTable);
+                        div.refresh = /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+                          return _regenerator["default"].wrap(function _callee8$(_context8) {
+                            while (1) {
+                              switch (_context8.prev = _context8.next) {
+                                case 0:
+                                  _context8.next = 2;
+                                  return addNewChatDocumentIfNewDay(new Date());
+
+                                case 2:
+                                  syncMessages(chatChannel, messageTable); // @@ livemessagetable??
+
+                                  desktopNotification(chatChannel);
+
+                                case 4:
+                                case "end":
+                                  return _context8.stop();
+                              }
+                            }
+                          }, _callee8);
+                        })); // The short chat version the live update listening is done in the pane but we do it in the widget @@
 
-                        div.refresh = function () {
-                          // only the last messageTable is live
-                          addNewTableIfNewDay(new Date()).then(function () {
-                            syncMessages(chatChannel, messageTable);
-                            desktopNotification(chatChannel);
-                          });
-                        }; // The short chat version fors live update in the pane but we do it in the widget
-
+                        _logic.store.updater.addDownstreamChangeListener(chatDocument, div.refresh); // Live update
 
-                        kb.updater.addDownstreamChangeListener(chatDocument, div.refresh); // Live update
 
                         liveMessageTable = messageTable;
                         latest.messageTable = liveMessageTable;
-                        return _context14.abrupt("return", messageTable);
+                        return _context9.abrupt("return", messageTable);
 
                       case 11:
                       case "end":
-                        return _context14.stop();
+                        return _context9.stop();
                     }
                   }
-                }, _callee14);
+                }, _callee9);
               }));
               return _appendCurrentMessages.apply(this, arguments);
             };
@@ -6526,19 +6826,18 @@ function _infiniteMessageArea() {
               return _appendCurrentMessages.apply(this, arguments);
             };
 
-            _addNewTableIfNewDay = function _addNewTableIfNewDay3() {
-              _addNewTableIfNewDay = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13(now) {
+            _addNewChatDocumentIfNewDay = function _addNewChatDocumentIf2() {
+              _addNewChatDocumentIfNewDay = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
                 var newChatDocument, oldChatDocument, sts;
-                return _regenerator["default"].wrap(function _callee13$(_context13) {
+                return _regenerator["default"].wrap(function _callee7$(_context7) {
                   while (1) {
-                    switch (_context13.prev = _context13.next) {
+                    switch (_context7.prev = _context7.next) {
                       case 0:
-                        // let now = new Date()
                         // @@ Remove listener from previous table as it is now static
-                        newChatDocument = dateFolder.leafDocumentFromDate(now);
+                        newChatDocument = dateFolder.leafDocumentFromDate(new Date());
 
                         if (newChatDocument.sameTerm(latest.messageTable.chatDocument)) {
-                          _context13.next = 7;
+                          _context7.next = 7;
                           break;
                         }
 
@@ -6549,36 +6848,37 @@ function _infiniteMessageArea() {
                         }
 
                         oldChatDocument = latest.messageTable.chatDocument;
-                        _context13.next = 6;
+                        _context7.next = 6;
                         return appendCurrentMessages();
 
                       case 6:
                         // Adding a link in the document will ping listeners to add the new block too
-                        if (!kb.holds(oldChatDocument, ns.rdfs('seeAlso'), newChatDocument, oldChatDocument)) {
+                        if (!_logic.store.holds(oldChatDocument, ns.rdfs('seeAlso'), newChatDocument, oldChatDocument)) {
                           sts = [$rdf.st(oldChatDocument, ns.rdfs('seeAlso'), newChatDocument, oldChatDocument)];
-                          updater.update([], sts, function (ok, body) {
-                            if (!ok) {
-                              alert('Unable to link old message block to new one.' + body);
-                            }
-                          });
+
+                          try {
+                            _logic.store.updater.update([], sts);
+                          } catch (err) {
+                            alert('Unable to link old chat file to new one:' + err);
+                          }
                         }
 
                       case 7:
                       case "end":
-                        return _context13.stop();
+                        return _context7.stop();
                     }
                   }
-                }, _callee13);
+                }, _callee7);
               }));
-              return _addNewTableIfNewDay.apply(this, arguments);
+              return _addNewChatDocumentIfNewDay.apply(this, arguments);
             };
 
-            addNewTableIfNewDay = function _addNewTableIfNewDay2(_x17) {
-              return _addNewTableIfNewDay.apply(this, arguments);
+            addNewChatDocumentIfNewDay = function _addNewChatDocumentIf() {
+              return _addNewChatDocumentIfNewDay.apply(this, arguments);
             };
 
             renderMessageTable = function _renderMessageTable(date, live) {
-              var scrollBackButton;
+              var scrollBacstoreutton;
               var scrollForwardButton; /// /////////////////   Scroll down adding more above
 
               function extendBackwards() {
@@ -6586,23 +6886,23 @@ function _infiniteMessageArea() {
               }
 
               function _extendBackwards() {
-                _extendBackwards = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+                _extendBackwards = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
                   var done;
-                  return _regenerator["default"].wrap(function _callee7$(_context7) {
+                  return _regenerator["default"].wrap(function _callee$(_context) {
                     while (1) {
-                      switch (_context7.prev = _context7.next) {
+                      switch (_context.prev = _context.next) {
                         case 0:
-                          _context7.next = 2;
+                          _context.next = 2;
                           return insertPreviousMessages(true);
 
                         case 2:
-                          done = _context7.sent;
+                          done = _context.sent;
 
                           if (done) {
-                            if (scrollBackButton) {
-                              scrollBackButton.firstChild.setAttribute('src', UI.icons.iconBase + 'noun_T-Block_1114655_000000.svg'); // T
+                            if (scrollBacstoreutton) {
+                              scrollBacstoreutton.firstChild.setAttribute('src', _iconBase.icons.iconBase + 'noun_T-Block_1114655_000000.svg'); // T
 
-                              scrollBackButton.disabled = true;
+                              scrollBacstoreutton.disabled = true;
                             }
 
                             messageTable.initial = true;
@@ -6610,67 +6910,67 @@ function _infiniteMessageArea() {
                             messageTable.extendedBack = true;
                           }
 
-                          setScrollBackButtonIcon();
-                          return _context7.abrupt("return", done);
+                          setScrollBacstoreuttonIcon();
+                          return _context.abrupt("return", done);
 
                         case 6:
                         case "end":
-                          return _context7.stop();
+                          return _context.stop();
                       }
                     }
-                  }, _callee7);
+                  }, _callee);
                 }));
                 return _extendBackwards.apply(this, arguments);
               }
 
-              function setScrollBackButtonIcon() {
-                if (!scrollBackButton) {
+              function setScrollBacstoreuttonIcon() {
+                if (!scrollBacstoreutton) {
                   return;
                 }
 
                 var sense = messageTable.extendedBack ? !newestFirst : newestFirst;
                 var scrollBackIcon = messageTable.initial ? 'noun_T-Block_1114655_000000.svg' : getScrollbackIcon(sense);
-                scrollBackButton.firstChild.setAttribute('src', UI.icons.iconBase + scrollBackIcon);
+                scrollBacstoreutton.firstChild.setAttribute('src', _iconBase.icons.iconBase + scrollBackIcon);
 
                 function getScrollbackIcon(sense) {
                   return sense ? 'noun_1369241.svg' : 'noun_1369237.svg';
                 }
               }
 
-              function scrollBackButtonHandler(_x15) {
-                return _scrollBackButtonHandler.apply(this, arguments);
+              function scrollBacstoreuttonHandler(_x8) {
+                return _scrollBacstoreuttonHandler.apply(this, arguments);
               } /// ////////////// Scroll up adding more below
 
 
-              function _scrollBackButtonHandler() {
-                _scrollBackButtonHandler = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8(_event) {
-                  return _regenerator["default"].wrap(function _callee8$(_context8) {
+              function _scrollBacstoreuttonHandler() {
+                _scrollBacstoreuttonHandler = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(_event) {
+                  return _regenerator["default"].wrap(function _callee2$(_context2) {
                     while (1) {
-                      switch (_context8.prev = _context8.next) {
+                      switch (_context2.prev = _context2.next) {
                         case 0:
                           if (!messageTable.extendedBack) {
-                            _context8.next = 6;
+                            _context2.next = 6;
                             break;
                           }
 
                           removePreviousMessages(true, messageTable);
                           messageTable.extendedBack = false;
-                          setScrollBackButtonIcon();
-                          _context8.next = 8;
+                          setScrollBacstoreuttonIcon();
+                          _context2.next = 8;
                           break;
 
                         case 6:
-                          _context8.next = 8;
+                          _context2.next = 8;
                           return extendBackwards();
 
                         case 8:
                         case "end":
-                          return _context8.stop();
+                          return _context2.stop();
                       }
                     }
-                  }, _callee8);
+                  }, _callee2);
                 }));
-                return _scrollBackButtonHandler.apply(this, arguments);
+                return _scrollBacstoreuttonHandler.apply(this, arguments);
               }
 
               function extendForwards() {
@@ -6678,20 +6978,20 @@ function _infiniteMessageArea() {
               }
 
               function _extendForwards() {
-                _extendForwards = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+                _extendForwards = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
                   var done;
-                  return _regenerator["default"].wrap(function _callee9$(_context9) {
+                  return _regenerator["default"].wrap(function _callee3$(_context3) {
                     while (1) {
-                      switch (_context9.prev = _context9.next) {
+                      switch (_context3.prev = _context3.next) {
                         case 0:
-                          _context9.next = 2;
+                          _context3.next = 2;
                           return insertPreviousMessages(false);
 
                         case 2:
-                          done = _context9.sent;
+                          done = _context3.sent;
 
                           if (done) {
-                            scrollForwardButton.firstChild.setAttribute('src', UI.icons.iconBase + 'noun_T-Block_1114655_000000.svg');
+                            scrollForwardButton.firstChild.setAttribute('src', _iconBase.icons.iconBase + 'noun_T-Block_1114655_000000.svg');
                             scrollForwardButton.disabled = true;
                             messageTable["final"] = true;
                           } else {
@@ -6699,14 +6999,14 @@ function _infiniteMessageArea() {
                           }
 
                           setScrollForwardButtonIcon();
-                          return _context9.abrupt("return", done);
+                          return _context3.abrupt("return", done);
 
                         case 6:
                         case "end":
-                          return _context9.stop();
+                          return _context3.stop();
                       }
                     }
-                  }, _callee9);
+                  }, _callee3);
                 }));
                 return _extendForwards.apply(this, arguments);
               }
@@ -6715,37 +7015,48 @@ function _infiniteMessageArea() {
                 var sense = messageTable.extendedForwards ? !newestFirst : newestFirst; // noun_T-Block_1114657_000000.svg
 
                 var scrollForwardIcon = messageTable["final"] ? 'noun_T-Block_1114657_000000.svg' : getScrollForwardButtonIcon(sense);
-                scrollForwardButton.firstChild.setAttribute('src', UI.icons.iconBase + scrollForwardIcon);
+                scrollForwardButton.firstChild.setAttribute('src', _iconBase.icons.iconBase + scrollForwardIcon);
 
                 function getScrollForwardButtonIcon(sense) {
                   return !sense ? 'noun_1369241.svg' : 'noun_1369237.svg';
                 }
               }
 
-              function scrollForwardButtonHandler(_x16) {
+              function scrollForwardButtonHandler(_x9) {
                 return _scrollForwardButtonHandler.apply(this, arguments);
               } /// ///////////////////////
 
+              /*
+              options = options || {}
+              options.authorDateOnLeft = true
+              const newestFirst = options.newestFirst === '1' || options.newestFirst === true // hack for now
+              const channelObject = new ChatChannel(chatChannel, options)
+              const dateFolder = channelObject.dateFolder
+               const div = dom.createElement('div')
+              const statusArea = div.appendChild(dom.createElement('div'))
+              const userContext = { dom, statusArea, div: statusArea } // logged on state, pointers to user's stuff
+              */
+
 
               function _scrollForwardButtonHandler() {
-                _scrollForwardButtonHandler = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10(_event) {
-                  return _regenerator["default"].wrap(function _callee10$(_context10) {
+                _scrollForwardButtonHandler = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(_event) {
+                  return _regenerator["default"].wrap(function _callee4$(_context4) {
                     while (1) {
-                      switch (_context10.prev = _context10.next) {
+                      switch (_context4.prev = _context4.next) {
                         case 0:
                           if (!messageTable.extendedForwards) {
-                            _context10.next = 6;
+                            _context4.next = 6;
                             break;
                           }
 
                           removePreviousMessages(false, messageTable);
                           messageTable.extendedForwards = false;
                           setScrollForwardButtonIcon();
-                          _context10.next = 9;
+                          _context4.next = 9;
                           break;
 
                         case 6:
-                          _context10.next = 8;
+                          _context4.next = 8;
                           return extendForwards();
 
                         case 8:
@@ -6754,10 +7065,10 @@ function _infiniteMessageArea() {
 
                         case 9:
                         case "end":
-                          return _context10.stop();
+                          return _context4.stop();
                       }
                     }
-                  }, _callee10);
+                  }, _callee4);
                 }));
                 return _scrollForwardButtonHandler.apply(this, arguments);
               }
@@ -6777,7 +7088,7 @@ function _infiniteMessageArea() {
                 messageTable["final"] = true;
                 liveMessageTable = messageTable;
                 latest.messageTable = messageTable;
-                var tr = newMessageForm(messageTable);
+                var tr = (0, _message.renderMessageEditor)(channelObject, messageTable, userContext, options);
 
                 if (newestFirst) {
                   messageTable.insertBefore(tr, messageTable.firstChild); // If newestFirst
@@ -6792,27 +7103,27 @@ function _infiniteMessageArea() {
 
 
               if (options.infinite) {
-                var scrollBackButtonTR = dom.createElement('tr');
-                var scrollBackButtonCell = scrollBackButtonTR.appendChild(dom.createElement('td')); // up traingles: noun_1369237.svg
+                var scrollBacstoreuttonTR = dom.createElement('tr');
+                var scrollBacstoreuttonCell = scrollBacstoreuttonTR.appendChild(dom.createElement('td')); // up traingles: noun_1369237.svg
                 // down triangles: noun_1369241.svg
 
                 var scrollBackIcon = newestFirst ? 'noun_1369241.svg' : 'noun_1369237.svg'; // down and up arrows respoctively
 
-                scrollBackButton = UI.widgets.button(dom, UI.icons.iconBase + scrollBackIcon, 'Previous messages ...');
-                scrollBackButtonCell.style = 'width:3em; height:3em;';
-                scrollBackButton.addEventListener('click', scrollBackButtonHandler, false);
+                scrollBacstoreutton = widgets.button(dom, _iconBase.icons.iconBase + scrollBackIcon, 'Previous messages ...');
+                scrollBacstoreuttonCell.style = 'width:3em; height:3em;';
+                scrollBacstoreutton.addEventListener('click', scrollBacstoreuttonHandler, false);
                 messageTable.extendedBack = false;
-                scrollBackButtonCell.appendChild(scrollBackButton);
-                setScrollBackButtonIcon();
-                var dateCell = scrollBackButtonTR.appendChild(dom.createElement('td'));
+                scrollBacstoreuttonCell.appendChild(scrollBacstoreutton);
+                setScrollBacstoreuttonIcon();
+                var dateCell = scrollBacstoreuttonTR.appendChild(dom.createElement('td'));
                 dateCell.style = 'text-align: center; vertical-align: middle; color: #888; font-style: italic;';
-                dateCell.textContent = UI.widgets.shortDate(date.toISOString(), true); // no time, only date
+                dateCell.textContent = widgets.shortDate(date.toISOString(), true); // no time, only date
                 // @@@@@@@@@@@ todo move this button to other end of  message cell, o
 
-                var scrollForwardButtonCell = scrollBackButtonTR.appendChild(dom.createElement('td'));
+                var scrollForwardButtonCell = scrollBacstoreuttonTR.appendChild(dom.createElement('td'));
                 var scrollForwardIcon = newestFirst ? 'noun_1369241.svg' : 'noun_1369237.svg'; // down and up arrows respoctively
 
-                scrollForwardButton = UI.widgets.button(dom, UI.icons.iconBase + scrollForwardIcon, 'Later messages ...');
+                scrollForwardButton = widgets.button(dom, _iconBase.icons.iconBase + scrollForwardIcon, 'Later messages ...');
                 scrollForwardButtonCell.appendChild(scrollForwardButton);
                 scrollForwardButtonCell.style = 'width:3em; height:3em;';
                 scrollForwardButton.addEventListener('click', scrollForwardButtonHandler, false);
@@ -6822,13 +7133,13 @@ function _infiniteMessageArea() {
 
                 if (!newestFirst) {
                   // opposite end from the entry field
-                  messageTable.insertBefore(scrollBackButtonTR, messageTable.firstChild); // If not newestFirst
+                  messageTable.insertBefore(scrollBacstoreuttonTR, messageTable.firstChild); // If not newestFirst
                 } else {
-                  messageTable.appendChild(scrollBackButtonTR); //  newestFirst
+                  messageTable.appendChild(scrollBacstoreuttonTR); //  newestFirst
                 }
               }
 
-              var sts = kb.statementsMatching(null, WF('message'), null, chatDocument);
+              var sts = _logic.store.statementsMatching(null, ns.wf('message'), null, chatDocument);
 
               if (!live && sts.length === 0) {// not todays
                 // no need buttomns at the moment
@@ -6845,57 +7156,57 @@ function _infiniteMessageArea() {
             };
 
             _createMessageTable = function _createMessageTable3() {
-              _createMessageTable = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12(date, live) {
+              _createMessageTable = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(date, live) {
                 var chatDocument, messageTable, statusTR;
-                return _regenerator["default"].wrap(function _callee12$(_context12) {
+                return _regenerator["default"].wrap(function _callee6$(_context6) {
                   while (1) {
-                    switch (_context12.prev = _context12.next) {
+                    switch (_context6.prev = _context6.next) {
                       case 0:
                         debug.log('   createMessageTable for  ' + date);
                         chatDocument = dateFolder.leafDocumentFromDate(date);
-                        _context12.prev = 2;
-                        _context12.next = 5;
-                        return kb.fetcher.load(chatDocument);
+                        _context6.prev = 2;
+                        _context6.next = 5;
+                        return _logic.store.fetcher.load(chatDocument);
 
                       case 5:
-                        _context12.next = 19;
+                        _context6.next = 19;
                         break;
 
                       case 7:
-                        _context12.prev = 7;
-                        _context12.t0 = _context12["catch"](2);
+                        _context6.prev = 7;
+                        _context6.t0 = _context6["catch"](2);
                         messageTable = dom.createElement('table');
                         statusTR = messageTable.appendChild(dom.createElement('tr')); // ### find status in exception
 
-                        if (!(_context12.t0.response && _context12.t0.response.status && _context12.t0.response.status === 404)) {
-                          _context12.next = 16;
+                        if (!(_context6.t0.response && _context6.t0.response.status && _context6.t0.response.status === 404)) {
+                          _context6.next = 16;
                           break;
                         }
 
                         debug.log('Error 404 for chat file ' + chatDocument);
-                        return _context12.abrupt("return", renderMessageTable(date, live));
+                        return _context6.abrupt("return", renderMessageTable(date, live));
 
                       case 16:
                         debug.log('*** Error NON 404 for chat file ' + chatDocument);
-                        statusTR.appendChild(UI.widgets.errorMessageBlock(dom, _context12.t0, 'pink'));
+                        statusTR.appendChild(widgets.errorMessageBlock(dom, _context6.t0, 'pink'));
 
                       case 18:
-                        return _context12.abrupt("return", statusTR);
+                        return _context6.abrupt("return", statusTR);
 
                       case 19:
-                        return _context12.abrupt("return", renderMessageTable(date, live));
+                        return _context6.abrupt("return", renderMessageTable(date, live));
 
                       case 20:
                       case "end":
-                        return _context12.stop();
+                        return _context6.stop();
                     }
                   }
-                }, _callee12, null, [[2, 7]]);
+                }, _callee6, null, [[2, 7]]);
               }));
               return _createMessageTable.apply(this, arguments);
             };
 
-            createMessageTable = function _createMessageTable2(_x13, _x14) {
+            createMessageTable = function _createMessageTable2(_x6, _x7) {
               return _createMessageTable.apply(this, arguments);
             };
 
@@ -6917,38 +7228,38 @@ function _infiniteMessageArea() {
             };
 
             _insertPreviousMessages = function _insertPreviousMessag2() {
-              _insertPreviousMessages = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11(backwards) {
+              _insertPreviousMessages = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(backwards) {
                 var extremity, date, live, todayDoc, doc, newMessageTable;
-                return _regenerator["default"].wrap(function _callee11$(_context11) {
+                return _regenerator["default"].wrap(function _callee5$(_context5) {
                   while (1) {
-                    switch (_context11.prev = _context11.next) {
+                    switch (_context5.prev = _context5.next) {
                       case 0:
                         extremity = backwards ? earliest : latest;
                         date = extremity.messageTable.date; // day in mssecs
 
-                        _context11.next = 4;
+                        _context5.next = 4;
                         return dateFolder.loadPrevious(date, backwards);
 
                       case 4:
-                        date = _context11.sent;
+                        date = _context5.sent;
                         // backwards
                         debug.log("insertPreviousMessages: from ".concat(backwards ? 'backwards' : 'forwards', " loadPrevious: ").concat(date));
 
                         if (!(!date && !backwards && !liveMessageTable)) {
-                          _context11.next = 9;
+                          _context5.next = 9;
                           break;
                         }
 
-                        _context11.next = 9;
+                        _context5.next = 9;
                         return appendCurrentMessages();
 
                       case 9:
                         if (date) {
-                          _context11.next = 11;
+                          _context5.next = 11;
                           break;
                         }
 
-                        return _context11.abrupt("return", true);
+                        return _context5.abrupt("return", true);
 
                       case 11:
                         // done
@@ -6960,11 +7271,11 @@ function _infiniteMessageArea() {
                           live = doc.sameTerm(todayDoc); // Is this todays?
                         }
 
-                        _context11.next = 15;
+                        _context5.next = 15;
                         return createMessageTable(date, live);
 
                       case 15:
-                        newMessageTable = _context11.sent;
+                        newMessageTable = _context5.sent;
                         extremity.messageTable = newMessageTable; // move pointer to earliest
 
                         if (backwards ? newestFirst : !newestFirst) {
@@ -6975,30 +7286,30 @@ function _infiniteMessageArea() {
                           div.insertBefore(newMessageTable, div.firstChild);
                         }
 
-                        return _context11.abrupt("return", live);
+                        return _context5.abrupt("return", live);
 
                       case 19:
                       case "end":
-                        return _context11.stop();
+                        return _context5.stop();
                     }
                   }
-                }, _callee11);
+                }, _callee5);
               }));
               return _insertPreviousMessages.apply(this, arguments);
             };
 
-            insertPreviousMessages = function _insertPreviousMessag(_x12) {
+            insertPreviousMessages = function _insertPreviousMessag(_x5) {
               return _insertPreviousMessages.apply(this, arguments);
             };
 
             addMessage = function _addMessage(message, messageTable) {
-              var bindings = {
-                '?msg': message,
-                '?creator': kb.any(message, ns.foaf('maker')),
-                '?date': kb.any(message, DCT('created')),
-                '?content': kb.any(message, ns.sioc('content'))
-              };
-              (0, _message.renderMessage)(messageTable, bindings, messageTable.fresh, options, userContext); // fresh from elsewhere
+              var latest = (0, _chatLogic.mostRecentVersion)(message); // const content = store.any(latest, ns.sioc('content'))
+
+              if ((0, _chatLogic.isDeleted)(latest) && !options.showDeletedMessages) {
+                return; // ignore deleted messaged -- @@ could also leave a placeholder
+              }
+
+              insertMessageIntoTable(channelObject, messageTable, message, messageTable.fresh, options, userContext); // fresh from elsewhere
             };
 
             syncMessages = function _syncMessages(about, messageTable) {
@@ -7011,9 +7322,10 @@ function _infiniteMessageArea() {
                 }
               }
 
-              var messages = kb.statementsMatching(about, ns.wf('message'), null, messageTable.chatDocument).map(function (st) {
+              var messages = _logic.store.statementsMatching(about, ns.wf('message'), null, messageTable.chatDocument).map(function (st) {
                 return st.object;
               });
+
               var stored = {};
               messages.forEach(function (m) {
                 stored[m.uri] = true;
@@ -7036,685 +7348,719 @@ function _infiniteMessageArea() {
               for (ele = messageTable.firstChild; ele; ele = ele.nextSibling) {
                 if (ele.AJAR_subject) {
                   // Refresh thumbs up etc
-                  UI.widgets.refreshTree(ele); // Things inside may have changed too
+                  widgets.refreshTree(ele); // Things inside may have changed too
                 }
               }
             };
 
-            newMessageForm = function _newMessageForm(messageTable) {
-              var form = dom.createElement('tr');
-              var lhs = dom.createElement('td');
-              var middle = dom.createElement('td');
-              var rhs = dom.createElement('td');
-              form.appendChild(lhs);
-              form.appendChild(middle);
-              form.appendChild(rhs);
-              form.AJAR_date = '9999-01-01T00:00:00Z'; // ISO format for field sort
-
-              var field, sendButton;
+            // Body of main function
+            options = options || {};
+            options.authorDateOnLeft = false; // @@ make a user optiosn
 
-              function sendMessage(_x6) {
-                return _sendMessage.apply(this, arguments);
-              } // sendMessage
+            newestFirst = options.newestFirst === '1' || options.newestFirst === true; // hack for now
 
+            channelObject = new _chatLogic.ChatChannel(chatChannel, options);
+            dateFolder = channelObject.dateFolder;
+            div = dom.createElement('div');
+            channelObject.div = div;
+            statusArea = div.appendChild(dom.createElement('div'));
+            userContext = {
+              dom: dom,
+              statusArea: statusArea,
+              div: statusArea
+            }; // logged on state, pointers to user's stuff
+            // const messageTable = dom.createElement('table') // @@ check does this go in renderMessageTable
 
-              function _sendMessage() {
-                _sendMessage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(text) {
-                  var now, sts, timestamp, dateStamp, chatDocument, message, content, sendComplete;
-                  return _regenerator["default"].wrap(function _callee6$(_context6) {
-                    while (1) {
-                      switch (_context6.prev = _context6.next) {
-                        case 0:
-                          sendComplete = function _sendComplete() {
-                            var bindings = {
-                              '?msg': message,
-                              '?content': content,
-                              '?date': dateStamp,
-                              '?creator': me
-                            };
-                            (0, _message.renderMessage)(liveMessageTable, bindings, false, options, userContext); // not green
+            earliest = {
+              messageTable: null
+            }; // Stuff about each end of the loaded days
 
-                            if (!text) {
-                              field.value = ''; // clear from out for reuse
+            latest = {
+              messageTable: null
+            };
+            lock = false;
+            _context12.next = 30;
+            return loadInitialContent();
 
-                              field.setAttribute('style', messageBodyStyle);
-                              field.disabled = false;
-                              field.scrollIntoView(newestFirst); // allign bottom (top)
+          case 30:
+            return _context12.abrupt("return", div);
 
-                              field.focus(); // Start typing next line immediately
+          case 31:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee12);
+  }));
+  return _infiniteMessageArea.apply(this, arguments);
+}
+//# sourceMappingURL=infinite.js.map
 
-                              field.select();
-                            }
-                          };
+/***/ }),
 
-                          now = new Date();
-                          _context6.next = 4;
-                          return addNewTableIfNewDay(now);
+/***/ "./lib/chat/message.js":
+/*!*****************************!*\
+  !*** ./lib/chat/message.js ***!
+  \*****************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
 
-                        case 4:
-                          if (!text) {
-                            field.setAttribute('style', messageBodyStyle + 'color: #bbb;'); // pendingedit
+"use strict";
 
-                            field.disabled = true;
-                          }
 
-                          sts = [];
-                          timestamp = '' + now.getTime();
-                          dateStamp = $rdf.term(now);
-                          chatDocument = dateFolder.leafDocumentFromDate(now);
-                          message = kb.sym(chatDocument.uri + '#' + 'Msg' + timestamp);
-                          content = kb.literal(text || field.value); // if (text) field.value = text  No - don't destroy half-finsihed user input
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");
 
-                          sts.push(new $rdf.Statement(chatChannel, ns.wf('message'), message, chatDocument));
-                          sts.push(new $rdf.Statement(message, ns.sioc('content'), content, chatDocument));
-                          sts.push(new $rdf.Statement(message, DCT('created'), dateStamp, chatDocument));
+var _typeof = __webpack_require__(/*! @babel/runtime/helpers/typeof */ "./node_modules/@babel/runtime/helpers/typeof.js");
 
-                          if (me) {
-                            sts.push(new $rdf.Statement(message, ns.foaf('maker'), me, chatDocument));
-                          }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.creatorAndDate = creatorAndDate;
+exports.creatorAndDateHorizontal = creatorAndDateHorizontal;
+exports.elementForImageURI = elementForImageURI;
+exports.renderMessageEditor = renderMessageEditor;
+exports.renderMessageRow = renderMessageRow;
+exports.switchToEditor = switchToEditor;
 
-                          if (!(SERVER_MKDIRP_BUG && (kb.fetcher.requested[chatDocument.uri] === undefined || kb.fetcher.requested[chatDocument.uri] === 404))) {
-                            _context6.next = 19;
-                            break;
-                          }
+var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js"));
 
-                          debug.log('@@@ SERVER_MKDIRP_BUG: Should only happen once: create chat file: ' + chatDocument);
-                          _context6.next = 19;
-                          return createIfNotExists(chatDocument);
+var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ "./node_modules/@babel/runtime/helpers/asyncToGenerator.js"));
 
-                        case 19:
-                          _context6.prev = 19;
-                          _context6.next = 22;
-                          return updater.update([], sts);
+var _infinite = __webpack_require__(/*! ./infinite */ "./lib/chat/infinite.js");
 
-                        case 22:
-                          _context6.next = 28;
-                          break;
+var _messageTools = __webpack_require__(/*! ./messageTools */ "./lib/chat/messageTools.js");
 
-                        case 24:
-                          _context6.prev = 24;
-                          _context6.t0 = _context6["catch"](19);
-                          form.appendChild(UI.widgets.errorMessageBlock(dom, 'Error writing message: ' + _context6.t0));
-                          return _context6.abrupt("return");
+var _bookmarks = __webpack_require__(/*! ./bookmarks */ "./lib/chat/bookmarks.js");
 
-                        case 28:
-                          sendComplete();
+var _chatLogic = __webpack_require__(/*! ./chatLogic */ "./lib/chat/chatLogic.js");
 
-                        case 29:
-                        case "end":
-                          return _context6.stop();
-                      }
-                    }
-                  }, _callee6, null, [[19, 24]]);
-                }));
-                return _sendMessage.apply(this, arguments);
-              }
+var debug = _interopRequireWildcard(__webpack_require__(/*! ../debug */ "./lib/debug.js"));
 
-              form.appendChild(dom.createElement('br')); //    DRAG AND DROP
+var _index = __webpack_require__(/*! ../authn/index */ "./lib/authn/index.js");
 
-              function droppedFileHandler(files) {
-                var base = messageTable.chatDocument.dir().uri;
-                UI.widgets.uploadFiles(kb.fetcher, files, base + 'Files', base + 'Pictures', /*#__PURE__*/function () {
-                  var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(theFile, destURI) {
-                    return _regenerator["default"].wrap(function _callee2$(_context2) {
-                      while (1) {
-                        switch (_context2.prev = _context2.next) {
-                          case 0:
-                            _context2.next = 2;
-                            return sendMessage(destURI);
+var _iconBase = __webpack_require__(/*! ../iconBase */ "./lib/iconBase.js");
 
-                          case 2:
-                          case "end":
-                            return _context2.stop();
-                        }
-                      }
-                    }, _callee2);
-                  }));
+var _logic = __webpack_require__(/*! ../logic */ "./lib/logic.js");
 
-                  return function (_x7, _x8) {
-                    return _ref.apply(this, arguments);
-                  };
-                }());
-              } // When a set of URIs are dropped on the field
+var _index2 = __webpack_require__(/*! ../media/index */ "./lib/media/index.js");
 
+var ns = _interopRequireWildcard(__webpack_require__(/*! ../ns */ "./lib/ns.js"));
 
-              var droppedURIHandler = /*#__PURE__*/function () {
-                var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(uris) {
-                  var _iterator, _step, uri;
+var pad = _interopRequireWildcard(__webpack_require__(/*! ../pad */ "./lib/pad.js"));
 
-                  return _regenerator["default"].wrap(function _callee3$(_context3) {
-                    while (1) {
-                      switch (_context3.prev = _context3.next) {
-                        case 0:
-                          _iterator = _createForOfIteratorHelper(uris);
-                          _context3.prev = 1;
+var style = _interopRequireWildcard(__webpack_require__(/*! ../style */ "./lib/style.js"));
 
-                          _iterator.s();
+var utils = _interopRequireWildcard(__webpack_require__(/*! ../utils */ "./lib/utils/index.js"));
 
-                        case 3:
-                          if ((_step = _iterator.n()).done) {
-                            _context3.next = 9;
-                            break;
-                          }
+var widgets = _interopRequireWildcard(__webpack_require__(/*! ../widgets */ "./lib/widgets/index.js"));
 
-                          uri = _step.value;
-                          _context3.next = 7;
-                          return sendMessage(uri);
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-                        case 7:
-                          _context3.next = 3;
-                          break;
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-                        case 9:
-                          _context3.next = 14;
-                          break;
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
-                        case 11:
-                          _context3.prev = 11;
-                          _context3.t0 = _context3["catch"](1);
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-                          _iterator.e(_context3.t0);
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-                        case 14:
-                          _context3.prev = 14;
+// const UI = { authn, icons, ns, media, pad, rdf, store, style, utils, widgets }
+var dom = window.document; // const store = store
 
-                          _iterator.f();
+var messageBodyStyle = style.messageBodyStyle;
+var label = utils.label;
+/**
+ * HTML component for an image
+ */
 
-                          return _context3.finish(14);
+function elementForImageURI(imageUri, options) {
+  var img = dom.createElement('img');
+  var height = '10';
 
-                        case 17:
-                        case "end":
-                          return _context3.stop();
-                      }
-                    }
-                  }, _callee3, null, [[1, 11, 14, 17]]);
-                }));
+  if (options.inlineImageHeightEms) {
+    height = ('' + options.inlineImageHeightEms).trim();
+  }
 
-                return function droppedURIHandler(_x9) {
-                  return _ref2.apply(this, arguments);
-                };
-              }(); // When we are actually logged on
+  img.setAttribute('style', 'max-height: ' + height + 'em; border-radius: 1em; margin: 0.7em;'); // widgets.makeDropTarget(img, handleURIsDroppedOnMugshot, droppedFileHandler)
 
+  if (imageUri) img.setAttribute('src', imageUri);
+  var anchor = dom.createElement('a');
+  anchor.setAttribute('href', imageUri);
+  anchor.setAttribute('target', 'images');
+  anchor.appendChild(img);
+  widgets.makeDraggable(img, $rdf.sym(imageUri));
+  return anchor;
+}
 
-              function turnOnInput() {
-                if (options.menuHandler && menuButton) {
-                  var menuOptions = {
-                    me: me,
-                    dom: dom,
-                    div: div,
-                    newBase: messageTable.chatDocument.dir().uri
-                  };
-                  menuButton.addEventListener('click', function (event) {
-                    options.menuHandler(event, chatChannel, menuOptions);
-                  }, false);
-                } // Turn on message input
+var anchor = function anchor(text, term) {
+  // If there is no link return an element anyway
+  var a = dom.createElement('a');
 
+  if (term && term.uri) {
+    a.setAttribute('href', term.uri);
+    a.addEventListener('click', widgets.openHrefInOutlineMode, true);
+    a.setAttribute('style', 'color: #3B5998; text-decoration: none; '); // font-weight: bold
+  }
 
-                (0, _message.creatorAndDate)(lhs, me, '', null);
-                field = dom.createElement('textarea');
-                middle.innerHTML = '';
-                middle.appendChild(field);
-                field.rows = 3; // field.cols = 40
+  a.textContent = text;
+  return a;
+};
 
-                field.setAttribute('style', messageBodyStyle + 'background-color: #eef;'); // Trap the Enter BEFORE it is used ti make a newline
+function nick(person) {
+  var s = _logic.store.any(person, ns.foaf('nick'));
 
-                field.addEventListener('keydown', /*#__PURE__*/function () {
-                  var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(e) {
-                    return _regenerator["default"].wrap(function _callee4$(_context4) {
-                      while (1) {
-                        switch (_context4.prev = _context4.next) {
-                          case 0:
-                            if (!(e.keyCode === 13)) {
-                              _context4.next = 4;
-                              break;
-                            }
+  if (s) return '' + s.value;
+  return '' + label(person);
+}
+/**
+ * Displays creator and date for a chat message
+ * inside the `td1` element
+ */
 
-                            if (e.altKey) {
-                              _context4.next = 4;
-                              break;
-                            }
 
-                            _context4.next = 4;
-                            return sendMessage();
+function creatorAndDate(td1, creator, date, message) {
+  var nickAnchor = td1.appendChild(anchor(nick(creator), creator));
 
-                          case 4:
-                          case "end":
-                            return _context4.stop();
-                        }
-                      }
-                    }, _callee4);
-                  }));
+  if (creator.uri) {
+    _logic.store.fetcher.nowOrWhenFetched(creator.doc(), undefined, function (_ok, _body) {
+      nickAnchor.textContent = nick(creator);
+    });
+  }
 
-                  return function (_x10) {
-                    return _ref3.apply(this, arguments);
-                  };
-                }(), false);
-                UI.widgets.makeDropTarget(field, droppedURIHandler, droppedFileHandler);
-                rhs.innerHTML = '';
-                sendButton = UI.widgets.button(dom, UI.icons.iconBase + 'noun_383448.svg', 'Send');
-                sendButton.setAttribute('style', UI.style.buttonStyle + 'float: right;');
-                sendButton.addEventListener('click', function (_event) {
-                  return sendMessage();
-                }, false);
-                rhs.appendChild(sendButton);
-                var chatDocument = dateFolder.leafDocumentFromDate(new Date());
-                var imageDoc;
-
-                function getImageDoc() {
-                  imageDoc = kb.sym(chatDocument.dir().uri + 'Image_' + Date.now() + '.png');
-                  return imageDoc;
-                }
+  td1.appendChild(dom.createElement('br'));
+  td1.appendChild(anchor(date, message));
+}
+/**
+ * Horizontally displays creator and date for a chat message
+ * inside the `td1` element
+ */
 
-                function tookPicture(_x11) {
-                  return _tookPicture.apply(this, arguments);
-                }
 
-                function _tookPicture() {
-                  _tookPicture = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(imageDoc) {
-                    return _regenerator["default"].wrap(function _callee5$(_context5) {
-                      while (1) {
-                        switch (_context5.prev = _context5.next) {
-                          case 0:
-                            if (!imageDoc) {
-                              _context5.next = 3;
-                              break;
-                            }
+function creatorAndDateHorizontal(td1, creator, date, message) {
+  var nickAnchor = td1.appendChild(anchor(label(creator), creator));
 
-                            _context5.next = 3;
-                            return sendMessage(imageDoc.uri);
+  if (creator.uri) {
+    _logic.store.fetcher.nowOrWhenFetched(creator.doc(), undefined, function (_ok, _body) {
+      nickAnchor.textContent = nick(creator);
+    });
+  }
 
-                          case 3:
-                          case "end":
-                            return _context5.stop();
-                        }
-                      }
-                    }, _callee5);
-                  }));
-                  return _tookPicture.apply(this, arguments);
-                }
+  var dateBit = td1.appendChild(anchor(date, message));
+  dateBit.style.fontSize = '80%';
+  dateBit.style.marginLeft = '1em';
+  td1.appendChild(dom.createElement('br'));
+}
+/**
+ * Renders a chat message, read-only mode
+ */
 
-                middle.appendChild(UI.media.cameraButton(dom, kb, getImageDoc, tookPicture));
-                UI.pad.recordParticipation(chatChannel, chatChannel.doc()); // participation =
-              } // turn on inpuut
 
+function renderMessageRow(channelObject, message, fresh, options, userContext) {
+  var colorizeByAuthor = options.colorizeByAuthor === '1' || options.colorizeByAuthor === true;
 
-              var context = {
-                div: middle,
-                dom: dom
-              };
-              UI.authn.logIn(context).then(function (context) {
-                me = context.me;
-                turnOnInput();
-                Object.assign(context, userContext);
-                (0, _bookmarks.findBookmarkDocument)(context).then(function (context) {
-                  debug.log('Bookmark file: ' + context.bookmarkDocument);
-                });
-              });
-              return form;
-            };
+  var creator = _logic.store.any(message, ns.foaf('maker'));
 
-            kb = kb || UI.store;
-            ns = UI.ns;
-            WF = $rdf.Namespace('http://www.w3.org/2005/01/wf/flow#');
-            DCT = $rdf.Namespace('http://purl.org/dc/terms/'); // const POSIX = $rdf.Namespace('http://www.w3.org/ns/posix/stat#')
+  var date = _logic.store.any(message, ns.dct('created'));
 
-            options = options || {};
-            newestFirst = options.newestFirst === '1' || options.newestFirst === true; // hack for now
+  var latestVersion = (0, _chatLogic.mostRecentVersion)(message);
 
-            dateFolder = new _dateFolder.DateFolder(chatChannel, 'chat.ttl');
-            options.authorAboveContent = true; // var participation // An object tracking users use and prefs
+  var content = _logic.store.any(latestVersion, ns.sioc('content'));
 
-            messageBodyStyle = UI.style.messageBodyStyle; // var messageBodyStyle = 'white-space: pre-wrap; width: 90%; font-size:100%; border: 0.07em solid #eee; padding: .2em 0.5em; margin: 0.1em 1em 0.1em 1em;'
-            // 'font-size: 100%; margin: 0.1em 1em 0.1em 1em;  background-color: white; white-space: pre-wrap; padding: 0.1em;'
+  var originalMessage = (0, _chatLogic.originalVersion)(message);
+  var edited = !message.sameTerm(originalMessage);
 
-            div = dom.createElement('div');
-            statusArea = div.appendChild(dom.createElement('div'));
-            userContext = {
-              dom: dom,
-              statusArea: statusArea,
-              div: statusArea
-            }; // logged on state, pointers to user's stuff
+  var sortDate = _logic.store.the(originalMessage, ns.dct('created'), null, originalMessage.doc()); // In message
 
-            updater = UI.store.updater;
-            /** Does a file exist on the web?
-             * @returns {Boolean}
-             */
 
-            /*
-            async function documentExists (doc) {
-              try {
-                await kb.fetcher.load(doc)
-              } catch (err) {
-                if (err.response.status === 404) {
-                  return false
-                } else {
-                  debug.log('documentExists: doc load error NOT 404:  ' + doc + ': ' + err)
-                  throw err
-                }
-              }
-              return true
-            }
-            */
+  var messageRow = dom.createElement('tr');
+  messageRow.AJAR_date = sortDate.value;
+  messageRow.AJAR_subject = message;
+  var td1 = dom.createElement('td');
+  messageRow.appendChild(td1);
 
-            /*       Form for a new message
-             */
+  if (!options.authorDateOnLeft) {
+    var img = dom.createElement('img');
+    img.setAttribute('style', 'max-height: 2.5em; max-width: 2.5em; border-radius: 0.5em; margin: auto;');
+    widgets.setImage(img, creator);
+    td1.appendChild(img);
+  } else {
+    creatorAndDate(td1, creator, widgets.shortDate(sortDate.value), message);
+  }
 
-            earliest = {
-              messageTable: null
-            }; // Stuff about each end of the loaded days
+  var bothDates = widgets.shortDate(sortDate.value);
 
-            latest = {
-              messageTable: null
-            };
-            lock = false;
-            _context17.next = 35;
-            return loadInitialContent();
+  if (edited) {
+    bothDates += ' ... ' + widgets.shortDate(date.value);
+  } // Render the content ot the message itself
 
-          case 35:
-            return _context17.abrupt("return", div);
 
-          case 36:
-          case "end":
-            return _context17.stop();
-        }
-      }
-    }, _callee17);
-  }));
-  return _infiniteMessageArea.apply(this, arguments);
-}
-//# sourceMappingURL=infinite.js.map
+  var td2 = messageRow.appendChild(dom.createElement('td'));
 
-/***/ }),
+  if (!options.authorDateOnLeft) {
+    creatorAndDateHorizontal(td2, creator, bothDates, // widgets.shortDate(dateString)
+    message);
+  }
 
-/***/ "./lib/chat/message.js":
-/*!*****************************!*\
-  !*** ./lib/chat/message.js ***!
-  \*****************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+  var text = content.value.trim();
+  var isURI = /^https?:\/[^ <>]*$/i.test(text);
+  var para = null;
 
-"use strict";
+  if (isURI) {
+    var isImage = /\.(gif|jpg|jpeg|tiff|png|svg)$/i.test(text); // @@ Should use content-type not URI
 
+    if (isImage && options.expandImagesInline) {
+      var _img = elementForImageURI(text, options);
 
-var _typeof = __webpack_require__(/*! @babel/runtime/helpers/typeof */ "./node_modules/@babel/runtime/helpers/typeof.js");
+      td2.appendChild(_img);
+    } else {
+      // Link but not Image
+      var anc = td2.appendChild(dom.createElement('a'));
+      para = anc.appendChild(dom.createElement('p'));
+      anc.href = text;
+      para.textContent = text;
+      td2.appendChild(anc);
+    }
+  } else {
+    // text
+    para = dom.createElement('p');
+    td2.appendChild(para);
+    para.textContent = text;
+  }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.creatorAndDate = creatorAndDate;
-exports.creatorAndDateHorizontal = creatorAndDateHorizontal;
-exports.elementForImageURI = elementForImageURI;
-exports.renderMessage = renderMessage;
+  if (para) {
+    var bgcolor = colorizeByAuthor ? pad.lightColorHash(creator) : getBgColor(fresh);
+    para.setAttribute('style', messageBodyStyle + 'background-color: ' + bgcolor + ';');
+  }
 
-var _messageTools = __webpack_require__(/*! ./messageTools */ "./lib/chat/messageTools.js");
+  function getBgColor(fresh) {
+    return fresh ? '#e8ffe8' : 'white';
+  } // Sentiment strip
 
-var _index = __webpack_require__(/*! ../authn/index */ "./lib/authn/index.js");
 
-var _iconBase = __webpack_require__(/*! ../iconBase */ "./lib/iconBase.js");
+  var strip = (0, _messageTools.sentimentStripLinked)(message, message.doc());
 
-var _logic = __webpack_require__(/*! ../logic */ "./lib/logic.js");
+  if (strip.children.length) {
+    td2.appendChild(dom.createElement('br'));
+    td2.appendChild(strip);
+  } // Message tool bar button
 
-var _index2 = __webpack_require__(/*! ../media/index */ "./lib/media/index.js");
 
-var ns = _interopRequireWildcard(__webpack_require__(/*! ../ns */ "./lib/ns.js"));
+  var td3 = dom.createElement('td');
+  messageRow.appendChild(td3);
+  var toolsButton = widgets.button(dom, _iconBase.icons.iconBase + 'noun_243787.svg', '...');
+  td3.appendChild(toolsButton);
+  toolsButton.addEventListener('click', function (_event) {
+    if (messageRow.toolTR) {
+      // already got a toolbar? Toogle
+      messageRow.parentNode.removeChild(messageRow.toolTR);
+      delete messageRow.toolTR;
+      return;
+    }
 
-var pad = _interopRequireWildcard(__webpack_require__(/*! ../pad */ "./lib/pad.js"));
+    var toolsTR = dom.createElement('tr');
+    var tools = (0, _messageTools.messageToolbar)(message, messageRow, userContext, channelObject);
+    tools.style = 'border: 0.05em solid #888; border-radius: 0 0 0.7em 0.7em;  border-top: 0; height:3.5em; background-color: #fff;'; // @@ fix
 
-var rdf = _interopRequireWildcard(__webpack_require__(/*! rdflib */ "./node_modules/rdflib/esm/index.js"));
+    if (messageRow.nextSibling) {
+      messageRow.parentElement.insertBefore(toolsTR, messageRow.nextSibling);
+    } else {
+      messageRow.parentElement.appendChild(toolsTR);
+    }
 
-var style = _interopRequireWildcard(__webpack_require__(/*! ../style */ "./lib/style.js"));
+    messageRow.toolTR = toolsTR;
+    toolsTR.appendChild(dom.createElement('td')); // left
 
-var utils = _interopRequireWildcard(__webpack_require__(/*! ../utils */ "./lib/utils/index.js"));
+    var toolsTD = toolsTR.appendChild(dom.createElement('td'));
+    toolsTR.appendChild(dom.createElement('td')); // right
 
-var widgets = _interopRequireWildcard(__webpack_require__(/*! ../widgets */ "./lib/widgets/index.js"));
+    toolsTD.appendChild(tools);
+  });
+  return messageRow;
+}
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function switchToEditor(messageRow, message, channelObject, userContext) {
+  var messageTable = messageRow.parentNode;
+  var editRow = renderMessageEditor(channelObject, messageTable, userContext, channelObject.options, (0, _chatLogic.mostRecentVersion)(message));
+  messageTable.insertBefore(editRow, messageRow);
+  editRow.originalRow = messageRow;
+  messageRow.style.visibility = 'hidden'; // Hide the original message. unhide if user cancels edit
+}
+/*       Control for a new message -- or editing an old message ***************
+ *
+ */
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/**
- * Contains the [[renderMessage]] function,
- * along with [[elementForImageURI]],
- * [[creatorAndDate]], and [[creatorAndDateHorizontal]]
- * @packageDocumentation
- */
+function renderMessageEditor(channelObject, messageTable, userContext, options, originalMessage) {
+  function revertEditing(messageEditor) {
+    messageEditor.originalRow.style.visibility = 'visible'; // restore read-only version
 
-/* global $rdf */
-// pull in first avoid cross-refs
-var UI = {
-  authn: _index.authn,
-  icons: _iconBase.icons,
-  ns: ns,
-  media: _index2.media,
-  pad: pad,
-  rdf: rdf,
-  store: _logic.store,
-  style: style,
-  utils: utils,
-  widgets: widgets
-};
-var dom = UI.dom || window.document; // const kb = UI.store
+    messageEditor.parentNode.removeChild(messageEditor);
+  }
 
-var messageBodyStyle = UI.style.messageBodyStyle;
-var label = UI.utils.label;
-/**
- * HTML component for an image
- */
+  function handleFieldInput(_x) {
+    return _handleFieldInput.apply(this, arguments);
+  }
 
-function elementForImageURI(imageUri, options) {
-  var img = dom.createElement('img');
-  var height = '10';
+  function _handleFieldInput() {
+    _handleFieldInput = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(_event) {
+      return _regenerator["default"].wrap(function _callee5$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              _context6.next = 2;
+              return sendMessage(field.value, true);
 
-  if (options.inlineImageHeightEms) {
-    height = ('' + options.inlineImageHeightEms).trim();
+            case 2:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee5);
+    }));
+    return _handleFieldInput.apply(this, arguments);
   }
 
-  img.setAttribute('style', 'max-height: ' + height + 'em; border-radius: 1em; margin: 0.7em;'); // UI.widgets.makeDropTarget(img, handleURIsDroppedOnMugshot, droppedFileHandler)
+  function sendMessage(_x2, _x3) {
+    return _sendMessage.apply(this, arguments);
+  } // sendMessage
+  //    DRAG AND DROP
 
-  if (imageUri) img.setAttribute('src', imageUri);
-  var anchor = dom.createElement('a');
-  anchor.setAttribute('href', imageUri);
-  anchor.setAttribute('target', 'images');
-  anchor.appendChild(img);
-  UI.widgets.makeDraggable(img, $rdf.sym(imageUri));
-  return anchor;
-}
 
-var anchor = function anchor(text, term) {
-  // If there is no link return an element anyway
-  var a = dom.createElement('a');
+  function _sendMessage() {
+    _sendMessage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(text, fromMainField) {
+      var sendComplete, message, statusArea;
+      return _regenerator["default"].wrap(function _callee6$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              sendComplete = function _sendComplete(message, _text2) {
+                // const dateStamp = store.any(message, ns.dct('created'), null, message.doc())
+                // const content = $rdf.literal(text2)
+                (0, _infinite.insertMessageIntoTable)(channelObject, messageTable, message, false, options, userContext); // not green
+
+                if (originalMessage) {
+                  // editing another message
+                  var oldRow = messageEditor.originalRow; // oldRow.style.display = '' // restore read-only version, re-attack
+
+                  if (oldRow.parentNode) {
+                    oldRow.parentNode.removeChild(oldRow); // No longer needed old version
+                  } else {
+                    debug.warn('No parentNode on old message ' + oldRow.textContent);
+                    oldRow.style.backgroundColor = '#fee';
+                    oldRow.style.visibility = 'hidden'; // @@ FIX THIS AND REMOVE FROM DOM INSTEAD
+                  }
 
-  if (term && term.uri) {
-    a.setAttribute('href', term.uri);
-    a.addEventListener('click', UI.widgets.openHrefInOutlineMode, true);
-    a.setAttribute('style', 'color: #3B5998; text-decoration: none; '); // font-weight: bold
-  }
+                  messageEditor.parentNode.removeChild(messageEditor); // no longer need editor
+                } else {
+                  if (fromMainField) {
+                    field.value = ''; // clear from out for reuse
 
-  a.textContent = text;
-  return a;
-};
+                    field.setAttribute('style', messageBodyStyle);
+                    field.disabled = false;
+                    field.scrollIntoView(options.newestFirst); // allign bottom (top)
 
-function nick(person) {
-  var s = UI.store.any(person, UI.ns.foaf('nick'));
-  if (s) return '' + s.value;
-  return '' + label(person);
-}
-/**
- * Displays creator and date for a chat message
- * inside the `td1` element
- */
+                    field.focus(); // Start typing next line immediately
 
+                    field.select();
+                  }
+                } // await channelObject.div.refresh() // Add new day if nec  @@ add back
 
-function creatorAndDate(td1, creator, date, message) {
-  var nickAnchor = td1.appendChild(anchor(nick(creator), creator));
+              };
 
-  if (creator.uri) {
-    UI.store.fetcher.nowOrWhenFetched(creator.doc(), undefined, function (_ok, _body) {
-      nickAnchor.textContent = nick(creator);
-    });
-  }
+              // const me = authn.currentUser() // Must be logged on or wuld have got login button
+              if (fromMainField) {
+                field.setAttribute('style', messageBodyStyle + 'color: #bbb;'); // pendingedit
 
-  td1.appendChild(dom.createElement('br'));
-  td1.appendChild(anchor(date, message));
-}
-/**
- * Horizontally displays creator and date for a chat message
- * inside the `td1` element
- */
+                field.disabled = true;
+              }
 
+              _context7.prev = 2;
+              _context7.next = 5;
+              return channelObject.updateMessage(text, originalMessage);
 
-function creatorAndDateHorizontal(td1, creator, date, message) {
-  var nickAnchor = td1.appendChild(anchor(label(creator), creator));
+            case 5:
+              message = _context7.sent;
+              _context7.next = 13;
+              break;
 
-  if (creator.uri) {
-    UI.store.fetcher.nowOrWhenFetched(creator.doc(), undefined, function (_ok, _body) {
-      nickAnchor.textContent = nick(creator);
-    });
+            case 8:
+              _context7.prev = 8;
+              _context7.t0 = _context7["catch"](2);
+              statusArea = userContext.statusArea || messageEditor;
+              statusArea.appendChild(widgets.errorMessageBlock(dom, 'Error writing message: ' + _context7.t0));
+              return _context7.abrupt("return");
+
+            case 13:
+              sendComplete(message, text);
+
+            case 14:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee6, null, [[2, 8]]);
+    }));
+    return _sendMessage.apply(this, arguments);
   }
 
-  var dateBit = td1.appendChild(anchor(date, message));
-  dateBit.style.fontSize = '80%';
-  dateBit.style.marginLeft = '1em';
-  td1.appendChild(dom.createElement('br'));
-}
-/**
- * Renders a chat message inside a `messageTable`
- */
+  function droppedFileHandler(files) {
+    var base = messageTable.chatDocument.dir().uri;
+    widgets.uploadFiles(_logic.store.fetcher, files, base + 'Files', base + 'Pictures', /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(theFile, destURI) {
+        return _regenerator["default"].wrap(function _callee$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return sendMessage(destURI);
+
+              case 2:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x4, _x5) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+  } // When a set of URIs are dropped on the field
+
+
+  var droppedURIHandler = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(uris) {
+      var _iterator, _step, uri;
+
+      return _regenerator["default"].wrap(function _callee2$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _iterator = _createForOfIteratorHelper(uris);
+              _context3.prev = 1;
+
+              _iterator.s();
+
+            case 3:
+              if ((_step = _iterator.n()).done) {
+                _context3.next = 9;
+                break;
+              }
+
+              uri = _step.value;
+              _context3.next = 7;
+              return sendMessage(uri);
+
+            case 7:
+              _context3.next = 3;
+              break;
+
+            case 9:
+              _context3.next = 14;
+              break;
+
+            case 11:
+              _context3.prev = 11;
+              _context3.t0 = _context3["catch"](1);
+
+              _iterator.e(_context3.t0);
+
+            case 14:
+              _context3.prev = 14;
+
+              _iterator.f();
+
+              return _context3.finish(14);
+
+            case 17:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee2, null, [[1, 11, 14, 17]]);
+    }));
+
+    return function droppedURIHandler(_x6) {
+      return _ref2.apply(this, arguments);
+    };
+  }(); // When we are actually logged on
+
+
+  function turnOnInput() {
+    function getImageDoc() {
+      imageDoc = $rdf.sym(chatDocument.dir().uri + 'Image_' + Date.now() + '.png');
+      return imageDoc;
+    }
+
+    function tookPicture(_x7) {
+      return _tookPicture.apply(this, arguments);
+    } // Body of turnOnInput
+
+
+    function _tookPicture() {
+      _tookPicture = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(imageDoc) {
+        return _regenerator["default"].wrap(function _callee4$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                if (!imageDoc) {
+                  _context5.next = 3;
+                  break;
+                }
 
+                _context5.next = 3;
+                return sendMessage(imageDoc.uri);
 
-function renderMessage(messageTable, bindings, fresh, options, userContext) {
-  var colorizeByAuthor = options.colorizeByAuthor === '1' || options.colorizeByAuthor === true;
-  var creator = bindings['?creator'];
-  var message = bindings['?msg'];
-  var date = bindings['?date'];
-  var content = bindings['?content'];
-  var dateString = date.value;
-  var messageRow = dom.createElement('tr');
-  messageRow.AJAR_date = dateString;
-  messageRow.AJAR_subject = message;
+              case 3:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee4);
+      }));
+      return _tookPicture.apply(this, arguments);
+    }
 
-  if (options.selectedMessage && options.selectedMessage.sameTerm(message)) {
-    messageRow.style.backgroundColor = 'yellow';
-    options.selectedElement = messageRow;
-    messageTable.selectedElement = messageRow;
-  }
+    var menuButton;
 
-  var done = false;
+    if (options.menuHandler) {
+      var _menuButton = widgets.button(dom, _iconBase.icons.iconBase + 'noun_243787.svg', 'More');
 
-  for (var ele = messageTable.firstChild;; ele = ele.nextSibling) {
-    if (!ele) {
-      // empty
-      break;
-    }
+      _menuButton.setAttribute('style', style.buttonStyle + 'float: right;'); // menuButton.addEventListener('click', _event => sendMessage(), false) (done in turnoninput)
 
-    var newestFirst = options.newestfirst === true;
 
-    if (dateString > ele.AJAR_date && newestFirst || dateString < ele.AJAR_date && !newestFirst) {
-      messageTable.insertBefore(messageRow, ele);
-      done = true;
-      break;
+      rhs.appendChild(_menuButton);
     }
-  }
 
-  if (!done) {
-    messageTable.appendChild(messageRow);
-  }
+    if (options.menuHandler && menuButton) {
+      var _me = _index.authn.currentUser();
 
-  var td1 = dom.createElement('td');
-  messageRow.appendChild(td1);
+      var menuOptions = {
+        me: _me,
+        dom: dom,
+        div: null,
+        // @@ was: div
+        newBase: messageTable.chatDocument.dir().uri
+      };
+      menuButton.addEventListener('click', function (event) {
+        options.menuHandler(event, channelObject.chatChannel, menuOptions);
+      }, false);
+    }
 
-  if (options.authorAboveContent) {
-    var img = dom.createElement('img');
-    img.setAttribute('style', 'max-height: 2.5em; max-width: 2.5em; border-radius: 0.5em; margin: auto;');
-    UI.widgets.setImage(img, creator);
-    td1.appendChild(img);
-  } else {
-    creatorAndDate(td1, creator, UI.widgets.shortDate(dateString), message);
-  } // Render the content ot the message itself
+    var me = _index.authn.currentUser(); // If already logged on
 
 
-  var td2 = messageRow.appendChild(dom.createElement('td'));
+    creatorAndDate(lhs, me, '', null);
+    field = dom.createElement('textarea');
+    middle.innerHTML = '';
+    middle.appendChild(field);
+    field.rows = 3;
 
-  if (options.authorAboveContent) {
-    creatorAndDateHorizontal(td2, creator, UI.widgets.shortDate(dateString), message);
-  }
+    if (originalMessage) {
+      field.value = _logic.store.anyValue(originalMessage, ns.sioc('content'), null, originalMessage.doc());
+    } // field.cols = 40
 
-  var text = content.value.trim();
-  var isURI = /^https?:\/[^ <>]*$/i.test(text);
-  var para = null;
 
-  if (isURI) {
-    var isImage = /\.(gif|jpg|jpeg|tiff|png|svg)$/i.test(text); // @@ Should use content-type not URI
+    field.setAttribute('style', messageBodyStyle + 'background-color: #eef;'); // Trap the Enter BEFORE it is used ti make a newline
 
-    if (isImage && options.expandImagesInline) {
-      var _img = elementForImageURI(text, options);
+    field.addEventListener('keydown', /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(e) {
+        return _regenerator["default"].wrap(function _callee3$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                if (!(e.code === 'Enter')) {
+                  _context4.next = 4;
+                  break;
+                }
 
-      td2.appendChild(_img);
-    } else {
-      // Link but not Image
-      var anc = td2.appendChild(dom.createElement('a'));
-      para = anc.appendChild(dom.createElement('p'));
-      anc.href = text;
-      para.textContent = text;
-      td2.appendChild(anc);
-    }
-  } else {
-    // text
-    para = dom.createElement('p');
-    td2.appendChild(para);
-    para.textContent = text;
-  }
+                if (!(!e.shiftKey && !options.shiftEnterSendsMessage || e.shiftKey && options.shiftEnterSendsMessage)) {
+                  _context4.next = 4;
+                  break;
+                }
 
-  if (para) {
-    var bgcolor = colorizeByAuthor ? UI.pad.lightColorHash(creator) : getBgColor(fresh);
-    para.setAttribute('style', messageBodyStyle + 'background-color: ' + bgcolor + ';');
-  }
+                _context4.next = 4;
+                return handleFieldInput(e);
 
-  function getBgColor(fresh) {
-    return fresh ? '#e8ffe8' : 'white';
-  } // Sentiment strip
+              case 4:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee3);
+      }));
 
+      return function (_x8) {
+        return _ref3.apply(this, arguments);
+      };
+    }(), false);
+    widgets.makeDropTarget(field, droppedURIHandler, droppedFileHandler);
+    rhs.innerHTML = '';
+    sendButton = widgets.button(dom, sendIcon, 'Send');
+    sendButton.style["float"] = 'right';
+    sendButton.addEventListener('click', function (_event) {
+      return handleFieldInput();
+    }, false);
+    rhs.appendChild(sendButton);
 
-  var strip = (0, _messageTools.sentimentStripLinked)(message, message.doc());
+    if (originalMessage) {
+      // Are we editing another message?
+      var cancelButton = rhs.appendChild(widgets.cancelButton(dom));
+      cancelButton.style["float"] = 'left'; // cancelButton.firstChild.style.opacity = '0.3' // moved to buttons
 
-  if (strip.children.length) {
-    td2.appendChild(dom.createElement('br'));
-    td2.appendChild(strip);
-  } // Message tool bar button
+      cancelButton.addEventListener('click', function (_event) {
+        return revertEditing(messageEditor);
+      }, false);
+      rhs.appendChild(cancelButton);
+    }
 
+    var chatDocument = channelObject.dateFolder.leafDocumentFromDate(new Date());
+    var imageDoc;
+    middle.appendChild(_index2.media.cameraButton(dom, _logic.store, getImageDoc, tookPicture));
+    pad.recordParticipation(channelObject.channel, channelObject.channel.doc()); // participation =
+  } // turn on inpuut
+  // Body of renderMessageEditor
 
-  var td3 = dom.createElement('td');
-  messageRow.appendChild(td3);
-  var toolsButton = UI.widgets.button(dom, UI.icons.iconBase + 'noun_243787.svg', '...');
-  td3.appendChild(toolsButton);
-  toolsButton.addEventListener('click', function (_event) {
-    if (messageRow.toolTR) {
-      // already got a toolbar? Toogle
-      messageRow.parentNode.removeChild(messageRow.toolTR);
-      delete messageRow.toolTR;
-      return;
-    }
 
-    var toolsTR = dom.createElement('tr');
-    var tools = (0, _messageTools.messageToolbar)(message, messageRow, userContext);
-    tools.style = 'border: 0.05em solid #888; border-radius: 0 0 0.7em 0.7em;  border-top: 0; height:3.5em; background-color: #fff;'; // @@ fix
+  var sortDate, sendIcon;
 
-    if (messageRow.nextSibling) {
-      messageRow.parentElement.insertBefore(toolsTR, messageRow.nextSibling);
-    } else {
-      messageRow.parentElement.appendChild(toolsTR);
-    }
+  if (originalMessage) {
+    sortDate = _logic.store.anyValue(originalMessage, ns.dct('created'), null, originalMessage.doc()); // text = store.anyValue(originalMessage, ns.sioc('content'), null, originalMessage.doc())
 
-    messageRow.toolTR = toolsTR;
-    toolsTR.appendChild(dom.createElement('td')); // left
+    sendIcon = _iconBase.icons.iconBase + 'noun_1180158.svg'; // Green check
+    // cancelIcon = icons.iconBase + 'noun_1180156.svg' // Black cross
+  } else {
+    sendIcon = _iconBase.icons.iconBase + 'noun_383448.svg';
+    sortDate = '9999-01-01T00:00:00Z'; // ISO format for field sort
+    // text = ''
+  }
 
-    var toolsTD = toolsTR.appendChild(dom.createElement('td'));
-    toolsTR.appendChild(dom.createElement('td')); // right
+  var messageEditor = dom.createElement('tr');
+  var lhs = dom.createElement('td');
+  var middle = dom.createElement('td');
+  var rhs = dom.createElement('td');
+  messageEditor.appendChild(lhs);
+  messageEditor.appendChild(middle);
+  messageEditor.appendChild(rhs);
+  messageEditor.AJAR_date = sortDate; // messageEditor.appendChild(dom.createElement('br'))
 
-    toolsTD.appendChild(tools);
+  var field, sendButton;
+  var context = {
+    div: middle,
+    dom: dom
+  };
+
+  _index.authn.logIn(context).then(function (context) {
+    // me = context.me
+    turnOnInput();
+    Object.assign(context, userContext);
+    (0, _bookmarks.findBookmarkDocument)(context).then(function (_context) {// console.log('Bookmark file: ' + context.bookmarkDocument)
+    });
   });
-  return messageRow;
-}
+
+  return messageEditor;
+} // renderMessageEditor
 //# sourceMappingURL=message.js.map
 
 /***/ }),
@@ -7746,28 +8092,28 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/r
 
 var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js"));
 
+var debug = _interopRequireWildcard(__webpack_require__(/*! ../debug */ "./lib/debug.js"));
+
 var _index = __webpack_require__(/*! ../authn/index */ "./lib/authn/index.js");
 
 var _iconBase = __webpack_require__(/*! ../iconBase */ "./lib/iconBase.js");
 
 var _logic = __webpack_require__(/*! ../logic */ "./lib/logic.js");
 
-var _index2 = __webpack_require__(/*! ../media/index */ "./lib/media/index.js");
-
 var ns = _interopRequireWildcard(__webpack_require__(/*! ../ns */ "./lib/ns.js"));
 
-var pad = _interopRequireWildcard(__webpack_require__(/*! ../pad */ "./lib/pad.js"));
-
 var rdf = _interopRequireWildcard(__webpack_require__(/*! rdflib */ "./node_modules/rdflib/esm/index.js"));
 
-var style = _interopRequireWildcard(__webpack_require__(/*! ../style */ "./lib/style.js"));
-
 var utils = _interopRequireWildcard(__webpack_require__(/*! ../utils */ "./lib/utils/index.js"));
 
 var widgets = _interopRequireWildcard(__webpack_require__(/*! ../widgets */ "./lib/widgets/index.js"));
 
 var _bookmarks = __webpack_require__(/*! ./bookmarks */ "./lib/chat/bookmarks.js");
 
+var _chatLogic = __webpack_require__(/*! ./chatLogic */ "./lib/chat/chatLogic.js");
+
+var _message = __webpack_require__(/*! ./message */ "./lib/chat/message.js");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -7781,52 +8127,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * If you made it originally: edit, delete, attach
  * @packageDocumentation
  */
-
-/* global $rdf */
+// import { media } from '../media/index'
+// import * as pad from '../pad'
 // pull in first avoid cross-refs
-var UI = {
-  authn: _index.authn,
-  icons: _iconBase.icons,
-  ns: ns,
-  media: _index2.media,
-  pad: pad,
-  rdf: rdf,
-  store: _logic.store,
-  style: style,
-  utils: utils,
-  widgets: widgets
-};
-var dom = window.document;
-var kb = _logic.store; // const label = UI.utils.label
-// THE UNUSED ICONS are here as reminders for possible future functionality
+// import * as style from '../style'
+// import { infiniteMessageArea } from './infinite.js'
+// import { renderMessage, creatorAndDate } from './message'
+// import * as debug from '../debug'
+var dom = window.document; // THE UNUSED ICONS are here as reminders for possible future functionality
 // const BOOKMARK_ICON = 'noun_45961.svg'
 // const HEART_ICON = 'noun_130259.svg' -> Add this to my (private) favorites
 // const MENU_ICON = 'noun_897914.svg'
 // const PAPERCLIP_ICON = 'noun_25830.svg' -> add attachments to this message
 // const PIN_ICON = 'noun_562340.svg'  -> pin this message permanently in the chat UI
-// const PENCIL_ICON = 'noun_253504.svg'
+
+var PENCIL_ICON = 'noun_253504.svg'; // edit a message
 // const SPANNER_ICON = 'noun_344563.svg' -> settings
 
 var THUMBS_UP_ICON = 'noun_1384132.svg';
-var THUMBS_DOWN_ICON = 'noun_1384135.svg'; // module.export = { messageTools, sentimentStripLinked, sentimentStrip }
-// @@@@ use the one in rdflib.js when it is avaiable and delete this
-
-function updatePromise(del, ins) {
-  return new Promise(function (resolve, reject) {
-    kb.updater.update(del, ins, function (uri, ok, errorBody) {
-      if (!ok) {
-        reject(new Error(errorBody));
-      } else {
-        resolve();
-      }
-    }); // callback
-  }); // promise
-}
+var THUMBS_DOWN_ICON = 'noun_1384135.svg';
 /**
  * Emoji in Unicode
  */
 
-
 var emoji = {};
 emoji[ns.schema('AgreeAction')] = '👍';
 emoji[ns.schema('DisagreeAction')] = '👎';
@@ -7837,9 +8160,11 @@ emoji[ns.schema('LikeAction')] = '❤️';
  */
 
 function sentimentStrip(target, doc) {
-  var actions = kb.each(null, ns.schema('target'), target, doc);
+  // alain seems not used
+  var latest = (0, _chatLogic.mostRecentVersion)(target);
+  var actions = _logic.store.holds(latest, ns.schema('dateDeleted').value, null, latest.doc()) ? _logic.store.each(null, ns.schema('target'), target, doc) : [];
   var sentiments = actions.map(function (a) {
-    return kb.any(a, ns.rdf('type'), null, doc);
+    return _logic.store.any(a, ns.rdf('type'), null, doc);
   });
   sentiments.sort();
   var strings = sentiments.map(function (x) {
@@ -7860,9 +8185,9 @@ function sentimentStripLinked(target, doc) {
 
   function refresh() {
     strip.innerHTML = '';
-    var actions = kb.each(null, ns.schema('target'), target, doc);
+    var actions = (0, _chatLogic.mostRecentVersion)(target).uri !== ns.schema('dateDeleted').uri ? _logic.store.each(null, ns.schema('target'), target, doc) : [];
     var sentiments = actions.map(function (a) {
-      return [kb.any(a, ns.rdf('type'), null, doc), kb.any(a, ns.schema('agent'), null, doc)];
+      return [_logic.store.any(a, ns.rdf('type'), null, doc), _logic.store.any(a, ns.schema('agent'), null, doc)];
     });
     sentiments.sort();
     sentiments.forEach(function (ss) {
@@ -7893,74 +8218,156 @@ function sentimentStripLinked(target, doc) {
  */
 
 
-function messageToolbar(message, messageRow, userContext) {
-  var div = dom.createElement('div');
+function messageToolbar(message, messageRow, userContext, channelObject) {
+  function deleteMessage() {
+    return _deleteMessage.apply(this, arguments);
+  }
 
-  function closeToolbar() {
-    div.parentElement.parentElement.removeChild(div.parentElement); // remive the TR
+  function _deleteMessage() {
+    _deleteMessage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      var author, msg, area;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              author = _logic.store.any(message, ns.foaf('maker'));
+
+              if (me) {
+                _context2.next = 5;
+                break;
+              }
+
+              alert('You can\'t delete the message, you are not logged in.');
+              _context2.next = 22;
+              break;
+
+            case 5:
+              if (!me.sameTerm(author)) {
+                _context2.next = 21;
+                break;
+              }
+
+              _context2.prev = 6;
+              _context2.next = 9;
+              return channelObject.deleteMessage(message);
+
+            case 9:
+              _context2.next = 18;
+              break;
+
+            case 11:
+              _context2.prev = 11;
+              _context2.t0 = _context2["catch"](6);
+              msg = 'Error deleting messaage ' + _context2.t0;
+              debug.warn(msg);
+              alert(msg);
+              area = userContext.statusArea || messageRow.parentNode;
+              area.appendChild(widgets.errorMessageBlock(dom, msg));
+
+            case 18:
+              messageRow.parentNode.removeChild(messageRow);
+              _context2.next = 22;
+              break;
+
+            case 21:
+              alert('You can\'t delete the message, you are not logged in as the author, ' + author);
+
+            case 22:
+              closeToolbar();
+
+            case 23:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[6, 11]]);
+    }));
+    return _deleteMessage.apply(this, arguments);
   }
 
-  function deleteThingThen(_x) {
-    return _deleteThingThen.apply(this, arguments);
-  } // Things only the original author can do
+  function editMessage(_x) {
+    return _editMessage.apply(this, arguments);
+  } // alain TODO allow chat owner to fully delete message + sentiments and replacing messages
 
 
-  function _deleteThingThen() {
-    _deleteThingThen = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(x) {
+  function _editMessage() {
+    _editMessage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(messageRow) {
       return _regenerator["default"].wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
-              _context3.next = 2;
-              return updatePromise(kb.connectedStatements(x), []);
+              if (me.value === _logic.store.any(message, ns.foaf('maker')).value) {
+                closeToolbar(); // edit is a one-off action
 
-            case 2:
+                (0, _message.switchToEditor)(messageRow, message, channelObject, userContext);
+              }
+
+            case 1:
             case "end":
               return _context3.stop();
           }
         }
       }, _callee3);
     }));
-    return _deleteThingThen.apply(this, arguments);
+    return _editMessage.apply(this, arguments);
   }
 
-  var me = UI.authn.currentUser(); // If already logged on
+  var div = dom.createElement('div'); // is message deleted ?
 
-  if (me && kb.holds(message, ns.foaf('maker'), me)) {
-    // button to delete the message
-    var deleteButton = UI.widgets.deleteButtonWithCheck(dom, div, 'message', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-      return _regenerator["default"].wrap(function _callee$(_context) {
+  if ((0, _chatLogic.mostRecentVersion)(message).value === ns.schema('dateDeleted').value) return div;
+
+  function closeToolbar() {
+    div.parentElement.parentElement.removeChild(div.parentElement); // remive the TR
+  }
+
+  function deleteThingThen(_x2) {
+    return _deleteThingThen.apply(this, arguments);
+  } // Things only the original author can do
+
+
+  function _deleteThingThen() {
+    _deleteThingThen = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(x) {
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context.next = 2;
-              return kb.updater.update(kb.connectedStatements[message], []);
+              _context4.next = 2;
+              return _logic.store.updater.update(_logic.store.connectedStatements(x), []);
 
             case 2:
-              closeToolbar();
-
-            case 3:
             case "end":
-              return _context.stop();
+              return _context4.stop();
           }
         }
-      }, _callee);
-    })));
-    div.appendChild(deleteButton);
+      }, _callee4);
+    }));
+    return _deleteThingThen.apply(this, arguments);
+  }
+
+  var me = _index.authn.currentUser(); // If already logged on
+
+
+  if (me && _logic.store.holds(message, ns.foaf('maker'), me)) {
+    // button to delete the message
+    div.appendChild(widgets.deleteButtonWithCheck(dom, div, 'message', deleteMessage)); // button to edit the message
+
+    div.appendChild(widgets.button(dom, _iconBase.icons.iconBase + PENCIL_ICON, 'edit', function () {
+      return editMessage(messageRow);
+    }));
   } // if mine
   // Things anyone can do if they have a bookmark list async
 
   /*
-  var bookmarkButton = await bookmarks.renderBookmarksButton(userContext)
-  if (bookmarkButton) {
-   div.appendChild(bookmarkButton)
+  var bookmarstoreutton = await bookmarks.renderBookmarksButton(userContext)
+  if (bookmarstoreutton) {
+   div.appendChild(bookmarstoreutton)
   }
   */
   // Things anyone can do if they have a bookmark list
 
 
-  (0, _bookmarks.renderBookmarksButton)(userContext).then(function (bookmarkButton) {
-    if (bookmarkButton) div.appendChild(bookmarkButton);
+  (0, _bookmarks.renderBookmarksButton)(userContext).then(function (bookmarstoreutton) {
+    if (bookmarstoreutton) div.appendChild(bookmarstoreutton);
   });
   /**   Button to allow user to express a sentiment (like, endorse, etc) about a target
    *
@@ -7977,39 +8384,39 @@ function messageToolbar(message, messageRow, userContext) {
       button.style.backgroundColor = action ? 'yellow' : 'white';
     }
 
-    var button = UI.widgets.button(dom, icon, UI.utils.label(actionClass), /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(_event) {
+    var button = widgets.button(dom, icon, utils.label(actionClass), /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(_event) {
         var insertMe, dirty, i, a;
-        return _regenerator["default"].wrap(function _callee2$(_context2) {
+        return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context.prev = _context.next) {
               case 0:
                 if (!action) {
-                  _context2.next = 7;
+                  _context.next = 7;
                   break;
                 }
 
-                _context2.next = 3;
+                _context.next = 3;
                 return deleteThingThen(action);
 
               case 3:
                 action = null;
                 setColor();
-                _context2.next = 25;
+                _context.next = 25;
                 break;
 
               case 7:
                 // no action
-                action = UI.widgets.newThing(doc);
-                insertMe = [$rdf.st(action, ns.schema('agent'), context.me, doc), $rdf.st(action, ns.rdf('type'), actionClass, doc), $rdf.st(action, ns.schema('target'), target, doc)];
-                _context2.next = 11;
-                return updatePromise([], insertMe);
+                action = widgets.newThing(doc);
+                insertMe = [rdf.st(action, ns.schema('agent'), context.me, doc), rdf.st(action, ns.rdf('type'), actionClass, doc), rdf.st(action, ns.schema('target'), target, doc)];
+                _context.next = 11;
+                return _logic.store.updater.update([], insertMe);
 
               case 11:
                 setColor();
 
                 if (!mutuallyExclusive) {
-                  _context2.next = 25;
+                  _context.next = 25;
                   break;
                 }
 
@@ -8019,18 +8426,18 @@ function messageToolbar(message, messageRow, userContext) {
 
               case 15:
                 if (!(i < mutuallyExclusive.length)) {
-                  _context2.next = 24;
+                  _context.next = 24;
                   break;
                 }
 
                 a = existingAction(mutuallyExclusive[i]);
 
                 if (!a) {
-                  _context2.next = 21;
+                  _context.next = 21;
                   break;
                 }
 
-                _context2.next = 20;
+                _context.next = 20;
                 return deleteThingThen(a);
 
               case 20:
@@ -8039,34 +8446,35 @@ function messageToolbar(message, messageRow, userContext) {
 
               case 21:
                 i++;
-                _context2.next = 15;
+                _context.next = 15;
                 break;
 
               case 24:
                 if (dirty) {
-                  // UI.widgets.refreshTree(button.parentNode) // requires them all to be immediate siblings
-                  UI.widgets.refreshTree(messageRow); // requires them all to be immediate siblings
+                  // widgets.refreshTree(button.parentNode) // requires them all to be immediate siblings
+                  widgets.refreshTree(messageRow); // requires them all to be immediate siblings
                 }
 
               case 25:
               case "end":
-                return _context2.stop();
+                return _context.stop();
             }
           }
-        }, _callee2);
+        }, _callee);
       }));
 
-      return function (_x2) {
-        return _ref2.apply(this, arguments);
+      return function (_x3) {
+        return _ref.apply(this, arguments);
       };
     }());
 
     function existingAction(actionClass) {
-      var actions = kb.each(null, ns.schema('agent'), context.me, doc).filter(function (x) {
-        return kb.holds(x, ns.rdf('type'), actionClass, doc);
+      var actions = _logic.store.each(null, ns.schema('agent'), context.me, doc).filter(function (x) {
+        return _logic.store.holds(x, ns.rdf('type'), actionClass, doc);
       }).filter(function (x) {
-        return kb.holds(x, ns.schema('target'), target, doc);
+        return _logic.store.holds(x, ns.schema('target'), target, doc);
       });
+
       return actions.length ? actions[0] : null;
     }
 
@@ -8084,23 +8492,23 @@ function messageToolbar(message, messageRow, userContext) {
   // https://schema.org/AgreeAction
 
 
-  me = UI.authn.currentUser(); // If already logged on
+  me = _index.authn.currentUser(); // If already logged on
+  // debug.log('Actions 3' + mostRecentVersion(message).value + ' ' + ns.schema('dateDeleted').value + ' ' + (mostRecentVersion(message).value !== ns.schema('dateDeleted').value))
 
-  if (me) {
-    // Things you mnust be logged in for
+  if (me && (0, _chatLogic.mostRecentVersion)(message).value !== ns.schema('dateDeleted').value) {
     var context1 = {
       me: me,
       dom: dom,
       div: div
     };
-    div.appendChild(sentimentButton(context1, message, // @@ TODO use UI.widgets.sentimentButton
-    UI.icons.iconBase + THUMBS_UP_ICON, ns.schema('AgreeAction'), message.doc(), [ns.schema('DisagreeAction')])); // Thumbs down
+    div.appendChild(sentimentButton(context1, message, // @@ TODO use widgets.sentimentButton
+    _iconBase.icons.iconBase + THUMBS_UP_ICON, ns.schema('AgreeAction'), message.doc(), [ns.schema('DisagreeAction')])); // Thumbs down
 
-    div.appendChild(sentimentButton(context1, message, UI.icons.iconBase + THUMBS_DOWN_ICON, ns.schema('DisagreeAction'), message.doc(), [ns.schema('AgreeAction')]));
+    div.appendChild(sentimentButton(context1, message, _iconBase.icons.iconBase + THUMBS_DOWN_ICON, ns.schema('DisagreeAction'), message.doc(), [ns.schema('AgreeAction')]));
   } // X button to remove the tool UI itself
 
 
-  var cancelButton = div.appendChild(UI.widgets.cancelButton(dom));
+  var cancelButton = div.appendChild(widgets.cancelButton(dom));
   cancelButton.style["float"] = 'right';
   cancelButton.firstChild.style.opacity = '0.3';
   cancelButton.addEventListener('click', closeToolbar);
@@ -15733,10 +16141,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _default = {
-  buildTime: '2022-01-27T18:20:18Z',
-  commit: 'e81d3e08f47f3179725beb9858ad69d8fddf9187',
+  buildTime: '2022-01-28T13:51:09Z',
+  commit: '348f23a849caa9010004b6874dfb6cbcbda56bce',
   npmInfo: {
-    'solid-ui': '2.4.14-bbf45639',
+    'solid-ui': '2.4.15',
     npm: '6.14.15',
     ares: '1.18.1',
     brotli: '1.0.9',
@@ -16455,7 +16863,14 @@ function button(dom, iconURI, text, handler) {
 
 
 function cancelButton(dom, handler) {
-  return button(dom, cancelIconURI, 'Cancel', handler);
+  var b = button(dom, cancelIconURI, 'Cancel', handler);
+
+  if (b.firstChild) {
+    // sigh for tsc
+    b.firstChild.style.opacity = '0.3'; // Black X is too harsh: current language is grey X
+  }
+
+  return b;
 }
 /*  Make a continue button
  *