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

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

@@ -0,0 +1,221 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius of the component */
+  --str-chat__message-input-border-radius: 0;
+
+  /* The text/icon color of the component */
+  --str-chat__message-input-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__message-input-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component */
+  --str-chat__message-input-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__message-input-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__message-input-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__message-input-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__message-input-box-shadow: none;
+
+  /* The text/icon color of the dropzone container */
+  --str-chat__dropzone-container-color: var(--str-chat__on-primary-color);
+
+  /* The background color of the dropzone container */
+  --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color);
+
+  /* The backdrop filter applied to the dropzone container */
+  --str-chat__dropzone-container-backdrop-filter: blur(3px);
+
+  /* The border radius used for the borders of the textarea */
+  --str-chat__message-textarea-border-radius: var(--str-chat__border-radius-md);
+
+  /* The text/icon color of the textarea */
+  --str-chat__message-textarea-color: var(--str-chat__text-color);
+
+  /* The background color of the textarea */
+  --str-chat__message-textarea-background-color: transparent;
+
+  /* Top border of the textarea */
+  --str-chat__message-textarea-border-block-start: 1px solid var(--str-chat__surface-color);
+
+  /* Bottom border of the textarea */
+  --str-chat__message-textarea-border-block-end: 1px solid var(--str-chat__surface-color);
+
+  /* Left (right in RTL layout) border of the textarea */
+  --str-chat__message-textarea-border-inline-start: 1px solid var(--str-chat__surface-color);
+
+  /* Right (left in RTL layout) border of the textarea */
+  --str-chat__message-textarea-border-inline-end: 1px solid var(--str-chat__surface-color);
+
+  /* Box shadow applied to the textarea */
+  --str-chat__message-textarea-box-shadow: none;
+
+  /* The border radius used for the borders of the send button */
+  --str-chat__message-send-border-radius: var(--str-chat__border-radius-circle);
+
+  /* The text/icon color of the send button */
+  --str-chat__message-send-color: var(--str-chat__primary-color);
+
+  /* The background color of the send button */
+  --str-chat__message-send-background-color: transparent;
+
+  /* Top border of the send button */
+  --str-chat__message-send-border-block-start: 0;
+
+  /* Bottom border of the send button */
+  --str-chat__message-send-border-block-end: 0;
+
+  /* Left (right in RTL layout) border of the send button */
+  --str-chat__message-send-border-inline-start: 0;
+
+  /* Right (left in RTL layout) border of the send button */
+  --str-chat__message-send-border-inline-end: 0;
+
+  /* Box shadow applied to the send button */
+  --str-chat__message-send-box-shadow: none;
+
+  /* The color of the send button in disabled state */
+  --str-chat__message-send-disabled-color: var(--str-chat__disabled-color);
+
+  /* The background color of the send button in disabled state */
+  --str-chat__message-send-disabled-background-color: transparent;
+
+  /* The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) */
+  --str-chat__message-input-tools-border-radius: var(--str-chat__border-radius-circle);
+
+  /* The text/icon color of the tool buttons of the message input (such as attachment upload button) */
+  --str-chat__message-input-tools-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background color of the tool buttons of the message input (such as attachment upload button) */
+  --str-chat__message-input-tools-background-color: transparent;
+
+  /* Top border of the tool buttons of the message input (such as attachment upload button) */
+  --str-chat__message-input-tools-border-block-start: 0;
+
+  /* Bottom border of the tool buttons of the message input (such as attachment upload button) */
+  --str-chat__message-input-tools-border-block-end: 0;
+
+  /* Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button) */
+  --str-chat__message-input-tools-border-inline-start: 0;
+
+  /* Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button) */
+  --str-chat__message-input-tools-border-inline-end: 0;
+
+  /* Box shadow applied to the tool buttons of the message input (such as attachment upload button) */
+  --str-chat__message-input-tools-box-shadow: none;
+
+  /* Thex text color of the message that is displayed when the use can't send messages */
+  --str-chat__message-input-not-allowed-color: var(--str-chat__disabled-color);
+
+  /* The border radius used for the borders of the cooldown timer */
+  --str-chat__cooldown-border-radius: var(--str-chat__border-radius-circle);
+
+  /* The text/icon color of the cooldown timer */
+  --str-chat__cooldown-color: var(--str-chat__on-disabled-color);
+
+  /* The background color of the cooldown timer */
+  --str-chat__cooldown-background-color: var(--str-chat__disabled-color);
+
+  /* Top border of the cooldown timer */
+  --str-chat__cooldown-border-block-start: 0;
+
+  /* Bottom border of the cooldown timer */
+  --str-chat__cooldown-border-block-end: 0;
+
+  /* Left (right in RTL layout) border of the cooldown timer */
+  --str-chat__cooldown-border-inline-start: 0;
+
+  /* Right (left in RTL layout) border of the cooldown timer */
+  --str-chat__cooldown-border-inline-end: 0;
+
+  /* Box shadow applied to the cooldown timer */
+  --str-chat__cooldown-box-shadow: none;
+}
+
+.str-chat__message-input {
+  @include utils.component-layer-overrides('message-input');
+
+  .str-chat__dropzone-container {
+    background-color: var(--str-chat__dropzone-container-background-color);
+    color: var(--str-chat__dropzone-container-color);
+    backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
+    font: var(--str-chat__subtitle-text);
+  }
+
+  .str-chat__file-input-container {
+    @include utils.component-layer-overrides('message-input-tools');
+
+    svg path {
+      fill: var(--str-chat__message-input-tools-color);
+    }
+  }
+
+  .str-chat__attachment-preview-image-error {
+    svg path {
+      fill: var(--str-chat__primary-color);
+    }
+  }
+
+  .str-chat__message-textarea-container {
+    @include utils.component-layer-overrides('message-textarea');
+
+    .str-chat__message-textarea {
+      resize: none;
+      border: none;
+      color: var(--str-chat__message-textarea-color);
+      background-color: transparent;
+      box-shadow: none;
+      outline: none;
+      font: var(--str-chat__subtitle-text);
+    }
+  }
+
+  .str-chat__send-button {
+    @include utils.component-layer-overrides('message-send');
+
+    svg path {
+      fill: var(--str-chat__message-send-color);
+    }
+
+    &:disabled {
+      background-color: var(--str-chat__message-send-disabled-background-color);
+
+      svg path {
+        fill: var(--str-chat__message-send-disabled-color);
+      }
+    }
+  }
+
+  .str-chat__message-input-cooldown {
+    @include utils.component-layer-overrides('cooldown');
+    font: var(--str-chat__subtitle-medium-text);
+  }
+
+  .str-chat__message-input-not-allowed {
+    color: var(--str-chat__message-input-not-allowed-color);
+    font: var(--str-chat__subtitle-text);
+  }
+
+  .str-chat__quoted-message-preview-header {
+    .str-chat__quoted-message-reply-to-message {
+      font: var(--str-chat__subtitle-medium-text);
+    }
+
+    .str-chat__quoted-message-remove {
+      background-color: transparent;
+      border: none;
+
+      svg path {
+        fill: var(--str-chat__message-input-tools-color);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+@use '../utils';
+
+.str-chat__main-panel-inner {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  position: relative;
+  align-items: center;
+}
+
+.str-chat__list {
+  @include utils.scrollable;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+
+  .str-chat__message-list-scroll {
+    @include utils.message-list-spacing;
+
+    .str-chat__ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  .str-chat__parent-message-li {
+    $spacing: var(--str-chat__spacing-4);
+    padding-block-end: $spacing;
+    margin-block-end: $spacing;
+
+    .str-chat__thread-start {
+      text-align: start;
+    }
+  }
+
+  .str-chat__parent-message-li .str-chat__thread-start {
+    padding-top: var(--str-chat__spacing-3);
+  }
+}
+
+.str-chat__jump-to-latest-message {
+  position: absolute;
+  inset-block-end: var(--str-chat__spacing-4);
+  inset-inline-end: var(--str-chat__spacing-2);
+  z-index: 2;
+
+  .str-chat__jump-to-latest-unread-count {
+    position: absolute;
+    padding: var(--str-chat__spacing-0_5) var(--str-chat__spacing-2);
+    left: 50%;
+    transform: translateX(-50%) translateY(-100%);
+  }
+}
+
+.str-chat__thread {
+  .str-chat__main-panel-inner {
+    height: auto;
+  }
+}

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

@@ -0,0 +1,105 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__message-list-border-radius: 0;
+
+  /* The text/icon color of the component */
+  --str-chat__message-list-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__message-list-background-color: var(--str-chat__background-color);
+
+  /* Box shadow applied to the component */
+  --str-chat__message-list-box-shadow: none;
+
+  /* Top border of the component */
+  --str-chat__message-list-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__message-list-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__message-list-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__message-list-border-inline-end: none;
+
+  /* The border radius used for the borders of the jump to latest message button */
+  --str-chat__jump-to-latest-message-border-radius: var(--str-chat__circle-fab-border-radius);
+
+  /* The text/icon color of the jump to latest message button */
+  --str-chat__jump-to-latest-message-color: var(--str-chat__circle-fab-color);
+
+  /* The background color of the jump to latest message button */
+  --str-chat__jump-to-latest-message-background-color: var(--str-chat__circle-fab-background-color);
+
+  /* The background color of the jump to latest message button in pressed state */
+  --str-chat__jump-to-latest-message-pressed-background-color: var(
+    --str-chat__circle-fab-pressed-background-color
+  );
+
+  /* Box shadow applied to the jump to latest message button */
+  --str-chat__jump-to-latest-message-box-shadow: var(--str-chat__circle-fab-box-shadow);
+
+  /* Top border of the jump to latest message button */
+  --str-chat__jump-to-latest-message-border-block-start: var(
+    --str-chat__circle-fab-border-block-start
+  );
+
+  /* Bottom border of the jump to latest message button */
+  --str-chat__jump-to-latest-message-border-block-end: var(--str-chat__circle-fab-border-block-end);
+
+  /* Left (right in RTL layout) border of the jump to latest message button */
+  --str-chat__jump-to-latest-message-border-inline-start: var(
+    --str-chat__circle-fab-border-inline-start
+  );
+
+  /* Right (left in RTL layout) border of the jump to latest message button */
+  --str-chat__jump-to-latest-message-border-inline-end: var(
+    --str-chat__circle-fab-border-inline-end
+  );
+
+  /* The background color of the unread messages count on the jump to latest message button */
+  --str-chat__jump-to-latest-message-unread-count-background-color: var(
+    --str-chat__jump-to-latest-message-color
+  );
+
+  /* The text/icon color of the unread messages count on the jump to latest message button */
+  --str-chat__jump-to-latest-message-unread-count-color: var(
+    --str-chat__jump-to-latest-message-background-color
+  );
+
+  /* The color used for displaying thread replies and thread separator at the start of a thread */
+  --str-chat__thread-head-start-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The color used for the separator below the first message in a thread */
+  --str-chat__thread-head-start-border-block-end-color: var(--str-chat__surface-color);
+}
+
+.str-chat__list {
+  @include utils.component-layer-overrides('message-list');
+
+  .str-chat__parent-message-li {
+    border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
+
+    .str-chat__thread-start {
+      color: var(--str-chat__thread-head-start-color);
+      font: var(--str-chat__subtitle-text);
+    }
+  }
+}
+
+.str-chat__jump-to-latest-message {
+  .str-chat__circle-fab {
+    @include utils.component-layer-overrides('jump-to-latest-message');
+    @include utils.circle-fab-overrides('jump-to-latest-message');
+
+    .str-chat__jump-to-latest-unread-count {
+      background-color: var(--str-chat__jump-to-latest-message-unread-count-background-color);
+      color: var(--str-chat__jump-to-latest-message-unread-count-color);
+      border-radius: var(--str-chat__jump-to-latest-message-border-radius);
+      font: var(--str-chat__caption-text);
+    }
+  }
+}

package/dist/scss/v2/MessageList/VirtualizedMessageList-layout.scss

@@ -0,0 +1,44 @@
+@use '../utils';
+
+// todo: React SDK specific. Copied from V1. Deprecate after merging with MessageList
+.str-chat__virtual-list {
+  @include utils.scrollable;
+  position: relative;
+  flex: 1;
+  -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
+  margin: 0;
+  width: 100%;
+  height: 100%;
+
+  .str-chat__message-list-scroll > div {
+    @include utils.message-list-spacing;
+  }
+
+  // conditionally showing the header displaces items when prepending.
+  // a simple workaround is to make the loading indicator an overlay.
+  &__loading {
+    display: flex;
+    padding-top: var(--str-chat__spacing-2);
+    justify-content: center;
+    width: 100%;
+    position: absolute;
+  }
+
+  p {
+    margin: 0 !important; // always use padding, margin mess up the height calculations
+
+    a {
+      white-space: pre-line;
+      overflow: hidden;
+      word-wrap: break-word;
+    }
+  }
+
+  .str-chat__message {
+    margin-block-end: 0 !important;
+  }
+
+  .str-chat__virtual-list-message-wrapper {
+    padding-block-end: var(--str-chat__spacing-0_5);
+  }
+}

package/dist/scss/v2/MessageList/VirtualizedMessageList-theme.scss

@@ -0,0 +1,32 @@
+@use '../utils';
+
+/* Only available in React SDK. */
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__virtual-list-border-radius: 0;
+
+  /* The text/icon color of the component */
+  --str-chat__virtual-list-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__virtual-list-background-color: var(--str-chat__background-color);
+
+  /* Box shadow applied to the component */
+  --str-chat__virtual-list-box-shadow: none;
+
+  /* Top border of the component */
+  --str-chat__virtual-list-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__virtual-list-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__virtual-list-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__virtual-list-border-inline-end: none;
+}
+
+.str-chat__virtual-list {
+  @include utils.component-layer-overrides('virtual-list');
+}

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

@@ -0,0 +1,64 @@
+@use '../utils';
+
+.str-chat__message-reactions-container {
+  display: flex;
+
+  .str-chat__message-reactions {
+    list-style: none;
+    display: flex;
+    margin-block-start: var(--str-chat__spacing-0_5);
+    margin-block-end: var(--str-chat__spacing-0_5);
+    column-gap: var(--str-chat__spacing-0_5);
+    width: fit-content;
+    padding: 0;
+    position: relative;
+
+    .str-chat__message-reaction {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: var(--str-chat__spacing-1_5);
+
+      button {
+        @include utils.button-reset;
+        @include utils.flex-row-center;
+        padding: 0;
+      }
+
+      .str-chat__message-reaction-emoji {
+        height: calc(var(--str-chat__spacing-px) * 13);
+        display: flex !important; // Overriding emoji-mart styles
+        align-items: center;
+        justify-content: center;
+      }
+
+      .str-chat__tooltip {
+        display: none;
+      }
+
+      &:hover {
+        .str-chat__tooltip {
+          display: flex;
+        }
+      }
+    }
+
+    // Only in theme-v1
+    .str-chat__reaction-list--counter,
+    .str-chat__simple-reactions-list-item--last-number {
+      display: none;
+    }
+  }
+}
+
+.str-chat__message--me {
+  .str-chat__message-reactions-container {
+    justify-content: flex-end;
+  }
+}
+
+.str-chat__message--other {
+  .str-chat__message-reactions-container {
+    justify-content: flex-start;
+  }
+}

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

@@ -0,0 +1,75 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__message-reactions-border-radius: none;
+
+  /* The text/icon color of the component */
+  --str-chat__message-reactions-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__message-reactions-background-color: transparent;
+
+  /* Top border of the component */
+  --str-chat__message-reactions-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__message-reactions-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__message-reactions-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__message-reactions-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__message-reactions-box-shadow: none;
+
+  /* The border radius used for the borders of a message reaction */
+  --str-chat__message-reaction-border-radius: var(--str-chat__border-radius-xs);
+
+  /* The text/icon color of a message reaction */
+  --str-chat__message-reaction-color: var(--str-chat__text-color);
+
+  /* The background color of a message reaction */
+  --str-chat__message-reaction-background-color: var(--str-chat__tertiary-surface-color);
+
+  /* Top border of a message reaction */
+  --str-chat__message-reaction-border-block-start: none;
+
+  /* Bottom border of a message reaction */
+  --str-chat__message-reaction-border-block-end: none;
+
+  /* Left (right in RTL layout) border of a message reaction */
+  --str-chat__message-reaction-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of a message reaction */
+  --str-chat__message-reaction-border-inline-end: none;
+
+  /* Box shadow applied to a message reaction */
+  --str-chat__message-reaction-box-shadow: none;
+
+  /* The text/icon color of a message reaction, if the user reacted with that reaction */
+  --str-chat__own-message-reaction-color: var(--str-chat__text-color);
+
+  /* The background color of a message reaction, if the user reacted with that reaction */
+  --str-chat__own-message-reaction-background-color: var(
+    --str-chat__primary-surface-color-low-emphasis
+  );
+}
+
+.str-chat__message-reactions-container {
+  .str-chat__message-reactions {
+    @include utils.component-layer-overrides('message-reactions');
+
+    .str-chat__message-reaction {
+      @include utils.component-layer-overrides('message-reaction');
+      font: var(--str-chat__caption-text);
+
+      &.str-chat__message-reaction-own {
+        color: var(--str-chat__own-message-reaction-color);
+        background-color: var(--str-chat__own-message-reaction-background-color);
+      }
+    }
+  }
+}

package/dist/scss/v2/MessageReactions/MessageReactionsSelector-layout.scss

@@ -0,0 +1,52 @@
+@use '../utils';
+
+.str-chat__message-reaction-selector {
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  inset-block-end: 100%;
+
+  .str-chat__message-reactions-options {
+    list-style: none;
+    display: flex;
+    margin-block-end: var(--str-chat__spacing-0_5);
+    width: fit-content;
+    column-gap: var(--str-chat__spacing-1);
+    padding: var(--str-chat__spacing-2);
+
+    .str-chat__message-reactions-option {
+      @include utils.flex-row-center;
+      cursor: pointer;
+      width: calc(var(--str-chat__spacing-px) * 40);
+      height: calc(var(--str-chat__spacing-px) * 40);
+
+      .str-chat__message-reaction-emoji {
+        height: calc(var(--str-chat__spacing-px) * 20);
+        display: flex !important; // Overriding emoji-mart styles
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    // Only in theme-v1
+    .str-chat__message-reactions-last-user {
+      display: none;
+    }
+
+    .str-chat__message-reactions-list-item__count {
+      display: none;
+    }
+  }
+}
+
+.str-chat__message--me {
+  .str-chat__message-reaction-selector {
+    inset-inline-end: 0;
+  }
+}
+
+.str-chat__message--other {
+  .str-chat__message-reaction-selector {
+    inset-inline-start: 0;
+  }
+}