import { Stack } from '@servicetitan/design-system';
import { useDependencies } from '@servicetitan/react-ioc';
import { CHAT_UI_STORE_TOKEN, ChatCustomizations } from '@servicetitan/titan-chat-ui-common';
import { observer } from 'mobx-react';
import { FC, useEffect } from 'react';
import { ChatMessages } from './chat-messages';

export interface IChatProps {
    className?: string;
    customizations?: ChatCustomizations;
}

export const ChatLog: FC<IChatProps> = observer(({ className, customizations }) => {
    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);

    useEffect(() => {
        chatUiStore.setCustomizationContext(customizations);
    }, [chatUiStore, customizations]);

    return (
        <Stack direction="column" className={className} data-cy="titan-chat">
            <ChatMessages
                messages={chatUiStore.messages}
                showTypingIndicator={chatUiStore.isAgentTyping}
            />
        </Stack>
    );
});