Merge remote-tracking branch 'origin/develop' into theming-v2

.github/workflows/docusaurus.yml

@@ -2,9 +2,13 @@ name: docusaurus
 on:
   push:
     branches:
-      - master # default branch name for each repo that docs should be push from
+      - master
+      - develop
     paths:
       - docusaurus/**
+env:
+  branch_map: '{"refs/heads/master": "production", "refs/heads/develop": "staging"}'
+
 jobs:
   push_docusaurus:
     runs-on: ubuntu-latest
@@ -25,9 +29,9 @@ jobs:
           ref: v${{ node -e 'pkg=require("./package.json"); console.log(pkg.dependencies["@stream-io/stream-chat-css"])' }}
       - name: Merge docs stream-chat-css
         run: bash scripts/merge-stream-chat-css-docs.sh stream-chat-css/docs
-      - name: push
+      - name: Push to stream-chat-docusaurus
         uses: GetStream/push-stream-chat-docusaurus-action@main
         with:
-          target-branch: production
+          target-branch: ${{ fromJSON(env.branch_map)[github.ref] }}
         env:
           DOCUSAURUS_GH_TOKEN: ${{ secrets.DOCUSAURUS_GH_TOKEN }}

CHANGELOG.md

@@ -1,3 +1,35 @@
+# [9.2.0](https://github.com/GetStream/stream-chat-react/compare/v9.1.5...v9.2.0) (2022-07-26)
+
+
+### Features
+
+* add autoscrollToBottom to message context ([#1681](https://github.com/GetStream/stream-chat-react/issues/1681)) ([a616184](https://github.com/GetStream/stream-chat-react/commit/a6161843509c55e9b432f4f66dfb344f0faa8b18))
+
+## [9.1.5](https://github.com/GetStream/stream-chat-react/compare/v9.1.4...v9.1.5) (2022-07-15)
+
+
+### Bug Fixes
+
+* align user role checks with channel membership, deprecate isModerator, isAdmin, isOwner ([#1666](https://github.com/GetStream/stream-chat-react/issues/1666)) ([31f0916](https://github.com/GetStream/stream-chat-react/commit/31f09168fafe054c102ea85905243a1915fb957d))
+* allow quoting quoted messages ([#1662](https://github.com/GetStream/stream-chat-react/issues/1662)) ([36dbc82](https://github.com/GetStream/stream-chat-react/commit/36dbc82df0c17939f603f6f6c33acb472cd40f9b))
+* **Channel:** allow usage of custom message ID in sendMessage ([#1663](https://github.com/GetStream/stream-chat-react/issues/1663)) ([41bae84](https://github.com/GetStream/stream-chat-react/commit/41bae841568e661339277e0b241be4cbe83b2030))
+* initial load earlier in vml persists the position ([#1640](https://github.com/GetStream/stream-chat-react/issues/1640)) ([dd53d5c](https://github.com/GetStream/stream-chat-react/commit/dd53d5c1fe2707d8807cfec341fbbdd612ff7cfd)), closes [/github.com/petyosi/react-virtuoso/blob/master/e2e/prepend-items.test.ts#L27-L34](https://github.com//github.com/petyosi/react-virtuoso/blob/master/e2e/prepend-items.test.ts/issues/L27-L34)
+
+## [9.1.4](https://github.com/GetStream/stream-chat-react/compare/v9.1.3...v9.1.4) (2022-06-22)
+
+
+### Bug Fixes
+
+* respect updates to messageActions prop, support messageActions overrides in Thread ([#1634](https://github.com/GetStream/stream-chat-react/issues/1634)) ([aed8e01](https://github.com/GetStream/stream-chat-react/commit/aed8e0159b12f221d8a8716c1998ccff29f5cc73)), closes [#1627](https://github.com/GetStream/stream-chat-react/issues/1627)
+
+## [9.1.3](https://github.com/GetStream/stream-chat-react/compare/v9.1.2...v9.1.3) (2022-06-19)
+
+
+### Bug Fixes
+
+* correct calculation of scrollback with date separators ([#1628](https://github.com/GetStream/stream-chat-react/issues/1628)) ([88a4d64](https://github.com/GetStream/stream-chat-react/commit/88a4d6413c15b52d394ab338c8348664debfd1a2))
+* upgrade react-player to its latest version ([#1629](https://github.com/GetStream/stream-chat-react/issues/1629)) ([8848700](https://github.com/GetStream/stream-chat-react/commit/88487001de49dceded0bd950f35d527a0c2526e1))
+
 ## [9.1.2](https://github.com/GetStream/stream-chat-react/compare/v9.1.1...v9.1.2) (2022-06-13)
 
 

commitlint.config.js

@@ -1,3 +1,24 @@
+// eslint-disable-next-line no-undef
 module.exports = {
   extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'build',
+        'chore',
+        'ci',
+        'docs',
+        'feat',
+        'fix',
+        'perf',
+        'refactor',
+        'revert',
+        'style',
+        'test',
+        'deprecate',
+      ],
+    ],
+  },
 };

developers/COMMIT.md

@@ -1,4 +1,4 @@
-We follow [Angular's Commit Messag Format rules](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format). Even though these are curated sets of rules, the following represent our additions to them:
+We follow [Angular's Commit Message Format rules](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format). Even though these are curated sets of rules, the following represent our additions to them:
 
 ## Commit message type
 
@@ -21,3 +21,4 @@ It must be one of the following:
 * **refactor**: A code change that neither fixes a bug nor adds a feature
 * **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 * **test**: Adding missing tests or correcting existing tests
+* **deprecate**: Certain parts or APIs are deprecated and scheduled for a removal in a newer major version

developers/DEPRECATIONS.md

@@ -0,0 +1,25 @@
+## Deprecations
+
+You can deprecate a feature or a component once:
+1. an alternative exists.
+2. the support for the given functionality is scheduled for termination
+
+The deprecated component should be marked as follows:
+
+```typescript jsx
+/**
+ * @deprecated - This UI component will be removed in the next major release. This component is deprecated because <XY>.
+ * For more information see [docs link](https://....)
+ *
+ * FixedHeightMessage - This component renders a single message.
+ * It uses fixed height elements to make sure it works well in VirtualizedMessageList
+ */
+```
+
+### How to deprecate?
+
+1. Deprecated component:
+   1. does not receive an alternative -> update the documentation on how to implement the deprecated feature.
+   2. receives an alternative -> update the documentation on how to use the introduced alternative solution.
+2. Commit the changes under `deprecate` commit type, with commit description stating the reasons for deprecation.
+3. Create an issue, so it can be scheduled for removal in foreseeable future. Tag the issue with the label `breaking`.

docusaurus/docs/React/contexts/message-context.mdx

@@ -35,6 +35,14 @@ while editing.
 | ------ |
 | object |
 
+### autoscrollToBottom
+
+Call this function to keep message list scrolled to the bottom when the message list container scroll height increases (only available in the `VirtualizedMessageList`). An example use case is that upon user's interaction with the application, a new element appears below the last message. In order to keep the newly rendered content visible, the `autoscrollToBottom` function can be called. The container, however, is not scrolled to the bottom, if already scrolled up more than 4px from the bottom.
+
+| Type       |
+| ---------- |
+| () => void |
+
 ### clearEditingState
 
 When called, this function will exit the editing state on the message.

docusaurus/docs/React/core-components/thread.mdx

@@ -167,3 +167,11 @@ Custom thread message UI component used to override the default `Message` value
 | Type      | Default                                                                  |
 | --------- | ------------------------------------------------------------------------ |
 | component | [ComponentContext['Message']](../contexts/component-context.mdx#message) |
+
+### messageActions
+
+Array of allowed message actions (ex: 'edit', 'delete', 'reply'). To disable all actions, provide an empty array.
+
+| Type  | Default                                                              |
+|-------|----------------------------------------------------------------------|
+| array | ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply'] |

docusaurus/docs/React/customization/css-and-theming.mdx

@@ -41,7 +41,7 @@ import './App.css';
 As an alternative to importing our entire style sheet (perhaps, due to it's size), there's also the option to easily assemble only
 what you need by importing individual scss files. The imports should happen in the file where you instantiate your application.
 
-Here's a complete [list of scss files](https://unpkg.com/browse/stream-chat-css@1.0.17/dist/scss/) broken down by size and with the
+Here's a complete [list of scss files](https://unpkg.com/browse/@stream-io/stream-chat-css/dist/scss/) broken down by size and with the
 option of filtering by SDK version.
 
 :::note

docusaurus/docs/React/message-components/message-ui.mdx

@@ -113,6 +113,31 @@ while editing (overrides the value stored in `MessageContext`).
 | ------ |
 | object |
 
+### autoscrollToBottom
+
+Call this function to keep message list scrolled to the bottom when the message list container scroll height increases (only available in the `VirtualizedMessageList`). An example use case: upon user's interaction with the application, a new element appears below the last message. In order to keep the newly rendered content visible, the `autoscrollToBottom` function can be called. The container, however, is not scrolled to the bottom, if already scrolled up more than 4px from the bottom.
+
+You can even use the function to keep the container scrolled to the bottom while images are loading:
+
+```tsx
+const Image = (props: ImageProps) => {
+    ...
+    const { autoscrollToBottom } = useMessageContext();
+    ...
+
+    return (
+        <img
+            ...
+            onLoad={autoscrollToBottom}
+            ...
+        />
+}
+```
+
+| Type       |
+| ---------- |
+| () => void |
+
 ### clearEditingState
 
 When called, this function will exit the editing state on the message (overrides the function stored in `MessageContext`).

docusaurus/docs/React/message-components/message.mdx

@@ -43,6 +43,14 @@ Additional props to be passed to the underlying `MessageInput` component, [avail
 | ------ |
 | object |
 
+### autoscrollToBottom
+
+Call this function to keep message list scrolled to the bottom when the message list container scroll height increases (only available in the `VirtualizedMessageList`). An example use case is that upon user's interaction with the application, a new element appears below the last message. In order to keep the newly rendered content visible, the `autoscrollToBottom` function can be called. The container, however, is not scrolled to the bottom, if already scrolled up more than 4px from the bottom.
+
+| Type       |
+| ---------- |
+| () => void |
+
 ### closeReactionSelectorOnClick
 
 If true, picking a reaction from the `ReactionSelector` component will close the selector.

docusaurus/docs/React/message-components/ui-components.mdx

@@ -239,6 +239,41 @@ Message type string to be added to CSS class names.
 | ------ | -------- |
 | string | 'simple' |
 
+### tooltipUserNameMapper
+
+Allows you to customize the username(s) that appear on the message status tooltip.
+
+| Type                           | Default                         |
+| ------------------------------ | ------------------------------- |
+| (user: UserResponse) => string | (user) => user.name || user.id  |
+
+This prop's implementation is not provided out of the box by the SDK. See below for a customization example:
+
+```tsx
+const CustomMessageStatus = (props: MessageStatusProps) => {
+  const allCapsUserName = useCallback<TooltipUsernameMapper>(
+    (user) => (user.name || user.id).toUpperCase(),
+    [],
+  );
+  return <MessageStatus {...props} tooltipUserNameMapper={allCapsUserName} />;
+};
+
+// Sort in reverse order to avoid auto-selecting unread channel
+const sort: ChannelSort = { last_updated: 1 };
+const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'children'>) => (
+  <ConnectedUser token={token} userId={userId}>
+    <ChannelList filters={{ id: { $eq: 'add-message' }, members: { $in: [userId] } }} sort={sort} />
+    <Channel MessageStatus={CustomMessageStatus}>
+      <Window>
+        <ChannelHeader />
+        <MessageList />
+      </Window>
+      <Thread />
+    </Channel>
+  </ConnectedUser>
+);
+```
+
 ## MessageText Props
 
 ### customInnerClass