Merge pull request #1 from avila2026/copilot/identify-improvements-to-code

perf: fix AI singleton, cache TTL/eviction, React.memo on ProductCard, immutable cart, scroll via useEffect

Author: avila2026

App.tsx

@@ -4,7 +4,7 @@
 */
 
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Navbar from './components/Navbar';
 import Hero from './components/Hero';
 import ProductGrid from './components/ProductGrid';
@@ -25,16 +25,26 @@ function App() {
   const [view, setView] = useState<ViewState>({ type: 'home' });
   const [cartItems, setCartItems] = useState<Product[]>([]);
   const [isCartOpen, setIsCartOpen] = useState(false);
+  // Stores the section id to scroll to after a view change
+  const pendingScrollRef = useRef<string | null>(null);
+
+  // Scroll to the pending section once the home view has mounted
+  useEffect(() => {
+    if (view.type === 'home' && pendingScrollRef.current !== null) {
+      const targetId = pendingScrollRef.current;
+      pendingScrollRef.current = null;
+      scrollToSection(targetId);
+    }
+  }, [view]);
 
   // Handle navigation (clicks on Navbar or Footer links)
   const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, targetId: string) => {
     e.preventDefault();
 
-    // If we are not home, go home first
+    // If we are not home, go home first and defer the scroll to the useEffect above
     if (view.type !== 'home') {
+      pendingScrollRef.current = targetId;
       setView({ type: 'home' });
-      // Allow state update to render Home before scrolling
-      setTimeout(() => scrollToSection(targetId), 0);
     } else {
       scrollToSection(targetId);
     }
@@ -72,9 +82,7 @@ function App() {
   };
 
   const removeFromCart = (index: number) => {
-    const newItems = [...cartItems];
-    newItems.splice(index, 1);
-    setCartItems(newItems);
+    setCartItems(prev => prev.filter((_, i) => i !== index));
   };
 
   return (
@@ -109,8 +117,8 @@ function App() {
           <ProductDetail 
             product={view.product} 
             onBack={() => {
+              pendingScrollRef.current = 'products';
               setView({ type: 'home' });
-              setTimeout(() => scrollToSection('products'), 50);
             }}
             onAddToCart={addToCart}
           />

components/ImageGenerator.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { GoogleGenAI } from "@google/genai";
+import { GeminiAdapter } from '../services/aiAdapter';
 
 interface ImageGeneratorProps {
   onImageGenerated: (imageUrl: string) => void;
@@ -13,27 +13,9 @@ const ImageGenerator: React.FC<ImageGeneratorProps> = ({ onImageGenerated }) =>
   const generateImage = async () => {
     setLoading(true);
     try {
-      const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY! });
-      const response = await ai.models.generateContent({
-        model: 'gemini-3.1-flash-image-preview',
-        contents: {
-          parts: [{ text: prompt }],
-        },
-        config: {
-          imageConfig: {
-            aspectRatio: aspectRatio,
-            imageSize: "1K"
-          },
-        },
-      });
-
-      for (const part of response.candidates[0].content.parts) {
-        if (part.inlineData) {
-          const base64EncodeString = part.inlineData.data;
-          const imageUrl = `data:image/png;base64,${base64EncodeString}`;
-          onImageGenerated(imageUrl);
-          break;
-        }
+      const imageUrl = await GeminiAdapter.generateImage(prompt);
+      if (imageUrl) {
+        onImageGenerated(imageUrl);
       }
     } catch (error) {
       console.error('Error generating image:', error);

components/ProductCard.tsx

@@ -7,7 +7,7 @@ interface ProductCardProps {
   onClick: (product: Product) => void;
 }
 
-const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
+const ProductCard: React.FC<ProductCardProps> = React.memo(({ product, onClick }) => {
   return (
     <div className="group flex flex-col gap-6 cursor-pointer" onClick={() => onClick(product)}>
       <div className="relative w-full aspect-[4/5] overflow-hidden bg-[#FFE4E6]">
@@ -42,6 +42,8 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
       </div>
     </div>
   );
-};
+});
+
+ProductCard.displayName = 'ProductCard';
 
 export default ProductCard;

services/aiAdapter.ts

@@ -12,8 +12,9 @@ export interface AIAdapter {
   generateImage(prompt: string): Promise<string | null>;
 }
 
-const getSystemInstruction = () => {
-  const productContext = PRODUCTS.map(p => 
+// Build the system instruction once and reuse it – the product catalog is static.
+const SYSTEM_INSTRUCTION: string = (() => {
+  const productContext = PRODUCTS.map(p =>
     `- ${p.name} ($${p.price}): ${p.description}. Features: ${p.features.join(', ')}`
   ).join('\n');
 
@@ -26,11 +27,26 @@ const getSystemInstruction = () => {
   Answer customer questions about specifications, recommendations, and brand philosophy.
   Keep answers concise (under 3 sentences usually) to fit the chat UI. 
   If asked about products not in the list, gently steer them back to Achadinhos Maternidade products.`;
+})();
+
+/**
+ * Compute a lightweight hash string for a chat history + new message so that
+ * we avoid calling JSON.stringify on the entire history array on every request.
+ * Uses a djb2-style algorithm over the serialised text.
+ */
+const hashChatKey = (history: {role: string, text: string}[], newMessage: string): string => {
+  let hash = 5381;
+  const str = history.map(h => `${h.role}:${h.text}`).join('|') + '|' + newMessage;
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) + hash) ^ str.charCodeAt(i);
+    hash = hash >>> 0; // keep it an unsigned 32-bit integer
+  }
+  return `chat_${history.length}_${hash}`;
 };
 
 export const GeminiAdapter: AIAdapter = {
   sendMessage: async (history, newMessage, mode) => {
-    const cacheKey = `chat_${JSON.stringify(history)}_${newMessage}`;
+    const cacheKey = hashChatKey(history, newMessage);
     const cachedResponse = cache.get(cacheKey);
     if (cachedResponse) return cachedResponse;
 
@@ -40,7 +56,7 @@ export const GeminiAdapter: AIAdapter = {
 
       const chat = ai.chats.create({
         model,
-        config: { systemInstruction: getSystemInstruction() },
+        config: { systemInstruction: SYSTEM_INSTRUCTION },
         history: history.map(h => ({ role: h.role, parts: [{ text: h.text }] }))
       });
 

services/aiFactory.ts

@@ -11,6 +11,14 @@ const getApiKey = () => {
     return key;
 };
 
+// Singleton: reuse a single GoogleGenAI instance across all API calls.
+let _instance: GoogleGenAI | null = null;
+
 export const aiFactory = {
-    getInstance: () => new GoogleGenAI({ apiKey: getApiKey() }),
+    getInstance: (): GoogleGenAI => {
+        if (!_instance) {
+            _instance = new GoogleGenAI({ apiKey: getApiKey() });
+        }
+        return _instance;
+    },
 };

services/cache.ts

@@ -3,18 +3,53 @@
  * SPDX-License-Identifier: Apache-2.0
 */
 
+const CACHE_PREFIX = 'am_cache_';
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000; // 24 hours
+const MAX_CACHE_ENTRIES = 50;
+
+interface CacheEntry {
+  value: string;
+  expiresAt: number;
+}
+
 export const cache = {
   get: (key: string): string | null => {
     try {
-      return localStorage.getItem(key);
+      const raw = localStorage.getItem(CACHE_PREFIX + key);
+      if (!raw) return null;
+      const entry: CacheEntry = JSON.parse(raw);
+      if (Date.now() > entry.expiresAt) {
+        localStorage.removeItem(CACHE_PREFIX + key);
+        return null;
+      }
+      return entry.value;
     } catch (e) {
       console.warn("Cache get failed", e);
       return null;
     }
   },
   set: (key: string, value: string): void => {
     try {
-      localStorage.setItem(key, value);
+      // Evict the oldest entry when the cache is full.
+      const cacheKeys = Object.keys(localStorage).filter(k => k.startsWith(CACHE_PREFIX));
+      if (cacheKeys.length >= MAX_CACHE_ENTRIES) {
+        let oldestKey: string | null = null;
+        let oldestExpiry = Infinity;
+        for (const k of cacheKeys) {
+          try {
+            const raw = localStorage.getItem(k);
+            if (!raw) continue;
+            const entry: CacheEntry = JSON.parse(raw);
+            if ((entry.expiresAt ?? 0) < oldestExpiry) {
+              oldestExpiry = entry.expiresAt ?? 0;
+              oldestKey = k;
+            }
+          } catch { /* skip malformed entries */ }
+        }
+        if (oldestKey) localStorage.removeItem(oldestKey);
+      }
+      const entry: CacheEntry = { value, expiresAt: Date.now() + CACHE_TTL_MS };
+      localStorage.setItem(CACHE_PREFIX + key, JSON.stringify(entry));
     } catch (e) {
       console.warn("Cache set failed", e);
     }