Organized code, added speech functionality

yllenfer · Mar 22, 2024 · 4570311 · 4570311
1 parent 7b7d493
commit 4570311
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 35 deletions.
diff --git a/dist/assets/main-BVq2Gp9h.css b/dist/assets/main-BVq2Gp9h.css
diff --git a/dist/index.html b/dist/index.html
@@ -4,8 +4,8 @@
         <title>Elder Bot</title>
         <link rel="icon" type="image/x-icon" href="images/favicon.png">
 
-      <script type="module" crossorigin src="/assets/main-CfuUFNbX.js"></script>
-      <link rel="stylesheet" crossorigin href="/assets/main-BVq2Gp9h.css">
+      <script type="module" crossorigin src="/assets/main-CJqrSb1D.js"></script>
+      <link rel="stylesheet" crossorigin href="/assets/main-C_GizbET.css">
     </head>
 
     <body>
@@ -16,6 +16,7 @@
                     <p class="sub-heading">Elder Bot</p>
                 </div>
                 <div class="chatbot-conversation-container" id="chatbot-conversation-container">
+
                 </div>
                 <form id="form" class="chatbot-input-container">
 
@@ -28,6 +29,7 @@
                     </button>
                 </form>
             </section>
-        </main>
+        </main> 
     </body>
+
 </html>
diff --git a/src/css/style.css b/src/css/style.css
@@ -15,6 +15,29 @@ html, body {
   font-family: 'Courier New', Courier, monospace;
 }
 
+.typing-indicator {
+  display: flex;
+  justify-content: center; 
+  padding: 10px;
+}
+
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #1d3557; 
+  animation: blink 1.4s infinite both;
+  margin: 8px;
+  padding: 8px;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: .2; }
+  50% { opacity: 1; }
+}
+
+
 main {    
   background-color: #1d3557;
   /* background-color: aqua; */
@@ -99,7 +122,7 @@ background: #1d3557;
 
 .chatbot-input-container {
   display: flex;
-  margin-top: auto; /* Push the input container to the bottom */
+  margin-top: auto; 
 }
 
 

diff --git a/src/index.html b/src/index.html
@@ -15,6 +15,7 @@
                     <p class="sub-heading">Elder Bot</p>
                 </div>
                 <div class="chatbot-conversation-container" id="chatbot-conversation-container">
+
                 </div>
                 <form id="form" class="chatbot-input-container">
 

diff --git a/src/js/main.js b/src/js/main.js
@@ -1,4 +1,3 @@
-// require('dotenv').config(); 
 import { ChatOpenAI } from '@langchain/openai';
 import { PromptTemplate } from '@langchain/core/prompts';
 import { StringOutputParser } from "@langchain/core/output_parsers";
@@ -26,7 +25,7 @@ import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.8.1/firebase
 
 
 
-// console.log(process.env)
+
 document.addEventListener('DOMContentLoaded', () => {
     const savedConversation = localStorage.getItem('conversation');
     const chatbotConversation = document.getElementById('chatbot-conversation-container');
@@ -62,7 +61,7 @@ document.addEventListener('DOMContentLoaded', () => {
         displayIntroMessage();
     }
 
-    // Add event listener for form submission
+
     document.addEventListener('submit', async (e) => {
         e.preventDefault();
 
@@ -93,7 +92,7 @@ document.addEventListener('DOMContentLoaded', () => {
 const sbApikey = import.meta.env.VITE_SUPAB_API_KEY;
 const sbUrl = import.meta.env.VITE_SUPAB_URL; 
 const openAIApiKey = import.meta.env.VITE_OPEN_AI_API_KEY;
-// console.log('keys: ', sbApikey, sbUrl, openAIApiKey);
+
 
 
  const client = createClient(sbUrl, sbApikey);
@@ -126,11 +125,32 @@ const standaloneQuestionChain = standaloneQuestionPrompt.pipe(llm).pipe(new Stri
 
 const answerChain = answerPrompt.pipe(llm).pipe(new StringOutputParser());
 
-// Define scrollToBottom function outside progressConversation
+
 function scrollToBottom(container) {
     container.scrollTop = container.scrollHeight;
 }
 
+function showTypingIndicator(parentElement, show) {
+    let typingIndicator = parentElement.querySelector('.typing-indicator');
+    if (!typingIndicator && show) {
+
+        typingIndicator = document.createElement('div');
+        typingIndicator.classList.add('typing-indicator');
+        for (let i = 0; i < 3; i++) {
+            const dot = document.createElement('div');
+            dot.classList.add('dot');
+            typingIndicator.appendChild(dot);
+        }
+        parentElement.appendChild(typingIndicator);
+    } else if (typingIndicator && !show) {
+
+        typingIndicator.remove();
+    }
+}
+
+
+
+
 function formatConvHistory(messages) {
     return messages.map((message, i) => {
         if (i % 2 === 0){
@@ -147,54 +167,56 @@ const conversationHistory = []
 async function progressConversation() {
     const userInput = document.getElementById('user-input');
     const chatbotConversation = document.getElementById('chatbot-conversation-container');
+    const question = userInput.value.trim();
+    userInput.value = '';  
 
-
-
-    const question = userInput.value;
-    userInput.value = '';
-
-
+    if (question === '') {
+        return;  
+    }
 
-    // add human message
+    // Add human message to the conversation.
     const newHumanSpeechBubble = document.createElement('div');
     newHumanSpeechBubble.classList.add('speech', 'speech-human');
-    chatbotConversation.appendChild(newHumanSpeechBubble);
     newHumanSpeechBubble.textContent = question;
-    chatbotConversation.scrollTop = chatbotConversation.scrollHeight;
-    let interactionCount = parseInt(getCookie('interactionCount')) || 0; // Initialize interaction count from cookie
-
+    chatbotConversation.appendChild(newHumanSpeechBubble);
+
+    let interactionCount = parseInt(getCookie('interactionCount')) || 0;
     if (interactionCount >= 5) {
         displayLimitReachedMessage();
-        return; 
+        return;  
     }
 
-    // Increment interaction count
     interactionCount++;
     setCookie('interactionCount', interactionCount, 1);
 
-    // Invoke AI to get response
-     const response = await chain.invoke({
+
+    showTypingIndicator(chatbotConversation, true);
+    scrollToBottom(chatbotConversation); 
+
+
+    const response = await chain.invoke({
         question: question,
         conv_history: formatConvHistory(conversationHistory)
-     });
+    });
 
-     conversationHistory.push(question);
-     conversationHistory.push(response);
+    // Hide typing indicator now that response is ready.
+    showTypingIndicator(chatbotConversation, false);
 
-    // add AI message
+    // Add the AI's response to the conversation and ensure it's visible.
     const newAiSpeechBubble = document.createElement('div');
     newAiSpeechBubble.classList.add('speech', 'speech-ai');
-    chatbotConversation.appendChild(newAiSpeechBubble);
     newAiSpeechBubble.textContent = response;
-    chatbotConversation.scrollTop = chatbotConversation.scrollHeight;
-
-    // Scroll to bottom after adding new message
-
+    chatbotConversation.appendChild(newAiSpeechBubble);
+    scrollToBottom(chatbotConversation); 
 
-    // Update local storage
+    // Update conversation history and local storage.
+    conversationHistory.push(question, response);
     localStorage.setItem('conversation', chatbotConversation.innerHTML);
 }
 
+
+
+
 function displayLimitReachedMessage() {
     const chatbotConversation = document.getElementById('chatbot-conversation-container');
     const limitMessage = document.createElement('div');
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,7 @@ @@
                         <p class="sub-heading">Elder Bot</p>
                     </div>
                     <div class="chatbot-conversation-container" id="chatbot-conversation-container">
                     </div>
                     <form id="form" class="chatbot-input-container">
@@ Expand Down @@