Copilot-react-textarea NPM

CopilotTextarea

CopilotTextarea is a React component that provides an AI-powered textarea with autocompletion functionality. It's a fork of CopilotKit, designed to allow for more flexible and custom implementations without being tied to a specific cloud solution.

Installation

To install CopilotTextarea, run the following command:

npm install copilot-react-textarea

or if you're using yarn:

yarn add copilot-react-textarea

Usage

Here's an example of how to use the CopilotTextarea component:

import { CopilotTextarea } from "copilot-react-textarea";
import { useState, type ChangeEvent } from "react";

function YourComponent() {
  const [value, setValue] = useState("");

  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
    setValue(e.target.value);
  };

  return (
    <CopilotTextarea
      placeholder="Enter text here..."
      className="min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
      rows={5}
      cols={50}
      onChange={handleChange}
      value={value}
      textareaPurpose="chat"
      createSuggestionFunction={async (data: {
        textAfterCursor: string;
        textBeforeCursor: string;
      }): Promise<string> => {
        // Implement your autocomplete logic here
        return "Autocomplete suggestion";
      }}
      insertionOrEditingFunction={async (editorState: any): Promise<ReadableStream<string>> => {
        // Implement your insertion or editing logic here
        const stream = new ReadableStream({
          start(controller) {
            controller.enqueue("Inserted text");
            controller.close();
          },
        });
        return stream;
      }}
      onKeyDown={(event) => {
        // Handle key down events
      }}
      disableWhenEmpty={true}
    />
  );
}

Props

The CopilotTextarea component accepts the following props:

placeholder: Placeholder text for the textarea
className: CSS class for styling the textarea
rows: Number of visible text lines
cols: Visible width of the textarea
onChange: Function to handle changes in the textarea
value: Current value of the textarea
textareaPurpose: Purpose of the textarea (e.g., "chat")
createSuggestionFunction: Async function to generate autocomplete suggestions
insertionOrEditingFunction: Async function to handle text insertion or editing
onKeyDown: Function to handle keydown events
disableWhenEmpty: Boolean to disable the textarea when empty

Features

AI-powered autocompletion
Customizable styling
Flexible autocomplete and text insertion functions
Key event handling

Motivation

CopilotTextarea is a fork of CopilotKit, created with the motivation to provide more flexibility in custom implementations. The original CopilotKit was tightly coupled with their cloud solution, which limited its use in projects that required custom backend integrations or self-hosted solutions.

By forking the project, we've made it possible to use these open-source components with your own implementation of autocomplete and text generation functions. This allows developers to integrate CopilotTextarea with their preferred AI services or custom backend solutions without being locked into a specific cloud provider.