gitbook/packages/embed/src/react/GitBookFrame.tsx

'use client';

import { useEffect, useMemo, useRef, useState } from 'react';
import type {
    GetFrameURLOptions,
    GitBookEmbeddableConfiguration,
    GitBookFrameClient,
} from '../client';
import { useGitBook } from './GitBookProvider';

export type GitBookFrameProps = {
    className?: string;
} & GetFrameURLOptions &
    Partial<GitBookEmbeddableConfiguration>;

/**
 * Render a frame with the GitBook Assistant in it.
 */
export function GitBookFrame(props: GitBookFrameProps) {
    const {
        className,
        colorScheme,
        visitor,
        actions = [],
        greeting,
        suggestions = [],
        tools = [],
        tabs = ['assistant', 'search', 'docs'],
        trademark = true,
        closeButton = false,
        assistantName,
    } = props;

    const frameRef = useRef<HTMLIFrameElement>(null);
    const gitbook = useGitBook();
    const [gitbookFrame, setGitbookFrame] = useState<GitBookFrameClient | null>(null);

    const frameURL = useMemo(
        () => gitbook.getFrameURL({ visitor, colorScheme }),
        [gitbook, visitor, colorScheme]
    );

    useEffect(() => {
        if (frameRef.current) {
            setGitbookFrame(gitbook.createFrame(frameRef.current));
        }
    }, [gitbook]);

    useEffect(() => {
        gitbookFrame?.configure({
            tabs,
            actions,
            greeting,
            suggestions,
            tools,
            closeButton,
            trademark,
            assistantName,
        });
    }, [
        gitbookFrame,
        actions,
        greeting,
        suggestions,
        tools,
        tabs,
        closeButton,
        trademark,
        assistantName,
    ]);

    return (
        <iframe
            title="GitBook"
            ref={frameRef}
            src={frameURL}
            width="100%"
            height="100%"
            className={className}
            style={colorScheme ? { colorScheme } : undefined}
        />
    );
}