@k2b/ui 0.27.0 → 0.28.0

package/dist/browser/content/MessageRow.js

@@ -21,53 +21,49 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span>`),
   _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(`<span class=k2b-message-row__reaction role=img><span aria-hidden=true></span><span aria-hidden=true>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<button type=button class=k2b-message-row__reaction><span aria-hidden=true></span><span aria-hidden=true>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<img alt loading=lazy decoding=async>`, true, false, false),
-  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-message-row__media-play aria-hidden=true><i class="ti ti-player-play">`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-message-row__media-duration aria-hidden=true>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-message-row__media-more aria-hidden=true>+<!$><!/>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-message-row__avatar aria-hidden=true>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-message-row__gutter>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-message-row__meta>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-message-row__marker><i class="ti ti-arrow-forward-up"aria-hidden=true></i><span>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class="k2b-content-markdown k2b-message-row__text"data-heading-scale=compact>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-message-row__edited>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-message-row__more-line><!$><!/><!$><!/>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-message-row__bubble>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-message-row__marker><i class="ti ti-pencil"aria-hidden=true></i><span class=k2b-message-row__edited>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-message-row__media role=group>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-message-row__files>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-message-row__slot data-gesture-ignore>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-message-row__line>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-message-row__footer><!$><!/><!$><!/>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-message-row__actions role=group>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<div><!$><!/><div class=k2b-message-row__body><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
-  _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(`<div class=k2b-message-row__quote>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-message-row__quote>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<span class=k2b-message-row__deleted><i class="ti ti-message-off"aria-hidden=true></i><!$><!/>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<span class=k2b-message-row__writing><span class=k2b-chat-progress-dots aria-hidden=true><span></span><span></span><span>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<span class=k2b-message-row__file-icon aria-hidden=true><i>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<span class=k2b-message-row__file-detail>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<span class=k2b-message-row__file-copy><span class=k2b-message-row__file-name></span><!$><!/>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<span class=k2b-message-row__thread-people aria-hidden=true>`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<button type=button class=k2b-message-row__thread><!$><!/><span class=k2b-message-row__thread-count></span><!$><!/>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<time class=k2b-message-row__thread-time>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-message-row__reactions role=group><!$><!/><!$><!/>`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<i class="ti ti-mood-plus"aria-hidden=true>`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<i class="ti ti-clock"aria-hidden=true>`),
-  _tmpl$45 = /*#__PURE__*/_$template(`<i class="ti ti-alert-circle"aria-hidden=true>`),
-  _tmpl$46 = /*#__PURE__*/_$template(`<i class="ti ti-check"aria-hidden=true>`),
-  _tmpl$47 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`),
-  _tmpl$48 = /*#__PURE__*/_$template(`<i class="ti ti-checks"aria-hidden=true>`),
-  _tmpl$49 = /*#__PURE__*/_$template(`<span class=k2b-message-row__receipt>`),
-  _tmpl$50 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
-  _tmpl$51 = /*#__PURE__*/_$template(`<span class=k2b-message-row__line-text>`),
-  _tmpl$52 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$53 = /*#__PURE__*/_$template(`<time>`),
-  _tmpl$54 = /*#__PURE__*/_$template(`<div><!$><!/><span></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$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>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<span class=k2b-message-row__file-detail>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<span class=k2b-message-row__file-copy><span class=k2b-message-row__file-name></span><!$><!/>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<span class=k2b-message-row__thread-people aria-hidden=true>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<button type=button class=k2b-message-row__thread><!$><!/><span class=k2b-message-row__thread-count></span><!$><!/>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<time class=k2b-message-row__thread-time>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<i class="ti ti-clock"aria-hidden=true>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<i class="ti ti-alert-circle"aria-hidden=true>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<i class="ti ti-check"aria-hidden=true>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<i class="ti ti-checks"aria-hidden=true>`),
+  _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><!$><!/>`);
 import { fileIcons } from "@k2b/stdlib";
 import { createMemo, createSignal, createUniqueId, For, onCleanup, Show } from "solid-js";
 import { Button, IconButton } from "../actions/Button";
@@ -76,9 +72,9 @@ import { useChatMessages } from "../chat/chat-messages";
 import { announce } from "../feedback/announce";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
-import { ScrollArea } from "../layout/ScrollArea";
 import { Avatar } from "../surfaces/Avatar";
 import { createSafeMarked, createSafeRenderer, escapeHtml } from "./MarkdownView";
+import { ReactionBar } from "./ReactionBar";
 
 /** Messages by the same author within this time continue a group. */
 const GROUP_WINDOW_MS = 5 * 60_000;
@@ -107,6 +103,9 @@ const MEDIA_SHOWN = 4;
 /** A single image keeps its own aspect ratio within these bounds; beyond them it is cropped to fit. */
 const MEDIA_RATIO_MIN = 0.5;
 const MEDIA_RATIO_MAX = 3;
+
+/** Reaction labels are read by screen readers and shown in the names hint. */
+
 const timestamp = value => value instanceof Date ? value.getTime() : new Date(value).getTime();
 
 /**
@@ -370,9 +369,6 @@ export function MessageRow(props) {
   const groupStart = () => props.groupStart ?? true;
   const hasLine = () => props.progress !== undefined || props.status !== undefined || props.receipt !== undefined;
   const reactions = () => props.deleted ? undefined : props.reactions;
-  // Chips follow their keys, so a chip keeps its element, and focus, when the caller passes new objects for it.
-  const reactionKeys = createMemo(() => reactions()?.map(reaction => reaction.key) ?? []);
-  const reactionByKey = createMemo(() => new Map(reactions()?.map(reaction => [reaction.key, reaction])));
   const hasFooter = () => hasLine() || reactions() !== undefined;
   const writing = () => props.progress !== undefined && !props.deleted && props.text.trim() === "";
   const hasBubble = () => props.deleted || writing() || props.text.trim() !== "";
@@ -443,70 +439,6 @@ export function MessageRow(props) {
   const mediaLabel = (item, more) => [item.alt, item.kind === "video" ? [chatMessages().messageVideo, item.duration].filter(Boolean).join(" ") : "", more > 0 ? chatMessages().messageMoreAttachments({
     count: more
   }) : ""].filter(Boolean).join(", ");
-
-  /** A toggle button, or with no `onToggleReaction` a labelled image that also says whether the reader reacted. */
-  const reactionChip = (key, reaction) => {
-    const label = own => chatMessages().messageReaction({
-      emoji: reaction().emoji,
-      count: reaction().count,
-      names: reaction().label,
-      own
-    });
-    return _$createComponent(Show, {
-      get when() {
-        return props.onToggleReaction;
-      },
-      get fallback() {
-        return (() => {
-          var _el$16 = _$getNextElement(_tmpl$0),
-            _el$17 = _el$16.firstChild,
-            _el$18 = _el$17.nextSibling;
-          _$insert(_el$17, () => reaction().emoji);
-          _$insert(_el$18, () => reaction().count);
-          _$effect(_p$ => {
-            var _v$11 = label(Boolean(reaction().own)),
-              _v$12 = reaction().label,
-              _v$13 = reaction().own ? "" : undefined;
-            _v$11 !== _p$.e && _$setAttribute(_el$16, "aria-label", _p$.e = _v$11);
-            _v$12 !== _p$.t && _$setAttribute(_el$16, "title", _p$.t = _v$12);
-            _v$13 !== _p$.a && _$setAttribute(_el$16, "data-own", _p$.a = _v$13);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined,
-            a: undefined
-          });
-          return _el$16;
-        })();
-      },
-      children: toggle => (() => {
-        var _el$19 = _$getNextElement(_tmpl$1),
-          _el$20 = _el$19.firstChild,
-          _el$21 = _el$20.nextSibling;
-        _el$19.$$click = () => toggle()(key);
-        _$insert(_el$20, () => reaction().emoji);
-        _$insert(_el$21, () => reaction().count);
-        _$effect(_p$ => {
-          var _v$14 = reaction().own ? "true" : "false",
-            _v$15 = label(false),
-            _v$16 = reaction().label,
-            _v$17 = reaction().own ? "" : undefined;
-          _v$14 !== _p$.e && _$setAttribute(_el$19, "aria-pressed", _p$.e = _v$14);
-          _v$15 !== _p$.t && _$setAttribute(_el$19, "aria-label", _p$.t = _v$15);
-          _v$16 !== _p$.a && _$setAttribute(_el$19, "title", _p$.a = _v$16);
-          _v$17 !== _p$.o && _$setAttribute(_el$19, "data-own", _p$.o = _v$17);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined,
-          o: undefined
-        });
-        _$runHydrationEvents();
-        return _el$19;
-      })()
-    });
-  };
   const mediaItem = (item, index) => {
     const more = () => index() === shownMedia().length - 1 ? hiddenMedia() : 0;
     return _$createComponent(AttachmentTarget, {
@@ -527,34 +459,34 @@ export function MessageRow(props) {
       },
       get children() {
         return [(() => {
-          var _el$22 = _$getNextElement(_tmpl$10);
+          var _el$16 = _$getNextElement(_tmpl$0);
           _$effect(_p$ => {
-            var _v$18 = attachmentUrl(item.src, true),
-              _v$19 = item.width > 0 ? item.width : undefined,
-              _v$20 = item.height > 0 ? item.height : undefined;
-            _v$18 !== _p$.e && _$setAttribute(_el$22, "src", _p$.e = _v$18);
-            _v$19 !== _p$.t && _$setAttribute(_el$22, "width", _p$.t = _v$19);
-            _v$20 !== _p$.a && _$setAttribute(_el$22, "height", _p$.a = _v$20);
+            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);
             return _p$;
           }, {
             e: undefined,
             t: undefined,
             a: undefined
           });
-          return _el$22;
+          return _el$16;
         })(), _$createComponent(Show, {
           get when() {
             return item.kind === "video";
           },
           get children() {
-            return [_$getNextElement(_tmpl$11), _$createComponent(Show, {
+            return [_$getNextElement(_tmpl$1), _$createComponent(Show, {
               get when() {
                 return item.duration;
               },
               get children() {
-                var _el$24 = _$getNextElement(_tmpl$12);
-                _$insert(_el$24, () => item.duration);
-                return _el$24;
+                var _el$18 = _$getNextElement(_tmpl$10);
+                _$insert(_el$18, () => item.duration);
+                return _el$18;
               }
             })];
           }
@@ -563,59 +495,59 @@ export function MessageRow(props) {
             return more() > 0;
           },
           get children() {
-            var _el$25 = _$getNextElement(_tmpl$13),
-              _el$26 = _el$25.firstChild,
-              _el$27 = _el$26.nextSibling,
-              [_el$28, _co$3] = _$getNextMarker(_el$27.nextSibling);
-            _$insert(_el$25, more, _el$28, _co$3);
-            return _el$25;
+            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;
           }
         })];
       }
     });
   };
   return (() => {
-    var _el$29 = _$getNextElement(_tmpl$29),
-      _el$81 = _el$29.firstChild,
-      [_el$82, _co$17] = _$getNextMarker(_el$81.nextSibling),
-      _el$32 = _el$82.nextSibling,
-      _el$58 = _el$32.firstChild,
-      [_el$59, _co$8] = _$getNextMarker(_el$58.nextSibling),
+    var _el$23 = _$getNextElement(_tmpl$27),
+      _el$75 = _el$23.firstChild,
+      [_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$9] = _$getNextMarker(_el$60.nextSibling),
+      [_el$61, _co$10] = _$getNextMarker(_el$60.nextSibling),
       _el$62 = _el$61.nextSibling,
-      [_el$63, _co$0] = _$getNextMarker(_el$62.nextSibling),
+      [_el$63, _co$11] = _$getNextMarker(_el$62.nextSibling),
       _el$64 = _el$63.nextSibling,
-      [_el$65, _co$1] = _$getNextMarker(_el$64.nextSibling),
+      [_el$65, _co$12] = _$getNextMarker(_el$64.nextSibling),
       _el$66 = _el$65.nextSibling,
-      [_el$67, _co$10] = _$getNextMarker(_el$66.nextSibling),
+      [_el$67, _co$13] = _$getNextMarker(_el$66.nextSibling),
       _el$68 = _el$67.nextSibling,
-      [_el$69, _co$11] = _$getNextMarker(_el$68.nextSibling),
+      [_el$69, _co$14] = _$getNextMarker(_el$68.nextSibling),
       _el$70 = _el$69.nextSibling,
-      [_el$71, _co$12] = _$getNextMarker(_el$70.nextSibling),
+      [_el$71, _co$15] = _$getNextMarker(_el$70.nextSibling),
       _el$72 = _el$71.nextSibling,
-      [_el$73, _co$13] = _$getNextMarker(_el$72.nextSibling),
-      _el$74 = _el$73.nextSibling,
-      [_el$75, _co$14] = _$getNextMarker(_el$74.nextSibling),
-      _el$76 = _el$75.nextSibling,
-      [_el$77, _co$15] = _$getNextMarker(_el$76.nextSibling),
-      _el$78 = _el$77.nextSibling,
-      [_el$79, _co$16] = _$getNextMarker(_el$78.nextSibling),
-      _el$83 = _el$32.nextSibling,
-      [_el$84, _co$18] = _$getNextMarker(_el$83.nextSibling);
-    _$insert(_el$29, _$createComponent(Show, {
+      [_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, {
       get when() {
         return !props.own;
       },
       get children() {
-        var _el$30 = _$getNextElement(_tmpl$15);
-        _$insert(_el$30, _$createComponent(Show, {
+        var _el$24 = _$getNextElement(_tmpl$13);
+        _$insert(_el$24, _$createComponent(Show, {
           get when() {
             return groupStart();
           },
           get children() {
-            var _el$31 = _$getNextElement(_tmpl$14);
-            _$insert(_el$31, _$createComponent(Avatar, {
+            var _el$25 = _$getNextElement(_tmpl$12);
+            _$insert(_el$25, _$createComponent(Avatar, {
               get name() {
                 return props.author.name;
               },
@@ -627,28 +559,28 @@ export function MessageRow(props) {
               },
               size: "sm"
             }));
-            return _el$31;
+            return _el$25;
           }
         }));
-        return _el$30;
+        return _el$24;
       }
-    }), _el$82, _co$17);
-    _$insert(_el$32, _$createComponent(Show, {
+    }), _el$76, _co$17);
+    _$insert(_el$26, _$createComponent(Show, {
       get when() {
         return groupStart();
       },
       get fallback() {
         return (() => {
-          var _el$85 = _$getNextElement(_tmpl$30),
-            _el$88 = _el$85.firstChild,
-            [_el$89, _co$19] = _$getNextMarker(_el$88.nextSibling),
-            _el$86 = _el$89.nextSibling,
-            _el$90 = _el$86.nextSibling,
-            [_el$91, _co$20] = _$getNextMarker(_el$90.nextSibling),
-            _el$87 = _el$91.nextSibling;
-          _$insert(_el$85, () => props.author.name, _el$89, _co$19);
-          _$insert(_el$85, () => props.time, _el$91, _co$20);
-          return _el$85;
+          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;
         })();
       },
       get children() {
@@ -658,39 +590,39 @@ export function MessageRow(props) {
           },
           get fallback() {
             return (() => {
-              var _el$92 = _$getNextElement(_tmpl$31),
-                _el$93 = _el$92.firstChild,
-                _el$95 = _el$93.firstChild,
-                [_el$96, _co$21] = _$getNextMarker(_el$95.nextSibling),
-                _el$94 = _el$96.nextSibling,
-                _el$97 = _el$93.nextSibling;
-              _$insert(_el$93, () => props.author.name, _el$96, _co$21);
-              _$insert(_el$97, () => props.time);
-              _$effect(() => _$setAttribute(_el$97, "datetime", dateTimeOf(props.dateTime)));
-              return _el$92;
+              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;
             })();
           },
           get children() {
-            var _el$33 = _$getNextElement(_tmpl$16);
-            _$insert(_el$33, header);
-            return _el$33;
+            var _el$27 = _$getNextElement(_tmpl$14);
+            _$insert(_el$27, header);
+            return _el$27;
           }
         });
       }
-    }), _el$59, _co$8);
-    _$insert(_el$32, _$createComponent(Show, {
+    }), _el$53, _co$8);
+    _$insert(_el$26, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!content())() && props.forwarded;
       },
       get children() {
-        var _el$34 = _$getNextElement(_tmpl$17),
-          _el$35 = _el$34.firstChild,
-          _el$36 = _el$35.nextSibling;
-        _$insert(_el$36, () => chatMessages().messageForwarded);
-        return _el$34;
+        var _el$28 = _$getNextElement(_tmpl$15),
+          _el$29 = _el$28.firstChild,
+          _el$30 = _el$29.nextSibling;
+        _$insert(_el$30, () => chatMessages().messageForwarded);
+        return _el$28;
       }
-    }), _el$61, _co$9);
-    _$insert(_el$32, _$createComponent(Show, {
+    }), _el$55, _co$9);
+    _$insert(_el$26, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!content())() && props.quote;
       },
@@ -700,38 +632,38 @@ export function MessageRow(props) {
         },
         get fallback() {
           return (() => {
-            var _el$98 = _$getNextElement(_tmpl$32);
-            _$insert(_el$98, () => quote(value()));
-            return _el$98;
+            var _el$92 = _$getNextElement(_tmpl$30);
+            _$insert(_el$92, () => quote(value()));
+            return _el$92;
           })();
         },
         children: select => (() => {
-          var _el$99 = _$getNextElement(_tmpl$33);
-          _el$99.$$click = () => select()();
-          _$insert(_el$99, () => quote(value()));
+          var _el$93 = _$getNextElement(_tmpl$31);
+          _el$93.$$click = () => select()();
+          _$insert(_el$93, () => quote(value()));
           _$runHydrationEvents();
-          return _el$99;
+          return _el$93;
         })()
       })
-    }), _el$63, _co$0);
-    _$insert(_el$32, _$createComponent(Show, {
+    }), _el$57, _co$0);
+    _$insert(_el$26, _$createComponent(Show, {
       get when() {
         return hasBubble();
       },
       get children() {
-        var _el$37 = _$getNextElement(_tmpl$21);
-        _$insert(_el$37, _$createComponent(Show, {
+        var _el$31 = _$getNextElement(_tmpl$19);
+        _$insert(_el$31, _$createComponent(Show, {
           get when() {
             return !props.deleted;
           },
           get fallback() {
             return (() => {
-              var _el$100 = _$getNextElement(_tmpl$34),
-                _el$101 = _el$100.firstChild,
-                _el$102 = _el$101.nextSibling,
-                [_el$103, _co$22] = _$getNextMarker(_el$102.nextSibling);
-              _$insert(_el$100, () => chatMessages().messageDeleted, _el$103, _co$22);
-              return _el$100;
+              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;
             })();
           },
           get children() {
@@ -740,39 +672,39 @@ export function MessageRow(props) {
                 return !writing();
               },
               get fallback() {
-                return _$getNextElement(_tmpl$35);
+                return _$getNextElement(_tmpl$33);
               },
               get children() {
                 return [(() => {
-                  var _el$38 = _$getNextElement(_tmpl$18);
-                  _el$38.$$focusin = revealFocus;
-                  _el$38.$$click = copyCode;
+                  var _el$32 = _$getNextElement(_tmpl$16);
+                  _el$32.$$focusin = revealFocus;
+                  _el$32.$$click = copyCode;
                   var _ref$ = text;
-                  typeof _ref$ === "function" ? _$use(_ref$, _el$38) : text = _el$38;
-                  _$setAttribute(_el$38, "id", textId);
+                  typeof _ref$ === "function" ? _$use(_ref$, _el$32) : text = _el$32;
+                  _$setAttribute(_el$32, "id", textId);
                   _$effect(_p$ => {
-                    var _v$21 = collapsed() ? "" : undefined,
-                      _v$22 = rendered().html;
-                    _v$21 !== _p$.e && _$setAttribute(_el$38, "data-collapsed", _p$.e = _v$21);
-                    _v$22 !== _p$.t && _$setProperty(_el$38, "innerHTML", _p$.t = _v$22);
+                    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);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined
                   });
                   _$runHydrationEvents();
-                  return _el$38;
+                  return _el$32;
                 })(), _$createComponent(Show, {
                   get when() {
                     return collapsible();
                   },
                   get children() {
-                    var _el$39 = _$getNextElement(_tmpl$20),
-                      _el$41 = _el$39.firstChild,
-                      [_el$42, _co$4] = _$getNextMarker(_el$41.nextSibling),
-                      _el$43 = _el$42.nextSibling,
-                      [_el$44, _co$5] = _$getNextMarker(_el$43.nextSibling);
-                    _$insert(_el$39, _$createComponent(Button, {
+                    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, {
                       variant: "text",
                       size: "xs",
                       "class": "k2b-message-row__more",
@@ -784,18 +716,18 @@ export function MessageRow(props) {
                       get children() {
                         return _$memo(() => !!expanded())() ? chatMessages().messageShowLess : chatMessages().messageShowMore;
                       }
-                    }), _el$42, _co$4);
-                    _$insert(_el$39, _$createComponent(Show, {
+                    }), _el$36, _co$4);
+                    _$insert(_el$33, _$createComponent(Show, {
                       get when() {
                         return props.edited;
                       },
                       get children() {
-                        var _el$40 = _$getNextElement(_tmpl$19);
-                        _$insert(_el$40, () => chatMessages().messageEdited);
-                        return _el$40;
+                        var _el$34 = _$getNextElement(_tmpl$17);
+                        _$insert(_el$34, () => chatMessages().messageEdited);
+                        return _el$34;
                       }
-                    }), _el$44, _co$5);
-                    return _el$39;
+                    }), _el$38, _co$5);
+                    return _el$33;
                   }
                 })];
               }
@@ -803,67 +735,67 @@ export function MessageRow(props) {
           }
         }));
         _$effect(_p$ => {
-          var _v$23 = props.deleted ? "" : undefined,
-            _v$24 = props.progress && !props.deleted ? "true" : undefined;
-          _v$23 !== _p$.e && _$setAttribute(_el$37, "data-deleted", _p$.e = _v$23);
-          _v$24 !== _p$.t && _$setAttribute(_el$37, "aria-busy", _p$.t = _v$24);
+          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);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$37;
+        return _el$31;
       }
-    }), _el$65, _co$1);
-    _$insert(_el$32, _$createComponent(Show, {
+    }), _el$59, _co$1);
+    _$insert(_el$26, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!(content() && props.edited))() && !hasBubble();
       },
       get children() {
-        var _el$45 = _$getNextElement(_tmpl$22),
-          _el$46 = _el$45.firstChild,
-          _el$47 = _el$46.nextSibling;
-        _$insert(_el$47, () => chatMessages().messageEdited);
-        return _el$45;
+        var _el$39 = _$getNextElement(_tmpl$20),
+          _el$40 = _el$39.firstChild,
+          _el$41 = _el$40.nextSibling;
+        _$insert(_el$41, () => chatMessages().messageEdited);
+        return _el$39;
       }
-    }), _el$67, _co$10);
-    _$insert(_el$32, _$createComponent(Show, {
+    }), _el$61, _co$10);
+    _$insert(_el$26, _$createComponent(Show, {
       get when() {
         return media().length > 0;
       },
       get children() {
-        var _el$48 = _$getNextElement(_tmpl$23);
-        _$insert(_el$48, _$createComponent(For, {
+        var _el$42 = _$getNextElement(_tmpl$21);
+        _$insert(_el$42, _$createComponent(For, {
           get each() {
             return shownMedia();
           },
           children: (item, index) => mediaItem(item, index)
         }));
         _$effect(_p$ => {
-          var _v$25 = chatMessages().attachments,
-            _v$26 = Math.min(media().length, MEDIA_SHOWN),
-            _v$27 = media().length === 1 ? {
+          var _v$18 = chatMessages().attachments,
+            _v$19 = Math.min(media().length, MEDIA_SHOWN),
+            _v$20 = media().length === 1 ? {
               width: mediaWidth(media()[0])
             } : undefined;
-          _v$25 !== _p$.e && _$setAttribute(_el$48, "aria-label", _p$.e = _v$25);
-          _v$26 !== _p$.t && _$setAttribute(_el$48, "data-count", _p$.t = _v$26);
-          _p$.a = _$style(_el$48, _v$27, _p$.a);
+          _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);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined
         });
-        return _el$48;
+        return _el$42;
       }
-    }), _el$69, _co$11);
-    _$insert(_el$32, _$createComponent(Show, {
+    }), _el$63, _co$11);
+    _$insert(_el$26, _$createComponent(Show, {
       get when() {
         return files().length > 0;
       },
       get children() {
-        var _el$49 = _$getNextElement(_tmpl$24);
-        _$insert(_el$49, _$createComponent(For, {
+        var _el$43 = _$getNextElement(_tmpl$22);
+        _$insert(_el$43, _$createComponent(For, {
           get each() {
             return files();
           },
@@ -877,73 +809,73 @@ export function MessageRow(props) {
             },
             get children() {
               return [(() => {
-                var _el$105 = _$getNextElement(_tmpl$36),
-                  _el$106 = _el$105.firstChild;
-                _$effect(() => _$className(_el$106, fileIcon(file)));
-                return _el$105;
+                var _el$99 = _$getNextElement(_tmpl$34),
+                  _el$100 = _el$99.firstChild;
+                _$effect(() => _$className(_el$100, fileIcon(file)));
+                return _el$99;
               })(), (() => {
-                var _el$107 = _$getNextElement(_tmpl$38),
-                  _el$108 = _el$107.firstChild,
-                  _el$110 = _el$108.nextSibling,
-                  [_el$111, _co$23] = _$getNextMarker(_el$110.nextSibling);
-                _$insert(_el$108, () => file.name);
-                _$insert(_el$107, _$createComponent(Show, {
+                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, {
                   get when() {
                     return file.detail;
                   },
                   get children() {
-                    var _el$109 = _$getNextElement(_tmpl$37);
-                    _$insert(_el$109, () => file.detail);
-                    return _el$109;
+                    var _el$103 = _$getNextElement(_tmpl$35);
+                    _$insert(_el$103, () => file.detail);
+                    return _el$103;
                   }
-                }), _el$111, _co$23);
-                return _el$107;
+                }), _el$105, _co$23);
+                return _el$101;
               })()];
             }
           })
         }));
-        return _el$49;
+        return _el$43;
       }
-    }), _el$71, _co$12);
-    _$insert(_el$32, _$createComponent(Show, {
+    }), _el$65, _co$12);
+    _$insert(_el$26, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!content())() && props.linkPreview;
       },
       get children() {
-        var _el$50 = _$getNextElement(_tmpl$25);
-        _$insert(_el$50, () => props.linkPreview);
-        return _el$50;
+        var _el$44 = _$getNextElement(_tmpl$23);
+        _$insert(_el$44, () => props.linkPreview);
+        return _el$44;
       }
-    }), _el$73, _co$13);
-    _$insert(_el$32, _$createComponent(Show, {
+    }), _el$67, _co$13);
+    _$insert(_el$26, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!content())() && props.card;
       },
       get children() {
-        var _el$51 = _$getNextElement(_tmpl$25);
-        _$insert(_el$51, () => props.card);
-        return _el$51;
+        var _el$45 = _$getNextElement(_tmpl$23);
+        _$insert(_el$45, () => props.card);
+        return _el$45;
       }
-    }), _el$75, _co$14);
-    _$insert(_el$32, _$createComponent(Show, {
+    }), _el$69, _co$14);
+    _$insert(_el$26, _$createComponent(Show, {
       get when() {
         return props.thread;
       },
       children: thread => (() => {
-        var _el$112 = _$getNextElement(_tmpl$40),
-          _el$115 = _el$112.firstChild,
-          [_el$116, _co$24] = _$getNextMarker(_el$115.nextSibling),
-          _el$114 = _el$116.nextSibling,
-          _el$117 = _el$114.nextSibling,
-          [_el$118, _co$25] = _$getNextMarker(_el$117.nextSibling);
-        _el$112.$$click = () => thread().onOpen();
-        _$insert(_el$112, _$createComponent(Show, {
+        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, {
           get when() {
             return (thread().participants?.length ?? 0) > 0;
           },
           get children() {
-            var _el$113 = _$getNextElement(_tmpl$39);
-            _$insert(_el$113, _$createComponent(For, {
+            var _el$107 = _$getNextElement(_tmpl$37);
+            _$insert(_el$107, _$createComponent(For, {
               get each() {
                 return thread().participants?.slice(0, 3);
               },
@@ -960,112 +892,62 @@ export function MessageRow(props) {
                 size: "xs"
               })
             }));
-            return _el$113;
+            return _el$107;
           }
-        }), _el$116, _co$24);
-        _$insert(_el$114, () => chatMessages().messageReplies({
+        }), _el$110, _co$24);
+        _$insert(_el$108, () => chatMessages().messageReplies({
           count: thread().count
         }));
-        _$insert(_el$112, _$createComponent(Show, {
+        _$insert(_el$106, _$createComponent(Show, {
           get when() {
             return thread().lastReply;
           },
           children: time => (() => {
-            var _el$119 = _$getNextElement(_tmpl$41);
-            _$insert(_el$119, () => chatMessages().messageLastReply({
+            var _el$113 = _$getNextElement(_tmpl$39);
+            _$insert(_el$113, () => chatMessages().messageLastReply({
               time: time()
             }));
-            _$effect(() => _$setAttribute(_el$119, "datetime", dateTimeOf(thread().lastReplyDateTime)));
-            return _el$119;
+            _$effect(() => _$setAttribute(_el$113, "datetime", dateTimeOf(thread().lastReplyDateTime)));
+            return _el$113;
           })()
-        }), _el$118, _co$25);
+        }), _el$112, _co$25);
         _$runHydrationEvents();
-        return _el$112;
+        return _el$106;
       })()
-    }), _el$77, _co$15);
-    _$insert(_el$32, _$createComponent(Show, {
+    }), _el$71, _co$15);
+    _$insert(_el$26, _$createComponent(Show, {
       get when() {
         return hasFooter();
       },
       get children() {
-        var _el$52 = _$getNextElement(_tmpl$27),
-          _el$54 = _el$52.firstChild,
-          [_el$55, _co$6] = _$getNextMarker(_el$54.nextSibling),
-          _el$56 = _el$55.nextSibling,
-          [_el$57, _co$7] = _$getNextMarker(_el$56.nextSibling);
-        _$insert(_el$52, _$createComponent(Show, {
+        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, {
           get when() {
             return reactions();
           },
-          children: list => (() => {
-            var _el$120 = _$getNextElement(_tmpl$42),
-              _el$121 = _el$120.firstChild,
-              [_el$122, _co$26] = _$getNextMarker(_el$121.nextSibling),
-              _el$123 = _el$122.nextSibling,
-              [_el$124, _co$27] = _$getNextMarker(_el$123.nextSibling);
-            _$insert(_el$120, _$createComponent(Show, {
-              get when() {
-                return list().length > 0;
-              },
-              get children() {
-                return _$createComponent(ScrollArea, {
-                  orientation: "horizontal",
-                  "class": "k2b-message-row__reaction-list",
-                  get tabindex() {
-                    return props.onToggleReaction ? undefined : 0;
-                  },
-                  get children() {
-                    return _$createComponent(For, {
-                      get each() {
-                        return reactionKeys();
-                      },
-                      children: key => _$createComponent(Show, {
-                        get when() {
-                          return reactionByKey().get(key);
-                        },
-                        children: reaction => reactionChip(key, reaction)
-                      })
-                    });
-                  }
-                });
-              }
-            }), _el$122, _co$26);
-            _$insert(_el$120, _$createComponent(Show, {
-              get when() {
-                return props.onAddReaction;
-              },
-              children: add => _$createComponent(IconButton, {
-                get label() {
-                  return chatMessages().messageAddReaction;
-                },
-                size: "xs",
-                "class": "k2b-message-row__react",
-                onClick: event => add()(event.currentTarget),
-                get children() {
-                  return _$getNextElement(_tmpl$43);
-                }
-              })
-            }), _el$124, _co$27);
-            _$effect(_p$ => {
-              var _v$33 = chatMessages().messageReactions,
-                _v$34 = list().length === 0 ? "" : undefined;
-              _v$33 !== _p$.e && _$setAttribute(_el$120, "aria-label", _p$.e = _v$33);
-              _v$34 !== _p$.t && _$setAttribute(_el$120, "data-empty", _p$.t = _v$34);
-              return _p$;
-            }, {
-              e: undefined,
-              t: undefined
-            });
-            return _el$120;
-          })()
-        }), _el$55, _co$6);
-        _$insert(_el$52, _$createComponent(Show, {
+          children: list => _$createComponent(ReactionBar, {
+            get reactions() {
+              return list();
+            },
+            get onToggle() {
+              return props.onToggleReaction;
+            },
+            get onAdd() {
+              return props.onAddReaction;
+            }
+          })
+        }), _el$49, _co$6);
+        _$insert(_el$46, _$createComponent(Show, {
           get when() {
             return hasLine();
           },
           get children() {
-            var _el$53 = _$getNextElement(_tmpl$26);
-            _$insert(_el$53, _$createComponent(Show, {
+            var _el$47 = _$getNextElement(_tmpl$24);
+            _$insert(_el$47, _$createComponent(Show, {
               get when() {
                 return props.progress;
               },
@@ -1075,10 +957,10 @@ export function MessageRow(props) {
                     return props.status === "pending";
                   },
                   get children() {
-                    return [_$getNextElement(_tmpl$44), (() => {
-                      var _el$127 = _$getNextElement(_tmpl$);
-                      _$insert(_el$127, () => chatMessages().sending);
-                      return _el$127;
+                    return [_$getNextElement(_tmpl$40), (() => {
+                      var _el$115 = _$getNextElement(_tmpl$);
+                      _$insert(_el$115, () => chatMessages().sending);
+                      return _el$115;
                     })()];
                   }
                 }), _$createComponent(Show, {
@@ -1086,10 +968,10 @@ export function MessageRow(props) {
                     return props.status === "failed";
                   },
                   get children() {
-                    return [_$getNextElement(_tmpl$45), (() => {
-                      var _el$129 = _$getNextElement(_tmpl$);
-                      _$insert(_el$129, () => chatMessages().messageNotSent);
-                      return _el$129;
+                    return [_$getNextElement(_tmpl$41), (() => {
+                      var _el$117 = _$getNextElement(_tmpl$);
+                      _$insert(_el$117, () => chatMessages().messageNotSent);
+                      return _el$117;
                     })(), _$createComponent(Show, {
                       get when() {
                         return props.onRetry;
@@ -1119,27 +1001,27 @@ export function MessageRow(props) {
                             return props.status === "sent";
                           },
                           get children() {
-                            return [_$getNextElement(_tmpl$46), (() => {
-                              var _el$131 = _$getNextElement(_tmpl$47);
-                              _$insert(_el$131, () => chatMessages().messageSent);
-                              return _el$131;
+                            return [_$getNextElement(_tmpl$42), (() => {
+                              var _el$119 = _$getNextElement(_tmpl$43);
+                              _$insert(_el$119, () => chatMessages().messageSent);
+                              return _el$119;
                             })()];
                           }
                         });
                       },
-                      children: receipt => [_$getNextElement(_tmpl$48), (() => {
-                        var _el$133 = _$getNextElement(_tmpl$49);
-                        _$insert(_el$133, receipt);
-                        return _el$133;
+                      children: receipt => [_$getNextElement(_tmpl$44), (() => {
+                        var _el$121 = _$getNextElement(_tmpl$45);
+                        _$insert(_el$121, receipt);
+                        return _el$121;
                       })()]
                     });
                   }
                 })];
               },
-              children: progress => [_$getNextElement(_tmpl$50), (() => {
-                var _el$135 = _$getNextElement(_tmpl$51);
-                _$insert(_el$135, () => progress().status);
-                return _el$135;
+              children: progress => [_$getNextElement(_tmpl$46), (() => {
+                var _el$123 = _$getNextElement(_tmpl$47);
+                _$insert(_el$123, () => progress().status);
+                return _el$123;
               })(), _$createComponent(Show, {
                 get when() {
                   return progress().onStop;
@@ -1154,19 +1036,19 @@ export function MessageRow(props) {
                 })
               })]
             }));
-            return _el$53;
+            return _el$47;
           }
-        }), _el$57, _co$7);
-        return _el$52;
+        }), _el$51, _co$7);
+        return _el$46;
       }
-    }), _el$79, _co$16);
-    _$insert(_el$29, _$createComponent(Show, {
+    }), _el$73, _co$16);
+    _$insert(_el$23, _$createComponent(Show, {
       get when() {
         return (props.actions?.length ?? 0) > 0;
       },
       get children() {
-        var _el$80 = _$getNextElement(_tmpl$28);
-        _$insert(_el$80, _$createComponent(For, {
+        var _el$74 = _$getNextElement(_tmpl$26);
+        _$insert(_el$74, _$createComponent(For, {
           get each() {
             return props.actions;
           },
@@ -1180,27 +1062,27 @@ export function MessageRow(props) {
             },
             onClick: () => action.onSelect(),
             get children() {
-              var _el$136 = _$getNextElement(_tmpl$52);
-              _$effect(() => _$className(_el$136, action.icon));
-              return _el$136;
+              var _el$124 = _$getNextElement(_tmpl$48);
+              _$effect(() => _$className(_el$124, action.icon));
+              return _el$124;
             }
           })
         }));
-        _$effect(() => _$setAttribute(_el$80, "aria-label", chatMessages().messageActions));
-        return _el$80;
+        _$effect(() => _$setAttribute(_el$74, "aria-label", chatMessages().messageActions));
+        return _el$74;
       }
-    }), _el$84, _co$18);
+    }), _el$78, _co$18);
     _$effect(_p$ => {
-      var _v$28 = props.class ? `k2b-message-row ${props.class}` : "k2b-message-row",
-        _v$29 = props.own ? "" : undefined,
-        _v$30 = groupStart() ? "" : undefined,
-        _v$31 = props.status,
-        _v$32 = media().length > 0 ? "" : undefined;
-      _v$28 !== _p$.e && _$className(_el$29, _p$.e = _v$28);
-      _v$29 !== _p$.t && _$setAttribute(_el$29, "data-own", _p$.t = _v$29);
-      _v$30 !== _p$.a && _$setAttribute(_el$29, "data-group-start", _p$.a = _v$30);
-      _v$31 !== _p$.o && _$setAttribute(_el$29, "data-status", _p$.o = _v$31);
-      _v$32 !== _p$.i && _$setAttribute(_el$29, "data-media", _p$.i = _v$32);
+      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);
       return _p$;
     }, {
       e: undefined,
@@ -1209,43 +1091,43 @@ export function MessageRow(props) {
       o: undefined,
       i: undefined
     });
-    return _el$29;
+    return _el$23;
   })();
 }
 
 /** A quiet, centered line for something that happened in the conversation, such as a person joining. */
 export function MessageSystemRow(props) {
   return (() => {
-    var _el$137 = _$getNextElement(_tmpl$54),
-      _el$140 = _el$137.firstChild,
-      [_el$141, _co$28] = _$getNextMarker(_el$140.nextSibling),
-      _el$138 = _el$141.nextSibling,
-      _el$142 = _el$138.nextSibling,
-      [_el$143, _co$29] = _$getNextMarker(_el$142.nextSibling);
-    _$insert(_el$137, _$createComponent(Show, {
+    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, {
       get when() {
         return props.icon;
       },
       children: icon => (() => {
-        var _el$144 = _$getNextElement(_tmpl$52);
-        _$effect(() => _$className(_el$144, icon()));
-        return _el$144;
+        var _el$132 = _$getNextElement(_tmpl$48);
+        _$effect(() => _$className(_el$132, icon()));
+        return _el$132;
       })()
-    }), _el$141, _co$28);
-    _$insert(_el$138, () => props.children);
-    _$insert(_el$137, _$createComponent(Show, {
+    }), _el$129, _co$26);
+    _$insert(_el$126, () => props.children);
+    _$insert(_el$125, _$createComponent(Show, {
       get when() {
         return props.time;
       },
       get children() {
-        var _el$139 = _$getNextElement(_tmpl$53);
-        _$insert(_el$139, () => props.time);
-        _$effect(() => _$setAttribute(_el$139, "datetime", dateTimeOf(props.dateTime)));
-        return _el$139;
+        var _el$127 = _$getNextElement(_tmpl$49);
+        _$insert(_el$127, () => props.time);
+        _$effect(() => _$setAttribute(_el$127, "datetime", dateTimeOf(props.dateTime)));
+        return _el$127;
       }
-    }), _el$143, _co$29);
-    _$effect(() => _$className(_el$137, props.class ? `k2b-message-system-row ${props.class}` : "k2b-message-system-row"));
-    return _el$137;
+    }), _el$131, _co$27);
+    _$effect(() => _$className(_el$125, props.class ? `k2b-message-system-row ${props.class}` : "k2b-message-system-row"));
+    return _el$125;
   })();
 }
 _$delegateEvents(["click", "focusin"]);