better edit form message (confirm btn not working yet)

Chat.go

@@ -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"))
+	// Calculate the number of rows based on the length of the content
-	out, err := tmpl.Execute(pongo2.Context{"Content": message.Content, "ID": id})
+	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)
 	}

main.go

@@ -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)

static/style.css

@@ -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 */

views/chat.html

@@ -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">

views/partials/edit-message-form.html

@@ -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>

views/partials/message-edit-form.html

@@ -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>

views/partials/message-user.html

@@ -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 }}"
+                <button hx-get="/editMessageForm?id={{ ID }}" hx-target="closest .message-user"
-                    class="button is-small is-primary message-button is-outlined mr-5">
+                    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>

views/partials/popover-models.html

@@ -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>