Maybe instant message
This commit is contained in:
parent
b2dd946917
commit
84f6b9e381
12
Chat.go
12
Chat.go
@ -177,12 +177,12 @@ func generateChatHTML(c *fiber.Ctx) string {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
out, err := messageUserPlaceholderTmpl.Execute(pongo2.Context{})
|
// out, err := messagesPlaceholderTmpl.Execute(pongo2.Context{})
|
||||||
if err != nil {
|
// if err != nil {
|
||||||
fmt.Println("Error executing message user placeholder template")
|
// fmt.Println("Error executing message user placeholder template")
|
||||||
panic(err)
|
// panic(err)
|
||||||
}
|
// }
|
||||||
htmlString += out
|
// htmlString += out
|
||||||
|
|
||||||
htmlString += "</div></div>"
|
htmlString += "</div></div>"
|
||||||
|
|
||||||
|
|||||||
@ -93,6 +93,8 @@ func GeneratePlaceholderHTML(c *fiber.Ctx, message string, selectedLLMIds []stri
|
|||||||
messageOut, _ := botTmpl.Execute(pongo2.Context{"IsPlaceholder": true, "SelectedLLMs": selectedLLMs, "ConversationAreaId": position + 1})
|
messageOut, _ := botTmpl.Execute(pongo2.Context{"IsPlaceholder": true, "SelectedLLMs": selectedLLMs, "ConversationAreaId": position + 1})
|
||||||
out += messageOut
|
out += messageOut
|
||||||
|
|
||||||
|
// defer sendEvent("hide-placeholder", "")
|
||||||
|
|
||||||
return out
|
return out
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
30
main.go
30
main.go
@ -16,20 +16,20 @@ import (
|
|||||||
)
|
)
|
||||||
|
|
||||||
var (
|
var (
|
||||||
userTmpl *pongo2.Template
|
userTmpl *pongo2.Template
|
||||||
botTmpl *pongo2.Template
|
botTmpl *pongo2.Template
|
||||||
selectBtnTmpl *pongo2.Template
|
selectBtnTmpl *pongo2.Template
|
||||||
modelPopoverTmpl *pongo2.Template
|
modelPopoverTmpl *pongo2.Template
|
||||||
usagePopoverTmpl *pongo2.Template
|
usagePopoverTmpl *pongo2.Template
|
||||||
settingPopoverTmpl *pongo2.Template
|
settingPopoverTmpl *pongo2.Template
|
||||||
messageEditTmpl *pongo2.Template
|
messageEditTmpl *pongo2.Template
|
||||||
conversationPopoverTmpl *pongo2.Template
|
conversationPopoverTmpl *pongo2.Template
|
||||||
welcomeChatTmpl *pongo2.Template
|
welcomeChatTmpl *pongo2.Template
|
||||||
chatInputTmpl *pongo2.Template
|
chatInputTmpl *pongo2.Template
|
||||||
explainLLMconvChatTmpl *pongo2.Template
|
explainLLMconvChatTmpl *pongo2.Template
|
||||||
messageUserPlaceholderTmpl *pongo2.Template
|
messagesPlaceholderTmpl *pongo2.Template
|
||||||
clients = make(map[chan SSE]bool)
|
clients = make(map[chan SSE]bool)
|
||||||
mu sync.Mutex
|
mu sync.Mutex
|
||||||
)
|
)
|
||||||
|
|
||||||
// SSE event structure
|
// SSE event structure
|
||||||
@ -63,7 +63,7 @@ func main() {
|
|||||||
welcomeChatTmpl = pongo2.Must(pongo2.FromFile("views/partials/welcome-chat.html"))
|
welcomeChatTmpl = pongo2.Must(pongo2.FromFile("views/partials/welcome-chat.html"))
|
||||||
chatInputTmpl = pongo2.Must(pongo2.FromFile("views/partials/chat-input.html"))
|
chatInputTmpl = pongo2.Must(pongo2.FromFile("views/partials/chat-input.html"))
|
||||||
explainLLMconvChatTmpl = pongo2.Must(pongo2.FromFile("views/partials/explain-llm-conv-chat.html"))
|
explainLLMconvChatTmpl = pongo2.Must(pongo2.FromFile("views/partials/explain-llm-conv-chat.html"))
|
||||||
messageUserPlaceholderTmpl = pongo2.Must(pongo2.FromFile("views/partials/message-user-placeholder.html"))
|
messagesPlaceholderTmpl = pongo2.Must(pongo2.FromFile("views/partials/messages-placeholder.html"))
|
||||||
|
|
||||||
// Import HTML using django engine/template
|
// Import HTML using django engine/template
|
||||||
engine := django.New("./views", ".html")
|
engine := django.New("./views", ".html")
|
||||||
|
|||||||
@ -27,7 +27,7 @@
|
|||||||
<button disabled type="submit" class="send-button button is-primary is-small" hx-post="/generatePlaceholder"
|
<button disabled type="submit" class="send-button button is-primary is-small" hx-post="/generatePlaceholder"
|
||||||
hx-swap="beforeend" hx-target="#chat-messages" id="chat-input-send-btn" class="chat-input"
|
hx-swap="beforeend" hx-target="#chat-messages" id="chat-input-send-btn" class="chat-input"
|
||||||
hx-include="[name='message']" hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}"
|
hx-include="[name='message']" hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}"
|
||||||
onclick="clearTextArea()">
|
onclick="onClickSendButton()">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<i class="fa-solid fa-chevron-right"></i>
|
<i class="fa-solid fa-chevron-right"></i>
|
||||||
</span>
|
</span>
|
||||||
@ -94,11 +94,11 @@
|
|||||||
document.getElementById('chat-input-send-btn').disabled = textarea.value.trim().length === 0 || document.getElementsByClassName('selected icon-llm').length === 0 || generateMultipleMessages !== null;
|
document.getElementById('chat-input-send-btn').disabled = textarea.value.trim().length === 0 || document.getElementsByClassName('selected icon-llm').length === 0 || generateMultipleMessages !== null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearTextArea() {
|
function onClickSendButton() {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
textarea.value = '';
|
textarea.value = '';
|
||||||
toggleSendButton();
|
toggleSendButton();
|
||||||
}, 200);
|
}, 20);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateIcon(icon, ConversationAreaId) {
|
function updateIcon(icon, ConversationAreaId) {
|
||||||
|
|||||||
@ -81,6 +81,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="message-body">
|
<div class="message-body">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
<br>
|
||||||
<img src="/puff.svg" />
|
<img src="/puff.svg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,30 +0,0 @@
|
|||||||
<div class="message-user mt-3 is-hidden" id="msg-placeholder">
|
|
||||||
<div class="columns is-mobile">
|
|
||||||
<div class="column is-narrow" id="icon-column">
|
|
||||||
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
|
|
||||||
<img src="icons/bouvai2.png" alt="User Image">
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column" id="content-column" style="width: 100px;">
|
|
||||||
<div class="is-flex is-align-items-start">
|
|
||||||
<div class="message-content" style="width: 100%; overflow-y: hidden;">
|
|
||||||
<div class="message-header">
|
|
||||||
<p>
|
|
||||||
You
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="message-body">
|
|
||||||
<div class="content" style="overflow-x: auto; width: 100%;" id="content-placeholder">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// When receiving the SSE event
|
|
||||||
</script>
|
|
||||||
58
views/partials/messages-placeholder.html
Normal file
58
views/partials/messages-placeholder.html
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<div class="is-hidden" id="msg-placeholder">
|
||||||
|
<div class="message-user mt-3">
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-narrow" id="icon-column">
|
||||||
|
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
|
||||||
|
<img src="icons/bouvai2.png" alt="User Image">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column" id="content-column" style="width: 100px;">
|
||||||
|
<div class="is-flex is-align-items-start">
|
||||||
|
<div class="message-content" style="width: 100%; overflow-y: hidden;">
|
||||||
|
<div class="message-header">
|
||||||
|
<p>
|
||||||
|
You
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="message-body">
|
||||||
|
<div class="content" style="overflow-x: auto; width: 100%;" id="content-placeholder">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style='height: 10px;'></div>
|
||||||
|
|
||||||
|
<div class="message-user mt-3">
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-narrow" id="icon-column">
|
||||||
|
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
|
||||||
|
<img src="icons/bouvai2.png" alt="User Image">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column" id="content-column" style="width: 100px;">
|
||||||
|
<div class="is-flex is-align-items-start">
|
||||||
|
<div class="message-content" style="width: 100%; overflow-y: hidden;">
|
||||||
|
<div class="message-header">
|
||||||
|
<p>
|
||||||
|
Waiting...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="message-body">
|
||||||
|
<br>
|
||||||
|
<div class="content">
|
||||||
|
<img src="/puff.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
x
Reference in New Issue
Block a user