@copilotkit/react-ui 0.11.0 → 0.12.0

package/dist/components/sidebar/copilot-sidebar.mjs

@@ -1,23 +1,23 @@
-export { CopilotSidebar } from '../../chunk-7KPMJBGH.mjs';
-import '../../chunk-2NO6SF5H.mjs';
-import '../../chunk-VSNDSL6W.mjs';
-import '../../chunk-KXJV37FS.mjs';
-import '../../chunk-LMCFSE4V.mjs';
-import '../../chunk-DOMJCSI6.mjs';
-import '../../chunk-ZB6JHNDT.mjs';
-import '../../chunk-HKSY5T7Y.mjs';
-import '../../chunk-6LRNF2VU.mjs';
-import '../../chunk-6UJWRTL6.mjs';
-import '../../chunk-APH6ZQHG.mjs';
-import '../../chunk-UKKJ6H2K.mjs';
-import '../../chunk-BS6RR2DJ.mjs';
-import '../../chunk-V6QYUEJR.mjs';
-import '../../chunk-KR7MH7XO.mjs';
-import '../../chunk-TVTG3V4F.mjs';
-import '../../chunk-RSONJDLO.mjs';
-import '../../chunk-N7KB3Z57.mjs';
-import '../../chunk-6LAC5RA2.mjs';
-import '../../chunk-BIPCPNHG.mjs';
+export { CopilotSidebar } from '../../chunk-GWX3NPF5.mjs';
+import '../../chunk-CRRPHVT3.mjs';
+import '../../chunk-EXOYIXGQ.mjs';
+import '../../chunk-D72RVITD.mjs';
+import '../../chunk-GBPOPYU3.mjs';
+import '../../chunk-VUNHHCOA.mjs';
+import '../../chunk-XLGSWCCV.mjs';
+import '../../chunk-XEVSX2QD.mjs';
+import '../../chunk-TEYIQHMK.mjs';
+import '../../chunk-ESP3H6NQ.mjs';
+import '../../chunk-ZA25IBKF.mjs';
+import '../../chunk-4ENGXGIC.mjs';
+import '../../chunk-PY4F436T.mjs';
+import '../../chunk-5HCN6SPC.mjs';
+import '../../chunk-34MTYKUD.mjs';
+import '../../chunk-Q6YO7LDK.mjs';
+import '../../chunk-6RG3YDAC.mjs';
+import '../../chunk-ZYC5YVDO.mjs';
+import '../../chunk-ZLFSBGYI.mjs';
+import '../../chunk-OHWEJUCS.mjs';
 import '../../chunk-MRXNTQOX.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=copilot-sidebar.mjs.map

package/dist/hooks/use-at-bottom.mjs

@@ -1,4 +1,4 @@
-export { useAtBottom } from '../chunk-N7KB3Z57.mjs';
+export { useAtBottom } from '../chunk-ZYC5YVDO.mjs';
 import '../chunk-MRXNTQOX.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=use-at-bottom.mjs.map

package/dist/hooks/use-copy-to-clipboard.d.ts

@@ -1,7 +1,7 @@
 interface useCopyToClipboardProps {
     timeout?: number;
 }
-declare function useCopyToClipboard({ timeout, }: useCopyToClipboardProps): {
+declare function useCopyToClipboard({ timeout }: useCopyToClipboardProps): {
     isCopied: Boolean;
     copyToClipboard: (value: string) => void;
 };

package/dist/hooks/use-copy-to-clipboard.mjs

@@ -1,4 +1,4 @@
-export { useCopyToClipboard } from '../chunk-6LAC5RA2.mjs';
+export { useCopyToClipboard } from '../chunk-ZLFSBGYI.mjs';
 import '../chunk-MRXNTQOX.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=use-copy-to-clipboard.mjs.map

package/dist/hooks/use-enter-submit.mjs

@@ -1,4 +1,4 @@
-export { useEnterSubmit } from '../chunk-BIPCPNHG.mjs';
+export { useEnterSubmit } from '../chunk-OHWEJUCS.mjs';
 import '../chunk-MRXNTQOX.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=use-enter-submit.mjs.map

package/dist/index.mjs

@@ -1,29 +1,29 @@
 import './chunk-7NSRDJ5C.mjs';
 import './chunk-U6NJWGTV.mjs';
-export { CopilotSidebarUIProvider } from './chunk-TUPGAO7T.mjs';
-export { CopilotSidebar } from './chunk-7KPMJBGH.mjs';
+export { CopilotSidebarUIProvider } from './chunk-AYVNEHBC.mjs';
+export { CopilotSidebar } from './chunk-GWX3NPF5.mjs';
 export { CopilotSidebarContext } from './chunk-MC6KTH4X.mjs';
-export { CopilotChat } from './chunk-2NO6SF5H.mjs';
-import './chunk-VSNDSL6W.mjs';
-import './chunk-KXJV37FS.mjs';
-import './chunk-LMCFSE4V.mjs';
-import './chunk-DOMJCSI6.mjs';
-import './chunk-ZB6JHNDT.mjs';
-import './chunk-HKSY5T7Y.mjs';
-import './chunk-6LRNF2VU.mjs';
-import './chunk-6UJWRTL6.mjs';
-import './chunk-APH6ZQHG.mjs';
-import './chunk-UKKJ6H2K.mjs';
-export { Tooltip, TooltipProvider } from './chunk-BS6RR2DJ.mjs';
-import './chunk-V6QYUEJR.mjs';
-import './chunk-KR7MH7XO.mjs';
-import './chunk-TVTG3V4F.mjs';
-import './chunk-RSONJDLO.mjs';
+export { CopilotChat } from './chunk-CRRPHVT3.mjs';
+import './chunk-EXOYIXGQ.mjs';
+import './chunk-D72RVITD.mjs';
+import './chunk-GBPOPYU3.mjs';
+import './chunk-VUNHHCOA.mjs';
+import './chunk-XLGSWCCV.mjs';
+import './chunk-XEVSX2QD.mjs';
+import './chunk-TEYIQHMK.mjs';
+import './chunk-ESP3H6NQ.mjs';
+import './chunk-ZA25IBKF.mjs';
+import './chunk-4ENGXGIC.mjs';
+export { Tooltip, TooltipProvider } from './chunk-PY4F436T.mjs';
+import './chunk-5HCN6SPC.mjs';
+import './chunk-34MTYKUD.mjs';
+import './chunk-Q6YO7LDK.mjs';
+import './chunk-6RG3YDAC.mjs';
 import './chunk-IU3WTXLQ.mjs';
 import './chunk-H4VKQGVU.mjs';
-import './chunk-N7KB3Z57.mjs';
-import './chunk-6LAC5RA2.mjs';
-import './chunk-BIPCPNHG.mjs';
+import './chunk-ZYC5YVDO.mjs';
+import './chunk-ZLFSBGYI.mjs';
+import './chunk-OHWEJUCS.mjs';
 import './chunk-MRXNTQOX.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map

package/dist/lib/utils.mjs

@@ -1,4 +1,4 @@
-export { cn, fetcher, formatDate, nanoid } from '../chunk-TVTG3V4F.mjs';
+export { cn, fetcher, formatDate, nanoid } from '../chunk-Q6YO7LDK.mjs';
 import '../chunk-MRXNTQOX.mjs';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=utils.mjs.map

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.11.0",
+  "version": "0.12.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -31,8 +31,8 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.1.3",
     "typescript": "^4.9.4",
-    "tailwind-config": "0.1.0",
     "eslint-config-custom": "0.2.0",
+    "tailwind-config": "0.1.0",
     "tsconfig": "0.5.0"
   },
   "dependencies": {
@@ -60,7 +60,7 @@
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "tailwind-merge": "^1.13.2",
-    "@copilotkit/react-core": "0.13.0"
+    "@copilotkit/react-core": "0.14.0"
   },
   "scripts": {
     "build": "tsup --treeshake",

package/src/components/chat-components/chat-list.tsx

@@ -9,9 +9,7 @@ export interface ChatList {
 
 export function ChatList({ messages }: ChatList) {
   // we don't want to display system messages
-  const displayedMessages = messages.filter(
-    (message) => message.role !== "system"
-  );
+  const displayedMessages = messages.filter((message) => message.role !== "system");
 
   if (!displayedMessages.length) {
     return null;
@@ -22,9 +20,7 @@ export function ChatList({ messages }: ChatList) {
       {displayedMessages.map((message, index) => (
         <div key={index}>
           <ChatMessage message={message} />
-          {index < displayedMessages.length - 1 && (
-            <Separator className="my-4 md:my-4" />
-          )}
+          {index < displayedMessages.length - 1 && <Separator className="my-4 md:my-4" />}
         </div>
       ))}
     </div>

package/src/components/chat-components/chat-message-actions.tsx

@@ -11,11 +11,7 @@ interface ChatMessageActionsProps extends React.ComponentProps<"div"> {
   message: Message;
 }
 
-export function ChatMessageActions({
-  message,
-  className,
-  ...props
-}: ChatMessageActionsProps) {
+export function ChatMessageActions({ message, className, ...props }: ChatMessageActionsProps) {
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
 
   const onCopy = () => {
@@ -27,7 +23,7 @@ export function ChatMessageActions({
     <div
       className={cn(
         "flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0",
-        className
+        className,
       )}
       {...props}
     >

package/src/components/chat-components/chat-message.tsx

@@ -18,9 +18,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
       <div
         className={cn(
           "flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow",
-          message.role === "user"
-            ? "bg-background"
-            : "bg-primary text-primary-foreground"
+          message.role === "user" ? "bg-background" : "bg-primary text-primary-foreground",
         )}
       >
         {message.role === "user" ? <IconUser /> : <IconOpenAI />}
@@ -36,9 +34,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
             code({ children, className, inline, ...props }) {
               if (children.length) {
                 if (children[0] == "▍") {
-                  return (
-                    <span className="mt-1 animate-pulse cursor-default">▍</span>
-                  );
+                  return <span className="mt-1 animate-pulse cursor-default">▍</span>;
                 }
 
                 children[0] = (children[0] as string).replace("`▍`", "▍");

package/src/components/chat-components/chat-panel.tsx

@@ -7,13 +7,7 @@ import { IconRefresh, IconStop } from "./ui/icons";
 export interface ChatPanelProps
   extends Pick<
     UseChatHelpers,
-    | "append"
-    | "isLoading"
-    | "reload"
-    | "messages"
-    | "stop"
-    | "input"
-    | "setInput"
+    "append" | "isLoading" | "reload" | "messages" | "stop" | "input" | "setInput"
   > {
   id?: string;
 }
@@ -36,21 +30,13 @@ export function ChatPanel({
       <div className="mx-auto sm:max-w-2xl sm:px-4">
         <div className="flex h-10 items-center justify-center mb-4">
           {isLoading ? (
-            <Button
-              variant="outline"
-              onClick={() => stop()}
-              className="bg-background"
-            >
+            <Button variant="outline" onClick={() => stop()} className="bg-background">
               <IconStop className="mr-2" />
               Stop generating
             </Button>
           ) : (
             messages?.length > 0 && (
-              <Button
-                variant="outline"
-                onClick={() => reload()}
-                className="bg-background"
-              >
+              <Button variant="outline" onClick={() => reload()} className="bg-background">
                 <IconRefresh className="mr-2" />
                 Regenerate response
               </Button>

package/src/components/chat-components/clear-history.tsx

@@ -40,8 +40,7 @@ export function ClearHistory({ clearChats }: ClearHistoryProps) {
         <AlertDialogHeader>
           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
           <AlertDialogDescription>
-            This will permanently delete your chat history and remove your data
-            from our servers.
+            This will permanently delete your chat history and remove your data from our servers.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>

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

@@ -13,9 +13,7 @@ interface ChatComponentInjectionsProps {
   EmptyScreen?: React.FC<EmptyScreenProps>;
 }
 
-interface CopilotChatProps
-  extends UseCopilotChatOptions,
-    ChatComponentInjectionsProps {}
+interface CopilotChatProps extends UseCopilotChatOptions, ChatComponentInjectionsProps {}
 
 export function CopilotChat({
   id,
@@ -23,8 +21,11 @@ export function CopilotChat({
   makeSystemMessage,
   EmptyScreen = DefaultEmptyScreen,
 }: CopilotChatProps) {
-  const { visibleMessages, append, reload, stop, isLoading, input, setInput } =
-    useCopilotChat({ id, initialMessages, makeSystemMessage });
+  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = useCopilotChat({
+    id,
+    initialMessages,
+    makeSystemMessage,
+  });
 
   return (
     <div className="w-full h-full flex flex-col overflow-hidden box-border items-start">

package/src/components/chat-components/default-empty-screen.tsx

@@ -29,17 +29,11 @@ export const DefaultEmptyScreen: React.FC<EmptyScreenProps> = (props) => {
   return (
     <div className="mx-auto max-w-2xl px-4">
       <div className="rounded-lg border bg-background p-8">
-        <h1 className="mb-2 text-lg font-semibold">
-          Welcome to CopilotKit! 👋
-        </h1>
+        <h1 className="mb-2 text-lg font-semibold">Welcome to CopilotKit! 👋</h1>
         <p className="mb-2 leading-normal text-muted-foreground">
           This is a Copilot built with{" "}
-          <ExternalLink href="https://recursively.ai">
-            recursively.ai's
-          </ExternalLink>{" "}
-          <ExternalLink href="https://github.com/RecursivelyAI/CopilotKit">
-            CopilotKit
-          </ExternalLink>{" "}
+          <ExternalLink href="https://recursively.ai">recursively.ai's</ExternalLink>{" "}
+          <ExternalLink href="https://github.com/RecursivelyAI/CopilotKit">CopilotKit</ExternalLink>{" "}
           .
         </p>
         <p className="leading-normal text-muted-foreground">

package/src/components/chat-components/external-link.tsx

@@ -1,10 +1,4 @@
-export function ExternalLink({
-  href,
-  children,
-}: {
-  href: string;
-  children: React.ReactNode;
-}) {
+export function ExternalLink({ href, children }: { href: string; children: React.ReactNode }) {
   return (
     <a
       href={href}
@@ -12,13 +6,7 @@ export function ExternalLink({
       className="inline-flex flex-1 justify-center gap-1 leading-4 hover:underline"
     >
       <span>{children}</span>
-      <svg
-        aria-hidden="true"
-        height="7"
-        viewBox="0 0 6 6"
-        width="7"
-        className="opacity-70"
-      >
+      <svg aria-hidden="true" height="7" viewBox="0 0 6 6" width="7" className="opacity-70">
         <path
           d="M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z"
           fill="currentColor"

package/src/components/chat-components/markdown.tsx

@@ -4,6 +4,5 @@ import ReactMarkdown, { Options } from "react-markdown";
 export const MemoizedReactMarkdown: FC<Options> = memo(
   ReactMarkdown,
   (prevProps, nextProps) =>
-    prevProps.children === nextProps.children &&
-    prevProps.className === nextProps.className
+    prevProps.children === nextProps.children && prevProps.className === nextProps.className,
 );

package/src/components/chat-components/prompt-form.tsx

@@ -9,18 +9,12 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import { IconArrowElbow, IconPlus } from "./ui/icons";
 // import Link from "next/link";
 
-export interface PromptProps
-  extends Pick<UseChatHelpers, "input" | "setInput"> {
+export interface PromptProps extends Pick<UseChatHelpers, "input" | "setInput"> {
   onSubmit: (value: string) => Promise<void>;
   isLoading: boolean;
 }
 
-export function PromptForm({
-  onSubmit,
-  input,
-  setInput,
-  isLoading,
-}: PromptProps) {
+export function PromptForm({ onSubmit, input, setInput, isLoading }: PromptProps) {
   const { formRef, onKeyDown } = useEnterSubmit();
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
 

package/src/components/chat-components/ui/alert-dialog.tsx

@@ -30,7 +30,7 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-opacity animate-in fade-in",
-      className
+      className,
     )}
     {...props}
     ref={ref}
@@ -48,7 +48,7 @@ const AlertDialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full",
-        className
+        className,
       )}
       {...props}
     />
@@ -56,29 +56,14 @@ const AlertDialogContent = React.forwardRef<
 ));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
 );
 AlertDialogHeader.displayName = "AlertDialogHeader";
 
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const AlertDialogFooter = ({ 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}
   />
 );
@@ -106,18 +91,13 @@ const AlertDialogDescription = React.forwardRef<
     {...props}
   />
 ));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
@@ -127,11 +107,7 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
     {...props}
   />
 ));

package/src/components/chat-components/ui/badge.tsx

@@ -8,8 +8,7 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
@@ -20,7 +19,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 export interface BadgeProps
@@ -28,9 +27,7 @@ export interface BadgeProps
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
 export { Badge, badgeVariants };

package/src/components/chat-components/ui/button.tsx

@@ -9,14 +9,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-md hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground shadow-md hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "shadow-none hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 shadow-none hover:underline",
       },
@@ -31,7 +27,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -44,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/chat-components/ui/codeblock.tsx

@@ -60,10 +60,7 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
       return;
     }
     const fileExtension = programmingLanguages[language] || ".file";
-    const suggestedFileName = `file-${generateRandomString(
-      3,
-      true
-    )}${fileExtension}`;
+    const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
     const fileName = window.prompt("Enter file name" || "", suggestedFileName);
 
     if (!fileName) {

package/src/components/chat-components/ui/dialog.tsx

@@ -10,11 +10,7 @@ const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({
-  className,
-  children,
-  ...props
-}: DialogPrimitive.DialogPortalProps) => (
+const DialogPortal = ({ className, children, ...props }: DialogPrimitive.DialogPortalProps) => (
   <DialogPrimitive.Portal className={cn(className)} {...props}>
     <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
       {children}
@@ -31,7 +27,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
-      className
+      className,
     )}
     {...props}
   />
@@ -48,7 +44,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-sm animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -62,29 +58,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}
   />
 );
@@ -96,10 +77,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}
   />
 ));