malice

<svelte:options immutable />

<script lang="ts">

  import MediaAttachmentView from './MediaAttachmentView.svelte';

  import MxcAvatar from './MxcAvatar.svelte';

  import Emoji from './Emoji.svelte';

  import EmojiText from './EmojiText.svelte';

  import MessageText from './MessageText.svelte';

  import ReactionPicker from './ReactionPicker.svelte';

  import LinkCard from './LinkCard.svelte';

  import { afterUpdate, onDestroy } from 'svelte';

  import { dissolve, expand, rowIn, rowOut, settleHeight } from './motion';

  import { selectedRow } from './selected-row';

  import { mediaUrl, messageMediaUrl } from './api';

  import { keywordMatcher } from './keywords';

  import type { ImagePack, LinkPreview, Person, QuickReaction, ReplyReference, SendState, TimelineContent, TimelineEvent } from './types';

  import { QUICK_REACTIONS_PER_ROW, senderLabel } from './types';

  import { formatClock, formatDay, initialsOf, senderHue } from './format';

  import { findUrls } from './urls';

  import { mentionsFromHtml, resolveMentions, stripMarkdownPills } from './mentions';

  export let itemId: string;

  export let event: TimelineEvent;

  export let showSender: boolean;

  export let reacting: boolean;

  export let onReact: (eventId: string, key: string, shortcode?: string) => void;

  export let senderAvatar: string | null = null;

  export let quickReactions: QuickReaction[] = [];

  export let packs: ImagePack[] = [];

  export let onQuickChange: (list: QuickReaction[]) => void = () => {};

  export let linkPreviews: Record<string, LinkPreview | null> = {};

  export let loadPreview: ((url: string) => void) | null = null;

  export let people: Record<string, Person> = {};

  export let onReply: ((target: ReplyReference) => void) | null = null;

  export let onJump: ((eventId: string) => void) | null = null;

  export let onEdit: ((eventId: string, body: string) => void) | null = null;

  export let editing = false;

  export let showSent = true;

  export let readOnly = false;

  export let self: string | null = null;

  export let onUser: ((userId: string, x: number, y: number, menu: boolean) => void) | null = null;

  export let onCloneSticker: ((eventId: string, body: string, x: number, y: number) => void) | null = null;

  export let onMore: ((event: TimelineEvent, x: number, y: number) => void) | null = null;

  export let onOpenThread: ((rootEventId: string) => void) | null = null;

  $: lag = lagLabel(event);

  $: threadRoot = onOpenThread && interactive && event.event_id && !event.thread_root ? event.event_id : null;

  $: threadReplies = event.thread_summary?.reply_count ?? 0;

  function lagLabel(event: TimelineEvent): string | null {

    const lag = event.delivery_lag_ms;

    if (!lag) return null;

    if (lag < 60 * 60 * 1000) return `${Math.max(1, Math.floor(lag / 60000))}m`;

    if (lag < 24 * 60 * 60 * 1000) return `${Math.floor(lag / 3600000)}h`;

    return `${Math.floor(lag / 86400000)}d`;

  }

  function openUser(ev: MouseEvent, menu: boolean): void {

    if (!onUser) return;

    const rect = (ev.currentTarget as HTMLElement).getBoundingClientRect();

    onUser(event.sender.user_id, menu ? ev.clientX : rect.left, menu ? ev.clientY : rect.bottom + 4, menu);

  }

  const PICKER_WIDTH = 320;

  const PICKER_HEIGHT = 380;

  const PICKER_MARGIN = 8;

  const MAX_READERS = 3;

  const STATE_LABELS: Record<string, string> = {

    'm.room.pinned_events': 'changed the pinned messages',

    'm.room.power_levels': 'changed the room permissions',

    'm.room.join_rules': 'changed who can join',

    'm.room.history_visibility': 'changed who can read history',

    'm.room.guest_access': 'changed guest access',

    'm.room.canonical_alias': 'changed the room address',

    'm.room.server_acl': 'changed the server access list',

    'm.space.child': 'changed the rooms in this space',

    'm.space.parent': 'changed the parent space',

    'im.ponies.room_emotes': 'updated a sticker pack'

  };

  const owner = Symbol();

  let row: HTMLDivElement;

  let pickerPop: HTMLDivElement | undefined;

  let hovered = false;

  let focused = false;

  let reactorKey: string | null = null;

  let pickerOpen = false;

  let pickerStyle = '';

  const MEMBERSHIP_LABELS: Record<string, string> = {

    Joined: 'joined the room',

    Left: 'left the room',

    Banned: 'was banned',

    Unbanned: 'was unbanned',

    Kicked: 'was kicked',

    KickedAndBanned: 'was kicked and banned',

    Invited: 'was invited',

    InvitationAccepted: 'accepted the invite',

    InvitationRejected: 'rejected the invite',

    InvitationRevoked: 'had the invite revoked',

    Knocked: 'requested to join',

    KnockAccepted: 'was let in',

    KnockRetracted: 'withdrew the request to join',

    KnockDenied: 'had the request to join denied'

  };

  $: name = event.sender.display_name ?? people[event.sender.user_id]?.name ?? event.sender.user_id;

  $: displayName = event.sender.name_ambiguous ? `${name} (${event.sender.user_id})` : name;

  $: readers = event.read_by.map((id) => people[id] ?? { user_id: id, name: id, avatar: null });

  $: interactive = event.content.kind === 'Message' || event.content.kind === 'Sticker' || event.content.kind === 'Poll';

  $: message = event.content.kind === 'Message' ? event.content.message : null;

  $: rawText = message ? (message.media ? message.media.caption : message.body) ?? '' : '';

  $: formattedBody = message?.formatted_body ?? null;

  $: hasMessage = message !== null;

  $: stripped = stripMarkdownPills(rawText);

  $: linked = hasMessage ? [...mentionsFromHtml(formattedBody), ...stripped.mentions] : [];

  $: nameOf = (id: string) => people[id]?.name ?? null;

  $: mentions = resolveMentions(stripped.text, linked);

  $: mentionsMe = self !== null && [...linked, ...mentions].some((m) => m.user_id === self);

  $: own = event.own;

  $: highlighted = event.highlight === true;

  $: keywordHit = !own && (highlighted || (hasMessage && ($keywordMatcher?.test(stripped.text) ?? false)));

  $: previews = findUrls(stripped.text);

  $: bundled = message ? message.link_previews : [];

  $: cards = previews

    .map((link) => ({ link, preview: bundled.find((b) => b.url === link.href) ?? linkPreviews[link.href] ?? null }))

    .filter((c) => c.preview && (c.preview.title || c.preview.description || c.preview.image));

  $: if (loadPreview) {

    for (const link of previews) {

      if (!bundled.some((b) => b.url === link.href) && !(link.href in linkPreviews)) loadPreview(link.href);

    }

  }

  $: sent = interactive && showSent && event.own && event.send_state.kind === 'Sent' && event.event_id !== null;

  let lastShape = '';

  let heightBefore: number | null = null;

  $: noteShape(`${event.content.kind}|${rawText}|${formattedBody}|${message?.edited}|${event.reply_to?.details.kind}|${showSender}`);

  function noteShape(shape: string): void {

    if (row && lastShape && shape !== lastShape) heightBefore = row.offsetHeight;

    lastShape = shape;

  }

  afterUpdate(() => {

    if (heightBefore === null) return;

    const from = heightBefore;

    heightBefore = null;

    requestAnimationFrame(() => row && settleHeight(row, from));

  });

  function sendLabel(state: SendState): string {

    if (state.kind === 'Failed') return state.will_retry ? 'failed — will retry' : 'failed — not delivered';

    if (state.kind === 'Sending') return 'sending…';

    return '';

  }

  $: selected = $selectedRow === owner;

  $: showActions = !readOnly && interactive && !!event.event_id && (selected || pickerOpen || ($selectedRow === null && (hovered || focused)));

  $: syncSelectionListeners(selected);

  $: syncPickerListeners(pickerOpen);

  function onEscape(e: KeyboardEvent) {

    if (e.key === 'Escape') select(false);

  }

  let selectionAttached = false;

  let pickerAttached = false;

  function syncSelectionListeners(on: boolean) {

    if (on === selectionAttached) return;

    selectionAttached = on;

    if (on) {

      window.addEventListener('pointerdown', deselectOutside);

      window.addEventListener('keydown', onEscape);

    } else {

      window.removeEventListener('pointerdown', deselectOutside);

      window.removeEventListener('keydown', onEscape);

    }

  }

  function syncPickerListeners(on: boolean) {

    if (on === pickerAttached) return;

    pickerAttached = on;

    const op = on ? 'addEventListener' : 'removeEventListener';

    window[op]('scroll', closeOnScroll, true);

    window[op]('resize', closePicker);

  }

  onDestroy(() => {

    syncSelectionListeners(false);

    syncPickerListeners(false);

    selectedRow.update((o) => (o === owner ? null : o));

  });

  function select(on: boolean) {

    selectedRow.update((o) => (on ? owner : o === owner ? null : o));

  }

  function toggleSelected(e: MouseEvent) {

    if (readOnly || !interactive || (e.target as Element).closest('a, button, input, video, audio, .picker-pop')) return;

    select(!selected);

  }

  function onRowKeydown(e: KeyboardEvent) {

    if (e.target !== row || readOnly || !interactive) return;

    if (e.key === 'Enter' || e.key === ' ') {

      e.preventDefault();

      select(!selected);

    }

  }

  function onFocusOut(e: FocusEvent) {

    if (!row.contains(e.relatedTarget as Node | null)) focused = false;

  }

  function deselectOutside(e: PointerEvent) {

    if (selected && !pickerOpen && !row.contains(e.target as Node)) select(false);

  }

  function openPicker(e: MouseEvent) {

    if (pickerOpen) {

      pickerOpen = false;

      return;

    }

    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();

    const height = Math.min(PICKER_HEIGHT, window.innerHeight - 2 * PICKER_MARGIN);

    const below = window.innerHeight - rect.bottom - PICKER_MARGIN >= height;

    const top = below ? rect.bottom + 4 : Math.max(PICKER_MARGIN, rect.top - height - 4);

    const maxLeft = window.innerWidth - PICKER_WIDTH - PICKER_MARGIN;

    const left = Math.max(PICKER_MARGIN, Math.min(rect.right - PICKER_WIDTH, maxLeft));

    pickerStyle = `top:${top}px;left:${left}px;height:${height}px`;

    select(true);

    pickerOpen = true;

  }

  function closePicker() {

    pickerOpen = false;

  }

  function isImageKey(key: string): boolean {

    return key.startsWith('mxc://') || packs.some((p) => p.images.some((i) => i.reaction_key === key));

  }

  function react(key: string, shortcode: string | null) {

    if (shortcode && isImageKey(key)) onReact(event.event_id ?? '', key, shortcode);

    else onReact(event.event_id ?? '', key);

  }

  function reply() {

    if (!event.event_id || !onReply) return;

    onReply({

      event_id: event.event_id,

      details: { kind: 'Ready', sender: event.sender, content: event.content, timestamp_ms: event.timestamp_ms }

    });

  }

  $: editableBody =

    event.own && event.editable && event.event_id && event.content.kind === 'Message' && event.content.message.kind === 'Text'

      ? event.content.message.body

      : null;

  function edit() {

    if (!event.event_id || editableBody === null || !onEdit) return;

    onEdit(event.event_id, editableBody);

  }

  function reactorNames(senders: string[]): string {

    const names = senders.map((id) => people[id]?.name ?? id);

    if (names.length <= 12) return names.join(', ');

    return `${names.slice(0, 12).join(', ')} and ${names.length - 12} more`;

  }

  function pick(key: string, shortcode: string | null) {

    pickerOpen = false;

    react(key, shortcode);

  }

  function closeOnScroll(e: Event) {

    if (pickerOpen && !pickerPop?.contains(e.target as Node)) pickerOpen = false;

  }

  function actorLabel(userId: string, name: string | null): string {

    return name ?? people[userId]?.name ?? userId;

  }

  function replyPreview(content: TimelineContent): string {

    if (content.kind === 'Message') return stripMarkdownPills(content.message.body).text;

    if (content.kind === 'Sticker') return content.body || 'Sticker';

    if (content.kind === 'Poll') return `Poll: ${content.question}`;

    if (content.kind === 'Redacted') return 'Message deleted';

    if (content.kind === 'UnableToDecrypt') return 'Unable to decrypt';

    return systemLine(content);

  }

  function systemLine(content: TimelineContent, actor = displayName): string {

    switch (content.kind) {

      case 'Redacted':

        return 'Message deleted';

      case 'UnableToDecrypt':

        return `Message from ${actor} could not be decrypted`;

      case 'Membership': {

        const who = actorLabel(content.user_id, content.display_name);

        return `${who} ${MEMBERSHIP_LABELS[content.change] ?? 'updated their membership'}`;

      }

      case 'Profile': {

        const who = actorLabel(content.user_id, null);

        const parts: string[] = [];

        if (content.display_name) {

          parts.push(

            content.display_name.new

              ? `changed their display name to "${content.display_name.new}"`

              : 'removed their display name'

          );

        }

        if (content.avatar) parts.push('changed their avatar');

        return `${who} ${parts.length > 0 ? parts.join(' and ') : 'updated their profile'}`;

      }

      case 'RoomName':

        return content.name

          ? `${actor} changed the room name to "${content.name}"`

          : `${actor} removed the room name`;

      case 'RoomTopic':

        return content.topic

          ? `${actor} changed the topic to "${content.topic}"`

          : `${actor} removed the topic`;

      case 'RoomAvatar':

        return content.avatar ? `${actor} changed the room avatar` : `${actor} removed the room avatar`;

      case 'EncryptionEnabled':

        return `${actor} enabled encryption in this room`;

      case 'RoomCreated':

        return `${actor} created the room`;

      case 'RoomUpgraded':

        return `${actor} upgraded the room to a new version`;

      case 'OtherState':

        return `${actor} ${STATE_LABELS[content.event_type] ?? `sent a state event (${content.event_type})`}`;

      case 'Other':

        return `${actor} sent an event (${content.event_type})`;

      default:

        return actor;

    }

  }

</script>

<!-- svelte-ignore a11y_no_noninteractive_tabindex a11y_no_noninteractive_element_interactions -->

<div

  class="msg"

  role="group"

  tabindex={interactive && !readOnly ? 0 : undefined}

  class:own={event.own}

  class:editing

  class:mentioned={mentionsMe || keywordHit}

  class:system={!interactive}

  class:has-readers={interactive && readers.length > 0}

  class:selected

  data-item={itemId}

  data-event={event.event_id}

  in:rowIn|global

  out:rowOut|global

  bind:this={row}

  on:click={toggleSelected}

  on:keydown={onRowKeydown}

  on:pointerenter={() => (hovered = true)}

  on:pointerleave={() => (hovered = false)}

  on:focusin={() => (focused = true)}

  on:focusout={onFocusOut}

>

  {#if showActions && event.event_id}

    <div class="actions" role="toolbar" aria-label={`Actions for message from ${displayName}`}>

      <div class="quick" style={`--quick-cols:${Math.min(quickReactions.length, QUICK_REACTIONS_PER_ROW)}`}>

      {#each quickReactions as r (r.key)}

        {@const label = r.shortcode ? `:${r.shortcode}:` : r.key}

        <button

          type="button"

          title={`React ${label}`}

          aria-label={`React ${label} to message from ${displayName}`}

          disabled={reacting}

          on:click={() => react(r.key, r.shortcode)}

        >

          {#if r.key.startsWith('mxc://')}

            <img class="emote" src={mediaUrl(r.key, 64) ?? ''} alt="" />

          {:else}

            <Emoji emoji={r.key} size={18} />

          {/if}

        </button>

      {/each}

      </div>

      <button

        type="button"

        title="Add reaction"

        aria-label={`Add reaction to message from ${displayName}`}

        aria-haspopup="dialog"

        aria-expanded={pickerOpen}

        on:pointerdown|stopPropagation

        on:click={openPicker}

      >

        ☺+

      </button>

      {#if onCloneSticker && event.content.kind === 'Sticker'}

        {@const stickerBody = event.content.body}

        {@const stickerId = event.event_id}

        <button

          type="button"

          title="Clone sticker"

          aria-label="Clone sticker to one of your packs"

          on:click|stopPropagation={(ev) => onCloneSticker?.(stickerId, stickerBody, ev.clientX, ev.clientY)}

        >

          ⧉

        </button>

      {/if}

      {#if onReply}

        <button

          type="button"

          title="Reply"

          aria-label={`Reply to message from ${displayName}`}

          on:click|stopPropagation={reply}

        >

          ↩

        </button>

      {/if}

      {#if threadRoot}

        {@const root = threadRoot}

        <button

          type="button"

          title="Reply in thread"

          aria-label={`Reply in thread to message from ${displayName}`}

          on:click|stopPropagation={() => onOpenThread?.(root)}

        >

          <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 3h11v7h-6l-3 3v-3h-2z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M5 6h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>

        </button>

      {/if}

      {#if onEdit && editableBody !== null}

        <button type="button" title="Edit" aria-label="Edit your message" on:click|stopPropagation={edit}>

          ✎

        </button>

      {/if}

      {#if onMore}

        <button

          type="button"

          title="More"

          aria-label={`More actions for message from ${displayName}`}

          aria-haspopup="menu"

          on:click|stopPropagation={(ev) => onMore?.(event, ev.clientX, ev.clientY)}

        >

          ⋯

        </button>

      {/if}

    </div>

    {#if pickerOpen}

      <div class="picker-pop" style={pickerStyle} bind:this={pickerPop}>

        <ReactionPicker {packs} quick={quickReactions} onPick={pick} {onQuickChange} onClose={closePicker} />

      </div>

    {/if}

  {/if}

  {#if event.reply_to}

    {@const target = event.reply_to.event_id}

    <div class="reply-line" class:linked={showSender}>

      <button

        type="button"

        class="reply-quote"

        disabled={!onJump}

        title="Jump to the original message"

        on:click|stopPropagation={() => onJump?.(target)}

      >

        {#if event.reply_to.details.kind === 'Ready'}

          <span class="reply-sender"><EmojiText text={event.reply_to.details.sender.display_name ?? people[event.reply_to.details.sender.user_id]?.name ?? senderLabel(event.reply_to.details.sender)} /></span>

          <span class="reply-text"><EmojiText text={replyPreview(event.reply_to.details.content)} /></span>

        {:else if event.reply_to.details.kind === 'Pending'}

          Loading reply…

        {:else}

          Reply unavailable

        {/if}

      </button>

    </div>

  {/if}

  {#if showSender}

    <button

      type="button"

      class="user-hit"

      disabled={!onUser}

      tabindex="-1"

      aria-hidden="true"

      on:click|stopPropagation={(ev) => openUser(ev, false)}

      on:contextmenu|preventDefault|stopPropagation={(ev) => openUser(ev, true)}

    >

      {#if senderAvatar}

        <MxcAvatar mxc={senderAvatar} label={name} size={34} eager />

      {:else}

        <span class="avatar" style={`background:hsl(${senderHue(event.sender.user_id)} 35% 32%)`}>

          <span><EmojiText text={initialsOf(name)} /></span>

        </span>

      {/if}

    </button>

  {:else}

    <div class="avatar-spacer" aria-hidden="true">

      <span class="hover-time">{formatClock(event.timestamp_ms)}</span>

    </div>

  {/if}

  <div class="msg-body">

    {#if showSender}

      <div class="msg-head">

        <button

          type="button"

          class="sender"

          disabled={!onUser}

          style={`color:hsl(${senderHue(event.sender.user_id)} 70% var(--name-lightness))`}

          on:click|stopPropagation={(ev) => openUser(ev, false)}

          on:contextmenu|preventDefault|stopPropagation={(ev) => openUser(ev, true)}

        >

          <EmojiText text={displayName} />

        </button>

        {#if lag}

          <span class="federation-lag" title="Possibly delayed by federation" aria-label={`Arrived ${lag} late, possibly delayed by federation`}>

            <span aria-hidden="true">◷</span><span>{lag}</span>

          </span>

        {/if}

        <time class="time" datetime={new Date(event.timestamp_ms).toISOString()}>

          {formatDay(event.timestamp_ms)} {formatClock(event.timestamp_ms)}

        </time>

        {#if event.content.kind === 'Message' && event.content.message.edited}

          <span class="edited" title="Edited" transition:dissolve>(edited)</span>

        {/if}

      </div>

    {/if}

    {#if event.content.kind === 'Message'}

      {@const m = event.content.message}

      {#if stripped.text}

        <div class="text" class:emote={m.kind === 'Emote'} class:notice={m.kind === 'Notice' || m.kind === 'ServerNotice'}>{#if m.kind === 'Emote'}* <EmojiText text={displayName} /> {/if}<MessageText text={stripped.text} html={m.formatted_body} jumbo={m.kind === 'Text'} {mentions} {self} {nameOf} />{#if m.edited && !showSender}<span class="edited" title="Edited" transition:dissolve>(edited)</span>{/if}</div>

      {/if}

      {#if m.media}

        <MediaAttachmentView attachment={m.media} />

      {/if}

      {#if cards.length > 0}

        <div class="link-previews" transition:expand>

          {#each cards as card (card.link.href)}

            <div transition:expand><LinkCard link={card.link} preview={card.preview} /></div>

          {/each}

        </div>

      {/if}

    {:else if event.content.kind === 'Sticker'}

      {#if event.content.media}

        <MediaAttachmentView attachment={event.content.media} />

      {:else if event.content.body}<p class="text"><EmojiText text={event.content.body} /></p>{/if}

    {:else if event.content.kind === 'Poll'}

      <p class="text"><EmojiText text={`📊 ${event.content.question}`} /></p>

    {:else}

      <p class="system-line"><EmojiText text={systemLine(event.content, displayName)} /></p>

    {/if}

    {#if interactive && event.reactions.length > 0}

      <div class="reactions" aria-label="Reactions" transition:expand>

        {#each event.reactions as r (r.key)}

          <button

            type="button"

            class="reaction"

            transition:expand={{ axis: 'x' }}

            class:mine={r.own}

            aria-label={`${r.shortcode ? `:${r.shortcode}:` : r.key.startsWith('mxc://') ? 'custom emote' : r.key}, ${r.count} reaction${r.count === 1 ? '' : 's'}`}

            disabled={readOnly || !event.event_id || reacting}

            aria-describedby={reactorKey === r.key ? `${itemId}-reactors-${r.key}` : undefined}

            on:pointerenter={() => (reactorKey = r.key)}

            on:pointerleave={() => (reactorKey = null)}

            on:focus={() => (reactorKey = r.key)}

            on:blur={() => (reactorKey = null)}

            on:click={() => event.event_id && onReact(event.event_id, r.key)}

          >

            {#if r.image}

              <img class="emote" src={messageMediaUrl(r.image, 'Thumbnail')} alt={r.shortcode ?? ''} title={r.shortcode ?? ''} />

            {:else if r.key.startsWith('mxc://')}

              <img class="emote" src={mediaUrl(r.key, 64) ?? ''} alt="" />

            {:else}

              <Emoji emoji={r.key} size={16} />

            {/if}

            <span class="count">{r.count}</span>

            {#if reactorKey === r.key}

            <span class="reactors" role="tooltip" id={`${itemId}-reactors-${r.key}`}>

              <span class="reactors-key"><EmojiText text={r.shortcode ? `:${r.shortcode}:` : r.key.startsWith('mxc://') ? 'custom emote' : r.key} /></span>

              <EmojiText text={reactorNames(r.senders)} />

            </span>

            {/if}

          </button>

        {/each}

      </div>

    {/if}

    {#if threadRoot && threadReplies > 0}

      {@const root = threadRoot}

      {@const latest = event.thread_summary?.latest_event_timestamp_ms ?? null}

      <button type="button" class="thread-chip" transition:expand on:click|stopPropagation={() => onOpenThread?.(root)}>

        <span class="thread-count">{threadReplies} {threadReplies === 1 ? 'reply' : 'replies'}</span>

        {#if latest}<time datetime={new Date(latest).toISOString()}>{formatDay(latest)} {formatClock(latest)}</time>{/if}

      </button>

    {/if}

    {#if sent}<span class="sent-tick" title="Sent" aria-label="Sent" transition:dissolve>✓</span>{/if}

    {#if interactive && sendLabel(event.send_state)}

      <div class="msg-foot" transition:expand>

        <span class="sendstate" class:failed={event.send_state.kind === 'Failed'}>{sendLabel(event.send_state)}</span>

      </div>

    {/if}

    {#if interactive && readers.length > 0}

      {@const seenBy = `Seen by ${readers.map((r) => r.name).join(', ')}`}

      <div class="readby" transition:dissolve title={seenBy} aria-label={seenBy} role="img">

        {#each readers.slice(0, MAX_READERS) as r (r.user_id)}

          <MxcAvatar mxc={r.avatar} label={r.name} size={16} />

        {/each}

        {#if readers.length > MAX_READERS}<span class="more">+{readers.length - MAX_READERS}</span>{/if}

      </div>

    {/if}

  </div>

</div>

<style>

  .msg { position: relative; display: flex; flex-wrap: wrap; gap: 0 10px; padding: var(--msg-gap, 3px) 0; }

  .reply-line { position: relative; flex: 0 0 100%; min-width: 0; padding-left: 44px; }

  .reply-line.linked::before { content: ''; position: absolute; left: 16px; top: 50%; bottom: -3px; width: 24px; border-left: 2px solid var(--border); border-top: 2px solid var(--border); border-top-left-radius: 8px; pointer-events: none; }

  .msg:hover, .msg.selected { background: var(--hover-faint); }

  .msg:hover .hover-time, .msg.selected .hover-time { opacity: 1; }

  .msg-foot { display: flex; align-items: center; gap: 8px; }

  .thread-chip { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 4px; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-soft); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; transition: border-color var(--pop), background var(--pop); }

  .thread-chip:hover { border-color: var(--accent); background: var(--hover-faint); }

  .thread-count { color: var(--accent); font-weight: 650; }

  .thread-chip time { color: var(--muted); font-size: 11px; }

  .sendstate { font-size: 11px; color: var(--muted); }

  .sent-tick { position: absolute; right: 12px; bottom: 4px; font-size: 11px; color: var(--muted); }

  .sendstate.failed { color: var(--danger); }

  .link-previews { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 420px; }

  .avatar {

    flex: none;

    width: 34px; height: 34px;

    border-radius: 50%;

    display: grid; place-items: center;

    font-size: 12px; font-weight: 700; color: #fff;

  }

  .avatar-spacer { flex: none; width: 34px; padding-top: 2px; text-align: center; }

  .hover-time { opacity: 0; font-size: 10.5px; color: var(--muted); }

  .msg-body { min-width: 0; flex: 1; transition: padding-right var(--pop); }

  .msg-head { display: flex; align-items: baseline; gap: 8px; }

  .federation-lag { display: inline-flex; align-items: center; gap: 3px; color: var(--danger); font-size: 11px; font-weight: 650; }

  .federation-lag > span:last-child { display: inline-grid; place-items: center; min-width: 24px; height: 18px; padding: 0 4px; border: 1px solid currentColor; border-radius: 999px; }

  .sender { font-weight: 650; font-size: 13.5px; padding: 0; border: none; background: none; font-family: inherit; cursor: pointer; }

  .sender:hover { text-decoration: underline; }

  .user-hit { flex: none; align-self: flex-start; padding: 0; border: none; background: none; border-radius: 50%; cursor: pointer; }

  .time, .edited { color: var(--muted); font-size: 11.5px; }

  .text .edited { margin-left: 6px; }

  .msg.editing { background: color-mix(in srgb, var(--accent) 10%, transparent); }

  .msg.mentioned { background: color-mix(in srgb, var(--warn) 8%, transparent); box-shadow: inset 2px 0 0 var(--warn); }

  .reply-quote {

    display: flex; gap: 6px; align-items: baseline;

    max-width: min(100%, 520px);

    border: none;

    border-left: 2px solid var(--accent);

    padding: 2px 8px;

    margin: 2px 0 4px;

    color: var(--muted);

    font-size: 12.5px;

    text-align: left;

    background: var(--bg-soft);

    border-radius: 0 var(--r-sm) var(--r-sm) 0;

    cursor: pointer;

  }

  .reply-quote:disabled { cursor: default; }

  .reply-quote:hover:not(:disabled) { color: var(--text); }

  .reply-sender { flex: none; font-weight: 650; }

  .reply-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  :global(.msg.flash) { animation: reply-flash 1.2s ease-out; }

  @keyframes -global-reply-flash { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } }

  .text {

    margin: 1px 0 2px;

    font-size: 14px;

    line-height: var(--msg-line-height, 1.5);

    white-space: pre-wrap;

    overflow-wrap: anywhere;

  }

  .text.emote { font-style: italic; color: var(--muted); }

  .text.notice { color: var(--muted); }

  .system-line { color: var(--muted); font-size: 12.5px; font-style: italic; margin: 1px 0; }

  .msg.system { opacity: 0.85; --msg-gap: 1.5px; }

  .msg.system .avatar-spacer { height: 0; padding-top: 0; }

  .reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: max(4px, var(--msg-gap, 3px)); }

  .reaction {

    display: inline-flex; align-items: center; gap: 4px;

    background: var(--bg-soft);

    border: 1px solid var(--border);

    border-radius: var(--r-sm);

    padding: 1px 8px;

    font-size: 13px;

    color: var(--text);

    cursor: pointer;

  }

  .reaction { position: relative; }

  .reactors {

    position: absolute;

    left: 0;

    bottom: calc(100% + 6px);

    z-index: 15;

    display: block;

    width: max-content;

    max-width: 260px;

    padding: 6px 9px;

    border: 1px solid var(--border);

    border-radius: var(--r-md);

    background: var(--panel-2);

    box-shadow: 0 6px 18px rgb(0 0 0 / 0.3);

    color: var(--text);

    font-size: 12px;

    line-height: 1.35;

    text-align: left;

    white-space: normal;

    pointer-events: none;

  }

  .reactors-key { display: block; color: var(--muted); font-size: 11px; }

  .reaction.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

  .reaction:disabled { cursor: default; opacity: 0.85; }

  .msg.has-readers .msg-body { padding-right: 72px; }

  .readby { position: absolute; right: 12px; bottom: 4px; display: flex; align-items: center; }

  .readby > :global(* + *) { margin-left: -4px; }

  .readby :global(.mxc-avatar), .readby :global(.mxc-fallback) { box-shadow: 0 0 0 1.5px var(--bg); }

  .readby .more { margin-left: 3px; font-size: 10.5px; color: var(--muted); }

  .actions {

    position: absolute; top: -12px; right: 10px; z-index: 2;

    display: flex; align-items: flex-start; gap: 2px;

    padding: 2px;

    background: var(--bg-soft);

    border: 1px solid var(--border);

    border-radius: var(--r-md);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

  }

  .quick { display: grid; grid-template-columns: repeat(var(--quick-cols, 8), auto); gap: 2px; }

  .quick:empty { display: none; }

  .actions button {

    background: transparent;

    border: 1px solid transparent;

    border-radius: var(--r-sm);

    cursor: pointer;

    font-size: 14px;

    padding: 1px 5px;

  }

  .actions button:hover:not(:disabled) { border-color: var(--border); background: var(--hover); }

  .actions button:disabled { opacity: 0.4; cursor: default; }

  .emote { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: middle; }

  .picker-pop { position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 16px); animation: pop-in var(--pop); }

</style>