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

Added stripe payment (pricing table)

Browse Source
This commit is contained in:
Adrien Bouvais 2024-05-22 11:05:05 +02:00
parent 3dcf557e49
commit 0cb115e560
7 changed files with 154 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
Chat.go
View File

@ -214,6 +214,44 @@ func generateWelcomeChatHTML() string {
return htmlString
}
func generatePricingTableChatHTML() string {
stripeTable := `
<stripe-pricing-table pricing-table-id="prctbl_1PJAxDP2nW0okNQyY0Q3mbg4"
publishable-key="pk_live_51OxXuWP2nW0okNQyme1qdwbL535jbMmM1uIUi6U5zcvEUUwKraktmpCzudXNdPSTxlHpw2FbCtxpwbyFFcasQ7aj000tJJGpWW">
</stripe-pricing-table>`
closeBtn := `
<div class="is-flex is-justify-content-flex-end">
<a class="button is-primary is-small" hx-get="/loadChat" hx-target="#chat-container" hx-swap="outerHTML"
hx-trigger="click">
Close
</a>
</div>`
htmlString := "<div class='columns is-centered' id='chat-container'><div class='column is-12-mobile is-8-tablet is-6-desktop' id='chat-messages'>"
NextMessages := []TemplateMessage{}
nextMsg := TemplateMessage{
Icon: "icons/bouvai2.png", // Assuming Icon is a field you want to include from Message
Content: "<br>" + stripeTable + closeBtn,
Hidden: false, // Assuming Hidden is a field you want to include from Message
Id: "0",
Name: "JADE",
}
NextMessages = append(NextMessages, nextMsg)
botOut, err := botTmpl.Execute(pongo2.Context{"Messages": NextMessages, "ConversationAreaId": 0, "NotClickable": true, "notFlex": true})
if err != nil {
panic(err)
}
htmlString += botOut
htmlString += "<div style='height: 10px;'></div>"
htmlString += "</div></div>"
// Render the HTML template with the messages
return htmlString
}
func generateEnterKeyChatHTML() string {
welcomeMessage := `To start using JADE, please enter at least one key in the settings.`

7
Stripe.go Normal file
View File

@ -0,0 +1,7 @@
package main
import "github.com/gofiber/fiber/v2"
func PricingTableHandler(c *fiber.Ctx) error {
return c.SendString(generatePricingTableChatHTML())
}

1
main.go
View File

@ -64,6 +64,7 @@ func main() {
// Main routes
app.Get("/", ChatPageHandler)
app.Get("/loadChat", LoadChatHandler)
app.Get("/pricingTable", PricingTableHandler)
// Chat routes
app.Post("/deleteMessage", DeleteMessageHandler)

2
views/layouts/main.html
View File

@ -14,6 +14,8 @@
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/sse.js"></script>
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
</head>
<body hx-ext="sse" sse-connect="/sse">

2
views/partials/message-bot.html
View File

@ -23,7 +23,7 @@
<div class="column" id="content-column">
{% if not IsPlaceholder %}
<div class="is-flex is-align-items-start">
<div class="{% if not notFlex%} is-flex {% endif %} is-align-items-start">
<div class="message-content" id="content-{{ ConversationAreaId }}">
{% for message in Messages %}
{% if not message.Hidden %}

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

@ -17,111 +17,122 @@
<span>{{ LLM.Name }}</span>
</div>
{% endfor %}
<div class="is-flex is-justify-content-flex-end">
<button class="button is-small is-primary is-outlined mr-2">
<span class="icon">
<i class="fa-solid fa-pen"></i>
</span>
</button>
<button class="button is-small is-success is-outlined">
<span class="icon">
<i class="fa-solid fa-plus"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script>
let lastSelectedIndex = null;
<script>
let lastSelectedIndex = null;
document.addEventListener('keydown', function (event) {
if (event.key === 'Shift') {
document.body.classList.add('shift-pressed');
}
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Shift') {
document.body.classList.add('shift-pressed');
}
});
document.addEventListener('keyup', function (event) {
// If Shift is press and id="chat-input-textarea" not focused
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea') {
document.body.classList.remove('shift-pressed');
lastSelectedIndex = null;
document.addEventListener('keyup', function (event) {
// If Shift is press and id="chat-input-textarea" not focused
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea') {
document.body.classList.remove('shift-pressed');
lastSelectedIndex = null;
// Remove all "shiftselected" classes
// Remove all "shiftselected" classes
const elements = Array.from(document.getElementsByClassName('icon-text'));
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('shiftselected');
}
window.getSelection().removeAllRanges();
}
});
function toggleSelection(element) {
const elements = Array.from(document.getElementsByClassName('icon-text'));
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('shiftselected');
}
const index = elements.indexOf(element);
window.getSelection().removeAllRanges();
}
});
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;
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');
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');
}
lastSelectedIndex = null;
toggleSendButton();
}
const elements2 = Array.from(document.getElementsByClassName('icon-text'));
for (let i = 0; i < elements2.length; i++) {
elements2[i].classList.remove('shiftselected');
document.addEventListener('click', function (event) {
if (event.shiftKey) {
event.preventDefault();
}
} 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');
});
function getSelectedModelsIDs() {
var selectedModelsIDs = [];
var selectedModels = document.getElementsByClassName('selected');
for (var i = 0; i < selectedModels.length; i++) {
selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
}
return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
}
toggleSendButton();
}
</script>
document.addEventListener('click', function (event) {
if (event.shiftKey) {
event.preventDefault();
<style>
.selected {
border: 2px solid #126d0f;
border-radius: 4px;
padding: 1px;
margin: 2px;
}
});
function getSelectedModelsIDs() {
var selectedModelsIDs = [];
var selectedModels = document.getElementsByClassName('selected');
for (var i = 0; i < selectedModels.length; i++) {
selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
.unselected {
border-radius: 4px;
padding: 3px;
}
return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
}
</script>
<style>
.selected {
border: 2px solid #126d0f;
border-radius: 4px;
padding: 1px;
margin: 2px;
}
.shiftselected {
background: #126d0f;
border-radius: 4px;
padding: 1px;
margin: 2px;
}
.unselected {
border-radius: 4px;
padding: 3px;
}
.shiftselected {
background: #126d0f;
border-radius: 4px;
padding: 1px;
margin: 2px;
}
.shift-pressed *::selection {
background: transparent;
}
</style>
.shift-pressed *::selection {
background: transparent;
}
</style>

7
views/partials/popover-settings.html
View File

@ -82,6 +82,13 @@
</form>
<p id="api-keys-status"></p>
</div>
<a class="button is-small mt-1" hx-get="/pricingTable" hx-target="#chat-container" hx-swap="outerHTML"
hx-trigger="click">
<span class="icon is-small">
<i class="fa-solid fa-heart"></i>
</span>
<span>Subscribe to JADE</span>
</a>
<a class="button is-small mt-1" href="/signout">
<span class="icon is-small">
<i class="fa-solid fa-right-from-bracket"></i>