From 6d59ad7fc9ee6042f3dec1a0fc05c368a4d33d76 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Fri, 5 Jul 2024 14:00:53 +0530
Subject: [PATCH] Add listening circle animation to speak button in Obsidian
 plugin

Use icon active focus as color of animation button
---
 src/interface/obsidian/src/chat_view.ts |  3 +++
 src/interface/obsidian/styles.css       | 24 ++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/interface/obsidian/src/chat_view.ts b/src/interface/obsidian/src/chat_view.ts
index 8bc3c6ee..0e91d4b9 100644
--- a/src/interface/obsidian/src/chat_view.ts
+++ b/src/interface/obsidian/src/chat_view.ts
@@ -1014,6 +1014,7 @@ export class KhojChatView extends KhojPaneView {
 
             // Start the countdown timer UI
             stopSendButtonImg.getElementsByTagName("circle")[0].style.animation = "countdown 3s linear 1 forwards";
+            stopSendButtonImg.getElementsByTagName("circle")[0].style.color = "var(--icon-color-active)";
 
             // Auto send message after 3 seconds
             this.sendMessageTimeout = setTimeout(() => {
@@ -1043,6 +1044,7 @@ export class KhojChatView extends KhojPaneView {
 
             this.mediaRecorder.start();
             setIcon(transcribeButton, "mic-off");
+            transcribeButton.classList.add("loading-encircle")
         };
 
         // Toggle recording
@@ -1057,6 +1059,7 @@ export class KhojChatView extends KhojPaneView {
             this.mediaRecorder.stop();
             this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
             this.mediaRecorder = undefined;
+            transcribeButton.classList.remove("loading-encircle");
             setIcon(transcribeButton, "mic");
         }
     }
diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css
index 8e3d2c6b..8902d3c9 100644
--- a/src/interface/obsidian/styles.css
+++ b/src/interface/obsidian/styles.css
@@ -598,6 +598,30 @@ img.copy-icon {
     }
 }
 
+/* Loading Encircle */
+.loading-encircle {
+    position: relative;
+}
+
+.loading-encircle::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 24px;
+    height: 24px;
+    margin-top: -16px;
+    margin-left: -16px;
+    border: 4px solid transparent;
+    border-top-color: var(--icon-color-active);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
 @media only screen and (max-width: 600px) {
     div.khoj-header {
         display: grid;