CopilotTextarea - Copilotkit

{ /*

ATTENTION! DO NOT MODIFY THIS FILE!
This page is auto-generated. If you want to make any changes to this page, changes must be made at:
packages/react-textarea/src/components/copilot-textarea/copilot-textarea.tsx */ }

<CopilotTextarea> 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 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";
 
<CopilotTextarea
  autosuggestionsConfig={{
    textareaPurpose:
     "the body of an email message",
    chatApiConfigs: {},
  }}
/>

Usage

Install Dependencies

This component is part of the @copilotkit/react-textarea package.

shell

npm install @copilotkit/react-core @copilotkit/react-textarea

Usage

Use the CopilotTextarea 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 { CopilotTextarea } from "@copilotkit/react-textarea";
import "@copilotkit/react-textarea/styles.css";
 
export function ExampleComponent() {
  const [text, setText] = useState("");
 
  return (
    <CopilotTextarea
      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, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:

tsx

...
import "@copilotkit/react-textarea/styles.css"; // [!code highlight]
 
export function YourRootComponent() {
  return (
    <CopilotKit>
      ...
    </CopilotKit>
  );
}

For more information about how to customize the styles, check out the Customize Look & Feel guide.

Properties

<PropertyReference name="disableBranding" type="boolean" > Determines whether the CopilotKit branding should be disabled. Default is `false`. </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> <PropertyReference name="autosuggestionsConfig" type="AutosuggestionsConfigUserSpecified" required > 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). <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/CopilotKit/CopilotKit/blob/main/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/CopilotKit/CopilotKit/blob/main/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 CopilotKit 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> </PropertyReference>