@copilotkit/react-textarea 0.18.0 → 0.19.0-alpha.1

package/src/hooks/make-autosuggestions-function/use-make-standard-insertion-function.tsx

@@ -0,0 +1,150 @@
+import { CopilotContext } from "@copilotkit/react-core";
+import { useCallback, useContext } from "react";
+import { MinimalChatGPTMessage } from "../../types";
+import { retry } from "../../lib/retry";
+import {
+  EditingEditorState,
+  Generator_InsertionOrEditingSuggestion,
+  InsertionEditorApiConfig,
+  InsertionEditorState,
+} from "../../types/base/autosuggestions-bare-function";
+import { InsertionsApiConfig } from "../../types/autosuggestions-config/insertions-api-config";
+import { EditingApiConfig } from "../../types/autosuggestions-config/editing-api-config";
+
+/**
+ * Returns a memoized function that sends a request to the specified API endpoint to get an autosuggestion for the user's input.
+ * The function takes in the text before and after the cursor, and an abort signal.
+ * 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 useMakeStandardInsertionOrEditingFunction(
+  textareaPurpose: string,
+  contextCategories: string[] | undefined,
+  insertionApiConfig: InsertionsApiConfig,
+  editingApiConfig: EditingApiConfig
+): Generator_InsertionOrEditingSuggestion {
+  const { getContextString } = useContext(CopilotContext);
+
+  const insertionFunction = useCallback(
+    async (
+      editorState: EditingEditorState,
+      insertionPrompt: string,
+      abortSignal: AbortSignal
+    ) => {
+      const res = await retry(async () => {
+        const messages: MinimalChatGPTMessage[] = [
+          {
+            role: "system",
+            content: insertionApiConfig.makeSystemPrompt(
+              textareaPurpose,
+              getContextString(contextCategories)
+            ),
+          },
+          ...insertionApiConfig.fewShotMessages,
+          {
+            role: "user",
+            name: "TextAfterCursor",
+            content: editorState.textAfterCursor,
+          },
+          {
+            role: "user",
+            name: "TextBeforeCursor",
+            content: editorState.textBeforeCursor,
+          },
+          {
+            role: "user",
+            name: "InsertionPrompt",
+            content: insertionPrompt,
+          },
+        ];
+
+        return await insertionApiConfig.apiEndpoint.run(
+          abortSignal,
+          messages,
+          insertionApiConfig.forwardedParams
+        );
+      });
+
+      return res;
+    },
+    [insertionApiConfig, getContextString, contextCategories, textareaPurpose]
+  );
+
+  const editingFunction = useCallback(
+    async (
+      editorState: EditingEditorState,
+      editingPrompt: string,
+      abortSignal: AbortSignal
+    ) => {
+      const res = await retry(async () => {
+        const messages: MinimalChatGPTMessage[] = [
+          {
+            role: "system",
+            content: editingApiConfig.makeSystemPrompt(
+              textareaPurpose,
+              getContextString(contextCategories)
+            ),
+          },
+          ...editingApiConfig.fewShotMessages,
+          {
+            role: "user",
+            name: "TextBeforeCursor",
+            content: editorState.textBeforeCursor,
+          },
+          {
+            role: "user",
+            name: "TextToEdit",
+            content: editorState.selectedText,
+          },
+          {
+            role: "user",
+            name: "TextAfterCursor",
+            content: editorState.textAfterCursor,
+          },
+          {
+            role: "user",
+            name: "EditingPrompt",
+            content: editingPrompt,
+          },
+        ];
+
+        return await editingApiConfig.apiEndpoint.run(
+          abortSignal,
+          messages,
+          editingApiConfig.forwardedParams
+        );
+      });
+
+      return res;
+    },
+    [editingApiConfig, getContextString, contextCategories, textareaPurpose]
+  );
+
+  const insertionOrEditingFunction = useCallback(
+    async (
+      editorState: EditingEditorState,
+      insertionPrompt: string,
+      abortSignal: AbortSignal
+    ) => {
+      if (editorState.selectedText === "") {
+        return await insertionFunction(
+          editorState,
+          insertionPrompt,
+          abortSignal
+        );
+      } else {
+        return await editingFunction(editorState, insertionPrompt, abortSignal);
+      }
+    },
+    [insertionFunction, editingFunction]
+  );
+
+  return insertionOrEditingFunction;
+}

package/src/hooks/misc/use-autosize-textarea.tsx

@@ -0,0 +1,21 @@
+import { Ref, RefObject, useEffect } from "react";
+
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (
+  textAreaRef: RefObject<HTMLTextAreaElement>,
+  value: string
+) => {
+  useEffect(() => {
+    if (textAreaRef.current !== null) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.current.style.height = "0px";
+      const scrollHeight = textAreaRef.current.scrollHeight;
+
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.current.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+
+export default useAutosizeTextArea;

package/src/lib/get-text-around-cursor.ts

@@ -1,21 +1,41 @@
-import { Editor, Node, Path, Range, Text, Element } from "slate";
+import {
+  Editor,
+  Node,
+  Path,
+  Range,
+  Text,
+  Element,
+  BasePoint,
+  BaseRange,
+  Point,
+} from "slate";
 import { EditorAutocompleteState } from "../types/base/editor-autocomplete-state";
 
-export function getTextAroundCursor(
+export interface EditorTextState {
+  selection: BaseRange;
+
+  textBeforeCursor: string;
+  selectedText: string;
+  textAfterCursor: string;
+}
+
+export function getTextAroundCollapsedCursor(
   editor: Editor
 ): EditorAutocompleteState | null {
   const { selection } = editor;
-
   if (!selection || !Range.isCollapsed(selection)) {
     return null;
   }
+
+  const cursorPoint = selection.anchor;
+
   // Create two ranges: one before the anchor and one after
   const beforeRange: Range = {
     anchor: Editor.start(editor, []),
-    focus: selection.anchor,
+    focus: cursorPoint,
   };
   const afterRange: Range = {
-    anchor: selection.anchor,
+    anchor: cursorPoint,
     focus: Editor.end(editor, []),
   };
 
@@ -24,12 +44,43 @@ export function getTextAroundCursor(
   const after = extractTextWithNewlines(editor, afterRange);
 
   return {
-    cursorPoint: selection.anchor,
+    cursorPoint: cursorPoint,
     textBeforeCursor: before,
     textAfterCursor: after,
   };
 }
 
+export function getTextAroundSelection(editor: Editor): EditorTextState | null {
+  const { selection } = editor;
+  if (!selection) {
+    return null;
+  }
+
+  const wellOrderedSelection = wellOrderedRange(selection);
+
+  // Create two ranges: one before the anchor and one after
+  const beforeRange: Range = {
+    anchor: Editor.start(editor, []),
+    focus: wellOrderedSelection.anchor,
+  };
+  const afterRange: Range = {
+    anchor: wellOrderedSelection.focus,
+    focus: Editor.end(editor, []),
+  };
+
+  // Extract text for these ranges
+  const before = extractTextWithNewlines(editor, beforeRange);
+  const after = extractTextWithNewlines(editor, afterRange);
+  const selectedText = extractTextWithNewlines(editor, wellOrderedSelection);
+
+  return {
+    selection: wellOrderedSelection,
+    textBeforeCursor: before,
+    selectedText,
+    textAfterCursor: after,
+  };
+}
+
 export function getFullEditorTextWithNewlines(editor: Editor): string {
   const fullDocumentRange: Range = {
     anchor: Editor.start(editor, []),
@@ -80,3 +131,17 @@ export function extractTextWithNewlines(editor: Editor, range: Range): string {
 
   return text;
 }
+
+function wellOrderedRange(range: BaseRange): BaseRange {
+  const { anchor, focus } = range;
+  // if anchor is before focus, return range as is
+  if (Point.isBefore(anchor, focus)) {
+    return range;
+  }
+
+  // if focus is before anchor, return range with anchor and focus swapped
+  return {
+    anchor: focus,
+    focus: anchor,
+  };
+}

package/src/lib/retry.tsx

@@ -0,0 +1,23 @@
+export function retry<T>(
+  fn: () => Promise<T>,
+  retriesLeft: number = 2,
+  interval: number = 200,
+  backoff: number = 1.5
+): Promise<T> {
+  return new Promise((resolve, reject) => {
+    fn()
+      .then(resolve)
+      .catch((error) => {
+        if (retriesLeft === 1) {
+          reject(error);
+          return;
+        }
+
+        setTimeout(() => {
+          retry(fn, retriesLeft - 1, interval * backoff, backoff)
+            .then(resolve)
+            .catch(reject);
+        }, interval);
+      });
+  });
+}

package/src/styles.css

@@ -1,3 +1,5 @@
+@import url('material-icons/iconfont/material-icons.css');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/src/types/autosuggestions-config/autosuggestions-config-user-specified.tsx

@@ -0,0 +1,27 @@
+import { AutosuggestionsConfig, ChatlikeApiEndpoint } from ".";
+import { InsertionsApiConfig } from "./insertions-api-config";
+import { SuggestionsApiConfig } from "./suggestions-api-config";
+
+// Mostly mirrors a partial SuggestionsApiConfig, but with some fields MANDATORY.
+export interface SuggestionsApiConfigUserSpecified
+  extends Partial<Omit<SuggestionsApiConfig, "apiEndpoint">> {
+  apiEndpoint: ChatlikeApiEndpoint;
+}
+
+// Mostly mirrors a partial InsertionsApiConfig, but with some fields MANDATORY.
+export interface InsertionsApiConfigUserSpecified
+  extends Partial<Omit<InsertionsApiConfig, "apiEndpoint">> {
+  apiEndpoint: ChatlikeApiEndpoint;
+}
+
+// Mostly mirrors a partial AutosuggestionsConfig, but with some fields MANDATORY.
+export interface AutosuggestionsConfigUserSpecified
+  extends Partial<
+    Omit<AutosuggestionsConfig, "chatApiConfigs" | "textareaPurpose">
+  > {
+  textareaPurpose: string; // the user MUST specify textareaPurpose - it's not optional
+  chatApiConfigs: {
+    suggestionsApiConfig?: SuggestionsApiConfigUserSpecified;
+    insertionApiConfig?: InsertionsApiConfigUserSpecified;
+  };
+}

package/src/types/autosuggestions-config/autosuggestions-config.tsx

@@ -0,0 +1,43 @@
+import {
+  BaseAutosuggestionsConfig,
+  defaultBaseAutosuggestionsConfig,
+} from "../base";
+import {
+  SuggestionsApiConfig,
+  defaultSuggestionsApiConfig,
+} from "./suggestions-api-config";
+import {
+  InsertionsApiConfig,
+  defaultInsertionsApiConfig,
+} from "./insertions-api-config";
+import { ChatlikeApiEndpoint } from ".";
+import {
+  EditingApiConfig,
+  defaultEditingApiConfig,
+} from "./editing-api-config";
+
+// Like the base autosuggestions config, with 2 additional fields:
+// 1. externalContextCategories: string[] | undefined;
+// 2. instead of apiConfigs, we have chatApiConfigs: a higher-level abstraction that uses a ChatGPT-like API endpoint.
+export interface AutosuggestionsConfig
+  extends Omit<BaseAutosuggestionsConfig, "apiConfig"> {
+  externalContextCategories: string[] | undefined;
+  chatApiConfigs: {
+    suggestionsApiConfig: SuggestionsApiConfig;
+    insertionApiConfig: InsertionsApiConfig;
+    editingApiConfig: EditingApiConfig;
+  };
+}
+
+export const defaultAutosuggestionsConfig: Omit<
+  AutosuggestionsConfig,
+  "textareaPurpose" | "apiEndpoint"
+> = {
+  ...defaultBaseAutosuggestionsConfig,
+  externalContextCategories: undefined,
+  chatApiConfigs: {
+    suggestionsApiConfig: defaultSuggestionsApiConfig,
+    insertionApiConfig: defaultInsertionsApiConfig,
+    editingApiConfig: defaultEditingApiConfig,
+  },
+};

package/src/types/autosuggestions-config/editing-api-config.tsx

@@ -0,0 +1,102 @@
+import { ChatlikeApiEndpoint } from "./subtypes/chatlike-api-endpoint";
+import { MakeSystemPrompt } from "./subtypes/make-system-prompt";
+import { MinimalChatGPTMessage } from "./subtypes/minimal-chat-gpt-message";
+
+export interface EditingApiConfig {
+  apiEndpoint: ChatlikeApiEndpoint;
+  makeSystemPrompt: MakeSystemPrompt;
+  fewShotMessages: MinimalChatGPTMessage[];
+  forwardedParams: { [key: string]: any } | undefined;
+}
+
+export const defaultEditingMakeSystemPrompt: MakeSystemPrompt = (
+  textareaPurpose,
+  contextString
+) => {
+  return `You are a versatile writing assistant.
+  
+The user is writing some text.
+The purpose is: \"${textareaPurpose}\"
+
+The user also provides you with a prompt for EDITING some text they are writing. 
+Your job is to come up with an EDIT of the text that the user would like to use - AS BEST YOU CAN.
+
+Adjust yourself to the user's style and implied intent.
+
+The user will provide the following information; use this to infer the best relevant EDIT:
+<TextBeforeCursor>
+<TextToEdit>
+<TextAfterCursor>
+<EditingPrompt>
+
+<YourEditSuggestion>
+
+If we need to add a whitespace character to the suggested edit text, make sure to explicitly add it in.
+
+The following external context is also provided. Use it to help you make better suggestions!!!
+\`\`\`
+${contextString}
+\`\`\`
+`;
+};
+
+export const defaultEditingFewShotMessages: MinimalChatGPTMessage[] = [
+  {
+    role: "user",
+    name: "TextBeforeCursor",
+    content: "This morning I woke up and went straight to the grocery store. ",
+  },
+  {
+    role: "user",
+    name: "TextToEdit",
+    content:
+      "While I was there I also picked up some apples, oranges, and bananas. ",
+  },
+  {
+    role: "user",
+    name: "TextAfterCursor",
+    content:
+      "The grocery store was having a sale on fruit, so I decided to stock up.",
+  },
+  {
+    role: "user",
+    name: "EditingPrompt",
+    content: "I bought a big watermelon",
+  },
+  {
+    role: "assistant",
+    content:
+      " When I arrived I went straight to the produce section and picked out a big watermelon. ",
+  },
+  {
+    role: "user",
+    name: "TextAfterCursor",
+    content:
+      "and (iii) to the appointment of the Equityholders' Representative pursuant to Section 10.7 of the Merger Agreement and to the provisions thereof.",
+  },
+  {
+    role: "user",
+    name: "TextBeforeCursor",
+    content:
+      'The Optionholder, in the Optionholder\'s capacity as a holder of vested Options, hereby irrevocably and unconditionally agrees: (i) that the Optionholder shall be deemed an "Equityholder" under the Merger Agreement and shall be entitled to the rights and benefits, and subject to the obligations, of an "Equityholder" thereunder;',
+  },
+  {
+    role: "user",
+    name: "InsertionPrompt",
+    content: "add section about the optionholder's pro rata share",
+  },
+  {
+    role: "assistant",
+    content:
+      ' (ii) that, for purposes of this Agreement and the Merger Agreement, the applicable percentage set forth opposite the name of the Optionholder in the Distribution Waterfall shall be such the Optionholder\'s "Pro Rata Share"; ',
+  },
+];
+
+export const defaultEditingApiConfig: EditingApiConfig = {
+  apiEndpoint: ChatlikeApiEndpoint.standardOpenAIEndpoint(
+    "/api/copilotkit_chatlike"
+  ),
+  makeSystemPrompt: defaultEditingMakeSystemPrompt,
+  fewShotMessages: defaultEditingFewShotMessages,
+  forwardedParams: undefined,
+};

package/src/types/autosuggestions-config/index.ts

@@ -0,0 +1,11 @@
+export { defaultAutosuggestionsConfig } from "./autosuggestions-config";
+export type { AutosuggestionsConfig } from "./autosuggestions-config";
+
+export type { MinimalChatGPTMessage } from "./subtypes/minimal-chat-gpt-message";
+export type { MakeSystemPrompt } from "./subtypes/make-system-prompt";
+export { ChatlikeApiEndpoint } from "./subtypes/chatlike-api-endpoint";
+export type { ChatlikeApiEndpointImpl } from "./subtypes/chatlike-api-endpoint";
+
+export type { AutosuggestionsConfigUserSpecified } from "./autosuggestions-config-user-specified";
+export type { SuggestionsApiConfigUserSpecified } from "./autosuggestions-config-user-specified";
+export type { InsertionsApiConfigUserSpecified } from "./autosuggestions-config-user-specified";

package/src/types/autosuggestions-config/insertions-api-config.tsx

@@ -0,0 +1,95 @@
+import { ChatlikeApiEndpoint } from "./subtypes/chatlike-api-endpoint";
+import { MakeSystemPrompt } from "./subtypes/make-system-prompt";
+import { MinimalChatGPTMessage } from "./subtypes/minimal-chat-gpt-message";
+
+export interface InsertionsApiConfig {
+  apiEndpoint: ChatlikeApiEndpoint;
+  makeSystemPrompt: MakeSystemPrompt;
+  fewShotMessages: MinimalChatGPTMessage[];
+  forwardedParams: { [key: string]: any } | undefined;
+}
+
+export const defaultInsertionsMakeSystemPrompt: MakeSystemPrompt = (
+  textareaPurpose,
+  contextString
+) => {
+  return `You are a versatile writing assistant.
+  
+The user is writing some text.
+The purpose is: \"${textareaPurpose}\"
+
+The user also provides you with a prompt for INSERTIONS into the text they are writing. 
+Your job is to come up with an INSERTION into the text that the user would like AS BEST YOU CAN.
+Only guess a SHORT distance ahead. Usually 1 sentence, or at most 1 paragraph.
+
+Adjust yourself to the user's style and implied intent.
+
+The user will provide the text before and after the cursor, as well as the insertion prompt. You should use this to infer the best relevant insertion.
+<TextAfterCursor>
+<TextBeforeCursor>
+<InsertionPrompt>
+<YourSuggestion>
+
+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. Use it to help you make better suggestions!!!
+\`\`\`
+${contextString}
+\`\`\`
+`;
+};
+
+export const defaultInsertionsFewShotMessages: MinimalChatGPTMessage[] = [
+  {
+    role: "user",
+    name: "TextAfterCursor",
+    content:
+      "While I was there I also picked up some apples, oranges, and bananas.",
+  },
+  {
+    role: "user",
+    name: "TextBeforeCursor",
+    content: "This morning I woke up and went straight to the grocery store.",
+  },
+  {
+    role: "user",
+    name: "InsertionPrompt",
+    content: "I bought a big watermelon",
+  },
+  {
+    role: "assistant",
+    content:
+      " When I arrived I went straight to the produce section and picked out a big watermelon. ",
+  },
+  {
+    role: "user",
+    name: "TextAfterCursor",
+    content:
+      "and (iii) to the appointment of the Equityholders' Representative pursuant to Section 10.7 of the Merger Agreement and to the provisions thereof.",
+  },
+  {
+    role: "user",
+    name: "TextBeforeCursor",
+    content:
+      'The Optionholder, in the Optionholder\'s capacity as a holder of vested Options, hereby irrevocably and unconditionally agrees: (i) that the Optionholder shall be deemed an "Equityholder" under the Merger Agreement and shall be entitled to the rights and benefits, and subject to the obligations, of an "Equityholder" thereunder;',
+  },
+  {
+    role: "user",
+    name: "InsertionPrompt",
+    content: "add section about the optionholder's pro rata share",
+  },
+  {
+    role: "assistant",
+    content:
+      ' (ii) that, for purposes of this Agreement and the Merger Agreement, the applicable percentage set forth opposite the name of the Optionholder in the Distribution Waterfall shall be such the Optionholder\'s "Pro Rata Share"; ',
+  },
+];
+
+export const defaultInsertionsApiConfig: InsertionsApiConfig = {
+  apiEndpoint: ChatlikeApiEndpoint.standardOpenAIEndpoint(
+    "/api/copilotkit_chatlike"
+  ),
+  makeSystemPrompt: defaultInsertionsMakeSystemPrompt,
+  fewShotMessages: defaultInsertionsFewShotMessages,
+  forwardedParams: undefined,
+};

package/src/types/{standard-autosuggestions → autosuggestions-config/subtypes}/chatlike-api-endpoint.tsx

@@ -1,4 +1,4 @@
-import { MinimalChatGPTMessage } from "..";
+import { MinimalChatGPTMessage } from "./minimal-chat-gpt-message";
 
 export type ChatlikeApiEndpointImpl = (
   abortSignal: AbortSignal,
@@ -6,10 +6,16 @@ export type ChatlikeApiEndpointImpl = (
   forwardedProps?: { [key: string]: any }
 ) => Promise<string>;
 
+export type StreamingChatlikeApiEndpointImpl = (
+  abortSignal: AbortSignal,
+  messages: MinimalChatGPTMessage[],
+  forwardedProps?: { [key: string]: any }
+) => Promise<ReadableStream<string>>;
+
 export class ChatlikeApiEndpoint {
-  public run: ChatlikeApiEndpointImpl;
+  public run: StreamingChatlikeApiEndpointImpl;
 
-  constructor(run: ChatlikeApiEndpointImpl) {
+  constructor(run: StreamingChatlikeApiEndpointImpl) {
     this.run = run;
   }
 
@@ -34,9 +40,15 @@ export class ChatlikeApiEndpoint {
           signal: abortSignal,
         });
 
-        const json = await res.json();
-        const suggestion = json.choices[0].message.content;
-        return suggestion;
+        const bodySteram: ReadableStream<Uint8Array> | null = res.body;
+        if (!bodySteram) {
+          throw new Error("The response body is empty.");
+        }
+
+        // map the stream to a stream of strings
+        const stringStream = bodySteram.pipeThrough(new TextDecoderStream());
+
+        return stringStream;
       }
     );
   }
@@ -46,7 +58,7 @@ export class ChatlikeApiEndpoint {
    * @param run - The implementation of the ChatlikeApiEndpointImpl interface.
    * @returns A new instance of ChatlikeApiEndpoint .
    */
-  static custom(run: ChatlikeApiEndpointImpl): ChatlikeApiEndpoint {
+  static custom(run: StreamingChatlikeApiEndpointImpl): ChatlikeApiEndpoint {
     return new ChatlikeApiEndpoint(run);
   }
 }

package/src/types/autosuggestions-config/subtypes/make-system-prompt.ts

@@ -0,0 +1,4 @@
+export type MakeSystemPrompt = (
+  textareaPurpose: string,
+  contextString: string
+) => string;