Enhance AI Assistant with seeded questions and UI improvements

- Added seeded questions for quick access to common queries.
- Improved layout and styling for header controls and question buttons.
- Updated message sending logic to support seeded questions.
- Refined CSS for better spacing and alignment in the AI Assistant component.

Author: ewaldhofman-sf

src/assets/DemoScript.txt

@@ -27,6 +27,7 @@ This walkthrough showcases both Analyst capabilities (Mario) and Business User f
 | Digging deeper, she finds a specific battery type is driving returns. | Scroll to the Pulse metric → Click **Breakdown** → Filter by **Battery Type** | Notice how filtering by dimensions reveals clear root causes—in this case, a problematic battery type. |
 | She wants to confirm whether this battery type also impacts sales. | Click on question Q1 (auto-seeded) | This uses **Pulse Enhanced Q&A** to correlate across multiple metrics. If no answer returns, move on—Q2 offers another pre-scripted question, or type your own. |
 | The Pulse analysis was great, but she wants to extend her search using conversational AI. | Click [AI Assistent](/McKenzie/ai-assistant) in the header | This uses **Tableau MCP Server** to allow the user to ask any question. The MCP Server sends a system prompt with the user question to the LLM, that has now access to the tools provided by the MCP Server. More specically, the LLM can now list the data sources in the site, find the fields in the data sources that can answer the user question, and query the actual data source. |
+| Next, she wants to do some analysis on publicly accessible data to learn about the impact of accidents to inform here customers | Type in "Using the data source "Incidents, Accidents, & Occupational Safety", can you write an analytical summary of the impact of weather and location on the number of accidents" | This will use another data source (because the system template will use the e-bikes data source by default), and makes correlations using the data it can query |
 | She wants to know the number of returns by battery type. | Type in "Show the number of returns by battery type by year" | You will see in the progress window that the LLM is using multiple iterations, and even correcting itself when errors occur, and using the different tools provided by MCP server to come up with the answer. The visualization in the bottom is using an open source charting library (rechart) to visualize the response of the LLM. |
 | Concerned, McKenzie calls Mario to report the issue. | Click the profile icon (top right) ([jump to](/)) | Return to the login screen. |
 | Mario wants to run his own analysis before taking action. | Click **Analyze** in the header ([jump to](/Mario/Analyze)) | A blank workbook opens, connected to the same published data source. Full Tableau authoring experience. |

src/client/components/analytics/AIAssistent.module.css

@@ -32,8 +32,14 @@
     font-size: 14px;
 }
 
-.clearButton {
+.headerControls {
+    display: flex;
+    flex-direction: column;
     margin-top: 10px;
+    gap: 10px;
+}
+
+.clearButton {
     padding: 6px 12px;
     background: #dc3545;
     color: white;
@@ -42,12 +48,43 @@
     cursor: pointer;
     font-size: 14px;
     transition: background-color 0.2s ease;
+    width: 150px
 }
 
 .clearButton:hover {
     background: #c82333;
 }
 
+.seededQuestions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.seededQuestionsLabel {
+    font-size: 14px;
+    color: #6c757d;
+    font-weight: 500;
+}
+
+.seededQuestionButton {
+    padding: 4px 8px;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    transition: background-color 0.2s ease;
+    min-width: 32px;
+}
+
+.seededQuestionButton:hover {
+    background: #0056b3;
+}
+
 .chatContainer {
     flex: 1;
     display: flex;
@@ -491,10 +528,30 @@
         font-size: 13px;
     }
 
+    .headerControls {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        margin-top: 8px;
+    }
+
     .clearButton {
         padding: 8px 12px;
         font-size: 13px;
-        margin-top: 8px;
+    }
+
+    .seededQuestions {
+        gap: 6px;
+    }
+
+    .seededQuestionsLabel {
+        font-size: 13px;
+    }
+
+    .seededQuestionButton {
+        padding: 4px 6px;
+        font-size: 11px;
+        min-width: 28px;
     }
 
     .messagesContainer {
@@ -645,10 +702,30 @@
         font-size: 12px;
     }
 
+    .headerControls {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
+        margin-top: 6px;
+    }
+
     .clearButton {
         padding: 6px 10px;
         font-size: 12px;
-        margin-top: 6px;
+    }
+
+    .seededQuestions {
+        gap: 4px;
+    }
+
+    .seededQuestionsLabel {
+        font-size: 12px;
+    }
+
+    .seededQuestionButton {
+        padding: 3px 5px;
+        font-size: 10px;
+        min-width: 26px;
     }
 
     .messagesContainer {

src/client/components/analytics/AIAssistent.tsx

@@ -211,12 +211,12 @@ function AIAssistent() {
     }
   }, [progressUpdates]);
 
-  const sendMessage = async () => {
-    if (!currentQuery.trim() || isLoading) return;
+  const sendMessage = async (query: string) => {
+    if (!query.trim() || isLoading) return;
 
     const userMessage: ChatMessage = {
       role: 'user',
-      content: currentQuery.trim(),
+      content: query.trim(),
       timestamp: new Date(),
     };
 
@@ -330,7 +330,7 @@ function AIAssistent() {
   const handleKeyPress = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
-      sendMessage();
+      sendMessage(currentQuery);
     }
   };
 
@@ -340,6 +340,18 @@ function AIAssistent() {
     setError(null);
   };
 
+  const handleSeededQuestion = (questionNumber: number) => {
+    const seededQuestions = {
+      1: "Show me the sales by year?",
+      2: "How is the bike sales KPI trending?",
+      3: "What data sources are available and what are the interesting fields in each data source?",
+      4: "Using the data source 'Incidents, Accidents, & Occupational Safety', can you write an analytical summary of the impact of weather and location on the number of accidents",
+    };
+    
+    const query = seededQuestions[questionNumber as keyof typeof seededQuestions] || '';
+    sendMessage(query);
+  };
+
   const formatTimestamp = (date: Date) => {
     return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   };
@@ -532,17 +544,46 @@ function AIAssistent() {
     <div className={styles.root}>
       <div className={styles.header}>
         <h1 className={styles.title}>Tableau AI Assistant</h1>
+        <div className={styles.headerControls}>
         <p className={styles.subtitle}>
           Ask questions about your data, dashboards, and analytics. Powered by Tableau's MCP.
         </p>
+          <div className={styles.seededQuestions}>
+            <span className={styles.seededQuestionsLabel}>Seeded questions:</span>
+            <button
+              onClick={() => handleSeededQuestion(1)}
+              className={styles.seededQuestionButton}
+            >
+              Data Question
+            </button>
+            <button
+              onClick={() => handleSeededQuestion(2)}
+              className={styles.seededQuestionButton}
+            >
+              Pulse
+            </button>
+            <button
+              onClick={() => handleSeededQuestion(3)}
+              className={styles.seededQuestionButton}
+            >
+              Datasource Info
+            </button>
+            <button
+              onClick={() => handleSeededQuestion(4)}
+              className={styles.seededQuestionButton}
+            >
+              Summary using different data source
+            </button>
+        </div>
         {messages.length > 0 && (
-          <button
-            onClick={clearChat}
-            className={styles.clearButton}
-          >
-            Clear Chat
-          </button>
-        )}
+            <button
+              onClick={clearChat}
+              className={styles.clearButton}
+            >
+              Clear Chat
+            </button>
+          )}
+        </div>
       </div>
 
       <div className={styles.chatContainer}>
@@ -560,7 +601,6 @@ function AIAssistent() {
               {messages.map((message, index) => {
                 const currentToggles = messageToggles[index] || { showTools: false, showCharts: false };
                 const hasVegaSpecs = message.role === 'assistant' && hasVegaLiteSpecs(message);
-                const shouldShowCharts = currentToggles.showCharts || hasVegaSpecs;
 
                 return (
                   <div
@@ -675,7 +715,7 @@ function AIAssistent() {
           />
           <button
             className={styles.sendButton}
-            onClick={sendMessage}
+            onClick={() => sendMessage(currentQuery)}
             disabled={!currentQuery.trim() || isLoading}
           >
             {isLoading ? 'Sending...' : 'Send'}