fix: lint workflow (#1167)

.github/workflows/lint.yml

@@ -23,4 +23,3 @@ jobs:
         run: pnpm install
       - name: Run lint
         run: pnpm lint
-1

app/(auth)/login/page.tsx

@@ -42,7 +42,7 @@ export default function Page() {
       updateSession();
       router.refresh();
     }
-  }, [state.status]);
+  }, [state.status, router, updateSession]);
 
   const handleSubmit = (formData: FormData) => {
     setEmail(formData.get('email') as string);

app/(auth)/register/page.tsx

@@ -43,7 +43,7 @@ export default function Page() {
       updateSession();
       router.refresh();
     }
-  }, [state]);
+  }, [state, router, updateSession]);
 
   const handleSubmit = (formData: FormData) => {
     setEmail(formData.get('email') as string);

app/(chat)/api/chat/route.ts

@@ -2,7 +2,7 @@ import {
   convertToModelMessages,
   createUIMessageStream,
   JsonToSseTransformStream,
-  LanguageModelUsage,
+  type LanguageModelUsage,
   smoothStream,
   stepCountIs,
   streamText,

components/chat.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { DefaultChatTransport, LanguageModelUsage } from 'ai';
+import { DefaultChatTransport, type LanguageModelUsage } from 'ai';
 import { useChat } from '@ai-sdk/react';
 import { useEffect, useState } from 'react';
 import useSWR, { useSWRConfig } from 'swr';

components/elements/branch.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils';
 import type { UIMessage } from 'ai';
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import type { ComponentProps, HTMLAttributes, ReactElement } from 'react';
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState, useMemo } from 'react';
 
 type BranchContextType = {
   currentBranch: number;
@@ -82,7 +82,10 @@ export type BranchMessagesProps = HTMLAttributes<HTMLDivElement>;
 
 export const BranchMessages = ({ children, ...props }: BranchMessagesProps) => {
   const { currentBranch, setBranches, branches } = useBranch();
-  const childrenArray = Array.isArray(children) ? children : [children];
+  const childrenArray = useMemo(() => 
+    Array.isArray(children) ? children : [children],
+    [children]
+  );
 
   // Use useEffect to update branches when they change
   useEffect(() => {

components/elements/image.tsx

@@ -12,6 +12,7 @@ export const Image = ({
   mediaType,
   ...props
 }: ImageProps) => (
+  // eslint-disable-next-line @next/next/no-img-element
   <img
     {...props}
     alt={props.alt}

components/elements/message.tsx

@@ -52,7 +52,7 @@ export const MessageAvatar = ({
   ...props
 }: MessageAvatarProps) => (
   <Avatar className={cn('size-8 ring-1 ring-border', className)} {...props}>
-    <AvatarImage alt="" className="mt-0 mb-0" src={src} />
+    <AvatarImage alt="" className="my-0" src={src} />
     <AvatarFallback>{name?.slice(0, 2) || 'ME'}</AvatarFallback>
   </Avatar>
 );

components/elements/source.tsx

@@ -32,7 +32,7 @@ export const SourcesTrigger = ({
     {children ?? (
       <>
         <p className="font-medium">Used {count} sources</p>
-        <ChevronDownIcon className="h-4 w-4" />
+        <ChevronDownIcon className="size-4" />
       </>
     )}
   </CollapsibleTrigger>
@@ -66,7 +66,7 @@ export const Source = ({ href, title, children, ...props }: SourceProps) => (
   >
     {children ?? (
       <>
-        <BookIcon className="h-4 w-4" />
+        <BookIcon className="size-4" />
         <span className="block font-medium">{title}</span>
       </>
     )}

components/elements/web-preview.tsx

@@ -107,7 +107,7 @@ export const WebPreviewNavigationButton = ({
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
-          className="h-8 w-8 p-0 hover:text-foreground"
+          className="size-8 p-0 hover:text-foreground"
           disabled={disabled}
           onClick={onClick}
           size="sm"

components/message.tsx

@@ -317,7 +317,7 @@ export const ThinkingMessage = () => {
         </div>
 
         <div className="flex flex-col gap-2 w-full md:gap-4">
-          <div className="px-0 py-0 text-sm text-muted-foreground">
+          <div className="p-0 text-sm text-muted-foreground">
             <LoadingText>Thinking...</LoadingText>
           </div>
         </div>

components/messages.tsx

@@ -58,7 +58,7 @@ function PureMessages({
         }
       });
     }
-  }, [status]);
+  }, [status, messagesContainerRef]);
 
   return (
     <div
@@ -66,7 +66,7 @@ function PureMessages({
       className="overflow-y-scroll flex-1 touch-pan-y overscroll-behavior-contain -webkit-overflow-scrolling-touch"
       style={{ overflowAnchor: 'none' }}
     >
-      <Conversation className="flex flex-col gap-4 px-2 pt-4 pb-4 mx-auto min-w-0 max-w-4xl md:gap-6 md:px-4">
+      <Conversation className="flex flex-col gap-4 px-2 py-4 mx-auto min-w-0 max-w-4xl md:gap-6 md:px-4">
         <ConversationContent className="flex flex-col gap-4 md:gap-6">
           {messages.length === 0 && <Greeting />}
 

components/multimodal-input.tsx

@@ -29,7 +29,7 @@ import {
   PromptInputModelSelectTrigger,
   PromptInputModelSelectContent,
 } from './elements/prompt-input';
-import { SelectItem, SelectValue } from '@/components/ui/select';
+import { SelectItem, } from '@/components/ui/select';
 import equal from 'fast-deep-equal';
 import type { UseChatHelpers } from '@ai-sdk/react';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -353,7 +353,7 @@ function PureMultimodalInput({
           minHeight={44}
           maxHeight={200}
           disableAutoResize={true}
-          className="text-sm resize-none py-3 px-3 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] bg-transparent !border-0 !border-none outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none placeholder:text-muted-foreground"
+          className="text-sm resize-none p-3 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] bg-transparent !border-0 !border-none outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none placeholder:text-muted-foreground"
           rows={1}
           autoFocus
         />

components/preview-attachment.tsx

@@ -2,6 +2,7 @@ import type { Attachment } from '@/lib/types';
 import { Loader } from './elements/loader';
 import { CrossSmallIcon, } from './icons';
 import { Button } from './ui/button';
+import Image from 'next/image';
 
 export const PreviewAttachment = ({
   attachment,
@@ -17,15 +18,17 @@ export const PreviewAttachment = ({
   const { name, url, contentType } = attachment;
 
   return (
-    <div data-testid="input-attachment-preview" className="group relative w-16 h-16 rounded-lg overflow-hidden bg-muted border">
+    <div data-testid="input-attachment-preview" className="group relative size-16 rounded-lg overflow-hidden bg-muted border">
       {contentType?.startsWith('image') ? (
-        <img
+        <Image
           src={url}
           alt={name ?? 'An image attachment'}
-          className="w-full h-full object-cover"
+          className="size-full object-cover"
+          width={64}
+          height={64}
         />
       ) : (
-        <div className="w-full h-full flex items-center justify-center text-xs text-muted-foreground">
+        <div className="size-full flex items-center justify-center text-xs text-muted-foreground">
           File
         </div>
       )}
@@ -47,7 +50,7 @@ export const PreviewAttachment = ({
         </Button>
       )}
 
-      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white text-[10px] px-1 py-0.5 truncate">
+      <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/80 to-transparent text-white text-[10px] px-1 py-0.5 truncate">
         {name}
       </div>
     </div>

lib/ai/models.mock.ts

@@ -1,4 +1,4 @@
-import { type LanguageModel } from 'ai';
+import type { LanguageModel } from 'ai';
 
 const createMockModel = (): LanguageModel => {
   return {