better edit form message (confirm btn not working yet)

This commit is contained in:
Adrien Bouvais 2024-05-23 12:39:55 +02:00
parent 103d6371c8
commit 11b039e127
8 changed files with 97 additions and 30 deletions

36
Chat.go
View File

@ -3,6 +3,7 @@ package main
import (
"context"
"sort"
"strings"
"time"
"github.com/edgedb/edgedb-go"
@ -125,6 +126,31 @@ func generateChatHTML() string {
return htmlString
}
func GetUserMessageHandler(c *fiber.Ctx) error {
id := c.FormValue("id")
messageUUID, _ := edgedb.ParseUUID(id)
var selectedMessage Message
err := edgeClient.QuerySingle(context.Background(), `
SELECT Message {
content
}
FILTER
.id = <uuid>$0;
`, &selectedMessage, messageUUID)
if err != nil {
panic(err)
}
out, err := userTmpl.Execute(pongo2.Context{"Content": markdownToHTML(selectedMessage.Content), "ID": id})
if err != nil {
panic(err)
}
return c.SendString(out)
}
func GetMessageContentHandler(c *fiber.Ctx) error {
messageId := c.FormValue("id")
onlyContent := c.FormValue("onlyContent") // To init the text area of the edit message form
@ -298,8 +324,14 @@ func GetEditMessageFormHandler(c *fiber.Ctx) error {
panic(err)
}
tmpl := pongo2.Must(pongo2.FromFile("views/partials/edit-message-form.html"))
out, err := tmpl.Execute(pongo2.Context{"Content": message.Content, "ID": id})
// Calculate the number of rows based on the length of the content
rows := len(strings.Split(message.Content, "\n"))
if rows < 10 {
rows = 10
}
tmpl := pongo2.Must(pongo2.FromFile("views/partials/message-edit-form.html"))
out, err := tmpl.Execute(pongo2.Context{"Content": message.Content, "ID": id, "Rows": rows})
if err != nil {
panic(err)
}

View File

@ -68,12 +68,13 @@ func main() {
// Chat routes
app.Post("/deleteMessage", DeleteMessageHandler)
app.Get("/generatePlaceholder", GeneratePlaceholderHandler)
app.Post("/generatePlaceholder", GeneratePlaceholderHandler)
app.Get("/generateMultipleMessages", GenerateMultipleMessagesHandler)
app.Get("/messageContent", GetMessageContentHandler)
app.Get("/editMessageForm", GetEditMessageFormHandler)
app.Post("/redoMessage", RedoMessageHandler)
app.Post("/clearChat", ClearChatHandler)
app.Get("/userMessage", GetUserMessageHandler)
// Settings routes
app.Post("/addKeys", addKeys)

View File

@ -68,7 +68,7 @@ html {
width: 100%;
}
.textarea {
#chat-input-textarea {
width: 100%;
padding-right: 140px;
/* Adjust this value based on the button and dropdown width */

View File

@ -24,7 +24,7 @@
</span>
</button-->
<button disabled type="submit" class="send-button button is-primary is-small"
hx-get="/generatePlaceholder" hx-swap="beforeend settle:200ms" hx-target="#chat-messages"
hx-post="/generatePlaceholder" hx-swap="beforeend settle:200ms" hx-target="#chat-messages"
id="chat-input-send-btn" class="chat-input" hx-include="[name='message']"
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}" onclick="clearTextArea()">
<span class="icon">

View File

@ -1,15 +0,0 @@
<div class="field">
<div class="control">
<textarea class="textarea mt-2" placeholder="Enter your message here"
style="background-color: transparent;">{{ Content }}</textarea>
</div>
</div>
<div class="field is-grouped mb-3">
<div class="control">
<button hx-get="/test" class="button is-primary is-small">Submit</button>
</div>
<div class="control">
<button hx-get="/messageContent?id={{ ID }}&onlyContent=true" hx-target="#content-{{ ID }}"
class="button is-light is-outlined is-small">Cancel</button>
</div>
</div>

View File

@ -0,0 +1,49 @@
<div class="message-user mt-3" id="{{ ID }}">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
<div class="column" id="content-column">
<div class="is-flex is-align-items-start mr-5" style="width: 100%;">
<div class="message-content" style="width: 100%;">
<div class="message-header">
<p>
You
</p>
</div>
<div class="message-body" style="width: 100%;">
<div class="content" id="content-{{ ID }}" style="width: 100%;">
<div class="field" style="width: 100%;">
<div class="control" style="width: 100%;">
<textarea class="textarea is-small has-fixed-size mt-2"
placeholder="Enter your message here" rows="{{ Rows }}"
style="background-color: transparent; width: 100%;">{{ Content }}</textarea>
</div>
</div>
<div class="field is-grouped is-flex is-justify-content-flex-end mb-3">
<div class="control">
<button hx-get="/userMessage?id={{ ID }}" hx-target="closest .message-user"
class="button is-danger is-outlined is-small">
<span class="icon">
<i class="fa-solid fa-xmark"></i>
</span>
</button>
</div>
<div class="control">
<button hx-get="/test" class="button is-success is-outlined is-small">
<span class="icon">
<i class="fa-solid fa-check"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,4 +1,4 @@
<div class="message-user mt-3" id="{{ ID }}">
<div class="message-user mt-3" id="msg-{{ ID }}">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48" style="flex-shrink: 0;">
@ -16,7 +16,7 @@
</div>
<div class="message-body">
<div class="content" style="overflow-x: auto;" id="content-{{ ID }}">
{{ Content|safe }}
{{ Content | safe }}
</div>
</div>
</div>
@ -34,8 +34,8 @@
<i class="fa-solid fa-arrows-rotate"></i>
</span>
</button>
<button hx-get="/editMessageForm?id={{ ID }}" hx-target="#content-{{ ID }}" id="edit-button-{{ ID }}"
class="button is-small is-primary message-button is-outlined mr-5">
<button hx-get="/editMessageForm?id={{ ID }}" hx-target="closest .message-user"
id="edit-button-{{ ID }}" class="button is-small is-primary message-button is-outlined mr-5">
<span class="icon">
<i class="fa-solid fa-pen"></i>
</span>

View File

@ -42,23 +42,23 @@
<div class="dropdown-item is-hidden" id="models-creation">
<form id="create-model-form" hx-post="/createLLM" hx-target="#models-dropdown" hx-swap="outerHTML">
<input class="input is-small mb-3" type="text" id="model-name-input" name="model-name-input"
placeholder="Model name">
placeholder="Model name" autocomplete="off">
<div class="select is-fullwidth is-small mb-3" id="model-id-input">
<select name="selectedLLMId">
{% for modelInfo in ModelInfos %}
<option value="{{ modelInfo.ModelID }}">{{ modelInfo.ModelID }}</option>
{% endfor %}
<option value="custom">Custom endpoint</option>
<option value="custom">Inference Endpoints</option>
</select>
</div>
<input class="input is-small mb-3 is-hidden" type="text" id="model-cid-input" name="model-cid-input"
placeholder="Model id">
placeholder="Model id" autocomplete="off">
<input class="input is-small mb-3 is-hidden" type="text" id="model-url-input" name="model-url-input"
placeholder="URL (with /v1/chat/completions)">
placeholder="URL (with /v1/chat/completions)" autocomplete="off">
<input class="input is-small mb-3 is-hidden" type="text" id="model-key-input" name="model-key-input"
placeholder="Token">
placeholder="Token" autocomplete="off">
<p><small>Temperature:</small></p>
<input class="slider is-small mb-3" step="0.05" min="0" max="1" value="0" type="range"
<input class="slider is-small mb-3" step="0.05" min="0" max="2" value="0" type="range"
id="temperature-slider" name="temperature-slider">
<output id="temperature-slider-output">0</output>
<p><small>System prompt:</small></p>