@k2b/ui 0.32.0 → 0.34.0

package/dist/ssr/content/MessageRow.js

@@ -8,35 +8,35 @@ var _tmpl$ = ["<span", " style=\"", "\">", "</span>"],
   _tmpl$2 = ["<span", " style=\"", "\" role=\"img\"", ">", "</span>"],
   _tmpl$3 = ["<a", " style=\"", "\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "</a>"],
   _tmpl$4 = ["<button type=\"button\"", " style=\"", "\"", ">", "</button>"],
-  _tmpl$5 = ["<span class=\"k2b-message-row__name\">", "</span>"],
-  _tmpl$6 = ["<span class=\"k2b-message-row__badge\">", "</span>"],
-  _tmpl$7 = ["<time class=\"k2b-message-row__time\"", ">", "</time>"],
-  _tmpl$8 = "<i class=\"ti ti-arrow-back-up\" aria-hidden=\"true\"></i>",
-  _tmpl$9 = ["<span class=\"k2b-message-row__quote-text\"><span class=\"k2b-sr-only\">", " </span><span class=\"k2b-message-row__quote-author\">", "</span> ", "</span>"],
-  _tmpl$0 = ["<img", " alt", " loading=\"lazy\" decoding=\"async\">"],
-  _tmpl$1 = "<span class=\"k2b-message-row__media-play\" aria-hidden=\"true\"><i class=\"ti ti-player-play\"></i></span>",
-  _tmpl$10 = ["<span class=\"k2b-message-row__media-duration\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$11 = ["<span class=\"k2b-message-row__media-more\" aria-hidden=\"true\">+", "</span>"],
-  _tmpl$12 = ["<span class=\"k2b-message-row__avatar\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$13 = ["<div class=\"k2b-message-row__gutter\">", "</div>"],
-  _tmpl$14 = ["<div class=\"k2b-message-row__meta\">", "</div>"],
-  _tmpl$15 = ["<div class=\"k2b-message-row__marker\"><i class=\"ti ti-arrow-forward-up\" aria-hidden=\"true\"></i><span>", "</span></div>"],
-  _tmpl$16 = ["<div", " class=\"k2b-content-markdown k2b-message-row__text\" data-heading-scale=\"compact\"", ">", "</div>"],
-  _tmpl$17 = ["<span class=\"k2b-message-row__edited\">", "</span>"],
-  _tmpl$18 = ["<div class=\"k2b-message-row__more-line\">", "", "</div>"],
-  _tmpl$19 = ["<div class=\"k2b-message-row__bubble\"", ">", "</div>"],
-  _tmpl$20 = ["<div class=\"k2b-message-row__marker\"><i class=\"ti ti-pencil\" aria-hidden=\"true\"></i><span class=\"k2b-message-row__edited\">", "</span></div>"],
-  _tmpl$21 = ["<div class=\"k2b-message-row__media\" role=\"group\"", " style=\"", "\">", "</div>"],
-  _tmpl$22 = ["<div class=\"k2b-message-row__files\">", "</div>"],
-  _tmpl$23 = ["<div class=\"k2b-message-row__slot\" data-gesture-ignore>", "</div>"],
-  _tmpl$24 = ["<div class=\"k2b-message-row__line\">", "</div>"],
-  _tmpl$25 = ["<div class=\"k2b-message-row__footer\">", "", "</div>"],
-  _tmpl$26 = ["<div class=\"k2b-message-row__actions\" role=\"group\"", ">", "</div>"],
-  _tmpl$27 = ["<div", ">", "<div class=\"k2b-message-row__body\">", "", "", "", "", "", "", "", "", "", "", "</div>", "</div>"],
-  _tmpl$28 = ["<span class=\"k2b-sr-only\">", ", ", ": </span>"],
-  _tmpl$29 = ["<div class=\"k2b-message-row__meta\"><span class=\"k2b-sr-only\">", ", </span><time class=\"k2b-message-row__time\"", ">", "</time></div>"],
-  _tmpl$30 = ["<div class=\"k2b-message-row__quote\">", "</div>"],
-  _tmpl$31 = ["<button type=\"button\" class=\"k2b-message-row__quote\">", "</button>"],
+  _tmpl$5 = "<i class=\"ti ti-dots\" aria-hidden=\"true\"></i>",
+  _tmpl$6 = ["<span class=\"k2b-message-row__name\">", "</span>"],
+  _tmpl$7 = ["<span class=\"k2b-message-row__badge\">", "</span>"],
+  _tmpl$8 = ["<time class=\"k2b-message-row__time\"", ">", "</time>"],
+  _tmpl$9 = ["<span class=\"k2b-message-row__quote-author\"><span class=\"k2b-sr-only\">", " </span>", "</span>"],
+  _tmpl$0 = ["<span class=\"k2b-message-row__quote-text\">", "</span>"],
+  _tmpl$1 = ["<div class=\"k2b-message-row__quote\">", "</div>"],
+  _tmpl$10 = ["<button type=\"button\" class=\"k2b-message-row__quote\">", "</button>"],
+  _tmpl$11 = ["<img", " alt", " loading=\"lazy\" decoding=\"async\">"],
+  _tmpl$12 = "<span class=\"k2b-message-row__media-play\" aria-hidden=\"true\"><i class=\"ti ti-player-play\"></i></span>",
+  _tmpl$13 = ["<span class=\"k2b-message-row__media-duration\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$14 = ["<span class=\"k2b-message-row__media-more\" aria-hidden=\"true\">+", "</span>"],
+  _tmpl$15 = ["<span class=\"k2b-message-row__avatar\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$16 = ["<div class=\"k2b-message-row__gutter\">", "</div>"],
+  _tmpl$17 = ["<div class=\"k2b-message-row__meta\">", "</div>"],
+  _tmpl$18 = ["<div class=\"k2b-message-row__marker\"><i class=\"ti ti-arrow-forward-up\" aria-hidden=\"true\"></i><span>", "</span></div>"],
+  _tmpl$19 = ["<div", " class=\"k2b-content-markdown k2b-message-row__text\" data-heading-scale=\"compact\"", ">", "</div>"],
+  _tmpl$20 = ["<span class=\"k2b-message-row__edited\">", "</span>"],
+  _tmpl$21 = ["<div class=\"k2b-message-row__more-line\">", "", "</div>"],
+  _tmpl$22 = ["<div class=\"k2b-message-row__bubble\"", ">", "", "", "</div>"],
+  _tmpl$23 = ["<div class=\"k2b-message-row__marker\"><i class=\"ti ti-pencil\" aria-hidden=\"true\"></i><span class=\"k2b-message-row__edited\">", "</span></div>"],
+  _tmpl$24 = ["<div class=\"k2b-message-row__media\" role=\"group\"", " style=\"", "\">", "</div>"],
+  _tmpl$25 = ["<div class=\"k2b-message-row__files\">", "</div>"],
+  _tmpl$26 = ["<div class=\"k2b-message-row__slot\" data-gesture-ignore>", "</div>"],
+  _tmpl$27 = ["<div class=\"k2b-message-row__line\">", "</div>"],
+  _tmpl$28 = ["<div class=\"k2b-message-row__footer\">", "", "</div>"],
+  _tmpl$29 = ["<div", ">", "<div class=\"k2b-message-row__body\">", "", "", "", "", "", "", "", "", "", "", "", "", "</div></div>"],
+  _tmpl$30 = ["<span class=\"k2b-sr-only\">", ", ", ": </span>"],
+  _tmpl$31 = ["<div class=\"k2b-message-row__meta\"><span class=\"k2b-sr-only\">", ", </span><time class=\"k2b-message-row__time\"", ">", "</time></div>"],
   _tmpl$32 = ["<span class=\"k2b-message-row__deleted\"><i class=\"ti ti-message-off\" aria-hidden=\"true\"></i>", "</span>"],
   _tmpl$33 = "<span class=\"k2b-message-row__writing\"><span class=\"k2b-chat-progress-dots\" aria-hidden=\"true\"><span></span><span></span><span></span></span></span>",
   _tmpl$34 = ["<span class=\"k2b-message-row__file-icon\" aria-hidden=\"true\"><i", "></i></span>"],
@@ -54,18 +54,27 @@ var _tmpl$ = ["<span", " style=\"", "\">", "</span>"],
   _tmpl$46 = ["<span class=\"k2b-message-row__receipt\">", "</span>"],
   _tmpl$47 = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
   _tmpl$48 = ["<span class=\"k2b-message-row__line-text\">", "</span>"],
-  _tmpl$49 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$50 = ["<time", ">", "</time>"],
-  _tmpl$51 = ["<div", ">", "<span>", "</span>", "</div>"];
+  _tmpl$49 = ["<span class=\"k2b-message-row__origin\">", "", "</span>"],
+  _tmpl$50 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$51 = ["<button type=\"button\" class=\"k2b-message-row__origin\"", ">", "", "</button>"],
+  _tmpl$52 = ["<time", ">", "</time>"],
+  _tmpl$53 = ["<div", "><i", " aria-hidden=\"true\"></i>", "", "", "</div>"],
+  _tmpl$54 = ["<span class=\"k2b-message-event-row__text\">", "</span>"],
+  _tmpl$55 = ["<a class=\"k2b-message-event-row__text k2b-message-event-row__link\"", ">", "</a>"],
+  _tmpl$56 = ["<button type=\"button\"", "><i class=\"ti ti-history\" aria-hidden=\"true\"></i><span class=\"k2b-message-event-row__text\">", "</span>", "<i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$57 = ["<div", ">", "<span>", "</span>", "</div>"];
 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";
 
@@ -82,6 +91,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. */
@@ -99,6 +110,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();
 
 /**
@@ -323,15 +336,91 @@ export function MessageRow(props) {
     const fade = text.getBoundingClientRect().bottom - FADE_LINES * Number.parseFloat(getComputedStyle(text).lineHeight);
     if (event.target.getBoundingClientRect().bottom > fade) setExpanded(true);
   };
-  const header = () => [_$ssr(_tmpl$5, _$escape(props.author.name)), _$createComponent(Show, {
+
+  // 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 _$ssr(_tmpl$5);
+        }
+      });
+    }
+  });
+  const header = () => [_$ssr(_tmpl$6, _$escape(props.author.name)), _$createComponent(Show, {
     get when() {
       return props.badge;
     },
     get children() {
-      return _$ssr(_tmpl$6, _$escape(props.badge));
+      return _$ssr(_tmpl$7, _$escape(props.badge));
     }
-  }), _$ssr(_tmpl$7, _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time))];
-  const quote = value => [_$ssr(_tmpl$8), _$ssr(_tmpl$9, _$escape(chatMessages().messageReplyTo), _$escape(value.author), _$escape(value.text))];
+  }), _$ssr(_tmpl$8, _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time))];
+  const quote = value => [_$ssr(_tmpl$9, _$escape(chatMessages().messageReplyTo), _$escape(value.author)), _$ssr(_tmpl$0, _$escape(value.text))];
+
+  /** 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 _$ssr(_tmpl$1, _$escape(quote(value())));
+      },
+      children: select => _$ssr(_tmpl$10, _$escape(quote(value())))
+    })
+  });
 
   /** 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({
@@ -356,17 +445,17 @@ export function MessageRow(props) {
         return item.href;
       },
       get children() {
-        return [_$ssr(_tmpl$0, _$ssrAttribute("src", _$escape(attachmentUrl(item.src, true), true), false), _$ssrAttribute("width", item.width > 0 ? _$escape(item.width, true) : _$escape(undefined, true), false) + _$ssrAttribute("height", item.height > 0 ? _$escape(item.height, true) : _$escape(undefined, true), false)), _$createComponent(Show, {
+        return [_$ssr(_tmpl$11, _$ssrAttribute("src", _$escape(attachmentUrl(item.src, true), true), false), _$ssrAttribute("width", item.width > 0 ? _$escape(item.width, true) : _$escape(undefined, true), false) + _$ssrAttribute("height", item.height > 0 ? _$escape(item.height, true) : _$escape(undefined, true), false)), _$createComponent(Show, {
           get when() {
             return item.kind === "video";
           },
           get children() {
-            return [_$ssr(_tmpl$1), _$createComponent(Show, {
+            return [_$ssr(_tmpl$12), _$createComponent(Show, {
               get when() {
                 return item.duration;
               },
               get children() {
-                return _$ssr(_tmpl$10, _$escape(item.duration));
+                return _$ssr(_tmpl$13, _$escape(item.duration));
               }
             })];
           }
@@ -375,23 +464,24 @@ export function MessageRow(props) {
             return more() > 0;
           },
           get children() {
-            return _$ssr(_tmpl$11, _$escape(more()));
+            return _$ssr(_tmpl$14, _$escape(more()));
           }
         })];
       }
     });
   };
-  return _$ssr(_tmpl$27, _$ssrAttribute("class", props.class ? `k2b-message-row ${_$escape(props.class, true)}` : "k2b-message-row", false) + _$ssrAttribute("data-own", props.own ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-group-start", groupStart() ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-status", _$escape(props.status, true), false) + _$ssrAttribute("data-media", media().length > 0 ? "" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  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 "…".
+  _$ssr(_tmpl$29, _$ssrAttribute("class", props.class ? `k2b-message-row ${_$escape(props.class, true)}` : "k2b-message-row", false) + _$ssrAttribute("data-own", props.own ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-group-start", groupStart() ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-status", _$escape(props.status, true), false) + _$ssrAttribute("data-media", media().length > 0 ? "" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return !props.own;
     },
     get children() {
-      return _$ssr(_tmpl$13, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$16, _$escape(_$createComponent(Show, {
         get when() {
           return groupStart();
         },
         get children() {
-          return _$ssr(_tmpl$12, _$escape(_$createComponent(Avatar, {
+          return _$ssr(_tmpl$15, _$escape(_$createComponent(Avatar, {
             get name() {
               return props.author.name;
             },
@@ -411,7 +501,7 @@ export function MessageRow(props) {
       return groupStart();
     },
     get fallback() {
-      return _$ssr(_tmpl$28, _$escape(props.author.name), _$escape(props.time));
+      return _$ssr(_tmpl$30, _$escape(props.author.name), _$escape(props.time));
     },
     get children() {
       return _$createComponent(Show, {
@@ -419,10 +509,10 @@ export function MessageRow(props) {
           return !props.own;
         },
         get fallback() {
-          return _$ssr(_tmpl$29, _$escape(props.author.name), _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time));
+          return _$ssr(_tmpl$31, _$escape(props.author.name), _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time));
         },
         get children() {
-          return _$ssr(_tmpl$14, _$escape(header()));
+          return _$ssr(_tmpl$17, _$escape(header()));
         }
       });
     }
@@ -431,27 +521,21 @@ export function MessageRow(props) {
       return _$memo(() => !!content())() && props.forwarded;
     },
     get children() {
-      return _$ssr(_tmpl$15, _$escape(chatMessages().messageForwarded));
+      return _$ssr(_tmpl$18, _$escape(chatMessages().messageForwarded));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
-      return _$memo(() => !!content())() && props.quote;
+      return !hasBubble();
     },
-    children: value => _$createComponent(Show, {
-      get when() {
-        return value().onSelect;
-      },
-      get fallback() {
-        return _$ssr(_tmpl$30, _$escape(quote(value())));
-      },
-      children: select => _$ssr(_tmpl$31, _$escape(quote(value())))
-    })
+    get children() {
+      return quoteBlock();
+    }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return hasBubble();
     },
     get children() {
-      return _$ssr(_tmpl$19, _$ssrAttribute("data-deleted", props.deleted ? "" : _$escape(undefined, true), false) + _$ssrAttribute("aria-busy", props.progress && !props.deleted ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$22, _$ssrAttribute("data-deleted", props.deleted ? "" : _$escape(undefined, true), false) + _$ssrAttribute("aria-busy", props.progress && !props.deleted ? "true" : _$escape(undefined, true), false), _$escape(quoteBlock()), _$escape(_$createComponent(Show, {
         get when() {
           return !props.deleted;
         },
@@ -467,12 +551,12 @@ export function MessageRow(props) {
               return _$ssr(_tmpl$33);
             },
             get children() {
-              return [_$ssr(_tmpl$16, _$ssrAttribute("id", _$escape(textId, true), false), _$ssrAttribute("data-collapsed", collapsed() ? "" : _$escape(undefined, true), false), rendered().html), _$createComponent(Show, {
+              return [_$ssr(_tmpl$19, _$ssrAttribute("id", _$escape(textId, true), false), _$ssrAttribute("data-collapsed", collapsed() ? "" : _$escape(undefined, true), false), rendered().html), _$createComponent(Show, {
                 get when() {
                   return collapsible();
                 },
                 get children() {
-                  return _$ssr(_tmpl$18, _$escape(_$createComponent(Button, {
+                  return _$ssr(_tmpl$21, _$escape(_$createComponent(Button, {
                     variant: "text",
                     size: "xs",
                     "class": "k2b-message-row__more",
@@ -489,7 +573,7 @@ export function MessageRow(props) {
                       return props.edited;
                     },
                     get children() {
-                      return _$ssr(_tmpl$17, _$escape(chatMessages().messageEdited));
+                      return _$ssr(_tmpl$20, _$escape(chatMessages().messageEdited));
                     }
                   })));
                 }
@@ -497,21 +581,35 @@ export function MessageRow(props) {
             }
           });
         }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return hasMenu();
+        },
+        get children() {
+          return more();
+        }
       })));
     }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!hasMenu())() && !hasBubble();
+    },
+    get children() {
+      return more();
+    }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return _$memo(() => !!(content() && props.edited))() && !hasBubble();
     },
     get children() {
-      return _$ssr(_tmpl$20, _$escape(chatMessages().messageEdited));
+      return _$ssr(_tmpl$23, _$escape(chatMessages().messageEdited));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return media().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$21, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false) + _$ssrAttribute("data-count", _$escape(Math.min(media().length, MEDIA_SHOWN), true), false), _$ssrStyle(media().length === 1 ? {
+      return _$ssr(_tmpl$24, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false) + _$ssrAttribute("data-count", _$escape(Math.min(media().length, MEDIA_SHOWN), true), false), _$ssrStyle(media().length === 1 ? {
         width: mediaWidth(media()[0])
       } : undefined), _$escape(_$createComponent(For, {
         get each() {
@@ -525,7 +623,7 @@ export function MessageRow(props) {
       return files().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$22, _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$25, _$escape(_$createComponent(For, {
         get each() {
           return files();
         },
@@ -555,14 +653,14 @@ export function MessageRow(props) {
       return _$memo(() => !!content())() && props.linkPreview;
     },
     get children() {
-      return _$ssr(_tmpl$23, _$escape(props.linkPreview));
+      return _$ssr(_tmpl$26, _$escape(props.linkPreview));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return _$memo(() => !!content())() && props.card;
     },
     get children() {
-      return _$ssr(_tmpl$23, _$escape(props.card));
+      return _$ssr(_tmpl$26, _$escape(props.card));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -601,12 +699,21 @@ export function MessageRow(props) {
         time: time()
       })))
     })))
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.origin;
+    },
+    children: origin => _$createComponent(OriginChip, {
+      get origin() {
+        return origin();
+      }
+    })
   })), _$escape(_$createComponent(Show, {
     get when() {
       return hasFooter();
     },
     get children() {
-      return _$ssr(_tmpl$25, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$28, _$escape(_$createComponent(Show, {
         get when() {
           return reactions();
         },
@@ -626,7 +733,7 @@ export function MessageRow(props) {
           return hasLine();
         },
         get children() {
-          return _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
+          return _$ssr(_tmpl$27, _$escape(_$createComponent(Show, {
             get when() {
               return props.progress;
             },
@@ -655,6 +762,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, {
@@ -698,46 +817,110 @@ export function MessageRow(props) {
         }
       })));
     }
-  })), _$escape(_$createComponent(Show, {
+  })));
+  return _$createComponent(Show, {
     get when() {
-      return (props.actions?.length ?? 0) > 0;
+      return hasMenu();
     },
+    fallback: row,
     get children() {
-      return _$ssr(_tmpl$26, _$ssrAttribute("aria-label", _$escape(chatMessages().messageActions, true), false), _$escape(_$createComponent(For, {
-        get each() {
-          return props.actions;
+      return _$createComponent(GestureMenu, {
+        get items() {
+          return gestureItems();
         },
-        children: action => _$createComponent(IconButton, {
-          get label() {
-            return action.label;
-          },
-          size: "sm",
-          get disabled() {
-            return action.disabled;
-          },
-          onClick: () => action.onSelect(),
-          get children() {
-            return _$ssr(_tmpl$49, _$ssrAttribute("class", _$escape(action.icon, true), false));
-          }
-        })
-      })));
+        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 _$ssr(_tmpl$49, _$escape(_$createComponent(Show, {
+        get when() {
+          return props.origin.icon;
+        },
+        children: icon => _$ssr(_tmpl$50, _$ssrAttribute("class", _$escape(icon(), true), false))
+      })), _$escape(props.origin.label));
+    },
+    children: select => _$ssr(_tmpl$51, _$ssrAttribute("aria-label", _$escape(props.origin.selectLabel, true), false), _$escape(_$createComponent(Show, {
+      get when() {
+        return props.origin.icon;
+      },
+      children: icon => _$ssr(_tmpl$50, _$ssrAttribute("class", _$escape(icon(), true), false))
+    })), _$escape(props.origin.label))
+  });
+}
+
+/**
+ * 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 _$ssr(_tmpl$53, _$ssrAttribute("class", props.class ? `k2b-message-event-row ${_$escape(props.class, true)}` : "k2b-message-event-row", false), _$ssrAttribute("class", _$escape(props.icon ?? "ti ti-point", true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.href;
+    },
+    get fallback() {
+      return _$ssr(_tmpl$54, _$escape(props.children));
+    },
+    children: href => _$ssr(_tmpl$55, _$ssrAttribute("href", _$escape(href(), true), false), _$escape(props.children))
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.origin;
+    },
+    children: origin => _$createComponent(OriginChip, {
+      get origin() {
+        return origin();
+      }
+    })
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.time;
+    },
+    get children() {
+      return _$ssr(_tmpl$52, _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time));
     }
   })));
 }
 
+/** 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 _$ssr(_tmpl$56, _$ssrAttribute("class", props.class ? `k2b-message-event-row k2b-message-event-group ${_$escape(props.class, true)}` : "k2b-message-event-row k2b-message-event-group", false) + _$ssrAttribute("aria-expanded", _$escape(props.expanded, true), false), _$escape(props.label), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.time;
+    },
+    get children() {
+      return _$ssr(_tmpl$52, _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time));
+    }
+  })), _$ssrAttribute("class", props.expanded ? "ti ti-chevron-up" : "ti ti-chevron-down", false));
+}
+
 /** A quiet, centered line for something that happened in the conversation, such as a person joining. */
 export function MessageSystemRow(props) {
-  return _$ssr(_tmpl$51, _$ssrAttribute("class", props.class ? `k2b-message-system-row ${_$escape(props.class, true)}` : "k2b-message-system-row", false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$57, _$ssrAttribute("class", props.class ? `k2b-message-system-row ${_$escape(props.class, true)}` : "k2b-message-system-row", false), _$escape(_$createComponent(Show, {
     get when() {
       return props.icon;
     },
-    children: icon => _$ssr(_tmpl$49, _$ssrAttribute("class", _$escape(icon(), true), false))
+    children: icon => _$ssr(_tmpl$50, _$ssrAttribute("class", _$escape(icon(), true), false))
   })), _$escape(props.children), _$escape(_$createComponent(Show, {
     get when() {
       return props.time;
     },
     get children() {
-      return _$ssr(_tmpl$50, _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time));
+      return _$ssr(_tmpl$52, _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time));
     }
   })));
 }