@k2b/ui 0.31.0 → 0.33.0

package/dist/browser/content/MessageRow.js

@@ -2,8 +2,8 @@ import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { style as _$style } from "solid-js/web";
@@ -16,35 +16,35 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<span role=img>`),
   _tmpl$3 = /*#__PURE__*/_$template(`<a target=_blank rel="noopener noreferrer">`),
   _tmpl$4 = /*#__PURE__*/_$template(`<button type=button>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<span class=k2b-message-row__name>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-message-row__badge>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<time class=k2b-message-row__time>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<i class="ti ti-arrow-back-up"aria-hidden=true>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-message-row__quote-text><span class=k2b-sr-only><!$><!/> </span><span class=k2b-message-row__quote-author></span> <!$><!/>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<img alt loading=lazy decoding=async>`, true, false, false),
-  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-message-row__media-play aria-hidden=true><i class="ti ti-player-play">`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-message-row__media-duration aria-hidden=true>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-message-row__media-more aria-hidden=true>+<!$><!/>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-message-row__avatar aria-hidden=true>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-message-row__gutter>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-message-row__meta>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-message-row__marker><i class="ti ti-arrow-forward-up"aria-hidden=true></i><span>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<div class="k2b-content-markdown k2b-message-row__text"data-heading-scale=compact>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-message-row__edited>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-message-row__more-line><!$><!/><!$><!/>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-message-row__bubble>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-message-row__marker><i class="ti ti-pencil"aria-hidden=true></i><span class=k2b-message-row__edited>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-message-row__media role=group>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-message-row__files>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-message-row__slot data-gesture-ignore>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-message-row__line>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-message-row__footer><!$><!/><!$><!/>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-message-row__actions role=group>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<div><!$><!/><div class=k2b-message-row__body><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-sr-only><!$><!/>, <!$><!/>: `),
-  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-message-row__meta><span class=k2b-sr-only><!$><!/>, </span><time class=k2b-message-row__time>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<div class=k2b-message-row__quote>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<button type=button class=k2b-message-row__quote>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<i class="ti ti-dots"aria-hidden=true>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-message-row__name>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-message-row__badge>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<time class=k2b-message-row__time>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-message-row__quote-author><span class=k2b-sr-only><!$><!/> </span><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-message-row__quote-text>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-message-row__quote>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<button type=button class=k2b-message-row__quote>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<img alt loading=lazy decoding=async>`, true, false, false),
+  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-message-row__media-play aria-hidden=true><i class="ti ti-player-play">`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-message-row__media-duration aria-hidden=true>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-message-row__media-more aria-hidden=true>+<!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-message-row__avatar aria-hidden=true>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-message-row__gutter>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-message-row__meta>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-message-row__marker><i class="ti ti-arrow-forward-up"aria-hidden=true></i><span>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class="k2b-content-markdown k2b-message-row__text"data-heading-scale=compact>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-message-row__edited>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-message-row__more-line><!$><!/><!$><!/>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-message-row__bubble><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-message-row__marker><i class="ti ti-pencil"aria-hidden=true></i><span class=k2b-message-row__edited>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-message-row__media role=group>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-message-row__files>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-message-row__slot data-gesture-ignore>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-message-row__line>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-message-row__footer><!$><!/><!$><!/>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div><!$><!/><div class=k2b-message-row__body><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-sr-only><!$><!/>, <!$><!/>: `),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-message-row__meta><span class=k2b-sr-only><!$><!/>, </span><time class=k2b-message-row__time>`),
   _tmpl$32 = /*#__PURE__*/_$template(`<span class=k2b-message-row__deleted><i class="ti ti-message-off"aria-hidden=true></i><!$><!/>`),
   _tmpl$33 = /*#__PURE__*/_$template(`<span class=k2b-message-row__writing><span class=k2b-chat-progress-dots aria-hidden=true><span></span><span></span><span>`),
   _tmpl$34 = /*#__PURE__*/_$template(`<span class=k2b-message-row__file-icon aria-hidden=true><i>`),
@@ -61,18 +61,25 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span>`),
   _tmpl$45 = /*#__PURE__*/_$template(`<span class=k2b-message-row__receipt>`),
   _tmpl$46 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
   _tmpl$47 = /*#__PURE__*/_$template(`<span class=k2b-message-row__line-text>`),
-  _tmpl$48 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$49 = /*#__PURE__*/_$template(`<time>`),
-  _tmpl$50 = /*#__PURE__*/_$template(`<div><!$><!/><span></span><!$><!/>`);
+  _tmpl$48 = /*#__PURE__*/_$template(`<span class=k2b-message-row__origin><!$><!/><!$><!/>`),
+  _tmpl$49 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$50 = /*#__PURE__*/_$template(`<button type=button class=k2b-message-row__origin><!$><!/><!$><!/>`),
+  _tmpl$51 = /*#__PURE__*/_$template(`<time>`),
+  _tmpl$52 = /*#__PURE__*/_$template(`<div><i aria-hidden=true></i><span class=k2b-message-event-row__text></span><!$><!/><!$><!/>`),
+  _tmpl$53 = /*#__PURE__*/_$template(`<button type=button><i class="ti ti-history"aria-hidden=true></i><span class=k2b-message-event-row__text></span><!$><!/><i aria-hidden=true>`),
+  _tmpl$54 = /*#__PURE__*/_$template(`<div><!$><!/><span></span><!$><!/>`);
 import { fileIcons } from "@k2b/stdlib";
 import { createMemo, createSignal, createUniqueId, For, onCleanup, Show } from "solid-js";
-import { Button, IconButton } from "../actions/Button";
+import { Button } from "../actions/Button";
 import { copyText } from "../actions/CopyButton";
+import { Dropdown } from "../actions/Dropdown";
+import { GestureMenu } from "../actions/GestureMenu";
 import { useChatMessages } from "../chat/chat-messages";
 import { announce } from "../feedback/announce";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { Avatar } from "../surfaces/Avatar";
+import { Kbd } from "./Kbd";
 import { createSafeMarked, createSafeRenderer, escapeHtml } from "./MarkdownView";
 import { ReactionBar } from "./ReactionBar";
 
@@ -89,6 +96,8 @@ const LINE_CHARS = 100;
 /** Lines at the bottom of a collapsed message that fade out, as `.k2b-message-row__text[data-collapsed]` draws them. */
 const FADE_LINES = 2;
 const COPIED_MS = 2_000;
+/** Alt+click on these keeps its own meaning, such as downloading a link. */
+const ALT_CLICK_IGNORE = "a[href], button, input, textarea, select, summary, label, audio, video, [role='button'], [role='link']";
 /** Links in messages may only use these schemes; other links show as their text. */
 const LINK_PROTOCOLS = ["https:", "http:", "mailto:"];
 /** Attachments open and load only from these schemes or from a relative URL. */
@@ -106,6 +115,8 @@ const MEDIA_RATIO_MAX = 3;
 
 /** Reaction labels are read by screen readers and shown in the names hint. */
 
+/** Where a message belongs, shown as a small chip under it, for example its thread in a timeline of several. */
+
 const timestamp = value => value instanceof Date ? value.getTime() : new Date(value).getTime();
 
 /**
@@ -400,41 +411,128 @@ export function MessageRow(props) {
     const fade = text.getBoundingClientRect().bottom - FADE_LINES * Number.parseFloat(getComputedStyle(text).lineHeight);
     if (event.target.getBoundingClientRect().bottom > fade) setExpanded(true);
   };
+
+  // The same entries serve "…", right-click, the keyboard, and a long press. Alt+click and keys show at the entry's end.
+  // Each menu gets its own entries: a rendered shortcut is a DOM node and can live in only one menu.
+  const entries = () => (props.actions ?? []).map(entry => ({
+    label: entry.label,
+    icon: entry.icon,
+    description: entry.description,
+    disabled: entry.disabled,
+    variant: entry.variant,
+    gesture: entry.gesture,
+    immediate: entry.immediate,
+    trailing: entry.altClick ? _$createComponent(Kbd, {
+      keys: "alt+click"
+    }) : entry.shortcut ? _$createComponent(Kbd, {
+      get keys() {
+        return entry.shortcut;
+      }
+    }) : undefined,
+    action: () => entry.onSelect()
+  }));
+  const menuItems = createMemo(entries);
+  const gestureItems = createMemo(entries);
+  const hasMenu = () => (props.actions?.length ?? 0) > 0;
+
+  // Alt+click (Option+click) on the message, not on a link or control inside it, runs the entry that asks for it.
+  const altClick = event => {
+    if (!event.altKey || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    const entry = props.actions?.find(action => action.altClick && !action.disabled);
+    const target = event.target instanceof Element ? event.target : null;
+    if (!entry || target?.closest(ALT_CLICK_IGNORE)) return;
+    event.preventDefault();
+    entry.onSelect();
+  };
+  const more = () => _$createComponent(Dropdown.Root, {
+    get items() {
+      return menuItems();
+    },
+    get label() {
+      return chatMessages().messageActions;
+    },
+    "class": "k2b-message-row__menu-root",
+    get position() {
+      return props.own ? "bottom-right" : "bottom-left";
+    },
+    phone: "sheet",
+    get children() {
+      return _$createComponent(Dropdown.Trigger, {
+        iconOnly: true,
+        variant: "ghost",
+        size: "sm",
+        get label() {
+          return chatMessages().messageActions;
+        },
+        "class": "k2b-message-row__menu",
+        get children() {
+          return _$getNextElement(_tmpl$5);
+        }
+      });
+    }
+  });
   const header = () => [(() => {
-    var _el$5 = _$getNextElement(_tmpl$5);
-    _$insert(_el$5, () => props.author.name);
-    return _el$5;
+    var _el$6 = _$getNextElement(_tmpl$6);
+    _$insert(_el$6, () => props.author.name);
+    return _el$6;
   })(), _$createComponent(Show, {
     get when() {
       return props.badge;
     },
     get children() {
-      var _el$6 = _$getNextElement(_tmpl$6);
-      _$insert(_el$6, () => props.badge);
-      return _el$6;
+      var _el$7 = _$getNextElement(_tmpl$7);
+      _$insert(_el$7, () => props.badge);
+      return _el$7;
     }
   }), (() => {
-    var _el$7 = _$getNextElement(_tmpl$7);
-    _$insert(_el$7, () => props.time);
-    _$effect(() => _$setAttribute(_el$7, "datetime", dateTimeOf(props.dateTime)));
-    return _el$7;
+    var _el$8 = _$getNextElement(_tmpl$8);
+    _$insert(_el$8, () => props.time);
+    _$effect(() => _$setAttribute(_el$8, "datetime", dateTimeOf(props.dateTime)));
+    return _el$8;
   })()];
-  const quote = value => [_$getNextElement(_tmpl$8), (() => {
+  const quote = value => [(() => {
     var _el$9 = _$getNextElement(_tmpl$9),
       _el$0 = _el$9.firstChild,
       _el$10 = _el$0.firstChild,
       [_el$11, _co$] = _$getNextMarker(_el$10.nextSibling),
       _el$1 = _el$11.nextSibling,
       _el$12 = _el$0.nextSibling,
-      _el$13 = _el$12.nextSibling,
-      _el$14 = _el$13.nextSibling,
-      [_el$15, _co$2] = _$getNextMarker(_el$14.nextSibling);
+      [_el$13, _co$2] = _$getNextMarker(_el$12.nextSibling);
     _$insert(_el$0, () => chatMessages().messageReplyTo, _el$11, _co$);
-    _$insert(_el$12, () => value.author);
-    _$insert(_el$9, () => value.text, _el$15, _co$2);
+    _$insert(_el$9, () => value.author, _el$13, _co$2);
     return _el$9;
+  })(), (() => {
+    var _el$14 = _$getNextElement(_tmpl$0);
+    _$insert(_el$14, () => value.text);
+    return _el$14;
   })()];
 
+  /** The answered message on a quiet tint at the top of the bubble, or in its place without one. */
+  const quoteBlock = () => _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!content())() && props.quote;
+    },
+    children: value => _$createComponent(Show, {
+      get when() {
+        return value().onSelect;
+      },
+      get fallback() {
+        return (() => {
+          var _el$15 = _$getNextElement(_tmpl$1);
+          _$insert(_el$15, () => quote(value()));
+          return _el$15;
+        })();
+      },
+      children: select => (() => {
+        var _el$16 = _$getNextElement(_tmpl$10);
+        _el$16.$$click = () => select()();
+        _$insert(_el$16, () => quote(value()));
+        _$runHydrationEvents();
+        return _el$16;
+      })()
+    })
+  });
+
   /** The picture's description, then that it is a video and how long, then how many more the grid hides. */
   const mediaLabel = (item, more) => [item.alt, item.kind === "video" ? [chatMessages().messageVideo, item.duration].filter(Boolean).join(" ") : "", more > 0 ? chatMessages().messageMoreAttachments({
     count: more
@@ -459,34 +557,34 @@ export function MessageRow(props) {
       },
       get children() {
         return [(() => {
-          var _el$16 = _$getNextElement(_tmpl$0);
+          var _el$17 = _$getNextElement(_tmpl$11);
           _$effect(_p$ => {
             var _v$11 = attachmentUrl(item.src, true),
               _v$12 = item.width > 0 ? item.width : undefined,
               _v$13 = item.height > 0 ? item.height : undefined;
-            _v$11 !== _p$.e && _$setAttribute(_el$16, "src", _p$.e = _v$11);
-            _v$12 !== _p$.t && _$setAttribute(_el$16, "width", _p$.t = _v$12);
-            _v$13 !== _p$.a && _$setAttribute(_el$16, "height", _p$.a = _v$13);
+            _v$11 !== _p$.e && _$setAttribute(_el$17, "src", _p$.e = _v$11);
+            _v$12 !== _p$.t && _$setAttribute(_el$17, "width", _p$.t = _v$12);
+            _v$13 !== _p$.a && _$setAttribute(_el$17, "height", _p$.a = _v$13);
             return _p$;
           }, {
             e: undefined,
             t: undefined,
             a: undefined
           });
-          return _el$16;
+          return _el$17;
         })(), _$createComponent(Show, {
           get when() {
             return item.kind === "video";
           },
           get children() {
-            return [_$getNextElement(_tmpl$1), _$createComponent(Show, {
+            return [_$getNextElement(_tmpl$12), _$createComponent(Show, {
               get when() {
                 return item.duration;
               },
               get children() {
-                var _el$18 = _$getNextElement(_tmpl$10);
-                _$insert(_el$18, () => item.duration);
-                return _el$18;
+                var _el$19 = _$getNextElement(_tmpl$13);
+                _$insert(_el$19, () => item.duration);
+                return _el$19;
               }
             })];
           }
@@ -495,59 +593,63 @@ export function MessageRow(props) {
             return more() > 0;
           },
           get children() {
-            var _el$19 = _$getNextElement(_tmpl$11),
-              _el$20 = _el$19.firstChild,
-              _el$21 = _el$20.nextSibling,
-              [_el$22, _co$3] = _$getNextMarker(_el$21.nextSibling);
-            _$insert(_el$19, more, _el$22, _co$3);
-            return _el$19;
+            var _el$20 = _$getNextElement(_tmpl$14),
+              _el$21 = _el$20.firstChild,
+              _el$22 = _el$21.nextSibling,
+              [_el$23, _co$3] = _$getNextMarker(_el$22.nextSibling);
+            _$insert(_el$20, more, _el$23, _co$3);
+            return _el$20;
           }
         })];
       }
     });
   };
-  return (() => {
-    var _el$23 = _$getNextElement(_tmpl$27),
-      _el$75 = _el$23.firstChild,
+  const row = // biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents: Alt+click is a pointer shortcut for a menu entry that the keyboard reaches through "…".
+  (() => {
+    var _el$24 = _$getNextElement(_tmpl$29),
+      _el$85 = _el$24.firstChild,
+      [_el$86, _co$22] = _$getNextMarker(_el$85.nextSibling),
+      _el$27 = _el$86.nextSibling,
+      _el$59 = _el$27.firstChild,
+      [_el$60, _co$1] = _$getNextMarker(_el$59.nextSibling),
+      _el$61 = _el$60.nextSibling,
+      [_el$62, _co$10] = _$getNextMarker(_el$61.nextSibling),
+      _el$63 = _el$62.nextSibling,
+      [_el$64, _co$11] = _$getNextMarker(_el$63.nextSibling),
+      _el$65 = _el$64.nextSibling,
+      [_el$66, _co$12] = _$getNextMarker(_el$65.nextSibling),
+      _el$67 = _el$66.nextSibling,
+      [_el$68, _co$13] = _$getNextMarker(_el$67.nextSibling),
+      _el$69 = _el$68.nextSibling,
+      [_el$70, _co$14] = _$getNextMarker(_el$69.nextSibling),
+      _el$71 = _el$70.nextSibling,
+      [_el$72, _co$15] = _$getNextMarker(_el$71.nextSibling),
+      _el$73 = _el$72.nextSibling,
+      [_el$74, _co$16] = _$getNextMarker(_el$73.nextSibling),
+      _el$75 = _el$74.nextSibling,
       [_el$76, _co$17] = _$getNextMarker(_el$75.nextSibling),
-      _el$26 = _el$76.nextSibling,
-      _el$52 = _el$26.firstChild,
-      [_el$53, _co$8] = _$getNextMarker(_el$52.nextSibling),
-      _el$54 = _el$53.nextSibling,
-      [_el$55, _co$9] = _$getNextMarker(_el$54.nextSibling),
-      _el$56 = _el$55.nextSibling,
-      [_el$57, _co$0] = _$getNextMarker(_el$56.nextSibling),
-      _el$58 = _el$57.nextSibling,
-      [_el$59, _co$1] = _$getNextMarker(_el$58.nextSibling),
-      _el$60 = _el$59.nextSibling,
-      [_el$61, _co$10] = _$getNextMarker(_el$60.nextSibling),
-      _el$62 = _el$61.nextSibling,
-      [_el$63, _co$11] = _$getNextMarker(_el$62.nextSibling),
-      _el$64 = _el$63.nextSibling,
-      [_el$65, _co$12] = _$getNextMarker(_el$64.nextSibling),
-      _el$66 = _el$65.nextSibling,
-      [_el$67, _co$13] = _$getNextMarker(_el$66.nextSibling),
-      _el$68 = _el$67.nextSibling,
-      [_el$69, _co$14] = _$getNextMarker(_el$68.nextSibling),
-      _el$70 = _el$69.nextSibling,
-      [_el$71, _co$15] = _$getNextMarker(_el$70.nextSibling),
-      _el$72 = _el$71.nextSibling,
-      [_el$73, _co$16] = _$getNextMarker(_el$72.nextSibling),
-      _el$77 = _el$26.nextSibling,
-      [_el$78, _co$18] = _$getNextMarker(_el$77.nextSibling);
-    _$insert(_el$23, _$createComponent(Show, {
+      _el$77 = _el$76.nextSibling,
+      [_el$78, _co$18] = _$getNextMarker(_el$77.nextSibling),
+      _el$79 = _el$78.nextSibling,
+      [_el$80, _co$19] = _$getNextMarker(_el$79.nextSibling),
+      _el$81 = _el$80.nextSibling,
+      [_el$82, _co$20] = _$getNextMarker(_el$81.nextSibling),
+      _el$83 = _el$82.nextSibling,
+      [_el$84, _co$21] = _$getNextMarker(_el$83.nextSibling);
+    _el$24.$$click = altClick;
+    _$insert(_el$24, _$createComponent(Show, {
       get when() {
         return !props.own;
       },
       get children() {
-        var _el$24 = _$getNextElement(_tmpl$13);
-        _$insert(_el$24, _$createComponent(Show, {
+        var _el$25 = _$getNextElement(_tmpl$16);
+        _$insert(_el$25, _$createComponent(Show, {
           get when() {
             return groupStart();
           },
           get children() {
-            var _el$25 = _$getNextElement(_tmpl$12);
-            _$insert(_el$25, _$createComponent(Avatar, {
+            var _el$26 = _$getNextElement(_tmpl$15);
+            _$insert(_el$26, _$createComponent(Avatar, {
               get name() {
                 return props.author.name;
               },
@@ -559,28 +661,28 @@ export function MessageRow(props) {
               },
               size: "sm"
             }));
-            return _el$25;
+            return _el$26;
           }
         }));
-        return _el$24;
+        return _el$25;
       }
-    }), _el$76, _co$17);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$86, _co$22);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return groupStart();
       },
       get fallback() {
         return (() => {
-          var _el$79 = _$getNextElement(_tmpl$28),
-            _el$82 = _el$79.firstChild,
-            [_el$83, _co$19] = _$getNextMarker(_el$82.nextSibling),
-            _el$80 = _el$83.nextSibling,
-            _el$84 = _el$80.nextSibling,
-            [_el$85, _co$20] = _$getNextMarker(_el$84.nextSibling),
-            _el$81 = _el$85.nextSibling;
-          _$insert(_el$79, () => props.author.name, _el$83, _co$19);
-          _$insert(_el$79, () => props.time, _el$85, _co$20);
-          return _el$79;
+          var _el$87 = _$getNextElement(_tmpl$30),
+            _el$90 = _el$87.firstChild,
+            [_el$91, _co$23] = _$getNextMarker(_el$90.nextSibling),
+            _el$88 = _el$91.nextSibling,
+            _el$92 = _el$88.nextSibling,
+            [_el$93, _co$24] = _$getNextMarker(_el$92.nextSibling),
+            _el$89 = _el$93.nextSibling;
+          _$insert(_el$87, () => props.author.name, _el$91, _co$23);
+          _$insert(_el$87, () => props.time, _el$93, _co$24);
+          return _el$87;
         })();
       },
       get children() {
@@ -590,80 +692,71 @@ export function MessageRow(props) {
           },
           get fallback() {
             return (() => {
-              var _el$86 = _$getNextElement(_tmpl$29),
-                _el$87 = _el$86.firstChild,
-                _el$89 = _el$87.firstChild,
-                [_el$90, _co$21] = _$getNextMarker(_el$89.nextSibling),
-                _el$88 = _el$90.nextSibling,
-                _el$91 = _el$87.nextSibling;
-              _$insert(_el$87, () => props.author.name, _el$90, _co$21);
-              _$insert(_el$91, () => props.time);
-              _$effect(() => _$setAttribute(_el$91, "datetime", dateTimeOf(props.dateTime)));
-              return _el$86;
+              var _el$94 = _$getNextElement(_tmpl$31),
+                _el$95 = _el$94.firstChild,
+                _el$97 = _el$95.firstChild,
+                [_el$98, _co$25] = _$getNextMarker(_el$97.nextSibling),
+                _el$96 = _el$98.nextSibling,
+                _el$99 = _el$95.nextSibling;
+              _$insert(_el$95, () => props.author.name, _el$98, _co$25);
+              _$insert(_el$99, () => props.time);
+              _$effect(() => _$setAttribute(_el$99, "datetime", dateTimeOf(props.dateTime)));
+              return _el$94;
             })();
           },
           get children() {
-            var _el$27 = _$getNextElement(_tmpl$14);
-            _$insert(_el$27, header);
-            return _el$27;
+            var _el$28 = _$getNextElement(_tmpl$17);
+            _$insert(_el$28, header);
+            return _el$28;
           }
         });
       }
-    }), _el$53, _co$8);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$60, _co$1);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!content())() && props.forwarded;
       },
       get children() {
-        var _el$28 = _$getNextElement(_tmpl$15),
-          _el$29 = _el$28.firstChild,
-          _el$30 = _el$29.nextSibling;
-        _$insert(_el$30, () => chatMessages().messageForwarded);
-        return _el$28;
+        var _el$29 = _$getNextElement(_tmpl$18),
+          _el$30 = _el$29.firstChild,
+          _el$31 = _el$30.nextSibling;
+        _$insert(_el$31, () => chatMessages().messageForwarded);
+        return _el$29;
       }
-    }), _el$55, _co$9);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$62, _co$10);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
-        return _$memo(() => !!content())() && props.quote;
+        return !hasBubble();
       },
-      children: value => _$createComponent(Show, {
-        get when() {
-          return value().onSelect;
-        },
-        get fallback() {
-          return (() => {
-            var _el$92 = _$getNextElement(_tmpl$30);
-            _$insert(_el$92, () => quote(value()));
-            return _el$92;
-          })();
-        },
-        children: select => (() => {
-          var _el$93 = _$getNextElement(_tmpl$31);
-          _el$93.$$click = () => select()();
-          _$insert(_el$93, () => quote(value()));
-          _$runHydrationEvents();
-          return _el$93;
-        })()
-      })
-    }), _el$57, _co$0);
-    _$insert(_el$26, _$createComponent(Show, {
+      get children() {
+        return quoteBlock();
+      }
+    }), _el$64, _co$11);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return hasBubble();
       },
       get children() {
-        var _el$31 = _$getNextElement(_tmpl$19);
-        _$insert(_el$31, _$createComponent(Show, {
+        var _el$32 = _$getNextElement(_tmpl$22),
+          _el$40 = _el$32.firstChild,
+          [_el$41, _co$6] = _$getNextMarker(_el$40.nextSibling),
+          _el$42 = _el$41.nextSibling,
+          [_el$43, _co$7] = _$getNextMarker(_el$42.nextSibling),
+          _el$44 = _el$43.nextSibling,
+          [_el$45, _co$8] = _$getNextMarker(_el$44.nextSibling);
+        _$insert(_el$32, quoteBlock, _el$41, _co$6);
+        _$insert(_el$32, _$createComponent(Show, {
           get when() {
             return !props.deleted;
           },
           get fallback() {
             return (() => {
-              var _el$94 = _$getNextElement(_tmpl$32),
-                _el$95 = _el$94.firstChild,
-                _el$96 = _el$95.nextSibling,
-                [_el$97, _co$22] = _$getNextMarker(_el$96.nextSibling);
-              _$insert(_el$94, () => chatMessages().messageDeleted, _el$97, _co$22);
-              return _el$94;
+              var _el$100 = _$getNextElement(_tmpl$32),
+                _el$101 = _el$100.firstChild,
+                _el$102 = _el$101.nextSibling,
+                [_el$103, _co$26] = _$getNextMarker(_el$102.nextSibling);
+              _$insert(_el$100, () => chatMessages().messageDeleted, _el$103, _co$26);
+              return _el$100;
             })();
           },
           get children() {
@@ -676,35 +769,35 @@ export function MessageRow(props) {
               },
               get children() {
                 return [(() => {
-                  var _el$32 = _$getNextElement(_tmpl$16);
-                  _el$32.$$focusin = revealFocus;
-                  _el$32.$$click = copyCode;
+                  var _el$33 = _$getNextElement(_tmpl$19);
+                  _el$33.$$focusin = revealFocus;
+                  _el$33.$$click = copyCode;
                   var _ref$ = text;
-                  typeof _ref$ === "function" ? _$use(_ref$, _el$32) : text = _el$32;
-                  _$setAttribute(_el$32, "id", textId);
+                  typeof _ref$ === "function" ? _$use(_ref$, _el$33) : text = _el$33;
+                  _$setAttribute(_el$33, "id", textId);
                   _$effect(_p$ => {
                     var _v$14 = collapsed() ? "" : undefined,
                       _v$15 = rendered().html;
-                    _v$14 !== _p$.e && _$setAttribute(_el$32, "data-collapsed", _p$.e = _v$14);
-                    _v$15 !== _p$.t && _$setProperty(_el$32, "innerHTML", _p$.t = _v$15);
+                    _v$14 !== _p$.e && _$setAttribute(_el$33, "data-collapsed", _p$.e = _v$14);
+                    _v$15 !== _p$.t && _$setProperty(_el$33, "innerHTML", _p$.t = _v$15);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined
                   });
                   _$runHydrationEvents();
-                  return _el$32;
+                  return _el$33;
                 })(), _$createComponent(Show, {
                   get when() {
                     return collapsible();
                   },
                   get children() {
-                    var _el$33 = _$getNextElement(_tmpl$18),
-                      _el$35 = _el$33.firstChild,
-                      [_el$36, _co$4] = _$getNextMarker(_el$35.nextSibling),
-                      _el$37 = _el$36.nextSibling,
-                      [_el$38, _co$5] = _$getNextMarker(_el$37.nextSibling);
-                    _$insert(_el$33, _$createComponent(Button, {
+                    var _el$34 = _$getNextElement(_tmpl$21),
+                      _el$36 = _el$34.firstChild,
+                      [_el$37, _co$4] = _$getNextMarker(_el$36.nextSibling),
+                      _el$38 = _el$37.nextSibling,
+                      [_el$39, _co$5] = _$getNextMarker(_el$38.nextSibling);
+                    _$insert(_el$34, _$createComponent(Button, {
                       variant: "text",
                       size: "xs",
                       "class": "k2b-message-row__more",
@@ -716,56 +809,72 @@ export function MessageRow(props) {
                       get children() {
                         return _$memo(() => !!expanded())() ? chatMessages().messageShowLess : chatMessages().messageShowMore;
                       }
-                    }), _el$36, _co$4);
-                    _$insert(_el$33, _$createComponent(Show, {
+                    }), _el$37, _co$4);
+                    _$insert(_el$34, _$createComponent(Show, {
                       get when() {
                         return props.edited;
                       },
                       get children() {
-                        var _el$34 = _$getNextElement(_tmpl$17);
-                        _$insert(_el$34, () => chatMessages().messageEdited);
-                        return _el$34;
+                        var _el$35 = _$getNextElement(_tmpl$20);
+                        _$insert(_el$35, () => chatMessages().messageEdited);
+                        return _el$35;
                       }
-                    }), _el$38, _co$5);
-                    return _el$33;
+                    }), _el$39, _co$5);
+                    return _el$34;
                   }
                 })];
               }
             });
           }
-        }));
+        }), _el$43, _co$7);
+        _$insert(_el$32, _$createComponent(Show, {
+          get when() {
+            return hasMenu();
+          },
+          get children() {
+            return more();
+          }
+        }), _el$45, _co$8);
         _$effect(_p$ => {
           var _v$16 = props.deleted ? "" : undefined,
             _v$17 = props.progress && !props.deleted ? "true" : undefined;
-          _v$16 !== _p$.e && _$setAttribute(_el$31, "data-deleted", _p$.e = _v$16);
-          _v$17 !== _p$.t && _$setAttribute(_el$31, "aria-busy", _p$.t = _v$17);
+          _v$16 !== _p$.e && _$setAttribute(_el$32, "data-deleted", _p$.e = _v$16);
+          _v$17 !== _p$.t && _$setAttribute(_el$32, "aria-busy", _p$.t = _v$17);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$31;
+        return _el$32;
       }
-    }), _el$59, _co$1);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$66, _co$12);
+    _$insert(_el$27, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!hasMenu())() && !hasBubble();
+      },
+      get children() {
+        return more();
+      }
+    }), _el$68, _co$13);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!(content() && props.edited))() && !hasBubble();
       },
       get children() {
-        var _el$39 = _$getNextElement(_tmpl$20),
-          _el$40 = _el$39.firstChild,
-          _el$41 = _el$40.nextSibling;
-        _$insert(_el$41, () => chatMessages().messageEdited);
-        return _el$39;
+        var _el$46 = _$getNextElement(_tmpl$23),
+          _el$47 = _el$46.firstChild,
+          _el$48 = _el$47.nextSibling;
+        _$insert(_el$48, () => chatMessages().messageEdited);
+        return _el$46;
       }
-    }), _el$61, _co$10);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$70, _co$14);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return media().length > 0;
       },
       get children() {
-        var _el$42 = _$getNextElement(_tmpl$21);
-        _$insert(_el$42, _$createComponent(For, {
+        var _el$49 = _$getNextElement(_tmpl$24);
+        _$insert(_el$49, _$createComponent(For, {
           get each() {
             return shownMedia();
           },
@@ -777,25 +886,25 @@ export function MessageRow(props) {
             _v$20 = media().length === 1 ? {
               width: mediaWidth(media()[0])
             } : undefined;
-          _v$18 !== _p$.e && _$setAttribute(_el$42, "aria-label", _p$.e = _v$18);
-          _v$19 !== _p$.t && _$setAttribute(_el$42, "data-count", _p$.t = _v$19);
-          _p$.a = _$style(_el$42, _v$20, _p$.a);
+          _v$18 !== _p$.e && _$setAttribute(_el$49, "aria-label", _p$.e = _v$18);
+          _v$19 !== _p$.t && _$setAttribute(_el$49, "data-count", _p$.t = _v$19);
+          _p$.a = _$style(_el$49, _v$20, _p$.a);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined
         });
-        return _el$42;
+        return _el$49;
       }
-    }), _el$63, _co$11);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$72, _co$15);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return files().length > 0;
       },
       get children() {
-        var _el$43 = _$getNextElement(_tmpl$22);
-        _$insert(_el$43, _$createComponent(For, {
+        var _el$50 = _$getNextElement(_tmpl$25);
+        _$insert(_el$50, _$createComponent(For, {
           get each() {
             return files();
           },
@@ -809,73 +918,73 @@ export function MessageRow(props) {
             },
             get children() {
               return [(() => {
-                var _el$99 = _$getNextElement(_tmpl$34),
-                  _el$100 = _el$99.firstChild;
-                _$effect(() => _$className(_el$100, fileIcon(file)));
-                return _el$99;
+                var _el$105 = _$getNextElement(_tmpl$34),
+                  _el$106 = _el$105.firstChild;
+                _$effect(() => _$className(_el$106, fileIcon(file)));
+                return _el$105;
               })(), (() => {
-                var _el$101 = _$getNextElement(_tmpl$36),
-                  _el$102 = _el$101.firstChild,
-                  _el$104 = _el$102.nextSibling,
-                  [_el$105, _co$23] = _$getNextMarker(_el$104.nextSibling);
-                _$insert(_el$102, () => file.name);
-                _$insert(_el$101, _$createComponent(Show, {
+                var _el$107 = _$getNextElement(_tmpl$36),
+                  _el$108 = _el$107.firstChild,
+                  _el$110 = _el$108.nextSibling,
+                  [_el$111, _co$27] = _$getNextMarker(_el$110.nextSibling);
+                _$insert(_el$108, () => file.name);
+                _$insert(_el$107, _$createComponent(Show, {
                   get when() {
                     return file.detail;
                   },
                   get children() {
-                    var _el$103 = _$getNextElement(_tmpl$35);
-                    _$insert(_el$103, () => file.detail);
-                    return _el$103;
+                    var _el$109 = _$getNextElement(_tmpl$35);
+                    _$insert(_el$109, () => file.detail);
+                    return _el$109;
                   }
-                }), _el$105, _co$23);
-                return _el$101;
+                }), _el$111, _co$27);
+                return _el$107;
               })()];
             }
           })
         }));
-        return _el$43;
+        return _el$50;
       }
-    }), _el$65, _co$12);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$74, _co$16);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!content())() && props.linkPreview;
       },
       get children() {
-        var _el$44 = _$getNextElement(_tmpl$23);
-        _$insert(_el$44, () => props.linkPreview);
-        return _el$44;
+        var _el$51 = _$getNextElement(_tmpl$26);
+        _$insert(_el$51, () => props.linkPreview);
+        return _el$51;
       }
-    }), _el$67, _co$13);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$76, _co$17);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!content())() && props.card;
       },
       get children() {
-        var _el$45 = _$getNextElement(_tmpl$23);
-        _$insert(_el$45, () => props.card);
-        return _el$45;
+        var _el$52 = _$getNextElement(_tmpl$26);
+        _$insert(_el$52, () => props.card);
+        return _el$52;
       }
-    }), _el$69, _co$14);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$78, _co$18);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return props.thread;
       },
       children: thread => (() => {
-        var _el$106 = _$getNextElement(_tmpl$38),
-          _el$109 = _el$106.firstChild,
-          [_el$110, _co$24] = _$getNextMarker(_el$109.nextSibling),
-          _el$108 = _el$110.nextSibling,
-          _el$111 = _el$108.nextSibling,
-          [_el$112, _co$25] = _$getNextMarker(_el$111.nextSibling);
-        _el$106.$$click = () => thread().onOpen();
-        _$insert(_el$106, _$createComponent(Show, {
+        var _el$112 = _$getNextElement(_tmpl$38),
+          _el$115 = _el$112.firstChild,
+          [_el$116, _co$28] = _$getNextMarker(_el$115.nextSibling),
+          _el$114 = _el$116.nextSibling,
+          _el$117 = _el$114.nextSibling,
+          [_el$118, _co$29] = _$getNextMarker(_el$117.nextSibling);
+        _el$112.$$click = () => thread().onOpen();
+        _$insert(_el$112, _$createComponent(Show, {
           get when() {
             return (thread().participants?.length ?? 0) > 0;
           },
           get children() {
-            var _el$107 = _$getNextElement(_tmpl$37);
-            _$insert(_el$107, _$createComponent(For, {
+            var _el$113 = _$getNextElement(_tmpl$37);
+            _$insert(_el$113, _$createComponent(For, {
               get each() {
                 return thread().participants?.slice(0, 3);
               },
@@ -892,40 +1001,50 @@ export function MessageRow(props) {
                 size: "xs"
               })
             }));
-            return _el$107;
+            return _el$113;
           }
-        }), _el$110, _co$24);
-        _$insert(_el$108, () => chatMessages().messageReplies({
+        }), _el$116, _co$28);
+        _$insert(_el$114, () => chatMessages().messageReplies({
           count: thread().count
         }));
-        _$insert(_el$106, _$createComponent(Show, {
+        _$insert(_el$112, _$createComponent(Show, {
           get when() {
             return thread().lastReply;
           },
           children: time => (() => {
-            var _el$113 = _$getNextElement(_tmpl$39);
-            _$insert(_el$113, () => chatMessages().messageLastReply({
+            var _el$119 = _$getNextElement(_tmpl$39);
+            _$insert(_el$119, () => chatMessages().messageLastReply({
               time: time()
             }));
-            _$effect(() => _$setAttribute(_el$113, "datetime", dateTimeOf(thread().lastReplyDateTime)));
-            return _el$113;
+            _$effect(() => _$setAttribute(_el$119, "datetime", dateTimeOf(thread().lastReplyDateTime)));
+            return _el$119;
           })()
-        }), _el$112, _co$25);
+        }), _el$118, _co$29);
         _$runHydrationEvents();
-        return _el$106;
+        return _el$112;
       })()
-    }), _el$71, _co$15);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$80, _co$19);
+    _$insert(_el$27, _$createComponent(Show, {
+      get when() {
+        return props.origin;
+      },
+      children: origin => _$createComponent(OriginChip, {
+        get origin() {
+          return origin();
+        }
+      })
+    }), _el$82, _co$20);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return hasFooter();
       },
       get children() {
-        var _el$46 = _$getNextElement(_tmpl$25),
-          _el$48 = _el$46.firstChild,
-          [_el$49, _co$6] = _$getNextMarker(_el$48.nextSibling),
-          _el$50 = _el$49.nextSibling,
-          [_el$51, _co$7] = _$getNextMarker(_el$50.nextSibling);
-        _$insert(_el$46, _$createComponent(Show, {
+        var _el$53 = _$getNextElement(_tmpl$28),
+          _el$55 = _el$53.firstChild,
+          [_el$56, _co$9] = _$getNextMarker(_el$55.nextSibling),
+          _el$57 = _el$56.nextSibling,
+          [_el$58, _co$0] = _$getNextMarker(_el$57.nextSibling);
+        _$insert(_el$53, _$createComponent(Show, {
           get when() {
             return reactions();
           },
@@ -940,14 +1059,14 @@ export function MessageRow(props) {
               return props.onAddReaction;
             }
           })
-        }), _el$49, _co$6);
-        _$insert(_el$46, _$createComponent(Show, {
+        }), _el$56, _co$9);
+        _$insert(_el$53, _$createComponent(Show, {
           get when() {
             return hasLine();
           },
           get children() {
-            var _el$47 = _$getNextElement(_tmpl$24);
-            _$insert(_el$47, _$createComponent(Show, {
+            var _el$54 = _$getNextElement(_tmpl$27);
+            _$insert(_el$54, _$createComponent(Show, {
               get when() {
                 return props.progress;
               },
@@ -958,9 +1077,9 @@ export function MessageRow(props) {
                   },
                   get children() {
                     return [_$getNextElement(_tmpl$40), (() => {
-                      var _el$115 = _$getNextElement(_tmpl$);
-                      _$insert(_el$115, () => chatMessages().sending);
-                      return _el$115;
+                      var _el$121 = _$getNextElement(_tmpl$);
+                      _$insert(_el$121, () => chatMessages().sending);
+                      return _el$121;
                     })()];
                   }
                 }), _$createComponent(Show, {
@@ -969,9 +1088,9 @@ export function MessageRow(props) {
                   },
                   get children() {
                     return [_$getNextElement(_tmpl$41), (() => {
-                      var _el$117 = _$getNextElement(_tmpl$);
-                      _$insert(_el$117, () => chatMessages().messageNotSent);
-                      return _el$117;
+                      var _el$123 = _$getNextElement(_tmpl$);
+                      _$insert(_el$123, () => chatMessages().messageNotSent);
+                      return _el$123;
                     })(), _$createComponent(Show, {
                       get when() {
                         return props.onRetry;
@@ -984,6 +1103,18 @@ export function MessageRow(props) {
                           return chatMessages().messageRetry;
                         }
                       })
+                    }), _$createComponent(Show, {
+                      get when() {
+                        return props.onDiscard;
+                      },
+                      children: discard => _$createComponent(Button, {
+                        variant: "text",
+                        size: "xs",
+                        onClick: () => discard()(),
+                        get children() {
+                          return chatMessages().messageDiscard;
+                        }
+                      })
                     })];
                   }
                 }), _$createComponent(Show, {
@@ -1002,26 +1133,26 @@ export function MessageRow(props) {
                           },
                           get children() {
                             return [_$getNextElement(_tmpl$42), (() => {
-                              var _el$119 = _$getNextElement(_tmpl$43);
-                              _$insert(_el$119, () => chatMessages().messageSent);
-                              return _el$119;
+                              var _el$125 = _$getNextElement(_tmpl$43);
+                              _$insert(_el$125, () => chatMessages().messageSent);
+                              return _el$125;
                             })()];
                           }
                         });
                       },
                       children: receipt => [_$getNextElement(_tmpl$44), (() => {
-                        var _el$121 = _$getNextElement(_tmpl$45);
-                        _$insert(_el$121, receipt);
-                        return _el$121;
+                        var _el$127 = _$getNextElement(_tmpl$45);
+                        _$insert(_el$127, receipt);
+                        return _el$127;
                       })()]
                     });
                   }
                 })];
               },
               children: progress => [_$getNextElement(_tmpl$46), (() => {
-                var _el$123 = _$getNextElement(_tmpl$47);
-                _$insert(_el$123, () => progress().status);
-                return _el$123;
+                var _el$129 = _$getNextElement(_tmpl$47);
+                _$insert(_el$129, () => progress().status);
+                return _el$129;
               })(), _$createComponent(Show, {
                 get when() {
                   return progress().onStop;
@@ -1036,53 +1167,23 @@ export function MessageRow(props) {
                 })
               })]
             }));
-            return _el$47;
+            return _el$54;
           }
-        }), _el$51, _co$7);
-        return _el$46;
+        }), _el$58, _co$0);
+        return _el$53;
       }
-    }), _el$73, _co$16);
-    _$insert(_el$23, _$createComponent(Show, {
-      get when() {
-        return (props.actions?.length ?? 0) > 0;
-      },
-      get children() {
-        var _el$74 = _$getNextElement(_tmpl$26);
-        _$insert(_el$74, _$createComponent(For, {
-          get each() {
-            return props.actions;
-          },
-          children: action => _$createComponent(IconButton, {
-            get label() {
-              return action.label;
-            },
-            size: "sm",
-            get disabled() {
-              return action.disabled;
-            },
-            onClick: () => action.onSelect(),
-            get children() {
-              var _el$124 = _$getNextElement(_tmpl$48);
-              _$effect(() => _$className(_el$124, action.icon));
-              return _el$124;
-            }
-          })
-        }));
-        _$effect(() => _$setAttribute(_el$74, "aria-label", chatMessages().messageActions));
-        return _el$74;
-      }
-    }), _el$78, _co$18);
+    }), _el$84, _co$21);
     _$effect(_p$ => {
       var _v$21 = props.class ? `k2b-message-row ${props.class}` : "k2b-message-row",
         _v$22 = props.own ? "" : undefined,
         _v$23 = groupStart() ? "" : undefined,
         _v$24 = props.status,
         _v$25 = media().length > 0 ? "" : undefined;
-      _v$21 !== _p$.e && _$className(_el$23, _p$.e = _v$21);
-      _v$22 !== _p$.t && _$setAttribute(_el$23, "data-own", _p$.t = _v$22);
-      _v$23 !== _p$.a && _$setAttribute(_el$23, "data-group-start", _p$.a = _v$23);
-      _v$24 !== _p$.o && _$setAttribute(_el$23, "data-status", _p$.o = _v$24);
-      _v$25 !== _p$.i && _$setAttribute(_el$23, "data-media", _p$.i = _v$25);
+      _v$21 !== _p$.e && _$className(_el$24, _p$.e = _v$21);
+      _v$22 !== _p$.t && _$setAttribute(_el$24, "data-own", _p$.t = _v$22);
+      _v$23 !== _p$.a && _$setAttribute(_el$24, "data-group-start", _p$.a = _v$23);
+      _v$24 !== _p$.o && _$setAttribute(_el$24, "data-status", _p$.o = _v$24);
+      _v$25 !== _p$.i && _$setAttribute(_el$24, "data-media", _p$.i = _v$25);
       return _p$;
     }, {
       e: undefined,
@@ -1091,43 +1192,206 @@ export function MessageRow(props) {
       o: undefined,
       i: undefined
     });
-    return _el$23;
+    _$runHydrationEvents();
+    return _el$24;
+  })();
+  return _$createComponent(Show, {
+    get when() {
+      return hasMenu();
+    },
+    fallback: row,
+    get children() {
+      return _$createComponent(GestureMenu, {
+        get items() {
+          return gestureItems();
+        },
+        get label() {
+          return chatMessages().messageMenu({
+            author: props.author.name,
+            time: props.time
+          });
+        },
+        tabIndex: -1,
+        children: row
+      });
+    }
+  });
+}
+
+/** Where a row belongs, such as its thread; a control when it opens that place. */
+function OriginChip(props) {
+  return _$createComponent(Show, {
+    get when() {
+      return props.origin.onSelect;
+    },
+    get fallback() {
+      return (() => {
+        var _el$130 = _$getNextElement(_tmpl$48),
+          _el$131 = _el$130.firstChild,
+          [_el$132, _co$30] = _$getNextMarker(_el$131.nextSibling),
+          _el$133 = _el$132.nextSibling,
+          [_el$134, _co$31] = _$getNextMarker(_el$133.nextSibling);
+        _$insert(_el$130, _$createComponent(Show, {
+          get when() {
+            return props.origin.icon;
+          },
+          children: icon => (() => {
+            var _el$135 = _$getNextElement(_tmpl$49);
+            _$effect(() => _$className(_el$135, icon()));
+            return _el$135;
+          })()
+        }), _el$132, _co$30);
+        _$insert(_el$130, () => props.origin.label, _el$134, _co$31);
+        return _el$130;
+      })();
+    },
+    children: select => (() => {
+      var _el$136 = _$getNextElement(_tmpl$50),
+        _el$137 = _el$136.firstChild,
+        [_el$138, _co$32] = _$getNextMarker(_el$137.nextSibling),
+        _el$139 = _el$138.nextSibling,
+        [_el$140, _co$33] = _$getNextMarker(_el$139.nextSibling);
+      _el$136.$$click = () => select()();
+      _$insert(_el$136, _$createComponent(Show, {
+        get when() {
+          return props.origin.icon;
+        },
+        children: icon => (() => {
+          var _el$141 = _$getNextElement(_tmpl$49);
+          _$effect(() => _$className(_el$141, icon()));
+          return _el$141;
+        })()
+      }), _el$138, _co$32);
+      _$insert(_el$136, () => props.origin.label, _el$140, _co$33);
+      _$effect(() => _$setAttribute(_el$136, "aria-label", props.origin.selectLabel));
+      _$runHydrationEvents();
+      return _el$136;
+    })()
+  });
+}
+
+/**
+ * A quiet line for a change to something the conversation is about, such as a task's new status: no bubble, aligned
+ * with the messages' text, with its time at the end. It is no message: it never counts as unread.
+ */
+export function MessageEventRow(props) {
+  return (() => {
+    var _el$142 = _$getNextElement(_tmpl$52),
+      _el$143 = _el$142.firstChild,
+      _el$144 = _el$143.nextSibling,
+      _el$146 = _el$144.nextSibling,
+      [_el$147, _co$34] = _$getNextMarker(_el$146.nextSibling),
+      _el$148 = _el$147.nextSibling,
+      [_el$149, _co$35] = _$getNextMarker(_el$148.nextSibling);
+    _$insert(_el$144, () => props.children);
+    _$insert(_el$142, _$createComponent(Show, {
+      get when() {
+        return props.origin;
+      },
+      children: origin => _$createComponent(OriginChip, {
+        get origin() {
+          return origin();
+        }
+      })
+    }), _el$147, _co$34);
+    _$insert(_el$142, _$createComponent(Show, {
+      get when() {
+        return props.time;
+      },
+      get children() {
+        var _el$145 = _$getNextElement(_tmpl$51);
+        _$insert(_el$145, () => props.time);
+        _$effect(() => _$setAttribute(_el$145, "datetime", dateTimeOf(props.dateTime)));
+        return _el$145;
+      }
+    }), _el$149, _co$35);
+    _$effect(_p$ => {
+      var _v$26 = props.class ? `k2b-message-event-row ${props.class}` : "k2b-message-event-row",
+        _v$27 = props.icon ?? "ti ti-point";
+      _v$26 !== _p$.e && _$className(_el$142, _p$.e = _v$26);
+      _v$27 !== _p$.t && _$className(_el$143, _p$.t = _v$27);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$142;
+  })();
+}
+
+/** Several event lines in a row as one line that opens them, such as "4 changes to Invitation and Light test". */
+export function MessageEventGroup(props) {
+  return (() => {
+    var _el$150 = _$getNextElement(_tmpl$53),
+      _el$151 = _el$150.firstChild,
+      _el$152 = _el$151.nextSibling,
+      _el$155 = _el$152.nextSibling,
+      [_el$156, _co$36] = _$getNextMarker(_el$155.nextSibling),
+      _el$154 = _el$156.nextSibling;
+    _el$150.$$click = () => props.onToggle();
+    _$insert(_el$152, () => props.label);
+    _$insert(_el$150, _$createComponent(Show, {
+      get when() {
+        return props.time;
+      },
+      get children() {
+        var _el$153 = _$getNextElement(_tmpl$51);
+        _$insert(_el$153, () => props.time);
+        _$effect(() => _$setAttribute(_el$153, "datetime", dateTimeOf(props.dateTime)));
+        return _el$153;
+      }
+    }), _el$156, _co$36);
+    _$effect(_p$ => {
+      var _v$28 = props.class ? `k2b-message-event-row k2b-message-event-group ${props.class}` : "k2b-message-event-row k2b-message-event-group",
+        _v$29 = props.expanded,
+        _v$30 = props.expanded ? "ti ti-chevron-up" : "ti ti-chevron-down";
+      _v$28 !== _p$.e && _$className(_el$150, _p$.e = _v$28);
+      _v$29 !== _p$.t && _$setAttribute(_el$150, "aria-expanded", _p$.t = _v$29);
+      _v$30 !== _p$.a && _$className(_el$154, _p$.a = _v$30);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    _$runHydrationEvents();
+    return _el$150;
   })();
 }
 
 /** A quiet, centered line for something that happened in the conversation, such as a person joining. */
 export function MessageSystemRow(props) {
   return (() => {
-    var _el$125 = _$getNextElement(_tmpl$50),
-      _el$128 = _el$125.firstChild,
-      [_el$129, _co$26] = _$getNextMarker(_el$128.nextSibling),
-      _el$126 = _el$129.nextSibling,
-      _el$130 = _el$126.nextSibling,
-      [_el$131, _co$27] = _$getNextMarker(_el$130.nextSibling);
-    _$insert(_el$125, _$createComponent(Show, {
+    var _el$157 = _$getNextElement(_tmpl$54),
+      _el$160 = _el$157.firstChild,
+      [_el$161, _co$37] = _$getNextMarker(_el$160.nextSibling),
+      _el$158 = _el$161.nextSibling,
+      _el$162 = _el$158.nextSibling,
+      [_el$163, _co$38] = _$getNextMarker(_el$162.nextSibling);
+    _$insert(_el$157, _$createComponent(Show, {
       get when() {
         return props.icon;
       },
       children: icon => (() => {
-        var _el$132 = _$getNextElement(_tmpl$48);
-        _$effect(() => _$className(_el$132, icon()));
-        return _el$132;
+        var _el$164 = _$getNextElement(_tmpl$49);
+        _$effect(() => _$className(_el$164, icon()));
+        return _el$164;
       })()
-    }), _el$129, _co$26);
-    _$insert(_el$126, () => props.children);
-    _$insert(_el$125, _$createComponent(Show, {
+    }), _el$161, _co$37);
+    _$insert(_el$158, () => props.children);
+    _$insert(_el$157, _$createComponent(Show, {
       get when() {
         return props.time;
       },
       get children() {
-        var _el$127 = _$getNextElement(_tmpl$49);
-        _$insert(_el$127, () => props.time);
-        _$effect(() => _$setAttribute(_el$127, "datetime", dateTimeOf(props.dateTime)));
-        return _el$127;
+        var _el$159 = _$getNextElement(_tmpl$51);
+        _$insert(_el$159, () => props.time);
+        _$effect(() => _$setAttribute(_el$159, "datetime", dateTimeOf(props.dateTime)));
+        return _el$159;
       }
-    }), _el$131, _co$27);
-    _$effect(() => _$className(_el$125, props.class ? `k2b-message-system-row ${props.class}` : "k2b-message-system-row"));
-    return _el$125;
+    }), _el$163, _co$38);
+    _$effect(() => _$className(_el$157, props.class ? `k2b-message-system-row ${props.class}` : "k2b-message-system-row"));
+    return _el$157;
   })();
 }
 _$delegateEvents(["click", "focusin"]);