Update: Refactored Source Code (#2)

hoangsonww · Jun 24, 2024 · d66b833 · d66b833
1 parent 7932e70
commit d66b833
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 51 deletions.
diff --git a/WeatherMate-Mobile/platforms/android/app/src/main/assets/www/index.html b/WeatherMate-Mobile/platforms/android/app/src/main/assets/www/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>The WeatherMate App - Your Digital Meteorologist</title>
+    <title>The WeatherMate App - Real-Time Weather Updates</title>
     <link rel="manifest" href="manifest.json">
     <meta name="description" content="The WeatherMate App provides real-time weather updates, forecasts, and air quality information for any location.">
     <meta name="keywords" content="weather, forecast, air quality, temperature, humidity, wind, WeatherMate">
@@ -75,12 +75,7 @@ <h3>Feels Like Information</h3>
         <div id="forecast-display"></div>
         <div id="humidity-rain-display" style="display: none; text-align: center"></div>
         <form id="form">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search for any location..."
-                    autocomplete="on"
-            />
+            <input type="text" id="search" placeholder="Search for any location..." autocomplete="on" />
         </form>
         <div id="search-results" style="margin-top: 20px"></div>
         <br/>
@@ -92,14 +87,7 @@ <h3>Feels Like Information</h3>
         <div id="local-advice" class="local-advice" title="Choose a City or Region to Get Weather Advice">
             <p><strong>Weather Advice</strong></p>
         </div>
-        <div
-                id="current-location-weather"
-                class="current-location-weather"
-                onclick="fetchWeatherForCurrentLocation()"
-                style="cursor: pointer"
-                title="Click to Refresh Weather for Your Current Location"
-        >
-        </div>
+        <div id="current-location-weather" class="current-location-weather" onclick="fetchWeatherForCurrentLocation()" style="cursor: pointer" title="Click to Refresh Weather for Your Current Location"></div>
         <h6 id="local-time-label" style="color: black !important;"><strong>Your Local Time</strong></h6>
         <div id="local-time-container" class="local-time-container" title="Your Local Time"></div>
         <h6 id="home-label" style="color: black !important;"><strong>Back to Home</strong></h6>

diff --git a/WeatherMate-Mobile/platforms/android/app/src/main/assets/www/src/js/chatbot.js b/WeatherMate-Mobile/platforms/android/app/src/main/assets/www/src/js/chatbot.js
@@ -1,5 +1,22 @@
 import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
 
+function scrollToBottom() {
+    const chatMessages = document.querySelector(".chat-messages");
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function sendInstructionalMessage() {
+    const instructionMessage = "Hello! I am your WeatherMate Assistant 🌤. I can provide weather information for you. To get started, type 'weather in [a city's name]' to get the weather for that city. Or you can also ask me any general weather-related questions or any other queries you may have. How can I assist you today? 🌤";
+    const instructionElem = document.createElement("div");
+    instructionElem.innerText = instructionMessage;
+    document.querySelector(".chat-messages").appendChild(instructionElem);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    sendInstructionalMessage();
+    scrollToBottom();
+});
+
 async function getBotResponse(message) {
     const weatherInCityRegex = /weather in (.*?)(?=\n|$)/;
     const weatherInCityMatch = message.match(weatherInCityRegex);
@@ -19,6 +36,7 @@ async function getBotResponse(message) {
 
     try {
         showLoadingMessage();
+
         const genAI = new GoogleGenerativeAI(getAIResponse());
         const model = genAI.getGenerativeModel({
             model: "gemini-1.5-flash",
@@ -104,17 +122,19 @@ document.querySelector(".chatbot").prepend(chatTitleElem);
 
 chatInput.addEventListener("keydown", (e) => {
     if (e.key === "Enter" && e.target.value.trim()) {
+        scrollToBottom();
         const question = e.target.value.trim();
-
         const userMsgElem = document.createElement("div");
         userMsgElem.innerText = `You: ${question}`;
         chatMessages.appendChild(userMsgElem);
+        scrollToBottom();
 
         setTimeout(async () => {
             const response = await getBotResponse(question);
             const elizaMsgElem = document.createElement("div");
-            elizaMsgElem.innerText = `Eliza: ${response}`;
+            elizaMsgElem.innerText = `WeatherMate: ${response}`;
             chatMessages.appendChild(elizaMsgElem);
+            scrollToBottom();
         }, 1000);
 
         e.target.value = '';

diff --git a/WeatherMate-Mobile/platforms/ios/www/index.html b/WeatherMate-Mobile/platforms/ios/www/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>The WeatherMate App - Your Digital Meteorologist</title>
+    <title>The WeatherMate App - Real-Time Weather Updates</title>
     <link rel="manifest" href="manifest.json">
     <meta name="description" content="The WeatherMate App provides real-time weather updates, forecasts, and air quality information for any location.">
     <meta name="keywords" content="weather, forecast, air quality, temperature, humidity, wind, WeatherMate">
@@ -75,12 +75,7 @@ <h3>Feels Like Information</h3>
         <div id="forecast-display"></div>
         <div id="humidity-rain-display" style="display: none; text-align: center"></div>
         <form id="form">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search for any location..."
-                    autocomplete="on"
-            />
+            <input type="text" id="search" placeholder="Search for any location..." autocomplete="on" />
         </form>
         <div id="search-results" style="margin-top: 20px"></div>
         <br/>
@@ -92,14 +87,7 @@ <h3>Feels Like Information</h3>
         <div id="local-advice" class="local-advice" title="Choose a City or Region to Get Weather Advice">
             <p><strong>Weather Advice</strong></p>
         </div>
-        <div
-                id="current-location-weather"
-                class="current-location-weather"
-                onclick="fetchWeatherForCurrentLocation()"
-                style="cursor: pointer"
-                title="Click to Refresh Weather for Your Current Location"
-        >
-        </div>
+        <div id="current-location-weather" class="current-location-weather" onclick="fetchWeatherForCurrentLocation()" style="cursor: pointer" title="Click to Refresh Weather for Your Current Location"></div>
         <h6 id="local-time-label" style="color: black !important;"><strong>Your Local Time</strong></h6>
         <div id="local-time-container" class="local-time-container" title="Your Local Time"></div>
         <h6 id="home-label" style="color: black !important;"><strong>Back to Home</strong></h6>

diff --git a/WeatherMate-Mobile/platforms/ios/www/src/js/chatbot.js b/WeatherMate-Mobile/platforms/ios/www/src/js/chatbot.js
@@ -1,5 +1,22 @@
 import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
 
+function scrollToBottom() {
+    const chatMessages = document.querySelector(".chat-messages");
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function sendInstructionalMessage() {
+    const instructionMessage = "Hello! I am your WeatherMate Assistant 🌤. I can provide weather information for you. To get started, type 'weather in [a city's name]' to get the weather for that city. Or you can also ask me any general weather-related questions or any other queries you may have. How can I assist you today? 🌤";
+    const instructionElem = document.createElement("div");
+    instructionElem.innerText = instructionMessage;
+    document.querySelector(".chat-messages").appendChild(instructionElem);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    sendInstructionalMessage();
+    scrollToBottom();
+});
+
 async function getBotResponse(message) {
     const weatherInCityRegex = /weather in (.*?)(?=\n|$)/;
     const weatherInCityMatch = message.match(weatherInCityRegex);
@@ -19,6 +36,7 @@ async function getBotResponse(message) {
 
     try {
         showLoadingMessage();
+
         const genAI = new GoogleGenerativeAI(getAIResponse());
         const model = genAI.getGenerativeModel({
             model: "gemini-1.5-flash",
@@ -104,17 +122,19 @@ document.querySelector(".chatbot").prepend(chatTitleElem);
 
 chatInput.addEventListener("keydown", (e) => {
     if (e.key === "Enter" && e.target.value.trim()) {
+        scrollToBottom();
         const question = e.target.value.trim();
-
         const userMsgElem = document.createElement("div");
         userMsgElem.innerText = `You: ${question}`;
         chatMessages.appendChild(userMsgElem);
+        scrollToBottom();
 
         setTimeout(async () => {
             const response = await getBotResponse(question);
             const elizaMsgElem = document.createElement("div");
-            elizaMsgElem.innerText = `Eliza: ${response}`;
+            elizaMsgElem.innerText = `WeatherMate: ${response}`;
             chatMessages.appendChild(elizaMsgElem);
+            scrollToBottom();
         }, 1000);
 
         e.target.value = '';

diff --git a/WeatherMate-Mobile/www/index.html b/WeatherMate-Mobile/www/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>The WeatherMate App - Your Digital Meteorologist</title>
+    <title>The WeatherMate App - Real-Time Weather Updates</title>
     <link rel="manifest" href="manifest.json">
     <meta name="description" content="The WeatherMate App provides real-time weather updates, forecasts, and air quality information for any location.">
     <meta name="keywords" content="weather, forecast, air quality, temperature, humidity, wind, WeatherMate">
@@ -75,12 +75,7 @@ <h3>Feels Like Information</h3>
         <div id="forecast-display"></div>
         <div id="humidity-rain-display" style="display: none; text-align: center"></div>
         <form id="form">
-            <input
-                    type="text"
-                    id="search"
-                    placeholder="Search for any location..."
-                    autocomplete="on"
-            />
+            <input type="text" id="search" placeholder="Search for any location..." autocomplete="on" />
         </form>
         <div id="search-results" style="margin-top: 20px"></div>
         <br/>
@@ -92,14 +87,7 @@ <h3>Feels Like Information</h3>
         <div id="local-advice" class="local-advice" title="Choose a City or Region to Get Weather Advice">
             <p><strong>Weather Advice</strong></p>
         </div>
-        <div
-                id="current-location-weather"
-                class="current-location-weather"
-                onclick="fetchWeatherForCurrentLocation()"
-                style="cursor: pointer"
-                title="Click to Refresh Weather for Your Current Location"
-        >
-        </div>
+        <div id="current-location-weather" class="current-location-weather" onclick="fetchWeatherForCurrentLocation()" style="cursor: pointer" title="Click to Refresh Weather for Your Current Location"></div>
         <h6 id="local-time-label" style="color: black !important;"><strong>Your Local Time</strong></h6>
         <div id="local-time-container" class="local-time-container" title="Your Local Time"></div>
         <h6 id="home-label" style="color: black !important;"><strong>Back to Home</strong></h6>

diff --git a/WeatherMate-Mobile/www/src/js/chatbot.js b/WeatherMate-Mobile/www/src/js/chatbot.js
@@ -1,5 +1,22 @@
 import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
 
+function scrollToBottom() {
+    const chatMessages = document.querySelector(".chat-messages");
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function sendInstructionalMessage() {
+    const instructionMessage = "Hello! I am your WeatherMate Assistant 🌤. I can provide weather information for you. To get started, type 'weather in [a city's name]' to get the weather for that city. Or you can also ask me any general weather-related questions or any other queries you may have. How can I assist you today? 🌤";
+    const instructionElem = document.createElement("div");
+    instructionElem.innerText = instructionMessage;
+    document.querySelector(".chat-messages").appendChild(instructionElem);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    sendInstructionalMessage();
+    scrollToBottom();
+});
+
 async function getBotResponse(message) {
     const weatherInCityRegex = /weather in (.*?)(?=\n|$)/;
     const weatherInCityMatch = message.match(weatherInCityRegex);
@@ -19,6 +36,7 @@ async function getBotResponse(message) {
 
     try {
         showLoadingMessage();
+
         const genAI = new GoogleGenerativeAI(getAIResponse());
         const model = genAI.getGenerativeModel({
             model: "gemini-1.5-flash",
@@ -104,17 +122,19 @@ document.querySelector(".chatbot").prepend(chatTitleElem);
 
 chatInput.addEventListener("keydown", (e) => {
     if (e.key === "Enter" && e.target.value.trim()) {
+        scrollToBottom();
         const question = e.target.value.trim();
-
         const userMsgElem = document.createElement("div");
         userMsgElem.innerText = `You: ${question}`;
         chatMessages.appendChild(userMsgElem);
+        scrollToBottom();
 
         setTimeout(async () => {
             const response = await getBotResponse(question);
             const elizaMsgElem = document.createElement("div");
-            elizaMsgElem.innerText = `Eliza: ${response}`;
+            elizaMsgElem.innerText = `WeatherMate: ${response}`;
             chatMessages.appendChild(elizaMsgElem);
+            scrollToBottom();
         }, 1000);
 
         e.target.value = '';