@gameon/web/web-components/notifications/notifications.ts

Chat clients for web

import '@gameon/on-ui-components/base/badge';
import '@gameon/on-ui-components/chat/notification';
import { Message, Speaker } from '@gameon/on-ui-components/types';
import { ContextConsumer } from '@lit-labs/context';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';

import { notificationsContext } from './notifications.context';

@customElement('on-chat-bot-notifications')
export class OnChatBotNotifications extends LitElement {
  static override styles = css`
    :host {
      --on-chat-notification-background-color: #ffffff;
      bottom: calc(var(--on-chat-widget-bottom, 1rem) + 80px + 8px);
      position: fixed;
      right: var(--on-chat-widget-right, 1rem);
      z-index: var(--on-chat-widget-z-index, 999999);
    }

    .on-chat-notifications {
      display: flex;
      flex-direction: column;
      gap: 8px;
      opacity: 0.5;
      align-items: flex-end;
    }

    .close-badge {
      cursor: pointer;
    }

    .close-badge.hide {
      display: none;
    }

    .close-badge.show {
      display: unset;
    }

    .active {
      opacity: unset;
    }
  `;

  @property({ type: Object })
  speaker?: Speaker;

  @state()
  private active = false;

  private lastSeenMessage = new ContextConsumer(
    this,
    notificationsContext,
    undefined,
    true
  );

  private onMouseOver() {
    if (!this.active) {
      this.active = true;
    }
  }

  private onMouseOut() {
    if (this.active) {
      this.active = false;
    }
  }

  private renderCloseBadge() {
    const handleBadgeDeleted = () => {
      this.active = false;
      this.dispatchEvent(new CustomEvent('on-notification-reset'));
    };

    return html`<on-badge
      class="close-badge ${!this.active ? 'hide' : 'show'}"
      ?outlined=${true}
      .size=${'sm'}
      .color=${'default'}
      ?deletable=${true}
      @click=${handleBadgeDeleted}
      >Close</on-badge
    >`;
  }

  private renderNotifications() {
    const handleNotificationClick = () => {
      this.dispatchEvent(new CustomEvent('on-notification-open-message'));
    };

    function createNotification(
      message: Message,
      speaker?: Speaker,
      hideTimestamp = false
    ) {
      return html`
        <on-chat-notification
          @click=${handleNotificationClick}
          .message=${message}
          .speaker=${speaker}
          ?shouldHideTimestamp=${hideTimestamp}
        ></on-chat-notification>
      `;
    }

    if (this.lastSeenMessage.value) {
      const numOfNotifications =
        this.lastSeenMessage.value.unreadMessages.length - 1;

      const truncatedNotification = {
        contents: [
          {
            text: `+${numOfNotifications} new message${
              numOfNotifications > 1 ? 's' : ''
            }`,
          },
        ],
        timestamp: 0,
        speakerId: '',
      };

      if (this.lastSeenMessage.value.unreadMessages.length > 1) {
        return html`
          ${createNotification(
            this.lastSeenMessage.value.unreadMessages[0],
            this.speaker
          )}
          ${createNotification(truncatedNotification, this.speaker, true)}
        `;
      } else {
        return html`
          ${createNotification(
            this.lastSeenMessage.value.unreadMessages[0],
            this.speaker
          )}
        `;
      }
    } else {
      return html`${nothing}`;
    }
  }

  protected override render() {
    if (!this.lastSeenMessage.value?.unreadMessages.length) {
      return html`${nothing}`;
    }

    const classes = { active: this.active };

    return html`
      <div
        class="on-chat-notifications ${classMap(classes)}"
        @mouseover="${this.onMouseOver}"
        @mouseout=${this.onMouseOut}
      >
        ${this.renderCloseBadge()} ${this.renderNotifications()}
      </div>
    `;
  }
}