stream-chat-react 13.0.4 → 13.1.0

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

@@ -88,9 +88,16 @@
   hyphens: auto;
   overflow-wrap: break-word;
 
+  .str-chat__message-reminder {
+    grid-area: message-reminder;
+    padding-block: 0.5rem 0.125rem;
+    margin: 0;
+  }
+
   &.str-chat__message--other,
   &.str-chat__quoted-message-preview {
     grid-template-areas:
+      '. message-reminder'
       'avatar message'
       '. replies'
       '. translation-notice'
@@ -103,6 +110,7 @@
 
   &.str-chat__message--me {
     grid-template-areas:
+      'message-reminder'
       'message'
       'replies'
       'translation-notice'
@@ -187,6 +195,7 @@
 
   &.str-chat__message--me .str-chat__message-inner {
     grid-template-areas:
+      'reminder reminder'
       'reactions reactions'
       'options message-bubble';
     grid-template-columns: 1fr auto;
@@ -251,7 +260,8 @@
     }
   }
 
-  .str-chat__message-replies-count-button-wrapper {
+  .str-chat__message-replies-count-button-wrapper,
+  .str-chat__message-is-thread-reply-button-wrapper {
     grid-area: replies;
 
     button {
@@ -313,7 +323,8 @@
 .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: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;
     }

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

@@ -198,6 +198,30 @@
 
   /* The hover color of the translation notice that is displayed if a message is translated with auto-translation */
   --str-chat__translation-notice-active-background-color: var(--str-chat__tertiary-surface-color);
+
+  /* The text color of the message reminder, if it's a quoted message */
+  --str-chat__message-reminder-color: var(--str-chat__primary-color);
+
+  /* The background of the message reminder, if it's a quoted message */
+  --str-chat__message-reminder-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the message reminder */
+  --str-chat__message-reminder-border-block-start: none;
+
+  /* Bottom border of the message reminder */
+  --str-chat__message-reminder-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the message reminder */
+  --str-chat__message-reminder-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the message reminder */
+  --str-chat__message-reminder-border-inline-end: none;
+
+  /* Box shadow applied to the message reminder */
+  --str-chat__message-reminder-box-shadow: none;
+
+  /* The border radius used for the borders of a message reminder */
+  --str-chat__message-reminder-border-radius: 0;
 }
 
 .str-chat__message--system {
@@ -228,6 +252,11 @@
     color: var(--str-chat__message-link-color);
   }
 
+  .str-chat__message-reminder {
+    @include utils.component-layer-overrides('message-reminder');
+    font: var(--str-chat__caption-medium-text);
+  }
+
   .str-chat__message-bubble {
     @include utils.component-layer-overrides('message-bubble');
     font: var(--str-chat__body2-text);
@@ -315,7 +344,8 @@
     }
   }
 
-  .str-chat__message-replies-count-button-wrapper {
+  .str-chat__message-replies-count-button-wrapper,
+  .str-chat__message-is-thread-reply-button-wrapper {
     button {
       border: none;
       background-color: transparent;

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

@@ -66,6 +66,14 @@
       background-color: var(--str-chat__message-actions-box-item-hover-background-color);
     }
   }
+
+  .str_chat__button-with-submenu--submenu-open {
+    background-color: var(--str-chat__message-actions-box-item-hover-background-color);
+  }
+
+  .str-chat__message-actions-box__submenu {
+    @include utils.component-layer-overrides('message-actions-box');
+  }
 }
 
 @media (hover: none) {

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

@@ -239,3 +239,22 @@
   min-width: 300px;
   padding-block: 0.5rem;
 }
+
+.str-chat__send-to-channel-checkbox__container {
+  width: 100%;
+  display: flex;
+  padding: 0.5rem 0.75rem;
+
+  .str-chat__send-to-channel-checkbox__field {
+    display: flex;
+    align-items: center;
+
+    label {
+      padding-inline: 0.5rem;
+    }
+
+    input {
+      margin: 0;
+    }
+  }
+}

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

@@ -338,3 +338,14 @@
     }
   }
 }
+
+.str-chat__send-to-channel-checkbox__field {
+  * {
+    cursor: pointer;
+  }
+
+  label {
+    color: var(--str-chat__text-low-emphasis-color);
+    font: var(--str-chat__body-text);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "13.0.4",
+  "version": "13.1.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -110,7 +110,7 @@
     "emoji-regex": "^9.2.0",
     "fix-webm-duration": "^1.0.5",
     "hast-util-find-and-replace": "^5.0.1",
-    "i18next": "^21.6.14",
+    "i18next": "^25.2.1",
     "linkifyjs": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.defaultsdeep": "^4.6.1",
@@ -118,7 +118,6 @@
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
     "nanoid": "^3.3.4",
-    "prop-types": "^15.7.2",
     "react-dropzone": "^14.2.3",
     "react-fast-compare": "^3.2.2",
     "react-image-gallery": "1.2.12",
@@ -128,7 +127,6 @@
     "react-textarea-autosize": "^8.3.0",
     "react-virtuoso": "^2.16.5",
     "remark-gfm": "^4.0.1",
-    "textarea-caret": "^3.1.0",
     "tslib": "^2.6.2",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
@@ -145,7 +143,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.14.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.14.0",
-    "stream-chat": "^9.0.0"
+    "stream-chat": "^9.6.0"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {
@@ -186,7 +184,7 @@
     "@playwright/test": "^1.42.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@stream-io/stream-chat-css": "^5.9.2",
+    "@stream-io/stream-chat-css": "^5.11.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -228,7 +226,7 @@
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
     "globals": "^15.13.0",
     "husky": "^8.0.3",
-    "i18next-parser": "^6.0.0",
+    "i18next-parser": "^9.3.0",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -239,7 +237,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "semantic-release": "^24.2.3",
-    "stream-chat": "9.1.1",
+    "stream-chat": "^9.6.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.17.0"