From 66b48b45e201799f05d34fbccd27d37ddd0ddd66 Mon Sep 17 00:00:00 2001
From: Zac0511 <zac0511_le_vrai@proton.me>
Date: Mon, 22 Jul 2024 14:52:45 +0200
Subject: [PATCH] Update 2.1.0

Added a loading spinner that appears while the AI is writing a message
---
 index.html    | 22 +++++++++++++++++++++-
 settings.html |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index a2f3a39..2491432 100644
--- a/index.html
+++ b/index.html
@@ -134,6 +134,11 @@
             gap: 10px;
             margin-top: 20px;
         }
+
+        #loading-spinner {
+            display: none;
+            margin-top: 20px;
+        }
     </style>
     <script src="https://js.puter.com/v2/"></script>
     <meta name="google-site-verification" content="Q71qMHrmXHVJS96xLobvU5PdXHzkR23IRRD6gykEZew" />
@@ -155,11 +160,14 @@
             </md-filled-button>
         </div>
     </div>
+    <div id="loading-spinner">
+        <md-circular-progress indeterminate></md-circular-progress>
+    </div>
     <div id="icon-buttons">
         <md-outlined-icon-button aria-label="Settings" href="settings.html">
             <md-icon class="material-icons">settings</md-icon>
         </md-outlined-icon-button>
-         <md-outlined-icon-button aria-label="Github" href="https://github.com/Zac0511/Puter-AI-PWA">
+        <md-outlined-icon-button aria-label="Github" href="https://github.com/Zac0511/Puter-AI-PWA">
             <md-icon class="material-icons">code</md-icon>
         </md-outlined-icon-button>
     </div>
@@ -179,6 +187,15 @@
             messagesDiv.scrollTop = messagesDiv.scrollHeight;
         }
 
+        function toggleLoadingSpinner(show) {
+            const spinner = document.getElementById('loading-spinner');
+            if (show) {
+                spinner.style.display = 'block';
+            } else {
+                spinner.style.display = 'none';
+            }
+        }
+
         function sendMessage() {
             const input = document.querySelector("#messageInput");
             const message = input.value.trim();
@@ -186,15 +203,18 @@
             if (message) {
                 addMessage(message, true);
                 input.value = '';
+                toggleLoadingSpinner(true);
                 // Record the message in array of messages
                 messages.push({ content: message, role: 'user' });
                 // Call the AI chat function
                 puter.ai.chat(messages).then(response => {
                     addMessage(response, false);
                     messages.push(response.message);
+                    toggleLoadingSpinner(false);
                     console.log("AI response received");
                 }).catch(error => {
                     console.error("AI response error:", error);
+                    toggleLoadingSpinner(false);
                 });
             }
         }
diff --git a/settings.html b/settings.html
index 6465b11..444f367 100644
--- a/settings.html
+++ b/settings.html
@@ -93,7 +93,7 @@ <h2>Puter account settings</h2>
     <div id="container">
         <div id="infos">
             <h3>Infos</h3>
-            <p>Puter AI PWA - v2.0.2</p>
+            <p>Puter AI PWA - v2.1.0</p>
             <p>Made by Zac0511</p>
         </div>
     </div>