Upgrade linter and formatter to Ultracite (#1224)

components/elements/tool.tsx

@@ -1,13 +1,6 @@
-'use client';
+"use client";
 
-import { Badge } from '@/components/ui/badge';
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@/components/ui/collapsible';
-import { cn } from '@/lib/utils';
-import type { ToolUIPart } from 'ai';
+import type { ToolUIPart } from "ai";
 import {
   CheckCircleIcon,
   ChevronDownIcon,
@@ -15,38 +8,45 @@ import {
   ClockIcon,
   WrenchIcon,
   XCircleIcon,
-} from 'lucide-react';
-import type { ComponentProps, ReactNode } from 'react';
-import { CodeBlock } from './code-block';
+} from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { CodeBlock } from "./code-block";
 
 export type ToolProps = ComponentProps<typeof Collapsible>;
 
 export const Tool = ({ className, ...props }: ToolProps) => (
   <Collapsible
-    className={cn('not-prose mb-4 w-full rounded-md border', className)}
+    className={cn("not-prose mb-4 w-full rounded-md border", className)}
     {...props}
   />
 );
 
 export type ToolHeaderProps = {
-  type: ToolUIPart['type'];
-  state: ToolUIPart['state'];
+  type: ToolUIPart["type"];
+  state: ToolUIPart["state"];
   className?: string;
 };
 
-const getStatusBadge = (status: ToolUIPart['state']) => {
+const getStatusBadge = (status: ToolUIPart["state"]) => {
   const labels = {
-    'input-streaming': 'Pending',
-    'input-available': 'Running',
-    'output-available': 'Completed',
-    'output-error': 'Error',
+    "input-streaming": "Pending",
+    "input-available": "Running",
+    "output-available": "Completed",
+    "output-error": "Error",
   } as const;
 
   const icons = {
-    'input-streaming': <CircleIcon className="size-4" />,
-    'input-available': <ClockIcon className="size-4 animate-pulse" />,
-    'output-available': <CheckCircleIcon className="size-4 text-green-600" />,
-    'output-error': <XCircleIcon className="size-4 text-red-600" />,
+    "input-streaming": <CircleIcon className="size-4" />,
+    "input-available": <ClockIcon className="size-4 animate-pulse" />,
+    "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
+    "output-error": <XCircleIcon className="size-4 text-red-600" />,
   } as const;
 
   return (
@@ -68,8 +68,8 @@ export const ToolHeader = ({
 }: ToolHeaderProps) => (
   <CollapsibleTrigger
     className={cn(
-      'flex w-full min-w-0 items-center justify-between gap-2 p-3',
-      className,
+      "flex w-full min-w-0 items-center justify-between gap-2 p-3",
+      className
     )}
     {...props}
   >
@@ -89,19 +89,19 @@ export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
 export const ToolContent = ({ className, ...props }: ToolContentProps) => (
   <CollapsibleContent
     className={cn(
-      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in',
-      className,
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
     )}
     {...props}
   />
 );
 
-export type ToolInputProps = ComponentProps<'div'> & {
-  input: ToolUIPart['input'];
+export type ToolInputProps = ComponentProps<"div"> & {
+  input: ToolUIPart["input"];
 };
 
 export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
-  <div className={cn('space-y-2 overflow-hidden p-4', className)} {...props}>
+  <div className={cn("space-y-2 overflow-hidden p-4", className)} {...props}>
     <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
       Parameters
     </h4>
@@ -111,9 +111,9 @@ export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
   </div>
 );
 
-export type ToolOutputProps = ComponentProps<'div'> & {
+export type ToolOutputProps = ComponentProps<"div"> & {
   output: ReactNode;
-  errorText: ToolUIPart['errorText'];
+  errorText: ToolUIPart["errorText"];
 };
 
 export const ToolOutput = ({
@@ -127,16 +127,16 @@ export const ToolOutput = ({
   }
 
   return (
-    <div className={cn('space-y-2 p-4', className)} {...props}>
+    <div className={cn("space-y-2 p-4", className)} {...props}>
       <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
-        {errorText ? 'Error' : 'Result'}
+        {errorText ? "Error" : "Result"}
       </h4>
       <div
         className={cn(
-          'overflow-x-auto rounded-md text-xs [&_table]:w-full',
+          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
           errorText
-            ? 'bg-destructive/10 text-destructive'
-            : 'bg-muted/50 text-foreground',
+            ? "bg-destructive/10 text-destructive"
+            : "bg-muted/50 text-foreground"
         )}
       >
         {errorText && <div>{errorText}</div>}