stream-chat-react 8.1.0 → 8.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/browser.full-bundle.js +45 -28
  2. package/dist/browser.full-bundle.js.map +1 -1
  3. package/dist/browser.full-bundle.min.js +1 -1
  4. package/dist/browser.full-bundle.min.js.map +1 -1
  5. package/dist/components/AutoCompleteTextarea/Item.d.ts.map +1 -1
  6. package/dist/components/AutoCompleteTextarea/List.d.ts.map +1 -1
  7. package/dist/components/AutoCompleteTextarea/Textarea.d.ts.map +1 -1
  8. package/dist/components/Channel/Channel.d.ts.map +1 -1
  9. package/dist/components/Channel/Channel.js +5 -8
  10. package/dist/components/Message/MessageCommerce.d.ts.map +1 -1
  11. package/dist/components/Message/MessageCommerce.js +2 -1
  12. package/dist/components/Message/MessageLivestream.d.ts.map +1 -1
  13. package/dist/components/Message/MessageLivestream.js +2 -1
  14. package/dist/components/Message/MessageSimple.d.ts.map +1 -1
  15. package/dist/components/Message/MessageSimple.js +2 -1
  16. package/dist/components/MessageList/VirtualizedMessageList.d.ts.map +1 -1
  17. package/dist/components/MessageList/VirtualizedMessageList.js +2 -1
  18. package/dist/components/MessageList/hooks/useMessageListElements.d.ts.map +1 -1
  19. package/dist/components/MessageList/hooks/useMessageListElements.js +5 -2
  20. package/dist/components/MessageList/utils.d.ts +1 -0
  21. package/dist/components/MessageList/utils.d.ts.map +1 -1
  22. package/dist/components/MessageList/utils.js +27 -13
  23. package/dist/constants/messageTypes.d.ts +5 -0
  24. package/dist/constants/messageTypes.d.ts.map +1 -0
  25. package/dist/constants/messageTypes.js +4 -0
  26. package/dist/css/index.css +1 -1
  27. package/dist/index.cjs.js +45 -28
  28. package/dist/index.cjs.js.map +1 -1
  29. package/dist/scss/ActionsBox.scss +2 -2
  30. package/dist/scss/Attachment.scss +1 -1
  31. package/dist/scss/ChannelList.scss +6 -0
  32. package/dist/scss/ChannelSearch.scss +12 -1
  33. package/dist/scss/Message.scss +86 -80
  34. package/dist/scss/MessageInput.scss +8 -2
  35. package/dist/scss/MessageInputFlat.scss +4 -0
  36. package/dist/scss/MessageNotification.scss +6 -18
  37. package/dist/scss/Thread.scss +20 -4
  38. package/dist/scss/_base.scss +4 -0
  39. package/dist/stories/connected-user.stories.d.ts.map +1 -1
  40. package/dist/stories/connected-user.stories.js +13 -39
  41. package/dist/stories/mark-read.stories.d.ts +4 -0
  42. package/dist/stories/mark-read.stories.d.ts.map +1 -0
  43. package/dist/stories/mark-read.stories.js +77 -0
  44. package/dist/stories/utils.d.ts +8 -0
  45. package/dist/stories/utils.d.ts.map +1 -1
  46. package/dist/stories/utils.js +33 -0
  47. package/dist/types/types.d.ts +2 -1
  48. package/dist/types/types.d.ts.map +1 -1
  49. package/dist/version.d.ts +1 -1
  50. package/dist/version.js +1 -1
  51. package/package.json +9 -5
@@ -37052,6 +37052,11 @@ var StreamChatReact = (function (exports, React, streamChat) {
37052
37052
  };
37053
37053
  var MessageTimestamp = React__default['default'].memo(UnMemoizedMessageTimestamp);
37054
37054
 
37055
+ window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CUSTOM_MESSAGE_TYPE = {
37056
+ date: 'message.date',
37057
+ intro: 'channel.intro',
37058
+ };
37059
+
37055
37060
  window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useCommandTrigger = function () {
37056
37061
  var channelConfig = useChannelStateContext('useCommandTrigger').channelConfig;
37057
37062
  var commands = channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.commands;
@@ -39755,7 +39760,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
39755
39760
  var messageClasses = isMyMessage()
39756
39761
  ? 'str-chat__message str-chat__message--me str-chat__message-simple str-chat__message-simple--me'
39757
39762
  : 'str-chat__message str-chat__message-simple';
39758
- if (message.customType === 'message.date') {
39763
+ if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
39759
39764
  return null;
39760
39765
  }
39761
39766
  if (message.deleted_at || message.type === 'deleted') {
@@ -40016,14 +40021,11 @@ var StreamChatReact = (function (exports, React, streamChat) {
40016
40021
  }, [channel.cid, doMarkReadRequest]);
40017
40022
  React.useEffect(function () {
40018
40023
  var _a;
40019
- if (state.thread && ((_a = state.messages) === null || _a === void 0 ? void 0 : _a.length)) {
40020
- for (var i = state.messages.length - 1; i >= 0; i -= 1) {
40021
- if (state.messages[i].id === state.thread.id) {
40022
- dispatch({ message: state.messages[i], type: 'setThread' });
40023
- break;
40024
- }
40025
- }
40026
- }
40024
+ if (!state.thread)
40025
+ return;
40026
+ var message = (_a = state.messages) === null || _a === void 0 ? void 0 : _a.find(function (m) { var _a; return m.id === ((_a = state.thread) === null || _a === void 0 ? void 0 : _a.id); });
40027
+ if (message)
40028
+ dispatch({ message: message, type: 'setThread' });
40027
40029
  }, [state.messages, state.thread]);
40028
40030
  /** MESSAGE */
40029
40031
  // Adds a temporary notification to message list, will be removed after 5 seconds
@@ -44944,7 +44946,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
44944
44946
 
44945
44947
  window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
44946
44948
 
44947
- window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '8.1.0';
44949
+ window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '8.1.1';
44948
44950
 
44949
44951
  window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
44950
44952
  var _b, _c;
@@ -45413,7 +45415,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
45413
45415
  if (message.deleted_at) {
45414
45416
  return React__default['default'].createElement(MessageDeleted$1, { message: message });
45415
45417
  }
45416
- if (message.customType === 'message.date') {
45418
+ if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
45417
45419
  return null;
45418
45420
  }
45419
45421
  return (React__default['default'].createElement("div", { className: ("\n\t\t\t\t\t\t" + messageClasses + "\n\t\t\t\t\t\tstr-chat__message-commerce--" + message.type + "\n\t\t\t\t\t\t" + (message.text ? 'str-chat__message-commerce--has-text' : 'str-chat__message-commerce--has-no-text') + "\n\t\t\t\t\t\t" + (hasAttachment ? 'str-chat__message-commerce--has-attachment' : '') + "\n " + (hasReactions && isReactionEnabled ? 'str-chat__message-commerce--with-reactions' : '') + "\n " + ("str-chat__message-commerce--" + firstGroupStyle) + "\n " + (message.pinned ? 'pinned-message' : '') + "\n\t\t\t\t\t").trim(), "data-testid": 'message-commerce-wrapper', key: message.id },
@@ -45454,7 +45456,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
45454
45456
  messageTextToRender,
45455
45457
  ]);
45456
45458
  var firstGroupStyle = groupStyles ? groupStyles[0] : 'single';
45457
- if (message.customType === 'message.date') {
45459
+ if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
45458
45460
  return null;
45459
45461
  }
45460
45462
  if (message.deleted_at) {
@@ -45743,9 +45745,9 @@ var StreamChatReact = (function (exports, React, streamChat) {
45743
45745
  // do not show date separator for current user's messages
45744
45746
  if (enableDateSeparator && unread && ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) !== userId) {
45745
45747
  newMessages.push({
45746
- customType: 'message.date',
45748
+ customType: CUSTOM_MESSAGE_TYPE.date,
45747
45749
  date: message.created_at,
45748
- id: message.id,
45750
+ id: makeDateMessageId(message.created_at),
45749
45751
  unread: unread,
45750
45752
  });
45751
45753
  }
@@ -45757,13 +45759,13 @@ var StreamChatReact = (function (exports, React, streamChat) {
45757
45759
  (hideDeletedMessages &&
45758
45760
  (previousMessage === null || previousMessage === void 0 ? void 0 : previousMessage.type) === 'deleted' &&
45759
45761
  lastDateSeparator !== messageDate)) &&
45760
- ((_b = newMessages === null || newMessages === void 0 ? void 0 : newMessages[newMessages.length - 1]) === null || _b === void 0 ? void 0 : _b.customType) !== 'message.date' // do not show two date separators in a row)
45762
+ ((_b = newMessages === null || newMessages === void 0 ? void 0 : newMessages[newMessages.length - 1]) === null || _b === void 0 ? void 0 : _b.customType) !== CUSTOM_MESSAGE_TYPE.date // do not show two date separators in a row)
45761
45763
  ) {
45762
45764
  lastDateSeparator = messageDate;
45763
45765
  newMessages.push({
45764
- customType: 'message.date',
45766
+ customType: CUSTOM_MESSAGE_TYPE.date,
45765
45767
  date: message.created_at,
45766
- id: message.id,
45768
+ id: makeDateMessageId(message.created_at),
45767
45769
  }, message);
45768
45770
  }
45769
45771
  else {
@@ -45776,6 +45778,16 @@ var StreamChatReact = (function (exports, React, streamChat) {
45776
45778
  }
45777
45779
  return newMessages;
45778
45780
  };
45781
+ var makeDateMessageId = function (date) {
45782
+ var idSuffix;
45783
+ try {
45784
+ idSuffix = !date ? v4() : date instanceof Date ? date.toISOString() : date;
45785
+ }
45786
+ catch (e) {
45787
+ idSuffix = v4();
45788
+ }
45789
+ return CUSTOM_MESSAGE_TYPE.date + "-" + idSuffix;
45790
+ };
45779
45791
  // fast since it usually iterates just the last few messages
45780
45792
  var getLastReceived = function (messages) {
45781
45793
  for (var i = messages.length - 1; i > 0; i -= 1) {
@@ -45818,7 +45830,9 @@ var StreamChatReact = (function (exports, React, streamChat) {
45818
45830
  };
45819
45831
  var insertIntro = function (messages, headerPosition) {
45820
45832
  var newMessages = messages;
45821
- var intro = { customType: 'channel.intro' };
45833
+ var intro = {
45834
+ customType: CUSTOM_MESSAGE_TYPE.intro,
45835
+ };
45822
45836
  // if no headerPosition is set, HeaderComponent will go at the top
45823
45837
  if (!headerPosition) {
45824
45838
  newMessages.unshift(intro);
@@ -45841,7 +45855,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
45841
45855
  if (messageTime && messageTime < headerPosition) {
45842
45856
  // if header position is also smaller than message time continue;
45843
45857
  if (nextMessageTime && nextMessageTime < headerPosition) {
45844
- if (messages[i + 1] && messages[i + 1].customType === 'message.date')
45858
+ if (messages[i + 1] && messages[i + 1].customType === CUSTOM_MESSAGE_TYPE.date)
45845
45859
  continue;
45846
45860
  if (!nextMessageTime) {
45847
45861
  newMessages.push(intro);
@@ -45858,24 +45872,24 @@ var StreamChatReact = (function (exports, React, streamChat) {
45858
45872
  };
45859
45873
  var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByUser) {
45860
45874
  var _a, _b, _c, _d, _e, _f, _g;
45861
- if (message.customType === 'message.date')
45875
+ if (message.customType === CUSTOM_MESSAGE_TYPE.date)
45862
45876
  return '';
45863
- if (message.customType === 'channel.intro')
45877
+ if (message.customType === CUSTOM_MESSAGE_TYPE.intro)
45864
45878
  return '';
45865
45879
  if (noGroupByUser || ((_a = message.attachments) === null || _a === void 0 ? void 0 : _a.length) !== 0)
45866
45880
  return 'single';
45867
45881
  var isTopMessage = !previousMessage ||
45868
- previousMessage.customType === 'channel.intro' ||
45869
- previousMessage.customType === 'message.date' ||
45882
+ previousMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
45883
+ previousMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
45870
45884
  previousMessage.type === 'system' ||
45871
45885
  ((_b = previousMessage.attachments) === null || _b === void 0 ? void 0 : _b.length) !== 0 ||
45872
45886
  ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_d = previousMessage.user) === null || _d === void 0 ? void 0 : _d.id) ||
45873
45887
  previousMessage.type === 'error' ||
45874
45888
  previousMessage.deleted_at;
45875
45889
  var isBottomMessage = !nextMessage ||
45876
- nextMessage.customType === 'message.date' ||
45890
+ nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
45877
45891
  nextMessage.type === 'system' ||
45878
- nextMessage.customType === 'channel.intro' ||
45892
+ nextMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
45879
45893
  ((_e = nextMessage.attachments) === null || _e === void 0 ? void 0 : _e.length) !== 0 ||
45880
45894
  ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_g = nextMessage.user) === null || _g === void 0 ? void 0 : _g.id) ||
45881
45895
  nextMessage.type === 'error' ||
@@ -45951,11 +45965,13 @@ var StreamChatReact = (function (exports, React, streamChat) {
45951
45965
  return React.useMemo(function () {
45952
45966
  return enrichedMessages.map(function (message) {
45953
45967
  var _a;
45954
- if (message.customType === 'message.date' && message.date && isDate(message.date)) {
45968
+ if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
45969
+ message.date &&
45970
+ isDate(message.date)) {
45955
45971
  return (React__default['default'].createElement("li", { key: message.date.toISOString() + "-i" },
45956
45972
  React__default['default'].createElement(DateSeparator$1, { date: message.date, formatDate: internalMessageProps.formatDate, unread: message.unread })));
45957
45973
  }
45958
- if (message.customType === 'channel.intro' && HeaderComponent) {
45974
+ if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
45959
45975
  return (React__default['default'].createElement("li", { key: 'intro' },
45960
45976
  React__default['default'].createElement(HeaderComponent, null)));
45961
45977
  }
@@ -47777,7 +47793,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
47777
47793
  return customMessageRenderer(messageList, streamMessageIndex);
47778
47794
  }
47779
47795
  var message = messageList[streamMessageIndex];
47780
- if (message.customType === 'message.date' && message.date && isDate(message.date)) {
47796
+ if (message.customType === CUSTOM_MESSAGE_TYPE.date && message.date && isDate(message.date)) {
47781
47797
  return React__default['default'].createElement(DateSeparator$1, { date: message.date, unread: message.unread });
47782
47798
  }
47783
47799
  if (!message)
@@ -65828,6 +65844,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
65828
65844
  exports.jaTranslations = jaTranslations;
65829
65845
  exports.koTranslations = koTranslations;
65830
65846
  exports.listener = Listeners;
65847
+ exports.makeDateMessageId = makeDateMessageId;
65831
65848
  exports.markDownRenderers = markDownRenderers$1;
65832
65849
  exports.matchMarkdownLinks = matchMarkdownLinks$1;
65833
65850
  exports.mentionsMarkdownPlugin = mentionsMarkdownPlugin;