stream-chat-react 11.21.0 → 12.0.0-rc.1

package/dist/components/ChannelList/hooks/useUserPresenceChangedListener.js

@@ -1,25 +1,23 @@
-import { __spreadArray } from "tslib";
 import { useEffect } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
-export var useUserPresenceChangedListener = function (setChannels) {
-    var client = useChatContext('useUserPresenceChangedListener').client;
-    useEffect(function () {
-        var handleEvent = function (event) {
-            setChannels(function (channels) {
-                var newChannels = channels.map(function (channel) {
-                    var _a;
-                    if (!((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) || !channel.state.members[event.user.id]) {
+export const useUserPresenceChangedListener = (setChannels) => {
+    const { client } = useChatContext('useUserPresenceChangedListener');
+    useEffect(() => {
+        const handleEvent = (event) => {
+            setChannels((channels) => {
+                const newChannels = channels.map((channel) => {
+                    if (!event.user?.id || !channel.state.members[event.user.id]) {
                         return channel;
                     }
-                    var newChannel = channel; // dumb workaround for linter
+                    const newChannel = channel; // dumb workaround for linter
                     newChannel.state.members[event.user.id].user = event.user;
                     return newChannel;
                 });
-                return __spreadArray([], newChannels, true);
+                return [...newChannels];
             });
         };
         client.on('user.presence.changed', handleEvent);
-        return function () {
+        return () => {
             client.off('user.presence.changed', handleEvent);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/components/ChannelList/index.d.ts

@@ -2,4 +2,3 @@ export * from './ChannelList';
 export * from './ChannelListMessenger';
 export * from './hooks';
 export * from './utils';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/ChannelList/utils.d.ts

@@ -8,4 +8,3 @@ type MoveChannelUpParams<StreamChatGenerics extends DefaultStreamChatGenerics =
 };
 export declare const moveChannelUp: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ activeChannel, channels, cid, }: MoveChannelUpParams<StreamChatGenerics>) => Channel<StreamChatGenerics>[];
 export {};
-//# sourceMappingURL=utils.d.ts.map

package/dist/components/ChannelList/utils.js

@@ -1,13 +1,11 @@
-import { __spreadArray } from "tslib";
 import uniqBy from 'lodash.uniqby';
-export var MAX_QUERY_CHANNELS_LIMIT = 30;
-export var moveChannelUp = function (_a) {
-    var activeChannel = _a.activeChannel, channels = _a.channels, cid = _a.cid;
+export const MAX_QUERY_CHANNELS_LIMIT = 30;
+export const moveChannelUp = ({ activeChannel, channels, cid, }) => {
     // get index of channel to move up
-    var channelIndex = channels.findIndex(function (channel) { return channel.cid === cid; });
+    const channelIndex = channels.findIndex((channel) => channel.cid === cid);
     if (!activeChannel && channelIndex <= 0)
         return channels;
     // get channel to move up
-    var channel = activeChannel || channels[channelIndex];
-    return uniqBy(__spreadArray([channel], channels, true), 'cid');
+    const channel = activeChannel || channels[channelIndex];
+    return uniqBy([channel, ...channels], 'cid');
 };

package/dist/components/ChannelPreview/ChannelPreview.d.ts

@@ -46,4 +46,3 @@ export type ChannelPreviewProps<StreamChatGenerics extends DefaultStreamChatGene
     };
 };
 export declare const ChannelPreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelPreviewProps<StreamChatGenerics>) => React.JSX.Element | null;
-//# sourceMappingURL=ChannelPreview.d.ts.map

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import throttle from 'lodash.throttle';
 import React, { useEffect, useMemo, useState } from 'react';
 import { ChannelPreviewMessenger } from './ChannelPreviewMessenger';
@@ -8,57 +7,54 @@ import { getLatestMessagePreview } from './utils';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
-export var ChannelPreview = function (props) {
-    var channel = props.channel, _a = props.Preview, Preview = _a === void 0 ? ChannelPreviewMessenger : _a, channelUpdateCount = props.channelUpdateCount;
-    var _b = useChatContext('ChannelPreview'), activeChannel = _b.channel, client = _b.client, setActiveChannel = _b.setActiveChannel;
-    var _c = useTranslationContext('ChannelPreview'), t = _c.t, userLanguage = _c.userLanguage;
-    var _d = useChannelPreviewInfo({ channel: channel }), displayImage = _d.displayImage, displayTitle = _d.displayTitle;
-    var _e = useState(channel.state.messages[channel.state.messages.length - 1]), lastMessage = _e[0], setLastMessage = _e[1];
-    var _f = useState(0), unread = _f[0], setUnread = _f[1];
-    var messageDeliveryStatus = useMessageDeliveryStatus({
-        channel: channel,
-        lastMessage: lastMessage,
-    }).messageDeliveryStatus;
-    var isActive = (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid) === channel.cid;
-    var muted = useIsChannelMuted(channel).muted;
-    useEffect(function () {
-        var handleEvent = function (event) {
+export const ChannelPreview = (props) => {
+    const { channel, Preview = ChannelPreviewMessenger, channelUpdateCount } = props;
+    const { channel: activeChannel, client, setActiveChannel } = useChatContext('ChannelPreview');
+    const { t, userLanguage } = useTranslationContext('ChannelPreview');
+    const { displayImage, displayTitle } = useChannelPreviewInfo({ channel });
+    const [lastMessage, setLastMessage] = useState(channel.state.messages[channel.state.messages.length - 1]);
+    const [unread, setUnread] = useState(0);
+    const { messageDeliveryStatus } = useMessageDeliveryStatus({
+        channel,
+        lastMessage,
+    });
+    const isActive = activeChannel?.cid === channel.cid;
+    const { muted } = useIsChannelMuted(channel);
+    useEffect(() => {
+        const handleEvent = (event) => {
             if (!event.cid)
                 return setUnread(0);
             if (channel.cid === event.cid)
                 setUnread(0);
         };
         client.on('notification.mark_read', handleEvent);
-        return function () { return client.off('notification.mark_read', handleEvent); };
+        return () => client.off('notification.mark_read', handleEvent);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    useEffect(function () {
-        var handleEvent = function (event) {
-            var _a, _b;
+    useEffect(() => {
+        const handleEvent = (event) => {
             if (channel.cid !== event.cid)
                 return;
-            if (((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) !== ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id))
+            if (event.user?.id !== client.user?.id)
                 return;
             setUnread(channel.countUnread());
         };
         channel.on('notification.mark_unread', handleEvent);
-        return function () {
+        return () => {
             channel.off('notification.mark_unread', handleEvent);
         };
     }, [channel, client]);
-    var refreshUnreadCount = useMemo(function () {
-        return throttle(function () {
-            if (muted) {
-                setUnread(0);
-            }
-            else {
-                setUnread(channel.countUnread());
-            }
-        }, 400);
-    }, [channel, muted]);
-    useEffect(function () {
+    const refreshUnreadCount = useMemo(() => throttle(() => {
+        if (muted) {
+            setUnread(0);
+        }
+        else {
+            setUnread(channel.countUnread());
+        }
+    }, 400), [channel, muted]);
+    useEffect(() => {
         refreshUnreadCount();
-        var handleEvent = function (event) {
+        const handleEvent = (event) => {
             if (event.message)
                 setLastMessage(event.message);
             refreshUnreadCount();
@@ -66,7 +62,7 @@ export var ChannelPreview = function (props) {
         channel.on('message.new', handleEvent);
         channel.on('message.updated', handleEvent);
         channel.on('message.deleted', handleEvent);
-        return function () {
+        return () => {
             channel.off('message.new', handleEvent);
             channel.off('message.updated', handleEvent);
             channel.off('message.deleted', handleEvent);
@@ -75,6 +71,6 @@ export var ChannelPreview = function (props) {
     }, [refreshUnreadCount, channelUpdateCount]);
     if (!Preview)
         return null;
-    var latestMessage = getLatestMessagePreview(channel, t, userLanguage);
-    return (React.createElement(Preview, __assign({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread })));
+    const latestMessage = getLatestMessagePreview(channel, t, userLanguage);
+    return (React.createElement(Preview, { ...props, active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread }));
 };

package/dist/components/ChannelPreview/ChannelPreviewMessenger.d.ts

@@ -6,4 +6,3 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
  * Its best suited for messenger type chat.
  */
 export declare const ChannelPreviewMessenger: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelPreviewUIComponentProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=ChannelPreviewMessenger.d.ts.map

package/dist/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -1,26 +1,25 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { Avatar as DefaultAvatar } from '../Avatar';
-var UnMemoizedChannelPreviewMessenger = function (props) {
-    var _a, _b;
-    var active = props.active, _c = props.Avatar, Avatar = _c === void 0 ? DefaultAvatar : _c, channel = props.channel, _d = props.className, customClassName = _d === void 0 ? '' : _d, displayImage = props.displayImage, displayTitle = props.displayTitle, latestMessage = props.latestMessage, customOnSelectChannel = props.onSelect, setActiveChannel = props.setActiveChannel, unread = props.unread, watchers = props.watchers;
-    var channelPreviewButton = useRef(null);
-    var avatarName = displayTitle || ((_b = (_a = channel.state.messages[channel.state.messages.length - 1]) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id);
-    var onSelectChannel = function (e) {
+const UnMemoizedChannelPreviewMessenger = (props) => {
+    const { active, Avatar = DefaultAvatar, channel, className: customClassName = '', displayImage, displayTitle, latestMessage, onSelect: customOnSelectChannel, setActiveChannel, unread, watchers, } = props;
+    const channelPreviewButton = useRef(null);
+    const avatarName = displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;
+    const onSelectChannel = (e) => {
         if (customOnSelectChannel) {
             customOnSelectChannel(e);
         }
         else if (setActiveChannel) {
             setActiveChannel(channel, watchers);
         }
-        if (channelPreviewButton === null || channelPreviewButton === void 0 ? void 0 : channelPreviewButton.current) {
+        if (channelPreviewButton?.current) {
             channelPreviewButton.current.blur();
         }
     };
-    return (React.createElement("button", { "aria-label": "Select Channel: ".concat(displayTitle || ''), "aria-selected": active, className: clsx("str-chat__channel-preview-messenger str-chat__channel-preview", active && 'str-chat__channel-preview-messenger--active', unread && unread >= 1 && 'str-chat__channel-preview-messenger--unread', customClassName), "data-testid": 'channel-preview-button', onClick: onSelectChannel, ref: channelPreviewButton, role: 'option' },
+    return (React.createElement("button", { "aria-label": `Select Channel: ${displayTitle || ''}`, "aria-selected": active, className: clsx(`str-chat__channel-preview-messenger str-chat__channel-preview`, active && 'str-chat__channel-preview-messenger--active', unread && unread >= 1 && 'str-chat__channel-preview-messenger--unread', customClassName), "data-testid": 'channel-preview-button', onClick: onSelectChannel, ref: channelPreviewButton, role: 'option' },
         React.createElement("div", { className: 'str-chat__channel-preview-messenger--left' },
-            React.createElement(Avatar, { image: displayImage, name: avatarName, size: 40 })),
-        React.createElement("div", { className: 'str-chat__channel-preview-messenger--right str-chat__channel-preview-end' },
+            React.createElement(Avatar, { className: 'str-chat__avatar--channel-preview', image: displayImage, name: avatarName })),
+        React.createElement("div", { className: 'str-chat__channel-preview-end' },
             React.createElement("div", { className: 'str-chat__channel-preview-end-first-row' },
                 React.createElement("div", { className: 'str-chat__channel-preview-messenger--name' },
                     React.createElement("span", null, displayTitle)),
@@ -31,4 +30,4 @@ var UnMemoizedChannelPreviewMessenger = function (props) {
  * Used as preview component for channel item in [ChannelList](#channellist) component.
  * Its best suited for messenger type chat.
  */
-export var ChannelPreviewMessenger = React.memo(UnMemoizedChannelPreviewMessenger);
+export const ChannelPreviewMessenger = React.memo(UnMemoizedChannelPreviewMessenger);

package/dist/components/ChannelPreview/hooks/index.d.ts

@@ -1,3 +1,2 @@
 export { useChannelPreviewInfo } from './useChannelPreviewInfo';
 export { MessageDeliveryStatus } from './useMessageDeliveryStatus';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/ChannelPreview/hooks/useChannelPreviewInfo.d.ts

@@ -11,4 +11,3 @@ export declare const useChannelPreviewInfo: <StreamChatGenerics extends DefaultS
     displayImage: string | undefined;
     displayTitle: string | undefined;
 };
-//# sourceMappingURL=useChannelPreviewInfo.d.ts.map

package/dist/components/ChannelPreview/hooks/useChannelPreviewInfo.js

@@ -1,24 +1,24 @@
 import { useEffect, useState } from 'react';
 import { getDisplayImage, getDisplayTitle } from '../utils';
 import { useChatContext } from '../../../context';
-export var useChannelPreviewInfo = function (props) {
-    var channel = props.channel, overrideImage = props.overrideImage, overrideTitle = props.overrideTitle;
-    var client = useChatContext('ChannelPreview').client;
-    var _a = useState(getDisplayTitle(channel, client.user)), displayTitle = _a[0], setDisplayTitle = _a[1];
-    var _b = useState(getDisplayImage(channel, client.user)), displayImage = _b[0], setDisplayImage = _b[1];
-    useEffect(function () {
-        var handleEvent = function () {
-            setDisplayTitle(function (displayTitle) {
-                var newDisplayTitle = getDisplayTitle(channel, client.user);
+export const useChannelPreviewInfo = (props) => {
+    const { channel, overrideImage, overrideTitle } = props;
+    const { client } = useChatContext('ChannelPreview');
+    const [displayTitle, setDisplayTitle] = useState(getDisplayTitle(channel, client.user));
+    const [displayImage, setDisplayImage] = useState(getDisplayImage(channel, client.user));
+    useEffect(() => {
+        const handleEvent = () => {
+            setDisplayTitle((displayTitle) => {
+                const newDisplayTitle = getDisplayTitle(channel, client.user);
                 return displayTitle !== newDisplayTitle ? newDisplayTitle : displayTitle;
             });
-            setDisplayImage(function (displayImage) {
-                var newDisplayImage = getDisplayImage(channel, client.user);
+            setDisplayImage((displayImage) => {
+                const newDisplayImage = getDisplayImage(channel, client.user);
                 return displayImage !== newDisplayImage ? newDisplayImage : displayImage;
             });
         };
         client.on('user.updated', handleEvent);
-        return function () {
+        return () => {
             client.off('user.updated', handleEvent);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/components/ChannelPreview/hooks/useIsChannelMuted.d.ts

@@ -5,4 +5,3 @@ export declare const useIsChannelMuted: <StreamChatGenerics extends DefaultStrea
     expiresAt: Date | null;
     muted: boolean;
 };
-//# sourceMappingURL=useIsChannelMuted.d.ts.map

package/dist/components/ChannelPreview/hooks/useIsChannelMuted.js

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
-export var useIsChannelMuted = function (channel) {
-    var client = useChatContext('useIsChannelMuted').client;
-    var _a = useState(channel.muteStatus()), muted = _a[0], setMuted = _a[1];
-    useEffect(function () {
-        var handleEvent = function () { return setMuted(channel.muteStatus()); };
+export const useIsChannelMuted = (channel) => {
+    const { client } = useChatContext('useIsChannelMuted');
+    const [muted, setMuted] = useState(channel.muteStatus());
+    useEffect(() => {
+        const handleEvent = () => setMuted(channel.muteStatus());
         client.on('notification.channel_mutes_updated', handleEvent);
-        return function () { return client.off('notification.channel_mutes_updated', handleEvent); };
+        return () => client.off('notification.channel_mutes_updated', handleEvent);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [muted]);
     return muted;

package/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.d.ts

@@ -14,4 +14,3 @@ export declare const useMessageDeliveryStatus: <StreamChatGenerics extends Defau
     messageDeliveryStatus: MessageDeliveryStatus | undefined;
 };
 export {};
-//# sourceMappingURL=useMessageDeliveryStatus.d.ts.map

package/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.js

@@ -5,29 +5,27 @@ export var MessageDeliveryStatus;
     MessageDeliveryStatus["DELIVERED"] = "delivered";
     MessageDeliveryStatus["READ"] = "read";
 })(MessageDeliveryStatus || (MessageDeliveryStatus = {}));
-export var useMessageDeliveryStatus = function (_a) {
-    var channel = _a.channel, lastMessage = _a.lastMessage;
-    var client = useChatContext().client;
-    var _b = useState(), messageDeliveryStatus = _b[0], setMessageDeliveryStatus = _b[1];
-    var isOwnMessage = useCallback(function (message) { var _a; return client.user && ((_a = message === null || message === void 0 ? void 0 : message.user) === null || _a === void 0 ? void 0 : _a.id) === client.user.id; }, [client]);
-    useEffect(function () {
-        var lastMessageIsOwn = isOwnMessage(lastMessage);
-        if (!(lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.created_at) || !lastMessageIsOwn)
+export const useMessageDeliveryStatus = ({ channel, lastMessage, }) => {
+    const { client } = useChatContext();
+    const [messageDeliveryStatus, setMessageDeliveryStatus] = useState();
+    const isOwnMessage = useCallback((message) => client.user && message?.user?.id === client.user.id, [client]);
+    useEffect(() => {
+        const lastMessageIsOwn = isOwnMessage(lastMessage);
+        if (!lastMessage?.created_at || !lastMessageIsOwn)
             return;
-        var lastMessageCreatedAtDate = typeof lastMessage.created_at === 'string'
+        const lastMessageCreatedAtDate = typeof lastMessage.created_at === 'string'
             ? new Date(lastMessage.created_at)
             : lastMessage.created_at;
-        var channelReadByOthersAfterLastMessageUpdate = Object.values(channel.state.read).some(function (_a) {
-            var channelLastMarkedReadDate = _a.last_read, user = _a.user;
-            var ignoreOwnReadStatus = client.user && user.id !== client.user.id;
+        const channelReadByOthersAfterLastMessageUpdate = Object.values(channel.state.read).some(({ last_read: channelLastMarkedReadDate, user }) => {
+            const ignoreOwnReadStatus = client.user && user.id !== client.user.id;
             return ignoreOwnReadStatus && lastMessageCreatedAtDate < channelLastMarkedReadDate;
         });
         setMessageDeliveryStatus(channelReadByOthersAfterLastMessageUpdate
             ? MessageDeliveryStatus.READ
             : MessageDeliveryStatus.DELIVERED);
     }, [channel.state.read, client, isOwnMessage, lastMessage]);
-    useEffect(function () {
-        var handleMessageNew = function (event) {
+    useEffect(() => {
+        const handleMessageNew = (event) => {
             // the last message is not mine, so do not show the delivery status
             if (!isOwnMessage(event.message)) {
                 return setMessageDeliveryStatus(undefined);
@@ -35,24 +33,23 @@ export var useMessageDeliveryStatus = function (_a) {
             return setMessageDeliveryStatus(MessageDeliveryStatus.DELIVERED);
         };
         channel.on('message.new', handleMessageNew);
-        return function () {
+        return () => {
             channel.off('message.new', handleMessageNew);
         };
     }, [channel, client, isOwnMessage]);
-    useEffect(function () {
+    useEffect(() => {
         if (!isOwnMessage(lastMessage))
             return;
-        var handleMarkRead = function (event) {
-            var _a, _b;
-            if (((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) !== ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id))
+        const handleMarkRead = (event) => {
+            if (event.user?.id !== client.user?.id)
                 setMessageDeliveryStatus(MessageDeliveryStatus.READ);
         };
         channel.on('message.read', handleMarkRead);
-        return function () {
+        return () => {
             channel.off('message.read', handleMarkRead);
         };
     }, [channel, client, lastMessage, isOwnMessage]);
     return {
-        messageDeliveryStatus: messageDeliveryStatus,
+        messageDeliveryStatus,
     };
 };

package/dist/components/ChannelPreview/index.d.ts

@@ -2,4 +2,3 @@ export * from './ChannelPreview';
 export * from './ChannelPreviewMessenger';
 export * from './hooks';
 export * from './utils';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/ChannelPreview/utils.d.ts

@@ -4,6 +4,5 @@ import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare const renderPreviewText: (text: string) => React.JSX.Element;
 export declare const getLatestMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage?: TranslationContextValue['userLanguage']) => string | JSX.Element;
-export declare const getDisplayTitle: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, currentUser?: UserResponse<StreamChatGenerics> | undefined) => string | undefined;
-export declare const getDisplayImage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, currentUser?: UserResponse<StreamChatGenerics> | undefined) => string | undefined;
-//# sourceMappingURL=utils.d.ts.map
+export declare const getDisplayTitle: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, currentUser?: UserResponse<StreamChatGenerics>) => string | undefined;
+export declare const getDisplayImage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, currentUser?: UserResponse<StreamChatGenerics>) => string | undefined;

package/dist/components/ChannelPreview/utils.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-export var renderPreviewText = function (text) { return React.createElement(ReactMarkdown, { skipHtml: true }, text); };
-export var getLatestMessagePreview = function (channel, t, userLanguage) {
-    var _a, _b;
-    if (userLanguage === void 0) { userLanguage = 'en'; }
-    var latestMessage = channel.state.messages[channel.state.messages.length - 1];
-    var previewTextToRender = ((_a = latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) ||
-        (latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.text);
+export const renderPreviewText = (text) => React.createElement(ReactMarkdown, { skipHtml: true }, text);
+export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
+    const latestMessage = channel.state.messages[channel.state.messages.length - 1];
+    const previewTextToRender = latestMessage?.i18n?.[`${userLanguage}_text`] ||
+        latestMessage?.text;
     if (!latestMessage) {
         return t('Nothing yet...');
     }
@@ -14,36 +12,34 @@ export var getLatestMessagePreview = function (channel, t, userLanguage) {
         return t('Message deleted');
     }
     if (previewTextToRender) {
-        var renderedText = renderPreviewText(previewTextToRender);
+        const renderedText = renderPreviewText(previewTextToRender);
         return renderedText;
     }
     if (latestMessage.command) {
-        return "/".concat(latestMessage.command);
+        return `/${latestMessage.command}`;
     }
-    if ((_b = latestMessage.attachments) === null || _b === void 0 ? void 0 : _b.length) {
+    if (latestMessage.attachments?.length) {
         return t('🏙 Attachment...');
     }
     return t('Empty message...');
 };
-export var getDisplayTitle = function (channel, currentUser) {
-    var _a, _b;
-    var title = (_a = channel.data) === null || _a === void 0 ? void 0 : _a.name;
-    var members = Object.values(channel.state.members);
+export const getDisplayTitle = (channel, currentUser) => {
+    let title = channel.data?.name;
+    const members = Object.values(channel.state.members);
     if (!title && members.length === 2) {
-        var otherMember = members.find(function (member) { var _a; return ((_a = member.user) === null || _a === void 0 ? void 0 : _a.id) !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); });
-        if ((_b = otherMember === null || otherMember === void 0 ? void 0 : otherMember.user) === null || _b === void 0 ? void 0 : _b.name) {
+        const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
+        if (otherMember?.user?.name) {
             title = otherMember.user.name;
         }
     }
     return title;
 };
-export var getDisplayImage = function (channel, currentUser) {
-    var _a, _b;
-    var image = (_a = channel.data) === null || _a === void 0 ? void 0 : _a.image;
-    var members = Object.values(channel.state.members);
+export const getDisplayImage = (channel, currentUser) => {
+    let image = channel.data?.image;
+    const members = Object.values(channel.state.members);
     if (!image && members.length === 2) {
-        var otherMember = members.find(function (member) { var _a; return ((_a = member.user) === null || _a === void 0 ? void 0 : _a.id) !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id); });
-        if ((_b = otherMember === null || otherMember === void 0 ? void 0 : otherMember.user) === null || _b === void 0 ? void 0 : _b.image) {
+        const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
+        if (otherMember?.user?.image) {
             image = otherMember.user.image;
         }
     }

package/dist/components/ChannelSearch/ChannelSearch.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ChannelSearchControllerParams } from './hooks/useChannelSearch';
+import type { AdditionalSearchBarProps, SearchBarProps } from './SearchBar';
 import { AdditionalSearchInputProps, SearchInputProps } from './SearchInput';
 import { AdditionalSearchResultsProps } from './SearchResults';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import type { AdditionalSearchBarProps, SearchBarProps } from './SearchBar';
 export type AdditionalChannelSearchProps = {
     /** Custom UI component to display the search bar with text input */
     SearchBar?: React.ComponentType<SearchBarProps>;
@@ -17,4 +17,3 @@ export type ChannelSearchProps<StreamChatGenerics extends DefaultStreamChatGener
  * on its own or added to the ChannelList component by setting the `showChannelSearch` prop to true.
  */
 export declare const ChannelSearch: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelSearchProps<StreamChatGenerics>) => React.JSX.Element;
-//# sourceMappingURL=ChannelSearch.d.ts.map

package/dist/components/ChannelSearch/ChannelSearch.js

@@ -1,20 +1,16 @@
-import { __rest } from "tslib";
 import clsx from 'clsx';
 import React from 'react';
-import { useChatContext } from '../../context';
 import { useChannelSearch } from './hooks/useChannelSearch';
 import { SearchBar as DefaultSearchBar } from './SearchBar';
 import { SearchInput as DefaultSearchInput, } from './SearchInput';
 import { SearchResults } from './SearchResults';
-var UnMemoizedChannelSearch = function (props) {
-    var AppMenu = props.AppMenu, ClearInputIcon = props.ClearInputIcon, ExitSearchIcon = props.ExitSearchIcon, MenuIcon = props.MenuIcon, placeholder = props.placeholder, _a = props.popupResults, popupResults = _a === void 0 ? false : _a, _b = props.SearchBar, SearchBar = _b === void 0 ? DefaultSearchBar : _b, SearchEmpty = props.SearchEmpty, _c = props.SearchInput, SearchInput = _c === void 0 ? DefaultSearchInput : _c, SearchLoading = props.SearchLoading, SearchInputIcon = props.SearchInputIcon, SearchResultItem = props.SearchResultItem, SearchResultsList = props.SearchResultsList, SearchResultsHeader = props.SearchResultsHeader, channelSearchParams = __rest(props, ["AppMenu", "ClearInputIcon", "ExitSearchIcon", "MenuIcon", "placeholder", "popupResults", "SearchBar", "SearchEmpty", "SearchInput", "SearchLoading", "SearchInputIcon", "SearchResultItem", "SearchResultsList", "SearchResultsHeader"]);
-    var themeVersion = useChatContext('ChannelSearch').themeVersion;
-    var _d = useChannelSearch(channelSearchParams), activateSearch = _d.activateSearch, clearState = _d.clearState, exitSearch = _d.exitSearch, inputIsFocused = _d.inputIsFocused, inputRef = _d.inputRef, onSearch = _d.onSearch, query = _d.query, results = _d.results, searchBarRef = _d.searchBarRef, searching = _d.searching, selectResult = _d.selectResult;
-    var showSearchBarV2 = themeVersion === '2';
+const UnMemoizedChannelSearch = (props) => {
+    const { AppMenu, ClearInputIcon, ExitSearchIcon, MenuIcon, placeholder, popupResults = false, SearchBar = DefaultSearchBar, SearchEmpty, SearchInput = DefaultSearchInput, SearchLoading, SearchInputIcon, SearchResultItem, SearchResultsList, SearchResultsHeader, ...channelSearchParams } = props;
+    const { activateSearch, clearState, exitSearch, inputIsFocused, inputRef, onSearch, query, results, searchBarRef, searching, selectResult, } = useChannelSearch(channelSearchParams);
     return (React.createElement("div", { className: clsx('str-chat__channel-search', popupResults ? 'str-chat__channel-search--popup' : 'str-chat__channel-search--inline', {
             'str-chat__channel-search--with-results': results.length > 0,
         }), "data-testid": 'channel-search' },
-        showSearchBarV2 ? (React.createElement(SearchBar, { activateSearch: activateSearch, AppMenu: AppMenu, ClearInputIcon: ClearInputIcon, clearState: clearState, disabled: channelSearchParams.disabled, exitSearch: exitSearch, ExitSearchIcon: ExitSearchIcon, inputIsFocused: inputIsFocused, inputRef: inputRef, MenuIcon: MenuIcon, onSearch: onSearch, placeholder: placeholder, query: query, searchBarRef: searchBarRef, SearchInput: SearchInput, SearchInputIcon: SearchInputIcon })) : (React.createElement(SearchInput, { clearState: clearState, disabled: channelSearchParams.disabled, inputRef: inputRef, onSearch: onSearch, placeholder: placeholder, query: query })),
+        React.createElement(SearchBar, { activateSearch: activateSearch, AppMenu: AppMenu, ClearInputIcon: ClearInputIcon, clearState: clearState, disabled: channelSearchParams.disabled, exitSearch: exitSearch, ExitSearchIcon: ExitSearchIcon, inputIsFocused: inputIsFocused, inputRef: inputRef, MenuIcon: MenuIcon, onSearch: onSearch, placeholder: placeholder, query: query, searchBarRef: searchBarRef, SearchInput: SearchInput, SearchInputIcon: SearchInputIcon }),
         query && (React.createElement(SearchResults, { popupResults: popupResults, results: results, SearchEmpty: SearchEmpty, searching: searching, SearchLoading: SearchLoading, SearchResultItem: SearchResultItem, SearchResultsHeader: SearchResultsHeader, SearchResultsList: SearchResultsList, selectResult: selectResult }))));
 };
 /**
@@ -22,4 +18,4 @@ var UnMemoizedChannelSearch = function (props) {
  * Clicking on a list item will navigate you into a channel with the selected user. It can be used
  * on its own or added to the ChannelList component by setting the `showChannelSearch` prop to true.
  */
-export var ChannelSearch = React.memo(UnMemoizedChannelSearch);
+export const ChannelSearch = React.memo(UnMemoizedChannelSearch);

package/dist/components/ChannelSearch/SearchBar.d.ts

@@ -29,4 +29,3 @@ export type AdditionalSearchBarProps = {
 };
 export type SearchBarProps = AdditionalSearchBarProps & SearchBarController & SearchInputProps;
 export declare const SearchBar: (props: SearchBarProps) => React.JSX.Element;
-//# sourceMappingURL=SearchBar.d.ts.map