@copilotkit/react-textarea 0.0.0-feat-dynamic-copilotcloud-qa-20250117190454

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

@@ -0,0 +1,210 @@
+/**
+ * <br/>
+ * <img src="/images/CopilotTextarea.gif" width="500" />
+ *
+ * `<CopilotTextarea>` is a React component that acts as a drop-in replacement for the standard `<textarea>`,
+ *  offering enhanced autocomplete features powered by AI. It is context-aware, integrating seamlessly with the
+ * [`useCopilotReadable`](/reference/hooks/useCopilotReadable) hook to provide intelligent suggestions based on the application context.
+ *
+ * In addition, it provides a hovering editor window (available by default via `Cmd + K` on Mac and `Ctrl + K` on Windows) that allows the user to
+ * suggest changes to the text, for example providing a summary or rephrasing the text.
+ *
+ * ## Example
+ *
+ * ```tsx
+ * import { CopilotTextarea } from '@copilotkit/react-textarea';
+ * import "@copilotkit/react-textarea/styles.css";
+ *
+ * <CopilotTextarea
+ *   autosuggestionsConfig={{
+ *     textareaPurpose:
+ *      "the body of an email message",
+ *     chatApiConfigs: {},
+ *   }}
+ * />
+ * ```
+ *
+ * ## Usage
+ *
+ * ### Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-textarea](https://npmjs.com/package/@copilotkit/react-textarea) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-textarea"\
+ * npm install @copilotkit/react-core @copilotkit/react-textarea
+ * ```
+ *
+ * ### Usage
+ *
+ * Use the CopilotTextarea component in your React application similarly to a standard `<textarea />`,
+ * with additional configurations for AI-powered features.
+ *
+ * For example:
+ *
+ * ```tsx
+ * import { useState } from "react";
+ * import { CopilotTextarea } from "@copilotkit/react-textarea";
+ * import "@copilotkit/react-textarea/styles.css";
+ *
+ * export function ExampleComponent() {
+ *   const [text, setText] = useState("");
+ *
+ *   return (
+ *     <CopilotTextarea
+ *       className="custom-textarea-class"
+ *       value={text}
+ *       onValueChange={(value: string) => setText(value)}
+ *       placeholder="Enter your text here..."
+ *       autosuggestionsConfig={{
+ *         textareaPurpose: "Provide context or purpose of the textarea.",
+ *         chatApiConfigs: {
+ *           suggestionsApiConfig: {
+ *             maxTokens: 20,
+ *             stop: [".", "?", "!"],
+ *           },
+ *         },
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ### Look & Feel
+ *
+ * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
+ * ```tsx title="YourRootComponent.tsx"
+ * ...
+ * import "@copilotkit/react-textarea/styles.css"; // [!code highlight]
+ *
+ * export function YourRootComponent() {
+ *   return (
+ *     <CopilotKit>
+ *       ...
+ *     </CopilotKit>
+ *   );
+ * }
+ * ```
+ * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
+ * */
+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,
+  defaultAutosuggestionsConfig,
+} 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";
+
+// Like the base copilot textarea props,
+// but with baseAutosuggestionsConfig replaced with autosuggestionsConfig.
+export interface CopilotTextareaProps
+  extends Omit<BaseCopilotTextareaProps, "baseAutosuggestionsConfig"> {
+  /**
+   * Configuration settings for the autosuggestions feature.
+   * For full reference, [check the interface on GitHub](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/base/base-copilot-textarea-props.tsx#L8).
+   *
+   * <PropertyReference name="textareaPurpose" type="string" required={true} >
+   *   The purpose of the text area in plain text.
+   *
+   *   Example: *"The body of the email response"*
+   * </PropertyReference>
+   *
+   * <PropertyReference name="chatApiConfigs" type="ChatApiConfigs" >
+   *   The chat API configurations.
+   *
+   *   <strong>NOTE:</strong> You must provide specify at least one of `suggestionsApiConfig` or `insertionApiConfig`.
+   *
+   *   <PropertyReference name="suggestionsApiConfig" type="SuggestionsApiConfig">
+   *       For full reference, please [click here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/autosuggestions-config/suggestions-api-config.tsx#L4).
+   *   </PropertyReference>
+   *   <PropertyReference name="insertionApiConfig" type="InsertionApiConfig">
+   *       For full reference, please [click here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-textarea/src/types/autosuggestions-config/insertions-api-config.tsx#L4).
+   *   </PropertyReference>
+   * </PropertyReference>
+   *
+   * <PropertyReference name="disabled" type="boolean" >
+   *   Whether the textarea is disabled.
+   * </PropertyReference>
+   *
+   * <PropertyReference name="disableBranding" type="boolean" >
+   *   Whether to disable the CopilotKit branding.
+   * </PropertyReference>
+   *
+   * <PropertyReference name="placeholderStyle" type="React.CSSProperties" >
+   *   Specifies the CSS styles to apply to the placeholder text.
+   * </PropertyReference>
+   *
+   * <PropertyReference name="suggestionsStyle" type="React.CSSProperties" >
+   *   Specifies the CSS styles to apply to the suggestions list.
+   * </PropertyReference>
+   *
+   * <PropertyReference name="hoverMenuClassname" type="string" >
+   *   A class name to apply to the editor popover window.
+   * </PropertyReference>
+   *
+   * <PropertyReference name="value" type="string" >
+   *   The initial value of the textarea. Can be controlled via `onValueChange`.
+   * </PropertyReference>
+   *
+   * <PropertyReference name="onValueChange" type="(value: string) => void" >
+   *   Callback invoked when the value of the textarea changes.
+   * </PropertyReference>
+   *
+   * <PropertyReference name="onChange" type="(event: React.ChangeEvent<HTMLTextAreaElement>) => void" >
+   *   Callback invoked when a `change` event is triggered on the textarea element.
+   * </PropertyReference>
+   *
+   * <PropertyReference name="shortcut" type="string" >
+   *   The shortcut to use to open the editor popover window. Default is `"Cmd-k"`.
+   * </PropertyReference>
+   */
+  autosuggestionsConfig: AutosuggestionsConfigUserSpecified;
+}
+
+/**
+ * A copilot textarea that uses the standard autosuggestions function.
+ */
+export const CopilotTextarea = React.forwardRef(
+  (props: CopilotTextareaProps, ref: React.Ref<HTMLCopilotTextAreaElement>) => {
+    // separate the AutosuggestionsConfigUserSpecified from the rest of the props
+    const { autosuggestionsConfig: autosuggestionsConfigUserSpecified, ...forwardedProps } = props;
+
+    const autosuggestionsConfig: AutosuggestionsConfig = merge(
+      defaultAutosuggestionsConfig,
+      autosuggestionsConfigUserSpecified,
+    );
+
+    const autosuggestionsFunction = useMakeStandardAutosuggestionFunction(
+      autosuggestionsConfig.textareaPurpose,
+      autosuggestionsConfig.contextCategories,
+      autosuggestionsConfig.chatApiConfigs.suggestionsApiConfig,
+    );
+
+    const insertionOrEditingFunction = useMakeStandardInsertionOrEditingFunction(
+      autosuggestionsConfig.textareaPurpose,
+      autosuggestionsConfig.contextCategories,
+      autosuggestionsConfig.chatApiConfigs.insertionApiConfig,
+      autosuggestionsConfig.chatApiConfigs.editingApiConfig,
+    );
+
+    return (
+      <>
+        <BaseCopilotTextarea
+          ref={ref}
+          {...forwardedProps}
+          baseAutosuggestionsConfig={{
+            ...autosuggestionsConfig,
+            apiConfig: {
+              insertionOrEditingFunction: insertionOrEditingFunction,
+              autosuggestionsFunction: autosuggestionsFunction,
+            },
+          }}
+        />
+      </>
+    );
+  },
+);

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

@@ -0,0 +1,31 @@
+import { createContext, useState, useContext, ReactNode } from "react";
+
+interface HoveringEditorContextProps {
+  isDisplayed: boolean;
+  setIsDisplayed: (value: boolean) => void;
+}
+
+const HoveringEditorContext = createContext<HoveringEditorContextProps>({
+  isDisplayed: false,
+  setIsDisplayed: () => {},
+});
+
+export interface HoveringEditorProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * A context provider for the hovering editor over the `CopilotTextarea`
+ * (used to edit and insert text into the `CopilotTextarea`).
+ */
+export const HoveringEditorProvider = ({ children }: HoveringEditorProviderProps) => {
+  const [isDisplayed, setIsDisplayed] = useState<boolean>(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,100 @@
+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>) => {
+    return (
+      <div
+        {...props}
+        data-testid="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;
+        `,
+      )}
+    />
+  ),
+);

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

@@ -0,0 +1,151 @@
+import { useEffect, useRef, useState } from "react";
+import { Editor, Location, Transforms } from "slate";
+import { useSlate, useSlateSelection } from "slate-react";
+import { HoveringInsertionPromptBox } from "./text-insertion-prompt-box";
+import { 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;
+  contextCategories: string[];
+  hoverMenuClassname: string | undefined;
+}
+
+export const HoveringToolbar = (props: HoveringToolbarProps) => {
+  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 || domSelection.rangeCount === 0) {
+      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.position = "absolute";
+
+    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={
+          "copilot-kit-textarea-css-scope " +
+          (props.hoverMenuClassname ||
+            "p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700")
+        }
+        data-testid="hovering-toolbar"
+      >
+        {isDisplayed && selection && (
+          <HoveringInsertionPromptBox
+            editorState={editorState(editor, selection)}
+            apiConfig={props.apiConfig}
+            closeWindow={() => {
+              setIsDisplayed(false);
+            }}
+            performInsertion={(insertedText) => {
+              // replace the selection with the inserted text
+              Transforms.delete(editor, { at: selection });
+              Transforms.insertText(editor, insertedText, {
+                at: selection,
+              });
+              setIsDisplayed(false);
+            }}
+            contextCategories={props.contextCategories}
+          />
+        )}
+      </Menu>
+    </Portal>
+  );
+};
+
+function editorState(editor: Editor, selection: Location): EditingEditorState {
+  const textAroundCursor = getTextAroundSelection(editor);
+  if (textAroundCursor) {
+    return textAroundCursor;
+  }
+
+  return {
+    textBeforeCursor: getFullEditorTextWithNewlines(editor),
+    textAfterCursor: "",
+    selectedText: "",
+  };
+}