Function AIChatBody

packages/gitbook/src/components/AIChat/AIChat.tsx:157–284

(props: {
    chatController: AIChatController;
    chat: AIChatState;
    trademark: boolean;
    welcomeMessage?: string;
    suggestions?: string[];
})

 * Body of the AI chat window.
 */
export function AIChatBody(props: {
    chatController: AIChatController;
    chat: AIChatState;
    trademark: boolean;
    welcomeMessage?: string;
    suggestions?: string[];
}) {
    const { chatController, chat, trademark, suggestions } = props;

    const [input, setInput] = React.useState('');

    const scrollContainerRef = React.useRef<HTMLDivElement>(null);
    // Ref for the last user message element
    const lastUserMessageRef = React.useRef<HTMLDivElement>(null);
    const inputRef = React.useRef<HTMLDivElement>(null);

    const [inputHeight, setInputHeight] = React.useState(0);
    const language = useLanguage();
    const now = useNow(60 * 60 * 1000); // Refresh every hour for greeting

    const isEmpty = !chat.messages.length;

    const timeGreeting = React.useMemo(() => {
        const hour = new Date(now).getHours();
        if (hour < 6) return tString(language, 'ai_chat_assistant_greeting_night');
        if (hour < 12) return tString(language, 'ai_chat_assistant_greeting_morning');
        if (hour < 18) return tString(language, 'ai_chat_assistant_greeting_afternoon');
        return tString(language, 'ai_chat_assistant_greeting_evening');
    }, [now, language]);

    // Auto-scroll to the latest user message when messages change
    React.useEffect(() => {
        if (chat.messages.length > 0 && lastUserMessageRef.current) {
            lastUserMessageRef.current.scrollIntoView({
                behavior: 'smooth',
                block: 'start',
            });
        }
    }, [chat.messages.length]);

    React.useEffect(() => {
        const timeout = setTimeout(() => {
            if (lastUserMessageRef.current) {
                lastUserMessageRef.current.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start',
                });
            }
        }, 100);

        // We want the chat messages to scroll underneath the input, but they should scroll past the input when scrolling all the way down.
        // The best way to do this is to observe the input height and adjust the padding bottom of the scroll container accordingly.
        const observer = new ResizeObserver((entries) => {
            entries.forEach((entry) => {
                setInputHeight(entry.contentRect.height + 32);
            });
        });
        if (inputRef.current) {