stream-chat-react 9.3.0 → 10.0.0-theming-v2.1

package/dist/scss/v2/Message/Message-theme.scss

@@ -0,0 +1,353 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__message-border-radius: none;
+
+  /* The text/icon color of the component */
+  --str-chat__message-color: var(--str-chat__text-color);
+
+  /* The text/icon color used for displaying error messages */
+  --str-chat__message-error-message-color: var(--str-chat__danger-color);
+
+  /* The text/icon color used for displaying items with less emphasis */
+  --str-chat__message-secondary-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The text color used for displaying links */
+  --str-chat__message-link-color: var(--str-chat__primary-color);
+
+  /* The text color used for displaying mentions */
+  --str-chat__message-mention-color: var(--str-chat__primary-color);
+
+  /* The text/icon color used for displaying message status */
+  --str-chat__message-status-color: var(--str-chat__primary-color);
+
+  /* The text color used for displaying the number of thread replies of a message */
+  --str-chat__message-replies-count-color: var(--str-chat__primary-color);
+
+  /* The background color of the component */
+  --str-chat__message-background-color: transparent;
+
+  /* The background color of a jumped-to message */
+  --str-chat__message-highlighted-background-color: var(--str-chat__message-highlight-color);
+
+  /* Top border of the component */
+  --str-chat__message-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__message-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__message-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__message-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__message-box-shadow: none;
+
+  /* The background of the message component in active state */
+  --str-chat__message-active-bacground-color: transparent;
+
+  /* The icon color used for displaying message options */
+  --str-chat__message-options-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The icon color used for displaying message options if a message option is clicked */
+  --str-chat__message-options-hover-background-color: var(--str-chat__tertiary-surface-color);
+
+  /* The border radius used for displaying message options */
+  --str-chat__message-options-border-radius: var(--str-chat__border-radius-circle);
+
+  /* The background color used if a message option is hovered */
+  --str-chat__message-options-active-color: var(--str-chat__primary-color);
+
+  /* The border radius used for the borders of the message bubble */
+  --str-chat__message-bubble-border-radius: var(--str-chat__border-radius-md);
+
+  /* The text/icon of the message bubble */
+  --str-chat__message-bubble-color: var(--str-chat__text-color);
+
+  /* The background of the message bubble */
+  --str-chat__message-bubble-background-color: var(--str-chat__secondary-surface-color);
+
+  /* The background of the message bubble, if the message was sent by the user */
+  --str-chat__own-message-bubble-background-color: var(--str-chat__primary-surface-color);
+
+  /* The background of the message bubble, if it's a quoted message */
+  --str-chat__quoted-message-bubble-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the message bubble */
+  --str-chat__message-bubble-border-block-start: none;
+
+  /* Bottom border of the message bubble */
+  --str-chat__message-bubble-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the message bubble */
+  --str-chat__message-bubble-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the message bubble */
+  --str-chat__message-bubble-border-inline-end: none;
+
+  /* Box shadow applied to the message bubble */
+  --str-chat__message-bubble-box-shadow: none;
+
+  /* The border radius used for the borders of a deleted message */
+  --str-chat__deleted-message-border-radius: var(--str-chat__border-radius-md);
+
+  /* The text/icon of a deleted message */
+  --str-chat__deleted-message-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background of a deleted message */
+  --str-chat__deleted-message-background-color: var(--str-chat__secondary-surface-color);
+
+  /* Top border of a deleted message */
+  --str-chat__deleted-message-border-block-start: none;
+
+  /* Bottom border of a deleted message */
+  --str-chat__deleted-message-border-block-end: none;
+
+  /* Left (right in RTL layout) border of a deleted message */
+  --str-chat__deleted-message-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of a deleted message */
+  --str-chat__deleted-message-border-inline-end: none;
+
+  /* Box shadow applied to a deleted message */
+  --str-chat__deleted-message-box-shadow: none;
+
+  /* The border radius used for the borders of a system message */
+  --str-chat__system-message-border-radius: 0;
+
+  /* The text/icon of a system message */
+  --str-chat__system-message-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background of a system message */
+  --str-chat__system-message-background-color: transparent;
+
+  /* Top border of a system message */
+  --str-chat__system-message-border-block-start: none;
+
+  /* Bottom border of a system message */
+  --str-chat__system-message-border-block-end: none;
+
+  /* Left (right in RTL layout) border of a system message */
+  --str-chat__system-message-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of a system message */
+  --str-chat__system-message-border-inline-end: none;
+
+  /* Box shadow applied to a system message */
+  --str-chat__system-message-box-shadow: none;
+
+  /* Text color in a date separator*/
+  --str-chat__date-separator-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The line color applied to date separator */
+  --str-chat__date-separator-line-color: var(--str-chat__disabled-color);
+
+  /* The border radius used for the borders of a date separator */
+  --str-chat__date-separator-border-radius: 0;
+
+  /* The background color of a date separator */
+  --str-chat__date-separator-background-color: transparent;
+
+  /* Top border of a date separator */
+  --str-chat__date-separator-border-block-start: none;
+
+  /* Bottom border of a date separator */
+  --str-chat__date-separator-border-block-end: none;
+
+  /* Left (right in RTL layout) border of a date separator */
+  --str-chat__date-separator-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of a date separator */
+  --str-chat__date-separator-border-inline-end: none;
+
+  /* Box shadow applied to a date separator */
+  --str-chat__date-separator-box-shadow: none;
+}
+
+.str-chat__message--system {
+  @include utils.component-layer-overrides('system-message');
+  font: var(--str-chat__caption-text);
+}
+
+.str-chat__date-separator {
+  @include utils.component-layer-overrides('date-separator');
+  font: var(--str-chat__body-text);
+
+  &-line {
+    background-color: var(--str-chat__date-separator-line-color);
+    border: none;
+  }
+}
+
+.str-chat__message {
+  @include utils.component-layer-overrides('message');
+
+  a {
+    text-decoration: none;
+    color: var(--str-chat__message-link-color);
+  }
+
+  .str-chat__message-mention {
+    color: var(--str-chat__message-mention-color);
+    font: var(--str-chat__body2-medium-text);
+  }
+
+  .str-chat__message-bubble {
+    @include utils.component-layer-overrides('message-bubble');
+    font: var(--str-chat__body2-text);
+  }
+
+  .str-chat__message--deleted-inner {
+    @include utils.component-layer-overrides('deleted-message');
+    font: var(--str-chat__body2-text);
+  }
+
+  &.str-chat__message--me .str-chat__message-bubble {
+    background-color: var(--str-chat__own-message-bubble-background-color);
+  }
+
+  .str-chat__message-options {
+    .str-chat__message-actions-box-button,
+    .str-chat__message-reply-in-thread-button,
+    .str-chat__message-reactions-button {
+      // remove default button styles (React SDK uses button compared to div in Angular SDK)
+      @include utils.button-reset;
+      border-radius: var(--str-chat__message-options-border-radius);
+
+      .str-chat__message-action-icon path {
+        fill: var(--str-chat__message-options-color);
+      }
+    }
+
+    .str-chat__message-actions-box-button:hover,
+    .str-chat__message-reply-in-thread-button:hover,
+    .str-chat__message-reactions-button:hover {
+      background-color: var(--str-chat__message-options-hover-background-color);
+    }
+
+    .str-chat__message-actions-box-button:active,
+    .str-chat__message-reply-in-thread-button:active,
+    .str-chat__message-reactions-button:active {
+      .str-chat__message-action-icon path {
+        fill: var(--str-chat__message-options-active-color);
+      }
+    }
+  }
+
+  .str-chat__message-metadata {
+    color: var(--str-chat__message-secondary-color);
+    font: var(--str-chat__caption-text);
+
+    .str-chat__message-sender-name {
+      font: var(--str-chat__caption-medium-text);
+    }
+  }
+
+  .str-chat__message-status {
+    color: var(--str-chat__message-status-color);
+    font: var(--str-chat__body-text);
+
+    svg {
+      path {
+        fill: var(--str-chat__message-status-color);
+      }
+    }
+  }
+
+  .str-chat__message-replies-count-button-wrapper {
+    button {
+      border: none;
+      background-color: transparent;
+      font: var(--str-chat__body-medium-text);
+      color: var(--str-chat__message-replies-count-color);
+    }
+  }
+
+  .str-chat__message--error-message {
+    color: var(--str-chat__message-error-message-color);
+    font: var(--str-chat__caption-text);
+  }
+
+  .str-chat__message-error-icon {
+    /* stylelint-disable-next-line selector-max-id */
+    svg #background {
+      fill: var(--str-chat__message-error-message-color);
+    }
+  }
+}
+
+.str-chat__message--highlighted {
+  transition: background-color 0.1s ease-out;
+  background-color: var(--str-chat__message-highlighted-background-color);
+}
+
+.str-chat__li:hover {
+  background-color: var(--str-chat__message-active-bacground-color);
+}
+
+.str-chat__li--top,
+.str-chat__li--single {
+  .str-chat__message--other {
+    .str-chat__message-bubble {
+      border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
+    }
+  }
+
+  .str-chat__message--me {
+    .str-chat__message-bubble {
+      border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
+    }
+  }
+}
+
+.str-chat__li--middle,
+.str-chat__li--bottom {
+  .str-chat__message--other {
+    .str-chat__message-bubble {
+      border-start-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
+      border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
+    }
+  }
+
+  .str-chat__message--me {
+    .str-chat__message-bubble {
+      border-start-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
+      border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
+    }
+  }
+}
+
+.str-chat__message-with-thread-link {
+  &.str-chat__message--other {
+    .str-chat__message-bubble {
+      border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
+    }
+  }
+
+  &.str-chat__message--me {
+    .str-chat__message-bubble {
+      border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
+    }
+  }
+}
+
+.str-chat__quoted-message-preview {
+  @include utils.component-layer-overrides('message');
+
+  .str-chat__quoted-message-bubble {
+    @include utils.component-layer-overrides('message-bubble');
+    background-color: var(--str-chat__quoted-message-bubble-background-color);
+    border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
+  }
+}
+
+.str-chat__message-input {
+  .str-chat__quoted-message-preview {
+    .str-chat__quoted-message-bubble {
+      background-color: var(--str-chat__message-bubble-background-color);
+    }
+  }
+}

package/dist/scss/v2/MessageActionsBox/MessageActionsBox-layout.scss

@@ -0,0 +1,48 @@
+.str-chat__message-actions-box {
+  overflow: hidden; // Avoids message action box item background overflow in hovered state
+
+  .str-chat__message-actions-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    min-width: 10rem;
+
+    .str-chat__message-actions-list-item-button {
+      padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
+      margin: 0;
+      cursor: pointer;
+      width: 100%;
+      text-align: start;
+    }
+  }
+}
+
+.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular) {
+  display: none;
+  position: absolute;
+  z-index: 1;
+
+  &.str-chat__message-actions-box--open {
+    display: block;
+  }
+
+  &.str-chat__message-actions-box--mine {
+    inset-block-end: 100%;
+    inset-inline-start: 100%;
+  }
+
+  &:not(.str-chat__message-actions-box--mine) {
+    inset-block-end: 100%;
+    inset-inline-end: 100%;
+  }
+}
+
+.str-chat__message-edit-in-progress {
+  .ngxp__container {
+    transform: initial !important;
+    will-change: initial !important;
+    z-index: initial;
+  }
+}

package/dist/scss/v2/MessageActionsBox/MessageActionsBox-theme.scss

@@ -0,0 +1,69 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__message-actions-box-border-radius: var(--str-chat__border-radius-sm);
+
+  /* The text/icon color of the component */
+  --str-chat__message-actions-box-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__message-actions-box-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component */
+  --str-chat__message-actions-box-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__message-actions-box-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__message-actions-box-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__message-actions-box-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__message-actions-box-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
+
+  /* The border radius used for the borders of an item in the message actions box */
+  --str-chat__message-actions-box-item-border-radius: 0;
+
+  /* The text/icon color of an item in the message actions box */
+  --str-chat__message-actions-box-item-color: var(--str-chat__text-color);
+
+  /* The background color of an item in the message actions box */
+  --str-chat__message-actions-box-item-background-color: transparent;
+
+  /* The background color of an item in the message actions box when hovered */
+  --str-chat__message-actions-box-item-hover-background-color: var(
+    --str-chat__secondary-surface-color
+  );
+
+  /* Top border of an item in the message actions box */
+  --str-chat__message-actions-box-item-border-block-start: none;
+
+  /* Bottom border of an item in the message actions box */
+  --str-chat__message-actions-box-item-border-block-end: none;
+
+  /* Left (right in RTL layout) border of an item in the message actions box */
+  --str-chat__message-actions-box-item-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of an item in the message actions box */
+  --str-chat__message-actions-box-item-border-inline-end: none;
+
+  /* Box shadow applied to an item in the message actions box */
+  --str-chat__message-actions-box-item-box-shadow: none;
+}
+
+.str-chat__message-actions-box {
+  @include utils.component-layer-overrides('message-actions-box');
+
+  .str-chat__message-actions-list-item-button {
+    @include utils.component-layer-overrides('message-actions-box-item');
+    font: var(--str-chat__subtitle-text);
+
+    &:hover {
+      background-color: var(--str-chat__message-actions-box-item-hover-background-color);
+    }
+  }
+}

package/dist/scss/v2/MessageInput/MessageInput-layout.scss

@@ -0,0 +1,186 @@
+@use '../utils';
+
+.str-chat__message-input {
+  $send-button-size: calc(var(--str-chat__spacing-px) * 45);
+
+  @include utils.flex-col-center;
+  width: 100%;
+  padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
+
+  position: relative;
+
+  .str-chat__quoted-message-preview-header {
+    @include utils.flex-row-center;
+    width: 100%;
+
+    .str-chat__quoted-message-reply-to-message {
+      width: 100%;
+      text-align: center;
+    }
+
+    .str-chat__quoted-message-remove {
+      width: calc(var(--str-chat__spacing-px) * 40);
+      height: calc(var(--str-chat__spacing-px) * 40);
+      cursor: pointer;
+    }
+  }
+
+  .str-chat__dropzone-container {
+    @include utils.flex-row-center;
+
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 5;
+
+    p {
+      margin: unset;
+    }
+  }
+
+  .str-chat__message-input-inner {
+    flex-grow: 1;
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+
+    .str-chat__file-input-container {
+      @include utils.flex-row-center;
+      width: calc(var(--str-chat__spacing-px) * 45);
+      height: calc(var(--str-chat__spacing-px) * 45);
+      cursor: pointer;
+
+      .str-chat__file-input {
+        display: none;
+      }
+
+      .str-chat__file-input-label {
+        @include utils.flex-row-center;
+        cursor: pointer;
+      }
+    }
+
+    .str-chat__message-textarea-container {
+      @include utils.flex-col-center;
+      width: 100%;
+      min-width: 0;
+      max-height: 100%;
+
+      .str-chat__message-textarea-with-emoji-picker {
+        width: 100%;
+        min-height: 0;
+        max-height: 100%;
+        display: flex;
+        padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
+        column-gap: var(--str-chat__spacing-2);
+
+        .str-chat__message-textarea {
+          width: 100%;
+          display: flex;
+          max-height: 100%;
+          overflow-y: auto;
+          overflow-x: hidden;
+          padding: 0;
+        }
+
+        .str-chat__message-textarea-emoji-picker {
+          @include utils.flex-row-center;
+          width: calc(var(--str-chat__spacing-px) * 27);
+          height: calc(var(--str-chat__spacing-px) * 27);
+          font-size: calc(var(--str-chat__spacing-px) * 27);
+          align-self: end;
+
+          .str-chat__message-textarea-emoji-picker-container {
+            z-index: 5;
+
+            .str-chat__emoji-picker-container {
+              display: flex;
+            }
+          }
+
+          .str-chat__emoji-picker-button {
+            @include utils.unset-button;
+            display: flex;
+            cursor: pointer;
+
+            svg {
+              width: calc(var(--str-chat__spacing-px) * 24);
+              height: calc(var(--str-chat__spacing-px) * 24);
+
+              path {
+                fill: var(--str-chat__message-input-tools-color);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .str-chat__message-textarea-angular-host {
+    @include utils.flex-row-center;
+    width: 100%;
+  }
+
+  .str-chat__message-textarea-react-host {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .str-chat__send-button {
+    @include utils.flex-row-center;
+    cursor: pointer;
+    padding: 0;
+    width: $send-button-size;
+    height: $send-button-size;
+    min-width: $send-button-size;
+
+    svg {
+      width: calc(var(--str-chat__spacing-px) * 32);
+      height: calc(var(--str-chat__spacing-px) * 32);
+    }
+  }
+
+  .str-chat__message-input-cooldown {
+    @include utils.flex-row-center;
+    margin-inline-start: var(--str-chat__spacing-2);
+    margin-block: calc(var(--str-chat__spacing-2) / 2);
+    min-width: calc(#{$send-button-size} - var(--str-chat__spacing-2));
+    min-height: calc(#{$send-button-size} - var(--str-chat__spacing-2));
+  }
+
+  .str-chat__message-input-not-allowed {
+    align-self: center;
+    padding: var(--str-chat__spacing-3);
+  }
+
+  .str-chat__quoted-message-preview {
+    padding: var(--str-chat__spacing-2);
+  }
+}
+
+.str-chat__message-input-angular-host {
+  max-height: 50%;
+}
+
+.str-chat-angular__message-input {
+  height: 100%;
+  max-height: 100%;
+}
+
+.str-chat-angular__message-input-inner {
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  flex-grow: initial;
+}
+
+[dir='rtl'] .str-chat__send-button {
+  svg {
+    transform: scale(-1, 1);
+  }
+}