From 438b9b8b94a27e6ab3bf709dcf6b5e55e21fe7a7 Mon Sep 17 00:00:00 2001
From: Christopher Hertel <mail@christopher-hertel.de>
Date: Fri, 14 Mar 2025 20:26:05 +0100
Subject: [PATCH] refactor: optimize audio chat ui

---
 assets/controllers/audio_controller.js |  8 +-------
 assets/styles/audio.css                | 12 ++++++++++++
 templates/_message.html.twig           | 10 ++++++++--
 templates/components/audio.html.twig   |  2 +-
 templates/index.html.twig              |  2 +-
 5 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/assets/controllers/audio_controller.js b/assets/controllers/audio_controller.js
index 20f272a..d251b17 100644
--- a/assets/controllers/audio_controller.js
+++ b/assets/controllers/audio_controller.js
@@ -59,6 +59,7 @@ export default class extends Controller {
 
         this.mediaRecorder.onstop = async () => {
             const audioBlob = new Blob(audioChunks, {type: 'audio/wav'});
+            this.mediaRecorder.stream.getAudioTracks().forEach(track => track.stop());
 
             const base64String = await this.blobToBase64(audioBlob);
             this.component.action('submit', { audio: base64String });
@@ -79,11 +80,4 @@ export default class extends Controller {
             reader.onloadend = () => resolve(reader.result.split(',')[1]);
         });
     }
-
-    playBase64Audio(base64String) {
-        const audioSrc = "data:audio/wav;base64," + base64String;
-        const audio = new Audio(audioSrc);
-
-        audio.play().catch(error => console.error("Playback error:", error));
-    }
 }
diff --git a/assets/styles/audio.css b/assets/styles/audio.css
index 3707577..f1584df 100644
--- a/assets/styles/audio.css
+++ b/assets/styles/audio.css
@@ -12,6 +12,10 @@
         .user-message {
             background: #df662f;
             color: #ffffff;
+
+            #loading-message & {
+                color: rgba(255, 255, 255, 0.7);
+            }
         }
 
         .bot-message {
@@ -58,4 +62,12 @@
             }
         }
     }
+
+    footer {
+        color: #ffffff;
+
+        a {
+            color: #ffffff;
+        }
+    }
 }
diff --git a/templates/_message.html.twig b/templates/_message.html.twig
index 46c3cc8..141dd2f 100644
--- a/templates/_message.html.twig
+++ b/templates/_message.html.twig
@@ -33,11 +33,17 @@
     </div>
 {% endmacro %}
 
-{% macro user(content) %}
+{% macro user(content, loading = false) %}
     <div class="d-flex align-items-baseline text-end justify-content-end mb-4">
         <div class="pe-2">
             {% for item in content %}
-                <div class="user-message d-inline-block p-2 px-3 m-1 border border-light-subtle shadow-sm">{{ item.text }}</div>
+                <div class="user-message d-inline-block p-2 px-3 m-1 border border-light-subtle shadow-sm">
+                    {% if loading %}
+                        <span class="spinner-border spinner-border-sm me-1"></span><i>{{ item.text }}</i>
+                    {% else %}
+                        {{ item.text }}
+                    {% endif %}
+                </div>
             {% endfor %}
         </div>
         <div class="user avatar rounded-3 shadow-sm">
diff --git a/templates/components/audio.html.twig b/templates/components/audio.html.twig
index 3005791..303b59b 100644
--- a/templates/components/audio.html.twig
+++ b/templates/components/audio.html.twig
@@ -17,7 +17,7 @@
             </div>
         {% endfor %}
         <div id="loading-message" class="d-none">
-            {{ message.user([{text:''}]) }}
+            {{ message.user([{text:'Converting your speech to text ...'}], true) }}
             {{ message.bot('The Bot is looking for an answer ...', true) }}
         </div>
     </div>
diff --git a/templates/index.html.twig b/templates/index.html.twig
index f235591..40aec62 100644
--- a/templates/index.html.twig
+++ b/templates/index.html.twig
@@ -84,7 +84,7 @@
                     {% if 'dev' == app.environment %}
                         <div class="card-footer">
                             {{ ux_icon('solar:code-linear', { height: '20px', width: '20px' }) }}
-                            <a href="{{ path('_profiler_open_file', { file: 'src/Audio/Chat.php', line: 14 }) }}">See Implementation</a>
+                            <a href="{{ path('_profiler_open_file', { file: 'src/Audio/Chat.php', line: 18 }) }}">See Implementation</a>
                         </div>
                     {% endif %}
                 </div>