import type { FC } from 'react';
import type { z } from '@botpress/sdk';
import type { Definitions } from './definition';
/**
 * Metadata for custom component discovery, preview, and autonomous usage.
 *
 * The dev console uses this metadata to render installed component previews:
 * `props` drives the props form, `exampleValues` seed preview props, and
 * `description` is shown alongside the component. Conversations also use the
 * same metadata to tell the LLM when and how to yield the component.
 */
export type CustomComponentMetadata = {
    /** A description of what this component does, shown in the dev console and to the LLM. */
    description: string;
    /** Zod schema defining the component's props — used for preview forms and LLM prop validation. */
    props: z.ZodObject<any>;
    /** Example prop values for dev console previews and LLM usage examples. */
    exampleValues: Record<string, unknown>[];
};
/** @deprecated Use `CustomComponentMetadata`. */
export type LlmMetadata = CustomComponentMetadata;
/** Build a self-closing JSX tag from a component name and prop values */
export declare function buildExampleJsx(name: string, values: Record<string, unknown>): string;
export declare namespace Typings {
    type Props<TProps = any> = FC<TProps>;
    const Primitive: "customComponent";
}
export declare class BaseCustomComponent<TProps = any> implements Definitions.Primitive {
    readonly name: string;
    readonly _component: FC<TProps>;
    readonly metadata: CustomComponentMetadata | undefined;
    /** @deprecated Use `metadata`. */
    readonly llmMetadata: CustomComponentMetadata | undefined;
    private _url;
    /**
     * Create a custom React component for webchat rendering.
     *
     * @param component - The React function component to render in webchat.
     * @param metadata - Optional component metadata. The dev console uses it for installed
     *   previews and props playgrounds; conversations use it so the LLM can yield this
     *   component during autonomous execution.
     *
     * @example
     * ```ts
     * // Plain component. It can be rendered directly, but has no preview metadata
     * // and cannot be listed in Conversation.components.
     * new CustomComponent(MyBanner)
     *
     * // With component metadata. Enables dev console previews and LLM usage.
     * new CustomComponent(TicketCard, {
     *   description: 'Display a ticket summary card',
     *   props: z.object({ ticketId: z.string(), title: z.string() }),
     *   exampleValues: [{ ticketId: 'TKT-001', title: 'VPN broken' }],
     * })
     * ```
     */
    constructor(component: FC<TProps>, metadata?: CustomComponentMetadata);
    /** Whether this component has metadata for dev console previews and LLM usage. */
    get hasMetadata(): boolean;
    /** @deprecated Use `hasMetadata`. */
    get hasLlmMetadata(): boolean;
    encode(props: TProps): {
        url: string;
        name: string;
        data: TProps;
    };
}
//# sourceMappingURL=custom-component.d.ts.map