@copilotkit/react-textarea 0.24.0 → 0.25.0

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

@@ -12,10 +12,7 @@ import {
 import { addAutocompletionsToEditor } from "../../lib/slatejs-edits/add-autocompletions";
 import { clearAutocompletionsFromEditor } from "../../lib/slatejs-edits/clear-autocompletions";
 import { replaceEditorText } from "../../lib/slatejs-edits/replace-text";
-import {
-  BaseAutosuggestionsConfig,
-  defaultBaseAutosuggestionsConfig,
-} from "../../types/base";
+import { BaseAutosuggestionsConfig, defaultBaseAutosuggestionsConfig } from "../../types/base";
 import { AutosuggestionState } from "../../types/base/autosuggestion-state";
 import { BaseCopilotTextareaProps } from "../../types/base/base-copilot-textarea-props";
 import "./base-copilot-textarea.css";
@@ -37,20 +34,15 @@ export interface HTMLCopilotTextAreaElement extends HTMLElement {
 }
 
 const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
-  (
-    props: BaseCopilotTextareaProps,
-    ref: React.Ref<HTMLCopilotTextAreaElement>
-  ): JSX.Element => {
+  (props: BaseCopilotTextareaProps, ref: React.Ref<HTMLCopilotTextAreaElement>): JSX.Element => {
     const autosuggestionsConfig: BaseAutosuggestionsConfig = {
       ...defaultBaseAutosuggestionsConfig,
       ...props.baseAutosuggestionsConfig,
     };
 
     const valueOnInitialRender = useMemo(() => props.value ?? "", []);
-    const [lastKnownFullEditorText, setLastKnownFullEditorText] =
-      useState(valueOnInitialRender);
-    const [cursorMovedSinceLastTextChange, setCursorMovedSinceLastTextChange] =
-      useState(false);
+    const [lastKnownFullEditorText, setLastKnownFullEditorText] = useState(valueOnInitialRender);
+    const [cursorMovedSinceLastTextChange, setCursorMovedSinceLastTextChange] = useState(false);
 
     // // When the editor text changes, we want to reset the `textEditedSinceLastCursorMovement` state.
     // useEffect(() => {
@@ -68,10 +60,8 @@ const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
 
     const editor = useCopilotTextareaEditor();
 
-    const {
-      isDisplayed: hoveringEditorIsDisplayed,
-      setIsDisplayed: setHoveringEditorIsDisplayed,
-    } = useHoveringEditorContext();
+    const { isDisplayed: hoveringEditorIsDisplayed, setIsDisplayed: setHoveringEditorIsDisplayed } =
+      useHoveringEditorContext();
 
     const insertText = useCallback(
       (autosuggestion: AutosuggestionState) => {
@@ -79,33 +69,43 @@ const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
           at: autosuggestion.point,
         });
       },
-      [editor]
+      [editor],
     );
 
+    const shouldDisableAutosuggestions =
+      // textarea is manually disabled:
+      autosuggestionsConfig.disabled ||
+      // hovering editor is displayed:
+      hoveringEditorIsDisplayed ||
+      // the cursor has moved since the last text change AND we are configured to disable autosuggestions in this case:
+      (cursorMovedSinceLastTextChange &&
+        autosuggestionsConfig.temporarilyDisableWhenMovingCursorWithoutChangingText);
+
     const {
       currentAutocompleteSuggestion,
       onChangeHandler: onChangeHandlerForAutocomplete,
       onKeyDownHandler: onKeyDownHandlerForAutocomplete,
     } = useAutosuggestions(
       autosuggestionsConfig.debounceTime,
-      autosuggestionsConfig.acceptAutosuggestionKey,
+      autosuggestionsConfig.shouldAcceptAutosuggestionOnKeyPress,
       autosuggestionsConfig.apiConfig.autosuggestionsFunction,
       insertText,
       autosuggestionsConfig.disableWhenEmpty,
-      autosuggestionsConfig.disabled ||
-        hoveringEditorIsDisplayed || // disable autosuggestions when the hovering editor is displayed
-        (cursorMovedSinceLastTextChange &&
-          autosuggestionsConfig.temporarilyDisableWhenMovingCursorWithoutChangingText) // disable autosuggestions when the cursor has moved since the last text change
+      shouldDisableAutosuggestions,
     );
+
     const onKeyDownHandlerForHoveringEditor = useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
-        // if command-k, toggle the hovering editor
-        if (event.key === "k" && event.metaKey) {
+        if (autosuggestionsConfig.shouldToggleHoveringEditorOnKeyPress(event)) {
           event.preventDefault();
           setHoveringEditorIsDisplayed(!hoveringEditorIsDisplayed);
         }
       },
-      [hoveringEditorIsDisplayed, setHoveringEditorIsDisplayed]
+      [
+        hoveringEditorIsDisplayed,
+        setHoveringEditorIsDisplayed,
+        autosuggestionsConfig.shouldToggleHoveringEditorOnKeyPress,
+      ],
     );
 
     // sync autosuggestions state with the editor
@@ -115,7 +115,7 @@ const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
         addAutocompletionsToEditor(
           editor,
           currentAutocompleteSuggestion.text,
-          currentAutocompleteSuggestion.point
+          currentAutocompleteSuggestion.point,
         );
       }
     }, [currentAutocompleteSuggestion]);
@@ -177,10 +177,7 @@ const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
       const baseClassName = "copilot-textarea";
       const brandingClass = disableBranding ? "no-branding" : "with-branding";
       const defaultTailwindClassName = "bg-white overflow-y-auto resize-y";
-      const mergedClassName = twMerge(
-        defaultTailwindClassName,
-        className ?? ""
-      );
+      const mergedClassName = twMerge(defaultTailwindClassName, className ?? "");
       return `${baseClassName} ${brandingClass} ${mergedClassName}`;
     })();
 
@@ -228,7 +225,7 @@ const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
         />
       </Slate>
     );
-  }
+  },
 );
 
 // Consumers of <textarea> expect a `onChange: (React.ChangeEvent<HTMLTextAreaElement>) => void` event handler to be passed in.
@@ -243,7 +240,7 @@ const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
 //
 // If this proves problematic, we can always revisit this decision.
 function makeSemiFakeReactTextAreaEvent(
-  currentText: string
+  currentText: string,
 ): React.ChangeEvent<HTMLTextAreaElement> {
   return {
     target: {
@@ -258,14 +255,11 @@ function makeSemiFakeReactTextAreaEvent(
 }
 
 export const BaseCopilotTextarea = React.forwardRef(
-  (
-    props: BaseCopilotTextareaProps,
-    ref: React.Ref<HTMLCopilotTextAreaElement>
-  ): JSX.Element => {
+  (props: BaseCopilotTextareaProps, ref: React.Ref<HTMLCopilotTextAreaElement>): JSX.Element => {
     return (
       <HoveringEditorProvider>
         <BaseCopilotTextareaWithHoveringContext {...props} ref={ref} />
       </HoveringEditorProvider>
     );
-  }
+  },
 );

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

@@ -3,16 +3,14 @@ import { RenderElementProps } from "slate-react";
 export type RenderElementFunction = (props: RenderElementProps) => JSX.Element;
 
 export function makeRenderElementFunction(
-  suggestionsStyle: React.CSSProperties
+  suggestionsStyle: React.CSSProperties,
 ): RenderElementFunction {
   return (props: RenderElementProps) => {
     switch (props.element.type) {
       case "paragraph":
         return <DefaultElement {...props} />;
       case "suggestion":
-        return (
-          <SuggestionElement {...props} suggestionsStyle={suggestionsStyle} />
-        );
+        return <SuggestionElement {...props} suggestionsStyle={suggestionsStyle} />;
     }
   };
 }
@@ -23,7 +21,7 @@ const DefaultElement = (props: RenderElementProps) => {
 const SuggestionElement = (
   props: RenderElementProps & {
     suggestionsStyle: React.CSSProperties;
-  }
+  },
 ) => {
   return (
     <span

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,
@@ -33,10 +33,7 @@ type RelevantEditorState = {
   selection: BaseSelection;
   text: string;
 };
-const cursorChangedWithoutTextChanged = (
-  prev: RelevantEditorState,
-  next: RelevantEditorState
-) => {
+const cursorChangedWithoutTextChanged = (prev: RelevantEditorState, next: RelevantEditorState) => {
   // Check if the selection has changed
   const isSelectionChanged = !isSelectionEqual(prev.selection, next.selection);
 

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

@@ -20,34 +20,27 @@ export interface CopilotTextareaProps
 }
 
 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 +57,5 @@ export const CopilotTextarea = React.forwardRef(
         />
       </>
     );
-  }
+  },
 );

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

@@ -14,9 +14,7 @@ interface HoveringEditorProviderProps {
   children: ReactNode;
 }
 
-export const HoveringEditorProvider = ({
-  children,
-}: HoveringEditorProviderProps) => {
+export const HoveringEditorProvider = ({ children }: HoveringEditorProviderProps) => {
   const [isDisplayed, setIsDisplayed] = useState(false);
 
   return (

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