Message.scss

@use '../../../styling/utils';

.str-chat {
  /* The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 */
  --str-chat__message-options-button-size: calc(var(--str-chat__spacing-px) * 26);

  /*
   * Message theme variables (ported from @stream-chat-css v2 Message theme),
   * set to match the current React SDK styling values in this file.
   */
  --str-chat__message-border-radius: 0;
  --str-chat__message-color: var(--str-chat__text-color);
  --str-chat__message-error-message-color: var(--str-chat__danger-color);
  --str-chat__message-secondary-color: var(--str-chat__text-low-emphasis-color);
  --str-chat__message-link-color: var(--chat-text-link);
  --str-chat__message-mention-color: var(--str-chat__primary-color);
  --str-chat__message-replies-count-color: var(--str-chat__primary-color);
  --str-chat__message-background-color: transparent;
  --str-chat__message-highlighted-background-color: var(
    --str-chat__message-highlight-color
  );
  --str-chat__message-border-block-start: none;
  --str-chat__message-border-block-end: none;
  --str-chat__message-border-inline-start: none;
  --str-chat__message-border-inline-end: none;
  --str-chat__message-box-shadow: none;
  --str-chat__message-active-background-color: transparent;

  --str-chat__message-options-color: var(--str-chat__text-low-emphasis-color);
  --str-chat__message-options-hover-background-color: var(
    --str-chat__tertiary-surface-color
  );
  --str-chat__message-options-border-radius: var(--str-chat__border-radius-circle);
  --str-chat__message-options-active-color: var(--str-chat__primary-color);

  --str-chat__message-bubble-border-radius: var(--message-bubble-radius-group-bottom);
  --str-chat__message-bubble-color: var(--chat-text-message);
  --str-chat__message-bubble-background-color: var(--chat-bg-incoming);
  --str-chat__own-message-bubble-color: var(--chat-text-message);
  --str-chat__own-message-bubble-background-color: var(--chat-bg-outgoing);
  --str-chat__message-bubble-border-block-start: none;
  --str-chat__message-bubble-border-block-end: none;
  --str-chat__message-bubble-border-inline-start: none;
  --str-chat__message-bubble-border-inline-end: none;
  --str-chat__message-bubble-box-shadow: none;

  --str-chat__deleted-message-border-radius: var(--str-chat__border-radius-md);
  --str-chat__deleted-message-color: var(--str-chat__text-low-emphasis-color);
  --str-chat__deleted-message-background-color: var(--str-chat__secondary-surface-color);
  --str-chat__deleted-message-border-block-start: none;
  --str-chat__deleted-message-border-block-end: none;
  --str-chat__deleted-message-border-inline-start: none;
  --str-chat__deleted-message-border-inline-end: none;
  --str-chat__deleted-message-box-shadow: none;

  --str-chat__blocked-message-border-radius: var(--str-chat__border-radius-md);
  --str-chat__blocked-message-color: var(--str-chat__text-low-emphasis-color);
  --str-chat__blocked-message-background-color: var(--str-chat__secondary-surface-color);
  --str-chat__blocked-message-border-block-start: none;
  --str-chat__blocked-message-border-block-end: none;
  --str-chat__blocked-message-border-inline-start: none;
  --str-chat__blocked-message-border-inline-end: none;
  --str-chat__blocked-message-box-shadow: none;

  --str-chat__translation-notice-color: var(--str-chat__text-low-emphasis-color);
  --str-chat__translation-notice-active-background-color: var(
    --str-chat__tertiary-surface-color
  );

  --str-chat__message-reactions-host-offset-x: calc(var(--spacing-xs) * -1);

  /* Background color for pinned messages (Figma: background/core/highlight) */
  --str-chat__message-pinned-background-color: var(--background-core-highlight);

  /* The maximum allowed width of the message component */
  --str-chat__message-max-width: calc(var(--str-chat__spacing-px) * 400);

  /* The maximum allowed width of the message component, if it has attachments */
  --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 300);
}

/* Make spaces between message groups */
.str-chat__li--top {
  padding-block-start: var(--spacing-xs);
  padding-block-end: var(--spacing-xxxs);
}

.str-chat__li--bottom {
  padding-block-start: var(--spacing-xxxs);
  padding-block-end: var(--spacing-xs);
}

.str-chat__li--middle {
  padding-block: var(--spacing-xxxs);
}

.str-chat__li--single {
  padding-block: var(--spacing-xs);
}

.str-chat__message {
  --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
  padding-inline: var(--str-chat__message-composer-padding);

  &.str-chat__message-without-touch-support {
    --str-chat-message-options-size: calc(
      1 * var(--str-chat__message-options-button-size)
    );
  }

  .str-chat__message-bubble {
    max-width: var(--str-chat__message-max-width);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
  }

  .str-chat__message-options {
    --str-chat-icon-height: calc(var(--str-chat__message-options-button-size) * 0.7);
  }

  a {
    text-decoration: none;
    color: var(--str-chat__message-link-color);
  }
}

.str-chat__message.str-chat__message--is-emoji-only {
  &.str-chat__message--is-emoji-only-count-1,
  &.str-chat__message--is-emoji-only-count-2,
  &.str-chat__message--is-emoji-only-count-3 {
    .str-chat__message-inner {
      .str-chat__message-bubble {
        background-color: transparent;
        overflow: visible;
      }
    }
  }

  &.str-chat__message--is-emoji-only-count-1 {
    .str-chat__message-inner .str-chat__message-bubble {
      font-size: 64px;
      line-height: 64px;
    }
  }

  &.str-chat__message--is-emoji-only-count-2 {
    .str-chat__message-inner .str-chat__message-bubble {
      font-size: 48px;
      line-height: 48px;
    }
  }

  &.str-chat__message--is-emoji-only-count-3 {
    .str-chat__message-inner .str-chat__message-bubble {
      font-size: 32px;
      line-height: 32px;
    }
  }
}

.str-chat__message.str-chat__message--has-attachment {
  --str-chat__message-max-width: var(--str-chat__message-with-attachment-max-width);

  .str-chat__message-bubble {
    max-width: var(--str-chat__message-max-width);
  }
}

.str-chat__message.str-chat__message--has-single-attachment {
  &.str-chat__message--has-no-text {
    .str-chat__message-bubble {
      padding: 0;
    }
  }
  &.str-chat__message--has-giphy-attachment {
    .str-chat__message-bubble {
      padding: 0;
    }

    .str-chat__message-text {
      display: none;
    }
  }
}

.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment {
  .str-chat__message-bubble {
    padding: 0;
  }

  .str-chat__message-text {
    display: none;
  }
}

.str-chat__message-mention {
  color: var(--str-chat__message-mention-color);
  font: var(--str-chat__body2-medium-text);
}

.str-chat__message--error-message {
  color: var(--str-chat__message-error-message-color);
  font: var(--str-chat__caption-text);
}

.str-chat__message {
  @include utils.component-layer-overrides('message');

  @mixin chat-bubble-spacing {
    padding-inline: var(--spacing-sm);

    p {
      white-space: pre-line;
      margin: 0;
    }
  }

  // Using grid layout so we can use template from theme-v1
  display: grid;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  overflow-wrap: break-word;

  @mixin message-grid-no-avatar {
    grid-template-areas:
      'message-saved-for-later'
      'pin-indicator'
      'also-sent-in-channel'
      'message-reminder'
      'translation-indicator'
      'message'
      'translation-notice'
      'custom-metadata'
      'metadata';
    grid-template-columns: 1fr;
  }

  @mixin message-grid-other-with-avatar {
    grid-template-areas:
      '. message-saved-for-later'
      '. pin-indicator'
      '. also-sent-in-channel'
      '. message-reminder'
      '. translation-indicator'
      'avatar message'
      'avatar translation-notice'
      'avatar custom-metadata'
      'avatar metadata';
    grid-template-columns: auto 1fr;
  }

  @mixin message-grid-me-with-avatar {
    grid-template-areas:
      'message-saved-for-later .'
      'pin-indicator .'
      'also-sent-in-channel .'
      'message-reminder .'
      'translation-indicator .'
      'message avatar'
      'translation-notice avatar'
      'custom-metadata avatar'
      'metadata avatar';
    grid-template-columns: 1fr auto;
  }

  .str-chat__message-pin-indicator {
    grid-area: pin-indicator;
    padding-block: var(--spacing-xxs);

    .str-chat__message-pin-indicator__content {
      display: flex;
      align-items: center;
      gap: var(--spacing-xxs);
      font: var(--str-chat__metadata-default-text);
      color: var(--text-primary-text);
    }
  }

  &.str-chat__message--me
    .str-chat__message-pin-indicator
    .str-chat__message-pin-indicator__content {
    justify-content: flex-end;
  }

  &.str-chat__message--me
    .str-chat__message-also-sent-in-channel
    .str-chat__message-also-sent-in-channel__content {
    justify-content: flex-end;
  }

  &.str-chat__message--other {
    column-gap: var(--str-chat__spacing-2);
    justify-items: flex-start;

    &.str-chat__message--with-avatar {
      @include message-grid-other-with-avatar;
    }

    &:not(.str-chat__message--with-avatar) {
      @include message-grid-no-avatar;
    }

    .str-chat__message-inner {
      .str-chat__message-reactions-host {
        justify-self: flex-start;

        &:has(.str-chat__message-reactions--flipped-horizontally) {
          justify-self: flex-end;
        }

        &:has(.str-chat__message-reactions--top) {
          padding-inline-start: calc(
            var(--str-chat__message-reactions-host-offset-x) * -1
          );

          &:has(.str-chat__message-reactions--flipped-horizontally) {
            margin-right: var(--str-chat__message-reactions-host-offset-x);
          }
        }

        .str-chat__message-reactions.str-chat__message-reactions--segmented.str-chat__message-reactions--bottom
          > .str-chat__message-reactions__list {
          justify-content: flex-start;
          flex-wrap: wrap;
        }
      }
    }
  }

  &.str-chat__message--pinned.str-chat__message--other {
    @include message-grid-other-with-avatar;
  }

  &.str-chat__message--pinned.str-chat__message--me {
    @include message-grid-me-with-avatar;
  }

  &.str-chat__message--me {
    column-gap: var(--str-chat__spacing-2);
    justify-items: flex-end;

    &.str-chat__message--with-avatar {
      @include message-grid-me-with-avatar;
    }

    &:not(.str-chat__message--with-avatar) {
      @include message-grid-no-avatar;
    }

    .str-chat__message-inner {
      .str-chat__message-reactions-host {
        justify-self: flex-end;

        &:has(.str-chat__message-reactions--flipped-horizontally) {
          justify-self: flex-start;
        }

        &:has(.str-chat__message-reactions--top) {
          padding-inline-end: calc(var(--str-chat__message-reactions-host-offset-x) * -1);

          &:has(.str-chat__message-reactions--flipped-horizontally) {
            margin-left: var(--str-chat__message-reactions-host-offset-x);
          }
        }

        .str-chat__message-reactions.str-chat__message-reactions--segmented.str-chat__message-reactions--bottom
          > .str-chat__message-reactions__list {
          justify-content: flex-end;
          flex-wrap: wrap;
        }
      }
    }
  }

  &.str-chat__message--deleted {
    grid-template-areas: 'message';
  }

  &.str-chat__message--blocked {
    grid-template-areas: 'message';
  }

  &.str-chat__message--system {
    grid-template-areas: 'message';
    grid-template-columns: auto;
  }

  .str-chat__avatar:has(~ .str-chat__message-inner) {
    grid-area: avatar;
    align-self: end;
  }

  &:not(.str-chat__message--with-avatar) .str-chat__avatar {
    display: none;
  }

  .str-chat__message-inner {
    grid-area: message;
    display: grid;
    grid-template-areas:
      'reactions .'
      'message-bubble options'
      'replies replies';
    grid-template-columns: auto 1fr;
    column-gap: var(--str-chat__spacing-2);
    position: relative;

    .str-chat__message-reactions-host {
      display: flex;
      grid-area: reactions;
      z-index: 1;

      &:has(.str-chat__message-reactions--top) {
        margin-bottom: calc(var(--spacing-xxs) * -1);
      }

      &:has(.str-chat__message-reactions--bottom) {
        padding-block: var(--spacing-xxs);
      }
    }

    &:has(.str-chat__message-reactions--top) {
      // maybe remove later
    }

    &:has(.str-chat__message-reactions--bottom) {
      grid-template-areas:
        'message-bubble options'
        'replies replies'
        'reactions .';
    }

    .str-chat__message-bubble {
      display: flex;
      justify-self: flex-start;
      grid-area: message-bubble;
      position: relative;
      min-width: 0;
      @include utils.component-layer-overrides('message-bubble');
      border-radius: var(--message-bubble-radius-group-bottom);
      overflow: hidden;

      .str-chat__message-text {
        @include chat-bubble-spacing;

        .str-chat__message-text-inner {
          @include utils.prevent-glitch-text-overflow;
        }
      }
    }
  }

  &.str-chat__message--me .str-chat__message-bubble {
    justify-self: flex-end;
    background-color: var(--str-chat__own-message-bubble-background-color);
  }

  &.str-chat__message--me .str-chat__message-inner {
    grid-template-areas:
      'reminder reminder'
      '. reactions'
      'options message-bubble'
      'replies replies';
    grid-template-columns: 1fr auto;

    .str-chat__message-options {
      flex-direction: row;
    }

    &:has(.str-chat__message-reactions--bottom) {
      grid-template-areas:
        'reminder reminder'
        'options message-bubble'
        'replies replies'
        '. reactions';
    }
  }

  .str-chat__translation-notice {
    grid-area: translation-notice;

    button {
      cursor: pointer;
      padding: 0.25rem 0;
      margin: 0;
      font: var(--str-chat__body2-text);
      color: var(--str-chat__translation-notice-color);
      border: none;
      background: none;

      &:active,
      &:hover {
        background: var(--str-chat__translation-notice-active-background-color);
      }
    }
  }

  .str-chat__custom-message-metadata {
    grid-area: custom-metadata;
    height: var(--size-24);
    margin-block-start: var(--spacing-xxs);
    color: var(--str-chat__message-secondary-color);
  }

  .str-chat__message-metadata {
    grid-area: metadata;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: var(--size-24);
    color: var(--chat-text-timestamp);

    * {
      font-size: var(--typography-font-size-xs,);
      font-weight: var(--typography-font-weight-regular);
      line-height: var(--typography-line-height-tight);
    }

    .str-chat__message-simple-name {
      @include utils.prevent-glitch-text-overflow;
      margin-inline-end: var(--spacing-xxs);
    }

    .str-chat__message-sender-name {
      font: var(--str-chat__caption-medium-text);
    }

    .str-chat__mesage-simple-edited {
      margin-left: var(--spacing-xs);
    }
  }

  &.str-chat__message--me .str-chat__message-metadata {
    justify-content: flex-end;
    text-align: right;
  }

  .str-chat__message-is-thread-reply-button-wrapper {
    grid-area: replies;

    // TODO: "Thread reply" button styling
  }

  .str-chat__message--deleted-inner {
    @include chat-bubble-spacing;
    // todo: once deleted message designs are ready remove this padding?
    padding-block: var(--spacing-xs);
    @include utils.component-layer-overrides('deleted-message');
    font: var(--str-chat__body2-text);
  }

  .str-chat__message--blocked-inner {
    @include chat-bubble-spacing;
    @include utils.component-layer-overrides('blocked-message');
    // todo: once blocked message designs are ready remove this padding?
    padding-block: var(--spacing-xs);
    font: var(--str-chat__body2-text);
  }

  // Fixes emoji display in Chrome on non-retina display (only detected in Angular SDK) https://bugs.chromium.org/p/chromium/issues/detail?id=596223
  .str-chat__emoji-display-fix {
    display: inline-block;
    width: 1.25em;
  }

  .str-chat__message-error-icon {
    display: none;
    --str-chat-icon-color: var(--str-chat__message-error-message-color);

    /* stylelint-disable-next-line selector-max-id */
    svg #background {
      fill: var(--str-chat__message-error-message-color);
    }
  }

  .str-chat__simple-message--error-failed {
    cursor: pointer;
  }

  &.str-chat__message--error,
  &.str-chat__message--failed {
    $icon-size: calc(var(--str-chat__spacing-px) * 18);

    .str-chat__message-error-icon {
      display: block;
      position: absolute;
      top: 8px;
      inset-inline-end: calc(-1 * calc(#{$icon-size} / 2));

      svg {
        width: $icon-size;
        height: $icon-size;
      }
    }
  }
}

.str-chat__message--highlighted {
  transition: background-color 0.1s ease-out;
  background-color: var(--str-chat__message-highlighted-background-color);
}

.str-chat__message--pinned {
  background-color: var(--str-chat__message-pinned-background-color);
}

/* This rule won't be applied in browsers that don't support :has() */
.str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) {
  background-color: var(--str-chat__message-active-background-color);
}

/* Fallback for when :has() is unsupported */
@supports not selector(:has(a, b)) {
  .str-chat__li:hover {
    background-color: var(--str-chat__message-active-background-color);
  }
}

// Message options display - default mode: they appear when .str-chat__li is hovered
.str-chat__ul:not(
    .str-chat__message-options-in-bubble,
    .str-chat__message-with-touch-support
  ),
.str-chat__virtual-list:not(
    .str-chat__message-options-in-bubble,
    .str-chat__message-with-touch-support
  ) {
  /* This rule won't be applied in browsers that don't support :has() */
  .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)),
  .str-chat__li:focus-within:not(
      :has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)
    ),
  .str-chat__li:has(.str-chat__message-options--active) {
    .str-chat__message-options {
      display: flex;
    }

    .str-chat__message--other .str-chat__message-inner {
      margin-inline-end: 0;
    }

    .str-chat__message--me .str-chat__message-inner {
      margin-inline-start: 0;
    }
  }

  /* Fallback for when :has() is unsupported */
  @supports not selector(:has(a, b)) {
    .str-chat__li:hover,
    .str-chat__li:focus-within {
      .str-chat__message-options {
        display: flex;
      }

      .str-chat__message--other .str-chat__message-inner {
        margin-inline-end: 0;
      }

      .str-chat__message--me .str-chat__message-inner {
        margin-inline-start: 0;
      }
    }
  }
}

// Message options display - second mode: they appear when .str-chat__message-inner is hovered
.str-chat__ul.str-chat__message-options-in-bubble,
.str-chat__virtual-list.str-chat__message-options-in-bubble {
  .str-chat__message-inner {
    &:hover {
      .str-chat__message-options {
        display: flex;
      }
    }
  }

  .str-chat__message--other .str-chat__message-inner:hover {
    margin-inline-end: 0;
  }

  .str-chat__message--me .str-chat__message-inner:hover {
    margin-inline-start: 0;
  }
}

// Message options display - third mode: they appear, when explicitly marked as active
.str-chat__message-inner {
  .str-chat__message-options.str-chat__message-options--active {
    display: flex;
  }
}

.str-chat__message-inner {
  .str-chat__message-options {
    display: none;
  }

  .str-chat__message-actions-open.str-chat__message-options {
    display: flex;
  }
}

.str-chat__message-inner:focus-within {
  .str-chat__message-options {
    display: flex;
  }
}

.str-chat__message--other
  .str-chat__message-inner:not(:has(.str-chat__message-options--active)) {
  margin-inline-end: var(--str-chat-message-options-size);
}

.str-chat__message--me .str-chat__message-inner {
  margin-inline-start: var(--str-chat-message-options-size);
}

.str-chat__li--middle,
.str-chat__li--top {
  .str-chat__message {
    .str-chat__message-metadata {
      display: none;
    }

    // Hide sender avatar in middle/top of group (only show on last message in group)
    > .str-chat__avatar {
      visibility: hidden;
    }
  }
}

.str-chat__li--single,
.str-chat__li--bottom {
  .str-chat__message--other {
    .str-chat__message-bubble {
      border-end-start-radius: var(--message-bubble-radius-tail);
    }
  }

  .str-chat__message--me {
    .str-chat__message-bubble {
      border-end-end-radius: var(--message-bubble-radius-tail);
    }
  }
}

.str-chat__li--top,
.str-chat__li--middle {
  .str-chat__message-bubble {
    border-radius: var(--message-bubble-radius-group-middle);
  }
}

.str-chat__message-with-thread-link {
  &.str-chat__message--other {
    .str-chat__message-bubble {
      border-end-start-radius: calc(var(--str-chat__border-radius-md) / 6);
    }
  }

  &.str-chat__message--me {
    .str-chat__message-bubble {
      border-end-end-radius: calc(var(--str-chat__border-radius-md) / 6);
    }
  }
}

// Avatar display in message list
.str-chat__li--top,
.str-chat__li--middle {
  .str-chat__message.str-chat__message--with-avatar > .str-chat__avatar {
    visibility: hidden;
    pointer-events: none;
  }
}

// todo: not implemented in stream-chat-react
.str-chat__message-with-touch-support {
  .str-chat__message-bubble {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  &.str-chat__message-menu-opened {
    .str-chat__attachments-container,
    .str-chat__message-text-inner {
      pointer-events: none;
    }
  }

  .str-chat__message-inner {
    margin-inline: 0;
  }

  .str-chat__message-options {
    display: none;
  }
}