ENHANCE: Break down menu items for individual tracking

Menu Changes:
- Split combined item 2 into 5 distinct items:
1. Your name
2. The date
3. The time
4. The length (duration)
5. The agenda (meeting topic)
6. GoogleMeet or phone call
7. Your phone number

JavaScript Updates:
- Rewrote updateMenuItemColors() to track each item individually
- Each menu item now updates independently: RED (missing), GREEN (collected)
- Removed orange partial state for better clarity

Benefits:
- More granular visual feedback for users
- Clearer indication of exactly what information is still needed
- Better UX for multi-turn conversations

Version: 1.4.2

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/api/chat_widget.py

@@ -635,11 +635,14 @@ async def chat_widget(request: Request, email: str = None):
                 </div>
 
                 <div style="text-align: left; background: #e8f5e9; padding: 10px 15px; margin: 15px 15px 180px 15px; border-radius: 8px; border-left: 4px solid #4caf50; font-size: 14px;">
-                    <p style="margin: 0; font-weight: bold; font-size: 15px;">To book a meeting:</p>
-                    <p id="menuItem1" style="margin: 5px 0 2px 0; font-size: 13px; color: #666;">1) Say your name</p>
-                    <p id="menuItem2" style="margin: 2px 0; font-size: 13px; color: #666;">2) The date, time, length, and agenda</p>
-                    <p id="menuItem3" style="margin: 2px 0; font-size: 13px; color: #666;">3) GoogleMeet conference or phone call</p>
-                    <p id="menuItem4" style="margin: 2px 0 0 0; font-size: 13px; color: #666;">4) Your phone number, in case I need to call you</p>
+                    <p style="margin: 0; font-weight: bold; font-size: 15px;">To book a meeting, tell me:</p>
+                    <p id="menuItem1" style="margin: 5px 0 2px 0; font-size: 13px; color: #f44336;">1) Your name</p>
+                    <p id="menuItem2" style="margin: 2px 0; font-size: 13px; color: #f44336;">2) The date</p>
+                    <p id="menuItem3" style="margin: 2px 0; font-size: 13px; color: #f44336;">3) The time</p>
+                    <p id="menuItem4" style="margin: 2px 0; font-size: 13px; color: #f44336;">4) The length (duration)</p>
+                    <p id="menuItem5" style="margin: 2px 0; font-size: 13px; color: #f44336;">5) The agenda (meeting topic)</p>
+                    <p id="menuItem6" style="margin: 2px 0; font-size: 13px; color: #f44336;">6) GoogleMeet or phone call</p>
+                    <p id="menuItem7" style="margin: 2px 0 0 0; font-size: 13px; color: #f44336;">7) Your phone number</p>
                 </div>
                 
                 <div class="quick-actions">
@@ -2436,28 +2439,22 @@ async def chat_widget(request: Request, email: str = None):
                         }
                     }
 
-                    // Menu item 2: Date, time, length, and agenda
+                    // Menu item 2: Date
                     const menuItem2 = document.getElementById('menuItem2');
                     if (menuItem2) {
-                        const hasAll = userInfo.date_string && userInfo.time_string &&
-                                      userInfo.duration_minutes && userInfo.topic;
-                        if (hasAll) {
+                        if (userInfo.date_string) {
                             menuItem2.style.color = '#4caf50'; // Green
                             menuItem2.style.fontWeight = 'bold';
-                        } else if (userInfo.date_string || userInfo.time_string ||
-                                  userInfo.duration_minutes || userInfo.topic) {
-                            menuItem2.style.color = '#ff9800'; // Orange (partial)
-                            menuItem2.style.fontWeight = 'normal';
                         } else {
                             menuItem2.style.color = '#f44336'; // Red
                             menuItem2.style.fontWeight = 'normal';
                         }
                     }
 
-                    // Menu item 3: GoogleMeet or phone call
+                    // Menu item 3: Time
                     const menuItem3 = document.getElementById('menuItem3');
                     if (menuItem3) {
-                        if (userInfo.preferences?.google_meet || userInfo.preferences?.phone_call) {
+                        if (userInfo.time_string) {
                             menuItem3.style.color = '#4caf50'; // Green
                             menuItem3.style.fontWeight = 'bold';
                         } else {
@@ -2466,10 +2463,10 @@ async def chat_widget(request: Request, email: str = None):
                         }
                     }
 
-                    // Menu item 4: Phone number
+                    // Menu item 4: Length (duration)
                     const menuItem4 = document.getElementById('menuItem4');
                     if (menuItem4) {
-                        if (userInfo.phone) {
+                        if (userInfo.duration_minutes) {
                             menuItem4.style.color = '#4caf50'; // Green
                             menuItem4.style.fontWeight = 'bold';
                         } else {
@@ -2477,6 +2474,42 @@ async def chat_widget(request: Request, email: str = None):
                             menuItem4.style.fontWeight = 'normal';
                         }
                     }
+
+                    // Menu item 5: Agenda (topic)
+                    const menuItem5 = document.getElementById('menuItem5');
+                    if (menuItem5) {
+                        if (userInfo.topic) {
+                            menuItem5.style.color = '#4caf50'; // Green
+                            menuItem5.style.fontWeight = 'bold';
+                        } else {
+                            menuItem5.style.color = '#f44336'; // Red
+                            menuItem5.style.fontWeight = 'normal';
+                        }
+                    }
+
+                    // Menu item 6: GoogleMeet or phone call
+                    const menuItem6 = document.getElementById('menuItem6');
+                    if (menuItem6) {
+                        if (userInfo.preferences?.google_meet || userInfo.preferences?.phone_call) {
+                            menuItem6.style.color = '#4caf50'; // Green
+                            menuItem6.style.fontWeight = 'bold';
+                        } else {
+                            menuItem6.style.color = '#f44336'; // Red
+                            menuItem6.style.fontWeight = 'normal';
+                        }
+                    }
+
+                    // Menu item 7: Phone number
+                    const menuItem7 = document.getElementById('menuItem7');
+                    if (menuItem7) {
+                        if (userInfo.phone) {
+                            menuItem7.style.color = '#4caf50'; // Green
+                            menuItem7.style.fontWeight = 'bold';
+                        } else {
+                            menuItem7.style.color = '#f44336'; // Red
+                            menuItem7.style.fontWeight = 'normal';
+                        }
+                    }
                 } catch (error) {
                     console.error('Error updating menu colors:', error);
                 }

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "voicecal-ai"
-version = "1.4.1"
+version = "1.4.2"
 description = "A friendly interactive AI speechbot for booking Google Calendar appointments"
 authors = ["Peter <pgits.job@gmail.com>"]
 

unit_tests/README.md

@@ -8,7 +8,7 @@ This directory contains unit tests for VoiceCal.ai components.
 
 1. **SSH into your HuggingFace Space:**
    ```bash
-   ssh -i ~/.ssh/id_ed25519 pgits-voicecal-ai@ssh.hf.space
+   ssh -i ~/.ssh/id_ed25519 pgits-voicecal-ai-v3@ssh.hf.space
    ```
 
 2. **Navigate to tests directory:**

version.txt

@@ -1 +1 @@
-1.4.1
+1.4.2