@k2b/ui 0.14.0 → 0.16.0

package/dist/ssr/content/MessageRow.js

@@ -0,0 +1,796 @@
+import { memo as _$memo } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrStyle as _$ssrStyle } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = ["<span", " style=\"", "\">", "</span>"],
+  _tmpl$2 = ["<span", " style=\"", "\" role=\"img\"", ">", "</span>"],
+  _tmpl$3 = ["<a", " style=\"", "\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "</a>"],
+  _tmpl$4 = ["<button type=\"button\"", " style=\"", "\"", ">", "</button>"],
+  _tmpl$5 = ["<span class=\"k2b-message-row__name\">", "</span>"],
+  _tmpl$6 = ["<span class=\"k2b-message-row__badge\">", "</span>"],
+  _tmpl$7 = ["<time class=\"k2b-message-row__time\"", ">", "</time>"],
+  _tmpl$8 = "<i class=\"ti ti-arrow-back-up\" aria-hidden=\"true\"></i>",
+  _tmpl$9 = ["<span class=\"k2b-message-row__quote-text\"><span class=\"k2b-sr-only\">", " </span><span class=\"k2b-message-row__quote-author\">", "</span> ", "</span>"],
+  _tmpl$0 = ["<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\">", "</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>"];
+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 _$ssr(_tmpl$, _$ssrAttribute("class", _$escape(props.class, true), false), _$ssrStyle(props.style), _$escape(props.children));
+            },
+            children: label => _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(props.class, true), false), _$ssrStyle(props.style), _$ssrAttribute("aria-label", _$escape(label(), true), false), _$escape(props.children))
+          });
+        },
+        children: href => _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(props.class, true), false), _$ssrStyle(props.style), _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$escape(props.children))
+      });
+    },
+    children: open => _$ssr(_tmpl$4, _$ssrAttribute("class", _$escape(props.class, true), false), _$ssrStyle(props.style), _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$escape(props.children))
+  });
+}
+
+/**
+ * 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 = () => [_$ssr(_tmpl$5, _$escape(props.author.name)), _$createComponent(Show, {
+    get when() {
+      return props.badge;
+    },
+    get children() {
+      return _$ssr(_tmpl$6, _$escape(props.badge));
+    }
+  }), _$ssr(_tmpl$7, _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time))];
+  const quote = value => [_$ssr(_tmpl$8), _$ssr(_tmpl$9, _$escape(messages().messageReplyTo), _$escape(value.author), _$escape(value.text))];
+
+  /** 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 _$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, {
+      "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 [_$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, {
+          get when() {
+            return item.kind === "video";
+          },
+          get children() {
+            return [_$ssr(_tmpl$11), _$createComponent(Show, {
+              get when() {
+                return item.duration;
+              },
+              get children() {
+                return _$ssr(_tmpl$12, _$escape(item.duration));
+              }
+            })];
+          }
+        }), _$createComponent(Show, {
+          get when() {
+            return more() > 0;
+          },
+          get children() {
+            return _$ssr(_tmpl$13, _$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, {
+    get when() {
+      return !props.own;
+    },
+    get children() {
+      return _$ssr(_tmpl$15, _$escape(_$createComponent(Show, {
+        get when() {
+          return groupStart();
+        },
+        get children() {
+          return _$ssr(_tmpl$14, _$escape(_$createComponent(Avatar, {
+            get name() {
+              return props.author.name;
+            },
+            get src() {
+              return props.author.avatar;
+            },
+            get icon() {
+              return props.author.icon;
+            },
+            size: "sm"
+          })));
+        }
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return groupStart();
+    },
+    get fallback() {
+      return _$ssr(_tmpl$30, _$escape(props.author.name), _$escape(props.time));
+    },
+    get children() {
+      return _$createComponent(Show, {
+        get when() {
+          return !props.own;
+        },
+        get fallback() {
+          return _$ssr(_tmpl$31, _$escape(props.author.name), _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time));
+        },
+        get children() {
+          return _$ssr(_tmpl$16, _$escape(header()));
+        }
+      });
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!content())() && props.forwarded;
+    },
+    get children() {
+      return _$ssr(_tmpl$17, _$escape(messages().messageForwarded));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!content())() && props.quote;
+    },
+    children: value => _$createComponent(Show, {
+      get when() {
+        return value().onSelect;
+      },
+      get fallback() {
+        return _$ssr(_tmpl$32, _$escape(quote(value())));
+      },
+      children: select => _$ssr(_tmpl$33, _$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, {
+        get when() {
+          return !props.deleted;
+        },
+        get fallback() {
+          return _$ssr(_tmpl$34, _$escape(messages().messageDeleted));
+        },
+        get children() {
+          return _$createComponent(Show, {
+            get when() {
+              return !writing();
+            },
+            get fallback() {
+              return _$ssr(_tmpl$35);
+            },
+            get children() {
+              return [_$ssr(_tmpl$18, _$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, {
+                    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 expanded() ? messages().messageShowLess : messages().messageShowMore;
+                    }
+                  })), _$escape(_$createComponent(Show, {
+                    get when() {
+                      return props.edited;
+                    },
+                    get children() {
+                      return _$ssr(_tmpl$19, _$escape(messages().messageEdited));
+                    }
+                  })));
+                }
+              })];
+            }
+          });
+        }
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!(content() && props.edited))() && !hasBubble();
+    },
+    get children() {
+      return _$ssr(_tmpl$22, _$escape(messages().messageEdited));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return media().length > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$23, _$ssrAttribute("aria-label", _$escape(messages().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() {
+          return shownMedia();
+        },
+        children: (item, index) => mediaItem(item, index)
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return files().length > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$24, _$escape(_$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 [_$ssr(_tmpl$36, _$ssrAttribute("class", _$escape(fileIcon(file), true), false)), _$ssr(_tmpl$38, _$escape(file.name), _$escape(_$createComponent(Show, {
+              get when() {
+                return file.detail;
+              },
+              get children() {
+                return _$ssr(_tmpl$37, _$escape(file.detail));
+              }
+            })))];
+          }
+        })
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!content())() && props.linkPreview;
+    },
+    get children() {
+      return _$ssr(_tmpl$25, _$escape(props.linkPreview));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!content())() && props.card;
+    },
+    get children() {
+      return _$ssr(_tmpl$25, _$escape(props.card));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.thread;
+    },
+    children: thread => _$ssr(_tmpl$40, _$escape(_$createComponent(Show, {
+      get when() {
+        return (thread().participants?.length ?? 0) > 0;
+      },
+      get children() {
+        return _$ssr(_tmpl$39, _$escape(_$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"
+          })
+        })));
+      }
+    })), _$escape(messages().messageReplies({
+      count: thread().count
+    })), _$escape(_$createComponent(Show, {
+      get when() {
+        return thread().lastReply;
+      },
+      children: time => _$ssr(_tmpl$41, _$ssrAttribute("datetime", _$escape(dateTimeOf(thread().lastReplyDateTime), true), false), _$escape(messages().messageLastReply({
+        time: time()
+      })))
+    })))
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return hasFooter();
+    },
+    get children() {
+      return _$ssr(_tmpl$27, _$escape(_$createComponent(Show, {
+        get when() {
+          return reactions();
+        },
+        children: list => _$ssr(_tmpl$42, _$ssrAttribute("aria-label", _$escape(messages().messageReactions, true), false) + _$ssrAttribute("data-empty", list().length === 0 ? "" : _$escape(undefined, true), false), _$escape(_$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)
+                  })
+                });
+              }
+            });
+          }
+        })), _$escape(_$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 _$ssr(_tmpl$43);
+            }
+          })
+        })))
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return hasLine();
+        },
+        get children() {
+          return _$ssr(_tmpl$26, _$escape(_$createComponent(Show, {
+            get when() {
+              return props.progress;
+            },
+            get fallback() {
+              return [_$createComponent(Show, {
+                get when() {
+                  return props.status === "pending";
+                },
+                get children() {
+                  return [_$ssr(_tmpl$44), _$ssr(_tmpl$45, _$escape(messages().sending))];
+                }
+              }), _$createComponent(Show, {
+                get when() {
+                  return props.status === "failed";
+                },
+                get children() {
+                  return [_$ssr(_tmpl$46), _$ssr(_tmpl$45, _$escape(messages().messageNotSent)), _$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 [_$ssr(_tmpl$47), _$ssr(_tmpl$48, _$escape(messages().messageSent))];
+                        }
+                      });
+                    },
+                    children: receipt => [_$ssr(_tmpl$49), _$ssr(_tmpl$50, _$escape(receipt()))]
+                  });
+                }
+              })];
+            },
+            children: progress => [_$ssr(_tmpl$51), _$ssr(_tmpl$52, _$escape(progress().status)), _$createComponent(Show, {
+              get when() {
+                return progress().onStop;
+              },
+              children: stop => _$createComponent(Button, {
+                variant: "text",
+                size: "xs",
+                onClick: () => stop()(),
+                get children() {
+                  return messages().messageStop;
+                }
+              })
+            })]
+          })));
+        }
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return (props.actions?.length ?? 0) > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$28, _$ssrAttribute("aria-label", _$escape(messages().messageActions, true), false), _$escape(_$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() {
+            return _$ssr(_tmpl$53, _$ssrAttribute("class", _$escape(action.icon, true), false));
+          }
+        })
+      })));
+    }
+  })));
+}
+
+/** 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, {
+    get when() {
+      return props.icon;
+    },
+    children: icon => _$ssr(_tmpl$53, _$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));
+    }
+  })));
+}
+//# sourceMappingURL=MessageRow.js.map