renamed CopilotTextarea params

Author: ataibarkai

examples/next-openai/src/app/components/vacation-notes.tsx

@@ -1,6 +1,5 @@
 import { CopilotTextarea } from "@copilotkit/react-textarea";
 import { useState } from "react";
-import { useMakeAutosuggestionFunction } from "@copilotkit/react-textarea";
 
 export function VacationNotes(): JSX.Element {
   const [text, setText] = useState("");
@@ -13,11 +12,11 @@ export function VacationNotes(): JSX.Element {
         onValueChange={(value: string) => setText(value)}
         placeholder="What are your plans for your vacation?"
         autosuggestionsConfig={{
-          textareaPurpose:
+          purposePrompt:
             "Travel notes from the user's previous vacations. Likely written in a colloquial style, but adjust as needed.",
-          debounceTime: 0.7,
+          debounceTime: 700,
           acceptAutosuggestionKey: "Tab",
-          contextCategories: [],
+          externalContextCategories: [],
           disableWhenEmpty: true,
         }}
       />

examples/next-openai/src/app/copilot-textarea/page.tsx

@@ -6,9 +6,9 @@ import {
 } from "@copilotkit/react-core";
 import {
   CopilotTextarea,
-  MakeSystemMessage,
   MinimalChatGPTMessage,
 } from "@copilotkit/react-textarea";
+import { MakeSystemPrompt } from "@copilotkit/react-textarea/dist/types/autosuggestions-config";
 import { useState } from "react";
 
 export default function CopilotTextareaDemo(): JSX.Element {
@@ -38,14 +38,15 @@ function TextAreas() {
           opacity: 0.5,
         }}
         autosuggestionsConfig={{
-          textareaPurpose:
+          purposePrompt:
             "A COOL & SMOOTH announcement post about CopilotTextarea. No pomp, no fluff, no BS. Just the facts. Be brief, be clear, be concise. Be cool.",
-          contextCategories: [announcementCategoryId],
-          makeSystemMessage,
+          externalContextCategories: [announcementCategoryId],
+          makeSystemPrompt,
           fewShotMessages,
           debounceTime: 650,
-          forwardedProps: {
+          forwardedParams: {
             max_tokens: 25,
+            stop: ["\n", ".", ","],
           },
         }}
       />
@@ -60,15 +61,12 @@ function TextAreas() {
   );
 }
 
-const makeSystemMessage: MakeSystemMessage = (
-  textareaPurpose,
-  contextString
-) => {
+const makeSystemPrompt: MakeSystemPrompt = (purposePrompt, contextString) => {
   return `
 You are a versatile writing assistant.
 
 The user is writing some text.
-The purpose is: \"${textareaPurpose}\"
+The purpose is: \"${purposePrompt}\"
 
 Your job is to guess what the user will write next AS BEST YOU CAN.
 Only guess a SHORT distance ahead. Usually 1 sentence, or at most 1 paragraph.
@@ -97,11 +95,11 @@ const fewShotMessages: MinimalChatGPTMessage[] = [
   },
   {
     role: "user",
-    content: "Happy to introduce",
+    content: "Introducing:",
     name: "TextBeforeCursor",
   },
   {
     role: "assistant",
-    content: " CopilotTextarea",
+    content: "<CopilotTextarea />",
   },
 ];

packages/react-textarea/src/components/copilot-textarea/base-copilot-textarea/base-copilot-textarea.tsx

@@ -25,7 +25,7 @@ import { AutosuggestionState } from "../../../types/autosuggestion-state";
 import {
   BaseAutosuggestionsConfig,
   defaultBaseAutosuggestionsConfig,
-} from "../../../types/autosuggestions-config";
+} from "../../../types/base-autosuggestions-config";
 import { makeRenderElementFunction } from "./render-element";
 import { makeRenderPlaceholderFunction } from "./render-placeholder";
 
@@ -36,7 +36,7 @@ export interface BaseCopilotTextareaProps
   value?: string;
   onValueChange?: (value: string) => void;
   autosuggestionsConfig: Partial<BaseAutosuggestionsConfig> & {
-    textareaPurpose: string;
+    purposePrompt: string;
   };
 }
 

packages/react-textarea/src/components/copilot-textarea/copilot-textarea.tsx

@@ -11,7 +11,7 @@ import {
 
 export interface CopilotTextareaProps extends BaseCopilotTextareaProps {
   autosuggestionsConfig: Partial<AutosuggestionsConfig> & {
-    textareaPurpose: string;
+    purposePrompt: string;
   };
 }
 
@@ -22,12 +22,12 @@ export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
   };
 
   const autosuggestionsFunction = useMakeStandardAutosuggestionFunction(
-    autosuggestionsConfig.textareaPurpose,
+    autosuggestionsConfig.purposePrompt,
     autosuggestionsConfig.apiEndpoint,
-    autosuggestionsConfig.makeSystemMessage,
+    autosuggestionsConfig.makeSystemPrompt,
     autosuggestionsConfig.fewShotMessages,
-    autosuggestionsConfig.contextCategories,
-    autosuggestionsConfig.forwardedProps
+    autosuggestionsConfig.externalContextCategories,
+    autosuggestionsConfig.forwardedParams
   );
 
   return (

packages/react-textarea/src/hooks/make-autosuggestions-function/use-make-standard-autosuggestions-function.tsx

@@ -10,15 +10,15 @@ import { AutosuggestionsBareFunction } from "../use-autosuggestions";
  * It sends a POST request to the API endpoint with the messages array containing the system message, few shot messages, and user messages.
  * The function returns the suggestion from the API response.
  *
- * @param textareaPurpose - The purpose of the textarea. This is included in the system message.
+ * @param purposePrompt - The purpose of the textarea. This is included in the system message.
  * @param apiEndpoint - The API endpoint to send the autosuggestion request to.
  * @param makeSystemMessage - A function that takes in a context string and returns a system message to include in the autosuggestion request.
  * @param fewShotMessages - An array of few shot messages to include in the autosuggestion request.
  * @param contextCategories - The categories of context strings we want to include. By default, we include the (default) "global" context category.
  * @returns A memoized function that sends a request to the specified API endpoint to get an autosuggestion for the user's input.
  */
 export function useMakeAutosuggestionFunction(
-  textareaPurpose: string,
+  purposePrompt: string,
   apiEndpoint: string,
   makeSystemMessage: MakeSystemMessage,
   fewShotMessages: MinimalChatGPTMessage[],
@@ -38,7 +38,7 @@ export function useMakeAutosuggestionFunction(
               {
                 role: "system",
                 content: makeSystemMessage(
-                  textareaPurpose,
+                  purposePrompt,
                   getContextString(contextCategories)
                 ),
               },
@@ -70,7 +70,7 @@ export function useMakeAutosuggestionFunction(
       fewShotMessages,
       getContextString,
       contextCategories,
-      textareaPurpose,
+      purposePrompt,
     ]
   );
 }

packages/react-textarea/src/types/autosuggestions-config.tsx

@@ -1,42 +1,30 @@
+import {
+  BaseAutosuggestionsConfig,
+  defaultBaseAutosuggestionsConfig,
+} from "./base-autosuggestions-config";
 import { MinimalChatGPTMessage } from "./MinimalChatGPTMessage";
 
-export type MakeSystemMessage = (
-  textareaPurpose: string,
+export type MakeSystemPrompt = (
+  purposePrompt: string,
   contextString: string
 ) => string;
 
-export interface BaseAutosuggestionsConfig {
-  textareaPurpose: string;
-  debounceTime: number;
-  acceptAutosuggestionKey: string;
-  disableWhenEmpty: boolean;
-}
-
-export const defaultBaseAutosuggestionsConfig: Omit<
-  BaseAutosuggestionsConfig,
-  "textareaPurpose"
-> = {
-  debounceTime: 500,
-  acceptAutosuggestionKey: "Tab",
-  disableWhenEmpty: true,
-};
-
 export interface AutosuggestionsConfig extends BaseAutosuggestionsConfig {
   apiEndpoint: string;
-  contextCategories: string[] | undefined;
-  makeSystemMessage: MakeSystemMessage;
+  externalContextCategories: string[] | undefined;
+  makeSystemPrompt: MakeSystemPrompt;
   fewShotMessages: MinimalChatGPTMessage[];
-  forwardedProps: { [key: string]: any } | undefined;
+  forwardedParams: { [key: string]: any } | undefined;
 }
 
-export const defaultMakeSystemMessage: MakeSystemMessage = (
-  textareaPurpose,
+export const defaultMakeSystemPrompt: MakeSystemPrompt = (
+  purposePrompt,
   contextString
 ) => {
   return `You are a versatile writing assistant.
   
 The user is writing some text.
-The purpose is: \"${textareaPurpose}\"
+The purpose is: \"${purposePrompt}\"
 
 Your job is to guess what the user will write next AS BEST YOU CAN.
 Only guess a SHORT distance ahead. Usually 1 sentence, or at most 1 paragraph.
@@ -94,13 +82,13 @@ export const defaultFewShotMessages: MinimalChatGPTMessage[] = [
 ];
 export const defaultAutosuggestionsConfig: Omit<
   AutosuggestionsConfig,
-  "textareaPurpose"
+  "purposePrompt"
 > = {
   ...defaultBaseAutosuggestionsConfig,
 
   apiEndpoint: "api/autosuggestions",
-  makeSystemMessage: defaultMakeSystemMessage,
+  makeSystemPrompt: defaultMakeSystemPrompt,
   fewShotMessages: defaultFewShotMessages,
-  contextCategories: undefined,
-  forwardedProps: undefined,
+  externalContextCategories: undefined,
+  forwardedParams: undefined,
 };

packages/react-textarea/src/types/base-autosuggestions-config.tsx

@@ -0,0 +1,15 @@
+export interface BaseAutosuggestionsConfig {
+  purposePrompt: string;
+  debounceTime: number;
+  acceptAutosuggestionKey: string;
+  disableWhenEmpty: boolean;
+}
+
+export const defaultBaseAutosuggestionsConfig: Omit<
+  BaseAutosuggestionsConfig,
+  "purposePrompt"
+> = {
+  debounceTime: 500,
+  acceptAutosuggestionKey: "Tab",
+  disableWhenEmpty: true,
+};

packages/react-textarea/src/types/index.ts

@@ -1,6 +1,6 @@
 export type {
   AutosuggestionsConfig,
-  MakeSystemMessage,
+  MakeSystemPrompt as MakeSystemMessage,
 } from "./autosuggestions-config";
 
 export type { MinimalChatGPTMessage } from "./MinimalChatGPTMessage";