malice

<script lang="ts">

  import MediaAttachmentView from './MediaAttachmentView.svelte';

  import MxcAvatar from './MxcAvatar.svelte';

  import type { SendState, TimelineContent, TimelineEvent } from './types';

  import { senderLabel } from './types';

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

  import { findUrls } from './urls';

  export let itemId: string;

  export let event: TimelineEvent;

  export let showSender: boolean;

  export let reacting: boolean;

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

  export let senderAvatar: string | null = null;

  const QUICK_KEYS = ['👍', '❤️', '😂', '🎉', '😮', '😢'];

  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;

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

  $: previews = event.content.kind === 'Message' ? findUrls(event.content.message.body) : [];

  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 (event.own && state.kind === 'Sent' && event.event_id) return '✓ sent';

    return '';

  }

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

    return name ?? userId;

  }

  function replyPreview(content: TimelineContent): string {

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

    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>

<div class="msg" class:own={event.own} class:system={!interactive} data-item={itemId}>

  {#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% 72%)`}>

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

      <div class="reply-quote">

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

          Replying to {senderLabel(event.reply_to.details.sender)}: {replyPreview(event.reply_to.details.content)}

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

          Loading reply…

        {:else}

          Reply unavailable

        {/if}

      </div>

    {/if}

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

      {@const m = event.content.message}

      <p class="text" class:emote={m.kind === 'Emote'} class:notice={m.kind === 'Notice' || m.kind === 'ServerNotice'}>

        {#if m.kind === 'Emote'}* {displayName} {/if}{m.body}

      </p>

      {#if m.media}

        <MediaAttachmentView attachment={m.media} />

      {/if}

      {#if previews.length > 0}

        <div class="link-previews">

          {#each previews as preview (preview.href)}

            <a class="link-card" href={preview.href} target="_blank" rel="noopener noreferrer">

              <span class="link-host">{preview.hostname}</span>

              {#if preview.path}<span class="link-path">{preview.path}</span>{/if}

              <span class="link-url">{preview.display}</span>

            </a>

          {/each}

        </div>

      {/if}

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

      {#if event.content.body}<p class="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}

            title={r.own ? 'You reacted — activate to remove' : `${r.count} reaction${r.count === 1 ? '' : 's'}`}

            disabled={!event.event_id || reacting}

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

          >

            <span aria-hidden="true">{r.key}</span>

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

          </button>

        {/each}

      </div>

    {/if}

    {#if interactive}

      <div class="msg-foot">

        {#if sendLabel(event.send_state)}

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

        {/if}

        {#if event.read_by.length > 0}

          <span class="readby" title={event.read_by.join(', ')}>✓✓ {event.read_by.length}</span>

        {/if}

        {#if event.event_id}

          <span class="quick-react" role="group" aria-label={`React to message from ${displayName}`}>

            {#each QUICK_KEYS as key (key)}

              <button

                type="button"

                title={`React ${key}`}

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

                disabled={reacting}

                on:click={() => onReact(event.event_id ?? '', key)}

              >

                {key}

              </button>

            {/each}

          </span>

        {/if}

      </div>

    {/if}

  </div>

</div>

<style>

  .msg { display: flex; gap: 10px; padding: 3px 0; }

  .msg:hover { background: rgba(255, 255, 255, 0.018); }

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

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

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

  .link-card {

    display: flex; flex-direction: column; gap: 1px;

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

    background: var(--bg-soft); padding: 8px 10px;

    text-decoration: none; color: var(--text);

  }

  .link-card:hover { border-color: var(--accent); }

  .link-host { font-size: 12.5px; font-weight: 650; }

  .link-path { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

  .link-url { font-size: 11.5px; color: var(--accent); overflow-wrap: anywhere; }

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

  .reply-quote {

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

    padding: 2px 8px;

    margin: 2px 0 4px;

    color: var(--muted);

    font-size: 12.5px;

    background: var(--bg-soft);

    border-radius: 0 6px 6px 0;

  }

  .text {

    margin: 1px 0 2px;

    font-size: 14px;

    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.mine { border-color: var(--accent); background: rgba(88, 101, 242, 0.16); }

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

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

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

  .msg:hover .quick-react, .msg:focus-within .quick-react { display: inline-flex; }

  .quick-react button {

    background: transparent;

    border: 1px solid transparent;

    border-radius: 6px;

    cursor: pointer;

    font-size: 13px;

    padding: 0 3px;

    opacity: 0.75;

  }

  .quick-react button:hover:not(:disabled) { opacity: 1; border-color: var(--border); background: var(--bg-soft); }

  .quick-react button:disabled { opacity: 0.4; cursor: default; }

</style>