Mobile: display assistant name

Author: danielneis

classes/output/mobile.php

@@ -67,28 +67,15 @@ public static function get_block_content($args) {
         }
         $assistantname = format_string($assistantname, true, ['context' => $context]);
         $username = format_string($username, true, ['context' => $context]);
-        $content = new \stdClass;
-        $content->text = '
-            <script>
-                var assistantName = "' . $assistantname . '";
-                var userName = "' . $username . '";
-            </script>
-
-            <style>
-                ' . $showlabelscss . '
-                .openai_message.user:before {
-                    content: "' . $username . '";
-                }
-                .openai_message.bot:before {
-                    content: "' . $assistantname . '";
-                }
-            </style>';
 
         $contextdata = [
             'logging_enabled' => get_config('block_openai_chat', 'logging'),
             'pix_popout' => '/blocks/openai_chat/pix/arrow-up-right-from-square.svg',
             'pix_arrow_right' => '/blocks/openai_chat/pix/arrow-right.svg',
             'pix_refresh' => '/blocks/openai_chat/pix/refresh.svg',
+            'username' => $username,
+            'assistantname' => $assistantname,
+            'showlabelscss' => $showlabelscss,
             'contextid' => $context->id,
         ];
 

mobile.js

@@ -24,7 +24,8 @@ this.update_history = function(msg) {
         let container = document.querySelector('#openai_chat_log');
         container.scrollTop = lq.offsetTop;
     }
-    let newHtml = '<div class="openai_message bot"><span><p>' + msg + '</p></span></div>';
+    let assistantname = document.getElementById('openai_assistantname');
+    let newHtml = '<span style="color: gray; margin-bottom: .2em">' + assistantname.innerHTML + '</span><div class="openai_message bot"><span><p>' + msg + '</p></span></div>';
 
     document.querySelector('.chat-loading').remove();
     document.getElementById('openai_chat_log').insertAdjacentHTML('beforeend', newHtml);

templates/mobile.mustache

@@ -50,4 +50,5 @@
         <img style="transform: scale(1.3)" src="<%config.wwwroot%><% pix_refresh %>" class='openai_input_refresh_btn_icon' alt="<%#str%>new_chat, block_openai_chat <%/str%>" />
     </ion-button>
 </div>
+<span style="display: none" id="openai_assistantname"><% assistantname %></span>
 </div>