Make policy suggestion cards clickable to auto-submit prompts (#69)

* Initial plan

* Implement clickable prompt suggestion buttons

Co-authored-by: sethmcknight <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: sethmcknight <[email protected]>

static/chat.css

@@ -114,7 +114,8 @@
     margin-top: 1.5rem;
 }
 
-.policy-topics li {
+.policy-topics li,
+.policy-suggestion-btn {
     background: white;
     padding: 1rem;
     border-radius: 8px;
@@ -122,11 +123,30 @@
     color: #475569;
     font-weight: 500;
     transition: transform 0.2s, box-shadow 0.2s;
+    cursor: pointer;
+    font-size: inherit;
+    font-family: inherit;
+    width: 100%;
+    display: block;
+    text-align: center;
+    border: 1px solid #e2e8f0;
 }
 
-.policy-topics li:hover {
+.policy-topics li:hover,
+.policy-suggestion-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    background: #f8fafc;
+}
+
+.policy-suggestion-btn:focus {
+    outline: 2px solid #667eea;
+    outline-offset: 2px;
+}
+
+.policy-suggestion-btn:active {
+    transform: translateY(0px);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
 
 .message {

static/js/chat.js

@@ -43,6 +43,9 @@ class ChatInterface {
         this.loadQuerySuggestions();
         this.focusInput();
         this.initializeSourcePanel();
+        
+        // Setup initial policy suggestion buttons if they exist
+        this.setupPolicySuggestionButtons();
     }
 
     /**
@@ -768,16 +771,44 @@ class ChatInterface {
             <div class="welcome-icon">🤖</div>
             <h2>Welcome to PolicyWise!</h2>
             <p>I'm here to help you find information about company policies and procedures. Ask me anything about:</p>
-            <ul class="policy-topics">
-                <li>Remote work policies</li>
-                <li>PTO and leave policies</li>
-                <li>Expense reimbursement</li>
-                <li>Information security</li>
-                <li>Employee benefits</li>
-                <li>And much more...</li>
-            </ul>
+            <div class="policy-topics" role="group" aria-label="Suggested policy topics">
+                <button class="policy-suggestion-btn" data-topic="Remote work policies">Remote work policies</button>
+                <button class="policy-suggestion-btn" data-topic="PTO and leave policies">PTO and leave policies</button>
+                <button class="policy-suggestion-btn" data-topic="Expense reimbursement">Expense reimbursement</button>
+                <button class="policy-suggestion-btn" data-topic="Information security">Information security</button>
+                <button class="policy-suggestion-btn" data-topic="Employee benefits">Employee benefits</button>
+                <button class="policy-suggestion-btn" data-topic="And much more...">And much more...</button>
+            </div>
         `;
         this.messagesContainer.appendChild(welcomeDiv);
+        
+        // Add click event listeners to policy suggestion buttons
+        this.setupPolicySuggestionButtons();
+    }
+
+    /**
+     * Setup click handlers for policy suggestion buttons
+     */
+    setupPolicySuggestionButtons() {
+        const suggestionButtons = this.messagesContainer.querySelectorAll('.policy-suggestion-btn');
+        suggestionButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const topic = button.getAttribute('data-topic');
+                if (topic && topic !== "And much more...") {
+                    const prompt = `Tell me about ${topic.toLowerCase()}`;
+                    this.messageInput.value = prompt;
+                    this.sendMessage();
+                }
+            });
+            
+            // Add keyboard support
+            button.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    button.click();
+                }
+            });
+        });
     }
 
     /**

templates/chat.html

@@ -36,14 +36,14 @@
                     <div class="welcome-icon" aria-hidden="true">🤖</div>
                     <h2>Welcome to PolicyWise!</h2>
                     <p>I'm here to help you find information about company policies and procedures. Ask me anything about:</p>
-                    <ul class="policy-topics" aria-label="Suggested policy topics">
-                        <li>Remote work policies</li>
-                        <li>PTO and leave policies</li>
-                        <li>Expense reimbursement</li>
-                        <li>Information security</li>
-                        <li>Employee benefits</li>
-                        <li>And much more...</li>
-                    </ul>
+                    <div class="policy-topics" role="group" aria-label="Suggested policy topics">
+                        <button class="policy-suggestion-btn" data-topic="Remote work policies">Remote work policies</button>
+                        <button class="policy-suggestion-btn" data-topic="PTO and leave policies">PTO and leave policies</button>
+                        <button class="policy-suggestion-btn" data-topic="Expense reimbursement">Expense reimbursement</button>
+                        <button class="policy-suggestion-btn" data-topic="Information security">Information security</button>
+                        <button class="policy-suggestion-btn" data-topic="Employee benefits">Employee benefits</button>
+                        <button class="policy-suggestion-btn" data-topic="And much more...">And much more...</button>
+                    </div>
                 </div>
             </div>