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

Cleaned and added some commend and continued the conv popover

Browse Source
This commit is contained in:
Adrien Bouvais 2024-05-25 10:14:54 +02:00
parent 01d04b3611
commit b8a2f02657
17 changed files with 517 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
Chat.go
View File

@ -3,6 +3,7 @@ package main
import (
"context"
"encoding/json"
"fmt"
"net/url"
"sort"
"strings"
@ -15,6 +16,7 @@ import (
func ChatPageHandler(c *fiber.Ctx) error {
authCookie := c.Cookies("jade-edgedb-auth-token", "")
fmt.Println("Main page")
if authCookie != "" && !checkIfLogin() {
edgeClient = edgeClient.WithGlobals(map[string]interface{}{"ext::auth::client_token": authCookie})
@ -64,7 +66,7 @@ func LoadChatHandler(c *fiber.Ctx) error {
if checkIfLogin() {
if IsCurrentUserLimiteReached() && !IsCurrentUserSubscribed() {
return c.SendString(generateLimitReachedChatHTML())
} else if getCurrentUserKeys() == nil {
} else if !checkIfHaveKey() {
return c.SendString(generateEnterKeyChatHTML())
}
return c.SendString(generateChatHTML())
@ -84,9 +86,33 @@ type TemplateMessage struct {
}
func generateChatHTML() string {
// Get the messages from the database
// Maybe redo that to be area by area because look like shit rn. It come from early stage of dev. It work tho soooo...
Messages := getAllMessages()
var Messages []Message
err := edgeClient.Query(edgeCtx, `
SELECT Message {
id,
selected,
role,
content,
date,
llm : {
name,
modelInfo : {
modelID,
name,
company : {
icon
}
}
}
}
FILTER .conversation = global currentConversation AND .conversation.user = global currentUser
ORDER BY .date ASC
`, &Messages)
if err != nil {
panic(err)
}
htmlString := "<div class='columns is-centered' id='chat-container'><div class='column is-12-mobile is-8-tablet is-6-desktop' id='chat-messages'>"
@ -594,12 +620,13 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
return c.SendString(GenerateModelPopoverHTML(false))
}
func GenerateConversationPopoverHTML(refresh bool) string {
func GenerateConversationPopoverHTML(isActive bool) string {
var conversations []Conversation
err := edgeClient.Query(edgeCtx, `
SELECT Conversation {
name,
position
position,
id
}
FILTER .user = global currentUser
ORDER BY .position
@ -610,7 +637,7 @@ func GenerateConversationPopoverHTML(refresh bool) string {
out, err := pongo2.Must(pongo2.FromFile("views/partials/popover-conversation.html")).Execute(pongo2.Context{
"Conversations": conversations,
"IsActive": refresh,
"IsActive": isActive,
})
if err != nil {
panic(err)
@ -627,7 +654,8 @@ func LoadConversationSelectionHandler(c *fiber.Ctx) error {
}
func RefreshConversationSelectionHandler(c *fiber.Ctx) error {
return c.SendString(GenerateConversationPopoverHTML(true))
IsActive := c.FormValue("IsActive") == "true"
return c.SendString(GenerateConversationPopoverHTML(!IsActive))
}
func LoadSettingsHandler(c *fiber.Ctx) error {
@ -670,3 +698,58 @@ func LoadSettingsHandler(c *fiber.Ctx) error {
}
return c.SendString(out)
}
func CreateConversationHandler(c *fiber.Ctx) error {
if !checkIfLogin() || !checkIfHaveKey() {
return c.SendString("")
}
name := c.FormValue("conversation-name-input")
if name == "" {
name = "New Conversation"
}
err := edgeClient.Execute(edgeCtx, `
WITH
C := (
SELECT Conversation
FILTER .user = global currentUser
)
INSERT Conversation {
name := <str>$0,
user := global currentUser,
position := count(C) + 1
}
`, name)
if err != nil {
panic(err)
}
return c.SendString(GenerateConversationPopoverHTML(true))
}
func SelectConversationHandler(c *fiber.Ctx) error {
if !checkIfLogin() || !checkIfHaveKey() {
return c.SendString("")
}
conversationId := c.FormValue("conversation-id")
conversationUUID, err := edgedb.ParseUUID(conversationId)
if err != nil {
// Handle the error
panic(err)
}
err = edgeClient.Execute(edgeCtx, `
SET global currentConversation := (
SELECT Conversation
FILTER .id = <uuid>$0
LIMIT 1
);
`, conversationUUID)
if err != nil {
panic(err)
}
return c.SendString(generateChatHTML())
}

29
LLM.go
View File

@ -2,6 +2,7 @@ package main
import (
"encoding/json"
"fmt"
"strconv"
"github.com/edgedb/edgedb-go"
@ -139,3 +140,31 @@ func updateLLMPositionBatch(c *fiber.Ctx) error {
return nil
}
func updateConversationPositionBatch(c *fiber.Ctx) error {
var positionUpdates []PositionUpdate
if err := c.BodyParser(&positionUpdates); err != nil {
return err
}
for _, update := range positionUpdates {
fmt.Println(update.ID)
idUUID, err := edgedb.ParseUUID(update.ID)
if err != nil {
panic(err)
}
err = edgeClient.Execute(edgeCtx, `
UPDATE Conversation
FILTER .id = <uuid>$0 AND .user = global currentUser
SET {
position := <int32>$1
};
`, idUUID, int32(update.Position))
if err != nil {
panic(err)
}
}
return nil
}

27
Request.go
View File

@ -1,3 +1,13 @@
// I guess it should be some kind of package with different part for different Company
// I will maybe do it in the future, rn, I don't have time to learn that and I like it like that
// It do need more time and try and error to do all of them but they are fully independant
// And this is simple, I don't need to trick my mind to undersant that some part are share, ect
// If I want to see how I go from the message to the response, I can. That what I want
// If you are wondering how it work:
// User send message -> Generate HTML of one user message and one bot placeholder ----
// -> Send HTML and append it to the chat container -> The placeholder do a load HTMX request to GenerateMultipleMessagesHandler ----
// -> Make multiple request in parallel to all APIs -> Send one SSE event per message receive.
package main
import (
@ -230,3 +240,20 @@ func GenerateMultipleMessagesHandler(c *fiber.Ctx) error {
return c.SendString("")
}
func addUsage(inputCost float32, outputCost float32, inputToken int32, outputToken int32, modelID string) {
// Create a new usage
err := edgeClient.Execute(edgeCtx, `
INSERT Usage {
input_cost := <float32>$0,
output_cost := <float32>$1,
input_token := <int32>$2,
output_token := <int32>$3,
model_id := <str>$4,
user := global currentUser
}
`, inputCost, outputCost, inputToken, outputToken, modelID)
if err != nil {
panic(err)
}
}

2
RequestGoogle.go
View File

@ -1,3 +1,5 @@
// Yes Google do not work because I am in Europe and I can't get an API key...
// I can't dev, I will try using a VPN I guess at least so the features is available for people outside of Europe
package main
import (

3
RequestGooseai.go
View File

@ -1,3 +1,6 @@
// It work but I disable it because it is not chat API
// It is text completion, not chat completion. But they will soon release API for chat
// So I leave it here for now
package main
import (

1
Stripe.go
View File

@ -1,3 +1,4 @@
// That work, you can pay. Fully functional
package main
import (

181
database.go
View File

@ -1,15 +1,21 @@
// Here are all type that I use with EdgeDB. I really love how this works together.
// The functions are from the very beginning. Of the app, I will remove it I think.
// I need to think of a better way to organize that.
package main
import (
"context"
"fmt"
"time"
"github.com/edgedb/edgedb-go"
)
// So I have one client and one context for the database. All query use the same and it work well so far.
var edgeCtx context.Context
var edgeClient *edgedb.Client
// I will not put a comment on all type, I think they are self-explaining.
type Identity struct {
ID edgedb.UUID `edgedb:"id"`
Issuer string `edgedb:"issuer"`
@ -24,7 +30,7 @@ type User struct {
Avatar string `edgedb:"avatar"`
}
type Key struct {
type Key struct { // API key
ID edgedb.UUID `edgedb:"id"`
Name string `edgedb:"name"`
Company CompanyInfo `edgedb:"company"`
@ -32,7 +38,7 @@ type Key struct {
Date time.Time `edgedb:"date"`
}
type Setting struct {
type Setting struct { // Per user
ID edgedb.UUID `edgedb:"id"`
Keys []Key `edgedb:"keys"`
DefaultModel edgedb.OptionalStr `edgedb:"default_model"`
@ -46,6 +52,10 @@ type Conversation struct {
User User `edgedb:"user"`
}
// An area is in between messages and conversation.
// In a normal chat, you have a list of message, easy. By here you need to add, kind of a new dimension.
// All "message" can have multiple messages. So I created a new type named Area.
// A conversation is a list of Area and an Area is a list of Message. Easy enough.
type Area struct {
ID edgedb.UUID `edgedb:"id"`
Position int64 `edgedb:"position"`
@ -56,7 +66,7 @@ type Message struct {
ID edgedb.UUID `edgedb:"id"`
Content string `edgedb:"content"`
Role string `edgedb:"role"`
Selected bool `edgedb:"selected"`
Selected bool `edgedb:"selected"` // Selected can also be seen as "Active". This is the message that will be use for the request.
Date time.Time `edgedb:"date"`
Area Area `edgedb:"area"`
Conv Conversation `edgedb:"conversation"`
@ -73,6 +83,9 @@ type Usage struct {
OutputToken int32 `edgedb:"output_token"`
}
// A LLM is a bad name but I like it.
// It is more one instance of a model with it parameters.
// Maybe I will add more options later.
type LLM struct {
ID edgedb.UUID `edgedb:"id"`
Name string `edgedb:"name"`
@ -116,99 +129,34 @@ func init() {
edgeClient = client
}
func getLastArea() edgedb.UUID {
var inserted struct{ id edgedb.UUID }
err := edgeClient.QuerySingle(edgeCtx, `
select Area
filter .conversation.name = 'Default' AND .conversation.user = global currentUser
order by .position desc
limit 1
`, &inserted)
if err != nil {
panic(err)
}
return inserted.id
}
func checkIfLogin() bool {
var result User
err := edgeClient.QuerySingle(edgeCtx, "SELECT global currentUser LIMIT 1;", &result)
return err == nil
}
func addUsage(inputCost float32, outputCost float32, inputToken int32, outputToken int32, modelID string) {
// Create a new usage
err := edgeClient.Execute(edgeCtx, `
INSERT Usage {
input_cost := <float32>$0,
output_cost := <float32>$1,
input_token := <int32>$2,
output_token := <int32>$3,
model_id := <str>$4,
user := global currentUser
}
`, inputCost, outputCost, inputToken, outputToken, modelID)
if err != nil {
panic(err)
}
}
func insertNewConversation() edgedb.UUID {
var inserted struct{ id edgedb.UUID }
err := edgeClient.QuerySingle(edgeCtx, `
WITH
C := (
SELECT Conversation
FILTER .user = global currentUser
)
INSERT Conversation {
name := 'Default',
user := global currentUser,
position := count(C) + 1
}
`, &inserted)
if err != nil {
panic(err)
}
return inserted.id
}
func insertArea() (edgedb.UUID, int64) {
// If the Default conversation doesn't exist, create it.
var convExists bool
edgeClient.QuerySingle(edgeCtx, `
select exists (
select Conversation
filter .name = 'Default' AND .user = global currentUser
);
`, &convExists)
if !convExists {
insertNewConversation()
}
// Insert a new area.
var inserted struct{ id edgedb.UUID }
err := edgeClient.QuerySingle(edgeCtx, `
WITH
positionVar := count((SELECT Area FILTER .conversation.name = 'Default' AND .conversation.user = global currentUser)) + 1
positionVar := count((SELECT Area FILTER .conversation = global currentConversation AND .conversation.user = global currentUser)) + 1
INSERT Area {
position := positionVar,
conversation := (
SELECT Conversation
FILTER .name = 'Default' AND .user = global currentUser
LIMIT 1
)
conversation := global currentConversation
}
`, &inserted)
if err != nil {
fmt.Println("Couldn't insert area")
panic(err)
}
var positionSet struct{ position int64 }
err = edgeClient.QuerySingle(edgeCtx, `
SELECT Area {
position
position,
}
FILTER .conversation.name = 'Default' AND .conversation.user = global currentUser
FILTER .conversation = global currentConversation AND .conversation.user = global currentUser
ORDER BY .position desc
LIMIT 1
`, &positionSet)
@ -221,9 +169,21 @@ func insertArea() (edgedb.UUID, int64) {
func insertUserMessage(content string) edgedb.UUID {
// Insert a new user.
lastAreaID := getLastArea()
var inserted struct{ id edgedb.UUID }
var lastAreaID edgedb.UUID
err := edgeClient.QuerySingle(edgeCtx, `
SELECT Area {
id
}
FILTER .conversation = global currentConversation AND .conversation.user = global currentUser
ORDER BY .position desc
LIMIT 1
`, &lastAreaID)
if err != nil {
panic(err)
}
var inserted struct{ id edgedb.UUID }
err = edgeClient.QuerySingle(edgeCtx, `
INSERT Message {
role := <str>$0,
content := <str>$1,
@ -231,11 +191,7 @@ func insertUserMessage(content string) edgedb.UUID {
SELECT Area
FILTER .id = <uuid>$2
),
conversation := (
SELECT Conversation
FILTER .name = 'Default' AND .user = global currentUser
LIMIT 1
),
conversation := global currentConversation,
selected := true,
llm := (
SELECT LLM FILTER .id = <uuid>"a32c43ec-12fc-11ef-9dc9-b38e0de8bff0"
@ -249,9 +205,21 @@ func insertUserMessage(content string) edgedb.UUID {
}
func insertBotMessage(content string, selected bool, llmUUID edgedb.UUID) edgedb.UUID {
lastAreaID := getLastArea()
var inserted struct{ id edgedb.UUID }
var lastAreaID edgedb.UUID
err := edgeClient.QuerySingle(edgeCtx, `
SELECT Area {
id
}
FILTER .conversation = global currentConversation AND .conversation.user = global currentUser
ORDER BY .position desc
LIMIT 1
`, &lastAreaID)
if err != nil {
panic(err)
}
var inserted struct{ id edgedb.UUID }
err = edgeClient.QuerySingle(edgeCtx, `
INSERT Message {
role := <str>$0,
content := <str>$2,
@ -279,42 +247,6 @@ func insertBotMessage(content string, selected bool, llmUUID edgedb.UUID) edgedb
return inserted.id
}
func getAllMessages() []Message {
// If no CurrentUser, return an empty array
if !checkIfLogin() {
return []Message{}
}
var messages []Message
err := edgeClient.Query(edgeCtx, `
SELECT Message {
id,
selected,
role,
content,
date,
llm : {
name,
modelInfo : {
modelID,
name,
company : {
icon
}
}
}
}
FILTER .conversation.name = 'Default' AND .conversation.user = global currentUser
ORDER BY .date ASC
`, &messages)
if err != nil {
panic(err)
}
return messages
}
func getAllSelectedMessages() []Message {
// If no CurrentUser, return an empty array
if !checkIfLogin() {
@ -338,7 +270,7 @@ func getAllSelectedMessages() []Message {
}
}
}
} FILTER .conversation.name = 'Default' AND .conversation.user = global currentUser AND .selected = true
} FILTER .conversation = global currentConversation AND .conversation.user = global currentUser AND .selected = true
ORDER BY .date ASC
`, &messages)
if err != nil {
@ -348,16 +280,11 @@ func getAllSelectedMessages() []Message {
return messages
}
func getCurrentUserKeys() []Key {
var result []Key
err := edgeClient.Query(edgeCtx, "SELECT global currentUser.setting.keys", &result)
func checkIfHaveKey() bool {
var keys []Key
err := edgeClient.Query(edgeCtx, "SELECT global currentUser.setting.keys", &keys)
if err != nil {
panic(err)
}
return result
}
func checkIfHaveKey() bool {
keys := getCurrentUserKeys()
return len(keys) > 0
}

7
dbschema/default.esdl
View File

@ -8,6 +8,13 @@ module default {
))
);
global currentConversation := (
assert_single((
select Conversation
filter .name = 'Default' AND .user = global currentUser
))
);
type User {
required setting: Setting;
required stripe_id: str;

9
dbschema/migrations/00043-m1wantz.edgeql Normal file
View File

@ -0,0 +1,9 @@
CREATE MIGRATION m1wantzc6ebph75s6s5oqd4yfcjul575mqmaas5g3ch77f3ojuwluq
ONTO m1ospnjzsatmkntvczm5eu65omytyezeg3lanxeogtdqz2372t6cuq
{
CREATE GLOBAL default::currentConversation := (std::assert_single((SELECT
default::User
FILTER
(.name = 'default')
)));
};

9
dbschema/migrations/00044-m1xiilc.edgeql Normal file
View File

@ -0,0 +1,9 @@
CREATE MIGRATION m1xiilci36z6h4kris43l3gb6w63y7lbql3ismz7coxobr6r2yhz6a
ONTO m1wantzc6ebph75s6s5oqd4yfcjul575mqmaas5g3ch77f3ojuwluq
{
ALTER GLOBAL default::currentConversation USING (std::assert_single((SELECT
default::Conversation
FILTER
((.name = 'Default') AND (.user = GLOBAL default::currentUser))
)));
};

10
login.go
View File

@ -236,6 +236,16 @@ func handleCallbackSignup(c *fiber.Ctx) error {
edgeClient = edgeClient.WithGlobals(map[string]interface{}{"ext::auth::client_token": tokenResponse.AuthToken})
err = edgeClient.Execute(edgeCtx, `
INSERT Conversation {
name := 'Default',
user := global currentUser,
position := 1
}`)
if err != nil {
panic(err)
}
return c.Redirect("/", fiber.StatusPermanentRedirect)
}

38
main.go
View File

@ -1,3 +1,31 @@
// Welcome welcome, I guess you started here
// Thank you for reviewing my code.
// As for context. This is the absolutely first time I use Golang or EdgeDB.
// So far I only did python. I have a master but in thermal engineering, not CS.
// My philosophy in coding is simplicity. A "clean code" is a simple code.
// For me you should need few comments. Variables, type and functions name should be enough to understand.
// And what's work, work.
// To build my app I took a simple approach.
// All data are stored in database. If I need it, I ask the DB.
// There is no state in the server nor in the client (or very little for the client).
// For example if I want to ask a question. Here a simplify version:
// 1. Add the user message to the DB.
// 2. Read all messages from the DB to send a request.
// 3. Add the bot message to the DB.
// 4. Read all messages from the DB to generate the chat HTML.
// So all query are simple query. That is my goal. In the future I may optimize it, but for dev, that is the best approach I think.
// Also if I want to change the order of a list (you will see later).
// I first send the new positions -> update the db -> read the db to generate the HTML.
// So Edgedb is the heart of the app. Everything pass by it.
// It need A LOT of optimization, I first do something that work then optimize it.
// I hope you will like it.
package main
import (
@ -51,7 +79,7 @@ func main() {
// Import HTML using django engine/template
engine := django.New("./views", ".html")
// Create new Fiber instance. Can use any framework. I use fiber for speed and simplicity
// Create new Fiber instance
app := fiber.New(fiber.Config{
Views: engine,
AppName: "JADE 2.0",
@ -92,6 +120,9 @@ func main() {
app.Get("/loadKeys", LoadKeysHandler)
app.Get("/loadSettings", LoadSettingsHandler)
app.Post("/updateLLMPositionBatch", updateLLMPositionBatch)
app.Get("/createConversation", CreateConversationHandler)
app.Get("/selectConversation", SelectConversationHandler)
app.Post("/updateConversationPositionBatch", updateConversationPositionBatch)
// Authentication
app.Get("/signin", handleUiSignIn)
@ -145,6 +176,11 @@ func main() {
log.Fatal(app.Listen(":8080"))
}
// The route to add keys, idk where to put it so it's here
// Deserve a good REDO lol
// I mean, look at this shit...
// 300 lines, I'm sure it can be done in 50
// TODO REDO and maybe find it a better place
func addKeys(c *fiber.Ctx) error {
openaiKey := c.FormValue("openai_key")
anthropicKey := c.FormValue("anthropic_key")

54
static/model-selection-menu.js
View File

@ -1,54 +0,0 @@
let lastSelectedIndex = null;
function toggleSelection(element) {
const elements = Array.from(document.getElementsByClassName('icon-text'));
const index = elements.indexOf(element);
if (document.body.classList.contains('shift-pressed') && lastSelectedIndex !== null) {
const [start, end] = [lastSelectedIndex, index].sort((a, b) => a - b);
let allSelected = true;
for (let i = start; i <= end; i++) {
if (!elements[i].classList.contains('selected')) {
allSelected = false;
break;
}
}
for (let i = start; i <= end; i++) {
if (allSelected) {
elements[i].classList.remove('selected');
elements[i].classList.add('unselected');
} else {
elements[i].classList.add('selected');
elements[i].classList.remove('unselected');
}
}
lastSelectedIndex = null;
const elements2 = Array.from(document.getElementsByClassName('icon-text'));
for (let i = 0; i < elements2.length; i++) {
elements2[i].classList.remove('shiftselected');
}
} else if (document.body.classList.contains('shift-pressed') && lastSelectedIndex === null) {
lastSelectedIndex = index;
element.classList.toggle('shiftselected');
} else {
element.classList.toggle('selected');
element.classList.toggle('unselected');
}
toggleSendButton();
}
function getSelectedModelsIDs() {
var selectedModelsIDs = [];
var selectedModels = document.getElementsByClassName('selected');
for (var i = 0; i < selectedModels.length; i++) {
selectedModelsIDs.push(selectedModels[i].getAttribute('data-id'));
}
return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
}
function toggleSendButton() {
var selectedModels = document.getElementsByClassName('selected');
var sendButton = document.querySelector('button[disabled]');
sendButton.disabled = selectedModels.length === 0;
}

3
utils.go
View File

@ -1,3 +1,6 @@
// The usual utils files with some functions
// I do plan to change the markdownToHTML and addCopyButtonsToCode
// I will take example on openai and gemini and put a header on top of a code part with the button instead of inside
package main
import (

1
views/layouts/main.html
View File

@ -15,7 +15,6 @@
<script src="https://unpkg.com/htmx.org@2.0.0-beta4/dist/htmx.js"></script>
<script src="https://unpkg.com/htmx-ext-sse@2.0.0/sse.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<script src="/model-selection-menu.js"></script>
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
</head>

101
views/partials/popover-conversation.html
View File

@ -1,7 +1,8 @@
<div class="dropdown is-up is-right {% if IsActive %} is-active {% endif %}" id="conversation-dropdown">
<div class="dropdown-trigger">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu3"
hx-get="/refreshConversationSelection" hx-target="#conversation-dropdown" hx-swap="outerHTML">
hx-get="/refreshConversationSelection" hx-target="#conversation-dropdown" hx-swap="outerHTML"
hx-vals="js:{IsActive: document.getElementById('conversation-dropdown').classList.contains('is-active')}">
<span class="icon">
<i class="fa-solid fa-comments"></i>
</span>
@ -9,22 +10,84 @@
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<div class="dropdown-item" id="models-list">
<div class="dropdown-item">
<div id="conversation-list">
{% for Conversation in Conversations %}
<div class="icon-text has-text unselected" data-id="{{ Converrsation.ID.String() }}"
style="cursor: pointer;" onclick="toggleSelection(this)">
<div class="icon-text has-text unselected icon-conv" data-id="{{ Conversation.ID.String() }}"
style="cursor: pointer;" onclick="toggleConversationSelection(this)" hx-get="/loadChat"
hx-swap="outerHTML" hx-target="#chat-container">
<span>{{ Conversation.Name }}</span>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<input class="input is-small mt-2 is-hidden" type="text" id="conversation-name-input"
name="conversation-name-input" placeholder="Conversation name" autocomplete="off">
<div class="is-flex is-justify-content-space-between mt-4">
<button disabled class="button is-small is-danger" id="delete-conversation-button">
<span class="icon">
<i class="fa-solid fa-trash"></i>
</span>
</button>
<button class="button is-small is-danger is-outlined is-hidden" id="cancel-conversation-button">
<span class="icon">
<i class="fa-solid fa-xmark"></i>
</span>
</button>
<div class="is-flex is-justify-content-flex-end">
{% if not IsActive %}
<button class="button is-small is-success is-outlined" id="create-conversation-button">
<span class="icon">
<i class="fa-solid fa-plus"></i>
</span>
</button>
<button class="button is-small is-success is-outlined is-hidden"
id="confirm-conversation-button" hx-get="/createConversation"
hx-include="[name='conversation-name-input']" hx-swap="outerHTML"
hx-target="#conversation-dropdown">
<span class="icon">
<i class="fa-solid fa-check"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script>
function toggleConversationSelection(element) {
const elements = Array.from(document.getElementsByClassName('icon-conv'));
// If the conversation is already selected, unselect it
if (element.classList.contains('selected')) {
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('selected');
elements[i].classList.add('unselected');
}
element.classList.remove('selected');
element.classList.add('unselected');
return;
} else if (element.classList.contains('unselected')) {
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('selected');
elements[i].classList.add('unselected');
}
element.classList.remove('unselected');
element.classList.add('selected');
return;
} else {
// Otherwise, select it
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('selected');
elements[i].classList.add('unselected');
}
element.classList.remove('unselected');
element.classList.add('selected');
}
// Make an HTMX request to update the chat
}
var sortable = new Sortable(document.getElementById('conversation-list'), {
animation: 150,
onEnd: function (evt) {
@ -48,5 +111,23 @@
document.getElementById('conversation-dropdown').classList.remove('is-active');
}
});
document.getElementById('create-conversation-button').addEventListener('click', function () {
document.getElementById('conversation-name-input').classList.remove('is-hidden');
document.getElementById('confirm-conversation-button').classList.remove('is-hidden');
document.getElementById('create-conversation-button').classList.add('is-hidden');
document.getElementById('cancel-conversation-button').classList.remove('is-hidden');
document.getElementById('delete-conversation-button').classList.add('is-hidden');
document.getElementById('conversation-list').classList.add('is-hidden');
})
document.getElementById('cancel-conversation-button').addEventListener('click', function () {
document.getElementById('conversation-name-input').classList.add('is-hidden');
document.getElementById('confirm-conversation-button').classList.add('is-hidden');
document.getElementById('create-conversation-button').classList.remove('is-hidden');
document.getElementById('cancel-conversation-button').classList.add('is-hidden');
document.getElementById('delete-conversation-button').classList.remove('is-hidden');
document.getElementById('conversation-list').classList.remove('is-hidden');
})
</script>
{% endif %}
</div>

64
views/partials/popover-models.html
View File

@ -10,8 +10,8 @@
<div class="dropdown-item" id="models-list">
<div id="llm-list">
{% for LLM in LLMs %}
<div class="icon-text has-text unselected" data-id="{{ LLM.ID.String() }}" style="cursor: pointer;"
onclick="toggleSelection(this)">
<div class="icon-text has-text unselected icon-llm" data-id="{{ LLM.ID.String() }}"
style="cursor: pointer;" onclick="toggleSelection(this)">
<span class="icon">
<img src="{{ LLM.Model.Company.Icon }}" />
</span>
@ -24,7 +24,7 @@
hx-target="#models-dropdown" hx-confirm="Are you sure?" hx-trigger="click"
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}">
<span class="icon">
<i class="fa-solid fa-xmark"></i>
<i class="fa-solid fa-trash"></i>
</span>
</button>
<div>
@ -84,8 +84,6 @@
</div>
</div>
</div>
</div>
<script>
var sortable = new Sortable(document.getElementById('llm-list'), {
animation: 150,
@ -163,4 +161,60 @@
event.preventDefault();
}
});
let lastSelectedIndex = null;
function toggleSelection(element) {
const elements = Array.from(document.getElementsByClassName('icon-llm'));
const index = elements.indexOf(element);
if (document.body.classList.contains('shift-pressed') && lastSelectedIndex !== null) {
const [start, end] = [lastSelectedIndex, index].sort((a, b) => a - b);
let allSelected = true;
for (let i = start; i <= end; i++) {
if (!elements[i].classList.contains('selected')) {
allSelected = false;
break;
}
}
for (let i = start; i <= end; i++) {
if (allSelected) {
elements[i].classList.remove('selected');
elements[i].classList.add('unselected');
} else {
elements[i].classList.add('selected');
elements[i].classList.remove('unselected');
}
}
lastSelectedIndex = null;
const elements2 = Array.from(document.getElementsByClassName('icon-text'));
for (let i = 0; i < elements2.length; i++) {
elements2[i].classList.remove('shiftselected');
}
} else if (document.body.classList.contains('shift-pressed') && lastSelectedIndex === null) {
lastSelectedIndex = index;
element.classList.toggle('shiftselected');
} else {
element.classList.toggle('selected');
element.classList.toggle('unselected');
}
toggleSendButton();
}
function getSelectedModelsIDs() {
var selectedModelsIDs = [];
var selectedModels = document.getElementsByClassName('selected');
for (var i = 0; i < selectedModels.length; i++) {
selectedModelsIDs.push(selectedModels[i].getAttribute('data-id'));
}
return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
}
function toggleSendButton() {
var selectedModels = document.getElementsByClassName('selected');
var sendButton = document.getElementById('chat-input-send-btn');
sendButton.disabled = selectedModels.length === 0;
}
</script>
</div>