added google api

views/chat.html

@@ -27,7 +27,7 @@
                     </span>
                 </button-->
                 <button disabled type="submit" class="send-button button is-primary is-small"
-                    hx-post="/generatePlaceholder" hx-swap="beforeend settle:200ms" hx-target="#chat-messages"
+                    hx-post="/generatePlaceholder" hx-swap="beforeend" hx-target="#chat-messages"
                     id="chat-input-send-btn" class="chat-input" hx-include="[name='message']"
                     hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}" onclick="clearTextArea()">
                     <span class="icon">
@@ -43,7 +43,7 @@
 <script>
     var textareaControl = document.getElementById('textarea-control');
 
-    // Every 0.1s check if the text area have htmx-request class, if yes, add the class is-loading
+    // Every 0.01s check if the text area have htmx-request class, if yes, add the class is-loading
     setInterval(function () {
         if (textareaControl.classList.contains('htmx-request')) {
             textareaControl.classList.add('is-loading');
@@ -52,6 +52,22 @@
         }
     }, 10);
 
+    setInterval(function () {
+        if (window.innerWidth < 450) {
+            var elements = document.getElementsByClassName('message-icon');
+            for (var i = 0; i < elements.length; i++) {
+                elements[i].classList.remove('is-48x48');
+                elements[i].classList.add('is-32x32');
+            }
+        } else {
+            var elements = document.getElementsByClassName('message-icon');
+            for (var i = 0; i < elements.length; i++) {
+                elements[i].classList.remove('is-32x32');
+                elements[i].classList.add('is-48x48');
+            }
+        }
+    }, 300);
+
     document.getElementById('chat-input-textarea').addEventListener('focus', function () {
         var buttons = document.getElementsByClassName('to-reduce-opacity');
         for (var i = 0; i < buttons.length; i++) {

views/layouts/main.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
     <title>JADE</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

views/partials/message-bot.html

@@ -25,7 +25,8 @@
         <div class="column" id="content-column">
             {% if not IsPlaceholder %}
             <div class="{% if not notFlex%} is-flex {% endif %} is-align-items-start">
-                <div class="message-content" id="content-{{ ConversationAreaId }}">
+                <div class="message-content" style="width: 100%; overflow-y: hidden;"
+                    id="content-{{ ConversationAreaId }}">
                     {% for message in Messages %}
                     {% if not message.Hidden %}
                     <div class="message-header">
@@ -34,7 +35,7 @@
                         </p>
                     </div>
                     <div class="message-body">
-                        <div class="content" style="overflow-x: auto;">
+                        <div class="content" style="overflow-x: auto; width: 100%;">
                             {{ message.Content | safe }}
                         </div>
                     </div>

views/partials/message-user.html

@@ -1,21 +1,21 @@
 <div class="message-user mt-3" id="msg-{{ ID }}">
     <div class="columns is-mobile">
         <div class="column is-narrow" id="icon-column">
-            <figure class="image is-48x48" style="flex-shrink: 0;">
+            <figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
                 <img src="icons/bouvai2.png" alt="User Image">
             </figure>
         </div>
 
         <div class="column" id="content-column">
             <div class="is-flex is-align-items-start">
-                <div class="message-content">
+                <div class="message-content" style="width: 100%; overflow-y: hidden;">
                     <div class="message-header">
                         <p>
                             You
                         </p>
                     </div>
                     <div class="message-body">
-                        <div class="content" style="overflow-x: auto;" id="content-{{ ID }}">
+                        <div class="content" style="overflow-x: auto; width: 100%;" id="content-{{ ID }}">
                             {{ Content | safe }}
                         </div>
                     </div>

views/partials/popover-models.html

@@ -136,13 +136,11 @@
         })
 
         document.getElementById('create-model-button').addEventListener('click', function () {
-            console.log('create model');
             document.getElementById('models-list').classList.add('is-hidden');
             document.getElementById('models-creation').classList.remove('is-hidden');
         });
 
         document.getElementById('cancel-create-model-button').addEventListener('click', function () {
-            console.log('cancel create model');
             document.getElementById('models-list').classList.remove('is-hidden');
             document.getElementById('models-creation').classList.add('is-hidden');
         });

views/partials/popover-settings.html

@@ -55,7 +55,7 @@
                             id="gemini-field">
                             <p class="control has-icons-left is-expanded">
                                 <input class="input is-small {% if GoogleExists %}is-success{% endif %}" type="text"
-                                    disabled placeholder="Google API key" name="google_key" autocomplete="off">
+                                    placeholder="Google API key" name="google_key" autocomplete="off">
                                 <span class="icon is-small is-left">
                                     <i class="fas fa-lock"></i>
                                 </span>