Added loading indicator

codemakerai · Mar 26, 2024 · ba70097 · ba70097
1 parent a77de21
commit ba70097
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 5 deletions.
diff --git a/src/main/kotlin/ai/codemaker/jetbrains/window/AssistantWindowFactory.kt b/src/main/kotlin/ai/codemaker/jetbrains/window/AssistantWindowFactory.kt
@@ -99,9 +99,18 @@ class AssistantWindowFactory : ToolWindowFactory, DumbAware {
             // TODO cap message size
             val message = Message(UUID.randomUUID().toString(), input, role, Date())
             messages.add(message)
+            hidePendingMessage()
             appendMessage(message)
         }
 
+        private fun showPendingMessage() {
+            chatScreen.cefBrowser.executeJavaScript("window.showPendingMessage()", "", 0)
+        }
+
+        private fun hidePendingMessage() {
+            chatScreen.cefBrowser.executeJavaScript("window.hidePendingMessage()", "", 0)
+        }
+
         private fun sendMessage() {
             val input = messageTextField.text.trim()
 
@@ -116,6 +125,8 @@ class AssistantWindowFactory : ToolWindowFactory, DumbAware {
                     return
                 }
 
+                showPendingMessage()
+
                 ApplicationManager.getApplication().executeOnPooledThread {
                     try {
                         val service: CodeMakerService = project.getService(CodeMakerService::class.java)
@@ -142,7 +153,7 @@ class AssistantWindowFactory : ToolWindowFactory, DumbAware {
         private fun appendMessage(message: Message) {
             val content = renderMarkdown(message.content).replace("\n", "\\n").replace("\"", "\\\"")
             val assistant = (message.role == Role.Assistant).toString()
-            chatScreen.cefBrowser.executeJavaScript("window.append(\"$content\", ${assistant})", "", 0)
+            chatScreen.cefBrowser.executeJavaScript("window.appendMessage(\"$content\", ${assistant})", "", 0)
         }
 
         private fun assistantView(): String {

diff --git a/src/main/resources/webview/assistant.html b/src/main/resources/webview/assistant.html
@@ -46,6 +46,41 @@
             text-align: left;
             white-space: pre-wrap;
         }
+
+        .loader {
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            width: 60px;
+            margin: 10px auto;
+        }
+
+        .dot {
+            width: 10px;
+            height: 10px;
+            background-color: #e7e7d2;
+            border-radius: 50%;
+            animation: shine 1.4s infinite ease-in-out both;
+        }
+
+        .dot:nth-child(1) {
+            animation-delay: -0.32s;
+        }
+
+        .dot:nth-child(2) {
+            animation-delay: -0.16s;
+        }
+
+        @keyframes shine {
+            0%, 80%, 100% {
+                transform: scale(0);
+                opacity: 0;
+            }
+            40% {
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
     </style>
 </head>
 <body>
@@ -57,23 +92,52 @@
     </div>
 </div>
 <script>
-    window.append = function (body, assistant) {
-        let card = document.createElement("div");
+    window.appendMessage = function (body, assistant) {
+        const card = document.createElement("div");
         card.classList.add("card", assistant ? "assistant" : "user");
 
-        let label = document.createElement("div");
+        const label = document.createElement("div");
         label.innerText = (assistant ? "Assistant" : "User");
         label.classList.add("label");
         card.appendChild(label)
 
-        let message = document.createElement("div");
+        const message = document.createElement("div");
         message.classList.add("message");
         message.innerHTML = body;
         card.appendChild(message);
 
         document.getElementById("chat").appendChild(card);
         document.getElementById("anchor").scrollIntoView({behavior: "smooth"});
     }
+
+    window.showPendingMessage = function() {
+        const card = document.createElement("div");
+        card.classList.add("card", "pending");
+
+        const label = document.createElement("div");
+        label.innerText = ("Assistant");
+        label.classList.add("label");
+        card.appendChild(label)
+
+        const message = document.createElement("div");
+        message.classList.add("message");
+        message.innerHTML = `<div class="loader">
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+        </div>`;
+        card.appendChild(message);
+
+        document.getElementById("chat").appendChild(card);
+        document.getElementById("anchor").scrollIntoView({behavior: "smooth"});
+    }
+
+    window.hidePendingMessage = function() {
+        const pendingMessage = document.querySelector('.card.pending');
+        if (pendingMessage) {
+            pendingMessage.remove();
+        }
+    }
 </script>
 </body>
 </html>