@copilotkit/react-textarea 0.18.0 → 0.19.0-alpha.1

package/dist/types/index.d.ts

@@ -2,7 +2,12 @@ export { BaseAutosuggestionsConfig, defaultBaseAutosuggestionsConfig } from './b
 export { AutosuggestionsBareFunction } from './base/autosuggestions-bare-function.js';
 export { BaseCopilotTextareaProps } from './base/base-copilot-textarea-props.js';
 export { HTMLCopilotTextAreaElement } from './html-copilot-textarea-element.js';
-export { AutosuggestionsConfig, MakeSystemPrompt, defaultAutosuggestionsConfig, defaultFewShotMessages, defaultMakeSystemPrompt } from './standard-autosuggestions/autosuggestions-config.js';
-export { MinimalChatGPTMessage } from './standard-autosuggestions/minimal-chat-gpt-message.js';
-export { ChatlikeApiEndpoint, ChatlikeApiEndpointImpl } from './standard-autosuggestions/chatlike-api-endpoint.js';
+export { AutosuggestionsConfig, defaultAutosuggestionsConfig } from './autosuggestions-config/autosuggestions-config.js';
+export { MinimalChatGPTMessage } from './autosuggestions-config/subtypes/minimal-chat-gpt-message.js';
+export { MakeSystemPrompt } from './autosuggestions-config/subtypes/make-system-prompt.js';
+export { ChatlikeApiEndpoint, ChatlikeApiEndpointImpl } from './autosuggestions-config/subtypes/chatlike-api-endpoint.js';
+export { AutosuggestionsConfigUserSpecified, InsertionsApiConfigUserSpecified, SuggestionsApiConfigUserSpecified } from './autosuggestions-config/autosuggestions-config-user-specified.js';
 import 'react';
+import './autosuggestions-config/suggestions-api-config.js';
+import './autosuggestions-config/insertions-api-config.js';
+import './autosuggestions-config/editing-api-config.js';

package/dist/types/index.mjs

@@ -1,10 +1,13 @@
 import '../chunk-DE5K76I2.mjs';
 import '../chunk-WADHCMPK.mjs';
-import '../chunk-SL4J5HMW.mjs';
-export { ChatlikeApiEndpoint } from '../chunk-3A2CNIG5.mjs';
-export { defaultAutosuggestionsConfig, defaultFewShotMessages, defaultMakeSystemPrompt } from '../chunk-JWN2VEE3.mjs';
+import '../chunk-5FO6ISW4.mjs';
+export { defaultAutosuggestionsConfig } from '../chunk-QL2GYGG5.mjs';
+import '../chunk-55EGOC5T.mjs';
+import '../chunk-XDT7BF3V.mjs';
+import '../chunk-A2RRLD23.mjs';
+export { ChatlikeApiEndpoint } from '../chunk-5ARCOTW3.mjs';
 import '../chunk-WJHSY5T6.mjs';
-export { defaultBaseAutosuggestionsConfig } from '../chunk-MFJNLKRC.mjs';
+export { defaultBaseAutosuggestionsConfig } from '../chunk-D7SEV5PR.mjs';
 import '../chunk-MRXNTQOX.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.18.0",
+  "version": "0.19.0-alpha.1",
   "sideEffects": [
     "**/*.css"
   ],
@@ -20,7 +20,9 @@
   },
   "devDependencies": {
     "@types/jest": "^29.5.4",
+    "@types/lodash.merge": "^4.6.7",
     "@types/react": "^18.2.5",
+    "@types/react-dom": "^18.2.4",
     "@types/react-syntax-highlighter": "^15.5.7",
     "eslint": "^7.32.0",
     "jest": "^29.6.4",
@@ -31,13 +33,25 @@
     "tsup": "^6.1.3",
     "typescript": "^4.9.4",
     "eslint-config-custom": "0.2.0",
-    "tailwind-config": "0.1.0",
-    "tsconfig": "0.3.0"
+    "tsconfig": "0.3.0",
+    "tailwind-config": "0.1.0"
   },
   "dependencies": {
-    "ai": "^2.1.22",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.11",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "ai": "^2.2.12",
     "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
+    "cmdk": "^0.2.0",
+    "lodash.merge": "^4.6.2",
+    "lucide-react": "^0.274.0",
+    "material-icons": "^1.13.10",
     "nanoid": "^4.0.2",
     "next": "^13.4.1",
     "next-themes": "^0.2.1",
@@ -46,7 +60,7 @@
     "slate-history": "^0.93.0",
     "slate-react": "^0.98.1",
     "tailwind-merge": "^1.13.2",
-    "@copilotkit/react-core": "0.7.0"
+    "@copilotkit/react-core": "0.8.0-alpha.1"
   },
   "scripts": {
     "build": "tsup --treeshake",

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

@@ -7,22 +7,28 @@ import { useCopilotTextareaEditor } from "../../hooks/base-copilot-textarea-impl
 import { usePopulateCopilotTextareaRef } from "../../hooks/base-copilot-textarea-implementation/use-populate-copilot-textarea-ref";
 import {
   getFullEditorTextWithNewlines,
-  getTextAroundCursor,
+  getTextAroundCollapsedCursor,
 } 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 {
-  AutosuggestionsBareFunction,
   BaseAutosuggestionsConfig,
   defaultBaseAutosuggestionsConfig,
 } from "../../types/base";
 import { AutosuggestionState } from "../../types/base/autosuggestion-state";
 import { BaseCopilotTextareaProps } from "../../types/base/base-copilot-textarea-props";
 import "./base-copilot-textarea.css";
+import { HoveringToolbar } from "../hovering-toolbar/hovering-toolbar";
 import { makeRenderElementFunction } from "./render-element";
 import { makeRenderPlaceholderFunction } from "./render-placeholder";
 import { useAddBrandingCss } from "./use-add-branding-css";
+import {
+  HoveringEditorProvider,
+  useHoveringEditorContext,
+} from "../hovering-toolbar/hovering-editor-provider";
+import { EditorAutocompleteState } from "../../types/base/editor-autocomplete-state";
+import { TrackerTextEditedSinceLastCursorMovement } from "./track-cursor-moved-since-last-text-change";
 
 export interface HTMLCopilotTextAreaElement extends HTMLElement {
   value: string;
@@ -30,21 +36,26 @@ export interface HTMLCopilotTextAreaElement extends HTMLElement {
   blur: () => void;
 }
 
-export const BaseCopilotTextarea = React.forwardRef(
+const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
   (
-    props: BaseCopilotTextareaProps & {
-      autosuggestionsFunction: AutosuggestionsBareFunction;
-    },
+    props: BaseCopilotTextareaProps,
     ref: React.Ref<HTMLCopilotTextAreaElement>
   ): JSX.Element => {
     const autosuggestionsConfig: BaseAutosuggestionsConfig = {
       ...defaultBaseAutosuggestionsConfig,
-      ...props.autosuggestionsConfig,
+      ...props.baseAutosuggestionsConfig,
     };
 
     const valueOnInitialRender = useMemo(() => props.value ?? "", []);
     const [lastKnownFullEditorText, setLastKnownFullEditorText] =
       useState(valueOnInitialRender);
+    const [cursorMovedSinceLastTextChange, setCursorMovedSinceLastTextChange] =
+      useState(false);
+
+    // // When the editor text changes, we want to reset the `textEditedSinceLastCursorMovement` state.
+    // useEffect(() => {
+    //   setCursorMovedSinceLastTextChange(false);
+    // }, [lastKnownFullEditorText]);
 
     const initialValue: Descendant[] = useMemo(() => {
       return [
@@ -57,6 +68,11 @@ export const BaseCopilotTextarea = React.forwardRef(
 
     const editor = useCopilotTextareaEditor();
 
+    const {
+      isDisplayed: hoveringEditorIsDisplayed,
+      setIsDisplayed: setHoveringEditorIsDisplayed,
+    } = useHoveringEditorContext();
+
     const insertText = useCallback(
       (autosuggestion: AutosuggestionState) => {
         Editor.insertText(editor, autosuggestion.text, {
@@ -73,10 +89,23 @@ export const BaseCopilotTextarea = React.forwardRef(
     } = useAutosuggestions(
       autosuggestionsConfig.debounceTime,
       autosuggestionsConfig.acceptAutosuggestionKey,
-      props.autosuggestionsFunction,
+      autosuggestionsConfig.apiConfig.autosuggestionsFunction,
       insertText,
       autosuggestionsConfig.disableWhenEmpty,
-      autosuggestionsConfig.disabled
+      autosuggestionsConfig.disabled ||
+        hoveringEditorIsDisplayed || // disable autosuggestions when the hovering editor is displayed
+        (cursorMovedSinceLastTextChange &&
+          autosuggestionsConfig.temporarilyDisableWhenMovingCursorWithoutChangingText) // disable autosuggestions when the cursor has moved since the last text change
+    );
+    const onKeyDownHandlerForHoveringEditor = useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        // if command-k, toggle the hovering editor
+        if (event.key === "k" && event.metaKey) {
+          event.preventDefault();
+          setHoveringEditorIsDisplayed(!hoveringEditorIsDisplayed);
+        }
+      },
+      [hoveringEditorIsDisplayed, setHoveringEditorIsDisplayed]
     );
 
     // sync autosuggestions state with the editor
@@ -132,8 +161,7 @@ export const BaseCopilotTextarea = React.forwardRef(
       placeholderStyle,
       value,
       onValueChange,
-      autosuggestionsConfig: autosuggestionsConfigFromProps,
-      autosuggestionsFunction,
+      baseAutosuggestionsConfig: autosuggestionsConfigFromProps,
       className,
       onChange,
       onKeyDown,
@@ -160,23 +188,33 @@ export const BaseCopilotTextarea = React.forwardRef(
         editor={editor}
         initialValue={initialValue}
         onChange={(value) => {
-          const newEditorState = getTextAroundCursor(editor);
+          const newEditorState = getTextAroundCollapsedCursor(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);
+          setLastKnownFullEditorText((prev) => {
+            if (prev !== fullEditorText) {
+              setCursorMovedSinceLastTextChange(false);
+            }
+            return fullEditorText;
+          });
           onChangeHandlerForAutocomplete(newEditorState);
 
           props.onValueChange?.(fullEditorText);
           props.onChange?.(makeSemiFakeReactTextAreaEvent(fullEditorText));
         }}
       >
+        <TrackerTextEditedSinceLastCursorMovement
+          setCursorMovedSinceLastTextChange={setCursorMovedSinceLastTextChange}
+        />
+        <HoveringToolbar apiConfig={autosuggestionsConfig.apiConfig} />
         <Editable
           renderElement={renderElementMemoized}
           renderPlaceholder={renderPlaceholderMemoized}
           onKeyDown={(event) => {
+            onKeyDownHandlerForHoveringEditor(event); // forward the event for internal use
             onKeyDownHandlerForAutocomplete(event); // forward the event for internal use
             props.onKeyDown?.(event); // forward the event for external use
           }}
@@ -213,3 +251,16 @@ function makeSemiFakeReactTextAreaEvent(
     },
   } as React.ChangeEvent<HTMLTextAreaElement>;
 }
+
+export const BaseCopilotTextarea = React.forwardRef(
+  (
+    props: BaseCopilotTextareaProps,
+    ref: React.Ref<HTMLCopilotTextAreaElement>
+  ): JSX.Element => {
+    return (
+      <HoveringEditorProvider>
+        <BaseCopilotTextareaWithHoveringContext {...props} ref={ref} />
+      </HoveringEditorProvider>
+    );
+  }
+);

package/src/components/base-copilot-textarea/track-cursor-moved-since-last-text-change.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useRef } from "react";
+import { BaseSelection } from "slate";
+import { useSlateSelector } from "slate-react";
+import { Range } from "slate";
+import { editorToText } from "../../lib/editor-to-text";
+
+interface TrackerTextEditedSinceLastCursorMovementProps {
+  setCursorMovedSinceLastTextChange: (value: boolean) => void;
+}
+export function TrackerTextEditedSinceLastCursorMovement(
+  props: TrackerTextEditedSinceLastCursorMovementProps
+): JSX.Element {
+  const cursorState: RelevantEditorState = useSlateSelector((state) => ({
+    selection: state.selection,
+    text: editorToText(state),
+  }));
+
+  const previousState = usePrevious(cursorState);
+
+  useEffect(() => {
+    if (!previousState) {
+      return;
+    }
+
+    if (cursorChangedWithoutTextChanged(previousState, cursorState)) {
+      props.setCursorMovedSinceLastTextChange(true);
+    }
+  }, [props.setCursorMovedSinceLastTextChange, cursorState]);
+
+  return <></>;
+}
+type RelevantEditorState = {
+  selection: BaseSelection;
+  text: string;
+};
+const cursorChangedWithoutTextChanged = (
+  prev: RelevantEditorState,
+  next: RelevantEditorState
+) => {
+  // Check if the selection has changed
+  const isSelectionChanged = !isSelectionEqual(prev.selection, next.selection);
+
+  // Check if the text content remains the same
+  const isTextSame = prev.text === next.text;
+
+  return isSelectionChanged && isTextSame;
+};
+const isSelectionEqual = (a: BaseSelection, b: BaseSelection) => {
+  if (!a && !b) return true;
+  if (!a || !b) return false;
+  return Range.equals(a, b);
+};
+function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current;
+}

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

@@ -5,16 +5,18 @@ import { HTMLCopilotTextAreaElement } from "../../types";
 import { BaseCopilotTextareaProps } from "../../types/base/base-copilot-textarea-props";
 import {
   AutosuggestionsConfig,
-  ChatlikeApiEndpoint,
   defaultAutosuggestionsConfig,
-} from "../../types/standard-autosuggestions";
+} from "../../types/autosuggestions-config";
 import { BaseCopilotTextarea } from "../base-copilot-textarea/base-copilot-textarea";
+import { useMakeStandardInsertionOrEditingFunction } from "../../hooks/make-autosuggestions-function/use-make-standard-insertion-function";
+import merge from "lodash.merge";
+import { AutosuggestionsConfigUserSpecified } from "../../types/autosuggestions-config/autosuggestions-config-user-specified";
 
-export interface CopilotTextareaProps extends BaseCopilotTextareaProps {
-  autosuggestionsConfig: Partial<AutosuggestionsConfig> & {
-    textareaPurpose: string;
-    apiEndpoint: ChatlikeApiEndpoint;
-  };
+// Like the base copilot textarea props,
+// but with baseAutosuggestionsConfig replaced with autosuggestionsConfig.
+export interface CopilotTextareaProps
+  extends Omit<BaseCopilotTextareaProps, "baseAutosuggestionsConfig"> {
+  autosuggestionsConfig: AutosuggestionsConfigUserSpecified;
 }
 
 export const CopilotTextarea = React.forwardRef(
@@ -22,27 +24,37 @@ export const CopilotTextarea = React.forwardRef(
     props: CopilotTextareaProps,
     ref: React.Ref<HTMLCopilotTextAreaElement>
   ): JSX.Element => {
-    const autosuggestionsConfig: AutosuggestionsConfig = {
-      ...defaultAutosuggestionsConfig,
-      ...props.autosuggestionsConfig,
-    };
+    const autosuggestionsConfig: AutosuggestionsConfig = merge(
+      defaultAutosuggestionsConfig,
+      props.autosuggestionsConfig
+    );
 
     const autosuggestionsFunction = useMakeStandardAutosuggestionFunction(
       autosuggestionsConfig.textareaPurpose,
-      autosuggestionsConfig.apiEndpoint,
-      autosuggestionsConfig.makeSystemPrompt,
-      autosuggestionsConfig.fewShotMessages,
       autosuggestionsConfig.externalContextCategories,
-      autosuggestionsConfig.forwardedParams
+      autosuggestionsConfig.chatApiConfigs.suggestionsApiConfig
     );
 
+    const insertionOrEditingFunction =
+      useMakeStandardInsertionOrEditingFunction(
+        autosuggestionsConfig.textareaPurpose,
+        autosuggestionsConfig.externalContextCategories,
+        autosuggestionsConfig.chatApiConfigs.insertionApiConfig,
+        autosuggestionsConfig.chatApiConfigs.editingApiConfig
+      );
+
     return (
       <>
         <BaseCopilotTextarea
           ref={ref}
           {...props}
-          autosuggestionsConfig={autosuggestionsConfig}
-          autosuggestionsFunction={autosuggestionsFunction}
+          baseAutosuggestionsConfig={{
+            ...autosuggestionsConfig,
+            apiConfig: {
+              insertionOrEditingFunction: insertionOrEditingFunction,
+              autosuggestionsFunction: autosuggestionsFunction,
+            },
+          }}
         />
       </>
     );

package/src/components/hovering-toolbar/hovering-editor-provider.tsx

@@ -0,0 +1,29 @@
+import React, { createContext, useState, useContext, ReactNode } from "react";
+
+interface HoveringEditorContextProps {
+  isDisplayed: boolean;
+  setIsDisplayed: (value: boolean) => void;
+}
+
+const HoveringEditorContext = createContext<HoveringEditorContextProps>({
+  isDisplayed: false,
+  setIsDisplayed: () => {},
+});
+
+interface HoveringEditorProviderProps {
+  children: ReactNode;
+}
+
+export const HoveringEditorProvider = ({
+  children,
+}: HoveringEditorProviderProps) => {
+  const [isDisplayed, setIsDisplayed] = useState(false);
+
+  return (
+    <HoveringEditorContext.Provider value={{ isDisplayed, setIsDisplayed }}>
+      {children}
+    </HoveringEditorContext.Provider>
+  );
+};
+
+export const useHoveringEditorContext = () => useContext(HoveringEditorContext);

package/src/components/hovering-toolbar/hovering-toolbar-components.tsx

@@ -0,0 +1,115 @@
+import { css, cx } from "@emotion/css";
+import React, { PropsWithChildren, Ref } from "react";
+import ReactDOM from "react-dom";
+
+interface BaseProps {
+  className: string;
+  [key: string]: unknown;
+}
+
+export const Button = React.forwardRef(
+  (
+    {
+      className,
+      active,
+      reversed,
+      ...props
+    }: PropsWithChildren<
+      {
+        active: boolean;
+        reversed: boolean;
+      } & BaseProps
+    >,
+    ref: Ref<HTMLSpanElement | null>
+  ) => (
+    <span
+      {...props}
+      ref={ref as Ref<HTMLSpanElement>}
+      className={cx(
+        className,
+        css`
+          cursor: pointer;
+          color: ${reversed
+            ? active
+              ? "white"
+              : "#aaa"
+            : active
+            ? "black"
+            : "#ccc"};
+        `
+      )}
+    />
+  )
+);
+
+export const Icon = React.forwardRef(
+  (
+    { className, ...props }: PropsWithChildren<BaseProps>,
+    ref: Ref<HTMLSpanElement | null>
+  ) => (
+    <span
+      {...props}
+      ref={ref as Ref<HTMLSpanElement>}
+      className={cx(
+        "material-icons",
+        className,
+        css`
+          font-size: 18px;
+          vertical-align: text-bottom;
+        `
+      )}
+    />
+  )
+);
+
+export const Menu = React.forwardRef(
+  (
+    { className, ...props }: PropsWithChildren<BaseProps>,
+    ref: Ref<HTMLDivElement | null>
+  ) => (
+    <div
+      {...props}
+      data-test-id="menu"
+      ref={ref as Ref<HTMLDivElement>}
+      className={cx(
+        className,
+        css`
+          & > * {
+            display: inline-block;
+          }
+
+          & > * + * {
+            margin-left: 15px;
+          }
+        `
+      )}
+    />
+  )
+);
+export const Portal = ({ children }: { children: React.ReactNode }) => {
+  return typeof document === "object"
+    ? ReactDOM.createPortal(children, document.body)
+    : null;
+};
+
+export const Toolbar = React.forwardRef(
+  (
+    { className, ...props }: PropsWithChildren<BaseProps>,
+    ref?: Ref<HTMLDivElement>
+  ) => (
+    <Menu
+      {...props}
+      ref={ref}
+      className={cx(
+        className,
+        css`
+          position: relative;
+          padding: 1px 18px 17px;
+          margin: 0 -20px;
+          border-bottom: 2px solid #eee;
+          margin-bottom: 20px;
+        `
+      )}
+    />
+  )
+);