Add new conversation, delete conversation, and history buttons to TopBar with corresponding functionality

This commit is contained in:
Andrew Beal 2025-10-03 21:12:02 +01:00
parent 3a67400427
commit ea54a1e6e3

View file

@ -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>