update v3.5

Author: Evin John

chrome-extension/README-TRIAGE-AI.md

@@ -153,6 +153,23 @@ Based on comprehensive analysis, the system routes prompts to:
 - Reasoning: keyword: edit, keyword: photo, pattern: image editing, has shared images
 **Output:** "Using the provided image, please add a vibrant sunset background to the scene. Ensure the change integrates seamlessly with the original lighting and composition, creating a warm, golden atmosphere that complements the existing elements while maintaining the original style and perspective."
 
+### Platform-Specific Examples
+
+#### ChatGPT (DALL-E)
+**Input:** "create a logo for my startup"
+**Platform:** ChatGPT
+**Output:** "Professional startup logo design, minimalist style, modern typography, clean geometric shapes, high quality, detailed, no text, no watermark"
+
+#### Gemini/AI Studio
+**Input:** "create a logo for my startup"
+**Platform:** Gemini
+**Output:** "Create a modern, minimalist logo for a startup company with clean typography and geometric design elements. The design should be professional and memorable, with a contemporary color scheme suitable for digital and print applications, featuring sharp focus on brand identity and scalability."
+
+#### DALL-E Example
+**Input:** "anime character with blue hair"
+**Platform:** ChatGPT (DALL-E)
+**Output:** "Anime character with blue hair and green eyes, kawaii style, soft lighting, centered composition, detailed character design, high quality, no text, no watermark"
+
 ### AI Prompting Example
 **Input:** "write code for fibonacci"
 **Analysis:**
@@ -285,6 +302,19 @@ The system now includes sophisticated image generation capabilities:
 - Handles image editing scenarios appropriately
 - Preserves references to user's photos and images
 
+**Platform-Specific Optimization:**
+- **ChatGPT**: Uses DALL-E prompting techniques
+  - Natural, descriptive language (not technical parameters)
+  - Quality boosters: "high quality", "detailed", "professional"
+  - Negative prompts: "no text", "no watermark"
+  - Artistic style references and lighting descriptions
+  - Photography terminology and composition details
+- **Gemini/AI Studio**: Uses official Gemini image generation templates
+  - Photorealistic scenes with camera specifications
+  - Stylized illustrations and stickers
+  - Product mockups and commercial photography
+  - Sequential art and comic panels
+
 ## Future Enhancements
 
 Potential improvements include:

chrome-extension/ai-studio-sparkle.js

@@ -96,11 +96,85 @@
             sparklePath.removeAttribute("filter");
         });
 
+        // Add hover popup functionality
+        let hoverTimeout;
+        let popup = null;
+
+        console.log('Threadly: Adding hover events to sparkle element');
+        console.log('Threadly: SVG element:', svg);
+        console.log('Threadly: SVG position:', svg.getBoundingClientRect());
+
+        svg.addEventListener('mouseenter', () => {
+            console.log('Threadly: Mouse entered sparkle - HOVER EVENT TRIGGERED!');
+            hoverTimeout = setTimeout(() => {
+                console.log('Threadly: Creating popup after hover delay');
+                
+                // Create a simple test popup first
+                const testPopup = document.createElement('div');
+                testPopup.style.position = 'absolute';
+                testPopup.style.top = '-50px';
+                testPopup.style.left = '50%';
+                testPopup.style.transform = 'translateX(-50%)';
+                testPopup.style.background = 'red';
+                testPopup.style.color = 'white';
+                testPopup.style.padding = '10px';
+                testPopup.style.borderRadius = '5px';
+                testPopup.style.zIndex = '99999';
+                testPopup.textContent = 'TEST POPUP';
+                svg.style.position = 'relative';
+                svg.appendChild(testPopup);
+                console.log('Threadly: Test popup created and appended');
+                console.log('Threadly: SVG children count:', svg.children.length);
+                
+                // Then try the real popup
+                popup = createModeSelectionPopup(svg);
+                if (popup) {
+                    console.log('Threadly: Popup created successfully');
+                } else {
+                    console.log('Threadly: Popup creation failed');
+                }
+            }, 300); // Show popup after 300ms hover
+        });
+
+        svg.addEventListener('mouseleave', () => {
+            console.log('Threadly: Mouse left sparkle');
+            clearTimeout(hoverTimeout);
+            
+            // Remove test popup
+            const testPopup = svg.querySelector('div[style*="background: red"]');
+            if (testPopup) {
+                testPopup.remove();
+                console.log('Threadly: Test popup removed');
+            }
+            
+            if (popup) {
+                console.log('Threadly: Removing popup');
+                popup.remove();
+                popup = null;
+            }
+        });
+
         // Add click handler (exact same as Claude)
         svg.addEventListener('click', (event) => {
             event.preventDefault();
             event.stopPropagation();
             console.log('Threadly: Sparkle clicked!');
+            
+            // Test: Manually trigger hover event for debugging
+            console.log('Threadly: Manually triggering hover test');
+            const testEvent = new MouseEvent('mouseenter', {
+                bubbles: true,
+                cancelable: true,
+                view: window
+            });
+            svg.dispatchEvent(testEvent);
+            
+            // If popup is visible, remove it and proceed with autonomous mode
+            if (popup) {
+                popup.remove();
+                popup = null;
+            }
+            
             handleSparkleClick();
         });
 
@@ -111,6 +185,159 @@
         return svg;
     }
 
+    // Create mode selection popup
+    function createModeSelectionPopup(sparkleElement) {
+        console.log('Threadly: Creating mode selection popup');
+        console.log('Threadly: Sparkle element:', sparkleElement);
+        
+        try {
+            // Remove existing popup if any
+            const existingPopup = document.querySelector('.threadly-mode-popup');
+            if (existingPopup) {
+                console.log('Threadly: Removing existing popup');
+                existingPopup.remove();
+            }
+
+            // Create popup container
+            console.log('Threadly: Creating popup div element');
+            const popup = document.createElement('div');
+            popup.className = 'threadly-mode-popup';
+            console.log('Threadly: Setting popup innerHTML');
+            popup.innerHTML = `
+                <div class="threadly-mode-option correction" data-mode="correction">
+                    <span class="mode-icon">✏️</span>
+                    <span class="mode-text">CORRECT</span>
+                </div>
+                <div class="threadly-mode-option image" data-mode="image">
+                    <span class="mode-icon">🎨</span>
+                    <span class="mode-text">IMAGE</span>
+                </div>
+                <div class="threadly-mode-option refine" data-mode="refine">
+                    <span class="mode-icon">✨</span>
+                    <span class="mode-text">REFINE</span>
+                </div>
+            `;
+
+            // Position popup relative to sparkle element
+            console.log('Threadly: Setting sparkle element position');
+            sparkleElement.style.position = 'relative';
+            console.log('Threadly: Appending popup to sparkle element');
+            sparkleElement.appendChild(popup);
+            console.log('Threadly: Popup appended to sparkle element');
+            console.log('Threadly: Popup element:', popup);
+            console.log('Threadly: Sparkle element position:', sparkleElement.getBoundingClientRect());
+
+            // Show popup with animation
+            setTimeout(() => {
+                console.log('Threadly: Adding show class to popup');
+                popup.classList.add('show');
+                console.log('Threadly: Popup classes:', popup.className);
+                console.log('Threadly: Popup position:', popup.getBoundingClientRect());
+            }, 10);
+
+            // Add click handlers for each option
+            popup.addEventListener('click', (e) => {
+                const mode = e.target.closest('.threadly-mode-option')?.dataset.mode;
+                if (mode) {
+                    handleModeSelection(mode, sparkleElement);
+                    popup.remove();
+                }
+            });
+
+            // Hide popup when clicking outside
+            const hidePopup = (e) => {
+                if (!popup.contains(e.target) && !sparkleElement.contains(e.target)) {
+                    popup.remove();
+                    document.removeEventListener('click', hidePopup);
+                }
+            };
+
+            setTimeout(() => {
+                document.addEventListener('click', hidePopup);
+            }, 100);
+
+            return popup;
+        } catch (error) {
+            console.error('Threadly: Error creating popup:', error);
+            return null;
+        }
+    }
+
+    // Handle mode selection
+    async function handleModeSelection(mode, sparkleElement) {
+        console.log('Threadly: Mode selected:', mode);
+        
+        // Get current input text
+        const textArea = document.querySelector('textarea, [contenteditable="true"]');
+        if (!textArea) {
+            console.log('Threadly: No text area found');
+            return;
+        }
+
+        const currentText = textArea.value || textArea.textContent || textArea.innerText;
+        if (!currentText || currentText.trim() === '') {
+            console.log('Threadly: No text to process');
+            return;
+        }
+
+        // Visual feedback
+        startClickAnimationSequence(sparkleElement);
+
+        try {
+            if (window.PromptRefiner) {
+                const promptRefiner = new window.PromptRefiner();
+                await promptRefiner.initialize();
+
+                let refinedPrompt;
+                const platform = detectCurrentPlatform();
+
+                switch (mode) {
+                    case 'correction':
+                        refinedPrompt = await promptRefiner.performGrammarCorrection(currentText);
+                        break;
+                    case 'image':
+                        refinedPrompt = await promptRefiner.refineImageGenerationPrompt(currentText, platform);
+                        break;
+                    case 'refine':
+                        refinedPrompt = await promptRefiner.refinePrompt(currentText, platform);
+                        break;
+                }
+
+                // Replace text in the input
+                if (refinedPrompt) {
+                    if (textArea.tagName === 'TEXTAREA') {
+                        textArea.value = refinedPrompt;
+                    } else {
+                        textArea.textContent = refinedPrompt;
+                    }
+                    
+                    // Trigger input event to notify the platform
+                    textArea.dispatchEvent(new Event('input', { bubbles: true }));
+                    textArea.dispatchEvent(new Event('change', { bubbles: true }));
+                }
+            }
+        } catch (error) {
+            console.error('Threadly: Error processing prompt:', error);
+        }
+    }
+
+    // Detect current platform
+    function detectCurrentPlatform() {
+        const url = window.location.href;
+        if (url.includes('chat.openai.com') || url.includes('chatgpt.com')) {
+            return 'chatgpt';
+        } else if (url.includes('claude.ai')) {
+            return 'claude';
+        } else if (url.includes('aistudio.google.com')) {
+            return 'ai-studio';
+        } else if (url.includes('gemini.google.com')) {
+            return 'gemini';
+        } else if (url.includes('perplexity.ai')) {
+            return 'perplexity';
+        }
+        return 'chatgpt'; // default fallback
+    }
+
     // Handle sparkle click functionality with prompt refine feature (exact copy from Claude)
     async function handleSparkleClick() {
         console.log('Threadly: Sparkle clicked - prompt refine activated!');
@@ -427,7 +654,9 @@
             console.log('Threadly: Upload button parent:', uploadButton.parentElement);
 
             // Create the sparkle icon
+            console.log('Threadly: Creating sparkle icon');
             const sparkleIcon = createSparkleIcon();
+            console.log('Threadly: Sparkle icon created:', sparkleIcon);
 
             // Style the sparkle icon
             sparkleIcon.style.display = 'inline-block';
@@ -436,6 +665,7 @@
             sparkleIcon.style.top = '0';
             sparkleIcon.style.marginLeft = '0px';
             sparkleIcon.style.marginRight = '8px';
+            console.log('Threadly: Sparkle icon styled');
 
             // Find the main text bar container using multiple selectors for different page states
             let textBarContainer = document.querySelector("body > app-root > ms-app > div > div > div.layout-wrapper.ng-tns-c895710572-0 > div > span > ms-prompt-switcher > ms-chunk-editor > section > footer > ms-prompt-input-wrapper > div > div > div");
@@ -503,11 +733,14 @@
                     try {
                         textBarContainer.insertBefore(sparkleWrapper, uploadButtonWrapper);
                         console.log('Threadly: SUCCESS - Sparkle wrapper inserted before upload button wrapper');
+                        console.log('Threadly: Sparkle icon in DOM:', document.querySelector('[data-threadly-sparkle="true"]'));
+                        console.log('Threadly: Sparkle icon position:', sparkleIcon.getBoundingClientRect());
                     } catch (error) {
                         console.error('Threadly: Insert sparkle wrapper failed:', error);
                         // Fallback: append to text bar container
                         textBarContainer.appendChild(sparkleWrapper);
                         console.log('Threadly: FALLBACK - Sparkle wrapper appended to text bar container');
+                        console.log('Threadly: Sparkle icon in DOM:', document.querySelector('[data-threadly-sparkle="true"]'));
                     }
                 } else {
                     // Try to find the parent container of the upload button and insert before it