stream-chat-react 12.15.0 → 13.0.0-rc.2

package/dist/components/{CommandItem → TextareaComposer/SuggestionList}/CommandItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-const UnMemoizedCommandItem = (props) => {
+export const CommandItem = (props) => {
     const { entity } = props;
     return (React.createElement("div", { className: 'str-chat__slash-command' },
         React.createElement("span", { className: 'str-chat__slash-command-header' },
@@ -9,4 +9,3 @@ const UnMemoizedCommandItem = (props) => {
         React.createElement("br", null),
         React.createElement("span", { className: 'str-chat__slash-command-description' }, entity.description)));
 };
-export const CommandItem = React.memo(UnMemoizedCommandItem);

package/dist/components/{EmoticonItem → TextareaComposer/SuggestionList}/EmoticonItem.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 export type EmoticonItemProps = {
     entity: {
+        /** Name for emoticon */
+        name: string;
+        /** Native value or actual emoticon */
+        native: string;
         /** The parts of the Name property of the entity (or id if no name) that can be matched to the user input value.
          * Default is bold for matches, but can be overwritten in css.
          * */
-        itemNameParts: {
-            match: string;
+        tokenizedDisplayName: {
+            token: string;
             parts: string[];
         };
-        /** Name for emoticon */
-        name: string;
-        /** Native value or actual emoticon */
-        native: string;
     };
 };
-export declare const EmoticonItem: (props: EmoticonItemProps) => React.JSX.Element;
+export declare const EmoticonItem: (props: EmoticonItemProps) => React.JSX.Element | null;

package/dist/components/TextareaComposer/SuggestionList/EmoticonItem.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export const EmoticonItem = (props) => {
+    const { entity } = props;
+    const hasEntity = Object.keys(entity).length;
+    if (!hasEntity)
+        return null;
+    const { parts, token } = entity.tokenizedDisplayName ?? {};
+    const renderName = () => parts?.map((part, i) => part.toLowerCase() === token ? (React.createElement("span", { className: 'str-chat__emoji-item--highlight', key: `part-${i}` }, part)) : (React.createElement("span", { className: 'str-chat__emoji-item--part', key: `part-${i}` }, part))) ?? null;
+    return (React.createElement("div", { className: 'str-chat__emoji-item' },
+        React.createElement("span", { className: 'str-chat__emoji-item--entity' }, entity.native),
+        React.createElement("span", { className: 'str-chat__emoji-item--name' }, renderName())));
+};

package/dist/components/TextareaComposer/SuggestionList/SuggestionList.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SuggestionListItemComponentProps } from './SuggestionListItem';
+type SuggestionTrigger = '/' | ':' | '@' | string;
+export type SuggestionListProps = Partial<{
+    suggestionItemComponents: Record<SuggestionTrigger, React.ComponentType<SuggestionListItemComponentProps>>;
+    className?: string;
+    closeOnClickOutside?: boolean;
+    containerClassName?: string;
+    focusedItemIndex: number;
+    setFocusedItemIndex: (index: number) => void;
+}>;
+export declare const defaultComponents: Record<SuggestionTrigger, React.ComponentType<SuggestionListItemComponentProps>>;
+export declare const SuggestionList: ({ className, closeOnClickOutside, containerClassName, focusedItemIndex, setFocusedItemIndex, suggestionItemComponents, }: SuggestionListProps) => React.JSX.Element | null;
+export {};

package/dist/components/TextareaComposer/SuggestionList/SuggestionList.js

@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+import { CommandItem } from './CommandItem';
+import { EmoticonItem } from './EmoticonItem';
+import { SuggestionListItem as DefaultSuggestionListItem } from './SuggestionListItem';
+import { UserItem } from './UserItem';
+import { useComponentContext } from '../../../context/ComponentContext';
+import { useStateStore } from '../../../store';
+import { InfiniteScrollPaginator } from '../../InfiniteScrollPaginator/InfiniteScrollPaginator';
+import { useMessageComposer } from '../../MessageInput';
+const textComposerStateSelector = (state) => ({
+    suggestions: state.suggestions,
+});
+const searchSourceStateSelector = (nextValue) => ({
+    items: nextValue.items ?? [],
+});
+export const defaultComponents = {
+    '/': (props) => (React.createElement(CommandItem, { entity: props.entity })),
+    ':': (props) => (React.createElement(EmoticonItem, { entity: props.entity })),
+    '@': (props) => (React.createElement(UserItem, { entity: props.entity })),
+};
+export const SuggestionList = ({ className, closeOnClickOutside = true, containerClassName, focusedItemIndex, setFocusedItemIndex, suggestionItemComponents = defaultComponents, }) => {
+    const { AutocompleteSuggestionItem = DefaultSuggestionListItem } = useComponentContext();
+    const messageComposer = useMessageComposer();
+    const { textComposer } = messageComposer;
+    const { suggestions } = useStateStore(textComposer.state, textComposerStateSelector);
+    const { items } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
+    const [container, setContainer] = useState(null);
+    const component = suggestions?.trigger
+        ? suggestionItemComponents[suggestions?.trigger]
+        : undefined;
+    useEffect(() => {
+        if (!closeOnClickOutside || !suggestions || !container)
+            return;
+        const handleClick = (event) => {
+            if (container.contains(event.target))
+                return;
+            textComposer.closeSuggestions();
+        };
+        document.addEventListener('click', handleClick);
+        return () => {
+            document.removeEventListener('click', handleClick);
+        };
+    }, [closeOnClickOutside, suggestions, container, textComposer]);
+    if (!suggestions || !items?.length || !component)
+        return null;
+    return (React.createElement("div", { className: clsx('str-chat__suggestion-list-container', containerClassName), ref: setContainer },
+        React.createElement(InfiniteScrollPaginator, { loadNextOnScrollToBottom: suggestions.searchSource.search, threshold: 100 },
+            React.createElement("ul", { className: clsx('str-chat__suggestion-list str-chat__suggestion-list--react', className) }, items.map((item, i) => (React.createElement(AutocompleteSuggestionItem, { component: component, focused: focusedItemIndex === i, item: item, key: item.id.toString(), onMouseEnter: () => setFocusedItemIndex?.(i) })))))));
+};

package/dist/components/TextareaComposer/SuggestionList/SuggestionListItem.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { TextComposerSuggestion } from 'stream-chat';
+import type { UserItemProps } from './UserItem';
+import type { CommandItemProps } from './CommandItem';
+import type { EmoticonItemProps } from './EmoticonItem';
+export type DefaultSuggestionListItemEntity = UserItemProps['entity'] | CommandItemProps['entity'] | EmoticonItemProps['entity'];
+export type SuggestionListItemComponentProps = {
+    entity: DefaultSuggestionListItemEntity | unknown;
+    focused: boolean;
+};
+export type SuggestionItemProps = {
+    component: React.ComponentType<SuggestionListItemComponentProps>;
+    item: TextComposerSuggestion;
+    focused: boolean;
+    className?: string;
+    onMouseEnter?: () => void;
+};
+export declare const SuggestionListItem: React.ForwardRefExoticComponent<SuggestionItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/TextareaComposer/SuggestionList/SuggestionListItem.js

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
+import { useMessageComposer } from '../../MessageInput';
+export const SuggestionListItem = React.forwardRef(function SuggestionListItem({ className, component: Component, focused, item, onMouseEnter }, innerRef) {
+    const { textComposer } = useMessageComposer();
+    const containerRef = useRef(null);
+    const handleSelect = useCallback(() => {
+        textComposer.handleSelect(item);
+    }, [item, textComposer]);
+    useLayoutEffect(() => {
+        if (!focused)
+            return;
+        containerRef.current?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
+    }, [focused, containerRef]);
+    return (React.createElement("li", { className: clsx('str-chat__suggestion-list-item', className, {
+            'str-chat__suggestion-item--selected': focused,
+        }), onMouseEnter: onMouseEnter, ref: containerRef },
+        React.createElement("button", { onClick: handleSelect, onKeyDown: (event) => {
+                if (event.key === 'Enter') {
+                    handleSelect();
+                }
+            }, ref: innerRef },
+            React.createElement(Component, { entity: item, focused: focused }))));
+});

package/dist/components/{UserItem → TextareaComposer/SuggestionList}/UserItem.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import { AvatarProps } from '../Avatar';
+import type { AvatarProps } from '../../Avatar';
 export type UserItemProps = {
     /** The user */
     entity: {
         /** The parts of the Name property of the entity (or id if no name) that can be matched to the user input value.
          * Default is bold for matches, but can be overwritten in css.
          * */
-        itemNameParts: {
-            match: string;
+        tokenizedDisplayName: {
+            token: string;
             parts: string[];
         };
         /** Id of the user */
@@ -20,4 +20,7 @@ export type UserItemProps = {
     /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
     Avatar?: React.ComponentType<AvatarProps>;
 };
-export declare const UserItem: ({ Avatar, entity }: UserItemProps) => React.JSX.Element;
+/**
+ * UI component for mentions rendered in suggestion list
+ */
+export declare const UserItem: ({ Avatar, entity }: UserItemProps) => React.JSX.Element | null;

package/dist/components/TextareaComposer/SuggestionList/UserItem.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Avatar as DefaultAvatar } from '../../Avatar';
+/**
+ * UI component for mentions rendered in suggestion list
+ */
+export const UserItem = ({ Avatar = DefaultAvatar, entity }) => {
+    const hasEntity = !!Object.keys(entity).length;
+    if (!hasEntity)
+        return null;
+    const { parts, token } = entity.tokenizedDisplayName;
+    const renderName = () => parts.map((part, i) => {
+        const matches = part.toLowerCase() === token;
+        const partWithHTMLSpacesAround = part.replace(/^\s+|\s+$/g, '\u00A0');
+        return (React.createElement("span", { className: clsx({
+                'str-chat__emoji-item--highlight': matches,
+                'str-chat__emoji-item--part': !matches,
+            }), key: `part-${i}` }, partWithHTMLSpacesAround));
+    });
+    return (React.createElement("div", { className: 'str-chat__user-item' },
+        React.createElement(Avatar, { className: 'str-chat__avatar--autocomplete-item', image: entity.image, name: entity.name || entity.id }),
+        React.createElement("span", { className: 'str-chat__user-item--name', "data-testid": 'user-item-name' }, renderName()),
+        React.createElement("div", { className: 'str-chat__user-item-at' }, "@")));
+};

package/dist/components/TextareaComposer/SuggestionList/index.d.ts

@@ -0,0 +1,5 @@
+export * from './CommandItem';
+export * from './EmoticonItem';
+export * from './SuggestionList';
+export * from './SuggestionListItem';
+export * from './UserItem';

package/dist/components/TextareaComposer/SuggestionList/index.js

@@ -0,0 +1,5 @@
+export * from './CommandItem';
+export * from './EmoticonItem';
+export * from './SuggestionList';
+export * from './SuggestionListItem';
+export * from './UserItem';

package/dist/components/TextareaComposer/TextareaComposer.d.ts

@@ -0,0 +1,13 @@
+import type { TextareaHTMLAttributes } from 'react';
+import React from 'react';
+export type TextComposerProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style' | 'defaultValue' | 'disabled'> & {
+    closeSuggestionsOnClickOutside?: boolean;
+    containerClassName?: string;
+    dropdownClassName?: string;
+    grow?: boolean;
+    itemClassName?: string;
+    listClassName?: string;
+    maxRows?: number;
+    shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;
+};
+export declare const TextareaComposer: ({ className, closeSuggestionsOnClickOutside, containerClassName, grow: growProp, listClassName, maxRows: maxRowsProp, onBlur, onChange, onKeyDown, onScroll, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restProps }: TextComposerProps) => React.JSX.Element;

package/dist/components/TextareaComposer/TextareaComposer.js

@@ -0,0 +1,155 @@
+import clsx from 'clsx';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Textarea from 'react-textarea-autosize';
+import { useMessageComposer } from '../MessageInput';
+import { useComponentContext, useMessageInputContext, useTranslationContext, } from '../../context';
+import { useStateStore } from '../../store';
+import { SuggestionList as DefaultSuggestionList } from './SuggestionList';
+const textComposerStateSelector = (state) => ({
+    selection: state.selection,
+    suggestions: state.suggestions,
+    text: state.text,
+});
+const searchSourceStateSelector = (state) => ({
+    isLoadingItems: state.isLoading,
+    items: state.items,
+});
+const configStateSelector = (state) => ({
+    enabled: state.text.enabled,
+});
+/**
+ * isComposing prevents double submissions in Korean and other languages.
+ * starting point for a read:
+ * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing
+ * In the long term, the fix should happen by handling keypress, but changing this has unknown implications.
+ */
+const defaultShouldSubmit = (event) => event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
+export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, containerClassName, 
+// dropdownClassName, // todo: X find a different way to prevent prop drilling
+grow: growProp, 
+// itemClassName, // todo: X find a different way to prevent prop drilling
+listClassName, maxRows: maxRowsProp = 1, onBlur, onChange, onKeyDown, onScroll, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restProps }) => {
+    const { t } = useTranslationContext();
+    const { AutocompleteSuggestionList = DefaultSuggestionList } = useComponentContext();
+    const { additionalTextareaProps, cooldownRemaining, grow: growContext, handleSubmit, maxRows: maxRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef, } = useMessageInputContext();
+    const grow = growProp ?? growContext;
+    const maxRows = maxRowsProp ?? maxRowsContext;
+    const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
+    const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
+    const messageComposer = useMessageComposer();
+    const { textComposer } = messageComposer;
+    const { selection, suggestions, text } = useStateStore(textComposer.state, textComposerStateSelector);
+    const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
+    const { isLoadingItems } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
+    const containerRef = useRef(null);
+    const [focusedItemIndex, setFocusedItemIndex] = useState(0);
+    const [isComposing, setIsComposing] = useState(false);
+    const changeHandler = useCallback((e) => {
+        if (onChange) {
+            onChange(e);
+            return;
+        }
+        if (!textareaRef.current)
+            return;
+        textComposer.handleChange({
+            selection: {
+                end: textareaRef.current.selectionEnd,
+                start: textareaRef.current.selectionStart,
+            },
+            text: e.target.value,
+        });
+    }, [onChange, textComposer, textareaRef]);
+    const onCompositionEnd = useCallback(() => {
+        setIsComposing(false);
+    }, []);
+    const onCompositionStart = useCallback(() => {
+        setIsComposing(true);
+    }, []);
+    const keyDownHandler = useCallback((event) => {
+        if (onKeyDown) {
+            onKeyDown(event);
+            return;
+        }
+        if (event.key === 'Enter') {
+            // allow next line only on Shift + Enter. Enter is reserved for submission.
+            event.preventDefault();
+        }
+        if (textComposer.suggestions &&
+            textComposer.suggestions.searchSource.items?.length) {
+            if (event.key === 'Escape')
+                return textComposer.closeSuggestions();
+            const loadedItems = textComposer.suggestions.searchSource.items;
+            if (event.key === 'Enter') {
+                textComposer.handleSelect(loadedItems[focusedItemIndex]);
+            }
+            if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                setFocusedItemIndex((prev) => {
+                    let nextIndex = prev - 1;
+                    if (suggestions?.searchSource.hasNext) {
+                        nextIndex = prev;
+                    }
+                    else if (nextIndex < 0) {
+                        nextIndex = loadedItems.length - 1;
+                    }
+                    return nextIndex;
+                });
+            }
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                setFocusedItemIndex((prev) => {
+                    let nextIndex = prev + 1;
+                    if (suggestions?.searchSource.hasNext) {
+                        nextIndex = prev;
+                    }
+                    else if (nextIndex >= loadedItems.length) {
+                        nextIndex = 0;
+                    }
+                    return nextIndex;
+                });
+            }
+        }
+        else if (shouldSubmit(event) && textareaRef.current) {
+            handleSubmit();
+            textareaRef.current.selectionEnd = 0;
+        }
+    }, [
+        focusedItemIndex,
+        handleSubmit,
+        onKeyDown,
+        shouldSubmit,
+        suggestions,
+        textComposer,
+        textareaRef,
+    ]);
+    const scrollHandler = useCallback((event) => {
+        if (onScroll) {
+            onScroll(event);
+        }
+        else {
+            textComposer.closeSuggestions();
+        }
+    }, [onScroll, textComposer]);
+    useEffect(() => {
+        // FIXME: find the real reason for cursor being set to the end on each change
+        // This is a workaround to prevent the cursor from jumping
+        // to the end of the textarea when the user is typing
+        // at the position that is not at the end of the textarea value.
+        if (textareaRef.current && !isComposing) {
+            textareaRef.current.selectionStart = selection.start;
+            textareaRef.current.selectionEnd = selection.end;
+        }
+    }, [text, textareaRef, selection.start, selection.end, isComposing]);
+    useEffect(() => {
+        if (textComposer.suggestions) {
+            setFocusedItemIndex(0);
+        }
+    }, [textComposer.suggestions]);
+    return (React.createElement("div", { className: clsx('rta', 'str-chat__textarea str-chat__message-textarea-react-host', containerClassName, {
+            ['rta--loading']: isLoadingItems,
+        }), ref: containerRef },
+        React.createElement(Textarea, { ...restProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: clsx('rta__textarea', 'str-chat__textarea__textarea str-chat__message-textarea', className), "data-testid": 'message-input', disabled: !enabled || !!cooldownRemaining, maxRows: grow ? maxRows : 1, onBlur: onBlur, onChange: changeHandler, onCompositionEnd: onCompositionEnd, onCompositionStart: onCompositionStart, onKeyDown: keyDownHandler, onPaste: onPaste, onScroll: scrollHandler, placeholder: placeholder || t('Type your message'), ref: (ref) => {
+                textareaRef.current = ref;
+            }, value: text }),
+        !isComposing && (React.createElement(AutocompleteSuggestionList, { className: listClassName, closeOnClickOutside: closeSuggestionsOnClickOutside, focusedItemIndex: focusedItemIndex, setFocusedItemIndex: setFocusedItemIndex }))));
+};

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

@@ -0,0 +1,2 @@
+export * from './SuggestionList';
+export * from './TextareaComposer';

package/dist/components/TextareaComposer/index.js

@@ -0,0 +1,2 @@
+export * from './SuggestionList';
+export * from './TextareaComposer';

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

@@ -1,18 +1,18 @@
 import React from 'react';
-import { MessageInputProps } from '../MessageInput';
-import { MessageListProps, VirtualizedMessageListProps } from '../MessageList';
+import type { MessageInputProps } from '../MessageInput';
+import type { MessageListProps, VirtualizedMessageListProps } from '../MessageList';
 import type { MessageProps, MessageUIComponentProps } from '../Message/types';
 import type { MessageActionsArray } from '../Message/utils';
-import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types';
-export type ThreadProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
+import type { LocalMessage } from 'stream-chat';
+export type ThreadProps = {
     /** Additional props for `MessageInput` component: [available props](https://getstream.io/chat/docs/sdk/react/message-input-components/message_input/#props) */
-    additionalMessageInputProps?: MessageInputProps<StreamChatGenerics, V>;
+    additionalMessageInputProps?: MessageInputProps;
     /** Additional props for `MessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/message_list/#props) */
-    additionalMessageListProps?: MessageListProps<StreamChatGenerics>;
+    additionalMessageListProps?: MessageListProps;
     /** Additional props for `Message` component of the parent message: [available props](https://getstream.io/chat/docs/sdk/react/message-components/message/#props) */
-    additionalParentMessageProps?: Partial<MessageProps<StreamChatGenerics>>;
+    additionalParentMessageProps?: Partial<MessageProps>;
     /** Additional props for `VirtualizedMessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/virtualized_list/#props) */
-    additionalVirtualizedMessageListProps?: VirtualizedMessageListProps<StreamChatGenerics>;
+    additionalVirtualizedMessageListProps?: VirtualizedMessageListProps;
     /** If true, focuses the `MessageInput` component on opening a thread */
     autoFocus?: boolean;
     /** Injects date separator components into `Thread`, defaults to `false`. To be passed to the underlying `MessageList` or `VirtualizedMessageList` components */
@@ -20,13 +20,16 @@ export type ThreadProps<StreamChatGenerics extends DefaultStreamChatGenerics = D
     /** Custom thread input UI component used to override the default `Input` value stored in `ComponentContext` or the [MessageInputSmall](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputSmall.tsx) default */
     Input?: React.ComponentType;
     /** Custom thread message UI component used to override the default `Message` value stored in `ComponentContext` */
-    Message?: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>;
+    Message?: React.ComponentType<MessageUIComponentProps>;
     /** Array of allowed message actions (ex: ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply']). To disable all actions, provide an empty array. */
     messageActions?: MessageActionsArray;
     /** If true, render the `VirtualizedMessageList` instead of the standard `MessageList` component */
     virtualized?: boolean;
 };
+export declare const useLegacyThreadContext: () => {
+    legacyThread: LocalMessage | undefined;
+};
 /**
  * The Thread component renders a parent Message with a list of replies
  */
-export declare const Thread: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: ThreadProps<StreamChatGenerics, V>) => React.JSX.Element | null;
+export declare const Thread: (props: ThreadProps) => React.JSX.Element | null;

package/dist/components/Thread/Thread.js

@@ -1,20 +1,24 @@
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import clsx from 'clsx';
 import { MESSAGE_ACTIONS } from '../Message';
 import { MessageInput, MessageInputFlat } from '../MessageInput';
-import { MessageList, VirtualizedMessageList, } from '../MessageList';
+import { MessageList, VirtualizedMessageList } from '../MessageList';
 import { ThreadHeader as DefaultThreadHeader } from './ThreadHeader';
 import { ThreadHead as DefaultThreadHead } from '../Thread/ThreadHead';
 import { useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, } from '../../context';
 import { useThreadContext } from '../Threads';
 import { useStateStore } from '../../store';
+const LegacyThreadContext = React.createContext({ legacyThread: undefined });
+export const useLegacyThreadContext = () => useContext(LegacyThreadContext);
 /**
  * The Thread component renders a parent Message with a list of replies
  */
 export const Thread = (props) => {
     const { channel, channelConfig, thread } = useChannelStateContext('Thread');
     const threadInstance = useThreadContext();
-    if ((!thread && !threadInstance) || channelConfig?.replies === false)
+    if (!thread && !threadInstance)
+        return null;
+    if (channelConfig?.replies === false)
         return null;
     // the wrapper ensures a key variable is set and the component recreates on thread switch
     return (
@@ -30,22 +34,24 @@ const selector = (nextValue) => ({
 const ThreadInner = (props) => {
     const { additionalMessageInputProps, additionalMessageListProps, additionalParentMessageProps, additionalVirtualizedMessageListProps, autoFocus = true, enableDateSeparator = false, Input: PropInput, Message: PropMessage, messageActions = Object.keys(MESSAGE_ACTIONS), virtualized, } = props;
     const threadInstance = useThreadContext();
-    const { isLoadingNext, isLoadingPrev, parentMessage, replies } = useStateStore(threadInstance?.state, selector) ?? {};
     const { thread, threadHasMore, threadLoadingMore, threadMessages = [], threadSuppressAutoscroll, } = useChannelStateContext('Thread');
     const { closeThread, loadMoreThread } = useChannelActionContext('Thread');
     const { customClasses } = useChatContext('Thread');
     const { Message: ContextMessage, ThreadHead = DefaultThreadHead, ThreadHeader = DefaultThreadHeader, ThreadInput: ContextInput, VirtualMessage, } = useComponentContext('Thread');
+    const { isLoadingNext, isLoadingPrev, parentMessage, replies } = useStateStore(threadInstance?.state, selector) ?? {};
     const ThreadInput = PropInput ?? additionalMessageInputProps?.Input ?? ContextInput ?? MessageInputFlat;
     const ThreadMessage = PropMessage || additionalMessageListProps?.Message;
     const FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;
     const MessageUIComponent = ThreadMessage || FallbackMessage;
     const ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
     useEffect(() => {
-        if (thread?.id && thread?.reply_count) {
+        if (threadInstance)
+            return;
+        if ((thread?.reply_count ?? 0) > 0) {
             // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options
             loadMoreThread();
         }
-    }, [thread, loadMoreThread]);
+    }, [thread, loadMoreThread, threadInstance]);
     const threadProps = threadInstance
         ? {
             loadingMore: isLoadingPrev,
@@ -68,10 +74,15 @@ const ThreadInner = (props) => {
             'str-chat__thread--virtualized': virtualized,
         });
     const head = (React.createElement(ThreadHead, { key: messageAsThread.id, message: messageAsThread, Message: MessageUIComponent, ...additionalParentMessageProps }));
-    return (React.createElement("div", { className: threadClass },
-        React.createElement(ThreadHeader, { closeThread: closeThread, thread: messageAsThread }),
-        React.createElement(ThreadMessageList, { disableDateSeparator: !enableDateSeparator, head: head, Message: MessageUIComponent, messageActions: messageActions, suppressAutoscroll: threadSuppressAutoscroll, threadList: true, ...threadProps, ...(virtualized
-                ? additionalVirtualizedMessageListProps
-                : additionalMessageListProps) }),
-        React.createElement(MessageInput, { focus: autoFocus, Input: ThreadInput, isThreadInput: true, parent: thread ?? parentMessage, publishTypingEvent: false, ...additionalMessageInputProps })));
+    return (
+    // Thread component needs a context which we can use for message composer
+    React.createElement(LegacyThreadContext.Provider, { value: {
+            legacyThread: thread ?? undefined,
+        } },
+        React.createElement("div", { className: threadClass },
+            React.createElement(ThreadHeader, { closeThread: closeThread, thread: messageAsThread }),
+            React.createElement(ThreadMessageList, { disableDateSeparator: !enableDateSeparator, head: head, Message: MessageUIComponent, messageActions: messageActions, suppressAutoscroll: threadSuppressAutoscroll, threadList: true, ...threadProps, ...(virtualized
+                    ? additionalVirtualizedMessageListProps
+                    : additionalMessageListProps) }),
+            React.createElement(MessageInput, { focus: autoFocus, Input: ThreadInput, isThreadInput: true, parent: thread ?? parentMessage, ...additionalMessageInputProps }))));
 };

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

@@ -1,4 +1,3 @@
 import React from 'react';
-import { MessageProps } from '../Message';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare const ThreadHead: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageProps<StreamChatGenerics>) => React.JSX.Element;
+import type { MessageProps } from '../Message';
+export declare const ThreadHead: (props: MessageProps) => React.JSX.Element;

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

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

package/dist/components/Thread/ThreadHeader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useChannelPreviewInfo, } from '../ChannelPreview/hooks/useChannelPreviewInfo';
+import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreviewInfo';
 import { CloseIcon } from './icons';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';

package/dist/components/Threads/ThreadContext.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
-import { Thread } from 'stream-chat';
+import type { Thread } from 'stream-chat';
 export type ThreadContextValue = Thread | undefined;
 export declare const ThreadContext: React.Context<ThreadContextValue>;
-export declare const useThreadContext: () => Thread<import("stream-chat").DefaultGenerics> | undefined;
+export declare const useThreadContext: () => ThreadContextValue;
 export declare const ThreadProvider: ({ children, thread, }: PropsWithChildren<{
     thread?: Thread;
 }>) => React.JSX.Element;

package/dist/components/Threads/ThreadContext.js

@@ -1,9 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { Channel } from '../../components';
 export const ThreadContext = createContext(undefined);
-export const useThreadContext = () => {
-    const thread = useContext(ThreadContext);
-    return thread ?? undefined;
-};
+export const useThreadContext = () => useContext(ThreadContext);
 export const ThreadProvider = ({ children, thread, }) => (React.createElement(ThreadContext.Provider, { value: thread },
     React.createElement(Channel, { channel: thread?.channel }, children)));

package/dist/components/Threads/ThreadList/ThreadList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VirtuosoProps } from 'react-virtuoso';
+import type { VirtuosoProps } from 'react-virtuoso';
 import type { Thread } from 'stream-chat';
 type ThreadListProps = {
     virtuosoProps?: VirtuosoProps<Thread, unknown>;

package/dist/components/Threads/ThreadList/ThreadListItem.d.ts

@@ -5,5 +5,5 @@ export type ThreadListItemProps = {
     thread: Thread;
     threadListItemUIProps?: ThreadListItemUIProps;
 };
-export declare const useThreadListItemContext: () => Thread<import("stream-chat").DefaultGenerics> | undefined;
+export declare const useThreadListItemContext: () => Thread | undefined;
 export declare const ThreadListItem: ({ thread, threadListItemUIProps, }: ThreadListItemProps) => React.JSX.Element;

package/dist/components/Threads/hooks/useThreadManagerState.d.ts

@@ -1,2 +1,2 @@
-import { ThreadManagerState } from 'stream-chat';
+import type { ThreadManagerState } from 'stream-chat';
 export declare const useThreadManagerState: <T extends readonly unknown[]>(selector: (nextValue: ThreadManagerState) => T) => T;

package/dist/components/Threads/hooks/useThreadState.d.ts

@@ -1,4 +1,4 @@
-import { ThreadState } from 'stream-chat';
+import type { ThreadState } from 'stream-chat';
 /**
  * @description returns thread state, prioritizes `ThreadListItemContext` falls back to `ThreadContext` if not former is not present
  */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 export declare const Icon: {
     MessageBubble: (props: ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;
     MessageBubbleEmpty: (props: ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;