@copilotkit/react-textarea 0.0.0-feat-dynamic-copilotcloud-qa-20250117190454

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

@@ -0,0 +1,114 @@
+import { COPILOT_CLOUD_PUBLIC_API_KEY_HEADER } from "@copilotkit/shared";
+import { useCopilotContext } from "@copilotkit/react-core";
+import { useCallback } from "react";
+import { AutosuggestionsBareFunction } from "../../types";
+import { retry } from "../../lib/retry";
+import { InsertionEditorState } from "../../types/base/autosuggestions-bare-function";
+import { SuggestionsApiConfig } from "../../types/autosuggestions-config/suggestions-api-config";
+import {
+  Message,
+  Role,
+  TextMessage,
+  convertGqlOutputToMessages,
+  convertMessagesToGqlInput,
+  filterAgentStateMessages,
+  CopilotRequestType,
+} from "@copilotkit/runtime-client-gql";
+
+/**
+ * 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 useMakeStandardAutosuggestionFunction(
+  textareaPurpose: string,
+  contextCategories: string[],
+  apiConfig: SuggestionsApiConfig,
+): AutosuggestionsBareFunction {
+  const { getContextString, copilotApiConfig, runtimeClient } = useCopilotContext();
+  const { chatApiEndpoint: url, publicApiKey, credentials, properties } = copilotApiConfig;
+  const headers = {
+    ...copilotApiConfig.headers,
+    ...(publicApiKey ? { [COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {}),
+  };
+  const { maxTokens, stop, temperature = 0 } = apiConfig;
+
+  return useCallback(
+    async (editorState: InsertionEditorState, abortSignal: AbortSignal) => {
+      const res = await retry(async () => {
+        // @ts-expect-error -- Passing null is forbidden, but we're filtering it later
+        const messages: Message[] = [
+          new TextMessage({
+            role: Role.System,
+            content: apiConfig.makeSystemPrompt(
+              textareaPurpose,
+              getContextString([], contextCategories),
+            ),
+          }),
+          ...apiConfig.fewShotMessages,
+          editorState.textAfterCursor != ""
+            ? new TextMessage({
+                role: Role.User,
+                content: editorState.textAfterCursor,
+              })
+            : null,
+          new TextMessage({
+            role: Role.User,
+            content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`,
+          }),
+        ].filter(Boolean);
+
+        const response = await runtimeClient
+          .generateCopilotResponse({
+            data: {
+              frontend: {
+                actions: [],
+                url: window.location.href,
+              },
+              messages: convertMessagesToGqlInput(filterAgentStateMessages(messages)),
+              metadata: {
+                requestType: CopilotRequestType.TextareaCompletion,
+              },
+              forwardedParameters: {
+                maxTokens,
+                stop,
+                temperature,
+              },
+            },
+            properties,
+            signal: abortSignal,
+          })
+          .toPromise();
+
+        let result = "";
+        for (const message of convertGqlOutputToMessages(
+          response.data?.generateCopilotResponse?.messages ?? [],
+        )) {
+          if (abortSignal.aborted) {
+            break;
+          }
+          if (message.isTextMessage()) {
+            result += message.content;
+          }
+        }
+
+        return result;
+      });
+
+      return res;
+    },
+    [apiConfig, getContextString, contextCategories, textareaPurpose],
+  );
+}

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

@@ -0,0 +1,214 @@
+import { COPILOT_CLOUD_PUBLIC_API_KEY_HEADER } from "@copilotkit/shared";
+import { useCopilotContext } from "@copilotkit/react-core";
+import { useCallback } from "react";
+import {
+  CopilotRuntimeClient,
+  Message,
+  Role,
+  TextMessage,
+  convertGqlOutputToMessages,
+  convertMessagesToGqlInput,
+  filterAgentStateMessages,
+  CopilotRequestType,
+} from "@copilotkit/runtime-client-gql";
+import { retry } from "../../lib/retry";
+import {
+  EditingEditorState,
+  Generator_InsertionOrEditingSuggestion,
+} from "../../types/base/autosuggestions-bare-function";
+import { InsertionsApiConfig } from "../../types/autosuggestions-config/insertions-api-config";
+import { EditingApiConfig } from "../../types/autosuggestions-config/editing-api-config";
+import { DocumentPointer } from "@copilotkit/react-core";
+
+/**
+ * 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[],
+  insertionApiConfig: InsertionsApiConfig,
+  editingApiConfig: EditingApiConfig,
+): Generator_InsertionOrEditingSuggestion {
+  const { getContextString, copilotApiConfig, runtimeClient } = useCopilotContext();
+  const headers = {
+    ...(copilotApiConfig.publicApiKey
+      ? { [COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: copilotApiConfig.publicApiKey }
+      : {}),
+  };
+
+  async function runtimeClientResponseToStringStream(
+    responsePromise: ReturnType<typeof runtimeClient.generateCopilotResponse>,
+  ) {
+    const messagesStream = runtimeClient.asStream(responsePromise);
+
+    return new ReadableStream({
+      async start(controller) {
+        const reader = messagesStream.getReader();
+        let sentContent = "";
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            break;
+          }
+
+          const messages = convertGqlOutputToMessages(value.generateCopilotResponse.messages);
+
+          let newContent = "";
+
+          for (const message of messages) {
+            if (message.isTextMessage()) {
+              newContent += message.content;
+            }
+          }
+          if (newContent) {
+            const contentToSend = newContent.slice(sentContent.length);
+            controller.enqueue(contentToSend);
+            sentContent += contentToSend;
+          }
+        }
+        controller.close();
+      },
+    });
+  }
+
+  const insertionFunction = useCallback(
+    async (
+      editorState: EditingEditorState,
+      insertionPrompt: string,
+      documents: DocumentPointer[],
+      abortSignal: AbortSignal,
+    ) => {
+      const res = await retry(async () => {
+        const messages: Message[] = [
+          new TextMessage({
+            role: Role.System,
+            content: insertionApiConfig.makeSystemPrompt(
+              textareaPurpose,
+              getContextString(documents, contextCategories),
+            ),
+          }),
+          ...insertionApiConfig.fewShotMessages,
+          new TextMessage({
+            role: Role.User,
+            content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<InsertionPrompt>${insertionPrompt}</InsertionPrompt>`,
+          }),
+        ];
+
+        return runtimeClientResponseToStringStream(
+          runtimeClient.generateCopilotResponse({
+            data: {
+              frontend: {
+                actions: [],
+                url: window.location.href,
+              },
+              messages: convertMessagesToGqlInput(filterAgentStateMessages(messages)),
+              metadata: {
+                requestType: CopilotRequestType.TextareaCompletion,
+              },
+            },
+            properties: copilotApiConfig.properties,
+            signal: abortSignal,
+          }),
+        );
+      });
+
+      return res;
+    },
+    [insertionApiConfig, getContextString, contextCategories, textareaPurpose],
+  );
+
+  const editingFunction = useCallback(
+    async (
+      editorState: EditingEditorState,
+      editingPrompt: string,
+      documents: DocumentPointer[],
+      abortSignal: AbortSignal,
+    ) => {
+      const res = await retry(async () => {
+        const messages: Message[] = [
+          new TextMessage({
+            role: Role.System,
+            content: editingApiConfig.makeSystemPrompt(
+              textareaPurpose,
+              getContextString(documents, contextCategories),
+            ),
+          }),
+          ...editingApiConfig.fewShotMessages,
+          new TextMessage({
+            role: Role.User,
+            content: `<TextBeforeCursor>${editorState.textBeforeCursor}</TextBeforeCursor>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<TextToEdit>${editorState.selectedText}</TextToEdit>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<TextAfterCursor>${editorState.textAfterCursor}</TextAfterCursor>`,
+          }),
+          new TextMessage({
+            role: Role.User,
+            content: `<EditingPrompt>${editingPrompt}</EditingPrompt>`,
+          }),
+        ];
+
+        return runtimeClientResponseToStringStream(
+          runtimeClient.generateCopilotResponse({
+            data: {
+              frontend: {
+                actions: [],
+                url: window.location.href,
+              },
+              messages: convertMessagesToGqlInput(filterAgentStateMessages(messages)),
+              metadata: {
+                requestType: CopilotRequestType.TextareaCompletion,
+              },
+            },
+            properties: copilotApiConfig.properties,
+            signal: abortSignal,
+          }),
+        );
+      });
+
+      return res;
+    },
+    [editingApiConfig, getContextString, contextCategories, textareaPurpose],
+  );
+
+  const insertionOrEditingFunction = useCallback(
+    async (
+      editorState: EditingEditorState,
+      insertionPrompt: string,
+      documents: DocumentPointer[],
+      abortSignal: AbortSignal,
+    ) => {
+      if (editorState.selectedText === "") {
+        return await insertionFunction(editorState, insertionPrompt, documents, abortSignal);
+      } else {
+        return await editingFunction(editorState, insertionPrompt, documents, abortSignal);
+      }
+    },
+    [insertionFunction, editingFunction],
+  );
+
+  return insertionOrEditingFunction;
+}

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

@@ -0,0 +1,18 @@
+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/index.tsx

@@ -0,0 +1,7 @@
+"use client";
+import "./styles.css";
+
+export * from "./components";
+export * from "./context";
+export * from "./hooks";
+export * from "./types";

package/src/lib/debouncer.ts

@@ -0,0 +1,36 @@
+export type AsyncFunction<T extends any[]> = (...args: [...T, AbortSignal]) => Promise<void>;
+
+export class Debouncer<T extends any[]> {
+  private timeoutId?: ReturnType<typeof setTimeout>;
+  private activeAbortController?: AbortController;
+
+  constructor(private wait: number) {}
+
+  debounce = async (func: AsyncFunction<T>, ...args: T) => {
+    // Abort the previous promise immediately
+    this.cancel();
+
+    this.timeoutId = setTimeout(async () => {
+      try {
+        this.activeAbortController = new AbortController();
+
+        // Pass the signal to the async function, assuming it supports it
+        await func(...args, this.activeAbortController.signal);
+
+        this.activeAbortController = undefined;
+      } catch (error) {}
+    }, this.wait);
+  };
+
+  cancel = () => {
+    if (this.activeAbortController) {
+      this.activeAbortController.abort();
+      this.activeAbortController = undefined;
+    }
+
+    if (this.timeoutId !== undefined) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = undefined;
+    }
+  };
+}

package/src/lib/editor-to-text.ts

@@ -0,0 +1,61 @@
+import { BaseEditor, Descendant, Element } from "slate";
+import { HistoryEditor } from "slate-history";
+import { ReactEditor } from "slate-react";
+import { SuggestionAwareText } from "../types/base/custom-editor";
+
+function nodeChildrenToTextComponents(
+  editor: BaseEditor & ReactEditor & HistoryEditor,
+  nodes: Descendant[],
+): SuggestionAwareText[] {
+  // find inlineable elements
+  const indeciesOfInlineElements = new Set(
+    nodes
+      .map((node, index) => {
+        if (Element.isElement(node) && editor.isInline(node)) {
+          return index;
+        }
+        return -1;
+      })
+      .filter((index) => index !== -1),
+  );
+
+  // ignorable elements = inline elements,
+  // or neighbors of inline elements that are {text: ""}
+  const nonIgnorableItems = nodes.filter((node, index) => {
+    const isInline = indeciesOfInlineElements.has(index);
+    if (isInline) {
+      return false;
+    }
+
+    const isNeighbourOfInline =
+      indeciesOfInlineElements.has(index - 1) || indeciesOfInlineElements.has(index + 1);
+    if (isNeighbourOfInline) {
+      return (node as any).text !== "";
+    }
+
+    return true;
+  });
+
+  return nonIgnorableItems
+    .map((node) => {
+      if (Element.isElement(node)) {
+        switch (node.type) {
+          case "paragraph":
+            return nodeChildrenToTextComponents(editor, node.children);
+          case "suggestion":
+            return [];
+        }
+      } else {
+        return [node];
+      }
+    })
+    .reduce((acc, val) => acc.concat(val), []);
+}
+
+export const editorToText = (editor: BaseEditor & ReactEditor & HistoryEditor) => {
+  const flattened = nodeChildrenToTextComponents(editor, editor.children);
+
+  const text = flattened.map((textComponent) => textComponent.text).join("\n");
+
+  return text;
+};

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

@@ -0,0 +1,135 @@
+import { Editor, Node, Path, Range, Text, Element, BasePoint, BaseRange, Point } from "slate";
+import { EditorAutocompleteState } from "../types/base/editor-autocomplete-state";
+
+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: cursorPoint,
+  };
+  const afterRange: Range = {
+    anchor: cursorPoint,
+    focus: Editor.end(editor, []),
+  };
+
+  // Extract text for these ranges
+  const before = extractTextWithNewlines(editor, beforeRange);
+  const after = extractTextWithNewlines(editor, afterRange);
+
+  return {
+    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, []),
+    focus: Editor.end(editor, []),
+  };
+  return extractTextWithNewlines(editor, fullDocumentRange);
+}
+
+// Helper function to extract text with newlines
+export function extractTextWithNewlines(editor: Editor, range: Range): string {
+  const voids = false;
+  const [start, end] = Range.edges(range);
+  let text = "";
+  let lastBlock: Node | null = null;
+
+  for (const [node, path] of Editor.nodes(editor, {
+    at: range,
+    match: Text.isText,
+    voids,
+  })) {
+    let t = node.text;
+
+    // Determine the parent block of the current text node
+    const [block] = Editor.above(editor, {
+      at: path,
+      match: (n) => Element.isElement(n) && n.type === "paragraph",
+    }) || [null];
+
+    // If we encounter a new block, prepend a newline
+    if (lastBlock !== block && block) {
+      // check that lastBlock is not null to avoid adding a newline at the beginning
+      if (lastBlock) {
+        text += "\n";
+      }
+      lastBlock = block;
+    }
+
+    if (Path.equals(path, end.path)) {
+      t = t.slice(0, end.offset);
+    }
+
+    if (Path.equals(path, start.path)) {
+      t = t.slice(start.offset);
+    }
+
+    text += t;
+  }
+
+  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/lib/slatejs-edits/add-autocompletions.ts

@@ -0,0 +1,30 @@
+import { BasePoint, Transforms } from "slate";
+import { CustomEditor } from "../../types/base/custom-editor";
+
+export function addAutocompletionsToEditor(
+  editor: CustomEditor,
+  newSuggestion: string,
+  point: BasePoint,
+) {
+  const editorPosition = editor.selection;
+
+  Transforms.insertNodes(
+    editor,
+    [
+      {
+        type: "suggestion",
+        inline: true,
+        content: newSuggestion,
+        children: [{ text: "" }],
+      },
+    ],
+    {
+      at: point,
+    },
+  );
+
+  // restore cursor position
+  if (editorPosition) {
+    editor.selection = editorPosition;
+  }
+}

package/src/lib/slatejs-edits/clear-autocompletions.ts

@@ -0,0 +1,19 @@
+import { Element, Node, Path, Transforms } from "slate";
+import { CustomEditor } from "../../types/base/custom-editor";
+
+export function clearAutocompletionsFromEditor(editor: CustomEditor) {
+  // clear previous suggestion
+  const paths: Path[] = [];
+  for (const [node, path] of Node.nodes(editor)) {
+    if (Element.isElement(node) && node.type === "suggestion") {
+      paths.push(path);
+    }
+  }
+  for (const path of paths) {
+    try {
+      Transforms.removeNodes(editor, { at: path });
+    } catch (e) {
+      console.log("CopilotTextarea.clearAutocompletionsFromEditor: error removing node", e);
+    }
+  }
+}

package/src/lib/slatejs-edits/replace-text.ts

@@ -0,0 +1,28 @@
+import { Editor, Transforms } from "slate";
+
+export function replaceEditorText(editor: Editor, newText: string) {
+  // clear all previous text
+  Transforms.delete(editor, {
+    at: {
+      anchor: Editor.start(editor, []),
+      focus: Editor.end(editor, []),
+    },
+  });
+
+  // insert new text
+  if (newText && newText !== "") {
+    // don't insert empty text - results in strange visual behavior
+    Transforms.insertNodes(
+      editor,
+      [
+        {
+          type: "paragraph",
+          children: [{ text: newText }],
+        },
+      ],
+      {
+        at: [0],
+      },
+    );
+  }
+}