Refactor code to smaller files and code cleanup (#8)

- Refactor code to include two new dialog components
- Fix config bugs
- Add support for open source thinking models

Author: tysonthomas9

front_end/panels/ai_chat/BUILD.gn

@@ -18,6 +18,8 @@ devtools_module("ai_chat") {
   sources = [
     "ui/AIChatPanel.ts",
     "ui/ChatView.ts",
+    "ui/HelpDialog.ts",
+    "ui/SettingsDialog.ts",
     "ai_chat_impl.ts",
     "core/Graph.ts",
     "core/State.ts",
@@ -73,6 +75,8 @@ devtools_module("ai_chat") {
 _ai_chat_sources = [
     "ui/AIChatPanel.ts",
     "ui/ChatView.ts",
+    "ui/HelpDialog.ts",
+    "ui/SettingsDialog.ts",
     "ai_chat_impl.ts",
     "core/Graph.ts",
     "core/State.ts",

front_end/panels/ai_chat/agent_framework/implementation/ConfiguredAgents.ts

@@ -81,7 +81,7 @@ export function initializeConfiguredAgents(): void {
 function createResearchAgentConfig(): AgentToolConfig {
   return {
     name: 'research_agent',
-    description: 'Performs in-depth research on a specific query autonomously using multiple steps and internal tool calls (navigation, fetching, extraction). It aims to produce a comprehensive final report validated by a critique process.',
+    description: 'Performs in-depth research on a specific query autonomously using multiple steps and internal tool calls (navigation, fetching, extraction). It always hands off to the content writer agent to produce a comprehensive final report.',
     systemPrompt: `You are a singular task research agent designed to conduct in-depth research on a single topic provided by the user. Your task is to leverage browser capabilities to gather comprehensive information, following these steps:
 
 Here is an example of steps you can take to complete your research (go in this order):
@@ -90,48 +90,37 @@ Here is an example of steps you can take to complete your research (go in this o
 3. Call fetcher_tool to fetch the content of the all the URLs you have found from the search results
 4. Focus on collecting comprehensive data rather than writing the final report yourself
 
-## IMPORTANT: Hand off to content writer for final report
-Once you've collected sufficient research data (at least 3-5 different sources with substantial information), hand off to the content_writer_agent via the handoff_to_content_writer_agent tool. The content writer is specifically trained to organize research data into coherent, well-structured reports.
+## MANDATORY: Hand off to content writer for final report
+Once you've collected sufficient research data (at least 3-5 different sources with substantial information), you MUST hand off to the content_writer_agent via the handoff_to_content_writer_agent tool. The content writer is specifically trained to organize research data into coherent, well-structured reports.
 
-When to use the handoff:
+When to use the handoff (REQUIRED for ALL cases):
 - After you've collected enough diverse, high-quality information
 - When you have explored multiple perspectives on the topic
 - When you're ready for the information to be organized into a final report
-- Instead of using finalize_with_critique directly on your own report
 
 What happens during handoff:
 - The content_writer_agent will receive your research data
 - It will analyze the information and create a well-structured report
-- It will handle the finalize_with_critique stage for you
+- It will handle the finalize_with_critique stage automatically
 
-Only use finalize_with_critique yourself if you decide NOT to use the handoff for some reason.
+## Research Quality Guidelines
 
-## If Not Using Handoff
-If you decide to complete the research yourself without handoff, synthesize all collected information into a comprehensive research report in markdown and use the 'finalize_with_critique' tool to submit your final answer for quality evaluation.
+When collecting research data, focus on:
+1. Gathering information from diverse, reliable sources
+2. Exploring multiple perspectives on the topic
+3. Collecting detailed data, including statistics, expert opinions, case studies, etc.
+4. Organizing information into logical categories
+5. Including important context, historical background, and current trends
 
-The 'finalize_with_critique' tool will ensure your research meets the user's requirements. If it provides feedback, incorporate it and try again until your answer is accepted.
+Collect sufficient information to enable the content writer to create a comprehensive report of at least 5 different sections. If there is not enough content, do more research.
 
-## Here is an example of the final report structure (you can come up with your own structure that is better for the user's query):
-
-Present your findings in a structured markdown report with:
-
-1. **Executive Summary**: Brief overview of key findings
-2. **Research Question**: Clear restatement of what you investigated
-3. **Methodology**: Sources consulted and selection criteria
-4. **Key Findings**: Organized by main themes or questions
-5. **Analysis**: Synthesis of information, highlighting consensus and contradictions
-6. **Limitations**: Gaps in available information
-7. **Conclusions**: Summary of the most reliable answers based on the research
-8. **References**: Full citation list of all sources consulted
-
-Maintain objectivity throughout your research process and clearly distinguish between well-established facts and more speculative information. When appropriate, note areas where more research might be needed. Note: the final report should be at least 5000 words or even longer based on the topic, if there is not enough content do more research.`,
+Maintain objectivity throughout your research process and clearly distinguish between well-established facts and more speculative information.`,
     tools: [
       'navigate_url',
       'navigate_back',
       'fetcher_tool',
       'schema_based_extractor',
-      'node_ids_to_urls',
-      'finalize_with_critique'
+      'node_ids_to_urls'
     ],
     maxIterations: 15,
     modelName: () => AIChatPanel.getMiniModel(),
@@ -206,7 +195,7 @@ Your process should follow these steps:
 
 The final output should be in markdown format, and it should be lengthy and detailed. Aim for 5-10 pages of content, at least 1000 words.`,
     tools: [],
-    maxIterations: 2,
+    maxIterations: 3,
     modelName: () => AIChatPanel.getMiniModel(),
     temperature: 0.3,
     schema: {

front_end/panels/ai_chat/core/AgentService.ts

@@ -78,16 +78,27 @@ export class AgentService extends Common.ObjectWrapper.ObjectWrapper<{
       if (!modelName) {
         throw new Error('Model name is required for initialization');
       }
+      
+      // Check if the configuration requires an API key
+      const requiresApiKey = this.#doesCurrentConfigRequireApiKey();
+      
+      // If API key is required but not provided, throw error
+      if (requiresApiKey && !apiKey) {
+        const provider = localStorage.getItem('ai_chat_provider') || 'openai';
+        throw new Error(`${provider === 'openai' ? 'OpenAI' : 'LiteLLM'} API key is required for this configuration`);
+      }
 
       // Will throw error if OpenAI model is used without API key
       this.#graph = createAgentGraph(apiKey, modelName);
 
       this.#isInitialized = true;
     } catch (error) {
       console.error('Failed to initialize agent:', error);
-      // Check if it's a specific API key error
-      if (error instanceof Error && error.message === 'OpenAI API key is required for OpenAI models') {
-        throw new Error('OpenAI API key is required for this model');
+      // Pass through specific errors
+      if (error instanceof Error && 
+          (error.message.includes('API key is required') || 
+           error.message.includes('endpoint is required'))) {
+        throw error;
       }
       throw new Error(i18nString(UIStrings.agentInitFailed));
     }
@@ -118,7 +129,10 @@ export class AgentService extends Common.ObjectWrapper.ObjectWrapper<{
    * Sends a message to the AI agent
    */
   async sendMessage(text: string, imageInput?: ImageInputData, selectedAgentType?: string | null): Promise<ChatMessage> {
-    if (!this.#apiKey) {
+    // Check if the current configuration requires an API key
+    const requiresApiKey = this.#doesCurrentConfigRequireApiKey();
+    
+    if (requiresApiKey && !this.#apiKey) {
       throw new Error('API key not set. Please set the API key in settings.');
     }
 
@@ -270,6 +284,36 @@ export class AgentService extends Common.ObjectWrapper.ObjectWrapper<{
     }
     return pageTitle;
   }
+  
+  /**
+   * Helper to determine if the current configuration requires an API key
+   * LiteLLM with an endpoint doesn't require an API key, other providers do
+   */
+  #doesCurrentConfigRequireApiKey(): boolean {
+    try {
+      // Check the selected provider
+      const selectedProvider = localStorage.getItem('ai_chat_provider') || 'openai';
+      
+      // OpenAI provider always requires an API key
+      if (selectedProvider === 'openai') {
+        return true;
+      }
+      
+      // For LiteLLM, only require API key if no endpoint is configured
+      if (selectedProvider === 'litellm') {
+        const hasLiteLLMEndpoint = Boolean(localStorage.getItem('ai_chat_litellm_endpoint'));
+        // If we have an endpoint, API key is optional
+        return !hasLiteLLMEndpoint;
+      }
+      
+      // Default to requiring API key for any unknown provider
+      return true;
+    } catch (error) {
+      console.error('Error checking if API key is required:', error);
+      // Default to requiring API key in case of errors
+      return true;
+    }
+  }
 }
 
 // Define UI strings object to manage i18n strings

front_end/panels/ai_chat/core/Graph.ts

@@ -11,6 +11,7 @@ import { ChatLiteLLM } from './ChatLiteLLM.js';
 import { ChatOpenAI } from './ChatOpenAI.js';
 import { createAgentGraphFromConfig } from './ConfigurableGraph.js';
 import { defaultAgentGraphConfig } from './GraphConfigs.js';
+import { AIChatPanel } from '../ui/AIChatPanel.js';
 import {
   ChatPromptFormatter,
   createSystemPrompt,
@@ -27,25 +28,37 @@ export function createAgentGraph(apiKey: string | null, modelName: string): Comp
   }
 
   let model;
-  // Get model options to check type
-  const modelOptions = JSON.parse(localStorage.getItem('ai_chat_model_options') || '[]');
+  // Get model options using the centralized method
+  const modelOptions = AIChatPanel.getModelOptions();
+  
   const modelOption = modelOptions.find((opt: {value: string, type: string}) => opt.value === modelName);
   const isLiteLLMModel = modelOption?.type === 'litellm' || modelName.startsWith('litellm/');
 
   if (isLiteLLMModel) {
     // Get LiteLLM configuration from localStorage
     const liteLLMEndpoint = localStorage.getItem('ai_chat_litellm_endpoint');
+    
+    // Check if endpoint is configured
+    if (!liteLLMEndpoint) {
+      throw new Error('LiteLLM endpoint is required for LiteLLM models');
+    }
 
     // Handle both cases: models with and without 'litellm/' prefix
     const actualModelName = modelName.startsWith('litellm/') ?
       modelName.substring('litellm/'.length) :
       modelName;
+      
+    console.log('Creating ChatLiteLLM model:', {
+      modelName: actualModelName,
+      endpoint: liteLLMEndpoint,
+      hasApiKey: Boolean(apiKey)
+    });
 
     model = new ChatLiteLLM({
       liteLLMApiKey: apiKey,
       modelName: actualModelName,
       temperature: 0,
-      baseUrl: liteLLMEndpoint || undefined,
+      baseUrl: liteLLMEndpoint,
     });
   } else {
     // Standard OpenAI model - requires API key

front_end/panels/ai_chat/core/LiteLLMClient.ts

@@ -69,6 +69,18 @@ export class LiteLLMClient {
    * Constructs the full endpoint URL based on provided options
    */
   private static getEndpoint(options?: LiteLLMCallOptions): string {
+    // Check if we have a valid endpoint or baseUrl
+    if (!options?.endpoint && !options?.baseUrl) {
+      // Check localStorage as a fallback for endpoint
+      const localStorageEndpoint = localStorage.getItem('ai_chat_litellm_endpoint');
+      if (!localStorageEndpoint) {
+        throw new Error('LiteLLM endpoint not configured. Please set endpoint in settings.');
+      }
+      console.log(`[LiteLLMClient] Using endpoint from localStorage: ${localStorageEndpoint}`);
+      const baseUrl = localStorageEndpoint.replace(/\/$/, '');
+      return `${baseUrl}${this.CHAT_COMPLETIONS_PATH}`;
+    }
+    
     // If full endpoint is provided, check if it includes the chat completions path
     if (options?.endpoint) {
       // Check if the endpoint already includes the chat completions path
@@ -88,7 +100,7 @@ export class LiteLLMClient {
       return `${baseUrl}${this.CHAT_COMPLETIONS_PATH}`;
     }
 
-    // Default to local LiteLLM
+    // Default to local LiteLLM (should not reach here due to the check at the top)
     return `${this.DEFAULT_BASE_URL}${this.CHAT_COMPLETIONS_PATH}`;
   }
 

front_end/panels/ai_chat/core/UnifiedLLMClient.ts

@@ -242,7 +242,7 @@ export class UnifiedLLMClient {
         if ('function' in tool) {
           return tool;
         }
-        
+
         // Transform OpenAI format to Anthropic format
         // OpenAI: { type: 'function', name: '...', description: '...', parameters: {...} }
         // Anthropic expects: { type: 'function', function: { name: '...', description: '...', parameters: {...} } }
@@ -256,7 +256,7 @@ export class UnifiedLLMClient {
             }
           };
         }
-        
+
         // Default: return as is if we don't recognize the format
         return tool;
       });