Skip to content

Commit

Permalink
added message pinning
Browse files Browse the repository at this point in the history
  • Loading branch information
YourUsername committed Jun 10, 2024
1 parent cd8ba3a commit e1b215c
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 24 deletions.
83 changes: 69 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,16 +66,11 @@
if (!!data.reader) addMessageStream(data, response)
}

function alterTextArea(textArea) {
textArea.style.height = 'auto';
textArea.style.height = (textArea.scrollHeight + 2) + 'px';
}
function updateMessage(data, message, updated) {
const index = data.messages.indexOf(message)

function checkSubmit(e, data) {
if (e.key == 'Enter' && !e.shiftKey && !data.busy) {
e.preventDefault()
sendMessage(data, { role: 'user', content: data.content })
}
data.messages[index] = { ...message, ...updated }
Messages.update(message.id, updated)
}

function deleteMessage(data, message, drop = false) {
Expand All @@ -87,6 +82,20 @@
Messages.remove(message.id, drop)
}

//

function alterTextArea(textArea) {
textArea.style.height = 'auto';
textArea.style.height = (textArea.scrollHeight + 2) + 'px';
}

function checkSubmit(e, data) {
if (e.key == 'Enter' && !e.shiftKey && !data.busy) {
e.preventDefault()
sendMessage(data, { role: 'user', content: data.content })
}
}

// Profile
function loadProfile(data) {
const profile = Profile.get()
Expand Down Expand Up @@ -127,19 +136,25 @@
Alpine.store('modalConnection', false)
Alpine.store('modalCharacter', false)
Alpine.store('modalTune', false)
Alpine.store('modalNotes', false)
})

</script>
</head>

<body x-data="{messages: []}">
<body x-data="{messages: []}" x-init="loadMessages($data)">
<header class="container-fluid">
<nav>
<ul>
<li> <strong>This is not tavern</strong> </li>
</ul>

<ul>
<li>
<button class="button-icon" x-on:click="$store.modalNotes=true">
<span class="material-symbols-outlined"> note_stack </span>
</button>
</li>
<li>
<button class="button-icon" x-on:click="$store.modalConnection=true">
<span class="material-symbols-outlined"> link </span>
Expand All @@ -160,17 +175,25 @@
</nav>
</header>

<main x-ref="messages" x-init="loadMessages($data)" class="container-fluid">
<main x-ref="messages" class="container-fluid">

<template x-for="message in messages">
<article>
<header>
<strong x-text="message.role">Assistant</strong>

<span x-show="message.pinned === true"
style="font-size: 18; flex-grow: 1; user-select: none; padding-left: 4px; color: var(--pico-muted-color)"
class="material-symbols-outlined">
keep
</span>

<details class="dropdown dropdown-icon">
<summary role="button" class="button-icon small"> <span
class="material-symbols-outlined">more_vert</span> </summary>
<ul style="right: -16px;">
<li> <a x-on:click="updateMessage($data, message, {pinned: !message.pinned} )"
x-text="message.pinned ? 'Unpin' : 'Pin' ">Pin</a> </li>
<li> <a x-on:click="deleteMessage($data, message)">Delete</a> </li>
<li> <a x-on:click="deleteMessage($data, message, true)">Delete all</a> </li>
</ul>
Expand Down Expand Up @@ -281,20 +304,52 @@
<main>
<form x-data="{max_messages: '', max_tokens: ''}" x-init="loadProfile($data)">
<label>Messages limit </label>
<input x-model="max_messages" type="range" min="1" max="100" x-on:blur="updateProfile($data)"/>
<input x-model="max_messages" type="range" min="1" max="100" x-on:blur="updateProfile($data)" />
<small>Max messages to send: <span x-text="max_messages">12</span> </small>

<label>Max response</label>
<input x-model="max_tokens" type="range" min="1" max="2048" x-on:blur="updateProfile($data)"/>
<input x-model="max_tokens" type="range" min="1" max="2048" x-on:blur="updateProfile($data)" />
<small>Max response size: <span x-text="max_tokens">12</span> </small>

<hr>
<input x-on:click="$store.modalTune=false; updateProfile($data)" type="button" value="Apply"> <!-- Blur for range not work on mobile -->
<input x-on:click="$store.modalTune=false; updateProfile($data)" type="button" value="Apply">
<!-- Blur for range not work on mobile -->
</form>
</main>
</article>
</dialog>

<dialog x-bind:open="$store.modalNotes">
<article>
<header>
<strong>Notes</strong>

<button x-on:click="$store.modalNotes=false" class="button-icon small">
<span class="material-symbols-outlined"> close </span>
</button>
</header>
<main>

<template x-for="message in messages.filter(msg => !!msg.pinned) ">
<article style="width: auto;">
<header>
<strong x-text="message.role">Assistant</strong>

<button x-on:click="updateMessage($data, message, {pinned: false} )" class="button-icon small cancel">
<span class="material-symbols-outlined"> delete </span>
</button>
</header>

<main x-bind:aria-busy="!message.content" x-html="marked.parse(message.content)">lol</main>
</article>
</template>

<hr>

</main>
</article>
</dialog>

</body>

</html>
46 changes: 36 additions & 10 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,38 @@ class Messages {
return lastId
}

static list() {
static list(notes=false) {
const messagesString = localStorage.getItem('messages')

if (messagesString === null) return []
return JSON.parse(messagesString)
let messages = JSON.parse(messagesString)

if(notes) messages = messages.filter(msg => !!msg.pinned)
return messages
}

static update(messages) {
static updateAll(messages) {
localStorage.setItem('messages', JSON.stringify(messages))
}

static add({ content, role }) {
const message = { id: Messages.#getNextId(), content, role }
static add(message) {
const added = { id: Messages.#getNextId(), pinned: false, ...message }

let messages = Messages.list()
messages.push(message)
Messages.update(messages)
messages.push(added)
Messages.updateAll(messages)

return message
return added
}

static update(id, message) {
let messages = Messages.list()

const index = messages.findIndex(item => item.id == id)
if (index == -1) return

messages[index] = { ...messages[index], ...message }
Messages.updateAll(messages)
}

static remove(id, drop=false) {
Expand All @@ -37,7 +50,7 @@ class Messages {

if(drop) messages.splice(index)
else messages.splice(index, 1)
Messages.update(messages)
Messages.updateAll(messages)
}
}

Expand Down Expand Up @@ -84,13 +97,24 @@ class Completions {
static async * send() {
const profile = Profile.get()

// Messages
let messages = Messages.list()

messages.unshift({ role: 'system', content: '### Chat history' })

if (!!profile.main) messages.unshift({ role: 'system', content: profile.main })
if (!!profile.jailbreak) messages.push({ role: 'system', content: profile.jailbreak })

messages = messages.slice(-profile.max_messages)

console.log(messages)
// Notes
let notes = Messages.list(true)

if (notes.length > 0) {
notes.forEach(msg => msg.role = 'system')
messages.unshift(...notes)
messages.unshift({ role: 'system', content: '### Notes (pinned messages containing important information)' })
}

const request = {
messages,
Expand All @@ -99,6 +123,8 @@ class Completions {
stream: true
}

console.log(request)

const url = profile.base_url + 'chat/completions'
const headers = {
"Authorization": `Bearer ${profile.api_key}`,
Expand Down
6 changes: 6 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,4 +95,10 @@ article header{

article header details {
margin-bottom: 0;
}


dialog article main article {
border: var(--pico-border-width) solid var(--pico-muted-border-color);
/* box-shadow: var(--pico-card-box-shadow) */
}

0 comments on commit e1b215c

Please sign in to comment.