simpe autocomplete impl

Author: ataibarkai

examples/next-openai/src/app/components/vacation-notes.tsx

@@ -9,6 +9,18 @@ export function VacationNotes(): JSX.Element {
       className="p-4"
       value={text}
       onChange={(value: string) => setText(value)}
+      placeholder="What are your plans for your vacation?"
+      autocompleteConfig={{
+        autocomplete: (input: string) =>
+          new Promise((resolve) => {
+            setTimeout(() => {
+              resolve(
+                `You want to go to ${input}? That's a great place to visit!`
+              );
+            }, 3000);
+          }),
+        debounceTime: 1000,
+      }}
     />
   );
 }

packages/react-textarea/src/components/copilot-textarea/copilot-textarea.tsx

@@ -15,8 +15,10 @@ import {
   withReact,
 } from "slate-react";
 import { HistoryEditor } from "slate-history";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Element } from "slate";
+import { editorToText } from "../../lib/editorToText";
+import { useAutocomplete } from "../../hooks/useAutocomplete";
 
 export type CustomEditor = BaseEditor & ReactEditor & HistoryEditor;
 
@@ -40,7 +42,7 @@ declare module "slate" {
 export interface AutocompleteConfig {
   autocomplete: (input: string) => Promise<string>;
   debounceTime?: number;
-};
+}
 
 export interface CopilotTextareaProps {
   className?: string;
@@ -81,38 +83,24 @@ export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
   const [editor] = useState(() => {
     const editor = withReact(createEditor());
     editor.onChange = () => {
-      const suggestionAwareTextComponents: SuggestionAwareText[][] =
-        editor.children.map((node) => {
-          if (Element.isElement(node)) {
-            return node.children.map((child) => {
-              return child;
-            });
-          } else {
-            return [node];
-          }
-        });
-
-      const flattened = suggestionAwareTextComponents.reduce(
-        (acc, val) => acc.concat(val),
-        []
-      );
-      const text = flattened
-        .map((textComponent) => textComponent.text)
-        .join("\n");
-
-      props.onChange?.(text);
+      props.onChange?.(editorToText(editor));
     };
     return editor;
   });
 
+  const handleAutocompleteKeyDown = useAutocomplete(
+    editor,
+    props.autocompleteConfig
+  );
+
   return (
     // Add the editable component inside the context.
     <Slate editor={editor} initialValue={initialValue}>
       <Editable
         className={props.className}
         renderElement={renderElement}
         renderLeaf={renderLeaf}
-        onKeyDown={(event) => {}}
+        onKeyDown={handleAutocompleteKeyDown}
       />
     </Slate>
   );

packages/react-textarea/src/hooks/useAutocomplete.ts

@@ -0,0 +1,40 @@
+import { useRef, useState } from "react";
+import {
+  AutocompleteConfig,
+  CustomEditor,
+} from "../components/copilot-textarea/copilot-textarea";
+import { Transforms } from "slate";
+import { editorToText } from "../lib/editorToText";
+
+export function useAutocomplete(
+  editor: CustomEditor,
+  autocompleteConfig: AutocompleteConfig
+) {
+  const [timer, setTimer] = useState<number | null>(null);
+  const waitingForSuggestionRef = useRef(false);
+
+  const appendSuggestion = (suggestion: string) => {
+    Transforms.insertText(editor, suggestion);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (timer) clearTimeout(timer);
+
+    waitingForSuggestionRef.current = false;
+
+    setTimer(
+      setTimeout(async () => {
+        waitingForSuggestionRef.current = true;
+        const suggestion = await autocompleteConfig.autocomplete(
+          editorToText(editor)
+        );
+        if (waitingForSuggestionRef.current) {
+          appendSuggestion(suggestion);
+          waitingForSuggestionRef.current = false;
+        }
+      }, autocompleteConfig.debounceTime || 0)
+    );
+  };
+
+  return handleKeyDown;
+}

packages/react-textarea/src/lib/editorToText.ts

@@ -0,0 +1,26 @@
+import { BaseEditor, Element } from "slate";
+import { HistoryEditor } from "slate-history";
+import { ReactEditor } from "slate-react";
+import { SuggestionAwareText } from "../components/copilot-textarea/copilot-textarea";
+
+export const editorToText = (
+  editor: BaseEditor & ReactEditor & HistoryEditor
+) => {
+  const suggestionAwareTextComponents: SuggestionAwareText[][] =
+    editor.children.map((node) => {
+      if (Element.isElement(node)) {
+        return node.children.map((child) => {
+          return child;
+        });
+      } else {
+        return [node];
+      }
+    });
+
+  const flattened = suggestionAwareTextComponents.reduce(
+    (acc, val) => acc.concat(val),
+    []
+  );
+  const text = flattened.map((textComponent) => textComponent.text).join("\n");
+  return text;
+};