@copilotkit/react-textarea 0.5.0

package/dist/types/custom-editor.d.ts

@@ -0,0 +1,29 @@
+import { BaseEditor } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { HistoryEditor } from 'slate-history';
+
+type CustomEditor = BaseEditor & ReactEditor & HistoryEditor;
+type ParagraphElement = {
+    type: "paragraph";
+    children: CustomText[];
+};
+type SuggestionElement = {
+    type: "suggestion";
+    inline: boolean;
+    content: string;
+    children: CustomText[];
+};
+type CustomElement = ParagraphElement | SuggestionElement;
+type SuggestionAwareText = {
+    text: string;
+};
+type CustomText = SuggestionAwareText;
+declare module "slate" {
+    interface CustomTypes {
+        Editor: CustomEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}
+
+export { CustomEditor, CustomElement, CustomText, ParagraphElement, SuggestionAwareText, SuggestionElement };

package/dist/types/custom-editor.mjs

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=custom-editor.mjs.map

package/dist/types/custom-editor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/types/editor-autocomplete-state.d.ts

@@ -0,0 +1,10 @@
+import { BasePoint } from 'slate';
+
+interface EditorAutocompleteState {
+    cursorPoint: BasePoint;
+    textBeforeCursor: string;
+    textAfterCursor: string;
+}
+declare function areEqual_autocompleteState(prev: EditorAutocompleteState, next: EditorAutocompleteState): boolean;
+
+export { EditorAutocompleteState, areEqual_autocompleteState };

package/dist/types/editor-autocomplete-state.mjs

@@ -0,0 +1,5 @@
+export { areEqual_autocompleteState } from '../chunk-4LJAS777.mjs';
+import '../chunk-KGKLUWKW.mjs';
+import '../chunk-MRXNTQOX.mjs';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=editor-autocomplete-state.mjs.map

package/dist/types/editor-autocomplete-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { BaseAutosuggestionsConfig, defaultBaseAutosuggestionsConfig } from './base-autosuggestions-config.js';
+export { AutosuggestionsBareFunction } from './autosuggestions-bare-function.js';

package/dist/types/index.mjs

@@ -0,0 +1,5 @@
+import '../chunk-YPBKY4KY.mjs';
+export { defaultBaseAutosuggestionsConfig } from '../chunk-5SJM4R4K.mjs';
+import '../chunk-MRXNTQOX.mjs';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/types/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@copilotkit/react-textarea",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.5.0",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.mjs",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./styles.css": "./dist/index.css"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.5",
+    "@types/react-syntax-highlighter": "^15.5.7",
+    "eslint": "^7.32.0",
+    "postcss": "^8.4.20",
+    "react": "^18.2.0",
+    "tailwindcss": "^3.3.0",
+    "tsup": "^6.1.3",
+    "typescript": "^4.9.4",
+    "eslint-config-custom": "0.2.0",
+    "tailwind-config": "0.1.0",
+    "tsconfig": "0.3.0"
+  },
+  "dependencies": {
+    "ai": "^2.1.22",
+    "class-variance-authority": "^0.6.1",
+    "clsx": "^1.2.1",
+    "nanoid": "^4.0.2",
+    "next": "^13.4.1",
+    "next-themes": "^0.2.1",
+    "react-dom": "^18.2.0",
+    "slate": "^0.94.1",
+    "slate-history": "^0.93.0",
+    "slate-react": "^0.98.1",
+    "tailwind-merge": "^1.13.2"
+  },
+  "scripts": {
+    "build": "tsup --treeshake",
+    "dev": "tsup --watch --no-splitting",
+    "check-types": "tsc --noEmit",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf .next"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/components/copilot-textarea/base-copilot-textarea/base-copilot-textarea.tsx

@@ -0,0 +1,175 @@
+// This example is for an Editor with `ReactEditor` and `HistoryEditor`
+import {
+  TextareaHTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { Descendant, Editor } from "slate";
+import { Editable, Slate } from "slate-react";
+import { twMerge } from "tailwind-merge";
+import { useAutosuggestions } from "../../../hooks/use-autosuggestions";
+import { AutosuggestionsBareFunction } from "../../../types/autosuggestions-bare-function";
+import { useCopilotTextareaEditor } from "../../../hooks/use-copilot-textarea-editor";
+import {
+  getFullEditorTextWithNewlines,
+  getTextAroundCursor,
+} from "../../../lib/get-text-around-cursor";
+import { addAutocompletionsToEditor } from "../../../lib/slatejs-edits/add-autocompletions";
+import { clearAutocompletionsFromEditor } from "../../../lib/slatejs-edits/clear-autocompletions";
+import { replaceEditorText } from "../../../lib/slatejs-edits/replace-text";
+import { AutosuggestionState } from "../../../types/autosuggestion-state";
+import {
+  BaseAutosuggestionsConfig,
+  defaultBaseAutosuggestionsConfig,
+} from "../../../types/base-autosuggestions-config";
+import { makeRenderElementFunction } from "./render-element";
+import { makeRenderPlaceholderFunction } from "./render-placeholder";
+
+export interface BaseCopilotTextareaProps
+  extends TextareaHTMLAttributes<HTMLDivElement> {
+  placeholderStyle?: React.CSSProperties;
+  suggestionsStyle?: React.CSSProperties;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  autosuggestionsConfig: Partial<BaseAutosuggestionsConfig> & {
+    purposePrompt: string;
+  };
+}
+
+export function BaseCopilotTextarea(
+  props: BaseCopilotTextareaProps & {
+    autosuggestionsFunction: AutosuggestionsBareFunction;
+  }
+): JSX.Element {
+  const autosuggestionsConfig: BaseAutosuggestionsConfig = {
+    ...defaultBaseAutosuggestionsConfig,
+    ...props.autosuggestionsConfig,
+  };
+
+  const valueOnInitialRender = useMemo(() => props.value ?? "", []);
+  const [lastKnownFullEditorText, setLastKnownFullEditorText] =
+    useState(valueOnInitialRender);
+
+  const initialValue: Descendant[] = useMemo(() => {
+    return [
+      {
+        type: "paragraph",
+        children: [{ text: valueOnInitialRender }],
+      },
+    ];
+  }, [valueOnInitialRender]);
+
+  const editor = useCopilotTextareaEditor();
+
+  const insertText = useCallback(
+    (autosuggestion: AutosuggestionState) => {
+      Editor.insertText(editor, autosuggestion.text, {
+        at: autosuggestion.point,
+      });
+    },
+    [editor]
+  );
+
+  const {
+    currentAutocompleteSuggestion,
+    onChangeHandler: onChangeHandlerForAutocomplete,
+    onKeyDownHandler: onKeyDownHandlerForAutocomplete,
+  } = useAutosuggestions(
+    autosuggestionsConfig.debounceTime,
+    autosuggestionsConfig.acceptAutosuggestionKey,
+    props.autosuggestionsFunction,
+    insertText,
+    autosuggestionsConfig.disableWhenEmpty
+  );
+
+  // sync autosuggestions state with the editor
+  useEffect(() => {
+    clearAutocompletionsFromEditor(editor);
+    if (currentAutocompleteSuggestion) {
+      addAutocompletionsToEditor(
+        editor,
+        currentAutocompleteSuggestion.text,
+        currentAutocompleteSuggestion.point
+      );
+    }
+  }, [currentAutocompleteSuggestion]);
+
+  const renderElementMemoized = useMemo(() => {
+    const suggestionStyleAugmented: React.CSSProperties = {
+      ...props.suggestionsStyle,
+    };
+
+    return makeRenderElementFunction(suggestionStyleAugmented);
+  }, [props.suggestionsStyle]);
+
+  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]);
+
+  // update the editor text, but only when the value changes from outside the component
+  useEffect(() => {
+    if (props.value === lastKnownFullEditorText) {
+      return;
+    }
+
+    setLastKnownFullEditorText(props.value ?? "");
+    replaceEditorText(editor, props.value ?? "");
+  }, [props.value]);
+
+  // separate into TextareaHTMLAttributes<HTMLDivElement> and CopilotTextareaProps
+  const {
+    placeholderStyle,
+    value,
+    onValueChange,
+    autosuggestionsConfig: autosuggestionsConfigFromProps,
+    autosuggestionsFunction,
+    className,
+    ...propsToForward
+  } = props;
+
+  const moddedClassName = (() => {
+    const baseClassName = "copilot-textarea";
+    const defaultTailwindClassName = "bg-white overflow-y-auto resize-y";
+    const mergedClassName = twMerge(defaultTailwindClassName, className ?? "");
+    return `${baseClassName} ${mergedClassName}`;
+  })();
+
+  return (
+    // Add the editable component inside the context.
+    <Slate
+      editor={editor}
+      initialValue={initialValue}
+      onChange={(value) => {
+        const newEditorState = getTextAroundCursor(editor);
+
+        const fullEditorText = newEditorState
+          ? newEditorState.textBeforeCursor + newEditorState.textAfterCursor
+          : getFullEditorTextWithNewlines(editor); // we don't double-parse the editor. When `newEditorState` is null, we didn't parse the editor yet.
+
+        setLastKnownFullEditorText(fullEditorText);
+        onChangeHandlerForAutocomplete(newEditorState);
+        props.onValueChange?.(fullEditorText);
+      }}
+    >
+      <Editable
+        renderElement={renderElementMemoized}
+        renderPlaceholder={renderPlaceholderMemoized}
+        onKeyDown={onKeyDownHandlerForAutocomplete}
+        className={moddedClassName}
+        {...propsToForward}
+      />
+    </Slate>
+  );
+}

package/src/components/copilot-textarea/base-copilot-textarea/render-element.tsx

@@ -0,0 +1,42 @@
+import { RenderElementProps } from "slate-react";
+
+export type RenderElementFunction = (props: RenderElementProps) => JSX.Element;
+
+export function makeRenderElementFunction(
+  suggestionsStyle: React.CSSProperties
+): RenderElementFunction {
+  return (props: RenderElementProps) => {
+    switch (props.element.type) {
+      case "paragraph":
+        return <DefaultElement {...props} />;
+      case "suggestion":
+        return (
+          <SuggestionElement {...props} suggestionsStyle={suggestionsStyle} />
+        );
+    }
+  };
+}
+
+const DefaultElement = (props: RenderElementProps) => {
+  return <div {...props.attributes}>{props.children}</div>;
+};
+const SuggestionElement = (
+  props: RenderElementProps & {
+    suggestionsStyle: React.CSSProperties;
+  }
+) => {
+  return (
+    <span
+      {...props.attributes}
+      style={{
+        fontStyle: "italic",
+        color: "gray",
+        ...props.suggestionsStyle,
+      }}
+      contentEditable={false}
+    >
+      {props.children /* https://github.com/ianstormtaylor/slate/issues/3930 */}
+      {props.element.type === "suggestion" && props.element.content}
+    </span>
+  );
+};

package/src/components/copilot-textarea/base-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>
+    );
+  };
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { BaseCopilotTextarea } from "./copilot-textarea/base-copilot-textarea/base-copilot-textarea";
+export type { BaseCopilotTextareaProps } from "./copilot-textarea/base-copilot-textarea/base-copilot-textarea";

package/src/context/index.ts

@@ -0,0 +1 @@
+export {};

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export {};

package/src/hooks/use-autosuggestions.ts

@@ -0,0 +1,129 @@
+import { useCallback, useMemo, useState } from "react";
+import { Debouncer } from "../lib/debouncer";
+import { nullableCompatibleEqualityCheck } from "../lib/utils";
+import { AutosuggestionState } from "../types/autosuggestion-state";
+import {
+  EditorAutocompleteState,
+  areEqual_autocompleteState,
+} from "../types/editor-autocomplete-state";
+import { AutosuggestionsBareFunction } from "../types/autosuggestions-bare-function";
+
+export interface UseAutosuggestionsResult {
+  currentAutocompleteSuggestion: AutosuggestionState | null;
+  onChangeHandler: (newEditorState: EditorAutocompleteState | null) => void;
+  onKeyDownHandler: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+}
+
+export function useAutosuggestions(
+  debounceTime: number,
+  acceptAutosuggestionKey: string,
+  autosuggestionFunction: AutosuggestionsBareFunction,
+  insertAutocompleteSuggestion: (suggestion: AutosuggestionState) => void,
+  disableWhenEmpty: boolean
+): UseAutosuggestionsResult {
+  const [previousAutocompleteState, setPreviousAutocompleteState] =
+    useState<EditorAutocompleteState | null>(null);
+
+  const [currentAutocompleteSuggestion, setCurrentAutocompleteSuggestion] =
+    useState<AutosuggestionState | null>(null);
+
+  const awaitForAndAppendSuggestion: (
+    editorAutocompleteState: EditorAutocompleteState,
+    abortSignal: AbortSignal
+  ) => Promise<void> = useCallback(
+    async (
+      editorAutocompleteState: EditorAutocompleteState,
+      abortSignal: AbortSignal
+    ) => {
+      if (
+        disableWhenEmpty &&
+        editorAutocompleteState.textBeforeCursor === "" &&
+        editorAutocompleteState.textAfterCursor === ""
+      ) {
+        return;
+      }
+
+      const suggestion = await autosuggestionFunction(
+        editorAutocompleteState.textBeforeCursor,
+        editorAutocompleteState.textAfterCursor,
+        abortSignal
+      );
+
+      // We'll assume for now that the autocomplete function might or might not respect the abort signal.
+      if (!suggestion || abortSignal.aborted) {
+        throw new DOMException("Aborted", "AbortError");
+      }
+
+      setCurrentAutocompleteSuggestion({
+        text: suggestion,
+        point: editorAutocompleteState.cursorPoint,
+      });
+    },
+    [autosuggestionFunction, setCurrentAutocompleteSuggestion, disableWhenEmpty]
+  );
+
+  const debouncedFunction = useMemo(
+    () =>
+      new Debouncer<[editorAutocompleteState: EditorAutocompleteState]>(
+        debounceTime
+      ),
+    [debounceTime]
+  );
+
+  const onChange = useCallback(
+    (newEditorState: EditorAutocompleteState | null) => {
+      const editorStateHasChanged = !nullableCompatibleEqualityCheck(
+        areEqual_autocompleteState,
+        previousAutocompleteState,
+        newEditorState
+      );
+      setPreviousAutocompleteState(newEditorState);
+
+      // if no change, do nothing
+      if (!editorStateHasChanged) {
+        return;
+      }
+
+      // if change, then first null out the current suggestion
+      setCurrentAutocompleteSuggestion(null);
+
+      // then try to get a new suggestion, debouncing to avoid too many requests while typing
+      if (newEditorState) {
+        debouncedFunction.debounce(awaitForAndAppendSuggestion, newEditorState);
+      } else {
+        debouncedFunction.cancel();
+      }
+    },
+    [
+      previousAutocompleteState,
+      setPreviousAutocompleteState,
+      debouncedFunction,
+      awaitForAndAppendSuggestion,
+      setCurrentAutocompleteSuggestion,
+    ]
+  );
+
+  const keyDownHandler = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (currentAutocompleteSuggestion) {
+        if (event.key === acceptAutosuggestionKey) {
+          event.preventDefault();
+          insertAutocompleteSuggestion(currentAutocompleteSuggestion);
+          setCurrentAutocompleteSuggestion(null);
+        }
+      }
+    },
+    [
+      currentAutocompleteSuggestion,
+      setCurrentAutocompleteSuggestion,
+      insertAutocompleteSuggestion,
+      acceptAutosuggestionKey,
+    ]
+  );
+
+  return {
+    currentAutocompleteSuggestion,
+    onChangeHandler: onChange,
+    onKeyDownHandler: keyDownHandler,
+  };
+}

package/src/hooks/use-copilot-textarea-editor.tsx

@@ -0,0 +1,104 @@
+import { createEditor, Element } from "slate";
+import { withReact } from "slate-react";
+import { useMemo } from "react";
+import { CustomEditor } from "../types/custom-editor";
+import {
+  withPartialHistory,
+  ShouldSaveToHistory,
+  defaultShouldSave,
+} from "../lib/slatejs-edits/with-partial-history";
+
+const shouldSave: ShouldSaveToHistory = (op, prev) => {
+  const excludedNodeType = "suggestion";
+  // Check if the operation involves the suggestion inline node type
+  if (
+    op.type === "insert_node" &&
+    Element.isElement(op.node) &&
+    op.node.type === excludedNodeType
+  ) {
+    return false;
+  }
+
+  if (
+    op.type === "remove_node" &&
+    Element.isElement(op.node) &&
+    op.node.type === excludedNodeType
+  ) {
+    return false;
+  }
+
+  if (
+    op.type === "set_node" &&
+    "type" in op.newProperties &&
+    op.newProperties.type === excludedNodeType
+  ) {
+    return false;
+  }
+
+  if (
+    op.type == "set_node" &&
+    "type" in op.properties &&
+    op.properties.type === excludedNodeType
+  ) {
+    return false;
+  }
+
+  if (
+    op.type === "merge_node" &&
+    "type" in op.properties &&
+    op.properties.type === excludedNodeType
+  ) {
+    return false;
+  }
+
+  if (
+    op.type === "split_node" &&
+    "type" in op.properties &&
+    op.properties.type === excludedNodeType
+  ) {
+    return false;
+  }
+
+  // Otherwise, save the operation to history
+  return defaultShouldSave(op, prev);
+};
+
+export function useCopilotTextareaEditor(): CustomEditor {
+  const editor = useMemo(() => {
+    const editor = withPartialHistory(withReact(createEditor()), shouldSave);
+
+    const { isVoid } = editor;
+    editor.isVoid = (element) => {
+      switch (element.type) {
+        case "suggestion":
+          return true;
+        default:
+          return isVoid(element);
+      }
+    };
+
+    const { markableVoid } = editor;
+    editor.markableVoid = (element) => {
+      switch (element.type) {
+        case "suggestion":
+          return true;
+        default:
+          return markableVoid(element);
+      }
+    };
+
+    const { isInline } = editor;
+    editor.isInline = (element) => {
+      switch (element.type) {
+        case "suggestion":
+          return element.inline;
+        default:
+          return isInline(element);
+      }
+    };
+
+    return editor;
+  }, []);
+
+  return editor;
+}

package/src/index.tsx

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

package/src/lib/debouncer.ts

@@ -0,0 +1,38 @@
+export type AsyncFunction<T extends any[]> = (
+  ...args: [...T, AbortSignal]
+) => Promise<void>;
+
+export class Debouncer<T extends any[]> {
+  private timeoutId?: number;
+  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;
+    }
+  };
+}