feat(demo-15): Improve chatbot evolution demo UX and visuals

jeremymanning · claude · jeremymanning · commit 95185b6b501b · 2026-01-01T08:40:48.000-05:00
- Remove emoji from title, add white subtitle text - Update timeline to show actual model names and years (1966 ELIZA, 1972 PARRY, 1995 A.L.I.C.E., 2020 BlenderBot, 2023 LaMini-GPT) - Fix architecture sidebar text color (was dark gray on black) - Add typing animation for neural model responses - Show user messages immediately before model processing - Improve Compare All Bots: maintains conversation history, shows instant feedback with typing indicators, displays all bot responses with proper model names 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/demos/15-chatbot-evolution/css/chatbot-evolution.css b/demos/15-chatbot-evolution/css/chatbot-evolution.css
@@ -42,6 +42,7 @@ header h1 {
     margin: 0;
     opacity: 0.95;
     font-size: 1.1em;
+    color: white;
 }
 
 /* Timeline Navigator */
@@ -312,7 +313,46 @@ header h1 {
     align-items: center;
     justify-content: center;
     font-size: 0.9em;
-    color: #6b7280;
+    color: var(--text-color);
+}
+
+/* Typing animation for neural model responses */
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 12px 16px;
+}
+
+.typing-indicator span {
+    width: 8px;
+    height: 8px;
+    background: var(--primary-color);
+    border-radius: 50%;
+    animation: typing-bounce 1.4s infinite ease-in-out both;
+}
+
+.typing-indicator span:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.typing-indicator span:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0s;
+}
+
+@keyframes typing-bounce {
+    0%, 80%, 100% {
+        transform: scale(0.6);
+        opacity: 0.5;
+    }
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
 }
 
 .papers-list {
diff --git a/demos/15-chatbot-evolution/index.html b/demos/15-chatbot-evolution/index.html
@@ -12,27 +12,27 @@
 <body>
     <div class="container">
         <header>
-            <h1>🤖 Chatbot Evolution Timeline</h1>
+            <h1>Chatbot Evolution Timeline</h1>
             <p class="subtitle">Journey through 60 years of conversational AI - from pattern matching to neural language models</p>
         </header>
 
         <!-- Timeline Navigator -->
         <section class="timeline-navigator">
             <div class="timeline-bar">
                 <div class="era era-1960s" data-era="1960s">
-                    <span class="era-label">1960s<br>Rule-Based</span>
+                    <span class="era-label">1966<br>ELIZA</span>
                 </div>
                 <div class="era era-1970s" data-era="1970s">
-                    <span class="era-label">1970s<br>Psychiatry</span>
+                    <span class="era-label">1972<br>PARRY</span>
                 </div>
                 <div class="era era-1990s" data-era="1990s">
-                    <span class="era-label">1990s-2000s<br>AIML</span>
+                    <span class="era-label">1995<br>A.L.I.C.E.</span>
                 </div>
                 <div class="era era-2010s" data-era="2010s">
-                    <span class="era-label">2010s<br>Neural</span>
+                    <span class="era-label">2020<br>BlenderBot</span>
                 </div>
                 <div class="era era-2020s active" data-era="2020s">
-                    <span class="era-label">2020s<br>Transformers</span>
+                    <span class="era-label">2023<br>LaMini-GPT</span>
                 </div>
             </div>
         </section>
diff --git a/demos/15-chatbot-evolution/js/timeline-app.js b/demos/15-chatbot-evolution/js/timeline-app.js
@@ -494,7 +494,7 @@ class TimelineApp {
 
         if (!message) return;
 
-        // Add user message
+        // Add user message immediately
         this.addMessage(botName, message, 'user');
         input.value = '';
 
@@ -503,11 +503,11 @@ class TimelineApp {
             let response;
             // Neural models (seq2seq and gpt) use async
             if (botName === 'gpt' || botName === 'seq2seq') {
-                // Show typing indicator for neural models
-                this.addMessage(botName, 'Generating response...', 'bot-typing');
+                // Show animated typing indicator for neural models
+                this.addTypingIndicator(botName);
                 response = await this.bots[botName].getResponse(message);
                 // Remove typing indicator
-                this.removeLastMessage(botName);
+                this.removeTypingIndicator(botName);
             } else {
                 // Rule-based bots are synchronous
                 response = this.bots[botName].getResponse(message);
@@ -520,7 +520,7 @@ class TimelineApp {
 
         } catch (error) {
             console.error(`Error getting response from ${botName}:`, error);
-            this.removeLastMessage(botName); // Remove typing indicator if present
+            this.removeTypingIndicator(botName); // Remove typing indicator if present
             this.addMessage(botName, "Sorry, I encountered an error.", 'bot');
         }
     }
@@ -532,6 +532,26 @@ class TimelineApp {
         }
     }
 
+    addTypingIndicator(botName) {
+        const messagesContainer = document.getElementById(`${botName}-messages`);
+        const typingDiv = document.createElement('div');
+        typingDiv.className = 'message bot typing-indicator';
+        typingDiv.id = `${botName}-typing`;
+        // Create three animated dots using DOM methods
+        for (let i = 0; i < 3; i++) {
+            typingDiv.appendChild(document.createElement('span'));
+        }
+        messagesContainer.appendChild(typingDiv);
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+
+    removeTypingIndicator(botName) {
+        const typingDiv = document.getElementById(`${botName}-typing`);
+        if (typingDiv) {
+            typingDiv.remove();
+        }
+    }
+
     addMessage(botName, text, type) {
         const messagesContainer = document.getElementById(`${botName}-messages`);
         const messageDiv = document.createElement('div');
@@ -542,71 +562,118 @@ class TimelineApp {
     }
 
     async compareAllBots() {
-        const prompt = document.getElementById('compare-prompt').value.trim();
+        const promptInput = document.getElementById('compare-prompt');
+        const prompt = promptInput.value.trim();
 
         if (!prompt) {
             alert('Please enter a prompt to compare');
             return;
         }
 
         const resultsDiv = document.getElementById('comparison-results');
-        resultsDiv.innerHTML = '<p style="color: #999; text-align: center;">Processing...</p>';
 
-        const responses = {};
+        // Initialize conversation history if not exists
+        if (!this.comparisonHistory) {
+            this.comparisonHistory = [];
+        }
 
-        // Get responses from all bots with individual error handling
-        try {
-            // Rule-based bots (synchronous) - handle individually
-            try {
-                responses.eliza = this.bots.eliza.getResponse(prompt);
-            } catch (error) {
-                console.error('Error from ELIZA:', error);
-                responses.eliza = 'Error: Unable to get response';
-            }
+        // Add user message to history and display immediately
+        const userMsgDiv = document.createElement('div');
+        userMsgDiv.className = 'comparison-item';
+        userMsgDiv.style.background = 'var(--primary-color)';
+        userMsgDiv.style.color = 'white';
+        userMsgDiv.style.borderLeftColor = 'var(--secondary-color)';
+        const userStrong = document.createElement('strong');
+        userStrong.textContent = 'YOU:';
+        userMsgDiv.appendChild(userStrong);
+        userMsgDiv.appendChild(document.createElement('br'));
+        userMsgDiv.appendChild(document.createTextNode(prompt));
+        resultsDiv.appendChild(userMsgDiv);
+
+        // Clear input
+        promptInput.value = '';
+
+        // Create bot response containers with loading indicators
+        const botNames = ['eliza', 'parry', 'alice', 'seq2seq', 'gpt'];
+        const botLabels = {
+            eliza: 'ELIZA (1966)',
+            parry: 'PARRY (1972)',
+            alice: 'A.L.I.C.E. (1995)',
+            seq2seq: 'BlenderBot (2020)',
+            gpt: 'LaMini-GPT (2023)'
+        };
+        const botDivs = {};
 
-            try {
-                responses.parry = this.bots.parry.getResponse(prompt);
-            } catch (error) {
-                console.error('Error from PARRY:', error);
-                responses.parry = 'Error: Unable to get response';
+        // Create containers with typing indicators
+        for (const bot of botNames) {
+            const item = document.createElement('div');
+            item.className = 'comparison-item';
+            item.id = `compare-${bot}`;
+
+            const strong = document.createElement('strong');
+            strong.textContent = botLabels[bot] + ':';
+            item.appendChild(strong);
+            item.appendChild(document.createElement('br'));
+
+            // Add typing indicator
+            const typingSpan = document.createElement('span');
+            typingSpan.className = 'typing-indicator';
+            typingSpan.style.display = 'inline-flex';
+            for (let i = 0; i < 3; i++) {
+                typingSpan.appendChild(document.createElement('span'));
             }
+            item.appendChild(typingSpan);
 
-            try {
-                responses.alice = this.bots.alice.getResponse(prompt);
-            } catch (error) {
-                console.error('Error from ALICE:', error);
-                responses.alice = 'Error: Unable to get response';
-            }
+            resultsDiv.appendChild(item);
+            botDivs[bot] = item;
+        }
 
-            // Neural models (asynchronous) - handle individually
-            try {
-                responses.seq2seq = await this.bots.seq2seq.getResponse(prompt);
-            } catch (error) {
-                console.error('Error from Seq2Seq:', error);
-                responses.seq2seq = 'Error: Unable to get response';
-            }
+        // Scroll to show new content
+        resultsDiv.scrollTop = resultsDiv.scrollHeight;
 
-            try {
-                responses.gpt = await this.bots.gpt.getResponse(prompt);
-            } catch (error) {
-                console.error('Error from GPT:', error);
-                responses.gpt = 'Error: Unable to get response';
-            }
+        // Get responses - rule-based first (sync), then neural (async)
+        const updateBotResponse = (bot, response) => {
+            const item = botDivs[bot];
+            // Remove typing indicator and add response
+            const typing = item.querySelector('.typing-indicator');
+            if (typing) typing.remove();
+            item.appendChild(document.createTextNode(response));
+        };
+
+        // Rule-based bots (synchronous)
+        try {
+            updateBotResponse('eliza', this.bots.eliza.getResponse(prompt));
         } catch (error) {
-            console.error('Unexpected error in comparison:', error);
+            console.error('Error from ELIZA:', error);
+            updateBotResponse('eliza', 'Error: Unable to get response');
         }
 
-        // Display results
-        resultsDiv.innerHTML = '';
-        for (const [bot, response] of Object.entries(responses)) {
-            const item = document.createElement('div');
-            item.className = 'comparison-item';
-            item.innerHTML = `
-                <strong>${bot.toUpperCase()}:</strong><br>
-                ${response}
-            `;
-            resultsDiv.appendChild(item);
+        try {
+            updateBotResponse('parry', this.bots.parry.getResponse(prompt));
+        } catch (error) {
+            console.error('Error from PARRY:', error);
+            updateBotResponse('parry', 'Error: Unable to get response');
+        }
+
+        try {
+            updateBotResponse('alice', this.bots.alice.getResponse(prompt));
+        } catch (error) {
+            console.error('Error from ALICE:', error);
+            updateBotResponse('alice', 'Error: Unable to get response');
         }
+
+        // Neural models (asynchronous) - run in parallel
+        const neuralPromises = [
+            this.bots.seq2seq.getResponse(prompt).then(r => updateBotResponse('seq2seq', r))
+                .catch(e => { console.error('Error from Seq2Seq:', e); updateBotResponse('seq2seq', 'Error: Unable to get response'); }),
+            this.bots.gpt.getResponse(prompt).then(r => updateBotResponse('gpt', r))
+                .catch(e => { console.error('Error from GPT:', e); updateBotResponse('gpt', 'Error: Unable to get response'); })
+        ];
+
+        await Promise.all(neuralPromises);
+
+        // Save to history
+        this.comparisonHistory.push({ prompt, timestamp: Date.now() });
     }
 
     displayArchitecture() {
