@copilotkit/react-textarea 0.0.0-0.0.0-max-changeset-10101010101010-20260109191632

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

@@ -0,0 +1,128 @@
+import { BaseCopilotTextareaApiConfig } from "./autosuggestions-bare-function";
+import { defaultCopilotContextCategories } from "@copilotkit/react-core";
+import { isMacOS } from "@copilotkit/shared";
+
+/**
+ * @interface BaseAutosuggestionsConfig
+ *
+ * @property {string} textareaPurpose - The purpose of the textarea. This is used to guide the autosuggestions.
+ *
+ * @property {string[]} contextCategories - The categories of context to consider when providing autosuggestions.
+ *
+ * @property {number} debounceTime - The amount of time (in milliseconds) to wait before triggering autosuggestions after the user has stopped typing.
+ *
+ * @property {BaseCopilotTextareaApiConfig} apiConfig - The configuration for the API that provides the autosuggestions.
+ *
+ * @property {boolean} disableWhenEmpty - Whether to disable autosuggestions when the textarea is empty.
+ *
+ * @property {boolean} disabled - Whether to disable autosuggestions entirely.
+ *
+ * @property {boolean} temporarilyDisableWhenMovingCursorWithoutChangingText - Whether to temporarily disable autosuggestions when the user moves the cursor without changing the text.
+ *
+ * @property {boolean} temporarilyDisableNotTrustedEvents - Temporarily disable autosuggestions after change event from non-trusted sources (like text insertion from autocomplete plugins)
+ *
+ * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldAcceptAutosuggestionOnKeyPress - A function that determines whether to accept the current autosuggestion based on a key press event. By default, the Tab key is used to accept the autosuggestion. Example code:
+ *
+ * ```typescript
+ * const defaultShouldAcceptAutosuggestionOnKeyPress =  (event: React.KeyboardEvent<HTMLDivElement>) => {
+ *   // if tab, accept the autosuggestion
+ *   if (event.key === "Tab") {
+ *     return true;
+ *   }
+ *   return false;
+ * }
+ * ```
+ *
+ * @property {(event: React.TouchEvent<HTMLDivElement>) => boolean} shouldAcceptAutosuggestionOnTouch - A function that determines whether to accept the current autosuggestion based on a mobile touch event. By default, the touching the end of a suggestion will accept it. Example code:
+ *
+ * ```typescript
+ * const shouldAcceptAutosuggestionOnTouch =  (event: React.TouchEvent<HTMLDivElement>) => {
+ *   // if tab, accept the autosuggestion
+ *   if (event.type === "touchstart") {
+ *     return true;
+ *   }
+ *   return false;
+ * }
+ * ```
+ *
+ * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldToggleHoveringEditorOnKeyPress - A function that determines whether to toggle the hovering editor based on a key press event. By default, the Command + K key combination is used to toggle the hovering editor. Example code:
+ *
+ * ```typescript
+ * const defaultShouldToggleHoveringEditorOnKeyPress =  (event: React.KeyboardEvent<HTMLDivElement>) => {
+ *   // if command-k, toggle the hovering editor
+ *   if (event.key === "k" && event.metaKey) {
+ *     return true;
+ *   }
+ *   return false;
+ * }
+ * ```
+ */
+export interface BaseAutosuggestionsConfig {
+  textareaPurpose: string;
+  contextCategories: string[];
+  debounceTime: number;
+  apiConfig: BaseCopilotTextareaApiConfig;
+
+  disableWhenEmpty: boolean;
+  disabled: boolean;
+  temporarilyDisableWhenMovingCursorWithoutChangingText: boolean;
+  temporarilyDisableNotTrustedEvents: boolean;
+  shouldAcceptAutosuggestionOnKeyPress: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;
+  shouldAcceptAutosuggestionOnTouch: (event: React.TouchEvent<HTMLDivElement>) => boolean;
+  shouldToggleHoveringEditorOnKeyPress: (
+    event: React.KeyboardEvent<HTMLDivElement>,
+    shortcut: string,
+  ) => boolean;
+}
+
+// by default, command-k toggles the hovering editor
+const defaultShouldToggleHoveringEditorOnKeyPress = (
+  event: React.KeyboardEvent<HTMLDivElement>,
+  shortcut: string,
+) => {
+  const isMetaKey = isMacOS() ? event.metaKey : event.ctrlKey;
+
+  // if command-k, toggle the hovering editor
+  return event.key === shortcut && isMetaKey;
+};
+
+const defaultShouldAcceptAutosuggestionOnKeyPress = (
+  event: React.KeyboardEvent<HTMLDivElement>,
+) => {
+  // if tab, accept the autosuggestion
+  if (event.key === "Tab") {
+    return true;
+  }
+  return false;
+};
+
+const defaultShouldAcceptAutosuggestionOnTouch = () => false;
+
+/**
+ * Default configuration for the BaseAutosuggestions.
+ *
+ * @property {number} debounceTime - The amount of time to wait before triggering the autosuggestions API call.
+ * @property {string[]} contextCategories - The categories to use for context when making the autosuggestions API call.
+ * @property {boolean} disableWhenEmpty - Whether to disable the autosuggestions when the textarea is empty.
+ * @property {boolean} disabled - Whether to disable the autosuggestions feature entirely.
+ * @property {boolean} temporarilyDisableWhenMovingCursorWithoutChangingText - Whether to temporarily disable the autosuggestions when the cursor is moved without changing the text.
+ * @property {boolean} temporarilyDisableNotTrustedEvents - Temporarily disable the autosuggestions after change event from non-trusted sources (like text insertion from autocomplete plugins)
+ * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldToggleHoveringEditorOnKeyPress - A function that determines whether to toggle the hovering editor based on a key press event.
+ * @property {(event: React.KeyboardEvent<HTMLDivElement>) => boolean} shouldAcceptAutosuggestionOnKeyPress - A function that determines whether to accept the autosuggestion based on a key press event.
+ * @property {() => boolean} defaultShouldAcceptAutosuggestionOnTouch - A function that determines whether to accept the autosuggestion based on a mobile touch event.
+ */
+
+export const defaultBaseAutosuggestionsConfig: Omit<
+  BaseAutosuggestionsConfig,
+  "textareaPurpose" | "apiConfig"
+> = {
+  debounceTime: 250,
+  contextCategories: defaultCopilotContextCategories,
+  disableWhenEmpty: true,
+  disabled: false,
+  temporarilyDisableWhenMovingCursorWithoutChangingText: true,
+  temporarilyDisableNotTrustedEvents: true,
+  shouldToggleHoveringEditorOnKeyPress: defaultShouldToggleHoveringEditorOnKeyPress,
+  shouldAcceptAutosuggestionOnKeyPress: defaultShouldAcceptAutosuggestionOnKeyPress,
+  shouldAcceptAutosuggestionOnTouch: defaultShouldAcceptAutosuggestionOnTouch,
+};

package/src/types/base/base-copilot-textarea-props.tsx

@@ -0,0 +1,58 @@
+import { TextareaHTMLAttributes } from "react";
+import { BaseAutosuggestionsConfig } from ".";
+import { BaseCopilotTextareaApiConfig } from "./autosuggestions-bare-function";
+
+/**
+ * `BaseCopilotTextareaProps` defines the properties for the `BaseCopilotTextarea` component.
+ */
+export interface BaseCopilotTextareaProps
+  extends Omit<TextareaHTMLAttributes<HTMLDivElement>, "onChange"> {
+  /**
+   * Determines whether the CopilotKit branding should be disabled. Default is `false`.
+   */
+  disableBranding?: boolean;
+
+  /**
+   * Specifies the CSS styles to apply to the placeholder text.
+   */
+  placeholderStyle?: React.CSSProperties;
+
+  /**
+   * Specifies the CSS styles to apply to the suggestions list.
+   */
+  suggestionsStyle?: React.CSSProperties;
+
+  /**
+   * A class name to apply to the editor popover window.
+   */
+  hoverMenuClassname?: string;
+
+  /**
+   * The initial value of the textarea. Can be controlled via `onValueChange`.
+   */
+  value?: string;
+
+  /**
+   * Callback invoked when the value of the textarea changes.
+   */
+  onValueChange?: (value: string) => void;
+
+  /**
+   * Callback invoked when a `change` event is triggered on the textarea element.
+   */
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+
+  /**
+   * The shortcut to use to open the editor popover window. Default is `"Cmd-k"`.
+   */
+  shortcut?: string;
+
+  /**
+   * Configuration settings for the autosuggestions feature.
+   * Includes a mandatory `textareaPurpose` to guide the autosuggestions.
+   */
+  baseAutosuggestionsConfig: Partial<BaseAutosuggestionsConfig> & {
+    textareaPurpose: string;
+    apiConfig: BaseCopilotTextareaApiConfig;
+  };
+}

package/src/types/base/custom-editor.tsx

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

package/src/types/base/editor-autocomplete-state.ts

@@ -0,0 +1,20 @@
+import { BasePoint } from "slate";
+import { arraysAreEqual } from "../../lib/utils";
+
+export interface EditorAutocompleteState {
+  cursorPoint: BasePoint;
+  textBeforeCursor: string;
+  textAfterCursor: string;
+}
+
+export function areEqual_autocompleteState(
+  prev: EditorAutocompleteState,
+  next: EditorAutocompleteState,
+) {
+  return (
+    prev.cursorPoint.offset === next.cursorPoint.offset &&
+    arraysAreEqual(prev.cursorPoint.path, next.cursorPoint.path) &&
+    prev.textBeforeCursor === next.textBeforeCursor &&
+    prev.textAfterCursor === next.textAfterCursor
+  );
+}

package/src/types/base/index.ts

@@ -0,0 +1,6 @@
+export { defaultBaseAutosuggestionsConfig } from "./base-autosuggestions-config";
+
+export type { AutosuggestionsBareFunction } from "./autosuggestions-bare-function";
+export type { BaseAutosuggestionsConfig } from "./base-autosuggestions-config";
+
+export type { BaseCopilotTextareaProps } from "./base-copilot-textarea-props";

package/src/types/html-copilot-textarea-element.ts

@@ -0,0 +1,5 @@
+export interface HTMLCopilotTextAreaElement extends HTMLElement {
+  value: string;
+  focus: () => void;
+  blur: () => void;
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from "./base";
+export * from "./html-copilot-textarea-element";
+export * from "./autosuggestions-config";

package/tailwind.config.js

@@ -0,0 +1,9 @@
+const sharedConfig = require("tailwind-config/tailwind.config.js");
+
+module.exports = {
+  // prefix ui lib classes to avoid conflicting with the app
+  // prefix: "ui-",
+  mode: "jit",
+  presets: [sharedConfig],
+  purge: sharedConfig.content, // Use the 'content' from the shared config for purging
+};

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../utilities/tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": [
+    "dist",
+    "build",
+    "node_modules",
+    "**/*.test.ts",  // Exclude TypeScript test files
+    "**/*.test.tsx", // Exclude TypeScript React test files
+    "**/__tests__/*" // Exclude any files inside a __tests__ directory
+  ]
+}

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/**/*.{ts,tsx}", "!src/**/*.test.{ts,tsx}", "!src/**/__tests__/**/*"],
+  format: ["esm", "cjs"],
+  dts: true,
+  minify: false,
+  external: ["react"],
+  sourcemap: true,
+  ...options,
+}));

package/typedoc.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["../../typedoc.base.json"],
+  "entryPoints": ["src/index.tsx"]
+}