@ckeditor/ckeditor5-ai/src/aiballoon/ui/aiballoonview.d.ts

AI features for CKEditor 5.

/**
 * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */
import { type Dialog, View, FocusCycler, type ViewWithFocusCycler } from 'ckeditor5/src/ui.js';
import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
import { AIBalloonToolbarView } from './aiballoontoolbarview.js';
import { AIBalloonDisclaimerView } from './aiballoondisclaimerview.js';
import { type AISuggestionActionName } from '../../aichat/ui/feed/aichatfeedsuggestionitemactionsview.js';
/**
 * Event names that can be fired by the AI Balloon view.
 */
export declare const AI_BALLOON_VIEW_EVENT_NAMES: readonly ["applySuggestion", "insertSuggestion", "showNext", "showPrevious"];
/**
 * Configuration object for creating AI Balloon content.
 */
export interface AIBalloonContentConfig {
    mainView: View;
    showRotator: boolean;
    showApplyButton: boolean;
    showSuggestButton: boolean;
}
/**
 * The AI Balloon view class responsible for creating and managing the balloon dialog UI.
 *
 * This view handles:
 * - Content display and navigation between multiple AI suggestions
 * - Focus management and keyboard navigation
 * - Event firing for suggestion interactions
 * - Toolbar and disclaimer management
 */
export declare class AIBalloonView extends View implements ViewWithFocusCycler {
    /**
     * Toolbar view containing button views that manage the AI suggestions.
     */
    toolbar: AIBalloonToolbarView;
    /**
     * Disclaimer view containing warning text about AI responses.
     */
    disclaimerView: AIBalloonDisclaimerView;
    /**
     * @readonly
     */
    focusTracker: FocusTracker;
    /**
     * @readonly
     */
    keystrokes: KeystrokeHandler;
    /**
     * @readonly
     */
    focusCycler: FocusCycler;
    /**
     * Observable property that indicates whether the view is in loading state.
     * When true, all interactive elements should be disabled.
     */
    isLoading: boolean;
    isTrackChangesOn: boolean;
    /**
     * Observable property that indicates whether the error view is visible.
     */
    isErrorVisible: boolean;
    /**
     * Current error message displayed in the error view.
     */
    errorMessage: string;
    constructor(locale: Locale, config: AIBalloonContentConfig, availableActions: Array<AISuggestionActionName>, isTrackChangesOn: boolean);
    /**
     * @inheritDoc
     */
    render(): void;
    /**
     * @inheritDoc
     */
    destroy(): void;
    /**
     * Focuses the balloon view.
     */
    focus(direction?: 1 | -1): void;
    /**
     * Sets the view to loading state, disabling all interactive elements.
     */
    setLoading(): void;
    /**
     * Clears the loading state, enabling all interactive elements.
     */
    clearLoading(): void;
    /**
     * Shows an error message in the balloon.
     *
     * @param message The error message to display
     */
    showError(message: string): void;
    /**
     * Hides the error message in the balloon.
     */
    hideError(): void;
    /**
     * Shows a recoverable error message in the balloon.
     * This is an alias for `showError()` - the error is displayed but user can still interact with other replies or retry.
     *
     * @param message The error message to display
     */
    showRecoverableError(message: string): void;
    /**
     * Shows a blocking error message and disables toolbar buttons.
     * This should be used for terminal errors where the interaction cannot continue (e.g., selection removed).
     *
     * @param message The error message to display
     */
    showBlockingError(message: string): void;
    /**
     * Sets up the rotator functionality for navigating between multiple suggestions.
     * Adds next and previous buttons to the dialog header.
     *
     * @param dialog The dialog instance to add navigation buttons to
     */
    setupRotator(dialog: Dialog): void;
    /**
     * Updates the main content view of the balloon.
     * This method replaces the current main view with a new one without recreating the entire balloon.
     *
     * @param mainView The new main view to display in the balloon
     */
    updateContent(mainView: View): void;
    /**
     * Starts auto-scrolling to the bottom during streaming.
     */
    startAutoScroll(): void;
    /**
     * Stops auto-scrolling.
     */
    stopAutoScroll(): void;
}
/**
 * Event fired when user clicks the apply button to apply a suggestion.
 */
export type AIBalloonApplySuggestionEvent = {
    name: 'applySuggestion';
    args: [];
};
/**
 * Event fired when user clicks the insert/suggest button to insert a suggestion.
 */
export type AIBalloonInsertSuggestionEvent = {
    name: 'insertSuggestion';
    args: [];
};
/**
 * Event fired when user clicks the next suggestion button.
 */
export type AIBalloonShowNextSuggestionEvent = {
    name: 'showNext';
    args: [];
};
/**
 * Event fired when user clicks the previous suggestion button.
 */
export type AIBalloonShowPreviousSuggestionEvent = {
    name: 'showPrevious';
    args: [];
};