import { useDependencies } from '@servicetitan/react-ioc';
import { CHAT_UI_STORE_TOKEN, useCustomizationChat } from '@servicetitan/titan-chat-ui-common';
import { observer } from 'mobx-react';
import { FC } from 'react';
import { MessageTyping } from '../messages/message-typing';
import { useAvatarProps } from '../messages/use-avatar-props';

export const ChatMessageTyping: FC = observer(() => {
    const customization = useCustomizationChat();
    const [
        {
            agent: { icon, name },
        },
    ] = useDependencies(CHAT_UI_STORE_TOKEN);
    const avatar = useAvatarProps(name, icon);
    const Component = customization.messageTyping?.component ?? MessageTyping;

    return <Component avatar={avatar} />;
});