diff --git a/Components/ChatWindow.svelte b/Components/ChatWindow.svelte index ee17658..28016c8 100644 --- a/Components/ChatWindow.svelte +++ b/Components/ChatWindow.svelte @@ -136,6 +136,14 @@ conversation = new Conversation(); conversationStore.clearResetFlag(); } + + $: if ($conversationStore.conversationToLoad) { + const { conversation: loadedConversation, filePath } = $conversationStore.conversationToLoad; + conversation = loadedConversation; + conversationService.setCurrentConversationPath(filePath); + conversationStore.clearLoadFlag(); + scrollToBottom(); + }
diff --git a/Modals/ConversationHistoryModal.ts b/Modals/ConversationHistoryModal.ts index b8c0831..f17ae5c 100644 --- a/Modals/ConversationHistoryModal.ts +++ b/Modals/ConversationHistoryModal.ts @@ -55,11 +55,23 @@ export class ConversationHistoryModal extends Modal { props: { items: this.items, onClose: () => this.close(), - onDelete: (itemIds: string[]) => this.handleDelete(itemIds) + onDelete: (itemIds: string[]) => this.handleDelete(itemIds), + onSelect: (itemId: string) => this.handleSelect(itemId) } }); } + handleSelect(itemId: string) { + const index = parseInt(itemId); + const selectedConversation = this.conversations[index]; + const filePath = this.items[index].filePath; + + if (selectedConversation) { + conversationStore.loadConversation(selectedConversation, filePath); + this.close(); + } + } + async handleDelete(itemIds: string[]) { const itemsToDelete = this.items.filter(item => itemIds.includes(item.id)); diff --git a/Modals/ConversationHistoryModalSvelte.svelte b/Modals/ConversationHistoryModalSvelte.svelte index fae8c0b..59e164d 100644 --- a/Modals/ConversationHistoryModalSvelte.svelte +++ b/Modals/ConversationHistoryModalSvelte.svelte @@ -5,6 +5,7 @@ export let items: Array<{id: string, date: string, 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; @@ -36,6 +37,10 @@ selectedItems.clear(); selectedItems = selectedItems; } + + function handleConversationClick(itemId: string, event: UIEvent) { + onSelect(itemId); + }
@@ -68,11 +73,18 @@ {:else} {#each items as item (item.id)}
- {item.date} - | - {item.title} - handleConversationClick(item.id, e)} + on:keydown={(e) => e.key === 'Enter' && handleConversationClick(item.id, e)} + role="button" + tabindex="0"> + {item.date} + | + {item.title} +
+ toggleSelection(item.id)} @@ -129,10 +141,30 @@ .history-list-modal-content { display: grid; grid-template-rows: 1fr; - grid-template-columns: auto auto 1fr auto; + grid-template-columns: 1fr auto; margin-bottom: var(--size-4-2); } + .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:hover { + background-color: var(--color-base-20); + } + + .history-list-modal-clickable:active { + background-color: var(--color-base-25); + } + .history-list-modal-date { grid-row: 1; grid-column: 1; @@ -158,8 +190,9 @@ .history-list-modal-checkbox { grid-row: 1; - grid-column: 4; - margin: 0px var(--size-4-3) 0px var(--size-2-3) + grid-column: 2; + margin: 0px var(--size-4-3) 0px var(--size-2-3); + align-self: center; } #delete-button { diff --git a/Services/ConversationFileSystemService.ts b/Services/ConversationFileSystemService.ts index 9c40e4f..4e2c1e9 100644 --- a/Services/ConversationFileSystemService.ts +++ b/Services/ConversationFileSystemService.ts @@ -50,6 +50,10 @@ export class ConversationFileSystemService { return this.currentConversationPath; } + public setCurrentConversationPath(filePath: string): void { + this.currentConversationPath = filePath; + } + public async deleteCurrentConversation(): Promise { if (!this.currentConversationPath) { return false; diff --git a/Stores/conversationStore.ts b/Stores/conversationStore.ts index d3897a0..8327225 100644 --- a/Stores/conversationStore.ts +++ b/Stores/conversationStore.ts @@ -1,12 +1,24 @@ import { writable } from 'svelte/store'; +import type { Conversation } from 'Conversations/Conversation'; + +interface ConversationStoreState { + shouldReset: boolean; + conversationToLoad: { conversation: Conversation; filePath: string } | null; +} function createConversationStore() { - const { subscribe, set, update } = writable({ shouldReset: false }); + const { subscribe, set, update } = writable({ + shouldReset: false, + conversationToLoad: null + }); return { subscribe, - reset: () => set({ shouldReset: true }), - clearResetFlag: () => set({ shouldReset: false }) + reset: () => set({ shouldReset: true, conversationToLoad: null }), + clearResetFlag: () => update(state => ({ ...state, shouldReset: false })), + loadConversation: (conversation: Conversation, filePath: string) => + set({ shouldReset: false, conversationToLoad: { conversation, filePath } }), + clearLoadFlag: () => update(state => ({ ...state, conversationToLoad: null })) }; }