diff --git a/components/elements/branch.tsx b/components/elements/branch.tsx
index b730e18..7723109 100644
--- a/components/elements/branch.tsx
+++ b/components/elements/branch.tsx
@@ -82,9 +82,9 @@ export type BranchMessagesProps = HTMLAttributes<HTMLDivElement>;
 
 export const BranchMessages = ({ children, ...props }: BranchMessagesProps) => {
   const { currentBranch, setBranches, branches } = useBranch();
-  const childrenArray = useMemo(() => 
-    Array.isArray(children) ? children : [children],
-    [children]
+  const childrenArray = useMemo(
+    () => (Array.isArray(children) ? children : [children]),
+    [children],
   );
 
   // Use useEffect to update branches when they change
diff --git a/components/icons.tsx b/components/icons.tsx
index 703fcb7..c6f5d3f 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -515,7 +515,10 @@ export const InfoIcon = ({ size = 16 }: { size?: number }) => {
   );
 };
 
-export const ArrowUpIcon = ({ size = 16, ...props }: { size?: number } & React.SVGProps<SVGSVGElement>) => {
+export const ArrowUpIcon = ({
+  size = 16,
+  ...props
+}: { size?: number } & React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
       height={size}
@@ -535,7 +538,10 @@ export const ArrowUpIcon = ({ size = 16, ...props }: { size?: number } & React.S
   );
 };
 
-export const StopIcon = ({ size = 16, ...props }: { size?: number } & React.SVGProps<SVGSVGElement>) => {
+export const StopIcon = ({
+  size = 16,
+  ...props
+}: { size?: number } & React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
       height={size}
@@ -554,7 +560,10 @@ export const StopIcon = ({ size = 16, ...props }: { size?: number } & React.SVGP
   );
 };
 
-export const PaperclipIcon = ({ size = 16, ...props }: { size?: number } & React.SVGProps<SVGSVGElement>) => {
+export const PaperclipIcon = ({
+  size = 16,
+  ...props
+}: { size?: number } & React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
       height={size}
diff --git a/components/message.tsx b/components/message.tsx
index 27c939b..7bb5143 100644
--- a/components/message.tsx
+++ b/components/message.tsx
@@ -317,7 +317,7 @@ export const ThinkingMessage = () => {
         </div>
 
         <div className="flex w-full flex-col gap-2 md:gap-4">
-          <div className='p-0 text-muted-foreground text-sm'>
+          <div className="p-0 text-muted-foreground text-sm">
             <LoadingText>Thinking...</LoadingText>
           </div>
         </div>
diff --git a/components/messages.tsx b/components/messages.tsx
index 0b8e00d..cff0c61 100644
--- a/components/messages.tsx
+++ b/components/messages.tsx
@@ -66,7 +66,7 @@ function PureMessages({
       className="overscroll-behavior-contain -webkit-overflow-scrolling-touch flex-1 touch-pan-y overflow-y-scroll"
       style={{ overflowAnchor: 'none' }}
     >
-      <Conversation className='mx-auto flex min-w-0 max-w-4xl flex-col gap-4 md:gap-6'>
+      <Conversation className="mx-auto flex min-w-0 max-w-4xl flex-col gap-4 md:gap-6">
         <ConversationContent className="flex flex-col gap-4 px-2 py-4 md:gap-6 md:px-4">
           {messages.length === 0 && <Greeting />}
 
diff --git a/components/model-selector.tsx b/components/model-selector.tsx
index cb72a10..0a7426a 100644
--- a/components/model-selector.tsx
+++ b/components/model-selector.tsx
@@ -62,7 +62,10 @@ export function ModelSelector({
           <ChevronDownIcon />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="min-w-[280px] max-w-[90vw] sm:min-w-[300px]">
+      <DropdownMenuContent
+        align="start"
+        className="min-w-[280px] max-w-[90vw] sm:min-w-[300px]"
+      >
         {availableChatModels.map((chatModel) => {
           const { id } = chatModel;
 
@@ -87,12 +90,12 @@ export function ModelSelector({
               >
                 <div className="flex flex-col items-start gap-1">
                   <div className="text-sm sm:text-base">{chatModel.name}</div>
-                  <div className='line-clamp-2 text-muted-foreground text-xs'>
+                  <div className="line-clamp-2 text-muted-foreground text-xs">
                     {chatModel.description}
                   </div>
                 </div>
 
-                <div className='shrink-0 text-foreground opacity-0 group-data-[active=true]/item:opacity-100 dark:text-foreground'>
+                <div className="shrink-0 text-foreground opacity-0 group-data-[active=true]/item:opacity-100 dark:text-foreground">
                   <CheckCircleFillIcon />
                 </div>
               </button>
diff --git a/components/preview-attachment.tsx b/components/preview-attachment.tsx
index 3df229c..baa3a44 100644
--- a/components/preview-attachment.tsx
+++ b/components/preview-attachment.tsx
@@ -18,7 +18,10 @@ export const PreviewAttachment = ({
   const { name, url, contentType } = attachment;
 
   return (
-    <div data-testid="input-attachment-preview" className='group relative size-16 overflow-hidden rounded-lg border bg-muted'>
+    <div
+      data-testid="input-attachment-preview"
+      className="group relative size-16 overflow-hidden rounded-lg border bg-muted"
+    >
       {contentType?.startsWith('image') ? (
         <Image
           src={url}
@@ -28,7 +31,7 @@ export const PreviewAttachment = ({
           height={64}
         />
       ) : (
-        <div className='flex size-full items-center justify-center text-muted-foreground text-xs'>
+        <div className="flex size-full items-center justify-center text-muted-foreground text-xs">
           File
         </div>
       )}
@@ -50,7 +53,7 @@ export const PreviewAttachment = ({
         </Button>
       )}
 
-      <div className='absolute inset-x-0 bottom-0 truncate bg-linear-to-t from-black/80 to-transparent px-1 py-0.5 text-[10px] text-white'>
+      <div className="absolute inset-x-0 bottom-0 truncate bg-linear-to-t from-black/80 to-transparent px-1 py-0.5 text-[10px] text-white">
         {name}
       </div>
     </div>
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
index 5c87ea4..b21d71b 100644
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -12,8 +12,8 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
+      'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+      className,
     )}
     {...props}
   >
@@ -22,7 +22,7 @@ const Progress = React.forwardRef<
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export { Progress }
+export { Progress };