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

package/dist/es/components/MessageComposer/QuotedMessagePreview.mjs

@@ -0,0 +1,325 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useAttachmentContext } from "../../context/AttachmentContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
+import { getRenderTextMentionEntities } from "../Message/renderText/rehypePlugins/mentionsMarkdownPlugin.mjs";
+import { isDeletedMessage } from "../MessageList/utils.mjs";
+import { FileIcon } from "../FileIcon/FileIcon.mjs";
+import { SUPPORTED_VIDEO_FORMATS, displayDuration } from "../Attachment/utils.mjs";
+import { BaseImage } from "../BaseImage/BaseImage.mjs";
+import { RemoveAttachmentPreviewButton } from "./RemoveAttachmentPreviewButton.mjs";
+import { QuotedMessageIndicator } from "./QuotedMessageIndicator.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useMemo } from "react";
+import { isAudioAttachment, isFileAttachment, isGiphyAttachment, isImageAttachment, isScrapedContent, isVideoAttachment, isVoiceRecordingAttachment } from "stream-chat";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageComposer/QuotedMessagePreview.tsx
+var messageComposerStateStoreSelector = (state) => ({ quotedMessage: state.quotedMessage });
+var NullAttachmentIcon = () => null;
+var QUOTED_GIPHY_PREVIEW_LABEL = "Giphy";
+/** Giphy GIFs: only native type (e.g. /giphy command) is recognized as Giphy. */
+var isQuotedGiphyAttachment = (attachment) => isGiphyAttachment(attachment);
+var getAttachmentType = (attachment) => {
+	if (isQuotedGiphyAttachment(attachment)) return "giphy";
+	if (isScrapedContent(attachment)) return "link";
+	else if (isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) return "video";
+	else if (isImageAttachment(attachment)) return "image";
+	else if (isAudioAttachment(attachment)) return "audio";
+	else if (isVoiceRecordingAttachment(attachment)) return "voiceRecording";
+	else if (isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) return "file";
+	return "unsupported";
+};
+var getGroupedAttachments = (quotedMessage) => {
+	const groupedAttachments = {
+		documents: [],
+		giphies: [],
+		images: [],
+		links: [],
+		locations: [],
+		polls: [],
+		total: 0,
+		videos: [],
+		voiceRecordings: []
+	};
+	if (!quotedMessage || !quotedMessage.attachments) return groupedAttachments;
+	const result = quotedMessage.attachments.reduce((count, attachment) => {
+		switch (getAttachmentType(attachment)) {
+			case "giphy":
+				count.giphies.push(attachment);
+				count.total += 1;
+				break;
+			case "link":
+				count.links.push(attachment);
+				count.total += 1;
+				break;
+			case "video":
+				count.videos.push(attachment);
+				count.total += 1;
+				break;
+			case "voiceRecording":
+				count.voiceRecordings.push(attachment);
+				count.total += 1;
+				break;
+			case "audio":
+			case "file":
+				count.documents.push(attachment);
+				count.total += 1;
+				break;
+			default: if (isImageAttachment(attachment)) {
+				count.images.push(attachment);
+				count.total += 1;
+			}
+		}
+		return count;
+	}, groupedAttachments);
+	if (quotedMessage.shared_location) {
+		result.locations.push(quotedMessage.shared_location);
+		result.total += 1;
+	} else if (quotedMessage.poll) {
+		result.polls.push(quotedMessage.poll);
+		result.total += 1;
+	}
+	return result;
+};
+var getAttachmentIconWithType = (quotedMessage, giphyVersionName, icons) => {
+	const { IconCamera, IconFile, IconLink, IconLocation, IconNoSign, IconPlayFill, IconPoll, IconVideo, IconVoice } = icons;
+	const groupedAttachments = getGroupedAttachments(quotedMessage);
+	const result = {
+		groupedAttachments,
+		Icon: NullAttachmentIcon,
+		PreviewImage: null,
+		previewType: null
+	};
+	if (isDeletedMessage(quotedMessage)) return {
+		...result,
+		Icon: IconNoSign
+	};
+	if (!groupedAttachments.total || isDeletedMessage(quotedMessage)) return result;
+	if (groupedAttachments.polls.length > 0) return {
+		...result,
+		Icon: IconPoll,
+		previewType: "poll"
+	};
+	if (groupedAttachments.locations.length > 0) return {
+		...result,
+		Icon: IconLocation,
+		previewType: "location"
+	};
+	if (groupedAttachments.giphies.length > 0 && groupedAttachments.giphies.length === groupedAttachments.total) {
+		const giphyAttachment = groupedAttachments.giphies[0];
+		const src = (giphyAttachment.giphy?.[giphyVersionName])?.url || giphyAttachment.thumb_url || giphyAttachment.image_url || "";
+		return {
+			...result,
+			Icon: IconFile,
+			PreviewImage: /* @__PURE__ */ jsx(BaseImage, {
+				alt: QUOTED_GIPHY_PREVIEW_LABEL,
+				className: "str-chat__attachment-preview__thumbnail",
+				src,
+				title: QUOTED_GIPHY_PREVIEW_LABEL
+			}),
+			previewType: "giphy"
+		};
+	}
+	if (groupedAttachments.documents.length === groupedAttachments.total && groupedAttachments.documents.length === 1) {
+		const fileAttachment = groupedAttachments.documents[0];
+		return {
+			...result,
+			Icon: IconFile,
+			PreviewImage: /* @__PURE__ */ jsx(FileIcon, {
+				fileName: fileAttachment.title,
+				mimeType: fileAttachment.custom?.mime_type
+			}),
+			previewType: "file"
+		};
+	}
+	if (groupedAttachments.links.length === groupedAttachments.total) {
+		const linkAttachment = groupedAttachments.links[0];
+		return {
+			...result,
+			Icon: IconLink,
+			PreviewImage: /* @__PURE__ */ jsx(BaseImage, {
+				alt: linkAttachment.title,
+				className: "str-chat__attachment-preview__thumbnail",
+				src: linkAttachment.thumb_url || linkAttachment.image_url,
+				title: linkAttachment.title
+			}),
+			previewType: "link"
+		};
+	}
+	if (groupedAttachments.videos.length === groupedAttachments.total) {
+		const videoAttachment = groupedAttachments.videos[0];
+		return {
+			...result,
+			Icon: IconVideo,
+			PreviewImage: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BaseImage, {
+				alt: videoAttachment.asset_url,
+				className: "str-chat__attachment-preview__thumbnail",
+				src: videoAttachment.thumb_url,
+				title: videoAttachment.title
+			}), /* @__PURE__ */ jsx("div", {
+				className: "str-chat__attachment-preview__thumbnail__play-indicator",
+				children: /* @__PURE__ */ jsx(IconPlayFill, {})
+			})] }),
+			previewType: "video"
+		};
+	}
+	if (groupedAttachments.images.length === groupedAttachments.total) {
+		const imageAttachment = groupedAttachments.images[0];
+		return {
+			...result,
+			Icon: IconCamera,
+			PreviewImage: /* @__PURE__ */ jsx(BaseImage, {
+				alt: imageAttachment.fallback,
+				className: "str-chat__attachment-preview__thumbnail",
+				src: imageAttachment.image_url,
+				title: imageAttachment.title
+			}),
+			previewType: "image"
+		};
+	}
+	if (groupedAttachments.voiceRecordings.length === groupedAttachments.total) return {
+		...result,
+		Icon: IconVoice,
+		previewType: "voice"
+	};
+	return {
+		...result,
+		Icon: IconFile,
+		previewType: "mixed"
+	};
+};
+var QuotedMessagePreview = ({ getQuotedMessageAuthor, renderText }) => {
+	const messageComposer = useMessageComposerController();
+	const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateStoreSelector);
+	return quotedMessage ? /* @__PURE__ */ jsx("div", {
+		className: "str-chat__message-composer__quoted-message-preview-slot",
+		children: /* @__PURE__ */ jsx(QuotedMessagePreviewUI, {
+			getQuotedMessageAuthor,
+			onRemove: () => messageComposer.setQuotedMessage(null),
+			quotedMessage,
+			renderText
+		})
+	}) : null;
+};
+var QuotedMessagePreviewUI = ({ authorLabel, className, getQuotedMessageAuthor, onClick, onRemove, quotedMessage, renderText }) => {
+	const { client } = useChatContext();
+	const { t, userLanguage } = useTranslationContext();
+	const { giphyVersion: giphyVersionName = "fixed_height" } = useAttachmentContext();
+	const icons = useComponentContextIcons();
+	const quotedMessageText = useMemo(() => quotedMessage?.i18n?.[`${userLanguage}_text`] || quotedMessage?.text, [
+		quotedMessage?.i18n,
+		quotedMessage?.text,
+		userLanguage
+	]);
+	const quotedMessageMentionEntities = useMemo(() => getRenderTextMentionEntities({
+		mentioned_channel: quotedMessage?.mentioned_channel,
+		mentioned_groups: quotedMessage?.mentioned_groups,
+		mentioned_here: quotedMessage?.mentioned_here,
+		mentioned_roles: quotedMessage?.mentioned_roles,
+		mentioned_users: quotedMessage?.mentioned_users
+	}), [
+		quotedMessage?.mentioned_channel,
+		quotedMessage?.mentioned_groups,
+		quotedMessage?.mentioned_here,
+		quotedMessage?.mentioned_roles,
+		quotedMessage?.mentioned_users
+	]);
+	const { AttachmentIcon, PreviewImage, renderedText } = useMemo(() => {
+		if (!quotedMessage) return {
+			AttachmentIcon: NullAttachmentIcon,
+			renderedText: null
+		};
+		const { groupedAttachments, Icon: AttachmentIcon, PreviewImage, previewType } = getAttachmentIconWithType(quotedMessage, giphyVersionName, icons);
+		let renderedText;
+		if (isDeletedMessage(quotedMessage)) renderedText = t("common.messageDeleted.text", "Message deleted");
+		else if (!quotedMessageText) {
+			if (previewType === "poll") renderedText = quotedMessage.poll.name;
+			else if (previewType === "location") renderedText = t("common.liveLocation.text", "Live location");
+			else if (previewType === "voice") {
+				const voiceRecording = groupedAttachments.voiceRecordings[0];
+				renderedText = t("messageComposer.quotedMessagePreview.voiceMessage.label", "Voice message {{ duration }}", { duration: displayDuration(voiceRecording?.custom?.duration) });
+			} else if (previewType === "giphy") renderedText = QUOTED_GIPHY_PREVIEW_LABEL;
+			else if (previewType === "link") renderedText = groupedAttachments.links[0].title;
+			else if (previewType === "mixed") renderedText = t("messageComposer.quotedMessagePreview.files.label", {
+				count: groupedAttachments.total,
+				defaultValue_one: "{{ count }} file",
+				defaultValue_other: "{{ count }} files"
+			});
+			else if (previewType === "video") renderedText = groupedAttachments.videos.length === 1 ? t("messageComposer.quotedMessagePreview.video.label", "Video") : t("messageComposer.quotedMessagePreview.videos.label", {
+				count: groupedAttachments.videos.length,
+				defaultValue_one: "{{ count }} video",
+				defaultValue_other: "{{ count }} videos"
+			});
+			else if (previewType === "file") renderedText = groupedAttachments.documents[0].title;
+			else if (previewType === "image") renderedText = groupedAttachments.images.length === 1 ? t("messageComposer.quotedMessagePreview.photo.label", "Photo") : t("messageComposer.quotedMessagePreview.photos.label", {
+				count: groupedAttachments.images.length,
+				defaultValue_one: "{{ count }} photo",
+				defaultValue_other: "{{ count }} photos"
+			});
+		} else if (renderText) renderedText = renderText(quotedMessageText, quotedMessage?.mentioned_users, { messageMentionEntities: quotedMessageMentionEntities });
+		else renderedText = quotedMessageText;
+		return {
+			AttachmentIcon,
+			PreviewImage,
+			renderedText
+		};
+	}, [
+		giphyVersionName,
+		icons,
+		quotedMessage,
+		quotedMessageMentionEntities,
+		quotedMessageText,
+		renderText,
+		t
+	]);
+	const isOwnMessage = client.user?.id === quotedMessage?.user?.id;
+	const isInteractive = !!onClick;
+	const handleKeyDown = (event) => {
+		if (!onClick || event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		onClick(event);
+	};
+	if (!renderedText && !AttachmentIcon && !PreviewImage) return null;
+	const authorName = getQuotedMessageAuthor?.(quotedMessage) ?? quotedMessage.user?.name;
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-label": isInteractive ? t("messageComposer.quotedMessagePreview.jumpQuotedMessage.ariaLabel", "Jump to quoted message") : void 0,
+		className: clsx("str-chat__quoted-message-preview", className, { "str-chat__quoted-message-preview--own": isOwnMessage }),
+		"data-testid": "quoted-message-preview",
+		onClick,
+		onKeyDown: isInteractive ? handleKeyDown : void 0,
+		role: isInteractive ? "button" : void 0,
+		tabIndex: isInteractive ? 0 : void 0,
+		children: [
+			/* @__PURE__ */ jsx(QuotedMessageIndicator, { isOwnMessage }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__quoted-message-preview__content",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__quoted-message-preview__author",
+					children: authorLabel ?? (isOwnMessage ? t("common.you.label", "You") : authorName ? t("messageComposer.quotedMessagePreview.reply.withAuthorName.text", "Reply to {{ authorName }}", { authorName }) : t("messageComposer.quotedMessagePreview.reply.text", "Reply"))
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__quoted-message-preview__message",
+					"data-testid": "quoted-message-text",
+					children: [/* @__PURE__ */ jsx(AttachmentIcon, {}), /* @__PURE__ */ jsx("div", {
+						className: "str-chat__quoted-message-preview__message-text",
+						children: renderedText
+					})]
+				})]
+			}),
+			PreviewImage && /* @__PURE__ */ jsx("div", {
+				className: "str-chat__quoted-message-preview__image",
+				children: PreviewImage
+			}),
+			onRemove && /* @__PURE__ */ jsx(RemoveAttachmentPreviewButton, {
+				"aria-label": t("messageComposer.quotedMessagePreview.cancelReply.ariaLabel", "Cancel Reply"),
+				"data-testid": "quoted-message-preview-dismiss-btn",
+				onClick: onRemove
+			})
+		]
+	});
+};
+//#endregion
+export { QuotedMessagePreview, QuotedMessagePreviewUI };
+
+//# sourceMappingURL=QuotedMessagePreview.mjs.map

package/dist/es/components/MessageComposer/QuotedMessagePreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuotedMessagePreview.mjs","names":[],"sources":["../../../../src/components/MessageComposer/QuotedMessagePreview.tsx"],"sourcesContent":["import React, {\n  type ComponentType,\n  type KeyboardEvent,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\n\nimport { displayDuration, SUPPORTED_VIDEO_FORMATS } from '../Attachment';\n\nimport { useChatContext } from '../../context/ChatContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nimport { useStateStore } from '../../store';\nimport { useMessageComposerController } from './hooks';\nimport {\n  type Attachment,\n  type GiphyVersions,\n  isAudioAttachment,\n  isFileAttachment,\n  isGiphyAttachment,\n  isImageAttachment,\n  isScrapedContent,\n  isVideoAttachment,\n  isVoiceRecordingAttachment,\n  type LocalMessage,\n  type MessageComposerState,\n  type MessageResponse,\n  type PollResponseData,\n  type SharedLocationResponseData,\n  type TranslationLanguage,\n  type VoiceRecordingAttachment,\n} from 'stream-chat';\nimport { useAttachmentContext } from '../../context/AttachmentContext';\nimport type { MessageContextValue } from '../../context';\nimport { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton';\nimport clsx from 'clsx';\nimport { BaseImage } from '../BaseImage';\nimport { FileIcon } from '../FileIcon';\nimport { QuotedMessageIndicator } from './QuotedMessageIndicator';\nimport { getRenderTextMentionEntities } from '../Message/renderText/rehypePlugins';\nimport { isDeletedMessage } from '../MessageList';\nimport { useComponentContextIcons } from '../../context';\nimport type { IconSlots } from '../Icons/slots';\n\nconst messageComposerStateStoreSelector = (state: MessageComposerState) => ({\n  quotedMessage: state.quotedMessage,\n});\n\nexport type QuotedMessagePreviewProps = {\n  getQuotedMessageAuthor?: (message: LocalMessage | MessageResponse) => string;\n  renderText?: MessageContextValue['renderText'];\n};\n\nconst NullAttachmentIcon = () => null;\n\nconst QUOTED_GIPHY_PREVIEW_LABEL = 'Giphy';\n\ntype AttachmentType = 'documents' | 'images' | 'links' | 'videos' | 'voiceRecordings';\n\n/** Giphy GIFs: only native type (e.g. /giphy command) is recognized as Giphy. */\nconst isQuotedGiphyAttachment = (attachment: Attachment) => isGiphyAttachment(attachment);\n\nconst getAttachmentType = (attachment: Attachment) => {\n  if (isQuotedGiphyAttachment(attachment)) {\n    return 'giphy';\n  }\n  if (isScrapedContent(attachment)) {\n    return 'link';\n  } else if (isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {\n    return 'video';\n  } else if (isImageAttachment(attachment)) {\n    return 'image';\n  } else if (isAudioAttachment(attachment)) {\n    return 'audio';\n  } else if (isVoiceRecordingAttachment(attachment)) {\n    return 'voiceRecording';\n  } else if (isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {\n    return 'file';\n  }\n\n  return 'unsupported';\n};\n\ntype GroupedAttachments = Record<AttachmentType, Attachment[]> & {\n  giphies: Attachment[];\n  locations: SharedLocationResponseData[];\n  polls: PollResponseData[];\n  total: number;\n};\n\nconst getGroupedAttachments = (quotedMessage: LocalMessage | MessageResponse | null) => {\n  const groupedAttachments = {\n    documents: [],\n    giphies: [],\n    images: [],\n    links: [],\n    locations: [],\n    polls: [],\n    total: 0,\n    videos: [],\n    voiceRecordings: [],\n  };\n\n  if (!quotedMessage || !quotedMessage.attachments) return groupedAttachments;\n\n  const result = quotedMessage.attachments.reduce<GroupedAttachments>(\n    (count, attachment) => {\n      switch (getAttachmentType(attachment)) {\n        case 'giphy':\n          count.giphies.push(attachment);\n          count.total += 1;\n          break;\n        case 'link':\n          count.links.push(attachment);\n          count.total += 1;\n          break;\n        case 'video':\n          count.videos.push(attachment);\n          count.total += 1;\n          break;\n        case 'voiceRecording':\n          count.voiceRecordings.push(attachment);\n          count.total += 1;\n          break;\n        case 'audio':\n        case 'file':\n          count.documents.push(attachment);\n          count.total += 1;\n          break;\n        default:\n          if (isImageAttachment(attachment)) {\n            count.images.push(attachment);\n            count.total += 1;\n          }\n      }\n\n      return count;\n    },\n    groupedAttachments,\n  );\n  if (quotedMessage.shared_location) {\n    result.locations.push(quotedMessage.shared_location);\n    result.total += 1;\n  } else if (quotedMessage.poll) {\n    result.polls.push(quotedMessage.poll);\n    result.total += 1;\n  }\n\n  return result;\n};\n\ntype PreviewType =\n  | 'voice'\n  | 'file'\n  | 'image'\n  | 'giphy'\n  | 'link'\n  | 'location'\n  | 'poll'\n  | 'video'\n  | 'mixed';\n\nconst getAttachmentIconWithType = (\n  quotedMessage: LocalMessage | MessageResponse | null,\n  giphyVersionName: GiphyVersions,\n  // Icons arrive as an argument rather than from the hook: this is a plain helper, called from a\n  // `useMemo` inside the component, so it is not a place a hook may run.\n  icons: Required<IconSlots>,\n): {\n  groupedAttachments: GroupedAttachments;\n  Icon: ComponentType;\n  PreviewImage: ReactElement | null;\n  previewType: PreviewType | null;\n} => {\n  const {\n    IconCamera,\n    IconFile,\n    IconLink,\n    IconLocation,\n    IconNoSign,\n    IconPlayFill,\n    IconPoll,\n    IconVideo,\n    IconVoice,\n  } = icons;\n  const groupedAttachments = getGroupedAttachments(quotedMessage);\n  const result = {\n    groupedAttachments,\n    Icon: NullAttachmentIcon,\n    PreviewImage: null,\n    previewType: null,\n  };\n  if (isDeletedMessage(quotedMessage)) {\n    return { ...result, Icon: IconNoSign };\n  }\n  if (!groupedAttachments.total || isDeletedMessage(quotedMessage)) return result;\n  if (groupedAttachments.polls.length > 0)\n    return { ...result, Icon: IconPoll, previewType: 'poll' };\n  if (groupedAttachments.locations.length > 0)\n    // todo: we do not generate the location preview image\n    return { ...result, Icon: IconLocation, previewType: 'location' };\n  if (\n    groupedAttachments.giphies.length > 0 &&\n    groupedAttachments.giphies.length === groupedAttachments.total\n  ) {\n    const giphyAttachment = groupedAttachments.giphies[0] as Attachment & {\n      giphy?: Record<string, { url?: string } | undefined>;\n    };\n    const giphyVersion =\n      giphyAttachment.giphy?.[giphyVersionName as keyof NonNullable<Attachment['giphy']>];\n    const src =\n      giphyVersion?.url || giphyAttachment.thumb_url || giphyAttachment.image_url || '';\n    return {\n      ...result,\n      Icon: IconFile,\n      PreviewImage: (\n        <BaseImage\n          alt={QUOTED_GIPHY_PREVIEW_LABEL}\n          className='str-chat__attachment-preview__thumbnail'\n          src={src}\n          title={QUOTED_GIPHY_PREVIEW_LABEL}\n        />\n      ),\n      previewType: 'giphy',\n    };\n  }\n  if (\n    groupedAttachments.documents.length === groupedAttachments.total &&\n    groupedAttachments.documents.length === 1\n  ) {\n    const fileAttachment = groupedAttachments.documents[0] as Attachment;\n    return {\n      ...result,\n      Icon: IconFile,\n      PreviewImage: (\n        <FileIcon\n          fileName={fileAttachment.title}\n          mimeType={fileAttachment.custom?.mime_type}\n        />\n      ),\n      previewType: 'file',\n    };\n  }\n  if (groupedAttachments.links.length === groupedAttachments.total) {\n    const linkAttachment = groupedAttachments.links[0];\n    return {\n      ...result,\n      Icon: IconLink,\n      PreviewImage: (\n        <BaseImage\n          alt={linkAttachment.title}\n          className='str-chat__attachment-preview__thumbnail'\n          src={linkAttachment.thumb_url || linkAttachment.image_url}\n          title={linkAttachment.title}\n        />\n      ),\n      previewType: 'link',\n    };\n  }\n  if (groupedAttachments.videos.length === groupedAttachments.total) {\n    const videoAttachment = groupedAttachments.videos[0];\n    return {\n      ...result,\n      Icon: IconVideo,\n      PreviewImage: (\n        <>\n          <BaseImage\n            alt={videoAttachment.asset_url}\n            className='str-chat__attachment-preview__thumbnail'\n            src={videoAttachment.thumb_url}\n            title={videoAttachment.title}\n          />\n          <div className='str-chat__attachment-preview__thumbnail__play-indicator'>\n            <IconPlayFill />\n          </div>\n        </>\n      ),\n      previewType: 'video',\n    };\n  }\n  if (groupedAttachments.images.length === groupedAttachments.total) {\n    const imageAttachment = groupedAttachments.images[0];\n    return {\n      ...result,\n      Icon: IconCamera,\n      PreviewImage: (\n        <BaseImage\n          alt={imageAttachment.fallback}\n          className='str-chat__attachment-preview__thumbnail'\n          src={imageAttachment.image_url}\n          title={imageAttachment.title}\n        />\n      ),\n      previewType: 'image',\n    };\n  }\n  if (groupedAttachments.voiceRecordings.length === groupedAttachments.total)\n    return { ...result, Icon: IconVoice, previewType: 'voice' };\n\n  return { ...result, Icon: IconFile, previewType: 'mixed' };\n};\n\nexport const QuotedMessagePreview = ({\n  getQuotedMessageAuthor,\n  renderText,\n}: QuotedMessagePreviewProps) => {\n  const messageComposer = useMessageComposerController();\n  const { quotedMessage } = useStateStore(\n    messageComposer.state,\n    messageComposerStateStoreSelector,\n  );\n\n  return quotedMessage ? (\n    <div className='str-chat__message-composer__quoted-message-preview-slot'>\n      <QuotedMessagePreviewUI\n        getQuotedMessageAuthor={getQuotedMessageAuthor}\n        onRemove={() => messageComposer.setQuotedMessage(null)}\n        quotedMessage={quotedMessage}\n        renderText={renderText}\n      />\n    </div>\n  ) : null;\n};\n\ntype QuotedMessagePreviewUIProps = QuotedMessagePreviewProps & {\n  quotedMessage: LocalMessage | MessageResponse;\n  authorLabel?: ReactNode;\n  className?: string;\n  onClick?: MouseEventHandler<HTMLDivElement>;\n  onRemove?: () => void;\n};\n\nexport const QuotedMessagePreviewUI = ({\n  authorLabel,\n  className,\n  getQuotedMessageAuthor,\n  onClick,\n  onRemove,\n  quotedMessage,\n  renderText,\n}: QuotedMessagePreviewUIProps) => {\n  const { client } = useChatContext();\n  const { t, userLanguage } = useTranslationContext();\n  // MERGE-RECONCILE: `giphyVersion` was read from the deleted ChannelStateContext;\n  // migrated to the PR's source (useAttachmentContext().giphyVersion — same as Giphy.tsx).\n  const { giphyVersion: giphyVersionName = 'fixed_height' } = useAttachmentContext();\n  const icons = useComponentContextIcons();\n\n  const quotedMessageText = useMemo(\n    () =>\n      quotedMessage?.i18n?.[`${userLanguage}_text` as `${TranslationLanguage}_text`] ||\n      quotedMessage?.text,\n    [quotedMessage?.i18n, quotedMessage?.text, userLanguage],\n  );\n  const quotedMessageMentionEntities = useMemo(\n    () =>\n      getRenderTextMentionEntities({\n        mentioned_channel: quotedMessage?.mentioned_channel,\n        mentioned_groups: quotedMessage?.mentioned_groups,\n        mentioned_here: quotedMessage?.mentioned_here,\n        mentioned_roles: quotedMessage?.mentioned_roles,\n        mentioned_users: quotedMessage?.mentioned_users,\n      }),\n    [\n      quotedMessage?.mentioned_channel,\n      quotedMessage?.mentioned_groups,\n      quotedMessage?.mentioned_here,\n      quotedMessage?.mentioned_roles,\n      quotedMessage?.mentioned_users,\n    ],\n  );\n\n  const { AttachmentIcon, PreviewImage, renderedText } = useMemo(() => {\n    if (!quotedMessage) return { AttachmentIcon: NullAttachmentIcon, renderedText: null };\n\n    const {\n      groupedAttachments,\n      Icon: AttachmentIcon,\n      PreviewImage,\n      previewType,\n    } = getAttachmentIconWithType(quotedMessage, giphyVersionName, icons);\n\n    let renderedText: ReactNode | undefined;\n\n    if (isDeletedMessage(quotedMessage)) {\n      renderedText = t('common.messageDeleted.text', 'Message deleted');\n    } else if (!quotedMessageText) {\n      if (previewType === 'poll') {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        renderedText = quotedMessage.poll!.name;\n      } else if (previewType === 'location') {\n        renderedText = t('common.liveLocation.text', 'Live location');\n      } else if (previewType === 'voice') {\n        {\n          const voiceRecording = groupedAttachments\n            .voiceRecordings[0] as VoiceRecordingAttachment;\n          renderedText = t(\n            'messageComposer.quotedMessagePreview.voiceMessage.label',\n            'Voice message {{ duration }}',\n            {\n              duration: displayDuration(voiceRecording?.custom?.duration),\n            },\n          );\n        }\n      } else if (previewType === 'giphy') {\n        renderedText = QUOTED_GIPHY_PREVIEW_LABEL;\n      } else if (previewType === 'link') {\n        renderedText = groupedAttachments.links[0].title;\n      } else if (previewType === 'mixed') {\n        renderedText = t('messageComposer.quotedMessagePreview.files.label', {\n          count: groupedAttachments.total,\n          defaultValue_one: '{{ count }} file',\n          defaultValue_other: '{{ count }} files',\n        });\n      } else if (previewType === 'video') {\n        renderedText =\n          groupedAttachments.videos.length === 1\n            ? t('messageComposer.quotedMessagePreview.video.label', 'Video')\n            : t('messageComposer.quotedMessagePreview.videos.label', {\n                count: groupedAttachments.videos.length,\n                defaultValue_one: '{{ count }} video',\n                defaultValue_other: '{{ count }} videos',\n              });\n      } else if (previewType === 'file') {\n        renderedText = groupedAttachments.documents[0].title;\n      } else if (previewType === 'image') {\n        renderedText =\n          groupedAttachments.images.length === 1\n            ? t('messageComposer.quotedMessagePreview.photo.label', 'Photo')\n            : t('messageComposer.quotedMessagePreview.photos.label', {\n                count: groupedAttachments.images.length,\n                defaultValue_one: '{{ count }} photo',\n                defaultValue_other: '{{ count }} photos',\n              });\n      }\n    } else if (renderText) {\n      renderedText = renderText(quotedMessageText, quotedMessage?.mentioned_users, {\n        messageMentionEntities: quotedMessageMentionEntities,\n      });\n    } else {\n      renderedText = quotedMessageText;\n    }\n\n    return {\n      AttachmentIcon,\n      PreviewImage,\n      renderedText,\n    };\n  }, [\n    giphyVersionName,\n    icons,\n    quotedMessage,\n    quotedMessageMentionEntities,\n    quotedMessageText,\n    renderText,\n    t,\n  ]);\n\n  const isOwnMessage = client.user?.id === quotedMessage?.user?.id;\n  const isInteractive = !!onClick;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!onClick || (event.key !== 'Enter' && event.key !== ' ')) return;\n\n    event.preventDefault();\n    onClick(event as unknown as Parameters<NonNullable<typeof onClick>>[0]);\n  };\n\n  if (!renderedText && !AttachmentIcon && !PreviewImage) return null;\n\n  const authorName = getQuotedMessageAuthor?.(quotedMessage) ?? quotedMessage.user?.name;\n  return (\n    <div\n      aria-label={\n        isInteractive\n          ? t(\n              'messageComposer.quotedMessagePreview.jumpQuotedMessage.ariaLabel',\n              'Jump to quoted message',\n            )\n          : undefined\n      }\n      className={clsx('str-chat__quoted-message-preview', className, {\n        'str-chat__quoted-message-preview--own': isOwnMessage,\n      })}\n      data-testid='quoted-message-preview'\n      onClick={onClick}\n      onKeyDown={isInteractive ? handleKeyDown : undefined}\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n    >\n      <QuotedMessageIndicator isOwnMessage={isOwnMessage} />\n      <div className='str-chat__quoted-message-preview__content'>\n        <div className='str-chat__quoted-message-preview__author'>\n          {authorLabel ??\n            (isOwnMessage\n              ? t('common.you.label', 'You')\n              : authorName\n                ? t(\n                    'messageComposer.quotedMessagePreview.reply.withAuthorName.text',\n                    'Reply to {{ authorName }}',\n                    { authorName },\n                  )\n                : t('messageComposer.quotedMessagePreview.reply.text', 'Reply'))}\n        </div>\n\n        <div\n          className='str-chat__quoted-message-preview__message'\n          data-testid='quoted-message-text'\n        >\n          <AttachmentIcon />\n          <div className='str-chat__quoted-message-preview__message-text'>\n            {renderedText}\n          </div>\n        </div>\n      </div>\n      {PreviewImage && (\n        <div className='str-chat__quoted-message-preview__image'>{PreviewImage}</div>\n      )}\n\n      {onRemove && (\n        <RemoveAttachmentPreviewButton\n          aria-label={t(\n            'messageComposer.quotedMessagePreview.cancelReply.ariaLabel',\n            'Cancel Reply',\n          )}\n          data-testid='quoted-message-preview-dismiss-btn'\n          onClick={onRemove}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/MessageComposer/RemoveAttachmentPreviewButton.mjs

@@ -0,0 +1,25 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx
+/** Upload states in which the request is still running, so removing also cancels it. */
+var IN_FLIGHT_UPLOAD_STATES = ["pending", "uploading"];
+var RemoveAttachmentPreviewButton = ({ className, uploadState, ...props }) => {
+	const { IconXmarkSmall } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": !!uploadState && IN_FLIGHT_UPLOAD_STATES.includes(uploadState) ? t("messageComposer.removeAttachmentPreviewButton.cancelUpload.ariaLabel", "Cancel upload") : t("messageComposer.removeAttachmentPreview.removeAttachment.ariaLabel", "Remove attachment"),
+		circular: true,
+		className: clsx("str-chat__attachment-preview__remove-button", className),
+		"data-testid": "preview-item-delete-button",
+		...props,
+		children: /* @__PURE__ */ jsx(IconXmarkSmall, {})
+	});
+};
+//#endregion
+export { RemoveAttachmentPreviewButton };
+
+//# sourceMappingURL=RemoveAttachmentPreviewButton.mjs.map

package/dist/es/components/MessageComposer/RemoveAttachmentPreviewButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveAttachmentPreviewButton.mjs","names":[],"sources":["../../../../src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Button } from '../Button';\nimport React, { type ComponentProps } from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport type { AttachmentLoadingState } from 'stream-chat';\n\n/** Upload states in which the request is still running, so removing also cancels it. */\nconst IN_FLIGHT_UPLOAD_STATES: AttachmentLoadingState[] = ['pending', 'uploading'];\n\nexport const RemoveAttachmentPreviewButton = ({\n  className,\n  uploadState,\n  ...props\n}: ComponentProps<'button'> & {\n  uploadState?: AttachmentLoadingState;\n}) => {\n  const { IconXmarkSmall } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  // Deliberately still actionable mid-upload: `removeAttachments` forwards to\n  // `UploadManager.deleteUploadRecord`, which aborts the request through its `AbortController`,\n  // and the `uploadState: 'failed'` update that lands afterwards is a no-op because\n  // `updateAttachment` ignores an id that is no longer in state.\n  //\n  // The button was disabled in this state from 2024 (#2339) until abortable uploads existed;\n  // no comment ever recorded the original reason.\n  const isInFlight = !!uploadState && IN_FLIGHT_UPLOAD_STATES.includes(uploadState);\n\n  return (\n    <Button\n      aria-label={\n        isInFlight\n          ? t(\n              'messageComposer.removeAttachmentPreviewButton.cancelUpload.ariaLabel',\n              'Cancel upload',\n            )\n          : t(\n              'messageComposer.removeAttachmentPreview.removeAttachment.ariaLabel',\n              'Remove attachment',\n            )\n      }\n      circular\n      className={clsx('str-chat__attachment-preview__remove-button', className)}\n      data-testid='preview-item-delete-button'\n      {...props}\n    >\n      <IconXmarkSmall />\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,IAAM,0BAAoD,CAAC,WAAW,WAAW;AAEjF,IAAa,iCAAiC,EAC5C,WACA,aACA,GAAG,YAGC;CACJ,MAAM,EAAE,mBAAmB,yBAAyB;CACpD,MAAM,EAAE,MAAM,sBAAsB;CAWpC,OACE,oBAAC,QAAD;EACE,cAJe,CAAC,CAAC,eAAe,wBAAwB,SAAS,WAAW,IAMtE,EACE,wEACA,eACF,IACA,EACE,sEACA,mBACF;EAEN,UAAA;EACA,WAAW,KAAK,+CAA+C,SAAS;EACxE,eAAY;EACZ,GAAI;YAEJ,oBAAC,gBAAD,CAAiB,CAAA;CACX,CAAA;AAEZ"}

package/dist/es/components/MessageComposer/SendButton.mjs

@@ -0,0 +1,29 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { useMessageComposerHasSendableData } from "./hooks/useMessageComposerHasSendableData.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageComposer/SendButton.tsx
+var SendButton = ({ children, sendMessage, ...rest }) => {
+	const { IconSend } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const hasSendableData = useMessageComposerHasSendableData();
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "solid",
+		"aria-label": t("messageComposer.sendButton.send.ariaLabel", "Send"),
+		circular: true,
+		className: "str-chat__send-button",
+		"data-testid": "send-button",
+		disabled: !hasSendableData,
+		onClick: sendMessage,
+		size: "sm",
+		variant: "primary",
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(IconSend, {})
+	});
+};
+//#endregion
+export { SendButton };
+
+//# sourceMappingURL=SendButton.mjs.map

package/dist/es/components/MessageComposer/SendButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendButton.mjs","names":[],"sources":["../../../../src/components/MessageComposer/SendButton.tsx"],"sourcesContent":["import React from 'react';\nimport { useMessageComposerHasSendableData } from './hooks';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport { Button } from '../Button';\n\nexport type SendButtonProps = {\n  sendMessage: (event: React.BaseSyntheticEvent) => void;\n} & React.ComponentProps<'button'>;\n\nexport const SendButton = ({ children, sendMessage, ...rest }: SendButtonProps) => {\n  const { IconSend } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const hasSendableData = useMessageComposerHasSendableData();\n  return (\n    <Button\n      appearance='solid'\n      aria-label={t('messageComposer.sendButton.send.ariaLabel', 'Send')}\n      circular\n      className='str-chat__send-button'\n      data-testid='send-button'\n      disabled={!hasSendableData}\n      onClick={sendMessage}\n      size='sm'\n      variant='primary'\n      {...rest}\n    >\n      {children ?? <IconSend />}\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAa,cAAc,EAAE,UAAU,aAAa,GAAG,WAA4B;CACjF,MAAM,EAAE,aAAa,yBAAyB;CAC9C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,kBAAkB,kCAAkC;CAC1D,OACE,oBAAC,QAAD;EACE,YAAW;EACX,cAAY,EAAE,6CAA6C,MAAM;EACjE,UAAA;EACA,WAAU;EACV,eAAY;EACZ,UAAU,CAAC;EACX,SAAS;EACT,MAAK;EACL,SAAQ;EACR,GAAI;YAEH,YAAY,oBAAC,UAAD,CAAW,CAAA;CAClB,CAAA;AAEZ"}

package/dist/es/components/MessageComposer/SendToChannelCheckbox.mjs

@@ -0,0 +1,51 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageComposer/SendToChannelCheckbox.tsx
+var stateSelector = (state) => ({ showReplyInChannel: state.showReplyInChannel });
+var SendToChannelCheckbox = () => {
+	const { IconCheckmark } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const messageComposer = useMessageComposerController();
+	const { showReplyInChannel } = useStateStore(messageComposer.state, stateSelector);
+	if (messageComposer.editedMessage || !messageComposer.threadId) return null;
+	const labelText = Object.keys(messageComposer.channel.state.members).length === 2 ? t("messageComposer.sendChannelCheckbox.alsoSendDirectMessage.label", "Also send as a direct message") : t("messageComposer.sendChannelCheckbox.alsoSendChannel.label", "Also send in channel");
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__send-to-channel-checkbox__container", { "str-chat__send-to-channel-checkbox__container--checked": showReplyInChannel }),
+		"data-testid": "send-to-channel-checkbox",
+		children: /* @__PURE__ */ jsxs("label", {
+			className: "str-chat__send-to-channel-checkbox__field",
+			htmlFor: "send-to-channel-checkbox",
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					"aria-checked": showReplyInChannel,
+					checked: showReplyInChannel,
+					className: "str-chat__send-to-channel-checkbox__input",
+					id: "send-to-channel-checkbox",
+					onChange: () => messageComposer.toggleShowReplyInChannel(),
+					type: "checkbox"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "str-chat__send-to-channel-checkbox__visual",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "str-chat__send-to-channel-checkbox__checkmark",
+						children: /* @__PURE__ */ jsx(IconCheckmark, {})
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "str-chat__send-to-channel-checkbox__label",
+					children: labelText
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { SendToChannelCheckbox };
+
+//# sourceMappingURL=SendToChannelCheckbox.mjs.map

package/dist/es/components/MessageComposer/SendToChannelCheckbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendToChannelCheckbox.mjs","names":[],"sources":["../../../../src/components/MessageComposer/SendToChannelCheckbox.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport { useMessageComposerController } from './hooks';\nimport type { MessageComposerState } from 'stream-chat';\nimport { useStateStore } from '../../store';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nconst stateSelector = (state: MessageComposerState) => ({\n  showReplyInChannel: state.showReplyInChannel,\n});\n\nexport const SendToChannelCheckbox = () => {\n  const { IconCheckmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const messageComposer = useMessageComposerController();\n  const { showReplyInChannel } = useStateStore(messageComposer.state, stateSelector);\n\n  if (messageComposer.editedMessage || !messageComposer.threadId) return null;\n\n  const labelText =\n    Object.keys(messageComposer.channel.state.members).length === 2\n      ? t(\n          'messageComposer.sendChannelCheckbox.alsoSendDirectMessage.label',\n          'Also send as a direct message',\n        )\n      : t(\n          'messageComposer.sendChannelCheckbox.alsoSendChannel.label',\n          'Also send in channel',\n        );\n\n  return (\n    <div\n      className={clsx('str-chat__send-to-channel-checkbox__container', {\n        'str-chat__send-to-channel-checkbox__container--checked': showReplyInChannel,\n      })}\n      data-testid='send-to-channel-checkbox'\n    >\n      <label\n        className='str-chat__send-to-channel-checkbox__field'\n        htmlFor='send-to-channel-checkbox'\n      >\n        <input\n          aria-checked={showReplyInChannel}\n          checked={showReplyInChannel}\n          className='str-chat__send-to-channel-checkbox__input'\n          id='send-to-channel-checkbox'\n          onChange={() => messageComposer.toggleShowReplyInChannel()}\n          type='checkbox'\n        />\n        <span aria-hidden className='str-chat__send-to-channel-checkbox__visual'>\n          <span className='str-chat__send-to-channel-checkbox__checkmark'>\n            <IconCheckmark />\n          </span>\n        </span>\n        <span className='str-chat__send-to-channel-checkbox__label'>{labelText}</span>\n      </label>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,IAAM,iBAAiB,WAAiC,EACtD,oBAAoB,MAAM,mBAC5B;AAEA,IAAa,8BAA8B;CACzC,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,uBAAuB,cAAc,gBAAgB,OAAO,aAAa;CAEjF,IAAI,gBAAgB,iBAAiB,CAAC,gBAAgB,UAAU,OAAO;CAEvE,MAAM,YACJ,OAAO,KAAK,gBAAgB,QAAQ,MAAM,OAAO,CAAC,CAAC,WAAW,IAC1D,EACE,mEACA,+BACF,IACA,EACE,6DACA,sBACF;CAEN,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,iDAAiD,EAC/D,0DAA0D,mBAC5D,CAAC;EACD,eAAY;YAEZ,qBAAC,SAAD;GACE,WAAU;GACV,SAAQ;aAFV;IAIE,oBAAC,SAAD;KACE,gBAAc;KACd,SAAS;KACT,WAAU;KACV,IAAG;KACH,gBAAgB,gBAAgB,yBAAyB;KACzD,MAAK;IACN,CAAA;IACD,oBAAC,QAAD;KAAM,eAAA;KAAY,WAAU;eAC1B,oBAAC,QAAD;MAAM,WAAU;gBACd,oBAAC,eAAD,CAAgB,CAAA;KACZ,CAAA;IACF,CAAA;IACN,oBAAC,QAAD;KAAM,WAAU;eAA6C;IAAgB,CAAA;GACxE;;CACJ,CAAA;AAET"}

package/dist/es/components/MessageComposer/StopAIGenerationButton.mjs

@@ -0,0 +1,18 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageComposer/StopAIGenerationButton.tsx
+var StopAIGenerationButton = ({ onClick, ...restProps }) => {
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": t("messageComposer.stopAiGeneration.stopAiGeneration.ariaLabel", "Stop AI Generation"),
+		className: "str-chat__stop-ai-generation-button",
+		"data-testid": "stop-ai-generation-button",
+		onClick,
+		...restProps
+	});
+};
+//#endregion
+export { StopAIGenerationButton };
+
+//# sourceMappingURL=StopAIGenerationButton.mjs.map

package/dist/es/components/MessageComposer/StopAIGenerationButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StopAIGenerationButton.mjs","names":[],"sources":["../../../../src/components/MessageComposer/StopAIGenerationButton.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslationContext } from '../../context';\n\nexport type StopAIGenerationButtonProps = React.ComponentProps<'button'>;\n\nexport const StopAIGenerationButton = ({\n  onClick,\n  ...restProps\n}: StopAIGenerationButtonProps) => {\n  const { t } = useTranslationContext();\n  return (\n    <button\n      aria-label={t(\n        'messageComposer.stopAiGeneration.stopAiGeneration.ariaLabel',\n        'Stop AI Generation',\n      )}\n      className='str-chat__stop-ai-generation-button'\n      data-testid='stop-ai-generation-button'\n      onClick={onClick}\n      {...restProps}\n    />\n  );\n};\n"],"mappings":";;;;AAKA,IAAa,0BAA0B,EACrC,SACA,GAAG,gBAC8B;CACjC,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,UAAD;EACE,cAAY,EACV,+DACA,oBACF;EACA,WAAU;EACV,eAAY;EACH;EACT,GAAI;CACL,CAAA;AAEL"}

package/dist/es/components/MessageComposer/WithDragAndDropUpload.mjs

@@ -0,0 +1,105 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useMessageComposerController } from "./hooks/useMessageComposerController.mjs";
+import { useAttachmentManagerState } from "./hooks/useAttachmentManagerState.mjs";
+import { useIsWithinMessageComposerContext } from "../../context/MessageComposerContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useIsCooldownActive } from "./hooks/useIsCooldownActive.mjs";
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useDropzone } from "react-dropzone";
+//#region src/components/MessageComposer/WithDragAndDropUpload.tsx
+var DragAndDropUploadContext = React.createContext({ subscribeToDrop: null });
+var useDragAndDropUploadContext = () => useContext(DragAndDropUploadContext);
+/**
+* @private This hook should be used only once directly in the `MessageComposerProvider` to
+* register `uploadNewFiles` functions of the rendered message composers. Each `MessageComposer`
+* will then be notified when the drop event occurs from within the `WithDragAndDropUpload`
+* component.
+*/
+var useRegisterDropHandlers = () => {
+	const { subscribeToDrop } = useDragAndDropUploadContext();
+	const messageComposer = useMessageComposerController();
+	useEffect(() => {
+		return subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);
+	}, [subscribeToDrop, messageComposer]);
+};
+var attachmentManagerConfigStateSelector = (state) => ({
+	acceptedFiles: state.attachments.acceptedFiles,
+	multipleUploads: state.attachments.maxNumberOfFilesPerMessage > 1
+});
+/**
+* Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.
+*
+* @example
+* ```tsx
+* <Channel>
+*  <WithDragAndDropUpload component="section" className="message-list-dnd-wrapper">
+*    <MessageList />
+*    <MessageComposer />
+*  </WithDragAndDropUpload>
+* <Channel>
+* ```
+*/
+var WithDragAndDropUpload = ({ children, className, component: Component = "div", style }) => {
+	const dropHandlersRef = useRef(/* @__PURE__ */ new Set());
+	const dragAndDropUploadContext = useDragAndDropUploadContext();
+	const messageComposer = useMessageComposerController();
+	const { isUploadEnabled } = useAttachmentManagerState();
+	const { acceptedFiles, multipleUploads } = useStateStore(messageComposer.configState, attachmentManagerConfigStateSelector);
+	const isCooldownActive = useIsCooldownActive();
+	const isWithinMessageComposerContext = useIsWithinMessageComposerContext();
+	const accept = useMemo(() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
+		mediaTypeMap[mediaType] ??= [];
+		return mediaTypeMap;
+	}, {}), [acceptedFiles]);
+	const subscribeToDrop = useCallback((fn) => {
+		dropHandlersRef.current.add(fn);
+		return () => {
+			dropHandlersRef.current.delete(fn);
+		};
+	}, []);
+	const handleDrop = useCallback((files) => {
+		dropHandlersRef.current.forEach((fn) => fn(files));
+	}, []);
+	const { getRootProps, isDragActive, isDragReject: isDragRejected } = useDropzone({
+		accept,
+		disabled: isWithinMessageComposerContext ? !isUploadEnabled || isCooldownActive : false,
+		multiple: multipleUploads,
+		noClick: true,
+		noKeyboard: true,
+		onDrop: isWithinMessageComposerContext ? messageComposer.attachmentManager.uploadFiles : handleDrop
+	});
+	if (dragAndDropUploadContext.subscribeToDrop !== null) return /* @__PURE__ */ jsx(Component, {
+		className,
+		children
+	});
+	const rootClassName = clsx("str-chat__dropzone-root", className);
+	return /* @__PURE__ */ jsx(DragAndDropUploadContext.Provider, {
+		value: { subscribeToDrop },
+		children: /* @__PURE__ */ jsxs(Component, {
+			...getRootProps({
+				className: rootClassName,
+				style
+			}),
+			children: [isDragActive && /* @__PURE__ */ jsx("div", {
+				className: clsx("str-chat__dropzone-container", { "str-chat__dropzone-container--not-accepted": isDragRejected }),
+				role: "presentation",
+				children: /* @__PURE__ */ jsx(FileDragAndDropContent, { isDragRejected })
+			}), children]
+		})
+	});
+};
+var FileDragAndDropContent = ({ isDragRejected }) => {
+	const { IconUpload } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__dropzone-container__content",
+		children: isDragRejected ? /* @__PURE__ */ jsx("p", { children: t("messageComposer.dragDropUpload.someFilesNotAccepted.text", "Some of the files will not be accepted") }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconUpload, {}), /* @__PURE__ */ jsx("p", { children: t("messageComposer.dragDropUpload.dragFiles.text", "Drag your files here") })] })
+	});
+};
+//#endregion
+export { FileDragAndDropContent, WithDragAndDropUpload, useDragAndDropUploadContext, useRegisterDropHandlers };
+
+//# sourceMappingURL=WithDragAndDropUpload.mjs.map