convo/src/components/ChatMessage.svelte

<script>
  export let message
  export let ourJID
  export let tabindex = -1
  export let autofocus = false
  export let onclick = () => {}

  let ourMessage
  let meCommand

  let senderName
  let vcard
  let avatarInitial
  let avatarImage

  $: {
    ourMessage = (message?.attributes?.from == ourJID)

    meCommand = message?.attributes?.message
      && message.attributes.message.slice(0,4) == '/me '
      ? message.attributes.message.slice(4)
      : null

    vcard = _converse.vcards.get(message?.attributes?.from)

    senderName = ourMessage
      ? ourJID
      : message.attributes
        ? message.attributes.nick
	  || message.attributes.nickname
	  || message.attributes.from
	: undefined

    avatarInitial = senderName
      ? senderName[0]
      : '?'

    avatarImage = vcard?.attributes?.image
      ? 'data:'
        + vcard.attributes.image_type
	+ ';base64,'
	+ vcard.attributes.image
      : undefined
  }
</script>

{#if message}
  {#if !message.attributes?.from}
  <div
    class="chat-item-indicator focusable"
    {tabindex}
    {autofocus}
    on:click={onclick}
  >
    <p class="chat-item-bare">
      {message.attributes?.message}<br />
      {new Date(message.attributes?.time).toLocaleString()}
    </p>
  </div>
  {:else if meCommand}
  <div
    class="chat-item-indicator focusable"
    class:own-chat={ourMessage}
    {tabindex}
    {autofocus}
    on:click={onclick}
  >
    <div class="chat-item-me-command">
      <div class="avatar avatar-small">
        {#if avatarImage}
	<img src="{avatarImage}"/>
	{:else}
        {avatarInitial}
	{/if}
      </div>
      {senderName}
      {meCommand}
    </div>
  </div>
  {:else}
  <div
    class="chat-item-indicator focusable"
    class:own-chat={ourMessage}
    {tabindex}
    {autofocus}
    on:click={onclick}
  >
    <div class="chat-item-row">
      <div class="avatar">
        {#if avatarImage}
	<img src={avatarImage}/>
	{:else}
        {avatarInitial}
	{/if}
      </div>
      <div class="chat-item{message.attributes?.is_only_emojis ? ' only-emoji' : ''}">
        <p>{message.attributes?.message}</p>
      </div>
    </div>
    <p class="chat-item-info">
      {#if ourMessage}
      me,
      {:else}
      {senderName},
      {/if}
      {new Date(message.attributes?.time).toLocaleString()}
    </p>
  </div>
  {/if}
{/if}

<style>
  .chat-item-indicator {
    background: var(--item-background);

    position: relative;
    box-sizing: border-box;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .chat-item-row {
    display: flex;
    flex-direction: row;
  }

  .own-chat .chat-item-row {
    flex-direction: row-reverse;
  }

  .avatar {
    height: 3rem;
    width: 3rem;
    margin: 0 0.5rem auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    background: var(--chatbox-background);
    color: var(--chatbox-color);
  }

  .avatar img {
    height: 3rem;
    width: 3rem;
  }

  .avatar-small {
    height: 2rem;
    width: 2rem;
  }

  .avatar-small img {
    height: 2rem;
    width: 2rem;
  }

  .own-chat .avatar {
    margin: 0 0 auto 0.5rem;
    background: var(--chatbox-background-primary);
    color: var(--chatbox-color-primary);
  }

  .chat-item {
    background: var(--chatbox-background);
    color: var(--chatbox-color);
    padding: 0;
    display: inline-block;
    max-width: calc(100% - 4rem);
    border-radius: 0 1rem 1rem 1rem;
  }

  .own-chat .chat-item {
    border-radius: 1rem 0 1rem 1rem;
    background: var(--chatbox-background-primary);
    color: var(--chatbox-color-primary);
  }

  .chat-item p {
    word-wrap: break-word;
    overflow: hidden;
    font-size: 1.6rem;
    font-weight: 400;
    margin: 1rem;
  }

  .chat-item.only-emoji p {
    font-size: 3rem;
  }

  .chat-item-indicator:focus {
    background: var(--chatbox-indicator-background-focused);
  }

  .chat-item-info {
    margin: 0 0 0 4.5rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--chatbox-indicator-color);
  }

  .own-chat .chat-item-info {
    margin: 0 4.5rem 0 0;
  }

  .chat-item-indicator:focus .chat-item-info {
    color: var(--chatbox-indicator-color-focused);
  }

  .chat-item-bare {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--chatbox-indicator-color);
    margin-top: 0;
    text-align: center;
  }

  .chat-item-indicator:focus .chat-item-bare {
    color: var(--chatbox-indicator-color-focused);
  }

  .chat-item-me-command {
    font-size: 1.5rem;
    text-align: center;
  }

  .chat-item-indicator:focus .chat-item-me-command {
    color: var(--chatbox-indicator-color-focused);
  }
</style>