import React, { MutableRefObject, PropsWithChildren } from 'react'; import TencentCloudChat from '@tencentcloud/chat'; import { TUIMessageInputContextProvider } from '../../context/TUIMessageInputContext'; import { useMessageInputState, useCreateMessageInputContext } from './hooks'; import './styles/index.scss'; import { UnknowPorps, useComponentContext, useTUIChatStateContext, useTUIKitContext, } from '../../context'; import { EmptyStateIndicator } from '../EmptyStateIndicator'; import { InputQuoteDefalut } from './InputQuoteDefalut'; import { TUIMessageInputDefault } from './TUIMessageInputDefault'; import { InputPluginsDefalut } from './InputPluginsDefalut'; import { TUIForward } from './TUIForward'; import { Transmitter } from './Transmitter'; export interface PluginConfigProps { plugins?: Array, showNumber?: number, MoreIcon?: React.ReactElement, isEmojiPicker?: boolean, isImagePicker?: boolean, isVideoPicker?: boolean, isFilePicker?: boolean, } export interface TUIMessageInputBasicProps { disabled?: boolean, focus?: boolean, textareaRef?: MutableRefObject, isTransmitter?: boolean, className?: string, pluginConfig?: PluginConfigProps, } export interface TUIMessageInputProps extends TUIMessageInputBasicProps { TUIMessageInput?: React.ComponentType, InputPlugins?: React.ComponentType, InputQuote?: React.ComponentType, } function TUIMessageInputProvider(props: PropsWithChildren) :React.ReactElement { const { children, disabled: propsDisabled, focus: propsFoces, pluginConfig, textareaRef: propsTextareaRef, } = props; const messageInputState = useMessageInputState(props); const { textareaRef, conversation } = useTUIChatStateContext('TUIMessageInput'); const contextDisabled = conversation?.type === TencentCloudChat.TYPES.CONV_SYSTEM; const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput'); const focus = propsFoces || TUIMessageInputConfig?.focus; const messageInputContextValue = useCreateMessageInputContext({ ...messageInputState, ...props, textareaRef: propsTextareaRef || TUIMessageInputConfig?.textareaRef || textareaRef, disabled: propsDisabled || TUIMessageInputConfig?.disabled || contextDisabled, focus: typeof (focus) === 'boolean' ? focus : true, pluginConfig, }); return ( { children } ); } function UnMemoizedTUIMessageInput(props: PropsWithChildren) :React.ReactElement { const { TUIMessageInput: PropTUIMessageInput, InputPlugins: PropInputPlugins, InputQuote: PropInputQuote, isTransmitter: propsIsTransmitter, className: propsClassName, } = props; const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput'); const className = propsClassName || TUIMessageInputConfig?.className; const isTransmitter = propsIsTransmitter || TUIMessageInputConfig?.isTransmitter || false; const { TUIMessageInput: ContextInput, InputPlugins: ContextInputPlugins, InputQuote: ContextInputQuote, } = useComponentContext('TUIMessageInput'); const Input = PropTUIMessageInput || ContextInput || TUIMessageInputDefault; const InputPlugins = PropInputPlugins || ContextInputPlugins || InputPluginsDefalut || EmptyStateIndicator; const InputQuote = PropInputQuote || ContextInputQuote || InputQuoteDefalut; return (
{isTransmitter && }
); } export const TUIMessageInput = React.memo(UnMemoizedTUIMessageInput) as typeof UnMemoizedTUIMessageInput;