@k2b/ui 0.14.0 → 0.15.0

package/dist/browser/content/MessageRow.js

@@ -0,0 +1,1250 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span role=img>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<a target=_blank rel="noopener noreferrer">`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<button type=button>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<span class=k2b-message-row__name>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-message-row__badge>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<time class=k2b-message-row__time>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<i class="ti ti-arrow-back-up"aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-message-row__quote-text><span class=k2b-sr-only><!$><!/> </span><span class=k2b-message-row__quote-author></span> <!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<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>`),
+  _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><!$><!/>`);
+import { fileIcons } from "@k2b/stdlib";
+import { createMemo, createSignal, createUniqueId, For, onCleanup, Show } from "solid-js";
+import { Button, IconButton } from "../actions/Button";
+import { copyText } from "../actions/CopyButton";
+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";
+
+/** Messages by the same author within this time continue a group. */
+const GROUP_WINDOW_MS = 5 * 60_000;
+/**
+ * A message collapses to ten lines (`.k2b-message-row__text[data-collapsed]`) when its rendered text takes more lines
+ * than this. `renderedLines` counts the fewest lines the text takes at any width, so a collapsed message always hides
+ * some of it.
+ */
+const COLLAPSE_LINES = 14;
+/** Visible characters that take at least one line of a message, even at its widest. */
+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;
+/** 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. */
+const ATTACHMENT_PROTOCOLS = new Set(["https:", "http:"]);
+/**
+ * A picture may also show a file that is still uploading. A `blob:` URL runs in the page's origin when it is opened,
+ * so links never use one.
+ */
+const PICTURE_PROTOCOLS = new Set([...ATTACHMENT_PROTOCOLS, "blob:"]);
+/** A grid shows this many images or videos; the last one tells how many more there are. */
+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;
+const timestamp = value => value instanceof Date ? value.getTime() : new Date(value).getTime();
+
+/**
+ * Whether a message starts a new group: there is no previous message, either is a system row, the author changes, or
+ * more than five minutes passed. Also start a group where you show a separator such as a new day.
+ */
+export const startsMessageGroup = (entry, previous) => {
+  if (!previous || entry.system || previous.system || entry.author !== previous.author) return true;
+  const gap = timestamp(entry.at) - timestamp(previous.at);
+  return !(gap >= 0 && gap <= GROUP_WINDOW_MS);
+};
+
+/** Text that wraps: every `LINE_CHARS` visible characters of a line take at least one line. */
+const wrappedLines = text => text.split("\n").reduce((lines, line) => lines + Math.ceil(line.trim().length / LINE_CHARS), 0);
+
+/** What inline tokens show: a link its label, never its destination. */
+const inlineText = tokens => {
+  let text = "";
+  for (const token of tokens) {
+    if (token.type === "br") text += "\n";else if ("tokens" in token && token.tokens) text += inlineText(token.tokens);else if ("text" in token) text += token.text;
+  }
+  return text;
+};
+
+/**
+ * The fewest lines the rendered tokens take at any width. Code never wraps, so each of its lines is one line, blank
+ * ones too, and its bar one more. Link destinations and reference definitions show nothing. Decided from the text
+ * alone, so the row has its final height when it mounts.
+ */
+const renderedLines = tokens => {
+  let lines = 0;
+  for (const token of tokens) {
+    switch (token.type) {
+      case "code":
+        lines += token.text.split("\n").length + 1;
+        break;
+      case "list":
+        for (const item of token.items) lines += Math.max(1, renderedLines(item.tokens));
+        break;
+      case "table":
+        lines += token.rows.length + (token.header.some(cell => cell.text.trim()) ? 1 : 0);
+        break;
+      case "paragraph":
+      case "heading":
+      case "text":
+        lines += wrappedLines(token.tokens ? inlineText(token.tokens) : token.text);
+        break;
+      case "hr":
+        lines += 1;
+        break;
+      case "space":
+      case "def":
+        break;
+      default:
+        if ("tokens" in token && token.tokens) lines += renderedLines(token.tokens);else if ("text" in token) lines += wrappedLines(token.text);
+    }
+  }
+  return lines;
+};
+
+/** Messages link only to absolute URLs; a relative one would lead somewhere else on every page that shows it. */
+const isAbsoluteUrl = href => {
+  try {
+    return new URL(href).protocol !== "";
+  } catch {
+    return false;
+  }
+};
+const dateTimeOf = value => {
+  if (value === undefined) return undefined;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isFinite(date.getTime()) ? date.toISOString() : undefined;
+};
+
+/**
+ * An attachment URL the row may load or open: absolute with an allowed scheme, or relative to the page. A picture may
+ * also be a `blob:` URL or a `data:image/` URL, which an image element shows without running anything.
+ */
+const attachmentUrl = (url, picture = false) => {
+  if (!url) return undefined;
+  if (picture && /^data:image\//i.test(url)) return url;
+  try {
+    return (picture ? PICTURE_PROTOCOLS : ATTACHMENT_PROTOCOLS).has(new URL(url, "https://relative.invalid/").protocol) ? url : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+/** The aspect ratio a single image or video reserves, from its stored size. */
+const mediaRatio = media => {
+  const ratio = media.width > 0 && media.height > 0 ? media.width / media.height : 4 / 3;
+  return Math.min(MEDIA_RATIO_MAX, Math.max(MEDIA_RATIO_MIN, ratio));
+};
+
+/** The width of a single image or video: its stored width, at most the row's media height tall, never wider than the row. */
+const mediaWidth = media => {
+  const natural = Number.isFinite(media.width) && media.width > 0 ? `${media.width}px, ` : "";
+  return `min(100%, ${natural}calc(var(--k2b-message-media-height) * ${mediaRatio(media)}))`;
+};
+
+/** Only the `ti-*` glyph of `fileIcons`, which may add colour utilities that `@k2b/ui` does not ship. */
+const fileIcon = file => file.icon ?? `ti ${fileIcons.getFileIcon({
+  name: file.name,
+  type: "file",
+  mimeType: file.mediaType
+}).split(/\s+/).filter(token => token.startsWith("ti-")).join(" ")}`;
+
+/** A link, a button, or neither, depending on what the caller passes. */
+function AttachmentTarget(props) {
+  return _$createComponent(Show, {
+    get when() {
+      return props.onOpen;
+    },
+    get fallback() {
+      return _$createComponent(Show, {
+        get when() {
+          return attachmentUrl(props.href);
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return props.label;
+            },
+            get fallback() {
+              return (() => {
+                var _el$ = _$getNextElement(_tmpl$);
+                _$insert(_el$, () => props.children);
+                _$effect(_p$ => {
+                  var _v$ = props.class,
+                    _v$2 = props.style;
+                  _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
+                  _p$.t = _$style(_el$, _v$2, _p$.t);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$;
+              })();
+            },
+            children: label => (() => {
+              var _el$2 = _$getNextElement(_tmpl$2);
+              _$insert(_el$2, () => props.children);
+              _$effect(_p$ => {
+                var _v$3 = props.class,
+                  _v$4 = props.style,
+                  _v$5 = label();
+                _v$3 !== _p$.e && _$className(_el$2, _p$.e = _v$3);
+                _p$.t = _$style(_el$2, _v$4, _p$.t);
+                _v$5 !== _p$.a && _$setAttribute(_el$2, "aria-label", _p$.a = _v$5);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined
+              });
+              return _el$2;
+            })()
+          });
+        },
+        children: href => (() => {
+          var _el$3 = _$getNextElement(_tmpl$3);
+          _$insert(_el$3, () => props.children);
+          _$effect(_p$ => {
+            var _v$6 = props.class,
+              _v$7 = props.style,
+              _v$8 = href(),
+              _v$9 = props.label;
+            _v$6 !== _p$.e && _$className(_el$3, _p$.e = _v$6);
+            _p$.t = _$style(_el$3, _v$7, _p$.t);
+            _v$8 !== _p$.a && _$setAttribute(_el$3, "href", _p$.a = _v$8);
+            _v$9 !== _p$.o && _$setAttribute(_el$3, "aria-label", _p$.o = _v$9);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined
+          });
+          return _el$3;
+        })()
+      });
+    },
+    children: open => (() => {
+      var _el$4 = _$getNextElement(_tmpl$4);
+      _el$4.$$click = () => open()();
+      _$insert(_el$4, () => props.children);
+      _$effect(_p$ => {
+        var _v$0 = props.class,
+          _v$1 = props.style,
+          _v$10 = props.label;
+        _v$0 !== _p$.e && _$className(_el$4, _p$.e = _v$0);
+        _p$.t = _$style(_el$4, _v$1, _p$.t);
+        _v$10 !== _p$.a && _$setAttribute(_el$4, "aria-label", _p$.a = _v$10);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined
+      });
+      _$runHydrationEvents();
+      return _el$4;
+    })()
+  });
+}
+
+/**
+ * Renders the safe Markdown of `MarkdownView` with line breaks kept, absolute links only, and a copy control above
+ * every code block, and counts the fewest lines it takes. An edited message that does not collapse ends with the marker.
+ */
+const renderMessage = (text, locale, messages, edited) => {
+  const renderer = createSafeRenderer({
+    allowImages: false,
+    linkProtocols: LINK_PROTOCOLS,
+    linkTarget: "_blank",
+    locale
+  });
+  const renderLink = renderer.link.bind(renderer);
+  renderer.link = token => isAbsoluteUrl(token.href) ? renderLink(token) : renderer.parser.parseInline(token.tokens);
+  const renderCode = renderer.code.bind(renderer);
+  renderer.code = token => {
+    const language = token.lang?.match(/^\S{1,24}/)?.[0];
+    const block = renderCode(token).replace(/^<pre>/, '<pre tabindex="0">');
+    return '<div class="k2b-message-row__code"><div class="k2b-message-row__code-bar">' + `<span class="k2b-message-row__code-label">${escapeHtml(language ?? messages.code)}</span>` + '<button type="button" class="k2b-message-row__copy">' + `<span class="k2b-message-row__copy-idle"><i class="ti ti-copy" aria-hidden="true"></i>${escapeHtml(messages.copy)}</span>` + `<span class="k2b-message-row__copy-done"><i class="ti ti-check" aria-hidden="true"></i>${escapeHtml(messages.copied)}</span>` + `</button></div>${block}</div>`;
+  };
+  const marked = createSafeMarked(locale).setOptions({
+    breaks: true,
+    renderer
+  });
+  const tokens = marked.lexer(text);
+  const html = marked.parser(tokens);
+  const lines = renderedLines(tokens);
+  // A collapsed message would hide the end of its text, so its marker sits next to "Show more" instead.
+  if (!edited || lines > COLLAPSE_LINES) return {
+    html,
+    lines
+  };
+  // The marker ends the last paragraph, so it takes no line of its own there.
+  const marker = `<span class="k2b-message-row__edited">${escapeHtml(messages.messageEdited)}</span>`;
+  const end = html.trimEnd();
+  return {
+    html: end.endsWith("</p>") ? `${end.slice(0, -4)} ${marker}</p>` : `${html}<p>${marker}</p>`,
+    lines
+  };
+};
+
+/**
+ * One message in a conversation with many people: own messages on the right, others on the left with avatar, name,
+ * and time at the start of a group. Every part has its final height when the row mounts, so a virtualized list such
+ * as `VirtualFeed` keeps its positions.
+ */
+export function MessageRow(props) {
+  const messages = useUiMessages();
+  const locale = useLocale();
+  const textId = `k2b-message-${createUniqueId()}`;
+  const [expanded, setExpanded] = createSignal(false);
+  const rendered = createMemo(() => renderMessage(props.text, locale(), messages(), Boolean(props.edited)));
+  const collapsible = () => rendered().lines > COLLAPSE_LINES;
+  const collapsed = () => collapsible() && !expanded();
+  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() !== "";
+  const content = () => !props.deleted;
+  const media = createMemo(() => content() ? (props.attachments ?? []).filter(attachment => attachment.kind !== "file") : []);
+  const files = createMemo(() => content() ? (props.attachments ?? []).filter(attachment => attachment.kind === "file") : []);
+  const shownMedia = () => media().slice(0, MEDIA_SHOWN);
+  const hiddenMedia = () => media().length - shownMedia().length;
+  let text;
+  let copiedTimer;
+  onCleanup(() => clearTimeout(copiedTimer));
+  const copyCode = event => {
+    const button = event.target?.closest?.(".k2b-message-row__copy");
+    if (!button || !text?.contains(button)) return;
+    const code = button.closest(".k2b-message-row__code")?.querySelector("pre")?.textContent ?? "";
+    copyText(code).then(() => {
+      for (const other of text?.querySelectorAll(".k2b-message-row__copy[data-copied]") ?? []) delete other.dataset.copied;
+      button.dataset.copied = "";
+      announce(messages().copied);
+      clearTimeout(copiedTimer);
+      copiedTimer = setTimeout(() => delete button.dataset.copied, COPIED_MS);
+    }, () => {});
+  };
+
+  // A keyboard user who reaches a link or code block in the hidden or faded part of a collapsed message gets the whole
+  // message. The collapsed text clips instead of scrolling, so the browser cannot scroll it to the target instead.
+  const revealFocus = event => {
+    if (!text || !collapsed() || !(event.target instanceof Element)) return;
+    const fade = text.getBoundingClientRect().bottom - FADE_LINES * Number.parseFloat(getComputedStyle(text).lineHeight);
+    if (event.target.getBoundingClientRect().bottom > fade) setExpanded(true);
+  };
+  const header = () => [(() => {
+    var _el$5 = _$getNextElement(_tmpl$5);
+    _$insert(_el$5, () => props.author.name);
+    return _el$5;
+  })(), _$createComponent(Show, {
+    get when() {
+      return props.badge;
+    },
+    get children() {
+      var _el$6 = _$getNextElement(_tmpl$6);
+      _$insert(_el$6, () => props.badge);
+      return _el$6;
+    }
+  }), (() => {
+    var _el$7 = _$getNextElement(_tmpl$7);
+    _$insert(_el$7, () => props.time);
+    _$effect(() => _$setAttribute(_el$7, "datetime", dateTimeOf(props.dateTime)));
+    return _el$7;
+  })()];
+  const quote = value => [_$getNextElement(_tmpl$8), (() => {
+    var _el$9 = _$getNextElement(_tmpl$9),
+      _el$0 = _el$9.firstChild,
+      _el$10 = _el$0.firstChild,
+      [_el$11, _co$] = _$getNextMarker(_el$10.nextSibling),
+      _el$1 = _el$11.nextSibling,
+      _el$12 = _el$0.nextSibling,
+      _el$13 = _el$12.nextSibling,
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$2] = _$getNextMarker(_el$14.nextSibling);
+    _$insert(_el$0, () => messages().messageReplyTo, _el$11, _co$);
+    _$insert(_el$12, () => value.author);
+    _$insert(_el$9, () => value.text, _el$15, _co$2);
+    return _el$9;
+  })()];
+
+  /** 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" ? [messages().messageVideo, item.duration].filter(Boolean).join(" ") : "", more > 0 ? messages().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 => messages().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, {
+      "class": "k2b-message-row__media-item",
+      get style() {
+        return _$memo(() => media().length === 1)() ? {
+          "aspect-ratio": String(mediaRatio(item))
+        } : undefined;
+      },
+      get label() {
+        return mediaLabel(item, more());
+      },
+      get onOpen() {
+        return item.onOpen;
+      },
+      get href() {
+        return item.href;
+      },
+      get children() {
+        return [(() => {
+          var _el$22 = _$getNextElement(_tmpl$10);
+          _$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);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined
+          });
+          return _el$22;
+        })(), _$createComponent(Show, {
+          get when() {
+            return item.kind === "video";
+          },
+          get children() {
+            return [_$getNextElement(_tmpl$11), _$createComponent(Show, {
+              get when() {
+                return item.duration;
+              },
+              get children() {
+                var _el$24 = _$getNextElement(_tmpl$12);
+                _$insert(_el$24, () => item.duration);
+                return _el$24;
+              }
+            })];
+          }
+        }), _$createComponent(Show, {
+          get when() {
+            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;
+          }
+        })];
+      }
+    });
+  };
+  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),
+      _el$60 = _el$59.nextSibling,
+      [_el$61, _co$9] = _$getNextMarker(_el$60.nextSibling),
+      _el$62 = _el$61.nextSibling,
+      [_el$63, _co$0] = _$getNextMarker(_el$62.nextSibling),
+      _el$64 = _el$63.nextSibling,
+      [_el$65, _co$1] = _$getNextMarker(_el$64.nextSibling),
+      _el$66 = _el$65.nextSibling,
+      [_el$67, _co$10] = _$getNextMarker(_el$66.nextSibling),
+      _el$68 = _el$67.nextSibling,
+      [_el$69, _co$11] = _$getNextMarker(_el$68.nextSibling),
+      _el$70 = _el$69.nextSibling,
+      [_el$71, _co$12] = _$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, {
+      get when() {
+        return !props.own;
+      },
+      get children() {
+        var _el$30 = _$getNextElement(_tmpl$15);
+        _$insert(_el$30, _$createComponent(Show, {
+          get when() {
+            return groupStart();
+          },
+          get children() {
+            var _el$31 = _$getNextElement(_tmpl$14);
+            _$insert(_el$31, _$createComponent(Avatar, {
+              get name() {
+                return props.author.name;
+              },
+              get src() {
+                return props.author.avatar;
+              },
+              get icon() {
+                return props.author.icon;
+              },
+              size: "sm"
+            }));
+            return _el$31;
+          }
+        }));
+        return _el$30;
+      }
+    }), _el$82, _co$17);
+    _$insert(_el$32, _$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;
+        })();
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return !props.own;
+          },
+          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;
+            })();
+          },
+          get children() {
+            var _el$33 = _$getNextElement(_tmpl$16);
+            _$insert(_el$33, header);
+            return _el$33;
+          }
+        });
+      }
+    }), _el$59, _co$8);
+    _$insert(_el$32, _$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, () => messages().messageForwarded);
+        return _el$34;
+      }
+    }), _el$61, _co$9);
+    _$insert(_el$32, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!content())() && props.quote;
+      },
+      children: value => _$createComponent(Show, {
+        get when() {
+          return value().onSelect;
+        },
+        get fallback() {
+          return (() => {
+            var _el$98 = _$getNextElement(_tmpl$32);
+            _$insert(_el$98, () => quote(value()));
+            return _el$98;
+          })();
+        },
+        children: select => (() => {
+          var _el$99 = _$getNextElement(_tmpl$33);
+          _el$99.$$click = () => select()();
+          _$insert(_el$99, () => quote(value()));
+          _$runHydrationEvents();
+          return _el$99;
+        })()
+      })
+    }), _el$63, _co$0);
+    _$insert(_el$32, _$createComponent(Show, {
+      get when() {
+        return hasBubble();
+      },
+      get children() {
+        var _el$37 = _$getNextElement(_tmpl$21);
+        _$insert(_el$37, _$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, () => messages().messageDeleted, _el$103, _co$22);
+              return _el$100;
+            })();
+          },
+          get children() {
+            return _$createComponent(Show, {
+              get when() {
+                return !writing();
+              },
+              get fallback() {
+                return _$getNextElement(_tmpl$35);
+              },
+              get children() {
+                return [(() => {
+                  var _el$38 = _$getNextElement(_tmpl$18);
+                  _el$38.$$focusin = revealFocus;
+                  _el$38.$$click = copyCode;
+                  var _ref$ = text;
+                  typeof _ref$ === "function" ? _$use(_ref$, _el$38) : text = _el$38;
+                  _$setAttribute(_el$38, "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);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined
+                  });
+                  _$runHydrationEvents();
+                  return _el$38;
+                })(), _$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, {
+                      variant: "text",
+                      size: "xs",
+                      "class": "k2b-message-row__more",
+                      get ["aria-expanded"]() {
+                        return expanded() ? "true" : "false";
+                      },
+                      "aria-controls": textId,
+                      onClick: () => setExpanded(value => !value),
+                      get children() {
+                        return _$memo(() => !!expanded())() ? messages().messageShowLess : messages().messageShowMore;
+                      }
+                    }), _el$42, _co$4);
+                    _$insert(_el$39, _$createComponent(Show, {
+                      get when() {
+                        return props.edited;
+                      },
+                      get children() {
+                        var _el$40 = _$getNextElement(_tmpl$19);
+                        _$insert(_el$40, () => messages().messageEdited);
+                        return _el$40;
+                      }
+                    }), _el$44, _co$5);
+                    return _el$39;
+                  }
+                })];
+              }
+            });
+          }
+        }));
+        _$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);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$37;
+      }
+    }), _el$65, _co$1);
+    _$insert(_el$32, _$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, () => messages().messageEdited);
+        return _el$45;
+      }
+    }), _el$67, _co$10);
+    _$insert(_el$32, _$createComponent(Show, {
+      get when() {
+        return media().length > 0;
+      },
+      get children() {
+        var _el$48 = _$getNextElement(_tmpl$23);
+        _$insert(_el$48, _$createComponent(For, {
+          get each() {
+            return shownMedia();
+          },
+          children: (item, index) => mediaItem(item, index)
+        }));
+        _$effect(_p$ => {
+          var _v$25 = messages().attachments,
+            _v$26 = Math.min(media().length, MEDIA_SHOWN),
+            _v$27 = 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);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        return _el$48;
+      }
+    }), _el$69, _co$11);
+    _$insert(_el$32, _$createComponent(Show, {
+      get when() {
+        return files().length > 0;
+      },
+      get children() {
+        var _el$49 = _$getNextElement(_tmpl$24);
+        _$insert(_el$49, _$createComponent(For, {
+          get each() {
+            return files();
+          },
+          children: file => _$createComponent(AttachmentTarget, {
+            "class": "k2b-message-row__file",
+            get onOpen() {
+              return file.onOpen;
+            },
+            get href() {
+              return file.href;
+            },
+            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$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, {
+                  get when() {
+                    return file.detail;
+                  },
+                  get children() {
+                    var _el$109 = _$getNextElement(_tmpl$37);
+                    _$insert(_el$109, () => file.detail);
+                    return _el$109;
+                  }
+                }), _el$111, _co$23);
+                return _el$107;
+              })()];
+            }
+          })
+        }));
+        return _el$49;
+      }
+    }), _el$71, _co$12);
+    _$insert(_el$32, _$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;
+      }
+    }), _el$73, _co$13);
+    _$insert(_el$32, _$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;
+      }
+    }), _el$75, _co$14);
+    _$insert(_el$32, _$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, {
+          get when() {
+            return (thread().participants?.length ?? 0) > 0;
+          },
+          get children() {
+            var _el$113 = _$getNextElement(_tmpl$39);
+            _$insert(_el$113, _$createComponent(For, {
+              get each() {
+                return thread().participants?.slice(0, 3);
+              },
+              children: person => _$createComponent(Avatar, {
+                get name() {
+                  return person.name;
+                },
+                get src() {
+                  return person.avatar;
+                },
+                get icon() {
+                  return person.icon;
+                },
+                size: "xs"
+              })
+            }));
+            return _el$113;
+          }
+        }), _el$116, _co$24);
+        _$insert(_el$114, () => messages().messageReplies({
+          count: thread().count
+        }));
+        _$insert(_el$112, _$createComponent(Show, {
+          get when() {
+            return thread().lastReply;
+          },
+          children: time => (() => {
+            var _el$119 = _$getNextElement(_tmpl$41);
+            _$insert(_el$119, () => messages().messageLastReply({
+              time: time()
+            }));
+            _$effect(() => _$setAttribute(_el$119, "datetime", dateTimeOf(thread().lastReplyDateTime)));
+            return _el$119;
+          })()
+        }), _el$118, _co$25);
+        _$runHydrationEvents();
+        return _el$112;
+      })()
+    }), _el$77, _co$15);
+    _$insert(_el$32, _$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, {
+          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 messages().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 = messages().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, {
+          get when() {
+            return hasLine();
+          },
+          get children() {
+            var _el$53 = _$getNextElement(_tmpl$26);
+            _$insert(_el$53, _$createComponent(Show, {
+              get when() {
+                return props.progress;
+              },
+              get fallback() {
+                return [_$createComponent(Show, {
+                  get when() {
+                    return props.status === "pending";
+                  },
+                  get children() {
+                    return [_$getNextElement(_tmpl$44), (() => {
+                      var _el$127 = _$getNextElement(_tmpl$);
+                      _$insert(_el$127, () => messages().sending);
+                      return _el$127;
+                    })()];
+                  }
+                }), _$createComponent(Show, {
+                  get when() {
+                    return props.status === "failed";
+                  },
+                  get children() {
+                    return [_$getNextElement(_tmpl$45), (() => {
+                      var _el$129 = _$getNextElement(_tmpl$);
+                      _$insert(_el$129, () => messages().messageNotSent);
+                      return _el$129;
+                    })(), _$createComponent(Show, {
+                      get when() {
+                        return props.onRetry;
+                      },
+                      children: retry => _$createComponent(Button, {
+                        variant: "text",
+                        size: "xs",
+                        onClick: () => retry()(),
+                        get children() {
+                          return messages().messageRetry;
+                        }
+                      })
+                    })];
+                  }
+                }), _$createComponent(Show, {
+                  get when() {
+                    return _$memo(() => props.status !== "pending")() && props.status !== "failed";
+                  },
+                  get children() {
+                    return _$createComponent(Show, {
+                      get when() {
+                        return props.receipt;
+                      },
+                      get fallback() {
+                        return _$createComponent(Show, {
+                          get when() {
+                            return props.status === "sent";
+                          },
+                          get children() {
+                            return [_$getNextElement(_tmpl$46), (() => {
+                              var _el$131 = _$getNextElement(_tmpl$47);
+                              _$insert(_el$131, () => messages().messageSent);
+                              return _el$131;
+                            })()];
+                          }
+                        });
+                      },
+                      children: receipt => [_$getNextElement(_tmpl$48), (() => {
+                        var _el$133 = _$getNextElement(_tmpl$49);
+                        _$insert(_el$133, receipt);
+                        return _el$133;
+                      })()]
+                    });
+                  }
+                })];
+              },
+              children: progress => [_$getNextElement(_tmpl$50), (() => {
+                var _el$135 = _$getNextElement(_tmpl$51);
+                _$insert(_el$135, () => progress().status);
+                return _el$135;
+              })(), _$createComponent(Show, {
+                get when() {
+                  return progress().onStop;
+                },
+                children: stop => _$createComponent(Button, {
+                  variant: "text",
+                  size: "xs",
+                  onClick: () => stop()(),
+                  get children() {
+                    return messages().messageStop;
+                  }
+                })
+              })]
+            }));
+            return _el$53;
+          }
+        }), _el$57, _co$7);
+        return _el$52;
+      }
+    }), _el$79, _co$16);
+    _$insert(_el$29, _$createComponent(Show, {
+      get when() {
+        return (props.actions?.length ?? 0) > 0;
+      },
+      get children() {
+        var _el$80 = _$getNextElement(_tmpl$28);
+        _$insert(_el$80, _$createComponent(For, {
+          get each() {
+            return props.actions;
+          },
+          children: action => _$createComponent(IconButton, {
+            get label() {
+              return action.label;
+            },
+            size: "sm",
+            get disabled() {
+              return action.disabled;
+            },
+            onClick: () => action.onSelect(),
+            get children() {
+              var _el$136 = _$getNextElement(_tmpl$52);
+              _$effect(() => _$className(_el$136, action.icon));
+              return _el$136;
+            }
+          })
+        }));
+        _$effect(() => _$setAttribute(_el$80, "aria-label", messages().messageActions));
+        return _el$80;
+      }
+    }), _el$84, _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);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$29;
+  })();
+}
+
+/** 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, {
+      get when() {
+        return props.icon;
+      },
+      children: icon => (() => {
+        var _el$144 = _$getNextElement(_tmpl$52);
+        _$effect(() => _$className(_el$144, icon()));
+        return _el$144;
+      })()
+    }), _el$141, _co$28);
+    _$insert(_el$138, () => props.children);
+    _$insert(_el$137, _$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;
+      }
+    }), _el$143, _co$29);
+    _$effect(() => _$className(_el$137, props.class ? `k2b-message-system-row ${props.class}` : "k2b-message-system-row"));
+    return _el$137;
+  })();
+}
+_$delegateEvents(["click", "focusin"]);
+//# sourceMappingURL=MessageRow.js.map