feat: show edited message label in message UI

docusaurus/docs/reactnative/common-content/ui-components/channel/props/message-edited-timestamp.mdx

@@ -0,0 +1,5 @@
+Component to render message edited label in message when the message is clicked, within [`MessageList`](../../../../ui-components/message-list.mdx). This component is only rendered for messages from other users.
+
+| Type          | Default                                                                                                                                                                |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`MessageEditedTimestamp`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageSimple/MessageEditedTimestamp.tsx) |

docusaurus/docs/reactnative/contexts/messages-context.mdx

@@ -47,6 +47,7 @@ import MessageContent from '../common-content/ui-components/channel/props/messag
 import MessageActions from '../common-content/ui-components/channel/props/message_actions.mdx';
 import MessageContentOrder from '../common-content/ui-components/channel/props/message_content_order.mdx';
 import MessageDeleted from '../common-content/ui-components/channel/props/message-deleted.mdx';
+import MessageEditedTimestamp from '../common-content/ui-components/channel/props/message-edited-timestamp.mdx';
 import MessageError from '../common-content/ui-components/channel/props/message-error.mdx';
 import MessageFooter from '../common-content/ui-components/channel/props/message-footer.mdx';
 import MessageHeader from '../common-content/ui-components/channel/props/message-header.mdx';
@@ -337,6 +338,10 @@ Upserts a given message in local channel state. Please note that this function d
 
 <MessageDeleted />
 
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#messageeditedtimestamp)_ props</div> MessageEditedTimestamp {#messageeditedtimestamp}
+
+<MessageEditedTimestamp />
+
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#messageerror)_ props</div> MessageError {#messageerror}
 
 <MessageError />

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -104,6 +104,7 @@ import MessageContent from '../common-content/ui-components/channel/props/messag
 import MessageActions from '../common-content/ui-components/channel/props/message_actions.mdx';
 import MessageContentOrder from '../common-content/ui-components/channel/props/message_content_order.mdx';
 import MessageDeleted from '../common-content/ui-components/channel/props/message-deleted.mdx';
+import MessageEditedTimestamp from '../common-content/ui-components/channel/props/message-edited-timestamp.mdx';
 import MessageError from '../common-content/ui-components/channel/props/message-error.mdx';
 import MessageFooter from '../common-content/ui-components/channel/props/message-footer.mdx';
 import MessageHeader from '../common-content/ui-components/channel/props/message-header.mdx';
@@ -900,6 +901,10 @@ Component to render full screen error indicator, when channel fails to load.
 
 <MessageDeleted />
 
+### MessageEditedTimestamp
+
+<MessageEditedTimestamp />
+
 ### MessageError
 
 <MessageError />

docusaurus/docs/reactnative/guides/custom-message.mdx

@@ -71,6 +71,8 @@ If you want to customize only a specific part of `MessageSimple` component, you
 - [MessageFooter](../../core-components/channel#messagefooter)
 - [MessageAvatar](../../core-components/channel#messageavatar)
 - [MessageBounce](../../core-components/channel#messagebounce)
+- [MessageDeleted](../../core-components/channel#messagedeleted)
+- [MessageEditedTimestamp](../../core-components/channel#messageeditedtimestamp)
 - [MessageStatus](../../core-components/channel#messagestatus)
 - [MessageText](../../core-components/channel#messagetext)
 - [MessageSystem](../../core-components/channel#messagesystem)

docusaurus/docs/reactnative/ui-components/message-deleted.mdx

@@ -11,7 +11,7 @@ This is the default component provided to the prop [`MessageDeleted`](../../core
 
 ## Props
 
-### <div class="label description required">required</div> `formattedDate`
+### <div class="label description required">required</div> `date`
 
 DateTime stamp to be shown in footer for deleted message.
 

docusaurus/docs/reactnative/ui-components/message-edited-timestamp.mdx

@@ -0,0 +1,48 @@
+---
+id: message-edited-timestamp
+title: MessageEditedTimestamp
+---
+
+import MessageProp from '../common-content/contexts/message-context/message.mdx';
+
+Component to render message edited label in message when the message is clicked, within [`MessageList`](./message-list.mdx).
+
+This is the default component provided to the prop [`MessageEditedTimestamp`](../../core-components/channel#messageeditedtimestamp) on the `Channel` component.
+
+## Props
+
+### <div class="label description">_overrides the value from [MessageContext](../../contexts/message-context#message)_</div> `message` {#message}
+
+<MessageProp />
+
+### `calendar`
+
+Whether to show the time in Calendar time format. Calendar time displays time relative to a today's date.
+
+| Type                   | Default     |
+| ---------------------- | ----------- |
+| `Boolean`\|`undefined` | `undefined` |
+
+### `format`
+
+Format of the date.
+
+| Type                  | Default     |
+| --------------------- | ----------- |
+| `String`\|`undefined` | `undefined` |
+
+### `formatDate`
+
+Function to format the date.
+
+| Type                    | Default     |
+| ----------------------- | ----------- |
+| `Function`\|`undefined` | `undefined` |
+
+### `timestamp`
+
+The date to be shown after formatting.
+
+| Type                          | Default     |
+| ----------------------------- | ----------- |
+| `String`\|`Date`\|`undefined` | `undefined` |

docusaurus/sidebars-react-native.json

@@ -79,6 +79,7 @@
           "ui-components/message-bounce",
           "ui-components/message-content",
           "ui-components/message-deleted",
+          "ui-components/message-edited-timestamp",
           "ui-components/message-error",
           "ui-components/message-footer",
           "ui-components/message-pinned-header",

examples/ExpoMessaging/yarn.lock

@@ -7327,10 +7327,10 @@ [email protected]:
   version "0.0.0"
   uid ""
 
-stream-chat-react-native-core@5.28.0:
-  version "5.28.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.28.0.tgz#66449c014e034bf6041f364ccf8f25302b8ff580"
-  integrity sha512-G+NmlCYPO84OE2p1soNoKRi/RlfM0ICnw3gm5wq8bPWaBvt1XozZuX6usO2+nEGVcdhaKTvXqX5i4+6FEGDPBw==
+stream-chat-react-native-core@5.29.0:
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.29.0.tgz#b89d5f954c2063316ab6dc254e0b98188f01524d"
+  integrity sha512-cm8CQUIHPE+hHxM1hVQ6V3ogUJLpGPRZBvMYbJW7+MBdhUTn4+40EqEbqHTEtHdkLgPUmxaDJsh/gFCtVEGgog==
   dependencies:
     "@gorhom/bottom-sheet" "4.4.8"
     dayjs "1.10.5"
@@ -7363,6 +7363,21 @@ [email protected]:
     jsonwebtoken "~9.0.0"
     ws "^7.4.4"
 
+[email protected]:
+  version "8.31.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.31.0.tgz#387ed3109ac930e222bf260d98afc37dd1fcb1ac"
+  integrity sha512-lORUtfDYljoAgRv7QHUADH1QTGydSWo+U8KmUKwv7BZyUZ2JGwh6VZbu9WL4Nmo7PDU7N/Ug0Q5PE59S6WE+OA==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@types/jsonwebtoken" "~9.0.0"
+    "@types/ws" "^7.4.0"
+    axios "^1.6.0"
+    base64-js "^1.5.1"
+    form-data "^4.0.0"
+    isomorphic-ws "^4.0.1"
+    jsonwebtoken "~9.0.0"
+    ws "^7.4.4"
+
 stream-slice@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/stream-slice/-/stream-slice-0.1.2.tgz#2dc4f4e1b936fb13f3eb39a2def1932798d07a4b"

examples/SampleApp/yarn.lock

@@ -6825,10 +6825,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react-native-core@5.28.1:
-  version "5.28.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.28.1.tgz#9bde6c2af43a24e8a5c9d4ca35da19ccef95cb34"
-  integrity sha512-+vsLbqFmxm6Xyt4U3f2zfNvTTB9cXWTk8gyyw4b2RJ2qMZ/8wuN/luS5xwKdNbBZZCuaDlwuJpWE/x5/ERbpWg==
+stream-chat-react-native-core@5.29.0:
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.29.0.tgz#b89d5f954c2063316ab6dc254e0b98188f01524d"
+  integrity sha512-cm8CQUIHPE+hHxM1hVQ6V3ogUJLpGPRZBvMYbJW7+MBdhUTn4+40EqEbqHTEtHdkLgPUmxaDJsh/gFCtVEGgog==
   dependencies:
     "@gorhom/bottom-sheet" "4.4.8"
     dayjs "1.10.5"
@@ -6865,6 +6865,21 @@ [email protected]:
     jsonwebtoken "~9.0.0"
     ws "^7.4.4"
 
+[email protected]:
+  version "8.31.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.31.0.tgz#387ed3109ac930e222bf260d98afc37dd1fcb1ac"
+  integrity sha512-lORUtfDYljoAgRv7QHUADH1QTGydSWo+U8KmUKwv7BZyUZ2JGwh6VZbu9WL4Nmo7PDU7N/Ug0Q5PE59S6WE+OA==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@types/jsonwebtoken" "~9.0.0"
+    "@types/ws" "^7.4.0"
+    axios "^1.6.0"
+    base64-js "^1.5.1"
+    form-data "^4.0.0"
+    isomorphic-ws "^4.0.1"
+    jsonwebtoken "~9.0.0"
+    ws "^7.4.4"
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"

examples/TypeScriptMessaging/yarn.lock

@@ -6882,10 +6882,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react-native-core@5.28.0:
-  version "5.28.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.28.0.tgz#66449c014e034bf6041f364ccf8f25302b8ff580"
-  integrity sha512-G+NmlCYPO84OE2p1soNoKRi/RlfM0ICnw3gm5wq8bPWaBvt1XozZuX6usO2+nEGVcdhaKTvXqX5i4+6FEGDPBw==
+stream-chat-react-native-core@5.29.0:
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.29.0.tgz#b89d5f954c2063316ab6dc254e0b98188f01524d"
+  integrity sha512-cm8CQUIHPE+hHxM1hVQ6V3ogUJLpGPRZBvMYbJW7+MBdhUTn4+40EqEbqHTEtHdkLgPUmxaDJsh/gFCtVEGgog==
   dependencies:
     "@gorhom/bottom-sheet" "4.4.8"
     dayjs "1.10.5"
@@ -6927,6 +6927,21 @@ [email protected]:
     jsonwebtoken "~9.0.0"
     ws "^7.4.4"
 
+[email protected]:
+  version "8.31.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.31.0.tgz#387ed3109ac930e222bf260d98afc37dd1fcb1ac"
+  integrity sha512-lORUtfDYljoAgRv7QHUADH1QTGydSWo+U8KmUKwv7BZyUZ2JGwh6VZbu9WL4Nmo7PDU7N/Ug0Q5PE59S6WE+OA==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@types/jsonwebtoken" "~9.0.0"
+    "@types/ws" "^7.4.0"
+    axios "^1.6.0"
+    base64-js "^1.5.1"
+    form-data "^4.0.0"
+    isomorphic-ws "^4.0.1"
+    jsonwebtoken "~9.0.0"
+    ws "^7.4.4"
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"

package/expo-package/yarn.lock

@@ -2929,10 +2929,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
-stream-chat-react-native-core@5.28.1:
-  version "5.28.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.28.1.tgz#9bde6c2af43a24e8a5c9d4ca35da19ccef95cb34"
-  integrity sha512-+vsLbqFmxm6Xyt4U3f2zfNvTTB9cXWTk8gyyw4b2RJ2qMZ/8wuN/luS5xwKdNbBZZCuaDlwuJpWE/x5/ERbpWg==
+stream-chat-react-native-core@5.29.0:
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.29.0.tgz#b89d5f954c2063316ab6dc254e0b98188f01524d"
+  integrity sha512-cm8CQUIHPE+hHxM1hVQ6V3ogUJLpGPRZBvMYbJW7+MBdhUTn4+40EqEbqHTEtHdkLgPUmxaDJsh/gFCtVEGgog==
   dependencies:
     "@gorhom/bottom-sheet" "4.4.8"
     dayjs "1.10.5"

package/native-package/yarn.lock

@@ -4237,10 +4237,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react-native-core@5.28.1:
-  version "5.28.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.28.1.tgz#9bde6c2af43a24e8a5c9d4ca35da19ccef95cb34"
-  integrity sha512-+vsLbqFmxm6Xyt4U3f2zfNvTTB9cXWTk8gyyw4b2RJ2qMZ/8wuN/luS5xwKdNbBZZCuaDlwuJpWE/x5/ERbpWg==
+stream-chat-react-native-core@5.29.0:
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.29.0.tgz#b89d5f954c2063316ab6dc254e0b98188f01524d"
+  integrity sha512-cm8CQUIHPE+hHxM1hVQ6V3ogUJLpGPRZBvMYbJW7+MBdhUTn4+40EqEbqHTEtHdkLgPUmxaDJsh/gFCtVEGgog==
   dependencies:
     "@gorhom/bottom-sheet" "4.4.8"
     dayjs "1.10.5"

package/package.json

@@ -78,7 +78,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "8.17.0"
+    "stream-chat": "8.31.0"
   },
   "peerDependencies": {
     "react-native-quick-sqlite": ">=5.1.0",

package/src/components/Channel/Channel.tsx

@@ -118,6 +118,7 @@ import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/
 import { MessageBounce as MessageBounceDefault } from '../Message/MessageSimple/MessageBounce';
 import { MessageContent as MessageContentDefault } from '../Message/MessageSimple/MessageContent';
 import { MessageDeleted as MessageDeletedDefault } from '../Message/MessageSimple/MessageDeleted';
+import { MessageEditedTimestamp as MessageEditedTimestampDefault } from '../Message/MessageSimple/MessageEditedTimestamp';
 import { MessageError as MessageErrorDefault } from '../Message/MessageSimple/MessageError';
 import { MessageFooter as MessageFooterDefault } from '../Message/MessageSimple/MessageFooter';
 import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/MessagePinnedHeader';
@@ -262,7 +263,6 @@ export type ChannelPropsWithContext<
       | 'FileAttachmentGroup'
       | 'FlatList'
       | 'forceAlignMessages'
-      | 'formatDate'
       | 'Gallery'
       | 'getMessagesGroupStyles'
       | 'Giphy'
@@ -292,6 +292,7 @@ export type ChannelPropsWithContext<
       | 'MessageContent'
       | 'messageContentOrder'
       | 'MessageDeleted'
+      | 'MessageEditedTimestamp'
       | 'MessageError'
       | 'MessageFooter'
       | 'MessageHeader'
@@ -469,7 +470,6 @@ const ChannelWithContext = <
     FileUploadPreview = FileUploadPreviewDefault,
     FlatList = FlatListDefault,
     forceAlignMessages,
-    formatDate,
     Gallery = GalleryDefault,
     getMessagesGroupStyles,
     Giphy = GiphyDefault,
@@ -527,6 +527,7 @@ const ChannelWithContext = <
     MessageContent = MessageContentDefault,
     messageContentOrder = ['quoted_reply', 'gallery', 'files', 'text', 'attachments'],
     MessageDeleted = MessageDeletedDefault,
+    MessageEditedTimestamp = MessageEditedTimestampDefault,
     MessageError = MessageErrorDefault,
     MessageFooter = MessageFooterDefault,
     MessageHeader,
@@ -2295,7 +2296,6 @@ const ChannelWithContext = <
     FileAttachmentIcon,
     FlatList,
     forceAlignMessages,
-    formatDate,
     Gallery,
     getMessagesGroupStyles,
     Giphy,
@@ -2326,6 +2326,7 @@ const ChannelWithContext = <
     MessageContent,
     messageContentOrder,
     MessageDeleted,
+    MessageEditedTimestamp,
     MessageError,
     MessageFooter,
     MessageHeader,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -27,7 +27,6 @@ export const useCreateMessagesContext = <
   FileAttachmentIcon,
   FlatList,
   forceAlignMessages,
-  formatDate,
   Gallery,
   getMessagesGroupStyles,
   Giphy,
@@ -58,6 +57,7 @@ export const useCreateMessagesContext = <
   MessageContent,
   messageContentOrder,
   MessageDeleted,
+  MessageEditedTimestamp,
   MessageError,
   MessageFooter,
   MessageHeader,
@@ -123,7 +123,6 @@ export const useCreateMessagesContext = <
       FileAttachmentIcon,
       FlatList,
       forceAlignMessages,
-      formatDate,
       Gallery,
       getMessagesGroupStyles,
       Giphy,
@@ -154,6 +153,7 @@ export const useCreateMessagesContext = <
       MessageContent,
       messageContentOrder,
       MessageDeleted,
+      MessageEditedTimestamp,
       MessageError,
       MessageFooter,
       MessageHeader,