@k2b/ui 0.27.0 → 0.28.0

package/dist/ssr/content/MessageRow.js

@@ -13,54 +13,50 @@ var _tmpl$ = ["<span", " style=\"", "\">", "</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 = ["<span class=\"k2b-message-row__reaction\" role=\"img\"", "><span aria-hidden=\"true\">", "</span><span aria-hidden=\"true\">", "</span></span>"],
-  _tmpl$1 = ["<button type=\"button\" class=\"k2b-message-row__reaction\"", "><span aria-hidden=\"true\">", "</span><span aria-hidden=\"true\">", "</span></button>"],
-  _tmpl$10 = ["<img", " alt", " loading=\"lazy\" decoding=\"async\">"],
-  _tmpl$11 = "<span class=\"k2b-message-row__media-play\" aria-hidden=\"true\"><i class=\"ti ti-player-play\"></i></span>",
-  _tmpl$12 = ["<span class=\"k2b-message-row__media-duration\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$13 = ["<span class=\"k2b-message-row__media-more\" aria-hidden=\"true\">+", "</span>"],
-  _tmpl$14 = ["<span class=\"k2b-message-row__avatar\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$15 = ["<div class=\"k2b-message-row__gutter\">", "</div>"],
-  _tmpl$16 = ["<div class=\"k2b-message-row__meta\">", "</div>"],
-  _tmpl$17 = ["<div class=\"k2b-message-row__marker\"><i class=\"ti ti-arrow-forward-up\" aria-hidden=\"true\"></i><span>", "</span></div>"],
-  _tmpl$18 = ["<div", " class=\"k2b-content-markdown k2b-message-row__text\" data-heading-scale=\"compact\"", ">", "</div>"],
-  _tmpl$19 = ["<span class=\"k2b-message-row__edited\">", "</span>"],
-  _tmpl$20 = ["<div class=\"k2b-message-row__more-line\">", "", "</div>"],
-  _tmpl$21 = ["<div class=\"k2b-message-row__bubble\"", ">", "</div>"],
-  _tmpl$22 = ["<div class=\"k2b-message-row__marker\"><i class=\"ti ti-pencil\" aria-hidden=\"true\"></i><span class=\"k2b-message-row__edited\">", "</span></div>"],
-  _tmpl$23 = ["<div class=\"k2b-message-row__media\" role=\"group\"", " style=\"", "\">", "</div>"],
-  _tmpl$24 = ["<div class=\"k2b-message-row__files\">", "</div>"],
-  _tmpl$25 = ["<div class=\"k2b-message-row__slot\" data-gesture-ignore>", "</div>"],
-  _tmpl$26 = ["<div class=\"k2b-message-row__line\">", "</div>"],
-  _tmpl$27 = ["<div class=\"k2b-message-row__footer\">", "", "</div>"],
-  _tmpl$28 = ["<div class=\"k2b-message-row__actions\" role=\"group\"", ">", "</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 = ["<div class=\"k2b-message-row__quote\">", "</div>"],
-  _tmpl$33 = ["<button type=\"button\" class=\"k2b-message-row__quote\">", "</button>"],
-  _tmpl$34 = ["<span class=\"k2b-message-row__deleted\"><i class=\"ti ti-message-off\" aria-hidden=\"true\"></i>", "</span>"],
-  _tmpl$35 = "<span class=\"k2b-message-row__writing\"><span class=\"k2b-chat-progress-dots\" aria-hidden=\"true\"><span></span><span></span><span></span></span></span>",
-  _tmpl$36 = ["<span class=\"k2b-message-row__file-icon\" aria-hidden=\"true\"><i", "></i></span>"],
-  _tmpl$37 = ["<span class=\"k2b-message-row__file-detail\">", "</span>"],
-  _tmpl$38 = ["<span class=\"k2b-message-row__file-copy\"><span class=\"k2b-message-row__file-name\">", "</span>", "</span>"],
-  _tmpl$39 = ["<span class=\"k2b-message-row__thread-people\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$40 = ["<button type=\"button\" class=\"k2b-message-row__thread\">", "<span class=\"k2b-message-row__thread-count\">", "</span>", "</button>"],
-  _tmpl$41 = ["<time class=\"k2b-message-row__thread-time\"", ">", "</time>"],
-  _tmpl$42 = ["<div class=\"k2b-message-row__reactions\" role=\"group\"", ">", "", "</div>"],
-  _tmpl$43 = "<i class=\"ti ti-mood-plus\" aria-hidden=\"true\"></i>",
-  _tmpl$44 = "<i class=\"ti ti-clock\" aria-hidden=\"true\"></i>",
-  _tmpl$45 = ["<span>", "</span>"],
-  _tmpl$46 = "<i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>",
-  _tmpl$47 = "<i class=\"ti ti-check\" aria-hidden=\"true\"></i>",
-  _tmpl$48 = ["<span class=\"k2b-sr-only\">", "</span>"],
-  _tmpl$49 = "<i class=\"ti ti-checks\" aria-hidden=\"true\"></i>",
-  _tmpl$50 = ["<span class=\"k2b-message-row__receipt\">", "</span>"],
-  _tmpl$51 = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
-  _tmpl$52 = ["<span class=\"k2b-message-row__line-text\">", "</span>"],
-  _tmpl$53 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$54 = ["<time", ">", "</time>"],
-  _tmpl$55 = ["<div", ">", "<span>", "</span>", "</div>"];
+  _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$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>"],
+  _tmpl$35 = ["<span class=\"k2b-message-row__file-detail\">", "</span>"],
+  _tmpl$36 = ["<span class=\"k2b-message-row__file-copy\"><span class=\"k2b-message-row__file-name\">", "</span>", "</span>"],
+  _tmpl$37 = ["<span class=\"k2b-message-row__thread-people\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$38 = ["<button type=\"button\" class=\"k2b-message-row__thread\">", "<span class=\"k2b-message-row__thread-count\">", "</span>", "</button>"],
+  _tmpl$39 = ["<time class=\"k2b-message-row__thread-time\"", ">", "</time>"],
+  _tmpl$40 = "<i class=\"ti ti-clock\" aria-hidden=\"true\"></i>",
+  _tmpl$41 = ["<span>", "</span>"],
+  _tmpl$42 = "<i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>",
+  _tmpl$43 = "<i class=\"ti ti-check\" aria-hidden=\"true\"></i>",
+  _tmpl$44 = ["<span class=\"k2b-sr-only\">", "</span>"],
+  _tmpl$45 = "<i class=\"ti ti-checks\" aria-hidden=\"true\"></i>",
+  _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>"];
 import { fileIcons } from "@k2b/stdlib";
 import { createMemo, createSignal, createUniqueId, For, onCleanup, Show } from "solid-js";
 import { Button, IconButton } from "../actions/Button";
@@ -69,9 +65,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;
@@ -100,6 +96,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();
 
 /**
@@ -293,9 +292,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() !== "";
@@ -341,25 +337,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 _$ssr(_tmpl$0, _$ssrAttribute("aria-label", _$escape(label(Boolean(reaction().own)), true), false) + _$ssrAttribute("title", _$escape(reaction().label, true), false) + _$ssrAttribute("data-own", reaction().own ? "" : _$escape(undefined, true), false), _$escape(reaction().emoji), _$escape(reaction().count));
-      },
-      children: toggle => _$ssr(_tmpl$1, _$ssrAttribute("aria-pressed", reaction().own ? "true" : "false", false) + _$ssrAttribute("aria-label", _$escape(label(false), true), false) + _$ssrAttribute("title", _$escape(reaction().label, true), false) + _$ssrAttribute("data-own", reaction().own ? "" : _$escape(undefined, true), false), _$escape(reaction().emoji), _$escape(reaction().count))
-    });
-  };
   const mediaItem = (item, index) => {
     const more = () => index() === shownMedia().length - 1 ? hiddenMedia() : 0;
     return _$createComponent(AttachmentTarget, {
@@ -379,17 +356,17 @@ export function MessageRow(props) {
         return item.href;
       },
       get children() {
-        return [_$ssr(_tmpl$10, _$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$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, {
           get when() {
             return item.kind === "video";
           },
           get children() {
-            return [_$ssr(_tmpl$11), _$createComponent(Show, {
+            return [_$ssr(_tmpl$1), _$createComponent(Show, {
               get when() {
                 return item.duration;
               },
               get children() {
-                return _$ssr(_tmpl$12, _$escape(item.duration));
+                return _$ssr(_tmpl$10, _$escape(item.duration));
               }
             })];
           }
@@ -398,23 +375,23 @@ export function MessageRow(props) {
             return more() > 0;
           },
           get children() {
-            return _$ssr(_tmpl$13, _$escape(more()));
+            return _$ssr(_tmpl$11, _$escape(more()));
           }
         })];
       }
     });
   };
-  return _$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, {
+  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, {
     get when() {
       return !props.own;
     },
     get children() {
-      return _$ssr(_tmpl$15, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$13, _$escape(_$createComponent(Show, {
         get when() {
           return groupStart();
         },
         get children() {
-          return _$ssr(_tmpl$14, _$escape(_$createComponent(Avatar, {
+          return _$ssr(_tmpl$12, _$escape(_$createComponent(Avatar, {
             get name() {
               return props.author.name;
             },
@@ -434,7 +411,7 @@ export function MessageRow(props) {
       return groupStart();
     },
     get fallback() {
-      return _$ssr(_tmpl$30, _$escape(props.author.name), _$escape(props.time));
+      return _$ssr(_tmpl$28, _$escape(props.author.name), _$escape(props.time));
     },
     get children() {
       return _$createComponent(Show, {
@@ -442,10 +419,10 @@ export function MessageRow(props) {
           return !props.own;
         },
         get fallback() {
-          return _$ssr(_tmpl$31, _$escape(props.author.name), _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time));
+          return _$ssr(_tmpl$29, _$escape(props.author.name), _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time));
         },
         get children() {
-          return _$ssr(_tmpl$16, _$escape(header()));
+          return _$ssr(_tmpl$14, _$escape(header()));
         }
       });
     }
@@ -454,7 +431,7 @@ export function MessageRow(props) {
       return _$memo(() => !!content())() && props.forwarded;
     },
     get children() {
-      return _$ssr(_tmpl$17, _$escape(chatMessages().messageForwarded));
+      return _$ssr(_tmpl$15, _$escape(chatMessages().messageForwarded));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -465,21 +442,21 @@ export function MessageRow(props) {
         return value().onSelect;
       },
       get fallback() {
-        return _$ssr(_tmpl$32, _$escape(quote(value())));
+        return _$ssr(_tmpl$30, _$escape(quote(value())));
       },
-      children: select => _$ssr(_tmpl$33, _$escape(quote(value())))
+      children: select => _$ssr(_tmpl$31, _$escape(quote(value())))
     })
   })), _$escape(_$createComponent(Show, {
     get when() {
       return hasBubble();
     },
     get children() {
-      return _$ssr(_tmpl$21, _$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$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, {
         get when() {
           return !props.deleted;
         },
         get fallback() {
-          return _$ssr(_tmpl$34, _$escape(chatMessages().messageDeleted));
+          return _$ssr(_tmpl$32, _$escape(chatMessages().messageDeleted));
         },
         get children() {
           return _$createComponent(Show, {
@@ -487,15 +464,15 @@ export function MessageRow(props) {
               return !writing();
             },
             get fallback() {
-              return _$ssr(_tmpl$35);
+              return _$ssr(_tmpl$33);
             },
             get children() {
-              return [_$ssr(_tmpl$18, _$ssrAttribute("id", _$escape(textId, true), false), _$ssrAttribute("data-collapsed", collapsed() ? "" : _$escape(undefined, true), false), rendered().html), _$createComponent(Show, {
+              return [_$ssr(_tmpl$16, _$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$20, _$escape(_$createComponent(Button, {
+                  return _$ssr(_tmpl$18, _$escape(_$createComponent(Button, {
                     variant: "text",
                     size: "xs",
                     "class": "k2b-message-row__more",
@@ -512,7 +489,7 @@ export function MessageRow(props) {
                       return props.edited;
                     },
                     get children() {
-                      return _$ssr(_tmpl$19, _$escape(chatMessages().messageEdited));
+                      return _$ssr(_tmpl$17, _$escape(chatMessages().messageEdited));
                     }
                   })));
                 }
@@ -527,14 +504,14 @@ export function MessageRow(props) {
       return _$memo(() => !!(content() && props.edited))() && !hasBubble();
     },
     get children() {
-      return _$ssr(_tmpl$22, _$escape(chatMessages().messageEdited));
+      return _$ssr(_tmpl$20, _$escape(chatMessages().messageEdited));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return media().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$23, _$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$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 ? {
         width: mediaWidth(media()[0])
       } : undefined), _$escape(_$createComponent(For, {
         get each() {
@@ -548,7 +525,7 @@ export function MessageRow(props) {
       return files().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$24, _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$22, _$escape(_$createComponent(For, {
         get each() {
           return files();
         },
@@ -561,12 +538,12 @@ export function MessageRow(props) {
             return file.href;
           },
           get children() {
-            return [_$ssr(_tmpl$36, _$ssrAttribute("class", _$escape(fileIcon(file), true), false)), _$ssr(_tmpl$38, _$escape(file.name), _$escape(_$createComponent(Show, {
+            return [_$ssr(_tmpl$34, _$ssrAttribute("class", _$escape(fileIcon(file), true), false)), _$ssr(_tmpl$36, _$escape(file.name), _$escape(_$createComponent(Show, {
               get when() {
                 return file.detail;
               },
               get children() {
-                return _$ssr(_tmpl$37, _$escape(file.detail));
+                return _$ssr(_tmpl$35, _$escape(file.detail));
               }
             })))];
           }
@@ -578,25 +555,25 @@ export function MessageRow(props) {
       return _$memo(() => !!content())() && props.linkPreview;
     },
     get children() {
-      return _$ssr(_tmpl$25, _$escape(props.linkPreview));
+      return _$ssr(_tmpl$23, _$escape(props.linkPreview));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return _$memo(() => !!content())() && props.card;
     },
     get children() {
-      return _$ssr(_tmpl$25, _$escape(props.card));
+      return _$ssr(_tmpl$23, _$escape(props.card));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return props.thread;
     },
-    children: thread => _$ssr(_tmpl$40, _$escape(_$createComponent(Show, {
+    children: thread => _$ssr(_tmpl$38, _$escape(_$createComponent(Show, {
       get when() {
         return (thread().participants?.length ?? 0) > 0;
       },
       get children() {
-        return _$ssr(_tmpl$39, _$escape(_$createComponent(For, {
+        return _$ssr(_tmpl$37, _$escape(_$createComponent(For, {
           get each() {
             return thread().participants?.slice(0, 3);
           },
@@ -620,7 +597,7 @@ export function MessageRow(props) {
       get when() {
         return thread().lastReply;
       },
-      children: time => _$ssr(_tmpl$41, _$ssrAttribute("datetime", _$escape(dateTimeOf(thread().lastReplyDateTime), true), false), _$escape(chatMessages().messageLastReply({
+      children: time => _$ssr(_tmpl$39, _$ssrAttribute("datetime", _$escape(dateTimeOf(thread().lastReplyDateTime), true), false), _$escape(chatMessages().messageLastReply({
         time: time()
       })))
     })))
@@ -629,58 +606,27 @@ export function MessageRow(props) {
       return hasFooter();
     },
     get children() {
-      return _$ssr(_tmpl$27, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$25, _$escape(_$createComponent(Show, {
         get when() {
           return reactions();
         },
-        children: list => _$ssr(_tmpl$42, _$ssrAttribute("aria-label", _$escape(chatMessages().messageReactions, true), false) + _$ssrAttribute("data-empty", list().length === 0 ? "" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
-          get when() {
-            return list().length > 0;
+        children: list => _$createComponent(ReactionBar, {
+          get reactions() {
+            return list();
           },
-          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)
-                  })
-                });
-              }
-            });
-          }
-        })), _$escape(_$createComponent(Show, {
-          get when() {
-            return props.onAddReaction;
+          get onToggle() {
+            return props.onToggleReaction;
           },
-          children: add => _$createComponent(IconButton, {
-            get label() {
-              return chatMessages().messageAddReaction;
-            },
-            size: "xs",
-            "class": "k2b-message-row__react",
-            onClick: event => add()(event.currentTarget),
-            get children() {
-              return _$ssr(_tmpl$43);
-            }
-          })
-        })))
+          get onAdd() {
+            return props.onAddReaction;
+          }
+        })
       })), _$escape(_$createComponent(Show, {
         get when() {
           return hasLine();
         },
         get children() {
-          return _$ssr(_tmpl$26, _$escape(_$createComponent(Show, {
+          return _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
             get when() {
               return props.progress;
             },
@@ -690,14 +636,14 @@ export function MessageRow(props) {
                   return props.status === "pending";
                 },
                 get children() {
-                  return [_$ssr(_tmpl$44), _$ssr(_tmpl$45, _$escape(chatMessages().sending))];
+                  return [_$ssr(_tmpl$40), _$ssr(_tmpl$41, _$escape(chatMessages().sending))];
                 }
               }), _$createComponent(Show, {
                 get when() {
                   return props.status === "failed";
                 },
                 get children() {
-                  return [_$ssr(_tmpl$46), _$ssr(_tmpl$45, _$escape(chatMessages().messageNotSent)), _$createComponent(Show, {
+                  return [_$ssr(_tmpl$42), _$ssr(_tmpl$41, _$escape(chatMessages().messageNotSent)), _$createComponent(Show, {
                     get when() {
                       return props.onRetry;
                     },
@@ -726,16 +672,16 @@ export function MessageRow(props) {
                           return props.status === "sent";
                         },
                         get children() {
-                          return [_$ssr(_tmpl$47), _$ssr(_tmpl$48, _$escape(chatMessages().messageSent))];
+                          return [_$ssr(_tmpl$43), _$ssr(_tmpl$44, _$escape(chatMessages().messageSent))];
                         }
                       });
                     },
-                    children: receipt => [_$ssr(_tmpl$49), _$ssr(_tmpl$50, _$escape(receipt()))]
+                    children: receipt => [_$ssr(_tmpl$45), _$ssr(_tmpl$46, _$escape(receipt()))]
                   });
                 }
               })];
             },
-            children: progress => [_$ssr(_tmpl$51), _$ssr(_tmpl$52, _$escape(progress().status)), _$createComponent(Show, {
+            children: progress => [_$ssr(_tmpl$47), _$ssr(_tmpl$48, _$escape(progress().status)), _$createComponent(Show, {
               get when() {
                 return progress().onStop;
               },
@@ -757,7 +703,7 @@ export function MessageRow(props) {
       return (props.actions?.length ?? 0) > 0;
     },
     get children() {
-      return _$ssr(_tmpl$28, _$ssrAttribute("aria-label", _$escape(chatMessages().messageActions, true), false), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$26, _$ssrAttribute("aria-label", _$escape(chatMessages().messageActions, true), false), _$escape(_$createComponent(For, {
         get each() {
           return props.actions;
         },
@@ -771,7 +717,7 @@ export function MessageRow(props) {
           },
           onClick: () => action.onSelect(),
           get children() {
-            return _$ssr(_tmpl$53, _$ssrAttribute("class", _$escape(action.icon, true), false));
+            return _$ssr(_tmpl$49, _$ssrAttribute("class", _$escape(action.icon, true), false));
           }
         })
       })));
@@ -781,17 +727,17 @@ export function MessageRow(props) {
 
 /** A quiet, centered line for something that happened in the conversation, such as a person joining. */
 export function MessageSystemRow(props) {
-  return _$ssr(_tmpl$55, _$ssrAttribute("class", props.class ? `k2b-message-system-row ${_$escape(props.class, true)}` : "k2b-message-system-row", false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$51, _$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$53, _$ssrAttribute("class", _$escape(icon(), true), false))
+    children: icon => _$ssr(_tmpl$49, _$ssrAttribute("class", _$escape(icon(), true), false))
   })), _$escape(props.children), _$escape(_$createComponent(Show, {
     get when() {
       return props.time;
     },
     get children() {
-      return _$ssr(_tmpl$54, _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time));
+      return _$ssr(_tmpl$50, _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time));
     }
   })));
 }