@copilotkit/react-textarea 0.24.0 → 0.26.0-alpha.0

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

@@ -1,11 +1,9 @@
 import { RenderElementProps, RenderPlaceholderProps } from "slate-react";
 
-export type RenderPlaceholderFunction = (
-  props: RenderPlaceholderProps
-) => JSX.Element;
+export type RenderPlaceholderFunction = (props: RenderPlaceholderProps) => JSX.Element;
 
 export function makeRenderPlaceholderFunction(
-  placeholderStyle?: React.CSSProperties
+  placeholderStyle?: React.CSSProperties,
 ): RenderPlaceholderFunction {
   return (props: RenderPlaceholderProps) => {
     const { style, ...restAttributes } = props.attributes;

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

@@ -8,7 +8,7 @@ interface TrackerTextEditedSinceLastCursorMovementProps {
   setCursorMovedSinceLastTextChange: (value: boolean) => void;
 }
 export function TrackerTextEditedSinceLastCursorMovement(
-  props: TrackerTextEditedSinceLastCursorMovementProps
+  props: TrackerTextEditedSinceLastCursorMovementProps,
 ): JSX.Element {
   const cursorState: RelevantEditorState = useSlateSelector((state) => ({
     selection: state.selection,
@@ -29,14 +29,16 @@ export function TrackerTextEditedSinceLastCursorMovement(
 
   return <></>;
 }
+
 type RelevantEditorState = {
   selection: BaseSelection;
   text: string;
 };
+
 const cursorChangedWithoutTextChanged = (
   prev: RelevantEditorState,
-  next: RelevantEditorState
-) => {
+  next: RelevantEditorState,
+): boolean => {
   // Check if the selection has changed
   const isSelectionChanged = !isSelectionEqual(prev.selection, next.selection);
 
@@ -45,11 +47,28 @@ const cursorChangedWithoutTextChanged = (
 
   return isSelectionChanged && isTextSame;
 };
+
 const isSelectionEqual = (a: BaseSelection, b: BaseSelection) => {
   if (!a && !b) return true;
   if (!a || !b) return false;
   return Range.equals(a, b);
 };
+
+/**
+ * Easily keep track of the *previous* value of a variable.
+ *
+ * Example:
+ * ```
+ * const [count, setCount] = useState(0);
+ * const prevCount = usePrevious(count);
+ *
+ * useEffect(() => {
+ *  if (count > prevCount) {
+ *   console.log('Now I know that count is bigger than before');
+ * }
+ * }, [count, prevCount]);
+ * ```
+ */
 function usePrevious<T>(value: T): T | undefined {
   const ref = useRef<T>();
 

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

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 
 export function useAddBrandingCss(
   suggestionStyleAugmented: React.CSSProperties,
-  disableBranding: boolean | undefined
+  disableBranding: boolean | undefined,
 ) {
   const cssSelector = ".copilot-textarea.with-branding";
   useEffect(() => {
@@ -18,9 +18,7 @@ export function useAddBrandingCss(
     // Build the CSS string dynamically
     let dynamicStyles = Object.entries(suggestionStyleAugmented)
       .map(([key, value]) => {
-        const kebabCaseKey = key
-          .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
-          .toLowerCase();
+        const kebabCaseKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
         return `${kebabCaseKey}: ${value};`;
       })
       .join(" ");

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

@@ -19,35 +19,31 @@ export interface CopilotTextareaProps
   autosuggestionsConfig: AutosuggestionsConfigUserSpecified;
 }
 
+/**
+ * A copilot textarea that uses the standard autosuggestions function.
+ */
 export const CopilotTextarea = React.forwardRef(
-  (
-    props: CopilotTextareaProps,
-    ref: React.Ref<HTMLCopilotTextAreaElement>
-  ): JSX.Element => {
+  (props: CopilotTextareaProps, ref: React.Ref<HTMLCopilotTextAreaElement>): JSX.Element => {
     // separate the AutosuggestionsConfigUserSpecified from the rest of the props
-    const {
-      autosuggestionsConfig: autosuggestionsConfigUserSpecified,
-      ...forwardedProps
-    } = props;
+    const { autosuggestionsConfig: autosuggestionsConfigUserSpecified, ...forwardedProps } = props;
 
     const autosuggestionsConfig: AutosuggestionsConfig = merge(
       defaultAutosuggestionsConfig,
-      autosuggestionsConfigUserSpecified
+      autosuggestionsConfigUserSpecified,
     );
 
     const autosuggestionsFunction = useMakeStandardAutosuggestionFunction(
       autosuggestionsConfig.textareaPurpose,
       autosuggestionsConfig.contextCategories,
-      autosuggestionsConfig.chatApiConfigs.suggestionsApiConfig
+      autosuggestionsConfig.chatApiConfigs.suggestionsApiConfig,
     );
 
-    const insertionOrEditingFunction =
-      useMakeStandardInsertionOrEditingFunction(
-        autosuggestionsConfig.textareaPurpose,
-        autosuggestionsConfig.contextCategories,
-        autosuggestionsConfig.chatApiConfigs.insertionApiConfig,
-        autosuggestionsConfig.chatApiConfigs.editingApiConfig
-      );
+    const insertionOrEditingFunction = useMakeStandardInsertionOrEditingFunction(
+      autosuggestionsConfig.textareaPurpose,
+      autosuggestionsConfig.contextCategories,
+      autosuggestionsConfig.chatApiConfigs.insertionApiConfig,
+      autosuggestionsConfig.chatApiConfigs.editingApiConfig,
+    );
 
     return (
       <>
@@ -64,5 +60,5 @@ export const CopilotTextarea = React.forwardRef(
         />
       </>
     );
-  }
+  },
 );

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

@@ -10,14 +10,16 @@ const HoveringEditorContext = createContext<HoveringEditorContextProps>({
   setIsDisplayed: () => {},
 });
 
-interface HoveringEditorProviderProps {
+export interface HoveringEditorProviderProps {
   children: ReactNode;
 }
 
-export const HoveringEditorProvider = ({
-  children,
-}: HoveringEditorProviderProps) => {
-  const [isDisplayed, setIsDisplayed] = useState(false);
+/**
+ * A context provider for the hovering editor over the `CopilotTextarea`
+ * (used to edit and insert text into the `CopilotTextarea`).
+ */
+export const HoveringEditorProvider: React.FC<HoveringEditorProviderProps> = ({ children }) => {
+  const [isDisplayed, setIsDisplayed] = useState<boolean>(false);
 
   return (
     <HoveringEditorContext.Provider value={{ isDisplayed, setIsDisplayed }}>

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

@@ -20,7 +20,7 @@ export const Button = React.forwardRef(
         reversed: boolean;
       } & BaseProps
     >,
-    ref: Ref<HTMLSpanElement | null>
+    ref: Ref<HTMLSpanElement | null>,
   ) => (
     <span
       {...props}
@@ -29,24 +29,15 @@ export const Button = React.forwardRef(
         className,
         css`
           cursor: pointer;
-          color: ${reversed
-            ? active
-              ? "white"
-              : "#aaa"
-            : active
-            ? "black"
-            : "#ccc"};
-        `
+          color: ${reversed ? (active ? "white" : "#aaa") : active ? "black" : "#ccc"};
+        `,
       )}
     />
-  )
+  ),
 );
 
 export const Icon = React.forwardRef(
-  (
-    { className, ...props }: PropsWithChildren<BaseProps>,
-    ref: Ref<HTMLSpanElement | null>
-  ) => (
+  ({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<HTMLSpanElement | null>) => (
     <span
       {...props}
       ref={ref as Ref<HTMLSpanElement>}
@@ -56,17 +47,14 @@ export const Icon = React.forwardRef(
         css`
           font-size: 18px;
           vertical-align: text-bottom;
-        `
+        `,
       )}
     />
-  )
+  ),
 );
 
 export const Menu = React.forwardRef(
-  (
-    { className, ...props }: PropsWithChildren<BaseProps>,
-    ref: Ref<HTMLDivElement | null>
-  ) => (
+  ({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<HTMLDivElement | null>) => (
     <div
       {...props}
       data-test-id="menu"
@@ -81,22 +69,17 @@ export const Menu = React.forwardRef(
           & > * + * {
             margin-left: 15px;
           }
-        `
+        `,
       )}
     />
-  )
+  ),
 );
 export const Portal = ({ children }: { children: React.ReactNode }) => {
-  return typeof document === "object"
-    ? ReactDOM.createPortal(children, document.body)
-    : null;
+  return typeof document === "object" ? ReactDOM.createPortal(children, document.body) : null;
 };
 
 export const Toolbar = React.forwardRef(
-  (
-    { className, ...props }: PropsWithChildren<BaseProps>,
-    ref?: Ref<HTMLDivElement>
-  ) => (
+  ({ className, ...props }: PropsWithChildren<BaseProps>, ref?: Ref<HTMLDivElement>) => (
     <Menu
       {...props}
       ref={ref}
@@ -108,8 +91,8 @@ export const Toolbar = React.forwardRef(
           margin: 0 -20px;
           border-bottom: 2px solid #eee;
           margin-bottom: 20px;
-        `
+        `,
       )}
     />
-  )
+  ),
 );

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

@@ -20,9 +20,7 @@ export interface HoveringToolbarProps {
   hoverMenuClassname: string | undefined;
 }
 
-export const HoveringToolbar: (
-  props: HoveringToolbarProps
-) => JSX.Element | null = (props) => {
+export const HoveringToolbar: (props: HoveringToolbarProps) => JSX.Element | null = (props) => {
   const ref = useRef<HTMLDivElement>(null);
   const editor = useSlate();
   const selection = useSlateSelection();
@@ -59,20 +57,14 @@ export const HoveringToolbar: (
     // 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
-    ) {
+    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;
+    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;
@@ -81,11 +73,7 @@ export const HoveringToolbar: (
     }
 
     let left =
-      rect.left +
-      window.scrollX -
-      el.offsetWidth / 2 +
-      rect.width / 2 +
-      horizontalOffsetFromCorner;
+      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;

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

@@ -8,13 +8,7 @@ import { SourceSearchBox } from "../../source-search-box/source-search-box";
 import { DocumentPointer } from "@copilotkit/react-core";
 import { Button } from "../../ui/button";
 import { Label } from "../../ui/label";
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 
 import { streamPromiseFlatten } from "../../../lib/stream-promise-flatten";
 import { CopilotContext } from "@copilotkit/react-core";
@@ -31,9 +25,7 @@ export interface HoveringInsertionPromptBoxCoreProps {
   contextCategories: string[];
 }
 
-export const HoveringInsertionPromptBoxCore: React.FC<
-  HoveringInsertionPromptBoxCoreProps
-> = ({
+export const HoveringInsertionPromptBoxCore: React.FC<HoveringInsertionPromptBoxCoreProps> = ({
   performInsertion,
   state,
   insertionOrEditingFunction,
@@ -42,13 +34,13 @@ export const HoveringInsertionPromptBoxCore: React.FC<
   const { getDocumentsContext } = useContext(CopilotContext);
 
   const [editSuggestion, setEditSuggestion] = useState<string>("");
-  const [suggestionIsLoading, setSuggestionIsLoading] =
-    useState<boolean>(false);
+  const [suggestionIsLoading, setSuggestionIsLoading] = useState<boolean>(false);
 
   const [adjustmentPrompt, setAdjustmentPrompt] = useState<string>("");
 
-  const [generatingSuggestion, setGeneratingSuggestion] =
-    useState<ReadableStream<string> | null>(null);
+  const [generatingSuggestion, setGeneratingSuggestion] = useState<ReadableStream<string> | null>(
+    null,
+  );
 
   const adjustmentTextAreaRef = useRef<HTMLTextAreaElement>(null);
   const suggestionTextAreaRef = useRef<HTMLTextAreaElement>(null);
@@ -97,8 +89,7 @@ export const HoveringInsertionPromptBoxCore: React.FC<
 
           // Scroll to the bottom of the textarea. We call this here to make sure scroll-to-bottom is synchronous with the state update.
           if (suggestionTextAreaRef.current) {
-            suggestionTextAreaRef.current.scrollTop =
-              suggestionTextAreaRef.current.scrollHeight;
+            suggestionTextAreaRef.current.scrollTop = suggestionTextAreaRef.current.scrollHeight;
           }
           return newSuggestion;
         });
@@ -141,10 +132,10 @@ export const HoveringInsertionPromptBoxCore: React.FC<
       modificationState,
       adjustmentPrompt,
       filePointers,
-      new AbortController().signal
+      new AbortController().signal,
     );
     const adjustmentSuggestionTextStream = streamPromiseFlatten(
-      adjustmentSuggestionTextStreamPromise
+      adjustmentSuggestionTextStreamPromise,
     );
 
     setGeneratingSuggestion(adjustmentSuggestionTextStream);
@@ -255,19 +246,14 @@ export const HoveringInsertionPromptBoxCore: React.FC<
     <div className="w-full flex flex-col items-start relative gap-2">
       {AdjustmentPromptComponent}
       {filePointers.length > 0 && (
-        <IncludedFilesPreview
-          includedFiles={filePointers}
-          setIncludedFiles={setFilePointers}
-        />
+        <IncludedFilesPreview includedFiles={filePointers} setIncludedFiles={setFilePointers} />
       )}
       {sourceSearchWord !== undefined && (
         <SourceSearchBox
           searchTerm={sourceSearchWord}
           suggestedFiles={suggestedFiles}
           onSelectedFile={(filePointer) => {
-            setAdjustmentPrompt(
-              adjustmentPrompt.replace(new RegExp(`@${sourceSearchWord}$`), "")
-            );
+            setAdjustmentPrompt(adjustmentPrompt.replace(new RegExp(`@${sourceSearchWord}$`), ""));
             setFilePointers((prev) => [...prev, filePointer]);
 
             // focus back on the adjustment prompt, and move the cursor to the end

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

@@ -23,9 +23,7 @@ export const IncludedFilesPreview: React.FC<IncludedFilesPreviewProps> = ({
               key={`file-${filePointer.sourceApplication}.${filePointer.name}`}
               filePointer={filePointer}
               onDelete={() => {
-                setIncludedFiles((prev) =>
-                  prev.filter((fp) => fp !== filePointer)
-                );
+                setIncludedFiles((prev) => prev.filter((fp) => fp !== filePointer));
               }}
             />
           );
@@ -40,10 +38,7 @@ export interface FileChipPreviewProp {
   onDelete: () => void;
 }
 
-export const FileChipPreview: React.FC<FileChipPreviewProp> = ({
-  filePointer,
-  onDelete,
-}) => {
+export const FileChipPreview: React.FC<FileChipPreviewProp> = ({ filePointer, onDelete }) => {
   return (
     <Chip
       label={filePointer.name}

package/src/components/manual-ui/chip-with-icon.tsx

@@ -6,21 +6,12 @@ export interface ChipWithIconProps {
   iconUrl: string;
 }
 
-export const ChipWithIcon: React.FC<ChipWithIconProps> = ({
-  label,
-  onDelete,
-  iconUrl,
-}) => {
+export const ChipWithIcon: React.FC<ChipWithIconProps> = ({ label, onDelete, iconUrl }) => {
   return (
     <span className="inline-flex items-center px-3 py-1 rounded-full bg-slate-200 text-sm font-medium text-white">
-      {iconUrl && (
-        <img src={iconUrl} alt="icon" className="w-4 h-4 rounded-full mr-2" />
-      )}
+      {iconUrl && <img src={iconUrl} alt="icon" className="w-4 h-4 rounded-full mr-2" />}
       {label}
-      <button
-        className="ml-2 text-white hover:text-gray-200 focus:outline-none"
-        onClick={onDelete}
-      >
+      <button className="ml-2 text-white hover:text-gray-200 focus:outline-none" onClick={onDelete}>
         x
       </button>
     </span>

package/src/components/source-search-box/source-search-box.tsx

@@ -11,14 +11,7 @@ import {
   CommandShortcut,
 } from "../ui/command";
 
-import {
-  Calculator,
-  Calendar,
-  CreditCard,
-  Settings,
-  Smile,
-  User,
-} from "lucide-react";
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "lucide-react";
 
 import { DocumentPointer } from "@copilotkit/react-core";
 
@@ -117,10 +110,7 @@ export function Logo({
   height: string;
 }) {
   return (
-    <div
-      className="flex items-center justify-center"
-      style={{ width: width, height: height }}
-    >
+    <div className="flex items-center justify-center" style={{ width: width, height: height }}>
       {children}
     </div>
   );

package/src/components/ui/button.tsx

@@ -10,12 +10,9 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
@@ -30,7 +27,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -43,13 +40,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
     );
-  }
+  },
 );
 Button.displayName = "Button";
 

package/src/components/ui/card.tsx

@@ -2,85 +2,55 @@ import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
-    {...props}
-  />
-));
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+      {...props}
+    />
+  ),
+);
 Card.displayName = "Card";
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-));
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
 CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-));
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  ),
+);
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
+  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
 ));
 CardDescription.displayName = "CardDescription";
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-));
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  ),
+);
 CardContent.displayName = "CardContent";
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-));
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
 CardFooter.displayName = "CardFooter";
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-};
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };