Enhance ChatWindow and TopBar functionality with icon support and improved button accessibility

Components/ChatWindow.svelte

@@ -7,6 +7,7 @@
   import type { IAIClass } from "AIClasses/IAIClass";
 	import { tick } from "svelte";
   import { ConversationFileSystemService } from "Services/ConversationFileSystemService";
+  import { setIcon } from "obsidian";
 
   let ai: IAIClass = Resolve(Services.IAIClass);
   let actioner: IActioner = Resolve(Services.IActioner);
@@ -15,6 +16,7 @@
   let semaphore: Semaphore = new Semaphore(1, false);
   let textareaElement: HTMLTextAreaElement;
   let chatContainer: HTMLDivElement;
+  let submitButton: HTMLButtonElement;
 
   let userRequest = "";
   let isSubmitting = false;
@@ -133,6 +135,10 @@
       }
     });
   }
+
+  $: if (submitButton) {
+    setIcon(submitButton, 'send-horizontal');
+  }
 </script>
 
 <main class="container">
@@ -152,8 +158,12 @@
       rows="1">
     </textarea>
   
-    <button id="submit" on:click={handleSubmit} disabled={isSubmitting || userRequest.trim() === ""}>
-      {isSubmitting ? 'Sending...' : 'Submit'}
+    <button 
+      id="submit"
+      bind:this={submitButton}
+      on:click={handleSubmit}
+      disabled={isSubmitting || userRequest.trim() === ""}
+      aria-label="Send Message">
     </button>
   </div>
 </main>
@@ -211,7 +221,8 @@
     transition-duration: 0.25s;
   }
 
-  #submit:hover {
+  #submit:not(:disabled):hover {
+    cursor: pointer;
     background-color: var(--interactive-accent-hover);
   }
 </style>

Components/TopBar.svelte

@@ -2,7 +2,9 @@
   import { Resolve } from '../Services/DependencyService';
   import { Services } from '../Services/Services';
   import type AIAgentPlugin from '../main';
-  import { setIcon } from 'obsidian';
+  import { setIcon, type WorkspaceLeaf } from 'obsidian';
+
+  export let leaf: WorkspaceLeaf;
 
   const plugin = Resolve<AIAgentPlugin>(Services.AIAgentPlugin);
 
@@ -13,20 +15,36 @@
     plugin.app.setting.openTabById(plugin.manifest.id);
   }
 
+  function closePlugin() {
+    leaf.detach();
+  }
+
   let settingsButton: HTMLButtonElement;
+  let closeButton: HTMLButtonElement;
 
   $: if (settingsButton) {
     setIcon(settingsButton, 'settings');
   }
+  $: if (closeButton) {
+    setIcon(closeButton, 'circle-x');
+  }
 </script>
 
 <main class="top-bar">
   <div class="top-bar-content">
     <button
       bind:this={settingsButton}
-      class="settings-button clickable-icon"
+      id="settings-button"
+      class="top-bar-button clickable-icon"
       on:click={openSettings}
-      aria-label="Open plugin settings"
+      aria-label="AI Agent Settings"
+    ></button>
+    <button
+      bind:this={closeButton}
+      id="close-button"
+      class="top-bar-button clickable-icon"
+      on:click={closePlugin}
+      aria-label="Close AI Agent"
     ></button>
   </div>
 </main>
@@ -47,22 +65,28 @@
     grid-column: 2;
     display: grid;
     grid-template-rows: auto;
-    grid-template-columns: var(--size-4-2) auto 1fr var(--size-4-2);
+    grid-template-columns: var(--size-4-2) auto 1fr auto var(--size-4-2);
     background-color: var(--color-base-30);
     border-radius: var(--radius-m);
   }
 
-  .settings-button {
-    grid-row: 1;
-    grid-column: 2;
-    background: none;
-    border: none;
+  .top-bar-button {
     margin: var(--size-4-2) 0px var(--size-4-2) 0px;
     padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-2);
     color: var(--text-muted);
   }
 
-  .settings-button:hover {
+  .top-bar-button:hover {
     background-color: var(--color-base-35);
   }
+
+  #settings-button {
+    grid-row: 1;
+    grid-column: 2;
+  }
+
+  #close-button {
+    grid-row: 1;
+    grid-column: 4;
+  }
 </style>

Views/MainView.ts

@@ -28,7 +28,9 @@ export class MainView extends ItemView {
     // Mount TopBar
     this.topBar = mount(TopBar, {
       target: container,
-      props: {}
+      props: {
+        leaf: this.leaf
+      }
     });
 
     // Mount ChatWindow

styles.css

@@ -22,9 +22,9 @@
     var(--color-base-20),
     var(--color-base-20),
     var(--color-base-20),
-    var(--color-base-10),
-    var(--color-base-10),
-    var(--color-base-05)
+    var(--color-base-20),
+    var(--color-base-20),
+    var(--color-base-20)
   );
   padding-top: 0;
 }