@copilotkit/react-textarea 0.11.0 → 0.12.0

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

@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import React, { 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 { useCopilotTextareaEditor } from "../../hooks/use-copilot-textarea-editor";
+import { useAutosuggestions } from "../../hooks/base-copilot-textarea-implementation/use-autosuggestions";
+import { useCopilotTextareaEditor } from "../../hooks/base-copilot-textarea-implementation/use-copilot-textarea-editor";
+import { usePopulateCopilotTextareaRef } from "../../hooks/base-copilot-textarea-implementation/use-populate-copilot-textarea-ref";
 import {
   getFullEditorTextWithNewlines,
   getTextAroundCursor,
@@ -23,158 +24,171 @@ import { makeRenderElementFunction } from "./render-element";
 import { makeRenderPlaceholderFunction } from "./render-placeholder";
 import { useAddBrandingCss } from "./use-add-branding-css";
 
-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();
+export interface HTMLCopilotTextAreaElement extends HTMLElement {
+  value: string;
+  focus: () => void;
+  blur: () => void;
+}
 
-  const insertText = useCallback(
-    (autosuggestion: AutosuggestionState) => {
-      Editor.insertText(editor, autosuggestion.text, {
-        at: autosuggestion.point,
-      });
+export const BaseCopilotTextarea = React.forwardRef(
+  (
+    props: BaseCopilotTextareaProps & {
+      autosuggestionsFunction: AutosuggestionsBareFunction;
     },
-    [editor]
-  );
-
-  const {
-    currentAutocompleteSuggestion,
-    onChangeHandler: onChangeHandlerForAutocomplete,
-    onKeyDownHandler: onKeyDownHandlerForAutocomplete,
-  } = useAutosuggestions(
-    autosuggestionsConfig.debounceTime,
-    autosuggestionsConfig.acceptAutosuggestionKey,
-    props.autosuggestionsFunction,
-    insertText,
-    autosuggestionsConfig.disableWhenEmpty,
-    autosuggestionsConfig.disabled
-  );
-
-  // sync autosuggestions state with the editor
-  useEffect(() => {
-    clearAutocompletionsFromEditor(editor);
-    if (currentAutocompleteSuggestion) {
-      addAutocompletionsToEditor(
-        editor,
-        currentAutocompleteSuggestion.text,
-        currentAutocompleteSuggestion.point
-      );
-    }
-  }, [currentAutocompleteSuggestion]);
-
-  const suggestionStyleAugmented: React.CSSProperties = useMemo(() => {
-    return {
-      fontStyle: "italic",
-      color: "gray",
-      ...props.suggestionsStyle,
+    ref: React.Ref<HTMLCopilotTextAreaElement>
+  ): JSX.Element => {
+    const autosuggestionsConfig: BaseAutosuggestionsConfig = {
+      ...defaultBaseAutosuggestionsConfig,
+      ...props.autosuggestionsConfig,
     };
-  }, [props.suggestionsStyle]);
 
-  useAddBrandingCss(suggestionStyleAugmented, props.disableBranding);
+    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,
+      autosuggestionsConfig.disabled
+    );
+
+    // sync autosuggestions state with the editor
+    useEffect(() => {
+      clearAutocompletionsFromEditor(editor);
+      if (currentAutocompleteSuggestion) {
+        addAutocompletionsToEditor(
+          editor,
+          currentAutocompleteSuggestion.text,
+          currentAutocompleteSuggestion.point
+        );
+      }
+    }, [currentAutocompleteSuggestion]);
+
+    const suggestionStyleAugmented: React.CSSProperties = useMemo(() => {
+      return {
+        fontStyle: "italic",
+        color: "gray",
+        ...props.suggestionsStyle,
+      };
+    }, [props.suggestionsStyle]);
+
+    useAddBrandingCss(suggestionStyleAugmented, props.disableBranding);
+
+    const renderElementMemoized = useMemo(() => {
+      return makeRenderElementFunction(suggestionStyleAugmented);
+    }, [suggestionStyleAugmented]);
+
+    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,
+      onChange,
+      onKeyDown,
+      ...propsToForward
+    } = props;
+
+    const moddedClassName = (() => {
+      const baseClassName = "copilot-textarea";
+      const brandingClass = props.disableBranding
+        ? "no-branding"
+        : "with-branding";
+      const defaultTailwindClassName = "bg-white overflow-y-auto resize-y";
+      const mergedClassName = twMerge(
+        defaultTailwindClassName,
+        className ?? ""
+      );
+      return `${baseClassName} ${brandingClass} ${mergedClassName}`;
+    })();
+
+    usePopulateCopilotTextareaRef(editor, ref);
 
-  const renderElementMemoized = useMemo(() => {
-    return makeRenderElementFunction(suggestionStyleAugmented);
-  }, [suggestionStyleAugmented]);
+    return (
+      <Slate
+        editor={editor}
+        initialValue={initialValue}
+        onChange={(value) => {
+          const newEditorState = getTextAroundCursor(editor);
 
-  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 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.
 
-    const placeholderStyleAugmented: React.CSSProperties = {
-      ...placeholderStyleSlatejsOverrides,
-      ...props.placeholderStyle,
-    };
+          setLastKnownFullEditorText(fullEditorText);
+          onChangeHandlerForAutocomplete(newEditorState);
 
-    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,
-    onChange,
-    onKeyDown,
-    ...propsToForward
-  } = props;
-
-  const moddedClassName = (() => {
-    const baseClassName = "copilot-textarea";
-    const brandingClass = props.disableBranding
-      ? "no-branding"
-      : "with-branding";
-    const defaultTailwindClassName = "bg-white overflow-y-auto resize-y";
-    const mergedClassName = twMerge(defaultTailwindClassName, className ?? "");
-    return `${baseClassName} ${brandingClass} ${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);
-        props.onChange?.(makeSemiFakeReactTextAreaEvent(fullEditorText));
-      }}
-    >
-      <Editable
-        renderElement={renderElementMemoized}
-        renderPlaceholder={renderPlaceholderMemoized}
-        onKeyDown={(event) => {
-          onKeyDownHandlerForAutocomplete(event); // forward the event for internal use
-          props.onKeyDown?.(event); // forward the event for external use
+          props.onValueChange?.(fullEditorText);
+          props.onChange?.(makeSemiFakeReactTextAreaEvent(fullEditorText));
         }}
-        className={moddedClassName}
-        {...propsToForward}
-      />
-    </Slate>
-  );
-}
+      >
+        <Editable
+          renderElement={renderElementMemoized}
+          renderPlaceholder={renderPlaceholderMemoized}
+          onKeyDown={(event) => {
+            onKeyDownHandlerForAutocomplete(event); // forward the event for internal use
+            props.onKeyDown?.(event); // forward the event for external use
+          }}
+          className={moddedClassName}
+          {...propsToForward}
+        />
+      </Slate>
+    );
+  }
+);
 
 // Consumers of <textarea> expect a `onChange: (React.ChangeEvent<HTMLTextAreaElement>) => void` event handler to be passed in.
 // This is *extremely* common, and we want to support it.

package/src/components/base-copilot-textarea/use-add-branding-css.tsx

@@ -4,11 +4,14 @@ export function useAddBrandingCss(
   suggestionStyleAugmented: React.CSSProperties,
   disableBranding: boolean | undefined
 ) {
+  const cssSelector = ".copilot-textarea.with-branding";
   useEffect(() => {
     if (disableBranding) {
       return;
     }
 
+    // ---
+    // 1: Add the CSS to the DOM
     const styleEl = document.createElement("style");
     styleEl.id = "dynamic-styles";
 
@@ -36,16 +39,37 @@ export function useAddBrandingCss(
 
     // Append it to the ::after class
     styleEl.innerHTML = `
-      .copilot-textarea.with-branding::after {
+      ${cssSelector}::after {
         ${dynamicStyles}
       }
     `;
 
     document.head.appendChild(styleEl);
 
+    // ---
+    // 2: Add the scroll listener (to keep the branding in the bottom right as the textarea scrolls)
+    const textarea = document.querySelector(cssSelector);
+    const handleScroll = () => {
+      const styleEl = document.getElementById("dynamic-styles");
+      if (styleEl && textarea) {
+        const offsetFromBottom = -textarea.scrollTop + 6;
+        const offsetFromRight = -textarea.scrollLeft + 6;
+        styleEl.innerHTML = `
+          ${cssSelector}::after {
+            ${dynamicStyles}
+            bottom: ${offsetFromBottom}px;
+            right: ${offsetFromRight}px;
+          }
+        `;
+      }
+    };
+
+    textarea?.addEventListener("scroll", handleScroll);
+
     // Cleanup
     return () => {
       document.getElementById("dynamic-styles")?.remove();
+      textarea?.removeEventListener("scroll", handleScroll);
     };
   }, [disableBranding, suggestionStyleAugmented]);
 }

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

@@ -1,5 +1,7 @@
 // This example is for an Editor with `ReactEditor` and `HistoryEditor`
+import React from "react";
 import { useMakeStandardAutosuggestionFunction } from "../../hooks/make-autosuggestions-function/use-make-standard-autosuggestions-function";
+import { HTMLCopilotTextAreaElement } from "../../types";
 import { BaseCopilotTextareaProps } from "../../types/base/base-copilot-textarea-props";
 import {
   AutosuggestionsConfig,
@@ -13,26 +15,34 @@ export interface CopilotTextareaProps extends BaseCopilotTextareaProps {
   };
 }
 
-export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
-  const autosuggestionsConfig: AutosuggestionsConfig = {
-    ...defaultAutosuggestionsConfig,
-    ...props.autosuggestionsConfig,
-  };
+export const CopilotTextarea = React.forwardRef(
+  (
+    props: CopilotTextareaProps,
+    ref: React.Ref<HTMLCopilotTextAreaElement>
+  ): JSX.Element => {
+    const autosuggestionsConfig: AutosuggestionsConfig = {
+      ...defaultAutosuggestionsConfig,
+      ...props.autosuggestionsConfig,
+    };
 
-  const autosuggestionsFunction = useMakeStandardAutosuggestionFunction(
-    autosuggestionsConfig.purposePrompt,
-    autosuggestionsConfig.apiEndpoint,
-    autosuggestionsConfig.makeSystemPrompt,
-    autosuggestionsConfig.fewShotMessages,
-    autosuggestionsConfig.externalContextCategories,
-    autosuggestionsConfig.forwardedParams
-  );
+    const autosuggestionsFunction = useMakeStandardAutosuggestionFunction(
+      autosuggestionsConfig.purposePrompt,
+      autosuggestionsConfig.apiEndpoint,
+      autosuggestionsConfig.makeSystemPrompt,
+      autosuggestionsConfig.fewShotMessages,
+      autosuggestionsConfig.externalContextCategories,
+      autosuggestionsConfig.forwardedParams
+    );
 
-  return (
-    <BaseCopilotTextarea
-      {...props}
-      autosuggestionsConfig={autosuggestionsConfig}
-      autosuggestionsFunction={autosuggestionsFunction}
-    />
-  );
-}
+    return (
+      <>
+        <BaseCopilotTextarea
+          ref={ref}
+          {...props}
+          autosuggestionsConfig={autosuggestionsConfig}
+          autosuggestionsFunction={autosuggestionsFunction}
+        />
+      </>
+    );
+  }
+);

package/src/hooks/{use-autosuggestions.ts → base-copilot-textarea-implementation/use-autosuggestions.ts}

@@ -1,12 +1,12 @@
 import { useCallback, useMemo, useState } from "react";
-import { Debouncer } from "../lib/debouncer";
-import { nullableCompatibleEqualityCheck } from "../lib/utils";
-import { AutosuggestionsBareFunction } from "../types/base";
-import { AutosuggestionState } from "../types/base/autosuggestion-state";
+import { Debouncer } from "../../lib/debouncer";
+import { nullableCompatibleEqualityCheck } from "../../lib/utils";
+import { AutosuggestionsBareFunction } from "../../types/base";
+import { AutosuggestionState } from "../../types/base/autosuggestion-state";
 import {
   EditorAutocompleteState,
   areEqual_autocompleteState,
-} from "../types/base/editor-autocomplete-state";
+} from "../../types/base/editor-autocomplete-state";
 
 export interface UseAutosuggestionsResult {
   currentAutocompleteSuggestion: AutosuggestionState | null;

package/src/hooks/{use-copilot-textarea-editor.tsx → base-copilot-textarea-implementation/use-copilot-textarea-editor.tsx}

@@ -1,12 +1,12 @@
+import { useMemo } from "react";
 import { createEditor, Element } from "slate";
 import { withReact } from "slate-react";
-import { useMemo } from "react";
 import {
-  withPartialHistory,
-  ShouldSaveToHistory,
   defaultShouldSave,
-} from "../lib/slatejs-edits/with-partial-history";
-import { CustomEditor } from "../types/base/custom-editor";
+  ShouldSaveToHistory,
+  withPartialHistory,
+} from "../../lib/slatejs-edits/with-partial-history";
+import { CustomEditor } from "../../types/base/custom-editor";
 
 const shouldSave: ShouldSaveToHistory = (op, prev) => {
   const excludedNodeType = "suggestion";

package/src/hooks/base-copilot-textarea-implementation/use-populate-copilot-textarea-ref.ts

@@ -0,0 +1,101 @@
+import React from "react";
+import { Editor } from "slate";
+import { ReactEditor } from "slate-react";
+import { getFullEditorTextWithNewlines } from "../../lib/get-text-around-cursor";
+import { replaceEditorText } from "../../lib/slatejs-edits/replace-text";
+import { HTMLCopilotTextAreaElement } from "../../types";
+import { CustomEditor } from "../../types/base/custom-editor";
+
+export function usePopulateCopilotTextareaRef(
+  editor: Editor,
+  ref: React.Ref<HTMLCopilotTextAreaElement>
+) {
+  React.useImperativeHandle(
+    ref,
+    () => {
+      class Combined {
+        constructor(
+          private customMethods: CustomMethods,
+          private editorHtmlElement: HTMLElement
+        ) {}
+
+        [key: string]: any;
+
+        get(target: any, propKey: string): any {
+          if (this.isKeyOfCustomMethods(propKey)) {
+            const value = this.customMethods[propKey];
+            if (typeof value === "function") {
+              return value.bind(this.customMethods);
+            }
+            return value;
+          } else if (this.isKeyOfHTMLElement(propKey)) {
+            const value = this.editorHtmlElement[propKey];
+            if (typeof value === "function") {
+              return value.bind(this.editorHtmlElement);
+            }
+            return value;
+          }
+        }
+
+        set(target: any, propKey: string, value: any): boolean {
+          if (this.isKeyOfCustomMethods(propKey)) {
+            (this.customMethods as any)[propKey] = value;
+          } else if (this.isKeyOfHTMLElement(propKey)) {
+            (this.editorHtmlElement as any)[propKey] = value;
+          } else {
+            // Default behavior (optional)
+            target[propKey] = value;
+          }
+          return true;
+        }
+
+        private isKeyOfCustomMethods(key: string): key is keyof CustomMethods {
+          return key in this.customMethods;
+        }
+
+        private isKeyOfHTMLElement(key: string): key is keyof HTMLElement {
+          return key in this.editorHtmlElement;
+        }
+      }
+
+      const handler = {
+        get(target: any, propKey: keyof CustomMethods | keyof HTMLElement) {
+          return target.get(target, propKey);
+        },
+        set(
+          target: any,
+          propKey: keyof CustomMethods | keyof HTMLElement,
+          value: any
+        ) {
+          return target.set(target, propKey, value);
+        },
+      };
+
+      class CustomMethods {
+        constructor(private editor: CustomEditor) {}
+
+        focus() {
+          ReactEditor.focus(this.editor);
+        }
+
+        blur() {
+          ReactEditor.blur(this.editor);
+        }
+
+        get value() {
+          return getFullEditorTextWithNewlines(this.editor);
+        }
+        set value(value: string) {
+          replaceEditorText(this.editor, value);
+        }
+      }
+
+      const editorHtmlElement = ReactEditor.toDOMNode(editor, editor);
+      const customMethods = new CustomMethods(editor);
+
+      const combined = new Combined(customMethods, editorHtmlElement);
+      return new Proxy(combined, handler);
+    },
+    [editor]
+  );
+}

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

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

package/dist/chunk-6SYD77G6.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/use-copilot-textarea-editor.tsx"],"names":["editor"],"mappings":";;;;;;AAAA,SAAS,cAAc,eAAe;AACtC,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAQxB,IAAM,aAAkC,CAAC,IAAI,SAAS;AACpD,QAAM,mBAAmB;AAEzB,MACE,GAAG,SAAS,iBACZ,QAAQ,UAAU,GAAG,IAAI,KACzB,GAAG,KAAK,SAAS,kBACjB;AACA,WAAO;AAAA,EACT;AAEA,MACE,GAAG,SAAS,iBACZ,QAAQ,UAAU,GAAG,IAAI,KACzB,GAAG,KAAK,SAAS,kBACjB;AACA,WAAO;AAAA,EACT;AAEA,MACE,GAAG,SAAS,cACZ,UAAU,GAAG,iBACb,GAAG,cAAc,SAAS,kBAC1B;AACA,WAAO;AAAA,EACT;AAEA,MACE,GAAG,QAAQ,cACX,UAAU,GAAG,cACb,GAAG,WAAW,SAAS,kBACvB;AACA,WAAO;AAAA,EACT;AAEA,MACE,GAAG,SAAS,gBACZ,UAAU,GAAG,cACb,GAAG,WAAW,SAAS,kBACvB;AACA,WAAO;AAAA,EACT;AAEA,MACE,GAAG,SAAS,gBACZ,UAAU,GAAG,cACb,GAAG,WAAW,SAAS,kBACvB;AACA,WAAO;AAAA,EACT;AAGA,SAAO,kBAAkB,IAAI,IAAI;AACnC;AAEO,SAAS,2BAAyC;AACvD,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAMA,UAAS,mBAAmB,UAAU,aAAa,CAAC,GAAG,UAAU;AAEvE,UAAM,EAAE,OAAO,IAAIA;AACnB,IAAAA,QAAO,SAAS,CAAC,YAAY;AAC3B,cAAQ,QAAQ,MAAM;AAAA,QACpB,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO,OAAO,OAAO;AAAA,MACzB;AAAA,IACF;AAEA,UAAM,EAAE,aAAa,IAAIA;AACzB,IAAAA,QAAO,eAAe,CAAC,YAAY;AACjC,cAAQ,QAAQ,MAAM;AAAA,QACpB,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO,aAAa,OAAO;AAAA,MAC/B;AAAA,IACF;AAEA,UAAM,EAAE,SAAS,IAAIA;AACrB,IAAAA,QAAO,WAAW,CAAC,YAAY;AAC7B,cAAQ,QAAQ,MAAM;AAAA,QACpB,KAAK;AACH,iBAAO,QAAQ;AAAA,QACjB;AACE,iBAAO,SAAS,OAAO;AAAA,MAC3B;AAAA,IACF;AAEA,WAAOA;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,SAAO;AACT","sourcesContent":["import { createEditor, Element } from \"slate\";\nimport { withReact } from \"slate-react\";\nimport { useMemo } from \"react\";\nimport {\n  withPartialHistory,\n  ShouldSaveToHistory,\n  defaultShouldSave,\n} from \"../lib/slatejs-edits/with-partial-history\";\nimport { CustomEditor } from \"../types/base/custom-editor\";\n\nconst shouldSave: ShouldSaveToHistory = (op, prev) => {\n  const excludedNodeType = \"suggestion\";\n  // Check if the operation involves the suggestion inline node type\n  if (\n    op.type === \"insert_node\" &&\n    Element.isElement(op.node) &&\n    op.node.type === excludedNodeType\n  ) {\n    return false;\n  }\n\n  if (\n    op.type === \"remove_node\" &&\n    Element.isElement(op.node) &&\n    op.node.type === excludedNodeType\n  ) {\n    return false;\n  }\n\n  if (\n    op.type === \"set_node\" &&\n    \"type\" in op.newProperties &&\n    op.newProperties.type === excludedNodeType\n  ) {\n    return false;\n  }\n\n  if (\n    op.type == \"set_node\" &&\n    \"type\" in op.properties &&\n    op.properties.type === excludedNodeType\n  ) {\n    return false;\n  }\n\n  if (\n    op.type === \"merge_node\" &&\n    \"type\" in op.properties &&\n    op.properties.type === excludedNodeType\n  ) {\n    return false;\n  }\n\n  if (\n    op.type === \"split_node\" &&\n    \"type\" in op.properties &&\n    op.properties.type === excludedNodeType\n  ) {\n    return false;\n  }\n\n  // Otherwise, save the operation to history\n  return defaultShouldSave(op, prev);\n};\n\nexport function useCopilotTextareaEditor(): CustomEditor {\n  const editor = useMemo(() => {\n    const editor = withPartialHistory(withReact(createEditor()), shouldSave);\n\n    const { isVoid } = editor;\n    editor.isVoid = (element) => {\n      switch (element.type) {\n        case \"suggestion\":\n          return true;\n        default:\n          return isVoid(element);\n      }\n    };\n\n    const { markableVoid } = editor;\n    editor.markableVoid = (element) => {\n      switch (element.type) {\n        case \"suggestion\":\n          return true;\n        default:\n          return markableVoid(element);\n      }\n    };\n\n    const { isInline } = editor;\n    editor.isInline = (element) => {\n      switch (element.type) {\n        case \"suggestion\":\n          return element.inline;\n        default:\n          return isInline(element);\n      }\n    };\n\n    return editor;\n  }, []);\n\n  return editor;\n}\n"]}

package/dist/chunk-E2UEE45I.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/use-autosuggestions.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,aAAa,SAAS,gBAAgB;AAgBxC,SAAS,mBACd,cACA,yBACA,wBACA,8BACA,kBACA,UAC0B;AAC1B,QAAM,CAAC,2BAA2B,4BAA4B,IAC5D,SAAyC,IAAI;AAE/C,QAAM,CAAC,+BAA+B,gCAAgC,IACpE,SAAqC,IAAI;AAE3C,QAAM,8BAGe;AAAA,IACnB,CACE,yBACA,gBACG;AAEH,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,UACE,oBACA,wBAAwB,qBAAqB,MAC7C,wBAAwB,oBAAoB,IAC5C;AACA;AAAA,MACF;AAGA,YAAM,aAAa,MAAM;AAAA,QACvB,wBAAwB;AAAA,QACxB,wBAAwB;AAAA,QACxB;AAAA,MACF;AAGA,UAAI,CAAC,cAAc,YAAY,SAAS;AACtC,cAAM,IAAI,aAAa,WAAW,YAAY;AAAA,MAChD;AAEA,uCAAiC;AAAA,QAC/B,MAAM;AAAA,QACN,OAAO,wBAAwB;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,oBAAoB;AAAA,IACxB,MACE,IAAI;AAAA,MACF;AAAA,IACF;AAAA,IACF,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,WAAW;AAAA,IACf,CAAC,mBAAmD;AAClD,YAAM,wBAAwB,CAAC;AAAA,QAC7B;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,mCAA6B,cAAc;AAG3C,UAAI,CAAC,uBAAuB;AAC1B;AAAA,MACF;AAGA,uCAAiC,IAAI;AAGrC,UAAI,gBAAgB;AAClB,0BAAkB,SAAS,6BAA6B,cAAc;AAAA,MACxE,OAAO;AACL,0BAAkB,OAAO;AAAA,MAC3B;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,UAAI,+BAA+B;AACjC,YAAI,MAAM,QAAQ,yBAAyB;AACzC,gBAAM,eAAe;AACrB,uCAA6B,6BAA6B;AAC1D,2CAAiC,IAAI;AAAA,QACvC;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,EACpB;AACF","sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport { Debouncer } from \"../lib/debouncer\";\nimport { nullableCompatibleEqualityCheck } from \"../lib/utils\";\nimport { AutosuggestionsBareFunction } from \"../types/base\";\nimport { AutosuggestionState } from \"../types/base/autosuggestion-state\";\nimport {\n  EditorAutocompleteState,\n  areEqual_autocompleteState,\n} from \"../types/base/editor-autocomplete-state\";\n\nexport interface UseAutosuggestionsResult {\n  currentAutocompleteSuggestion: AutosuggestionState | null;\n  onChangeHandler: (newEditorState: EditorAutocompleteState | null) => void;\n  onKeyDownHandler: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport function useAutosuggestions(\n  debounceTime: number,\n  acceptAutosuggestionKey: string,\n  autosuggestionFunction: AutosuggestionsBareFunction,\n  insertAutocompleteSuggestion: (suggestion: AutosuggestionState) => void,\n  disableWhenEmpty: boolean,\n  disabled: boolean\n): UseAutosuggestionsResult {\n  const [previousAutocompleteState, setPreviousAutocompleteState] =\n    useState<EditorAutocompleteState | null>(null);\n\n  const [currentAutocompleteSuggestion, setCurrentAutocompleteSuggestion] =\n    useState<AutosuggestionState | null>(null);\n\n  const awaitForAndAppendSuggestion: (\n    editorAutocompleteState: EditorAutocompleteState,\n    abortSignal: AbortSignal\n  ) => Promise<void> = useCallback(\n    async (\n      editorAutocompleteState: EditorAutocompleteState,\n      abortSignal: AbortSignal\n    ) => {\n      // early return if disabled\n      if (disabled) {\n        return;\n      }\n\n      if (\n        disableWhenEmpty &&\n        editorAutocompleteState.textBeforeCursor === \"\" &&\n        editorAutocompleteState.textAfterCursor === \"\"\n      ) {\n        return;\n      }\n\n      // fetch the suggestion\n      const suggestion = await autosuggestionFunction(\n        editorAutocompleteState.textBeforeCursor,\n        editorAutocompleteState.textAfterCursor,\n        abortSignal\n      );\n\n      // We'll assume for now that the autocomplete function might or might not respect the abort signal.\n      if (!suggestion || abortSignal.aborted) {\n        throw new DOMException(\"Aborted\", \"AbortError\");\n      }\n\n      setCurrentAutocompleteSuggestion({\n        text: suggestion,\n        point: editorAutocompleteState.cursorPoint,\n      });\n    },\n    [\n      autosuggestionFunction,\n      setCurrentAutocompleteSuggestion,\n      disableWhenEmpty,\n      disabled,\n    ]\n  );\n\n  const debouncedFunction = useMemo(\n    () =>\n      new Debouncer<[editorAutocompleteState: EditorAutocompleteState]>(\n        debounceTime\n      ),\n    [debounceTime]\n  );\n\n  const onChange = useCallback(\n    (newEditorState: EditorAutocompleteState | null) => {\n      const editorStateHasChanged = !nullableCompatibleEqualityCheck(\n        areEqual_autocompleteState,\n        previousAutocompleteState,\n        newEditorState\n      );\n      setPreviousAutocompleteState(newEditorState);\n\n      // if no change, do nothing\n      if (!editorStateHasChanged) {\n        return;\n      }\n\n      // if change, then first null out the current suggestion\n      setCurrentAutocompleteSuggestion(null);\n\n      // then try to get a new suggestion, debouncing to avoid too many requests while typing\n      if (newEditorState) {\n        debouncedFunction.debounce(awaitForAndAppendSuggestion, newEditorState);\n      } else {\n        debouncedFunction.cancel();\n      }\n    },\n    [\n      previousAutocompleteState,\n      setPreviousAutocompleteState,\n      debouncedFunction,\n      awaitForAndAppendSuggestion,\n      setCurrentAutocompleteSuggestion,\n    ]\n  );\n\n  const keyDownHandler = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (currentAutocompleteSuggestion) {\n        if (event.key === acceptAutosuggestionKey) {\n          event.preventDefault();\n          insertAutocompleteSuggestion(currentAutocompleteSuggestion);\n          setCurrentAutocompleteSuggestion(null);\n        }\n      }\n    },\n    [\n      currentAutocompleteSuggestion,\n      setCurrentAutocompleteSuggestion,\n      insertAutocompleteSuggestion,\n      acceptAutosuggestionKey,\n    ]\n  );\n\n  return {\n    currentAutocompleteSuggestion,\n    onChangeHandler: onChange,\n    onKeyDownHandler: keyDownHandler,\n  };\n}\n"]}

package/dist/chunk-FD6FGKYY.mjs

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

package/dist/chunk-THWPPG6M.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/base-copilot-textarea/use-add-branding-css.tsx"],"names":[],"mappings":";AAAA,SAAS,iBAAiB;AAEnB,SAAS,kBACd,0BACA,iBACA;AACA,YAAU,MAAM;AACd,QAAI,iBAAiB;AACnB;AAAA,IACF;AAEA,UAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,YAAQ,KAAK;AAGb,QAAI,gBAAgB,OAAO,QAAQ,wBAAwB,EACxD,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AACrB,YAAM,eAAe,IAClB,QAAQ,gCAAgC,OAAO,EAC/C,YAAY;AACf,aAAO,GAAG,iBAAiB;AAAA,IAC7B,CAAC,EACA,KAAK,GAAG;AAGX,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AACjB,qBAAiB;AAGjB,YAAQ,YAAY;AAAA;AAAA,UAEd;AAAA;AAAA;AAIN,aAAS,KAAK,YAAY,OAAO;AAGjC,WAAO,MAAM;AA9CjB;AA+CM,qBAAS,eAAe,gBAAgB,MAAxC,mBAA2C;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,iBAAiB,wBAAwB,CAAC;AAChD","sourcesContent":["import { useEffect } from \"react\";\n\nexport function useAddBrandingCss(\n  suggestionStyleAugmented: React.CSSProperties,\n  disableBranding: boolean | undefined\n) {\n  useEffect(() => {\n    if (disableBranding) {\n      return;\n    }\n\n    const styleEl = document.createElement(\"style\");\n    styleEl.id = \"dynamic-styles\";\n\n    // Build the CSS string dynamically\n    let dynamicStyles = Object.entries(suggestionStyleAugmented)\n      .map(([key, value]) => {\n        const kebabCaseKey = key\n          .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, \"$1-$2\")\n          .toLowerCase();\n        return `${kebabCaseKey}: ${value};`;\n      })\n      .join(\" \");\n\n    // Append overrides for italics and font-size\n    dynamicStyles += `font-style: normal; font-size: x-small;`;\n    dynamicStyles += `content: \"CopilotKit\";`;\n    dynamicStyles += `bottom: 6px;`;\n    dynamicStyles += `right: 6px;`;\n    dynamicStyles += `pointer-events: none;`;\n    dynamicStyles += `font-weight: 200;`;\n    dynamicStyles += `padding: 0;`;\n    dynamicStyles += `margin: 0;`;\n    dynamicStyles += `border: 0;`;\n    dynamicStyles += `line-height: 1;`;\n\n    // Append it to the ::after class\n    styleEl.innerHTML = `\n      .copilot-textarea.with-branding::after {\n        ${dynamicStyles}\n      }\n    `;\n\n    document.head.appendChild(styleEl);\n\n    // Cleanup\n    return () => {\n      document.getElementById(\"dynamic-styles\")?.remove();\n    };\n  }, [disableBranding, suggestionStyleAugmented]);\n}\n"]}