Enhance conversation loading functionality by adding conversation selection handling in ConversationHistoryModal and ConversationHistoryModalSvelte, updating conversationStore for improved state management, and implementing current conversation path retrieval in ConversationFileSystemService.

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();
+  }
 </script>
 
 <main class="container">

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));
 

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);
+    }
   </script>
 
   <div class="conversation-history-modal-container">
@@ -68,11 +73,18 @@
       {:else}
       {#each items as item (item.id)}
       <div class="history-list-modal-content" in:fade={{ duration: 200 }} out:fade={{ duration: 200 }}>
-        <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>
-        <input 
-          type="checkbox" 
+        <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)}
@@ -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 {

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<boolean> {
         if (!this.currentConversationPath) {
             return false;

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<ConversationStoreState>({
+        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 }))
     };
 }