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

package/dist/es/components/Message/renderText/remarkPlugins/imageToLink.mjs

@@ -0,0 +1,33 @@
+import { SKIP, visit } from "unist-util-visit";
+//#region src/components/Message/renderText/remarkPlugins/imageToLink.ts
+var text = (value) => ({
+	type: "text",
+	value
+});
+/**
+* Converts image Markdown links (![Minion](https://octodex.github.com/images/minion.png))
+* to HTML <a href={url}>{url | title | alt}</a>
+*
+* By default, the anchor text content is the image url so that image preview can be generated / enriched on the server.
+* @param getTextLabelFrom
+*/
+function imageToLink({ getTextLabelFrom = "url" } = {}) {
+	return (tree) => {
+		const visitor = (node, index, parent) => {
+			if (parent == null || index == null) return;
+			const link = {
+				children: [text(node[getTextLabelFrom] ?? node.url)],
+				title: node.title ?? node.alt ?? node.url,
+				type: "link",
+				url: node.url
+			};
+			parent.children.splice(index, 1, link);
+			return [SKIP, index + 1];
+		};
+		visit(tree, "image", visitor);
+	};
+}
+//#endregion
+export { imageToLink };
+
+//# sourceMappingURL=imageToLink.mjs.map

package/dist/es/components/Message/renderText/remarkPlugins/imageToLink.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageToLink.mjs","names":[],"sources":["../../../../../../src/components/Message/renderText/remarkPlugins/imageToLink.ts"],"sourcesContent":["import { SKIP, visit, type VisitorResult } from 'unist-util-visit';\nimport type { Image, Link, Parent, Text } from 'mdast';\nimport type { Node } from 'unist';\n\ntype ImgVisitor = (\n  node: Image,\n  index: number | null,\n  parent: Parent | null,\n) => VisitorResult;\n\nexport type ImageToLinkPluginOptions = {\n  getTextLabelFrom?: 'alt' | 'title' | 'url';\n};\n\nconst text = (value: string): Text => ({ type: 'text', value });\n\n/**\n * Converts image Markdown links (![Minion](https://octodex.github.com/images/minion.png))\n * to HTML <a href={url}>{url | title | alt}</a>\n *\n * By default, the anchor text content is the image url so that image preview can be generated / enriched on the server.\n * @param getTextLabelFrom\n */\nexport function imageToLink({ getTextLabelFrom = 'url' }: ImageToLinkPluginOptions = {}) {\n  return (tree: Node) => {\n    const visitor: ImgVisitor = (node, index, parent) => {\n      if (parent == null || index == null) return;\n\n      const label = node[getTextLabelFrom] ?? node.url; // node.alt || node.title || node.url;\n      const link: Link = {\n        children: [text(label)],\n        title: node.title ?? node.alt ?? node.url,\n        type: 'link',\n        url: node.url,\n      };\n\n      parent.children.splice(index, 1, link);\n      return [SKIP, index + 1] as const;\n    };\n\n    visit(tree, 'image', visitor);\n  };\n}\n"],"mappings":";;AAcA,IAAM,QAAQ,WAAyB;CAAE,MAAM;CAAQ;AAAM;;;;;;;;AAS7D,SAAgB,YAAY,EAAE,mBAAmB,UAAoC,CAAC,GAAG;CACvF,QAAQ,SAAe;EACrB,MAAM,WAAuB,MAAM,OAAO,WAAW;GACnD,IAAI,UAAU,QAAQ,SAAS,MAAM;GAGrC,MAAM,OAAa;IACjB,UAAU,CAAC,KAFC,KAAK,qBAAqB,KAAK,GAEtB,CAAC;IACtB,OAAO,KAAK,SAAS,KAAK,OAAO,KAAK;IACtC,MAAM;IACN,KAAK,KAAK;GACZ;GAEA,OAAO,SAAS,OAAO,OAAO,GAAG,IAAI;GACrC,OAAO,CAAC,MAAM,QAAQ,CAAC;EACzB;EAEA,MAAM,MAAM,SAAS,OAAO;CAC9B;AACF"}

package/dist/es/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.mjs

@@ -0,0 +1,44 @@
+import { visit } from "unist-util-visit";
+//#region src/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.ts
+/** Type guard: does the node have mdast children? */
+function isParentWithChildren(node) {
+	const maybe = node;
+	return Array.isArray(maybe.children);
+}
+/** Build a single <br> by mapping a standard mdast node via data.hName */
+function brNode() {
+	return {
+		data: { hName: "br" },
+		type: "thematicBreak"
+	};
+}
+/**
+* Inserts runs of <br> between sibling block nodes to preserve the exact
+* number of *blank source lines* between them. No paragraph wrappers are added.
+*
+* Works because `mdast-util-to-hast` respects `data.hName`, turning our
+* `thematicBreak` into `<br>`. Multiple blank lines -> multiple `<br>` siblings.
+*/
+var keepLineBreaksPlugin = () => (tree) => {
+	visit(tree, isParentWithChildren, (parent) => {
+		const children = parent.children;
+		if (children.length < 2) return;
+		const out = [];
+		for (let i = 0; i < children.length; i++) {
+			const curr = children[i];
+			out.push(curr);
+			if (i === children.length - 1) break;
+			const next = children[i + 1];
+			const currEndLine = curr.position && curr.position.end ? curr.position.end.line : void 0;
+			const nextStartLine = next.position && next.position.start ? next.position.start.line : void 0;
+			if (typeof currEndLine !== "number" || typeof nextStartLine !== "number") continue;
+			const extraBlankLines = Math.max(0, nextStartLine - currEndLine - 1);
+			if (extraBlankLines > 0) for (let k = 0; k < extraBlankLines; k++) out.push(brNode());
+		}
+		parent.children = out;
+	});
+};
+//#endregion
+export { keepLineBreaksPlugin };
+
+//# sourceMappingURL=keepLineBreaksPlugin.mjs.map

package/dist/es/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keepLineBreaksPlugin.mjs","names":[],"sources":["../../../../../../src/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.ts"],"sourcesContent":["import type { Plugin } from 'unified';\nimport { visit } from 'unist-util-visit';\nimport type { Node, Parent as UnistParent } from 'unist';\nimport type { Root, RootContent, ThematicBreak } from 'mdast';\n\n/** Type guard: does the node have mdast children? */\nfunction isParentWithChildren(\n  node: Node,\n): node is UnistParent & { children: RootContent[] } {\n  const maybe = node as unknown as { children?: unknown };\n  return Array.isArray(maybe.children);\n}\n\n/** Build a single <br> by mapping a standard mdast node via data.hName */\nfunction brNode(): ThematicBreak {\n  return { data: { hName: 'br' }, type: 'thematicBreak' };\n}\n\n/**\n * Inserts runs of <br> between sibling block nodes to preserve the exact\n * number of *blank source lines* between them. No paragraph wrappers are added.\n *\n * Works because `mdast-util-to-hast` respects `data.hName`, turning our\n * `thematicBreak` into `<br>`. Multiple blank lines -> multiple `<br>` siblings.\n */\nexport const keepLineBreaksPlugin: Plugin<[], Root> = () => (tree) => {\n  visit(\n    tree as unknown as UnistParent, // visit needs a Unist parent-like root\n    isParentWithChildren, // limit to parents with children\n    (parent) => {\n      const children = parent.children as RootContent[];\n      if (children.length < 2) return;\n\n      const out: RootContent[] = [];\n\n      for (let i = 0; i < children.length; i++) {\n        const curr = children[i];\n        out.push(curr);\n\n        if (i === children.length - 1) break;\n\n        const next = children[i + 1];\n\n        const currEndLine =\n          curr.position && curr.position.end ? curr.position.end.line : undefined;\n        const nextStartLine =\n          next.position && next.position.start ? next.position.start.line : undefined;\n\n        if (typeof currEndLine !== 'number' || typeof nextStartLine !== 'number') {\n          continue;\n        }\n\n        // Markdown already separates blocks by at least one visual gap.\n        // We add back only the *extra* blank lines from the source.\n        const extraBlankLines = Math.max(0, nextStartLine - currEndLine - 1);\n        if (extraBlankLines > 0) {\n          for (let k = 0; k < extraBlankLines; k++) {\n            out.push(brNode());\n          }\n        }\n      }\n\n      parent.children = out;\n    },\n  );\n};\n"],"mappings":";;;AAMA,SAAS,qBACP,MACmD;CACnD,MAAM,QAAQ;CACd,OAAO,MAAM,QAAQ,MAAM,QAAQ;AACrC;;AAGA,SAAS,SAAwB;CAC/B,OAAO;EAAE,MAAM,EAAE,OAAO,KAAK;EAAG,MAAM;CAAgB;AACxD;;;;;;;;AASA,IAAa,8BAAgD,SAAS;CACpE,MACE,MACA,uBACC,WAAW;EACV,MAAM,WAAW,OAAO;EACxB,IAAI,SAAS,SAAS,GAAG;EAEzB,MAAM,MAAqB,CAAC;EAE5B,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;GACxC,MAAM,OAAO,SAAS;GACtB,IAAI,KAAK,IAAI;GAEb,IAAI,MAAM,SAAS,SAAS,GAAG;GAE/B,MAAM,OAAO,SAAS,IAAI;GAE1B,MAAM,cACJ,KAAK,YAAY,KAAK,SAAS,MAAM,KAAK,SAAS,IAAI,OAAO,KAAA;GAChE,MAAM,gBACJ,KAAK,YAAY,KAAK,SAAS,QAAQ,KAAK,SAAS,MAAM,OAAO,KAAA;GAEpE,IAAI,OAAO,gBAAgB,YAAY,OAAO,kBAAkB,UAC9D;GAKF,MAAM,kBAAkB,KAAK,IAAI,GAAG,gBAAgB,cAAc,CAAC;GACnE,IAAI,kBAAkB,GACpB,KAAK,IAAI,IAAI,GAAG,IAAI,iBAAiB,KACnC,IAAI,KAAK,OAAO,CAAC;EAGvB;EAEA,OAAO,WAAW;CACpB,CACF;AACF"}

package/dist/es/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.mjs

@@ -0,0 +1,68 @@
+import { SKIP, visit } from "unist-util-visit";
+//#region src/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.ts
+/**
+* \S → first char must be non-whitespace
+* (?:...)?→ optional middle+closing when length > 1
+* [\s\S]*?→ anything (including newlines), lazy
+* final \S→ last char non-whitespace (only required when there’s more than 1)
+*
+* Matches:
+* ++a++
+* Does not match:
+* ++++
+* ++ ++
+*/
+var INS_REGEX = /\+\+(\S(?:[\s\S]*?\S)?)\+\+/g;
+var IGNORE_NODE_TYPES = /* @__PURE__ */ new Set([
+	"code",
+	"inlineCode",
+	"link",
+	"linkReference",
+	"definition",
+	"math",
+	"inlineMath"
+]);
+/**
+* Converts MD "++Some text++" to inserted text element rendered in HTML as <ins>Some text</ins>
+* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins
+*/
+var plusPlusToEmphasis = () => {
+	const visitor = (node, index, parent) => {
+		if (IGNORE_NODE_TYPES.has(node.type)) return SKIP;
+		if (node.type !== "text" || parent == null || typeof index !== "number") return;
+		const value = node.value;
+		INS_REGEX.lastIndex = 0;
+		let match;
+		let last = 0;
+		const out = [];
+		while (match = INS_REGEX.exec(value)) {
+			const [full, inner] = match;
+			const start = match.index;
+			if (start > last) out.push({
+				type: "text",
+				value: value.slice(last, start)
+			});
+			out.push({
+				children: [{
+					type: "text",
+					value: inner
+				}],
+				data: { hName: "ins" },
+				type: "emphasis"
+			});
+			last = start + full.length;
+		}
+		if (out.length === 0) return;
+		if (last < value.length) out.push({
+			type: "text",
+			value: value.slice(last)
+		});
+		parent.children.splice(index, 1, ...out);
+		return [SKIP, index + out.length];
+	};
+	return (tree) => visit(tree, visitor);
+};
+//#endregion
+export { plusPlusToEmphasis };
+
+//# sourceMappingURL=plusPlusToEmphasis.mjs.map

package/dist/es/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"plusPlusToEmphasis.mjs","names":[],"sources":["../../../../../../src/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.ts"],"sourcesContent":["// remark-plusplus-ins.ts\nimport type { Plugin } from 'unified';\nimport { SKIP, visit } from 'unist-util-visit';\nimport type { Visitor } from 'unist-util-visit';\nimport type { Parent, PhrasingContent, Text } from 'mdast';\n\n/**\n * \\S → first char must be non-whitespace\n * (?:...)?→ optional middle+closing when length > 1\n * [\\s\\S]*?→ anything (including newlines), lazy\n * final \\S→ last char non-whitespace (only required when there’s more than 1)\n *\n * Matches:\n * ++a++\n * Does not match:\n * ++++\n * ++ ++\n */\nconst INS_REGEX = /\\+\\+(\\S(?:[\\s\\S]*?\\S)?)\\+\\+/g;\nconst IGNORE_NODE_TYPES = new Set([\n  'code',\n  'inlineCode',\n  'link',\n  'linkReference',\n  'definition',\n  'math',\n  'inlineMath',\n]);\n\n/**\n * Converts MD \"++Some text++\" to inserted text element rendered in HTML as <ins>Some text</ins>\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins\n */\nexport const plusPlusToEmphasis: Plugin<[]> = () => {\n  const visitor: Visitor = (node, index, parent) => {\n    // 1) Don’t traverse inside ignored nodes\n    if (IGNORE_NODE_TYPES.has(node.type)) return SKIP;\n\n    // 2) Only transform text nodes with a valid parent + index\n    if (node.type !== 'text' || parent == null || typeof index !== 'number') return;\n\n    const value = (node as Text).value;\n\n    // Reset lastIndex to 0 per node so each node is scanned from the beginning\n    INS_REGEX.lastIndex = 0;\n\n    let match: RegExpExecArray | null;\n    let last = 0;\n    const out: PhrasingContent[] = [];\n\n    while ((match = INS_REGEX.exec(value))) {\n      const [full, inner] = match;\n      const start = match.index;\n\n      if (start > last) out.push({ type: 'text', value: value.slice(last, start) });\n\n      // Render as <ins>…</ins> (remark-rehype respects data.hName)\n      out.push({\n        children: [{ type: 'text', value: inner }],\n        data: { hName: 'ins' },\n        type: 'emphasis',\n      });\n\n      last = start + full.length;\n    }\n\n    if (out.length === 0) return; // nothing to change\n    if (last < value.length) out.push({ type: 'text', value: value.slice(last) });\n\n    (parent as Parent).children.splice(index, 1, ...out);\n\n    // Skip re-visiting the replaced range; continue after inserted nodes\n    return [SKIP, index + out.length];\n  };\n\n  return (tree) => visit(tree, visitor);\n};\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAM,YAAY;AAClB,IAAM,oCAAoB,IAAI,IAAI;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;;;;AAMD,IAAa,2BAAuC;CAClD,MAAM,WAAoB,MAAM,OAAO,WAAW;EAEhD,IAAI,kBAAkB,IAAI,KAAK,IAAI,GAAG,OAAO;EAG7C,IAAI,KAAK,SAAS,UAAU,UAAU,QAAQ,OAAO,UAAU,UAAU;EAEzE,MAAM,QAAS,KAAc;EAG7B,UAAU,YAAY;EAEtB,IAAI;EACJ,IAAI,OAAO;EACX,MAAM,MAAyB,CAAC;EAEhC,OAAQ,QAAQ,UAAU,KAAK,KAAK,GAAI;GACtC,MAAM,CAAC,MAAM,SAAS;GACtB,MAAM,QAAQ,MAAM;GAEpB,IAAI,QAAQ,MAAM,IAAI,KAAK;IAAE,MAAM;IAAQ,OAAO,MAAM,MAAM,MAAM,KAAK;GAAE,CAAC;GAG5E,IAAI,KAAK;IACP,UAAU,CAAC;KAAE,MAAM;KAAQ,OAAO;IAAM,CAAC;IACzC,MAAM,EAAE,OAAO,MAAM;IACrB,MAAM;GACR,CAAC;GAED,OAAO,QAAQ,KAAK;EACtB;EAEA,IAAI,IAAI,WAAW,GAAG;EACtB,IAAI,OAAO,MAAM,QAAQ,IAAI,KAAK;GAAE,MAAM;GAAQ,OAAO,MAAM,MAAM,IAAI;EAAE,CAAC;EAE5E,OAAmB,SAAS,OAAO,OAAO,GAAG,GAAG,GAAG;EAGnD,OAAO,CAAC,MAAM,QAAQ,IAAI,MAAM;CAClC;CAEA,QAAQ,SAAS,MAAM,MAAM,OAAO;AACtC"}

package/dist/es/components/Message/renderText/remarkPlugins/remarkIgnoreMarkdown.mjs

@@ -0,0 +1,19 @@
+//#region src/components/Message/renderText/remarkPlugins/remarkIgnoreMarkdown.ts
+/**
+* Replace the parsed Markdown tree with a single paragraph containing the
+* original source as a plain text node. No Markdown formatting is interpreted.
+* React will escape it.
+*/
+var remarkIgnoreMarkdown = () => (tree, file) => {
+	tree.children = [{
+		children: [{
+			type: "text",
+			value: String(file.value ?? "")
+		}],
+		type: "paragraph"
+	}];
+};
+//#endregion
+export { remarkIgnoreMarkdown };
+
+//# sourceMappingURL=remarkIgnoreMarkdown.mjs.map

package/dist/es/components/Message/renderText/remarkPlugins/remarkIgnoreMarkdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"remarkIgnoreMarkdown.mjs","names":[],"sources":["../../../../../../src/components/Message/renderText/remarkPlugins/remarkIgnoreMarkdown.ts"],"sourcesContent":["import type { Plugin } from 'unified';\nimport type { Paragraph, Root, Text } from 'mdast';\n\n/**\n * Replace the parsed Markdown tree with a single paragraph containing the\n * original source as a plain text node. No Markdown formatting is interpreted.\n * React will escape it.\n */\nexport const remarkIgnoreMarkdown: Plugin<[], Root> = () => (tree, file) => {\n  const source = String(file.value ?? '');\n\n  const text: Text = { type: 'text', value: source };\n  const paragraph: Paragraph = { children: [text], type: 'paragraph' };\n\n  tree.children = [paragraph];\n};\n"],"mappings":";;;;;;AAQA,IAAa,8BAAgD,MAAM,SAAS;CAM1E,KAAK,WAAW,CAAC;EAFc,UAAU,CAAC;GADrB,MAAM;GAAQ,OAFpB,OAAO,KAAK,SAAS,EAEM;EACA,CAAI;EAAG,MAAM;CAEtC,CAAS;AAC5B"}

package/dist/es/components/Message/renderText/renderText.mjs

@@ -0,0 +1,131 @@
+import { detectHttp, matchMarkdownLinks, messageCodeBlocks } from "./regex.mjs";
+import { emojiMarkdownPlugin } from "./rehypePlugins/emojiMarkdownPlugin.mjs";
+import { createMentionPluginAndDisplayTextSet, getRenderTextMentionEntities } from "./rehypePlugins/mentionsMarkdownPlugin.mjs";
+import { htmlToTextPlugin } from "./remarkPlugins/htmlToTextPlugin.mjs";
+import { imageToLink } from "./remarkPlugins/imageToLink.mjs";
+import { keepLineBreaksPlugin } from "./remarkPlugins/keepLineBreaksPlugin.mjs";
+import { plusPlusToEmphasis } from "./remarkPlugins/plusPlusToEmphasis.mjs";
+import { Anchor } from "./componentRenderers/Anchor.mjs";
+import { Emoji } from "./componentRenderers/Emoji.mjs";
+import { Mention } from "./componentRenderers/Mention.mjs";
+import { ErrorBoundary } from "../../UtilityComponents/ErrorBoundary.mjs";
+import "react";
+import { find } from "linkifyjs";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
+import remarkGfm from "remark-gfm";
+//#region src/components/Message/renderText/renderText.tsx
+var defaultAllowedTagNames = [
+	"html",
+	"text",
+	"br",
+	"p",
+	"em",
+	"strong",
+	"a",
+	"ol",
+	"ul",
+	"li",
+	"code",
+	"pre",
+	"blockquote",
+	"del",
+	"table",
+	"thead",
+	"tbody",
+	"th",
+	"tr",
+	"td",
+	"tfoot",
+	"emoji",
+	"mention",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"ins"
+];
+function formatUrlForDisplay(url) {
+	try {
+		return decodeURIComponent(url).replace(detectHttp, "");
+	} catch (e) {
+		return url;
+	}
+}
+function encodeDecode(url) {
+	try {
+		return encodeURI(decodeURIComponent(url));
+	} catch (error) {
+		return url;
+	}
+}
+var urlTransform = (uri) => uri.startsWith("app://") ? uri : defaultUrlTransform(uri);
+var getPluginsForward = (plugins) => plugins;
+var markDownRenderers = {
+	a: Anchor,
+	emoji: Emoji,
+	mention: Mention
+};
+function renderText(text, mentionedUsers, { allowedTagNames = defaultAllowedTagNames, customMarkDownRenderers, getRehypePlugins = getPluginsForward, getRemarkPlugins = getPluginsForward, messageMentionEntities } = {}) {
+	if (!text) return null;
+	if (text.trim().length === 1) return /* @__PURE__ */ jsx(Fragment$1, { children: text });
+	let newText = text;
+	const renderTextMentionEntities = messageMentionEntities ?? getRenderTextMentionEntities({ mentioned_users: mentionedUsers });
+	const { mentionDisplayTextSet, plugin: mentionsPlugin } = createMentionPluginAndDisplayTextSet(renderTextMentionEntities);
+	const markdownLinks = matchMarkdownLinks(newText);
+	const codeBlocks = messageCodeBlocks(newText);
+	const links = [...find(newText, "email"), ...find(newText, "url")];
+	for (let i = links.length - 1; i >= 0; i--) {
+		const { end, href, start, type, value } = links[i];
+		const linkIsInBlock = codeBlocks.some((block) => block?.includes(value));
+		if ((markdownLinks && markdownLinks.filter((text) => {
+			const strippedHref = href?.replace(detectHttp, "");
+			const strippedText = text?.replace(detectHttp, "");
+			if (!strippedHref || !strippedText) return false;
+			return strippedHref.includes(strippedText) || strippedText.includes(strippedHref);
+		})).length > 0 || linkIsInBlock) continue;
+		try {
+			if (type === "email") {
+				const mentionDisplayText = `@${value}`;
+				if (mentionDisplayTextSet.has(mentionDisplayText)) {
+					const isMention = newText.charAt(start - 1) === "@";
+					newText = newText.slice(0, start) + (isMention ? value : `[${value}](${encodeDecode(href)})`) + newText.slice(end);
+				}
+			} else {
+				const displayLink = type === "email" ? value : formatUrlForDisplay(href);
+				newText = newText.slice(0, start) + `[${displayLink}](${encodeDecode(href)})` + newText.slice(end);
+			}
+		} catch (e) {}
+	}
+	const remarkPlugins = [
+		htmlToTextPlugin,
+		keepLineBreaksPlugin,
+		[remarkGfm, { singleTilde: false }],
+		plusPlusToEmphasis,
+		imageToLink
+	];
+	const rehypePlugins = [emojiMarkdownPlugin];
+	if (renderTextMentionEntities.length) rehypePlugins.push(mentionsPlugin);
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
+		fallback: /* @__PURE__ */ jsx(Fragment$1, { children: text }),
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			allowedElements: allowedTagNames,
+			components: {
+				...markDownRenderers,
+				...customMarkDownRenderers
+			},
+			rehypePlugins: getRehypePlugins(rehypePlugins),
+			remarkPlugins: getRemarkPlugins(remarkPlugins),
+			skipHtml: true,
+			unwrapDisallowed: true,
+			urlTransform,
+			children: newText
+		})
+	});
+}
+//#endregion
+export { defaultAllowedTagNames, markDownRenderers, renderText };
+
+//# sourceMappingURL=renderText.mjs.map

package/dist/es/components/Message/renderText/renderText.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderText.mjs","names":[],"sources":["../../../../../src/components/Message/renderText/renderText.tsx"],"sourcesContent":["import React from 'react';\nimport ReactMarkdown, { defaultUrlTransform } from 'react-markdown';\nimport { find } from 'linkifyjs';\nimport remarkGfm from 'remark-gfm';\nimport type { ComponentType, JSX, ReactNode } from 'react';\nimport type { Options } from 'react-markdown';\nimport type { UserResponse } from 'stream-chat';\nimport type { PluggableList } from 'unified'; // A sub-dependency of react-markdown. The type is not declared or re-exported from anywhere else\n\nimport { Anchor, Emoji, Mention } from './componentRenderers';\nimport { detectHttp, matchMarkdownLinks, messageCodeBlocks } from './regex';\nimport {\n  createMentionPluginAndDisplayTextSet,\n  emojiMarkdownPlugin,\n  getRenderTextMentionEntities,\n} from './rehypePlugins';\nimport {\n  htmlToTextPlugin,\n  imageToLink,\n  keepLineBreaksPlugin,\n  plusPlusToEmphasis,\n} from './remarkPlugins';\nimport { ErrorBoundary } from '../../UtilityComponents';\nimport type { MentionProps } from './componentRenderers/Mention';\nimport type { RenderTextMentionEntity } from './rehypePlugins';\n\nexport type RenderTextPluginConfigurator = (\n  defaultPlugins: PluggableList,\n) => PluggableList;\n\ntype IntrinsicElementTagName = keyof JSX.IntrinsicElements & string;\n\nexport const defaultAllowedTagNames: Array<\n  IntrinsicElementTagName | 'emoji' | 'mention'\n> = [\n  'html',\n  'text',\n  'br',\n  'p',\n  'em',\n  'strong',\n  'a',\n  'ol',\n  'ul',\n  'li',\n  'code',\n  'pre',\n  'blockquote',\n  'del',\n  'table',\n  'thead',\n  'tbody',\n  'th',\n  'tr',\n  'td',\n  'tfoot',\n  // custom types (tagNames)\n  'emoji',\n  'mention',\n  'h1',\n  'h2',\n  'h3',\n  'h4',\n  'h5',\n  'h6',\n  'ins',\n];\n\nfunction formatUrlForDisplay(url: string) {\n  try {\n    return decodeURIComponent(url).replace(detectHttp, '');\n  } catch (e) {\n    return url;\n  }\n}\n\nfunction encodeDecode(url: string) {\n  try {\n    return encodeURI(decodeURIComponent(url));\n  } catch (error) {\n    return url;\n  }\n}\n\nconst urlTransform = (uri: string) =>\n  uri.startsWith('app://') ? uri : defaultUrlTransform(uri);\n\nconst getPluginsForward: RenderTextPluginConfigurator = (plugins: PluggableList) =>\n  plugins;\n\nexport const markDownRenderers: RenderTextOptions['customMarkDownRenderers'] = {\n  a: Anchor,\n  emoji: Emoji,\n  mention: Mention,\n};\n\nexport type RenderTextOptions = {\n  allowedTagNames?: Array<IntrinsicElementTagName | 'emoji' | 'mention' | (string & {})>;\n  customMarkDownRenderers?: Options['components'] &\n    Partial<{\n      emoji: ComponentType;\n      mention: ComponentType<MentionProps>;\n    }>;\n  getRehypePlugins?: RenderTextPluginConfigurator;\n  getRemarkPlugins?: RenderTextPluginConfigurator;\n  /**\n   * Additive mention metadata for rendered message text.\n   *\n   * Prefer this over the deprecated `mentionedUsers` argument. Use it whenever\n   * the message contains mention kinds beyond direct-user mentions\n   * (for example `@channel`, `@here`, roles, or user groups) and `renderText`\n   * needs the exact mention entities that should be highlighted in the rendered\n   * markdown output.\n   */\n  messageMentionEntities?: RenderTextMentionEntity[];\n};\n\nexport type RenderTextFunction = (\n  text?: string,\n  /**\n   * @deprecated Pass mention metadata through `options.messageMentionEntities`\n   * instead. This argument only supports direct-user mentions. Will be removed in next major version.\n   */\n  mentionedUsers?: UserResponse[],\n  options?: RenderTextOptions,\n) => ReactNode;\n\nexport function renderText(\n  text?: string,\n  /**\n   * @deprecated Pass mention metadata through `options.messageMentionEntities`\n   * instead. This argument only supports direct-user mentions.\n   */\n  mentionedUsers?: UserResponse[],\n  {\n    allowedTagNames = defaultAllowedTagNames,\n    customMarkDownRenderers,\n    getRehypePlugins = getPluginsForward,\n    getRemarkPlugins = getPluginsForward,\n    messageMentionEntities,\n  }: RenderTextOptions = {},\n) {\n  // take the @ mentions and turn them into markdown?\n  // translate links\n  if (!text) return null;\n  if (text.trim().length === 1) return <>{text}</>;\n\n  let newText = text;\n  const renderTextMentionEntities =\n    messageMentionEntities ??\n    getRenderTextMentionEntities({ mentioned_users: mentionedUsers });\n  const { mentionDisplayTextSet, plugin: mentionsPlugin } =\n    createMentionPluginAndDisplayTextSet(renderTextMentionEntities);\n  const markdownLinks = matchMarkdownLinks(newText);\n  const codeBlocks = messageCodeBlocks(newText);\n\n  // Extract all valid links/emails within text and replace it with proper markup\n  // Revert the link order to avoid getting out of sync of the original start and end positions of links\n  // - due to the addition of new characters when creating Markdown links\n  const links = [...find(newText, 'email'), ...find(newText, 'url')];\n  for (let i = links.length - 1; i >= 0; i--) {\n    const { end, href, start, type, value } = links[i];\n    const linkIsInBlock = codeBlocks.some((block) => block?.includes(value));\n\n    // check if message is already  markdown\n    const noParsingNeeded =\n      markdownLinks &&\n      markdownLinks.filter((text) => {\n        const strippedHref = href?.replace(detectHttp, '');\n        const strippedText = text?.replace(detectHttp, '');\n\n        if (!strippedHref || !strippedText) return false;\n\n        return strippedHref.includes(strippedText) || strippedText.includes(strippedHref);\n      });\n\n    if (noParsingNeeded.length > 0 || linkIsInBlock) continue;\n\n    try {\n      // special case for mentions:\n      // it could happen that a mention display text matches with an e-mail-like pattern.\n      // in that case, we check whether the found e-mail is actually a mention\n      // by naively checking for an existence of @ sign in front of it.\n      if (type === 'email') {\n        const mentionDisplayText = `@${value}`;\n        if (mentionDisplayTextSet.has(mentionDisplayText)) {\n          // FIXME: breaks if the mention symbol is not '@'\n          const isMention = newText.charAt(start - 1) === '@';\n          // in case of mention, we leave the match in its original form,\n          // and we let `mentionsMarkdownPlugin` to do its job\n          newText =\n            newText.slice(0, start) +\n            (isMention ? value : `[${value}](${encodeDecode(href)})`) +\n            newText.slice(end);\n        }\n      } else {\n        const displayLink = type === 'email' ? value : formatUrlForDisplay(href);\n\n        newText =\n          newText.slice(0, start) +\n          `[${displayLink}](${encodeDecode(href)})` +\n          newText.slice(end);\n      }\n    } catch (e) {\n      void e;\n    }\n  }\n\n  const remarkPlugins: PluggableList = [\n    htmlToTextPlugin,\n    keepLineBreaksPlugin,\n    [remarkGfm, { singleTilde: false }],\n    plusPlusToEmphasis,\n    imageToLink,\n  ];\n  const rehypePlugins: PluggableList = [emojiMarkdownPlugin];\n\n  if (renderTextMentionEntities.length) {\n    rehypePlugins.push(mentionsPlugin);\n  }\n\n  return (\n    <ErrorBoundary fallback={<>{text}</>}>\n      <ReactMarkdown\n        allowedElements={allowedTagNames}\n        components={{\n          ...markDownRenderers,\n          ...customMarkDownRenderers,\n        }}\n        rehypePlugins={getRehypePlugins(rehypePlugins)}\n        remarkPlugins={getRemarkPlugins(remarkPlugins)}\n        skipHtml\n        unwrapDisallowed\n        urlTransform={urlTransform}\n      >\n        {newText}\n      </ReactMarkdown>\n    </ErrorBoundary>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgCA,IAAa,yBAET;CACF;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAS,oBAAoB,KAAa;CACxC,IAAI;EACF,OAAO,mBAAmB,GAAG,CAAC,CAAC,QAAQ,YAAY,EAAE;CACvD,SAAS,GAAG;EACV,OAAO;CACT;AACF;AAEA,SAAS,aAAa,KAAa;CACjC,IAAI;EACF,OAAO,UAAU,mBAAmB,GAAG,CAAC;CAC1C,SAAS,OAAO;EACd,OAAO;CACT;AACF;AAEA,IAAM,gBAAgB,QACpB,IAAI,WAAW,QAAQ,IAAI,MAAM,oBAAoB,GAAG;AAE1D,IAAM,qBAAmD,YACvD;AAEF,IAAa,oBAAkE;CAC7E,GAAG;CACH,OAAO;CACP,SAAS;AACX;AAiCA,SAAgB,WACd,MAKA,gBACA,EACE,kBAAkB,wBAClB,yBACA,mBAAmB,mBACnB,mBAAmB,mBACnB,2BACqB,CAAC,GACxB;CAGA,IAAI,CAAC,MAAM,OAAO;CAClB,IAAI,KAAK,KAAK,CAAC,CAAC,WAAW,GAAG,OAAO,oBAAA,YAAA,EAAA,UAAG,KAAO,CAAA;CAE/C,IAAI,UAAU;CACd,MAAM,4BACJ,0BACA,6BAA6B,EAAE,iBAAiB,eAAe,CAAC;CAClE,MAAM,EAAE,uBAAuB,QAAQ,mBACrC,qCAAqC,yBAAyB;CAChE,MAAM,gBAAgB,mBAAmB,OAAO;CAChD,MAAM,aAAa,kBAAkB,OAAO;CAK5C,MAAM,QAAQ,CAAC,GAAG,KAAK,SAAS,OAAO,GAAG,GAAG,KAAK,SAAS,KAAK,CAAC;CACjE,KAAK,IAAI,IAAI,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK;EAC1C,MAAM,EAAE,KAAK,MAAM,OAAO,MAAM,UAAU,MAAM;EAChD,MAAM,gBAAgB,WAAW,MAAM,UAAU,OAAO,SAAS,KAAK,CAAC;EAcvE,KAVE,iBACA,cAAc,QAAQ,SAAS;GAC7B,MAAM,eAAe,MAAM,QAAQ,YAAY,EAAE;GACjD,MAAM,eAAe,MAAM,QAAQ,YAAY,EAAE;GAEjD,IAAI,CAAC,gBAAgB,CAAC,cAAc,OAAO;GAE3C,OAAO,aAAa,SAAS,YAAY,KAAK,aAAa,SAAS,YAAY;EAClF,CAAC,EAAA,CAEiB,SAAS,KAAK,eAAe;EAEjD,IAAI;GAKF,IAAI,SAAS,SAAS;IACpB,MAAM,qBAAqB,IAAI;IAC/B,IAAI,sBAAsB,IAAI,kBAAkB,GAAG;KAEjD,MAAM,YAAY,QAAQ,OAAO,QAAQ,CAAC,MAAM;KAGhD,UACE,QAAQ,MAAM,GAAG,KAAK,KACrB,YAAY,QAAQ,IAAI,MAAM,IAAI,aAAa,IAAI,EAAE,MACtD,QAAQ,MAAM,GAAG;IACrB;GACF,OAAO;IACL,MAAM,cAAc,SAAS,UAAU,QAAQ,oBAAoB,IAAI;IAEvE,UACE,QAAQ,MAAM,GAAG,KAAK,IACtB,IAAI,YAAY,IAAI,aAAa,IAAI,EAAE,KACvC,QAAQ,MAAM,GAAG;GACrB;EACF,SAAS,GAAG,CAEZ;CACF;CAEA,MAAM,gBAA+B;EACnC;EACA;EACA,CAAC,WAAW,EAAE,aAAa,MAAM,CAAC;EAClC;EACA;CACF;CACA,MAAM,gBAA+B,CAAC,mBAAmB;CAEzD,IAAI,0BAA0B,QAC5B,cAAc,KAAK,cAAc;CAGnC,OACE,oBAAC,eAAD;EAAe,UAAU,oBAAA,YAAA,EAAA,UAAG,KAAO,CAAA;YACjC,oBAAC,eAAD;GACE,iBAAiB;GACjB,YAAY;IACV,GAAG;IACH,GAAG;GACL;GACA,eAAe,iBAAiB,aAAa;GAC7C,eAAe,iBAAiB,aAAa;GAC7C,UAAA;GACA,kBAAA;GACc;aAEb;EACY,CAAA;CACF,CAAA;AAEnB"}

package/dist/es/components/Message/utils.mjs

@@ -0,0 +1,114 @@
+import { EMOJI_REGEX } from "./emojiRegex.mjs";
+import deepequal from "react-fast-compare";
+//#region src/components/Message/utils.tsx
+/**
+* Following function validates a function which returns notification message.
+* It validates if the first parameter is function and also if return value of function is string or no.
+*/
+var validateAndGetMessage = (func, args) => {
+	if (!func || typeof func !== "function") return null;
+	if (!Array.isArray(args)) args = [args];
+	const returnValue = func(...args);
+	if (typeof returnValue !== "string") return null;
+	return returnValue;
+};
+/**
+* Tell if the owner of the current message is muted
+*/
+var isUserMuted = (message, mutes) => {
+	if (!mutes || !message) return false;
+	return mutes.some(({ target }) => target?.id === message.user?.id);
+};
+/** `MessageActionSetItem['type']`s that a thread reply does not support. */
+var ACTIONS_NOT_WORKING_IN_THREAD = [
+	"pin",
+	"reply",
+	"markUnread"
+];
+function areMessagesEqual(prevMessage, nextMessage) {
+	if (prevMessage === nextMessage) return true;
+	const areBaseMessagesEqual = (prevMessage, nextMessage) => prevMessage.deleted_at === nextMessage.deleted_at && prevMessage.attachments === nextMessage.attachments && prevMessage.latest_reactions === nextMessage.latest_reactions && prevMessage.own_reactions === nextMessage.own_reactions && prevMessage.reaction_groups === nextMessage.reaction_groups && prevMessage.shared_location === nextMessage.shared_location && prevMessage.pinned === nextMessage.pinned && prevMessage.reply_count === nextMessage.reply_count && prevMessage.show_in_channel === nextMessage.show_in_channel && prevMessage.status === nextMessage.status && prevMessage.text === nextMessage.text && prevMessage.type === nextMessage.type && prevMessage.updated_at === nextMessage.updated_at && prevMessage.user?.updated_at === nextMessage.user?.updated_at;
+	return areBaseMessagesEqual(prevMessage, nextMessage) && Boolean(prevMessage.quoted_message) === Boolean(nextMessage.quoted_message) && (!prevMessage.quoted_message && !nextMessage.quoted_message || areBaseMessagesEqual(prevMessage.quoted_message, nextMessage.quoted_message));
+}
+var areMessagePropsEqual = (prevProps, nextProps) => {
+	const { message: prevMessage } = prevProps;
+	const { message: nextMessage } = nextProps;
+	if (nextProps.showDetailedReactions !== prevProps.showDetailedReactions) return false;
+	if (nextProps.closeReactionSelectorOnClick !== prevProps.closeReactionSelectorOnClick) return false;
+	if (!areMessagesEqual(prevMessage, nextMessage)) return false;
+	if (!(deepequal(nextProps.readBy, prevProps.readBy) && deepequal(nextProps.deliveredTo, prevProps.deliveredTo) && deepequal(nextProps.highlighted, prevProps.highlighted) && deepequal(nextProps.groupStyles, prevProps.groupStyles) && deepequal(nextProps.lastReceivedId, prevProps.lastReceivedId))) return false;
+	return prevProps.messageListRect === nextProps.messageListRect;
+};
+var areMessageUIPropsEqual = (prevProps, nextProps) => {
+	const { lastReceivedId: prevLastReceivedId, message: prevMessage } = prevProps;
+	const { lastReceivedId: nextLastReceivedId, message: nextMessage } = nextProps;
+	if (prevProps.highlighted !== nextProps.highlighted) return false;
+	if (prevProps.endOfGroup !== nextProps.endOfGroup) return false;
+	if (prevProps.readBy?.length !== nextProps.readBy?.length) return false;
+	if (prevProps.deliveredTo?.length !== nextProps.deliveredTo?.length) return false;
+	if (prevProps.groupStyles !== nextProps.groupStyles) return false;
+	if (prevProps.showDetailedReactions !== nextProps.showDetailedReactions) return false;
+	if ((prevMessage.id === prevLastReceivedId || prevMessage.id === nextLastReceivedId) && prevLastReceivedId !== nextLastReceivedId) return false;
+	return areMessagesEqual(prevMessage, nextMessage);
+};
+var messageHasReactions = (message) => Object.values(message?.reaction_groups ?? {}).some(({ count }) => count > 0);
+var messageHasQuotedMessage = (message) => !!message?.quoted_message;
+var messageHasAttachments = (message) => !!message?.attachments && !!message.attachments.length;
+var messageHasSingleAttachment = (message) => message?.attachments?.length === 1;
+var messageHasGiphyAttachment = (message) => !!message?.attachments?.some((att) => att.type === "giphy");
+var getImages = (message) => {
+	if (!message?.attachments) return [];
+	return message.attachments.filter((item) => item.type === "image");
+};
+var getNonImageAttachments = (message) => {
+	if (!message?.attachments) return [];
+	return message.attachments.filter((item) => item.type !== "image");
+};
+/**
+* Default Tooltip Username mapper implementation.
+*
+* @param user the user.
+*/
+var mapToUserNameOrId = (user) => user.name || user.id;
+var getReadByTooltipText = (users, t, client, tooltipUserNameMapper) => {
+	let outStr = "";
+	if (!t) throw new Error("getReadByTooltipText was called, but translation function is not available");
+	if (!tooltipUserNameMapper) throw new Error("getReadByTooltipText was called, but tooltipUserNameMapper function is not available");
+	const otherUsers = users.filter((item) => item && client?.user && item.id !== client.user.id).map(tooltipUserNameMapper);
+	const slicedArr = otherUsers.slice(0, 5);
+	const restLength = otherUsers.length - slicedArr.length;
+	if (slicedArr.length === 1) outStr = `${slicedArr[0]} `;
+	else if (slicedArr.length === 2) outStr = t("message.and.withFirstUserAndSecondUser.label", "{{ firstUser }} and {{ secondUser }}", {
+		firstUser: slicedArr[0],
+		secondUser: slicedArr[1]
+	});
+	else if (slicedArr.length > 2) if (restLength === 0) {
+		const [lastUser] = slicedArr.splice(slicedArr.length - 1, 1);
+		outStr = t("message.and.withCommaSeparatedUsersAndLastUser.label", "{{ commaSeparatedUsers }}, and {{ lastUser }}", {
+			commaSeparatedUsers: slicedArr.join(", "),
+			lastUser
+		});
+	} else outStr = t("message.more.label", "{{ commaSeparatedUsers }} and {{ moreCount }} more", {
+		commaSeparatedUsers: slicedArr.join(", "),
+		moreCount: restLength
+	});
+	return outStr;
+};
+var countEmojis = (text) => {
+	const matches = text?.match(EMOJI_REGEX);
+	return matches ? matches.length : 0;
+};
+var messageTextHasEmojisOnly = (message) => {
+	if (!message.text) return false;
+	return !message.text.replace(EMOJI_REGEX, "").replace(/[\s\n]/gm, "");
+};
+var isMessageErrorRetryable = (message) => message.status === "failed" && message.error?.status !== 403;
+var isNetworkSendFailure = (message) => message.status === "failed" && message.error?.status === 0;
+var isMessageBounced = (message) => message.type === "error" && message.moderation?.action === "bounce";
+var isMessageBlocked = (message) => message.shadowed || message.type === "error" && message.moderation?.action === "remove";
+var isMessageDeleted = (message) => Boolean(message.deleted_at != null || message.type === "deleted" || message.deleted_for_me);
+var isMessageEdited = (message) => message.message_text_updated_at != null;
+//#endregion
+export { ACTIONS_NOT_WORKING_IN_THREAD, areMessagePropsEqual, areMessageUIPropsEqual, countEmojis, getImages, getNonImageAttachments, getReadByTooltipText, isMessageBlocked, isMessageBounced, isMessageDeleted, isMessageEdited, isMessageErrorRetryable, isNetworkSendFailure, isUserMuted, mapToUserNameOrId, messageHasAttachments, messageHasGiphyAttachment, messageHasQuotedMessage, messageHasReactions, messageHasSingleAttachment, messageTextHasEmojisOnly, validateAndGetMessage };
+
+//# sourceMappingURL=utils.mjs.map

package/dist/es/components/Message/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../src/components/Message/utils.tsx"],"sourcesContent":["import deepequal from 'react-fast-compare';\n\nimport { EMOJI_REGEX } from './emojiRegex';\n\nimport type {\n  LocalMessage,\n  MessageResponse,\n  StreamChat,\n  UserMuteResponse,\n  UserResponse,\n} from 'stream-chat';\nimport type { MessageProps } from './types';\nimport type { MessageContextValue } from '../../context';\nimport type { StreamTFunction } from '../../i18n/types';\n\n/**\n * Following function validates a function which returns notification message.\n * It validates if the first parameter is function and also if return value of function is string or no.\n */\nexport const validateAndGetMessage = <T extends unknown[]>(\n  func: (...args: T) => unknown,\n  args: T,\n) => {\n  if (!func || typeof func !== 'function') return null;\n\n  // below is due to tests passing a single argument\n  // rather than an array.\n  if (!Array.isArray(args)) {\n    args = [args] as unknown as T;\n  }\n\n  const returnValue = func(...args);\n\n  if (typeof returnValue !== 'string') return null;\n\n  return returnValue;\n};\n\n/**\n * Tell if the owner of the current message is muted\n */\nexport const isUserMuted = (message: LocalMessage, mutes?: UserMuteResponse[]) => {\n  if (!mutes || !message) return false;\n\n  return mutes.some(({ target }) => target?.id === message.user?.id);\n};\n\n/** `MessageActionSetItem['type']`s that a thread reply does not support. */\nexport const ACTIONS_NOT_WORKING_IN_THREAD: string[] = ['pin', 'reply', 'markUnread'];\n\nfunction areMessagesEqual(prevMessage: LocalMessage, nextMessage: LocalMessage): boolean {\n  if (prevMessage === nextMessage) return true;\n\n  const areBaseMessagesEqual = (prevMessage: LocalMessage, nextMessage: LocalMessage) =>\n    prevMessage.deleted_at === nextMessage.deleted_at &&\n    prevMessage.attachments === nextMessage.attachments &&\n    prevMessage.latest_reactions === nextMessage.latest_reactions &&\n    prevMessage.own_reactions === nextMessage.own_reactions &&\n    prevMessage.reaction_groups === nextMessage.reaction_groups &&\n    prevMessage.shared_location === nextMessage.shared_location &&\n    prevMessage.pinned === nextMessage.pinned &&\n    prevMessage.reply_count === nextMessage.reply_count &&\n    prevMessage.show_in_channel === nextMessage.show_in_channel &&\n    prevMessage.status === nextMessage.status &&\n    prevMessage.text === nextMessage.text &&\n    prevMessage.type === nextMessage.type &&\n    prevMessage.updated_at === nextMessage.updated_at &&\n    prevMessage.user?.updated_at === nextMessage.user?.updated_at;\n\n  return (\n    areBaseMessagesEqual(prevMessage, nextMessage) &&\n    Boolean(prevMessage.quoted_message) === Boolean(nextMessage.quoted_message) &&\n    ((!prevMessage.quoted_message && !nextMessage.quoted_message) ||\n      areBaseMessagesEqual(\n        prevMessage.quoted_message as LocalMessage,\n        nextMessage.quoted_message as LocalMessage,\n      ))\n  );\n}\n\nexport const areMessagePropsEqual = (\n  prevProps: MessageProps & {\n    showDetailedReactions?: boolean;\n  },\n  nextProps: MessageProps & {\n    showDetailedReactions?: boolean;\n  },\n) => {\n  const { message: prevMessage } = prevProps;\n  const { message: nextMessage } = nextProps;\n\n  // The message UI component itself is not compared here: it is resolved from\n  // `ComponentContext`, and context updates re-render consumers regardless of `React.memo`.\n  if (nextProps.showDetailedReactions !== prevProps.showDetailedReactions) {\n    return false;\n  }\n\n  if (nextProps.closeReactionSelectorOnClick !== prevProps.closeReactionSelectorOnClick) {\n    return false;\n  }\n\n  const messagesAreEqual = areMessagesEqual(prevMessage, nextMessage);\n  if (!messagesAreEqual) return false;\n\n  const deepEqualProps =\n    deepequal(nextProps.readBy, prevProps.readBy) &&\n    deepequal(nextProps.deliveredTo, prevProps.deliveredTo) &&\n    deepequal(nextProps.highlighted, prevProps.highlighted) &&\n    deepequal(nextProps.groupStyles, prevProps.groupStyles) && // last 3 messages can have different group styles\n    deepequal(nextProps.lastReceivedId, prevProps.lastReceivedId);\n\n  if (!deepEqualProps) return false;\n\n  return (\n    prevProps.messageListRect === nextProps.messageListRect // MessageList wrapper layout changes\n  );\n};\n\nexport const areMessageUIPropsEqual = (\n  prevProps: MessageContextValue & {\n    showDetailedReactions?: boolean;\n  },\n  nextProps: MessageContextValue & {\n    showDetailedReactions?: boolean;\n  },\n) => {\n  const { lastReceivedId: prevLastReceivedId, message: prevMessage } = prevProps;\n  const { lastReceivedId: nextLastReceivedId, message: nextMessage } = nextProps;\n\n  if (prevProps.highlighted !== nextProps.highlighted) return false;\n  if (prevProps.endOfGroup !== nextProps.endOfGroup) return false;\n  if (prevProps.readBy?.length !== nextProps.readBy?.length) return false;\n  if (prevProps.deliveredTo?.length !== nextProps.deliveredTo?.length) return false;\n  if (prevProps.groupStyles !== nextProps.groupStyles) return false;\n\n  if (prevProps.showDetailedReactions !== nextProps.showDetailedReactions) {\n    return false;\n  }\n\n  if (\n    (prevMessage.id === prevLastReceivedId || prevMessage.id === nextLastReceivedId) &&\n    prevLastReceivedId !== nextLastReceivedId\n  ) {\n    return false;\n  }\n\n  return areMessagesEqual(prevMessage, nextMessage);\n};\n\nexport const messageHasReactions = (message?: LocalMessage) =>\n  Object.values(message?.reaction_groups ?? {}).some(({ count }) => count > 0);\n\nexport const messageHasQuotedMessage = (message?: LocalMessage) =>\n  !!message?.quoted_message;\n\nexport const messageHasAttachments = (message?: LocalMessage) =>\n  !!message?.attachments && !!message.attachments.length;\n\nexport const messageHasSingleAttachment = (message?: LocalMessage) =>\n  message?.attachments?.length === 1;\n\nexport const messageHasGiphyAttachment = (message?: LocalMessage) =>\n  !!message?.attachments?.some((att) => att.type === 'giphy');\n\nexport const getImages = (message?: MessageResponse) => {\n  if (!message?.attachments) {\n    return [];\n  }\n  return message.attachments.filter((item) => item.type === 'image');\n};\n\nexport const getNonImageAttachments = (message?: MessageResponse) => {\n  if (!message?.attachments) {\n    return [];\n  }\n  return message.attachments.filter((item) => item.type !== 'image');\n};\n\nexport interface TooltipUsernameMapper {\n  (user: UserResponse): string;\n}\n\n/**\n * Default Tooltip Username mapper implementation.\n *\n * @param user the user.\n */\nexport const mapToUserNameOrId: TooltipUsernameMapper = (user) => user.name || user.id;\n\nexport const getReadByTooltipText = (\n  users: UserResponse[],\n  t: StreamTFunction,\n  client: StreamChat,\n  tooltipUserNameMapper: TooltipUsernameMapper,\n) => {\n  let outStr = '';\n\n  if (!t) {\n    throw new Error(\n      'getReadByTooltipText was called, but translation function is not available',\n    );\n  }\n\n  if (!tooltipUserNameMapper) {\n    throw new Error(\n      'getReadByTooltipText was called, but tooltipUserNameMapper function is not available',\n    );\n  }\n  // first filter out client user, so restLength won't count it\n  const otherUsers = users\n    .filter((item) => item && client?.user && item.id !== client.user.id)\n    .map(tooltipUserNameMapper);\n\n  const slicedArr = otherUsers.slice(0, 5);\n  const restLength = otherUsers.length - slicedArr.length;\n\n  if (slicedArr.length === 1) {\n    outStr = `${slicedArr[0]} `;\n  } else if (slicedArr.length === 2) {\n    // joins all with \"and\" but =no commas\n    // example: \"bob and sam\"\n    outStr = t(\n      'message.and.withFirstUserAndSecondUser.label',\n      '{{ firstUser }} and {{ secondUser }}',\n      {\n        firstUser: slicedArr[0],\n        secondUser: slicedArr[1],\n      },\n    );\n  } else if (slicedArr.length > 2) {\n    // joins all with commas, but last one gets \", and\" (oxford comma!)\n    // example: \"bob, joe, sam and 4 more\"\n    if (restLength === 0) {\n      // mutate slicedArr to remove last user to display it separately\n      const [lastUser] = slicedArr.splice(slicedArr.length - 1, 1);\n      outStr = t(\n        'message.and.withCommaSeparatedUsersAndLastUser.label',\n        '{{ commaSeparatedUsers }}, and {{ lastUser }}',\n        {\n          commaSeparatedUsers: slicedArr.join(', '),\n          lastUser,\n        },\n      );\n    } else {\n      outStr = t(\n        'message.more.label',\n        '{{ commaSeparatedUsers }} and {{ moreCount }} more',\n        {\n          commaSeparatedUsers: slicedArr.join(', '),\n          moreCount: restLength,\n        },\n      );\n    }\n  }\n\n  return outStr;\n};\n\nexport const countEmojis = (text?: string) => {\n  const matches = text?.match(EMOJI_REGEX);\n  return matches ? matches.length : 0;\n};\n\nexport const messageTextHasEmojisOnly = (message: LocalMessage) => {\n  if (!message.text) return false;\n\n  const noEmojis = message.text.replace(EMOJI_REGEX, '');\n  const noSpace = noEmojis.replace(/[\\s\\n]/gm, '');\n\n  return !noSpace;\n};\n\nexport const isMessageErrorRetryable = (message: LocalMessage) =>\n  message.status === 'failed' && message.error?.status !== 403;\n\nexport const isNetworkSendFailure = (message: Pick<LocalMessage, 'error' | 'status'>) =>\n  message.status === 'failed' && message.error?.status === 0;\n\nexport const isMessageBounced = (message: Pick<LocalMessage, 'type' | 'moderation'>) =>\n  message.type === 'error' && message.moderation?.action === 'bounce';\n\nexport const isMessageBlocked = (\n  message: Pick<LocalMessage, 'type' | 'moderation' | 'shadowed'>,\n) =>\n  message.shadowed ||\n  (message.type === 'error' && message.moderation?.action === 'remove');\n\nexport const isMessageDeleted = (message: LocalMessage): boolean =>\n  Boolean(\n    message.deleted_at != null || message.type === 'deleted' || message.deleted_for_me,\n  );\n\nexport const isMessageEdited = (message: Pick<LocalMessage, 'message_text_updated_at'>) =>\n  message.message_text_updated_at != null;\n"],"mappings":"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"}

package/dist/es/components/MessageActions/DeleteMessageAlert.mjs

@@ -0,0 +1,43 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { Alert } from "../Dialog/components/Alert.mjs";
+import { useModalContext } from "../../context/ModalContext.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageActions/DeleteMessageAlert.tsx
+var DeleteMessageAlert = ({ onCancel, onDelete }) => {
+	const { t } = useTranslationContext();
+	const { close } = useModalContext();
+	return /* @__PURE__ */ jsxs(Alert.Root, {
+		className: "str-chat__delete-message-alert",
+		"data-testid": "message-delete-alert",
+		children: [/* @__PURE__ */ jsx(Alert.Header, {
+			description: t("messageActions.deleteMessageAlert.description", "Are you sure you want to delete this message?"),
+			title: t("messageActions.deleteMessageAlert.deleteMessage.title", "Delete message")
+		}), /* @__PURE__ */ jsxs(Alert.Actions, { children: [/* @__PURE__ */ jsx(Button, {
+			appearance: "outline",
+			className: "str-chat__delete-message-alert__delete-button",
+			"data-testid": "delete-message-alert-delete-button",
+			onClick: onDelete,
+			size: "md",
+			variant: "danger",
+			children: t("messageActions.deleteMessageAlert.deleteMessage.title", "Delete message")
+		}), /* @__PURE__ */ jsx(Button, {
+			appearance: "outline",
+			autoFocus: true,
+			className: "str-chat__delete-message-alert__cancel-button",
+			"data-testid": "delete-message-alert-cancel-button",
+			onClick: () => {
+				onCancel();
+				close();
+			},
+			size: "md",
+			variant: "secondary",
+			children: t("common.cancel.label", "Cancel")
+		})] })]
+	});
+};
+//#endregion
+export { DeleteMessageAlert };
+
+//# sourceMappingURL=DeleteMessageAlert.mjs.map

package/dist/es/components/MessageActions/DeleteMessageAlert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteMessageAlert.mjs","names":[],"sources":["../../../../src/components/MessageActions/DeleteMessageAlert.tsx"],"sourcesContent":["import { Alert } from '../Dialog';\nimport { Button } from '../Button';\nimport React from 'react';\nimport { useModalContext, useTranslationContext } from '../../context';\n\nexport type DeleteMessageAlertProps = {\n  onCancel: () => void;\n  onDelete: () => void;\n};\n\nexport const DeleteMessageAlert = ({ onCancel, onDelete }: DeleteMessageAlertProps) => {\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n\n  return (\n    <Alert.Root\n      className='str-chat__delete-message-alert'\n      data-testid='message-delete-alert'\n    >\n      <Alert.Header\n        description={t(\n          'messageActions.deleteMessageAlert.description',\n          'Are you sure you want to delete this message?',\n        )}\n        title={t(\n          'messageActions.deleteMessageAlert.deleteMessage.title',\n          'Delete message',\n        )}\n      />\n      <Alert.Actions>\n        <Button\n          appearance='outline'\n          className='str-chat__delete-message-alert__delete-button'\n          data-testid='delete-message-alert-delete-button'\n          onClick={onDelete}\n          size='md'\n          variant='danger'\n        >\n          {t('messageActions.deleteMessageAlert.deleteMessage.title', 'Delete message')}\n        </Button>\n        <Button\n          appearance='outline'\n          autoFocus\n          className='str-chat__delete-message-alert__cancel-button'\n          data-testid='delete-message-alert-cancel-button'\n          onClick={() => {\n            onCancel();\n            close();\n          }}\n          size='md'\n          variant='secondary'\n        >\n          {t('common.cancel.label', 'Cancel')}\n        </Button>\n      </Alert.Actions>\n    </Alert.Root>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAa,sBAAsB,EAAE,UAAU,eAAwC;CACrF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,UAAU,gBAAgB;CAElC,OACE,qBAAC,MAAM,MAAP;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,MAAM,QAAP;GACE,aAAa,EACX,iDACA,+CACF;GACA,OAAO,EACL,yDACA,gBACF;EACD,CAAA,GACD,qBAAC,MAAM,SAAP,EAAA,UAAA,CACE,oBAAC,QAAD;GACE,YAAW;GACX,WAAU;GACV,eAAY;GACZ,SAAS;GACT,MAAK;GACL,SAAQ;aAEP,EAAE,yDAAyD,gBAAgB;EACtE,CAAA,GACR,oBAAC,QAAD;GACE,YAAW;GACX,WAAA;GACA,WAAU;GACV,eAAY;GACZ,eAAe;IACb,SAAS;IACT,MAAM;GACR;GACA,MAAK;GACL,SAAQ;aAEP,EAAE,uBAAuB,QAAQ;EAC5B,CAAA,CACK,EAAA,CAAA,CACL;;AAEhB"}

package/dist/es/components/MessageActions/DownloadSubmenu.mjs

@@ -0,0 +1,52 @@
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { ContextMenuBackButton, ContextMenuButton, ContextMenuHeader, useContextMenuContext } from "../Dialog/components/ContextMenu.mjs";
+import { downloadAllAttachments, downloadAttachment, isDownloadableAttachment } from "./downloadUtils.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageActions/DownloadSubmenu.tsx
+var msgActionsBoxButtonClassName = "str-chat__message-actions-list-item-button";
+var DownloadSubmenuHeader = () => {
+	const { IconChevronLeft } = useComponentContextIcons();
+	const { returnToParentMenu: goBack } = useContextMenuContext();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxs(ContextMenuBackButton, {
+		onClick: goBack,
+		children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: t("common.downloadAttachment.title", "Download Attachment") })]
+	}) });
+};
+var DownloadSubmenu = () => {
+	const { IconDownload } = useComponentContextIcons();
+	const { closeMenu } = useContextMenuContext();
+	const { message } = useMessageContext();
+	const { t } = useTranslationContext();
+	const downloadableAttachments = (message.attachments ?? []).filter(isDownloadableAttachment);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-actions-box__submenu str-chat__message-actions-box__submenu--download-attachments",
+		children: [downloadableAttachments.map((attachment, index) => {
+			const fileName = attachment.localMetadata?.file?.name ?? attachment.title;
+			return /* @__PURE__ */ jsx(ContextMenuButton, {
+				className: msgActionsBoxButtonClassName,
+				Icon: IconDownload,
+				onClick: () => {
+					downloadAttachment(attachment);
+					closeMenu();
+				},
+				children: fileName ? t("messageActions.downloadSubmenu.download.label", "Download {{ fileName }}", { fileName }) : t("messageActions.downloadSubmenu.downloadAttachment.label", "Download attachment {{ number }}", { number: index + 1 })
+			}, attachment.localMetadata?.id ?? attachment.asset_url ?? attachment.image_url ?? `${fileName ?? "attachment"}-${index}`);
+		}), /* @__PURE__ */ jsx(ContextMenuButton, {
+			className: msgActionsBoxButtonClassName,
+			Icon: IconDownload,
+			onClick: () => {
+				downloadAllAttachments(downloadableAttachments);
+				closeMenu();
+			},
+			children: t("messageActions.downloadSubmenu.download.text", "Download All")
+		})]
+	});
+};
+//#endregion
+export { DownloadSubmenu, DownloadSubmenuHeader };
+
+//# sourceMappingURL=DownloadSubmenu.mjs.map

package/dist/es/components/MessageActions/DownloadSubmenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadSubmenu.mjs","names":[],"sources":["../../../../src/components/MessageActions/DownloadSubmenu.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useComponentContextIcons,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\nimport {\n  ContextMenuBackButton,\n  ContextMenuButton,\n  ContextMenuHeader,\n  useContextMenuContext,\n} from '../Dialog';\nimport {\n  type DownloadableAttachment,\n  downloadAllAttachments,\n  downloadAttachment,\n  isDownloadableAttachment,\n} from './downloadUtils';\n\nconst msgActionsBoxButtonClassName =\n  'str-chat__message-actions-list-item-button' as const;\n\nexport const DownloadSubmenuHeader = () => {\n  const { IconChevronLeft } = useComponentContextIcons();\n  const { returnToParentMenu: goBack } = useContextMenuContext();\n  const { t } = useTranslationContext();\n  return (\n    <ContextMenuHeader>\n      <ContextMenuBackButton onClick={goBack}>\n        <IconChevronLeft />\n        <span>{t('common.downloadAttachment.title', 'Download Attachment')}</span>\n      </ContextMenuBackButton>\n    </ContextMenuHeader>\n  );\n};\n\nexport const DownloadSubmenu = () => {\n  const { IconDownload } = useComponentContextIcons();\n  const { closeMenu } = useContextMenuContext();\n  const { message } = useMessageContext();\n  const { t } = useTranslationContext();\n\n  const downloadableAttachments = (message.attachments ?? []).filter(\n    isDownloadableAttachment,\n  ) as DownloadableAttachment[];\n\n  return (\n    <div className='str-chat__message-actions-box__submenu str-chat__message-actions-box__submenu--download-attachments'>\n      {downloadableAttachments.map((attachment, index) => {\n        const fileName = attachment.localMetadata?.file?.name ?? attachment.title;\n        const label = fileName\n          ? t(\n              'messageActions.downloadSubmenu.download.label',\n              'Download {{ fileName }}',\n              { fileName },\n            )\n          : t(\n              'messageActions.downloadSubmenu.downloadAttachment.label',\n              'Download attachment {{ number }}',\n              { number: index + 1 },\n            );\n\n        return (\n          <ContextMenuButton\n            className={msgActionsBoxButtonClassName}\n            Icon={IconDownload}\n            key={\n              attachment.localMetadata?.id ??\n              attachment.asset_url ??\n              attachment.image_url ??\n              `${fileName ?? 'attachment'}-${index}`\n            }\n            onClick={() => {\n              void downloadAttachment(attachment);\n              closeMenu();\n            }}\n          >\n            {label}\n          </ContextMenuButton>\n        );\n      })}\n      <ContextMenuButton\n        className={msgActionsBoxButtonClassName}\n        Icon={IconDownload}\n        onClick={() => {\n          void downloadAllAttachments(downloadableAttachments);\n          closeMenu();\n        }}\n      >\n        {t('messageActions.downloadSubmenu.download.text', 'Download All')}\n      </ContextMenuButton>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAmBA,IAAM,+BACJ;AAEF,IAAa,8BAA8B;CACzC,MAAM,EAAE,oBAAoB,yBAAyB;CACrD,MAAM,EAAE,oBAAoB,WAAW,sBAAsB;CAC7D,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,uBAAD;EAAuB,SAAS;YAAhC,CACE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,QAAD,EAAA,UAAO,EAAE,mCAAmC,qBAAqB,EAAQ,CAAA,CACpD;IACN,CAAA;AAEvB;AAEA,IAAa,wBAAwB;CACnC,MAAM,EAAE,iBAAiB,yBAAyB;CAClD,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,EAAE,YAAY,kBAAkB;CACtC,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,2BAA2B,QAAQ,eAAe,CAAC,EAAA,CAAG,OAC1D,wBACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,wBAAwB,KAAK,YAAY,UAAU;GAClD,MAAM,WAAW,WAAW,eAAe,MAAM,QAAQ,WAAW;GAapE,OACE,oBAAC,mBAAD;IACE,WAAW;IACX,MAAM;IAON,eAAe;KACb,mBAAwB,UAAU;KAClC,UAAU;IACZ;cAzBU,WACV,EACE,iDACA,2BACA,EAAE,SAAS,CACb,IACA,EACE,2DACA,oCACA,EAAE,QAAQ,QAAQ,EAAE,CACtB;GAkBiB,GAXf,WAAW,eAAe,MAC1B,WAAW,aACX,WAAW,aACX,GAAG,YAAY,aAAa,GAAG,OAQhB;EAEvB,CAAC,GACD,oBAAC,mBAAD;GACE,WAAW;GACX,MAAM;GACN,eAAe;IACb,uBAA4B,uBAAuB;IACnD,UAAU;GACZ;aAEC,EAAE,gDAAgD,cAAc;EAChD,CAAA,CAChB;;AAET"}