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

Base

Browse Source
This commit is contained in:
adrien
2024-04-25 23:47:52 +02:00
parent 08e8e27bf4
commit 6bc8fe8aa3
27 changed files with 205 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/chat.html
+8 -1
View File
@@ -1,5 +1,12 @@
<div class="chat-container">
<h1 class="title is-1">Chat Page</h1>
<div hx-get="/loadChat" hx-trigger="load" hx-swap="outerHTML"></div>
{% include "partials/chat-input.html" %}
<div class="columns is-centered">
<div class="column is-8">
<form hx-put="/chat" hx-swap="beforeend" hx-target="#chat-messages">
<input class="input mx-5" type="text" placeholder="Type your message here..." name="message" />
</div>
</div>
</div>
</div>
views/layouts/main.html
+7 -14
View File
@@ -8,31 +8,24 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>
<body hx-ext="sse" sse-connect="/sse">
<body>
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/sse.js"></script>
{% include "partials/navbar.html" %}
{{embed}}
<style>
.column {
display: flex;
flex-direction: column;
.my-indicator {
display: none;
}
.message {
max-width: 90%;
margin-bottom: 10px;
.htmx-request .my-indicator {
display: inline;
}
.user-message {
align-self: flex-start;
}
.bot-message {
align-self: flex-end;
.htmx-request.my-indicator {
display: inline;
}
</style>
views/partials/bot-message-placeholder.html
-13
View File
@@ -1,13 +0,0 @@
<article class="message bot-message" id="bot-message-placeholder" hx-trigger="load" hx-swap="outerHTML"
hx-get="/generateOpenai" hx-target="#bot-message-placeholder">
<div class="message-header">
<p>Bot</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
Waiting...
</div>
</article>
views/partials/bot-message.gohtml
-12
View File
@@ -1,12 +0,0 @@
<article class="message bot-message">
<div class="message-header">
<p>Bot</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ .Content }}
</div>
</article>
views/partials/bot-message.html
-12
View File
@@ -1,12 +0,0 @@
<article class="message bot-message">
<div class="message-header">
<p>Bot</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ Message.Content }}
</div>
</article>
views/partials/chat-input.html
-3
View File
@@ -1,3 +0,0 @@
<form hx-put="/chat" hx-swap="beforeend" hx-target="#chat-messages">
<input class="input" type="text" placeholder="Type your message here..." name="message" />
</form>
views/partials/chat-messages.html
-11
View File
@@ -1,11 +0,0 @@
<div class="columns is-centered" hx-trigger="sse:bot-message" hx-swap="beforeend" hx-target="#chat-messages">
<div class="column is-half" id="chat-messages">
{% for Message in Messages %}
{% if Message.Role == "user" %}
{% include "partials/user-message.html" %}
{% else %}
{% include "partials/bot-message.html" %}
{% endif %}
{% endfor %}
</div>
</div>
views/partials/message-bot.html
+22
View File
@@ -0,0 +1,22 @@
<div class="message-user mt-3" style="display: flex; align-items: flex-start;" {% if IsPlaceholder %}
hx-get="/generateOpenai" hx-trigger="load" hx-swap="outerHTML" hx-indicator="#spinner" {% endif %}>
<figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
<img src="icons/openai.png" alt="User Image">
</figure>
<article class="message">
<div class="message-header">
<p>User</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{% if IsPlaceholder %}
<img id="spinner" class="htmx-indicator" src="/puff.svg" />
{% else %}
{{ Content }}
{% endif %}
</div>
</article>
</div>
views/partials/message-user.html
+17
View File
@@ -0,0 +1,17 @@
<div class="message-user mt-3" style="display: flex; align-items: flex-start;">
<figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
<img src="icons/huggingface.png" alt="User Image">
</figure>
<article class="message">
<div class="message-header">
<p>User</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ Content }}
</div>
</article>
</div>
views/partials/navbar.html
+1 -1
View File
@@ -1,7 +1,7 @@
<nav class="navbar is-primary">
<div class="navbar-brand">
<a class="navbar-item" href="https://www.bouvai.com">
<img src="/bouvai.png">
<img src="/icons/bouvai.png">
</a>
</div>
<div class="navbar-menu">
views/partials/test-button.html
-1
View File
@@ -1 +0,0 @@
<button class="button is-primary" hx-get="/test-button" hx-swap="outerHTML">Test</button>
views/partials/test-display.html
-1
View File
@@ -1 +0,0 @@
<p sse-swap="test">Test</p>
views/partials/user-message.html
-15
View File
@@ -1,15 +0,0 @@
<article class="message user-message">
<div class="message-header">
<p>User</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ Message.Content }}
</div>
</article>
{% if IncludePlaceholder %}
{% include "partials/bot-message-placeholder.html" %}
{% endif %}
views/welcome.html
-2
View File
@@ -2,7 +2,5 @@
<div class="column">
<h1 class="title is-1">Welcome to JADE 2.0!</h1>
<h1 hx-get="/isMongoDBConnected" hx-trigger="load" hx-swap="outerHTML"></h1>
{% include "partials/test-display.html" %}
{% include "partials/test-button.html" %}
</div>
</div>