stream-chat-react 12.3.0 → 12.4.0

package/dist/components/Channel/Channel.d.ts

@@ -6,7 +6,7 @@ import { ComponentContextValue, StreamMessage } from '../../context';
 import type { MessageInputProps } from '../MessageInput';
 import type { ChannelUnreadUiState, CustomTrigger, DefaultStreamChatGenerics, GiphyVersions, ImageAttachmentSizeHandler, SendMessageOptions, UpdateMessageOptions, VideoAttachmentSizeHandler } from '../../types/types';
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
-type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageBouncePrompt' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'QuotedMessage' | 'QuotedMessagePreview' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TriggerProvider' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage'>;
+type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'QuotedMessage' | 'QuotedMessagePreview' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TriggerProvider' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage'>;
 export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = ChannelPropsForwardedToComponentContext<StreamChatGenerics> & {
     /** List of accepted file types */
     acceptedFiles?: string[];

package/dist/components/Channel/Channel.js

@@ -749,6 +749,7 @@ const ChannelInner = (props) => {
         LinkPreviewList: props.LinkPreviewList,
         LoadingIndicator: props.LoadingIndicator,
         Message: props.Message,
+        MessageActions: props.MessageActions,
         MessageBouncePrompt: props.MessageBouncePrompt,
         MessageDeleted: props.MessageDeleted,
         MessageListNotifications: props.MessageListNotifications,
@@ -797,6 +798,7 @@ const ChannelInner = (props) => {
         props.LinkPreviewList,
         props.LoadingIndicator,
         props.Message,
+        props.MessageActions,
         props.MessageBouncePrompt,
         props.MessageDeleted,
         props.MessageListNotifications,

package/dist/components/ChatAutoComplete/ChatAutoComplete.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { CommandResponse, UserResponse } from 'stream-chat';
 import type { TriggerSettings } from '../MessageInput/DefaultTriggerProvider';
 import type { CustomTrigger, DefaultStreamChatGenerics, UnknownType } from '../../types/types';
-import { EmojiSearchIndex } from 'components/MessageInput';
+import type { EmojiSearchIndex } from '../MessageInput';
 type ObjectUnion<T> = T[keyof T];
 export type SuggestionCommand<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = CommandResponse<StreamChatGenerics>;
 export type SuggestionUser<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = UserResponse<StreamChatGenerics>;

package/dist/components/Message/MessageOptions.js

@@ -31,6 +31,6 @@ const UnMemoizedMessageOptions = (props) => {
         React.createElement(MessageActions, { ActionsIcon: ActionsIcon }),
         shouldShowReplies && (React.createElement("button", { "aria-label": t('aria/Open Thread'), className: `str-chat__message-${theme}__actions__action str-chat__message-${theme}__actions__action--thread str-chat__message-reply-in-thread-button`, "data-testid": 'thread-action', onClick: handleOpenThread },
             React.createElement(ThreadIcon, { className: 'str-chat__message-action-icon' }))),
-        shouldShowReactions && (React.createElement(ReactionSelectorWithButton, { ReactionIcon: ReactionIcon, theme: theme }))));
+        shouldShowReactions && React.createElement(ReactionSelectorWithButton, { ReactionIcon: ReactionIcon })));
 };
 export const MessageOptions = React.memo(UnMemoizedMessageOptions);

package/dist/components/Message/MessageSimple.js

@@ -26,7 +26,10 @@ const MessageSimpleWithContext = (props) => {
     const { t } = useTranslationContext('MessageSimple');
     const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
     const [isEditedTimestampOpen, setEditedTimestampOpen] = useState(false);
-    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, EditMessageInput = DefaultEditMessageForm, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageOptions = DefaultMessageOptions, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, PinIndicator, } = useComponentContext('MessageSimple');
+    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, EditMessageInput = DefaultEditMessageForm, MessageOptions = DefaultMessageOptions, 
+    // TODO: remove this "passthrough" in the next
+    // major release and use the new default instead
+    MessageActions = MessageOptions, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, PinIndicator, } = useComponentContext('MessageSimple');
     const hasAttachment = messageHasAttachments(message);
     const hasReactions = messageHasReactions(message);
     if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
@@ -73,7 +76,7 @@ const MessageSimpleWithContext = (props) => {
             React.createElement("div", { className: clsx('str-chat__message-inner', {
                     'str-chat__simple-message--error-failed': allowRetry || isBounced,
                 }), "data-testid": 'message-inner', onClick: handleClick, onKeyUp: handleClick },
-                React.createElement(MessageOptions, null),
+                React.createElement(MessageActions, null),
                 React.createElement("div", { className: 'str-chat__message-reactions-host' }, hasReactions && React.createElement(ReactionsList, { reverse: true })),
                 React.createElement("div", { className: 'str-chat__message-bubble' },
                     message.attachments?.length && !message.quoted_message ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,

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

@@ -24,7 +24,7 @@ export declare const MESSAGE_ACTIONS: {
     react: string;
     reply: string;
 };
-export type MessageActionsArray<T extends string = string> = Array<'delete' | 'edit' | 'flag' | 'mute' | 'pin' | 'quote' | 'react' | 'reply' | T>;
+export type MessageActionsArray<T extends string = string> = Array<keyof typeof MESSAGE_ACTIONS | T>;
 export declare const defaultPinPermissions: PinPermissions;
 export type Capabilities = {
     canDelete?: boolean;

package/dist/components/MessageActions/MessageActions.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { MessageContextValue } from '../../context/MessageContext';
 import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
 type MessageContextPropsToPick = 'getMessageActions' | 'handleDelete' | 'handleFlag' | 'handleMarkUnread' | 'handleMute' | 'handlePin' | 'message';
@@ -14,4 +14,5 @@ export type MessageActionsWrapperProps = {
     inline?: boolean;
     toggleOpen?: () => void;
 };
+export declare const MessageActionsWrapper: (props: PropsWithChildren<MessageActionsWrapperProps>) => React.JSX.Element;
 export {};

package/dist/components/MessageActions/MessageActions.js

@@ -41,7 +41,7 @@ export const MessageActions = (props) => {
         React.createElement("button", { "aria-expanded": dialogIsOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Message Actions Menu'), className: 'str-chat__message-actions-box-button', "data-testid": 'message-actions-toggle-button', ref: actionsBoxButtonRef },
             React.createElement(ActionsIcon, { className: 'str-chat__message-action-icon' }))));
 };
-const MessageActionsWrapper = (props) => {
+export const MessageActionsWrapper = (props) => {
     const { children, customWrapperClass, inline, toggleOpen } = props;
     const defaultWrapperClass = clsx('str-chat__message-simple__actions__action', 'str-chat__message-simple__actions__action--options', 'str-chat__message-actions-container');
     const wrapperProps = {

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

@@ -3,11 +3,10 @@ import type { DefaultStreamChatGenerics } from '../../types';
 import type { IconProps } from '../../types/types';
 type ReactionSelectorWithButtonProps = {
     ReactionIcon: React.ComponentType<IconProps>;
-    theme: string;
 };
 /**
  * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
  * cluttering the parent component.
  */
-export declare const ReactionSelectorWithButton: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ ReactionIcon, theme, }: ReactionSelectorWithButtonProps) => React.JSX.Element;
+export declare const ReactionSelectorWithButton: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ ReactionIcon, }: ReactionSelectorWithButtonProps) => React.JSX.Element;
 export {};

package/dist/components/Reactions/ReactionSelectorWithButton.js

@@ -6,7 +6,7 @@ import { useComponentContext, useMessageContext, useTranslationContext } from '.
  * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
  * cluttering the parent component.
  */
-export const ReactionSelectorWithButton = ({ ReactionIcon, theme, }) => {
+export const ReactionSelectorWithButton = ({ ReactionIcon, }) => {
     const { t } = useTranslationContext('ReactionSelectorWithButton');
     const { isMyMessage, message } = useMessageContext('MessageOptions');
     const { ReactionSelector = DefaultReactionSelector } = useComponentContext('MessageOptions');
@@ -17,6 +17,6 @@ export const ReactionSelectorWithButton = ({ ReactionIcon, theme, }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(DialogAnchor, { id: dialogId, placement: isMyMessage() ? 'top-end' : 'top-start', referenceElement: buttonRef.current, trapFocus: true },
             React.createElement(ReactionSelector, null)),
-        React.createElement("button", { "aria-expanded": dialogIsOpen, "aria-label": t('aria/Open Reaction Selector'), className: `str-chat__message-${theme}__actions__action str-chat__message-${theme}__actions__action--reactions str-chat__message-reactions-button`, "data-testid": 'message-reaction-action', onClick: () => dialog?.toggle(), ref: buttonRef },
+        React.createElement("button", { "aria-expanded": dialogIsOpen, "aria-label": t('aria/Open Reaction Selector'), className: 'str-chat__message-reactions-button', "data-testid": 'message-reaction-action', onClick: () => dialog?.toggle(), ref: buttonRef },
             React.createElement(ReactionIcon, { className: 'str-chat__message-action-icon' }))));
 };

package/dist/components/Threads/hooks/useThreadManagerState.js

@@ -1,4 +1,4 @@
-import { useChatContext } from 'context';
+import { useChatContext } from '../../../context';
 import { useStateStore } from '../../../store';
 export const useThreadManagerState = (selector) => {
     const { client } = useChatContext();

package/dist/context/ComponentContext.d.ts

@@ -47,6 +47,8 @@ export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGe
     LoadingIndicator?: React.ComponentType<LoadingIndicatorProps>;
     /** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
     Message?: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>;
+    /** Custom UI component for message actions popup, accepts no props, all the defaults are set within [MessageActions (unstable)](https://github.com/GetStream/stream-chat-react/blob/master/src/experimental/MessageActions/MessageActions.tsx) */
+    MessageActions?: React.ComponentType;
     /** Custom UI component to display the contents of a bounced message modal. Usually it allows to retry, edit, or delete the message. Defaults to and accepts the same props as: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) */
     MessageBouncePrompt?: React.ComponentType<MessageBouncePromptProps>;
     /** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */
@@ -56,7 +58,11 @@ export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGe
     MessageListNotifications?: React.ComponentType<MessageListNotificationsProps>;
     /** Custom UI component to display a notification when scrolled up the list and new messages arrive, defaults to and accepts same props as [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx) */
     MessageNotification?: React.ComponentType<MessageNotificationProps>;
-    /** Custom UI component for message options popup, defaults to and accepts same props as: [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) */
+    /**
+     * Custom UI component for message options popup, defaults to and accepts same props as: [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx)
+     *
+     * @deprecated Use MessageActions property instead.
+     */
     MessageOptions?: React.ComponentType<MessageOptionsProps<StreamChatGenerics>>;
     /** Custom UI component to display message replies, defaults to and accepts same props as: [MessageRepliesCountButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) */
     MessageRepliesCountButton?: React.ComponentType<MessageRepliesCountButtonProps>;

package/dist/experimental/MessageActions/MessageActions.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { MESSAGE_ACTIONS } from '../../components';
+export type MessageActionSetItem = {
+    Component: React.ComponentType;
+    placement: 'quick' | 'dropdown';
+    type: keyof typeof MESSAGE_ACTIONS | (string & {});
+};
+export type MessageActionsProps = {
+    disableBaseMessageActionSetFilter?: boolean;
+    messageActionSet?: MessageActionSetItem[];
+};
+/**
+ * A new actions component to replace current `MessageOptions` component.
+ * Exports from `stream-chat-react/experimental` __MIGHT__ change - use with caution
+ * and follow release notes in case you notice unexpected behavior.
+ */
+export declare const MessageActions: ({ disableBaseMessageActionSetFilter, messageActionSet, }: MessageActionsProps) => React.JSX.Element | null;

package/dist/experimental/MessageActions/MessageActions.js

@@ -0,0 +1,48 @@
+/* eslint-disable sort-keys */
+import clsx from 'clsx';
+import React, { useState } from 'react';
+import { useChatContext, useMessageContext, useTranslationContext } from '../../context';
+import { ActionsIcon } from '../../components/Message/icons';
+import { DialogAnchor, useDialog, useDialogIsOpen } from '../../components/Dialog';
+import { MessageActionsWrapper } from '../../components/MessageActions/MessageActions';
+import { useBaseMessageActionSetFilter, useSplitMessageActionSet } from './hooks';
+import { defaultMessageActionSet } from './defaults';
+// TODO: allow passing down customWrapperClass
+/**
+ * A new actions component to replace current `MessageOptions` component.
+ * Exports from `stream-chat-react/experimental` __MIGHT__ change - use with caution
+ * and follow release notes in case you notice unexpected behavior.
+ */
+export const MessageActions = ({ disableBaseMessageActionSetFilter = false, messageActionSet = defaultMessageActionSet, }) => {
+    const { theme } = useChatContext();
+    const { isMyMessage, message } = useMessageContext();
+    const { t } = useTranslationContext();
+    const [actionsBoxButtonElement, setActionsBoxButtonElement] = useState(null);
+    const filteredMessageActionSet = useBaseMessageActionSetFilter(messageActionSet, disableBaseMessageActionSetFilter);
+    const { dropdownActionSet, quickActionSet } = useSplitMessageActionSet(filteredMessageActionSet);
+    const dropdownDialogId = `message-actions--${message.id}`;
+    const reactionSelectorDialogId = `reaction-selector--${message.id}`;
+    const dialog = useDialog({ id: dropdownDialogId });
+    const dropdownDialogIsOpen = useDialogIsOpen(dropdownDialogId);
+    const reactionSelectorDialogIsOpen = useDialogIsOpen(reactionSelectorDialogId);
+    // do not render anything if total action count is zero
+    if (dropdownActionSet.length + quickActionSet.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: clsx(`str-chat__message-${theme}__actions str-chat__message-options`, {
+            'str-chat__message-options--active': dropdownDialogIsOpen || reactionSelectorDialogIsOpen,
+        }) },
+        dropdownActionSet.length > 0 && (React.createElement(MessageActionsWrapper, { inline: false, toggleOpen: dialog?.toggle },
+            React.createElement("button", { "aria-expanded": dropdownDialogIsOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Message Actions Menu'), className: 'str-chat__message-actions-box-button', "data-testid": 'message-actions-toggle-button', ref: setActionsBoxButtonElement },
+                React.createElement(ActionsIcon, { className: 'str-chat__message-action-icon' })),
+            React.createElement(DialogAnchor, { id: dropdownDialogId, placement: isMyMessage() ? 'top-end' : 'top-start', referenceElement: actionsBoxButtonElement, trapFocus: true },
+                React.createElement(DropdownBox, { open: dropdownDialogIsOpen }, dropdownActionSet.map(({ Component: DropdownActionComponent, type }) => (React.createElement(DropdownActionComponent, { key: type }))))))),
+        quickActionSet.map(({ Component: QuickActionComponent, type }) => (React.createElement(QuickActionComponent, { key: type })))));
+};
+const DropdownBox = ({ children, open }) => {
+    const { t } = useTranslationContext();
+    return (React.createElement("div", { className: clsx('str-chat__message-actions-box', {
+            'str-chat__message-actions-box--open': open,
+        }) },
+        React.createElement("div", { "aria-label": t('aria/Message Options'), className: 'str-chat__message-actions-list', role: 'listbox' }, children)));
+};

package/dist/experimental/MessageActions/defaults.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
+import type { MessageActionSetItem } from './MessageActions';
+export declare const DefaultDropdownActionButton: ({ "aria-selected": ariaSelected, children, className, role, ...rest }: ComponentPropsWithoutRef<'button'>) => React.JSX.Element;
+export declare const defaultMessageActionSet: MessageActionSetItem[];

package/dist/experimental/MessageActions/defaults.js

@@ -0,0 +1,93 @@
+/* eslint-disable sort-keys */
+import React from 'react';
+import { isUserMuted } from '../../components';
+import { ReactionIcon as DefaultReactionIcon, ThreadIcon } from '../../components/Message/icons';
+import { ReactionSelectorWithButton } from '../../components/Reactions/ReactionSelectorWithButton';
+import { useChannelActionContext, useChatContext, useMessageContext, useTranslationContext, } from '../../context';
+export const DefaultDropdownActionButton = ({ 'aria-selected': ariaSelected = 'false', children, className = 'str-chat__message-actions-list-item-button', role = 'option', ...rest }) => (React.createElement("button", { "aria-selected": ariaSelected, className: className, role: role, ...rest }, children));
+const DefaultMessageActionComponents = {
+    dropdown: {
+        Quote() {
+            const { setQuotedMessage } = useChannelActionContext();
+            const { message } = useMessageContext();
+            const { t } = useTranslationContext();
+            const handleQuote = () => {
+                setQuotedMessage(message);
+                const elements = message.parent_id
+                    ? document.querySelectorAll('.str-chat__thread .str-chat__textarea__textarea')
+                    : document.getElementsByClassName('str-chat__textarea__textarea');
+                const textarea = elements.item(0);
+                if (textarea instanceof HTMLTextAreaElement) {
+                    textarea.focus();
+                }
+            };
+            return (React.createElement(DefaultDropdownActionButton, { onClick: handleQuote }, t('Quote')));
+        },
+        Pin() {
+            const { handlePin, message } = useMessageContext();
+            const { t } = useTranslationContext();
+            return (React.createElement(DefaultDropdownActionButton, { onClick: handlePin }, !message.pinned ? t('Pin') : t('Unpin')));
+        },
+        MarkUnread() {
+            const { handleMarkUnread } = useMessageContext();
+            const { t } = useTranslationContext();
+            return (React.createElement(DefaultDropdownActionButton, { onClick: handleMarkUnread }, t('Mark as unread')));
+        },
+        Flag() {
+            const { handleFlag } = useMessageContext();
+            const { t } = useTranslationContext();
+            return (React.createElement(DefaultDropdownActionButton, { onClick: handleFlag }, t('Flag')));
+        },
+        Mute() {
+            const { handleMute, message } = useMessageContext();
+            const { mutes } = useChatContext();
+            const { t } = useTranslationContext();
+            return (React.createElement(DefaultDropdownActionButton, { onClick: handleMute }, isUserMuted(message, mutes) ? t('Unmute') : t('Mute')));
+        },
+        Edit() {
+            const { handleEdit } = useMessageContext();
+            const { t } = useTranslationContext();
+            return (React.createElement(DefaultDropdownActionButton, { onClick: handleEdit }, t('Edit Message')));
+        },
+        Delete() {
+            const { handleDelete } = useMessageContext();
+            const { t } = useTranslationContext();
+            return (React.createElement(DefaultDropdownActionButton, { onClick: handleDelete }, t('Delete')));
+        },
+    },
+    quick: {
+        React() {
+            return React.createElement(ReactionSelectorWithButton, { ReactionIcon: DefaultReactionIcon });
+        },
+        Reply() {
+            const { handleOpenThread } = useMessageContext();
+            const { t } = useTranslationContext();
+            return (React.createElement("button", { "aria-label": t('aria/Open Thread'), className: 'str-chat__message-reply-in-thread-button', "data-testid": 'thread-action', onClick: handleOpenThread },
+                React.createElement(ThreadIcon, { className: 'str-chat__message-action-icon' })));
+        },
+    },
+};
+export const defaultMessageActionSet = [
+    // { placement: 'dropdown', type: 'block' },
+    { Component: DefaultMessageActionComponents.quick.Reply, placement: 'quick', type: 'reply' },
+    { Component: DefaultMessageActionComponents.quick.React, placement: 'quick', type: 'react' },
+    {
+        Component: DefaultMessageActionComponents.dropdown.Delete,
+        placement: 'dropdown',
+        type: 'delete',
+    },
+    { Component: DefaultMessageActionComponents.dropdown.Edit, placement: 'dropdown', type: 'edit' },
+    { Component: DefaultMessageActionComponents.dropdown.Mute, placement: 'dropdown', type: 'mute' },
+    { Component: DefaultMessageActionComponents.dropdown.Flag, placement: 'dropdown', type: 'flag' },
+    { Component: DefaultMessageActionComponents.dropdown.Pin, placement: 'dropdown', type: 'pin' },
+    {
+        Component: DefaultMessageActionComponents.dropdown.Quote,
+        placement: 'dropdown',
+        type: 'quote',
+    },
+    {
+        Component: DefaultMessageActionComponents.dropdown.MarkUnread,
+        placement: 'dropdown',
+        type: 'markUnread',
+    },
+];

package/dist/experimental/MessageActions/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useBaseMessageActionSetFilter';
+export * from './useSplitMessageActionSet';

package/dist/experimental/MessageActions/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useBaseMessageActionSetFilter';
+export * from './useSplitMessageActionSet';

package/dist/experimental/MessageActions/hooks/useBaseMessageActionSetFilter.d.ts

@@ -0,0 +1,8 @@
+import type { MessageActionSetItem } from '../MessageActions';
+/**
+ * Base filter hook which covers actions of type `delete`, `edit`,
+ * `flag`, `markUnread`, `mute`, `quote`, `react` and `reply`, whether
+ * the rendered message is a reply (replies are limited to certain actions) and
+ * whether the message has appropriate type and status.
+ */
+export declare const useBaseMessageActionSetFilter: (messageActionSet: MessageActionSetItem[], disable?: boolean) => MessageActionSetItem[];

package/dist/experimental/MessageActions/hooks/useBaseMessageActionSetFilter.js

@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+import { ACTIONS_NOT_WORKING_IN_THREAD, useUserRole } from '../../../components';
+import { useMessageContext } from '../../../context';
+/**
+ * Base filter hook which covers actions of type `delete`, `edit`,
+ * `flag`, `markUnread`, `mute`, `quote`, `react` and `reply`, whether
+ * the rendered message is a reply (replies are limited to certain actions) and
+ * whether the message has appropriate type and status.
+ */
+export const useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
+    const { initialMessage: isInitialMessage, message } = useMessageContext();
+    const { canDelete, canEdit, canFlag, canMarkUnread, canMute, canQuote, canReact, canReply, } = useUserRole(message);
+    const isMessageThreadReply = typeof message.parent_id === 'string';
+    return useMemo(() => {
+        if (disable)
+            return messageActionSet;
+        // filter out all actions if any of these are true
+        if (isInitialMessage || // not sure whether this thing even works anymore
+            !message.type ||
+            message.type === 'error' ||
+            message.type === 'system' ||
+            message.type === 'ephemeral' ||
+            message.status === 'failed' ||
+            message.status === 'sending')
+            return [];
+        return messageActionSet.filter(({ type }) => {
+            // filter out actions with types that do not work in thread
+            if (ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply)
+                return false;
+            if ((type === 'delete' && !canDelete) ||
+                (type === 'edit' && !canEdit) ||
+                (type === 'flag' && !canFlag) ||
+                (type === 'markUnread' && !canMarkUnread) ||
+                (type === 'mute' && !canMute) ||
+                (type === 'quote' && !canQuote) ||
+                (type === 'react' && !canReact) ||
+                (type === 'reply' && !canReply))
+                return false;
+            return true;
+        });
+    }, [
+        canDelete,
+        canEdit,
+        canFlag,
+        canMarkUnread,
+        canMute,
+        canQuote,
+        canReact,
+        canReply,
+        isInitialMessage,
+        isMessageThreadReply,
+        message.status,
+        message.type,
+        disable,
+        messageActionSet,
+    ]);
+};

package/dist/experimental/MessageActions/hooks/useSplitMessageActionSet.d.ts

@@ -0,0 +1,5 @@
+import type { MessageActionSetItem } from '../MessageActions';
+export declare const useSplitMessageActionSet: (messageActionSet: MessageActionSetItem[]) => {
+    dropdownActionSet: MessageActionSetItem[];
+    quickActionSet: MessageActionSetItem[];
+};

package/dist/experimental/MessageActions/hooks/useSplitMessageActionSet.js

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+export const useSplitMessageActionSet = (messageActionSet) => useMemo(() => {
+    const quickActionSet = [];
+    const dropdownActionSet = [];
+    for (const action of messageActionSet) {
+        if (action.placement === 'quick')
+            quickActionSet.push(action);
+        if (action.placement === 'dropdown')
+            dropdownActionSet.push(action);
+    }
+    return { dropdownActionSet, quickActionSet };
+}, [messageActionSet]);

package/dist/experimental/MessageActions/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MessageActions';
+export * from './defaults';
+export * from './hooks';

package/dist/experimental/MessageActions/index.js

@@ -0,0 +1,3 @@
+export * from './MessageActions';
+export * from './defaults';
+export * from './hooks';