Improve image validation

Author: moon0326

special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js

@@ -14,7 +14,7 @@ import styles from './AiChatForm.module.css';
  * @typedef {import('../../../types/new-tab.js').OpenTarget} OpenTarget
  * @typedef {import('../../../types/new-tab.js').SubmitChatAction} SubmitChatAction
  * @typedef {import('../../../types/new-tab.js').AIModels} AIModels
- * @typedef {{ dataUrl: string }} AttachedImage
+ * @typedef {{ dataUrl: string, fileName: string, mimeType: string }} AttachedImage
  */
 
 // File upload constraints - matching apple-browsers implementation
@@ -85,10 +85,24 @@ export function AiChatForm({ query, autoFocus, onChange, onSubmit }) {
             params.modelId = selectedModelId;
         }
         if (attachedImages.length > 0) {
+            // Format conversion logic matching apple-browsers/AIChatOmnibarController.swift:
+            // Preserve JPEG for .jpg/.jpeg sources, use PNG for all others (including WebP)
             params.images = attachedImages.map((img) => {
-                const match = img.dataUrl.match(/^data:image\/(\w+);base64,(.+)$/);
-                if (!match) return { data: img.dataUrl, format: 'png' };
-                return { data: match[2], format: match[1] === 'webp' ? 'png' : match[1] };
+                // Extract file extension from filename
+                const ext = img.fileName.split('.').pop()?.toLowerCase() || '';
+                const isJPEG = ext === 'jpg' || ext === 'jpeg';
+                const format = isJPEG ? 'jpeg' : 'png';
+
+                // Parse and validate data URL
+                const match = img.dataUrl.match(/^data:image\/(jpeg|jpg|png|webp);base64,(.+)$/);
+                if (!match) {
+                    console.warn(`Invalid data URL format for file "${img.fileName}". Expected data:image/(jpeg|png|webp);base64,...`);
+                    // Fallback: try to extract just the base64 portion if format is malformed
+                    const base64Match = img.dataUrl.match(/base64,(.+)$/);
+                    return { data: base64Match ? base64Match[1] : img.dataUrl, format };
+                }
+
+                return { data: match[2], format };
             });
         }
         onSubmit(params);
@@ -192,7 +206,11 @@ export function AiChatForm({ query, autoFocus, onChange, onSubmit }) {
 
                     reader.onload = () => {
                         clearTimeout(timeoutId);
-                        resolve({ dataUrl: /** @type {string} */ (reader.result) });
+                        resolve({
+                            dataUrl: /** @type {string} */ (reader.result),
+                            fileName: file.name,
+                            mimeType: file.type,
+                        });
                     };
 
                     reader.onerror = () => {
@@ -231,6 +249,13 @@ export function AiChatForm({ query, autoFocus, onChange, onSubmit }) {
 
     const selectedModel = aiModels.find((m) => m.id === selectedModelId) ?? aiModels[0] ?? null;
 
+    // Default to first model on mount if available
+    useEffect(() => {
+        if (aiModels.length > 0 && !selectedModelId) {
+            setSelectedModelId(aiModels[0].id);
+        }
+    }, [aiModels, selectedModelId]);
+
     useEffect(() => {
         if (!modelDropdownOpen) return;
         /** @param {MouseEvent} e */
@@ -240,11 +265,14 @@ export function AiChatForm({ query, autoFocus, onChange, onSubmit }) {
             }
         };
         const handleScroll = () => setModelDropdownOpen(false);
+        const handleResize = () => setModelDropdownOpen(false);
         document.addEventListener('click', handleClickOutside, true);
         window.addEventListener('scroll', handleScroll, true);
+        window.addEventListener('resize', handleResize);
         return () => {
             document.removeEventListener('click', handleClickOutside, true);
             window.removeEventListener('scroll', handleScroll, true);
+            window.removeEventListener('resize', handleResize);
         };
     }, [modelDropdownOpen]);