import * as SliderPrimitive from '@radix-ui/react-slider';
import * as React$1 from 'react';
import React__default, { ReactNode, HTMLAttributes, ComponentProps as ComponentProps$3 } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
import { VariantProps } from 'class-variance-authority';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { TransportState, TransportConnectionParams, APIRequest, PipecatClientOptions, PipecatClient } from '@pipecat-ai/client-js';
import { ConversationMessage, AggregationMetadata, FunctionCallRenderer, OptionalMediaDeviceInfo, FunctionCallData, usePipecatClientMediaTrack, PipecatClientVideo } from '@pipecat-ai/client-react';
export { AggregationMetadata, BotOutputEvent, BotOutputText, ConversationMessage, ConversationMessagePart, FunctionCallData, FunctionCallRenderer, usePipecatConversation as useConversation, useConversationContext, usePipecatConversation } from '@pipecat-ai/client-react';
import * as SelectPrimitive from '@radix-ui/react-select';
import { DailyTransportConstructorOptions } from '@pipecat-ai/daily-transport';
import { SmallWebRTCTransportConstructorOptions } from '@pipecat-ai/small-webrtc-transport';
import { WebSocketTransportConstructorOptions } from '@pipecat-ai/websocket-transport';
import { LucideIcon } from 'lucide-react';
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import * as ProgressPrimitive from '@radix-ui/react-progress';
import * as ResizablePrimitive from 'react-resizable-panels';
export { ResizablePrimitive };
import * as TabsPrimitive from '@radix-ui/react-tabs';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { ClassValue } from 'clsx';

/**
 * Renders the bot's audio output and binds its volume to
 * {@link useBotAudioStore}.
 *
 * Functionally equivalent to `PipecatClientAudio` from
 * `@pipecat-ai/client-react` (attaches the bot's audio MediaStreamTrack to an
 * `<audio>` element and responds to `SpeakerUpdated` via `setSinkId`), with
 * the addition that `audio.volume` is driven by the bot audio store so it
 * can be controlled via `BotAudioControl` / `useBotAudioOutput`.
 *
 * Rendered by `PipecatAppBase` in place of `PipecatClientAudio` unless
 * `noAudioOutput` is set.
 */
declare const BotAudioOutput: React.FC;

/**
 * A thin wrapper around Radix Slider styled to match the rest of the kit.
 * Supports horizontal or vertical orientation.
 */
declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;

/**
 * Base props shared by the connected and headless variants.
 */
interface Props$b {
    /** Hide the label + percent readout row. Default: false */
    noLabel?: boolean;
    /** Hide just the percent readout (keeps the label). Default: false */
    noPercent?: boolean;
    /** Override the label text. Default: `"Bot volume"` */
    label?: string;
    /** Slider orientation. Default: `"horizontal"` */
    orientation?: "horizontal" | "vertical";
    /** Classes for the outer wrapper */
    className?: string;
    /** Classes for individual parts */
    classNames?: {
        /** Classes for the label row */
        labelRow?: string;
        /** Classes for the label text */
        label?: string;
        /** Classes for the percent readout */
        percent?: string;
        /** Classes for the slider itself */
        slider?: string;
    };
    /** Props forwarded to the underlying Slider primitive */
    sliderProps?: Partial<React.ComponentProps<typeof Slider>>;
}
/**
 * Props for the headless {@link BotVolumeSliderComponent}.
 */
interface ComponentProps$2 extends Props$b {
    /** Current volume, 0.0 – 1.0 */
    volume?: number;
    /** Callback fired when the volume changes. Receives 0.0 – 1.0 */
    onVolumeChange?: (volume: number) => void;
}
/**
 * Headless bot volume slider. Accepts `volume` + `onVolumeChange` directly,
 * so you can drive it from any state source (tests, custom stores, etc.).
 */
declare const BotVolumeSliderComponent: React.FC<ComponentProps$2>;
/**
 * Connected bot volume slider wired to the kit's bot audio store
 * ({@link useBotAudioOutput}). Drop it anywhere inside `PipecatAppBase` for
 * an inline volume control; `BotAudioControl` composes it inside a popover.
 *
 * @example
 * ```tsx
 * <BotVolumeSlider />
 * <BotVolumeSlider noLabel />
 * <BotVolumeSlider orientation="vertical" className="h-40" />
 * ```
 */
declare const BotVolumeSlider: React.FC<Props$b>;

declare const buttonVariants: (props?: ({
    variant?: "link" | "primary" | "secondary" | "outline" | "destructive" | "ghost" | "active" | "inactive" | null | undefined;
    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
    rounded?: "size" | "sm" | "md" | "lg" | "xl" | "none" | "full" | null | undefined;
    state?: "default" | "active" | "inactive" | null | undefined;
    isIcon?: boolean | null | undefined;
    isFullWidth?: boolean | null | undefined;
    loader?: "icon" | "stripes" | null | undefined;
    uppercase?: boolean | null | undefined;
    noContainerQueries?: boolean | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
type ButtonVariant = NonNullable<Parameters<typeof buttonVariants>[0]>["variant"];
type ButtonSize = NonNullable<Parameters<typeof buttonVariants>[0]>["size"];
type ButtonState = NonNullable<Parameters<typeof buttonVariants>[0]>["state"];

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, "variant" | "size" | "rounded" | "state"> {
    asChild?: boolean;
    isLoading?: boolean;
    isFullWidth?: boolean;
    loader?: "icon" | "stripes";
    variant?: VariantProps<typeof buttonVariants>["variant"];
    size?: VariantProps<typeof buttonVariants>["size"];
    rounded?: VariantProps<typeof buttonVariants>["rounded"];
    state?: VariantProps<typeof buttonVariants>["state"];
    noContainerQueries?: boolean;
}
declare function Button({ className, variant, size, rounded, state, isIcon, isLoading, isFullWidth, uppercase, noContainerQueries, asChild, loader, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;

declare function Popover({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
declare function PopoverContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
declare function PopoverAnchor({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;

/**
 * Base props interface for BotAudioControl components.
 */
interface Props$a {
    /** Visual style variant for the control button */
    variant?: ButtonVariant;
    /** Size of the control button */
    size?: ButtonSize;
    /** State of the control button (default, inactive, etc.) */
    state?: ButtonState;
    /** Additional props to pass to the control button */
    buttonProps?: Partial<React.ComponentProps<typeof Button>>;
    /**
     * Props forwarded to the Radix `Popover` root (e.g. `open`, `defaultOpen`,
     * `onOpenChange`, `modal`).
     */
    popoverProps?: Partial<React.ComponentProps<typeof Popover>>;
    /**
     * Props forwarded to `PopoverContent`. Use this to adjust placement —
     * `align`, `side`, `sideOffset`, `alignOffset`, `collisionPadding`, etc.
     * Defaults: `align="end"`.
     */
    popoverContentProps?: Partial<React.ComponentProps<typeof PopoverContent>>;
    /**
     * Props forwarded to the inner {@link BotVolumeSliderComponent} (e.g.
     * `noLabel`, `noPercent`, `orientation`, `sliderProps`).
     */
    volumeSliderProps?: Partial<Omit<React.ComponentProps<typeof BotVolumeSliderComponent>, "volume" | "onVolumeChange">>;
    /** Custom CSS classes for different parts of the component */
    classNames?: {
        /** CSS classes for the trigger button */
        button?: string;
        /** CSS classes for the popover content */
        popoverContent?: string;
        /** CSS classes for the volume slider */
        slider?: string;
    };
    /** Whether to hide the volume icon in the button */
    noIcon?: boolean;
    /** Optional visible label rendered next to the icon */
    label?: string;
    /** Custom content to render inside the button (after the icon/label) */
    children?: React.ReactNode;
}
/**
 * Props interface for the headless BotAudioComponent.
 */
interface ComponentProps$1 extends Props$a {
    /** Current volume, 0.0 – 1.0 */
    volume?: number;
    /** Callback invoked when the volume changes (value is in 0.0 – 1.0) */
    onVolumeChange?: (volume: number) => void;
}
/**
 * Headless `BotAudioComponent` that accepts volume state and a change callback.
 *
 * Useful when you need full control over state (tests, custom stores, etc.)
 * and don't want the connected `BotAudioControl` to read/write the kit's
 * bot audio store.
 */
declare const BotAudioComponent: React.FC<ComponentProps$1>;
/**
 * Connected `BotAudioControl` wired to the kit's bot audio store and the
 * Pipecat client transport state.
 *
 * Must be used within a `PipecatClientProvider` (typically via
 * `PipecatAppBase`). The control becomes disabled while the transport is
 * disconnected or initializing.
 *
 * @example
 * ```tsx
 * <BotAudioControl size="sm" />
 * ```
 */
declare const BotAudioControl: React.FC<Props$a>;

interface DataListProps {
    data: Record<string, string | ReactNode>;
    classNames?: {
        container?: string;
        key?: string;
        value?: string;
    };
}
declare const DataList: React__default.FC<DataListProps>;

interface Props$9 {
    classNames?: React.ComponentProps<typeof DataList>["classNames"] & {
        agentValue?: string;
        clientValue?: string;
    };
    noAgentState?: boolean;
    noClientState?: boolean;
}
declare const ClientStatusComponent: ({ className, transportState, }: {
    className?: string;
    transportState?: string | null;
}) => react_jsx_runtime.JSX.Element;
declare const ClientStatus: React.FC<Props$9>;

/**
 * Configuration for customizing button appearance and content for specific transport states.
 * Allows partial configuration - only specify the states you want to customize.
 */
type ConnectButtonStateContent = Partial<Record<TransportState, {
    /** The text or content to display in the button */
    children: React__default.ReactNode;
    /** The button variant to use for this state */
    variant: ButtonVariant;
    /** Optional CSS class to apply to the button */
    className?: string;
}>>;
/**
 * Props for the ConnectButton component.
 */
type ConnectButtonProps = {
    /** CSS class name to apply to the button */
    className?: string;
    /** Callback function called when the connect action is triggered */
    onConnect?: () => void;
    /** Generic click handler for the button */
    onClick?: () => void;
    /** Callback function called when the disconnect action is triggered */
    onDisconnect?: () => void;
    /** Size of the button component */
    size?: ButtonSize;
    /** Default variant of the button component */
    defaultVariant?: ButtonVariant;
    /** Custom state content configuration for different transport states */
    stateContent?: ConnectButtonStateContent;
};
/**
 * Internal component that renders a connect/disconnect button based on transport state.
 * Handles button appearance, content, and interactions based on the current transport state.
 *
 * @param props - Component props including transport state and configuration
 * @returns A button component that adapts to the current transport state
 */
declare const ConnectButtonComponent: React__default.FC<ConnectButtonProps & {
    transportState: TransportState;
}>;
/**
 * ConnectButton component that automatically adapts to the current transport state.
 *
 * This component:
 * - Automatically gets the current transport state from the Pipecat client
 * - Renders a button that changes appearance and behavior based on the state
 * - Handles connect/disconnect actions automatically
 * - Supports custom state content configuration
 *
 * @param props - Component configuration including callbacks and styling options
 * @returns A button component that adapts to transport state changes
 */
declare const ConnectButton: React__default.MemoExoticComponent<(props: ConnectButtonProps) => react_jsx_runtime.JSX.Element>;

declare const badgeVariants: (props?: ({
    color?: "primary" | "secondary" | "destructive" | "active" | "inactive" | "warning" | "agent" | "client" | null | undefined;
    variant?: "default" | "outline" | "filled" | "elbow" | "bracket" | null | undefined;
    size?: "sm" | "md" | "lg" | null | undefined;
    uppercase?: boolean | null | undefined;
    buttonSizing?: boolean | null | undefined;
    rounded?: "size" | "sm" | "md" | "lg" | "none" | "full" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, Omit<VariantProps<typeof badgeVariants>, "color" | "uppercase"> {
    buttonSizing?: boolean;
    asChild?: boolean;
    color?: VariantProps<typeof badgeVariants>["color"];
    uppercase?: VariantProps<typeof badgeVariants>["uppercase"];
}
declare function Badge({ buttonSizing, children, className, color, uppercase, rounded, size, variant, asChild, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;

type BannerProps = HTMLAttributes<HTMLDivElement> & {
    visible?: boolean;
    defaultVisible?: boolean;
    onClose?: () => void;
    inset?: boolean;
    variant?: "primary" | "destructive";
};
declare const Banner: ({ children, visible, defaultVisible, variant, onClose, className, inset, ...props }: BannerProps) => react_jsx_runtime.JSX.Element | null;
type BannerIconProps = HTMLAttributes<HTMLDivElement> & {
    icon: LucideIcon;
};
declare const BannerIcon: ({ icon: Icon, className, ...props }: BannerIconProps) => react_jsx_runtime.JSX.Element;
type BannerTitleProps = HTMLAttributes<HTMLParagraphElement>;
declare const BannerTitle: ({ className, ...props }: BannerTitleProps) => react_jsx_runtime.JSX.Element;
type BannerActionProps = ComponentProps$3<typeof Button>;
declare const BannerAction: ({ variant, size, className, ...props }: BannerActionProps) => react_jsx_runtime.JSX.Element;
type BannerCloseProps = ComponentProps$3<typeof Button>;
declare const BannerClose: ({ variant, size, onClick, className, ...props }: BannerCloseProps) => react_jsx_runtime.JSX.Element;

declare const TextDashBlankslate: ({ className }: {
    className?: string;
}) => react_jsx_runtime.JSX.Element;

declare const buttonGroupVariants: (props?: ({
    orientation?: "horizontal" | "vertical" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
declare const ButtonGroup: ({ className, orientation, children, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) => react_jsx_runtime.JSX.Element;

declare const cardVariants: (props?: ({
    variant?: "default" | "destructive" | "success" | null | undefined;
    background?: "none" | "grid" | "stripes" | "scanlines" | null | undefined;
    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
    rounded?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
    shadow?: "xshort" | "short" | "long" | "xlong" | "none" | null | undefined;
    withElbows?: boolean | null | undefined;
    withGradientBorder?: boolean | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
type CardProps = React.ComponentProps<"div"> & Omit<VariantProps<typeof cardVariants>, "rounded"> & {
    withGradientBorder?: boolean;
    rounded?: VariantProps<typeof cardVariants>["rounded"];
};
declare function Card({ variant, className, withGradientBorder, withElbows, size, rounded, shadow, background, ...props }: CardProps): react_jsx_runtime.JSX.Element;
type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
declare function CardHeader({ className, ...props }: CardHeaderProps): react_jsx_runtime.JSX.Element;
type CardTitleProps = React.HTMLAttributes<HTMLDivElement>;
declare function CardTitle({ className, ...props }: CardTitleProps): react_jsx_runtime.JSX.Element;
type CardDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
declare function CardDescription({ className, ...props }: CardDescriptionProps): react_jsx_runtime.JSX.Element;
type CardActionProps = React.HTMLAttributes<HTMLDivElement>;
declare function CardAction({ className, ...props }: CardActionProps): react_jsx_runtime.JSX.Element;
type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
declare function CardContent({ className, ...props }: CardContentProps): react_jsx_runtime.JSX.Element;
type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
declare function CardFooter({ className, ...props }: CardFooterProps): react_jsx_runtime.JSX.Element;

declare function Collapsible({ ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.Root>): react_jsx_runtime.JSX.Element;
declare function CollapsibleTrigger({ className, ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.Trigger>): react_jsx_runtime.JSX.Element;
declare function CollapsibleContent({ className, ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.Content>): react_jsx_runtime.JSX.Element;

declare function FullScreenContainer({ className, horizontal, ...props }: React.ComponentProps<"div"> & {
    horizontal?: boolean;
}): react_jsx_runtime.JSX.Element;

declare const dividerVariants: (props?: ({
    orientation?: "horizontal" | "vertical" | null | undefined;
    color?: "primary" | "secondary" | "destructive" | "active" | "inactive" | "warning" | null | undefined;
    thickness?: "thin" | "medium" | "thick" | null | undefined;
    variant?: "solid" | "dotted" | "dashed" | null | undefined;
    size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
declare const dividerChildrenVariants: (props?: ({
    color?: "primary" | "secondary" | "destructive" | "active" | "inactive" | "warning" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
interface DividerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof dividerVariants>, VariantProps<typeof dividerChildrenVariants> {
    childrenClassName?: string;
    color?: VariantProps<typeof dividerVariants>["color"];
    decoration?: "none" | "plus";
}
declare function Divider({ children, color, decoration, thickness, orientation, variant, size, className, childrenClassName, ...props }: DividerProps): react_jsx_runtime.JSX.Element;

declare const dropdownMenuContentVariants: (props?: ({
    rounded?: "sm" | "md" | "lg" | "xl" | "base" | "none" | null | undefined;
    shadow?: "xshort" | "short" | "long" | "xlong" | "none" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
interface DropdownMenuContentProps extends React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>, VariantProps<typeof dropdownMenuContentVariants> {
}
declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
declare function DropdownMenuContent({ className, sideOffset, rounded, shadow, ...props }: DropdownMenuContentProps): react_jsx_runtime.JSX.Element;
declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean;
    variant?: "default" | "destructive";
}): react_jsx_runtime.JSX.Element;
declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): react_jsx_runtime.JSX.Element;
declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
declare function DropdownMenuRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): react_jsx_runtime.JSX.Element;
declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean;
}): react_jsx_runtime.JSX.Element;
declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean;
}): react_jsx_runtime.JSX.Element;
declare function DropdownMenuSubContent({ className, rounded, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent> & VariantProps<typeof dropdownMenuContentVariants>): react_jsx_runtime.JSX.Element;

declare const ErrorCard: ({ title, noHeader, classNames, icon, children, ...cardProps }: {
    title?: string;
    noHeader?: boolean;
    classNames?: {
        header?: string;
        title?: string;
        content?: string;
    };
    icon?: React.ReactNode;
    children?: React.ReactNode;
} & CardProps) => react_jsx_runtime.JSX.Element;

declare const inputVariants: (props?: ({
    variant?: "default" | "secondary" | "destructive" | "ghost" | null | undefined;
    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
    rounded?: "size" | "sm" | "md" | "lg" | "xl" | "none" | "full" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;

interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size">, Omit<VariantProps<typeof inputVariants>, "size"> {
    size?: VariantProps<typeof inputVariants>["size"];
}
declare function Input({ className, type, variant, size, rounded, ...props }: InputProps): react_jsx_runtime.JSX.Element;

declare function LayoutSection({ className, sectionKey, ...props }: React.ComponentProps<"section"> & {
    sectionKey: string;
}): react_jsx_runtime.JSX.Element;

/**
 * LED indicator primitive.
 *
 * - Visual states: on, off, and optional blinking (binary toggle, no fades)
 * - Defaults to size-4 and rounded-full; merge additional classes via `className`
 * - Colors/styles for on/off are customizable via `classNames.on` / `classNames.off`
 * - Supports a transient flash when `watch` changes
 */
type LEDProps = React$1.HTMLAttributes<HTMLDivElement> & {
    /**
     * Whether the LED is on. Ignored while a flash is active. When `blinking` is false,
     * this directly controls the on/off state.
     */
    on?: boolean;
    /**
     * When true, toggles state on a fixed interval to produce a binary blink (no fades).
     */
    blinking?: boolean;
    /**
     * Interval (ms) used to toggle between on/off while blinking. Minimum 50ms. Default: 100ms.
     */
    blinkIntervalMs?: number;
    classNames?: {
        /** Classes applied when LED is on. */
        on?: string;
        /** Classes applied when LED is off. */
        off?: string;
    };
    /**
     * A value to watch. Whenever this value changes, the LED will blink for `watchBlinkDurationMs`,
     * then settle into the off state.
     */
    watch?: unknown;
    /** Duration (ms) to blink when `watch` changes, then settle to off. Default: 500ms. */
    watchBlinkDurationMs?: number;
};
/**
 * A simple LED-like indicator that supports on/off, blinking, and change-driven flashes.
 *
 * - Uses a hard state toggle (no opacity fades) when blinking
 * - Defaults to `size-4` circle and merges classes with `cn`
 * - Provide `classNames.on` / `classNames.off` to control the visual styling for states
 */
declare function LED({ on, blinking, blinkIntervalMs, className, classNames, watch, watchBlinkDurationMs, ...rest }: LEDProps): react_jsx_runtime.JSX.Element;

declare const SpinLoader: ({ size }: {
    size?: number;
}) => react_jsx_runtime.JSX.Element;
declare const StripeLoader: ({ className }: {
    className?: string;
}) => react_jsx_runtime.JSX.Element;
/**
 * @deprecated Use SpinLoader instead. This component will be removed in a future version.
 */
declare const LoaderSpinner: ({ size }: {
    size?: number;
}) => react_jsx_runtime.JSX.Element;

declare function Panel({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
declare const PanelHeaderVariants: (props?: ({
    variant?: "inline" | "default" | "noPadding" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
declare function PanelHeader({ variant, className, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof PanelHeaderVariants>): react_jsx_runtime.JSX.Element;
declare function PanelTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
declare function PanelContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
declare function PanelFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
declare function PanelActions({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;

declare const progressVariants: (props?: ({
    size?: "sm" | "lg" | "xl" | "default" | "xs" | "half" | null | undefined;
    color?: "primary" | "secondary" | "destructive" | "active" | "inactive" | "warning" | "agent" | "client" | null | undefined;
    rounded?: boolean | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
interface ProgressProps extends VariantProps<typeof progressVariants> {
    percent?: number;
    className?: string;
    rounded?: boolean;
}
declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & ProgressProps & React$1.RefAttributes<HTMLDivElement>>;

declare function ResizablePanelGroup({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>): react_jsx_runtime.JSX.Element;
declare function ResizablePanel({ ...props }: React$1.ComponentProps<typeof ResizablePrimitive.Panel>): react_jsx_runtime.JSX.Element;
declare const resizableHandleVariants: (props?: ({
    size?: "sm" | "md" | "lg" | null | undefined;
    noBorder?: boolean | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
declare function ResizableHandle({ withHandle, noBorder, size, icon, className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & VariantProps<typeof resizableHandleVariants> & {
    withHandle?: boolean;
    noBorder?: boolean;
    icon?: React$1.ReactNode;
}): react_jsx_runtime.JSX.Element;

declare const selectTriggerVariants: (props?: ({
    variant?: "primary" | "outline" | "ghost" | null | undefined;
    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
    align?: "left" | "right" | "center" | null | undefined;
    rounded?: "size" | "sm" | "md" | "lg" | "xl" | "none" | "full" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>;
declare function Select({ ...props }: SelectProps): react_jsx_runtime.JSX.Element;
type SelectGroupProps = React.ComponentProps<typeof SelectPrimitive.Group>;
declare function SelectGroup({ ...props }: SelectGroupProps): react_jsx_runtime.JSX.Element;
type SelectValueProps = React.ComponentProps<typeof SelectPrimitive.Value>;
declare function SelectValue({ ...props }: SelectValueProps): react_jsx_runtime.JSX.Element;
interface SelectTriggerProps extends React.ComponentProps<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
}
declare function SelectTrigger({ className, size, variant, rounded, align, children, ...props }: SelectTriggerProps): react_jsx_runtime.JSX.Element;
type SelectGuideProps = React.HTMLAttributes<HTMLSpanElement>;
declare function SelectGuide({ className, ...props }: SelectGuideProps): react_jsx_runtime.JSX.Element;
type SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Content>;
declare function SelectContent({ className, children, position, ...props }: SelectContentProps): react_jsx_runtime.JSX.Element;
type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>;
declare function SelectItem({ className, children, ...props }: SelectItemProps): react_jsx_runtime.JSX.Element;
type SelectSeparatorProps = React.ComponentProps<typeof SelectPrimitive.Separator>;
declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): react_jsx_runtime.JSX.Element;
type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>;
declare function SelectScrollUpButton({ className, ...props }: SelectScrollUpButtonProps): react_jsx_runtime.JSX.Element;
type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>;
declare function SelectScrollDownButton({ className, ...props }: SelectScrollDownButtonProps): react_jsx_runtime.JSX.Element;

declare function Tabs({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Root>): react_jsx_runtime.JSX.Element;
declare function TabsList({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.List>): react_jsx_runtime.JSX.Element;
declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element;

interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">, Omit<VariantProps<typeof inputVariants>, "size"> {
    size?: VariantProps<typeof inputVariants>["size"];
    multiline?: boolean;
}
declare function Textarea({ className, size, variant, rounded, multiline, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;

declare function TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
declare function Tooltip({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;

interface Props$8 extends CardProps {
    children?: React.ReactNode;
    className?: string;
    noAnimateIn?: boolean;
}
declare const ControlBarDivider: ({ className, }: React.ComponentProps<"div">) => react_jsx_runtime.JSX.Element;
declare const ControlBar: ({ children, noAnimateIn, className, ...props }: Props$8) => react_jsx_runtime.JSX.Element;

/** Controls how bot message text is rendered in the UI */
type TextRenderMode = "karaoke" | "captions" | "instant";

type CustomBotOutputRenderer = (content: string, metadata: {
    spoken: string;
    unspoken: string;
}) => React.ReactNode;
interface Props$7 {
    /**
     * Custom CSS classes for the component
     */
    classNames?: {
        /**
         * Custom CSS classes for the message content
         */
        messageContent?: string;
        /**
         * Custom CSS classes for the thinking
         */
        thinking?: string;
        /**
         * Custom CSS classes for the time
         */
        time?: string;
    };
    /**
     * The message to display
     */
    message: ConversationMessage;
    /**
     * Custom renderers for BotOutput content based on aggregation type
     * Key is the aggregation type (e.g., "code", "link"), value is a renderer function
     */
    botOutputRenderers?: Record<string, CustomBotOutputRenderer>;
    /**
     * Metadata for aggregation types to control rendering and speech progress behavior
     * Key is the aggregation type (e.g., "code", "link"), value is metadata configuration
     */
    aggregationMetadata?: Record<string, AggregationMetadata>;
    /**
     * Controls how bot message text is rendered.
     * @default "karaoke"
     */
    textRenderMode?: TextRenderMode;
}
declare const MessageContent: ({ botOutputRenderers, aggregationMetadata, classNames, message, textRenderMode, }: Props$7) => react_jsx_runtime.JSX.Element;

interface Props$6 {
    /**
     * Custom label for assistant messages
     * @default "assistant"
     */
    assistantLabel?: string;
    /**
     * Custom label for user/client messages
     * @default "user"
     */
    clientLabel?: string;
    /**
     * Custom label for system messages
     * @default "system"
     */
    systemLabel?: string;
    /**
     * Custom label for function call entries
     * @default "function call"
     */
    functionCallLabel?: string;
    /**
     * Custom renderer for function call messages.
     * When provided, replaces the default function call rendering.
     */
    functionCallRenderer?: FunctionCallRenderer;
    /**
     * Custom CSS classes for the component
     */
    classNames?: {
        /**
         * Custom CSS classes for the container
         */
        container?: string;
        /**
         * Custom CSS classes for the message content
         */
        messageContent?: string;
        /**
         * Custom CSS classes for the role
         */
        role?: string;
        /**
         * Custom CSS classes for the thinking
         */
        thinking?: string;
        /**
         * Custom CSS classes for the time
         */
        time?: string;
    };
    /**
     * The message to display
     */
    message: ConversationMessage;
    /**
     * Custom renderers for BotOutput content based on aggregation type
     */
    botOutputRenderers?: React.ComponentProps<typeof MessageContent>["botOutputRenderers"];
    /**
     * Metadata for aggregation types to control rendering and speech progress behavior
     */
    aggregationMetadata?: Record<string, AggregationMetadata>;
    /**
     * Controls how bot message text is rendered.
     * @default "karaoke"
     */
    textRenderMode?: TextRenderMode;
}
declare const MessageContainer: React$1.MemoExoticComponent<({ assistantLabel, clientLabel, systemLabel, functionCallLabel, functionCallRenderer, classNames, message, botOutputRenderers, aggregationMetadata, textRenderMode, }: Props$6) => react_jsx_runtime.JSX.Element>;

/**
 * Props for the Conversation component
 */
interface ConversationProps {
    /**
     * Custom CSS classes for different parts of the component
     */
    classNames?: {
        /** CSS classes for the main container */
        container?: string;
        /** CSS classes for individual message containers */
        message?: string;
        /** CSS classes for message content area */
        messageContent?: string;
        /** CSS classes for role labels */
        role?: string;
        /** CSS classes for timestamp elements */
        time?: string;
        /** CSS classes for thinking indicator */
        thinking?: string;
    };
    /**
     * Disable automatic scrolling when new messages arrive
     * @default false
     */
    noAutoscroll?: boolean;
    /**
     * Display messages in reverse order (newest first)
     * When enabled, new messages appear at the top and auto-scroll targets the top
     * @default false
     */
    reverseOrder?: boolean;
    /**
     * Custom label for assistant messages
     * @default "assistant"
     */
    assistantLabel?: string;
    /**
     * Custom label for user/client messages
     * @default "user"
     */
    clientLabel?: string;
    /**
     * Custom label for system messages
     * @default "system"
     */
    systemLabel?: string;
    /**
     * Custom label for function call entries
     * @default "function call"
     */
    functionCallLabel?: string;
    /**
     * Custom renderer for function call messages.
     * When provided, replaces the default function call rendering.
     * Receives the full FunctionCallData so developers can render
     * differently based on function name, status, args, and result.
     *
     * @example
     * ```tsx
     * <Conversation
     *   functionCallRenderer={(fc) => {
     *     switch (fc.function_name) {
     *       case "get_weather":
     *         return <WeatherCard functionCall={fc} />;
     *       default:
     *         return <FunctionCallContent functionCall={fc} />;
     *     }
     *   }}
     * />
     * ```
     */
    functionCallRenderer?: React.ComponentProps<typeof MessageContainer>["functionCallRenderer"];
    /**
     * Disable the text input field at the bottom of the conversation
     * @default false
     */
    noTextInput?: boolean;
    /**
     * Disable rendering of function call messages in the conversation.
     * Function call data is still captured in the store.
     * @default false
     */
    noFunctionCalls?: boolean;
    /**
     * Custom renderers for BotOutput content based on aggregation type
     * Key is the aggregation type (e.g., "code", "link"), value is a renderer function
     */
    botOutputRenderers?: React.ComponentProps<typeof MessageContainer>["botOutputRenderers"];
    /**
     * Metadata for aggregation types to control rendering and speech progress behavior
     * Key is the aggregation type (e.g., "code", "link"), value is metadata configuration
     */
    aggregationMetadata?: React.ComponentProps<typeof MessageContainer>["aggregationMetadata"];
    /**
     * Controls how bot message text is rendered.
     * - "karaoke": Full text, already-spoken portion normal, upcoming portion muted (default)
     * - "captions": Show only the portion that has been spoken (synced to audio)
     * - "instant": Show the full LLM text immediately, no highlighting
     * @default "karaoke"
     */
    textRenderMode?: TextRenderMode;
}
/**
 * Conversation component that displays real-time conversation history between users and AI assistants.
 *
 * This component automatically integrates with the Pipecat Client SDK to show messages,
 * connection states, and provides smooth scrolling behavior. It must be used within
 * a PipecatClientProvider and ConversationProvider context.
 *
 * @example
 * ```tsx
 * import { Conversation } from "@pipecat-ai/voice-ui-kit";
 *
 * <div className="h-96 border rounded-lg">
 *   <Conversation
 *     assistantLabel="AI Assistant"
 *     clientLabel="You"
 *     noAutoscroll={false}
 *   />
 * </div>
 * ```
 *
 * @param props - The component props
 * @param props.classNames - Custom CSS classes for styling different parts
 * @param props.noAutoscroll - Whether to disable automatic scrolling
 * @param props.assistantLabel - Custom label for assistant messages
 * @param props.clientLabel - Custom label for user messages
 *
 * @returns A React component that renders the conversation interface
 */
declare const Conversation: React.FC<ConversationProps>;

interface CopyTextProps {
    className?: string;
    iconSize?: number;
    text: string;
}
declare const CopyText: React__default.FC<CopyTextProps>;

/**
 * Props for the headless DeviceDropDown component that accepts device data and callbacks as props.
 * This variant allows you to use the component with any framework or state management solution.
 */
interface DeviceDropDownComponentProps {
    /** The trigger element that opens the dropdown menu. Can be any React element. */
    children: React.ReactNode;
    /** Whether to hide the menu label at the top of the dropdown. */
    noMenuLabel?: boolean;
    /** Whether to hide the separator below the menu label. */
    noMenuSeparator?: boolean;
    /** Text label displayed at the top of the dropdown menu. */
    menuLabel?: string;
    /** Array of available microphone devices from the MediaDevices API. */
    availableDevices?: MediaDeviceInfo[];
    /** Currently selected microphone device. */
    selectedDevice?: OptionalMediaDeviceInfo;
    /** Callback function called when a device is selected. */
    updateDevice?: (deviceId: string) => void;
    /** Custom CSS classes for different parts of the component. */
    classNames?: {
        /** CSS classes for the dropdown menu content container. */
        dropdownMenuContent?: string;
        /** CSS classes for individual dropdown menu checkbox items. */
        dropdownMenuCheckboxItem?: string;
        /** CSS classes for the dropdown menu label. */
        dropdownMenuLabel?: string;
    };
}
/**
 * Props for the connected DeviceDropDown component that automatically integrates with Pipecat Client.
 * This variant must be used within a PipecatClientProvider context.
 */
type DeviceDropDownProps = Omit<DeviceDropDownComponentProps, "availableDevices" | "selectedDevice" | "updateDevice">;
/**
 * Headless dropdown menu component for selecting microphone input devices.
 *
 * This component provides a flexible dropdown interface that accepts device data and callbacks as props,
 * making it suitable for use with any framework or state management solution.
 *
 * @example
 * ```tsx
 * import { DeviceDropDownComponent, Button } from "@pipecat-ai/voice-ui-kit";
 *
 * <DeviceDropDownComponent
 *   availableDevices={microphones}
 *   selectedDevice={selectedMic}
 *   updateDevice={setMicrophone}
 *   menuLabel="Select Microphone"
 * >
 *   <Button variant="outline">Choose Device</Button>
 * </DeviceDropDownComponent>
 * ```
 */
declare const DeviceDropDownComponent: ({ children, noMenuLabel, noMenuSeparator, menuLabel, availableDevices, selectedDevice, updateDevice, classNames, }: DeviceDropDownComponentProps) => react_jsx_runtime.JSX.Element;
/**
 * Connected dropdown menu component for selecting microphone input devices.
 *
 * This component automatically integrates with the Pipecat Client SDK to fetch available microphones
 * and handle device selection. It must be used within a PipecatClientProvider context.
 *
 * The component will automatically:
 * - Fetch available microphone devices
 * - Display the currently selected microphone
 * - Handle device selection changes
 * - Update the Pipecat Client's microphone configuration
 *
 * @example
 * ```tsx
 * import { DeviceDropDown, Button } from "@pipecat-ai/voice-ui-kit";
 *
 * <DeviceDropDown menuLabel="Select Microphone">
 *   <Button variant="outline">Choose Device</Button>
 * </DeviceDropDown>
 * ```
 */
declare const DeviceDropDown: React.FC<DeviceDropDownProps>;

interface DeviceSelectBaseProps extends Omit<SelectTriggerProps, "children"> {
    placeholder?: string;
    guide?: React.ReactNode;
    classNames?: {
        selectTrigger?: string;
        selectContent?: string;
        selectItem?: string;
    };
    selectProps?: SelectProps;
    contentProps?: SelectContentProps;
}
interface DeviceSelectComponentProps extends DeviceSelectBaseProps {
    availableDevices?: MediaDeviceInfo[];
    selectedDevice?: OptionalMediaDeviceInfo;
    updateDevice?: (deviceId: string) => void;
}
declare const DeviceSelectComponent: ({ placeholder, guide, availableDevices, selectedDevice, updateDevice, className, classNames, selectProps, contentProps, ...triggerProps }: DeviceSelectComponentProps) => react_jsx_runtime.JSX.Element;
declare const DeviceSelect: React.FC<DeviceSelectBaseProps>;

interface FunctionCallContentProps {
    functionCall: FunctionCallData;
    /** Label for function call entries */
    functionCallLabel?: string;
    /** Custom renderer for function call messages. When provided, replaces the default rendering. */
    functionCallRenderer?: FunctionCallRenderer;
    classNames?: {
        container?: string;
    };
}
declare const FunctionCallContent: React.FC<FunctionCallContentProps>;

interface HighlightOverlayProps {
    className?: string;
    offset?: number;
    autoClearDuration?: number;
    highlightedElement?: string | null;
    elementRefs?: Record<string, HTMLElement | null>;
    onHighlightElement?: (elementId: string | null) => void;
}
declare const HighlightOverlay: ({ className, offset, autoClearDuration, highlightedElement, elementRefs, onHighlightElement, }: HighlightOverlayProps) => React$1.ReactPortal | null;

interface Props$5 {
    /**
     * Custom label for assistant messages
     * @default "assistant"
     */
    assistantLabel?: string;
    /**
     * Custom label for user/client messages
     * @default "user"
     */
    clientLabel?: string;
    /**
     * Custom label for system messages
     * @default "system"
     */
    systemLabel?: string;
    /**
     * Custom label for function call messages
     * @default "function call"
     */
    functionCallLabel?: string;
    /**
     * Custom CSS classes for the role label
     */
    className?: string;
    /**
     * The role of the message
     */
    role: "user" | "assistant" | "system" | "function_call";
}
/**
 * MessageRole component that displays the role of a message
 *
 * @example
 * ```tsx
 * import { MessageRole } from "@pipecat-ai/voice-ui-kit";
 *
 * <MessageRole role="assistant" />
 * ```
 */
declare const MessageRole: ({ assistantLabel, clientLabel, systemLabel, functionCallLabel, className, role, }: Props$5) => react_jsx_runtime.JSX.Element;

interface PipecatLogoProps {
    alt?: string;
    className?: string;
    color?: string;
    height?: number;
    width?: number;
}
declare const PipecatLogo: React__default.FC<PipecatLogoProps>;

interface Props$4 {
    noTransportType?: boolean;
    noSessionId?: boolean;
    noParticipantId?: boolean;
    noRTVIVersion?: boolean;
    participantId?: string;
    sessionId?: string;
}
declare const SessionInfo: React.FC<Props$4>;

interface TextInputComponentProps {
    debounceTime?: number;
    onSend?: (message: string) => Promise<void> | void;
    disabled?: boolean;
    multiline?: boolean;
    buttonLabel?: React.ReactNode;
    buttonIcon?: React.ReactNode;
    buttonProps?: ButtonProps;
    inputProps?: InputProps;
    classNames?: {
        container?: string;
        input?: string;
        button?: string;
    };
    placeholder?: string;
    size?: "sm" | "md" | "lg" | "xl";
}
declare const TextInputComponent: ({ debounceTime, onSend, disabled, classNames, multiline, buttonLabel, buttonIcon, buttonProps, placeholder, size, }: TextInputComponentProps) => react_jsx_runtime.JSX.Element;
interface SendTextOptions {
    run_immediately?: boolean;
    audio_response?: boolean;
}
declare const TextInput: ({ debounceTime, disabled, sendTextOptions, noConnectedPlaceholder, noInject, onSend, ...props }: TextInputComponentProps & {
    sendTextOptions?: SendTextOptions;
    noConnectedPlaceholder?: string;
    noInject?: boolean;
}) => react_jsx_runtime.JSX.Element;

interface ThinkingProps {
    "aria-label"?: string;
    className?: string;
    initialDots?: number;
    interval?: number;
    maxDots?: number;
}
declare const Thinking: React__default.FC<ThinkingProps>;

/**
 * Base props shared by all transcript overlay components
 */
interface BaseTranscriptOverlayProps {
    /** Additional CSS classes to apply to the component */
    className?: string;
    /** Size variant of the transcript overlay */
    size?: "sm" | "md" | "lg";
    /** Duration of the fade-in animation in milliseconds (default: 300) */
    fadeInDuration?: number;
    /** Duration of the fade-out animation in milliseconds (default: 1000) */
    fadeOutDuration?: number;
}
/**
 * Props for the connected TranscriptOverlay component that integrates with Pipecat
 */
interface TranscriptOverlayProps extends BaseTranscriptOverlayProps {
    /** The participant type - "local" for user speech, "remote" for bot speech */
    participant: "local" | "remote";
}
/**
 * Props for the headless TranscriptOverlayComponent (for manual control)
 */
interface TranscriptOverlayComponentProps extends BaseTranscriptOverlayProps {
    /** Array of words to display as individual animated spans */
    words: string[];
    /** Whether the current speech turn has ended (triggers fade-out animation) */
    turnEnd?: boolean;
}
/**
 * A simple component that renders transcript text as an animated span element.
 * Each word gets its own fade-in animation when rendered, creating a smooth
 * word-by-word appearance effect.
 *
 * @param text - The text content to display
 * @param fadeInDuration - Duration of the fade-in animation in milliseconds (default: 300)
 * @returns A span element with fade-in animation
 */
declare const TranscriptOverlayPartComponent: ({ text, fadeInDuration, }: {
    text: string;
    fadeInDuration?: number;
}) => react_jsx_runtime.JSX.Element;
/**
 * The main transcript overlay component that handles the visual presentation of transcript text.
 * This component provides the styling and animation for displaying speech transcripts with
 * word-by-word fade-in animations and optional fade-out when the turn ends.
 *
 * The background wraps around each line of text, creating separate background blocks
 * for multi-line transcripts while maintaining smooth word-by-word animations.
 *
 * @param words - Array of words to display as individual animated spans
 * @param className - Additional CSS classes to apply
 * @param size - Size variant of the overlay ("sm", "md", or "lg")
 * @param turnEnd - Whether the current speech turn has ended (triggers fade-out animation)
 * @param fadeInDuration - Duration of the fade-in animation in milliseconds (default: 300)
 * @param fadeOutDuration - Duration of the fade-out animation in milliseconds (default: 1000)
 * @returns A div element containing the styled transcript overlay
 */
declare const TranscriptOverlayComponent: ({ words, className, size, turnEnd, fadeInDuration, fadeOutDuration, }: TranscriptOverlayComponentProps) => react_jsx_runtime.JSX.Element;
/**
 * A React component that displays real-time speech transcripts as an overlay.
 *
 * This component listens to Pipecat Client events to automatically display
 * speech transcripts from either the local user or remote bot. It provides
 * smooth word-by-word fade-in animations and handles the accumulation of
 * transcript text as speech progresses.
 *
 * The component integrates with the Pipecat Client SDK and must be used
 * within a PipecatClientProvider context to function properly.
 *
 * Features:
 * - Real-time transcript display with word-by-word animations
 * - Automatic transcript accumulation and cleanup
 * - Smooth fade-in/fade-out animations
 * - Support for both local and remote participants
 * - Responsive design with line-wrapped backgrounds
 *
 * @param participant - Whether to display "local" (user) or "remote" (bot) transcripts
 * @param className - Additional CSS classes to apply to the component
 * @param size - Size variant of the transcript overlay ("sm", "md", or "lg")
 * @param fadeInDuration - Duration of the fade-in animation in milliseconds (default: 300)
 * @param fadeOutDuration - Duration of the fade-out animation in milliseconds (default: 1000)
 * @returns The transcript overlay component or null if no transcript is available
 *
 * @example
 * ```tsx
 * // Display bot speech transcripts
 * <TranscriptOverlay participant="remote" />
 *
 * // Display user speech transcripts with custom styling and animation durations
 * <TranscriptOverlay
 *   participant="local"
 *   className="custom-overlay"
 *   size="lg"
 *   fadeInDuration={500}
 *   fadeOutDuration={1500}
 * />
 * ```
 */
declare const TranscriptOverlay: ({ participant, className, size, fadeInDuration, fadeOutDuration, }: TranscriptOverlayProps) => react_jsx_runtime.JSX.Element | null;

interface CircularWaveformProps {
    size?: number;
    isThinking?: boolean;
    audioTrack?: MediaStreamTrack | null;
    className?: string;
    color1?: string;
    color2?: string;
    backgroundColor?: string;
    sensitivity?: number;
    rotationEnabled?: boolean;
    numBars?: number;
    barWidth?: number;
    debug?: boolean;
}
declare const CircularWaveform: React__default.FC<CircularWaveformProps>;

type ParticipantType = Parameters<typeof usePipecatClientMediaTrack>[1];
interface Props$3 {
    backgroundColor?: string;
    barColor?: string;
    noPeaks?: boolean;
    peakLineColor?: string;
    peakLineSpeed?: number;
    peakLineThickness?: number;
    peakOffset?: number;
    peakFadeSpeed?: number;
    barCount?: number;
    barGap?: number;
    barLineCap?: "round" | "square";
    barMaxHeight?: number;
    barOrigin?: "top" | "bottom" | "center";
    barWidth?: number;
    participantType: ParticipantType;
    className?: string;
}
declare const VoiceVisualizer: React__default.FC<Props$3>;

/**
 * Base props interface for UserAudioControl components.
 * Provides styling, behavior, and customization options for audio controls.
 */
interface Props$2 {
    /** Visual style variant for the control button */
    variant?: ButtonVariant;
    /** Size of the control button */
    size?: ButtonSize;
    /** State of the control button (default, inactive, etc.) */
    state?: ButtonState;
    /** Additional props to pass to the main control button */
    buttonProps?: Partial<React.ComponentProps<typeof Button>>;
    /** Custom CSS classes for different parts of the component */
    classNames?: {
        /** CSS classes for the main control button */
        button?: string;
        /** CSS classes for the button group */
        buttongroup?: string;
        /** CSS classes for the dropdown menu trigger button */
        dropdownMenuTrigger?: string;
        /** CSS classes for the dropdown menu content */
        dropdownMenuContent?: string;
        /** CSS classes for dropdown menu checkbox items */
        dropdownMenuCheckboxItem?: string;
        /** CSS classes for active state text */
        activeText?: string;
        /** CSS classes for inactive state text */
        inactiveText?: string;
    };
    /** Additional props to pass to the dropdown button */
    dropdownButtonProps?: Partial<React.ComponentProps<typeof Button>>;
    /** Whether to hide the device picker dropdown */
    noDevicePicker?: boolean;
    /** Custom label for the main dropdown menu (null/empty to hide) */
    dropdownMenuLabel?: string | null;
    /** Whether to hide microphones from the device dropdown */
    noMicrophones?: boolean;
    /** Whether to hide speakers from the device dropdown */
    noSpeakers?: boolean;
    /** Custom label for the microphone section in the dropdown */
    microphoneLabel?: string;
    /** Custom label for the speaker section in the dropdown */
    speakerLabel?: string;
    /** Whether to hide the voice visualizer */
    noVisualizer?: boolean;
    /** Additional props to pass to the VoiceVisualizer component */
    visualizerProps?: Partial<React.ComponentProps<typeof VoiceVisualizer>>;
    /** Whether to disable audio functionality entirely */
    noAudio?: boolean;
    /** Custom text to display when audio is disabled */
    noAudioText?: string | null;
    /** Whether to hide the microphone icon in the button */
    noIcon?: boolean;
    /** Text to display when microphone is active */
    activeText?: string;
    /** Text to display when microphone is inactive */
    inactiveText?: string;
    /** Custom content to render inside the button */
    children?: React.ReactNode;
}
/**
 * Props interface for the headless UserAudioComponent.
 * Includes device data and callbacks for external state management.
 */
interface ComponentProps extends Props$2 {
    /** Callback function called when the microphone toggle button is clicked */
    onClick?: () => void;
    /** Whether the microphone is currently enabled */
    isMicEnabled?: boolean;
    /** Array of available microphone devices */
    availableMics?: MediaDeviceInfo[];
    /** Currently selected microphone device */
    selectedMic?: OptionalMediaDeviceInfo;
    /** Callback function called when a microphone device is selected */
    updateMic?: (deviceId: string) => void;
    /** Array of available speaker devices */
    availableSpeakers?: MediaDeviceInfo[];
    /** Currently selected speaker device */
    selectedSpeaker?: OptionalMediaDeviceInfo;
    /** Callback function called when a speaker device is selected */
    updateSpeaker?: (deviceId: string) => void;
    /**
     * When set, renders a disabled button with this message instead of the
     * toggle and hides the picker. Used by the connected UserAudioControl to
     * surface mic-error states (blocked, in-use, etc.) sourced from
     * useMediaState(). Distinct from `noAudio`, which is a deliberate
     * consumer opt-out.
     */
    unavailableText?: string;
}
/**
 * Headless UserAudioComponent that accepts all device data and callbacks as props.
 * This component can be used with any framework or state management solution.
 *
 * @example
 * ```tsx
 * <UserAudioComponent
 *   isMicEnabled={isMicrophoneOn}
 *   onClick={handleMicrophoneToggle}
 *   availableMics={microphones}
 *   selectedMic={currentMicrophone}
 *   updateMic={handleMicrophoneChange}
 *   variant="outline"
 *   size="lg"
 * />
 * ```
 */
declare const UserAudioComponent: React.FC<ComponentProps>;
declare const UserAudioControl: React.FC<Props$2>;

/**
 * Base props interface for UserAudioOutputControl components.
 * Extends SelectTriggerProps to provide consistent styling and behavior.
 */
interface UserAudioOutputControlBaseProps extends Omit<SelectTriggerProps, "children"> {
    /** Label text displayed next to the select input */
    label?: string;
    /** Placeholder text displayed in the select input when no device is selected */
    placeholder?: string;
    /** Optional guide content (icon, label, etc.) to display in the select trigger */
    guide?: React__default.ReactNode;
    /** Custom CSS classes for different parts of the component */
    classNames?: {
        /** CSS classes for the select trigger element */
        selectTrigger?: string;
        /** CSS classes for the select content dropdown */
        selectContent?: string;
        /** CSS classes for individual select items */
        selectItem?: string;
    };
    /** Props to pass to the underlying Select component */
    selectProps?: SelectProps;
    /** Props to pass to the SelectContent component */
    contentProps?: SelectContentProps;
}
/**
 * Props interface for the headless UserAudioOutputControlComponent.
 * Includes device data and callbacks for external state management.
 */
interface UserAudioOutputControlComponentProps extends UserAudioOutputControlBaseProps {
    /** Array of available audio output devices */
    availableDevices?: MediaDeviceInfo[];
    /** Currently selected audio output device */
    selectedDevice?: OptionalMediaDeviceInfo;
    /** Callback function called when a device is selected */
    updateDevice?: (deviceId: string) => void;
}
/**
 * Headless UserAudioOutputControl component that accepts all device data and callbacks as props.
 * This component can be used with any framework or state management solution.
 *
 * @example
 * ```tsx
 * <UserAudioOutputControlComponent
 *   availableDevices={speakers}
 *   selectedDevice={currentSpeaker}
 *   updateDevice={handleSpeakerChange}
 *   placeholder="Choose speaker"
 * />
 * ```
 */
declare const UserAudioOutputControlComponent: ({ label, placeholder, guide, availableDevices, selectedDevice, updateDevice, className, classNames, selectProps, contentProps, ...triggerProps }: UserAudioOutputControlComponentProps) => react_jsx_runtime.JSX.Element;
/**
 * Connected UserAudioOutputControl component that integrates with the Pipecat Client SDK.
 * This component automatically manages device detection, selection, and updates.
 * Must be used within a PipecatClientProvider context.
 *
 * @example
 * ```tsx
 * <UserAudioOutputControl
 *   placeholder="Choose audio output"
 *   guide={<SpeakerIcon />}
 * />
 * ```
 */
declare const UserAudioOutputControl: React__default.FC<UserAudioOutputControlBaseProps>;

/**
 * Base props interface for UserScreenControl components.
 * Provides styling, behavior, and customization options for screen sharing controls.
 */
interface UserScreenControlBaseProps {
    /** Visual style variant for the control button */
    variant?: ButtonVariant;
    /** Size of the control button */
    size?: ButtonSize;
    /** State of the control button (default, inactive, etc.) */
    state?: ButtonState;
    /** Additional props to pass to the main control button */
    buttonProps?: Partial<React.ComponentProps<typeof Button>>;
    /** Custom CSS classes for different parts of the component */
    classNames?: {
        /** CSS classes for the main container */
        container?: string;
        /** CSS classes for the screen element */
        screen?: string;
        /** CSS classes for the button group */
        buttongroup?: string;
        /** CSS classes for the main control button */
        button?: string;
        /** CSS classes for the screen off state container */
        screenOffContainer?: string;
        /** CSS classes for the screen off state text */
        screenOffText?: string;
        /** CSS classes for active state text */
        activeText?: string;
        /** CSS classes for inactive state text */
        inactiveText?: string;
    };
    /** Whether to hide the screen element entirely */
    noScreen?: boolean;
    /** Additional props to pass to the PipecatClientVideo component (used for screen sharing) */
    screenProps?: Partial<React.ComponentProps<typeof PipecatClientVideo>>;
    /** Custom text to display when screen sharing is disabled */
    noScreenText?: string | null;
    /** Whether to hide the screen icon in the button */
    noIcon?: boolean;
    /** Text to display when screen sharing is active */
    activeText?: string;
    /** Text to display when screen sharing is inactive */
    inactiveText?: string;
    /** Custom content to render inside the button */
    children?: React.ReactNode;
}
/**
 * Props interface for the headless UserScreenComponent.
 * Includes device data and callbacks for external state management.
 */
interface UserScreenComponentProps extends UserScreenControlBaseProps {
    /** Callback function called when the screen toggle button is clicked */
    onClick?: () => void;
    /** Whether the screen sharing is currently enabled */
    isScreenEnabled?: boolean;
    /** Array of available screen sources */
    availableScreens?: MediaDeviceInfo[];
    /** Currently selected screen source */
    selectedScreen?: OptionalMediaDeviceInfo;
    /** Callback function called when a screen source is selected */
    updateScreen?: (deviceId: string) => void;
}
/**
 * Headless UserScreenComponent that accepts all device data and callbacks as props.
 * This component can be used with any framework or state management solution.
 *
 * @example
 * ```tsx
 * <UserScreenComponent
 *   isScreenEnabled={isScreenSharingOn}
 *   onClick={handleScreenToggle}
 *   availableScreens={screens}
 *   selectedScreen={currentScreen}
 *   updateScreen={handleScreenChange}
 *   variant="outline"
 *   size="lg"
 * />
 * ```
 */
declare const UserScreenComponent: React.FC<UserScreenComponentProps>;
/**
 * Connected UserScreenControl component that integrates with the Pipecat Client SDK.
 * This component automatically manages screen sharing detection, selection, and updates.
 * Must be used within a PipecatClientProvider context.
 *
 * @example
 * ```tsx
 * <UserScreenControl
 *   variant="outline"
 *   size="lg"
 *   noDevicePicker={false}
 *   activeText="Screen sharing is on"
 *   inactiveText="Screen sharing is off"
 * />
 * ```
 */
declare const UserScreenControl: React.FC<UserScreenControlBaseProps>;

/**
 * Base props interface for UserVideoControl components.
 * Provides styling, behavior, and customization options for video controls.
 */
interface UserVideoControlBaseProps {
    /** Visual style variant for the control button */
    variant?: ButtonVariant;
    /** Size of the control button */
    size?: ButtonSize;
    /** State of the control button (default, inactive, etc.) */
    state?: ButtonState;
    /** Additional props to pass to the main control button */
    buttonProps?: Partial<React.ComponentProps<typeof Button>>;
    /** Custom CSS classes for different parts of the component */
    classNames?: {
        /** CSS classes for the main container */
        container?: string;
        /** CSS classes for the video element */
        video?: string;
        /** CSS classes for the button group */
        buttongroup?: string;
        /** CSS classes for the main control button */
        button?: string;
        /** CSS classes for the dropdown menu trigger button */
        dropdownMenuTrigger?: string;
        /** CSS classes for the dropdown menu content */
        dropdownMenuContent?: string;
        /** CSS classes for dropdown menu checkbox items */
        dropdownMenuCheckboxItem?: string;
        /** CSS classes for the video off state container */
        videoOffContainer?: string;
        /** CSS classes for the video off state text */
        videoOffText?: string;
        /** CSS classes for active state text */
        activeText?: string;
        /** CSS classes for inactive state text */
        inactiveText?: string;
        /** CSS classes for the button group wrapper */
        buttongroupWrapper?: string;
    };
    /** Additional props to pass to the dropdown button */
    dropdownButtonProps?: Partial<React.ComponentProps<typeof Button>>;
    /** Additional props to pass to the device dropdown component */
    deviceDropDownProps?: Partial<DeviceDropDownComponentProps>;
    /** Whether to hide the device picker dropdown */
    noDevicePicker?: boolean;
    /** Whether to hide the video element entirely */
    noVideo?: boolean;
    /** Additional props to pass to the PipecatClientVideo component */
    videoProps?: Partial<React.ComponentProps<typeof PipecatClientVideo>>;
    /** Custom text to display when video is disabled */
    noVideoText?: string | null;
    /** Whether to hide the video icon in the button */
    noIcon?: boolean;
    /** Text to display when camera is active */
    activeText?: string;
    /** Text to display when camera is inactive */
    inactiveText?: string;
    /** Custom content to render inside the button */
    children?: React.ReactNode;
}
/**
 * Props interface for the headless UserVideoComponent.
 * Includes device data and callbacks for external state management.
 */
interface UserVideoComponentProps extends UserVideoControlBaseProps {
    /** Callback function called when the video toggle button is clicked */
    onClick?: () => void;
    /** Whether the camera is currently enabled */
    isCamEnabled?: boolean;
    /** Array of available camera devices */
    availableCams?: MediaDeviceInfo[];
    /** Currently selected camera device */
    selectedCam?: OptionalMediaDeviceInfo;
    /** Callback function called when a camera device is selected */
    updateCam?: (deviceId: string) => void;
    /**
     * When set, renders a disabled button with this message instead of the
     * toggle and hides the picker. Used by the connected UserVideoControl to
     * surface cam-error states (blocked, in-use, etc.) sourced from
     * useMediaState(). Distinct from `noVideo`, which is a deliberate
     * consumer opt-out.
     */
    unavailableText?: string;
}
/**
 * Headless UserVideoComponent that accepts all device data and callbacks as props.
 * This component can be used with any framework or state management solution.
 *
 * @example
 * ```tsx
 * <UserVideoComponent
 *   isCamEnabled={isCameraOn}
 *   onClick={handleCameraToggle}
 *   availableCams={cameras}
 *   selectedCam={currentCamera}
 *   updateCam={handleCameraChange}
 *   variant="outline"
 *   size="lg"
 * />
 * ```
 */
declare const UserVideoComponent: React.FC<UserVideoComponentProps>;
declare const UserVideoControl: React.FC<UserVideoControlBaseProps>;

interface BotAudioPanelProps {
    audioTracks?: MediaStreamTrack[];
    className?: string;
    collapsed?: boolean;
    visualization?: "bar" | "circle";
    isMuted?: boolean;
    onMuteToggle?: () => void;
    /** Hide the header bot audio controls (e.g. volume). Defaults to `false`. */
    noControls?: boolean;
}
declare const BotAudioPanel: React.FC<BotAudioPanelProps>;

interface BotVideoPanelProps {
    className?: string;
    collapsed?: boolean;
}
declare const BotVideoPanel: React.FC<BotVideoPanelProps>;

interface ConversationPanelProps {
    /**
     * Disable conversation tab.
     * @default false
     */
    noConversation?: boolean;
    /**
     * Disable metrics tab.
     * @default false
     */
    noMetrics?: boolean;
    /**
     * Props for the conversation element.
     */
    conversationElementProps?: Partial<ConversationProps>;
    /**
     * Disable the text input field in the conversation.
     * @default false
     */
    noTextInput?: boolean;
    /**
     * Disable rendering of function call messages in the conversation.
     * Function call data is still captured in the store.
     * @default false
     */
    noFunctionCalls?: boolean;
    /**
     * Text rendering mode for bot messages.
     * @default "karaoke"
     */
    textRenderMode?: TextRenderMode;
    /**
     * Hides the text render mode switch in the panel header.
     * @default false
     */
    noTextRenderModeSwitch?: boolean;
}
declare const ConversationPanel: React.FC<ConversationPanelProps>;

interface Props$1 {
    collapsed?: boolean;
}
declare const EventsPanel: React.FC<Props$1>;

interface Props {
    noSessionInfo?: boolean;
    noStatusInfo?: boolean;
    noUserAudio?: boolean;
    noUserVideo?: boolean;
    noScreenControl?: boolean;
    participantId?: string;
    sessionId?: string;
}
declare const InfoPanel: React.FC<Props>;

type Theme = "system" | (string & {});
type ThemeProviderProps = {
    children: React.ReactNode;
    defaultTheme?: Theme;
    storageKey?: string;
    disableStorage?: boolean;
};
declare function ThemeProvider({ children, defaultTheme, storageKey, disableStorage, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;

/**
 * Props for the PipecatAppBase component.
 */
interface PipecatBaseProps {
    /** Optional connection parameters. Accepts either TransportConnectionParams for direct
     *  transport connections, or APIRequest to start and connect to a bot in one step. */
    connectParams?: TransportConnectionParams | APIRequest;
    /** Optional parameters for startBot. */
    startBotParams?: APIRequest;
    /** Callback function to transform the startBot response before connecting. */
    startBotResponseTransformer?: (response: TransportConnectionParams) => TransportConnectionParams | Promise<TransportConnectionParams>;
    /** Type of transport to use for the connection */
    transportType: "smallwebrtc" | "daily" | "websocket";
    /** Options for configuring the transport. */
    transportOptions?: SmallWebRTCTransportConstructorOptions | DailyTransportConstructorOptions | WebSocketTransportConstructorOptions;
    /** Optional configuration options for the Pipecat client */
    clientOptions?: Partial<PipecatClientOptions>;
    /** Whether to disable the theme provider */
    noThemeProvider?: boolean;
    /** Default theme to use for the app */
    themeProps?: Partial<ThemeProviderProps>;
    /** Whether to automatically connect to the session when the component mounts. Defaults to false. */
    connectOnMount?: boolean;
    /** Whether to automatically initialize devices when the component mounts. Defaults to false. */
    initDevicesOnMount?: boolean;
    /** Disables audio output for the bot. Default: false */
    noAudioOutput?: boolean;
    /** Callback fired when a new client instance is created. Useful for subscribing to client events before connecting. */
    onClient?: (client: PipecatClient) => void;
    /**
     * Children can be either:
     * - A render prop function that receives helper props and returns React nodes
     * - Direct React nodes that will be wrapped with the necessary providers
     *
     * @param props - PipecatBaseChildProps including connection handlers, loading, and error state
     * @returns React.ReactNode
     */
    children: ((props: PipecatBaseChildProps) => React__default.ReactNode) | React__default.ReactNode;
}
/**
 * Props that are passed to child components by the PipecatAppBase.
 */
interface PipecatBaseChildProps {
    /** Pipecat client instance */
    client: PipecatClient | null;
    /** Function to initiate a connection to the session. Can be sync or async. */
    handleConnect?: () => void | Promise<void>;
    /** Function to disconnect from the current session. Can be sync or async. */
    handleDisconnect?: () => void | Promise<void>;
    /** Error message if connection fails */
    error?: string | null;
    /** Response returned from starting the bot. */
    rawStartBotResponse?: TransportConnectionParams | unknown;
    /** Transformed start bot response. */
    transformedStartBotResponse?: TransportConnectionParams | unknown;
}
/**
 * PipecatAppBase component that provides a configured Pipecat client with audio capabilities.
 *
 * This component:
 * - Initializes a Pipecat client with the specified transport type
 * - Provides connection and disconnection handlers (sync or async)
 * - Wraps children in the necessary providers (ThemeProvider, PipecatClientProvider)
 * - Handles error states and loading states
 * - Automatically disconnects the client when unmounting
 * - Optionally disables theme provider based on noThemeProvider prop
 * - Optionally auto-connects to the session on mount based on connectOnMount prop
 *
 * @param props - Configuration for the audio client including connection params, transport type, and auto-connect behavior
 * @returns A provider component that wraps children with client context and handlers
 *
 * @example
 * ```tsx
 * // Using as a render prop (function children)
 * <PipecatAppBase
 *   connectParams={...}
 *   transportType="smallwebrtc"
 * >
 *   {({ client, handleConnect, handleDisconnect, error }) => (
 *     <YourComponent
 *       client={client}
 *       handleConnect={handleConnect}
 *       handleDisconnect={handleDisconnect}
 *       error={error}
 *     />
 *   )}
 * </PipecatAppBase>
 *
 * // Using with direct React nodes
 * <PipecatAppBase
 *   startBotParams={...}
 *   transportType="daily"
 * >
 *   <YourComponent />
 * </PipecatAppBase>
 *
 * // Using with noThemeProvider to disable theme wrapping
 * <PipecatAppBase
 *   startBotParams={...}
 *   transportType="daily"
 *   noThemeProvider={true}
 * >
 *   <YourComponent />
 * </PipecatAppBase>
 *
 * // Using with connectOnMount to auto-connect on component mount
 * <PipecatAppBase
 *   connectParams={...}
 *   transportType="smallwebrtc"
 *   connectOnMount={true}
 * >
 *   <YourComponent />
 * </PipecatAppBase>
 * ```
 */
declare const PipecatAppBase: React__default.FC<PipecatBaseProps>;

/**
 * @deprecated ConversationProvider is no longer needed — conversation state
 * management is now built into PipecatClientProvider from @pipecat-ai/client-react.
 * This component is a no-op pass-through kept for backwards compatibility.
 * It will be removed in the next major release.
 */
declare const ConversationProvider: ({ children }: React.PropsWithChildren) => react_jsx_runtime.JSX.Element;

declare function ThemeModeToggle(): react_jsx_runtime.JSX.Element;

/**
 * Return shape of {@link useBotAudioOutput}.
 */
interface UseBotAudioOutputReturn {
    /** Current bot audio output volume, 0.0 – 1.0. */
    volume: number;
    /** Set the bot audio output volume. Values are clamped to [0, 1]. */
    setVolume: (volume: number) => void;
}
/**
 * Access and update the bot's audio output state.
 *
 * Pairs with the `BotAudioOutput` component (rendered by `PipecatAppBase`)
 * and the `BotAudioControl` component. Returns the current volume and a
 * setter; any consumer can read or drive the volume without prop drilling.
 *
 * ```tsx
 * const { volume, setVolume } = useBotAudioOutput();
 * ```
 */
declare const useBotAudioOutput: () => UseBotAudioOutputReturn;

/**
 * Simplified connection states derived from Pipecat transport states.
 *
 * This type provides a simplified view of connectivity that's useful for UI controls
 * where the full complexity of transport states isn't needed.
 */
type PipecatConnectionState = "disconnected" | "connecting" | "connected";
/**
 * Return type for the usePipecatConnectionState hook.
 */
interface PipecatConnectionStateResult {
    /** The current connection state */
    state: PipecatConnectionState;
    /** True when the connection is established and ready */
    isConnected: boolean;
    /** True when attempting to establish a connection */
    isConnecting: boolean;
    /** True when disconnected or in an error state */
    isDisconnected: boolean;
}
/**
 * Hook that provides a simplified connection state for Pipecat transport.
 *
 * This hook derives a basic connectivity state from the underlying Pipecat transport
 * states, mapping them to three simple states: disconnected, connecting, and connected.
 *
 * **Purpose:**
 * - Simplifies transport state management for UI components
 * - Provides consistent state for controlling button labels, loading states, and disabled elements
 * - Abstracts away complex transport states that aren't useful for UI control
 *
 * **State Mapping:**
 * - `"ready"` → `"connected"`
 * - `"authenticating"` | `"authenticated"` | `"connecting"` | `"connected"` → `"connecting"`
 * - All other states → `"disconnected"`
 *
 * @returns {PipecatConnectionStateResult} Object containing the state and boolean flags
 *
 * @example
 * ```tsx
 * const { state, isConnected, isConnecting, isDisconnected } = usePipecatConnectionState();
 *
 * return (
 *   <button
 *     disabled={!isConnected}
 *     onClick={handleConnect}
 *   >
 *     {isConnected ? "Connected" :
 *      isConnecting ? "Connecting..." : "Connect"}
 *   </button>
 * );
 * ```
 */
declare const usePipecatConnectionState: () => PipecatConnectionStateResult;

interface PipecatEventLog {
    id: string;
    type: string;
    data: unknown;
    timestamp: Date;
}
/**
 * Optional configuration for `usePipecatEventStream`.
 */
interface UsePipecatEventStreamOptions {
    maxEvents?: number;
    ignoreEvents?: string[];
    /** When true, also compute and return consecutive groups */
    groupConsecutive?: boolean;
    /** Optional grouping key selector; defaults to event.type */
    groupKey?: (event: PipecatEventLog) => string;
    /** When provided, only these events will be captured (takes precedence over ignoreEvents) */
    includeEvents?: string[];
    /** Pause capturing without tearing down subscriptions */
    paused?: boolean;
    /** Optional transform to sanitize/shape event data before storing */
    mapEventData?: (data: unknown, eventType: string) => unknown;
    /** Throttle notifications; 0 uses requestAnimationFrame, otherwise uses setTimeout(ms) */
    throttleMs?: number;
    /** Optional callback invoked for each captured event (after stored) */
    onEvent?: (event: PipecatEventLog) => void;
}
interface PipecatEventGroup {
    id: string;
    type: string;
    events: ReadonlyArray<PipecatEventLog>;
}
/**
 * Subscribes to all RTVI events and returns a throttled snapshot of recent events.
 * - Uses requestAnimationFrame batching by default; set `throttleMs > 0` to time-slice updates
 * - Prefers `includeEvents` over `ignoreEvents` when filtering
 * - Can compute contiguous groups when `groupConsecutive` is true
 *
 * Returns a stable object `{ events, groups, clear }` where:
 * - `events`: frozen array snapshot that updates on the configured throttle cadence
 * - `groups`: grouped consecutive events (empty unless `groupConsecutive` is enabled)
 * - `clear()`: clears the current event list
 */
declare function usePipecatEventStream(options?: UsePipecatEventStreamOptions): {
    readonly events: ReadonlyArray<PipecatEventLog>;
    readonly groups: readonly PipecatEventGroup[];
    readonly clear: () => void;
};

declare const useTheme: () => {
    resolvedTheme: string;
    theme: Theme;
    setTheme: (theme: Theme) => void;
};

declare function cn(...inputs: ClassValue[]): string;

interface ConsoleTemplateProps extends Omit<PipecatBaseProps, "children"> {
    /** Disables RTVI related functionality. Default: false */
    noRTVI?: boolean;
    /** Specifies the RTVI version in use by the server. Default: null */
    serverRTVIVersion?: string | null;
    /** Disables user audio input entirely. Default: false */
    noUserAudio?: boolean;
    /** Disables user video input entirely. Default: false */
    noUserVideo?: boolean;
    /** Disables user screen control entirely. Default: false */
    noScreenControl?: boolean;
    /** Disables text input in the conversation. Default: false */
    noTextInput?: boolean;
    /** Disables audio output for the bot. Default: false */
    noAudioOutput?: boolean;
    /** Disables audio visualization for the bot. Default: false */
    noBotAudio?: boolean;
    /**
     * Hides the bot audio controls (e.g. volume) in the bot audio panel header.
     * Implicitly hidden when `noAudioOutput` is true. Default: false
     */
    noBotAudioControls?: boolean;
    /** Disables video visualization for the bot. Default: true */
    noBotVideo?: boolean;
    /** Disables automatic initialization of devices. Default: false */
    noAutoInitDevices?: boolean;
    /** Theme to use for the UI. Default: "system" */
    theme?: string;
    /** Disables the theme switcher in the header. Default: false */
    noThemeSwitch?: boolean;
    /** Disables the logo in the header. Default: false */
    noLogo?: boolean;
    /** Disables the session info panel. Default: false */
    noSessionInfo?: boolean;
    /** Disables the status info panel. Default: false */
    noStatusInfo?: boolean;
    /** Title displayed in the header. Default: "Pipecat Playground" */
    titleText?: string;
    /** Label for assistant messages. Default: "assistant" */
    assistantLabelText?: string;
    /** Label for user messages. Default: "user" */
    userLabelText?: string;
    /** Label for system messages. Default: "system" */
    systemLabelText?: string;
    /** Whether to collapse the info panel by default. Default: false */
    collapseInfoPanel?: boolean;
    /** Whether to collapse the media panel by default. Default: false */
    collapseMediaPanel?: boolean;
    /**
     * Sets the audio codec. Only applicable for SmallWebRTC transport.
     * Defaults to "default" which uses the browser's default codec.
     */
    audioCodec?: string;
    /**
     * Sets the video codec. Only applicable for SmallWebRTC transport.
     * Defaults to "default" which uses the browser's default codec.
     */
    videoCodec?: string;
    /**
     * Disables the conversation panel.
     * The bot may still send messages, but they won't be displayed.
     */
    noConversation?: boolean;
    /**
     * Disables the metrics panel.
     * The bot may still send metrics, but they won't be displayed.
     */
    noMetrics?: boolean;
    /**
     * Text rendering mode for bot messages.
     * - "karaoke": Full text, already-spoken portion normal, upcoming portion muted (default)
     * - "captions": Show only the portion that has been spoken (synced to audio)
     * - "instant": Show the full LLM text immediately, no highlighting
     * @default "karaoke"
     */
    textRenderMode?: TextRenderMode;
    /**
     * Hides the text render mode switch in the conversation panel header.
     * @default false
     */
    noTextRenderModeSwitch?: boolean;
    /**
     * Custom logo component to display in the header.
     * If provided, this will replace the default Pipecat logo.
     */
    logoComponent?: React__default.ReactNode;
    /**
     * Props to pass to the Conversation component.
     * Allows customization of the conversation display.
     */
    conversationElementProps?: Partial<ConversationProps>;
    /**
     * Callback that receives the injectMessage function.
     * This allows parent components to manually add messages to the conversation.
     */
    onInjectMessage?: (injectMessage: (message: {
        role: "user" | "assistant" | "system";
        parts: ConversationMessage["parts"];
    }) => void) => void;
    /**
     * Callback that receives incoming server messages.
     * This allows parent components to subscribe to server messages from the client.
     */
    onServerMessage?: (data: unknown) => void;
    /**
     * @deprecated Use titleText instead
     * Title displayed in the header. Defaults to "Pipecat Playground".
     */
    title?: string;
}
declare const ConsoleTemplate: React__default.FC<ConsoleTemplateProps>;

interface WidgetTemplateProps {
    /**
     * The URL of the Pipecat server to connect to.
     */
    serverUrl?: string;
    /**
     * Debounce time in milliseconds for the send function.
     * @default 300
     */
    debounceTime?: number;
    /**
     * The label of the toggle button.
     * @default "Open"
     */
    toggleButtonLabel?: string;
    classNames?: {
        container?: string;
        toggleContainer?: string;
        toggleButton?: string;
        widgetContainer?: string;
    };
    connectParams?: TransportConnectionParams;
}
declare const WidgetTemplate: React.FC<WidgetTemplateProps>;

export { Badge, type BadgeProps, Banner, BannerAction, type BannerActionProps, BannerClose, type BannerCloseProps, BannerIcon, type BannerIconProps, type BannerProps, BannerTitle, type BannerTitleProps, BotAudioComponent, BotAudioControl, BotAudioOutput, BotAudioPanel, BotVideoPanel, BotVolumeSlider, BotVolumeSliderComponent, Button, ButtonGroup, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, CircularWaveform, type CircularWaveformProps, ClientStatus, ClientStatusComponent, Collapsible, CollapsibleContent, CollapsibleTrigger, ConnectButton, ConnectButtonComponent, type ConnectButtonProps, type ConnectButtonStateContent, ConsoleTemplate, ControlBar, ControlBarDivider, Conversation, ConversationPanel, type ConversationProps, ConversationProvider, CopyText, DataList, DeviceDropDown, DeviceDropDownComponent, type DeviceDropDownComponentProps, type DeviceDropDownProps, DeviceSelect, type DeviceSelectBaseProps, DeviceSelectComponent, type DeviceSelectComponentProps, Divider, type DividerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorCard, EventsPanel, FullScreenContainer, FunctionCallContent, HighlightOverlay, InfoPanel, Input, type InputProps, LED, type LEDProps, LayoutSection, LoaderSpinner, MessageContainer, MessageContent, MessageRole, Panel, PanelActions, PanelContent, PanelFooter, PanelHeader, PanelTitle, PipecatAppBase, type PipecatBaseChildProps, type PipecatBaseProps, type PipecatConnectionState, type PipecatEventGroup, type PipecatEventLog, PipecatLogo, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, type ProgressProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectGuide, type SelectGuideProps, SelectItem, type SelectItemProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SendTextOptions, SessionInfo, Slider, SpinLoader, StripeLoader, Tabs, TabsContent, TabsList, TabsTrigger, TextDashBlankslate, TextInput, TextInputComponent, type TextInputComponentProps, type TextRenderMode, Textarea, type TextareaProps, type Theme, ThemeModeToggle, ThemeProvider, type ThemeProviderProps, Thinking, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TranscriptOverlay, TranscriptOverlayComponent, TranscriptOverlayPartComponent, type UseBotAudioOutputReturn, type UsePipecatEventStreamOptions, UserAudioComponent, UserAudioControl, UserAudioOutputControl, type UserAudioOutputControlBaseProps, UserAudioOutputControlComponent, type UserAudioOutputControlComponentProps, UserScreenComponent, type UserScreenComponentProps, UserScreenControl, type UserScreenControlBaseProps, UserVideoComponent, type UserVideoComponentProps, UserVideoControl, type UserVideoControlBaseProps, VoiceVisualizer, WidgetTemplate, cn, useBotAudioOutput, usePipecatConnectionState, usePipecatEventStream, useTheme };