/** * * * * `` is a React component that acts as a drop-in replacement for the standard ``, * offering enhanced autocomplete features powered by AI. It is context-aware, integrating seamlessly with the * [`useCopilotReadable`](/reference/v1/hooks/useCopilotReadable) 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 { CopilotTextarea } from '@copilotkit/react-textarea'; * import "@copilotkit/react-textarea/styles.css"; * * * ``` * * ## Usage * * ### Install Dependencies * * This component is part of the [@copilotkit/react-textarea](https://npmjs.com/package/@copilotkit/react-textarea) package. * * ```shell npm2yarn \"@copilotkit/react-textarea"\ * npm install @copilotkit/react-core @copilotkit/react-textarea * ``` * * ### Usage * * Use the CopilotTextarea component in your React application similarly to a standard ``, * with additional configurations for AI-powered features. * * For example: * * ```tsx * import { useState } from "react"; * import { CopilotTextarea } from "@copilotkit/react-textarea"; * import "@copilotkit/react-textarea/styles.css"; * * export function ExampleComponent() { * const [text, setText] = useState(""); * * return ( * 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, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project: * ```tsx title="YourRootComponent.tsx" * ... * import "@copilotkit/react-textarea/styles.css"; // [!code highlight] * * export function YourRootComponent() { * return ( * * ... * * ); * } * ``` * 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. * */ import React from "react"; import { useMakeStandardAutosuggestionFunction } from "../../hooks/make-autosuggestions-function/use-make-standard-autosuggestions-function"; import { HTMLCopilotTextAreaElement } from "../../types"; import { BaseCopilotTextareaProps } from "../../types/base/base-copilot-textarea-props"; import { AutosuggestionsConfig, defaultAutosuggestionsConfig, } from "../../types/autosuggestions-config"; import { BaseCopilotTextarea } from "../base-copilot-textarea/base-copilot-textarea"; import { useMakeStandardInsertionOrEditingFunction } from "../../hooks/make-autosuggestions-function/use-make-standard-insertion-function"; import merge from "lodash.merge"; import { AutosuggestionsConfigUserSpecified } from "../../types/autosuggestions-config/autosuggestions-config-user-specified"; // Like the base copilot textarea props, // but with baseAutosuggestionsConfig replaced with autosuggestionsConfig. export interface CopilotTextareaProps extends Omit< BaseCopilotTextareaProps, "baseAutosuggestionsConfig" > { /** * Configuration settings for the autosuggestions feature. * For full reference, [check the interface on GitHub](https://github.com/CopilotKit/CopilotKit/blob/main/packages/react-textarea/src/types/base/base-copilot-textarea-props.tsx#L8). * * * The purpose of the text area in plain text. * * Example: *"The body of the email response"* * * * * The chat API configurations. * * NOTE: You must provide specify at least one of `suggestionsApiConfig` or `insertionApiConfig`. * * * For full reference, please [click here](https://github.com/CopilotKit/CopilotKit/blob/main/packages/react-textarea/src/types/autosuggestions-config/suggestions-api-config.tsx#L4). * * * For full reference, please [click here](https://github.com/CopilotKit/CopilotKit/blob/main/packages/react-textarea/src/types/autosuggestions-config/insertions-api-config.tsx#L4). * * * * * Whether the textarea is disabled. * * * * Whether to disable the CopilotKit branding. * * * * Specifies the CSS styles to apply to the placeholder text. * * * * Specifies the CSS styles to apply to the suggestions list. * * * * A class name to apply to the editor popover window. * * * * The initial value of the textarea. Can be controlled via `onValueChange`. * * * * Callback invoked when the value of the textarea changes. * * * * Callback invoked when a `change` event is triggered on the textarea element. * * * * The shortcut to use to open the editor popover window. Default is `"Cmd-k"`. * */ autosuggestionsConfig: AutosuggestionsConfigUserSpecified; } /** * A copilot textarea that uses the standard autosuggestions function. */ export const CopilotTextarea = React.forwardRef( (props: CopilotTextareaProps, ref: React.Ref) => { // separate the AutosuggestionsConfigUserSpecified from the rest of the props const { autosuggestionsConfig: autosuggestionsConfigUserSpecified, ...forwardedProps } = props; const autosuggestionsConfig: AutosuggestionsConfig = merge( defaultAutosuggestionsConfig, autosuggestionsConfigUserSpecified, ); const autosuggestionsFunction = useMakeStandardAutosuggestionFunction( autosuggestionsConfig.textareaPurpose, autosuggestionsConfig.contextCategories, autosuggestionsConfig.chatApiConfigs.suggestionsApiConfig, ); const insertionOrEditingFunction = useMakeStandardInsertionOrEditingFunction( autosuggestionsConfig.textareaPurpose, autosuggestionsConfig.contextCategories, autosuggestionsConfig.chatApiConfigs.insertionApiConfig, autosuggestionsConfig.chatApiConfigs.editingApiConfig, ); return ( <> > ); }, );