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

package/src/lib/slatejs-edits/with-partial-history.ts

@@ -0,0 +1,149 @@
+import { Editor, Operation, Path, Range, Transforms } from "slate";
+import { HistoryEditor } from "slate-history";
+
+// Copy-pasted from `https://github.com/ianstormtaylor/slate/blob/main/packages/slate-history/src/with-history.ts`
+// With one exception: the `shouldSave` function is passed in as an argument to `withPartialHistory` instead of being hardcoded
+export type ShouldSaveToHistory = (op: Operation, prev: Operation | undefined) => boolean;
+
+export const withPartialHistory = <T extends Editor>(
+  editor: T,
+  shouldSave: ShouldSaveToHistory,
+) => {
+  const e = editor as T & HistoryEditor;
+  const { apply } = e;
+  e.history = { undos: [], redos: [] };
+
+  e.redo = () => {
+    const { history } = e;
+    const { redos } = history;
+
+    if (redos.length > 0) {
+      const batch = redos[redos.length - 1];
+
+      if (batch.selectionBefore) {
+        Transforms.setSelection(e, batch.selectionBefore);
+      }
+
+      HistoryEditor.withoutSaving(e, () => {
+        Editor.withoutNormalizing(e, () => {
+          for (const op of batch.operations) {
+            e.apply(op);
+          }
+        });
+      });
+
+      history.redos.pop();
+      e.writeHistory("undos", batch);
+    }
+  };
+
+  e.undo = () => {
+    const { history } = e;
+    const { undos } = history;
+
+    if (undos.length > 0) {
+      const batch = undos[undos.length - 1];
+
+      HistoryEditor.withoutSaving(e, () => {
+        Editor.withoutNormalizing(e, () => {
+          const inverseOps = batch.operations.map(Operation.inverse).reverse();
+
+          for (const op of inverseOps) {
+            e.apply(op);
+          }
+          if (batch.selectionBefore) {
+            Transforms.setSelection(e, batch.selectionBefore);
+          }
+        });
+      });
+
+      e.writeHistory("redos", batch);
+      history.undos.pop();
+    }
+  };
+
+  e.apply = (op: Operation) => {
+    const { operations, history } = e;
+    const { undos } = history;
+    const lastBatch = undos[undos.length - 1];
+    const lastOp = lastBatch && lastBatch.operations[lastBatch.operations.length - 1];
+    let save = HistoryEditor.isSaving(e);
+    let merge = HistoryEditor.isMerging(e);
+
+    if (save == null) {
+      save = shouldSave(op, lastOp);
+    }
+
+    if (save) {
+      if (merge == null) {
+        if (lastBatch == null) {
+          merge = false;
+        } else if (operations.length !== 0) {
+          merge = true;
+        } else {
+          merge = shouldMerge(op, lastOp);
+        }
+      }
+
+      if (lastBatch && merge) {
+        lastBatch.operations.push(op);
+      } else {
+        const batch = {
+          operations: [op],
+          selectionBefore: e.selection,
+        };
+        e.writeHistory("undos", batch);
+      }
+
+      while (undos.length > 100) {
+        undos.shift();
+      }
+
+      history.redos = [];
+    }
+
+    apply(op);
+  };
+
+  e.writeHistory = (stack: "undos" | "redos", batch: any) => {
+    e.history[stack].push(batch);
+  };
+
+  return e;
+};
+
+/**
+ * Check whether to merge an operation into the previous operation.
+ */
+
+const shouldMerge = (op: Operation, prev: Operation | undefined): boolean => {
+  if (
+    prev &&
+    op.type === "insert_text" &&
+    prev.type === "insert_text" &&
+    op.offset === prev.offset + prev.text.length &&
+    Path.equals(op.path, prev.path)
+  ) {
+    return true;
+  }
+
+  if (
+    prev &&
+    op.type === "remove_text" &&
+    prev.type === "remove_text" &&
+    op.offset + op.text.length === prev.offset &&
+    Path.equals(op.path, prev.path)
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+export const defaultShouldSave = (op: Operation, prev: Operation | undefined): boolean => {
+  if (op.type === "set_selection") {
+    return false;
+  }
+
+  return true;
+};

package/src/lib/stream-promise-flatten.ts

@@ -0,0 +1,33 @@
+/**
+ * Flatten a promise of a stream, into a stream.
+ *
+ * Useful because a stream already includes the notion of async value delivery,
+ * so it often makes sense to simply await the values rather than the generator of the values.
+ *
+ * @param {Promise<ReadableStream<A>>} promise - The promise to flatten.
+ * @returns {ReadableStream<A>} - The flattened stream.
+ */
+
+export function streamPromiseFlatten<A>(promise: Promise<ReadableStream<A>>): ReadableStream<A> {
+  return new ReadableStream<A>({
+    async start(controller) {
+      try {
+        const stream = await promise;
+        const reader = stream.getReader();
+
+        while (true) {
+          const { done, value } = await reader.read();
+
+          if (done) {
+            controller.close();
+            return;
+          }
+
+          controller.enqueue(value);
+        }
+      } catch (error) {
+        controller.error(error);
+      }
+    },
+  });
+}

package/src/lib/utils.test.ts

@@ -0,0 +1,7 @@
+import * as utils from "./utils";
+
+describe("emptyTest", () => {
+  it("should be truthy", () => {
+    expect(true).toBeTruthy();
+  });
+});

package/src/lib/utils.ts

@@ -0,0 +1,49 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export async function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON> {
+  const res = await fetch(input, init);
+
+  if (!res.ok) {
+    const json = await res.json();
+    if (json.error) {
+      const error = new Error(json.error) as Error & {
+        status: number;
+      };
+      error.status = res.status;
+      throw error;
+    } else {
+      throw new Error("An unexpected error occurred");
+    }
+  }
+
+  return res.json();
+}
+
+export function formatDate(input: string | number | Date): string {
+  const date = new Date(input);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export const arraysAreEqual = (arr1: number[], arr2: number[]): boolean =>
+  arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
+
+export function nullableCompatibleEqualityCheck<T>(
+  naiveEqualityCheck: (a: T, b: T) => boolean,
+  a: T | null | undefined,
+  b: T | null | undefined,
+): boolean {
+  if (a === null || a === undefined || b === null || b === undefined) {
+    return a === b;
+  }
+
+  return naiveEqualityCheck(a, b);
+}

package/src/styles.css

@@ -0,0 +1,3 @@
+@import url("material-icons/iconfont/material-icons.css");
+
+@tailwind utilities;

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

@@ -0,0 +1,19 @@
+import { AutosuggestionsConfig } 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<SuggestionsApiConfig> {}
+
+// Mostly mirrors a partial InsertionsApiConfig, but with some fields MANDATORY.
+export interface InsertionsApiConfigUserSpecified extends Partial<InsertionsApiConfig> {}
+
+// 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,30 @@
+import { BaseAutosuggestionsConfig, defaultBaseAutosuggestionsConfig } from "../base";
+import { SuggestionsApiConfig, defaultSuggestionsApiConfig } from "./suggestions-api-config";
+import { InsertionsApiConfig, defaultInsertionsApiConfig } from "./insertions-api-config";
+import { EditingApiConfig, defaultEditingApiConfig } from "./editing-api-config";
+import { defaultCopilotContextCategories } from "@copilotkit/react-core";
+
+// Like the base autosuggestions config, with 2 additional fields:
+// 1. contextCategories: 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"> {
+  contextCategories: string[];
+  chatApiConfigs: {
+    suggestionsApiConfig: SuggestionsApiConfig;
+    insertionApiConfig: InsertionsApiConfig;
+    editingApiConfig: EditingApiConfig;
+  };
+}
+
+export const defaultAutosuggestionsConfig: Omit<
+  AutosuggestionsConfig,
+  "textareaPurpose" | "apiEndpoint"
+> = {
+  ...defaultBaseAutosuggestionsConfig,
+  contextCategories: defaultCopilotContextCategories,
+  chatApiConfigs: {
+    suggestionsApiConfig: defaultSuggestionsApiConfig,
+    insertionApiConfig: defaultInsertionsApiConfig,
+    editingApiConfig: defaultEditingApiConfig,
+  },
+};

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

@@ -0,0 +1,96 @@
+import { Message, Role, TextMessage } from "@copilotkit/runtime-client-gql";
+import { MakeSystemPrompt } from "./subtypes/make-system-prompt";
+
+export interface EditingApiConfig {
+  makeSystemPrompt: MakeSystemPrompt;
+  fewShotMessages: Message[];
+  forwardedParams: { [key: string]: any } | undefined;
+}
+
+export const defaultEditingMakeSystemPrompt: MakeSystemPrompt = (
+  textareaPurpose,
+  contextString,
+) => {
+  return `You are a versatile writing assistant helping the user edit a portion of their text.
+  
+The user is writing some text.
+The purpose is: \"${textareaPurpose}\"
+
+The following external context is also provided. Use it when relevant.
+\`\`\`
+${contextString}
+\`\`\`
+
+The user has provided you with a PROMPT for EDITING a PORTION of the text. 
+Your job is to come up with a new EDITED version OF THE SEGMENT IN QUESTION - AS BEST YOU CAN.
+Only rewrite the portion of the text that the user has marked as "TextToEdit"!!!
+
+Adjust yourself to the user's style and implied intent.
+
+The conversation will be structured as follows:
+<TextBeforeCursor>
+<TextToEdit>
+<TextAfterCursor>
+<EditingPrompt>
+
+<YourEditSuggestion>
+`;
+};
+
+export const defaultEditingFewShotMessages: Message[] = [
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextBeforeCursor>This morning I woke up and went straight to the grocery store. </TextBeforeCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextToEdit>While I was there I picked up some apples, oranges, and bananas. </TextToEdit>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextAfterCursor>The grocery store was having a sale on fruit, so I decided to stock up.</TextAfterCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content: "<EditingPrompt>I also bought a big watermelon</EditingPrompt>",
+  }),
+  new TextMessage({
+    role: Role.Assistant,
+    content:
+      "While I was there I picked up some apples, oranges, and bananas, and a big watermelon.",
+  }),
+
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextBeforeCursor>Yesterday, I spent the afternoon working on my new project.</TextBeforeCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content: "<TextToEdit>It's quite challenging and requires a lot of focus.</TextToEdit>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextAfterCursor>I'm really excited about the potential outcomes of this project.</TextAfterCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<EditingPrompt>emphasize the complexity and my enthusiasm for the project</EditingPrompt>",
+  }),
+  new TextMessage({
+    role: Role.Assistant,
+    content:
+      "It's a highly complex task that demands intense concentration, but I'm incredibly enthusiastic about the promising prospects of this project.",
+  }),
+];
+
+export const defaultEditingApiConfig: EditingApiConfig = {
+  makeSystemPrompt: defaultEditingMakeSystemPrompt,
+  fewShotMessages: defaultEditingFewShotMessages,
+  forwardedParams: undefined,
+};

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

@@ -0,0 +1,8 @@
+export { defaultAutosuggestionsConfig } from "./autosuggestions-config";
+export type { AutosuggestionsConfig } from "./autosuggestions-config";
+
+export type { MakeSystemPrompt } from "./subtypes/make-system-prompt";
+
+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,87 @@
+import { Message, Role, TextMessage } from "@copilotkit/runtime-client-gql";
+import { MakeSystemPrompt } from "./subtypes/make-system-prompt";
+
+export interface InsertionsApiConfig {
+  makeSystemPrompt: MakeSystemPrompt;
+  fewShotMessages: Message[];
+  forwardedParams: { [key: string]: any } | undefined;
+}
+
+export const defaultInsertionsMakeSystemPrompt: MakeSystemPrompt = (
+  textareaPurpose,
+  contextString,
+) => {
+  return `You are a versatile writing assistant helping the user insert new text into their existing work.
+  
+The user is writing some text.
+The purpose is: \"${textareaPurpose}\"
+
+The following external context is also provided. Use it to inform your suggestions when relevant!!!
+\`\`\`
+${contextString}
+\`\`\`
+
+The user will provide you with a prompt for an INSERTION into the text they are writing. 
+Your job is to come up with an INSERTION into the text that the user would like to use, AS BEST YOU CAN.
+Only insert a SHORT segment. 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.
+The conversation will be structured as follows:
+<TextAfterCursor>
+<TextBeforeCursor>
+<InsertionPrompt>
+
+<YourInsertionSuggestion>
+`;
+};
+
+export const defaultInsertionsFewShotMessages: Message[] = [
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextAfterCursor>While I was there I also picked up some apples, oranges, and bananas.</TextAfterCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextBeforeCursor>This morning I woke up and went straight to the grocery store.</TextBeforeCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content: "<InsertionPrompt>I bought a big watermelon</InsertionPrompt>",
+  }),
+  new TextMessage({
+    role: Role.Assistant,
+    content:
+      "When I arrived I went straight to the produce section and picked out a big watermelon.",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextAfterCursor>and (iii) to the appointment of the Equityholders' Representative pursuant to Section 10.7 of the Merger Agreement and to the provisions thereof.</TextAfterCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      '<TextBeforeCursor>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;</TextBeforeCursor>',
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<InsertionPrompt>add section about the optionholder's pro rata share</InsertionPrompt>",
+  }),
+  new TextMessage({
+    role: 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 = {
+  makeSystemPrompt: defaultInsertionsMakeSystemPrompt,
+  fewShotMessages: defaultInsertionsFewShotMessages,
+  forwardedParams: undefined,
+};

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

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

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

@@ -0,0 +1,76 @@
+import { Message, Role, TextMessage } from "@copilotkit/runtime-client-gql";
+import { MakeSystemPrompt } from "./subtypes/make-system-prompt";
+
+export interface SuggestionsApiConfig {
+  makeSystemPrompt: MakeSystemPrompt;
+  fewShotMessages: Message[];
+  maxTokens?: number;
+  stop?: string[];
+  temperature?: number;
+}
+
+export const defaultSuggestionsMakeSystemPrompt: MakeSystemPrompt = (
+  textareaPurpose,
+  contextString,
+) => {
+  return `You are a versatile writing assistant.
+  
+The user is writing some text.
+The purpose is: \"${textareaPurpose}\"
+
+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.
+
+Adjust yourself to the user's style and implied intent.
+
+The user will provide both the text before and after the cursor. You should use this to infer what the user is likely to write next.
+<TextAfterCursor>
+<TextBeforeCursor>
+<YourSuggestion>
+
+If we need to add a whitespace character to the suggested text, make sure to explicitly add it in.
+Refrain from adding <YourSuggestion> tags when responding
+
+The following external context is also provided. Use it to help you make better suggestions!!!
+\`\`\`
+${contextString}
+\`\`\`
+`;
+};
+
+export const defaultSuggestionsFewShotMessages: Message[] = [
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextAfterCursor>While I was there I also picked up some apples, oranges, and bananas.</TextAfterCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content: "This morning I woke up and went straight to the grocery store.",
+  }),
+  new TextMessage({
+    role: Role.Assistant,
+    content:
+      " When I arrived I went straight to the produce section and picked out a big watermelon. ",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      "<TextAfterCursor>and (iii) to the appointment of the Equityholders' Representative pursuant to Section 10.7 of the Merger Agreement and to the provisions thereof.</TextAfterCursor>",
+  }),
+  new TextMessage({
+    role: Role.User,
+    content:
+      '<TextBeforeCursor>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;</TextBeforeCursor>',
+  }),
+  new TextMessage({
+    role: 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 defaultSuggestionsApiConfig: SuggestionsApiConfig = {
+  makeSystemPrompt: defaultSuggestionsMakeSystemPrompt,
+  fewShotMessages: defaultSuggestionsFewShotMessages,
+};

package/src/types/base/autosuggestion-state.ts

@@ -0,0 +1,6 @@
+import { BasePoint } from "slate";
+
+export interface AutosuggestionState {
+  text: string;
+  point: BasePoint;
+}

package/src/types/base/autosuggestions-bare-function.ts

@@ -0,0 +1,30 @@
+import { DocumentPointer } from "@copilotkit/react-core";
+
+export interface InsertionEditorState {
+  textBeforeCursor: string;
+  textAfterCursor: string;
+}
+
+export interface EditingEditorState extends InsertionEditorState {
+  selectedText: string;
+}
+
+export type AutosuggestionsBareFunction = (
+  editorState: InsertionEditorState,
+  abortSignal: AbortSignal,
+) => Promise<string>;
+
+export type Generator_InsertionOrEditingSuggestion = (
+  editorState: EditingEditorState,
+  prompt: string,
+  documents: DocumentPointer[],
+  abortSignal: AbortSignal,
+) => Promise<ReadableStream<string>>;
+
+export interface InsertionEditorApiConfig {
+  insertionOrEditingFunction: Generator_InsertionOrEditingSuggestion;
+}
+
+export interface BaseCopilotTextareaApiConfig extends InsertionEditorApiConfig {
+  autosuggestionsFunction: AutosuggestionsBareFunction;
+}