stream-chat-react 14.0.0-beta.5 → 14.0.0-beta.6

package/dist/es/emojis.mjs

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import Picker from "@emoji-mart/react";
-import { c as useTranslationContext, X as useMessageComposerContext, a as useMessageComposerController, Y as useIsCooldownActive, r as usePopoverPosition, aG as IconEmoji, B as Button } from "./WithAudioPlayback.e7821fd4.mjs";
+import { c as useTranslationContext, X as useMessageComposerContext, a as useMessageComposerController, Y as useIsCooldownActive, r as usePopoverPosition, aG as IconEmoji, B as Button } from "./WithAudioPlayback.d90f1a99.mjs";
 import mergeWith from "lodash.mergewith";
 import { insertItemWithTrigger, getTriggerCharWithToken, replaceWordWithEntity, BaseSearchSource, getTokenizedSuggestionDisplayName } from "stream-chat";
 const isShadowRoot = (node) => !!node.host;

package/dist/es/index.mjs

@@ -3,8 +3,8 @@ import clsx from "clsx";
 import { nanoid } from "nanoid";
 import React, { useState, useEffect, useCallback, useLayoutEffect, useMemo, useContext, createContext, useRef, forwardRef, createElement, Component, Fragment as Fragment$1 } from "react";
 import { u as useHandleFileChangeWrapper, d as dataTransferItemsToFiles, r as renderAudio, t as toAudioBuffer, c as createFileFromBlobs, g as getExtensionFromMimeType, a as getRecordedMediaTypeFromMimeType } from "./audioProcessing.21cb49e1.mjs";
-import { u as useStateStore, a as useMessageComposerController, i as isMessageBounced, b as useChannelActionContext, C as ComponentContext, c as useTranslationContext, d as useChannelStateContext, e as useChatContext, f as isNotificationForPanel, B as Button, I as IconPauseFill, g as IconPlayFill, h as getDefaultExportFromCjs, j as defaultTranslatorFunction, p as predefinedFormatters, L as LocalizedFormat, k as calendar, l as IconLoading, m as isNetworkSendFailure, v as validateAndGetMessage, n as isUserMuted, o as defaultPinPermissions, q as useThreadContext, r as usePopoverPosition, s as useComponentContext, t as IconXmark, w as IconUser, x as IconExclamationMarkFill, y as IconChevronRight, z as IconChevronLeft, A as IconArrowLeft, D as IconExclamationMark, E as IconNoSign, F as isMessageErrorRetryable, G as ACTIONS_NOT_WORKING_IN_THREAD, H as useNotificationTarget, J as IconArrowUpRight, K as addNotificationTargetTag, M as IconPin, N as mapToUserNameOrId, O as IconClock, P as IconCheckmark1Small, Q as IconChecks, R as getReadByTooltipText, S as messageHasAttachments, T as messageTextHasEmojisOnly, U as isDate, V as getDateString, W as IconTranslate, X as useMessageComposerContext, Y as useIsCooldownActive, Z as IconCrossSmall, _ as IconImage, $ as IconPoll, a0 as IconLocation, a1 as IconFile, a2 as IconLink, a3 as IconVideo, a4 as IconVideoFill, a5 as IconVoice, a6 as IconSave, a7 as IconBell, a8 as IconChevronDown, a9 as IconPlusSmall, aa as IconCheckmark, ab as DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ac as IconTrophy, ad as IconReorder, ae as IconMinusCircle, af as IconSend, ag as IconAudio, ah as IconUserAdd, ai as IconMute, aj as IconGiphy, ak as IconFlag, al as IconUserRemove, am as IconAttachment, an as IconCommand, ao as CHANNEL_CONTAINER_ID, ap as IconPlus, aq as IconExclamationTriangle, ar as useAudioPlayer, as as IconRetry, at as IconArrowDownCircle, au as IconBolt, av as IconDelete, aw as IconUpload, ax as MessageComposerContextProvider, ay as useTypingContext, az as defaultDateTimeParser, aA as isLanguageSupported, aB as IconSidebar, aC as useChatViewContext, aD as MESSAGE_ACTIONS, aE as LegacyThreadContext, aF as IconReply, aG as IconEmoji, aH as IconMore, aI as IconUserCheck, aJ as IconUnsave, aK as IconBellOff, aL as IconNotification, aM as IconEdit, aN as IconCopy, aO as IconUnpin, aP as IconQuote, aQ as IconThread, aR as areMessageUIPropsEqual, aS as isDateSeparatorMessage, aT as isMessageBlocked, aU as messageHasSingleAttachment, aV as messageHasGiphyAttachment, aW as messageHasReactions, aX as isMessageEdited, aY as countEmojis, aZ as areMessagePropsEqual, a_ as getMessageActions, a$ as processMessages, b0 as insertIntro, b1 as getGroupStyles, b2 as getLastReceived, b3 as IconArrowUp, b4 as isIntroMessage, b5 as isLocalMessage, b6 as getIsFirstUnreadMessage, b7 as IconArrowDown, b8 as DEFAULT_NEXT_CHANNEL_PAGE_SIZE, b9 as EmptyStateIndicator, ba as getChannel, bb as IconSearch, bc as IconXCircle, bd as useChannelListContext, be as DEFAULT_JUMP_TO_PAGE_SIZE, bf as ChannelListContextProvider, bg as IconArchive, bh as IconLeave, bi as IconCamera, bj as IconExclamationCircleFill, bk as ChatProvider, bl as TranslationProvider, bm as useThreadsViewContext, bn as IconMessageBubbles, bo as IconRefresh, bp as IconEyeOpen } from "./WithAudioPlayback.e7821fd4.mjs";
-import { bu, bx, bY, bZ, b_, b$, c0, c1, bz, bC, by, bB, bD, c2, bG, bH, bI, bJ, bK, c3, bL, bW, bX, c4, c5, c6, br, bF, bE, bs, bt, bM, bN, bT, bU, bQ, bR, c7, bS, c8, bP, bO, bq, bA, bv, bw, bV } from "./WithAudioPlayback.e7821fd4.mjs";
+import { u as useStateStore, a as useMessageComposerController, i as isMessageBounced, b as useChannelActionContext, C as ComponentContext, c as useTranslationContext, d as useChannelStateContext, e as useChatContext, f as isNotificationForPanel, B as Button, I as IconPauseFill, g as IconPlayFill, h as getDefaultExportFromCjs, j as defaultTranslatorFunction, p as predefinedFormatters, L as LocalizedFormat, k as calendar, l as IconLoading, m as isNetworkSendFailure, v as validateAndGetMessage, n as isUserMuted, o as defaultPinPermissions, q as useThreadContext, r as usePopoverPosition, s as useComponentContext, t as IconXmark, w as IconUser, x as IconExclamationMarkFill, y as IconChevronRight, z as IconChevronLeft, A as IconArrowLeft, D as IconExclamationMark, E as IconNoSign, F as isMessageErrorRetryable, G as ACTIONS_NOT_WORKING_IN_THREAD, H as useNotificationTarget, J as IconArrowUpRight, K as addNotificationTargetTag, M as IconPin, N as mapToUserNameOrId, O as IconClock, P as IconCheckmark1Small, Q as IconChecks, R as getReadByTooltipText, S as messageHasAttachments, T as messageTextHasEmojisOnly, U as isDate, V as getDateString, W as IconTranslate, X as useMessageComposerContext, Y as useIsCooldownActive, Z as IconXmarkSmall, _ as IconImage, $ as IconPoll, a0 as IconLocation, a1 as IconFile, a2 as IconLink, a3 as IconVideo, a4 as IconVideoFill, a5 as IconVoice, a6 as IconSave, a7 as IconBell, a8 as IconChevronDown, a9 as IconPlusSmall, aa as IconCheckmark, ab as DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ac as IconTrophy, ad as IconReorder, ae as IconMinusCircle, af as IconSend, ag as IconAudio, ah as IconUserAdd, ai as IconMute, aj as IconGiphy, ak as IconFlag, al as IconUserRemove, am as IconAttachment, an as IconCommand, ao as CHANNEL_CONTAINER_ID, ap as IconPlus, aq as IconExclamationTriangleFill, ar as useAudioPlayer, as as IconRetry, at as IconArrowDownCircle, au as IconBolt, av as IconDelete, aw as IconUpload, ax as MessageComposerContextProvider, ay as useTypingContext, az as defaultDateTimeParser, aA as isLanguageSupported, aB as IconSidebar, aC as useChatViewContext, aD as MESSAGE_ACTIONS, aE as LegacyThreadContext, aF as IconReply, aG as IconEmoji, aH as IconMore, aI as IconUserCheck, aJ as IconUnsave, aK as IconBellOff, aL as IconNotification, aM as IconEdit, aN as IconCopy, aO as IconUnpin, aP as IconQuote, aQ as IconThread, aR as areMessageUIPropsEqual, aS as isDateSeparatorMessage, aT as isMessageBlocked, aU as messageHasSingleAttachment, aV as messageHasGiphyAttachment, aW as messageHasReactions, aX as isMessageEdited, aY as countEmojis, aZ as areMessagePropsEqual, a_ as getMessageActions, a$ as processMessages, b0 as insertIntro, b1 as getGroupStyles, b2 as getLastReceived, b3 as IconArrowUp, b4 as isIntroMessage, b5 as isLocalMessage, b6 as getIsFirstUnreadMessage, b7 as IconArrowDown, b8 as DEFAULT_NEXT_CHANNEL_PAGE_SIZE, b9 as EmptyStateIndicator, ba as getChannel, bb as IconSearch, bc as IconXCircle, bd as useChannelListContext, be as DEFAULT_JUMP_TO_PAGE_SIZE, bf as ChannelListContextProvider, bg as IconArchive, bh as IconLeave, bi as IconCamera, bj as IconExclamationCircleFill, bk as ChatProvider, bl as TranslationProvider, bm as useThreadsViewContext, bn as IconMessageBubbles, bo as IconRefresh, bp as IconEyeFill } from "./WithAudioPlayback.d90f1a99.mjs";
+import { bu, bx, bY, bZ, b_, b$, c0, c1, bz, bC, by, bB, bD, c2, bG, bH, bI, bJ, bK, c3, bL, bW, bX, c4, c5, c6, br, bF, bE, bs, bt, bM, bN, bT, bU, bQ, bR, c7, bS, c8, bP, bO, bq, bA, bv, bw, bV } from "./WithAudioPlayback.d90f1a99.mjs";
 import { StateStore, formatMessage, MessageComposer as MessageComposer$1, isGiphyAttachment, isScrapedContent, isLocalVideoAttachment, isVideoAttachment, isLocalImageAttachment, isImageAttachment, isAudioAttachment, isVoiceRecordingAttachment, isFileAttachment, isVoteAnswer, VotingVisibility, isLocalVoiceRecordingAttachment, isLocalAudioAttachment, isLocalFileAttachment, isLocalAttachment, LinkPreviewsManager, SearchController, ChannelSearchSource, UserSearchSource, MessageSearchSource, StreamChat, isSharedLocationResponse, LiveLocationManager } from "stream-chat";
 import throttle from "lodash.throttle";
 import * as linkify from "linkifyjs";
@@ -9292,12 +9292,17 @@ const ErrorBadge = ({
 }) => /* @__PURE__ */ jsx(Badge, { ...rest, className, size, variant: "error", children: /* @__PURE__ */ jsx(IconExclamationMarkFill, {}) });
 function AvatarStack({
   badgeSize,
+  capLimit = 3,
   component: Component2 = "div",
   displayInfo = [],
-  overflowCount,
   size
 }) {
   const { Avatar: Avatar$1 = Avatar } = useComponentContext(AvatarStack.name);
+  const displayInfoToRender = useMemo(
+    () => displayInfo.length > capLimit ? displayInfo.slice(0, capLimit) : displayInfo,
+    [displayInfo, capLimit]
+  );
+  const overflowCount = displayInfo.length - displayInfoToRender.length;
   if (!displayInfo.length) {
     return null;
   }
@@ -9307,8 +9312,9 @@ function AvatarStack({
       className: clsx("str-chat__avatar-stack", {
         [`str-chat__avatar-stack--size-${size}`]: typeof size === "string"
       }),
+      "data-testid": "avatar-stack",
       children: [
-        displayInfo.map((info, index) => /* @__PURE__ */ jsx(
+        displayInfoToRender.map((info, index) => /* @__PURE__ */ jsx(
           Avatar$1,
           {
             imageUrl: info.imageUrl,
@@ -9321,6 +9327,7 @@ function AvatarStack({
           Badge,
           {
             className: "str-chat__avatar-stack__count-badge",
+            "data-testid": "avatar-stack-count-badge",
             size: badgeSize ?? size,
             variant: "counter",
             children: [
@@ -9336,34 +9343,36 @@ function AvatarStack({
 const ChannelAvatar = ({
   displayMembers,
   imageUrl,
-  overflowCount,
   size,
   userName,
   ...sharedProps
 }) => {
-  if ((displayMembers?.length ?? 0) >= 2) {
-    return /* @__PURE__ */ jsx(
-      GroupAvatar,
+  const displayInfo = useMemo(() => {
+    if (displayMembers && displayMembers.length > 0) {
+      return displayMembers;
+    }
+    return [
       {
-        displayMembers,
-        overflowCount,
-        size,
-        ...sharedProps
+        imageUrl,
+        userName
       }
-    );
-  }
-  return /* @__PURE__ */ jsx(Avatar, { imageUrl, size, userName, ...sharedProps });
+    ];
+  }, [displayMembers, imageUrl, userName]);
+  return /* @__PURE__ */ jsx(GroupAvatar, { displayMembers: displayInfo, size, ...sharedProps });
 };
 const GroupAvatar = ({
   badgeSize,
   className,
   displayMembers = [],
   isOnline,
-  overflowCount,
   size,
   ...rest
 }) => {
-  const displayCountBadge = typeof overflowCount === "number" && overflowCount > 0;
+  const displayMembersToRender = useMemo(
+    () => displayMembers.length > 4 ? displayMembers.slice(0, 2) : displayMembers,
+    [displayMembers]
+  );
+  const overflowCount = displayMembers.length - displayMembersToRender.length;
   if (displayMembers.length < 2) {
     const firstUser = displayMembers[0];
     return /* @__PURE__ */ jsx(
@@ -9401,19 +9410,20 @@ const GroupAvatar = ({
       role: "button",
       ...rest,
       children: [
-        displayMembers.slice(0, displayCountBadge ? 2 : 4).map(({ imageUrl, userName }, index) => /* @__PURE__ */ jsx(
+        displayMembersToRender.map(({ id, imageUrl, userName }, index) => /* @__PURE__ */ jsx(
           Avatar,
           {
             imageUrl,
             size: avatarSize,
             userName
           },
-          `${userName}-${imageUrl}-${index}`
+          id || `${userName}-${imageUrl}-${index}`
         )),
-        displayCountBadge && /* @__PURE__ */ jsxs(
+        typeof overflowCount === "number" && overflowCount > 0 && /* @__PURE__ */ jsxs(
           Badge,
           {
             className: "str-chat__avatar-group__count-badge",
+            "data-testid": "group-avatar-count-badge",
             size: badgeSize,
             variant: "counter",
             children: [
@@ -12011,7 +12021,7 @@ const RemoveAttachmentPreviewButton = ({
       "data-testid": "preview-item-delete-button",
       disabled: uploadState === "uploading",
       ...props,
-      children: /* @__PURE__ */ jsx(IconCrossSmall, {})
+      children: /* @__PURE__ */ jsx(IconXmarkSmall, {})
     }
   );
 };
@@ -16227,7 +16237,7 @@ const FileAttachmentPreview = ({
               /* @__PURE__ */ jsx("span", { children: hasSizeLimitError ? t("File too large") : uploadState === "blocked" ? t("Upload blocked") : t("Upload failed") })
             ] }),
             hasRetriableError && /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-file__retriable-error", children: [
-              /* @__PURE__ */ jsx(IconExclamationTriangle, {}),
+              /* @__PURE__ */ jsx(IconExclamationTriangleFill, {}),
               /* @__PURE__ */ jsx("span", { children: t("Upload error") }),
               /* @__PURE__ */ jsx(
                 "button",
@@ -16447,7 +16457,7 @@ const ProgressBar = ({ className, progress, seek }) => {
         {
           className: "str-chat__message-attachment-audio-widget--progress-indicator",
           ref: setProgressIndicator,
-          style: { left: `${indicatorLeft}px` }
+          style: { insetInlineStart: `${indicatorLeft}px` }
         }
       )
     }
@@ -16683,7 +16693,7 @@ const WaveProgressBar = ({
             "data-testid": "wave-progress-bar-progress-indicator",
             ref: setProgressIndicator,
             style: {
-              left: `${indicatorLeft}px`
+              insetInlineStart: `${indicatorLeft}px`
             }
           }
         )
@@ -16782,7 +16792,7 @@ const AudioAttachmentPreview = ({
               /* @__PURE__ */ jsx(IconExclamationMark, {}),
               /* @__PURE__ */ jsx("span", { children: hasSizeLimitError ? t("File too large") : uploadState === "blocked" ? t("Upload blocked") : t("Upload failed") })
             ] }) : /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-file__retriable-error", children: [
-              /* @__PURE__ */ jsx(IconExclamationTriangle, {}),
+              /* @__PURE__ */ jsx(IconExclamationTriangleFill, {}),
               /* @__PURE__ */ jsx("span", { children: t("Upload error") }),
               /* @__PURE__ */ jsx(
                 "button",
@@ -16825,7 +16835,7 @@ const MediaAttachmentPreview = ({
   removeAttachments
 }) => {
   const { t } = useTranslationContext();
-  const { BaseImage: BaseImage$1 = BaseImage, LoadingIndicator: LoadingIndicator2 = LoadingIndicatorIcon } = useComponentContext();
+  const { BaseImage: BaseImage$1 = BaseImage, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator } = useComponentContext();
   const [thumbnailPreviewError, setThumbnailPreviewError] = useState(false);
   const { id, uploadPermissionCheck, uploadState } = attachment.localMetadata ?? {};
   const isUploading = uploadState === "uploading";
@@ -16876,7 +16886,7 @@ const MediaAttachmentPreview = ({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: clsx("str-chat__attachment-preview-media__overlay"), children: [
-            isUploading && /* @__PURE__ */ jsx(LoadingIndicator2, {}),
+            isUploading && /* @__PURE__ */ jsx(LoadingIndicator$1, { "data-testid": "loading-indicator" }),
             isVideoAttachment(attachment) && !hasUploadError && uploadState !== "uploading" && /* @__PURE__ */ jsxs("div", { className: "str-chat__attachment-preview-media__video-indicator", children: [
               /* @__PURE__ */ jsx(IconVideoFill, {}),
               attachment.duration && /* @__PURE__ */ jsx("div", { children: attachment.duration })
@@ -18968,8 +18978,7 @@ const getGroupChannelDisplayInfo = (channel) => {
     memberList.push({ imageUrl: user.image, userName: user.name });
   }
   return {
-    members: memberList,
-    overflowCount: memberList.length > 4 ? memberList.length - 2 : void 0
+    members: memberList
   };
 };
 function computeChannelDisplayName(channel, directMessageLabel) {
@@ -19175,7 +19184,7 @@ const useChat = ({
   };
   useEffect(() => {
     if (!client) return;
-    const version = "14.0.0-beta.5";
+    const version = "14.0.0-beta.6";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -22318,7 +22327,6 @@ const InfiniteScroll = (props) => {
     children
   ] });
 };
-const MAX_AVATARS = 3;
 const UnMemoizedTypingIndicator = (props) => {
   const { isMessageListScrolledToBottom = true, scrollToBottom, threadList } = props;
   const { channelConfig, thread } = useChannelStateContext("TypingIndicator");
@@ -22335,11 +22343,16 @@ const UnMemoizedTypingIndicator = (props) => {
   const typingUsers = threadList ? typingInThread : typingInChannel;
   const { displayUsers } = useDebouncedTypingActive(typingUsers);
   const showIndicator = displayUsers.length > 0;
-  const displayInfo = displayUsers.slice(0, MAX_AVATARS).map(({ user }) => ({
-    id: user?.id,
-    imageUrl: user?.image,
-    userName: user?.name ?? ""
-  }));
+  const displayInfo = useMemo(
+    () => displayUsers.map(
+      ({ user }) => ({
+        id: user?.id,
+        imageUrl: user?.image,
+        userName: user?.name
+      })
+    ),
+    [displayUsers]
+  );
   useEffect(() => {
     if (showIndicator && isMessageListScrolledToBottom) scrollToBottom();
   }, [scrollToBottom, isMessageListScrolledToBottom, showIndicator]);
@@ -22349,7 +22362,6 @@ const UnMemoizedTypingIndicator = (props) => {
   if (!showIndicator || !isMessageListScrolledToBottom) {
     return null;
   }
-  const overflowCount = displayUsers.length > MAX_AVATARS ? displayUsers.length - MAX_AVATARS : 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -22362,15 +22374,7 @@ const UnMemoizedTypingIndicator = (props) => {
       ),
       "data-testid": "typing-indicator",
       children: [
-        displayInfo.length > 0 && /* @__PURE__ */ jsx(
-          AvatarStack,
-          {
-            badgeSize: "md",
-            displayInfo,
-            overflowCount: overflowCount > 0 ? overflowCount : void 0,
-            size: "md"
-          }
-        ),
+        displayInfo.length > 0 && /* @__PURE__ */ jsx(AvatarStack, { badgeSize: "md", displayInfo, size: "md" }),
         /* @__PURE__ */ jsx("div", { className: "str-chat__typing-indicator__bubble", children: /* @__PURE__ */ jsx("div", { className: "str-chat__typing-indicator__dots", children: /* @__PURE__ */ jsx(TypingIndicatorDots, {}) }) })
       ]
     }
@@ -26213,7 +26217,6 @@ const UnMemoizedChannelListItemUI = (props) => {
             {
               displayMembers: groupChannelDisplayInfo?.members,
               imageUrl: displayImage,
-              overflowCount: groupChannelDisplayInfo?.overflowCount,
               size: "xl",
               userName: avatarName
             }
@@ -26894,7 +26897,7 @@ const IconsBySeverity = {
   info: null,
   loading: IconRefresh,
   success: IconCheckmark,
-  warning: IconExclamationTriangle
+  warning: IconExclamationTriangleFill
 };
 const DefaultNotificationIcon = ({ notification }) => {
   if (!notification.severity) return null;
@@ -27834,7 +27837,7 @@ const UnsupportedAttachment = ({ attachment }) => {
 const VisibilityDisclaimer = () => {
   const { t } = useTranslationContext();
   return /* @__PURE__ */ jsxs("div", { className: "str-chat__visibility-disclaimer", children: [
-    /* @__PURE__ */ jsx(IconEyeOpen, {}),
+    /* @__PURE__ */ jsx(IconEyeFill, {}),
     t("Only visible to you")
   ] });
 };
@@ -28295,7 +28298,6 @@ const ChannelHeader = (props) => {
             className: "str-chat__avatar--channel-header",
             displayMembers: groupChannelDisplayInfo?.members,
             imageUrl: displayImage,
-            overflowCount: groupChannelDisplayInfo?.overflowCount,
             size: "lg",
             userName: displayTitle
           }
@@ -28443,15 +28445,14 @@ export {
   IconClock,
   IconCommand,
   IconCopy,
-  IconCrossSmall,
   IconDelete,
   IconEdit,
   IconEmoji,
   IconExclamationCircleFill,
   IconExclamationMark,
   IconExclamationMarkFill,
-  IconExclamationTriangle,
-  IconEyeOpen,
+  IconExclamationTriangleFill,
+  IconEyeFill,
   IconFile,
   IconFlag,
   IconGiphy,
@@ -28499,6 +28500,7 @@ export {
   IconVoice,
   IconXCircle,
   IconXmark,
+  IconXmarkSmall,
   ImageComponent,
   ImageContainer,
   ImagePlaceholder,