From 1c24ab6e20e50cadbf083c1363cce521d2211bdc Mon Sep 17 00:00:00 2001
From: Yazan Agha-Schrader <mountaiin@icloud.com>
Date: Wed, 29 May 2024 14:09:19 +0200
Subject: [PATCH] move prompt style

---
 examples/server/themes/mount-ai/index.html | 28 +++++++++++-----------
 examples/server/themes/mount-ai/style.css  | 11 +++++++--
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/examples/server/themes/mount-ai/index.html b/examples/server/themes/mount-ai/index.html
index 0e4fe44ee..afefd625e 100644
--- a/examples/server/themes/mount-ai/index.html
+++ b/examples/server/themes/mount-ai/index.html
@@ -361,7 +361,7 @@
       <form onsubmit=${submit}>
         <div class="chat-input-container">
           <textarea
-            id="chat-input" placeholder="Say Something ...\n(Shift + Enter for new line)"
+            id="chat-input" placeholder="Say Something ... (Shift + Enter for new line)"
             class="${generating.value ? 'loading' : null}"
             oninput=${(e) => message.value = e.target.value}
             onkeypress=${enterSubmits}
@@ -733,19 +733,19 @@ const BoolField = ({ label, title, name, value }) => {
             </div>
           </fieldset>
           ${PromptControlFieldSet()}
-          <fieldset class="names">
-            <div>
-              <label for="user" id="id_user-name">User ID Token</label>
-              <input type="text" id="user" name="user" value="${session.value.user}" oninput=${updateSession} />
-            </div>
-            <div>
-              <label for="bot" id="id_bot-name">AI ID Token</label>
-              <input type="text" id="bot" name="char" value="${session.value.char}" oninput=${updateSession} />
-            </div>
-          </fieldset>
-          <fieldset>
-            <details>
-              <summary><span class="summary-title" id="id_prompt-style">Prompt Style</span></summary>
+            <fieldset>
+              <details open>
+                <summary><span class="summary-title" id="id_prompt-style">Prompt Style</span></summary>
+                <fieldset class="names">
+              <div>
+                <label for="user" id="id_user-name">User ID</label>
+                <input type="text" id="user" name="user" value="${session.value.user}" oninput=${updateSession} />
+              </div>
+              <div>
+                <label for="bot" id="id_bot-name">AI ID</label>
+                <input type="text" id="bot" name="char" value="${session.value.char}" oninput=${updateSession} />
+              </div>
+            </fieldset>
               <div class="two-columns">
                 <div>
                   <div class="input-container">
diff --git a/examples/server/themes/mount-ai/style.css b/examples/server/themes/mount-ai/style.css
index f035c652f..087cc62da 100644
--- a/examples/server/themes/mount-ai/style.css
+++ b/examples/server/themes/mount-ai/style.css
@@ -615,6 +615,11 @@ fieldset.apiKey {
   border: 1px solid var(--border-color-2);
 }
 
+.apiKey:focus {
+  border: 1px solid var(--border-focus-color);
+  box-shadow: 0 0 3px var(--border-focus-shadow);
+}
+
 .apiKey input[type="text"] {
   font-family: Arial, sans-serif;
   font-size: medium;
@@ -687,17 +692,19 @@ textarea.persistent-input {
   padding-left: 11px;
   width: 97%;
   max-width: 97%;
+  height: 50px;
   font-size: medium;
   overscroll-behavior: contain;
 }
 
-/* chat history box */
+/* system prompt box */
 .persistent-input {
   height: auto;
   width: 100%;
   max-width: 100%;
-  min-height: 150px;
+  min-height: 50px;
   padding: 3px;
+  transition: min-height 0.3s ease;
 }
 
 /* chat history box */