@copilotkit/react-textarea 0.24.0 → 0.26.0-alpha.0

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

@@ -13,10 +13,7 @@ export function clearAutocompletionsFromEditor(editor: CustomEditor) {
     try {
       Transforms.removeNodes(editor, { at: path });
     } catch (e) {
-      console.log(
-        "CopilotTextarea.clearAutocompletionsFromEditor: error removing node",
-        e
-      );
+      console.log("CopilotTextarea.clearAutocompletionsFromEditor: error removing node", e);
     }
   }
 }

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

@@ -22,7 +22,7 @@ export function replaceEditorText(editor: Editor, newText: string) {
       ],
       {
         at: [0],
-      }
+      },
     );
   }
 }

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

@@ -3,14 +3,11 @@ 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 type ShouldSaveToHistory = (op: Operation, prev: Operation | undefined) => boolean;
 
 export const withPartialHistory = <T extends Editor>(
   editor: T,
-  shouldSave: ShouldSaveToHistory
+  shouldSave: ShouldSaveToHistory,
 ) => {
   const e = editor as T & HistoryEditor;
   const { apply } = e;
@@ -69,8 +66,7 @@ export const withPartialHistory = <T extends Editor>(
     const { operations, history } = e;
     const { undos } = history;
     const lastBatch = undos[undos.length - 1];
-    const lastOp =
-      lastBatch && lastBatch.operations[lastBatch.operations.length - 1];
+    const lastOp = lastBatch && lastBatch.operations[lastBatch.operations.length - 1];
     let save = HistoryEditor.isSaving(e);
     let merge = HistoryEditor.isMerging(e);
 
@@ -144,10 +140,7 @@ const shouldMerge = (op: Operation, prev: Operation | undefined): boolean => {
   return false;
 };
 
-export const defaultShouldSave = (
-  op: Operation,
-  prev: Operation | undefined
-): boolean => {
+export const defaultShouldSave = (op: Operation, prev: Operation | undefined): boolean => {
   if (op.type === "set_selection") {
     return false;
   }

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

@@ -8,9 +8,7 @@
  * @returns {ReadableStream<A>} - The flattened stream.
  */
 
-export function streamPromiseFlatten<A>(
-  promise: Promise<ReadableStream<A>>
-): ReadableStream<A> {
+export function streamPromiseFlatten<A>(promise: Promise<ReadableStream<A>>): ReadableStream<A> {
   return new ReadableStream<A>({
     async start(controller) {
       try {

package/src/lib/utils.ts

@@ -8,13 +8,10 @@ export function cn(...inputs: ClassValue[]) {
 
 export const nanoid = customAlphabet(
   "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
-  7
+  7,
 ); // 7-character random string
 
-export async function fetcher<JSON = any>(
-  input: RequestInfo,
-  init?: RequestInit
-): Promise<JSON> {
+export async function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON> {
   const res = await fetch(input, init);
 
   if (!res.ok) {
@@ -43,13 +40,12 @@ export function formatDate(input: string | number | Date): string {
 }
 
 export const arraysAreEqual = (arr1: number[], arr2: number[]): boolean =>
-  arr1.length === arr2.length &&
-  arr1.every((value, index) => value === arr2[index]);
+  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
+  b: T | null | undefined,
 ): boolean {
   if (a === null || a === undefined || b === null || b === undefined) {
     return a === b;

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

@@ -3,18 +3,14 @@ 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> {}
+export interface SuggestionsApiConfigUserSpecified extends Partial<SuggestionsApiConfig> {}
 
 // Mostly mirrors a partial InsertionsApiConfig, but with some fields MANDATORY.
-export interface InsertionsApiConfigUserSpecified
-  extends Partial<InsertionsApiConfig> {}
+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">
-  > {
+  extends Partial<Omit<AutosuggestionsConfig, "chatApiConfigs" | "textareaPurpose">> {
   textareaPurpose: string; // the user MUST specify textareaPurpose - it's not optional
   chatApiConfigs: {
     suggestionsApiConfig?: SuggestionsApiConfigUserSpecified;

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

@@ -1,27 +1,14 @@
-import {
-  BaseAutosuggestionsConfig,
-  defaultBaseAutosuggestionsConfig,
-} from "../base";
-import {
-  SuggestionsApiConfig,
-  defaultSuggestionsApiConfig,
-} from "./suggestions-api-config";
-import {
-  InsertionsApiConfig,
-  defaultInsertionsApiConfig,
-} from "./insertions-api-config";
+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";
+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"> {
+export interface AutosuggestionsConfig extends Omit<BaseAutosuggestionsConfig, "apiConfig"> {
   contextCategories: string[];
   chatApiConfigs: {
     suggestionsApiConfig: SuggestionsApiConfig;

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

@@ -9,7 +9,7 @@ export interface EditingApiConfig {
 
 export const defaultEditingMakeSystemPrompt: MakeSystemPrompt = (
   textareaPurpose,
-  contextString
+  contextString,
 ) => {
   return `You are a versatile writing assistant.
   
@@ -45,14 +45,12 @@ export const defaultEditingFewShotMessages: MinimalChatGPTMessage[] = [
   {
     role: "user",
     name: "TextToEdit",
-    content:
-      "While I was there I also picked up some apples, oranges, and bananas. ",
+    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.",
+    content: "The grocery store was having a sale on fruit, so I decided to stock up.",
   },
   {
     role: "user",

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

@@ -9,7 +9,7 @@ export interface InsertionsApiConfig {
 
 export const defaultInsertionsMakeSystemPrompt: MakeSystemPrompt = (
   textareaPurpose,
-  contextString
+  contextString,
 ) => {
   return `You are a versatile writing assistant.
   
@@ -39,8 +39,7 @@ export const defaultInsertionsFewShotMessages: MinimalChatGPTMessage[] = [
   {
     role: "user",
     name: "TextAfterCursor",
-    content:
-      "While I was there I also picked up some apples, oranges, and bananas.",
+    content: "While I was there I also picked up some apples, oranges, and bananas.",
   },
   {
     role: "user",

package/src/types/autosuggestions-config/subtypes/chatlike-api-endpoint.tsx

@@ -1,19 +1,16 @@
-import {
-  CopilotApiConfig,
-  copilotApiConfigExtrapolator,
-} from "@copilotkit/react-core";
+import { CopilotApiConfig, copilotApiConfigExtrapolator } from "@copilotkit/react-core";
 import { MinimalChatGPTMessage } from "./minimal-chat-gpt-message";
 
 export type ChatlikeApiEndpointImpl = (
   abortSignal: AbortSignal,
   messages: MinimalChatGPTMessage[],
-  forwardedProps?: { [key: string]: any }
+  forwardedProps?: { [key: string]: any },
 ) => Promise<string>;
 
 export type StreamingChatlikeApiEndpointImpl = (
   abortSignal: AbortSignal,
   messages: MinimalChatGPTMessage[],
-  forwardedProps?: { [key: string]: any }
+  forwardedProps?: { [key: string]: any },
 ) => Promise<ReadableStream<string>>;
 
 export class ChatlikeApiEndpoint {
@@ -28,30 +25,25 @@ export class ChatlikeApiEndpoint {
    * @param apiEndpoint The URL of the OpenAI-compatible API endpoint.
    * @returns A new instance of ChatlikeApiEndpoint.
    */
-  static fromCopilotApiConfig(
-    copilotApiConfig: CopilotApiConfig
-  ): ChatlikeApiEndpoint {
+  static fromCopilotApiConfig(copilotApiConfig: CopilotApiConfig): ChatlikeApiEndpoint {
     return new ChatlikeApiEndpoint(
       async (
         abortSignal: AbortSignal,
         messages: MinimalChatGPTMessage[],
-        forwardedProps?: { [key: string]: any }
+        forwardedProps?: { [key: string]: any },
       ) => {
-        const res = await fetch(
-          copilotApiConfigExtrapolator(copilotApiConfig).chatApiEndpoint,
-          {
-            method: "POST",
-            headers: {
-              ...copilotApiConfig.headers,
-            },
-            body: JSON.stringify({
-              ...forwardedProps,
-              ...copilotApiConfig.body,
-              messages: messages,
-            }),
-            signal: abortSignal,
-          }
-        );
+        const res = await fetch(copilotApiConfigExtrapolator(copilotApiConfig).chatApiEndpoint, {
+          method: "POST",
+          headers: {
+            ...copilotApiConfig.headers,
+          },
+          body: JSON.stringify({
+            ...forwardedProps,
+            ...copilotApiConfig.body,
+            messages: messages,
+          }),
+          signal: abortSignal,
+        });
 
         const bodySteram: ReadableStream<Uint8Array> | null = res.body;
         if (!bodySteram) {
@@ -62,7 +54,7 @@ export class ChatlikeApiEndpoint {
         const stringStream = bodySteram.pipeThrough(new TextDecoderStream());
 
         return stringStream;
-      }
+      },
     );
   }
 

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

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

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

@@ -9,7 +9,7 @@ export interface SuggestionsApiConfig {
 
 export const defaultSuggestionsMakeSystemPrompt: MakeSystemPrompt = (
   textareaPurpose,
-  contextString
+  contextString,
 ) => {
   return `You are a versatile writing assistant.
   
@@ -39,8 +39,7 @@ export const defaultSuggestionsFewShotMessages: MinimalChatGPTMessage[] = [
   {
     role: "user",
     name: "TextAfterCursor",
-    content:
-      "While I was there I also picked up some apples, oranges, and bananas.",
+    content: "While I was there I also picked up some apples, oranges, and bananas.",
   },
   {
     role: "user",

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

@@ -11,14 +11,14 @@ export interface EditingEditorState extends InsertionEditorState {
 
 export type AutosuggestionsBareFunction = (
   editorState: InsertionEditorState,
-  abortSignal: AbortSignal
+  abortSignal: AbortSignal,
 ) => Promise<string>;
 
 export type Generator_InsertionOrEditingSuggestion = (
   editorState: EditingEditorState,
   prompt: string,
   documents: DocumentPointer[],
-  abortSignal: AbortSignal
+  abortSignal: AbortSignal,
 ) => Promise<ReadableStream<string>>;
 
 export interface InsertionEditorApiConfig {

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

@@ -1,25 +1,102 @@
 import { BaseCopilotTextareaApiConfig } from "./autosuggestions-bare-function";
 import { defaultCopilotContextCategories } from "@copilotkit/react-core";
 
+/**
+ * @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 {(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.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;
-  acceptAutosuggestionKey: string;
+  apiConfig: BaseCopilotTextareaApiConfig;
+
   disableWhenEmpty: boolean;
   disabled: boolean;
   temporarilyDisableWhenMovingCursorWithoutChangingText: boolean;
-  apiConfig: BaseCopilotTextareaApiConfig;
+  shouldAcceptAutosuggestionOnKeyPress: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;
+  shouldToggleHoveringEditorOnKeyPress: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;
 }
 
+// by default, command-k toggles the hovering editor
+const defaultShouldToggleHoveringEditorOnKeyPress = (
+  event: React.KeyboardEvent<HTMLDivElement>,
+) => {
+  // if command-k, toggle the hovering editor
+  if (event.key === "k" && event.metaKey) {
+    return true;
+  }
+  return false;
+};
+
+const defaultShouldAcceptAutosuggestionOnKeyPress = (
+  event: React.KeyboardEvent<HTMLDivElement>,
+) => {
+  // if tab, accept the autosuggestion
+  if (event.key === "Tab") {
+    return true;
+  }
+  return 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 {(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.
+ */
+
 export const defaultBaseAutosuggestionsConfig: Omit<
   BaseAutosuggestionsConfig,
   "textareaPurpose" | "apiConfig"
 > = {
   debounceTime: 250,
   contextCategories: defaultCopilotContextCategories,
-  acceptAutosuggestionKey: "Tab",
   disableWhenEmpty: true,
   disabled: false,
   temporarilyDisableWhenMovingCursorWithoutChangingText: true,
+  shouldToggleHoveringEditorOnKeyPress: defaultShouldToggleHoveringEditorOnKeyPress,
+  shouldAcceptAutosuggestionOnKeyPress: defaultShouldAcceptAutosuggestionOnKeyPress,
 };

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

@@ -9,7 +9,7 @@ export interface EditorAutocompleteState {
 
 export function areEqual_autocompleteState(
   prev: EditorAutocompleteState,
-  next: EditorAutocompleteState
+  next: EditorAutocompleteState,
 ) {
   return (
     prev.cursorPoint.offset === next.cursorPoint.offset &&

package/dist/chunk-2NURR2DX.mjs

@@ -1,47 +0,0 @@
-import { cn } from './chunk-KGKLUWKW.mjs';
-import { __objRest, __spreadValues } from './chunk-MRXNTQOX.mjs';
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import { jsx } from 'react/jsx-runtime';
-
-var buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(Comp, __spreadValues({
-      className: cn(buttonVariants({ variant, size, className })),
-      ref
-    }, props));
-  }
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-2NURR2DX.mjs.map

package/dist/chunk-2NURR2DX.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/ui/button.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,WAA8B;AA2CjC;AAvCN,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAQA,IAAM,SAAe;AAAA,EACnB,CAAC,IAAyD,QAAQ;AAAjE,iBAAE,aAAW,SAAS,MAAM,UAAU,MA1CzC,IA0CG,IAAgD,kBAAhD,IAAgD,CAA9C,aAAW,WAAS,QAAM;AAC3B,UAAM,OAAO,UAAU,OAAO;AAC9B,WACE,oBAAC;AAAA,MACC,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MAC1D;AAAA,OACI,MACN;AAAA,EAEJ;AACF;AACA,OAAO,cAAc","sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n"]}

package/dist/chunk-3L6CNVCE.mjs

@@ -1,108 +0,0 @@
-import { HoveringInsertionPromptBox } from './chunk-O4MHJSK2.mjs';
-import { useHoveringEditorContext } from './chunk-YW3REYX6.mjs';
-import { Portal, Menu } from './chunk-XHUMROEY.mjs';
-import { getTextAroundSelection, getFullEditorTextWithNewlines } from './chunk-IXJ2HCOA.mjs';
-import { useRef, useState, useEffect } from 'react';
-import { Transforms } from 'slate';
-import { useSlate, useSlateSelection } from 'slate-react';
-import { jsx } from 'react/jsx-runtime';
-
-var HoveringToolbar = (props) => {
-  const ref = useRef(null);
-  const editor = useSlate();
-  const selection = useSlateSelection();
-  const { isDisplayed, setIsDisplayed } = useHoveringEditorContext();
-  const [isClient, setIsClient] = useState(false);
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-  useEffect(() => {
-    const el = ref.current;
-    const { selection: selection2 } = editor;
-    if (!el) {
-      return;
-    }
-    if (!selection2) {
-      el.removeAttribute("style");
-      return;
-    }
-    const domSelection = window.getSelection();
-    if (!domSelection) {
-      return;
-    }
-    const domRange = domSelection.getRangeAt(0);
-    const rect = domRange.getBoundingClientRect();
-    if (rect.top === 0 && rect.left === 0 && rect.width === 0 && rect.height === 0) {
-      return;
-    }
-    const minGapFromEdge = 60;
-    const verticalOffsetFromCorner = 35;
-    const horizontalOffsetFromCorner = 15;
-    let top = rect.top + window.scrollY - el.offsetHeight + verticalOffsetFromCorner;
-    if (top < minGapFromEdge) {
-      top = rect.bottom + window.scrollY + minGapFromEdge;
-    } else if (top + el.offsetHeight > window.innerHeight - minGapFromEdge) {
-      top = rect.top + window.scrollY - el.offsetHeight - minGapFromEdge;
-    }
-    let left = rect.left + window.scrollX - el.offsetWidth / 2 + rect.width / 2 + horizontalOffsetFromCorner;
-    if (left < minGapFromEdge) {
-      left = minGapFromEdge;
-    } else if (left + el.offsetWidth > window.innerWidth - minGapFromEdge) {
-      left = window.innerWidth - el.offsetWidth - minGapFromEdge;
-    }
-    el.style.opacity = "1";
-    el.style.top = `${top}px`;
-    el.style.left = `${left}px`;
-  });
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        setIsDisplayed(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [ref, setIsDisplayed]);
-  if (!isClient) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Portal, {
-    children: /* @__PURE__ */ jsx(Menu, {
-      ref,
-      className: props.hoverMenuClassname || "p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700",
-      children: isDisplayed && selection && /* @__PURE__ */ jsx(HoveringInsertionPromptBox, {
-        editorState: editorState(editor),
-        apiConfig: props.apiConfig,
-        closeWindow: () => {
-          setIsDisplayed(false);
-        },
-        performInsertion: (insertedText) => {
-          console.log("inserted text", insertedText);
-          Transforms.delete(editor, { at: selection });
-          Transforms.insertText(editor, insertedText, {
-            at: selection
-          });
-          setIsDisplayed(false);
-        },
-        contextCategories: props.contextCategories
-      })
-    })
-  });
-};
-function editorState(editor, selection) {
-  const textAroundCursor = getTextAroundSelection(editor);
-  if (textAroundCursor) {
-    return textAroundCursor;
-  }
-  return {
-    textBeforeCursor: getFullEditorTextWithNewlines(editor),
-    textAfterCursor: "",
-    selectedText: ""
-  };
-}
-
-export { HoveringToolbar };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-3L6CNVCE.mjs.map

package/dist/chunk-3L6CNVCE.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/hovering-toolbar/hovering-toolbar.tsx"],"names":["selection"],"mappings":"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","sourcesContent":["import { css } from \"@emotion/css\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { BaseSelection, Editor, Range, Location, Transforms } from \"slate\";\nimport { useSlate, useSlateSelection } from \"slate-react\";\nimport { HoveringInsertionPromptBox } from \"./text-insertion-prompt-box\";\nimport { Button, Icon, Menu, Portal } from \"./hovering-toolbar-components\";\nimport { useHoveringEditorContext } from \"./hovering-editor-provider\";\nimport {\n  getFullEditorTextWithNewlines,\n  getTextAroundSelection,\n} from \"../../lib/get-text-around-cursor\";\nimport {\n  EditingEditorState,\n  InsertionEditorApiConfig,\n} from \"../../types/base/autosuggestions-bare-function\";\n\nexport interface HoveringToolbarProps {\n  apiConfig: InsertionEditorApiConfig;\n  contextCategories: string[];\n  hoverMenuClassname: string | undefined;\n}\n\nexport const HoveringToolbar: (\n  props: HoveringToolbarProps\n) => JSX.Element | null = (props) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const editor = useSlate();\n  const selection = useSlateSelection();\n  const { isDisplayed, setIsDisplayed } = useHoveringEditorContext();\n\n  // only render on client\n  const [isClient, setIsClient] = useState(false);\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  useEffect(() => {\n    const el = ref.current;\n    const { selection } = editor;\n\n    if (!el) {\n      return;\n    }\n\n    if (!selection) {\n      el.removeAttribute(\"style\");\n      return;\n    }\n\n    const domSelection = window.getSelection();\n    if (!domSelection) {\n      return;\n    }\n\n    const domRange = domSelection.getRangeAt(0);\n    const rect = domRange.getBoundingClientRect();\n\n    // We use window = (0,0,0,0) as a signal that the selection is not in the original copilot-textarea,\n    // but inside the hovering window.\n    //\n    // in such case, we simply do nothing.\n    if (\n      rect.top === 0 &&\n      rect.left === 0 &&\n      rect.width === 0 &&\n      rect.height === 0\n    ) {\n      return;\n    }\n\n    const minGapFromEdge = 60;\n    const verticalOffsetFromCorner = 35;\n    const horizontalOffsetFromCorner = 15;\n    let top =\n      rect.top + window.scrollY - el.offsetHeight + verticalOffsetFromCorner;\n    // make sure top is in the viewport and not too close to the edge\n    if (top < minGapFromEdge) {\n      top = rect.bottom + window.scrollY + minGapFromEdge;\n    } else if (top + el.offsetHeight > window.innerHeight - minGapFromEdge) {\n      top = rect.top + window.scrollY - el.offsetHeight - minGapFromEdge;\n    }\n\n    let left =\n      rect.left +\n      window.scrollX -\n      el.offsetWidth / 2 +\n      rect.width / 2 +\n      horizontalOffsetFromCorner;\n    // make sure left is in the viewport and not too close to the edge\n    if (left < minGapFromEdge) {\n      left = minGapFromEdge;\n    } else if (left + el.offsetWidth > window.innerWidth - minGapFromEdge) {\n      left = window.innerWidth - el.offsetWidth - minGapFromEdge;\n    }\n\n    el.style.opacity = \"1\";\n    el.style.top = `${top}px`;\n    el.style.left = `${left}px`;\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        setIsDisplayed(false);\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [ref, setIsDisplayed]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  return (\n    <Portal>\n      <Menu\n        ref={ref}\n        className={\n          props.hoverMenuClassname ||\n          \"p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700\"\n        }\n      >\n        {isDisplayed && selection && (\n          <HoveringInsertionPromptBox\n            editorState={editorState(editor, selection)}\n            apiConfig={props.apiConfig}\n            closeWindow={() => {\n              setIsDisplayed(false);\n            }}\n            performInsertion={(insertedText) => {\n              console.log(\"inserted text\", insertedText);\n              // replace the selection with the inserted text\n              Transforms.delete(editor, { at: selection });\n              Transforms.insertText(editor, insertedText, {\n                at: selection,\n              });\n              setIsDisplayed(false);\n            }}\n            contextCategories={props.contextCategories}\n          />\n        )}\n      </Menu>\n    </Portal>\n  );\n};\n\nfunction editorState(editor: Editor, selection: Location): EditingEditorState {\n  const textAroundCursor = getTextAroundSelection(editor);\n  if (textAroundCursor) {\n    return textAroundCursor;\n  }\n\n  return {\n    textBeforeCursor: getFullEditorTextWithNewlines(editor),\n    textAfterCursor: \"\",\n    selectedText: \"\",\n  };\n}\n"]}