stream-chat-react 9.4.0 → 10.0.0-theming-v2.2

package/dist/components/Reactions/ReactionsList.js

@@ -9,64 +9,50 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { Suspense, useMemo } from 'react';
-import { getStrippedEmojiData } from '../Channel/emojiData';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { Suspense } from 'react';
+import clsx from 'clsx';
 import { useEmojiContext } from '../../context/EmojiContext';
 import { useMessageContext } from '../../context/MessageContext';
+import { useProcessReactions } from './hooks/useProcessReactions';
 var UnMemoizedReactionsList = function (props) {
-    var additionalEmojiProps = props.additionalEmojiProps, onClick = props.onClick, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, propReactions = props.reactions, _a = props.reverse, reverse = _a === void 0 ? false : _a;
+    var onClick = props.onClick, _a = props.reverse, reverse = _a === void 0 ? false : _a, rest = __rest(props, ["onClick", "reverse"]);
     var _b = useEmojiContext('ReactionsList'), Emoji = _b.Emoji, emojiConfig = _b.emojiConfig;
-    var _c = useMessageContext('ReactionsList'), message = _c.message, onReactionListClick = _c.onReactionListClick;
-    var _d = emojiConfig || {}, defaultMinimalEmojis = _d.defaultMinimalEmojis, fullEmojiData = _d.emojiData, emojiSetDef = _d.emojiSetDef;
-    var reactions = propReactions || message.latest_reactions || [];
-    var reactionCounts = propReactionCounts || message.reaction_counts || {};
-    var reactionOptions = propReactionOptions || defaultMinimalEmojis;
-    var reactionsAreCustom = !!(propReactionOptions === null || propReactionOptions === void 0 ? void 0 : propReactionOptions.length);
-    var emojiData = useMemo(function () { return (reactionsAreCustom ? fullEmojiData : getStrippedEmojiData(fullEmojiData)); }, [fullEmojiData, reactionsAreCustom]);
-    if (!reactions.length)
+    var onReactionListClick = useMessageContext('ReactionsList').onReactionListClick;
+    var _c = useProcessReactions(__assign({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _c.additionalEmojiProps, emojiData = _c.emojiData, getEmojiByReactionType = _c.getEmojiByReactionType, iHaveReactedWithReaction = _c.iHaveReactedWithReaction, latestReactions = _c.latestReactions, latestReactionTypes = _c.latestReactionTypes, reactionCounts = _c.reactionCounts, supportedReactionsArePresent = _c.supportedReactionsArePresent, totalReactionCount = _c.totalReactionCount;
+    if (!latestReactions.length)
         return null;
-    var getTotalReactionCount = function () {
-        return Object.values(reactionCounts).reduce(function (total, count) { return total + count; }, 0);
-    };
-    var getCurrentMessageReactionTypes = function () {
-        var reactionTypes = [];
-        reactions.forEach(function (_a) {
-            var type = _a.type;
-            if (reactionTypes.indexOf(type) === -1) {
-                reactionTypes.push(type);
-            }
-        });
-        return reactionTypes;
-    };
-    var getEmojiByReactionType = function (type) {
-        var reactionEmoji = reactionOptions.find(function (option) { return option.id === type; });
-        return reactionEmoji;
-    };
-    var getSupportedReactionMap = function () {
-        var reactionMap = {};
-        reactionOptions.forEach(function (_a) {
-            var id = _a.id;
-            return (reactionMap[id] = true);
-        });
-        return reactionMap;
-    };
-    var messageReactionTypes = getCurrentMessageReactionTypes();
-    var supportedReactionMap = getSupportedReactionMap();
-    var supportedReactionsArePresent = messageReactionTypes.some(function (type) { return supportedReactionMap[type]; });
     if (!supportedReactionsArePresent)
         return null;
-    return (React.createElement("div", { "aria-label": 'Reaction list', className: "str-chat__reaction-list " + (reverse ? 'str-chat__reaction-list--reverse' : ''), "data-testid": 'reaction-list', onClick: onClick || onReactionListClick, onKeyPress: onClick || onReactionListClick, role: 'figure' },
-        React.createElement("ul", null,
-            messageReactionTypes.map(function (reactionType) {
+    return (React.createElement("div", { "aria-label": 'Reaction list', className: clsx('str-chat__reaction-list str-chat__message-reactions-container', {
+            'str-chat__reaction-list--reverse': reverse,
+        }), "data-testid": 'reaction-list', onClick: onClick || onReactionListClick, onKeyUp: onClick || onReactionListClick, role: 'figure' },
+        React.createElement("ul", { className: 'str-chat__message-reactions' },
+            latestReactionTypes.map(function (reactionType) {
                 var emojiObject = getEmojiByReactionType(reactionType);
-                return emojiObject ? (React.createElement("li", { key: emojiObject.id },
-                    React.createElement("button", { "aria-label": "Reactions: " + reactionType },
+                var isOwnReaction = iHaveReactedWithReaction(reactionType);
+                return emojiObject ? (React.createElement("li", { className: clsx('str-chat__message-reaction', {
+                        'str-chat__message-reaction-own': isOwnReaction,
+                    }), key: emojiObject.id },
+                    React.createElement("button", { "aria-label": "Reactions: ".concat(reactionType) },
                         React.createElement(Suspense, { fallback: null },
-                            React.createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 16 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef)))),
-                        "\u00A0"))) : null;
+                            React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
+                                React.createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 16 }, additionalEmojiProps)))),
+                        "\u00A0",
+                        React.createElement("span", { className: 'str-chat__message-reaction-count', "data-testclass": 'reaction-list-reaction-count' }, reactionCounts[reactionType])))) : null;
             }),
             React.createElement("li", null,
-                React.createElement("span", { className: 'str-chat__reaction-list--counter' }, getTotalReactionCount())))));
+                React.createElement("span", { className: 'str-chat__reaction-list--counter' }, totalReactionCount)))));
 };
 /**
  * Component that displays a list of reactions on a message.

package/dist/components/Reactions/SimpleReactionsList.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
-import { ReactionEmoji } from '../Channel/emojiData';
 import type { NimbleEmojiProps } from 'emoji-mart';
 import type { ReactionResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { ReactionEmoji } from '../Channel/emojiData';
 export declare type SimpleReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /** Additional props to be passed to the [NimbleEmoji](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component from `emoji-mart` */
     additionalEmojiProps?: Partial<NimbleEmojiProps>;
     /** Function that adds/removes a reaction on a message (overrides the function stored in `MessageContext`) */
     handleReaction?: (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>;
+    /** An array of the own reaction objects to distinguish own reactions visually */
+    own_reactions?: ReactionResponse<StreamChatGenerics>[];
     /** An object that keeps track of the count of each type of reaction on a message */
     reaction_counts?: {
         [key: string]: number;

package/dist/components/Reactions/SimpleReactionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/SimpleReactionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAwB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAK3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6KAA6K;IAC7K,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,6GAA6G;IAC7G,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1F,oFAAoF;IACpF,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACpD,CAAC;AA+HF,eAAO,MAAM,mBAAmB,+JAES,CAAC"}
+{"version":3,"file":"SimpleReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/SimpleReactionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,oBAAY,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6KAA6K;IAC7K,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,6GAA6G;IAC7G,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1F,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACpD,CAAC;AA+FF,eAAO,MAAM,mBAAmB,+JAES,CAAC"}

package/dist/components/Reactions/SimpleReactionsList.js

@@ -9,26 +9,35 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { Suspense, useMemo, useState } from 'react';
-import { getStrippedEmojiData } from '../Channel/emojiData';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { Suspense, useState } from 'react';
+import clsx from 'clsx';
 import { useEmojiContext } from '../../context/EmojiContext';
 import { useMessageContext } from '../../context/MessageContext';
+import { useProcessReactions } from './hooks/useProcessReactions';
 var UnMemoizedSimpleReactionsList = function (props) {
-    var _a = props.additionalEmojiProps, additionalEmojiProps = _a === void 0 ? {} : _a, propHandleReaction = props.handleReaction, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, propReactions = props.reactions;
-    var _b = useEmojiContext('SimpleReactionsList'), Emoji = _b.Emoji, emojiConfig = _b.emojiConfig;
-    var _c = useMessageContext('SimpleReactionsList'), contextHandleReaction = _c.handleReaction, message = _c.message;
-    var _d = emojiConfig || {}, defaultMinimalEmojis = _d.defaultMinimalEmojis, fullEmojiData = _d.emojiData, emojiSetDef = _d.emojiSetDef;
-    var _e = useState(undefined), tooltipReactionType = _e[0], setTooltipReactionType = _e[1];
+    var propHandleReaction = props.handleReaction, rest = __rest(props, ["handleReaction"]);
+    var _a = useEmojiContext('SimpleReactionsList'), Emoji = _a.Emoji, emojiConfig = _a.emojiConfig;
+    var contextHandleReaction = useMessageContext('SimpleReactionsList').handleReaction;
+    var _b = useProcessReactions(__assign({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _b.additionalEmojiProps, emojiData = _b.emojiData, getEmojiByReactionType = _b.getEmojiByReactionType, iHaveReactedWithReaction = _b.iHaveReactedWithReaction, latestReactions = _b.latestReactions, latestReactionTypes = _b.latestReactionTypes, supportedReactionsArePresent = _b.supportedReactionsArePresent, totalReactionCount = _b.totalReactionCount;
+    var _c = useState(undefined), tooltipReactionType = _c[0], setTooltipReactionType = _c[1];
     var handleReaction = propHandleReaction || contextHandleReaction;
-    var reactions = propReactions || message.latest_reactions || [];
-    var reactionCounts = propReactionCounts || message.reaction_counts || {};
-    var reactionOptions = propReactionOptions || defaultMinimalEmojis;
-    var reactionsAreCustom = !!(propReactionOptions === null || propReactionOptions === void 0 ? void 0 : propReactionOptions.length);
-    var emojiData = useMemo(function () { return (reactionsAreCustom ? fullEmojiData : getStrippedEmojiData(fullEmojiData)); }, [fullEmojiData, reactionsAreCustom]);
-    if (!reactions.length)
+    if (!latestReactions.length)
+        return null;
+    if (!supportedReactionsArePresent)
         return null;
     var getUsersPerReactionType = function (type) {
-        return reactions
+        return latestReactions
             .map(function (reaction) {
             var _a, _b;
             if (reaction.type === type) {
@@ -38,49 +47,23 @@ var UnMemoizedSimpleReactionsList = function (props) {
         })
             .filter(Boolean);
     };
-    var getTotalReactionCount = function () {
-        return Object.values(reactionCounts).reduce(function (total, count) { return total + count; }, 0);
-    };
-    var getCurrentMessageReactionTypes = function () {
-        var reactionTypes = [];
-        reactions.forEach(function (_a) {
-            var type = _a.type;
-            if (reactionTypes.indexOf(type) === -1) {
-                reactionTypes.push(type);
-            }
-        });
-        return reactionTypes;
-    };
-    var getEmojiByReactionType = function (type) {
-        var reactionEmoji = reactionOptions.find(function (option) { return option.id === type; });
-        return reactionEmoji;
-    };
-    var getSupportedReactionMap = function () {
-        var reactionMap = {};
-        reactionOptions.forEach(function (_a) {
-            var id = _a.id;
-            return (reactionMap[id] = true);
-        });
-        return reactionMap;
-    };
-    var messageReactionTypes = getCurrentMessageReactionTypes();
-    var supportedReactionMap = getSupportedReactionMap();
-    var supportedReactionsArePresent = messageReactionTypes.some(function (type) { return supportedReactionMap[type]; });
-    if (!supportedReactionsArePresent)
-        return null;
-    return (React.createElement("ul", { className: 'str-chat__simple-reactions-list', "data-testid": 'simple-reaction-list', onMouseLeave: function () { return setTooltipReactionType(undefined); } },
-        messageReactionTypes.map(function (reactionType, i) {
-            var _a;
-            var emojiObject = getEmojiByReactionType(reactionType);
-            return emojiObject ? (React.createElement("li", { className: 'str-chat__simple-reactions-list-item', key: emojiObject.id + "-" + i, onClick: function (event) { return handleReaction(reactionType, event); }, onKeyPress: function (event) { return handleReaction(reactionType, event); } },
-                React.createElement("span", { onMouseEnter: function () { return setTooltipReactionType(reactionType); } },
-                    React.createElement(Suspense, { fallback: null },
-                        React.createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 13 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef)))),
-                    "\u00A0"),
-                tooltipReactionType === emojiObject.id && (React.createElement("div", { className: 'str-chat__simple-reactions-list-tooltip' },
-                    React.createElement("div", { className: 'arrow' }), (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 :
-                    _a.join(', '))))) : null;
-        }),
-        React.createElement("li", { className: 'str-chat__simple-reactions-list-item--last-number' }, getTotalReactionCount())));
+    return (React.createElement("div", { className: 'str-chat__message-reactions-container' },
+        React.createElement("ul", { className: 'str-chat__simple-reactions-list str-chat__message-reactions', "data-testid": 'simple-reaction-list', onMouseLeave: function () { return setTooltipReactionType(undefined); } },
+            latestReactionTypes.map(function (reactionType, i) {
+                var _a;
+                var emojiObject = getEmojiByReactionType(reactionType);
+                var isOwnReaction = iHaveReactedWithReaction(reactionType);
+                return emojiObject ? (React.createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
+                        'str-chat__message-reaction-own': isOwnReaction,
+                    }), key: "".concat(emojiObject.id, "-").concat(i), onClick: function (event) { return handleReaction(reactionType, event); }, onKeyUp: function (event) { return handleReaction(reactionType, event); } },
+                    React.createElement("span", { onMouseEnter: function () { return setTooltipReactionType(reactionType); } },
+                        React.createElement(Suspense, { fallback: null },
+                            React.createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 13 }, additionalEmojiProps))),
+                        "\u00A0"),
+                    tooltipReactionType === emojiObject.id && (React.createElement("div", { className: 'str-chat__simple-reactions-list-tooltip str-chat__tooltip' },
+                        React.createElement("div", { className: 'arrow' }), (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 :
+                        _a.join(', '))))) : null;
+            }),
+            React.createElement("li", { className: 'str-chat__simple-reactions-list-item--last-number' }, totalReactionCount))));
 };
 export var SimpleReactionsList = React.memo(UnMemoizedSimpleReactionsList);

package/dist/components/Reactions/hooks/useProcessReactions.d.ts

@@ -0,0 +1,21 @@
+import { ReactionEmoji } from '../../Channel/emojiData';
+import type { EmojiContextValue } from '../../../context/EmojiContext';
+import type { ReactionsListProps } from '../ReactionsList';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+declare type SharedReactionListProps = 'additionalEmojiProps' | 'own_reactions' | 'reaction_counts' | 'reactionOptions' | 'reactions';
+declare type UseProcessReactionsParams = Pick<ReactionsListProps, SharedReactionListProps> & Pick<EmojiContextValue, 'emojiConfig'>;
+export declare const useProcessReactions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: UseProcessReactionsParams) => {
+    additionalEmojiProps: import("../../../context").EmojiSetDef | Partial<import("emoji-mart").NimbleEmojiProps>;
+    emojiData: import("emoji-mart").Data;
+    getEmojiByReactionType: (type: string) => ReactionEmoji | undefined;
+    iHaveReactedWithReaction: (reactionType: string) => import("stream-chat").ReactionResponse<DefaultStreamChatGenerics> | undefined;
+    latestReactions: import("stream-chat").ReactionResponse<DefaultStreamChatGenerics>[];
+    latestReactionTypes: string[];
+    reactionCounts: {
+        [key: string]: number;
+    };
+    supportedReactionsArePresent: boolean;
+    totalReactionCount: number;
+};
+export {};
+//# sourceMappingURL=useProcessReactions.d.ts.map

package/dist/components/Reactions/hooks/useProcessReactions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProcessReactions.d.ts","sourceRoot":"","sources":["../../../../src/components/Reactions/hooks/useProcessReactions.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,aAAK,uBAAuB,GACxB,sBAAsB,GACtB,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,WAAW,CAAC;AAEhB,aAAK,yBAAyB,GAAG,IAAI,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,GAChF,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAEzC,eAAO,MAAM,mBAAmB,6FAGtB,yBAAyB;;;mCAyBxB,MAAM,KAAG,aAAa,GAAG,SAAS;6CAL1B,MAAM;;;;;;;;CA2DxB,CAAC"}

package/dist/components/Reactions/hooks/useProcessReactions.js

@@ -0,0 +1,51 @@
+import { useCallback, useMemo } from 'react';
+import { getStrippedEmojiData } from '../../Channel/emojiData';
+import { useMessageContext } from '../../../context';
+export var useProcessReactions = function (params) {
+    var _a = params.additionalEmojiProps, additionalEmojiProps = _a === void 0 ? {} : _a, emojiConfig = params.emojiConfig, propOwnReactions = params.own_reactions, propReactionCounts = params.reaction_counts, propReactionOptions = params.reactionOptions, propReactions = params.reactions;
+    var message = useMessageContext('ReactionsList').message;
+    var _b = emojiConfig || {}, defaultMinimalEmojis = _b.defaultMinimalEmojis, fullEmojiData = _b.emojiData, emojiSetDef = _b.emojiSetDef;
+    var latestReactions = propReactions || message.latest_reactions || [];
+    var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
+    var reactionCounts = propReactionCounts || message.reaction_counts || {};
+    var reactionOptions = propReactionOptions || defaultMinimalEmojis;
+    var reactionsAreCustom = !!(propReactionOptions === null || propReactionOptions === void 0 ? void 0 : propReactionOptions.length);
+    var iHaveReactedWithReaction = useCallback(function (reactionType) { return ownReactions.find(function (reaction) { return reaction.type === reactionType; }); }, [ownReactions]);
+    var getEmojiByReactionType = useCallback(function (type) {
+        return reactionOptions.find(function (option) { return option.id === type; });
+    }, [reactionOptions]);
+    var emojiData = useMemo(function () { return (reactionsAreCustom ? fullEmojiData : getStrippedEmojiData(fullEmojiData)); }, [fullEmojiData, reactionsAreCustom]);
+    var latestReactionTypes = useMemo(function () {
+        return latestReactions.reduce(function (reactionTypes, _a) {
+            var type = _a.type;
+            if (reactionTypes.indexOf(type) === -1) {
+                reactionTypes.push(type);
+            }
+            return reactionTypes;
+        }, []);
+    }, [latestReactions]);
+    var supportedReactionMap = useMemo(function () {
+        return reactionOptions.reduce(function (acc, _a) {
+            var id = _a.id;
+            acc[id] = true;
+            return acc;
+        }, {});
+    }, [reactionOptions]);
+    var supportedReactionsArePresent = useMemo(function () { return latestReactionTypes.some(function (type) { return supportedReactionMap[type]; }); }, [latestReactionTypes, supportedReactionMap]);
+    var totalReactionCount = useMemo(function () {
+        return supportedReactionsArePresent
+            ? Object.values(reactionCounts).reduce(function (total, count) { return total + count; }, 0)
+            : 0;
+    }, [reactionCounts, supportedReactionsArePresent]);
+    return {
+        additionalEmojiProps: reactionsAreCustom ? additionalEmojiProps : emojiSetDef,
+        emojiData: emojiData,
+        getEmojiByReactionType: getEmojiByReactionType,
+        iHaveReactedWithReaction: iHaveReactedWithReaction,
+        latestReactions: latestReactions,
+        latestReactionTypes: latestReactionTypes,
+        reactionCounts: reactionCounts,
+        supportedReactionsArePresent: supportedReactionsArePresent,
+        totalReactionCount: totalReactionCount,
+    };
+};

package/dist/components/Thread/Thread.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { MessageActionsArray, MessageProps, MessageUIComponentProps } from '../Message';
 import { MessageInputProps } from '../MessageInput';
 import { MessageListProps, VirtualizedMessageListProps } from '../MessageList';
-import { StreamMessage } from '../../context';
+import type { MessageProps, MessageUIComponentProps } from '../Message/types';
+import type { MessageActionsArray } from '../Message/utils';
 import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types';
 export declare type ThreadProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
     /** Additional props for `MessageInput` component: [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_input/#props) */
@@ -32,8 +32,4 @@ export declare type ThreadProps<StreamChatGenerics extends DefaultStreamChatGene
  * The Thread component renders a parent Message with a list of replies
  */
 export declare const Thread: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: ThreadProps<StreamChatGenerics, V>) => JSX.Element | null;
-export declare type ThreadHeaderProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    closeThread: (event: React.BaseSyntheticEvent) => void;
-    thread: StreamMessage<StreamChatGenerics>;
-};
 //# sourceMappingURL=Thread.d.ts.map

package/dist/components/Thread/Thread.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../src/components/Thread/Thread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE7F,OAAO,EAAgB,iBAAiB,EAAqB,MAAM,iBAAiB,CAAC;AACrF,OAAO,EAEL,gBAAgB,EAEhB,2BAA2B,EAC5B,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAEL,aAAa,EAMd,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAElF,oBAAY,WAAW,CACrB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,CAAC,SAAS,aAAa,GAAG,aAAa,IACrC;IACF,+JAA+J;IAC/J,2BAA2B,CAAC,EAAE,iBAAiB,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC;IACvE,oJAAoJ;IACpJ,0BAA0B,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IAClE,oKAAoK;IACpK,4BAA4B,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;IAChE,mKAAmK;IACnK,qCAAqC,CAAC,EAAE,2BAA2B,CAAC,kBAAkB,CAAC,CAAC;IACxF,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gKAAgK;IAChK,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,6FAA6F;IAC7F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gQAAgQ;IAChQ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mHAAmH;IACnH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC3E,mKAAmK;IACnK,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,mGAAmG;IACnG,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,8LAYlB,CAAC;AAEF,oBAAY,iBAAiB,CAC3B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACvD,MAAM,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CAC3C,CAAC"}
+{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../src/components/Thread/Thread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,OAAO,EAGL,iBAAiB,EAElB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAEL,gBAAgB,EAEhB,2BAA2B,EAC5B,MAAM,gBAAgB,CAAC;AAWxB,OAAO,KAAK,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAElF,oBAAY,WAAW,CACrB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,CAAC,SAAS,aAAa,GAAG,aAAa,IACrC;IACF,+JAA+J;IAC/J,2BAA2B,CAAC,EAAE,iBAAiB,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC;IACvE,oJAAoJ;IACpJ,0BAA0B,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IAClE,oKAAoK;IACpK,4BAA4B,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;IAChE,mKAAmK;IACnK,qCAAqC,CAAC,EAAE,2BAA2B,CAAC,kBAAkB,CAAC,CAAC;IACxF,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gKAAgK;IAChK,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,6FAA6F;IAC7F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gQAAgQ;IAChQ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mHAAmH;IACnH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC3E,mKAAmK;IACnK,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,mGAAmG;IACnG,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,8LAYlB,CAAC"}

package/dist/components/Thread/Thread.js

@@ -9,47 +9,13 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useEffect, useRef } from 'react';
-import { FixedHeightMessage, Message, MESSAGE_ACTIONS } from '../Message';
-import { MessageInput, MessageInputSmall } from '../MessageInput';
+import React, { useEffect } from 'react';
+import { MESSAGE_ACTIONS } from '../Message';
+import { MessageInput, MessageInputFlat, MessageInputSmall, } from '../MessageInput';
 import { MessageList, VirtualizedMessageList, } from '../MessageList';
-import { useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, useTranslationContext, } from '../../context';
+import { ThreadHeader as DefaultThreadHeader } from './ThreadHeader';
+import { ThreadHead as DefaultThreadHead } from '../Thread/ThreadHead';
+import { useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, } from '../../context';
 /**
  * The Thread component renders a parent Message with a list of replies
  */
@@ -58,65 +24,31 @@ export var Thread = function (props) {
     if (!thread || (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.replies) === false)
         return null;
     // The wrapper ensures a key variable is set and the component recreates on thread switch
-    return React.createElement(ThreadInner, __assign({}, props, { key: "thread-" + thread.id + "-" + (channel === null || channel === void 0 ? void 0 : channel.cid) }));
-};
-var DefaultThreadHeader = function (props) {
-    var closeThread = props.closeThread, thread = props.thread;
-    var t = useTranslationContext('Thread').t;
-    var getReplyCount = function () {
-        if (!thread.reply_count)
-            return '';
-        return t('replyCount', { count: thread.reply_count });
-    };
-    return (React.createElement("div", { className: 'str-chat__thread-header' },
-        React.createElement("div", { className: 'str-chat__thread-header-details' },
-            React.createElement("strong", null, t('Thread')),
-            React.createElement("small", null, getReplyCount())),
-        React.createElement("button", { "aria-label": 'Close thread', className: 'str-chat__square-button', "data-testid": 'close-button', onClick: function (event) { return closeThread(event); } },
-            React.createElement("svg", { height: '10', width: '10', xmlns: 'http://www.w3.org/2000/svg' },
-                React.createElement("path", { d: 'M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z', fillRule: 'evenodd' })))));
-};
-var DefaultThreadStart = function () {
-    var t = useTranslationContext('Thread').t;
-    return React.createElement("div", { className: 'str-chat__thread-start' }, t('Start of a new thread'));
+    return React.createElement(ThreadInner, __assign({}, props, { key: "thread-".concat(thread.id, "-").concat(channel === null || channel === void 0 ? void 0 : channel.cid) }));
 };
 var ThreadInner = function (props) {
-    var additionalMessageInputProps = props.additionalMessageInputProps, additionalMessageListProps = props.additionalMessageListProps, additionalParentMessageProps = props.additionalParentMessageProps, additionalVirtualizedMessageListProps = props.additionalVirtualizedMessageListProps, _a = props.autoFocus, autoFocus = _a === void 0 ? true : _a, _b = props.enableDateSeparator, enableDateSeparator = _b === void 0 ? false : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? false : _c, PropInput = props.Input, PropMessage = props.Message, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, virtualized = props.virtualized;
-    var _e = useChannelStateContext('Thread'), thread = _e.thread, threadHasMore = _e.threadHasMore, threadLoadingMore = _e.threadLoadingMore, threadMessages = _e.threadMessages;
-    var _f = useChannelActionContext('Thread'), closeThread = _f.closeThread, loadMoreThread = _f.loadMoreThread, sendMessage = _f.sendMessage;
-    var customClasses = useChatContext('Thread').customClasses;
-    var _g = useComponentContext('Thread'), ContextInput = _g.ThreadInput, ContextMessage = _g.Message, _h = _g.ThreadHeader, ThreadHeader = _h === void 0 ? DefaultThreadHeader : _h, _j = _g.ThreadStart, ThreadStart = _j === void 0 ? DefaultThreadStart : _j, _k = _g.VirtualMessage, VirtualMessage = _k === void 0 ? FixedHeightMessage : _k;
-    var messageList = useRef(null);
-    var ThreadInput = PropInput || (additionalMessageInputProps === null || additionalMessageInputProps === void 0 ? void 0 : additionalMessageInputProps.Input) || ContextInput || MessageInputSmall;
+    var _a, _b;
+    var additionalMessageInputProps = props.additionalMessageInputProps, additionalMessageListProps = props.additionalMessageListProps, additionalParentMessageProps = props.additionalParentMessageProps, additionalVirtualizedMessageListProps = props.additionalVirtualizedMessageListProps, _c = props.autoFocus, autoFocus = _c === void 0 ? true : _c, _d = props.enableDateSeparator, enableDateSeparator = _d === void 0 ? false : _d, _e = props.fullWidth, fullWidth = _e === void 0 ? false : _e, PropInput = props.Input, PropMessage = props.Message, _f = props.messageActions, messageActions = _f === void 0 ? Object.keys(MESSAGE_ACTIONS) : _f, virtualized = props.virtualized;
+    var _g = useChannelStateContext('Thread'), thread = _g.thread, threadHasMore = _g.threadHasMore, threadLoadingMore = _g.threadLoadingMore, threadMessages = _g.threadMessages, threadSuppressAutoscroll = _g.threadSuppressAutoscroll;
+    var _h = useChannelActionContext('Thread'), closeThread = _h.closeThread, loadMoreThread = _h.loadMoreThread;
+    var _j = useChatContext('Thread'), customClasses = _j.customClasses, themeVersion = _j.themeVersion;
+    var _k = useComponentContext('Thread'), ContextInput = _k.ThreadInput, ContextMessage = _k.Message, _l = _k.ThreadHead, ThreadHead = _l === void 0 ? DefaultThreadHead : _l, _m = _k.ThreadHeader, ThreadHeader = _m === void 0 ? DefaultThreadHeader : _m, VirtualMessage = _k.VirtualMessage;
+    var ThreadInput = (_b = (_a = PropInput !== null && PropInput !== void 0 ? PropInput : additionalMessageInputProps === null || additionalMessageInputProps === void 0 ? void 0 : additionalMessageInputProps.Input) !== null && _a !== void 0 ? _a : ContextInput) !== null && _b !== void 0 ? _b : (themeVersion === '2' ? MessageInputFlat : MessageInputSmall);
     var ThreadMessage = PropMessage || (additionalMessageListProps === null || additionalMessageListProps === void 0 ? void 0 : additionalMessageListProps.Message);
-    var FallbackMessage = virtualized ? VirtualMessage : ContextMessage;
+    var FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;
+    var MessageUIComponent = ThreadMessage || FallbackMessage;
     var ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
     useEffect(function () {
         if ((thread === null || thread === void 0 ? void 0 : thread.id) && (thread === null || thread === void 0 ? void 0 : thread.reply_count)) {
             loadMoreThread();
         }
     }, []);
-    var threadSubmitHandler = function (message, _, customMessageData) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, sendMessage(message, customMessageData)];
-                case 1:
-                    _a.sent();
-                    if (messageList.current) {
-                        messageList.current.scrollTop = messageList.current.scrollHeight;
-                    }
-                    return [2 /*return*/];
-            }
-        });
-    }); };
     if (!thread)
         return null;
-    var threadClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.thread) || 'str-chat__thread';
-    return (React.createElement("div", { className: threadClass + " " + (fullWidth ? 'str-chat__thread--full' : '') },
+    var threadClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.thread) || 'str-chat__thread-container str-chat__thread';
+    var head = (React.createElement(ThreadHead, __assign({ key: thread.id, message: thread, Message: MessageUIComponent }, additionalParentMessageProps)));
+    return (React.createElement("div", { className: "".concat(threadClass, " ").concat(fullWidth ? 'str-chat__thread--full' : '') },
         React.createElement(ThreadHeader, { closeThread: closeThread, thread: thread }),
-        React.createElement("div", { className: 'str-chat__thread-list', ref: messageList },
-            React.createElement(Message, __assign({ initialMessage: true, message: thread, Message: ThreadMessage || FallbackMessage, threadList: true }, additionalParentMessageProps)),
-            React.createElement(ThreadStart, null),
-            React.createElement(ThreadMessageList, __assign({ disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: ThreadMessage || FallbackMessage, messageActions: messageActions, messages: threadMessages || [], threadList: true }, (virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps)))),
-        React.createElement(MessageInput, __assign({ focus: autoFocus, Input: ThreadInput, overrideSubmitHandler: threadSubmitHandler, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
+        React.createElement(ThreadMessageList, __assign({ disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, head: head, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: MessageUIComponent, messageActions: messageActions, messages: threadMessages || [], suppressAutoscroll: threadSuppressAutoscroll, threadList: true }, (virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps))),
+        React.createElement(MessageInput, __assign({ focus: autoFocus, Input: ThreadInput, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
 };

package/dist/components/Thread/ThreadHead.d.ts

@@ -0,0 +1,4 @@
+import { MessageProps } from '../Message';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+export declare const ThreadHead: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageProps<StreamChatGenerics, import("../../types/types").CustomTrigger>) => JSX.Element;
+//# sourceMappingURL=ThreadHead.d.ts.map

package/dist/components/Thread/ThreadHead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadHead.d.ts","sourceRoot":"","sources":["../../../src/components/Thread/ThreadHead.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;AAKnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,UAAU,uLActB,CAAC"}

package/dist/components/Thread/ThreadHead.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { Message } from '../Message';
+import { ThreadStart as DefaultThreadStart } from './ThreadStart';
+import { useComponentContext } from '../../context';
+export var ThreadHead = function (props) {
+    var _a = useComponentContext('ThreadHead').ThreadStart, ThreadStart = _a === void 0 ? DefaultThreadStart : _a;
+    return (React.createElement("div", { className: 'str-chat__parent-message-li' },
+        React.createElement(Message, __assign({ initialMessage: true, threadList: true }, props)),
+        React.createElement(ThreadStart, null)));
+};

package/dist/components/Thread/ThreadHeader.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChannelPreviewInfoParams } from '../ChannelPreview/hooks/useChannelPreviewInfo';
+import { StreamMessage } from '../../context/ChannelStateContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+export declare type ThreadHeaderProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    /** Callback for closing the thread */
+    closeThread: (event: React.BaseSyntheticEvent) => void;
+    /** The thread parent message */
+    thread: StreamMessage<StreamChatGenerics>;
+};
+export declare const ThreadHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ThreadHeaderProps<StreamChatGenerics> & Pick<ChannelPreviewInfoParams<StreamChatGenerics>, "overrideImage" | "overrideTitle">) => JSX.Element;
+//# sourceMappingURL=ThreadHeader.d.ts.map

package/dist/components/Thread/ThreadHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Thread/ThreadHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,wBAAwB,EAEzB,MAAM,+CAA+C,CAAC;AAGvD,OAAO,EAAE,aAAa,EAA0B,MAAM,mCAAmC,CAAC;AAG1F,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,iBAAiB,CAC3B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,sCAAsC;IACtC,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACvD,gCAAgC;IAChC,MAAM,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,YAAY,yOAgCxB,CAAC"}

package/dist/components/Thread/ThreadHeader.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useChannelPreviewInfo, } from '../ChannelPreview/hooks/useChannelPreviewInfo';
+import { CloseIcon } from './icons';
+import { useChannelStateContext } from '../../context/ChannelStateContext';
+import { useTranslationContext } from '../../context/TranslationContext';
+export var ThreadHeader = function (props) {
+    var closeThread = props.closeThread, overrideImage = props.overrideImage, overrideTitle = props.overrideTitle;
+    var t = useTranslationContext('ThreadHeader').t;
+    var channel = useChannelStateContext('').channel;
+    var displayTitle = useChannelPreviewInfo({
+        channel: channel,
+        overrideImage: overrideImage,
+        overrideTitle: overrideTitle,
+    }).displayTitle;
+    return (React.createElement("div", { className: 'str-chat__thread-header' },
+        React.createElement("div", { className: 'str-chat__thread-header-details' },
+            React.createElement("div", { className: 'str-chat__thread-header-title' }, t('Thread')),
+            React.createElement("div", { className: 'str-chat__thread-header-subtitle' }, displayTitle)),
+        React.createElement("button", { "aria-label": 'Close thread', className: 'str-chat__square-button str-chat__close-thread-button', "data-testid": 'close-button', onClick: function (event) { return closeThread(event); } },
+            React.createElement(CloseIcon, null))));
+};

package/dist/components/Thread/ThreadStart.d.ts

@@ -0,0 +1,2 @@
+export declare const ThreadStart: () => JSX.Element | null;
+//# sourceMappingURL=ThreadStart.d.ts.map

package/dist/components/Thread/ThreadStart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadStart.d.ts","sourceRoot":"","sources":["../../../src/components/Thread/ThreadStart.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,0BAWvB,CAAC"}

package/dist/components/Thread/ThreadStart.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useChannelStateContext } from '../../context/ChannelStateContext';
+import { useTranslationContext } from '../../context/TranslationContext';
+export var ThreadStart = function () {
+    var thread = useChannelStateContext('ThreadStart').thread;
+    var t = useTranslationContext('ThreadStart').t;
+    if (!(thread === null || thread === void 0 ? void 0 : thread.reply_count))
+        return null;
+    return (React.createElement("div", { className: 'str-chat__thread-start' }, t('replyCount', { count: thread.reply_count })));
+};

package/dist/components/Thread/icons.d.ts

@@ -0,0 +1,4 @@
+export declare const CloseIcon: ({ title }: {
+    title?: string | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/Thread/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Thread/icons.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;iBAiBrB,CAAC"}