Merge pull request #8 from arenadeveloper02/fix/biome-check

arenadeveloper02 · web-flow · commit b156f9d36bbd · 2025-08-28T15:47:03.000+05:30
Fix/biome check
diff --git a/apps/sim/app/(auth)/layout.tsx b/apps/sim/app/(auth)/layout.tsx
@@ -25,12 +25,13 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
         <div className='mx-auto max-w-7xl'>
           <Link href='/' className='inline-flex'>
             {brand.logoUrl ? (
-              <img
+              <Image
                 src={brand.logoUrl}
                 alt={`${brand.name} Logo`}
                 width={42}
                 height={42}
                 className='h-[53px] w-[49px] object-contain'
+                unoptimized
               />
             ) : (
               <Image src='/sim.svg' alt={`${brand.name} Logo`} width={56} height={56} />
diff --git a/apps/sim/app/(landing)/components/nav-client.tsx b/apps/sim/app/(landing)/components/nav-client.tsx
@@ -202,7 +202,7 @@ export default function NavClient({
             <div className='inline-block'>
               <Link href='/' className='inline-flex'>
                 {brand.logoUrl ? (
-                  <img
+                  <Image
                     src={brand.logoUrl}
                     alt={`${brand.name} Logo`}
                     width={42}
diff --git a/apps/sim/app/(landing)/components/sections/testimonials.tsx b/apps/sim/app/(landing)/components/sections/testimonials.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { motion } from 'framer-motion'
+import Image from 'next/image'
 import { getAssetUrl } from '@/lib/utils'
 import useIsMobile from '@/app/(landing)/components/hooks/use-is-mobile'
 import { Marquee } from '@/app/(landing)/components/magicui/marquee'
@@ -124,10 +125,12 @@ function Testimonials() {
                 <div className='mt-auto flex items-center justify-between'>
                   <div className='flex items-center gap-1.5 sm:gap-2'>
                     {card.profileImage && (
-                      <img
+                      <Image
                         src={card.profileImage}
                         alt={`${card.username} profile`}
                         className='h-6 w-6 rounded-full border border-[#333] object-cover sm:h-8 sm:w-8'
+                        width={32}
+                        height={32}
                       />
                     )}
                     <div className='flex items-center'>
@@ -165,10 +168,12 @@ function Testimonials() {
                 <div className='mt-auto flex items-center justify-between'>
                   <div className='flex items-center gap-1.5 sm:gap-2'>
                     {card.profileImage && (
-                      <img
+                      <Image
                         src={card.profileImage}
                         alt={`${card.username} profile`}
                         className='h-6 w-6 rounded-full border border-[#333] object-cover sm:h-8 sm:w-8'
+                        width={32}
+                        height={32}
                       />
                     )}
                     <div className='flex items-center'>
diff --git a/apps/sim/app/chat/[subdomain]/components/components/markdown-renderer/markdown-renderer.tsx b/apps/sim/app/chat/[subdomain]/components/components/markdown-renderer/markdown-renderer.tsx
@@ -129,14 +129,24 @@ export default function MarkdownRenderer({ content }: { content: string }) {
     ),
 
     // Images
-    img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-      <img
-        src={src}
-        alt={alt || 'Image'}
-        className='my-2 h-auto max-w-full rounded-md'
-        {...props}
-      />
-    ),
+    img: ({ src = '', alt = 'Image', ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => {
+      // Import Next.js Image component
+      // @ts-ignore
+      const Image = require('next/image').default
+      return (
+        <div className='my-2 h-auto max-w-full rounded-md'>
+          <Image
+            src={src}
+            alt={alt}
+            layout='responsive'
+            width={600}
+            height={400}
+            style={{ borderRadius: '0.375rem' }}
+            {...props}
+          />
+        </div>
+      )
+    },
   }
 
   // Process text to clean up unnecessary whitespace and formatting issues
diff --git a/apps/sim/app/chat/[subdomain]/components/header/header.tsx b/apps/sim/app/chat/[subdomain]/components/header/header.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import Image from 'next/image'
 import { GithubIcon } from '@/components/icons'
 
 interface ChatHeaderProps {
@@ -22,13 +23,15 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
   return (
     <div className='flex items-center justify-between bg-background/95 px-6 py-4 pt-6 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:px-8 md:pt-4'>
       <div className='flex items-center gap-4'>
-        {customImage && (
-          <img
-            src={customImage}
-            alt={`${chatConfig?.title || 'Chat'} logo`}
-            className='h-8 w-8 rounded-md object-cover'
-          />
-        )}
+        <Image
+          src={customImage || '/default-logo.png'}
+          alt={`${chatConfig?.title || 'Chat'} logo`}
+          width={32}
+          height={32}
+          className='h-8 w-8 rounded-md object-cover'
+          style={{ objectFit: 'cover' }}
+          unoptimized
+        />
         <h2 className='font-medium text-foreground text-lg'>
           {chatConfig?.customizations?.headerText || chatConfig?.title || 'Chat'}
         </h2>
diff --git a/apps/sim/app/chat/[subdomain]/components/message/components/markdown-renderer.tsx b/apps/sim/app/chat/[subdomain]/components/message/components/markdown-renderer.tsx
@@ -197,14 +197,21 @@ export default function MarkdownRenderer({
     ),
 
     // Images
-    img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-      <img
-        src={src}
-        alt={alt || 'Image'}
-        className='my-3 h-auto max-w-full rounded-md'
-        {...props}
-      />
-    ),
+    img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => {
+      // Import Next.js Image component
+      // @ts-ignore
+      const Image = require('next/image').default
+      return (
+        <Image
+          src={src || ''}
+          alt={alt || 'Image'}
+          className='my-3 h-auto max-w-full rounded-md'
+          width={props.width ? Number(props.width) : 600}
+          height={props.height ? Number(props.height) : 400}
+          {...props}
+        />
+      )
+    },
   }
 
   // Pre-process content to fix common issues
diff --git a/apps/sim/app/globals.css b/apps/sim/app/globals.css
@@ -96,7 +96,7 @@
     --gradient-secondary: 336 95% 65%; /* More vibrant pink */
 
     /* Brand Colors (Default Sim Theme) */
-     --brand-primary-hex: #1a73e8; /* Primary brand purple */
+    --brand-primary-hex: #1a73e8; /* Primary brand purple */
     --brand-primary-hover-hex: #155cba; /* Primary brand purple hover */
     --brand-secondary-hex: #488fed; /* Secondary brand purple */
     --brand-accent-hex: #76abf1; /* Accent purple for links */
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/sidebar/components/markdown-renderer.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/sidebar/components/markdown-renderer.tsx
@@ -186,9 +186,22 @@ export default function LogMarkdownRenderer({ content }: { content: string }) {
     ),
 
     // Images
-    img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-      <img src={src} alt={alt || 'Image'} className='my-3 h-auto max-w-full rounded' {...props} />
-    ),
+    img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => {
+      // Dynamically import Next.js Image to avoid SSR issues
+      const Image = require('next/image').default
+      return (
+        <div className='my-3 h-auto max-w-full overflow-hidden rounded'>
+          <Image
+            src={src || ''}
+            alt={alt || 'Image'}
+            layout='responsive'
+            width={400}
+            height={300}
+            {...props}
+          />
+        </div>
+      )
+    },
   }
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/image-selector/image-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/image-selector/image-selector.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { useRef, useState } from 'react'
-import { Image, Loader2, Upload, X } from 'lucide-react'
+import { Loader2, Image as LucideImage, Upload, X } from 'lucide-react'
+import Image from 'next/image'
 import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import { createLogger } from '@/lib/logs/console/logger'
@@ -193,10 +194,13 @@ export function ImageSelector({
         // Show uploaded image
         <div className='space-y-2'>
           <div className='relative inline-block'>
-            <img
+            <Image
               src={value}
               alt='Uploaded logo'
+              width={80}
+              height={80}
               className='h-20 w-20 rounded-lg border object-cover'
+              style={{ objectFit: 'cover' }}
             />
             <Button
               type='button'
@@ -260,7 +264,7 @@ export function ImageSelector({
             </div>
           ) : (
             <div className='space-y-2'>
-              <Image className='mx-auto h-8 w-8 text-muted-foreground' />
+              <LucideImage className='mx-auto h-8 w-8 text-muted-foreground' />
               <div>
                 <p className='font-medium text-sm'>
                   {isDragging ? 'Drop image here!' : placeholder}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useMemo, useState } from 'react'
 import { Check, Copy } from 'lucide-react'
+import Image from 'next/image'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
@@ -365,12 +366,13 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
           {children}
         </td>
       ),
-
       // Images
-      img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-        <img
-          src={src}
+      img: ({ src, alt, width, height, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
+        <Image
+          src={typeof src === 'string' ? src : ''}
           alt={alt || 'Image'}
+          width={typeof width === 'string' ? Number(width) || 400 : width || 400}
+          height={typeof height === 'string' ? Number(height) || 300 : height || 300}
           className='my-3 h-auto max-w-full rounded-md'
           {...props}
         />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -5,13 +5,14 @@ import {
   Check,
   Clipboard,
   FileText,
-  Image,
   Loader2,
+  Image as LucideImage,
   RotateCcw,
   ThumbsDown,
   ThumbsUp,
   X,
 } from 'lucide-react'
+import Image from 'next/image'
 import { InlineToolCall } from '@/lib/copilot/inline-tool-call'
 import { createLogger } from '@/lib/logs/console/logger'
 import { usePreviewStore } from '@/stores/copilot/preview-store'
@@ -68,7 +69,7 @@ const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayPr
 
   const getFileIcon = (mediaType: string) => {
     if (mediaType.startsWith('image/')) {
-      return <Image className='h-5 w-5 text-muted-foreground' />
+      return <LucideImage className='h-5 w-5 text-muted-foreground' />
     }
     if (mediaType.includes('pdf')) {
       return <FileText className='h-5 w-5 text-red-500' />
@@ -114,7 +115,7 @@ const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayPr
         >
           {isImageFile(file.media_type) ? (
             // For images, show actual thumbnail
-            <img
+            <Image
               src={getFileUrl(file)}
               alt={file.filename}
               className='h-full w-full object-cover'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -14,16 +14,17 @@ import {
   BrainCircuit,
   Check,
   FileText,
-  Image,
   Infinity as InfinityIcon,
   Info,
   Loader2,
+  Image as LucideImage,
   MessageCircle,
   Package,
   Paperclip,
   X,
   Zap,
 } from 'lucide-react'
+import Image from 'next/image'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -396,7 +397,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
 
     const getFileIcon = (mediaType: string) => {
       if (mediaType.startsWith('image/')) {
-        return <Image className='h-5 w-5 text-muted-foreground' />
+        return <LucideImage className='h-5 w-5 text-muted-foreground' />
       }
       if (mediaType.includes('pdf')) {
         return <FileText className='h-5 w-5 text-red-500' />
@@ -506,14 +507,14 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                 >
                   {isImageFile(file.type) && file.previewUrl ? (
                     // For images, show actual thumbnail
-                    <img
+                    <Image
                       src={file.previewUrl}
                       alt={file.name}
                       className='h-full w-full object-cover'
                     />
                   ) : isImageFile(file.type) && file.key ? (
                     // For uploaded images without preview URL, use S3 URL
-                    <img
+                    <Image
                       src={`/api/files/serve/s3/${encodeURIComponent(file.key)}?bucket=copilot`}
                       alt={file.name}
                       className='h-full w-full object-cover'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -3,6 +3,7 @@
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { ArrowDown } from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import { LoadingAgentP2 } from '@/components/ui/loading-agent-arena'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
@@ -20,7 +21,6 @@ import { COPILOT_TOOL_IDS } from '@/stores/copilot/constants'
 import { usePreviewStore } from '@/stores/copilot/preview-store'
 import { useCopilotStore } from '@/stores/copilot/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { LoadingAgentP2 } from '@/components/ui/loading-agent-arena'
 
 const logger = createLogger('Copilot')
 
@@ -376,7 +376,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
         {!isInitialized ? (
           <div className='flex h-full w-full items-center justify-center'>
             <div className='flex flex-col items-center gap-3'>
-              <LoadingAgentP2 size='md' />              
+              <LoadingAgentP2 size='md' />
               <p className='text-muted-foreground text-sm'>Loading chat history...</p>
             </div>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/project-selector/components/discord-server-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/project-selector/components/discord-server-selector.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { Check, ChevronDown, RefreshCw, X } from 'lucide-react'
+import Image from 'next/image'
 import { DiscordIcon } from '@/components/icons'
 import { Button } from '@/components/ui/button'
 import {
@@ -206,7 +207,7 @@ export function DiscordServerSelector({
             {selectedServer ? (
               <div className='flex items-center gap-2 overflow-hidden'>
                 {selectedServer.icon ? (
-                  <img
+                  <Image
                     src={selectedServer.icon}
                     alt={selectedServer.name}
                     className='h-4 w-4 rounded-full'
@@ -267,7 +268,7 @@ export function DiscordServerSelector({
                     >
                       <div className='flex items-center gap-2 overflow-hidden'>
                         {server.icon ? (
-                          <img
+                          <Image
                             src={server.icon}
                             alt={server.name}
                             className='h-4 w-4 rounded-full'
@@ -303,7 +304,7 @@ export function DiscordServerSelector({
           <div className='flex items-center gap-3 pr-4'>
             <div className='flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-muted/20'>
               {selectedServer.icon ? (
-                <img
+                <Image
                   src={selectedServer.icon}
                   alt={selectedServer.name}
                   className='h-4 w-4 rounded-full'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/project-selector/components/jira-project-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/project-selector/components/jira-project-selector.tsx
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx
diff --git a/apps/sim/app/workspace/[workspaceId]/w/page.tsx b/apps/sim/app/workspace/[workspaceId]/w/page.tsx
diff --git a/apps/sim/app/workspace/page.tsx b/apps/sim/app/workspace/page.tsx
