@copilotkit/react-textarea 0.22.0 → 0.25.0

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 };

package/src/components/ui/command.tsx

@@ -16,7 +16,7 @@ const Command = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -47,7 +47,7 @@ const CommandInput = React.forwardRef<
       ref={ref}
       className={cn(
         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
@@ -62,10 +62,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn(
-      "max-h-[300px] overflow-y-auto overflow-x-hidden pb-2",
-      className
-    )}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden pb-2", className)}
     {...props}
   />
 ));
@@ -76,11 +73,7 @@ const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
 ));
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
@@ -93,7 +86,7 @@ const CommandGroup = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -121,7 +114,7 @@ const CommandItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   />
@@ -129,16 +122,10 @@ const CommandItem = React.forwardRef<
 
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
       {...props}
     />
   );

package/src/components/ui/dialog.tsx

@@ -10,10 +10,7 @@ const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({
-  className,
-  ...props
-}: DialogPrimitive.DialogPortalProps) => (
+const DialogPortal = ({ className, ...props }: DialogPrimitive.DialogPortalProps) => (
   <DialogPrimitive.Portal className={cn(className)} {...props} />
 );
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
@@ -26,7 +23,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
@@ -43,7 +40,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
-        className
+        className,
       )}
       {...props}
     >
@@ -57,29 +54,14 @@ const DialogContent = React.forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
 );
 DialogHeader.displayName = "DialogHeader";
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
     {...props}
   />
 );
@@ -91,10 +73,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
     {...props}
   />
 ));

package/src/components/ui/label.tsx

@@ -7,19 +7,14 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
 

package/src/components/ui/separator.tsx

@@ -8,24 +8,19 @@ import { cn } from "../../lib/utils";
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-);
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className,
+    )}
+    {...props}
+  />
+));
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 export { Separator };

package/src/components/ui/textarea.tsx

@@ -2,8 +2,7 @@ import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
@@ -11,13 +10,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
 Textarea.displayName = "Textarea";
 

package/src/hooks/base-copilot-textarea-implementation/use-autosuggestions.ts

@@ -16,11 +16,11 @@ export interface UseAutosuggestionsResult {
 
 export function useAutosuggestions(
   debounceTime: number,
-  acceptAutosuggestionKey: string,
+  shouldAcceptAutosuggestionOnKeyPress: (event: React.KeyboardEvent<HTMLDivElement>) => boolean,
   autosuggestionFunction: AutosuggestionsBareFunction,
   insertAutocompleteSuggestion: (suggestion: AutosuggestionState) => void,
   disableWhenEmpty: boolean,
-  disabled: boolean
+  disabled: boolean,
 ): UseAutosuggestionsResult {
   const [previousAutocompleteState, setPreviousAutocompleteState] =
     useState<EditorAutocompleteState | null>(null);
@@ -30,12 +30,9 @@ export function useAutosuggestions(
 
   const awaitForAndAppendSuggestion: (
     editorAutocompleteState: EditorAutocompleteState,
-    abortSignal: AbortSignal
+    abortSignal: AbortSignal,
   ) => Promise<void> = useCallback(
-    async (
-      editorAutocompleteState: EditorAutocompleteState,
-      abortSignal: AbortSignal
-    ) => {
+    async (editorAutocompleteState: EditorAutocompleteState, abortSignal: AbortSignal) => {
       // early return if disabled
       if (disabled) {
         return;
@@ -50,10 +47,7 @@ export function useAutosuggestions(
       }
 
       // fetch the suggestion
-      const suggestion = await autosuggestionFunction(
-        editorAutocompleteState,
-        abortSignal
-      );
+      const suggestion = await autosuggestionFunction(editorAutocompleteState, abortSignal);
 
       // We'll assume for now that the autocomplete function might or might not respect the abort signal.
       if (!suggestion || abortSignal.aborted) {
@@ -65,20 +59,12 @@ export function useAutosuggestions(
         point: editorAutocompleteState.cursorPoint,
       });
     },
-    [
-      autosuggestionFunction,
-      setCurrentAutocompleteSuggestion,
-      disableWhenEmpty,
-      disabled,
-    ]
+    [autosuggestionFunction, setCurrentAutocompleteSuggestion, disableWhenEmpty, disabled],
   );
 
   const debouncedFunction = useMemo(
-    () =>
-      new Debouncer<[editorAutocompleteState: EditorAutocompleteState]>(
-        debounceTime
-      ),
-    [debounceTime]
+    () => new Debouncer<[editorAutocompleteState: EditorAutocompleteState]>(debounceTime),
+    [debounceTime],
   );
 
   // clean current state when unmounting or disabling
@@ -94,7 +80,7 @@ export function useAutosuggestions(
       const editorStateHasChanged = !nullableCompatibleEqualityCheck(
         areEqual_autocompleteState,
         previousAutocompleteState,
-        newEditorState
+        newEditorState,
       );
       setPreviousAutocompleteState(newEditorState);
 
@@ -119,13 +105,13 @@ export function useAutosuggestions(
       debouncedFunction,
       awaitForAndAppendSuggestion,
       setCurrentAutocompleteSuggestion,
-    ]
+    ],
   );
 
   const keyDownHandler = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (currentAutocompleteSuggestion) {
-        if (event.key === acceptAutosuggestionKey) {
+        if (shouldAcceptAutosuggestionOnKeyPress(event)) {
           event.preventDefault();
           insertAutocompleteSuggestion(currentAutocompleteSuggestion);
           setCurrentAutocompleteSuggestion(null);
@@ -136,8 +122,8 @@ export function useAutosuggestions(
       currentAutocompleteSuggestion,
       setCurrentAutocompleteSuggestion,
       insertAutocompleteSuggestion,
-      acceptAutosuggestionKey,
-    ]
+      shouldAcceptAutosuggestionOnKeyPress,
+    ],
   );
 
   return {

package/src/hooks/base-copilot-textarea-implementation/use-copilot-textarea-editor.tsx

@@ -35,11 +35,7 @@ const shouldSave: ShouldSaveToHistory = (op, prev) => {
     return false;
   }
 
-  if (
-    op.type == "set_node" &&
-    "type" in op.properties &&
-    op.properties.type === excludedNodeType
-  ) {
+  if (op.type == "set_node" && "type" in op.properties && op.properties.type === excludedNodeType) {
     return false;
   }
 

package/src/hooks/base-copilot-textarea-implementation/use-populate-copilot-textarea-ref.ts

@@ -8,16 +8,13 @@ import { CustomEditor } from "../../types/base/custom-editor";
 
 export function usePopulateCopilotTextareaRef(
   editor: Editor,
-  ref: React.Ref<HTMLCopilotTextAreaElement>
+  ref: React.Ref<HTMLCopilotTextAreaElement>,
 ) {
   React.useImperativeHandle(
     ref,
     () => {
       class Combined {
-        constructor(
-          private customMethods: CustomMethods,
-          private editorHtmlElement: HTMLElement
-        ) {}
+        constructor(private customMethods: CustomMethods, private editorHtmlElement: HTMLElement) {}
 
         [key: string]: any;
 
@@ -62,11 +59,7 @@ export function usePopulateCopilotTextareaRef(
         get(target: any, propKey: keyof CustomMethods | keyof HTMLElement) {
           return target.get(target, propKey);
         },
-        set(
-          target: any,
-          propKey: keyof CustomMethods | keyof HTMLElement,
-          value: any
-        ) {
+        set(target: any, propKey: keyof CustomMethods | keyof HTMLElement, value: any) {
           return target.set(target, propKey, value);
         },
       };
@@ -96,6 +89,6 @@ export function usePopulateCopilotTextareaRef(
       const combined = new Combined(customMethods, editorHtmlElement);
       return new Proxy(combined, handler);
     },
-    [editor]
+    [editor],
   );
 }

package/src/hooks/make-autosuggestions-function/use-make-standard-autosuggestions-function.tsx

@@ -23,8 +23,8 @@ import { SuggestionsApiConfig } from "../../types/autosuggestions-config/suggest
  */
 export function useMakeStandardAutosuggestionFunction(
   textareaPurpose: string,
-  contextCategories: string[] | undefined,
-  apiConfig: SuggestionsApiConfig
+  contextCategories: string[],
+  apiConfig: SuggestionsApiConfig,
 ): AutosuggestionsBareFunction {
   const { getContextString, copilotApiConfig } = useContext(CopilotContext);
 
@@ -36,7 +36,7 @@ export function useMakeStandardAutosuggestionFunction(
             role: "system",
             content: apiConfig.makeSystemPrompt(
               textareaPurpose,
-              getContextString([], contextCategories)
+              getContextString([], contextCategories),
             ),
           },
           ...apiConfig.fewShotMessages,
@@ -52,13 +52,8 @@ export function useMakeStandardAutosuggestionFunction(
           },
         ];
 
-        const apiEndpoint =
-          ChatlikeApiEndpoint.fromCopilotApiConfig(copilotApiConfig);
-        const stream = await apiEndpoint.run(
-          abortSignal,
-          messages,
-          apiConfig.forwardedParams
-        );
+        const apiEndpoint = ChatlikeApiEndpoint.fromCopilotApiConfig(copilotApiConfig);
+        const stream = await apiEndpoint.run(abortSignal, messages, apiConfig.forwardedParams);
 
         // read the stream:
         const reader = stream.getReader();
@@ -77,6 +72,6 @@ export function useMakeStandardAutosuggestionFunction(
 
       return res;
     },
-    [apiConfig, getContextString, contextCategories, textareaPurpose]
+    [apiConfig, getContextString, contextCategories, textareaPurpose],
   );
 }