stream-chat-react 13.0.0-rc.1 → 13.0.0

package/dist/index.browser.cjs

@@ -47796,49 +47796,17 @@ var useCooldownTimer = () => {
   };
 };
 
-// src/components/MessageInput/hooks/useMessageInputText.ts
+// src/components/MessageInput/hooks/useTextareaRef.ts
 var import_react224 = require("react");
-var messageComposerStateSelector = (state) => ({
-  text: state.text
-});
-var useMessageInputText = (props) => {
+var useTextareaRef = (props) => {
   const { focus } = props;
-  const messageComposer = useMessageComposer();
   const textareaRef = (0, import_react224.useRef)(void 0);
-  const { text: text8 } = useStateStore(
-    messageComposer.textComposer.state,
-    messageComposerStateSelector
-  );
   (0, import_react224.useEffect)(() => {
     if (focus && textareaRef.current) {
       textareaRef.current.focus();
     }
   }, [focus]);
-  const newCursorPosition = (0, import_react224.useRef)(void 0);
-  const insertText = (0, import_react224.useCallback)(
-    (textToInsert) => {
-      const selection = textareaRef?.current && {
-        end: textareaRef.current.selectionEnd,
-        start: textareaRef.current.selectionStart
-      };
-      messageComposer.textComposer.insertText({
-        selection,
-        text: textToInsert
-      });
-      if (selection) newCursorPosition.current = selection.start + textToInsert.length;
-    },
-    [messageComposer, newCursorPosition, textareaRef]
-  );
-  (0, import_react224.useEffect)(() => {
-    const textareaElement = textareaRef.current;
-    if (textareaElement && newCursorPosition.current !== void 0) {
-      textareaElement.selectionStart = newCursorPosition.current;
-      textareaElement.selectionEnd = newCursorPosition.current;
-      newCursorPosition.current = void 0;
-    }
-  }, [text8, newCursorPosition]);
   return {
-    insertText,
     textareaRef
   };
 };
@@ -47898,8 +47866,8 @@ var useSubmitHandler = (props) => {
 
 // src/components/MessageInput/hooks/usePasteHandler.ts
 var import_react226 = require("react");
-var usePasteHandler = (insertText) => {
-  const { attachmentManager } = useMessageComposer();
+var usePasteHandler = () => {
+  const { attachmentManager, textComposer } = useMessageComposer();
   const onPaste = (0, import_react226.useCallback)(
     (clipboardEvent) => {
       (async (event) => {
@@ -47920,13 +47888,13 @@ var usePasteHandler = (insertText) => {
         const fileLikes = await dataTransferItemsToFiles(Array.from(items));
         if (plainTextPromise) {
           const pastedText = await plainTextPromise;
-          insertText(pastedText);
+          textComposer.insertText({ text: pastedText });
         } else {
           attachmentManager.uploadFiles(fileLikes);
         }
       })(clipboardEvent);
     },
-    [attachmentManager, insertText]
+    [attachmentManager, textComposer]
   );
   return { onPaste };
 };
@@ -47995,7 +47963,7 @@ var useMediaRecorder = ({
 // src/components/MessageInput/hooks/useMessageInputControls.ts
 var useMessageInputControls = (props) => {
   const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } = props;
-  const { insertText, textareaRef } = useMessageInputText(props);
+  const { textareaRef } = useTextareaRef(props);
   const { handleSubmit } = useSubmitHandler(props);
   const recordingController = useMediaRecorder({
     asyncMessagesMultiSendEnabled,
@@ -48003,10 +47971,9 @@ var useMessageInputControls = (props) => {
     handleSubmit,
     recordingConfig: audioRecordingConfig
   });
-  const { onPaste } = usePasteHandler(insertText);
+  const { onPaste } = usePasteHandler();
   return {
     handleSubmit,
-    insertText,
     onPaste,
     recordingController,
     textareaRef
@@ -48267,7 +48234,7 @@ var linkPreviewsManagerStateSelector = (state) => ({
     (preview) => import_stream_chat9.LinkPreviewsManager.previewIsLoaded(preview) || import_stream_chat9.LinkPreviewsManager.previewIsLoading(preview)
   )
 });
-var messageComposerStateSelector2 = (state) => ({
+var messageComposerStateSelector = (state) => ({
   quotedMessage: state.quotedMessage
 });
 var LinkPreviewList = () => {
@@ -48275,7 +48242,7 @@ var LinkPreviewList = () => {
   const { linkPreviewsManager } = messageComposer;
   const { quotedMessage } = useStateStore(
     messageComposer.state,
-    messageComposerStateSelector2
+    messageComposerStateSelector
   );
   const { linkPreviews } = useStateStore(
     linkPreviewsManager.state,
@@ -48354,23 +48321,22 @@ var EmoticonItem = (props) => {
 
 // src/components/TextareaComposer/SuggestionList/SuggestionList.tsx
 var import_clsx60 = __toESM(require("clsx"));
-var import_react240 = __toESM(require("react"));
+var import_react239 = __toESM(require("react"));
 
 // src/components/TextareaComposer/SuggestionList/SuggestionListItem.tsx
 var import_clsx58 = __toESM(require("clsx"));
-var import_react237 = require("react");
-var import_react238 = __toESM(require("react"));
-var SuggestionListItem = import_react238.default.forwardRef(function SuggestionListItem2({ className, component: Component2, focused, item: item2, onMouseEnter }, innerRef) {
+var import_react237 = __toESM(require("react"));
+var SuggestionListItem = import_react237.default.forwardRef(function SuggestionListItem2({ className, component: Component2, focused, item: item2, onMouseEnter }, innerRef) {
   const { textComposer } = useMessageComposer();
-  const containerRef = (0, import_react238.useRef)(null);
-  const handleSelect = (0, import_react238.useCallback)(() => {
+  const containerRef = (0, import_react237.useRef)(null);
+  const handleSelect = (0, import_react237.useCallback)(() => {
     textComposer.handleSelect(item2);
   }, [item2, textComposer]);
   (0, import_react237.useLayoutEffect)(() => {
     if (!focused) return;
     containerRef.current?.scrollIntoView({ behavior: "instant", block: "nearest" });
   }, [focused, containerRef]);
-  return /* @__PURE__ */ import_react238.default.createElement(
+  return /* @__PURE__ */ import_react237.default.createElement(
     "li",
     {
       className: (0, import_clsx58.default)("str-chat__suggestion-list-item", className, {
@@ -48379,7 +48345,7 @@ var SuggestionListItem = import_react238.default.forwardRef(function SuggestionL
       onMouseEnter,
       ref: containerRef
     },
-    /* @__PURE__ */ import_react238.default.createElement(
+    /* @__PURE__ */ import_react237.default.createElement(
       "button",
       {
         onClick: handleSelect,
@@ -48390,13 +48356,13 @@ var SuggestionListItem = import_react238.default.forwardRef(function SuggestionL
         },
         ref: innerRef
       },
-      /* @__PURE__ */ import_react238.default.createElement(Component2, { entity: item2, focused })
+      /* @__PURE__ */ import_react237.default.createElement(Component2, { entity: item2, focused })
     )
   );
 });
 
 // src/components/TextareaComposer/SuggestionList/UserItem.tsx
-var import_react239 = __toESM(require("react"));
+var import_react238 = __toESM(require("react"));
 var import_clsx59 = __toESM(require("clsx"));
 var UserItem = ({ Avatar: Avatar2 = Avatar, entity }) => {
   const hasEntity = !!Object.keys(entity).length;
@@ -48405,7 +48371,7 @@ var UserItem = ({ Avatar: Avatar2 = Avatar, entity }) => {
   const renderName = () => parts.map((part, i) => {
     const matches = part.toLowerCase() === token;
     const partWithHTMLSpacesAround = part.replace(/^\s+|\s+$/g, "\xA0");
-    return /* @__PURE__ */ import_react239.default.createElement(
+    return /* @__PURE__ */ import_react238.default.createElement(
       "span",
       {
         className: (0, import_clsx59.default)({
@@ -48417,14 +48383,14 @@ var UserItem = ({ Avatar: Avatar2 = Avatar, entity }) => {
       partWithHTMLSpacesAround
     );
   });
-  return /* @__PURE__ */ import_react239.default.createElement("div", { className: "str-chat__user-item" }, /* @__PURE__ */ import_react239.default.createElement(
+  return /* @__PURE__ */ import_react238.default.createElement("div", { className: "str-chat__user-item" }, /* @__PURE__ */ import_react238.default.createElement(
     Avatar2,
     {
       className: "str-chat__avatar--autocomplete-item",
       image: entity.image,
       name: entity.name || entity.id
     }
-  ), /* @__PURE__ */ import_react239.default.createElement("span", { className: "str-chat__user-item--name", "data-testid": "user-item-name" }, renderName()), /* @__PURE__ */ import_react239.default.createElement("div", { className: "str-chat__user-item-at" }, "@"));
+  ), /* @__PURE__ */ import_react238.default.createElement("span", { className: "str-chat__user-item--name", "data-testid": "user-item-name" }, renderName()), /* @__PURE__ */ import_react238.default.createElement("div", { className: "str-chat__user-item-at" }, "@"));
 };
 
 // src/components/TextareaComposer/SuggestionList/SuggestionList.tsx
@@ -48435,25 +48401,26 @@ var searchSourceStateSelector = (nextValue) => ({
   items: nextValue.items ?? []
 });
 var defaultComponents = {
-  "/": CommandItem,
-  ":": EmoticonItem,
-  "@": UserItem
+  "/": (props) => /* @__PURE__ */ import_react239.default.createElement(CommandItem, { entity: props.entity }),
+  ":": (props) => /* @__PURE__ */ import_react239.default.createElement(EmoticonItem, { entity: props.entity }),
+  "@": (props) => /* @__PURE__ */ import_react239.default.createElement(UserItem, { entity: props.entity })
 };
 var SuggestionList = ({
   className,
   closeOnClickOutside = true,
   containerClassName,
   focusedItemIndex,
-  setFocusedItemIndex
+  setFocusedItemIndex,
+  suggestionItemComponents = defaultComponents
 }) => {
   const { AutocompleteSuggestionItem = SuggestionListItem } = useComponentContext();
   const messageComposer = useMessageComposer();
   const { textComposer } = messageComposer;
   const { suggestions } = useStateStore(textComposer.state, textComposerStateSelector);
   const { items } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
-  const [container, setContainer] = (0, import_react240.useState)(null);
-  const component = suggestions?.trigger && defaultComponents[suggestions?.trigger];
-  (0, import_react240.useEffect)(() => {
+  const [container, setContainer] = (0, import_react239.useState)(null);
+  const component = suggestions?.trigger ? suggestionItemComponents[suggestions?.trigger] : void 0;
+  (0, import_react239.useEffect)(() => {
     if (!closeOnClickOutside || !suggestions || !container) return;
     const handleClick = (event) => {
       if (container.contains(event.target)) return;
@@ -48465,19 +48432,19 @@ var SuggestionList = ({
     };
   }, [closeOnClickOutside, suggestions, container, textComposer]);
   if (!suggestions || !items?.length || !component) return null;
-  return /* @__PURE__ */ import_react240.default.createElement(
+  return /* @__PURE__ */ import_react239.default.createElement(
     "div",
     {
       className: (0, import_clsx60.default)("str-chat__suggestion-list-container", containerClassName),
       ref: setContainer
     },
-    /* @__PURE__ */ import_react240.default.createElement(
+    /* @__PURE__ */ import_react239.default.createElement(
       InfiniteScrollPaginator,
       {
         loadNextOnScrollToBottom: suggestions.searchSource.search,
         threshold: 100
       },
-      /* @__PURE__ */ import_react240.default.createElement(
+      /* @__PURE__ */ import_react239.default.createElement(
         "ul",
         {
           className: (0, import_clsx60.default)(
@@ -48485,7 +48452,7 @@ var SuggestionList = ({
             className
           )
         },
-        items.map((item2, i) => /* @__PURE__ */ import_react240.default.createElement(
+        items.map((item2, i) => /* @__PURE__ */ import_react239.default.createElement(
           AutocompleteSuggestionItem,
           {
             component,
@@ -48501,7 +48468,9 @@ var SuggestionList = ({
 };
 
 // src/components/TextareaComposer/TextareaComposer.tsx
+var import_lodash19 = __toESM(require("lodash.debounce"));
 var import_clsx61 = __toESM(require("clsx"));
+var import_react240 = require("react");
 var import_react241 = __toESM(require("react"));
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
 var textComposerStateSelector2 = (state) => ({
@@ -48521,33 +48490,32 @@ var TextareaComposer = ({
   className,
   closeSuggestionsOnClickOutside,
   containerClassName,
-  // dropdownClassName, // todo: X find a different way to prevent prop drilling
-  grow: growProp,
-  // itemClassName, // todo: X find a different way to prevent prop drilling
   listClassName,
   maxRows: maxRowsProp = 1,
+  minRows: minRowsProp,
   onBlur,
   onChange,
   onKeyDown,
   onScroll,
+  onSelect,
   placeholder: placeholderProp,
   shouldSubmit: shouldSubmitProp,
-  ...restProps
+  ...restTextareaProps
 }) => {
   const { t } = useTranslationContext();
   const { AutocompleteSuggestionList = SuggestionList } = useComponentContext();
   const {
     additionalTextareaProps,
     cooldownRemaining,
-    grow: growContext,
     handleSubmit,
     maxRows: maxRowsContext,
+    minRows: minRowsContext,
     onPaste,
     shouldSubmit: shouldSubmitContext,
     textareaRef
   } = useMessageInputContext();
-  const grow = growProp ?? growContext;
   const maxRows = maxRowsProp ?? maxRowsContext;
+  const minRows = minRowsProp ?? minRowsContext;
   const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
   const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
   const messageComposer = useMessageComposer();
@@ -48648,6 +48616,20 @@ var TextareaComposer = ({
     },
     [onScroll, textComposer]
   );
+  const setSelectionDebounced = (0, import_react240.useMemo)(
+    () => (0, import_lodash19.default)(
+      (e) => {
+        onSelect?.(e);
+        textComposer.setSelection({
+          end: e.target.selectionEnd,
+          start: e.target.selectionStart
+        });
+      },
+      100,
+      { leading: false, trailing: true }
+    ),
+    [onSelect, textComposer]
+  );
   (0, import_react241.useEffect)(() => {
     if (textareaRef.current && !isComposing) {
       textareaRef.current.selectionStart = selection.start;
@@ -48675,7 +48657,7 @@ var TextareaComposer = ({
     /* @__PURE__ */ import_react241.default.createElement(
       import_react_textarea_autosize.default,
       {
-        ...restProps,
+        ...{ ...additionalTextareaProps, ...restTextareaProps },
         "aria-label": cooldownRemaining ? t("Slow Mode ON") : placeholder,
         className: (0, import_clsx61.default)(
           "rta__textarea",
@@ -48684,7 +48666,8 @@ var TextareaComposer = ({
         ),
         "data-testid": "message-input",
         disabled: !enabled || !!cooldownRemaining,
-        maxRows: grow ? maxRows : 1,
+        maxRows,
+        minRows,
         onBlur,
         onChange: changeHandler,
         onCompositionEnd,
@@ -48692,6 +48675,7 @@ var TextareaComposer = ({
         onKeyDown: keyDownHandler,
         onPaste,
         onScroll: scrollHandler,
+        onSelect: setSelectionDebounced,
         placeholder: placeholder || t("Type your message"),
         ref: (ref) => {
           textareaRef.current = ref;
@@ -48872,8 +48856,9 @@ var MessageInputFlat = () => {
     RecordingPermissionDeniedNotification: RecordingPermissionDeniedNotification2 = RecordingPermissionDeniedNotification,
     SendButton: SendButton2 = SendButton,
     StartRecordingAudioButton: StartRecordingAudioButton2 = StartRecordingAudioButton,
-    StopAIGenerationButton: StopAIGenerationButtonOverride
-  } = useComponentContext("MessageInputFlat");
+    StopAIGenerationButton: StopAIGenerationButtonOverride,
+    TextareaComposer: TextareaComposer2 = TextareaComposer
+  } = useComponentContext();
   const { channel } = useChatContext("MessageInputFlat");
   const { aiState } = useAIState(channel);
   const stopGenerating = (0, import_react245.useCallback)(() => channel?.stopAIResponse(), [channel]);
@@ -48896,7 +48881,7 @@ var MessageInputFlat = () => {
       onClose: closePermissionDeniedNotification,
       permissionName: "microphone" /* MIC */
     }
-  ), /* @__PURE__ */ import_react245.default.createElement(LinkPreviewList2, null), /* @__PURE__ */ import_react245.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react245.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-textarea-container" }, /* @__PURE__ */ import_react245.default.createElement(QuotedMessagePreview2, null), /* @__PURE__ */ import_react245.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react245.default.createElement(TextareaComposer, null), EmojiPicker && /* @__PURE__ */ import_react245.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react245.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react245.default.createElement(import_react245.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react245.default.createElement(
+  ), /* @__PURE__ */ import_react245.default.createElement(LinkPreviewList2, null), /* @__PURE__ */ import_react245.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react245.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-textarea-container" }, /* @__PURE__ */ import_react245.default.createElement(QuotedMessagePreview2, null), /* @__PURE__ */ import_react245.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react245.default.createElement(TextareaComposer2, null), EmojiPicker && /* @__PURE__ */ import_react245.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react245.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react245.default.createElement(import_react245.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react245.default.createElement(
     CooldownTimer2,
     {
       cooldownInterval: cooldownRemaining,
@@ -48928,10 +48913,8 @@ var useCreateMessageInputContext = (value) => {
     cooldownRemaining,
     emojiSearchIndex,
     focus,
-    grow,
     handleSubmit,
     hideSendButton,
-    insertText,
     isThreadInput,
     maxRows,
     minRows,
@@ -48953,10 +48936,8 @@ var useCreateMessageInputContext = (value) => {
       cooldownRemaining,
       emojiSearchIndex,
       focus,
-      grow,
       handleSubmit,
       hideSendButton,
-      insertText,
       isThreadInput,
       maxRows,
       minRows,
@@ -49097,7 +49078,6 @@ var EditMessageModal = ({
       MessageInput,
       {
         clearEditingState,
-        grow: true,
         hideSendButton: true,
         Input: EditMessageInput,
         ...additionalMessageInputProps
@@ -49661,9 +49641,9 @@ var getAttachmentType = (attachment) => {
 // src/components/Channel/Channel.tsx
 var import_react261 = __toESM(require("react"));
 var import_clsx66 = __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_lodash20 = __toESM(require("lodash.debounce"));
+var import_lodash21 = __toESM(require("lodash.defaultsdeep"));
+var import_lodash22 = __toESM(require("lodash.throttle"));
 var import_stream_chat11 = require("stream-chat");
 
 // src/components/Channel/channelState.ts
@@ -50261,7 +50241,7 @@ var ChannelInner = (props) => {
     skipMessageDataMemoization
   } = props;
   const channelQueryOptions = (0, import_react261.useMemo)(
-    () => (0, import_lodash20.default)(propChannelQueryOptions, {
+    () => (0, import_lodash21.default)(propChannelQueryOptions, {
       messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
     }),
     [propChannelQueryOptions]
@@ -50295,7 +50275,7 @@ var ChannelInner = (props) => {
     null
   );
   const channelCapabilitiesArray = channel.data?.own_capabilities;
-  const throttledCopyStateFromChannel = (0, import_lodash21.default)(
+  const throttledCopyStateFromChannel = (0, import_lodash22.default)(
     () => dispatch({ channel, type: "copyStateFromChannelOnEvent" }),
     500,
     {
@@ -50304,14 +50284,14 @@ var ChannelInner = (props) => {
     }
   );
   const setChannelUnreadUiState = (0, import_react261.useMemo)(
-    () => (0, import_lodash21.default)(_setChannelUnreadUiState, 200, {
+    () => (0, import_lodash22.default)(_setChannelUnreadUiState, 200, {
       leading: true,
       trailing: false
     }),
     []
   );
   const markRead = (0, import_react261.useMemo)(
-    () => (0, import_lodash21.default)(
+    () => (0, import_lodash22.default)(
       async (options) => {
         const { updateChannelUiUnreadState = true } = options ?? {};
         if (channel.disconnected || !channelConfig?.read_events) {
@@ -50516,7 +50496,7 @@ var ChannelInner = (props) => {
     []
   );
   const loadMoreFinished = (0, import_react261.useCallback)(
-    (0, import_lodash19.default)(
+    (0, import_lodash20.default)(
       (hasMore, messages) => {
         if (!isMounted.current) return;
         dispatch({ hasMore, messages, type: "loadMoreFinished" });
@@ -50837,7 +50817,7 @@ var ChannelInner = (props) => {
     dispatch({ type: "closeThread" });
   };
   const loadMoreThreadFinished = (0, import_react261.useCallback)(
-    (0, import_lodash19.default)(
+    (0, import_lodash20.default)(
       (threadHasMore, threadMessages) => {
         dispatch({
           threadHasMore,
@@ -50982,6 +50962,7 @@ var ChannelInner = (props) => {
       StartRecordingAudioButton: props.StartRecordingAudioButton,
       StopAIGenerationButton: props.StopAIGenerationButton,
       StreamedMessageText: props.StreamedMessageText,
+      TextareaComposer: props.TextareaComposer,
       ThreadHead: props.ThreadHead,
       ThreadHeader: props.ThreadHeader,
       ThreadStart: props.ThreadStart,
@@ -51044,6 +51025,7 @@ var ChannelInner = (props) => {
       props.StartRecordingAudioButton,
       props.StopAIGenerationButton,
       props.StreamedMessageText,
+      props.TextareaComposer,
       props.ThreadHead,
       props.ThreadHeader,
       props.ThreadStart,
@@ -51159,7 +51141,7 @@ var useChat = ({
   };
   (0, import_react264.useEffect)(() => {
     if (!client) return;
-    const version = "13.0.0-rc.1";
+    const version = "13.0.0";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);