@copilotkit/react-textarea 0.17.0 → 0.19.0-alpha.0

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

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

package/src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback, useState } from "react";
+import {
+  State_SuggestionAppearing,
+  SuggestionAppearing,
+} from "./mode-suggestion-appearing";
+import { PreSuggestion, State_PreSuggestion } from "./mode-pre-suggestion";
+import {
+  EditingEditorState,
+  InsertionEditorApiConfig,
+} from "../../../types/base/autosuggestions-bare-function";
+
+type InsertionPromptState = State_PreSuggestion | State_SuggestionAppearing;
+
+export interface Props {
+  editorState: EditingEditorState;
+  apiConfig: InsertionEditorApiConfig;
+  performInsertion: (insertedText: string) => void;
+  closeWindow: () => void;
+}
+
+export const HoveringInsertionPromptBox: React.FC<Props> = (props) => {
+  const [insertionPrompt, setInsertionPrompt] = useState<string>("");
+  const [mode, setMode] = useState<InsertionPromptState>({
+    type: "pre-suggestion",
+  });
+
+  const handleGeneratedText = useCallback(
+    (generatingText: ReadableStream<string>) => {
+      setMode({
+        type: "suggestion-appearing",
+        initialSuggestion: {
+          editorState: props.editorState,
+          adjustmentPrompt: insertionPrompt,
+          generatingSuggestion: generatingText,
+        },
+      });
+    },
+    [setMode, insertionPrompt]
+  );
+
+  const goBack = () => {
+    setMode({ type: "pre-suggestion" });
+  };
+
+  return (
+    <div className="flex flex-col justify-center items-center space-y-4 rounded-md border shadow-lg p-4 border-gray- bg-white" style={{width: "30rem"}}>
+      {mode.type === "pre-suggestion" ? (
+        <PreSuggestion
+          {...props}
+          insertionOrEditingFunction={
+            props.apiConfig.insertionOrEditingFunction
+          }
+          insertionOrEditingPrompt={insertionPrompt}
+          setInsertionOrEditingPrompt={setInsertionPrompt}
+          onGeneratedText={handleGeneratedText}
+        />
+      ) : (
+        <SuggestionAppearing
+          {...props}
+          state={mode}
+          goBack={goBack}
+          insertionOrEditingFunction={
+            props.apiConfig.insertionOrEditingFunction
+          }
+          onGeneratedText={handleGeneratedText}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/hovering-toolbar/text-insertion-prompt-box/index.ts

@@ -0,0 +1,2 @@
+export { HoveringInsertionPromptBox } from "./hovering-insertion-prompt-box";
+export type { Props } from "./hovering-insertion-prompt-box";

package/src/components/hovering-toolbar/text-insertion-prompt-box/mode-pre-suggestion.tsx

@@ -0,0 +1,83 @@
+import useAutosizeTextArea from "../../../hooks/misc/use-autosize-textarea";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  EditingEditorState,
+  Generator_InsertionOrEditingSuggestion,
+} from "../../../types/base/autosuggestions-bare-function";
+
+export type State_PreSuggestion = {
+  type: "pre-suggestion";
+};
+
+export interface PreSuggestionProps {
+  editorState: EditingEditorState;
+  insertionOrEditingFunction: Generator_InsertionOrEditingSuggestion;
+  onGeneratedText: (generatedText: ReadableStream<string>) => void;
+
+  insertionOrEditingPrompt: string;
+  setInsertionOrEditingPrompt: (value: string) => void;
+}
+
+export const PreSuggestion: React.FC<PreSuggestionProps> = ({
+  editorState,
+  insertionOrEditingFunction: insertionSuggestion,
+  onGeneratedText,
+  insertionOrEditingPrompt: insertionPrompt,
+  setInsertionOrEditingPrompt: setInsertionPrompt,
+}) => {
+  const [loading, setLoading] = useState(false);
+
+  const promptTextAreaRef = useRef<HTMLTextAreaElement>(null);
+  useAutosizeTextArea(promptTextAreaRef, insertionPrompt);
+
+  // initially focus on the prompt text area
+  useEffect(() => {
+    promptTextAreaRef.current?.focus();
+  }, []);
+
+  const generateText = async (abortSignal?: AbortSignal) => {
+    // don't generate text if the prompt is empty
+    if (!insertionPrompt.trim()) {
+      return;
+    }
+
+    setLoading(true);
+    const insertionSuggestionTextStream = await insertionSuggestion(
+      editorState,
+      insertionPrompt,
+      abortSignal || new AbortController().signal
+    );
+    onGeneratedText(insertionSuggestionTextStream);
+
+    setLoading(false);
+  };
+
+  return (
+    <div className="flex flex-col justify-center items-start gap-2">
+      <textarea
+        ref={promptTextAreaRef}
+        value={insertionPrompt}
+        onChange={(e) => setInsertionPrompt(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && e.shiftKey) {
+            e.preventDefault();
+            setInsertionPrompt(insertionPrompt + "\n");
+          } else if (e.key === "Enter") {
+            e.preventDefault();
+            generateText();
+          }
+        }}
+        placeholder="Describe the text you'd like to insert..."
+        className="w-full bg-slate-100 h-auto text-sm p-2 rounded-md resize-none overflow-visible focus:outline-none focus:ring-0 focus:border-none"
+        rows={1}
+      />
+      <button
+        disabled={loading || !insertionPrompt.trim()}
+        onClick={() => generateText()}
+        className="w-full py-2 px-4 rounded-md text-white bg-blue-500 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+      >
+        {loading ? "Loading..." : "Generate Text"}
+      </button>
+    </div>
+  );
+};