fixed resize error

public/index.html

@@ -51,54 +51,7 @@
 					// Store container reference in p5 instance
 					p.containerWidth = container.clientWidth;
 					p.containerHeight = container.clientHeight;
-					
-					let resizeTimeout = null;
-					let resizeObserver = null;
-
-					// Update container dimensions when needed
-					const updateContainerSize = () => {
-						const rect = container.getBoundingClientRect();
-						const newWidth = rect.width;
-						const newHeight = rect.height;
-						
-						// Only update if dimensions actually changed
-						if (p.containerWidth !== newWidth || p.containerHeight !== newHeight) {
-							p.containerWidth = newWidth;
-							p.containerHeight = newHeight;
-							if (p.windowResized) {
-								p.windowResized();
-							}
-						}
-					};
-
-					// Debounced resize handler
-					const debouncedResize = () => {
-						if (resizeTimeout) {
-							clearTimeout(resizeTimeout);
-						}
-						resizeTimeout = setTimeout(() => {
-							updateContainerSize();
-							resizeTimeout = null;
-						}, 100); // Debounce for 100ms
-					};
-
-					// Setup resize observer
-					const setupResizeObserver = () => {
-						if (resizeObserver) {
-							resizeObserver.disconnect();
-						}
-						
-						resizeObserver = new ResizeObserver((entries) => {
-							// Avoid processing if container is hidden or detached
-							if (container.offsetParent !== null) {
-								window.requestAnimationFrame(() => {
-									debouncedResize();
-								});
-							}
-						});
-						
-						resizeObserver.observe(container);
-					};
+					p.container = container; // Store container reference
 
 					// Add the sketch code to p5 instance scope
 					const sketchFunction = new Function('p', `
@@ -118,14 +71,23 @@
 								}
 							}
 							
-							// Always ensure we have window resize handling
-							if (typeof windowResized !== 'function') {
-								windowResized = function() {
-									resizeCanvas(containerWidth, containerHeight, true);
-								}
-							}
-							
-							return { setup, draw, windowResized };
+							// Return all defined p5 functions
+							return {
+								setup,
+								draw,
+								// Mouse events
+								mousePressed: typeof mousePressed === 'function' ? mousePressed : undefined,
+								mouseReleased: typeof mouseReleased === 'function' ? mouseReleased : undefined,
+								mouseMoved: typeof mouseMoved === 'function' ? mouseMoved : undefined,
+								mouseDragged: typeof mouseDragged === 'function' ? mouseDragged : undefined,
+								mouseClicked: typeof mouseClicked === 'function' ? mouseClicked : undefined,
+								doubleClicked: typeof doubleClicked === 'function' ? doubleClicked : undefined,
+								mouseWheel: typeof mouseWheel === 'function' ? mouseWheel : undefined,
+								// Keyboard events
+								keyPressed: typeof keyPressed === 'function' ? keyPressed : undefined,
+								keyReleased: typeof keyReleased === 'function' ? keyReleased : undefined,
+								keyTyped: typeof keyTyped === 'function' ? keyTyped : undefined
+							};
 						}
 					`);
 					
@@ -149,25 +111,26 @@
 								// Add a custom class to help with styling
 								p._renderer.canvas.classList.add('p5-managed-canvas');
 							}
-							
-							// Setup resize observer after canvas is added
-							setupResizeObserver();
 						}
 					};
 					
 					p.draw = functions.draw.bind(p);
-					p.windowResized = functions.windowResized.bind(p);
+					
+					// Bind all mouse and keyboard event handlers
+					if (functions.mousePressed) p.mousePressed = functions.mousePressed.bind(p);
+					if (functions.mouseReleased) p.mouseReleased = functions.mouseReleased.bind(p);
+					if (functions.mouseMoved) p.mouseMoved = functions.mouseMoved.bind(p);
+					if (functions.mouseDragged) p.mouseDragged = functions.mouseDragged.bind(p);
+					if (functions.mouseClicked) p.mouseClicked = functions.mouseClicked.bind(p);
+					if (functions.doubleClicked) p.doubleClicked = functions.doubleClicked.bind(p);
+					if (functions.mouseWheel) p.mouseWheel = functions.mouseWheel.bind(p);
+					if (functions.keyPressed) p.keyPressed = functions.keyPressed.bind(p);
+					if (functions.keyReleased) p.keyReleased = functions.keyReleased.bind(p);
+					if (functions.keyTyped) p.keyTyped = functions.keyTyped.bind(p);
 					
 					// Cleanup when sketch is removed
 					p._cleanup = () => {
-						if (resizeObserver) {
-							resizeObserver.disconnect();
-							resizeObserver = null;
-						}
-						if (resizeTimeout) {
-							clearTimeout(resizeTimeout);
-							resizeTimeout = null;
-						}
+						// No cleanup needed anymore
 					};
 				}, container);
 				

src/App.scss

@@ -198,12 +198,11 @@ body {
 
   .p5-editor-container {
     width: 100%;
-    height: calc(100% - 100px);
-    border-radius: 12px;
-    border: 2px solid var(--gray-600);
+    height: 600px;
+    position: relative;
     overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    background-color: var(--Neutral-10);
+    border-radius: 10px;
+    background: #1e1e1e;
     
     @media (max-width: 1024px) {
       width: 100%;

src/components/p5/P5WithEditor.tsx

@@ -27,6 +27,7 @@ declare global {
     initSketch: (container: HTMLElement) => void;
     updateSketch: (code: string, container: HTMLElement) => boolean;
     removeSketch: () => void;
+    mySketch: any;
   }
 }
 
@@ -47,8 +48,13 @@ function P5WithEditorComponent() {
   const [isSending, setIsSending] = useState(false);
   const [isAnimatingCode, setIsAnimatingCode] = useState(false);
   const [cursorPosition, setCursorPosition] = useState<{ lineNumber: number, column: number } | null>(null);
+  const [isFirstQuestion, setIsFirstQuestion] = useState(true); // Track if this is the first question
   const editorRef = useRef<any>(null);
   const animationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Store test sketch reference
+  const testSketchRef = useRef<string>("");
 
   // Function to handle editor mounting
   const handleEditorDidMount = (editor: any) => {
@@ -190,20 +196,33 @@ function P5WithEditorComponent() {
       // Convert to array if it's not already
       const partsArray = Array.isArray(parts) ? parts : [parts];
       
-      // Check if there's text content and we have editor content
+      // Check if there's text content
       const hasTextContent = partsArray.some(part => part.text);
       
-      if (hasTextContent && editorContent) {
+      if (hasTextContent) {
         // Show sending indicator
         setIsSending(true);
         
-        // Format the code before sending
-        const formattedCode = formatCodeForModel(editorContent);
-        
-        // Add the current editor content as context
-        partsArray.push({
-          text: `\n\n--- CURRENT P5.JS CODE IN EDITOR ---\n\`\`\`javascript\n${formattedCode}\n\`\`\`\n\nPlease consider this code when responding to my request. If I'm asking for changes or improvements, use this as the starting point.`
-        });
+        if (isFirstQuestion) {
+          // For the first question, include the initial test sketch code
+          const sketchToUse = testSketchRef.current || editorContent;
+          const formattedCode = formatCodeForModel(sketchToUse);
+          
+          // Add the test sketch as context for the first question
+          partsArray.push({
+            text: `\n\n--- CURRENT P5.JS CODE IN EDITOR ---\n\`\`\`javascript\n${formattedCode}\n\`\`\`\n\nPlease use this code as a starting point. You can modify or improve it based on my request.`
+          });
+          
+          // Mark first question as used
+          setIsFirstQuestion(false);
+        } else if (editorContent) {
+          // For subsequent questions, use the current editor content
+          const formattedCode = formatCodeForModel(editorContent);
+          
+          partsArray.push({
+            text: `\n\n--- CURRENT P5.JS CODE IN EDITOR ---\n\`\`\`javascript\n${formattedCode}\n\`\`\`\n\nPlease consider this code when responding to my request. If I'm asking for changes or improvements, use this as the starting point.`
+          });
+        }
         
         // Hide sending indicator after a short delay
         setTimeout(() => setIsSending(false), 1000);
@@ -217,7 +236,7 @@ function P5WithEditorComponent() {
     return () => {
       client.send = originalSend;
     };
-  }, [client, editorContent]);
+  }, [client, editorContent, isFirstQuestion]);
 
   useEffect(() => {
     if (containerRef.current) {
@@ -314,38 +333,42 @@ function windowResized() {
 }
       `;
       
+      // Store test sketch in the ref for later use
+      testSketchRef.current = testSketch;
+      
       // Set the editor content and displayed content
       setEditorContent(testSketch);
       setDisplayedContent(testSketch);
       
       // Update the sketch with the test code
       window.updateSketch(testSketch, containerRef.current);
-    }
-    
-    // Cleanup on unmount
-    return () => {
-      window.removeSketch();
-    };
-  }, []);
 
-  useEffect(() => {
-    setConfig({
-      model: "models/gemini-2.0-flash-exp",
-      generationConfig: {
-        temperature: 0.1,
-        responseModalities: "audio",
-        speechConfig: {
-          voiceConfig: {
-            prebuiltVoiceConfig: {
-              voiceName: "Puck"
+      // Configure the model with the test sketch included in the system instruction
+      setConfig({
+        model: "models/gemini-2.0-flash-exp",
+        generationConfig: {
+          temperature: 0.1,
+          responseModalities: "audio",
+          speechConfig: {
+            voiceConfig: {
+              prebuiltVoiceConfig: {
+                voiceName: "Puck"
+              }
             }
           }
-        }
-      },
-      systemInstruction: {
-        parts: [
-          {
-            text: `You are a P5.js creative coding expert that helps users create interactive sketches.
+        },
+        systemInstruction: {
+          parts: [
+            {
+              text: `You are a P5.js creative coding expert that helps users create interactive sketches.
+
+INITIAL CODE IN EDITOR:
+\`\`\`javascript
+${testSketch}
+\`\`\`
+
+When the user asks their first question, use the above code as a starting point. Modify it based on their request. 
+Your responses should be direct, helpful, and technically accurate. Users are looking for creative coding help with p5.js sketches.
 
 When a user requests a sketch:
 1. Always use the updateSketch function to create or modify sketches
@@ -360,31 +383,39 @@ You can create sketches using:
 - Sprite-based games (p5.play library)
 - Full window canvas with automatic resizing
 
+In the setup() function, ALWAYS use the createCanvas(containerWidth, containerHeight) function to create the canvas. DO NOT EVER use windowWidth or windowHeight.
+
 Focus on creating visually engaging and interactive experiences. As soon as the user requests a sketch, confirm you heard them, THEN you should create the sketch and then explain what it does and how to interact with it. Be EXTREMELY brief and pithy.`
-          },
-        ],
-      },
-      tools: [
-        {
-          functionDeclarations: [
-            {
-              name: "updateSketch",
-              description: "Create or update the P5.js sketch with new code. The sketch will run in a full-window canvas.",
-              parameters: {
-                type: SchemaType.OBJECT,
-                properties: {
-                  sketch: {
-                    type: SchemaType.STRING,
-                    description: "Complete P5.js sketch code including all variable declarations, setup(), draw(), and any additional functions needed. The code should be a complete, self-contained sketch."
-                  }
-                },
-                required: ["sketch"]
-              }
-            }
+            },
           ],
         },
-      ],
-    });
+        tools: [
+          {
+            functionDeclarations: [
+              {
+                name: "updateSketch",
+                description: "Create or update the P5.js sketch with new code. The sketch will run in a full-window canvas.",
+                parameters: {
+                  type: SchemaType.OBJECT,
+                  properties: {
+                    sketch: {
+                      type: SchemaType.STRING,
+                      description: "Complete P5.js sketch code including all variable declarations, setup(), draw(), and any additional functions needed. The code should be a complete, self-contained sketch. In the setup() function, ALWAYS use the createCanvas(containerWidth, containerHeight) function to create the canvas. DO NOT EVER use windowWidth or windowHeight."
+                    }
+                  },
+                  required: ["sketch"]
+                }
+              }
+            ],
+          },
+        ],
+      });
+    }
+    
+    // Cleanup on unmount
+    return () => {
+      window.removeSketch();
+    };
   }, [setConfig]);
 
   useEffect(() => {
@@ -487,22 +518,30 @@ Focus on creating visually engaging and interactive experiences. As soon as the
       return;
     }
     
-    // Always update both editor content and displayed content when user types
+    // Always update editor content immediately for responsiveness
     setEditorContent(value);
     setDisplayedContent(value);
     
-    if (!containerRef.current) {
-      console.warn("Container ref is not available");
-      return;
+    // Clear any existing timeout
+    if (updateTimeoutRef.current) {
+      clearTimeout(updateTimeoutRef.current);
     }
     
-    try {
-      console.log("Updating sketch from editor");
-      const result = window.updateSketch(value, containerRef.current);
-      console.log("Editor update result:", result);
-    } catch (error) {
-      console.error("Error updating sketch from editor:", error);
-    }
+    // Debounce the sketch update
+    updateTimeoutRef.current = setTimeout(() => {
+      if (!containerRef.current) {
+        console.warn("Container ref is not available");
+        return;
+      }
+      
+      try {
+        console.log("Updating sketch from editor");
+        const result = window.updateSketch(value, containerRef.current);
+        console.log("Editor update result:", result);
+      } catch (error) {
+        console.error("Error updating sketch from editor:", error);
+      }
+    }, 1000); // Wait for 1 second of no changes before updating
   };
 
   const startResizing = useCallback((e: React.MouseEvent) => {
@@ -527,13 +566,11 @@ Focus on creating visually engaging and interactive experiences. As soon as the
         const newWidth = (e.clientX / containerWidth) * 100;
         setEditorWidth(Math.min(Math.max(20, newWidth), 80)); // Limit between 20% and 80%
         
-        // Force p5.js to update its dimensions
-        if (containerRef.current) {
-          // Small delay to let the DOM update
-          setTimeout(() => {
-            const event = new Event('resize');
-            window.dispatchEvent(event);
-          }, 50);
+        // Update sketch dimensions directly if needed
+        if (containerRef.current && window.mySketch) {
+          window.mySketch.containerWidth = containerRef.current.clientWidth;
+          window.mySketch.containerHeight = containerRef.current.clientHeight;
+          window.mySketch.resizeCanvas(window.mySketch.containerWidth, window.mySketch.containerHeight);
         }
       }
     }

src/components/p5/p5-with-editor.scss

@@ -5,6 +5,7 @@
   overflow: hidden;
   position: relative;
   border-radius: 10px;
+  border: 2px solid #2d2d2d;
   
   @media (max-width: 768px) {
     flex-direction: column;
@@ -107,6 +108,7 @@
       position: relative;
       background: #000;
       overflow: hidden;
+      pointer-events: auto;
 
       canvas {
         display: block !important;
@@ -115,6 +117,7 @@
         position: relative !important;
         margin: auto;
         object-fit: contain;
+        pointer-events: auto;
       }
       
       // Fix for p5.js accessibility tooltips