move prompt style

This commit is contained in:
Yazan Agha-Schrader 2024-05-29 14:09:19 +02:00
parent f2ef89415c
commit 1c24ab6e20
2 changed files with 23 additions and 16 deletions

View file

@ -361,7 +361,7 @@
<form onsubmit=${submit}> <form onsubmit=${submit}>
<div class="chat-input-container"> <div class="chat-input-container">
<textarea <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}" class="${generating.value ? 'loading' : null}"
oninput=${(e) => message.value = e.target.value} oninput=${(e) => message.value = e.target.value}
onkeypress=${enterSubmits} onkeypress=${enterSubmits}
@ -733,19 +733,19 @@ const BoolField = ({ label, title, name, value }) => {
</div> </div>
</fieldset> </fieldset>
${PromptControlFieldSet()} ${PromptControlFieldSet()}
<fieldset>
<details open>
<summary><span class="summary-title" id="id_prompt-style">Prompt Style</span></summary>
<fieldset class="names"> <fieldset class="names">
<div> <div>
<label for="user" id="id_user-name">User ID Token</label> <label for="user" id="id_user-name">User ID</label>
<input type="text" id="user" name="user" value="${session.value.user}" oninput=${updateSession} /> <input type="text" id="user" name="user" value="${session.value.user}" oninput=${updateSession} />
</div> </div>
<div> <div>
<label for="bot" id="id_bot-name">AI ID Token</label> <label for="bot" id="id_bot-name">AI ID</label>
<input type="text" id="bot" name="char" value="${session.value.char}" oninput=${updateSession} /> <input type="text" id="bot" name="char" value="${session.value.char}" oninput=${updateSession} />
</div> </div>
</fieldset> </fieldset>
<fieldset>
<details>
<summary><span class="summary-title" id="id_prompt-style">Prompt Style</span></summary>
<div class="two-columns"> <div class="two-columns">
<div> <div>
<div class="input-container"> <div class="input-container">

View file

@ -615,6 +615,11 @@ fieldset.apiKey {
border: 1px solid var(--border-color-2); 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"] { .apiKey input[type="text"] {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: medium; font-size: medium;
@ -687,17 +692,19 @@ textarea.persistent-input {
padding-left: 11px; padding-left: 11px;
width: 97%; width: 97%;
max-width: 97%; max-width: 97%;
height: 50px;
font-size: medium; font-size: medium;
overscroll-behavior: contain; overscroll-behavior: contain;
} }
/* chat history box */ /* system prompt box */
.persistent-input { .persistent-input {
height: auto; height: auto;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
min-height: 150px; min-height: 50px;
padding: 3px; padding: 3px;
transition: min-height 0.3s ease;
} }
/* chat history box */ /* chat history box */