adrien/Jade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better input

Browse Source
This commit is contained in:
adrien
2024-05-01 21:35:35 +02:00
parent 642fd8bb52
commit e433240939
14 changed files with 169 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/chat.html
+24 -15
View File
@@ -3,21 +3,30 @@
<div class="chat-input-container">
<div class="buttons">
<hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML"></hx>
</div>
<div class="field has-addons mx-5">
<form class="control is-expanded" hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms"
hx-target="#chat-messages" id="chat-input-form" class="chat-input"
hx-include="[name='message'], [name^='model-check-']">
<input class="input" type="text" placeholder="Type your message here..." name="message" />
</form>
<div class="control">
<button class="button is-primary" hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms"
hx-target="#chat-messages" class="chat-input"
hx-include="[name='message'], [name^='model-check-']">Send</button>
<form class="control" hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms"
hx-target="#chat-messages" id="chat-input-form" class="chat-input"
hx-include="[name='message'], [name^='model-check-']">
<div class="textarea-wrapper">
<textarea 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>
<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">
<h5>Hello</h5>
</div>
</div>
</div>
</div>
<button type="submit" class="send-button button is-primary is-small">Send</button>
</div>
</div>
</div>
</form>
</div>
</div>
views/layouts/main.html
+25 -16
View File
@@ -7,6 +7,7 @@
<title>JADE 2.0</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">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
<style>
body,
@@ -27,24 +28,24 @@
padding: 10px;
}
.chat-input-container .field.has-addons {
.textarea-wrapper {
position: relative;
}
.textarea {
width: 100%;
/* Ensure the field container takes full width */
}
.chat-input-container form.control.is-expanded {
flex-grow: 1;
/* Make the form (input container) grow to fill available space */
}
.image.is-32x32 {
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
padding-right: 140px;
/* Adjust this value based on the button and dropdown width */
box-sizing: border-box;
border-radius: 6px;
}
.button-group {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
align-items: center;
gap: 10px;
}
</style>
</head>
@@ -73,6 +74,14 @@
<!-- Style stuff -->
<style>
svg text {
font-family: 'Russo One', sans-serif;
text-transform: uppercase;
fill: #000;
stroke: #000;
font-size: 240px;
}
.message-content {
background-color: #303030;
border-radius: 5px;
views/login.html
+32
View File
@@ -0,0 +1,32 @@
<div class="chat-container mt-5">
<hx hx-get="/loadChat" hx-trigger="load" hx-swap="outerHTML"></hx>
<div class="chat-input-container">
<form class="control" hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms"
hx-target="#chat-messages" id="chat-input-form" class="chat-input"
hx-include="[name='message'], [name^='model-check-']">
<div class="textarea-wrapper">
<textarea 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>
<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">
<h5>Hello</h5>
</div>
</div>
</div>
</div>
<button type="submit" class="send-button button is-primary is-small">Send</button>
</div>
</div>
</form>
</div>
</div>
views/partials/conversationsPopover.html
+27
View File
@@ -0,0 +1,27 @@
<div class="dropdown is-hoverable is-up">
<div class="dropdown-trigger">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Conversations</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
{% for conversation in Conversations %}
<div class="content">
<h5 class="subtitle is-5">{{ CompanyInfo.Name }}</h5>
{% for ModelInfo in CompanyInfo.ModelInfos %}
<div class="field">
<label class="checkbox">
<input {%if ModelInfo.ID in CheckedModels %}checked{% endif %} type="checkbox"
name="model-check-{{ ModelInfo.ID }}" value="{{ ModelInfo.ID }}" />
{{ ModelInfo.Name }}
</label>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
views/partials/message-bot.html
+6 -9
View File
@@ -5,7 +5,7 @@
{% for message in Messages %}
<div class='row is-full mt-1 is-vcentered'>
<a href="#" hx-get="/messageContent?id={{ message.Id }}" class="is-clickable"
hx-target="#content-text-{{ ConversationAreaId }}" onclick="toggleGrayscale(this)">
hx-target="#content-{{ ConversationAreaId }}" onclick="toggleGrayscale(this)">
<figure class=" image is-48x48 mr-2" style="flex-shrink: 0;">
<img src="icons/{{ message.Icon }}.png" alt="User Image" if {% if message.Hidden %}
style="filter: grayscale(100%);" {% endif %}>
@@ -29,12 +29,14 @@
{% for message in Messages %}
{% if not message.Hidden %}
<!-- Name of the model as title -->
<div class="message-content">
<div class="message-content" id="content-{{ ConversationAreaId }}">
<div class="message-header">
<p>Hello World</p>
<p>
{{ message.Name }}
</p>
</div>
<div class="message-body">
<ct class="content" id="content-text-{{ ConversationAreaId }}">
<ct class="content" style="overflow-x: auto;">
{{ message.Content | safe }}
</ct>
</div>
@@ -74,11 +76,6 @@
}
});
rowElement.parentNode.insertBefore(rowElement, rowElement.parentNode.firstChild);
} else {
imgElement.style.filter = 'grayscale(100%)';
allImages.forEach(function (img) {
img.style.filter = 'grayscale(100%)';
});
}
}
</script>
views/partials/popover.html → views/partials/modelsPopover.html
+1 -1
View File
@@ -1,6 +1,6 @@
<div class="dropdown is-hoverable is-up">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Models</span>
</button>
</div>
views/partials/navbar.html
+6 -10
View File
@@ -1,18 +1,14 @@
<nav class="navbar is-primary">
<div class="navbar-brand">
<a class="navbar-item" href="https://www.bouvai.com">
<img src="/icons/bouvai.png">
<a class="navbar-item" href="/">
<svg width="640" height="160" viewBox="0 0 640 180" fill="none">
<text x="50%" y="50%" dy=".35em" text-anchor="middle">
JADE
</text>
</svg>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/">
Home
</a>
<a class="navbar-item" href="/chat">
Chat
</a>
</div>
<div class="navbar-end">
<img id="spinner" class="htmx-indicator" src="/puff.svg" />
</div>
views/welcome.html
-5
View File
@@ -1,5 +0,0 @@
<div class="columns">
<div class="column">
<h1 class="title is-1">Welcome to JADE 2.0!</h1>
</div>
</div>