Fix duplicate message, settings and agent deselect bug (#9)

Fix duplicate message, settings and agent deselect bug

Author: tysonthomas9

config/gni/devtools_grd_files.gni

@@ -601,6 +601,8 @@ grd_files_release_sources = [
   "front_end/panels/ai_chat/ui/AIChatPanel.js",
   "front_end/panels/ai_chat/ui/ChatView.js",
   "front_end/panels/ai_chat/ui/chatView.css.js",
+  "front_end/panels/ai_chat/ui/HelpDialog.js",
+  "front_end/panels/ai_chat/ui/SettingsDialog.js",
   "front_end/panels/ai_chat/core/AgentService.js",
   "front_end/panels/ai_chat/core/State.js",
   "front_end/panels/ai_chat/core/Graph.js",

front_end/panels/ai_chat/core/BaseOrchestratorAgent.ts

@@ -314,30 +314,36 @@ export function renderAgentTypeButtons(
 export function createAgentTypeSelectionHandler(
   element: HTMLElement,
   textInputElement: HTMLTextAreaElement | undefined,
-  onAgentTypeSelected: ((agentType: string) => void) | undefined,
-  setSelectedAgentType: (type: string) => void
+  onAgentTypeSelected: ((agentType: string | null) => void) | undefined,
+  setSelectedAgentType: (type: string | null) => void,
+  getCurrentSelectedType: () => string | null
 ): (event: Event) => void {
   return (event: Event): void => {
     const button = event.currentTarget as HTMLButtonElement;
     const agentType = button.dataset.agentType;
     if (agentType && onAgentTypeSelected) {
+      const currentSelected = getCurrentSelectedType();
+      
       // Remove selected class from all agent type buttons
-      const allButtons = element.shadowRoot?.querySelectorAll('.agent-type-button');
+      const allButtons = element.shadowRoot?.querySelectorAll('.prompt-button');
       allButtons?.forEach(btn => btn.classList.remove('selected'));
 
-      // Add selected class to the clicked button
-      button.classList.add('selected');
-
-      // Update the selected agent type
-      setSelectedAgentType(agentType);
-
-      // Call the handler passed via props
-      onAgentTypeSelected(agentType);
-
-      // Focus the input after selecting an agent type
+      // Check if we're clicking on the currently selected button (toggle off)
+      if (currentSelected === agentType) {
+        // Deselect - set to null and don't add selected class
+        setSelectedAgentType(null);
+        onAgentTypeSelected(null);
+        console.log('Deselected agent type, returning to default');
+      } else {
+        // Select new agent type - add selected class to clicked button
+        button.classList.add('selected');
+        setSelectedAgentType(agentType);
+        onAgentTypeSelected(agentType);
+        console.log('Selected agent type:', agentType);
+      }
+
+      // Focus the input after selecting/deselecting an agent type
       textInputElement?.focus();
-
-      console.log('Selected agent type:', agentType);
     }
   };
 }

front_end/panels/ai_chat/ui/AIChatPanel.ts

@@ -871,11 +871,9 @@ export class AIChatPanel extends UI.Panel.Panel {
       return;
     }
 
-    // Add user message first regardless of whether we can process it
-    this.#addUserMessage(text, imageInput);
-    
     // If we can't send messages due to missing credentials, add error message and return
     if (!this.#canSendMessages) {
+      this.#addUserMessage(text, imageInput);
       this.#addCredentialErrorMessage();
       return;
     }
@@ -1021,13 +1019,17 @@ export class AIChatPanel extends UI.Panel.Panel {
 
   /**
    * Handles prompt type selection from ChatView
-   * @param promptType The selected prompt type
+   * @param promptType The selected prompt type (null means deselected)
    */
-  #handlePromptSelected(promptType: string): void {
+  #handlePromptSelected(promptType: string | null): void {
     console.log('Prompt selected in AIChatPanel:', promptType);
     this.#selectedAgentType = promptType;
     // Save selection for future sessions
-    localStorage.setItem('ai_chat_agent_type', promptType);
+    if (promptType) {
+      localStorage.setItem('ai_chat_agent_type', promptType);
+    } else {
+      localStorage.removeItem('ai_chat_agent_type');
+    }
   }
 
   #onNewChatClick(): void {

front_end/panels/ai_chat/ui/ChatView.ts

@@ -130,7 +130,7 @@ export enum State {
 export interface Props {
   messages: ChatMessage[];
   onSendMessage: (text: string, imageInput?: ImageInputData) => void;
-  onPromptSelected: (promptType: string) => void;
+  onPromptSelected: (promptType: string | null) => void;
   state: State;
   isTextInputEmpty: boolean;
   imageInput?: ImageInputData;
@@ -160,7 +160,7 @@ export class ChatView extends HTMLElement {
   #imageInput?: ImageInputData;
   #onSendMessage?: (text: string, imageInput?: ImageInputData) => void;
   #onImageInputClear?: () => void;
-  #onPromptSelected?: (promptType: string) => void;
+  #onPromptSelected?: (promptType: string | null) => void;
   #textInputElement?: HTMLTextAreaElement;
   #markdownRenderer = new MarkdownRenderer();
   #isFirstMessageView = true; // Track if we're in the centered first-message view
@@ -264,10 +264,11 @@ export class ChatView extends HTMLElement {
       this,
       this.#textInputElement,
       this.#onPromptSelected,
-      (type: string) => {
+      (type: string | null) => {
         this.#selectedPromptType = type;
         void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-      }
+      },
+      () => this.#selectedPromptType || null
     );
   }
 

front_end/panels/ai_chat/ui/SettingsDialog.ts

@@ -288,9 +288,6 @@ export class SettingsDialog {
 
       console.log(`Provider changed to: ${selectedProvider}`);
 
-      // Store the change immediately in localStorage to ensure getModelOptions sees the new provider
-      localStorage.setItem(PROVIDER_SELECTION_KEY, selectedProvider);
-
       // If switching to LiteLLM, fetch the latest models if endpoint is configured
       if (selectedProvider === 'litellm') {
         const endpoint = litellmEndpointInput.value.trim();