malice

<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 { mediaUrl, messageMediaUrl } from './api';

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

  import { senderLabel } from './types';

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

  import { findUrls } from './urls';

  import { mentionsFromHtml, 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 self: string | null = null;

  const PICKER_WIDTH = 320;

  const PICKER_HEIGHT = 380;

  const PICKER_MARGIN = 8;

  const MAX_READERS = 3;

  let row: HTMLDivElement;

  let pickerPop: HTMLDivElement | undefined;

  let selected = false;

  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 = senderLabel(event.sender);

  $: 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;

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

  $: mentions = message ? [...mentionsFromHtml(message.formatted_body), ...stripped.mentions] : [];

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

  $: 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);

    }

  }

  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…';

    if (showSent && event.own && state.kind === 'Sent' && event.event_id) return '✓ sent';

    return '';

  }

  function toggleSelected(e: MouseEvent) {

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

    selected = !selected;

  }

  function deselectOutside(e: PointerEvent) {

    if (selected && !pickerOpen && !row.contains(e.target as Node)) selected = 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`;

    selected = 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 ?? 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): string {

    switch (content.kind) {

      case 'Redacted':

        return 'Message deleted';

      case 'UnableToDecrypt':

        return `Message from ${displayName} 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

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

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

      case 'RoomTopic':

        return content.topic

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

          : `${displayName} removed the topic`;

      case 'RoomAvatar':

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

      case 'EncryptionEnabled':

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

      case 'RoomCreated':

        return `${displayName} created the room`;

      case 'RoomUpgraded':

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

      case 'OtherState':

        return `${displayName} sent a state event (${content.event_type})`;

      case 'Other':

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

      default:

        return displayName;

    }

  }

</script>

<svelte:window

  on:pointerdown={deselectOutside}

  on:keydown={(e) => e.key === 'Escape' && (selected = false)}

  on:scroll|capture={closeOnScroll}

  on:resize={closePicker}

/>

<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->

<div

  class="msg"

  class:own={event.own}

  class:editing

  class:mentioned={mentionsMe}

  class:system={!interactive}

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

  class:selected

  data-item={itemId}

  data-event={event.event_id}

  bind:this={row}

  on:click={toggleSelected}

>

  {#if interactive && event.event_id}

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

      {#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) ?? ''} alt="" />

          {:else}

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

          {/if}

        </button>

      {/each}

      <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 onReply}

        <button

          type="button"

          title="Reply"

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

          on:click|stopPropagation={reply}

        >

          ↩

        </button>

      {/if}

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

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

          ✎

        </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 showSender}

    {#if senderAvatar}

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

    {:else}

      <div

        class="avatar"

        aria-hidden="true"

        style={`background:hsl(${senderHue(event.sender.user_id)} 35% 32%)`}

      >

        {initialsOf(name)}

      </div>

    {/if}

  {: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">

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

          {displayName}

        </span>

        <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">(edited)</span>

        {/if}

      </div>

    {/if}

    {#if event.reply_to}

      {@const target = event.reply_to.event_id}

      <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">{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>

    {/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'}* {displayName} {/if}<MessageText text={stripped.text} jumbo={m.kind === 'Text'} {mentions} {self} />

          {#if m.edited && !showSender}<span class="edited" title="Edited">(edited)</span>{/if}

        </div>

      {/if}

      {#if m.media}

        <MediaAttachmentView attachment={m.media} />

      {/if}

      {#if cards.length > 0}

        <div class="link-previews">

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

            <LinkCard link={card.link} preview={card.preview} />

          {/each}

        </div>

      {/if}

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

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

      {#if event.content.media}

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

      {/if}

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

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

    {:else}

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

    {/if}

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

      <div class="reactions" aria-label="Reactions">

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

          <button

            type="button"

            class="reaction"

            class:mine={r.own}

            aria-describedby={`${itemId}-reactors-${r.key}`}

            disabled={!event.event_id || reacting}

            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) ?? ''} alt="" />

            {:else}

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

            {/if}

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

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

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

              {reactorNames(r.senders)}

            </span>

          </button>

        {/each}

      </div>

    {/if}

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

      <div class="msg-foot">

        <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" 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; gap: 10px; padding: var(--msg-gap, 3px) 0; }

  .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; }

  .sendstate { 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; }

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

  .sender { font-weight: 650; font-size: 13.5px; }

  .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 6px 6px 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; }

  .reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

  .reaction {

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

    background: var(--bg-soft);

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

    border-radius: 999px;

    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: none;

    width: max-content;

    max-width: 260px;

    padding: 6px 9px;

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

    border-radius: 8px;

    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:hover .reactors, .reaction:focus-visible .reactors { display: block; }

  .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: -14px; right: 12px; z-index: 2;

    display: flex; gap: 2px;

    padding: 2px;

    background: var(--bg-soft);

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

    border-radius: 8px;

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

    opacity: 0;

    pointer-events: none;

  }

  .msg:hover .actions, .msg:focus-within .actions, .msg.selected .actions { opacity: 1; pointer-events: auto; }

  .actions button {

    background: transparent;

    border: 1px solid transparent;

    border-radius: 6px;

    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); }

</style>