import React__default from 'react';
import { BaseAiTextareaProps } from '../../types/base/index.js';
import { HTMLAiTextAreaElement } from '../../types/html-ai-textarea-element.js';
import { AutosuggestionsConfigUserSpecified } from '../../types/autosuggestions-config/autosuggestions-config-user-specified.js';
import '../../types/base/base-autosuggestions-config.js';
import '../../types/base/autosuggestions-bare-function.js';
import '@vn-sdk/react-core';
import '../../types/autosuggestions-config/autosuggestions-config.js';
import '../../types/autosuggestions-config/suggestions-api-config.js';
import '@vn-sdk/runtime-client-gql';
import '../../types/autosuggestions-config/subtypes/make-system-prompt.js';
import '../../types/autosuggestions-config/insertions-api-config.js';
import '../../types/autosuggestions-config/editing-api-config.js';

/**
 * <br/>
 * <img src="https://cdn.vn.ai/docs/vn-sdk/images/AiTextarea.gif" width="500" />
 *
 * `<AiTextarea>` is a React component that acts as a drop-in replacement for the standard `<textarea>`,
 *  offering enhanced autocomplete features powered by AI. It is context-aware, integrating seamlessly with the
 * [`useAiReadable`](/reference/hooks/useAiReadable) hook to provide intelligent suggestions based on the application context.
 *
 * In addition, it provides a hovering editor window (available by default via `Cmd + K` on Mac and `Ctrl + K` on Windows) that allows the user to
 * suggest changes to the text, for example providing a summary or rephrasing the text.
 *
 * ## Example
 *
 * ```tsx
 * import { AiTextarea } from '@vn-sdk/react-textarea';
 * import "@vn-sdk/react-textarea/styles.css";
 *
 * <AiTextarea
 *   autosuggestionsConfig={{
 *     textareaPurpose:
 *      "the body of an email message",
 *     chatApiConfigs: {},
 *   }}
 * />
 * ```
 *
 * ## Usage
 *
 * ### Install Dependencies
 *
 * This component is part of the [@vn-sdk/react-textarea](https://npmjs.com/package/@vn-sdk/react-textarea) package.
 *
 * ```shell npm2yarn \"@vn-sdk/react-textarea"\
 * npm install @vn-sdk/react-core @vn-sdk/react-textarea
 * ```
 *
 * ### Usage
 *
 * Use the AiTextarea component in your React application similarly to a standard `<textarea />`,
 * with additional configurations for AI-powered features.
 *
 * For example:
 *
 * ```tsx
 * import { useState } from "react";
 * import { AiTextarea } from "@vn-sdk/react-textarea";
 * import "@vn-sdk/react-textarea/styles.css";
 *
 * export function ExampleComponent() {
 *   const [text, setText] = useState("");
 *
 *   return (
 *     <AiTextarea
 *       className="custom-textarea-class"
 *       value={text}
 *       onValueChange={(value: string) => setText(value)}
 *       placeholder="Enter your text here..."
 *       autosuggestionsConfig={{
 *         textareaPurpose: "Provide context or purpose of the textarea.",
 *         chatApiConfigs: {
 *           suggestionsApiConfig: {
 *             maxTokens: 20,
 *             stop: [".", "?", "!"],
 *           },
 *         },
 *       }}
 *     />
 *   );
 * }
 * ```
 *
 * ### Look & Feel
 *
 * By default, VN SDK components do not have any styles. You can import VN SDK's stylesheet at the root of your project:
 * ```tsx title="YourRootComponent.tsx"
 * ...
 * import "@vn-sdk/react-textarea/styles.css"; // [!code highlight]
 *
 * export function YourRootComponent() {
 *   return (
 *     <AiProvider>
 *       ...
 *     </AiProvider>
 *   );
 * }
 * ```
 * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
 * */

interface AiTextareaProps extends Omit<BaseAiTextareaProps, "baseAutosuggestionsConfig"> {
    /**
     * Configuration settings for the autosuggestions feature.
     * For full reference, [check the interface on GitHub](https://github.com/VN SDK/VN SDK/blob/main/VN SDK/packages/react-textarea/src/types/base/base-ai-textarea-props.tsx#L8).
     *
     * <PropertyReference name="textareaPurpose" type="string" required={true} >
     *   The purpose of the text area in plain text.
     *
     *   Example: *"The body of the email response"*
     * </PropertyReference>
     *
     * <PropertyReference name="chatApiConfigs" type="ChatApiConfigs" >
     *   The chat API configurations.
     *
     *   <strong>NOTE:</strong> You must provide specify at least one of `suggestionsApiConfig` or `insertionApiConfig`.
     *
     *   <PropertyReference name="suggestionsApiConfig" type="SuggestionsApiConfig">
     *       For full reference, please [click here](https://github.com/VN SDK/VN SDK/blob/main/VN SDK/packages/react-textarea/src/types/autosuggestions-config/suggestions-api-config.tsx#L4).
     *   </PropertyReference>
     *   <PropertyReference name="insertionApiConfig" type="InsertionApiConfig">
     *       For full reference, please [click here](https://github.com/VN SDK/VN SDK/blob/main/VN SDK/packages/react-textarea/src/types/autosuggestions-config/insertions-api-config.tsx#L4).
     *   </PropertyReference>
     * </PropertyReference>
     *
     * <PropertyReference name="disabled" type="boolean" >
     *   Whether the textarea is disabled.
     * </PropertyReference>
     *
     * <PropertyReference name="disableBranding" type="boolean" >
     *   Whether to disable the VN SDK branding.
     * </PropertyReference>
     *
     * <PropertyReference name="placeholderStyle" type="React.CSSProperties" >
     *   Specifies the CSS styles to apply to the placeholder text.
     * </PropertyReference>
     *
     * <PropertyReference name="suggestionsStyle" type="React.CSSProperties" >
     *   Specifies the CSS styles to apply to the suggestions list.
     * </PropertyReference>
     *
     * <PropertyReference name="hoverMenuClassname" type="string" >
     *   A class name to apply to the editor popover window.
     * </PropertyReference>
     *
     * <PropertyReference name="value" type="string" >
     *   The initial value of the textarea. Can be controlled via `onValueChange`.
     * </PropertyReference>
     *
     * <PropertyReference name="onValueChange" type="(value: string) => void" >
     *   Callback invoked when the value of the textarea changes.
     * </PropertyReference>
     *
     * <PropertyReference name="onChange" type="(event: React.ChangeEvent<HTMLTextAreaElement>) => void" >
     *   Callback invoked when a `change` event is triggered on the textarea element.
     * </PropertyReference>
     *
     * <PropertyReference name="shortcut" type="string" >
     *   The shortcut to use to open the editor popover window. Default is `"Cmd-k"`.
     * </PropertyReference>
     */
    autosuggestionsConfig: AutosuggestionsConfigUserSpecified;
}
/**
 * A copilot textarea that uses the standard autosuggestions function.
 */
declare const AiTextarea: React__default.ForwardRefExoticComponent<AiTextareaProps & React__default.RefAttributes<HTMLAiTextAreaElement>>;

export { AiTextarea, AiTextareaProps };