Function AIChat

packages/gitbook/src/components/AIChat/AIChat.tsx:32–104

(props: { trademark: boolean })

import AIChatSuggestedQuestions from './AIChatSuggestedQuestions';

export function AIChat(props: { trademark: boolean }) {
    const { trademark } = props;

    const language = useLanguage();
    const chat = useAIChatState();
    const chatController = useAIChatController();
    const containerRef = React.useRef<HTMLDivElement>(null);

    // When the chat is opened, scroll to it (applicable on mobile, where it's displayed above the content)
    React.useEffect(() => {
        if (chat.opened) {
            containerRef.current?.scrollIntoView({
                behavior: 'smooth',
                block: 'start',
            });
        }
    }, [chat.opened]);

    useHotkeys(
        'esc',
        () => {
            chatController.close();
        },
        []
    );

    // Track the view of the AI chat
    const trackEvent = useTrackEvent();
    React.useEffect(() => {
        if (chat.opened) {
            trackEvent({
                type: 'ask_view',
            });
        }
    }, [chat.opened, trackEvent]);

    if (!chat.opened) {
        return null;
    }

    return (
        <div
            data-testid="ai-chat"
            className="ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl animate-present scroll-mt-36 px-4 py-4 transition-all duration-300 sm:px-6 lg:fixed lg:w-80 lg:animate-enter-from-right lg:pr-4 lg:pl-0 xl:w-96"
        >
            <EmbeddableFrame className="relative circular-corners:rounded-3xl rounded-corners:rounded-md depth-subtle:shadow-lg shadow-tint ring-1 ring-tint-subtle">
                <EmbeddableFrameHeader>
                    <AIChatDynamicIcon trademark={trademark} />
                    <EmbeddableFrameHeaderMain>
                        <EmbeddableFrameTitle>
                            {getAIChatName(language, trademark)}
                        </EmbeddableFrameTitle>
                        <AIChatSubtitle chat={chat} />
                    </EmbeddableFrameHeaderMain>
                    <EmbeddableFrameButtons>
                        <AIChatControlButton />
                        <Button
                            onClick={() => chatController.close()}