stream-chat-react 12.4.1 → 12.5.0

package/dist/assets/icons/stream-chat-icons.svg

@@ -41,6 +41,10 @@
 <glyph glyph-name="send" unicode="&#xe810;" d="M167-67l833 417-833 417 0-324 595-93-595-93 0-324z" horiz-adv-x="1000" />
 
 <glyph glyph-name="attach" unicode="&#xe811;" d="M542 558h-84v-166h-166v-84h166v-166h84v166h166v84h-166v166z m-42 209c-230 0-417-187-417-417 0-230 187-417 417-417 230 0 417 187 417 417 0 230-187 417-417 417z m0-750c-184 0-333 149-333 333 0 184 149 333 333 333 184 0 333-149 333-333 0-184-149-333-333-333z" horiz-adv-x="1000" />
+
+<glyph glyph-name="mic" unicode="&#xe812;" d="M350 225c83 0 150 67 150 150v300c0 83-67 150-150 150-83 0-150-67-150-150v-300c0-83 67-150 150-150z m250 150c0-138-112-250-250-250-138 0-250 112-250 250h-100c0-176 131-321 300-346v-154h100v154c170 25 300 170 300 346h-100z" horiz-adv-x="700" />
+
+<glyph glyph-name="bin" unicode="&#xe813;" d="M250 58c0-45 38-83 83-83h334c46 0 83 38 83 83v417c0 46-37 83-83 83h-334c-45 0-83-37-83-83v-417z m500 625h-104l-30 30c-7 7-18 12-29 12h-174c-11 0-22-5-29-12l-30-30h-104c-23 0-42-18-42-41 0-23 19-42 42-42h500c23 0 42 19 42 42 0 23-19 41-42 41z" horiz-adv-x="1000" />
 </font>
 </defs>
 </svg>

package/dist/components/Attachment/components/ProgressBar.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export type ProgressBarProps = {
     /** Progress expressed in fractional number value btw 0 and 100. */
     progress: number;
-} & Pick<React.ComponentProps<'div'>, 'onClick'>;
-export declare const ProgressBar: ({ onClick, progress }: ProgressBarProps) => React.JSX.Element;
+} & Pick<React.ComponentProps<'div'>, 'className' | 'onClick'>;
+export declare const ProgressBar: ({ className, onClick, progress }: ProgressBarProps) => React.JSX.Element;

package/dist/components/Attachment/components/ProgressBar.js

@@ -1,5 +1,6 @@
+import clsx from 'clsx';
 import React from 'react';
-export const ProgressBar = ({ onClick, progress }) => (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-track', "data-progress": progress, "data-testid": 'audio-progress', onClick: onClick, role: 'progressbar', style: {
+export const ProgressBar = ({ className, onClick, progress }) => (React.createElement("div", { className: clsx('str-chat__message-attachment-audio-widget--progress-track', className), "data-progress": progress, "data-testid": 'audio-progress', onClick: onClick, role: 'progressbar', style: {
         '--str-chat__message-attachment-audio-widget-progress': progress + '%',
     } },
     React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-slider', style: { left: `${progress}px` } })));

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' | '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'>;
+type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | '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' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | '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

@@ -16,30 +16,35 @@ import { DropzoneProvider } from '../MessageInput/DropzoneProvider';
 import { ChannelActionProvider, ChannelStateProvider, TypingProvider, useChatContext, useTranslationContext, WithComponents, } from '../../context';
 import { DEFAULT_HIGHLIGHT_DURATION, DEFAULT_INITIAL_CHANNEL_PAGE_SIZE, DEFAULT_JUMP_TO_PAGE_SIZE, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, DEFAULT_THREAD_PAGE_SIZE, } from '../../constants/limits';
 import { hasMoreMessagesProbably } from '../MessageList';
-import { useChannelContainerClasses } from './hooks/useChannelContainerClasses';
+import { getChatContainerClass, useChannelContainerClasses, useImageFlagEmojisOnWindowsClass, } from './hooks/useChannelContainerClasses';
 import { findInMsgSetByDate, findInMsgSetById, makeAddNotifications } from './utils';
 import { getChannel } from '../../utils';
 import { getImageAttachmentConfiguration, getVideoAttachmentConfiguration, } from '../Attachment/attachment-sizing';
 import { useThreadContext } from '../Threads';
+import { CHANNEL_CONTAINER_ID } from './constants';
 const isUserResponseArray = (output) => output[0]?.id != null;
-const UnMemoizedChannel = (props) => {
-    const { channel: propsChannel, EmptyPlaceholder = null, LoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, } = props;
-    const { channel: contextChannel, channelsQueryState, customClasses, theme, } = useChatContext('Channel');
+const ChannelContainer = ({ children, className: additionalClassName, ...props }) => {
+    const { customClasses, theme } = useChatContext('Channel');
     const { channelClass, chatClass } = useChannelContainerClasses({
         customClasses,
     });
+    const className = clsx(chatClass, theme, channelClass, additionalClassName);
+    return (React.createElement("div", { id: CHANNEL_CONTAINER_ID, ...props, className: className }, children));
+};
+const UnMemoizedChannel = (props) => {
+    const { channel: propsChannel, EmptyPlaceholder = null, LoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, } = props;
+    const { channel: contextChannel, channelsQueryState } = useChatContext('Channel');
     const channel = propsChannel || contextChannel;
-    const className = clsx(chatClass, theme, channelClass);
     if (channelsQueryState.queryInProgress === 'reload' && LoadingIndicator) {
-        return (React.createElement("div", { className: className },
+        return (React.createElement(ChannelContainer, null,
             React.createElement(LoadingIndicator, null)));
     }
     if (channelsQueryState.error && LoadingErrorIndicator) {
-        return (React.createElement("div", { className: className },
+        return (React.createElement(ChannelContainer, null,
             React.createElement(LoadingErrorIndicator, { error: channelsQueryState.error })));
     }
     if (!channel?.cid) {
-        return React.createElement("div", { className: className }, EmptyPlaceholder);
+        return React.createElement(ChannelContainer, null, EmptyPlaceholder);
     }
     return React.createElement(ChannelInner, { ...props, channel: channel, key: channel.cid });
 };
@@ -48,9 +53,10 @@ const ChannelInner = (props) => {
     const channelQueryOptions = useMemo(() => defaultsDeep(propChannelQueryOptions, {
         messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE },
     }), [propChannelQueryOptions]);
-    const { client, customClasses, latestMessageDatesByChannels, mutes, theme, } = useChatContext('Channel');
+    const { client, customClasses, latestMessageDatesByChannels, mutes, } = useChatContext('Channel');
     const { t } = useTranslationContext('Channel');
-    const { channelClass, chatClass, chatContainerClass, windowsEmojiClass, } = useChannelContainerClasses({ customClasses });
+    const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
+    const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
     const thread = useThreadContext();
     const [channelConfig, setChannelConfig] = useState(channel.getConfig());
     const [notifications, setNotifications] = useState([]);
@@ -730,6 +736,8 @@ const ChannelInner = (props) => {
     const componentContextValue = useMemo(() => ({
         Attachment: props.Attachment,
         AttachmentPreviewList: props.AttachmentPreviewList,
+        AttachmentSelector: props.AttachmentSelector,
+        AttachmentSelectorInitiationButtonContents: props.AttachmentSelectorInitiationButtonContents,
         AudioRecorder: props.AudioRecorder,
         AutocompleteSuggestionItem: props.AutocompleteSuggestionItem,
         AutocompleteSuggestionList: props.AutocompleteSuggestionList,
@@ -761,8 +769,14 @@ const ChannelInner = (props) => {
         MessageTimestamp: props.MessageTimestamp,
         ModalGallery: props.ModalGallery,
         PinIndicator: props.PinIndicator,
+        PollActions: props.PollActions,
+        PollContent: props.PollContent,
+        PollCreationDialog: props.PollCreationDialog,
+        PollHeader: props.PollHeader,
+        PollOptionSelector: props.PollOptionSelector,
         QuotedMessage: props.QuotedMessage,
         QuotedMessagePreview: props.QuotedMessagePreview,
+        QuotedPoll: props.QuotedPoll,
         reactionOptions: props.reactionOptions,
         ReactionSelector: props.ReactionSelector,
         ReactionsList: props.ReactionsList,
@@ -780,6 +794,8 @@ const ChannelInner = (props) => {
     }), [
         props.Attachment,
         props.AttachmentPreviewList,
+        props.AttachmentSelector,
+        props.AttachmentSelectorInitiationButtonContents,
         props.AudioRecorder,
         props.AutocompleteSuggestionItem,
         props.AutocompleteSuggestionList,
@@ -810,8 +826,14 @@ const ChannelInner = (props) => {
         props.MessageTimestamp,
         props.ModalGallery,
         props.PinIndicator,
+        props.PollActions,
+        props.PollContent,
+        props.PollCreationDialog,
+        props.PollHeader,
+        props.PollOptionSelector,
         props.QuotedMessage,
         props.QuotedMessagePreview,
+        props.QuotedPoll,
         props.ReactionSelector,
         props.ReactionsList,
         props.SendButton,
@@ -831,20 +853,19 @@ const ChannelInner = (props) => {
     const typingContextValue = useCreateTypingContext({
         typing,
     });
-    const className = clsx(chatClass, theme, channelClass);
     if (state.error) {
-        return (React.createElement("div", { className: className },
+        return (React.createElement(ChannelContainer, null,
             React.createElement(LoadingErrorIndicator, { error: state.error })));
     }
     if (state.loading) {
-        return (React.createElement("div", { className: className },
+        return (React.createElement(ChannelContainer, null,
             React.createElement(LoadingIndicator, null)));
     }
     if (!channel.watch) {
-        return (React.createElement("div", { className: className },
+        return (React.createElement(ChannelContainer, null,
             React.createElement("div", null, t('Channel Missing'))));
     }
-    return (React.createElement("div", { className: clsx(className, windowsEmojiClass) },
+    return (React.createElement(ChannelContainer, { className: windowsEmojiClass },
         React.createElement(ChannelStateProvider, { value: channelStateContextValue },
             React.createElement(ChannelActionProvider, { value: channelActionContextValue },
                 React.createElement(WithComponents, { overrides: componentContextValue },

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

@@ -0,0 +1 @@
+export declare const CHANNEL_CONTAINER_ID = "str-chat__channel";

package/dist/components/Channel/constants.js

@@ -0,0 +1 @@
+export const CHANNEL_CONTAINER_ID = 'str-chat__channel';

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

@@ -1,5 +1,7 @@
 import type { ChatContextValue } from '../../../context/ChatContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+export declare const useImageFlagEmojisOnWindowsClass: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => "" | "str-chat--windows-flags";
+export declare const getChatContainerClass: (customClass?: string) => string;
 export declare const useChannelContainerClasses: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ customClasses, }: Pick<ChatContextValue, 'customClasses'>) => {
     channelClass: string;
     chatClass: string;

package/dist/components/Channel/hooks/useChannelContainerClasses.js

@@ -1,12 +1,17 @@
 import { useChatContext } from '../../../context/ChatContext';
-export const useChannelContainerClasses = ({ customClasses, }) => {
+export const useImageFlagEmojisOnWindowsClass = () => {
     const { useImageFlagEmojisOnWindows } = useChatContext('Channel');
+    return useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)
+        ? 'str-chat--windows-flags'
+        : '';
+};
+export const getChatContainerClass = (customClass) => customClass ?? 'str-chat__container';
+export const useChannelContainerClasses = ({ customClasses, }) => {
+    const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
     return {
         channelClass: customClasses?.channel ?? 'str-chat__channel',
         chatClass: customClasses?.chat ?? 'str-chat',
-        chatContainerClass: customClasses?.chatContainer ?? 'str-chat__container',
-        windowsEmojiClass: useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)
-            ? 'str-chat--windows-flags'
-            : '',
+        chatContainerClass: getChatContainerClass(customClasses?.chatContainer),
+        windowsEmojiClass,
     };
 };

package/dist/components/ChannelPreview/utils.js

@@ -1,16 +1,51 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 export const renderPreviewText = (text) => React.createElement(ReactMarkdown, { skipHtml: true }, text);
+const getLatestPollVote = (latestVotesByOption) => {
+    let latestVote;
+    for (const optionVotes of Object.values(latestVotesByOption)) {
+        optionVotes.forEach((vote) => {
+            if (latestVote && new Date(latestVote.updated_at) >= new Date(vote.created_at))
+                return;
+            latestVote = vote;
+        });
+    }
+    return latestVote;
+};
 export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
     const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
     const previewTextToRender = latestMessage?.i18n?.[`${userLanguage}_text`] ||
         latestMessage?.text;
+    const poll = latestMessage?.poll;
     if (!latestMessage) {
         return t('Nothing yet...');
     }
     if (latestMessage.deleted_at) {
         return t('Message deleted');
     }
+    if (poll) {
+        if (!poll.vote_count) {
+            const createdBy = poll.created_by?.id === channel.getClient().userID
+                ? t('You')
+                : poll.created_by?.name ?? t('Poll');
+            return t('📊 {{createdBy}} created: {{ pollName}}', {
+                createdBy,
+                pollName: poll.name,
+            });
+        }
+        else {
+            const latestVote = getLatestPollVote(poll.latest_votes_by_option);
+            const option = latestVote && poll.options.find((opt) => opt.id === latestVote.option_id);
+            if (option && latestVote) {
+                return t('📊 {{votedBy}} voted: {{pollOptionText}}', {
+                    pollOptionText: option.text,
+                    votedBy: latestVote?.user?.id === channel.getClient().userID
+                        ? t('You')
+                        : latestVote.user?.name ?? t('Poll'),
+                });
+            }
+        }
+    }
     if (previewTextToRender) {
         return renderPreviewText(previewTextToRender);
     }

package/dist/components/Chat/hooks/useChat.js

@@ -31,8 +31,10 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
             client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
         }
         client.threads.registerSubscriptions();
+        client.polls.registerSubscriptions();
         return () => {
             client.threads.unregisterSubscriptions();
+            client.polls.unregisterSubscriptions();
         };
     }, [client]);
     useEffect(() => {

package/dist/components/Dialog/DialogAnchor.d.ts

@@ -16,10 +16,9 @@ export declare function useDialogAnchor<T extends HTMLElement>({ open, placement
         [key: string]: React.CSSProperties;
     };
 };
-type DialogAnchorProps = PropsWithChildren<Partial<DialogAnchorOptions>> & {
+export type DialogAnchorProps = PropsWithChildren<Partial<DialogAnchorOptions>> & {
     id: string;
     focus?: boolean;
     trapFocus?: boolean;
 } & ComponentProps<'div'>;
 export declare const DialogAnchor: ({ children, className, focus, id, placement, referenceElement, trapFocus, ...restDivProps }: DialogAnchorProps) => React.JSX.Element | null;
-export {};

package/dist/components/Dialog/DialogMenu.d.ts

@@ -0,0 +1,3 @@
+import React, { ComponentProps } from 'react';
+export type DialogMenuButtonProps = ComponentProps<'button'>;
+export declare const DialogMenuButton: ({ children, className, ...props }: DialogMenuButtonProps) => React.JSX.Element;

package/dist/components/Dialog/DialogMenu.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import clsx from 'clsx';
+export const DialogMenuButton = ({ children, className, ...props }) => (React.createElement("button", { className: clsx('str-chat__dialog-menu__button', className), ...props },
+    React.createElement("div", { className: 'str-chat__dialog-menu__button-icon' }),
+    React.createElement("div", { className: 'str-chat__dialog-menu__button-text' }, children)));

package/dist/components/Dialog/DialogPortal.d.ts

@@ -3,5 +3,5 @@ export declare const DialogPortalDestination: () => React.JSX.Element;
 type DialogPortalEntryProps = {
     dialogId: string;
 };
-export declare const DialogPortalEntry: ({ children, dialogId, }: PropsWithChildren<DialogPortalEntryProps>) => React.ReactPortal | null;
+export declare const DialogPortalEntry: ({ children, dialogId, }: PropsWithChildren<DialogPortalEntryProps>) => React.JSX.Element;
 export {};

package/dist/components/Dialog/DialogPortal.js

@@ -1,6 +1,6 @@
-import React, { useLayoutEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useCallback } from 'react';
 import { useDialogIsOpen, useOpenedDialogCount } from './hooks';
+import { Portal } from '../Portal/Portal';
 import { useDialogManager } from '../../context';
 export const DialogPortalDestination = () => {
     const { dialogManager } = useDialogManager();
@@ -12,14 +12,6 @@ export const DialogPortalDestination = () => {
 export const DialogPortalEntry = ({ children, dialogId, }) => {
     const { dialogManager } = useDialogManager();
     const dialogIsOpen = useDialogIsOpen(dialogId);
-    const [portalDestination, setPortalDestination] = useState(null);
-    useLayoutEffect(() => {
-        const destination = document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`);
-        if (!destination)
-            return;
-        setPortalDestination(destination);
-    }, [dialogManager, dialogIsOpen]);
-    if (!portalDestination)
-        return null;
-    return createPortal(children, portalDestination);
+    const getPortalDestination = useCallback(() => document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`), [dialogManager.id]);
+    return (React.createElement(Portal, { getPortalDestination: getPortalDestination, isOpen: dialogIsOpen }, children));
 };

package/dist/components/Dialog/FormDialog.d.ts

@@ -0,0 +1,23 @@
+import React, { ComponentProps } from 'react';
+type FormElements = 'input' | 'textarea';
+type FieldId = string;
+type Validator = (value: string | readonly string[] | number | boolean | undefined) => Error | undefined;
+export type FieldConfig = {
+    element: FormElements;
+    props: ComponentProps<FormElements>;
+    label?: React.ReactNode;
+    validator?: Validator;
+};
+type TextInputFormProps<F extends FormValue<Record<FieldId, FieldConfig>>> = {
+    close: () => void;
+    fields: Record<FieldId, FieldConfig>;
+    onSubmit: (formValue: F) => Promise<void>;
+    className?: string;
+    shouldDisableSubmitButton?: (formValue: F) => boolean;
+    title?: string;
+};
+type FormValue<F extends Record<FieldId, FieldConfig>> = {
+    [K in keyof F]: F[K]['props']['value'];
+};
+export declare const FormDialog: <F extends FormValue<Record<string, FieldConfig>> = FormValue<Record<string, FieldConfig>>>({ className, close, fields, onSubmit, shouldDisableSubmitButton, title, }: TextInputFormProps<F>) => React.JSX.Element;
+export {};

package/dist/components/Dialog/FormDialog.js

@@ -0,0 +1,72 @@
+import React, { useCallback, useState, } from 'react';
+import clsx from 'clsx';
+import { FieldError } from '../Form/FieldError';
+import { useTranslationContext } from '../../context';
+export const FormDialog = ({ className, close, fields, onSubmit, shouldDisableSubmitButton, title, }) => {
+    const { t } = useTranslationContext();
+    const [fieldErrors, setFieldErrors] = useState({});
+    const [value, setValue] = useState(() => {
+        let acc = {};
+        for (const [id, config] of Object.entries(fields)) {
+            acc = { ...acc, [id]: config.props.value };
+        }
+        return acc;
+    });
+    const handleChange = useCallback((event) => {
+        const fieldId = event.target.id;
+        const fieldConfig = fields[fieldId];
+        if (!fieldConfig)
+            return;
+        const error = fieldConfig.validator?.(event.target.value);
+        if (error) {
+            setFieldErrors((prev) => ({ [fieldId]: error, ...prev }));
+        }
+        else {
+            setFieldErrors((prev) => {
+                delete prev[fieldId];
+                return prev;
+            });
+        }
+        setValue((prev) => ({ ...prev, [fieldId]: event.target.value }));
+        if (!fieldConfig.props.onChange)
+            return;
+        if (fieldConfig.element === 'input') {
+            fieldConfig.props.onChange(event);
+        }
+        else if (fieldConfig.element === 'textarea') {
+            fieldConfig.props.onChange(event);
+        }
+    }, [fields]);
+    const handleSubmit = async () => {
+        if (!Object.keys(value).length)
+            return;
+        const errors = {};
+        for (const [id, fieldValue] of Object.entries(value)) {
+            const thisFieldError = fields[id].validator?.(fieldValue);
+            if (thisFieldError) {
+                errors[id] = thisFieldError;
+            }
+        }
+        if (Object.keys(errors).length) {
+            setFieldErrors(errors);
+            return;
+        }
+        await onSubmit(value);
+        close();
+    };
+    return (React.createElement("div", { className: clsx('str-chat__dialog str-chat__dialog--form', className) },
+        React.createElement("div", { className: 'str-chat__dialog__body' },
+            title && React.createElement("div", { className: 'str-chat__dialog__title' }, title),
+            React.createElement("form", { autoComplete: 'off' }, Object.entries(fields).map(([id, fieldConfig]) => (React.createElement("div", { className: 'str-chat__dialog__field', key: `dialog-field-${id}` },
+                fieldConfig.label && (React.createElement("label", { className: clsx(`str-chat__dialog__title str-chat__dialog__title--${id}`), htmlFor: id }, fieldConfig.label)),
+                React.createElement(fieldConfig.element, {
+                    id,
+                    ...fieldConfig.props,
+                    onChange: handleChange,
+                    value: value[id],
+                }),
+                React.createElement(FieldError, { text: fieldErrors[id]?.message })))))),
+        React.createElement("div", { className: 'str-chat__dialog__controls' },
+            React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel', onClick: close }, t('Cancel')),
+            React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--submit', disabled: Object.keys(fieldErrors).length > 0 || shouldDisableSubmitButton?.(value), onClick: handleSubmit, type: 'submit' }, t('Send')))));
+};

package/dist/components/Dialog/PromptDialog.d.ts

@@ -0,0 +1,8 @@
+import React, { ComponentProps } from 'react';
+export type ConfirmationDialogProps = {
+    actions: ComponentProps<'button'>[];
+    prompt: string;
+    className?: string;
+    title?: string;
+};
+export declare const PromptDialog: ({ actions, className, prompt, title }: ConfirmationDialogProps) => React.JSX.Element;

package/dist/components/Dialog/PromptDialog.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import clsx from 'clsx';
+export const PromptDialog = ({ actions, className, prompt, title }) => (React.createElement("div", { className: clsx('str-chat__dialog str-chat__dialog--prompt', className) },
+    React.createElement("div", { className: 'str-chat__dialog__body' },
+        title && React.createElement("div", { className: 'str-chat__dialog__title' }, title),
+        React.createElement("div", { className: 'str-chat__dialog__prompt' }, prompt)),
+    React.createElement("div", { className: 'str-chat__dialog__controls' }, actions.map(({ className, ...props }, i) => (React.createElement("button", { className: clsx(`str-chat__dialog__controls-button`, className), key: `prompt-dialog__controls-button--${i}`, ...props }))))));

package/dist/components/DragAndDrop/DragAndDropContainer.d.ts

@@ -0,0 +1,7 @@
+import React, { PropsWithChildren } from 'react';
+export type DragAndDropContainerProps = PropsWithChildren<{
+    className?: string;
+    draggable?: boolean;
+    onSetNewOrder?: (newOrder: number[]) => void;
+}>;
+export declare const DragAndDropContainer: ({ children, className, draggable, onSetNewOrder, }: DragAndDropContainerProps) => React.JSX.Element;

package/dist/components/DragAndDrop/DragAndDropContainer.js

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
+export const DragAndDropContainer = ({ children, className, draggable, onSetNewOrder, }) => {
+    const [order, setOrder] = useState([]);
+    const [dragStartIndex, setDragStartIndex] = useState(null);
+    const [dragOverIndex, setDragOverIndex] = useState(null);
+    const [container, setContainer] = useState(null);
+    const moveDirection = dragStartIndex === null || dragOverIndex === null
+        ? undefined
+        : dragStartIndex <= dragOverIndex
+            ? 'down'
+            : 'up';
+    const childrenArray = React.Children.toArray(children);
+    useEffect(() => {
+        setOrder(React.Children.map(children, (_, index) => index) || []);
+    }, [children]);
+    useEffect(() => {
+        if (!container)
+            return;
+        const handleDragStart = (e) => {
+            const target = e.target;
+            const draggableItem = target.closest('.str-chat__drag-and-drop-container__item');
+            if (e.dataTransfer) {
+                e.dataTransfer.effectAllowed = 'move';
+            }
+            if (draggableItem instanceof HTMLElement) {
+                const index = Array.from(draggableItem.parentElement?.children || []).indexOf(draggableItem);
+                setDragStartIndex(index);
+                e.dataTransfer?.setData('text/plain', index.toString());
+                draggableItem.style.opacity = '0.3';
+            }
+        };
+        const handleDragOver = (e) => {
+            e.preventDefault();
+            const target = e.target;
+            const draggableItem = target.closest('.str-chat__drag-and-drop-container__item');
+            if (draggableItem instanceof HTMLElement) {
+                const index = Array.from(draggableItem.parentElement?.children || []).indexOf(draggableItem);
+                setDragOverIndex(index);
+            }
+        };
+        const handleDragLeave = () => {
+            setDragOverIndex(null);
+        };
+        const handleDrop = (e) => {
+            e.preventDefault();
+            const draggedIndex = parseInt(e.dataTransfer?.getData('text/plain') || '-1', 10);
+            const target = e.target;
+            const draggableItem = target.closest('.str-chat__drag-and-drop-container__item');
+            if (draggableItem instanceof HTMLElement) {
+                const dropIndex = Array.from(draggableItem.parentElement?.children || []).indexOf(draggableItem);
+                if (draggedIndex !== -1 && draggedIndex !== dropIndex) {
+                    setOrder((prevOrder) => {
+                        const newOrder = [...prevOrder];
+                        const [removed] = newOrder.splice(draggedIndex, 1);
+                        newOrder.splice(dropIndex, 0, removed);
+                        onSetNewOrder?.(newOrder);
+                        return newOrder;
+                    });
+                }
+            }
+            setDragStartIndex(null);
+            setDragOverIndex(null);
+        };
+        const handleDragEnd = (e) => {
+            const target = e.target;
+            if (target instanceof HTMLElement) {
+                target.style.opacity = '';
+            }
+            setDragStartIndex(null);
+            setDragOverIndex(null);
+        };
+        container.addEventListener('dragstart', handleDragStart);
+        container.addEventListener('dragover', handleDragOver);
+        container.addEventListener('dragleave', handleDragLeave);
+        container.addEventListener('drop', handleDrop);
+        container.addEventListener('dragend', handleDragEnd);
+        return () => {
+            container.removeEventListener('dragstart', handleDragStart);
+            container.removeEventListener('dragover', handleDragOver);
+            container.removeEventListener('dragleave', handleDragLeave);
+            container.removeEventListener('drop', handleDrop);
+            container.removeEventListener('dragend', handleDragEnd);
+        };
+    }, [container, onSetNewOrder]);
+    return (React.createElement("div", { className: clsx('str-chat__drag-and-drop-container', className), ref: setContainer }, order.map((originalIndex, currentIndex) => {
+        const child = childrenArray[originalIndex];
+        return (React.createElement("div", { className: clsx('str-chat__drag-and-drop-container__item', {
+                'str-chat__drag-and-drop-container__item--dragged-over-from-bottom': moveDirection === 'up' && dragOverIndex === currentIndex,
+                'str-chat__drag-and-drop-container__item--dragged-over-from-top': moveDirection === 'down' && dragOverIndex === currentIndex,
+            }), draggable: draggable, key: React.isValidElement(child) ? child.key : `draggable-item-${originalIndex}` }, child));
+    })));
+};

package/dist/components/Form/FieldError.d.ts

@@ -0,0 +1,6 @@
+import React, { ComponentProps } from 'react';
+type FieldErrorProps = ComponentProps<'div'> & {
+    text?: string;
+};
+export declare const FieldError: ({ className, text, ...props }: FieldErrorProps) => React.JSX.Element;
+export {};

package/dist/components/Form/FieldError.js

@@ -0,0 +1,3 @@
+import clsx from 'clsx';
+import React from 'react';
+export const FieldError = ({ className, text, ...props }) => (React.createElement("div", { ...props, className: clsx('str-chat__form-field-error', className) }, text));

package/dist/components/Form/SwitchField.d.ts

@@ -0,0 +1,7 @@
+import React, { ComponentProps, PropsWithChildren } from 'react';
+export type SwitchFieldProps = PropsWithChildren<ComponentProps<'input'>>;
+export declare const SwitchField: ({ children, ...props }: SwitchFieldProps) => React.JSX.Element;
+export type SimpleSwitchFieldProps = ComponentProps<'input'> & {
+    labelText: string;
+};
+export declare const SimpleSwitchField: ({ labelText, ...props }: SimpleSwitchFieldProps) => React.JSX.Element;

package/dist/components/Form/SwitchField.js

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import React, { useRef, } from 'react';
+export const SwitchField = ({ children, ...props }) => {
+    const inputRef = useRef(null);
+    const handleKeyUp = (event) => {
+        if (![' ', 'Enter'].includes(event.key) || !inputRef.current)
+            return;
+        event.preventDefault();
+        inputRef.current.click();
+    };
+    return (React.createElement("div", { className: 'str-chat__form__field str-chat__form__switch-field' },
+        React.createElement("label", null,
+            React.createElement("div", { className: 'str-chat__form__field str-chat__form__switch-field-content' }, children),
+            React.createElement("input", { type: 'checkbox', ...props, ref: inputRef }),
+            React.createElement("div", { className: clsx('str-chat__form__switch-field__switch', {
+                    'str-chat__form__switch-field__switch--on': props.checked,
+                }), onKeyUp: handleKeyUp, tabIndex: 0 },
+                React.createElement("div", { className: 'str-chat__form__switch-field__switch-handle' })))));
+};
+export const SimpleSwitchField = ({ labelText, ...props }) => (React.createElement(SwitchField, { ...props },
+    React.createElement("div", { className: 'str-chat__form__field str-chat__form__switch-field__text' }, labelText)));

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.d.ts

@@ -31,4 +31,14 @@ export type InfiniteScrollProps = PaginatorProps & {
     loadMoreNewer?: () => void;
     useCapture?: boolean;
 };
+/**
+ * This component serves a single purpose - load more items on scroll inside the MessageList component
+ * It is not a general purpose infinite scroll controller, because:
+ * 1. It is re-rendered whenever isLoading, hasNext, hasPrev changes. This can lead to scrollListener to have stale data.
+ * 2. It pretends to invoke scrollListener on resize event even though this event is emitted only on window resize. It should
+ * rather use ResizeObserver. But then again, it ResizeObserver would invoke a stale version of scrollListener.
+ *
+ * In general, the infinite scroll controller should not aim for checking the loading state and whether there is more data to load.
+ * That should be controlled by the loading function.
+ */
 export declare const InfiniteScroll: (props: PropsWithChildren<InfiniteScrollProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;