stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/es/components/Search/SearchResults/SearchSourceResultsLoadingIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchSourceResultsLoadingIndicator.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslationContext } from '../../../context';\nimport { useSearchSourceResultsContext } from '../SearchSourceResultsContext';\n\nexport const SearchSourceResultsLoadingIndicator = () => {\n  const { t } = useTranslationContext();\n  const { searchSource } = useSearchSourceResultsContext();\n  return (\n    <div\n      className='str-chat__search-source-results__loading-indicator'\n      data-testid='search-loading-indicator'\n    >\n      {t('Searching for {{ searchSourceType }}...', {\n        searchSourceType: searchSource.type,\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAIA,IAAa,4CAA4C;CACvD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,iBAAiB,8BAA8B;CACvD,OACE,oBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAEX,EAAE,2CAA2C,EAC5C,kBAAkB,aAAa,KACjC,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"SearchSourceResultsLoadingIndicator.mjs","names":[],"sources":["../../../../../src/components/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslationContext } from '../../../context';\nimport { useSearchSourceResultsContext } from '../SearchSourceResultsContext';\n\nexport const SearchSourceResultsLoadingIndicator = () => {\n  const { t } = useTranslationContext();\n  const { searchSource } = useSearchSourceResultsContext();\n  return (\n    <div\n      className='str-chat__search-source-results__loading-indicator'\n      data-testid='search-loading-indicator'\n    >\n      {t(\n        'search.sourceResults.searching.text',\n        'Searching for {{ searchSourceType }}...',\n        {\n          searchSourceType: searchSource.type,\n        },\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAIA,IAAa,4CAA4C;CACvD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,iBAAiB,8BAA8B;CACvD,OACE,oBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAEX,EACC,uCACA,2CACA,EACE,kBAAkB,aAAa,KACjC,CACF;CACG,CAAA;AAET"}

package/dist/es/components/Search/SearchSourceResultsContext.mjs

@@ -1,3 +1,4 @@
+import { requireContext } from "../../context/requireContext.mjs";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Search/SearchSourceResultsContext.tsx
@@ -9,9 +10,7 @@ var SearchSourceResultsContextProvider = ({ children, value }) => /* @__PURE__ *
 	value,
 	children
 });
-var useSearchSourceResultsContext = () => {
-	return useContext(SearchSourceResultsContext);
-};
+var useSearchSourceResultsContext = () => requireContext(useContext(SearchSourceResultsContext), "useSearchSourceResultsContext", "SearchSourceResultsProvider");
 //#endregion
 export { SearchSourceResultsContext, SearchSourceResultsContextProvider, useSearchSourceResultsContext };
 

package/dist/es/components/Search/SearchSourceResultsContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchSourceResultsContext.mjs","names":[],"sources":["../../../../src/components/Search/SearchSourceResultsContext.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React, { createContext, useContext } from 'react';\nimport type { SearchSource } from 'stream-chat';\n\nexport type SearchSourceResultsContextValue = {\n  searchSource: SearchSource;\n};\n\nexport const SearchSourceResultsContext = createContext<\n  SearchSourceResultsContextValue | undefined\n>(undefined);\n\n/**\n * Context provider for components rendered within the `SearchSourceResults`\n */\nexport const SearchSourceResultsContextProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: SearchSourceResultsContextValue;\n}>) => (\n  <SearchSourceResultsContext.Provider\n    value={value as unknown as SearchSourceResultsContextValue}\n  >\n    {children}\n  </SearchSourceResultsContext.Provider>\n);\n\nexport const useSearchSourceResultsContext = () => {\n  const contextValue = useContext(SearchSourceResultsContext);\n  return contextValue as unknown as SearchSourceResultsContextValue;\n};\n"],"mappings":";;;AAQA,IAAa,6BAA6B,cAExC,KAAA,CAAS;;;;AAKX,IAAa,sCAAsC,EACjD,UACA,YAIA,oBAAC,2BAA2B,UAA5B;CACS;CAEN;AACkC,CAAA;AAGvC,IAAa,sCAAsC;CAEjD,OADqB,WAAW,0BACzB;AACT"}
+{"version":3,"file":"SearchSourceResultsContext.mjs","names":[],"sources":["../../../../src/components/Search/SearchSourceResultsContext.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React, { createContext, useContext } from 'react';\nimport type { SearchSource } from 'stream-chat';\nimport { requireContext } from '../../context/requireContext';\n\nexport type SearchSourceResultsContextValue = {\n  searchSource: SearchSource;\n};\n\nexport const SearchSourceResultsContext = createContext<\n  SearchSourceResultsContextValue | undefined\n>(undefined);\n\n/**\n * Context provider for components rendered within the `SearchSourceResults`\n */\nexport const SearchSourceResultsContextProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: SearchSourceResultsContextValue;\n}>) => (\n  <SearchSourceResultsContext.Provider\n    value={value as unknown as SearchSourceResultsContextValue}\n  >\n    {children}\n  </SearchSourceResultsContext.Provider>\n);\n\nexport const useSearchSourceResultsContext = () =>\n  requireContext(\n    useContext(SearchSourceResultsContext),\n    'useSearchSourceResultsContext',\n    'SearchSourceResultsProvider',\n  );\n"],"mappings":";;;;AASA,IAAa,6BAA6B,cAExC,KAAA,CAAS;;;;AAKX,IAAa,sCAAsC,EACjD,UACA,YAIA,oBAAC,2BAA2B,UAA5B;CACS;CAEN;AACkC,CAAA;AAGvC,IAAa,sCACX,eACE,WAAW,0BAA0B,GACrC,iCACA,6BACF"}

package/dist/es/components/SummarizedMessagePreview/SummarizedMessagePreview.mjs

@@ -1,5 +1,5 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useLatestMessagePreview } from "./hooks/useLatestMessagePreview.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";

package/dist/es/components/SummarizedMessagePreview/SummarizedMessagePreview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SummarizedMessagePreview.mjs","names":[],"sources":["../../../../src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport {\n  type ChannelPreviewDeliveryStatus,\n  type ChannelPreviewMessageType,\n  useLatestMessagePreview,\n  type UseLatestMessagePreviewParams,\n} from './hooks/useLatestMessagePreview';\nimport { useComponentContextIcons } from '../../context';\n\nexport const SummarizedMessagePreview = ({\n  latestMessage,\n  messageDeliveryStatus,\n  participantCount,\n}: UseLatestMessagePreviewParams) => {\n  const {\n    IconCamera,\n    IconCheckmark1Small,\n    IconChecks,\n    IconClock,\n    IconExclamationCircleFill,\n    IconFile,\n    IconGiphy,\n    IconLink,\n    IconLocation,\n    IconNoSign,\n    IconUnsupportedAttachment,\n    IconVideo,\n    IconVoice,\n  } = useComponentContextIcons();\n\n  const deliveryStatusIconMap: Record<ChannelPreviewDeliveryStatus, React.ComponentType> =\n    {\n      delivered: IconChecks,\n      read: IconChecks,\n      sending: IconClock,\n      sent: IconCheckmark1Small,\n    };\n\n  const contentTypeIconMap: Partial<\n    Record<ChannelPreviewMessageType, React.ComponentType>\n  > = {\n    deleted: IconNoSign,\n    error: IconExclamationCircleFill,\n    file: IconFile,\n    giphy: IconGiphy,\n    image: IconCamera,\n    link: IconLink,\n    location: IconLocation,\n    unsupported: IconUnsupportedAttachment,\n    video: IconVideo,\n    voice: IconVoice,\n  };\n\n  const { deliveryStatus, senderName, text, type } = useLatestMessagePreview({\n    latestMessage,\n    messageDeliveryStatus,\n    participantCount,\n  });\n\n  const DeliveryStatusIcon = deliveryStatus\n    ? deliveryStatusIconMap[deliveryStatus]\n    : undefined;\n  const ContentTypeIcon = contentTypeIconMap[type];\n\n  return (\n    <div\n      className={clsx('str-chat__summarized-message-preview', {\n        [`str-chat__summarized-message-preview--${type}`]: type,\n      })}\n    >\n      {type !== 'error' && (\n        <>\n          {DeliveryStatusIcon && (\n            <span\n              className={clsx('str-chat__summarized-message-preview__delivery-status', {\n                [`str-chat__summarized-message-preview__delivery-status--${deliveryStatus}`]:\n                  deliveryStatus,\n              })}\n            >\n              <DeliveryStatusIcon />\n            </span>\n          )}\n          {senderName && (\n            <span className='str-chat__summarized-message-preview__sender'>\n              {senderName}:\n            </span>\n          )}\n        </>\n      )}\n      {ContentTypeIcon && <ContentTypeIcon />}\n      <span className='str-chat__summarized-message-preview__text'>{text}</span>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAUA,IAAa,4BAA4B,EACvC,eACA,uBACA,uBACmC;CACnC,MAAM,EACJ,YACA,qBACA,YACA,WACA,2BACA,UACA,WACA,UACA,cACA,YACA,2BACA,WACA,cACE,yBAAyB;CAE7B,MAAM,wBACJ;EACE,WAAW;EACX,MAAM;EACN,SAAS;EACT,MAAM;CACR;CAEF,MAAM,qBAEF;EACF,SAAS;EACT,OAAO;EACP,MAAM;EACN,OAAO;EACP,OAAO;EACP,MAAM;EACN,UAAU;EACV,aAAa;EACb,OAAO;EACP,OAAO;CACT;CAEA,MAAM,EAAE,gBAAgB,YAAY,MAAM,SAAS,wBAAwB;EACzE;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,iBACvB,sBAAsB,kBACtB,KAAA;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,wCAAwC,GACrD,yCAAyC,SAAS,KACrD,CAAC;YAHH;GAKG,SAAS,WACR,qBAAA,YAAA,EAAA,UAAA,CACG,sBACC,oBAAC,QAAD;IACE,WAAW,KAAK,yDAAyD,GACtE,0DAA0D,mBACzD,eACJ,CAAC;cAED,oBAAC,oBAAD,CAAqB,CAAA;GACjB,CAAA,GAEP,cACC,qBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,YAAW,GACR;KAER,EAAA,CAAA;GAEH,mBAAmB,oBAAC,iBAAD,CAAkB,CAAA;GACtC,oBAAC,QAAD;IAAM,WAAU;cAA8C;GAAW,CAAA;EACtE;;AAET"}
+{"version":3,"file":"SummarizedMessagePreview.mjs","names":[],"sources":["../../../../src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport {\n  type ChannelPreviewDeliveryStatus,\n  type ChannelPreviewMessageType,\n  useLatestMessagePreview,\n  type UseLatestMessagePreviewParams,\n} from './hooks/useLatestMessagePreview';\nimport { useComponentContextIcons } from '../../context';\n\n/**\n * Props for {@link SummarizedMessagePreview}. Override the component via `ComponentContext`\n * (`<Chat>`/`<Channel>` prop `SummarizedMessagePreview`) to customize how a channel-list item renders\n * the preview of its latest message.\n */\nexport type SummarizedMessagePreviewProps = UseLatestMessagePreviewParams;\n\nexport const SummarizedMessagePreview = ({\n  latestMessage,\n  messageDeliveryStatus,\n  participantCount,\n}: UseLatestMessagePreviewParams) => {\n  const {\n    IconCamera,\n    IconCheckmark1Small,\n    IconChecks,\n    IconClock,\n    IconExclamationCircleFill,\n    IconFile,\n    IconGiphy,\n    IconLink,\n    IconLocation,\n    IconNoSign,\n    IconUnsupportedAttachment,\n    IconVideo,\n    IconVoice,\n  } = useComponentContextIcons();\n\n  const deliveryStatusIconMap: Record<ChannelPreviewDeliveryStatus, React.ComponentType> =\n    {\n      delivered: IconChecks,\n      read: IconChecks,\n      sending: IconClock,\n      sent: IconCheckmark1Small,\n    };\n\n  const contentTypeIconMap: Partial<\n    Record<ChannelPreviewMessageType, React.ComponentType>\n  > = {\n    deleted: IconNoSign,\n    error: IconExclamationCircleFill,\n    file: IconFile,\n    giphy: IconGiphy,\n    image: IconCamera,\n    link: IconLink,\n    location: IconLocation,\n    unsupported: IconUnsupportedAttachment,\n    video: IconVideo,\n    voice: IconVoice,\n  };\n\n  const { deliveryStatus, senderName, text, type } = useLatestMessagePreview({\n    latestMessage,\n    messageDeliveryStatus,\n    participantCount,\n  });\n\n  const DeliveryStatusIcon = deliveryStatus\n    ? deliveryStatusIconMap[deliveryStatus]\n    : undefined;\n  const ContentTypeIcon = contentTypeIconMap[type];\n\n  return (\n    <div\n      className={clsx('str-chat__summarized-message-preview', {\n        [`str-chat__summarized-message-preview--${type}`]: type,\n      })}\n    >\n      {type !== 'error' && (\n        <>\n          {DeliveryStatusIcon && (\n            <span\n              className={clsx('str-chat__summarized-message-preview__delivery-status', {\n                [`str-chat__summarized-message-preview__delivery-status--${deliveryStatus}`]:\n                  deliveryStatus,\n              })}\n            >\n              <DeliveryStatusIcon />\n            </span>\n          )}\n          {senderName && (\n            <span className='str-chat__summarized-message-preview__sender'>\n              {senderName}:\n            </span>\n          )}\n        </>\n      )}\n      {ContentTypeIcon && <ContentTypeIcon />}\n      <span className='str-chat__summarized-message-preview__text'>{text}</span>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,4BAA4B,EACvC,eACA,uBACA,uBACmC;CACnC,MAAM,EACJ,YACA,qBACA,YACA,WACA,2BACA,UACA,WACA,UACA,cACA,YACA,2BACA,WACA,cACE,yBAAyB;CAE7B,MAAM,wBACJ;EACE,WAAW;EACX,MAAM;EACN,SAAS;EACT,MAAM;CACR;CAEF,MAAM,qBAEF;EACF,SAAS;EACT,OAAO;EACP,MAAM;EACN,OAAO;EACP,OAAO;EACP,MAAM;EACN,UAAU;EACV,aAAa;EACb,OAAO;EACP,OAAO;CACT;CAEA,MAAM,EAAE,gBAAgB,YAAY,MAAM,SAAS,wBAAwB;EACzE;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,iBACvB,sBAAsB,kBACtB,KAAA;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,wCAAwC,GACrD,yCAAyC,SAAS,KACrD,CAAC;YAHH;GAKG,SAAS,WACR,qBAAA,YAAA,EAAA,UAAA,CACG,sBACC,oBAAC,QAAD;IACE,WAAW,KAAK,yDAAyD,GACtE,0DAA0D,mBACzD,eACJ,CAAC;cAED,oBAAC,oBAAD,CAAqB,CAAA;GACjB,CAAA,GAEP,cACC,qBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,YAAW,GACR;KAER,EAAA,CAAA;GAEH,mBAAmB,oBAAC,iBAAD,CAAkB,CAAA;GACtC,oBAAC,QAAD;IAAM,WAAU;cAA8C;GAAW,CAAA;EACtE;;AAET"}

package/dist/es/components/SummarizedMessagePreview/hooks/useLatestMessagePreview.mjs

@@ -1,6 +1,6 @@
 import { useChatContext } from "../../../context/ChatContext.mjs";
-import { getTranslatedMessageText } from "../../../context/MessageTranslationViewContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { getTranslatedMessageText } from "../../../context/MessageTranslationViewContext.mjs";
 import { isMessageDeleted } from "../../Message/utils.mjs";
 import { useMemo } from "react";
 import { isAudioAttachment, isFileAttachment, isImageAttachment, isScrapedContent, isVideoAttachment, isVoiceRecordingAttachment } from "stream-chat";
@@ -23,43 +23,67 @@ function getAttachmentContentType(attachment) {
 }
 function getAttachmentFallbackText(type, count, t) {
 	switch (type) {
-		case "image": return t("imageCount", { count });
-		case "video": return t("videoCount", { count });
-		case "voice": return t("voiceMessageCount", { count });
-		case "link": return t("linkCount", { count });
-		case "file": return t("fileCount", { count });
-		case "unsupported": return t("Unsupported attachment");
-		default: return t("fileCount", { count });
+		case "image": return t("messagePreview.latestMessagePreview.imageCount.label", {
+			count,
+			defaultValue_one: "Image",
+			defaultValue_other: "{{ count }} images"
+		});
+		case "video": return t("messagePreview.latestMessagePreview.videoCount.label", {
+			count,
+			defaultValue_one: "Video",
+			defaultValue_other: "{{ count }} videos"
+		});
+		case "voice": return t("messagePreview.latestMessagePreview.voiceMessageCount.label", {
+			count,
+			defaultValue_one: "Voice message",
+			defaultValue_other: "{{ count }} voice messages"
+		});
+		case "link": return t("messagePreview.latestMessagePreview.linkCount.label", {
+			count,
+			defaultValue_one: "Link",
+			defaultValue_other: "{{ count }} links"
+		});
+		case "file": return t("messagePreview.latestMessagePreview.fileCount.label", {
+			count,
+			defaultValue_one: "File",
+			defaultValue_other: "{{ count }} files"
+		});
+		case "unsupported": return t("common.unsupportedAttachment.text", "Unsupported attachment");
+		default: return t("messagePreview.latestMessagePreview.fileCount.label", {
+			count,
+			defaultValue_one: "File",
+			defaultValue_other: "{{ count }} files"
+		});
 	}
 }
 var useLatestMessagePreview = ({ latestMessage, messageDeliveryStatus, participantCount }) => {
-	const { client } = useChatContext("useLatestMessagePreview");
-	const { t, userLanguage } = useTranslationContext("useLatestMessagePreview");
+	const { client } = useChatContext();
+	const { t, userLanguage } = useTranslationContext();
 	return useMemo(() => {
 		if (!latestMessage) return {
-			text: t("Nothing yet..."),
+			text: t("common.nothingYet.text", "Nothing yet..."),
 			type: "empty"
 		};
 		if (latestMessage.status === "failed" || latestMessage.type === "error") return {
-			text: t("Message failed to send"),
+			text: t("messagePreview.latestMessagePreview.messageFailedSend.text", "Message failed to send"),
 			type: "error"
 		};
 		const isOwnMessage = latestMessage.user?.id === client.user?.id;
 		let deliveryStatus;
 		if (isOwnMessage) deliveryStatus = messageDeliveryStatus ?? latestMessage.status;
 		let senderName;
-		if (isOwnMessage) senderName = t("You");
+		if (isOwnMessage) senderName = t("common.you.label", "You");
 		else if (!isOwnMessage && participantCount !== void 0 && participantCount > 2) senderName = latestMessage.user?.name || latestMessage.user?.id;
 		if (isMessageDeleted(latestMessage)) return {
 			deliveryStatus,
 			senderName,
-			text: t("Message deleted"),
+			text: t("common.messageDeleted.text", "Message deleted"),
 			type: "deleted"
 		};
 		if (latestMessage.poll) return {
 			deliveryStatus,
 			senderName,
-			text: t("Poll"),
+			text: t("common.poll.label", "Poll"),
 			type: "poll"
 		};
 		const textContent = getTranslatedMessageText({
@@ -69,7 +93,7 @@ var useLatestMessagePreview = ({ latestMessage, messageDeliveryStatus, participa
 		if (latestMessage.shared_location) return {
 			deliveryStatus,
 			senderName,
-			text: textContent || t("Location"),
+			text: textContent || t("common.location.text", "Location"),
 			type: "location"
 		};
 		if (latestMessage.attachments && latestMessage.attachments.length) {
@@ -80,8 +104,9 @@ var useLatestMessagePreview = ({ latestMessage, messageDeliveryStatus, participa
 			if (attachments.every((attachment) => getAttachmentContentType(attachment) === firstAttachmentType)) contentType = firstAttachmentType;
 			else contentType = "file";
 			let text = contentType === "giphy" ? `GIPHY ${firstAttachment.title ?? ""}`.trim() : textContent || (attachments.length === 1 && contentType !== "voice" && contentType !== "unsupported" ? firstAttachment.fallback || firstAttachment.title : "") || getAttachmentFallbackText(contentType, attachments.length, t);
-			if (attachments.length === 1 && typeof firstAttachment.duration === "number") {
-				const durationString = `${Math.floor(firstAttachment.duration / 60)}:${(Math.ceil(firstAttachment.duration) % 60).toString().padStart(2, "0")}`;
+			const firstAttachmentDuration = firstAttachment.custom?.duration;
+			if (attachments.length === 1 && typeof firstAttachmentDuration === "number") {
+				const durationString = `${Math.floor(firstAttachmentDuration / 60)}:${(Math.ceil(firstAttachmentDuration) % 60).toString().padStart(2, "0")}`;
 				text += ` (${durationString})`;
 			}
 			return {
@@ -98,7 +123,7 @@ var useLatestMessagePreview = ({ latestMessage, messageDeliveryStatus, participa
 			type: "text"
 		};
 		return {
-			text: t("Empty message..."),
+			text: t("common.emptyMessage.text", "Empty message..."),
 			type: "empty"
 		};
 	}, [

package/dist/es/components/SummarizedMessagePreview/hooks/useLatestMessagePreview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useLatestMessagePreview.mjs","names":[],"sources":["../../../../../src/components/SummarizedMessagePreview/hooks/useLatestMessagePreview.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Attachment, LocalMessage } from 'stream-chat';\nimport {\n  isAudioAttachment,\n  isFileAttachment,\n  isImageAttachment,\n  isScrapedContent,\n  isVideoAttachment,\n  isVoiceRecordingAttachment,\n} from 'stream-chat';\n\nimport {\n  getTranslatedMessageText,\n  type TranslationContextValue,\n  useChatContext,\n  useTranslationContext,\n} from '../../../context';\nimport { isMessageDeleted } from '../../Message/utils';\n\nimport type { MessageDeliveryStatus } from '../../ChannelListItem';\n\nexport type ChannelPreviewMessageType =\n  | 'text'\n  | 'deleted'\n  | 'error'\n  | 'empty'\n  | 'image'\n  | 'giphy'\n  | 'video'\n  | 'voice'\n  | 'file'\n  | 'unsupported'\n  | 'link'\n  | 'location'\n  | 'poll';\n\nconst SUPPORTED_VIDEO_FORMATS: string[] = [\n  'video/mp4',\n  'video/ogg',\n  'video/webm',\n  'video/quicktime',\n];\n\n/**\n * Delivery status of the last own message.\n * Determines which delivery status icon to render in the preview.\n *\n * - `sending` — Clock icon\n * - `sent` — Single checkmark icon\n * - `delivered` — Double checkmark icon\n * - `read` — Double checkmark icon (with distinct color)\n */\nexport type ChannelPreviewDeliveryStatus = 'sending' | 'sent' | 'delivered' | 'read';\n\nexport type LatestMessagePreviewData = {\n  /**\n   * The type of content being previewed.\n   * Use this to render the appropriate content-type icon.\n   */\n  type: ChannelPreviewMessageType;\n  /**\n   * The preview text to display.\n   */\n  text: string;\n  /**\n   * Delivery status of own message.\n   * Only present for own messages that are not in error state.\n   * Use this to render the delivery status icon (clock, checkmark, double checkmark).\n   */\n  deliveryStatus?: ChannelPreviewDeliveryStatus;\n  /**\n   * Sender name prefix.\n   * - `\"You\"` (translated) for own messages\n   * - Sender's display name for incoming messages in group channels (>2 members)\n   * - `undefined` for incoming messages in direct conversations\n   */\n  senderName?: string;\n};\n\nfunction getAttachmentContentType(attachment: Attachment): ChannelPreviewMessageType {\n  if (!attachment) return 'text';\n\n  if (attachment.type === 'giphy') return 'giphy';\n  if (isScrapedContent(attachment)) return 'link';\n  if (isImageAttachment(attachment)) return 'image';\n  if (isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) return 'video';\n  if (isVoiceRecordingAttachment(attachment)) return 'voice';\n  if (\n    isAudioAttachment(attachment) ||\n    isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)\n  ) {\n    return 'file';\n  }\n\n  return 'unsupported';\n}\n\nfunction getAttachmentFallbackText(\n  type: ChannelPreviewMessageType,\n  count: number,\n  t: TranslationContextValue['t'],\n): string {\n  switch (type) {\n    case 'image':\n      return t('imageCount', { count });\n    case 'video':\n      return t('videoCount', { count });\n    case 'voice':\n      return t('voiceMessageCount', { count });\n    case 'link':\n      return t('linkCount', { count });\n    case 'file':\n      return t('fileCount', { count });\n    case 'unsupported':\n      return t('Unsupported attachment');\n    default:\n      return t('fileCount', { count });\n  }\n}\n\nexport type UseLatestMessagePreviewParams = {\n  /** The channel to generate preview for */\n  participantCount?: number;\n  /** The latest message in the channel */\n  latestMessage?: LocalMessage;\n  /**\n   * Delivery status from the `useMessageDeliveryStatus` hook.\n   * When provided, used to determine the delivery status icon.\n   * When omitted, delivery status icons are not shown.\n   */\n  messageDeliveryStatus?: MessageDeliveryStatus;\n};\n\nexport const useLatestMessagePreview = ({\n  latestMessage,\n  messageDeliveryStatus,\n  participantCount,\n}: UseLatestMessagePreviewParams): LatestMessagePreviewData => {\n  const { client } = useChatContext('useLatestMessagePreview');\n  const { t, userLanguage } = useTranslationContext('useLatestMessagePreview');\n\n  return useMemo(() => {\n    if (!latestMessage) {\n      return { text: t('Nothing yet...'), type: 'empty' as const };\n    }\n\n    if (latestMessage.status === 'failed' || latestMessage.type === 'error') {\n      return { text: t('Message failed to send'), type: 'error' as const };\n    }\n\n    const isOwnMessage = latestMessage.user?.id === client.user?.id;\n\n    let deliveryStatus: ChannelPreviewDeliveryStatus | undefined;\n    if (isOwnMessage) {\n      deliveryStatus = messageDeliveryStatus ?? (latestMessage.status as 'sending');\n    }\n\n    let senderName: string | undefined;\n    if (isOwnMessage) {\n      senderName = t('You');\n    } else if (!isOwnMessage && participantCount !== undefined && participantCount > 2) {\n      senderName = latestMessage.user?.name || latestMessage.user?.id;\n    }\n\n    if (isMessageDeleted(latestMessage)) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: t('Message deleted'),\n        type: 'deleted' as const,\n      };\n    }\n\n    if (latestMessage.poll) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: t('Poll'),\n        type: 'poll' as const,\n      };\n    }\n\n    const textContent =\n      getTranslatedMessageText({ language: userLanguage, message: latestMessage }) ||\n      latestMessage.text;\n\n    if (latestMessage.shared_location) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: textContent || t('Location'),\n        type: 'location' as const,\n      };\n    }\n\n    if (latestMessage.attachments && latestMessage.attachments.length) {\n      const attachments = latestMessage.attachments;\n\n      let contentType: ChannelPreviewMessageType;\n\n      const [firstAttachment] = attachments;\n      const firstAttachmentType = getAttachmentContentType(firstAttachment);\n\n      if (\n        attachments.every(\n          (attachment) => getAttachmentContentType(attachment) === firstAttachmentType,\n        )\n      ) {\n        contentType = firstAttachmentType;\n      } else {\n        contentType = 'file';\n      }\n\n      let text =\n        contentType === 'giphy'\n          ? `GIPHY ${firstAttachment.title ?? ''}`.trim()\n          : // prioritize message text content if available\n            textContent ||\n            // then fallback text of the single attachment if only one attachment is present and it's not a voice recording (fallback text is generic for voice recordings, so not useful in the preview)\n            (attachments.length === 1 &&\n            contentType !== 'voice' &&\n            contentType !== 'unsupported'\n              ? firstAttachment.fallback || firstAttachment.title\n              : '') ||\n            // then generic fallback text based on attachment type and count\n            getAttachmentFallbackText(contentType, attachments.length, t);\n\n      // attach duration for audio/video attachments if available\n      if (attachments.length === 1 && typeof firstAttachment.duration === 'number') {\n        const minutes = Math.floor(firstAttachment.duration / 60);\n        const seconds = Math.ceil(firstAttachment.duration) % 60;\n        const durationString = `${minutes}:${seconds.toString().padStart(2, '0')}`;\n        text += ` (${durationString})`;\n      }\n\n      return {\n        deliveryStatus,\n        senderName,\n        text,\n        type: contentType,\n      };\n    }\n\n    if (textContent) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: textContent,\n        type: 'text' as const,\n      };\n    }\n\n    return { text: t('Empty message...'), type: 'empty' as const };\n  }, [\n    client.user?.id,\n    latestMessage,\n    messageDeliveryStatus,\n    participantCount,\n    t,\n    userLanguage,\n  ]);\n};\n"],"mappings":"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"}
+{"version":3,"file":"useLatestMessagePreview.mjs","names":[],"sources":["../../../../../src/components/SummarizedMessagePreview/hooks/useLatestMessagePreview.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Attachment, LocalMessage, VoiceRecordingAttachment } from 'stream-chat';\nimport {\n  isAudioAttachment,\n  isFileAttachment,\n  isImageAttachment,\n  isScrapedContent,\n  isVideoAttachment,\n  isVoiceRecordingAttachment,\n} from 'stream-chat';\n\nimport {\n  getTranslatedMessageText,\n  type TranslationContextValue,\n  useChatContext,\n  useTranslationContext,\n} from '../../../context';\nimport { isMessageDeleted } from '../../Message/utils';\n\nimport type { MessageDeliveryStatus } from '../../ChannelListItem';\n\nexport type ChannelPreviewMessageType =\n  | 'text'\n  | 'deleted'\n  | 'error'\n  | 'empty'\n  | 'image'\n  | 'giphy'\n  | 'video'\n  | 'voice'\n  | 'file'\n  | 'unsupported'\n  | 'link'\n  | 'location'\n  | 'poll';\n\nconst SUPPORTED_VIDEO_FORMATS: string[] = [\n  'video/mp4',\n  'video/ogg',\n  'video/webm',\n  'video/quicktime',\n];\n\n/**\n * Delivery status of the last own message.\n * Determines which delivery status icon to render in the preview.\n *\n * - `sending` — Clock icon\n * - `sent` — Single checkmark icon\n * - `delivered` — Double checkmark icon\n * - `read` — Double checkmark icon (with distinct color)\n */\nexport type ChannelPreviewDeliveryStatus = 'sending' | 'sent' | 'delivered' | 'read';\n\nexport type LatestMessagePreviewData = {\n  /**\n   * The type of content being previewed.\n   * Use this to render the appropriate content-type icon.\n   */\n  type: ChannelPreviewMessageType;\n  /**\n   * The preview text to display.\n   */\n  text: string;\n  /**\n   * Delivery status of own message.\n   * Only present for own messages that are not in error state.\n   * Use this to render the delivery status icon (clock, checkmark, double checkmark).\n   */\n  deliveryStatus?: ChannelPreviewDeliveryStatus;\n  /**\n   * Sender name prefix.\n   * - `\"You\"` (translated) for own messages\n   * - Sender's display name for incoming messages in group channels (>2 members)\n   * - `undefined` for incoming messages in direct conversations\n   */\n  senderName?: string;\n};\n\nfunction getAttachmentContentType(attachment: Attachment): ChannelPreviewMessageType {\n  if (!attachment) return 'text';\n\n  if (attachment.type === 'giphy') return 'giphy';\n  if (isScrapedContent(attachment)) return 'link';\n  if (isImageAttachment(attachment)) return 'image';\n  if (isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) return 'video';\n  if (isVoiceRecordingAttachment(attachment)) return 'voice';\n  if (\n    isAudioAttachment(attachment) ||\n    isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)\n  ) {\n    return 'file';\n  }\n\n  return 'unsupported';\n}\n\nfunction getAttachmentFallbackText(\n  type: ChannelPreviewMessageType,\n  count: number,\n  t: TranslationContextValue['t'],\n): string {\n  switch (type) {\n    case 'image':\n      return t('messagePreview.latestMessagePreview.imageCount.label', {\n        count,\n        defaultValue_one: 'Image',\n        defaultValue_other: '{{ count }} images',\n      });\n    case 'video':\n      return t('messagePreview.latestMessagePreview.videoCount.label', {\n        count,\n        defaultValue_one: 'Video',\n        defaultValue_other: '{{ count }} videos',\n      });\n    case 'voice':\n      return t('messagePreview.latestMessagePreview.voiceMessageCount.label', {\n        count,\n        defaultValue_one: 'Voice message',\n        defaultValue_other: '{{ count }} voice messages',\n      });\n    case 'link':\n      return t('messagePreview.latestMessagePreview.linkCount.label', {\n        count,\n        defaultValue_one: 'Link',\n        defaultValue_other: '{{ count }} links',\n      });\n    case 'file':\n      return t('messagePreview.latestMessagePreview.fileCount.label', {\n        count,\n        defaultValue_one: 'File',\n        defaultValue_other: '{{ count }} files',\n      });\n    case 'unsupported':\n      return t('common.unsupportedAttachment.text', 'Unsupported attachment');\n    default:\n      return t('messagePreview.latestMessagePreview.fileCount.label', {\n        count,\n        defaultValue_one: 'File',\n        defaultValue_other: '{{ count }} files',\n      });\n  }\n}\n\nexport type UseLatestMessagePreviewParams = {\n  /** The channel to generate preview for */\n  participantCount?: number;\n  /** The latest message in the channel */\n  latestMessage?: LocalMessage;\n  /**\n   * Delivery status from the `useMessageDeliveryStatus` hook.\n   * When provided, used to determine the delivery status icon.\n   * When omitted, delivery status icons are not shown.\n   */\n  messageDeliveryStatus?: MessageDeliveryStatus;\n};\n\nexport const useLatestMessagePreview = ({\n  latestMessage,\n  messageDeliveryStatus,\n  participantCount,\n}: UseLatestMessagePreviewParams): LatestMessagePreviewData => {\n  const { client } = useChatContext();\n  const { t, userLanguage } = useTranslationContext();\n\n  return useMemo(() => {\n    if (!latestMessage) {\n      return {\n        text: t('common.nothingYet.text', 'Nothing yet...'),\n        type: 'empty' as const,\n      };\n    }\n\n    if (latestMessage.status === 'failed' || latestMessage.type === 'error') {\n      return {\n        text: t(\n          'messagePreview.latestMessagePreview.messageFailedSend.text',\n          'Message failed to send',\n        ),\n        type: 'error' as const,\n      };\n    }\n\n    const isOwnMessage = latestMessage.user?.id === client.user?.id;\n\n    let deliveryStatus: ChannelPreviewDeliveryStatus | undefined;\n    if (isOwnMessage) {\n      deliveryStatus = messageDeliveryStatus ?? (latestMessage.status as 'sending');\n    }\n\n    let senderName: string | undefined;\n    if (isOwnMessage) {\n      senderName = t('common.you.label', 'You');\n    } else if (!isOwnMessage && participantCount !== undefined && participantCount > 2) {\n      senderName = latestMessage.user?.name || latestMessage.user?.id;\n    }\n\n    if (isMessageDeleted(latestMessage)) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: t('common.messageDeleted.text', 'Message deleted'),\n        type: 'deleted' as const,\n      };\n    }\n\n    if (latestMessage.poll) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: t('common.poll.label', 'Poll'),\n        type: 'poll' as const,\n      };\n    }\n\n    const textContent =\n      getTranslatedMessageText({ language: userLanguage, message: latestMessage }) ||\n      latestMessage.text;\n\n    if (latestMessage.shared_location) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: textContent || t('common.location.text', 'Location'),\n        type: 'location' as const,\n      };\n    }\n\n    if (latestMessage.attachments && latestMessage.attachments.length) {\n      const attachments = latestMessage.attachments;\n\n      let contentType: ChannelPreviewMessageType;\n\n      const [firstAttachment] = attachments;\n      const firstAttachmentType = getAttachmentContentType(firstAttachment);\n\n      if (\n        attachments.every(\n          (attachment) => getAttachmentContentType(attachment) === firstAttachmentType,\n        )\n      ) {\n        contentType = firstAttachmentType;\n      } else {\n        contentType = 'file';\n      }\n\n      let text =\n        contentType === 'giphy'\n          ? `GIPHY ${firstAttachment.title ?? ''}`.trim()\n          : // prioritize message text content if available\n            textContent ||\n            // then fallback text of the single attachment if only one attachment is present and it's not a voice recording (fallback text is generic for voice recordings, so not useful in the preview)\n            (attachments.length === 1 &&\n            contentType !== 'voice' &&\n            contentType !== 'unsupported'\n              ? firstAttachment.fallback || firstAttachment.title\n              : '') ||\n            // then generic fallback text based on attachment type and count\n            getAttachmentFallbackText(contentType, attachments.length, t);\n\n      // attach duration for audio/video attachments if available\n      // `Attachment.custom` is typed as required by the OpenAPI models, but it is not guaranteed\n      // at runtime (og-scraped, giphy and custom-integration attachments arrive without it), and\n      // this cast is applied to attachments of ANY type - so it must be read defensively.\n      const firstAttachmentDuration = (firstAttachment as VoiceRecordingAttachment).custom\n        ?.duration;\n      if (attachments.length === 1 && typeof firstAttachmentDuration === 'number') {\n        const minutes = Math.floor(firstAttachmentDuration / 60);\n        const seconds = Math.ceil(firstAttachmentDuration) % 60;\n        const durationString = `${minutes}:${seconds.toString().padStart(2, '0')}`;\n        text += ` (${durationString})`;\n      }\n\n      return {\n        deliveryStatus,\n        senderName,\n        text,\n        type: contentType,\n      };\n    }\n\n    if (textContent) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: textContent,\n        type: 'text' as const,\n      };\n    }\n\n    return {\n      text: t('common.emptyMessage.text', 'Empty message...'),\n      type: 'empty' as const,\n    };\n  }, [\n    client.user?.id,\n    latestMessage,\n    messageDeliveryStatus,\n    participantCount,\n    t,\n    userLanguage,\n  ]);\n};\n"],"mappings":"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"}

package/dist/es/components/TextareaComposer/SuggestionList/CommandItem.mjs

@@ -1,6 +1,6 @@
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
-import { CommandContextMenuItem } from "../../MessageComposer/AttachmentSelector/CommandsMenu.mjs";
 import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { CommandContextMenuItem } from "../../MessageComposer/AttachmentSelector/CommandsMenu.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/TextareaComposer/SuggestionList/CommandItem.tsx

package/dist/es/components/TextareaComposer/SuggestionList/CommandItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommandItem.mjs","names":[],"sources":["../../../../../src/components/TextareaComposer/SuggestionList/CommandItem.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport React from 'react';\nimport type { CommandResponse, MessageComposerState } from 'stream-chat';\nimport { CommandContextMenuItem } from '../../MessageComposer/AttachmentSelector/CommandsMenu';\nimport { useStateStore } from '../../../store';\nimport { useMessageComposerController } from '../../MessageComposer/hooks';\n\nexport type CommandItemProps = {\n  entity: CommandResponse;\n  enabled?: boolean;\n  focused?: boolean;\n} & ComponentProps<'button'>;\n\nconst messageComposerStateSelector = ({\n  editedMessage,\n  quotedMessage,\n}: MessageComposerState) => ({\n  editedMessage,\n  quotedMessage,\n});\n\nexport const CommandItem = (props: PropsWithChildren<CommandItemProps>) => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { enabled, entity, focused: _, ...buttonProps } = props;\n  const messageComposer = useMessageComposerController();\n  useStateStore(messageComposer.state, messageComposerStateSelector);\n\n  if (!entity.name) return null;\n\n  const resolvedEnabled =\n    enabled ??\n    !messageComposer.isCommandDisabled(entity as CommandResponse & { name: string });\n\n  return (\n    <CommandContextMenuItem\n      {...buttonProps}\n      command={entity as CommandResponse & { name: string }}\n      enabled={resolvedEnabled}\n    />\n  );\n};\n"],"mappings":";;;;;;AAaA,IAAM,gCAAgC,EACpC,eACA,qBAC2B;CAC3B;CACA;AACF;AAEA,IAAa,eAAe,UAA+C;CAEzE,MAAM,EAAE,SAAS,QAAQ,SAAS,GAAG,GAAG,gBAAgB;CACxD,MAAM,kBAAkB,6BAA6B;CACrD,cAAc,gBAAgB,OAAO,4BAA4B;CAEjE,IAAI,CAAC,OAAO,MAAM,OAAO;CAEzB,MAAM,kBACJ,WACA,CAAC,gBAAgB,kBAAkB,MAA4C;CAEjF,OACE,oBAAC,wBAAD;EACE,GAAI;EACJ,SAAS;EACT,SAAS;CACV,CAAA;AAEL"}
+{"version":3,"file":"CommandItem.mjs","names":[],"sources":["../../../../../src/components/TextareaComposer/SuggestionList/CommandItem.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport React from 'react';\nimport type { Command, MessageComposerState } from 'stream-chat';\nimport { CommandContextMenuItem } from '../../MessageComposer/AttachmentSelector/CommandsMenu';\nimport { useStateStore } from '../../../store';\nimport { useMessageComposerController } from '../../MessageComposer/hooks';\n\nexport type CommandItemProps = {\n  entity: Command;\n  enabled?: boolean;\n  focused?: boolean;\n} & ComponentProps<'button'>;\n\nconst messageComposerStateSelector = ({\n  editedMessage,\n  quotedMessage,\n}: MessageComposerState) => ({\n  editedMessage,\n  quotedMessage,\n});\n\nexport const CommandItem = (props: PropsWithChildren<CommandItemProps>) => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { enabled, entity, focused: _, ...buttonProps } = props;\n  const messageComposer = useMessageComposerController();\n  useStateStore(messageComposer.state, messageComposerStateSelector);\n\n  if (!entity.name) return null;\n\n  const resolvedEnabled =\n    enabled ?? !messageComposer.isCommandDisabled(entity as Command & { name: string });\n\n  return (\n    <CommandContextMenuItem\n      {...buttonProps}\n      command={entity as Command & { name: string }}\n      enabled={resolvedEnabled}\n    />\n  );\n};\n"],"mappings":";;;;;;AAaA,IAAM,gCAAgC,EACpC,eACA,qBAC2B;CAC3B;CACA;AACF;AAEA,IAAa,eAAe,UAA+C;CAEzE,MAAM,EAAE,SAAS,QAAQ,SAAS,GAAG,GAAG,gBAAgB;CACxD,MAAM,kBAAkB,6BAA6B;CACrD,cAAc,gBAAgB,OAAO,4BAA4B;CAEjE,IAAI,CAAC,OAAO,MAAM,OAAO;CAEzB,MAAM,kBACJ,WAAW,CAAC,gBAAgB,kBAAkB,MAAoC;CAEpF,OACE,oBAAC,wBAAD;EACE,GAAI;EACJ,SAAS;EACT,SAAS;CACV,CAAA;AAEL"}

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.mjs

@@ -1,5 +1,5 @@
-import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
 import { ListItemLayout } from "../../../ListItemLayout/ListItemLayout.mjs";
 import { MentionSuggestionTitle } from "./MentionSuggestionTitle.mjs";
 import "react";
@@ -11,7 +11,7 @@ var BroadcastMentionItem = ({ entity, focused, ...buttonProps }) => {
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx(ListItemLayout, {
 		contentClassName: "str-chat__suggestion-list__item-content",
-		description: entity.mentionType === "channel" ? t("mention/Channel Description") : t("mention/Here Description"),
+		description: entity.mentionType === "channel" ? t("mention.channel.description", "Notify everyone in this channel") : t("mention.here.description", "Notify every online member in this channel"),
 		descriptionClassName: "str-chat__suggestion-list__item-details",
 		LeadingIcon: IconMegaphone,
 		RootElement: "button",

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BroadcastMentionItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport type { ChannelMentionSuggestion, HereMentionSuggestion } from 'stream-chat';\nimport { ListItemLayout } from '../../../ListItemLayout';\nimport { useComponentContextIcons, useTranslationContext } from '../../../../context';\nimport { MentionSuggestionTitle } from './MentionSuggestionTitle';\nimport type { MentionItemComponentProps } from './types';\n\nexport type BroadcastMentionItemProps = MentionItemComponentProps<\n  ChannelMentionSuggestion | HereMentionSuggestion\n>;\n\nexport const BroadcastMentionItem = ({\n  entity,\n  focused,\n  ...buttonProps\n}: BroadcastMentionItemProps) => {\n  const { IconMegaphone } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  const description =\n    entity.mentionType === 'channel'\n      ? t('mention/Channel Description')\n      : t('mention/Here Description');\n\n  return (\n    <ListItemLayout\n      contentClassName='str-chat__suggestion-list__item-content'\n      description={description}\n      descriptionClassName='str-chat__suggestion-list__item-details'\n      LeadingIcon={IconMegaphone}\n      RootElement='button'\n      rootProps={{\n        ...buttonProps,\n        className: clsx(\n          'str-chat__context-menu__button',\n          buttonProps.className,\n          'str-chat__suggestion-list__mention',\n        ),\n        role: buttonProps.role ?? 'menuitem',\n        title: `@${entity.name}`,\n      }}\n      selected={focused}\n      title={<MentionSuggestionTitle>{entity.name}</MentionSuggestionTitle>}\n      titleClassName='str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title'\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAYA,IAAa,wBAAwB,EACnC,QACA,SACA,GAAG,kBAC4B;CAC/B,MAAM,EAAE,kBAAkB,yBAAyB;CAEnD,MAAM,EAAE,MAAM,sBAAsB;CAMpC,OACE,oBAAC,gBAAD;EACE,kBAAiB;EACJ,aAPf,OAAO,gBAAgB,YACnB,EAAE,6BAA6B,IAC/B,EAAE,0BAA0B;EAM9B,sBAAqB;EACrB,aAAa;EACb,aAAY;EACZ,WAAW;GACT,GAAG;GACH,WAAW,KACT,kCACA,YAAY,WACZ,oCACF;GACA,MAAM,YAAY,QAAQ;GAC1B,OAAO,IAAI,OAAO;EACpB;EACA,UAAU;EACV,OAAO,oBAAC,wBAAD,EAAA,UAAyB,OAAO,KAA6B,CAAA;EACpE,gBAAe;CAChB,CAAA;AAEL"}
+{"version":3,"file":"BroadcastMentionItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport type { ChannelMentionSuggestion, HereMentionSuggestion } from 'stream-chat';\nimport { ListItemLayout } from '../../../ListItemLayout';\nimport { useComponentContextIcons, useTranslationContext } from '../../../../context';\nimport { MentionSuggestionTitle } from './MentionSuggestionTitle';\nimport type { MentionItemComponentProps } from './types';\n\nexport type BroadcastMentionItemProps = MentionItemComponentProps<\n  ChannelMentionSuggestion | HereMentionSuggestion\n>;\n\nexport const BroadcastMentionItem = ({\n  entity,\n  focused,\n  ...buttonProps\n}: BroadcastMentionItemProps) => {\n  const { IconMegaphone } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const description =\n    entity.mentionType === 'channel'\n      ? t('mention.channel.description', 'Notify everyone in this channel')\n      : t('mention.here.description', 'Notify every online member in this channel');\n\n  return (\n    <ListItemLayout\n      contentClassName='str-chat__suggestion-list__item-content'\n      description={description}\n      descriptionClassName='str-chat__suggestion-list__item-details'\n      LeadingIcon={IconMegaphone}\n      RootElement='button'\n      rootProps={{\n        ...buttonProps,\n        className: clsx(\n          'str-chat__context-menu__button',\n          buttonProps.className,\n          'str-chat__suggestion-list__mention',\n        ),\n        role: buttonProps.role ?? 'menuitem',\n        title: `@${entity.name}`,\n      }}\n      selected={focused}\n      title={<MentionSuggestionTitle>{entity.name}</MentionSuggestionTitle>}\n      titleClassName='str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title'\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAYA,IAAa,wBAAwB,EACnC,QACA,SACA,GAAG,kBAC4B;CAC/B,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,EAAE,MAAM,sBAAsB;CAMpC,OACE,oBAAC,gBAAD;EACE,kBAAiB;EACJ,aAPf,OAAO,gBAAgB,YACnB,EAAE,+BAA+B,iCAAiC,IAClE,EAAE,4BAA4B,4CAA4C;EAM5E,sBAAqB;EACrB,aAAa;EACb,aAAY;EACZ,WAAW;GACT,GAAG;GACH,WAAW,KACT,kCACA,YAAY,WACZ,oCACF;GACA,MAAM,YAAY,QAAQ;GAC1B,OAAO,IAAI,OAAO;EACpB;EACA,UAAU;EACV,OAAO,oBAAC,wBAAD,EAAA,UAAyB,OAAO,KAA6B,CAAA;EACpE,gBAAe;CAChB,CAAA;AAEL"}

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.mjs

@@ -1,5 +1,5 @@
-import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
 import { ListItemLayout } from "../../../ListItemLayout/ListItemLayout.mjs";
 import { MentionSuggestionTitle } from "./MentionSuggestionTitle.mjs";
 import { TokenizedSuggestionParts } from "../TokenizedSuggestionParts.mjs";
@@ -22,7 +22,7 @@ var RoleItem = ({ entity, focused, ...buttonProps }) => {
 			title: `@${role}`
 		},
 		selected: focused,
-		subtitle: t("Notify all {{ role }} members", { role }),
+		subtitle: t("textareaComposer.roleItem.notifyMembers.label", "Notify all {{ role }} members", { role }),
 		subtitleClassName: "str-chat__suggestion-list__item-details",
 		title: /* @__PURE__ */ jsx(MentionSuggestionTitle, { children: /* @__PURE__ */ jsx(TokenizedSuggestionParts, { tokenizedDisplayName: entity.tokenizedDisplayName }) }),
 		titleClassName: "str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title"

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RoleItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport type { RoleMentionSuggestion } from 'stream-chat';\nimport { ListItemLayout } from '../../../ListItemLayout';\nimport { useComponentContextIcons, useTranslationContext } from '../../../../context';\nimport { MentionSuggestionTitle } from './MentionSuggestionTitle';\nimport type { MentionItemComponentProps } from './types';\nimport { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';\n\nexport type RoleItemProps = MentionItemComponentProps<RoleMentionSuggestion>;\n\nexport const RoleItem = ({ entity, focused, ...buttonProps }: RoleItemProps) => {\n  const { IconShield } = useComponentContextIcons();\n\n  void focused;\n  const { t } = useTranslationContext();\n  const role = entity.name;\n\n  return (\n    <ListItemLayout\n      contentClassName='str-chat__suggestion-list__item-content'\n      LeadingIcon={IconShield}\n      RootElement='button'\n      rootProps={{\n        ...buttonProps,\n        className: clsx(\n          'str-chat__context-menu__button',\n          buttonProps.className,\n          'str-chat__suggestion-list__mention',\n        ),\n        role: buttonProps.role ?? 'menuitem',\n        title: `@${role}`,\n      }}\n      selected={focused}\n      subtitle={t('Notify all {{ role }} members', { role })}\n      subtitleClassName='str-chat__suggestion-list__item-details'\n      title={\n        <MentionSuggestionTitle>\n          <TokenizedSuggestionParts tokenizedDisplayName={entity.tokenizedDisplayName} />\n        </MentionSuggestionTitle>\n      }\n      titleClassName='str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title'\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,IAAa,YAAY,EAAE,QAAQ,SAAS,GAAG,kBAAiC;CAC9E,MAAM,EAAE,eAAe,yBAAyB;CAGhD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,OAAO,OAAO;CAEpB,OACE,oBAAC,gBAAD;EACE,kBAAiB;EACjB,aAAa;EACb,aAAY;EACZ,WAAW;GACT,GAAG;GACH,WAAW,KACT,kCACA,YAAY,WACZ,oCACF;GACA,MAAM,YAAY,QAAQ;GAC1B,OAAO,IAAI;EACb;EACA,UAAU;EACV,UAAU,EAAE,iCAAiC,EAAE,KAAK,CAAC;EACrD,mBAAkB;EAClB,OACE,oBAAC,wBAAD,EAAA,UACE,oBAAC,0BAAD,EAA0B,sBAAsB,OAAO,qBAAuB,CAAA,EACxD,CAAA;EAE1B,gBAAe;CAChB,CAAA;AAEL"}
+{"version":3,"file":"RoleItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport type { RoleMentionSuggestion } from 'stream-chat';\nimport { ListItemLayout } from '../../../ListItemLayout';\nimport { useComponentContextIcons, useTranslationContext } from '../../../../context';\nimport { MentionSuggestionTitle } from './MentionSuggestionTitle';\nimport type { MentionItemComponentProps } from './types';\nimport { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';\n\nexport type RoleItemProps = MentionItemComponentProps<RoleMentionSuggestion>;\n\nexport const RoleItem = ({ entity, focused, ...buttonProps }: RoleItemProps) => {\n  const { IconShield } = useComponentContextIcons();\n  void focused;\n  const { t } = useTranslationContext();\n  const role = entity.name;\n\n  return (\n    <ListItemLayout\n      contentClassName='str-chat__suggestion-list__item-content'\n      LeadingIcon={IconShield}\n      RootElement='button'\n      rootProps={{\n        ...buttonProps,\n        className: clsx(\n          'str-chat__context-menu__button',\n          buttonProps.className,\n          'str-chat__suggestion-list__mention',\n        ),\n        role: buttonProps.role ?? 'menuitem',\n        title: `@${role}`,\n      }}\n      selected={focused}\n      subtitle={t(\n        'textareaComposer.roleItem.notifyMembers.label',\n        'Notify all {{ role }} members',\n        { role },\n      )}\n      subtitleClassName='str-chat__suggestion-list__item-details'\n      title={\n        <MentionSuggestionTitle>\n          <TokenizedSuggestionParts tokenizedDisplayName={entity.tokenizedDisplayName} />\n        </MentionSuggestionTitle>\n      }\n      titleClassName='str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title'\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,IAAa,YAAY,EAAE,QAAQ,SAAS,GAAG,kBAAiC;CAC9E,MAAM,EAAE,eAAe,yBAAyB;CAEhD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,OAAO,OAAO;CAEpB,OACE,oBAAC,gBAAD;EACE,kBAAiB;EACjB,aAAa;EACb,aAAY;EACZ,WAAW;GACT,GAAG;GACH,WAAW,KACT,kCACA,YAAY,WACZ,oCACF;GACA,MAAM,YAAY,QAAQ;GAC1B,OAAO,IAAI;EACb;EACA,UAAU;EACV,UAAU,EACR,iDACA,iCACA,EAAE,KAAK,CACT;EACA,mBAAkB;EAClB,OACE,oBAAC,wBAAD,EAAA,UACE,oBAAC,0BAAD,EAA0B,sBAAsB,OAAO,qBAAuB,CAAA,EACxD,CAAA;EAE1B,gBAAe;CAChB,CAAA;AAEL"}

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UserGroupItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport type { UserGroupMentionSuggestion } from 'stream-chat';\nimport { useComponentContextIcons } from '../../../../context';\nimport { ListItemLayout } from '../../../ListItemLayout';\nimport { MentionSuggestionTitle } from './MentionSuggestionTitle';\nimport type { MentionItemComponentProps } from './types';\nimport { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';\n\nexport type UserGroupItemProps = MentionItemComponentProps<UserGroupMentionSuggestion>;\n\nexport const UserGroupItem = ({\n  entity,\n  focused,\n  ...buttonProps\n}: UserGroupItemProps) => {\n  const { IconUsers } = useComponentContextIcons();\n\n  void focused;\n\n  return (\n    <ListItemLayout\n      contentClassName='str-chat__suggestion-list__item-content'\n      LeadingIcon={IconUsers}\n      RootElement='button'\n      rootProps={{\n        ...buttonProps,\n        className: clsx(\n          'str-chat__context-menu__button',\n          buttonProps.className,\n          'str-chat__suggestion-list__mention',\n        ),\n        role: buttonProps.role ?? 'menuitem',\n        title: `@${entity.name}`,\n      }}\n      selected={focused}\n      subtitle={entity.description}\n      subtitleClassName='str-chat__suggestion-list__item-details'\n      title={\n        <MentionSuggestionTitle>\n          <TokenizedSuggestionParts tokenizedDisplayName={entity.tokenizedDisplayName} />\n        </MentionSuggestionTitle>\n      }\n      titleClassName='str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title'\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAWA,IAAa,iBAAiB,EAC5B,QACA,SACA,GAAG,kBACqB;CACxB,MAAM,EAAE,cAAc,yBAAyB;CAI/C,OACE,oBAAC,gBAAD;EACE,kBAAiB;EACjB,aAAa;EACb,aAAY;EACZ,WAAW;GACT,GAAG;GACH,WAAW,KACT,kCACA,YAAY,WACZ,oCACF;GACA,MAAM,YAAY,QAAQ;GAC1B,OAAO,IAAI,OAAO;EACpB;EACA,UAAU;EACV,UAAU,OAAO;EACjB,mBAAkB;EAClB,OACE,oBAAC,wBAAD,EAAA,UACE,oBAAC,0BAAD,EAA0B,sBAAsB,OAAO,qBAAuB,CAAA,EACxD,CAAA;EAE1B,gBAAe;CAChB,CAAA;AAEL"}
+{"version":3,"file":"UserGroupItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport type { UserGroupMentionSuggestion } from 'stream-chat';\nimport { ListItemLayout } from '../../../ListItemLayout';\nimport { MentionSuggestionTitle } from './MentionSuggestionTitle';\nimport type { MentionItemComponentProps } from './types';\nimport { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';\nimport { useComponentContextIcons } from '../../../../context';\n\nexport type UserGroupItemProps = MentionItemComponentProps<UserGroupMentionSuggestion>;\n\nexport const UserGroupItem = ({\n  entity,\n  focused,\n  ...buttonProps\n}: UserGroupItemProps) => {\n  const { IconUsers } = useComponentContextIcons();\n  void focused;\n\n  return (\n    <ListItemLayout\n      contentClassName='str-chat__suggestion-list__item-content'\n      LeadingIcon={IconUsers}\n      RootElement='button'\n      rootProps={{\n        ...buttonProps,\n        className: clsx(\n          'str-chat__context-menu__button',\n          buttonProps.className,\n          'str-chat__suggestion-list__mention',\n        ),\n        role: buttonProps.role ?? 'menuitem',\n        title: `@${entity.name}`,\n      }}\n      selected={focused}\n      subtitle={entity.description}\n      subtitleClassName='str-chat__suggestion-list__item-details'\n      title={\n        <MentionSuggestionTitle>\n          <TokenizedSuggestionParts tokenizedDisplayName={entity.tokenizedDisplayName} />\n        </MentionSuggestionTitle>\n      }\n      titleClassName='str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title'\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAWA,IAAa,iBAAiB,EAC5B,QACA,SACA,GAAG,kBACqB;CACxB,MAAM,EAAE,cAAc,yBAAyB;CAG/C,OACE,oBAAC,gBAAD;EACE,kBAAiB;EACjB,aAAa;EACb,aAAY;EACZ,WAAW;GACT,GAAG;GACH,WAAW,KACT,kCACA,YAAY,WACZ,oCACF;GACA,MAAM,YAAY,QAAQ;GAC1B,OAAO,IAAI,OAAO;EACpB;EACA,UAAU;EACV,UAAU,OAAO;EACjB,mBAAkB;EAClB,OACE,oBAAC,wBAAD,EAAA,UACE,oBAAC,0BAAD,EAA0B,sBAAsB,OAAO,qBAAuB,CAAA,EACxD,CAAA;EAE1B,gBAAe;CAChB,CAAA;AAEL"}

package/dist/es/components/TextareaComposer/SuggestionList/SuggestionList.mjs

@@ -1,20 +1,20 @@
-import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
-import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
-import { useStableId } from "../../UtilityComponents/useStableId.mjs";
+import { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.mjs";
 import { usePopoverPosition } from "../../Dialog/hooks/usePopoverPosition.mjs";
+import { useStableId } from "../../UtilityComponents/useStableId.mjs";
 import { ContextMenu } from "../../Dialog/components/ContextMenu.mjs";
-import { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.mjs";
-import { useMessageComposerCommands } from "../../MessageComposer/hooks/useMessageComposerCommands.mjs";
 import { InfiniteScrollPaginator } from "../../InfiniteScrollPaginator/InfiniteScrollPaginator.mjs";
+import { getTextareaCaretRect } from "../../../utils/getTextareaCaretRect.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useMessageComposerCommands } from "../../MessageComposer/hooks/useMessageComposerCommands.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
 import { CommandsMenuClassName, CommandsMenuHeader } from "../../MessageComposer/AttachmentSelector/CommandsMenu.mjs";
 import { CommandItem } from "./CommandItem.mjs";
 import { EmoticonItem } from "./EmoticonItem.mjs";
 import { MentionItem } from "./MentionItem/MentionItem.mjs";
 import { SuggestionListItem } from "./SuggestionListItem.mjs";
-import { getTextareaCaretRect } from "../../../utils/getTextareaCaretRect.mjs";
-import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
 import { createElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -150,10 +150,10 @@ var SuggestionList = ({ className, closeOnClickOutside = true, containerClassNam
 	const showSuggestionsList = !!(suggestions && items?.length && component && commandSuggestionsEnabled);
 	const suggestionMenuLabel = useMemo(() => {
 		switch (suggestions?.searchSource.type) {
-			case "commands": return t("aria/Command Suggestions");
-			case "emoji": return t("aria/Emoji Suggestions");
-			case "mentions": return t("aria/Mention Suggestions");
-			default: return t("aria/Suggestions");
+			case "commands": return t("textareaComposer.suggestionList.commandSuggestions.ariaLabel", "Command Suggestions");
+			case "emoji": return t("textareaComposer.suggestionList.emojiSuggestions.ariaLabel", "Emoji Suggestions");
+			case "mentions": return t("textareaComposer.suggestionList.mentionSuggestions.ariaLabel", "Mention Suggestions");
+			default: return t("textareaComposer.suggestionList.suggestions.ariaLabel", "Suggestions");
 		}
 	}, [suggestions?.searchSource.type, t]);
 	useEffect(() => {

package/dist/es/components/TextareaComposer/SuggestionList/SuggestionList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestionList.mjs","names":[],"sources":["../../../../../src/components/TextareaComposer/SuggestionList/SuggestionList.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { VirtualElement } from '@floating-ui/react';\nimport type { CommandItemProps } from './CommandItem';\nimport { CommandItem } from './CommandItem';\nimport type { EmoticonItemProps } from './EmoticonItem';\nimport { EmoticonItem } from './EmoticonItem';\nimport { MentionItem } from './MentionItem';\nimport type { SuggestionListItemComponentProps } from './SuggestionListItem';\nimport { SuggestionListItem as DefaultSuggestionListItem } from './SuggestionListItem';\nimport { useInteractionAnnouncements } from '../../Accessibility';\nimport { useComponentContext } from '../../../context/ComponentContext';\nimport { useMessageComposerContext } from '../../../context/MessageComposerContext';\nimport { useStateStore } from '../../../store';\nimport { useStableId } from '../../UtilityComponents/useStableId';\nimport { getTextareaCaretRect } from '../../../utils/getTextareaCaretRect';\nimport type { ContextMenuItemComponent, ContextMenuItemProps } from '../../Dialog';\nimport { ContextMenu } from '../../Dialog';\nimport { usePopoverPosition } from '../../Dialog/hooks/usePopoverPosition';\nimport { InfiniteScrollPaginator } from '../../InfiniteScrollPaginator/InfiniteScrollPaginator';\nimport {\n  useMessageComposerCommands,\n  useMessageComposerController,\n} from '../../MessageComposer/hooks';\nimport { useTranslationContext } from '../../../context';\nimport type {\n  MentionSuggestion,\n  SearchSourceState,\n  TextComposerState,\n  TextComposerSuggestion,\n} from 'stream-chat';\nimport {\n  CommandsMenuClassName,\n  CommandsMenuHeader,\n} from '../../MessageComposer/AttachmentSelector/CommandsMenu';\n\ntype SuggestionTrigger = '/' | ':' | '@' | string;\n\nexport type SuggestionListProps = Partial<{\n  suggestionItemComponents: Record<\n    SuggestionTrigger,\n    React.ComponentType<SuggestionListItemComponentProps>\n  >;\n  className?: string;\n  closeOnClickOutside?: boolean;\n  containerClassName?: string;\n  focusedItemIndex: number;\n  /**\n   * Id applied to the listbox element. The controlling combobox (the composer textarea)\n   * points its `aria-controls`/`aria-activedescendant` at this id and at the derived\n   * per-option ids (`{listboxId}-option-{index}`), so the value must be shared between\n   * the textarea and this list. When omitted, a stable id is generated locally.\n   */\n  listboxId?: string;\n  setFocusedItemIndex: (index: number) => void;\n}>;\n\nconst textComposerStateSelector = ({ selection, suggestions }: TextComposerState) => ({\n  selection,\n  suggestions,\n});\n\nconst searchSourceStateSelector = (\n  nextValue: SearchSourceState<TextComposerSuggestion>,\n): { items: TextComposerSuggestion[] } => ({\n  items: nextValue.items ?? [],\n});\n\nexport const defaultComponents: Record<\n  SuggestionTrigger,\n  React.ComponentType<SuggestionListItemComponentProps>\n> = {\n  '/': (props: SuggestionListItemComponentProps) => (\n    <CommandItem {...props} entity={props.entity as CommandItemProps['entity']} />\n  ),\n  ':': (props: SuggestionListItemComponentProps) => (\n    <EmoticonItem {...props} entity={props.entity as EmoticonItemProps['entity']} />\n  ),\n  '@': (props: SuggestionListItemComponentProps) => (\n    <MentionItem {...props} entity={props.entity as MentionSuggestion} />\n  ),\n} as const;\n\n/**\n * Whether the suggestion listbox should be considered shown for a given source.\n * For command suggestions the list is suppressed when every command is disabled.\n * Shared with {@link TextareaComposer} so the textarea's `aria-controls`/\n * `aria-activedescendant` are only set while the listbox is actually rendered\n * (otherwise they would reference a non-existent element).\n */\nexport const hasEnabledCommandSuggestions = ({\n  commands,\n  type,\n}: {\n  commands: Array<{ enabled?: boolean }>;\n  type?: string;\n}) => type !== 'commands' || commands.some((command) => command.enabled);\n\nexport const SuggestionList = ({\n  className,\n  closeOnClickOutside = true,\n  containerClassName,\n  focusedItemIndex,\n  listboxId,\n  setFocusedItemIndex,\n  suggestionItemComponents = defaultComponents,\n}: SuggestionListProps) => {\n  const { t } = useTranslationContext();\n  const generatedListboxId = useStableId();\n  const resolvedListboxId = listboxId ?? generatedListboxId;\n  const { announceInteraction } = useInteractionAnnouncements();\n  const {\n    AutocompleteSuggestionItem = DefaultSuggestionListItem,\n    ContextMenu: ContextMenuComponent = ContextMenu,\n  } = useComponentContext();\n  const { textareaRef } = useMessageComposerContext();\n  const messageComposer = useMessageComposerController();\n  const commands = useMessageComposerCommands();\n  const { textComposer } = messageComposer;\n  const { selection, suggestions } = useStateStore(\n    textComposer.state,\n    textComposerStateSelector,\n  );\n  const { items } =\n    useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};\n  const commandSuggestionsEnabled = useMemo(\n    () =>\n      hasEnabledCommandSuggestions({ commands, type: suggestions?.searchSource.type }),\n    [commands, suggestions?.searchSource.type],\n  );\n\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const caretRectRef = useRef<DOMRect | null>(null);\n  const virtualCaretReference = useMemo<VirtualElement>(\n    () => ({\n      getBoundingClientRect: () => caretRectRef.current ?? new DOMRect(),\n    }),\n    [],\n  );\n\n  const { refs, strategy, update, x, y } = usePopoverPosition({\n    allowFlip: false,\n    offset: 8,\n    placement: 'top-start',\n    // For top placements, the cross-axis is X; we need this to allow flipping the list to the right when it overflows the right edge.\n    shiftOptions: { crossAxis: true },\n  });\n\n  const component = suggestions?.trigger\n    ? suggestionItemComponents[suggestions?.trigger]\n    : undefined;\n\n  const contextMenuItems = useMemo<ContextMenuItemComponent[]>(() => {\n    if (!component) return [];\n    // Render in the search source's own order — the SDK already orders results (commands by\n    // prefix-match relevance, then alphabetically), so we neither re-sort here nor in the composer's\n    // Enter handler; both index into the same `searchSource.items`, keeping the highlighted option\n    // and the inserted one in sync.\n    return (items ?? []).map((item, i) => {\n      const Item: ContextMenuItemComponent = ({ ...props }: ContextMenuItemProps) => (\n        <AutocompleteSuggestionItem\n          {...props}\n          aria-selected={focusedItemIndex === i}\n          component={component}\n          focused={focusedItemIndex === i}\n          id={`${resolvedListboxId}-option-${i}`}\n          item={item}\n          key={item.id.toString()}\n          onMouseEnter={() => setFocusedItemIndex?.(i)}\n          role='option'\n        />\n      );\n      return Item;\n    });\n  }, [\n    items,\n    component,\n    focusedItemIndex,\n    resolvedListboxId,\n    setFocusedItemIndex,\n    AutocompleteSuggestionItem,\n  ]);\n\n  const ItemsWrapper = useCallback(\n    ({ children }: React.ComponentProps<'div'>) => (\n      <InfiniteScrollPaginator\n        contentProps={{ role: 'presentation' }}\n        loadNextOnScrollToBottom={suggestions?.searchSource.search}\n        role='presentation'\n        threshold={100}\n      >\n        {children}\n      </InfiniteScrollPaginator>\n    ),\n    [suggestions?.searchSource.search],\n  );\n\n  useEffect(() => {\n    if (!closeOnClickOutside || !suggestions || !container) return;\n    const handleClick = (event: MouseEvent) => {\n      if (container.contains(event.target as Node)) return;\n      textComposer.closeSuggestions();\n    };\n    document.addEventListener('click', handleClick);\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  }, [closeOnClickOutside, suggestions, container, textComposer]);\n\n  useEffect(() => {\n    refs.setFloating(container);\n  }, [container, refs]);\n\n  useLayoutEffect(() => {\n    if (!suggestions || !update) return;\n    const updatePosition = () => {\n      const rect = getTextareaCaretRect(textareaRef.current ?? null, selection?.end);\n      if (!rect) {\n        caretRectRef.current = null;\n        refs.setReference(null);\n        return;\n      }\n      caretRectRef.current = rect;\n      virtualCaretReference.contextElement = textareaRef.current ?? undefined;\n      refs.setReference(virtualCaretReference);\n      update();\n    };\n\n    updatePosition();\n  }, [\n    container,\n    items?.length,\n    refs,\n    selection?.end,\n    suggestions,\n    textareaRef,\n    update,\n    virtualCaretReference,\n  ]);\n\n  const showSuggestionsList = !!(\n    suggestions &&\n    items?.length &&\n    component &&\n    commandSuggestionsEnabled\n  );\n\n  // A single localized label per suggestion type, used BOTH as the listbox's aria-label and\n  // in the count announcement (\"5 Command Suggestions\") — one source of truth, no second key.\n  // NOTE: the type strings must match the SDK search-source `type` values exactly — `commands`\n  // and `mentions` are plural, but the emoji source (EmojiSearchSource) uses the singular\n  // `emoji`. A mismatch silently falls through to the generic \"Suggestions\" label.\n  const suggestionMenuLabel = useMemo(() => {\n    switch (suggestions?.searchSource.type) {\n      case 'commands':\n        return t('aria/Command Suggestions');\n      case 'emoji':\n        return t('aria/Emoji Suggestions');\n      case 'mentions':\n        return t('aria/Mention Suggestions');\n      default:\n        return t('aria/Suggestions');\n    }\n  }, [suggestions?.searchSource.type, t]);\n\n  // Announce the visible result count to assistive technology whenever the menu appears or the\n  // result set changes as the query filters. We depend on `items` (not just its length) so the\n  // count re-announces on every genuine re-filter even when the number is unchanged — e.g. emoji\n  // results are capped at a constant N, so without this the user would type and hear nothing\n  // after the first announcement. `announceInteraction('suggestions.count')` debounces (300ms),\n  // so continuous typing collapses to a single announcement once the user pauses; it no longer\n  // dedupes unchanged values (that policy moved here, where \"did the results actually change?\"\n  // is knowable). We deliberately do not announce while the list is hidden (count 0 / closed).\n  useEffect(() => {\n    if (!showSuggestionsList) return;\n    announceInteraction('suggestions.count', {\n      count: items?.length ?? 0,\n      suggestionsLabel: suggestionMenuLabel,\n    });\n  }, [announceInteraction, items, showSuggestionsList, suggestionMenuLabel]);\n\n  if (!showSuggestionsList) return null;\n\n  return (\n    <div\n      aria-label={suggestionMenuLabel}\n      className={clsx('str-chat__suggestion-list-container', containerClassName)}\n      id={resolvedListboxId}\n      ref={setContainer}\n      role='listbox'\n      style={{\n        left: x ?? 0,\n        position: strategy,\n        top: y ?? 0,\n        visibility: x == null || y == null ? 'hidden' : undefined,\n        zIndex: 1000,\n      }}\n    >\n      <ContextMenuComponent\n        className={clsx('str-chat__suggestion-list', className)}\n        Header={\n          suggestions.searchSource.type === 'commands' ? CommandsMenuHeader : undefined\n        }\n        items={contextMenuItems}\n        ItemsWrapper={ItemsWrapper}\n        menuClassName={\n          suggestions.searchSource.type === 'commands' ? CommandsMenuClassName : undefined\n        }\n        role='presentation'\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SuggestionList.mjs","names":[],"sources":["../../../../../src/components/TextareaComposer/SuggestionList/SuggestionList.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { VirtualElement } from '@floating-ui/react';\nimport type { CommandItemProps } from './CommandItem';\nimport { CommandItem } from './CommandItem';\nimport type { EmoticonItemProps } from './EmoticonItem';\nimport { EmoticonItem } from './EmoticonItem';\nimport { MentionItem } from './MentionItem';\nimport type { SuggestionListItemComponentProps } from './SuggestionListItem';\nimport { SuggestionListItem as DefaultSuggestionListItem } from './SuggestionListItem';\nimport { useInteractionAnnouncements } from '../../Accessibility';\nimport { useComponentContext } from '../../../context/ComponentContext';\nimport { useMessageComposerContext } from '../../../context/MessageComposerContext';\nimport { useStateStore } from '../../../store';\nimport { useStableId } from '../../UtilityComponents/useStableId';\nimport { getTextareaCaretRect } from '../../../utils/getTextareaCaretRect';\nimport type { ContextMenuItemComponent, ContextMenuItemProps } from '../../Dialog';\nimport { ContextMenu } from '../../Dialog';\nimport { usePopoverPosition } from '../../Dialog/hooks/usePopoverPosition';\nimport { InfiniteScrollPaginator } from '../../InfiniteScrollPaginator/InfiniteScrollPaginator';\nimport {\n  useMessageComposerCommands,\n  useMessageComposerController,\n} from '../../MessageComposer/hooks';\nimport { useTranslationContext } from '../../../context';\nimport type {\n  MentionSuggestion,\n  SearchSourceState,\n  TextComposerState,\n  TextComposerSuggestion,\n} from 'stream-chat';\nimport {\n  CommandsMenuClassName,\n  CommandsMenuHeader,\n} from '../../MessageComposer/AttachmentSelector/CommandsMenu';\n\ntype SuggestionTrigger = '/' | ':' | '@' | string;\n\nexport type SuggestionListProps = Partial<{\n  suggestionItemComponents: Record<\n    SuggestionTrigger,\n    React.ComponentType<SuggestionListItemComponentProps>\n  >;\n  className?: string;\n  closeOnClickOutside?: boolean;\n  containerClassName?: string;\n  focusedItemIndex: number;\n  /**\n   * Id applied to the listbox element. The controlling combobox (the composer textarea)\n   * points its `aria-controls`/`aria-activedescendant` at this id and at the derived\n   * per-option ids (`{listboxId}-option-{index}`), so the value must be shared between\n   * the textarea and this list. When omitted, a stable id is generated locally.\n   */\n  listboxId?: string;\n  setFocusedItemIndex: (index: number) => void;\n}>;\n\nconst textComposerStateSelector = ({ selection, suggestions }: TextComposerState) => ({\n  selection,\n  suggestions,\n});\n\nconst searchSourceStateSelector = (\n  nextValue: SearchSourceState<TextComposerSuggestion>,\n): { items: TextComposerSuggestion[] } => ({\n  items: nextValue.items ?? [],\n});\n\nexport const defaultComponents: Record<\n  SuggestionTrigger,\n  React.ComponentType<SuggestionListItemComponentProps>\n> = {\n  '/': (props: SuggestionListItemComponentProps) => (\n    <CommandItem {...props} entity={props.entity as CommandItemProps['entity']} />\n  ),\n  ':': (props: SuggestionListItemComponentProps) => (\n    <EmoticonItem {...props} entity={props.entity as EmoticonItemProps['entity']} />\n  ),\n  '@': (props: SuggestionListItemComponentProps) => (\n    <MentionItem {...props} entity={props.entity as MentionSuggestion} />\n  ),\n} as const;\n\n/**\n * Whether the suggestion listbox should be considered shown for a given source.\n * For command suggestions the list is suppressed when every command is disabled.\n * Shared with {@link TextareaComposer} so the textarea's `aria-controls`/\n * `aria-activedescendant` are only set while the listbox is actually rendered\n * (otherwise they would reference a non-existent element).\n */\nexport const hasEnabledCommandSuggestions = ({\n  commands,\n  type,\n}: {\n  commands: Array<{ enabled?: boolean }>;\n  type?: string;\n}) => type !== 'commands' || commands.some((command) => command.enabled);\n\nexport const SuggestionList = ({\n  className,\n  closeOnClickOutside = true,\n  containerClassName,\n  focusedItemIndex,\n  listboxId,\n  setFocusedItemIndex,\n  suggestionItemComponents = defaultComponents,\n}: SuggestionListProps) => {\n  const { t } = useTranslationContext();\n  const generatedListboxId = useStableId();\n  const resolvedListboxId = listboxId ?? generatedListboxId;\n  const { announceInteraction } = useInteractionAnnouncements();\n  const {\n    AutocompleteSuggestionItem = DefaultSuggestionListItem,\n    ContextMenu: ContextMenuComponent = ContextMenu,\n  } = useComponentContext();\n  const { textareaRef } = useMessageComposerContext();\n  const messageComposer = useMessageComposerController();\n  const commands = useMessageComposerCommands();\n  const { textComposer } = messageComposer;\n  const { selection, suggestions } = useStateStore(\n    textComposer.state,\n    textComposerStateSelector,\n  );\n  const { items } =\n    useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};\n  const commandSuggestionsEnabled = useMemo(\n    () =>\n      hasEnabledCommandSuggestions({ commands, type: suggestions?.searchSource.type }),\n    [commands, suggestions?.searchSource.type],\n  );\n\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const caretRectRef = useRef<DOMRect | null>(null);\n  const virtualCaretReference = useMemo<VirtualElement>(\n    () => ({\n      getBoundingClientRect: () => caretRectRef.current ?? new DOMRect(),\n    }),\n    [],\n  );\n\n  const { refs, strategy, update, x, y } = usePopoverPosition({\n    allowFlip: false,\n    offset: 8,\n    placement: 'top-start',\n    // For top placements, the cross-axis is X; we need this to allow flipping the list to the right when it overflows the right edge.\n    shiftOptions: { crossAxis: true },\n  });\n\n  const component = suggestions?.trigger\n    ? suggestionItemComponents[suggestions?.trigger]\n    : undefined;\n\n  const contextMenuItems = useMemo<ContextMenuItemComponent[]>(() => {\n    if (!component) return [];\n    // Render in the search source's own order — the SDK already orders results (commands by\n    // prefix-match relevance, then alphabetically), so we neither re-sort here nor in the composer's\n    // Enter handler; both index into the same `searchSource.items`, keeping the highlighted option\n    // and the inserted one in sync.\n    return (items ?? []).map((item, i) => {\n      const Item: ContextMenuItemComponent = ({ ...props }: ContextMenuItemProps) => (\n        <AutocompleteSuggestionItem\n          {...props}\n          aria-selected={focusedItemIndex === i}\n          component={component}\n          focused={focusedItemIndex === i}\n          id={`${resolvedListboxId}-option-${i}`}\n          item={item}\n          key={item.id.toString()}\n          onMouseEnter={() => setFocusedItemIndex?.(i)}\n          role='option'\n        />\n      );\n      return Item;\n    });\n  }, [\n    items,\n    component,\n    focusedItemIndex,\n    resolvedListboxId,\n    setFocusedItemIndex,\n    AutocompleteSuggestionItem,\n  ]);\n\n  const ItemsWrapper = useCallback(\n    ({ children }: React.ComponentProps<'div'>) => (\n      <InfiniteScrollPaginator\n        contentProps={{ role: 'presentation' }}\n        loadNextOnScrollToBottom={suggestions?.searchSource.search}\n        role='presentation'\n        threshold={100}\n      >\n        {children}\n      </InfiniteScrollPaginator>\n    ),\n    [suggestions?.searchSource.search],\n  );\n\n  useEffect(() => {\n    if (!closeOnClickOutside || !suggestions || !container) return;\n    const handleClick = (event: MouseEvent) => {\n      if (container.contains(event.target as Node)) return;\n      textComposer.closeSuggestions();\n    };\n    document.addEventListener('click', handleClick);\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  }, [closeOnClickOutside, suggestions, container, textComposer]);\n\n  useEffect(() => {\n    refs.setFloating(container);\n  }, [container, refs]);\n\n  useLayoutEffect(() => {\n    if (!suggestions || !update) return;\n    const updatePosition = () => {\n      const rect = getTextareaCaretRect(textareaRef.current ?? null, selection?.end);\n      if (!rect) {\n        caretRectRef.current = null;\n        refs.setReference(null);\n        return;\n      }\n      caretRectRef.current = rect;\n      virtualCaretReference.contextElement = textareaRef.current ?? undefined;\n      refs.setReference(virtualCaretReference);\n      update();\n    };\n\n    updatePosition();\n  }, [\n    container,\n    items?.length,\n    refs,\n    selection?.end,\n    suggestions,\n    textareaRef,\n    update,\n    virtualCaretReference,\n  ]);\n\n  const showSuggestionsList = !!(\n    suggestions &&\n    items?.length &&\n    component &&\n    commandSuggestionsEnabled\n  );\n\n  // A single localized label per suggestion type, used BOTH as the listbox's aria-label and\n  // in the count announcement (\"5 Command Suggestions\") — one source of truth, no second key.\n  // NOTE: the type strings must match the SDK search-source `type` values exactly — `commands`\n  // and `mentions` are plural, but the emoji source (EmojiSearchSource) uses the singular\n  // `emoji`. A mismatch silently falls through to the generic \"Suggestions\" label.\n  const suggestionMenuLabel = useMemo(() => {\n    switch (suggestions?.searchSource.type) {\n      case 'commands':\n        return t(\n          'textareaComposer.suggestionList.commandSuggestions.ariaLabel',\n          'Command Suggestions',\n        );\n      case 'emoji':\n        return t(\n          'textareaComposer.suggestionList.emojiSuggestions.ariaLabel',\n          'Emoji Suggestions',\n        );\n      case 'mentions':\n        return t(\n          'textareaComposer.suggestionList.mentionSuggestions.ariaLabel',\n          'Mention Suggestions',\n        );\n      default:\n        return t('textareaComposer.suggestionList.suggestions.ariaLabel', 'Suggestions');\n    }\n  }, [suggestions?.searchSource.type, t]);\n\n  // Announce the visible result count to assistive technology whenever the menu appears or the\n  // result set changes as the query filters. We depend on `items` (not just its length) so the\n  // count re-announces on every genuine re-filter even when the number is unchanged — e.g. emoji\n  // results are capped at a constant N, so without this the user would type and hear nothing\n  // after the first announcement. `announceInteraction('suggestions.count')` debounces (300ms),\n  // so continuous typing collapses to a single announcement once the user pauses; it no longer\n  // dedupes unchanged values (that policy moved here, where \"did the results actually change?\"\n  // is knowable). We deliberately do not announce while the list is hidden (count 0 / closed).\n  useEffect(() => {\n    if (!showSuggestionsList) return;\n    announceInteraction('suggestions.count', {\n      count: items?.length ?? 0,\n      suggestionsLabel: suggestionMenuLabel,\n    });\n  }, [announceInteraction, items, showSuggestionsList, suggestionMenuLabel]);\n\n  if (!showSuggestionsList) return null;\n\n  return (\n    <div\n      aria-label={suggestionMenuLabel}\n      className={clsx('str-chat__suggestion-list-container', containerClassName)}\n      id={resolvedListboxId}\n      ref={setContainer}\n      role='listbox'\n      style={{\n        left: x ?? 0,\n        position: strategy,\n        top: y ?? 0,\n        visibility: x == null || y == null ? 'hidden' : undefined,\n        zIndex: 1000,\n      }}\n    >\n      <ContextMenuComponent\n        className={clsx('str-chat__suggestion-list', className)}\n        Header={\n          suggestions.searchSource.type === 'commands' ? CommandsMenuHeader : undefined\n        }\n        items={contextMenuItems}\n        ItemsWrapper={ItemsWrapper}\n        menuClassName={\n          suggestions.searchSource.type === 'commands' ? CommandsMenuClassName : undefined\n        }\n        role='presentation'\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/TextareaComposer/SuggestionList/SuggestionListItem.mjs

@@ -1,5 +1,5 @@
-import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
 import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
 import { useCallback, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";

package/dist/es/components/TextareaComposer/TextareaComposer.mjs

@@ -1,16 +1,17 @@
-import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
-import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { useAriaLiveAnnouncer } from "../Accessibility/useAriaLiveAnnouncer.mjs";
-import { useStableId } from "../UtilityComponents/useStableId.mjs";
 import { useInteractionAnnouncements } from "../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
 import { useCooldownRemaining } from "../MessageComposer/hooks/useCooldownRemaining.mjs";
 import { useMessageComposerCommands } from "../MessageComposer/hooks/useMessageComposerCommands.mjs";
 import { useMessageComposerHasSendableData } from "../MessageComposer/hooks/useMessageComposerHasSendableData.mjs";
+import { useMessageComposerSubmitFn } from "../MessageComposer/hooks/useMessageComposerSubmitFn.mjs";
+import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
 import { SuggestionList, hasEnabledCommandSuggestions } from "./SuggestionList/SuggestionList.mjs";
 import { useTextareaPlaceholder } from "./hooks/useTextareaPlaceholder.mjs";
-import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -47,9 +48,9 @@ var shouldBackspaceExitCommandMode = (text) => text.length === 0;
 var TextareaComposer = (props) => /* @__PURE__ */ jsx(TextareaComposerWithLiveAnnouncements, { ...props });
 var TextareaComposerWithLiveAnnouncements = ({ className, closeSuggestionsOnClickOutside, containerClassName, listClassName, maxRows: maxRowsProp, minRows: minRowsProp, onBlur, onChange, onKeyDown, onScroll, onSelect, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restTextareaProps }) => {
 	const { AutocompleteSuggestionList = SuggestionList } = useComponentContext();
-	const { additionalTextareaProps, focus, handleSubmit, maxRows: maxRowsContext, minRows: minRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef } = useMessageComposerContext();
+	const { additionalTextareaProps, focus, maxRows: maxRowsContext, minRows: minRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef } = useMessageComposerContext();
 	const cooldownRemaining = useCooldownRemaining();
-	const { t } = useTranslationContext("TextareaComposer");
+	const { t } = useTranslationContext();
 	const placeholder = useTextareaPlaceholder({ placeholder: placeholderProp });
 	const announce = useAriaLiveAnnouncer();
 	const { announceInteraction } = useInteractionAnnouncements();
@@ -60,13 +61,14 @@ var TextareaComposerWithLiveAnnouncements = ({ className, closeSuggestionsOnClic
 	const hasSendableData = useMessageComposerHasSendableData();
 	const { textComposer } = messageComposer;
 	const { selection, suggestions, text } = useStateStore(textComposer.state, textComposerStateSelector);
-	const ariaLabel = text ? t("aria/Message input") : placeholder;
+	const ariaLabel = text ? t("textareaComposer.messageInput.ariaLabel", "Message input") : placeholder;
 	const autosizeRows = !text && minRows == null ? 1 : void 0;
 	const textareaStyle = text ? void 0 : {
 		overflow: "hidden",
 		textOverflow: "ellipsis",
 		whiteSpace: "nowrap"
 	};
+	const submitMessage = useMessageComposerSubmitFn();
 	const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
 	const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateSelector);
 	const { attachments } = useStateStore(messageComposer.attachmentManager.state, attachmentManagerStateSelector);
@@ -144,16 +146,16 @@ var TextareaComposerWithLiveAnnouncements = ({ className, closeSuggestionsOnClic
 			textComposer.clearCommand();
 		} else if (shouldSubmit(event) && textareaRef.current && hasSendableData) {
 			if (event.key === "Enter") event.preventDefault();
-			handleSubmit();
+			submitMessage();
 		}
 	}, [
 		focusedItemIndex,
-		handleSubmit,
 		hasSendableData,
 		onKeyDown,
 		shouldSubmit,
-		textareaRef,
-		textComposer
+		submitMessage,
+		textComposer,
+		textareaRef
 	]);
 	const scrollHandler = useCallback((event) => {
 		if (onScroll) onScroll(event);