Better input

2024-05-01 21:35:35 +02:00 · 2024-05-01 21:35:35 +02:00 · e433240939
commit e433240939
parent 642fd8bb52
14 changed files with 169 additions and 69 deletions
--- a/Chat.go
+++ b/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)
 }
--- a/Request.go
+++ b/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})
--- a/RequestAnthropic.go
+++ b/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",
--- a/RequestOpenai.go
+++ b/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",
--- a/main.go
+++ b/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("/chat", ChatPageHandler)                              // Complete chat page
+	app.Get("/", 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")
-}
--- a/utils.go
+++ b/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"
+}
--- a/views/chat.html
+++ b/views/chat.html
@ -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>
--- a/views/layouts/main.html
+++ b/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 */
-        }
-
-        .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;
--- a/views/login.html
+++ b/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>
--- a/views/partials/conversationsPopover.html
+++ b/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>
--- a/views/partials/message-bot.html
+++ b/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>
--- a/views/partials/modelsPopover.html
+++ b/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>
--- a/views/partials/navbar.html
+++ b/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">
-            <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>
--- a/views/welcome.html
+++ b/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>