Improve Agent Suggestion UX and Use Local Icons for Templates

auto-analyst-backend/scripts/populate_agent_templates.py

@@ -22,7 +22,7 @@
             "template_name": "matplotlib_agent",
             "display_name": "Matplotlib Visualization Agent",
             "description": "Creates static publication-quality plots using matplotlib and seaborn",
-            "icon_url": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/matplotlib/matplotlib-original.svg",
+            "icon_url": "/icons/templates/matplotlib.svg",
             "prompt_template": """
 You are a matplotlib/seaborn visualization expert. Your task is to create high-quality static visualizations using matplotlib and seaborn libraries.
 
@@ -42,7 +42,7 @@
             "template_name": "seaborn_agent",
             "display_name": "Seaborn Statistical Plots Agent",
             "description": "Creates statistical visualizations and data exploration plots using seaborn",
-            "icon_url": "https://seaborn.pydata.org/_images/logo-mark-lightbg.svg",
+            "icon_url": "/icons/templates/seaborn.svg",
             "prompt_template": """
 You are a seaborn statistical visualization expert. Your task is to create statistical plots and exploratory data visualizations.
 
@@ -65,7 +65,7 @@
             "template_name": "polars_agent",
             "display_name": "Polars Data Processing Agent",
             "description": "High-performance data manipulation and analysis using Polars",
-            "icon_url": "https://raw.githubusercontent.com/pola-rs/polars-static/master/logos/polars-logo-dark.svg",
+            "icon_url": "/icons/templates/polars.svg",
             "prompt_template": """
 You are a Polars data processing expert. Perform high-performance data manipulation and analysis using Polars.
 
@@ -88,7 +88,7 @@
             "template_name": "data_cleaning_agent",
             "display_name": "Data Cleaning Specialist Agent",
             "description": "Specialized in comprehensive data cleaning and quality assessment",
-            "icon_url": "https://cdn-icons-png.flaticon.com/512/2103/2103633.png",
+            "icon_url": "/icons/templates/data-cleaning.png",
             "prompt_template": """
 You are a data cleaning specialist. Perform comprehensive data quality assessment and cleaning.
 
@@ -111,7 +111,7 @@
             "template_name": "feature_engineering_agent",
             "display_name": "Feature Engineering Agent",
             "description": "Creates and transforms features for machine learning models",
-            "icon_url": "https://cdn-icons-png.flaticon.com/512/2103/2103658.png",
+            "icon_url": "/icons/templates/feature-engineering.png",
             "prompt_template": """
 You are a feature engineering expert. Create, transform, and select features for machine learning.
 

auto-analyst-frontend/components/chat/AgentSuggestions.tsx

@@ -188,15 +188,23 @@ export default function AgentSuggestions({
         ? message.slice(activeAtPos + 1, activeAtPos + 1 + spaceIndex) 
         : textAfterAt
 
-      // Only show suggestions if we're actively typing an agent name
-      if (typedText && !typedText.includes(' ')) {
-        const filtered = agents.filter(agent => 
-          agent.name.toLowerCase().includes(typedText.toLowerCase())
-        )
-        setFilteredAgents(filtered)
-        setSelectedIndex(filtered.length > 0 ? 0 : -1)
+          // Show suggestions if we're actively typing an agent name or just typed @
+    if (!typedText.includes(' ')) {
+      // If no text after @, show all agents
+      if (typedText === '') {
+        setFilteredAgents(agents)
+        setSelectedIndex(agents.length > 0 ? 0 : -1)
         return
       }
+
+      // If there's text after @, filter agents based on that text
+      const filtered = agents.filter(agent => 
+        agent.name.toLowerCase().includes(typedText.toLowerCase())
+      )
+      setFilteredAgents(filtered)
+      setSelectedIndex(filtered.length > 0 ? 0 : -1)
+      return
+    }
     }
 
     setFilteredAgents([])
@@ -223,6 +231,7 @@ export default function AgentSuggestions({
           break
         case 'Enter':
           e.preventDefault()
+          e.stopPropagation()
           if (selectedIndex >= 0 && selectedIndex < filteredAgents.length) {
             onSuggestionSelect(filteredAgents[selectedIndex].name)
           }

auto-analyst-frontend/components/chat/ChatInput.tsx

@@ -1951,6 +1951,13 @@ const ChatInput = forwardRef<
                       onChange={handleInputChange}
                       onKeyDown={(e) => {
                         if (e.key === 'Enter' && !e.shiftKey) {
+                          // Check if agent suggestions are visible and should handle the Enter key
+                          const isAgentSuggestionsVisible = !showCommandSuggestions && message.includes('@');
+                          if (isAgentSuggestionsVisible) {
+                            // Don't handle Enter here, let AgentSuggestions component handle it
+                            // The AgentSuggestions component will preventDefault if it handles the event
+                            return;
+                          }
                           e.preventDefault()
                           handleSubmit(e)
                         }