refactor: optimize audio chat ui (#19)

Author: chr-hertel

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));
-    }
 }

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;
+        }
+    }
 }

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">

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>

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>