added: textAreaPurpose, disableWhenEmpty, placeholder support, placeholder style

Author: ataibarkai

…-openai/src/app/api/autosuggest/route.ts …nai/src/app/api/autosuggestions/route.tsexamples/next-openai/src/app/api/autosuggest/route.ts renamed to examples/next-openai/src/app/api/autosuggestions/route.ts examples/next-openai/src/app/api/autosuggest/route.ts renamed to examples/next-openai/src/app/api/autosuggestions/route.ts

@@ -1,5 +1,4 @@
 import { Configuration, OpenAIApi } from "openai-edge";
-import { OpenAIStream, StreamingTextResponse } from "ai";
 
 const config = new Configuration({
   apiKey: process.env.OPENAI_API_KEY,
@@ -13,7 +12,8 @@ export async function POST(req: Request): Promise<Response> {
 
   const response = await openai.createChatCompletion({
     model: "gpt-4",
-    max_tokens: 500,
+    // model: "gpt-3.5-turbo-0613",
+    max_tokens: 250,
     messages,
   });
 

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

@@ -7,13 +7,16 @@ export function VacationNotes(): JSX.Element {
 
   return (
     <CopilotTextarea
-      className="p-4"
+      className="px-4 py-4"
       value={text}
       onChange={(value: string) => setText(value)}
       placeholder="What are your plans for your vacation?"
       autosuggestionsConfig={{
+        textareaPurpose: "Notes for my upcoming vacation",
         debounceTime: 0.7,
         acceptAutosuggestionKey: "Tab",
+        contextCategories: [],
+        disableWhenEmpty: true,
       }}
     />
   );

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

@@ -1,7 +1,7 @@
 // This example is for an Editor with `ReactEditor` and `HistoryEditor`
 import { Descendant, Editor } from "slate";
-import { Editable, Slate } from "slate-react";
-import { useCallback, useEffect, useRef } from "react";
+import { Editable, RenderPlaceholderProps, Slate } from "slate-react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useAutosuggestions } from "../../hooks/use-autosuggestions";
 import { AutosuggestionState } from "../../types/autosuggestion-state";
 import { clearAutocompletionsFromEditor } from "../../lib/slatejs-edits/clear-autocompletions";
@@ -13,10 +13,12 @@ import {
   AutosuggestionsConfig,
   defaultAutosuggestionsConfig,
 } from "../../types/autosuggestions-config";
+import { makeRenderPlaceholderFunction } from "./render-placeholder";
 
 export interface CopilotTextareaProps {
   className?: string;
   placeholder?: string;
+  placeholderStyle?: React.CSSProperties;
   value?: string;
   onChange?: (value: string) => void;
   autosuggestionsConfig: Partial<AutosuggestionsConfig>;
@@ -37,10 +39,12 @@ export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
 
   const editor = useCopilotTextareaEditor();
   const autosuggestionsFunction = useMakeAutosuggestionFunction(
+    autosuggestionsConfig.textareaPurpose,
     autosuggestionsConfig.apiEndpoint,
     autosuggestionsConfig.makeSystemMessage,
-    autosuggestionsConfig.fewSuggestionsMessages,
-    autosuggestionsConfig.contextCategories
+    autosuggestionsConfig.fewShotMessages,
+    autosuggestionsConfig.contextCategories,
+    autosuggestionsConfig.disableWhenEmpty
   );
 
   const insertText = useCallback(
@@ -53,6 +57,20 @@ export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
   );
 
   const renderElementMemoized = useCallback(renderElement, []);
+  const renderPlaceholderMemoized = useMemo(() => {
+    // For some reason slateJS specifies a top value of 0, which makes for strange styling. We override this here.
+    const placeholderStyleSlatejsOverrides: React.CSSProperties = {
+      top: undefined,
+    };
+
+    const placeholderStyleAugmented: React.CSSProperties = {
+      ...placeholderStyleSlatejsOverrides,
+      ...props.placeholderStyle,
+    };
+
+    return makeRenderPlaceholderFunction(placeholderStyleAugmented);
+  }, [props.placeholderStyle]);
+
   const {
     currentAutocompleteSuggestion,
     onChangeHandler: onChangeHandlerForAutocomplete,
@@ -87,7 +105,9 @@ export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
     >
       <Editable
         className={props.className}
+        placeholder={props.placeholder}
         renderElement={renderElementMemoized}
+        renderPlaceholder={renderPlaceholderMemoized}
         onKeyDown={onKeyDownHandlerForAutocomplete}
       />
     </Slate>

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

@@ -0,0 +1,25 @@
+import { RenderElementProps, RenderPlaceholderProps } from "slate-react";
+
+export type RenderPlaceholderFunction = (
+  props: RenderPlaceholderProps
+) => JSX.Element;
+
+export function makeRenderPlaceholderFunction(
+  placeholderStyle?: React.CSSProperties
+): RenderPlaceholderFunction {
+  return (props: RenderPlaceholderProps) => {
+    const { style, ...restAttributes } = props.attributes;
+
+    return (
+      <div
+        {...restAttributes}
+        style={{
+          ...style,
+          ...placeholderStyle,
+        }}
+      >
+        {props.children}
+      </div>
+    );
+  };
+}

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

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import { useContext } from "react";
 import { CopilotContext } from "@copilotkit/react-core";
 import { AutosuggestionsBareFunction } from "./use-autosuggestions";
+import { MakeSystemMessage } from "../types";
 
 export interface MinimalChatGPTMessage {
   role: string;
@@ -15,29 +16,39 @@ export interface MinimalChatGPTMessage {
  * 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 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,
   apiEndpoint: string,
-  makeSystemMessage: (message: string) => string,
+  makeSystemMessage: MakeSystemMessage,
   fewShotMessages: MinimalChatGPTMessage[],
-  contextCategories: string[] | undefined
+  contextCategories: string[] | undefined,
+  disableWhenEmpty: boolean
 ): AutosuggestionsBareFunction {
   const { getContextString } = useContext(CopilotContext);
 
   return useCallback(
     async (beforeText: string, afterText: string, abortSignal: AbortSignal) => {
+      if (disableWhenEmpty && beforeText === "" && afterText === "") {
+        throw new Error("No text to suggest");
+      }
+
       const res = await fetch(apiEndpoint, {
         method: "POST",
         body: JSON.stringify({
           messages: [
             {
               role: "system",
-              content: makeSystemMessage(getContextString(contextCategories)),
+              content: makeSystemMessage(
+                getContextString(contextCategories),
+                textareaPurpose
+              ),
             },
             ...fewShotMessages,
             {
@@ -66,6 +77,7 @@ export function useMakeAutosuggestionFunction(
       fewShotMessages,
       getContextString,
       contextCategories,
+      textareaPurpose,
     ]
   );
 }

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

@@ -1,20 +1,30 @@
 import { MinimalChatGPTMessage } from "../hooks/use-make-autosuggestions-function";
 
+export type MakeSystemMessage = (
+  textareaPurpose: string,
+  contextString: string
+) => string;
+
 export interface AutosuggestionsConfig {
+  textareaPurpose: string;
   debounceTime: number;
   acceptAutosuggestionKey: string;
 
   apiEndpoint: string;
-  makeSystemMessage: (context: string) => string;
-  fewSuggestionsMessages: MinimalChatGPTMessage[];
   contextCategories: string[] | undefined;
+  makeSystemMessage: MakeSystemMessage;
+  fewShotMessages: MinimalChatGPTMessage[];
+  disableWhenEmpty: boolean;
 }
 
-export function defaultMakeSystemMessage(contextString: string): string {
+export const defaultMakeSystemMessage: MakeSystemMessage = (
+  textareaPurpose,
+  contextString
+) => {
   return `
 You are a hyper-competent and versatile writing assistant.
 
-The user is writing some text. It may be a long document, or just a short message.
+The user is writing some text. The purpose is: ${textareaPurpose}.
 Your job is to help the user write - by guessing what they are going to write next as best as you can, and suggesting it to them.
 Only guess a SHORT distance ahead. Usually 1 sentence, or at most 1 paragraph.
 
@@ -26,14 +36,15 @@ The user will provide both the text before and after the cursor. You should use
 <TextBeforeCursor>
 <YourSuggestion>
 
-If we need space between the text before and after the cursor, make sure to explicitly add it in the suggestion.
+If we need to add a whitespace character to the suggested text, make sure to explicitly add it in.
 
 The following external context is also provided. You may draw on it when appropriate.
 \`\`\`
 ${contextString}
 \`\`\`
 `;
-}
+};
+
 export const defaultFewShotMessages: MinimalChatGPTMessage[] = [
   {
     role: "user",
@@ -70,11 +81,13 @@ export const defaultFewShotMessages: MinimalChatGPTMessage[] = [
   },
 ];
 export const defaultAutosuggestionsConfig: AutosuggestionsConfig = {
+  textareaPurpose: "A generic textbox",
   debounceTime: 500,
   acceptAutosuggestionKey: "Tab",
 
   apiEndpoint: "api/autosuggestions",
   makeSystemMessage: defaultMakeSystemMessage,
-  fewSuggestionsMessages: defaultFewShotMessages,
+  fewShotMessages: defaultFewShotMessages,
   contextCategories: undefined,
+  disableWhenEmpty: false,
 };

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

@@ -1 +1,4 @@
-export type { AutosuggestionsConfig } from "./autosuggestions-config";
+export type {
+  AutosuggestionsConfig,
+  MakeSystemMessage,
+} from "./autosuggestions-config";