Cqn enter key

views/chat.html

@@ -1,14 +1,18 @@
 <div class="chat-container mt-5">
 
-    <hx hx-get="/loadChat" hx-trigger="load" hx-swap="outerHTML"></hx>
+    <hx hx-get="/loadChat" hx-trigger="load once" hx-swap="outerHTML"></hx>
+
 
     <div class="chat-input-container mb-5">
         <div class="textarea-wrapper">
-            <textarea class="textarea" placeholder="Type your message here..." name="message"></textarea>
+            <textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea"
+                placeholder="Type your message here..." name="message"></textarea>
             <div class="button-group">
-                <hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
+                <hx hx-get="/loadSettings" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
                 <hx hx-get="/loadUsageKPI" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
-                <button type="submit" class="send-button button is-primary is-small" hx-post="/requestMultipleMessages"
+                <hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
+                <button {% if not IsLogin or not HaveKey %}disabled{% endif %} type="submit"
+                    class="send-button button is-primary is-small" hx-post="/requestMultipleMessages"
                     hx-swap="beforeend settle:200ms" hx-target="#chat-messages" id="chat-input-send-btn"
                     class="chat-input" hx-include="[name='message'], [name^='model-check-']">Send</button>
             </div>

views/partials/message-bot.html

@@ -4,8 +4,8 @@
             <div class='rows'>
                 {% for message in Messages %}
                 <div class='row is-full mt-1'>
-                    <a href="#" hx-get="/messageContent?id={{ message.Id }}" class="is-clickable"
-                        hx-target="#content-{{ ConversationAreaId }}" onclick="toggleGrayscale(this)">
+                    <a {% if NotClickable %} href="#" hx-get="/messageContent?id={{ message.Id }}" class="is-clickable"
+                        onclick="toggleGrayscale(this)" hx-target="#content-{{ ConversationAreaId }}" {% endif %}>
                         <figure class="image is-48x48" style="flex-shrink: 0;">
                             <img src="icons/{{ message.Icon }}.png" alt="User Image" {% if message.Hidden %}
                                 style="filter: grayscale(100%);" {% endif %} title="{{ message.Name }}">

views/partials/navbar.html

@@ -13,13 +13,9 @@
             <div class="navbar-item">
                 <div class="buttons">
                     {% if IsLogin %}
-                    <a class="button is-light is-small" href="/signout">
+                    <a class="button is-small is-info is-outlined" href="/signout">
                         Log out
                     </a>
-                    {% else %}
-                    <a class="button is-light is-small" href="/signin">
-                        Log in
-                    </a>
                     {% endif %}
                 </div>
             </div>

views/partials/popover-settings.html

@@ -0,0 +1,42 @@
+<div class="dropdown is-hoverable is-up">
+    <div class="dropdown-trigger">
+        <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
+            <span>Settings</span>
+        </button>
+    </div>
+    <div class="dropdown-menu" id="dropdown-menu4" role="menu">
+        <div class="dropdown-content">
+            <div class="dropdown-item">
+                <div class="field">
+                    <form id="api-keys-form" method="post" action="/addKeys" hx-trigger="submit"
+                        hx-target="#chat-messages" hx-swap="beforeend">
+                        <div class="field has-addons">
+                            <p class="control has-icons-left is-expanded">
+                                <input class="input is-small" type="text" placeholder="OpenAI API key" name="openai_key"
+                                    autocomplete="off" {% if not IsLogin %}disabled{% endif %}>
+                                <span class="icon is-small is-left">
+                                    <i class="fas fa-lock"></i>
+                                </span>
+                            </p>
+                        </div>
+                        <div class="field has-addons">
+                            <p class="control has-icons-left is-expanded">
+                                <input class="input is-small" type="text" placeholder="Anthropic API key"
+                                    name="anthropic_key" autocomplete="off" {% if not IsLogin %}disabled{% endif %}>
+                                <span class="icon is-small is-left">
+                                    <i class="fas fa-lock"></i>
+                                </span>
+                            </p>
+                        </div>
+                        <div class="field has-addons">
+                            <p class="control">
+                                <button {% if not IsLogin %}disabled{% endif %} type="submit"
+                                    class="button is-small">Submit</button>
+                            </p>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>