fixed configurations with db types

Author: Gerome-Elassaad

app/api/subscription/usage/route.ts

@@ -5,14 +5,12 @@ import { AuthDialog } from '@/components/auth-dialog';
 import { Chat } from '@/components/chat';
 import { PromptInputBox } from '@/components/ui/ai-prompt-box';
 import { NavBar } from '@/components/navbar';
-import { Preview } from '@/components/preview';
-import { Sidebar } from '@/components/sidebar';
-import { PricingModal } from '@/components/pricing';
 import { useAuth } from '@/lib/auth';
+import dynamic from 'next/dynamic';
 import { Project, createProject, saveMessage, getProjectMessages, generateProjectTitle, getProject } from '@/lib/database';
 import { Message, toAISDKMessages, toMessageImage } from '@/lib/messages';
 import { LLMModelConfig } from '@/lib/models';
-import modelsList from '@/lib/models.json';
+import { loadModels } from '@/lib/models-loader';
 import { FragmentSchema, fragmentSchema as schema } from '@/lib/schema';
 import { createSupabaseBrowserClient } from '@/lib/supabase-browser';
 import templates, { TemplateId } from '@/lib/templates';
@@ -28,6 +26,18 @@ import { HeroPillSecond } from '@/components/announcement';
 import { useAnalytics } from '@/lib/analytics-service';
 import { SupabaseClient } from '@supabase/supabase-js';
 
+const PricingModal = dynamic(() => import('@/components/pricing').then(mod => ({ default: mod.PricingModal })), {
+  ssr: false,
+});
+
+const Sidebar = dynamic(() => import('@/components/sidebar').then(mod => ({ default: mod.Sidebar })), {
+  ssr: false,
+});
+
+const Preview = dynamic(() => import('@/components/preview').then(mod => ({ default: mod.Preview })), {
+  ssr: false,
+});
+
 export default function Home() {
   const supabase = createSupabaseBrowserClient()
   const [selectedTemplate, setSelectedTemplate] = useState<'auto' | TemplateId>('auto')
@@ -37,6 +47,7 @@ export default function Home() {
       model: 'claude-3-5-sonnet-latest',
     },
   )
+  const [modelsList, setModelsList] = useState<any>(null)
 
   const posthog = usePostHog()
   const analytics = useAnalytics()
@@ -71,6 +82,11 @@ export default function Home() {
   const { session } = useAuth(setAuthDialogCallback, setAuthViewCallback)
   const { userTeam } = useUserTeam()
 
+  // Load models list asynchronously
+  useEffect(() => {
+    loadModels().then(setModelsList)
+  }, [])
+
 
   const handleChatSelected = async (chatId: string) => {
     const project = await getProject(supabase, chatId);
@@ -79,15 +95,15 @@ export default function Home() {
     }
   };
 
-  const filteredModels = modelsList.models.filter((model) => {
+  const filteredModels = modelsList?.models?.filter((model: any) => {
     if (process.env.NEXT_PUBLIC_HIDE_LOCAL_MODELS) {
       return model.providerId !== 'ollama'
     }
     return true
-  })
+  }) || []
 
   const currentModel = filteredModels.find(
-    (model) => model.id === languageModel.model,
+    (model: any) => model.id === languageModel.model,
   );
 
 

app/page.tsx

@@ -22,6 +22,7 @@ export function Chat({
     if (chatContainer) {
       chatContainer.scrollTop = chatContainer.scrollHeight
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(messages)])
 
   return (
@@ -40,6 +41,7 @@ export function Chat({
             }
             if (content.type === 'image') {
               return (
+                // eslint-disable-next-line @next/next/no-img-element
                 <img
                   key={id}
                   src={content.image}

components/chat.tsx

@@ -1,4 +1,3 @@
-// File: components/help-modal.tsx
 "use client"
 
 import { Badge } from '@/components/ui/badge'

components/help-center.tsx

@@ -15,6 +15,7 @@ export default function Logo(
     <Image
       src={src}
       alt="Logo"
+      priority
       {...props}
       style={{ ...style, width, height: 'auto' }}
     />

components/logo.tsx

@@ -3,6 +3,7 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { ArrowUp, Paperclip, Square, X, StopCircle, Mic, Globe, BrainCog, FolderCog } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
+import Image from "next/image";
 import { ChatSettings } from '../chat-settings'
 import { ChatPicker } from '../chat-picker'
 import { LLMModel, LLMModelConfig } from '@/lib/models'
@@ -182,13 +183,17 @@ const VoiceRecorder: React.FC<VoiceRecorderProps> = ({
         clearInterval(timerRef.current);
         timerRef.current = null;
       }
-      onStopRecording(time);
-      setTime(0);
+      setTime(currentTime => {
+        if (currentTime > 0) {
+          onStopRecording(currentTime);
+        }
+        return 0;
+      });
     }
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [isRecording, time, onStartRecording, onStopRecording]);
+  }, [isRecording, onStartRecording, onStopRecording]);
 
   const formatTime = (seconds: number) => {
     const mins = Math.floor(seconds / 60);
@@ -242,10 +247,12 @@ const ImageViewDialog: React.FC<ImageViewDialogProps> = ({ imageUrl, onClose })
           transition={{ duration: 0.2, ease: "easeOut" }}
           className="relative bg-background rounded-2xl overflow-hidden shadow-2xl"
         >
-          <img
+          <Image
             src={imageUrl}
             alt="Full preview"
-            className="w-full max-h-[80vh] object-contain rounded-2xl"
+            fill
+            className="object-contain rounded-2xl"
+            sizes="(max-width: 768px) 95vw, (max-width: 1200px) 80vw, 70vw"
           />
         </motion.div>
       </DialogContent>
@@ -479,11 +486,11 @@ export const PromptInputBox = React.forwardRef((props: PromptInputBoxProps, ref:
     }
   };
 
-  const handleCanvasToggle = () => setShowCanvas((prev) => !prev);
+  const handleCanvasToggle = () => setShowCanvas(prev => !prev);
 
   const isImageFile = (file: File) => file.type.startsWith("image/");
 
-  const processFile = (file: File) => {
+  const processFile = React.useCallback((file: File) => {
     if (!isImageFile(file)) {
       console.log("Only image files are allowed");
       return;
@@ -496,7 +503,7 @@ export const PromptInputBox = React.forwardRef((props: PromptInputBoxProps, ref:
     const reader = new FileReader();
     reader.onload = (e) => setFilePreviews({ [file.name]: e.target?.result as string });
     reader.readAsDataURL(file);
-  };
+  }, []);
 
   const handleDragOver = React.useCallback((e: React.DragEvent) => {
     e.preventDefault();
@@ -514,7 +521,7 @@ export const PromptInputBox = React.forwardRef((props: PromptInputBoxProps, ref:
     const files = Array.from(e.dataTransfer.files);
     const imageFiles = files.filter((file) => isImageFile(file));
     if (imageFiles.length > 0) processFile(imageFiles[0]);
-  }, []);
+  }, [processFile]);
 
   const handleRemoveFile = (index: number) => {
     const fileToRemove = files[index];
@@ -537,7 +544,7 @@ export const PromptInputBox = React.forwardRef((props: PromptInputBoxProps, ref:
         }
       }
     }
-  }, []);
+  }, [processFile]);
 
   React.useEffect(() => {
     document.addEventListener("paste", handlePaste);
@@ -608,13 +615,15 @@ export const PromptInputBox = React.forwardRef((props: PromptInputBoxProps, ref:
               <div key={index} className="relative group">
                 {file.type.startsWith("image/") && filePreviews[file.name] && (
                   <div
-                    className="w-16 h-16 rounded-xl overflow-hidden cursor-pointer transition-all duration-300"
+                    className="relative w-16 h-16 rounded-xl overflow-hidden cursor-pointer transition-all duration-300"
                     onClick={() => openImageModal(filePreviews[file.name])}
                   >
-                    <img
+                    <Image
                       src={filePreviews[file.name]}
                       alt={file.name}
-                      className="h-full w-full object-cover"
+                      fill
+                      className="object-cover"
+                      sizes="64px"
                     />
                     <button
                       onClick={(e) => {

components/ui/ai-prompt-box.tsx

@@ -0,0 +1,21 @@
+// Lazy loader for models.json to reduce initial bundle size
+let modelsCache: any = null;
+
+export async function loadModels() {
+  if (modelsCache) {
+    return modelsCache;
+  }
+
+  const models = await import('./models.json');
+  modelsCache = models.default;
+  return modelsCache;
+}
+
+export function getModelsSync() {
+  if (!modelsCache) {
+    // Fallback for synchronous access - will be replaced with async loading
+    const models = require('./models.json');
+    modelsCache = models;
+  }
+  return modelsCache;
+}

lib/models-loader.ts

@@ -3,16 +3,40 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true
   },
-  webpack: (config, { dev }) => {
-    // Optimize caching for large JSON files
-    if (!dev) {
-      config.cache = {
-        ...config.cache,
-        maxMemoryGenerations: 1,
-      };
-    }
-    return config;
-  }
+  experimental: {
+    optimizePackageImports: ['lucide-react', '@radix-ui/react-icons'],
+  },
+  async headers() {
+    return [
+      {
+        source: '/_next/static/:path*',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=31536000, immutable',
+          },
+        ],
+      },
+      {
+        source: '/logo.png',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=86400',
+          },
+        ],
+      },
+      {
+        source: '/logo-dark.png',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=86400',
+          },
+        ],
+      },
+    ];
+  },
 }
 
 export default nextConfig

next.config.mjs

@@ -4,6 +4,7 @@
   "private": false,
   "scripts": {
     "dev": "next dev --turbo",
+    "dev:webpack": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -58,7 +59,6 @@
     "flags": "^4.0.1",
     "framer-motion": "^12.23.22",
     "geist": "^1.5.1",
-    "group-by.js": "link:core-js/features/object/group-by.js",
     "js-cookie": "^3.0.5",
     "lru-cache": "^11.2.2",
     "lucide-react": "^0.396.0",
@@ -94,6 +94,11 @@
     "path-to-regexp": "^6.3.0",
     "esbuild": "^0.25.9"
   },
+  "pnpm": {
+    "overrides": {
+      "zod": "^3.25.76"
+    }
+  },
   "devDependencies": {
     "@swc/cli": "^0.7.8",
     "@swc/core": "^1.13.20",
@@ -106,12 +111,22 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
     "@vercel/node": "^2.15.10",
     "autoprefixer": "^10.4.21",
-    "eslint": "^8.57.1",
-    "eslint-config-next": "14.2.4",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "15.1.1",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.9.2"
-  }
+  },
+  "packageManager": "[email protected]",
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not dead",
+    "not IE 11"
+  ]
 }