Better input

Chat.go

@@ -35,7 +35,7 @@ func ChatPageHandler(c *fiber.Ctx) error {
 
 func LoadModelSelectionHandler(c *fiber.Ctx) error {
 	CheckedModels := []string{"gpt-3.5-turbo"} // Default model
-	out, err := popoverTmpl.Execute(pongo2.Context{
+	out, err := modelsPopoverTmpl.Execute(pongo2.Context{
 		"CompanyInfos":  CompanyInfos,
 		"CheckedModels": CheckedModels,
 	})
@@ -47,6 +47,18 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
 	return c.SendString(out)
 }
 
+func LoadConversationsSelectionHandler(c *fiber.Ctx) error {
+	out, err := conversationsPopoverTmpl.Execute(pongo2.Context{
+		"Conversations": "",
+	})
+	if err != nil {
+		c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
+			"error": "Error rendering template",
+		})
+	}
+	return c.SendString(out)
+}
+
 func DeleteMessageHandler(c *fiber.Ctx) error {
 	messageId := c.FormValue("id")
 
@@ -136,6 +148,7 @@ type NextMessage struct {
 	Content string
 	Hidden  bool
 	Id      string
+	Name    string
 }
 
 func generateChatHTML() string {
@@ -176,6 +189,7 @@ func generateChatHTML() string {
 				Content: markdownToHTML(message.Content),
 				Hidden:  !message.Selected, // Assuming Hidden is a field you want to include from Message
 				Id:      message.ID.Hex(),
+				Name:    model2Name(message.Model),
 			}
 			NextMessages = append(NextMessages, nextMsg)
 
@@ -209,7 +223,7 @@ func generateChatHTML() string {
 
 func GetMessageContentHandler(c *fiber.Ctx) error {
 	messageId := c.FormValue("id")
-	fmt.Println(messageId)
+
 	collection := mongoClient.Database("chat").Collection("messages")
 	objectID, err := primitive.ObjectIDFromHex(messageId)
 	if err != nil {
@@ -226,7 +240,16 @@ func GetMessageContentHandler(c *fiber.Ctx) error {
 		})
 	}
 
-	fmt.Println(selectedMessage)
+	out := "<div class='message-header'>"
+	out += "<p>"
+	out += model2Name(selectedMessage.Model)
+	out += "	</p>"
+	out += "</div>"
+	out += "<div class='message-body'>"
+	out += "	<ct class='content'>"
+	out += markdownToHTML(selectedMessage.Content)
+	out += "	</ct>"
+	out += "</div>"
 
-	return c.SendString(selectedMessage.Content)
+	return c.SendString(out)
 }

Request.go

@@ -28,6 +28,7 @@ type CompanyInfo struct {
 }
 
 var CompanyInfos []CompanyInfo
+var ModelsInfos []ModelInfo
 
 type MultipleModelsCompletionRequest struct {
 	ModelIds []string
@@ -101,7 +102,7 @@ func RequestMultipleMessages(c *fiber.Ctx) error {
 	out := ""
 
 	HexID := result.InsertedID.(primitive.ObjectID).Hex()
-	messageOut, _ := userTmpl.Execute(pongo2.Context{"Content": message, "ID": HexID})
+	messageOut, _ := userTmpl.Execute(pongo2.Context{"Content": markdownToHTML(message), "ID": HexID})
 	out += messageOut
 
 	messageOut, _ = botTmpl.Execute(pongo2.Context{"IsPlaceholder": true, "SelectedModelIds": selectedModelIds, "Message": message})

RequestAnthropic.go

@@ -55,6 +55,7 @@ func init() {
 		OutputPrice: 1.50 / 1000000,
 	}
 	ModelInfosList = append(ModelInfosList, modelInfo)
+	ModelsInfos = append(ModelsInfos, modelInfo)
 
 	modelInfo = ModelInfo{
 		ID:          "claude-3-sonnet-20240229",
@@ -65,6 +66,7 @@ func init() {
 		OutputPrice: 1.50 / 1000000,
 	}
 	ModelInfosList = append(ModelInfosList, modelInfo)
+	ModelsInfos = append(ModelsInfos, modelInfo)
 
 	modelInfo = ModelInfo{
 		ID:          "claude-3-opus-20240229",
@@ -75,6 +77,7 @@ func init() {
 		OutputPrice: 1.50 / 1000000,
 	}
 	ModelInfosList = append(ModelInfosList, modelInfo)
+	ModelsInfos = append(ModelsInfos, modelInfo)
 
 	companyInfo := CompanyInfo{
 		ID:         "anthropic",

RequestOpenai.go

@@ -57,6 +57,7 @@ func init() {
 		OutputPrice: 1.50 / 1000000,
 	}
 	ModelInfosList = append(ModelInfosList, modelInfo)
+	ModelsInfos = append(ModelsInfos, modelInfo)
 
 	modelInfo = ModelInfo{
 		ID:          "gpt-4-turbo",
@@ -67,6 +68,7 @@ func init() {
 		OutputPrice: 30.00 / 1000000,
 	}
 	ModelInfosList = append(ModelInfosList, modelInfo)
+	ModelsInfos = append(ModelsInfos, modelInfo)
 
 	companyInfo := CompanyInfo{
 		ID:         "openai",

main.go

@@ -11,12 +11,14 @@ import (
 
 var userTmpl *pongo2.Template
 var botTmpl *pongo2.Template
-var popoverTmpl *pongo2.Template
+var modelsPopoverTmpl *pongo2.Template
+var conversationsPopoverTmpl *pongo2.Template
 
 func main() {
 	botTmpl = pongo2.Must(pongo2.FromFile("views/partials/message-bot.html"))
 	userTmpl = pongo2.Must(pongo2.FromFile("views/partials/message-user.html"))
-	popoverTmpl = pongo2.Must(pongo2.FromFile("views/partials/popover.html"))
+	modelsPopoverTmpl = pongo2.Must(pongo2.FromFile("views/partials/modelsPopover.html"))
+	conversationsPopoverTmpl = pongo2.Must(pongo2.FromFile("views/partials/conversationsPopover.html"))
 
 	// Import HTML using django engine/template
 	engine := django.New("./views", ".html")
@@ -35,8 +37,7 @@ func main() {
 	app.Static("/", "./static")
 
 	// Add routes
-	app.Get("/", indexHandler)                                     // Welcome page
+	app.Get("/", ChatPageHandler)                                  // Complete chat page
-	app.Get("/chat", ChatPageHandler)                              // Complete chat page
 	app.Post("/requestMultipleMessages", RequestMultipleMessages)  // Request multiple messages
 	app.Get("/loadChat", LoadChatHandler)                          // Load chat
 	app.Post("/deleteMessage", DeleteMessageHandler)               // Delete message
@@ -51,7 +52,3 @@ func main() {
 	// Start server
 	app.Listen(":8080")
 }
-
-func indexHandler(c *fiber.Ctx) error {
-	return c.Render("welcome", fiber.Map{}, "layouts/main")
-}

utils.go

@@ -34,3 +34,12 @@ func model2Icon(model string) string {
 	}
 	return "openai"
 }
+
+func model2Name(model string) string {
+	for i := range ModelsInfos {
+		if ModelsInfos[i].ID == model {
+			return ModelsInfos[i].Name
+		}
+	}
+	return "OpenAI"
+}

views/chat.html

@@ -3,21 +3,30 @@
 
 
     <div class="chat-input-container">
-        <div class="buttons">
+        <form class="control" hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms"
-            <hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML"></hx>
+            hx-target="#chat-messages" id="chat-input-form" class="chat-input"
-        </div>
+            hx-include="[name='message'], [name^='model-check-']">
-        <div class="field has-addons mx-5">
+            <div class="textarea-wrapper">
-            <form class="control is-expanded" hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms"
+                <textarea class="textarea" placeholder="Type your message here..." name="message"></textarea>
-                hx-target="#chat-messages" id="chat-input-form" class="chat-input"
+                <div class="button-group">
-                hx-include="[name='message'], [name^='model-check-']">
+                    <hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
-                <input class="input" type="text" placeholder="Type your message here..." name="message" />
+                    <div class="dropdown is-hoverable is-up">
-            </form>
+                        <div class="dropdown-trigger">
-            <div class="control">
+                            <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
-                <button class="button is-primary" hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms"
+                                <span>Settings</span>
-                    hx-target="#chat-messages" class="chat-input"
+                            </button>
-                    hx-include="[name='message'], [name^='model-check-']">Send</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

@@ -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 */
+            padding-right: 140px;
-        }
+            /* Adjust this value based on the button and dropdown 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;
             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

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

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

@@ -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/modelsPopover.html

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

@@ -1,18 +1,14 @@
 <nav class="navbar is-primary">
     <div class="navbar-brand">
-        <a class="navbar-item" href="https://www.bouvai.com">
+        <a class="navbar-item" href="/">
-            <img src="/icons/bouvai.png">
+            <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

@@ -1,5 +0,0 @@
-<div class="columns">
-    <div class="column">
-        <h1 class="title is-1">Welcome to JADE 2.0!</h1>
-    </div>
-</div>