mirror of
https://github.com/andy-stack/vaultkeeper-ai.git
synced 2026-07-22 06:42:03 +00:00
Add new conversation, delete conversation, and history buttons to TopBar with corresponding functionality
This commit is contained in:
parent
3a67400427
commit
ea54a1e6e3
1 changed files with 76 additions and 3 deletions
|
|
@ -8,6 +8,18 @@
|
|||
|
||||
const plugin = Resolve<AIAgentPlugin>(Services.AIAgentPlugin);
|
||||
|
||||
function startNewConversation() {
|
||||
|
||||
}
|
||||
|
||||
function deleteCurrentConversation() {
|
||||
|
||||
}
|
||||
|
||||
function openConversationHistory() {
|
||||
|
||||
}
|
||||
|
||||
function openSettings() {
|
||||
// @ts-ignore - accessing internal API
|
||||
plugin.app.setting.open();
|
||||
|
|
@ -19,9 +31,21 @@
|
|||
leaf.detach();
|
||||
}
|
||||
|
||||
let newConversationButton: HTMLButtonElement;
|
||||
let deleteConversationButton: HTMLButtonElement;
|
||||
let conversationHistoryButton: HTMLButtonElement;
|
||||
let settingsButton: HTMLButtonElement;
|
||||
let closeButton: HTMLButtonElement;
|
||||
|
||||
$: if (newConversationButton) {
|
||||
setIcon(newConversationButton, 'plus');
|
||||
}
|
||||
$: if (deleteConversationButton) {
|
||||
setIcon(deleteConversationButton, 'trash-2');
|
||||
}
|
||||
$: if (conversationHistoryButton) {
|
||||
setIcon(conversationHistoryButton, 'messages-square');
|
||||
}
|
||||
$: if (settingsButton) {
|
||||
setIcon(settingsButton, 'settings');
|
||||
}
|
||||
|
|
@ -32,6 +56,28 @@
|
|||
|
||||
<main class="top-bar">
|
||||
<div class="top-bar-content">
|
||||
<button
|
||||
bind:this={newConversationButton}
|
||||
id="new-conversation-button"
|
||||
class="top-bar-button clickable-icon"
|
||||
on:click={() => startNewConversation()}
|
||||
aria-label="New Conversation"
|
||||
></button>
|
||||
<button
|
||||
bind:this={deleteConversationButton}
|
||||
id="delete-conversation-button"
|
||||
class="top-bar-button clickable-icon"
|
||||
on:click={() => deleteCurrentConversation()}
|
||||
aria-label="Delete Conversation"
|
||||
></button>
|
||||
<button
|
||||
bind:this={conversationHistoryButton}
|
||||
id="conversation-history-button"
|
||||
class="top-bar-button clickable-icon"
|
||||
on:click={() => openConversationHistory()}
|
||||
aria-label="Conversation History"
|
||||
></button>
|
||||
<div id="conversation-divider" class="top-bar-divider"></div>
|
||||
<button
|
||||
bind:this={settingsButton}
|
||||
id="settings-button"
|
||||
|
|
@ -65,7 +111,7 @@
|
|||
grid-column: 2;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: var(--size-4-2) auto 1fr auto var(--size-4-2);
|
||||
grid-template-columns: var(--size-4-2) auto auto auto auto auto 1fr auto var(--size-4-2);
|
||||
background-color: var(--color-base-30);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
|
@ -80,13 +126,40 @@
|
|||
background-color: var(--color-base-35);
|
||||
}
|
||||
|
||||
#settings-button {
|
||||
.top-bar-divider {
|
||||
width: var(--divider-width);
|
||||
height: auto;
|
||||
background: var(--color-base-35);
|
||||
margin: var(--size-4-2) var(--size-4-3);
|
||||
}
|
||||
|
||||
#new-conversation-button {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#close-button {
|
||||
#delete-conversation-button {
|
||||
grid-row: 1;
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
#conversation-history-button {
|
||||
grid-row: 1;
|
||||
grid-column: 4;
|
||||
}
|
||||
|
||||
#conversation-divider {
|
||||
grid-row: 1;
|
||||
grid-column: 5;
|
||||
}
|
||||
|
||||
#settings-button {
|
||||
grid-row: 1;
|
||||
grid-column: 6;
|
||||
}
|
||||
|
||||
#close-button {
|
||||
grid-row: 1;
|
||||
grid-column: 8;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue