stream-chat-react 13.2.1 → 13.2.3

package/dist/index.node.cjs

@@ -402,6 +402,7 @@ __export(src_exports, {
   MessageInputContext: () => MessageInputContext,
   MessageInputContextProvider: () => MessageInputContextProvider,
   MessageInputFlat: () => MessageInputFlat,
+  MessageIsThreadReplyInChannelButtonIndicator: () => MessageIsThreadReplyInChannelButtonIndicator,
   MessageList: () => MessageList,
   MessageListContext: () => MessageListContext,
   MessageListContextProvider: () => MessageListContextProvider,
@@ -4249,7 +4250,7 @@ var ChannelListMessenger = (props) => {
   } = props;
   const { t } = useTranslationContext("ChannelListMessenger");
   if (error) {
-    return /* @__PURE__ */ import_react47.default.createElement(LoadingErrorIndicator2, null);
+    return /* @__PURE__ */ import_react47.default.createElement(LoadingErrorIndicator2, { error });
   }
   if (loading) {
     return /* @__PURE__ */ import_react47.default.createElement(LoadingIndicator2, null);
@@ -19814,7 +19815,6 @@ var keepLineBreaksPlugin = () => transform2;
 // src/components/Message/renderText/renderText.tsx
 var import_react110 = __toESM(require("react"));
 var import_linkifyjs = require("linkifyjs");
-var import_lodash13 = __toESM(require("lodash.uniqby"));
 
 // node_modules/ccount/index.js
 function ccount(value, character) {
@@ -22951,39 +22951,31 @@ var renderText = (text7, mentionedUsers, {
   let newText = text7;
   const markdownLinks = matchMarkdownLinks(newText);
   const codeBlocks = messageCodeBlocks(newText);
-  (0, import_lodash13.default)([...(0, import_linkifyjs.find)(newText, "email"), ...(0, import_linkifyjs.find)(newText, "url")], "value").forEach(
-    ({ href, type, value }) => {
-      const linkIsInBlock = codeBlocks.some((block) => block?.includes(value));
-      const noParsingNeeded = markdownLinks && markdownLinks.filter((text8) => {
-        const strippedHref = href?.replace(detectHttp, "");
-        const strippedText = text8?.replace(detectHttp, "");
-        if (!strippedHref || !strippedText) return false;
-        return strippedHref.includes(strippedText) || strippedText.includes(strippedHref);
-      });
-      if (noParsingNeeded.length > 0 || linkIsInBlock) return;
-      try {
-        if (type === "email" && mentionedUsers) {
-          const emailMatchesWithName = mentionedUsers.some((u2) => u2.name === value);
-          if (emailMatchesWithName) {
-            newText = newText.replace(
-              new RegExp(escapeRegExp(value), "g"),
-              (match, position3) => {
-                const isMention = newText.charAt(position3 - 1) === "@";
-                return isMention ? match : `[${match}](${encodeDecode(href)})`;
-              }
-            );
-            return;
-          }
+  const links = [...(0, import_linkifyjs.find)(newText, "email"), ...(0, import_linkifyjs.find)(newText, "url")];
+  for (let i = links.length - 1; i >= 0; i--) {
+    const { end, href, start: start2, type, value } = links[i];
+    const linkIsInBlock = codeBlocks.some((block) => block?.includes(value));
+    const noParsingNeeded = markdownLinks && markdownLinks.filter((text8) => {
+      const strippedHref = href?.replace(detectHttp, "");
+      const strippedText = text8?.replace(detectHttp, "");
+      if (!strippedHref || !strippedText) return false;
+      return strippedHref.includes(strippedText) || strippedText.includes(strippedHref);
+    });
+    if (noParsingNeeded.length > 0 || linkIsInBlock) return;
+    try {
+      if (type === "email" && mentionedUsers) {
+        const emailMatchesWithName = mentionedUsers.find((u2) => u2.name === value);
+        if (emailMatchesWithName) {
+          const isMention = newText.charAt(start2 - 1) === "@";
+          newText = newText.slice(0, start2) + (isMention ? value : `[${value}](${encodeDecode(href)})`) + newText.slice(end);
         }
+      } else {
         const displayLink = type === "email" ? value : formatUrlForDisplay(href);
-        newText = newText.replace(
-          new RegExp(escapeRegExp(value), "g"),
-          `[${displayLink}](${encodeDecode(href)})`
-        );
-      } catch (e) {
+        newText = newText.slice(0, start2) + `[${displayLink}](${encodeDecode(href)})` + newText.slice(end);
       }
+    } catch (e) {
     }
-  );
+  }
   const remarkPlugins = [
     htmlToTextPlugin,
     keepLineBreaksPlugin,
@@ -23850,7 +23842,8 @@ var FormDialog = ({
       "button",
       {
         className: "str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel",
-        onClick: close
+        onClick: close,
+        type: "button"
       },
       t("Cancel")
     ), /* @__PURE__ */ import_react127.default.createElement(
@@ -24137,7 +24130,7 @@ function useManagePollVotesRealtime(managedVoteType, cursorPaginatorState, optio
 }
 
 // src/components/InfiniteScrollPaginator/hooks/useCursorPaginator.ts
-var import_lodash14 = __toESM(require("lodash.uniqby"));
+var import_lodash13 = __toESM(require("lodash.uniqby"));
 var import_react136 = require("react");
 var import_stream_chat3 = require("stream-chat");
 var useCursorPaginator = (paginationFn, loadFirstPage) => {
@@ -24159,7 +24152,7 @@ var useCursorPaginator = (paginationFn, loadFirstPage) => {
       cursorPaginatorState.next((prev) => ({
         ...prev,
         hasNextPage: !!next,
-        items: (0, import_lodash14.default)(prev.items.concat(items), "id"),
+        items: (0, import_lodash13.default)(prev.items.concat(items), "id"),
         latestPageItems: items,
         next: next || null
       }));
@@ -24258,7 +24251,7 @@ var usePollOptionVotesPagination = ({
 
 // src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx
 var import_clsx31 = __toESM(require("clsx"));
-var import_lodash15 = __toESM(require("lodash.debounce"));
+var import_lodash14 = __toESM(require("lodash.debounce"));
 var import_react139 = __toESM(require("react"));
 var mousewheelListener = (event) => {
   if (event instanceof WheelEvent && event.deltaY === 1) {
@@ -24280,7 +24273,7 @@ var InfiniteScrollPaginator = (props) => {
   const rootRef = (0, import_react139.useRef)(null);
   const childRef = (0, import_react139.useRef)(null);
   const scrollListener = (0, import_react139.useMemo)(
-    () => (0, import_lodash15.default)(() => {
+    () => (0, import_lodash14.default)(() => {
       const root4 = rootRef.current;
       const child = childRef.current;
       if (!root4 || root4.offsetParent === null || !child) {
@@ -24370,7 +24363,7 @@ var import_react142 = __toESM(require("react"));
 
 // src/components/Poll/PollOptionSelector.tsx
 var import_clsx32 = __toESM(require("clsx"));
-var import_lodash16 = __toESM(require("lodash.debounce"));
+var import_lodash15 = __toESM(require("lodash.debounce"));
 var import_react141 = __toESM(require("react"));
 var import_stream_chat4 = require("stream-chat");
 var AmountBar = ({ amount, className }) => /* @__PURE__ */ import_react141.default.createElement(
@@ -24418,7 +24411,7 @@ var PollOptionSelector = ({
   const canCastVote = channelCapabilities["cast-poll-vote"] && !is_closed;
   const winningOptionCount = maxVotedOptionIds[0] ? vote_counts_by_option[maxVotedOptionIds[0]] : 0;
   const toggleVote = (0, import_react141.useMemo)(
-    () => (0, import_lodash16.default)(() => {
+    () => (0, import_lodash15.default)(() => {
       if (!canCastVote) return;
       const haveVotedForTheOption = !!ownVotesByOptionId[option.id];
       return haveVotedForTheOption ? poll.removeVote(ownVotesByOptionId[option.id].id, message.id) : poll.castVote(option.id, message.id);
@@ -24842,7 +24835,7 @@ var MultipleAnswersField = () => {
             );
           },
           placeholder: t("Maximum number of votes (from 2 to 10)"),
-          type: "number",
+          type: "text",
           value: max_votes_allowed
         }
       ))
@@ -25075,7 +25068,8 @@ var OptionFieldSet = () => {
               });
             },
             onKeyUp: (event) => {
-              if (event.key === "Enter") {
+              const isFocusedLastOptionField = i === options.length - 1;
+              if (event.key === "Enter" && !isFocusedLastOptionField) {
                 const nextInputId = options[i + 1].id;
                 document.getElementById(nextInputId)?.focus();
               }
@@ -25107,7 +25101,8 @@ var PollCreationDialogControls = ({
       onClick: () => {
         messageComposer.pollComposer.initState();
         close();
-      }
+      },
+      type: "button"
     },
     t("Cancel")
   ), /* @__PURE__ */ import_react157.default.createElement(
@@ -30459,7 +30454,7 @@ var useUnreadMessagesNotificationVirtualized = ({
 
 // src/components/MessageList/VirtualizedMessageListComponents.tsx
 var import_clsx48 = __toESM(require("clsx"));
-var import_lodash17 = __toESM(require("lodash.throttle"));
+var import_lodash16 = __toESM(require("lodash.throttle"));
 var import_react194 = __toESM(require("react"));
 var PREPEND_OFFSET = 10 ** 7;
 function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
@@ -30468,7 +30463,7 @@ function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
 function calculateFirstItemIndex(numItemsPrepended) {
   return PREPEND_OFFSET - numItemsPrepended;
 }
-var makeItemsRenderedHandler = (renderedItemsActions, processedMessages) => (0, import_lodash17.default)((items) => {
+var makeItemsRenderedHandler = (renderedItemsActions, processedMessages) => (0, import_lodash16.default)((items) => {
   const renderedMessages = items.map((item) => {
     if (!item.originalIndex) return void 0;
     return processedMessages[calculateItemIndex(item.originalIndex, PREPEND_OFFSET)];
@@ -32705,9 +32700,9 @@ var import_fix_webm_duration = __toESM(require("fix-webm-duration"));
 var import_nanoid5 = require("nanoid");
 
 // src/utils/mergeDeep.ts
-var import_lodash18 = __toESM(require("lodash.mergewith"));
+var import_lodash17 = __toESM(require("lodash.mergewith"));
 var overrideUndefinedOnly = (object, source) => object ?? source;
-var mergeDeepUndefined = (target, source) => (0, import_lodash18.default)(target, source, overrideUndefinedOnly);
+var mergeDeepUndefined = (target, source) => (0, import_lodash17.default)(target, source, overrideUndefinedOnly);
 
 // src/components/MediaRecorder/classes/AmplitudeRecorder.ts
 var MAX_FREQUENCY_AMPLITUDE = 255;
@@ -34188,6 +34183,12 @@ var searchSourceStateSelector2 = (state) => ({
 var configStateSelector = (state) => ({
   enabled: state.text.enabled
 });
+var messageComposerStateSelector2 = (state) => ({
+  quotedMessage: state.quotedMessage
+});
+var attachmentManagerStateSelector = (state) => ({
+  attachments: state.attachments
+});
 var defaultShouldSubmit = (event) => event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing;
 var TextareaComposer = ({
   className,
@@ -34210,6 +34211,7 @@ var TextareaComposer = ({
   const {
     additionalTextareaProps,
     cooldownRemaining,
+    focus,
     handleSubmit,
     maxRows: maxRowsContext,
     minRows: minRowsContext,
@@ -34228,6 +34230,14 @@ var TextareaComposer = ({
     textComposerStateSelector2
   );
   const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
+  const { quotedMessage } = useStateStore(
+    messageComposer.state,
+    messageComposerStateSelector2
+  );
+  const { attachments } = useStateStore(
+    messageComposer.attachmentManager.state,
+    attachmentManagerStateSelector
+  );
   const { isLoadingItems } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector2) ?? {};
   const containerRef = (0, import_react246.useRef)(null);
   const [focusedItemIndex, setFocusedItemIndex] = (0, import_react246.useState)(0);
@@ -34341,6 +34351,16 @@ var TextareaComposer = ({
       setFocusedItemIndex(0);
     }
   }, [textComposer.suggestions]);
+  (0, import_react246.useEffect)(() => {
+    const textareaIsFocused = textareaRef.current?.matches(":focus");
+    if (!textareaRef.current || textareaIsFocused || !focus) return;
+    textareaRef.current.focus();
+  }, [attachments, focus, quotedMessage, textareaRef]);
+  (0, import_react246.useEffect)(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.value = text7;
+  }, [textareaRef, text7]);
   return /* @__PURE__ */ import_react246.default.createElement(
     "div",
     {
@@ -34379,8 +34399,7 @@ var TextareaComposer = ({
         placeholder: placeholder || t("Type your message"),
         ref: (ref) => {
           textareaRef.current = ref;
-        },
-        value: text7
+        }
       }
     ),
     !isComposing && /* @__PURE__ */ import_react246.default.createElement(
@@ -34687,7 +34706,7 @@ var MessageInputProvider = (props) => {
   );
   (0, import_react252.useEffect)(() => {
     const threadId = messageComposer.threadId;
-    if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty)
+    if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty || !messageComposer.config.drafts.enabled)
       return;
     messageComposer.channel.getDraft({ parent_id: threadId }).then(({ draft }) => {
       if (draft) {
@@ -34753,7 +34772,8 @@ var EditMessageForm = () => {
       {
         className: "str-chat__edit-message-cancel",
         "data-testid": "cancel-button",
-        onClick: cancel
+        onClick: cancel,
+        type: "button"
       },
       t("Cancel")
     ), /* @__PURE__ */ import_react253.default.createElement(EditMessageFormSendButton, null))
@@ -34780,6 +34800,7 @@ var EditMessageModal = ({
       MessageInput,
       {
         clearEditingState,
+        focus: true,
         hideSendButton: true,
         Input: EditMessageInput,
         ...additionalMessageInputProps
@@ -34804,7 +34825,7 @@ var UploadFileInput = (0, import_react254.forwardRef)(function UploadFileInput2(
   ...props
 }, ref) {
   const { t } = useTranslationContext("UploadFileInput");
-  const { cooldownRemaining } = useMessageInputContext();
+  const { cooldownRemaining, textareaRef } = useMessageInputContext();
   const messageComposer = useMessageComposer();
   const { attachmentManager } = messageComposer;
   const { isUploadEnabled } = useAttachmentManagerState();
@@ -34816,9 +34837,10 @@ var UploadFileInput = (0, import_react254.forwardRef)(function UploadFileInput2(
   const onFileChange = (0, import_react254.useCallback)(
     (files) => {
       attachmentManager.uploadFiles(files);
+      textareaRef.current?.focus();
       onFileChangeCustom?.(files);
     },
-    [onFileChangeCustom, attachmentManager]
+    [onFileChangeCustom, attachmentManager, textareaRef]
   );
   return /* @__PURE__ */ import_react254.default.createElement(
     FileInput,
@@ -35129,15 +35151,19 @@ var GalleryContainer = ({
   const { imageAttachmentSizeHandler } = useChannelStateContext();
   const [attachmentConfigurations, setAttachmentConfigurations] = (0, import_react259.useState)([]);
   (0, import_react259.useLayoutEffect)(() => {
-    if (imageElements.current && imageElements.current.every((element3) => !!element3) && imageAttachmentSizeHandler) {
-      const newConfigurations = [];
-      imageElements.current.forEach((element3, i) => {
-        const config = imageAttachmentSizeHandler(attachment.images[i], element3);
-        newConfigurations.push(config);
-      });
-      setAttachmentConfigurations(newConfigurations);
-    }
-  }, [imageElements, imageAttachmentSizeHandler, attachment]);
+    if (!imageElements.current || !imageAttachmentSizeHandler) return;
+    const newConfigurations = [];
+    const nonNullImageElements = imageElements.current.filter((e) => !!e);
+    if (nonNullImageElements.length < imageElements.current.length) {
+      imageElements.current = nonNullImageElements;
+    }
+    imageElements.current.forEach((element3, i) => {
+      if (!element3) return;
+      const config = imageAttachmentSizeHandler(attachment.images[i], element3);
+      newConfigurations.push(config);
+    });
+    setAttachmentConfigurations(newConfigurations);
+  }, [imageAttachmentSizeHandler, attachment]);
   const images = attachment.images.map((image3, i) => ({
     ...image3,
     previewUrl: attachmentConfigurations[i]?.url || "about:blank",
@@ -35343,9 +35369,9 @@ var getAttachmentType = (attachment) => {
 // src/components/Channel/Channel.tsx
 var import_react266 = __toESM(require("react"));
 var import_clsx67 = __toESM(require("clsx"));
-var import_lodash19 = __toESM(require("lodash.debounce"));
-var import_lodash20 = __toESM(require("lodash.defaultsdeep"));
-var import_lodash21 = __toESM(require("lodash.throttle"));
+var import_lodash18 = __toESM(require("lodash.debounce"));
+var import_lodash19 = __toESM(require("lodash.defaultsdeep"));
+var import_lodash20 = __toESM(require("lodash.throttle"));
 var import_stream_chat13 = require("stream-chat");
 
 // src/components/Channel/channelState.ts
@@ -35943,7 +35969,7 @@ var ChannelInner = (props) => {
     skipMessageDataMemoization
   } = props;
   const channelQueryOptions = (0, import_react266.useMemo)(
-    () => (0, import_lodash20.default)(propChannelQueryOptions, {
+    () => (0, import_lodash19.default)(propChannelQueryOptions, {
       messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
     }),
     [propChannelQueryOptions]
@@ -35978,7 +36004,7 @@ var ChannelInner = (props) => {
     null
   );
   const channelCapabilitiesArray = channel.data?.own_capabilities;
-  const throttledCopyStateFromChannel = (0, import_lodash21.default)(
+  const throttledCopyStateFromChannel = (0, import_lodash20.default)(
     () => dispatch({ channel, type: "copyStateFromChannelOnEvent" }),
     500,
     {
@@ -35987,14 +36013,14 @@ var ChannelInner = (props) => {
     }
   );
   const setChannelUnreadUiState = (0, import_react266.useMemo)(
-    () => (0, import_lodash21.default)(_setChannelUnreadUiState, 200, {
+    () => (0, import_lodash20.default)(_setChannelUnreadUiState, 200, {
       leading: true,
       trailing: false
     }),
     []
   );
   const markRead = (0, import_react266.useMemo)(
-    () => (0, import_lodash21.default)(
+    () => (0, import_lodash20.default)(
       async (options) => {
         const { updateChannelUiUnreadState = true } = options ?? {};
         if (channel.disconnected || !channelConfig?.read_events) {
@@ -36009,7 +36035,7 @@ var ChannelInner = (props) => {
             );
           } else {
             const markReadResponse = await channel.markRead();
-            if (updateChannelUiUnreadState && markReadResponse) {
+            if (updateChannelUiUnreadState && markReadResponse?.event) {
               _setChannelUnreadUiState({
                 last_read: lastRead.current,
                 last_read_message_id: markReadResponse.event.last_read_message_id,
@@ -36199,7 +36225,7 @@ var ChannelInner = (props) => {
     []
   );
   const loadMoreFinished = (0, import_react266.useCallback)(
-    (0, import_lodash19.default)(
+    (0, import_lodash18.default)(
       (hasMore, messages) => {
         if (!isMounted.current) return;
         dispatch({ hasMore, messages, type: "loadMoreFinished" });
@@ -36520,7 +36546,7 @@ var ChannelInner = (props) => {
     dispatch({ type: "closeThread" });
   };
   const loadMoreThreadFinished = (0, import_react266.useCallback)(
-    (0, import_lodash19.default)(
+    (0, import_lodash18.default)(
       (threadHasMore, threadMessages) => {
         dispatch({
           threadHasMore,
@@ -36850,7 +36876,7 @@ var useChat = ({
   };
   (0, import_react269.useEffect)(() => {
     if (!client) return;
-    const version = "13.2.1";
+    const version = "13.2.3";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -37204,6 +37230,7 @@ var Window = import_react274.default.memo(UnMemoizedWindow);
   MessageInputContext,
   MessageInputContextProvider,
   MessageInputFlat,
+  MessageIsThreadReplyInChannelButtonIndicator,
   MessageList,
   MessageListContext,
   MessageListContextProvider,