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

Don't work

Browse Source
This commit is contained in:
Adrien Bouvais 2024-04-21 13:59:43 +02:00
parent ffb1739611
commit 005b9cd41d
14 changed files with 310 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Simplicity.drawio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
Simplicity2.drawio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
Simplicity3.drawio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

179
article.md
View File

@ -29,7 +29,7 @@ Another huhg advantages of using HTMX instead of JS is that you can use all HTML
The core idea being that the server send all the browser need to know t odisplay the app. It doesn't need to understand what the app is or do, all of that is either in the HTML, in our head or in the server. The core idea being that the server send all the browser need to know t odisplay the app. It doesn't need to understand what the app is or do, all of that is either in the HTML, in our head or in the server.
When I click on a button to remove something, the client don't understand that I want to remove something. It just understand that I want to change this part. And if the change happend to be an empty HTML, well it's been "removed". When I click on a button to remove something, the client don't understand that I want to remove something. It just understand that I want to change this part. And if the change happend to be an empty HTML, well it's been "removed".
Compare to the API phylosophy. The server send just the data, but then the server need a function that understand and interpret the data. Compare to the API phylosophy where the server send just the data, but then the server need a function that understand and interpret the data.
For example I want to display a username and an email. If my API send this: For example I want to display a username and an email. If my API send this:
```html ```html
@ -48,18 +48,19 @@ Now let's see the current approche. Usuqlly server send JSON to the client and t
But with that, you don't know how to display it. You need a new JS function to pass from one to another. But with that, you don't know how to display it. You need a new JS function to pass from one to another.
Why ? I already did the logic server side of getting the data, ect. Why do I need to split some part in JS and do some part twice ? Why ? I already did the logic server side of getting the data, ect. Why do I need to split some part in JS and do some shit twice ?
## part 0 - table ## part 0 - table
At my work, I was task to implement an app. The app is pretty simple. You have a table that is a list of test done on a database. You can see the number of errors. For each test there is a button to see the detail. At my work, I was task to implement an app. The app is pretty simple. You have a table that is a list of test done on a database. You can see the number of errors. For each test there is a button to see the detail.
Let's take an easy example, I have a list of client, I check if any have more than 5 addresses. If so, when I click on the +, I get a new table that list all client with more than 5 addresses. And there is multiple test like that. To understand here a test example: I have a list of client, I check if any have more than 5 addresses. If so, when I click on the +, I get a new table that list all client with more than 5 addresses. And there is multiple test like that.
Pretty simple right ? Well no, obviously. Pretty simple right ? Well no, obviously.
Man, I stuggeled so hard to just add one + button, and then if I do that, it change that, and that and blablabla and it lag and it's not center. God damm, that why I don't wanted JS, I don't know JS. I did a script to exclude a row of the second table and it would react... What a mistake, I think I touched the ultimate use case here, how easy it is in HTMX compare to the other way is just incridible. And now the ultimate roast for JS. Yes JS on client side is in theory more efficient... in theory. But I don't know what I'm am doing here! chatGPT gave me this and it work but god, I use it for python and sometime it give me somecrazy shit. Just to say that it is if you know what you are doing. Way better to stick to the language you know, here you can do someting opti, here you understand. Man, I stuggeled so hard to just add one + button for the details. And then if I do that, it change that, and that and blablabla and it lag and it's not center. God damm, that why I don't wanted JS, I don't know JS. I did a script to exclude a row of the second table and it would react... What a mistake, I think I touched the ultimate use case here, how easy it is in HTMX compare to the other way is just incridible.
And now the ultimate roast for JS. Yes JS on client side is in theory more efficient... in theory. But I don't know what I'm am doing here! chatGPT gave me this and it work but god, I use it for python and sometime it give me somecrazy shit. Just to say that it is if you know what you are doing. Way better to stick to the language you know, here you can do someting opti, here you understand.
Let's go into a bit of code. So I have my Flask app running Let's go into a bit of code. So I have my Flask app running (I use Flask for my work)
```python ```python
from flask import Flask, render_template, request from flask import Flask, render_template, request
@ -174,7 +175,7 @@ And that's it for this first demo/intro. We were able to do some crazy stuff in
I was able to learn and do the app it few days while doing other stuff and managing issue on the dev virtual machine. I was able to learn and do the app it few days while doing other stuff and managing issue on the dev virtual machine.
The shit was really impressive, and my boss is really similare to me in the way he don"t want to learn JS. He was really impressed. The shit was really impressive, and my boss is really similare to me in the way he don"t want to learn JS. He was really impressed.
So after that, I was convinced. Let's do JADE 2.0 using the Hyper PyFleX stack. So after that, I was convinced. Let's do JADE 2.0 using HTMX.
## Why GO ? ## Why GO ?
@ -183,13 +184,48 @@ I also realise how I want my app to work and it's simple. remember simplicity bo
So how it work. Every time I do something in the chat. I recreate it. So how it work. Every time I do something in the chat. I recreate it.
Let's take an example, I want to add a message to the chat: Let's take an example, I want to add a message to the chat:
User trigger --> User trigger and send form with message content --> Server get form content and add a message to the database --> Run main generateChatHTML (Read DB -> Generate HTML) -> Send to the client to update just the chat
The goal is once again simplicity. All data are at one place, the database, where it bellow. If I need it, I read the database. There is no buffer, no global messages array that keep track of mesages in GO, and not at all in both in GO and in JS on the client. Then I need to be sure that they are identical, too much trubble, why would I do that ?
Idk how stupid it is to use this for big app in prod, but worse case you can do a compose and add a mongodb buffer and only receive once and save once when leaving.
So here a simple diagramm to understand:
![alt text](Simplicity.drawio.png)
Compare to the more traditional approche:
![alt text](Simplicity2.drawio.png)
Or even worse, with JS
![alt text](Simplicity3.drawio.png)
Yep, this is how I see it. WTF is wrong with you peoples? 3 loops ????? 3???? I meqn 2 OOOKKK, I guesssssssss. But 3????
So If I want to update something in my app, I first need to process the data in JS and updatte what need to be in the JS client then send only the necessarry data through an API in a specific format and have a specific function that receive this specific data and do some stuff on the server, change some stuff and then send the data to the database. Ok we update one thing!
Don't get me wrong, I see the point of using JS. This is not a loop, the data never comeback from the databse to the client! The server never send anything. Meaning it never do the server to client part that HTMX do. So you do transfert more data for similare optimization level for the same thing but, is it better optimizing that if I get a 500mb RAM client ? Depend the app, no in a lot of scenario I beleive.
Note that in the first one, there is 2 data box. Meaning 2 "states of data". This is the key difference. In the second one, the server is responsible for keeping track of the data as it stay inside it and just send the necessary data to the databse. It is efficient, that is for sure, but the server AND the databse need to keep track of the same thing, that is redondant.
So after chossing to go with this design, as it is basically the same logic I use in streamlit with st.rerun(). I needed a server efficient, powerful and fast !!!
*Process to look at python code*
Yeah.....
I like you python ,that is for sure. But maybe I need someone else on this job. So I alredy had some eyes on GO and was looking for a good project to use it. I saw other framework and language like Rust, ect. I was thinking about mojo at some point, but it is not mature enough at this point. But could of been a good use case for it.
So GO it is, I did the good old google "Go web framwork" and found a good list, tested with Gin then went with Fiber for the SPEEDDDDDDDDDDDDDDDDDDDDDDDDD!!!!!!!!! YOOOOOOOOOOOLLLLLLLOOOOOOOO!!!!!!!!
No seriously, had to chose, looked really similare. Tryed Fiber and found it easy to use and powerful so went with it.
## Used teck ## Used teck
So here my full teck stack So here my full teck stack
- GO with Fiber - GO with Fiber
- HTMX - HTMX
- MongoDB - MongoDB
- Bulma
Done
## part 1 - The chat ## part 1 - The chat
@ -199,5 +235,134 @@ Ok so as a first thing is a chat. What I need is:
Should be easy right ? Hopefully with HTMX yes. Let's try... Should be easy right ? Hopefully with HTMX yes. Let's try...
Well it do was pretty easy. I first did a base.html and then added an navbar and a page.html a bit like that:
```html
{% extends 'base.html' %}
{% block content %}
<div class="columns" style="width: 100%;">
<div class="column" id="messages" hx-get="/chat/messages" hx-trigger="load" hx-swap="outerHTML">
</div>
</div>
<form hx-post="/chat" hx-target="#messages" hx-swap="outerHTML">
<input class="input" type="text" placeholder="Type your message here..." name="message" />
</form>
<style>
.column {
display: flex;
flex-direction: column;
}
.message {
max-width: 90%;
margin-bottom: 10px;
}
.user-message {
align-self: flex-start;
}
.bot-message {
align-self: flex-end;
}
</style>
{% endblock %}
```
So in this HTML, I have a columns with one column empty for now and a form with an input. I also created a small style so the text are on the right or left of the colum depending of if user of bot and that's it.
Now in this HTML, I use HTMX at 2 places, the column and the form. Let's take a look at the column first:
- `hx-trigger="load"` mean *when the page load*
- `hx-get="/chat/messages"` *get the HTML here*
- `hx-swap="outerHTML"` *to replace yourself with the response*
The HTML at /chat/messages look like:
```html
<div class="column" id="messages">
{% for message in messages %}
{% if message.Role == 'user' %}
<article class="message user-message" id='{{ message.id }}'>
<div class="message-header">
<p>User</p>
<form hx-delete="/chat" hx-swap="outerHTML" hx-target="#messages">
<input type="hidden" name="messageId" value='{{ message.id }}'>
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ message.Content }}
</div>
</article>
{% else %}
<article class="message bot-message" id='{{ message.id }}'>
<div class="message-header">
<p>Bot</p>
<form hx-delete="/chat" hx-swap="outerHTML" hx-target="#messages">
<input type="hidden" name="messageId" value='{{ message.id }}'>
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ message.Content }}
</div>
</article>
{% endif %}
{% endfor %}
</div>
```
So it create itself back with `<div class="column" id="messages">` and then do a for loop on the messages that I extracted from the Database on the server side.
Now let's take a look at the `form`:
- `hx-posts="/chat"` mean *get the HTML here*
- `hx-swap="outerHTML"` *to replace*
- `hx-target="#messages"` *this with the response*
The server function at POST /chat will add the message in the databse then return the same as /chat/messages. So if you understand, the function at /chat/messages is the second "Server" box on my diagram. And it's always the same function. Once again simplicity. Out of 4 boxs, only one change basically, the first "Server". Meaning the function that change the database.
And yeah, that's it. A bit of backend but just this:
```go
func addMessageHandler(c *fiber.Ctx) error {
message := c.FormValue("message")
collection := mongoClient.Database("chat").Collection("messages")
collection.InsertOne(context.Background(), bson.M{"message": message, "role": "user", "date": time.Now()})
collection.InsertOne(context.Background(), bson.M{"message": "I did something!", "role": "bot", "date": time.Now()})
return generateChatHTML(c)
}
func generateChatHTML(c *fiber.Ctx) error {
collection := mongoClient.Database("chat").Collection("messages")
// Get all messages
cursor, _ := collection.Find(context.TODO(), bson.D{})
// Convert the cursor to an array of messages
var messages []Message
if err = cursor.All(context.TODO(), &messages); err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"error": "Failed to convert cursor to array",
})
}
// Render the HTML template with the messages
return c.Render("chat/messages", fiber.Map{
"messages": messages,
})
}
```
And that' it! The chat work like that! Obviously I need to add the model api stuff with it but otherwise... done. I just did an ineractive chat in what ? 100 lines of codes ? And in an easy to understand, share and maintain way ? Isn't it beautifull?
## part 2 - The API
Ok so now that we have a chat. I need to be able to communicate with the different API. I'm a bit affray on this one, I hope I don't NEED to use python. Now that I think about, I always used the OpenAI Client, because easy to use. Let's see if I can talk with OpeanAI server through Go first...
# Conclusion # Conclusion
- Say a lot about JS during the article. JS is great, I guess, I didn't try. Every language have strenght weakness, blablabla. The point is that it shouln't be a necessity to learn it. And it shouldn't be so difficult to do basic stuff. - Say a lot about JS during the article. JS is great, I guess, I didn't try. Every language have strenght weakness, blablabla. The point is that it shouln't be a necessity to learn it. And it shouldn't be so difficult to do basic stuff.

1
go.mod
View File

@ -20,6 +20,7 @@ require (
github.com/gofiber/fiber/v2 v2.52.4 // indirect github.com/gofiber/fiber/v2 v2.52.4 // indirect
github.com/gofiber/template v1.8.3 // indirect github.com/gofiber/template v1.8.3 // indirect
github.com/gofiber/template/django/v3 v3.1.11 // indirect github.com/gofiber/template/django/v3 v3.1.11 // indirect
github.com/gofiber/template/html/v2 v2.1.1 // indirect
github.com/gofiber/utils v1.1.0 // indirect github.com/gofiber/utils v1.1.0 // indirect
github.com/golang/snappy v0.0.1 // indirect github.com/golang/snappy v0.0.1 // indirect
github.com/google/uuid v1.5.0 // indirect github.com/google/uuid v1.5.0 // indirect

2
go.sum
View File

@ -40,6 +40,8 @@ github.com/gofiber/template v1.8.3 h1:hzHdvMwMo/T2kouz2pPCA0zGiLCeMnoGsQZBTSYgZx
github.com/gofiber/template v1.8.3/go.mod h1:bs/2n0pSNPOkRa5VJ8zTIvedcI/lEYxzV3+YPXdBvq8= github.com/gofiber/template v1.8.3/go.mod h1:bs/2n0pSNPOkRa5VJ8zTIvedcI/lEYxzV3+YPXdBvq8=
github.com/gofiber/template/django/v3 v3.1.11 h1:wE5k/wWNKGKxfeopaeB6IBijMiEVAxKHJVf1WMH5iNw= github.com/gofiber/template/django/v3 v3.1.11 h1:wE5k/wWNKGKxfeopaeB6IBijMiEVAxKHJVf1WMH5iNw=
github.com/gofiber/template/django/v3 v3.1.11/go.mod h1:sEUp0cr1iCuFx4GEtHEA7yRXgJmRdAVXwGMR3Q5JnyI= github.com/gofiber/template/django/v3 v3.1.11/go.mod h1:sEUp0cr1iCuFx4GEtHEA7yRXgJmRdAVXwGMR3Q5JnyI=
github.com/gofiber/template/html/v2 v2.1.1 h1:QEy3O3EBkvwDthy5bXVGUseOyO6ldJoiDxlF4+MJiV8=
github.com/gofiber/template/html/v2 v2.1.1/go.mod h1:2G0GHHOUx70C1LDncoBpe4T6maQbNa4x1CVNFW0wju0=
github.com/gofiber/utils v1.1.0 h1:vdEBpn7AzIUJRhe+CiTOJdUcTg4Q9RK+pEa0KPbLdrM= github.com/gofiber/utils v1.1.0 h1:vdEBpn7AzIUJRhe+CiTOJdUcTg4Q9RK+pEa0KPbLdrM=
github.com/gofiber/utils v1.1.0/go.mod h1:poZpsnhBykfnY1Mc0KeEa6mSHrS3dV0+oBWyeQmb2e0= github.com/gofiber/utils v1.1.0/go.mod h1:poZpsnhBykfnY1Mc0KeEa6mSHrS3dV0+oBWyeQmb2e0=
github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk= github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=

61
layouts/base.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JADE 2.0</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>
<body>
{{ template "navbar" . }}
{{template "content" .}}
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
<style>
.column {
display: flex;
flex-direction: column;
}
.message {
max-width: 90%;
margin-bottom: 10px;
}
.user-message {
align-self: flex-start;
}
.bot-message {
align-self: flex-end;
}
</style>
</body>
</html>
{{define "navbar"}}
<nav class="navbar is-primary">
<div class="navbar-brand">
<a class="navbar-item" href="https://www.bouvai.com">
<img src="/bouvai.png">
</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">
</div>
</div>
</nav>
{{end}}

58
layouts/chat.html Normal file
View File

@ -0,0 +1,58 @@
{{define "user-message"}}
<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">
{{ .Content }}
</div>
</article>
{{end}}
{{define "bot-message"}}
<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>
{{end}}
{{define "chat-input"}}
<form>
<input class="input" type="text" placeholder="Type your message here..." name="message" />
</form>
{{end}}
{{define "chat-messages"}}
<div class="columns is-centered">
<div class="column is-half">
{{range .Messages}}
{{if eq .Role "user"}}
{{template "user-message" .Message}}
{{else}}
{{template "bot-message" .Message}}
{{end}}
{{end}}
</div>
</div>
{{end}}
{{ define "content" }}
<div class="chat-container">
<h1>Chat Page</h1>
{{template "chat-messages" .Messages}}
{{template "chat-input"}}
</div>
{{ end }}

6
templates/welcome_page.html → layouts/welcome.html
View File

@ -1,11 +1,9 @@
{% extends 'base.html' %} {{define "content"}}
{% block content %}
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<h1>Welcome to JADE 2.0!</h1> <h1>Welcome to JADE 2.0!</h1>
<h1 id="isMongoDBConnected" hx-get="/isMongoDBConnected" hx-trigger="load" hx-swap="outerHTML"></h1> <h1 id="isMongoDBConnected" hx-get="/isMongoDBConnected" hx-trigger="load" hx-swap="outerHTML"></h1>
</div> </div>
</div> </div>
{{end}}
{% endblock %}

31
main.go
View File

@ -2,12 +2,11 @@ package main
import ( import (
"context" "context"
"log"
"time" "time"
"github.com/gofiber/fiber/v2" "github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/middleware/logger" "github.com/gofiber/fiber/v2/middleware/logger"
"github.com/gofiber/template/django/v3" "github.com/gofiber/template/html/v2"
"go.mongodb.org/mongo-driver/bson" "go.mongodb.org/mongo-driver/bson"
"go.mongodb.org/mongo-driver/bson/primitive" "go.mongodb.org/mongo-driver/bson/primitive"
"go.mongodb.org/mongo-driver/mongo" "go.mongodb.org/mongo-driver/mongo"
@ -16,6 +15,11 @@ import (
var mongoClient *mongo.Client var mongoClient *mongo.Client
type User struct {
Username string
Email string
}
type Message struct { type Message struct {
ID primitive.ObjectID `bson:"_id"` ID primitive.ObjectID `bson:"_id"`
Content string `bson:"message"` Content string `bson:"message"`
@ -43,10 +47,8 @@ func connectToMongoDB(uri string) {
} }
func main() { func main() {
// Import HTML using django engine/template
engine := django.New("./templates", ".html")
// Create new Fiber instance. Can use any framework. I use fiber for speed and simplicity // Create new Fiber instance. Can use any framework. I use fiber for speed and simplicity
engine := html.New("./layouts", ".html")
app := fiber.New(fiber.Config{ app := fiber.New(fiber.Config{
Views: engine, Views: engine,
AppName: "JADE 2.0", AppName: "JADE 2.0",
@ -66,20 +68,20 @@ func main() {
app.Get("/", indexHandler) app.Get("/", indexHandler)
app.Get("/isMongoDBConnected", isMongoDBConnectedHandler) app.Get("/isMongoDBConnected", isMongoDBConnectedHandler)
app.Get("/chat", chatPageHandler) app.Get("/chat", chatPageHandler) // Complete chat page
app.Post("/chat", addMessageHandler) app.Put("/chat", addMessageHandler) // Add message
app.Delete("/chat", deleteMessageHandler) app.Delete("/chat", deleteMessageHandler) // Delete message
// Start server // Start server
app.Listen(":3000") app.Listen(":3000")
} }
func indexHandler(c *fiber.Ctx) error { func indexHandler(c *fiber.Ctx) error {
return c.Render("welcome_page", fiber.Map{}) return c.Render("base", fiber.Map{}, "welcome")
} }
func chatPageHandler(c *fiber.Ctx) error { func chatPageHandler(c *fiber.Ctx) error {
return c.Render("chat/page", fiber.Map{}) return c.Render("base", nil, "chat")
} }
func addMessageHandler(c *fiber.Ctx) error { func addMessageHandler(c *fiber.Ctx) error {
@ -135,7 +137,7 @@ func deleteMessageHandler(c *fiber.Ctx) error {
}) })
} }
return c.SendString("") // TODO Main loog that return the all chat return generateChatHTML(c)
} }
func generateChatHTML(c *fiber.Ctx) error { func generateChatHTML(c *fiber.Ctx) error {
@ -158,13 +160,8 @@ func generateChatHTML(c *fiber.Ctx) error {
}) })
} }
// Print messages
for _, message := range messages {
log.Println(message)
}
// Render the HTML template with the messages // Render the HTML template with the messages
return c.Render("chat/messages", fiber.Map{ return c.Render("chat", fiber.Map{
"messages": messages, "messages": messages,
}) })
} }

25
templates/base.html
View File

@ -1,25 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JADE 2.0</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>
<body>
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
{% include 'navbar.html' %}
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-half">
{% block content %}{% endblock %}
</div>
</div>
</div>
</section>
</body>
</html>

31
templates/chat/messages.html
View File

@ -1,31 +0,0 @@
<div class="column" id="messages">
{% for message in messages %}
{% if message.Role == 'user' %}
<article class="message user-message" id='{{ message.id }}'>
<div class="message-header">
<p>User</p>
<form hx-delete="/chat" hx-swap="outerHTML" hx-target="#messages">
<input type="hidden" name="messageId" value='{{ message.id }}'>
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ message.Content }}
</div>
</article>
{% else %}
<article class="message bot-message" id='{{ message.id }}'>
<div class="message-header">
<p>Bot</p>
<form hx-delete="/chat" hx-swap="outerHTML" hx-target="#messages">
<input type="hidden" name="messageId" value='{{ message.id }}'>
<button class="delete" aria-label="delete"></button>
</form>
</div>
<div class="message-body">
{{ message.Content }}
</div>
</article>
{% endif %}
{% endfor %}
</div>

33
templates/chat/page.html
View File

@ -1,33 +0,0 @@
{% extends 'base.html' %}
{% block content %}
<div class="columns" style="width: 100%;">
<div class="column" id="messages">
</div>
</div>
<form hx-post="/chat" hx-target="#messages" hx-swap="outerHTML">
<input class="input" type="text" placeholder="Type your message here..." name="message" />
</form>
<style>
.column {
display: flex;
flex-direction: column;
}
.message {
max-width: 90%;
margin-bottom: 10px;
}
.user-message {
align-self: flex-start;
}
.bot-message {
align-self: flex-end;
}
</style>
{% endblock %}

19
templates/navbar.html
View File

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