mirror of
https://github.com/andy-stack/vaultkeeper-ai.git
synced 2026-07-22 06:42:03 +00:00
feat: add help modal button to top bar and update license to MIT
- Add HelpModal integration to TopBar with circle-help icon - Update LICENSE from 0BSD to MIT License - Refactor modal constructors to use dependency injection - Format code style (quotes, indentation) in TopBar and ConversationHistoryModal
This commit is contained in:
Andrew Beal
parent
4dcce63bce
commit
4c2630b7f5
9 changed files with 326 additions and 260 deletions
|
|
@ -1,14 +1,15 @@
|
|||
<script lang="ts">
|
||||
import { Resolve } from '../Services/DependencyService';
|
||||
import { Services } from '../Services/Services';
|
||||
import type AIAgentPlugin from '../main';
|
||||
import { setIcon, type WorkspaceLeaf } from 'obsidian';
|
||||
import { ConversationFileSystemService } from '../Services/ConversationFileSystemService';
|
||||
import { conversationStore } from '../Stores/ConversationStore';
|
||||
import type { ConversationHistoryModal } from 'Modals/ConversationHistoryModal';
|
||||
import { openPluginSettings } from 'Helpers/Helpers';
|
||||
import type { ChatService } from 'Services/ChatService';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { Resolve } from "../Services/DependencyService";
|
||||
import { Services } from "../Services/Services";
|
||||
import type AIAgentPlugin from "../main";
|
||||
import { setIcon, type WorkspaceLeaf } from "obsidian";
|
||||
import { ConversationFileSystemService } from "../Services/ConversationFileSystemService";
|
||||
import { conversationStore } from "../Stores/ConversationStore";
|
||||
import type { ConversationHistoryModal } from "Modals/ConversationHistoryModal";
|
||||
import { openPluginSettings } from "Helpers/Helpers";
|
||||
import type { ChatService } from "Services/ChatService";
|
||||
import { fade } from "svelte/transition";
|
||||
import type { HelpModal } from "Modals/HelpModal";
|
||||
|
||||
export let leaf: WorkspaceLeaf;
|
||||
export let onNewConversation: (() => void) | undefined = undefined;
|
||||
|
|
@ -49,6 +50,11 @@
|
|||
openPluginSettings(plugin);
|
||||
}
|
||||
|
||||
function openHelpMenu() {
|
||||
const modal = Resolve<HelpModal>(Services.HelpModal);
|
||||
modal.open();
|
||||
}
|
||||
|
||||
function closePlugin() {
|
||||
leaf.detach();
|
||||
}
|
||||
|
|
@ -57,22 +63,26 @@
|
|||
let deleteConversationButton: HTMLButtonElement;
|
||||
let conversationHistoryButton: HTMLButtonElement;
|
||||
let settingsButton: HTMLButtonElement;
|
||||
let helpMenuButton: HTMLButtonElement;
|
||||
let closeButton: HTMLButtonElement;
|
||||
|
||||
$: if (newConversationButton) {
|
||||
setIcon(newConversationButton, 'plus');
|
||||
setIcon(newConversationButton, "plus");
|
||||
}
|
||||
$: if (deleteConversationButton) {
|
||||
setIcon(deleteConversationButton, 'trash-2');
|
||||
setIcon(deleteConversationButton, "trash-2");
|
||||
}
|
||||
$: if (conversationHistoryButton) {
|
||||
setIcon(conversationHistoryButton, 'messages-square');
|
||||
setIcon(conversationHistoryButton, "messages-square");
|
||||
}
|
||||
$: if (settingsButton) {
|
||||
setIcon(settingsButton, 'settings');
|
||||
setIcon(settingsButton, "settings");
|
||||
}
|
||||
$: if (helpMenuButton) {
|
||||
setIcon(helpMenuButton, "circle-help");
|
||||
}
|
||||
$: if (closeButton) {
|
||||
setIcon(closeButton, 'circle-x');
|
||||
setIcon(closeButton, "circle-x");
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -107,6 +117,13 @@
|
|||
on:click={openSettings}
|
||||
aria-label="AI Agent Settings"
|
||||
></button>
|
||||
<button
|
||||
bind:this={helpMenuButton}
|
||||
id="help-menu-button"
|
||||
class="top-bar-button clickable-icon"
|
||||
on:click={openHelpMenu}
|
||||
aria-label="Help"
|
||||
></button>
|
||||
{#if conversationTitle !== ""}
|
||||
<div id="conversation-divider-2" class="top-bar-divider" out:fade></div>
|
||||
<div id="conversation-title" class="typing-in" out:fade>{conversationTitle}</div>
|
||||
|
|
@ -137,7 +154,7 @@
|
|||
grid-column: 2;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: var(--size-4-2) auto auto auto auto auto auto 1fr 0.1fr auto var(--size-4-2);
|
||||
grid-template-columns: var(--size-4-2) auto auto auto auto auto auto auto 1fr 0.1fr auto var(--size-4-2);
|
||||
background-color: var(--background-modifier-hover);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
|
@ -182,14 +199,19 @@
|
|||
grid-column: 6;
|
||||
}
|
||||
|
||||
#conversation-divider-2 {
|
||||
#help-menu-button {
|
||||
grid-row: 1;
|
||||
grid-column: 7;
|
||||
}
|
||||
|
||||
#conversation-title {
|
||||
#conversation-divider-2 {
|
||||
grid-row: 1;
|
||||
grid-column: 8;
|
||||
}
|
||||
|
||||
#conversation-title {
|
||||
grid-row: 1;
|
||||
grid-column: 9;
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
|
|
@ -201,6 +223,6 @@
|
|||
|
||||
#close-button {
|
||||
grid-row: 1;
|
||||
grid-column: 10;
|
||||
grid-column: 11;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
22
LICENSE
22
LICENSE
|
|
@ -1,5 +1,21 @@
|
|||
Copyright (C) 2020-2025 by Dynalist Inc.
|
||||
MIT License
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted.
|
||||
Copyright (c) 2025 Andy-Stack
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -10,6 +10,7 @@ import { dateToString } from 'Helpers/Helpers';
|
|||
import { conversationStore } from 'Stores/ConversationStore';
|
||||
import { Selector } from 'Enums/Selector';
|
||||
import type { ChatService } from 'Services/ChatService';
|
||||
import type AIAgentPlugin from 'main';
|
||||
|
||||
interface IListItem {
|
||||
id: string;
|
||||
|
|
@ -31,8 +32,9 @@ export class ConversationHistoryModal extends Modal {
|
|||
private conversations: Conversation[];
|
||||
public onModalClose?: () => void;
|
||||
|
||||
constructor(app: App) {
|
||||
super(app);
|
||||
constructor() {
|
||||
const plugin = Resolve<AIAgentPlugin>(Services.AIAgentPlugin);
|
||||
super(plugin.app);
|
||||
}
|
||||
|
||||
override async open() {
|
||||
|
|
|
|||
|
|
@ -2,260 +2,260 @@
|
|||
import { setIcon } from "obsidian";
|
||||
import { fade } from "svelte/transition";
|
||||
|
||||
export let items: Array<{id: string, date: string, updated: Date, title: string, selected: boolean}>;
|
||||
export let onClose: () => void;
|
||||
export let onDelete: (itemIds: string[]) => void;
|
||||
export let onSelect: (itemId: string) => void;
|
||||
|
||||
let deleteButton: HTMLButtonElement;
|
||||
let closeButton: HTMLButtonElement;
|
||||
export let items: Array<{id: string, date: string, updated: Date, title: string, selected: boolean}>;
|
||||
export let onClose: () => void;
|
||||
export let onDelete: (itemIds: string[]) => void;
|
||||
export let onSelect: (itemId: string) => void;
|
||||
|
||||
$: if (deleteButton) {
|
||||
setIcon(deleteButton, 'trash-2');
|
||||
let deleteButton: HTMLButtonElement;
|
||||
let closeButton: HTMLButtonElement;
|
||||
|
||||
$: if (deleteButton) {
|
||||
setIcon(deleteButton, 'trash-2');
|
||||
}
|
||||
$: if (closeButton) {
|
||||
setIcon(closeButton, 'circle-x');
|
||||
}
|
||||
|
||||
let selectedItems = new Set<string>();
|
||||
let searchQuery = "";
|
||||
|
||||
$: filteredItems = items.filter(item =>
|
||||
item.title.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
).sort((a, b) => b.updated.getTime() - a.updated.getTime());
|
||||
|
||||
function toggleSelection(itemId: string) {
|
||||
if (selectedItems.has(itemId)) {
|
||||
selectedItems.delete(itemId);
|
||||
} else {
|
||||
selectedItems.add(itemId);
|
||||
}
|
||||
$: if (closeButton) {
|
||||
setIcon(closeButton, 'circle-x');
|
||||
selectedItems = selectedItems;
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
if (selectedItems.size === 0) {
|
||||
return;
|
||||
}
|
||||
onDelete(Array.from(selectedItems));
|
||||
items = items.filter((item) => !selectedItems.has(item.id))
|
||||
selectedItems.clear();
|
||||
selectedItems = selectedItems;
|
||||
}
|
||||
|
||||
let selectedItems = new Set<string>();
|
||||
let searchQuery = "";
|
||||
function handleConversationClick(itemId: string, event: UIEvent) {
|
||||
onSelect(itemId);
|
||||
}
|
||||
</script>
|
||||
|
||||
$: filteredItems = items.filter(item =>
|
||||
item.title.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
).sort((a, b) => b.updated.getTime() - a.updated.getTime());
|
||||
|
||||
function toggleSelection(itemId: string) {
|
||||
if (selectedItems.has(itemId)) {
|
||||
selectedItems.delete(itemId);
|
||||
} else {
|
||||
selectedItems.add(itemId);
|
||||
}
|
||||
selectedItems = selectedItems;
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
if (selectedItems.size === 0) {
|
||||
return;
|
||||
}
|
||||
onDelete(Array.from(selectedItems));
|
||||
items = items.filter((item) => !selectedItems.has(item.id))
|
||||
selectedItems.clear();
|
||||
selectedItems = selectedItems;
|
||||
}
|
||||
|
||||
function handleConversationClick(itemId: string, event: UIEvent) {
|
||||
onSelect(itemId);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="conversation-history-modal-container">
|
||||
<div class="conversation-history-modal-top-bar">
|
||||
<div class="conversation-history-modal-top-bar-content">
|
||||
<button
|
||||
bind:this={deleteButton}
|
||||
id="delete-button"
|
||||
class="top-bar-button clickable-icon"
|
||||
class:hidden={selectedItems.size === 0}
|
||||
on:click={handleDelete}
|
||||
aria-label="Delete Selected Conversations"
|
||||
></button>
|
||||
<input
|
||||
type="text"
|
||||
id="search-input"
|
||||
class="top-bar-button conversation-search-input"
|
||||
placeholder="Search conversations..."
|
||||
disabled={items.length === 0}
|
||||
bind:value={searchQuery}
|
||||
aria-label="Search Conversations"
|
||||
/>
|
||||
<button
|
||||
bind:this={closeButton}
|
||||
id="close-button"
|
||||
class="top-bar-button clickable-icon"
|
||||
on:click={onClose}
|
||||
aria-label="Close Conversation History"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation-history-modal-content">
|
||||
{#if filteredItems.length === 0}
|
||||
<p class="history-empty-state" in:fade={{ duration: 200 }}>
|
||||
No conversations match your search.
|
||||
</p>
|
||||
{:else}
|
||||
{#each filteredItems as item (item.id)}
|
||||
<div class="history-list-modal-content" in:fade={{ duration: 200 }} out:fade={{ duration: 200 }}>
|
||||
<div
|
||||
class="history-list-modal-clickable"
|
||||
on:click={(e) => handleConversationClick(item.id, e)}
|
||||
on:keydown={(e) => e.key === 'Enter' && handleConversationClick(item.id, e)}
|
||||
role="button"
|
||||
tabindex="0">
|
||||
<span class="history-list-modal-date">{item.date}</span>
|
||||
<span class="history-list-modal-separator">|</span>
|
||||
<span class="history-list-modal-title">{item.title}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="history-list-modal-checkbox"
|
||||
checked={selectedItems.has(item.id)}
|
||||
on:change={() => toggleSelection(item.id)}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
<div class="conversation-history-modal-container">
|
||||
<div class="conversation-history-modal-top-bar">
|
||||
<div class="conversation-history-modal-top-bar-content">
|
||||
<button
|
||||
bind:this={deleteButton}
|
||||
id="delete-button"
|
||||
class="top-bar-button clickable-icon"
|
||||
class:hidden={selectedItems.size === 0}
|
||||
on:click={handleDelete}
|
||||
aria-label="Delete Selected Conversations"
|
||||
></button>
|
||||
<input
|
||||
type="text"
|
||||
id="search-input"
|
||||
class="top-bar-button conversation-search-input"
|
||||
placeholder="Search conversations..."
|
||||
disabled={items.length === 0}
|
||||
bind:value={searchQuery}
|
||||
aria-label="Search Conversations"
|
||||
/>
|
||||
<button
|
||||
bind:this={closeButton}
|
||||
id="close-button"
|
||||
class="top-bar-button clickable-icon"
|
||||
on:click={onClose}
|
||||
aria-label="Close Conversation History"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.conversation-history-modal-container {
|
||||
display: grid;
|
||||
grid-template-rows: var(--size-4-3) auto var(--size-4-3) 1fr var(--size-4-3);
|
||||
grid-template-columns: var(--size-4-3) 1fr var(--size-4-3);
|
||||
max-height: 60vh;
|
||||
}
|
||||
<div class="conversation-history-modal-content">
|
||||
{#if filteredItems.length === 0}
|
||||
<p class="history-empty-state" in:fade={{ duration: 200 }}>
|
||||
No conversations match your search.
|
||||
</p>
|
||||
{:else}
|
||||
{#each filteredItems as item (item.id)}
|
||||
<div class="history-list-modal-content" in:fade={{ duration: 200 }} out:fade={{ duration: 200 }}>
|
||||
<div
|
||||
class="history-list-modal-clickable"
|
||||
on:click={(e) => handleConversationClick(item.id, e)}
|
||||
on:keydown={(e) => e.key === 'Enter' && handleConversationClick(item.id, e)}
|
||||
role="button"
|
||||
tabindex="0">
|
||||
<span class="history-list-modal-date">{item.date}</span>
|
||||
<span class="history-list-modal-separator">|</span>
|
||||
<span class="history-list-modal-title">{item.title}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="history-list-modal-checkbox"
|
||||
checked={selectedItems.has(item.id)}
|
||||
on:change={() => toggleSelection(item.id)}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
.conversation-history-modal-top-bar {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
height: var(--size-4-16);
|
||||
display: grid;
|
||||
grid-template-rows: var(--size-4-3) 1fr var(--size-4-3);
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
<style>
|
||||
.conversation-history-modal-container {
|
||||
display: grid;
|
||||
grid-template-rows: var(--size-4-3) auto var(--size-4-3) 1fr var(--size-4-3);
|
||||
grid-template-columns: var(--size-4-3) 1fr var(--size-4-3);
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.conversation-history-modal-top-bar-content {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: var(--size-4-2) auto 1fr var(--size-4-2) auto var(--size-4-2);
|
||||
background-color: var(--background-modifier-hover);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
.conversation-history-modal-top-bar {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
height: var(--size-4-16);
|
||||
display: grid;
|
||||
grid-template-rows: var(--size-4-3) 1fr var(--size-4-3);
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.conversation-history-modal-content {
|
||||
grid-row: 4;
|
||||
grid-column: 2;
|
||||
overflow: scroll;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.conversation-history-modal-top-bar-content {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: var(--size-4-2) auto 1fr var(--size-4-2) auto var(--size-4-2);
|
||||
background-color: var(--background-modifier-hover);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
||||
.conversation-history-modal-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.conversation-history-modal-content {
|
||||
grid-row: 4;
|
||||
grid-column: 2;
|
||||
overflow: scroll;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.history-empty-state {
|
||||
margin: 3vh 0px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.conversation-history-modal-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.history-list-modal-content {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr auto;
|
||||
margin-bottom: var(--size-4-2);
|
||||
}
|
||||
.history-empty-state {
|
||||
margin: 3vh 0px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.history-list-modal-clickable {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
cursor: pointer;
|
||||
padding: var(--size-2-2) 0;
|
||||
border-radius: var(--radius-s);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.history-list-modal-content {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr auto;
|
||||
margin-bottom: var(--size-4-2);
|
||||
}
|
||||
|
||||
.history-list-modal-clickable:hover {
|
||||
background-color: var(--background-secondary);
|
||||
}
|
||||
.history-list-modal-clickable {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
cursor: pointer;
|
||||
padding: var(--size-2-2) 0;
|
||||
border-radius: var(--radius-s);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.history-list-modal-clickable:active {
|
||||
background-color: var(--background-secondary-alt);
|
||||
}
|
||||
.history-list-modal-clickable:hover {
|
||||
background-color: var(--background-secondary);
|
||||
}
|
||||
|
||||
.history-list-modal-date {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
margin-left: var(--size-4-3)
|
||||
}
|
||||
.history-list-modal-clickable:active {
|
||||
background-color: var(--background-secondary-alt);
|
||||
}
|
||||
|
||||
.history-list-modal-separator {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
color: var(--text-faint);
|
||||
margin: 0px var(--size-4-3);
|
||||
}
|
||||
.history-list-modal-date {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
margin-left: var(--size-4-3)
|
||||
}
|
||||
|
||||
.history-list-modal-title {
|
||||
grid-row: 1;
|
||||
grid-column: 3;
|
||||
display: inline-block;
|
||||
max-width: 80%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.history-list-modal-separator {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
color: var(--text-faint);
|
||||
margin: 0px var(--size-4-3);
|
||||
}
|
||||
|
||||
.history-list-modal-checkbox {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
margin: 0px var(--size-4-3) 0px var(--size-2-3);
|
||||
align-self: center;
|
||||
}
|
||||
.history-list-modal-title {
|
||||
grid-row: 1;
|
||||
grid-column: 3;
|
||||
display: inline-block;
|
||||
max-width: 80%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#delete-button {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
margin-right: var(--size-4-2);
|
||||
transition: width 300ms ease-out, opacity 300ms ease-out, padding 300ms ease-out, margin 300ms ease-out;
|
||||
}
|
||||
.history-list-modal-checkbox {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
margin: 0px var(--size-4-3) 0px var(--size-2-3);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#delete-button.hidden {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
#delete-button {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
margin-right: var(--size-4-2);
|
||||
transition: width 300ms ease-out, opacity 300ms ease-out, padding 300ms ease-out, margin 300ms ease-out;
|
||||
}
|
||||
|
||||
#close-button {
|
||||
grid-row: 1;
|
||||
grid-column: 5;
|
||||
}
|
||||
#delete-button.hidden {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
grid-row: 1;
|
||||
grid-column: 3;
|
||||
}
|
||||
#close-button {
|
||||
grid-row: 1;
|
||||
grid-column: 5;
|
||||
}
|
||||
|
||||
.conversation-search-input {
|
||||
max-width: 200px;
|
||||
background-color: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: var(--radius-s);
|
||||
padding: var(--size-2-1) var(--size-2-3);
|
||||
color: var(--text-normal);
|
||||
font-size: var(--font-ui-small);
|
||||
outline: none;
|
||||
transition: border-color 0.3s ease-out;
|
||||
transition: max-width 0.3s ease-out;
|
||||
}
|
||||
#search-input {
|
||||
grid-row: 1;
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
.conversation-search-input:focus {
|
||||
border-color: var(--color-accent);
|
||||
max-width: 100%;
|
||||
transition: border-color 0.3s ease-out;
|
||||
transition: max-width 0.3s ease-out;
|
||||
}
|
||||
.conversation-search-input {
|
||||
max-width: 200px;
|
||||
background-color: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: var(--radius-s);
|
||||
padding: var(--size-2-1) var(--size-2-3);
|
||||
color: var(--text-normal);
|
||||
font-size: var(--font-ui-small);
|
||||
outline: none;
|
||||
transition: border-color 0.3s ease-out;
|
||||
transition: max-width 0.3s ease-out;
|
||||
}
|
||||
|
||||
.conversation-search-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
.conversation-search-input:focus {
|
||||
border-color: var(--color-accent);
|
||||
max-width: 100%;
|
||||
transition: border-color 0.3s ease-out;
|
||||
transition: max-width 0.3s ease-out;
|
||||
}
|
||||
|
||||
.conversation-search-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
13
Modals/HelpModal.ts
Normal file
13
Modals/HelpModal.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import type AIAgentPlugin from "main";
|
||||
import { Modal } from "obsidian";
|
||||
import { Resolve } from "Services/DependencyService";
|
||||
import { Services } from "Services/Services";
|
||||
|
||||
export class HelpModal extends Modal {
|
||||
|
||||
public constructor() {
|
||||
const plugin = Resolve<AIAgentPlugin>(Services.AIAgentPlugin);
|
||||
super(plugin.app);
|
||||
}
|
||||
|
||||
}
|
||||
10
Modals/HelpModalSvelte.svelte
Normal file
10
Modals/HelpModalSvelte.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<span>Testing...</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -34,7 +34,8 @@ import { UserInputService } from "./UserInputService";
|
|||
import { SearchStateStore } from "Stores/SearchStateStore";
|
||||
import { InputService } from "./InputService";
|
||||
import { HTMLService } from "./HTMLService";
|
||||
import { SettingsService, type IAIAgentSettings } from "./SettingsService";
|
||||
import { SettingsService } from "./SettingsService";
|
||||
import { HelpModal } from "Modals/HelpModal";
|
||||
|
||||
export async function RegisterPlugin(plugin: AIAgentPlugin) {
|
||||
RegisterSingleton<AIAgentPlugin>(Services.AIAgentPlugin, plugin);
|
||||
|
|
@ -66,7 +67,7 @@ export function RegisterDependencies() {
|
|||
RegisterTransient<StreamingMarkdownService>(Services.StreamingMarkdownService, () => new StreamingMarkdownService());
|
||||
RegisterTransient<InputService>(Services.InputService, () => new InputService());
|
||||
|
||||
RegisterModals(plugin.app);
|
||||
RegisterModals();
|
||||
RegisterAiProvider();
|
||||
}
|
||||
|
||||
|
|
@ -94,6 +95,7 @@ export function RegisterAiProvider() {
|
|||
Resolve<ConversationNamingService>(Services.ConversationNamingService).resolveNamingProvider();
|
||||
}
|
||||
|
||||
function RegisterModals(app: App) {
|
||||
RegisterTransient<ConversationHistoryModal>(Services.ConversationHistoryModal, () => new ConversationHistoryModal(app));
|
||||
function RegisterModals() {
|
||||
RegisterTransient<ConversationHistoryModal>(Services.ConversationHistoryModal, () => new ConversationHistoryModal());
|
||||
RegisterTransient<HelpModal>(Services.HelpModal, () => new HelpModal())
|
||||
}
|
||||
|
|
@ -31,4 +31,5 @@ export class Services {
|
|||
|
||||
// modals
|
||||
static ConversationHistoryModal = Symbol("ConversationHistoryModal");
|
||||
static HelpModal = Symbol("HelpModal");
|
||||
}
|
||||
4
main.ts
4
main.ts
|
|
@ -41,7 +41,7 @@ export default class AIAgentPlugin extends Plugin {
|
|||
this.addSettingTab(new AIAgentSettingTab());
|
||||
|
||||
this.app.workspace.onLayoutReady(async () => {
|
||||
await this.setup(this);
|
||||
await this.setup();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ export default class AIAgentPlugin extends Plugin {
|
|||
}
|
||||
|
||||
// create example user instruction (on first launch only)
|
||||
private async setup(plugin: AIAgentPlugin) {
|
||||
private async setup() {
|
||||
const settingsService = Resolve<SettingsService>(Services.SettingsService);
|
||||
if (!settingsService.settings.firstTimeStart) {
|
||||
return;
|
||||
|
|
|
|||
Loading…
Reference in a new issue