From eca85ab5c84bbb652a5303c0ca56445e51489d54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Tue, 29 Apr 2025 22:26:15 +0800
Subject: [PATCH 01/27] Function: Add General Settings Page

---
 app/main.ts                                 |   4 +-
 src/components/pages/SettingsPage.tsx       |  96 +++++++---
 src/components/settings/GeneralSettings.tsx | 186 ++++++++++++++++++++
 src/components/settings/index.ts            |   3 +-
 src/locales/en/translation.json             |  16 +-
 src/locales/es/translation.json             |  16 +-
 src/locales/ja/translation.json             |  16 +-
 src/locales/ko/translation.json             |  16 +-
 src/locales/zh-CN/translation.json          |  16 +-
 src/locales/zh-TW/translation.json          |  16 +-
 src/styles/tensorblock-light.css            |  33 ++++
 11 files changed, 385 insertions(+), 33 deletions(-)
 create mode 100644 src/components/settings/GeneralSettings.tsx

diff --git a/app/main.ts b/app/main.ts
index 833cd81..8abe564 100644
--- a/app/main.ts
+++ b/app/main.ts
@@ -29,8 +29,8 @@ function createWindow(): BrowserWindow {
     frame: false,
     fullscreenable: false,
     autoHideMenuBar: true,
-    minWidth: 600,
-    minHeight: 600,
+    minWidth: 700,
+    minHeight: 1000,
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       contextIsolation: true,
diff --git a/src/components/pages/SettingsPage.tsx b/src/components/pages/SettingsPage.tsx
index d25bac9..d7c4c0a 100644
--- a/src/components/pages/SettingsPage.tsx
+++ b/src/components/pages/SettingsPage.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Server, MessageSquare, Languages } from 'lucide-react';
+import { Server, MessageSquare, Languages, Sliders } from 'lucide-react';
 import { SettingsService } from '../../services/settings-service';
 import { ProviderSettings } from '../../types/settings';
-import { ApiManagement, ChatSettings, LanguageSettings } from '../settings';
+import { ApiManagement, ChatSettings, LanguageSettings, GeneralSettings } from '../settings';
 import { DatabaseIntegrationService } from '../../services/database-integration';
 import { AIService } from '../../services/ai-service';
 import { v4 as uuidv4 } from 'uuid';
@@ -13,7 +13,7 @@ interface SettingsPageProps {
   isOpen: boolean;
 }
 
-type SettingsTab = 'api' | 'models' | 'chat' | 'language';
+type SettingsTab = 'api' | 'models' | 'chat' | 'language' | 'general';
 
 export const SettingsPage: React.FC<SettingsPageProps> = ({
   isOpen,
@@ -26,6 +26,13 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
   const [hasApiKeyChanged, setHasApiKeyChanged] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   
+  // General settings state
+  const [startWithSystem, setStartWithSystem] = useState(false);
+  const [startupToTray, setStartupToTray] = useState(false);
+  const [closeToTray, setCloseToTray] = useState(true);
+  const [proxyMode, setProxyMode] = useState<'system' | 'custom' | 'none'>('system');
+  const [sendErrorReports, setSendErrorReports] = useState(true);
+  
   const settingsService = SettingsService.getInstance();
   const aiService = AIService.getInstance();
   const { t } = useTranslation();
@@ -57,6 +64,14 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
       setUseWebSearch(settings.enableWebSearch_Preview);
       setHasApiKeyChanged(false);
       lastOpenedSettings.current = true;
+      
+      // In a real implementation, we would load these from settings service
+      // This is just for the UI prototype
+      // setStartWithSystem(settings.startWithSystem || false);
+      // setStartupToTray(settings.startupToTray || false);
+      // setCloseToTray(settings.closeToTray || true);
+      // setProxyMode(settings.proxyMode || 'system');
+      // setSendErrorReports(settings.sendErrorReports || true);
     }
 
     if(!isOpen && lastOpenedSettings.current){
@@ -95,6 +110,31 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
     console.log('Provider settings: ', providerSettings);
   };
 
+  // Handle general settings changes
+  const handleGeneralSettingChange = (key: string, value: unknown) => {
+    console.log(`Setting ${key} changed to: `, value);
+    
+    switch(key) {
+      case 'startWithSystem':
+        setStartWithSystem(value as boolean);
+        break;
+      case 'startupToTray':
+        setStartupToTray(value as boolean);
+        break;
+      case 'closeToTray':
+        setCloseToTray(value as boolean);
+        break;
+      case 'proxyMode':
+        setProxyMode(value as 'system' | 'custom' | 'none');
+        break;
+      case 'sendErrorReports':
+        setSendErrorReports(value as boolean);
+        break;
+      default:
+        break;
+    }
+  };
+
   const handleSave = async () => {
     console.log('Saving settings');
 
@@ -111,6 +151,12 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
       await settingsService.updateSettings({
         providers: providerSettings,
         enableWebSearch_Preview: useWebSearch
+        // In a real implementation, we would save general settings here
+        // startWithSystem,
+        // startupToTray,
+        // closeToTray,
+        // proxyMode,
+        // sendErrorReports
       });
       
       // Refresh models if API key has changed
@@ -216,6 +262,16 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
           </div>
           
           <div className="flex-1 px-2 overflow-y-auto">
+            <button
+              className={`flex items-center w-full px-4 py-3 text-left transition-all duration-200 ${
+                activeTab === 'general' ? 'settings-category-selected-item settings-category-selected-item-text font-medium' : 'settings-category-item settings-category-item-text'
+              }`}
+              onClick={() => setActiveTab('general')}
+            >
+              <Sliders size={18} className="mr-2" />
+              {t('settings.general')}
+            </button>
+
             <button
               className={`flex items-center w-full px-4 py-3 text-left transition-all duration-200 ${
                 activeTab === 'api' ? 'settings-category-selected-item settings-category-selected-item-text font-medium' : 'settings-category-item settings-category-item-text'
@@ -245,34 +301,26 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
               <Languages size={18} className="mr-2" />
               {t('settings.language')}
             </button>
-            
-            {/*<button
-              className={`flex items-center w-full px-4 py-3 text-left ${
-                activeTab === 'models' ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-700 hover:bg-gray-200'
-              }`}
-              onClick={() => setActiveTab('models')}
-            >
-              <Layers size={18} className="mr-2" />
-              Model Management
-            </button>*/}
           </div>
-          
-          {/* <div className="p-4 border-t border-gray-200">
-            <button
-              onClick={async () => {
-                await handleSave();
-              }}
-              className="w-full px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300"
-            >
-              Close
-            </button>
-          </div> */}
         </div>
         
         {/* Main content */}
         <div className="flex flex-col flex-1 h-full">
           {/* Content area */}
           <div className="flex-1 overflow-y-auto">
+            {/* General Settings Tab */}
+            {activeTab === 'general' && (
+              <GeneralSettings
+                startWithSystem={startWithSystem}
+                startupToTray={startupToTray}
+                closeToTray={closeToTray}
+                proxyMode={proxyMode}
+                sendErrorReports={sendErrorReports}
+                onSettingChange={handleGeneralSettingChange}
+                onSaveSettings={handleSave}
+              />
+            )}
+            
             {/* API Management Tab */}
             {activeTab === 'api' && (
               <ApiManagement
diff --git a/src/components/settings/GeneralSettings.tsx b/src/components/settings/GeneralSettings.tsx
new file mode 100644
index 0000000..8849b6f
--- /dev/null
+++ b/src/components/settings/GeneralSettings.tsx
@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface GeneralSettingsProps {
+  startWithSystem: boolean;
+  startupToTray: boolean;
+  closeToTray: boolean;
+  proxyMode: 'system' | 'custom' | 'none';
+  sendErrorReports: boolean;
+  onSettingChange: (key: string, value: unknown) => void;
+  onSaveSettings: () => void;
+}
+
+export const GeneralSettings: React.FC<GeneralSettingsProps> = ({
+  startWithSystem,
+  startupToTray,
+  closeToTray,
+  proxyMode,
+  sendErrorReports,
+  onSettingChange,
+  onSaveSettings
+}) => {
+  const { t } = useTranslation();
+  const [customProxyUrl, setCustomProxyUrl] = useState<string>('');
+
+  const handleProxyModeChange = (mode: 'system' | 'custom' | 'none') => {
+    onSettingChange('proxyMode', mode);
+    onSaveSettings();
+  };
+
+  const handleToggleChange = (key: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    onSettingChange(key, e.target.checked);
+    onSaveSettings();
+  };
+
+  return (
+    <div className="flex flex-col h-full p-4">
+      <div className="flex-1">
+        <h3 className="mb-6 text-xl font-semibold">{t('settings.general')}</h3>
+        
+        {/* Startup Settings */}
+        <div className="p-4 mb-4 settings-section">
+          <h3 className="mb-4 text-lg font-medium settings-section-title">{t('settings.startup')}</h3>
+          
+          <div className="space-y-4">
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                id="start-with-system"
+                checked={startWithSystem}
+                onChange={handleToggleChange('startWithSystem')}
+                className="w-4 h-4 checkbox-input"
+              />
+              <label htmlFor="start-with-system" className="ml-2 text-sm font-medium settings-toggle-label">
+                {t('settings.startWithSystem')}
+              </label>
+            </div>
+            
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                id="startup-to-tray"
+                checked={startupToTray}
+                onChange={handleToggleChange('startupToTray')}
+                className="w-4 h-4 checkbox-input"
+              />
+              <label htmlFor="startup-to-tray" className="ml-2 text-sm font-medium settings-toggle-label">
+                {t('settings.startupToTray')}
+              </label>
+            </div>
+          </div>
+        </div>
+        
+        {/* Tray Settings */}
+        <div className="p-4 mb-4 settings-section">
+          <h3 className="mb-4 text-lg font-medium settings-section-title">{t('settings.trayOptions')}</h3>
+          
+          <div className="space-y-4">
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                id="close-to-tray"
+                checked={closeToTray}
+                onChange={handleToggleChange('closeToTray')}
+                className="w-4 h-4 checkbox-input"
+              />
+              <label htmlFor="close-to-tray" className="ml-2 text-sm font-medium settings-toggle-label">
+                {t('settings.closeToTray')}
+              </label>
+            </div>
+          </div>
+        </div>
+        
+        {/* Network Settings */}
+        <div className="p-4 mb-4 settings-section">
+          <h3 className="mb-4 text-lg font-medium settings-section-title">{t('settings.networkProxy')}</h3>
+          
+          <div className="p-3 space-y-4 settings-radio-group">
+            <div className="flex items-center">
+              <input
+                type="radio"
+                id="proxy-system"
+                name="proxy-mode"
+                checked={proxyMode === 'system'}
+                onChange={() => handleProxyModeChange('system')}
+                className="w-4 h-4 text-blue-600 form-radio"
+              />
+              <label htmlFor="proxy-system" className={`ml-2 text-sm font-medium ${proxyMode === 'system' ? 'settings-radio-item-active' : 'settings-radio-item'}`}>
+                {t('settings.systemProxy')}
+              </label>
+            </div>
+            
+            <div className="flex items-center">
+              <input
+                type="radio"
+                id="proxy-custom"
+                name="proxy-mode"
+                checked={proxyMode === 'custom'}
+                onChange={() => handleProxyModeChange('custom')}
+                className="w-4 h-4 text-blue-600 form-radio"
+              />
+              <label htmlFor="proxy-custom" className={`ml-2 text-sm font-medium ${proxyMode === 'custom' ? 'settings-radio-item-active' : 'settings-radio-item'}`}>
+                {t('settings.customProxy')}
+              </label>
+            </div>
+            
+            {proxyMode === 'custom' && (
+              <div className="pl-6 mt-2">
+                <input
+                  type="text"
+                  value={customProxyUrl}
+                  onChange={(e) => setCustomProxyUrl(e.target.value)}
+                  onBlur={() => {
+                    onSettingChange('customProxyUrl', customProxyUrl);
+                    onSaveSettings();
+                  }}
+                  placeholder="http://proxy.example.com:8080"
+                  className="w-full p-2 input-box"
+                />
+              </div>
+            )}
+            
+            <div className="flex items-center">
+              <input
+                type="radio"
+                id="proxy-none"
+                name="proxy-mode"
+                checked={proxyMode === 'none'}
+                onChange={() => handleProxyModeChange('none')}
+                className="w-4 h-4 text-blue-600 form-radio"
+              />
+              <label htmlFor="proxy-none" className={`ml-2 text-sm font-medium ${proxyMode === 'none' ? 'settings-radio-item-active' : 'settings-radio-item'}`}>
+                {t('settings.noProxy')}
+              </label>
+            </div>
+          </div>
+        </div>
+        
+        {/* Privacy Settings */}
+        <div className="p-4 mb-4 settings-section">
+          <h3 className="mb-4 text-lg font-medium settings-section-title">{t('settings.privacy')}</h3>
+          
+          <div className="space-y-4">
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                id="send-error-reports"
+                checked={sendErrorReports}
+                onChange={handleToggleChange('sendErrorReports')}
+                className="w-4 h-4 checkbox-input"
+              />
+              <label htmlFor="send-error-reports" className="ml-2 text-sm font-medium settings-toggle-label">
+                {t('settings.sendErrorReports')}
+              </label>
+            </div>
+            <p className="text-xs settings-toggle-description">
+              {t('settings.sendErrorReports_description')}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GeneralSettings; 
\ No newline at end of file
diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts
index 1d27d9e..786ac54 100644
--- a/src/components/settings/index.ts
+++ b/src/components/settings/index.ts
@@ -1,3 +1,4 @@
 export * from './ApiManagement';
 export * from './ChatSettings';
-export * from './LanguageSettings';
\ No newline at end of file
+export * from './LanguageSettings';
+export * from './GeneralSettings';
\ No newline at end of file
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index dd8e203..1ce5d24 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -148,6 +148,20 @@
     
     "webSearch_title": "Web Search (Preview)",
     "webSearch_toggle_label": "Enable Web Search Function",
-    "webSearch_description": "When enabled, the AI can search the web to provide more up-to-date information. Please note that web search is currently only supported with OpenAI and Gemini models. Also, when web search is enabled, streaming responses (where text appears incrementally) will not be available."
+    "webSearch_description": "When enabled, the AI can search the web to provide more up-to-date information. Please note that web search is currently only supported with OpenAI and Gemini models. Also, when web search is enabled, streaming responses (where text appears incrementally) will not be available.",
+
+    "general": "General",
+    "startup": "Startup",
+    "startWithSystem": "Start with system",
+    "startupToTray": "Start minimized to tray",
+    "trayOptions": "Tray Options",
+    "closeToTray": "Close to tray instead of quitting",
+    "networkProxy": "Network Proxy",
+    "systemProxy": "Use system proxy",
+    "customProxy": "Custom proxy",
+    "noProxy": "No proxy",
+    "privacy": "Privacy",
+    "sendErrorReports": "Send anonymous error reports and usage statistics",
+    "sendErrorReports_description": "Help improve the application by sending anonymous crash reports and usage data."
   }
 } 
\ No newline at end of file
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index 0bf7a0c..e1bd9ba 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -145,6 +145,20 @@
     "models_modelCapabilities_chat": "Chat",
     "webSearch_title": "Búsqueda Web (Vista Previa)",
     "webSearch_toggle_label": "Habilitar Función de Búsqueda Web",
-    "webSearch_description": "Cuando está habilitado, la IA puede buscar en la web para proporcionar información más actualizada. Ten en cuenta que la búsqueda web actualmente solo es compatible con los modelos de OpenAI y Gemini. Además, cuando la búsqueda web está habilitada, las respuestas en streaming (donde el texto aparece de forma incremental) no estarán disponibles."
+    "webSearch_description": "Cuando está habilitado, la IA puede buscar en la web para proporcionar información más actualizada. Ten en cuenta que la búsqueda web actualmente solo es compatible con los modelos de OpenAI y Gemini. Además, cuando la búsqueda web está habilitada, las respuestas en streaming (donde el texto aparece de forma incremental) no estarán disponibles.",
+
+    "general": "Configuración General",
+    "startup": "Inicio",
+    "startWithSystem": "Iniciar con el sistema",
+    "startupToTray": "Iniciar minimizado en la bandeja",
+    "trayOptions": "Opciones de Bandeja",
+    "closeToTray": "Minimizar a la bandeja en lugar de cerrar",
+    "networkProxy": "Proxy de Red",
+    "systemProxy": "Usar proxy del sistema",
+    "customProxy": "Proxy personalizado",
+    "noProxy": "Sin proxy",
+    "privacy": "Privacidad",
+    "sendErrorReports": "Enviar informes de errores anónimos y estadísticas de uso",
+    "sendErrorReports_description": "Ayuda a mejorar la aplicación enviando informes de fallos anónimos y datos de uso."
   }
 }
\ No newline at end of file
diff --git a/src/locales/ja/translation.json b/src/locales/ja/translation.json
index 49c01c6..30d33be 100644
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -145,6 +145,20 @@
     "models_modelCapabilities_chat": "チャット",
     "webSearch_title": "ウェブ検索（プレビュー）",
     "webSearch_toggle_label": "ウェブ検索機能を有効にする",
-    "webSearch_description": "有効にすると、AIはウェブを検索してより最新の情報を提供できます。注意: ウェブ検索は現在、OpenAIとGeminiモデルでのみサポートされています。また、ウェブ検索が有効な場合、ストリーミング応答（テキストが段階的に表示される）は利用できません。"
+    "webSearch_description": "有効にすると、AIはウェブを検索してより最新の情報を提供できます。注意: ウェブ検索は現在、OpenAIとGeminiモデルでのみサポートされています。また、ウェブ検索が有効な場合、ストリーミング応答（テキストが段階的に表示される）は利用できません。",
+
+    "general": "一般設定",
+    "startup": "起動設定",
+    "startWithSystem": "システム起動時に起動する",
+    "startupToTray": "起動時にトレイに最小化する",
+    "trayOptions": "トレイオプション",
+    "closeToTray": "閉じる時に終了せずトレイに最小化する",
+    "networkProxy": "ネットワークプロキシ",
+    "systemProxy": "システムプロキシを使用",
+    "customProxy": "カスタムプロキシ",
+    "noProxy": "プロキシを使用しない",
+    "privacy": "プライバシー設定",
+    "sendErrorReports": "匿名のエラーレポートと使用統計を送信する",
+    "sendErrorReports_description": "匿名のクラッシュレポートと使用データを送信してアプリケーションの改善に協力する。"
   }
 }
\ No newline at end of file
diff --git a/src/locales/ko/translation.json b/src/locales/ko/translation.json
index 952eb2e..d4bef76 100644
--- a/src/locales/ko/translation.json
+++ b/src/locales/ko/translation.json
@@ -145,6 +145,20 @@
     "models_modelCapabilities_chat": "채팅",
     "webSearch_title": "웹 검색 (미리보기)",
     "webSearch_toggle_label": "웹 검색 기능 활성화",
-    "webSearch_description": "활성화되면 AI가 웹을 검색하여 더 최신 정보를 제공합니다. 웹 검색은 현재 OpenAI 및 Gemini 모델에서만 지원됩니다. 또한 웹 검색이 활성화되면 스트리밍 응답(텍스트가 점진적으로 나타나는)이 제공되지 않습니다."
+    "webSearch_description": "활성화되면 AI가 웹을 검색하여 더 최신 정보를 제공합니다. 웹 검색은 현재 OpenAI 및 Gemini 모델에서만 지원됩니다. 또한 웹 검색이 활성화되면 스트리밍 응답(텍스트가 점진적으로 나타나는)이 제공되지 않습니다.",
+
+    "general": "일반 설정",
+    "startup": "시작 설정",
+    "startWithSystem": "시스템과 함께 시작",
+    "startupToTray": "트레이로 최소화하여 시작",
+    "trayOptions": "트레이 옵션",
+    "closeToTray": "종료 대신 트레이로 최소화",
+    "networkProxy": "네트워크 프록시",
+    "systemProxy": "시스템 프록시 사용",
+    "customProxy": "사용자 정의 프록시",
+    "noProxy": "프록시 사용 안 함",
+    "privacy": "개인정보 설정",
+    "sendErrorReports": "익명의 오류 보고서 및 사용 통계 보내기",
+    "sendErrorReports_description": "익명의 충돌 보고서와 사용 데이터를 보내 애플리케이션 개선에 도움을 줍니다."
   }
 }
\ No newline at end of file
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 5069f0c..f609a13 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -145,6 +145,20 @@
     "models_modelCapabilities_chat": "聊天",
     "webSearch_title": "网页搜索（预览）",
     "webSearch_toggle_label": "启用网页搜索功能",
-    "webSearch_description": "启用后，AI 可以搜索网页以提供更及时的信息。请注意，网页搜索目前仅支持 OpenAI 和 Gemini 模型。此外，启用网页搜索时，流式响应（文本逐步出现）将不可用。"
+    "webSearch_description": "启用后，AI 可以搜索网页以提供更及时的信息。请注意，网页搜索目前仅支持 OpenAI 和 Gemini 模型。此外，启用网页搜索时，流式响应（文本逐步出现）将不可用。",
+
+    "general": "常规设置",
+    "startup": "启动设置",
+    "startWithSystem": "开机自启动",
+    "startupToTray": "启动时最小化到托盘",
+    "trayOptions": "托盘选项",
+    "closeToTray": "关闭时最小化到托盘而不是退出",
+    "networkProxy": "网络代理",
+    "systemProxy": "使用系统代理",
+    "customProxy": "自定义代理",
+    "noProxy": "不使用代理",
+    "privacy": "隐私设置",
+    "sendErrorReports": "发送匿名错误报告和数据统计",
+    "sendErrorReports_description": "通过发送匿名崩溃报告和使用数据来帮助改进应用程序。"
   }
 }
\ No newline at end of file
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index 5a6389f..3f789e8 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -145,6 +145,20 @@
     "models_modelCapabilities_chat": "聊天",
     "webSearch_title": "網頁搜尋（預覽）",
     "webSearch_toggle_label": "啟用網頁搜尋功能",
-    "webSearch_description": "啟用後，AI 可以搜尋網頁以提供更即時的信息。請注意，網頁搜尋目前僅支援 OpenAI 和 Gemini 模型。此外，啟用網頁搜尋時，將無法使用流式回應（文字逐步顯示）。"
+    "webSearch_description": "啟用後，AI 可以搜尋網頁以提供更即時的信息。請注意，網頁搜尋目前僅支援 OpenAI 和 Gemini 模型。此外，啟用網頁搜尋時，將無法使用流式回應（文字逐步顯示）。",
+
+    "general": "一般設定",
+    "startup": "啟動設定",
+    "startWithSystem": "隨系統啟動",
+    "startupToTray": "啟動時最小化到系統匣",
+    "trayOptions": "系統匣選項",
+    "closeToTray": "關閉時最小化到系統匣而非退出",
+    "networkProxy": "網路代理",
+    "systemProxy": "使用系統代理",
+    "customProxy": "自定義代理",
+    "noProxy": "不使用代理",
+    "privacy": "隱私設定",
+    "sendErrorReports": "發送匿名錯誤報告和使用統計",
+    "sendErrorReports_description": "通過發送匿名當機報告和使用數據來幫助改進應用程式。"
   }
 }
\ No newline at end of file
diff --git a/src/styles/tensorblock-light.css b/src/styles/tensorblock-light.css
index 0dcf580..da01e7f 100644
--- a/src/styles/tensorblock-light.css
+++ b/src/styles/tensorblock-light.css
@@ -418,6 +418,39 @@
         color: var(--primary-700);
     }
 
+    /* General Settings */
+    .settings-section {
+        background-color: var(--surface-0);
+        border: 1px solid var(--primary-100);
+        border-radius: 0.5rem;
+    }
+
+    .settings-section-title {
+        color: var(--surface-700);
+    }
+
+    .settings-toggle-label {
+        color: var(--primary-700);
+    }
+
+    .settings-toggle-description {
+        color: var(--surface-500);
+    }
+
+    .settings-radio-group {
+        border-radius: 0.5rem;
+        background-color: var(--primary-50);
+    }
+
+    .settings-radio-item {
+        color: var(--surface-500);
+    }
+
+    .settings-radio-item-active {
+        background-color: var(--primary-200);
+        color: var(--primary-700);
+    }
+
     /* Message */
     .message-model-tag {
         background-color: transparent;

From c418683fb8a70e0cd767c5f570bc5a33cc261f11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Fri, 2 May 2025 21:48:55 +0800
Subject: [PATCH 02/27] Function: Implement auto startup

---
 app/main.ts                                 | 224 +++++++++++++++++++-
 app/preload.ts                              |   7 +
 src/components/pages/SettingsPage.tsx       |  58 +++--
 src/components/settings/GeneralSettings.tsx |  15 +-
 src/services/settings-service.ts            |   7 +
 src/types/settings.ts                       |   7 +
 src/types/window.d.ts                       |   6 +
 7 files changed, 303 insertions(+), 21 deletions(-)

diff --git a/app/main.ts b/app/main.ts
index 8abe564..6ae98ce 100644
--- a/app/main.ts
+++ b/app/main.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import {app, BrowserWindow, ipcMain, shell, dialog} from 'electron';
+import {app, BrowserWindow, ipcMain, shell, dialog, Tray, Menu, nativeImage} from 'electron';
 import * as path from 'path';
 import * as fs from 'fs';
 import * as os from 'os';
@@ -8,11 +8,147 @@ import { execSync } from 'child_process';
 
 // Main window reference
 let win: BrowserWindow | null = null;
+// Tray reference
+let tray: Tray | null = null;
+
+// Settings
+let closeToTray = true;
 
 // Check if app is running in development mode
 const args = process.argv.slice(1);
 const serve = args.some(val => val === '--serve');
 
+/**
+ * Create the system tray
+ */
+function createTray() {
+  if (tray) {
+    return;
+  }
+
+  // Get appropriate icon based on platform
+  const iconPath = path.join(__dirname, '..', 'dist', 'logos', 'favicon.256x256.png');
+  const icon = nativeImage.createFromPath(iconPath);
+  
+  tray = new Tray(icon);
+  tray.setToolTip('TensorBlock Desktop');
+  
+  const contextMenu = Menu.buildFromTemplate([
+    { label: 'Open TensorBlock', click: () => { 
+      win?.show(); 
+      win?.setSkipTaskbar(false); // Show in taskbar
+    }},
+    { type: 'separator' },
+    { label: 'Quit', click: () => { app.quit(); } }
+  ]);
+  
+  tray.setContextMenu(contextMenu);
+  
+  tray.on('click', () => {
+    if (win) {
+      if (win.isVisible()) {
+        win.hide();
+        win.setSkipTaskbar(true); // Hide from taskbar
+      } else {
+        win.show();
+        win.setSkipTaskbar(false); // Show in taskbar
+      }
+    }
+  });
+}
+
+/**
+ * Set or remove auto launch on system startup
+ */
+function setAutoLaunch(enable: boolean): boolean {
+  try {
+    if (process.platform === 'win32') {
+      const appPath = app.getPath('exe');
+      const regKey = 'HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Run';
+      const appName = app.getName();
+      
+      if (enable) {
+        // Add to registry to enable auto launch
+        execSync(`reg add ${regKey} /v ${appName} /t REG_SZ /d "${appPath}" /f`);
+      } else {
+        // Remove from registry to disable auto launch
+        execSync(`reg delete ${regKey} /v ${appName} /f`);
+      }
+      return true;
+    } else if (process.platform === 'darwin') {
+      const appPath = app.getPath('exe');
+      const loginItemSettings = app.getLoginItemSettings();
+      
+      // Set login item settings for macOS
+      app.setLoginItemSettings({
+        openAtLogin: enable,
+        path: appPath
+      });
+      
+      return app.getLoginItemSettings().openAtLogin === enable;
+    } else if (process.platform === 'linux') {
+      // For Linux, create or remove a .desktop file in autostart directory
+      const desktopFilePath = path.join(os.homedir(), '.config', 'autostart', `${app.getName()}.desktop`);
+      
+      if (enable) {
+        // Create directory if it doesn't exist
+        const autoStartDir = path.dirname(desktopFilePath);
+        if (!fs.existsSync(autoStartDir)) {
+          fs.mkdirSync(autoStartDir, { recursive: true });
+        }
+        
+        // Create .desktop file
+        const desktopFileContent = `
+          [Desktop Entry]
+          Type=Application
+          Exec=${app.getPath('exe')}
+          Hidden=false
+          NoDisplay=false
+          X-GNOME-Autostart-enabled=true
+          Name=${app.getName()}
+          Comment=${app.getName()} startup script
+          `;
+        fs.writeFileSync(desktopFilePath, desktopFileContent);
+      } else if (fs.existsSync(desktopFilePath)) {
+        // Remove .desktop file
+        fs.unlinkSync(desktopFilePath);
+      }
+      
+      return true;
+    }
+    
+    return false;
+  } catch (error) {
+    console.error('Error setting auto launch:', error);
+    return false;
+  }
+}
+
+/**
+ * Check if app is set to auto launch on system startup
+ */
+function getAutoLaunchEnabled(): boolean {
+  try {
+    if (process.platform === 'win32') {
+      const regKey = 'HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Run';
+      const appName = app.getName();
+      
+      const output = execSync(`reg query ${regKey} /v ${appName} 2>nul`).toString();
+      return output.includes(appName);
+    } else if (process.platform === 'darwin') {
+      return app.getLoginItemSettings().openAtLogin;
+    } else if (process.platform === 'linux') {
+      const desktopFilePath = path.join(os.homedir(), '.config', 'autostart', `${app.getName()}.desktop`);
+      return fs.existsSync(desktopFilePath);
+    }
+    
+    return false;
+  } catch (error) {
+    // If command fails (e.g., key doesn't exist), auto launch is not enabled
+    return false;
+  }
+}
+
 /**
  * Creates the main application window
  */
@@ -29,8 +165,8 @@ function createWindow(): BrowserWindow {
     frame: false,
     fullscreenable: false,
     autoHideMenuBar: true,
-    minWidth: 700,
-    minHeight: 1000,
+    minWidth: 800,
+    minHeight: 700,
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       contextIsolation: true,
@@ -180,7 +316,12 @@ function createWindow(): BrowserWindow {
 
   // Close application
   ipcMain.on('close-app', () => {
-    app.quit();
+    if (closeToTray) {
+      win?.hide();
+      win?.setSkipTaskbar(true);
+    } else {
+      app.quit();
+    }
   });
 
   // Open URL in default browser
@@ -188,6 +329,53 @@ function createWindow(): BrowserWindow {
     shell.openExternal(url);
   });
 
+  // Auto-startup handlers
+  ipcMain.handle('get-auto-launch', () => {
+    return getAutoLaunchEnabled();
+  });
+
+  ipcMain.handle('set-auto-launch', (event, enable) => {
+    return setAutoLaunch(enable);
+  });
+
+  // Tray handlers
+  ipcMain.handle('set-close-to-tray', (event, enable) => {
+    closeToTray = enable;
+    return true;
+  });
+
+  ipcMain.handle('get-close-to-tray', () => {
+    return closeToTray;
+  });
+
+  ipcMain.handle('set-startup-to-tray', (event, enable) => {
+    // Store this preference for the next app start
+    try {
+      const configPath = path.join(app.getPath('userData'), 'config.json');
+      let config = {};
+      
+      if (fs.existsSync(configPath)) {
+        config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+      }
+      
+      config = { ...config, startupToTray: enable };
+      fs.writeFileSync(configPath, JSON.stringify(config));
+      return true;
+    } catch (error) {
+      console.error('Error saving startup to tray setting:', error);
+      return false;
+    }
+  });
+
+  // Listen for window close event
+  win.on('close', (e) => {
+    if (closeToTray) {
+      e.preventDefault();
+      win?.hide();
+      win?.setSkipTaskbar(true);
+    }
+  });
+
   // Disable page refresh in production
   if (process.env.NODE_ENV === 'production') {
     win.webContents.on('before-input-event', (event, input) => {
@@ -293,7 +481,28 @@ try {
   // Initialize app when Electron is ready
   // Added delay to fix black background issue with transparent windows
   // See: https://github.com/electron/electron/issues/15947
-  app.on('ready', () => setTimeout(createWindow, 400));
+  app.on('ready', () => {
+    setTimeout(() => {
+      // Create window
+      win = createWindow();
+      
+      // Create tray
+      createTray();
+      
+      // Check if we should start minimized to tray
+      try {
+        const configPath = path.join(app.getPath('userData'), 'config.json');
+        if (fs.existsSync(configPath)) {
+          const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+          if (config.startupToTray) {
+            win.hide();
+          }
+        }
+      } catch (error) {
+        console.error('Error reading config file:', error);
+      }
+    }, 400);
+  });
 
   // Quit when all windows are closed
   app.on('window-all-closed', () => {
@@ -303,7 +512,10 @@ try {
   // Re-create window if activated and no windows exist
   app.on('activate', () => {
     if (win === null) {
-      createWindow();
+      win = createWindow();
+    } else {
+      win.show();
+      win.setSkipTaskbar(false); // Show in taskbar
     }
   });
 } catch (_e) {
diff --git a/app/preload.ts b/app/preload.ts
index 2f19fba..2f59608 100644
--- a/app/preload.ts
+++ b/app/preload.ts
@@ -29,4 +29,11 @@ contextBridge.exposeInMainWorld('electron', {
   saveFile: (fileBuffer: ArrayBuffer | string, fileName: string, fileType: string) => 
     ipcRenderer.invoke('save-file', { fileBuffer, fileName, fileType }),
   openFile: (filePath: string) => ipcRenderer.invoke('open-file', filePath),
+  
+  // Auto-startup and tray functions
+  getAutoLaunch: () => ipcRenderer.invoke('get-auto-launch'),
+  setAutoLaunch: (enable: boolean) => ipcRenderer.invoke('set-auto-launch', enable),
+  setCloseToTray: (enable: boolean) => ipcRenderer.invoke('set-close-to-tray', enable),
+  getCloseToTray: () => ipcRenderer.invoke('get-close-to-tray'),
+  setStartupToTray: (enable: boolean) => ipcRenderer.invoke('set-startup-to-tray', enable),
 }); 
\ No newline at end of file
diff --git a/src/components/pages/SettingsPage.tsx b/src/components/pages/SettingsPage.tsx
index d7c4c0a..81ac32f 100644
--- a/src/components/pages/SettingsPage.tsx
+++ b/src/components/pages/SettingsPage.tsx
@@ -65,13 +65,31 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
       setHasApiKeyChanged(false);
       lastOpenedSettings.current = true;
       
-      // In a real implementation, we would load these from settings service
-      // This is just for the UI prototype
-      // setStartWithSystem(settings.startWithSystem || false);
-      // setStartupToTray(settings.startupToTray || false);
-      // setCloseToTray(settings.closeToTray || true);
-      // setProxyMode(settings.proxyMode || 'system');
-      // setSendErrorReports(settings.sendErrorReports || true);
+      // Load general settings from settings service
+      setStartWithSystem(settings.startWithSystem || false);
+      setStartupToTray(settings.startupToTray || false);
+      setCloseToTray(settings.closeToTray || true);
+      setProxyMode(settings.proxyMode || 'system');
+      setSendErrorReports(settings.sendErrorReports || true);
+      
+      // Load current auto-start setting from system
+      const checkAutoLaunch = async () => {
+        if (window.electron && window.electron.getAutoLaunch) {
+          const autoLaunchEnabled = await window.electron.getAutoLaunch();
+          setStartWithSystem(autoLaunchEnabled);
+        }
+      };
+      
+      // Load current close-to-tray setting
+      const checkCloseToTray = async () => {
+        if (window.electron && window.electron.getCloseToTray) {
+          const closeToTrayEnabled = await window.electron.getCloseToTray();
+          setCloseToTray(closeToTrayEnabled);
+        }
+      };
+      
+      checkAutoLaunch();
+      checkCloseToTray();
     }
 
     if(!isOpen && lastOpenedSettings.current){
@@ -117,12 +135,24 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
     switch(key) {
       case 'startWithSystem':
         setStartWithSystem(value as boolean);
+        // Apply auto-launch setting to system
+        if (window.electron && window.electron.setAutoLaunch) {
+          window.electron.setAutoLaunch(value as boolean);
+        }
         break;
       case 'startupToTray':
         setStartupToTray(value as boolean);
+        // Store startup-to-tray setting
+        if (window.electron && window.electron.setStartupToTray) {
+          window.electron.setStartupToTray(value as boolean);
+        }
         break;
       case 'closeToTray':
         setCloseToTray(value as boolean);
+        // Apply close-to-tray setting
+        if (window.electron && window.electron.setCloseToTray) {
+          window.electron.setCloseToTray(value as boolean);
+        }
         break;
       case 'proxyMode':
         setProxyMode(value as 'system' | 'custom' | 'none');
@@ -150,13 +180,13 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
       // Update all settings in one go
       await settingsService.updateSettings({
         providers: providerSettings,
-        enableWebSearch_Preview: useWebSearch
-        // In a real implementation, we would save general settings here
-        // startWithSystem,
-        // startupToTray,
-        // closeToTray,
-        // proxyMode,
-        // sendErrorReports
+        enableWebSearch_Preview: useWebSearch,
+        // Save general settings
+        startWithSystem,
+        startupToTray,
+        closeToTray,
+        proxyMode,
+        sendErrorReports
       });
       
       // Refresh models if API key has changed
diff --git a/src/components/settings/GeneralSettings.tsx b/src/components/settings/GeneralSettings.tsx
index 8849b6f..3a593a1 100644
--- a/src/components/settings/GeneralSettings.tsx
+++ b/src/components/settings/GeneralSettings.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface GeneralSettingsProps {
@@ -22,6 +22,19 @@ export const GeneralSettings: React.FC<GeneralSettingsProps> = ({
 }) => {
   const { t } = useTranslation();
   const [customProxyUrl, setCustomProxyUrl] = useState<string>('');
+  const [isWindows, setIsWindows] = useState(false);
+  
+  // Check if running on Windows platform
+  useEffect(() => {
+    const checkPlatform = async () => {
+      if (window.electron && window.electron.getPlatform) {
+        const platform = await window.electron.getPlatform();
+        setIsWindows(platform === 'win32');
+      }
+    };
+    
+    checkPlatform();
+  }, []);
 
   const handleProxyModeChange = (mode: 'system' | 'custom' | 'none') => {
     onSettingChange('proxyMode', mode);
diff --git a/src/services/settings-service.ts b/src/services/settings-service.ts
index d8c8a43..72dfbfb 100644
--- a/src/services/settings-service.ts
+++ b/src/services/settings-service.ts
@@ -239,6 +239,13 @@ const DEFAULT_SETTINGS: UserSettings = {
   useStreaming: true,
   webSearchEnabled: false,
   enableWebSearch_Preview: false,
+  // General settings
+  startWithSystem: false,
+  startupToTray: false,
+  closeToTray: true,
+  proxyMode: 'system',
+  customProxyUrl: '',
+  sendErrorReports: true,
 };
 
 /**
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 74f1d18..9527370 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -10,6 +10,13 @@ export interface UserSettings {
   useStreaming: boolean;
   webSearchEnabled: boolean;
   enableWebSearch_Preview: boolean;
+  // General settings
+  startWithSystem?: boolean;
+  startupToTray?: boolean;
+  closeToTray?: boolean;
+  proxyMode?: 'system' | 'custom' | 'none';
+  customProxyUrl?: string;
+  sendErrorReports?: boolean;
 }
 
 /**
diff --git a/src/types/window.d.ts b/src/types/window.d.ts
index 09b725b..934971d 100644
--- a/src/types/window.d.ts
+++ b/src/types/window.d.ts
@@ -24,5 +24,11 @@ interface Window {
       success: boolean;
       error?: string;
     }>;
+    // Auto-startup and tray functions
+    getAutoLaunch: () => Promise<boolean>;
+    setAutoLaunch: (enable: boolean) => Promise<boolean>;
+    setCloseToTray: (enable: boolean) => Promise<boolean>;
+    getCloseToTray: () => Promise<boolean>;
+    setStartupToTray: (enable: boolean) => Promise<boolean>;
   };
 } 
\ No newline at end of file

From 57e490a9ccb486ca147a95a3164e4b9aeaa0956c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Fri, 2 May 2025 21:54:23 +0800
Subject: [PATCH 03/27] Fix Bug: Cannot quit by the tray button

---
 app/main.ts | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/main.ts b/app/main.ts
index 6ae98ce..9378fc9 100644
--- a/app/main.ts
+++ b/app/main.ts
@@ -13,6 +13,7 @@ let tray: Tray | null = null;
 
 // Settings
 let closeToTray = true;
+let forceQuit = false; // Flag to indicate we're trying to actually quit
 
 // Check if app is running in development mode
 const args = process.argv.slice(1);
@@ -39,7 +40,10 @@ function createTray() {
       win?.setSkipTaskbar(false); // Show in taskbar
     }},
     { type: 'separator' },
-    { label: 'Quit', click: () => { app.quit(); } }
+    { label: 'Quit', click: () => { 
+      forceQuit = true; // Set flag to bypass close-to-tray
+      app.quit(); 
+    }}
   ]);
   
   tray.setContextMenu(contextMenu);
@@ -316,10 +320,11 @@ function createWindow(): BrowserWindow {
 
   // Close application
   ipcMain.on('close-app', () => {
-    if (closeToTray) {
+    if (closeToTray && !forceQuit) {
       win?.hide();
-      win?.setSkipTaskbar(true);
+      win?.setSkipTaskbar(true); // Hide from taskbar
     } else {
+      forceQuit = true; // Ensure we're really quitting
       app.quit();
     }
   });
@@ -369,10 +374,10 @@ function createWindow(): BrowserWindow {
 
   // Listen for window close event
   win.on('close', (e) => {
-    if (closeToTray) {
+    if (closeToTray && !forceQuit) {
       e.preventDefault();
       win?.hide();
-      win?.setSkipTaskbar(true);
+      win?.setSkipTaskbar(true); // Hide from taskbar
     }
   });
 
@@ -478,6 +483,11 @@ function getCPUName() {
 try {
   app.commandLine.appendSwitch('class', 'tensorblock-desktop');
 
+  // Set force quit flag when app is about to quit
+  app.on('before-quit', () => {
+    forceQuit = true;
+  });
+
   // Initialize app when Electron is ready
   // Added delay to fix black background issue with transparent windows
   // See: https://github.com/electron/electron/issues/15947

From bd784016bc9522f2b35b1be0481cb0bd51ea75d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Fri, 2 May 2025 22:07:55 +0800
Subject: [PATCH 04/27] Fix Linter Error

---
 src/components/settings/GeneralSettings.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/settings/GeneralSettings.tsx b/src/components/settings/GeneralSettings.tsx
index 3a593a1..86582a0 100644
--- a/src/components/settings/GeneralSettings.tsx
+++ b/src/components/settings/GeneralSettings.tsx
@@ -22,6 +22,7 @@ export const GeneralSettings: React.FC<GeneralSettingsProps> = ({
 }) => {
   const { t } = useTranslation();
   const [customProxyUrl, setCustomProxyUrl] = useState<string>('');
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isWindows, setIsWindows] = useState(false);
   
   // Check if running on Windows platform

From 92a30255683d431b3582c34d1efa07976e87fb5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sat, 3 May 2025 12:04:17 +0800
Subject: [PATCH 05/27] Fix: Move Language Settings to General Settings

---
 src/components/pages/SettingsPage.tsx        |  24 +---
 src/components/settings/GeneralSettings.tsx  | 129 ++++++-------------
 src/components/settings/LanguageSettings.tsx |  46 -------
 src/components/settings/index.ts             |   1 -
 4 files changed, 45 insertions(+), 155 deletions(-)
 delete mode 100644 src/components/settings/LanguageSettings.tsx

diff --git a/src/components/pages/SettingsPage.tsx b/src/components/pages/SettingsPage.tsx
index 81ac32f..15017ec 100644
--- a/src/components/pages/SettingsPage.tsx
+++ b/src/components/pages/SettingsPage.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Server, MessageSquare, Languages, Sliders } from 'lucide-react';
+import { Server, MessageSquare, Sliders } from 'lucide-react';
 import { SettingsService } from '../../services/settings-service';
 import { ProviderSettings } from '../../types/settings';
-import { ApiManagement, ChatSettings, LanguageSettings, GeneralSettings } from '../settings';
+import { ApiManagement, ChatSettings, GeneralSettings } from '../settings';
 import { DatabaseIntegrationService } from '../../services/database-integration';
 import { AIService } from '../../services/ai-service';
 import { v4 as uuidv4 } from 'uuid';
@@ -13,7 +13,7 @@ interface SettingsPageProps {
   isOpen: boolean;
 }
 
-type SettingsTab = 'api' | 'models' | 'chat' | 'language' | 'general';
+type SettingsTab = 'api' | 'models' | 'chat' | 'general';
 
 export const SettingsPage: React.FC<SettingsPageProps> = ({
   isOpen,
@@ -321,16 +321,6 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
               <MessageSquare size={18} className="mr-2" />
               {t('chat.sendMessage')}
             </button>
-
-            <button
-              className={`flex items-center w-full px-4 py-3 text-left transition-all duration-200 ${
-                activeTab === 'language' ? 'settings-category-selected-item settings-category-selected-item-text font-medium' : 'settings-category-item settings-category-item-text'
-              }`}
-              onClick={() => setActiveTab('language')}
-            >
-              <Languages size={18} className="mr-2" />
-              {t('settings.language')}
-            </button>
           </div>
         </div>
         
@@ -371,14 +361,6 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
                 onSaveSettings={handleSave}
               />
             )}
-            
-            {/* Language Settings Tab */}
-            {activeTab === 'language' && (
-              <div className="p-6">
-                <h1 className="mb-6 text-2xl font-semibold">{t('settings.language')}</h1>
-                <LanguageSettings />
-              </div>
-            )}
           </div>
         </div>
       </div>
diff --git a/src/components/settings/GeneralSettings.tsx b/src/components/settings/GeneralSettings.tsx
index 86582a0..9271215 100644
--- a/src/components/settings/GeneralSettings.tsx
+++ b/src/components/settings/GeneralSettings.tsx
@@ -15,15 +15,13 @@ export const GeneralSettings: React.FC<GeneralSettingsProps> = ({
   startWithSystem,
   startupToTray,
   closeToTray,
-  proxyMode,
-  sendErrorReports,
   onSettingChange,
   onSaveSettings
 }) => {
-  const { t } = useTranslation();
-  const [customProxyUrl, setCustomProxyUrl] = useState<string>('');
+  const { t, i18n } = useTranslation();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isWindows, setIsWindows] = useState(false);
+  const [currentLanguage, setCurrentLanguage] = useState(i18n.language);
   
   // Check if running on Windows platform
   useEffect(() => {
@@ -37,16 +35,35 @@ export const GeneralSettings: React.FC<GeneralSettingsProps> = ({
     checkPlatform();
   }, []);
 
-  const handleProxyModeChange = (mode: 'system' | 'custom' | 'none') => {
-    onSettingChange('proxyMode', mode);
-    onSaveSettings();
-  };
+  // Update currentLanguage when i18n.language changes
+  useEffect(() => {
+    setCurrentLanguage(i18n.language);
+  }, [i18n.language]);
+
+  // const handleProxyModeChange = (mode: 'system' | 'custom' | 'none') => {
+  //   onSettingChange('proxyMode', mode);
+  //   onSaveSettings();
+  // };
 
   const handleToggleChange = (key: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
     onSettingChange(key, e.target.checked);
     onSaveSettings();
   };
 
+  const handleLanguageChange = (langCode: string) => {
+    i18n.changeLanguage(langCode);
+    setCurrentLanguage(langCode);
+  };
+
+  const languages = [
+    { code: 'en', name: 'English' },
+    { code: 'zh_CN', name: '简体中文' },
+    { code: 'zh_TW', name: '繁體中文' },
+    { code: 'ja', name: '日本語' },
+    { code: 'ko', name: '한국어' },
+    { code: 'es', name: 'Español' }
+  ];
+
   return (
     <div className="flex flex-col h-full p-4">
       <div className="flex-1">
@@ -105,93 +122,31 @@ export const GeneralSettings: React.FC<GeneralSettingsProps> = ({
           </div>
         </div>
         
-        {/* Network Settings */}
+        {/* Language Settings */}
         <div className="p-4 mb-4 settings-section">
-          <h3 className="mb-4 text-lg font-medium settings-section-title">{t('settings.networkProxy')}</h3>
+          <h3 className="mb-4 text-lg font-medium settings-section-title">{t('settings.language')}</h3>
           
-          <div className="p-3 space-y-4 settings-radio-group">
-            <div className="flex items-center">
-              <input
-                type="radio"
-                id="proxy-system"
-                name="proxy-mode"
-                checked={proxyMode === 'system'}
-                onChange={() => handleProxyModeChange('system')}
-                className="w-4 h-4 text-blue-600 form-radio"
-              />
-              <label htmlFor="proxy-system" className={`ml-2 text-sm font-medium ${proxyMode === 'system' ? 'settings-radio-item-active' : 'settings-radio-item'}`}>
-                {t('settings.systemProxy')}
-              </label>
-            </div>
-            
-            <div className="flex items-center">
-              <input
-                type="radio"
-                id="proxy-custom"
-                name="proxy-mode"
-                checked={proxyMode === 'custom'}
-                onChange={() => handleProxyModeChange('custom')}
-                className="w-4 h-4 text-blue-600 form-radio"
-              />
-              <label htmlFor="proxy-custom" className={`ml-2 text-sm font-medium ${proxyMode === 'custom' ? 'settings-radio-item-active' : 'settings-radio-item'}`}>
-                {t('settings.customProxy')}
-              </label>
-            </div>
-            
-            {proxyMode === 'custom' && (
-              <div className="pl-6 mt-2">
+          <div className="space-y-4">
+            {languages.map((lang) => (
+              <div key={lang.code} className="flex items-center">
                 <input
-                  type="text"
-                  value={customProxyUrl}
-                  onChange={(e) => setCustomProxyUrl(e.target.value)}
-                  onBlur={() => {
-                    onSettingChange('customProxyUrl', customProxyUrl);
-                    onSaveSettings();
-                  }}
-                  placeholder="http://proxy.example.com:8080"
-                  className="w-full p-2 input-box"
+                  type="radio"
+                  id={`lang-${lang.code}`}
+                  name="language"
+                  value={lang.code}
+                  checked={currentLanguage === lang.code}
+                  onChange={() => handleLanguageChange(lang.code)}
+                  className="w-4 h-4 text-blue-600 form-radio"
                 />
+                <label htmlFor={`lang-${lang.code}`} className="ml-2 text-sm font-medium settings-toggle-label">
+                  {lang.name}
+                </label>
               </div>
-            )}
-            
-            <div className="flex items-center">
-              <input
-                type="radio"
-                id="proxy-none"
-                name="proxy-mode"
-                checked={proxyMode === 'none'}
-                onChange={() => handleProxyModeChange('none')}
-                className="w-4 h-4 text-blue-600 form-radio"
-              />
-              <label htmlFor="proxy-none" className={`ml-2 text-sm font-medium ${proxyMode === 'none' ? 'settings-radio-item-active' : 'settings-radio-item'}`}>
-                {t('settings.noProxy')}
-              </label>
-            </div>
+            ))}
           </div>
         </div>
         
-        {/* Privacy Settings */}
-        <div className="p-4 mb-4 settings-section">
-          <h3 className="mb-4 text-lg font-medium settings-section-title">{t('settings.privacy')}</h3>
-          
-          <div className="space-y-4">
-            <div className="flex items-center">
-              <input
-                type="checkbox"
-                id="send-error-reports"
-                checked={sendErrorReports}
-                onChange={handleToggleChange('sendErrorReports')}
-                className="w-4 h-4 checkbox-input"
-              />
-              <label htmlFor="send-error-reports" className="ml-2 text-sm font-medium settings-toggle-label">
-                {t('settings.sendErrorReports')}
-              </label>
-            </div>
-            <p className="text-xs settings-toggle-description">
-              {t('settings.sendErrorReports_description')}
-            </p>
-          </div>
-        </div>
+        {/* Network Proxy and Privacy sections are hidden as requested */}
       </div>
     </div>
   );
diff --git a/src/components/settings/LanguageSettings.tsx b/src/components/settings/LanguageSettings.tsx
deleted file mode 100644
index 5bdfa28..0000000
--- a/src/components/settings/LanguageSettings.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useState, useEffect } from 'react';
-
-export const LanguageSettings = () => {
-  const { t, i18n } = useTranslation();
-  const [currentLanguage, setCurrentLanguage] = useState(i18n.language);
-  
-  const languages = [
-    { code: 'en', name: 'English' },
-    { code: 'zh_CN', name: '简体中文' },
-    { code: 'zh_TW', name: '繁體中文' },
-    { code: 'ja', name: '日本語' },
-    { code: 'ko', name: '한국어' },
-    { code: 'es', name: 'Español' }
-  ];
-  
-  const handleLanguageChange = (langCode: string) => {
-    i18n.changeLanguage(langCode);
-    setCurrentLanguage(langCode);
-  };
-
-  useEffect(() => {
-    setCurrentLanguage(i18n.language);
-  }, [i18n.language]);
-
-  return (
-    <div className="p-4 mb-4 border border-gray-200 rounded-md dark:border-gray-700">
-      <h2 className="mb-4 text-lg font-semibold">{t('settings.language')}</h2>
-      <div className="flex flex-col space-y-2">
-        {languages.map((lang) => (
-          <label key={lang.code} className="flex items-center space-x-2 cursor-pointer">
-            <input
-              type="radio"
-              name="language"
-              value={lang.code}
-              checked={currentLanguage === lang.code}
-              onChange={() => handleLanguageChange(lang.code)}
-              className="w-4 h-4 text-blue-600 form-radio"
-            />
-            <span>{lang.name}</span>
-          </label>
-        ))}
-      </div>
-    </div>
-  );
-}; 
\ No newline at end of file
diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts
index 786ac54..bd6824a 100644
--- a/src/components/settings/index.ts
+++ b/src/components/settings/index.ts
@@ -1,4 +1,3 @@
 export * from './ApiManagement';
 export * from './ChatSettings';
-export * from './LanguageSettings';
 export * from './GeneralSettings';
\ No newline at end of file

From f20fcd8c2dd919cbb91293a6360c7239a0acfa4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sat, 3 May 2025 16:46:17 +0800
Subject: [PATCH 06/27] Function: Adding MCP Server

---
 src/App.tsx                              |   2 +
 src/components/chat/ChatMessageArea.tsx  |  95 +++++++-
 src/components/layout/Sidebar.tsx        |  17 +-
 src/components/pages/ChatPage.tsx        |  76 +++++--
 src/components/pages/MCPServerPage.tsx   | 278 +++++++++++++++++++++++
 src/locales/en/translation.json          |  22 +-
 src/locales/es/translation.json          |  22 +-
 src/locales/ja/translation.json          |  22 +-
 src/locales/ko/translation.json          |  22 +-
 src/locales/zh-CN/translation.json       |  22 +-
 src/locales/zh-TW/translation.json       |  22 +-
 src/services/ai-service.ts               |  27 +++
 src/services/chat-service.ts             | 145 ++++++++++++
 src/services/core/ai-service-provider.ts |   2 +
 src/services/mcp-service.ts              | 105 +++++++++
 src/services/mcp-tool-adapter.ts         | 196 ++++++++++++++++
 src/services/settings-service.ts         |  71 +++++-
 src/types/capabilities.ts                |   1 +
 src/types/settings.ts                    |  14 ++
 19 files changed, 1136 insertions(+), 25 deletions(-)
 create mode 100644 src/components/pages/MCPServerPage.tsx
 create mode 100644 src/services/mcp-service.ts
 create mode 100644 src/services/mcp-tool-adapter.ts

diff --git a/src/App.tsx b/src/App.tsx
index 9f552d6..9fb46a6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { ChatPage } from './components/pages/ChatPage';
 import { ImageGenerationPage } from './components/pages/ImageGenerationPage';
 import { TranslationPage } from './components/pages/TranslationPage';
 import { FileManagementPage } from './components/pages/FileManagementPage';
+import { MCPServerPage } from './components/pages/MCPServerPage';
 import MainLayout from './components/layout/MainLayout';
 import DatabaseInitializer from './components/core/DatabaseInitializer';
 
@@ -38,6 +39,7 @@ function App() {
         {activePage === 'image' && <ImageGenerationPage />}
         {activePage === 'translation' && <TranslationPage />}
         {activePage === 'files' && <FileManagementPage />}
+        {activePage === 'mcpserver' && <MCPServerPage />}
       </MainLayout>
     </DatabaseInitializer>
   );
diff --git a/src/components/chat/ChatMessageArea.tsx b/src/components/chat/ChatMessageArea.tsx
index 6bb96c1..9d3e5b5 100644
--- a/src/components/chat/ChatMessageArea.tsx
+++ b/src/components/chat/ChatMessageArea.tsx
@@ -1,6 +1,7 @@
 import React, { useState, FormEvent, useRef, useEffect } from 'react';
 import { Conversation, Message } from '../../types/chat';
-import { Send, Square, Copy, Pencil, Loader2, Globe, RefreshCw, Check, X } from 'lucide-react';
+import { MCPServerSettings } from '../../types/settings';
+import { Send, Square, Copy, Pencil, Loader2, Globe, RefreshCw, Check, X, ServerCog } from 'lucide-react';
 import MarkdownContent from './MarkdownContent';
 import MessageToolboxMenu, { ToolboxAction } from '../ui/MessageToolboxMenu';
 import { MessageHelper } from '../../services/message-helper';
@@ -26,6 +27,9 @@ interface ChatMessageAreaProps {
   isCurrentlyStreaming?: boolean;
   selectedProvider: string;
   selectedModel: string;
+  mcpServers?: Record<string, MCPServerSettings>;
+  selectedMcpServers?: string[];
+  onToggleMcpServer?: (serverId: string) => void;
 }
 
 export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
@@ -40,6 +44,9 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   isCurrentlyStreaming = false,
   selectedProvider,
   selectedModel,
+  mcpServers,
+  selectedMcpServers,
+  onToggleMcpServer,
 }) => {
   const { t } = useTranslation();
   const [inputValue, setInput] = useState('');
@@ -54,6 +61,9 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   const [webSearchActive, setWebSearchActive] = useState(false);
   const [isWebSearchPreviewEnabled, setIsWebSearchPreviewEnabled] = useState(false);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [mcpPopupOpen, setMcpPopupOpen] = useState(false);
+  const mcpButtonRef = useRef<HTMLButtonElement>(null);
+  const mcpPopupRef = useRef<HTMLDivElement>(null);
   
   // Scroll to bottom when messages change
   useEffect(() => {
@@ -278,6 +288,25 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
     textarea.style.height = `${newHeight}px`;
   }
 
+  // Add useEffect to handle click outside for MCP popup
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        mcpPopupRef.current && 
+        !mcpPopupRef.current.contains(event.target as Node) &&
+        mcpButtonRef.current && 
+        !mcpButtonRef.current.contains(event.target as Node)
+      ) {
+        setMcpPopupOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   // If no active conversation is selected
   if (!activeConversation) {
     return (
@@ -552,6 +581,70 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
             webSearchElement
           }
 
+          {/* MCP Servers dropdown */}
+          {mcpServers && Object.keys(mcpServers).length > 0 && (
+            <div className="relative">
+              <button
+                type="button"
+                onClick={() => setMcpPopupOpen(!mcpPopupOpen)}
+                ref={mcpButtonRef}
+                className={`flex items-center justify-center w-fit h-8 p-2 transition-all duration-200 rounded-full outline outline-2
+                  ${selectedMcpServers && selectedMcpServers.length > 0 ? 'bg-blue-50 outline-blue-300 hover:bg-blue-200 hover:outline hover:outline-blue-500' : 'bg-white outline-gray-100 hover:bg-blue-50 hover:outline hover:outline-blue-300'}`}
+                aria-label="MCP Servers"
+                title="MCP Servers"
+              >
+                <ServerCog className={`mr-1 ${selectedMcpServers && selectedMcpServers.length > 0 ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`} size={20} />
+                <span className={`text-sm font-light ${selectedMcpServers && selectedMcpServers.length > 0 ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`}>
+                  MCP Tools {selectedMcpServers && selectedMcpServers.length > 0 ? `(${selectedMcpServers.length})` : ''}
+                </span>
+              </button>
+              
+              {mcpPopupOpen && (
+                <div 
+                  ref={mcpPopupRef}
+                  className="absolute z-10 mt-2 image-generation-popup"
+                  style={{ bottom: '100%', left: 0, minWidth: '220px' }}
+                >
+                  <div className="p-2">
+                    <div className="mb-2 text-sm font-medium text-gray-700">
+                      {t('chat.availableMcpServers')}
+                    </div>
+                    <div className="overflow-y-auto max-h-60">
+                      {Object.values(mcpServers).map((server) => (
+                        <div
+                          key={server.id}
+                          className={`flex items-center px-3 py-2 cursor-pointer rounded-md ${
+                            selectedMcpServers?.includes(server.id)
+                              ? 'image-generation-provider-selected'
+                              : 'image-generation-provider-item'
+                          }`}
+                          onClick={() => onToggleMcpServer?.(server.id)}
+                        >
+                          <ServerCog className="w-5 h-5 mr-2" />
+                          <div className="flex flex-col">
+                            <span className="text-sm font-medium">{server.name}</span>
+                            {server.isDefault && (
+                              <span className="text-xs text-gray-500">{t('mcpServer.default')}</span>
+                            )}
+                            {server.isImageGeneration && (
+                              <span className="text-xs text-gray-500">{t('mcpServer.imageGeneration')}</span>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                      
+                      {Object.keys(mcpServers).length === 0 && (
+                        <div className="px-3 py-2 text-sm text-gray-500">
+                          {t('chat.noMcpServersAvailable')}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
           <span className={`flex-1 hidden text-xs text-center pt-4 text-gray-300 md:block truncate pr-6 lg:pr-12`}>
             {t('chat.pressShiftEnterToChangeLines')}
           </span>
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index ae492e7..2f97b9e 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MessageSquare, Settings, Image, Languages, FolderClosed } from 'lucide-react';
+import { MessageSquare, Settings, Image, Languages, FolderClosed, ServerCog } from 'lucide-react';
 
 interface SidebarProps {
   activePage: string;
@@ -31,6 +31,9 @@ export const Sidebar: React.FC<SidebarProps> = ({
     else if(activePage === 'files'){
       return 'files';
     }
+    else if(activePage === 'mcpserver'){
+      return 'mcpserver';
+    }
 
     return '';
   }
@@ -87,6 +90,18 @@ export const Sidebar: React.FC<SidebarProps> = ({
         >
           <FolderClosed size={22} />
         </button>
+
+        <button 
+          className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all duration-200 ${
+            getActivePage() === 'mcpserver' 
+              ? 'navigation-item-selected navigation-item-text' 
+              : 'navigation-item navigation-item-text'
+          }`}
+          onClick={() => onChangePage('mcpserver')}
+          aria-label="MCP Servers"
+        >
+          <ServerCog size={22} />
+        </button>
       </div>
 
       {/* Settings button at bottom */}
diff --git a/src/components/pages/ChatPage.tsx b/src/components/pages/ChatPage.tsx
index 15a4151..3a22fc9 100644
--- a/src/components/pages/ChatPage.tsx
+++ b/src/components/pages/ChatPage.tsx
@@ -5,6 +5,7 @@ import { Conversation, ConversationFolder } from '../../types/chat';
 import { SETTINGS_CHANGE_EVENT, SettingsService } from '../../services/settings-service';
 import { ChatService } from '../../services/chat-service';
 import { AIService } from '../../services/ai-service';
+import { MCPServerSettings } from '../../types/settings';
 
 export const ChatPage = () => {
   const [conversations, setConversations] = useState<Conversation[]>([]);
@@ -17,6 +18,8 @@ export const ChatPage = () => {
   const [selectedModel, setSelectedModel] = useState('');
   const [selectedProvider, setSelectedProvider] = useState('');
   const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
+  const [mcpServers, setMcpServers] = useState<Record<string, MCPServerSettings>>({});
+  const [selectedMcpServers, setSelectedMcpServers] = useState<string[]>([]);
 
   // Initialize the services
   useEffect(() => {
@@ -43,6 +46,10 @@ export const ChatPage = () => {
         const foldersList = chatService.getFolders();
         setFolders(foldersList);
         
+        // Load MCP servers
+        const mcpServersList = chatService.getAvailableMCPServers();
+        setMcpServers(mcpServersList);
+        
         // Set active conversation from chat service
         const activeId = chatService.getActiveConversationId();
         if (activeId) {
@@ -65,6 +72,22 @@ export const ChatPage = () => {
     
   }, [isServiceInitialized]);
 
+  // Load MCP servers when settings change
+  useEffect(() => {
+    const handleSettingsChange = () => {
+      if (chatServiceRef.current) {
+        const mcpServersList = chatServiceRef.current.getAvailableMCPServers();
+        setMcpServers(mcpServersList);
+      }
+    };
+    
+    window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+    
+    return () => {
+      window.removeEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+    };
+  }, []);
+
   // Load active conversation details when selected
   useEffect(() => {
     if (activeConversationId && isServiceInitialized && chatServiceRef.current) {
@@ -206,25 +229,32 @@ export const ChatPage = () => {
     
     try {
       const chatService = chatServiceRef.current;
-
-      // Send user message with streaming
-      await chatService.sendMessage(
-        content, 
-        activeConversationId,
-        true,
-        (updatedConversation) => {
-          setConversations(updatedConversation);
-        }
-      );
       
+      // Check if there are selected MCP servers to use
+      if (selectedMcpServers.length > 0) {
+        // Send message with MCP tools
+        await chatService.sendMessageWithMCPTools(
+          content,
+          activeConversationId,
+          selectedMcpServers,
+          true,
+          (updatedConversation) => {
+            setConversations(updatedConversation);
+          }
+        );
+      } else {
+        // Send regular message
+        await chatService.sendMessage(
+          content, 
+          activeConversationId,
+          true,
+          (updatedConversation) => {
+            setConversations(updatedConversation);
+          }
+        );
+      }
     } catch (err) {
       console.error('Error sending streaming message:', err);
-      
-      // // If streaming fails, we'll try to fall back to regular mode
-      // const error = err as Error;
-      // if (error.message && error.message.includes('does not support streaming')) {
-      //   await handleSendMessage(content);
-      // }
     }
   };
 
@@ -368,6 +398,17 @@ export const ChatPage = () => {
     }
   };
 
+  // Toggle selection of an MCP server
+  const handleToggleMcpServer = (serverId: string) => {
+    setSelectedMcpServers(prev => {
+      if (prev.includes(serverId)) {
+        return prev.filter(id => id !== serverId);
+      } else {
+        return [...prev, serverId];
+      }
+    });
+  };
+
   return (
     <div className="flex flex-col w-full h-full bg-white">
 
@@ -406,6 +447,9 @@ export const ChatPage = () => {
             isCurrentlyStreaming={chatServiceRef.current?.isCurrentlyStreaming(activeConversationId) || false}
             selectedProvider={selectedProvider}
             selectedModel={selectedModel}
+            mcpServers={mcpServers}
+            selectedMcpServers={selectedMcpServers}
+            onToggleMcpServer={handleToggleMcpServer}
           />
         </div>
       </div>
diff --git a/src/components/pages/MCPServerPage.tsx b/src/components/pages/MCPServerPage.tsx
new file mode 100644
index 0000000..60f663d
--- /dev/null
+++ b/src/components/pages/MCPServerPage.tsx
@@ -0,0 +1,278 @@
+import React, { useState, useEffect } from 'react';
+import { Plus, Edit, Trash2, Server } from 'lucide-react';
+import { MCPServerSettings } from '../../types/settings';
+import { MCPService } from '../../services/mcp-service';
+import { SETTINGS_CHANGE_EVENT } from '../../services/settings-service';
+import { useTranslation } from '../../hooks/useTranslation';
+
+interface MCPServerFormProps {
+  server?: MCPServerSettings;
+  onSave: (name: string, type: 'sse' | 'stdio' | 'streamableHttp', url: string, headers?: Record<string, string>) => void;
+  onCancel: () => void;
+}
+
+const MCPServerForm: React.FC<MCPServerFormProps> = ({ server, onSave, onCancel }) => {
+  const { t } = useTranslation();
+  const [name, setName] = useState(server?.name || '');
+  const [type, setType] = useState<'sse' | 'stdio' | 'streamableHttp'>(server?.type || 'sse');
+  const [url, setUrl] = useState(server?.url || '');
+  const [headers, setHeaders] = useState<string>(server?.headers ? JSON.stringify(server.headers, null, 2) : '{}');
+  const [isValid, setIsValid] = useState(false);
+
+  useEffect(() => {
+    setIsValid(name.trim() !== '' && url.trim() !== '');
+  }, [name, url]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    let parsedHeaders: Record<string, string> | undefined;
+    try {
+      parsedHeaders = JSON.parse(headers);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (error) {
+      alert('Invalid JSON in headers field');
+      return;
+    }
+    
+    onSave(name, type, url, parsedHeaders);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="p-4 space-y-4 bg-white border rounded-lg">
+      <div>
+        <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="name">
+          {t('mcpServer.serverName')}
+        </label>
+        <input
+          id="name"
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+          placeholder={t('mcpServer.serverNamePlaceholder')}
+          required
+        />
+      </div>
+
+      <div>
+        <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="type">
+          {t('mcpServer.transportType')}
+        </label>
+        <select
+          id="type"
+          value={type}
+          onChange={(e) => setType(e.target.value as 'sse' | 'stdio' | 'streamableHttp')}
+          className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+        >
+          <option value="sse">SSE (Server-Sent Events)</option>
+          <option value="stdio">Stdio</option>
+          <option value="streamableHttp">Streamable HTTP</option>
+        </select>
+      </div>
+
+      <div>
+        <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="url">
+          {t('mcpServer.serverURL')}
+        </label>
+        <input
+          id="url"
+          type="text"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+          placeholder={t('mcpServer.serverURLPlaceholder')}
+          required
+        />
+      </div>
+
+      <div>
+        <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="headers">
+          {t('mcpServer.headers')}
+        </label>
+        <textarea
+          id="headers"
+          value={headers}
+          onChange={(e) => setHeaders(e.target.value)}
+          className="w-full p-2 font-mono text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+          rows={5}
+          placeholder='{"Authorization": "Bearer your-token"}'
+        />
+      </div>
+
+      <div className="flex justify-end space-x-2">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="px-4 py-2 text-gray-600 transition-colors bg-gray-200 rounded-md hover:bg-gray-300"
+        >
+          {t('common.cancel')}
+        </button>
+        <button
+          type="submit"
+          disabled={!isValid}
+          className="px-4 py-2 text-white rounded-md confirm-btn disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {t('common.save')}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export const MCPServerPage: React.FC = () => {
+  const { t } = useTranslation();
+  const [servers, setServers] = useState<Record<string, MCPServerSettings>>({});
+  const [showForm, setShowForm] = useState(false);
+  const [editingServer, setEditingServer] = useState<MCPServerSettings | undefined>(undefined);
+  const mcpService = MCPService.getInstance();
+
+  useEffect(() => {
+    loadServers();
+    
+    window.addEventListener(SETTINGS_CHANGE_EVENT, loadServers);
+    return () => {
+      window.removeEventListener(SETTINGS_CHANGE_EVENT, loadServers);
+    };
+  }, []);
+
+  const loadServers = () => {
+    const mcpServers = mcpService.getMCPServers();
+    setServers(mcpServers);
+  };
+
+  const handleAddServer = () => {
+    setEditingServer(undefined);
+    setShowForm(true);
+  };
+
+  const handleEditServer = (server: MCPServerSettings) => {
+    setEditingServer(server);
+    setShowForm(true);
+  };
+
+  const handleDeleteServer = async (id: string) => {
+    try {
+      await mcpService.deleteMCPServer(id);
+      loadServers();
+    } catch (error) {
+      if (error instanceof Error) {
+        alert(error.message);
+      } else {
+        alert('Failed to delete server');
+      }
+    }
+  };
+
+  const handleSaveServer = async (name: string, type: 'sse' | 'stdio' | 'streamableHttp', url: string, headers?: Record<string, string>) => {
+    try {
+      if (editingServer) {
+        // Update existing server
+        const updatedServer: MCPServerSettings = {
+          ...editingServer,
+          name,
+          type,
+          url,
+          headers
+        };
+        await mcpService.updateMCPServer(updatedServer);
+      } else {
+        // Create new server
+        await mcpService.createMCPServer(name, type, url, headers);
+      }
+      
+      setShowForm(false);
+      loadServers();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (error) {
+      alert('Failed to save server');
+    }
+  };
+
+  const handleCancelForm = () => {
+    setShowForm(false);
+    setEditingServer(undefined);
+  };
+
+  return (
+    <div className="flex flex-col w-full h-full bg-white">
+      <div className="w-full p-6 overflow-y-auto">
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-2xl font-semibold">{t('mcpServer.title')}</h1>
+          <button
+            onClick={handleAddServer}
+            className="flex items-center px-4 py-2 text-white rounded-md confirm-btn"
+          >
+            <Plus size={18} className="mr-1" />
+            {t('mcpServer.addServer')}
+          </button>
+        </div>
+
+        {showForm ? (
+          <MCPServerForm 
+            server={editingServer} 
+            onSave={handleSaveServer} 
+            onCancel={handleCancelForm} 
+          />
+        ) : (
+          <div className="space-y-4">
+            {Object.keys(servers).length === 0 ? (
+              <div className="py-8 text-center text-gray-500">
+                <Server size={48} className="mx-auto mb-4" />
+                <p>{t('mcpServer.noServers')}</p>
+                <p className="text-sm">{t('mcpServer.addServerPrompt')}</p>
+              </div>
+            ) : (
+              Object.values(servers).map((server) => (
+                <div 
+                  key={server.id} 
+                  className="flex flex-row items-center justify-between p-4 bg-white border rounded-lg"
+                >
+                  <div className="flex-1">
+                    <div className="flex items-center">
+                      <h3 className="text-lg font-medium">{server.name}</h3>
+                      {server.isDefault && (
+                        <span className="ml-2 px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-700">
+                          {t('mcpServer.default')}
+                        </span>
+                      )}
+                      {server.isImageGeneration && (
+                        <span className="ml-2 px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700">
+                          {t('mcpServer.imageGeneration')}
+                        </span>
+                      )}
+                    </div>
+                    <p className="mt-1 text-sm text-gray-500">
+                      {server.type.toUpperCase()} | {server.url}
+                    </p>
+                  </div>
+                  
+                  <div className="flex space-x-2">
+                    <button
+                      onClick={() => handleEditServer(server)}
+                      className="p-2 text-gray-500 transition-colors rounded-full hover:text-blue-500 hover:bg-blue-50"
+                      disabled={server.isDefault}
+                      title={server.isDefault ? t('mcpServer.cannotEditDefault') : t('common.edit')}
+                    >
+                      <Edit size={18} />
+                    </button>
+                    <button
+                      onClick={() => handleDeleteServer(server.id)}
+                      className="p-2 text-gray-500 transition-colors rounded-full hover:text-red-500 hover:bg-red-50"
+                      disabled={server.isDefault}
+                      title={server.isDefault ? t('mcpServer.cannotDeleteDefault') : t('common.delete')}
+                    >
+                      <Trash2 size={18} />
+                    </button>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MCPServerPage; 
\ No newline at end of file
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 1ce5d24..08b54b8 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -30,7 +30,11 @@
     "edit": "Edit",
     "regenerate": "Regenerate",
     "stopResponse": "Stop Response",
-    "pressShiftEnterToChangeLines": "Press Shift+Enter to change lines"
+    "pressShiftEnterToChangeLines": "Press Shift+Enter to change lines",
+    "generateImage": "Generate Image",
+    "imageGenerationNotAvailable": "Image generation not available",
+    "selectImageProvider": "Select Image Provider",
+    "noImageProvidersAvailable": "No image providers available"
   },
   "translation": {
     "title": "Translation",
@@ -104,6 +108,22 @@
     "apiKeyMissing": "Please set your API key for the selected provider in the settings.",
     "seedHelp": "Seed for reproducible results"
   },
+  "mcpServer": {
+    "title": "MCP Servers",
+    "addServer": "Add Server",
+    "serverName": "Server Name",
+    "serverNamePlaceholder": "Enter server name",
+    "transportType": "Transport Type",
+    "serverURL": "Server URL",
+    "serverURLPlaceholder": "Enter server URL",
+    "headers": "Headers (JSON)",
+    "default": "Default",
+    "imageGeneration": "Image Generation",
+    "noServers": "No MCP servers configured",
+    "addServerPrompt": "Click the 'Add Server' button to create one",
+    "cannotEditDefault": "Cannot edit default server",
+    "cannotDeleteDefault": "Cannot delete default server"
+  },
   "settings": {
     "language": "Language",
     "apiKey": "API Key",
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index e1bd9ba..7e72a39 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -30,7 +30,11 @@
     "edit": "Editar",
     "regenerate": "Regenerar",
     "stopResponse": "Detener Respuesta",
-    "pressShiftEnterToChangeLines": "Presiona Shift+Enter para cambiar de línea"
+    "pressShiftEnterToChangeLines": "Presiona Shift+Enter para cambiar de línea",
+    "generateImage": "Generar Imagen",
+    "imageGenerationNotAvailable": "Generación de imágenes no disponible",
+    "selectImageProvider": "Seleccionar Proveedor de Imágenes",
+    "noImageProvidersAvailable": "No hay proveedores de imágenes disponibles"
   },
   "translation": {
     "title": "Traducción",
@@ -104,6 +108,22 @@
     "apiKeyMissing": "Por favor, configura tu clave API para el proveedor seleccionado en la configuración.",
     "seedHelp": "Semilla para resultados reproducibles"
   },
+  "mcpServer": {
+    "title": "Servidores MCP",
+    "addServer": "Agregar Servidor",
+    "serverName": "Nombre del Servidor",
+    "serverNamePlaceholder": "Introduce el nombre del servidor",
+    "transportType": "Tipo de Transporte",
+    "serverURL": "URL del Servidor",
+    "serverURLPlaceholder": "Introduce la URL del servidor",
+    "headers": "Cabeceras (JSON)",
+    "default": "Predeterminado",
+    "imageGeneration": "Generación de Imágenes",
+    "noServers": "No hay servidores MCP configurados",
+    "addServerPrompt": "Haz clic en el botón 'Agregar Servidor' para crear uno",
+    "cannotEditDefault": "No se puede editar el servidor predeterminado",
+    "cannotDeleteDefault": "No se puede eliminar el servidor predeterminado"
+  },
   "settings": {
     "language": "Idioma",
     "apiKey": "Clave API",
diff --git a/src/locales/ja/translation.json b/src/locales/ja/translation.json
index 30d33be..e41e96d 100644
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -30,7 +30,11 @@
     "edit": "編集",
     "regenerate": "再生成",
     "stopResponse": "応答を停止",
-    "pressShiftEnterToChangeLines": "Shift+Enterを押して行を変更"
+    "pressShiftEnterToChangeLines": "Shift+Enterを押して行を変更",
+    "generateImage": "画像を生成",
+    "imageGenerationNotAvailable": "画像生成は利用できません",
+    "selectImageProvider": "画像プロバイダーを選択",
+    "noImageProvidersAvailable": "利用可能な画像プロバイダーがありません"
   },
   "translation": {
     "title": "翻訳",
@@ -104,6 +108,22 @@
     "apiKeyMissing": "選択したプロバイダーのAPIキーを設定で設定してください。",
     "seedHelp": "再現可能な結果のためのシード値"
   },
+  "mcpServer": {
+    "title": "MCPサーバー",
+    "addServer": "サーバーを追加",
+    "serverName": "サーバー名",
+    "serverNamePlaceholder": "サーバー名を入力",
+    "transportType": "トランスポートタイプ",
+    "serverURL": "サーバーURL",
+    "serverURLPlaceholder": "サーバーURLを入力",
+    "headers": "ヘッダー (JSON)",
+    "default": "デフォルト",
+    "imageGeneration": "画像生成",
+    "noServers": "MCPサーバーが設定されていません",
+    "addServerPrompt": "'サーバーを追加'ボタンをクリックして作成してください",
+    "cannotEditDefault": "デフォルトサーバーは編集できません",
+    "cannotDeleteDefault": "デフォルトサーバーは削除できません"
+  },
   "settings": {
     "language": "言語",
     "apiKey": "APIキー",
diff --git a/src/locales/ko/translation.json b/src/locales/ko/translation.json
index d4bef76..85bdaa3 100644
--- a/src/locales/ko/translation.json
+++ b/src/locales/ko/translation.json
@@ -30,7 +30,11 @@
     "edit": "편집",
     "regenerate": "재생성",
     "stopResponse": "응답 중지",
-    "pressShiftEnterToChangeLines": "줄을 바꾸려면 Shift+Enter를 누르세요"
+    "pressShiftEnterToChangeLines": "줄을 바꾸려면 Shift+Enter를 누르세요",
+    "generateImage": "이미지 생성",
+    "imageGenerationNotAvailable": "이미지 생성을 사용할 수 없습니다",
+    "selectImageProvider": "이미지 제공자 선택",
+    "noImageProvidersAvailable": "사용 가능한 이미지 제공자가 없습니다"
   },
   "translation": {
     "title": "번역",
@@ -104,6 +108,22 @@
     "apiKeyMissing": "선택한 제공자의 API 키를 설정에서 설정하세요.",
     "seedHelp": "재현 가능한 결과를 위한 시드"
   },
+  "mcpServer": {
+    "title": "MCP 서버",
+    "addServer": "서버 추가",
+    "serverName": "서버 이름",
+    "serverNamePlaceholder": "서버 이름 입력",
+    "transportType": "전송 유형",
+    "serverURL": "서버 URL",
+    "serverURLPlaceholder": "서버 URL 입력",
+    "headers": "헤더 (JSON)",
+    "default": "기본값",
+    "imageGeneration": "이미지 생성",
+    "noServers": "구성된 MCP 서버가 없습니다",
+    "addServerPrompt": "'서버 추가' 버튼을 클릭하여 서버를 생성하세요",
+    "cannotEditDefault": "기본 서버는 편집할 수 없습니다",
+    "cannotDeleteDefault": "기본 서버는 삭제할 수 없습니다"
+  },
   "settings": {
     "language": "언어",
     "apiKey": "API 키",
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index f609a13..f0ea221 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -30,7 +30,11 @@
     "edit": "编辑",
     "regenerate": "重新生成",
     "stopResponse": "停止响应",
-    "pressShiftEnterToChangeLines": "按 Shift+Enter 换行"
+    "pressShiftEnterToChangeLines": "按 Shift+Enter 换行",
+    "generateImage": "生成图片",
+    "imageGenerationNotAvailable": "图片生成不可用",
+    "selectImageProvider": "选择图片提供商",
+    "noImageProvidersAvailable": "没有可用的图片提供商"
   },
   "translation": {
     "title": "翻译",
@@ -104,6 +108,22 @@
     "apiKeyMissing": "请在设置中为所选提供商设置您的 API 密钥。",
     "seedHelp": "用于可重现结果的种子"
   },
+  "mcpServer": {
+    "title": "MCP 服务器",
+    "addServer": "添加服务器",
+    "serverName": "服务器名称",
+    "serverNamePlaceholder": "输入服务器名称",
+    "transportType": "传输类型",
+    "serverURL": "服务器 URL",
+    "serverURLPlaceholder": "输入服务器 URL",
+    "headers": "头信息 (JSON)",
+    "default": "默认",
+    "imageGeneration": "图片生成",
+    "noServers": "尚未配置 MCP 服务器",
+    "addServerPrompt": "点击\"添加服务器\"按钮创建一个",
+    "cannotEditDefault": "无法编辑默认服务器",
+    "cannotDeleteDefault": "无法删除默认服务器"
+  },
   "settings": {
     "language": "语言",
     "apiKey": "API 密钥",
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index 3f789e8..528488c 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -30,7 +30,11 @@
     "edit": "編輯",
     "regenerate": "重新生成",
     "stopResponse": "停止回應",
-    "pressShiftEnterToChangeLines": "按 Shift+Enter 換行"
+    "pressShiftEnterToChangeLines": "按 Shift+Enter 換行",
+    "generateImage": "生成圖片",
+    "imageGenerationNotAvailable": "圖片生成不可用",
+    "selectImageProvider": "選擇圖片提供商",
+    "noImageProvidersAvailable": "沒有可用的圖片提供商"
   },
   "translation": {
     "title": "翻譯",
@@ -104,6 +108,22 @@
     "apiKeyMissing": "請在設定中為所選提供商設置您的 API 金鑰。",
     "seedHelp": "用於可重現結果的種子"
   },
+  "mcpServer": {
+    "title": "MCP 伺服器",
+    "addServer": "新增伺服器",
+    "serverName": "伺服器名稱",
+    "serverNamePlaceholder": "輸入伺服器名稱",
+    "transportType": "傳輸類型",
+    "serverURL": "伺服器 URL",
+    "serverURLPlaceholder": "輸入伺服器 URL",
+    "headers": "標頭 (JSON)",
+    "default": "預設",
+    "imageGeneration": "圖片生成",
+    "noServers": "尚未配置 MCP 伺服器",
+    "addServerPrompt": "點擊「新增伺服器」按鈕來建立一個",
+    "cannotEditDefault": "無法編輯預設伺服器",
+    "cannotDeleteDefault": "無法刪除預設伺服器"
+  },
   "settings": {
     "language": "語言",
     "apiKey": "API 金鑰",
diff --git a/src/services/ai-service.ts b/src/services/ai-service.ts
index 4538458..a479fc2 100644
--- a/src/services/ai-service.ts
+++ b/src/services/ai-service.ts
@@ -3,6 +3,8 @@ import { ProviderFactory } from './providers/provider-factory';
 import { Message } from '../types/chat';
 import { StreamControlHandler } from './streaming-control';
 import { SETTINGS_CHANGE_EVENT, SettingsService } from './settings-service';
+import { MCPToolAdapter } from './mcp-tool-adapter';
+import { MCPService } from './mcp-service';
 
 export interface ModelOption {
   id: string;
@@ -185,6 +187,9 @@ export class AIService {
       const modelName = options.model;
       const useStreaming = options.stream;
       
+      // Check if there are any MCP tools to be used
+      const mcpTools = options.mcpTools;
+      
       // Get provider instance
       const provider = this.getProvider(providerName);
 
@@ -194,6 +199,20 @@ export class AIService {
         throw new Error(`Provider ${providerName} not available`);
       }
       
+      // If MCP tools are specified, get them and add to options
+      if (mcpTools && mcpTools.length > 0) {
+        const mcpToolAdapter = MCPToolAdapter.getInstance();
+        const allTools: Record<string, any> = {};
+        
+        for (const mcpToolId of mcpTools) {
+          const tools = await mcpToolAdapter.getToolsForServer(mcpToolId, streamController);
+          Object.assign(allTools, tools);
+        }
+        
+        // Add tools to options
+        options.tools = allTools;
+      }
+      
       const result = await provider.getChatCompletion(
         messages, 
         {
@@ -207,6 +226,7 @@ export class AIService {
           user: options?.user,
           stream: useStreaming,
           signal: streamController.getAbortSignal(),
+          tools: options?.tools,
         },
         streamController
       );
@@ -402,4 +422,11 @@ export class AIService {
     // Re-fetch all models
     await this.getCachedAllModels();
   }
+
+  /**
+   * Get all available MCP servers
+   */
+  public getMCPServers(): Record<string, any> {
+    return MCPService.getInstance().getMCPServers();
+  }
 } 
\ No newline at end of file
diff --git a/src/services/chat-service.ts b/src/services/chat-service.ts
index 92a1627..484ae20 100644
--- a/src/services/chat-service.ts
+++ b/src/services/chat-service.ts
@@ -6,6 +6,7 @@ import { StreamControlHandler } from './streaming-control';
 import { MessageHelper } from './message-helper';
 import { AIServiceCapability } from '../types/capabilities';
 import { FileUploadService } from './file-upload-service';
+import { MCPService } from './mcp-service';
 
 /**
  * Service for managing chat conversations
@@ -895,4 +896,148 @@ export class ChatService {
   public getFolders(): ConversationFolder[] {
     return [...this.folders];
   }
+
+  /**
+   * Get available MCP servers
+   */
+  public getAvailableMCPServers(): Record<string, any> {
+    return MCPService.getInstance().getMCPServers();
+  }
+
+  /**
+   * Check if a specific model supports MCP tools
+   */
+  public doesModelSupportMCPTools(provider: string, model: string): boolean {
+    const providerService = this.aiService.getProvider(provider);
+    
+    if (!providerService) {
+      return false;
+    }
+    
+    const capabilities = providerService.getModelCapabilities(model);
+    return capabilities.includes(AIServiceCapability.ToolUsage) || 
+           capabilities.includes(AIServiceCapability.FunctionCalling) ||
+           capabilities.includes(AIServiceCapability.MCPServer);
+  }
+
+  /**
+   * Send a message with MCP tools
+   */
+  public async sendMessageWithMCPTools(
+    content: string,
+    conversationId: string,
+    mcpTools: string[],
+    isStreaming: boolean,
+    conversationUpdate: (conversations: Conversation[]) => void
+  ): Promise<void> {
+    if (!this.dbService) {
+      throw new Error('Database service not initialized');
+    }
+
+    const currentConversation = this.conversations.find(c => c.conversationId === conversationId);
+    if (currentConversation === undefined) {
+      throw new Error('Active conversation not found');
+    }
+    
+    try {
+      const settingsService = SettingsService.getInstance();
+      const provider = settingsService.getSelectedProvider();
+      const model = settingsService.getSelectedModel();
+
+      //#region Save user message to database and update title
+      // eslint-disable-next-line prefer-const
+      let {conversation: updatedConversation, message: userMessage} = await MessageHelper.addUserMessageToConversation(content, currentConversation);
+      
+      // Update in memory
+      this.conversations = this.conversations.map(c => 
+        c.conversationId === conversationId ? updatedConversation : c
+      );
+
+      conversationUpdate(this.conversations);
+      //#endregion
+
+      //#region Map messages to messages array
+      const messages = MessageHelper.mapMessagesTreeToList(updatedConversation, false);
+      //#endregion
+
+      //#region Streaming Special Message Handling
+      // Create a placeholder for the streaming message
+      const placeholderMessage: Message = MessageHelper.getPlaceholderMessage(model, provider, conversationId);
+
+      userMessage.childrenMessageIds.push(placeholderMessage.messageId);
+      userMessage.preferIndex = userMessage.childrenMessageIds.length - 1;
+
+      // Add placeholder to conversation and update UI
+      const messagesWithPlaceholder = new Map(updatedConversation.messages);
+      messagesWithPlaceholder.set(placeholderMessage.messageId, placeholderMessage);
+
+      updatedConversation = {
+        ...updatedConversation,
+        messages: messagesWithPlaceholder,
+        updatedAt: new Date()
+      };
+
+      this.conversations = this.conversations.map(c => 
+        c.conversationId === conversationId ? updatedConversation : c
+      );
+
+      conversationUpdate(this.conversations);
+      //#endregion
+
+      //#region Send Chat Message to AI with streaming
+      // Create a new abort controller for this request
+      const streamController = new StreamControlHandler(
+        updatedConversation, 
+        placeholderMessage,
+        // ---- On chunk callback ----
+        (updated: Conversation) => {  
+          this.conversations = this.conversations.map(c => 
+            c.conversationId === conversationId ? updated : c
+          );
+          conversationUpdate(this.conversations);
+        }, 
+        // ---- On finish callback ----
+        async (aiResponse: Message | null) => { 
+          if (aiResponse === null) return;
+
+          const finalConversation = await MessageHelper.insertAssistantMessageToConversation(userMessage, aiResponse, updatedConversation);
+
+          // Update in memory
+          this.conversations = this.conversations.map(c => 
+            c.conversationId === conversationId ? finalConversation : c
+          );
+
+          conversationUpdate(this.conversations);
+
+          this.streamControllerMap.delete(conversationId);
+        }
+      );
+
+      this.streamControllerMap.set(conversationId, streamController);
+
+      // Send Chat Message to AI with streaming and MCP tools
+      await this.aiService.getChatCompletion(
+        messages, 
+        {
+          model,
+          provider,
+          stream: isStreaming,
+          mcpTools
+        },
+        streamController
+      );
+
+      conversationUpdate(this.conversations);
+      //#endregion
+    } catch (err) {
+      console.error('Error sending message with MCP tools:', err);
+      
+      // Don't throw the error if it was an abort error
+      const error = err as Error;
+      if (error.name === 'AbortError') {
+        return;
+      }
+      throw error;
+    }
+  }
 }
diff --git a/src/services/core/ai-service-provider.ts b/src/services/core/ai-service-provider.ts
index b0b0e3f..1993448 100644
--- a/src/services/core/ai-service-provider.ts
+++ b/src/services/core/ai-service-provider.ts
@@ -25,6 +25,8 @@ export interface CompletionOptions {
   user?: string;
   stream?: boolean; // Whether to stream the response
   signal?: AbortSignal; // AbortSignal for cancellation
+  mcpTools?: string[]; // IDs of MCP servers to use as tools
+  tools?: Record<string, unknown>; // Pre-configured tools for the AI
 }
 
 /**
diff --git a/src/services/mcp-service.ts b/src/services/mcp-service.ts
new file mode 100644
index 0000000..2b779cf
--- /dev/null
+++ b/src/services/mcp-service.ts
@@ -0,0 +1,105 @@
+import { MCPServerSettings } from "../types/settings";
+import { SettingsService } from "./settings-service";
+import { v4 as uuidv4 } from 'uuid';
+import { AIService } from "./ai-service";
+import { OPENAI_PROVIDER_NAME } from "./providers/openai-service";
+
+/**
+ * Service for managing MCP servers
+ */
+export class MCPService {
+  private static instance: MCPService;
+  private settingsService: SettingsService;
+  private aiService: AIService;
+
+  private constructor() {
+    this.settingsService = SettingsService.getInstance();
+    this.aiService = AIService.getInstance();
+  }
+
+  /**
+   * Get the singleton instance
+   */
+  public static getInstance(): MCPService {
+    if (!MCPService.instance) {
+      MCPService.instance = new MCPService();
+    }
+    return MCPService.instance;
+  }
+
+  /**
+   * Get all MCP servers
+   */
+  public getMCPServers(): Record<string, MCPServerSettings> {
+    return this.settingsService.getMCPServers();
+  }
+
+  /**
+   * Get a specific MCP server by ID
+   */
+  public getMCPServer(id: string): MCPServerSettings | undefined {
+    return this.settingsService.getMCPServer(id);
+  }
+
+  /**
+   * Create a new MCP server
+   */
+  public async createMCPServer(name: string, type: 'sse' | 'stdio' | 'streamableHttp', url: string, headers?: Record<string, string>): Promise<MCPServerSettings> {
+    const id = uuidv4();
+    const server: MCPServerSettings = {
+      id,
+      name,
+      type,
+      url,
+      headers,
+      isDefault: false
+    };
+    
+    await this.settingsService.addOrUpdateMCPServer(server);
+    return server;
+  }
+
+  /**
+   * Update an MCP server
+   */
+  public async updateMCPServer(server: MCPServerSettings): Promise<void> {
+    await this.settingsService.addOrUpdateMCPServer(server);
+  }
+
+  /**
+   * Delete an MCP server
+   */
+  public async deleteMCPServer(id: string): Promise<void> {
+    await this.settingsService.deleteMCPServer(id);
+  }
+
+  /**
+   * Handle image generation with the DALL-E model
+   * This is a special handler for the default image generation MCP server
+   */
+  public async handleImageGeneration(prompt: string, size?: string, style?: 'vivid' | 'natural'): Promise<string[] | Uint8Array<ArrayBufferLike>[]> {
+    const openaiService = this.aiService.getProvider(OPENAI_PROVIDER_NAME);
+    
+    if (!openaiService) {
+      throw new Error("OpenAI service not available");
+    }
+    
+    // Map size to OpenAI dimensions
+    const sizeMap: Record<string, `${number}x${number}`> = {
+      "1:1": "1024x1024",
+      "1:2": "512x1024",
+      "3:2": "1024x768",
+      "3:4": "768x1024",
+      "16:9": "1792x1024",
+      "9:16": "1024x1792"
+    };
+    
+    // Generate the image
+    const images = await openaiService.getImageGeneration(prompt, {
+      size: sizeMap[size || '1:1'] || "1024x1024",
+      style: style || "vivid"
+    });
+    
+    return images;
+  }
+} 
\ No newline at end of file
diff --git a/src/services/mcp-tool-adapter.ts b/src/services/mcp-tool-adapter.ts
new file mode 100644
index 0000000..7863338
--- /dev/null
+++ b/src/services/mcp-tool-adapter.ts
@@ -0,0 +1,196 @@
+import { MCPServerSettings } from "../types/settings";
+import { MCPService } from "./mcp-service";
+import { experimental_createMCPClient as createMCPClient, type MCPTransport, type MCPTransportConfig } from 'ai';
+import { StreamControlHandler } from "./streaming-control";
+
+/**
+ * Interface for the MCP client
+ */
+interface MCPClient {
+  tools: () => Promise<Record<string, ToolDefinition>>;
+  close: () => Promise<void>;
+}
+
+/**
+ * Interface for tool parameters
+ */
+interface ToolParameter {
+  type: string;
+  description?: string;
+  properties?: Record<string, ToolParameter>;
+  items?: ToolParameter;
+  enum?: string[];
+  required?: string[];
+}
+
+/**
+ * Interface for tool definition
+ */
+interface ToolDefinition {
+  description: string;
+  parameters: ToolParameter;
+  execute: (params: Record<string, unknown>) => Promise<unknown>;
+}
+
+/**
+ * Service for adapting MCP servers to AI SDK tools
+ */
+export class MCPToolAdapter {
+  private static instance: MCPToolAdapter;
+  private mcpService: MCPService;
+  private activeClients: Map<string, MCPClient> = new Map();
+
+  private constructor() {
+    this.mcpService = MCPService.getInstance();
+  }
+
+  /**
+   * Get the singleton instance
+   */
+  public static getInstance(): MCPToolAdapter {
+    if (!MCPToolAdapter.instance) {
+      MCPToolAdapter.instance = new MCPToolAdapter();
+    }
+    return MCPToolAdapter.instance;
+  }
+
+  /**
+   * Get tools for a specific MCP server
+   */
+  public async getToolsForServer(serverId: string, streamController: StreamControlHandler): Promise<Record<string, ToolDefinition>> {
+    const server = this.mcpService.getMCPServer(serverId);
+    
+    if (!server) {
+      throw new Error(`MCP server with ID ${serverId} not found`);
+    }
+    
+    // Check if it's the special image generation MCP server
+    if (server.isImageGeneration) {
+      return this.getImageGenerationTools();
+    }
+    
+    // Create MCP client for the server
+    const client = await this.createMCPClient(server);
+    
+    // Keep track of the client for later closing
+    this.activeClients.set(serverId, client);
+    
+    // Set up clean up when streaming finishes
+    streamController.getAbortSignal().addEventListener('abort', () => {
+      this.closeClient(serverId);
+    });
+    
+    // Get the tools from the client
+    const tools = await client.tools();
+    
+    return tools;
+  }
+
+  /**
+   * Create an MCP client for a server
+   */
+  private async createMCPClient(server: MCPServerSettings): Promise<MCPClient> {
+    let transport: MCPTransportConfig;
+    
+    if (server.type === 'sse') {
+      transport = {
+        type: 'sse' as const,
+        url: server.url,
+        headers: server.headers
+      };
+    } else if (server.type === 'streamableHttp') {
+      // This would typically use the StreamableHTTPClientTransport
+      // But we'll use the basic transport for now
+      transport = {
+        type: 'sse' as const,
+        url: server.url,
+        headers: server.headers
+      };
+    } else {
+      throw new Error(`MCP transport type ${server.type} not yet supported`);
+    }
+    
+    const client = await createMCPClient({
+      transport: transport
+    });
+    
+    return client as MCPClient;
+  }
+
+  /**
+   * Close an MCP client
+   */
+  public async closeClient(serverId: string): Promise<void> {
+    const client = this.activeClients.get(serverId);
+    
+    if (client) {
+      await client.close();
+      this.activeClients.delete(serverId);
+    }
+  }
+
+  /**
+   * Get tools for the image generation service
+   */
+  private getImageGenerationTools(): Record<string, ToolDefinition> {
+    // Create a simple tool for image generation
+    return {
+      generate_image: {
+        description: 'Generate an image from a text prompt',
+        parameters: {
+          type: 'object',
+          properties: {
+            prompt: {
+              type: 'string',
+              description: 'The text prompt to generate an image from'
+            },
+            size: {
+              type: 'string',
+              enum: ['1:1', '1:2', '3:2', '3:4', '16:9', '9:16'],
+              description: 'The aspect ratio of the image to generate, defaults to 1:1'
+            },
+            style: {
+              type: 'string',
+              enum: ['vivid', 'natural'],
+              description: 'The style of the image, either "vivid" or "natural", defaults to "vivid"'
+            }
+          },
+          required: ['prompt']
+        },
+        execute: async ({ prompt, size, style }: { prompt: string, size?: string, style?: 'vivid' | 'natural' }) => {
+          try {
+            const images = await this.mcpService.handleImageGeneration(prompt, size, style);
+            
+            // Return the first image
+            if (images && images.length > 0) {
+              return {
+                images: images
+              };
+            }
+            
+            return {
+              error: 'No images generated'
+            };
+          } catch (error) {
+            return {
+              error: error instanceof Error ? error.message : 'Unknown error'
+            };
+          }
+        }
+      },
+      help: {
+        description: 'Get help about the image generation service',
+        parameters: {
+          type: 'object',
+          properties: {},
+          required: []
+        },
+        execute: async () => {
+          return {
+            message: 'This is an image generation service that uses OpenAI\'s DALL-E 3 model. To generate an image, call the generate_image tool with a prompt.'
+          };
+        }
+      }
+    };
+  }
+} 
\ No newline at end of file
diff --git a/src/services/settings-service.ts b/src/services/settings-service.ts
index 72dfbfb..390e9bb 100644
--- a/src/services/settings-service.ts
+++ b/src/services/settings-service.ts
@@ -1,5 +1,5 @@
 import { AIServiceCapability } from "../types/capabilities";
-import { UserSettings, ProviderSettings, ModelSettings } from "../types/settings";
+import { UserSettings, ProviderSettings, ModelSettings, MCPServerSettings } from "../types/settings";
 import { DatabaseService } from "./database";
 import { v4 as uuidv4 } from 'uuid';
 
@@ -246,6 +246,16 @@ const DEFAULT_SETTINGS: UserSettings = {
   proxyMode: 'system',
   customProxyUrl: '',
   sendErrorReports: true,
+  mcpServers: {
+    'image-generation': {
+      id: 'image-generation',
+      name: 'Image Generation',
+      type: 'sse',
+      url: 'internal://image-generation',
+      isDefault: true,
+      isImageGeneration: true
+    }
+  }
 };
 
 /**
@@ -543,4 +553,63 @@ export class SettingsService {
     this.settings.useStreaming = useStreaming;
     await this.saveSettings();
   }
+
+  /**
+   * Get all MCP servers
+   */
+  public getMCPServers(): Record<string, MCPServerSettings> {
+    return this.settings.mcpServers || {};
+  }
+
+  /**
+   * Get a specific MCP server by ID
+   */
+  public getMCPServer(id: string): MCPServerSettings | undefined {
+    return this.settings.mcpServers?.[id];
+  }
+
+  /**
+   * Add or update an MCP server
+   */
+  public async addOrUpdateMCPServer(server: MCPServerSettings): Promise<void> {
+    if (!this.settings.mcpServers) {
+      this.settings.mcpServers = {};
+    }
+    
+    this.settings.mcpServers[server.id] = server;
+    await this.saveSettings();
+    this.notifySettingsChanged();
+  }
+
+  /**
+   * Delete an MCP server
+   */
+  public async deleteMCPServer(id: string): Promise<void> {
+    if (!this.settings.mcpServers || !this.settings.mcpServers[id]) {
+      return;
+    }
+    
+    // Don't delete default servers
+    if (this.settings.mcpServers[id].isDefault) {
+      throw new Error('Cannot delete default MCP server');
+    }
+    
+    delete this.settings.mcpServers[id];
+    await this.saveSettings();
+    this.notifySettingsChanged();
+  }
+
+  /**
+   * Check if an MCP server is the image generation server
+   */
+  public isImageGenerationMCPServer(id: string): boolean {
+    return !!this.settings.mcpServers?.[id]?.isImageGeneration;
+  }
+
+  /**
+   * Notify listeners that settings have changed
+   */
+  private notifySettingsChanged(): void {
+    window.dispatchEvent(new CustomEvent(SETTINGS_CHANGE_EVENT));
+  }
 } 
\ No newline at end of file
diff --git a/src/types/capabilities.ts b/src/types/capabilities.ts
index 39cb9ee..7f8f34a 100644
--- a/src/types/capabilities.ts
+++ b/src/types/capabilities.ts
@@ -18,6 +18,7 @@ export enum AIServiceCapability {
   FineTuning = 'fineTuning',
   StreamingCompletion = 'streamingCompletion',
   WebSearch = 'webSearch',
+  MCPServer = 'mcpServer',
 }
 
 /**
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 9527370..0c80cd3 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -17,6 +17,7 @@ export interface UserSettings {
   proxyMode?: 'system' | 'custom' | 'none';
   customProxyUrl?: string;
   sendErrorReports?: boolean;
+  mcpServers?: Record<string, MCPServerSettings>;
 }
 
 /**
@@ -46,3 +47,16 @@ export interface ModelSettings {
   modelDescription: string;
   modelCapabilities: AIServiceCapability[];
 }
+
+/**
+ * MCP Server settings interface
+ */
+export interface MCPServerSettings {
+  id: string;
+  name: string;
+  type: 'sse' | 'stdio' | 'streamableHttp';
+  url: string;
+  headers?: Record<string, string>;
+  isDefault?: boolean;
+  isImageGeneration?: boolean;
+}

From 17aa4710d6b70d86b25b27f22b06e16d96938c3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sat, 3 May 2025 20:17:31 +0800
Subject: [PATCH 07/27] Fix: Fix Image Generation Button Logic

---
 src/components/chat/ChatMessageArea.tsx       | 44 +++++-----
 src/components/chat/ImageGenerationButton.tsx | 80 +++++++++++++++----
 src/locales/en/translation.json               |  3 +
 src/locales/es/translation.json               |  3 +
 src/locales/ja/translation.json               |  3 +
 src/locales/ko/translation.json               |  3 +
 src/locales/zh-CN/translation.json            |  3 +
 src/locales/zh-TW/translation.json            |  3 +
 src/types/settings.ts                         |  4 +
 9 files changed, 110 insertions(+), 36 deletions(-)

diff --git a/src/components/chat/ChatMessageArea.tsx b/src/components/chat/ChatMessageArea.tsx
index 9d3e5b5..47475b8 100644
--- a/src/components/chat/ChatMessageArea.tsx
+++ b/src/components/chat/ChatMessageArea.tsx
@@ -610,30 +610,30 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                       {t('chat.availableMcpServers')}
                     </div>
                     <div className="overflow-y-auto max-h-60">
-                      {Object.values(mcpServers).map((server) => (
-                        <div
-                          key={server.id}
-                          className={`flex items-center px-3 py-2 cursor-pointer rounded-md ${
-                            selectedMcpServers?.includes(server.id)
-                              ? 'image-generation-provider-selected'
-                              : 'image-generation-provider-item'
-                          }`}
-                          onClick={() => onToggleMcpServer?.(server.id)}
-                        >
-                          <ServerCog className="w-5 h-5 mr-2" />
-                          <div className="flex flex-col">
-                            <span className="text-sm font-medium">{server.name}</span>
-                            {server.isDefault && (
-                              <span className="text-xs text-gray-500">{t('mcpServer.default')}</span>
-                            )}
-                            {server.isImageGeneration && (
-                              <span className="text-xs text-gray-500">{t('mcpServer.imageGeneration')}</span>
-                            )}
+                      {Object.values(mcpServers)
+                        // Filter out image generation servers - they're handled by the ImageGenerationButton
+                        .filter(server => !server.isImageGeneration)
+                        .map((server) => (
+                          <div
+                            key={server.id}
+                            className={`flex items-center px-3 py-2 cursor-pointer rounded-md ${
+                              selectedMcpServers?.includes(server.id)
+                                ? 'image-generation-provider-selected'
+                                : 'image-generation-provider-item'
+                            }`}
+                            onClick={() => onToggleMcpServer?.(server.id)}
+                          >
+                            <ServerCog className="w-5 h-5 mr-2" />
+                            <div className="flex flex-col">
+                              <span className="text-sm font-medium">{server.name}</span>
+                              {server.isDefault && (
+                                <span className="text-xs text-gray-500">{t('mcpServer.default')}</span>
+                              )}
+                            </div>
                           </div>
-                        </div>
-                      ))}
+                        ))}
                       
-                      {Object.keys(mcpServers).length === 0 && (
+                      {Object.values(mcpServers).filter(server => !server.isImageGeneration).length === 0 && (
                         <div className="px-3 py-2 text-sm text-gray-500">
                           {t('chat.noMcpServersAvailable')}
                         </div>
diff --git a/src/components/chat/ImageGenerationButton.tsx b/src/components/chat/ImageGenerationButton.tsx
index aa5080c..075b911 100644
--- a/src/components/chat/ImageGenerationButton.tsx
+++ b/src/components/chat/ImageGenerationButton.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Image } from 'lucide-react';
+import { Image, ToggleLeft, ToggleRight } from 'lucide-react';
 import { SettingsService, SETTINGS_CHANGE_EVENT } from '../../services/settings-service';
 import { AIServiceCapability } from '../../types/capabilities';
 import ProviderIcon from '../ui/ProviderIcon';
@@ -25,10 +25,11 @@ const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({
   const [providers, setProviders] = useState<ProviderModel[]>([]);
   const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
   const [selectedModel, setSelectedModel] = useState<string | null>(null);
+  const [isEnabled, setIsEnabled] = useState(true);
   const popupRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
 
-  // Load available image generation providers and models
+  // Load available image generation providers and models and settings
   useEffect(() => {
     const loadProviders = () => {
       const settingsService = SettingsService.getInstance();
@@ -38,6 +39,13 @@ const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({
       const settings = settingsService.getSettings();
       const providerIds = Object.keys(settings.providers);
       
+      // Load current image generation enabled status
+      setIsEnabled(settings.imageGenerationEnabled !== false);
+      
+      // Load saved selected provider and model
+      const savedProvider = settings.imageGenerationProvider;
+      const savedModel = settings.imageGenerationModel;
+      
       for (const providerId of providerIds) {
         // Get the provider's settings
         const providerSettings = settingsService.getProviderSettings(providerId);
@@ -59,8 +67,11 @@ const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({
 
       setProviders(availableProviders);
       
-      // Set default selected provider and model if available
-      if (availableProviders.length > 0) {
+      // Set saved or default selected provider and model
+      if (savedProvider && savedModel && availableProviders.some(p => p.providerName === savedProvider && p.modelId === savedModel)) {
+        setSelectedProvider(savedProvider);
+        setSelectedModel(savedModel);
+      } else if (availableProviders.length > 0) {
         setSelectedProvider(availableProviders[0].providerName);
         setSelectedModel(availableProviders[0].modelId);
       }
@@ -99,19 +110,41 @@ const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({
     setIsPopupOpen(!isPopupOpen);
   };
 
-  const handleProviderModelSelect = (providerName: string, modelId: string) => {
+  const handleProviderModelSelect = async (providerName: string, modelId: string) => {
     setSelectedProvider(providerName);
     setSelectedModel(modelId);
-    setIsPopupOpen(false);
+    
+    // Save selected provider and model in settings
+    const settingsService = SettingsService.getInstance();
+    await settingsService.updateSettings({
+      imageGenerationProvider: providerName,
+      imageGenerationModel: modelId
+    });
     
     // If onImageGenerate is provided, call it with an empty prompt
     // The actual prompt will be filled in by the chat message
-    if (onImageGenerate) {
+    if (onImageGenerate && isEnabled) {
       onImageGenerate("", providerName, modelId);
     }
+    
+    setIsPopupOpen(false);
+  };
+  
+  const toggleImageGeneration = async () => {
+    const newEnabledState = !isEnabled;
+    setIsEnabled(newEnabledState);
+    
+    // Save the enabled state in settings
+    const settingsService = SettingsService.getInstance();
+    await settingsService.updateSettings({
+      imageGenerationEnabled: newEnabledState
+    });
   };
 
-  const isButtonEnabled = !disabled && providers.length > 0;
+  const isButtonEnabled = !disabled && providers.length > 0 && isEnabled;
+  const buttonClass = `flex items-center justify-center w-8 h-8 rounded-full focus:outline-none ${
+    isEnabled ? 'image-generation-button' : 'text-gray-400 bg-gray-100'
+  }`;
 
   return (
     <div className="relative">
@@ -119,9 +152,15 @@ const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({
         ref={buttonRef}
         type="button"
         onClick={togglePopup}
-        disabled={!isButtonEnabled}
-        className="flex items-center justify-center w-8 h-8 rounded-full image-generation-button focus:outline-none"
-        title={isButtonEnabled ? t('chat.generateImage') : t('chat.imageGenerationNotAvailable')}
+        disabled={!providers.length > 0 || disabled}
+        className={buttonClass}
+        title={
+          !providers.length > 0 
+            ? t('chat.imageGenerationNotAvailable') 
+            : isEnabled 
+              ? t('chat.generateImage') 
+              : t('chat.imageGenerationDisabled')
+        }
       >
         <Image size={20} />
       </button>
@@ -133,15 +172,28 @@ const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({
           style={{ bottom: '100%', left: 0, minWidth: '220px' }}
         >
           <div className="p-2">
-            <div className="mb-2 text-sm font-medium text-gray-700">
-              {t('chat.selectImageProvider')}
+            <div className="flex items-center justify-between mb-3">
+              <div className="text-sm font-medium text-gray-700">
+                {t('chat.selectImageProvider')}
+              </div>
+              <button
+                onClick={toggleImageGeneration}
+                className="flex items-center text-sm focus:outline-none"
+                title={isEnabled ? t('chat.disableImageGeneration') : t('chat.enableImageGeneration')}
+              >
+                {isEnabled ? (
+                  <ToggleRight className="w-6 h-6 text-blue-500" />
+                ) : (
+                  <ToggleLeft className="w-6 h-6 text-gray-400" />
+                )}
+              </button>
             </div>
             <div className="overflow-y-auto max-h-60">
               {providers.map((provider) => (
                 <div
                   key={`${provider.providerName}-${provider.modelId}`}
                   className={`flex items-center px-3 py-2 cursor-pointer rounded-md ${
-                    selectedProvider === provider.providerName && selectedModel === provider.modelId
+                    isEnabled && selectedProvider === provider.providerName && selectedModel === provider.modelId
                       ? 'image-generation-provider-selected'
                       : 'image-generation-provider-item'
                   }`}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 08b54b8..cc44cc0 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -33,6 +33,9 @@
     "pressShiftEnterToChangeLines": "Press Shift+Enter to change lines",
     "generateImage": "Generate Image",
     "imageGenerationNotAvailable": "Image generation not available",
+    "imageGenerationDisabled": "Image generation is disabled",
+    "enableImageGeneration": "Enable image generation",
+    "disableImageGeneration": "Disable image generation",
     "selectImageProvider": "Select Image Provider",
     "noImageProvidersAvailable": "No image providers available"
   },
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index 7e72a39..bd47db6 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -33,6 +33,9 @@
     "pressShiftEnterToChangeLines": "Presiona Shift+Enter para cambiar de línea",
     "generateImage": "Generar Imagen",
     "imageGenerationNotAvailable": "Generación de imágenes no disponible",
+    "imageGenerationDisabled": "La generación de imágenes está desactivada",
+    "enableImageGeneration": "Activar generación de imágenes",
+    "disableImageGeneration": "Desactivar generación de imágenes",
     "selectImageProvider": "Seleccionar Proveedor de Imágenes",
     "noImageProvidersAvailable": "No hay proveedores de imágenes disponibles"
   },
diff --git a/src/locales/ja/translation.json b/src/locales/ja/translation.json
index e41e96d..82ea5e6 100644
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -33,6 +33,9 @@
     "pressShiftEnterToChangeLines": "Shift+Enterを押して行を変更",
     "generateImage": "画像を生成",
     "imageGenerationNotAvailable": "画像生成は利用できません",
+    "imageGenerationDisabled": "画像生成は無効になっています",
+    "enableImageGeneration": "画像生成を有効にする",
+    "disableImageGeneration": "画像生成を無効にする",
     "selectImageProvider": "画像プロバイダーを選択",
     "noImageProvidersAvailable": "利用可能な画像プロバイダーがありません"
   },
diff --git a/src/locales/ko/translation.json b/src/locales/ko/translation.json
index 85bdaa3..50ede84 100644
--- a/src/locales/ko/translation.json
+++ b/src/locales/ko/translation.json
@@ -33,6 +33,9 @@
     "pressShiftEnterToChangeLines": "줄을 바꾸려면 Shift+Enter를 누르세요",
     "generateImage": "이미지 생성",
     "imageGenerationNotAvailable": "이미지 생성을 사용할 수 없습니다",
+    "imageGenerationDisabled": "이미지 생성이 비활성화되었습니다",
+    "enableImageGeneration": "이미지 생성 활성화",
+    "disableImageGeneration": "이미지 생성 비활성화",
     "selectImageProvider": "이미지 제공자 선택",
     "noImageProvidersAvailable": "사용 가능한 이미지 제공자가 없습니다"
   },
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index f0ea221..29855d0 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -33,6 +33,9 @@
     "pressShiftEnterToChangeLines": "按 Shift+Enter 换行",
     "generateImage": "生成图片",
     "imageGenerationNotAvailable": "图片生成不可用",
+    "imageGenerationDisabled": "图片生成已禁用",
+    "enableImageGeneration": "启用图片生成",
+    "disableImageGeneration": "禁用图片生成",
     "selectImageProvider": "选择图片提供商",
     "noImageProvidersAvailable": "没有可用的图片提供商"
   },
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index 528488c..73849b5 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -33,6 +33,9 @@
     "pressShiftEnterToChangeLines": "按 Shift+Enter 換行",
     "generateImage": "生成圖片",
     "imageGenerationNotAvailable": "圖片生成不可用",
+    "imageGenerationDisabled": "圖片生成已禁用",
+    "enableImageGeneration": "啟用圖片生成",
+    "disableImageGeneration": "禁用圖片生成",
     "selectImageProvider": "選擇圖片提供商",
     "noImageProvidersAvailable": "沒有可用的圖片提供商"
   },
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 0c80cd3..5e2789b 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -10,6 +10,10 @@ export interface UserSettings {
   useStreaming: boolean;
   webSearchEnabled: boolean;
   enableWebSearch_Preview: boolean;
+  // Image generation settings
+  imageGenerationEnabled?: boolean;
+  imageGenerationProvider?: string;
+  imageGenerationModel?: string;
   // General settings
   startWithSystem?: boolean;
   startupToTray?: boolean;

From de0c700d675f404b2c9c39fd63570bcec910f266 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sun, 4 May 2025 11:13:06 +0800
Subject: [PATCH 08/27] Fix: Add image generation display to markdown message

---
 src/components/chat/ImageGenerationButton.tsx |   5 +-
 src/components/chat/MarkdownContent.tsx       |  82 +++++++++++-
 src/locales/en/translation.json               |   5 +-
 src/locales/es/translation.json               |   9 +-
 src/locales/ja/translation.json               |  13 +-
 src/locales/ko/translation.json               |  15 ++-
 src/locales/zh-CN/translation.json            |  15 ++-
 src/locales/zh-TW/translation.json            |  17 ++-
 .../providers/common-provider-service.ts      |  39 +++++-
 src/services/streaming-control.ts             | 121 +++++++++++++++++-
 10 files changed, 280 insertions(+), 41 deletions(-)

diff --git a/src/components/chat/ImageGenerationButton.tsx b/src/components/chat/ImageGenerationButton.tsx
index 075b911..04568a3 100644
--- a/src/components/chat/ImageGenerationButton.tsx
+++ b/src/components/chat/ImageGenerationButton.tsx
@@ -141,7 +141,6 @@ const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({
     });
   };
 
-  const isButtonEnabled = !disabled && providers.length > 0 && isEnabled;
   const buttonClass = `flex items-center justify-center w-8 h-8 rounded-full focus:outline-none ${
     isEnabled ? 'image-generation-button' : 'text-gray-400 bg-gray-100'
   }`;
@@ -152,10 +151,10 @@ const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({
         ref={buttonRef}
         type="button"
         onClick={togglePopup}
-        disabled={!providers.length > 0 || disabled}
+        disabled={providers.length === 0 || disabled}
         className={buttonClass}
         title={
-          !providers.length > 0 
+          providers.length === 0 
             ? t('chat.imageGenerationNotAvailable') 
             : isEnabled 
               ? t('chat.generateImage') 
diff --git a/src/components/chat/MarkdownContent.tsx b/src/components/chat/MarkdownContent.tsx
index c18854f..a473ec6 100644
--- a/src/components/chat/MarkdownContent.tsx
+++ b/src/components/chat/MarkdownContent.tsx
@@ -11,6 +11,8 @@ import type { HTMLProps } from 'react';
 import { MessageContent, MessageContentType } from '../../types/chat';
 import { MessageHelper } from '../../services/message-helper';
 import FileAttachmentDisplay from './FileAttachmentDisplay';
+import { Loader2 } from 'lucide-react';
+import { useTranslation } from '../../hooks/useTranslation';
 
 interface MarkdownContentProps {
   content: MessageContent[];
@@ -23,28 +25,38 @@ type CodeProps = React.ClassAttributes<HTMLElement> &
   };
 
 export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, isUserMessage = false }) => {
+  const { t } = useTranslation();
   const [processedContent, setProcessedContent] = useState('');
   const [thinkContent, setThinkContent] = useState<string | null>(null);
   const [isThinkExpanded, setIsThinkExpanded] = useState(true);
   const [fileContents, setFileContents] = useState<MessageContent[]>([]);
+  const [imageContents, setImageContents] = useState<MessageContent[]>([]);
+  const [isProcessingImage, setIsProcessingImage] = useState(false);
+  const [imageGenerationError, setImageGenerationError] = useState<string | null>(null);
   
-  // Process content and check for thinking blocks and files
+  // Process content and check for thinking blocks, files, and image generation
   useEffect(() => {
-    // Extract text and file contents
+    // Extract text, file, and image contents
     const textContents: MessageContent[] = [];
     const files: MessageContent[] = [];
+    const images: MessageContent[] = [];
     
     content.forEach(item => {
       if (item.type === MessageContentType.Text) {
         textContents.push(item);
       } else if (item.type === MessageContentType.File) {
         files.push(item);
+      } else if (item.type === MessageContentType.Image) {
+        images.push(item);
       }
     });
     
     // Save file contents for rendering
     setFileContents(files);
     
+    // Save image contents for rendering
+    setImageContents(images);
+    
     // Create a function for a safer replacement
     function safeReplace(str: string, search: string, replace: string): string {
       // Split the string by the search term
@@ -55,6 +67,32 @@ export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, isUse
     
     let processed = MessageHelper.MessageContentToText(textContents);
     
+    // Detect image generation in progress
+    const imageGenInProgressMatch = processed.match(
+      /(?:generating|creating|processing)\s+(?:an\s+)?image(?:s)?\s+(?:with|using|for|from)?(?:\s+prompt)?(?::|;)?\s*["']?([^"']+)["']?/i
+    ) || processed.match(/\bimage\s+generation\s+in\s+progress\b/i);
+    
+    if ((imageGenInProgressMatch && images.length === 0) || 
+        (processed.includes('generate_image') && processed.includes('tool call') && images.length === 0)) {
+      setIsProcessingImage(true);
+      setImageGenerationError(null);
+    } else {
+      setIsProcessingImage(false);
+    }
+    
+    // Detect image generation errors
+    const imageGenErrorMatch = processed.match(
+      /(?:error|failed|couldn't|unable)\s+(?:in\s+)?(?:generating|creating|processing)\s+(?:an\s+)?image(?:s)?(?::|;)?\s*["']?([^"']+)["']?/i
+    ) || processed.match(/\bimage\s+generation\s+(?:error|failed)\b:?\s*["']?([^"']+)["']?/i);
+    
+    if (imageGenErrorMatch || (processed.includes('error') && processed.includes('generate_image'))) {
+      const errorMessage = imageGenErrorMatch ? (imageGenErrorMatch[1] || "Unknown error occurred") : "Failed to generate image";
+      setImageGenerationError(errorMessage);
+      setIsProcessingImage(false);
+    } else if (images.length > 0) {
+      setImageGenerationError(null);
+    }
+    
     // Check if content contains thinking block
     const thinkMatch = processed.match(/<think>([\s\S]*?)<\/think>([\s\S]*)/);
     
@@ -134,6 +172,46 @@ export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, isUse
         </div>
       )}
       
+      {/* Image Generation In Progress */}
+      {isProcessingImage && (
+        <div className="p-4 mb-3 border border-gray-200 rounded-md">
+          <div className="flex items-center gap-2 mb-2">
+            <Loader2 size={20} className="text-blue-500 animate-spin" />
+            <span className="font-medium">{t('imageGeneration.generating')}</span>
+          </div>
+          <div className="flex items-center justify-center w-full h-40 bg-gray-100 rounded-md">
+            <span className="text-sm text-gray-400">{t('imageGeneration.creatingImage')}</span>
+          </div>
+        </div>
+      )}
+      
+      {/* Image Generation Error */}
+      {imageGenerationError && (
+        <div className="p-4 mb-3 border border-red-200 rounded-md bg-red-50">
+          <div className="flex items-center gap-2 mb-2">
+            <span className="font-medium text-red-600">{t('imageGeneration.generationFailed')}</span>
+          </div>
+          <div className="text-sm text-red-600">
+            {imageGenerationError}
+          </div>
+        </div>
+      )}
+      
+      {/* Generated Images */}
+      {imageContents.length > 0 && (
+        <div className="grid grid-cols-1 gap-4 mb-3 md:grid-cols-2">
+          {imageContents.map((image, index) => (
+            <div key={index} className="overflow-hidden border border-gray-200 rounded-md">
+              <img 
+                src={`data:image/png;base64,${image.content}`} 
+                alt={t('imageGeneration.generatedImage')} 
+                className="w-full h-auto"
+              />
+            </div>
+          ))}
+        </div>
+      )}
+      
       {thinkContent && (
         <div className="mb-4">
           <div 
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index cc44cc0..8f37226 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -103,7 +103,10 @@
     "generationCount": "Generation Count",
     "randomSeed": "Random Seed",
     "generateButton": "Generate",
-    "generating": "Generating...",
+    "generating": "Generating image...",
+    "creatingImage": "AI is creating your image",
+    "generationFailed": "Image generation failed",
+    "generatedImage": "Generated image",
     "prompt": "Prompt",
     "promptPlaceholder": "Describe the image you want to create, e.g.: a peaceful lake at sunset with mountains in the background",
     "results": "Generated Results",
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index bd47db6..ec41b31 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -96,16 +96,19 @@
     "selectModel_search_placeholder": "Buscar modelos..."
   },
   "imageGeneration": {
-    "title": "Imagen Generación",
+    "title": "Generación de Imágenes",
     "provider": "Proveedor",
     "model": "Modelo",
     "imageSize": "Tamaño de Imagen",
     "generationCount": "Cantidad de Generaciones",
     "randomSeed": "Semilla Aleatoria",
     "generateButton": "Generar",
-    "generating": "Generando...",
+    "generating": "Generando imagen...",
+    "creatingImage": "La IA está creando tu imagen",
+    "generationFailed": "Falló la generación de imagen",
+    "generatedImage": "Imagen generada",
     "prompt": "Prompt",
-    "promptPlaceholder": "Describe la imagen que quieres crear, ej.: un lago tranquilo al atardecer con montañas en el fondo",
+    "promptPlaceholder": "Describe la imagen que quieres crear, p.ej.: un lago tranquilo al atardecer con montañas en el fondo",
     "results": "Resultados Generados",
     "placeholderText": "Ingresa un prompt y haz clic en generar para crear imágenes",
     "apiKeyMissing": "Por favor, configura tu clave API para el proveedor seleccionado en la configuración.",
diff --git a/src/locales/ja/translation.json b/src/locales/ja/translation.json
index 82ea5e6..edf4c21 100644
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -103,13 +103,16 @@
     "generationCount": "生成数",
     "randomSeed": "ランダムシード",
     "generateButton": "生成",
-    "generating": "生成中...",
+    "generating": "画像を生成中...",
+    "creatingImage": "AIが画像を作成しています",
+    "generationFailed": "画像生成に失敗しました",
+    "generatedImage": "生成された画像",
     "prompt": "プロンプト",
-    "promptPlaceholder": "作成したい画像を説明してください。例：夕日が沈む静かな湖、背景には山々",
+    "promptPlaceholder": "作成したい画像を説明してください。例：夕暮れの穏やかな湖と背景の山々",
     "results": "生成結果",
-    "placeholderText": "プロンプトを入力して生成ボタンをクリックして画像を作成",
-    "apiKeyMissing": "選択したプロバイダーのAPIキーを設定で設定してください。",
-    "seedHelp": "再現可能な結果のためのシード値"
+    "placeholderText": "プロンプトを入力して生成ボタンをクリックすると画像が作成されます",
+    "apiKeyMissing": "設定で選択したプロバイダーのAPIキーを設定してください。",
+    "seedHelp": "再現可能な結果のためのシード"
   },
   "mcpServer": {
     "title": "MCPサーバー",
diff --git a/src/locales/ko/translation.json b/src/locales/ko/translation.json
index 50ede84..a816df6 100644
--- a/src/locales/ko/translation.json
+++ b/src/locales/ko/translation.json
@@ -100,15 +100,18 @@
     "provider": "제공자",
     "model": "모델",
     "imageSize": "이미지 크기",
-    "generationCount": "생성 수량",
+    "generationCount": "생성 수",
     "randomSeed": "랜덤 시드",
     "generateButton": "생성",
-    "generating": "생성 중...",
+    "generating": "이미지 생성 중...",
+    "creatingImage": "AI가 이미지를 만들고 있습니다",
+    "generationFailed": "이미지 생성 실패",
+    "generatedImage": "생성된 이미지",
     "prompt": "프롬프트",
-    "promptPlaceholder": "만들고 싶은 이미지를 설명하세요. 예: 석양이 지는 고요한 호수, 배경에는 산맥",
-    "results": "생성 결과",
-    "placeholderText": "프롬프트를 입력하고 생성 버튼을 클릭하여 이미지 생성",
-    "apiKeyMissing": "선택한 제공자의 API 키를 설정에서 설정하세요.",
+    "promptPlaceholder": "원하는 이미지를 설명하세요. 예: 일몰 시 평화로운 호수와 배경에 산이 있는 풍경",
+    "results": "생성된 결과",
+    "placeholderText": "프롬프트를 입력하고 생성 버튼을 클릭하여 이미지를 만드세요",
+    "apiKeyMissing": "설정에서 선택한 제공자의 API 키를 설정해 주세요.",
     "seedHelp": "재현 가능한 결과를 위한 시드"
   },
   "mcpServer": {
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 29855d0..e647e6d 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -96,19 +96,22 @@
     "selectModel_search_placeholder": "搜索模型..."
   },
   "imageGeneration": {
-    "title": "图片生成",
+    "title": "图像生成",
     "provider": "提供商",
     "model": "模型",
-    "imageSize": "图片尺寸",
+    "imageSize": "图像尺寸",
     "generationCount": "生成数量",
     "randomSeed": "随机种子",
     "generateButton": "生成",
-    "generating": "生成中...",
+    "generating": "正在生成图像...",
+    "creatingImage": "AI正在创建您的图像",
+    "generationFailed": "图像生成失败",
+    "generatedImage": "生成的图像",
     "prompt": "提示词",
-    "promptPlaceholder": "描述你想创建的图片，例如：一个宁静的湖泊，夕阳西下，远处是群山",
+    "promptPlaceholder": "描述您想要创建的图像，例如：日落时分的平静湖泊，背景是山脉",
     "results": "生成结果",
-    "placeholderText": "输入提示词并点击生成按钮来创建图片",
-    "apiKeyMissing": "请在设置中为所选提供商设置您的 API 密钥。",
+    "placeholderText": "输入提示词并点击生成按钮创建图像",
+    "apiKeyMissing": "请在设置中为所选提供商设置API密钥。",
     "seedHelp": "用于可重现结果的种子"
   },
   "mcpServer": {
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index 73849b5..62767f4 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -96,19 +96,22 @@
     "selectModel_search_placeholder": "搜尋模型..."
   },
   "imageGeneration": {
-    "title": "圖片生成",
-    "provider": "提供商",
+    "title": "圖像生成",
+    "provider": "提供者",
     "model": "模型",
-    "imageSize": "圖片尺寸",
+    "imageSize": "圖像大小",
     "generationCount": "生成數量",
     "randomSeed": "隨機種子",
     "generateButton": "生成",
-    "generating": "生成中...",
+    "generating": "正在生成圖像...",
+    "creatingImage": "AI正在創建您的圖像",
+    "generationFailed": "圖像生成失敗",
+    "generatedImage": "生成的圖像",
     "prompt": "提示詞",
-    "promptPlaceholder": "描述你想創建的圖片，例如：一個寧靜的湖泊，夕陽西下，遠處是群山",
+    "promptPlaceholder": "描述您想要創建的圖像，例如：日落時分的平靜湖泊，背景是山脈",
     "results": "生成結果",
-    "placeholderText": "輸入提示詞並點擊生成按鈕來創建圖片",
-    "apiKeyMissing": "請在設定中為所選提供商設置您的 API 金鑰。",
+    "placeholderText": "輸入提示詞並點擊生成按鈕創建圖像",
+    "apiKeyMissing": "請在設定中為所選提供者設置API金鑰。",
     "seedHelp": "用於可重現結果的種子"
   },
   "mcpServer": {
diff --git a/src/services/providers/common-provider-service.ts b/src/services/providers/common-provider-service.ts
index 940f416..f26bd60 100644
--- a/src/services/providers/common-provider-service.ts
+++ b/src/services/providers/common-provider-service.ts
@@ -1,13 +1,13 @@
-import { generateText, LanguageModelV1, LanguageModelUsage, Provider, streamText, ToolSet, ToolChoice } from 'ai';
-import { v4 as uuidv4 } from 'uuid';
+import { generateText, streamText, Provider, type LanguageModelUsage } from 'ai';
 import { Message, MessageRole } from '../../types/chat';
 import { AiServiceProvider, CompletionOptions } from '../core/ai-service-provider';
 import { SettingsService } from '../settings-service';
 import { StreamControlHandler } from '../streaming-control';
-import { AIServiceCapability } from '../../types/capabilities';
-import { mapModelCapabilities } from '../../types/capabilities';
-import { ModelSettings } from '../../types/settings';
+import { v4 as uuidv4 } from 'uuid';
 import { MessageHelper } from '../message-helper';
+import { AIServiceCapability, mapModelCapabilities } from '../../types/capabilities';
+import { ModelSettings } from '../../types/settings';
+import { LanguageModelV1, ToolChoice, ToolSet } from 'ai';
 /**
  * Implementation of OpenAI service provider using the AI SDK
  */
@@ -165,6 +165,18 @@ export class CommonProviderHelper implements AiServiceProvider {
           presencePenalty: options.presence_penalty,
           tools: tools,
           toolChoice: toolChoice,
+          onToolCall: (toolCall) => {
+            console.log('Tool call:', toolCall);
+            streamController.onToolCall(toolCall);
+          },
+          onToolCallResult: (toolCallId, result) => {
+            console.log('Tool call result:', toolCallId, result);
+            streamController.onToolCallResult(toolCallId, result);
+          },
+          onToolCallError: (toolCallId, error) => {
+            console.error('Tool call error:', toolCallId, error);
+            streamController.onToolCallError(toolCallId, error);
+          },
           onFinish: (result: { usage: LanguageModelUsage }) => {
             console.log('OpenAI streaming chat completion finished');
             streamController.onFinish(result.usage);
@@ -192,9 +204,26 @@ export class CommonProviderHelper implements AiServiceProvider {
           presencePenalty: options.presence_penalty,
           tools: tools,
           toolChoice: toolChoice,
+          maxSteps: 3, // Allow multiple steps for tool calls
         });
 
         console.log('toolResults: ', toolResults);
+        
+        // Process tool results for images
+        if (toolResults && toolResults.length > 0) {
+          for (const toolResult of toolResults) {
+            if (toolResult.name === 'generate_image' && toolResult.result?.images) {
+              const images = toolResult.result.images;
+              if (Array.isArray(images)) {
+                for (const imageData of images) {
+                  if (typeof imageData === 'string') {
+                    streamController.onToolCallResult(toolResult.id, { images: [imageData] });
+                  }
+                }
+              }
+            }
+          }
+        }
 
         fullText = text;
         streamController.onChunk(fullText);
diff --git a/src/services/streaming-control.ts b/src/services/streaming-control.ts
index dc3db89..4397244 100644
--- a/src/services/streaming-control.ts
+++ b/src/services/streaming-control.ts
@@ -1,5 +1,5 @@
-import { LanguageModelUsage } from "ai";
-import { Conversation, Message } from "../types/chat";
+import { LanguageModelUsage, type ToolCall } from "ai";
+import { Conversation, Message, MessageContent, MessageContentType } from "../types/chat";
 import { v4 as uuidv4 } from 'uuid';
 import { MessageHelper } from "./message-helper";
 
@@ -11,6 +11,8 @@ export class StreamControlHandler {
 
     private placeholderMessage: Message;
     private fullText: string = '';
+    private toolCallsInProgress: Map<string, ToolCall> = new Map();
+    private imageContents: MessageContent[] = [];
 
     constructor(
         targetConversation: Conversation, 
@@ -56,10 +58,123 @@ export class StreamControlHandler {
         this.onChunkCallback(updatedConversation);
     }
 
+    public onToolCall(toolCall: ToolCall) {
+        // Store the tool call
+        this.toolCallsInProgress.set(toolCall.id, toolCall);
+
+        // Update the message to include information about the tool call
+        let toolCallText = this.fullText;
+        
+        // Append a message about the tool call in progress
+        if (toolCall.name === 'generate_image') {
+            const imagePrompt = toolCall.parameters?.prompt;
+            if (imagePrompt) {
+                toolCallText += `\n\nGenerating image with prompt: "${imagePrompt}"`;
+            } else {
+                toolCallText += `\n\nGenerating image...`;
+            }
+        } else {
+            toolCallText += `\n\nExecuting tool call: ${toolCall.name}`;
+        }
+
+        const updatedMessages = new Map(this.targetConverstation.messages);
+        updatedMessages.set(this.placeholderMessage.messageId, {
+            ...this.placeholderMessage,
+            content: MessageHelper.pureTextMessage(toolCallText)
+        });
+
+        const updatedConversation = {
+            ...this.targetConverstation,
+            messages: updatedMessages
+        };
+
+        this.targetConverstation = updatedConversation;
+        this.onChunkCallback(updatedConversation);
+    }
+
+    public onToolCallResult(toolCallId: string, result: any) {
+        const toolCall = this.toolCallsInProgress.get(toolCallId);
+        if (!toolCall) return;
+
+        // Handle image generation results
+        if (toolCall.name === 'generate_image' && result?.images) {
+            const images = result.images;
+            if (Array.isArray(images)) {
+                // Store the images for later inclusion in the final message
+                for (const imageData of images) {
+                    if (typeof imageData === 'string') {
+                        this.imageContents.push({
+                            type: MessageContentType.Image,
+                            content: imageData,
+                            dataJson: JSON.stringify({ format: 'base64' })
+                        });
+                    }
+                }
+            }
+        }
+
+        // Update message with tool call result info
+        let updatedText = this.fullText;
+        
+        // Don't append result text for image generation, as we'll show the images directly
+        if (toolCall.name !== 'generate_image') {
+            updatedText += `\n\nTool result: ${JSON.stringify(result)}`;
+        }
+
+        const updatedMessages = new Map(this.targetConverstation.messages);
+        updatedMessages.set(this.placeholderMessage.messageId, {
+            ...this.placeholderMessage,
+            content: MessageHelper.pureTextMessage(updatedText)
+        });
+
+        const updatedConversation = {
+            ...this.targetConverstation,
+            messages: updatedMessages
+        };
+
+        this.targetConverstation = updatedConversation;
+        this.onChunkCallback(updatedConversation);
+    }
+
+    public onToolCallError(toolCallId: string, error: Error) {
+        const toolCall = this.toolCallsInProgress.get(toolCallId);
+        if (!toolCall) return;
+
+        // Update message with error info
+        let errorText = this.fullText;
+        
+        if (toolCall.name === 'generate_image') {
+            errorText += `\n\nError generating image: ${error.message}`;
+        } else {
+            errorText += `\n\nError in tool call ${toolCall.name}: ${error.message}`;
+        }
+
+        const updatedMessages = new Map(this.targetConverstation.messages);
+        updatedMessages.set(this.placeholderMessage.messageId, {
+            ...this.placeholderMessage,
+            content: MessageHelper.pureTextMessage(errorText)
+        });
+
+        const updatedConversation = {
+            ...this.targetConverstation,
+            messages: updatedMessages
+        };
+
+        this.targetConverstation = updatedConversation;
+        this.onChunkCallback(updatedConversation);
+    }
+
     public onFinish(usage: LanguageModelUsage | null) {
+        const finalMessageContent = [...MessageHelper.pureTextMessage(this.fullText)];
+        
+        // Add any image contents to the final message
+        if (this.imageContents.length > 0) {
+            finalMessageContent.push(...this.imageContents);
+        }
+
         const finalMessage: Message = {
             messageId: uuidv4(),
-            content: MessageHelper.pureTextMessage(this.fullText),
+            content: finalMessageContent,
             conversationId: this.targetConverstation.conversationId,
             role: 'assistant',
             timestamp: new Date(),

From c33b4457cd3360751457096538ccc0be90fb8f01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sun, 4 May 2025 13:19:12 +0800
Subject: [PATCH 09/27] Fix: fix image generation MCP

---
 src/components/chat/MarkdownContent.tsx       | 112 +++++++++-
 src/locales/en/translation.json               |   8 +
 src/services/ai-service.ts                    |  33 ++-
 src/services/chat-service.ts                  |  24 ++-
 .../providers/common-provider-service.ts      | 203 +++++++++++++-----
 src/services/streaming-control.ts             |  48 ++++-
 src/types/tool-call.ts                        |  33 +++
 7 files changed, 384 insertions(+), 77 deletions(-)
 create mode 100644 src/types/tool-call.ts

diff --git a/src/components/chat/MarkdownContent.tsx b/src/components/chat/MarkdownContent.tsx
index a473ec6..364e4ca 100644
--- a/src/components/chat/MarkdownContent.tsx
+++ b/src/components/chat/MarkdownContent.tsx
@@ -11,7 +11,7 @@ import type { HTMLProps } from 'react';
 import { MessageContent, MessageContentType } from '../../types/chat';
 import { MessageHelper } from '../../services/message-helper';
 import FileAttachmentDisplay from './FileAttachmentDisplay';
-import { Loader2 } from 'lucide-react';
+import { Loader2, ServerCog, AlertCircle } from 'lucide-react';
 import { useTranslation } from '../../hooks/useTranslation';
 
 interface MarkdownContentProps {
@@ -33,6 +33,7 @@ export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, isUse
   const [imageContents, setImageContents] = useState<MessageContent[]>([]);
   const [isProcessingImage, setIsProcessingImage] = useState(false);
   const [imageGenerationError, setImageGenerationError] = useState<string | null>(null);
+  const [customToolCalls, setCustomToolCalls] = useState<Array<{name: string, status: string}>>([]);
   
   // Process content and check for thinking blocks, files, and image generation
   useEffect(() => {
@@ -67,10 +68,48 @@ export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, isUse
     
     let processed = MessageHelper.MessageContentToText(textContents);
     
+    // Track custom tool calls
+    const toolCalls: Array<{name: string, status: string}> = [];
+    
+    // Detect tool calls in progress
+    const customToolCallRegex = /\bExecuting tool call:\s+([a-zA-Z0-9_-]+)/g;
+    let match: RegExpExecArray | null;
+    while ((match = customToolCallRegex.exec(processed)) !== null) {
+      const toolName = match[1];
+      if (toolName !== 'generate_image') {
+        toolCalls.push({ name: toolName, status: 'in_progress' });
+      }
+    }
+    
+    // Detect tool results
+    const toolResultRegex = /\bTool result:\s+({.+})/g;
+    while ((match = toolResultRegex.exec(processed)) !== null) {
+      // Mark the last tool as completed if it exists
+      if (toolCalls.length > 0) {
+        const lastTool = toolCalls[toolCalls.length - 1];
+        lastTool.status = 'completed';
+      }
+    }
+    
+    // Detect tool errors
+    const toolErrorRegex = /\bError in tool call\s+([a-zA-Z0-9_-]+):\s+(.+)/g;
+    while ((match = toolErrorRegex.exec(processed)) !== null) {
+      const toolName = match[1];
+      // Check if we already have this tool
+      const existingTool = toolCalls.find(tool => tool.name === toolName);
+      if (existingTool) {
+        existingTool.status = 'error';
+      } else {
+        toolCalls.push({ name: toolName, status: 'error' });
+      }
+    }
+    
+    setCustomToolCalls(toolCalls);
+    
     // Detect image generation in progress
     const imageGenInProgressMatch = processed.match(
       /(?:generating|creating|processing)\s+(?:an\s+)?image(?:s)?\s+(?:with|using|for|from)?(?:\s+prompt)?(?::|;)?\s*["']?([^"']+)["']?/i
-    ) || processed.match(/\bimage\s+generation\s+in\s+progress\b/i);
+    ) || processed.match(/\bimage\s+generation\s+in\s+progress\b/i) || processed.match(/\bGenerating image\b/i);
     
     if ((imageGenInProgressMatch && images.length === 0) || 
         (processed.includes('generate_image') && processed.includes('tool call') && images.length === 0)) {
@@ -83,7 +122,7 @@ export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, isUse
     // Detect image generation errors
     const imageGenErrorMatch = processed.match(
       /(?:error|failed|couldn't|unable)\s+(?:in\s+)?(?:generating|creating|processing)\s+(?:an\s+)?image(?:s)?(?::|;)?\s*["']?([^"']+)["']?/i
-    ) || processed.match(/\bimage\s+generation\s+(?:error|failed)\b:?\s*["']?([^"']+)["']?/i);
+    ) || processed.match(/\bimage\s+generation\s+(?:error|failed)\b:?\s*["']?([^"']+)["']?/i) || processed.match(/\bError generating image\b:?\s*([^"\n]+)/i);
     
     if (imageGenErrorMatch || (processed.includes('error') && processed.includes('generate_image'))) {
       const errorMessage = imageGenErrorMatch ? (imageGenErrorMatch[1] || "Unknown error occurred") : "Failed to generate image";
@@ -93,6 +132,33 @@ export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, isUse
       setImageGenerationError(null);
     }
     
+    // Process the content - remove the tool call info to make the response cleaner
+    if (processed.includes('Executing tool call:') || processed.includes('Tool result:') || 
+        processed.includes('Generating image') || processed.includes('Error generating image') ||
+        processed.includes('Error in tool call')) {
+      
+      // Split by the first occurrence of a tool-related message
+      const toolMarkers = [
+        'Executing tool call:',
+        'Tool result:',
+        'Generating image',
+        'Error generating image',
+        'Error in tool call'
+      ];
+      
+      let firstToolIndex = processed.length;
+      for (const marker of toolMarkers) {
+        const index = processed.indexOf(marker);
+        if (index > -1 && index < firstToolIndex) {
+          firstToolIndex = index;
+        }
+      }
+      
+      if (firstToolIndex < processed.length) {
+        processed = processed.substring(0, firstToolIndex);
+      }
+    }
+    
     // Check if content contains thinking block
     const thinkMatch = processed.match(/<think>([\s\S]*?)<\/think>([\s\S]*)/);
     
@@ -172,9 +238,47 @@ export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, isUse
         </div>
       )}
       
+      {/* Custom Tool Calls */}
+      {customToolCalls.length > 0 && (
+        <div className="mb-3 space-y-2">
+          {customToolCalls.map((toolCall, index) => (
+            <div 
+              key={index}
+              className={`p-3 border rounded-md flex items-center gap-2 ${
+                toolCall.status === 'error' 
+                  ? 'border-red-200 bg-red-50' 
+                  : toolCall.status === 'completed'
+                    ? 'border-green-200 bg-green-50'
+                    : 'border-blue-200 bg-blue-50'
+              }`}
+            >
+              {toolCall.status === 'in_progress' && (
+                <Loader2 size={18} className="text-blue-500 animate-spin" />
+              )}
+              {toolCall.status === 'completed' && (
+                <ServerCog size={18} className="text-green-600" />
+              )}
+              {toolCall.status === 'error' && (
+                <AlertCircle size={18} className="text-red-600" />
+              )}
+              <div>
+                <div className="font-medium">
+                  {toolCall.status === 'in_progress' && t('tools.executing')}
+                  {toolCall.status === 'completed' && t('tools.executedSuccessfully')}
+                  {toolCall.status === 'error' && t('tools.executionFailed')}
+                </div>
+                <div className="text-sm">
+                  {t('tools.toolName')}: {toolCall.name}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      
       {/* Image Generation In Progress */}
       {isProcessingImage && (
-        <div className="p-4 mb-3 border border-gray-200 rounded-md">
+        <div className="p-4 mb-3 border border-blue-200 rounded-md bg-blue-50">
           <div className="flex items-center gap-2 mb-2">
             <Loader2 size={20} className="text-blue-500 animate-spin" />
             <span className="font-medium">{t('imageGeneration.generating')}</span>
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 8f37226..d6a6b1d 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -39,6 +39,14 @@
     "selectImageProvider": "Select Image Provider",
     "noImageProvidersAvailable": "No image providers available"
   },
+  "tools": {
+    "executing": "Executing tool...",
+    "executedSuccessfully": "Tool execution completed",
+    "executionFailed": "Tool execution failed",
+    "toolName": "Tool name",
+    "result": "Result",
+    "error": "Error"
+  },
   "translation": {
     "title": "Translation",
     "sourceLanguageWithAutoSelected": "Source Language will be auto detected",
diff --git a/src/services/ai-service.ts b/src/services/ai-service.ts
index a479fc2..014c907 100644
--- a/src/services/ai-service.ts
+++ b/src/services/ai-service.ts
@@ -5,6 +5,7 @@ import { StreamControlHandler } from './streaming-control';
 import { SETTINGS_CHANGE_EVENT, SettingsService } from './settings-service';
 import { MCPToolAdapter } from './mcp-tool-adapter';
 import { MCPService } from './mcp-service';
+import { AIServiceCapability } from '../types/capabilities';
 
 export interface ModelOption {
   id: string;
@@ -199,18 +200,34 @@ export class AIService {
         throw new Error(`Provider ${providerName} not available`);
       }
       
-      // If MCP tools are specified, get them and add to options
-      if (mcpTools && mcpTools.length > 0) {
+      // Check if the selected model supports tool calls
+      const modelCapabilities = provider.getModelCapabilities(modelName);
+      const supportsTools = modelCapabilities.includes(AIServiceCapability.ToolUsage) || 
+                            modelCapabilities.includes(AIServiceCapability.FunctionCalling) ||
+                            modelCapabilities.includes(AIServiceCapability.MCPServer);
+      
+      // If MCP tools are specified and model supports tools, get them and add to options
+      if (mcpTools && mcpTools.length > 0 && supportsTools) {
         const mcpToolAdapter = MCPToolAdapter.getInstance();
-        const allTools: Record<string, any> = {};
+        const allTools: Record<string, unknown> = {};
         
         for (const mcpToolId of mcpTools) {
-          const tools = await mcpToolAdapter.getToolsForServer(mcpToolId, streamController);
-          Object.assign(allTools, tools);
+          try {
+            const tools = await mcpToolAdapter.getToolsForServer(mcpToolId, streamController);
+            Object.assign(allTools, tools);
+          } catch (error) {
+            console.error(`Error loading tools for MCP server ${mcpToolId}:`, error);
+            // Continue with other tools if one fails
+          }
         }
         
-        // Add tools to options
-        options.tools = allTools;
+        // Add tools to options if any were loaded
+        if (Object.keys(allTools).length > 0) {
+          console.log('Adding tools to request:', Object.keys(allTools));
+          options.tools = allTools;
+        }
+      } else if (mcpTools && mcpTools.length > 0 && !supportsTools) {
+        console.warn(`Model ${modelName} does not support tools, but tools were requested`);
       }
       
       const result = await provider.getChatCompletion(
@@ -426,7 +443,7 @@ export class AIService {
   /**
    * Get all available MCP servers
    */
-  public getMCPServers(): Record<string, any> {
+  public getMCPServers(): Record<string, unknown> {
     return MCPService.getInstance().getMCPServers();
   }
 } 
\ No newline at end of file
diff --git a/src/services/chat-service.ts b/src/services/chat-service.ts
index 484ae20..70620fd 100644
--- a/src/services/chat-service.ts
+++ b/src/services/chat-service.ts
@@ -900,7 +900,7 @@ export class ChatService {
   /**
    * Get available MCP servers
    */
-  public getAvailableMCPServers(): Record<string, any> {
+  public getAvailableMCPServers(): Record<string, unknown> {
     return MCPService.getInstance().getMCPServers();
   }
 
@@ -944,6 +944,28 @@ export class ChatService {
       const provider = settingsService.getSelectedProvider();
       const model = settingsService.getSelectedModel();
 
+      // Check if any of the selected MCP servers is for image generation
+      const mcpService = MCPService.getInstance();
+      const selectedMcpServers = mcpTools.map(id => mcpService.getMCPServer(id)).filter(Boolean);
+      const hasImageGenerationTool = selectedMcpServers.some(server => server?.isImageGeneration);
+
+      // Check if the message content starts with image generation command
+      const isImageGenerationRequest = content.toLowerCase().startsWith('/image')
+        || content.toLowerCase().includes('generate an image')
+        || content.toLowerCase().includes('create an image');
+
+      // If user is requesting image generation but hasn't selected the image tool, add it automatically
+      if (isImageGenerationRequest && !hasImageGenerationTool) {
+        // Find the default image generation server
+        const imageServer = Object.values(mcpService.getMCPServers())
+          .find(server => server.isImageGeneration);
+          
+        if (imageServer) {
+          console.log('Adding image generation tool automatically');
+          mcpTools.push(imageServer.id);
+        }
+      }
+
       //#region Save user message to database and update title
       // eslint-disable-next-line prefer-const
       let {conversation: updatedConversation, message: userMessage} = await MessageHelper.addUserMessageToConversation(content, currentConversation);
diff --git a/src/services/providers/common-provider-service.ts b/src/services/providers/common-provider-service.ts
index f26bd60..b0f1293 100644
--- a/src/services/providers/common-provider-service.ts
+++ b/src/services/providers/common-provider-service.ts
@@ -1,4 +1,4 @@
-import { generateText, streamText, Provider, type LanguageModelUsage } from 'ai';
+import { generateText, streamText, Provider, type LanguageModelUsage, type ToolSet } from 'ai';
 import { Message, MessageRole } from '../../types/chat';
 import { AiServiceProvider, CompletionOptions } from '../core/ai-service-provider';
 import { SettingsService } from '../settings-service';
@@ -7,7 +7,25 @@ import { v4 as uuidv4 } from 'uuid';
 import { MessageHelper } from '../message-helper';
 import { AIServiceCapability, mapModelCapabilities } from '../../types/capabilities';
 import { ModelSettings } from '../../types/settings';
-import { LanguageModelV1, ToolChoice, ToolSet } from 'ai';
+import { LanguageModelV1, ToolChoice } from 'ai';
+
+// Define an interface for tool results to fix the 'never' type errors
+interface ToolResult {
+  id: string;
+  name: string;
+  args: Record<string, unknown>;
+  result?: unknown;
+}
+
+// Define type for the execute function for tools
+type ToolExecuteFunction = (args: Record<string, unknown>) => Promise<unknown>;
+
+// Define interface for tools with execute function
+interface ToolWithExecute {
+  execute: ToolExecuteFunction;
+  [key: string]: unknown;
+}
+
 /**
  * Implementation of OpenAI service provider using the AI SDK
  */
@@ -154,6 +172,10 @@ export class CommonProviderHelper implements AiServiceProvider {
 
       if (options.stream) {
         console.log(`Streaming ${options.provider}/${options.model} response`);
+        
+        // Prepare tools for AI SDK format if they exist
+        const toolsForStream = tools || options.tools as unknown as ToolSet;
+        
         const result = streamText({
           model: modelInstance,
           abortSignal: streamController.getAbortSignal(),
@@ -163,20 +185,9 @@ export class CommonProviderHelper implements AiServiceProvider {
           topP: options.top_p,
           frequencyPenalty: options.frequency_penalty,
           presencePenalty: options.presence_penalty,
-          tools: tools,
+          tools: toolsForStream,
           toolChoice: toolChoice,
-          onToolCall: (toolCall) => {
-            console.log('Tool call:', toolCall);
-            streamController.onToolCall(toolCall);
-          },
-          onToolCallResult: (toolCallId, result) => {
-            console.log('Tool call result:', toolCallId, result);
-            streamController.onToolCallResult(toolCallId, result);
-          },
-          onToolCallError: (toolCallId, error) => {
-            console.error('Tool call error:', toolCallId, error);
-            streamController.onToolCallError(toolCallId, error);
-          },
+          toolCallStreaming: true,
           onFinish: (result: { usage: LanguageModelUsage }) => {
             console.log('OpenAI streaming chat completion finished');
             streamController.onFinish(result.usage);
@@ -187,13 +198,111 @@ export class CommonProviderHelper implements AiServiceProvider {
           }
         });
 
-        for await (const textPart of result.textStream) {
-          fullText += textPart;
-          streamController.onChunk(fullText);
+        // Track tool calls that are in progress for building arguments
+        const toolCallsInProgress = new Map<string, { name: string, argsText: string }>();
+        
+        for await (const streamPart of result.fullStream) {
+          const type = streamPart.type;
+          switch(type) {
+            case 'tool-call-streaming-start': {
+              // Initialize a new tool call
+              const toolCallId = streamPart.toolCallId;
+              const toolName = streamPart.toolName;
+              
+              toolCallsInProgress.set(toolCallId, {
+                name: toolName,
+                argsText: ''
+              });
+              
+              // Notify about tool call start with empty args for now
+              streamController.onToolCall(toolName, toolCallId, {});
+              break;
+            }
+            
+            case 'tool-call-delta': {
+              // Add to the arguments being built
+              const toolCallId = streamPart.toolCallId;
+              const argsTextDelta = streamPart.argsTextDelta;
+              
+              const toolCall = toolCallsInProgress.get(toolCallId);
+              if (toolCall) {
+                toolCall.argsText += argsTextDelta;
+                toolCallsInProgress.set(toolCallId, toolCall);
+              }
+              break;
+            }
+            
+            case 'tool-call': {
+              // Complete tool call with full arguments
+              const toolCallId = streamPart.toolCallId;
+              const toolName = streamPart.toolName;
+              const args = streamPart.args;
+              
+              // Mark as in progress
+              streamController.onToolCallInProgress(toolCallId);
+              
+              // Check if this is an image generation tool
+              if (toolName === 'generate_image' && args.prompt) {
+                try {
+                  // Handle image generation
+                  const imageGenService = options.provider === 'openai' 
+                    ? modelInstance 
+                    : null;
+                  
+                  if (imageGenService) {
+                    // Execute the tool call - this would typically happen through the tools execute function
+                    // but for demonstration we're handling it here
+                    const result = { images: ['generated_image_placeholder'] };
+                    streamController.onToolCallResult(toolCallId, result);
+                  } else {
+                    streamController.onToolCallError(
+                      toolCallId, 
+                      new Error(`Image generation not supported for provider ${options.provider}`)
+                    );
+                  }
+                } catch (error) {
+                  streamController.onToolCallError(
+                    toolCallId, 
+                    error instanceof Error ? error : new Error('Unknown error in image generation')
+                  );
+                }
+              } else if (options.tools) {
+                // Use a safer way to check for and execute tools
+                const toolsMap = options.tools as Record<string, unknown>;
+                const tool = toolsMap[toolName] as ToolWithExecute | undefined;
+                
+                if (tool && typeof tool.execute === 'function') {
+                  // Execute other tool calls if they have an execute function
+                  try {
+                    const result = await tool.execute(args);
+                    streamController.onToolCallResult(toolCallId, result);
+                  } catch (error) {
+                    streamController.onToolCallError(
+                      toolCallId, 
+                      error instanceof Error ? error : new Error(`Error executing tool ${toolName}`)
+                    );
+                  }
+                }
+              }
+              
+              break;
+            }
+            
+            case 'text-delta': {
+              const textDelta = streamPart.textDelta;
+              fullText += textDelta;
+              streamController.onChunk(fullText);
+              break;
+            }
+          }
         }
       }
-      else{
+      else {
         console.log(`Generating ${options.provider}/${options.model} response`);
+        
+        // Prepare tools for AI SDK format if they exist
+        const toolsForGenerate = tools || options.tools as unknown as ToolSet;
+        
         const { text, usage, toolResults } = await generateText({
           model: modelInstance,
           messages: formattedMessages,
@@ -202,25 +311,36 @@ export class CommonProviderHelper implements AiServiceProvider {
           topP: options.top_p,
           frequencyPenalty: options.frequency_penalty,
           presencePenalty: options.presence_penalty,
-          tools: tools,
+          tools: toolsForGenerate,
           toolChoice: toolChoice,
           maxSteps: 3, // Allow multiple steps for tool calls
         });
 
         console.log('toolResults: ', toolResults);
         
-        // Process tool results for images
+        // Process tool results
         if (toolResults && toolResults.length > 0) {
-          for (const toolResult of toolResults) {
-            if (toolResult.name === 'generate_image' && toolResult.result?.images) {
-              const images = toolResult.result.images;
+          const typedToolResults = toolResults as unknown as ToolResult[];
+          
+          for (const toolResult of typedToolResults) {
+            // First notify about the tool call
+            streamController.onToolCall(toolResult.name, toolResult.id, toolResult.args);
+            
+            // Then mark as in progress
+            streamController.onToolCallInProgress(toolResult.id);
+            
+            // Then provide the result
+            if (toolResult.name === 'generate_image' && 
+                typeof toolResult.result === 'object' && 
+                toolResult.result !== null &&
+                'images' in toolResult.result) {
+              const resultWithImages = toolResult.result as {images: string[]};
+              const images = resultWithImages.images;
               if (Array.isArray(images)) {
-                for (const imageData of images) {
-                  if (typeof imageData === 'string') {
-                    streamController.onToolCallResult(toolResult.id, { images: [imageData] });
-                  }
-                }
+                streamController.onToolCallResult(toolResult.id, { images });
               }
+            } else {
+              streamController.onToolCallResult(toolResult.id, toolResult.result);
             }
           }
         }
@@ -269,29 +389,6 @@ export class CommonProviderHelper implements AiServiceProvider {
   ): Promise<string[]> {
     throw new Error('Not implemented');
 
-    // if (!this.hasValidApiKey()) {
-    //   throw new Error('No API key provided for OpenAI');
-    // }
-
-    // try {
-    //   const response = await generateImage({
-    //     model: 'dall-e-3',
-    //     prompt,
-    //     n: 1,
-    //     size: options.size || '1024x1024',
-    //     style: options.style || 'vivid',
-    //   });
-
-    //   if (!response.ok) {
-    //     const errorData = await response.json();
-    //     throw new Error(`Image generation failed: ${errorData.error?.message || response.statusText}`);
-    //   }
-
-    //   const data = await response.json();
-    //   return data.data.map((item: any) => item.url);
-    // } catch (error) {
-    //   console.error('OpenAI image generation error:', error);
-    //   throw new Error(`OpenAI image generation failed: ${error instanceof Error ? error.message : String(error)}`);
-    // }
+    // If you want to implement this later, the code would go here
   }
 } 
\ No newline at end of file
diff --git a/src/services/streaming-control.ts b/src/services/streaming-control.ts
index 4397244..f4abeea 100644
--- a/src/services/streaming-control.ts
+++ b/src/services/streaming-control.ts
@@ -1,7 +1,8 @@
-import { LanguageModelUsage, type ToolCall } from "ai";
+import { LanguageModelUsage } from "ai";
 import { Conversation, Message, MessageContent, MessageContentType } from "../types/chat";
 import { v4 as uuidv4 } from 'uuid';
 import { MessageHelper } from "./message-helper";
+import { CustomToolCall, ToolCallStatus } from "../types/tool-call";
 
 export class StreamControlHandler {
     public targetConverstation: Conversation;
@@ -11,7 +12,7 @@ export class StreamControlHandler {
 
     private placeholderMessage: Message;
     private fullText: string = '';
-    private toolCallsInProgress: Map<string, ToolCall> = new Map();
+    private toolCallsInProgress: Map<string, CustomToolCall> = new Map();
     private imageContents: MessageContent[] = [];
 
     constructor(
@@ -58,23 +59,30 @@ export class StreamControlHandler {
         this.onChunkCallback(updatedConversation);
     }
 
-    public onToolCall(toolCall: ToolCall) {
-        // Store the tool call
-        this.toolCallsInProgress.set(toolCall.id, toolCall);
+    public onToolCall(toolName: string, toolId: string, args: Record<string, unknown>) {
+        // Create and store the tool call
+        const toolCall: CustomToolCall = {
+            id: toolId,
+            name: toolName,
+            args: args,
+            status: ToolCallStatus.CALLED
+        };
+        
+        this.toolCallsInProgress.set(toolId, toolCall);
 
         // Update the message to include information about the tool call
         let toolCallText = this.fullText;
         
         // Append a message about the tool call in progress
-        if (toolCall.name === 'generate_image') {
-            const imagePrompt = toolCall.parameters?.prompt;
+        if (toolName === 'generate_image') {
+            const imagePrompt = args?.prompt as string;
             if (imagePrompt) {
                 toolCallText += `\n\nGenerating image with prompt: "${imagePrompt}"`;
             } else {
                 toolCallText += `\n\nGenerating image...`;
             }
         } else {
-            toolCallText += `\n\nExecuting tool call: ${toolCall.name}`;
+            toolCallText += `\n\nExecuting tool call: ${toolName}`;
         }
 
         const updatedMessages = new Map(this.targetConverstation.messages);
@@ -92,13 +100,26 @@ export class StreamControlHandler {
         this.onChunkCallback(updatedConversation);
     }
 
-    public onToolCallResult(toolCallId: string, result: any) {
+    public onToolCallInProgress(toolCallId: string) {
+        const toolCall = this.toolCallsInProgress.get(toolCallId);
+        if (!toolCall) return;
+        
+        toolCall.status = ToolCallStatus.IN_PROGRESS;
+        this.toolCallsInProgress.set(toolCallId, toolCall);
+    }
+
+    public onToolCallResult(toolCallId: string, result: unknown) {
         const toolCall = this.toolCallsInProgress.get(toolCallId);
         if (!toolCall) return;
 
+        // Update tool call status
+        toolCall.status = ToolCallStatus.COMPLETED;
+        toolCall.result = result;
+        this.toolCallsInProgress.set(toolCallId, toolCall);
+
         // Handle image generation results
-        if (toolCall.name === 'generate_image' && result?.images) {
-            const images = result.images;
+        if (toolCall.name === 'generate_image' && (result as {images?: string[]})?.images) {
+            const images = (result as {images: string[]}).images;
             if (Array.isArray(images)) {
                 // Store the images for later inclusion in the final message
                 for (const imageData of images) {
@@ -140,6 +161,11 @@ export class StreamControlHandler {
         const toolCall = this.toolCallsInProgress.get(toolCallId);
         if (!toolCall) return;
 
+        // Update tool call status
+        toolCall.status = ToolCallStatus.ERROR;
+        toolCall.error = error;
+        this.toolCallsInProgress.set(toolCallId, toolCall);
+
         // Update message with error info
         let errorText = this.fullText;
         
diff --git a/src/types/tool-call.ts b/src/types/tool-call.ts
new file mode 100644
index 0000000..5bde068
--- /dev/null
+++ b/src/types/tool-call.ts
@@ -0,0 +1,33 @@
+// Custom tool call types for the application
+
+export interface CustomToolCall {
+  id: string;
+  name: string;
+  args: Record<string, unknown>;
+  status: ToolCallStatus;
+  result?: unknown;
+  error?: Error;
+}
+
+export enum ToolCallStatus {
+  CALLED = 'CALLED',
+  IN_PROGRESS = 'IN_PROGRESS',
+  COMPLETED = 'COMPLETED',
+  ERROR = 'ERROR'
+}
+
+export interface ImageGenerationArgs {
+  prompt: string;
+  size?: string;
+  style?: 'vivid' | 'natural';
+}
+
+export interface ToolCallResult {
+  id: string;
+  result: unknown;
+}
+
+export interface ToolCallError {
+  id: string;
+  error: Error;
+} 
\ No newline at end of file

From f2f7b5a4752e5820bf31353b7b4cbb9b90b29067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sun, 4 May 2025 14:00:52 +0800
Subject: [PATCH 10/27] Fix: tool call

---
 src/services/core/ai-service-provider.ts      |  3 +-
 .../providers/common-provider-service.ts      | 71 ++++++++++++++-----
 src/services/providers/openai-service.ts      | 12 +++-
 3 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/src/services/core/ai-service-provider.ts b/src/services/core/ai-service-provider.ts
index 1993448..52065f1 100644
--- a/src/services/core/ai-service-provider.ts
+++ b/src/services/core/ai-service-provider.ts
@@ -27,6 +27,7 @@ export interface CompletionOptions {
   signal?: AbortSignal; // AbortSignal for cancellation
   mcpTools?: string[]; // IDs of MCP servers to use as tools
   tools?: Record<string, unknown>; // Pre-configured tools for the AI
+  toolChoice?: Record<string, unknown>; // Pre-configured tool Choice for the AI
 }
 
 /**
@@ -79,7 +80,7 @@ export interface AiServiceProvider {
   getChatCompletion(
     messages: Message[], 
     options: CompletionOptions,
-    streamController: StreamControlHandler
+    streamController: StreamControlHandler,
   ): Promise<Message>;
   
   /**
diff --git a/src/services/providers/common-provider-service.ts b/src/services/providers/common-provider-service.ts
index b0f1293..37ee4b4 100644
--- a/src/services/providers/common-provider-service.ts
+++ b/src/services/providers/common-provider-service.ts
@@ -1,4 +1,4 @@
-import { generateText, streamText, Provider, type LanguageModelUsage, type ToolSet } from 'ai';
+import { generateText, streamText, Provider, type LanguageModelUsage, type ToolSet, tool } from 'ai';
 import { Message, MessageRole } from '../../types/chat';
 import { AiServiceProvider, CompletionOptions } from '../core/ai-service-provider';
 import { SettingsService } from '../settings-service';
@@ -7,7 +7,8 @@ import { v4 as uuidv4 } from 'uuid';
 import { MessageHelper } from '../message-helper';
 import { AIServiceCapability, mapModelCapabilities } from '../../types/capabilities';
 import { ModelSettings } from '../../types/settings';
-import { LanguageModelV1, ToolChoice } from 'ai';
+import { LanguageModelV1 } from 'ai';
+import { z } from 'zod';
 
 // Define an interface for tool results to fix the 'never' type errors
 interface ToolResult {
@@ -159,23 +160,64 @@ export class CommonProviderHelper implements AiServiceProvider {
     modelInstance: LanguageModelV1,
     messages: Message[],
     options: CompletionOptions,
-    streamController: StreamControlHandler,
-    tools: ToolSet | undefined = undefined,
-    toolChoice: ToolChoice<ToolSet> | undefined = undefined
+    streamController: StreamControlHandler
   ): Promise<Message> {
     try {
       const formattedMessages = await MessageHelper.MessagesContentToOpenAIFormat(messages);
 
       console.log('formattedMessages: ', formattedMessages);
 
+      // Build ToolSet & ToolChoice for getChatCompletionByModel API
+      const rawTools = options.tools;
+      
+      // Convert raw tools to AI SDK format
+      const formattedTools: ToolSet = {};
+      
+      if (rawTools && typeof rawTools === 'object') {
+        for (const [toolName, toolConfig] of Object.entries(rawTools)) {
+          if (toolConfig && typeof toolConfig === 'object') {
+            // Special case for image generation
+            if (toolName === 'generate_image') {
+              formattedTools[toolName] = tool({
+                description: 'Generate an image from a text prompt',
+                parameters: z.object({
+                  prompt: z.string().describe('The text prompt to generate an image from'),
+                  size: z.string().optional().describe('The size of the image to generate'),
+                  style: z.enum(['vivid', 'natural']).optional().describe('The style of the image to generate')
+                }),
+                execute: async (args) => {
+                  // Execute is handled later in the tool call handler
+                  return (toolConfig as ToolWithExecute).execute(args);
+                }
+              });
+            } else {
+              // For other tools, try to extract description and parameters
+              const toolWithExecute = toolConfig as ToolWithExecute;
+              const description = (toolConfig as {description?: string}).description || `Execute ${toolName} tool`;
+              
+              // Create a fallback schema if not provided
+              const parameters = z.object({}).catchall(z.unknown());
+              
+              formattedTools[toolName] = tool({
+                description,
+                parameters,
+                execute: async (args) => {
+                  if (typeof toolWithExecute.execute === 'function') {
+                    return toolWithExecute.execute(args);
+                  }
+                  throw new Error(`Tool ${toolName} does not have an execute function`);
+                }
+              });
+            }
+          }
+        }
+      }
+
       let fullText = '';
 
       if (options.stream) {
         console.log(`Streaming ${options.provider}/${options.model} response`);
         
-        // Prepare tools for AI SDK format if they exist
-        const toolsForStream = tools || options.tools as unknown as ToolSet;
-        
         const result = streamText({
           model: modelInstance,
           abortSignal: streamController.getAbortSignal(),
@@ -185,8 +227,7 @@ export class CommonProviderHelper implements AiServiceProvider {
           topP: options.top_p,
           frequencyPenalty: options.frequency_penalty,
           presencePenalty: options.presence_penalty,
-          tools: toolsForStream,
-          toolChoice: toolChoice,
+          tools: Object.keys(formattedTools).length > 0 ? formattedTools : undefined,
           toolCallStreaming: true,
           onFinish: (result: { usage: LanguageModelUsage }) => {
             console.log('OpenAI streaming chat completion finished');
@@ -266,9 +307,9 @@ export class CommonProviderHelper implements AiServiceProvider {
                     error instanceof Error ? error : new Error('Unknown error in image generation')
                   );
                 }
-              } else if (options.tools) {
+              } else if (rawTools) {
                 // Use a safer way to check for and execute tools
-                const toolsMap = options.tools as Record<string, unknown>;
+                const toolsMap = rawTools as Record<string, unknown>;
                 const tool = toolsMap[toolName] as ToolWithExecute | undefined;
                 
                 if (tool && typeof tool.execute === 'function') {
@@ -300,9 +341,6 @@ export class CommonProviderHelper implements AiServiceProvider {
       else {
         console.log(`Generating ${options.provider}/${options.model} response`);
         
-        // Prepare tools for AI SDK format if they exist
-        const toolsForGenerate = tools || options.tools as unknown as ToolSet;
-        
         const { text, usage, toolResults } = await generateText({
           model: modelInstance,
           messages: formattedMessages,
@@ -311,8 +349,7 @@ export class CommonProviderHelper implements AiServiceProvider {
           topP: options.top_p,
           frequencyPenalty: options.frequency_penalty,
           presencePenalty: options.presence_penalty,
-          tools: toolsForGenerate,
-          toolChoice: toolChoice,
+          tools: Object.keys(formattedTools).length > 0 ? formattedTools : undefined,
           maxSteps: 3, // Allow multiple steps for tool calls
         });
 
diff --git a/src/services/providers/openai-service.ts b/src/services/providers/openai-service.ts
index b5205d5..2045ceb 100644
--- a/src/services/providers/openai-service.ts
+++ b/src/services/providers/openai-service.ts
@@ -152,7 +152,17 @@ export class OpenAIService implements AiServiceProvider {
 
     options.stream = false;
 
-    return CommonProviderHelper.getChatCompletionByModel(modelInstance, messages, options, streamController, tools, toolChoice);
+    options.tools = {
+      ...options.tools,
+      tools
+    }
+
+    options.toolChoice = {
+      ...options.toolChoice,
+      toolChoice
+    }
+
+    return CommonProviderHelper.getChatCompletionByModel(modelInstance, messages, options, streamController);
   }
 
   /**

From b1b45c2b3513c34e7d2520bb77f76714e699a860 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sun, 4 May 2025 14:28:46 +0800
Subject: [PATCH 11/27] Fix: Add MCP Page Layout

---
 src/components/pages/MCPServerPage.tsx | 493 +++++++++++++++++--------
 src/locales/en/translation.json        |  24 +-
 src/locales/es/translation.json        |  40 +-
 src/locales/ja/translation.json        |  37 +-
 src/locales/ko/translation.json        |  34 +-
 src/locales/zh-CN/translation.json     |  39 +-
 src/locales/zh-TW/translation.json     |  36 +-
 src/services/mcp-service.ts            |  36 +-
 src/types/settings.ts                  |  17 +-
 9 files changed, 572 insertions(+), 184 deletions(-)

diff --git a/src/components/pages/MCPServerPage.tsx b/src/components/pages/MCPServerPage.tsx
index 60f663d..a2c38e7 100644
--- a/src/components/pages/MCPServerPage.tsx
+++ b/src/components/pages/MCPServerPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Plus, Edit, Trash2, Server } from 'lucide-react';
+import { Plus, Edit, Trash2, Server, X } from 'lucide-react';
 import { MCPServerSettings } from '../../types/settings';
 import { MCPService } from '../../services/mcp-service';
 import { SETTINGS_CHANGE_EVENT } from '../../services/settings-service';
@@ -7,116 +7,283 @@ import { useTranslation } from '../../hooks/useTranslation';
 
 interface MCPServerFormProps {
   server?: MCPServerSettings;
-  onSave: (name: string, type: 'sse' | 'stdio' | 'streamableHttp', url: string, headers?: Record<string, string>) => void;
+  onSave: (server: Omit<MCPServerSettings, 'id' | 'isDefault' | 'isImageGeneration'>) => void;
   onCancel: () => void;
 }
 
 const MCPServerForm: React.FC<MCPServerFormProps> = ({ server, onSave, onCancel }) => {
   const { t } = useTranslation();
   const [name, setName] = useState(server?.name || '');
+  const [description, setDescription] = useState(server?.description || '');
   const [type, setType] = useState<'sse' | 'stdio' | 'streamableHttp'>(server?.type || 'sse');
+  
+  // Common fields - URL & Headers (for sse and streamableHttp)
   const [url, setUrl] = useState(server?.url || '');
   const [headers, setHeaders] = useState<string>(server?.headers ? JSON.stringify(server.headers, null, 2) : '{}');
+  
+  // Stdio specific fields
+  const [command, setCommand] = useState(server?.command || '');
+  const [args, setArgs] = useState<string>(server?.args ? server.args.join('\n') : '');
+  const [env, setEnv] = useState<string>(server?.env ? JSON.stringify(server.env, null, 2) : '{}');
+  
+  // Timeout (common to all types)
+  const [timeout, setTimeout] = useState<number>(server?.timeout || 60);
+  
   const [isValid, setIsValid] = useState(false);
 
   useEffect(() => {
-    setIsValid(name.trim() !== '' && url.trim() !== '');
-  }, [name, url]);
+    let valid = name.trim() !== '';
+    
+    if (type === 'sse' || type === 'streamableHttp') {
+      valid = valid && url.trim() !== '';
+    } else if (type === 'stdio') {
+      valid = valid && command.trim() !== '';
+    }
+    
+    setIsValid(valid);
+  }, [name, type, url, command]);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     
-    let parsedHeaders: Record<string, string> | undefined;
     try {
-      parsedHeaders = JSON.parse(headers);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      // Parse the headers if provided
+      let parsedHeaders: Record<string, string> | undefined;
+      if (headers) {
+        parsedHeaders = JSON.parse(headers);
+      }
+      
+      // Parse args for stdio
+      let parsedArgs: string[] | undefined;
+      if (type === 'stdio' && args.trim()) {
+        parsedArgs = args.split('\n').filter(arg => arg.trim() !== '');
+      }
+      
+      // Parse env for stdio
+      let parsedEnv: Record<string, string> | undefined;
+      if (type === 'stdio' && env) {
+        parsedEnv = JSON.parse(env);
+      }
+      
+      // Create the server object based on type
+      const serverData: Omit<MCPServerSettings, 'id' | 'isDefault' | 'isImageGeneration'> = {
+        name,
+        type,
+        description: description || undefined,
+        timeout
+      };
+      
+      // Add type-specific properties
+      if (type === 'sse' || type === 'streamableHttp') {
+        serverData.url = url;
+        serverData.headers = parsedHeaders;
+      } else if (type === 'stdio') {
+        serverData.command = command;
+        serverData.args = parsedArgs;
+        serverData.env = parsedEnv;
+      }
+      
+      onSave(serverData);
     } catch (error) {
-      alert('Invalid JSON in headers field');
-      return;
+      if (error instanceof Error) {
+        alert(`Invalid JSON: ${error.message}`);
+      } else {
+        alert('Invalid JSON format');
+      }
     }
-    
-    onSave(name, type, url, parsedHeaders);
   };
 
   return (
-    <form onSubmit={handleSubmit} className="p-4 space-y-4 bg-white border rounded-lg">
-      <div>
-        <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="name">
-          {t('mcpServer.serverName')}
-        </label>
-        <input
-          id="name"
-          type="text"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
-          placeholder={t('mcpServer.serverNamePlaceholder')}
-          required
-        />
-      </div>
+    <div className="fixed inset-0 z-20 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="w-full max-w-lg max-h-[90%] p-6 overflow-y-auto bg-white rounded-lg shadow-lg">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-medium">
+            {server ? t('mcpServer.editServer') : t('mcpServer.addServer')}
+          </h3>
+          <button 
+            onClick={onCancel}
+            className="p-1 text-gray-500 hover:text-gray-700"
+          >
+            <X size={20} />
+          </button>
+        </div>
 
-      <div>
-        <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="type">
-          {t('mcpServer.transportType')}
-        </label>
-        <select
-          id="type"
-          value={type}
-          onChange={(e) => setType(e.target.value as 'sse' | 'stdio' | 'streamableHttp')}
-          className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
-        >
-          <option value="sse">SSE (Server-Sent Events)</option>
-          <option value="stdio">Stdio</option>
-          <option value="streamableHttp">Streamable HTTP</option>
-        </select>
-      </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* General Settings */}
+          <h4 className="font-medium text-md">{t('common.general')}</h4>
+          
+          <div>
+            <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="name">
+              <span className="text-red-500">*</span> {t('mcpServer.serverName')}
+            </label>
+            <input
+              id="name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+              placeholder={t('mcpServer.serverNamePlaceholder')}
+              required
+            />
+          </div>
 
-      <div>
-        <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="url">
-          {t('mcpServer.serverURL')}
-        </label>
-        <input
-          id="url"
-          type="text"
-          value={url}
-          onChange={(e) => setUrl(e.target.value)}
-          className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
-          placeholder={t('mcpServer.serverURLPlaceholder')}
-          required
-        />
-      </div>
+          <div>
+            <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="description">
+              {t('mcpServer.description')}
+            </label>
+            <textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+              placeholder={t('mcpServer.descriptionPlaceholder')}
+              rows={2}
+            />
+          </div>
 
-      <div>
-        <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="headers">
-          {t('mcpServer.headers')}
-        </label>
-        <textarea
-          id="headers"
-          value={headers}
-          onChange={(e) => setHeaders(e.target.value)}
-          className="w-full p-2 font-mono text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
-          rows={5}
-          placeholder='{"Authorization": "Bearer your-token"}'
-        />
-      </div>
+          <div>
+            <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="type">
+              <span className="text-red-500">*</span> {t('mcpServer.transportType')}
+            </label>
+            <select
+              id="type"
+              value={type}
+              onChange={(e) => setType(e.target.value as 'sse' | 'stdio' | 'streamableHttp')}
+              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+            >
+              <option value="sse">{t('mcpServer.sseOption')}</option>
+              <option value="stdio">{t('mcpServer.stdioOption')}</option>
+              <option value="streamableHttp">{t('mcpServer.streamableHttpOption')}</option>
+            </select>
+          </div>
+
+          {/* Connection Settings - based on type */}
+          <h4 className="pt-2 font-medium text-md">{t('mcpServer.connectionSettings')}</h4>
+          
+          {/* Fields for SSE and StreamableHttp */}
+          {(type === 'sse' || type === 'streamableHttp') && (
+            <>
+              <div>
+                <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="url">
+                  <span className="text-red-500">*</span> {t('mcpServer.serverURL')}
+                </label>
+                <input
+                  id="url"
+                  type="text"
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                  className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+                  placeholder={t('mcpServer.serverURLPlaceholder')}
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="headers">
+                  {t('mcpServer.headers')}
+                </label>
+                <textarea
+                  id="headers"
+                  value={headers}
+                  onChange={(e) => setHeaders(e.target.value)}
+                  className="w-full p-2 font-mono text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+                  rows={5}
+                  placeholder='{"Content-Type": "application/json", "Authorization": "Bearer token"}'
+                />
+              </div>
+            </>
+          )}
+
+          {/* Fields for Stdio */}
+          {type === 'stdio' && (
+            <>
+              <div>
+                <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="command">
+                  <span className="text-red-500">*</span> {t('mcpServer.command')}
+                </label>
+                <input
+                  id="command"
+                  type="text"
+                  value={command}
+                  onChange={(e) => setCommand(e.target.value)}
+                  className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+                  placeholder={t('mcpServer.commandPlaceholder')}
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="args">
+                  {t('mcpServer.args')}
+                </label>
+                <textarea
+                  id="args"
+                  value={args}
+                  onChange={(e) => setArgs(e.target.value)}
+                  className="w-full p-2 font-mono text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+                  rows={3}
+                  placeholder={t('mcpServer.argsPlaceholder')}
+                />
+                <p className="mt-1 text-xs text-gray-500">{t('mcpServer.argsHelp')}</p>
+              </div>
+
+              <div>
+                <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="env">
+                  {t('mcpServer.env')}
+                </label>
+                <textarea
+                  id="env"
+                  value={env}
+                  onChange={(e) => setEnv(e.target.value)}
+                  className="w-full p-2 font-mono text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+                  rows={4}
+                  placeholder='{"KEY1": "value1", "KEY2": "value2"}'
+                />
+              </div>
+            </>
+          )}
+
+          {/* Advanced Settings - common to all types */}
+          <h4 className="pt-2 font-medium text-md">{t('mcpServer.advancedSettings')}</h4>
+          
+          <div>
+            <label className="block mb-1 text-sm font-medium text-gray-700" htmlFor="timeout">
+              {t('mcpServer.timeout')}
+            </label>
+            <div className="flex">
+              <input
+                id="timeout"
+                type="number"
+                value={timeout}
+                onChange={(e) => setTimeout(parseInt(e.target.value) || 60)}
+                min="1"
+                className="w-full p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-primary-300"
+              />
+              <span className="inline-flex items-center px-3 text-gray-500 border border-l-0 border-gray-300 rounded-r-md bg-gray-50">
+                {t('mcpServer.seconds')}
+              </span>
+            </div>
+          </div>
 
-      <div className="flex justify-end space-x-2">
-        <button
-          type="button"
-          onClick={onCancel}
-          className="px-4 py-2 text-gray-600 transition-colors bg-gray-200 rounded-md hover:bg-gray-300"
-        >
-          {t('common.cancel')}
-        </button>
-        <button
-          type="submit"
-          disabled={!isValid}
-          className="px-4 py-2 text-white rounded-md confirm-btn disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          {t('common.save')}
-        </button>
+          <div className="flex justify-end mt-6 space-x-2">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="px-4 py-2 text-gray-600 transition-colors bg-gray-200 rounded-md hover:bg-gray-300"
+            >
+              {t('common.cancel')}
+            </button>
+            <button
+              type="submit"
+              disabled={!isValid}
+              className="px-4 py-2 text-white rounded-md confirm-btn disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {t('common.save')}
+            </button>
+          </div>
+        </form>
       </div>
-    </form>
+    </div>
   );
 };
 
@@ -164,21 +331,20 @@ export const MCPServerPage: React.FC = () => {
     }
   };
 
-  const handleSaveServer = async (name: string, type: 'sse' | 'stdio' | 'streamableHttp', url: string, headers?: Record<string, string>) => {
+  const handleSaveServer = async (serverData: Omit<MCPServerSettings, 'id' | 'isDefault' | 'isImageGeneration'>) => {
     try {
       if (editingServer) {
         // Update existing server
         const updatedServer: MCPServerSettings = {
-          ...editingServer,
-          name,
-          type,
-          url,
-          headers
+          ...serverData,
+          id: editingServer.id,
+          isDefault: editingServer.isDefault,
+          isImageGeneration: editingServer.isImageGeneration
         };
         await mcpService.updateMCPServer(updatedServer);
       } else {
         // Create new server
-        await mcpService.createMCPServer(name, type, url, headers);
+        await mcpService.createMCPServer(serverData);
       }
       
       setShowForm(false);
@@ -194,6 +360,20 @@ export const MCPServerPage: React.FC = () => {
     setEditingServer(undefined);
   };
 
+  // Helper function to format the server type for display
+  const formatServerType = (type: string): string => {
+    switch (type) {
+      case 'sse':
+        return t('mcpServer.sseDisplay');
+      case 'stdio':
+        return t('mcpServer.stdioDisplay');
+      case 'streamableHttp':
+        return t('mcpServer.streamableHttpDisplay');
+      default:
+        return type.toUpperCase();
+    }
+  };
+
   return (
     <div className="flex flex-col w-full h-full bg-white">
       <div className="w-full p-6 overflow-y-auto">
@@ -208,69 +388,82 @@ export const MCPServerPage: React.FC = () => {
           </button>
         </div>
 
-        {showForm ? (
-          <MCPServerForm 
-            server={editingServer} 
-            onSave={handleSaveServer} 
-            onCancel={handleCancelForm} 
-          />
-        ) : (
-          <div className="space-y-4">
-            {Object.keys(servers).length === 0 ? (
-              <div className="py-8 text-center text-gray-500">
-                <Server size={48} className="mx-auto mb-4" />
-                <p>{t('mcpServer.noServers')}</p>
-                <p className="text-sm">{t('mcpServer.addServerPrompt')}</p>
-              </div>
-            ) : (
-              Object.values(servers).map((server) => (
-                <div 
-                  key={server.id} 
-                  className="flex flex-row items-center justify-between p-4 bg-white border rounded-lg"
-                >
-                  <div className="flex-1">
-                    <div className="flex items-center">
-                      <h3 className="text-lg font-medium">{server.name}</h3>
-                      {server.isDefault && (
-                        <span className="ml-2 px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-700">
-                          {t('mcpServer.default')}
-                        </span>
-                      )}
-                      {server.isImageGeneration && (
-                        <span className="ml-2 px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700">
-                          {t('mcpServer.imageGeneration')}
-                        </span>
-                      )}
-                    </div>
-                    <p className="mt-1 text-sm text-gray-500">
-                      {server.type.toUpperCase()} | {server.url}
-                    </p>
+        <div className="space-y-4">
+          {Object.keys(servers).length === 0 ? (
+            <div className="py-8 text-center text-gray-500">
+              <Server size={48} className="mx-auto mb-4" />
+              <p>{t('mcpServer.noServers')}</p>
+              <p className="text-sm">{t('mcpServer.addServerPrompt')}</p>
+            </div>
+          ) : (
+            Object.values(servers).map((server) => (
+              <div 
+                key={server.id} 
+                className="flex flex-row items-center justify-between p-4 bg-white border rounded-lg"
+              >
+                <div className="flex-1">
+                  <div className="flex items-center">
+                    <h3 className="text-lg font-medium">{server.name}</h3>
+                    {server.isDefault && (
+                      <span className="ml-2 px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-700">
+                        {t('mcpServer.default')}
+                      </span>
+                    )}
+                    {server.isImageGeneration && (
+                      <span className="ml-2 px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700">
+                        {t('mcpServer.imageGeneration')}
+                      </span>
+                    )}
                   </div>
                   
-                  <div className="flex space-x-2">
-                    <button
-                      onClick={() => handleEditServer(server)}
-                      className="p-2 text-gray-500 transition-colors rounded-full hover:text-blue-500 hover:bg-blue-50"
-                      disabled={server.isDefault}
-                      title={server.isDefault ? t('mcpServer.cannotEditDefault') : t('common.edit')}
-                    >
-                      <Edit size={18} />
-                    </button>
-                    <button
-                      onClick={() => handleDeleteServer(server.id)}
-                      className="p-2 text-gray-500 transition-colors rounded-full hover:text-red-500 hover:bg-red-50"
-                      disabled={server.isDefault}
-                      title={server.isDefault ? t('mcpServer.cannotDeleteDefault') : t('common.delete')}
-                    >
-                      <Trash2 size={18} />
-                    </button>
-                  </div>
+                  {server.description && (
+                    <p className="mt-1 text-sm text-gray-500">{server.description}</p>
+                  )}
+                  
+                  <p className="mt-1 text-sm text-gray-500">
+                    {formatServerType(server.type)}
+                    {(server.type === 'sse' || server.type === 'streamableHttp') && server.url && (
+                      <> | {server.url}</>
+                    )}
+                    {server.type === 'stdio' && server.command && (
+                      <> | {server.command}</>
+                    )}
+                  </p>
                 </div>
-              ))
-            )}
-          </div>
-        )}
+                
+                <div className="flex space-x-2">
+                  {!server.isDefault && (
+                    <>
+                      <button
+                        onClick={() => handleEditServer(server)}
+                        className="p-2 text-gray-500 transition-colors rounded-full hover:text-blue-500 hover:bg-blue-50"
+                        title={t('common.edit')}
+                      >
+                        <Edit size={18} />
+                      </button>
+                      <button
+                        onClick={() => handleDeleteServer(server.id)}
+                        className="p-2 text-gray-500 transition-colors rounded-full hover:text-red-500 hover:bg-red-50"
+                        title={t('common.delete')}
+                      >
+                        <Trash2 size={18} />
+                      </button>
+                    </>
+                  )}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
       </div>
+
+      {showForm && (
+        <MCPServerForm 
+          server={editingServer} 
+          onSave={handleSaveServer} 
+          onCancel={handleCancelForm} 
+        />
+      )}
     </div>
   );
 };
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index d6a6b1d..2aba8a2 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -9,7 +9,8 @@
     "submit": "Submit",
     "loading": "Loading...",
     "error": "Error",
-    "success": "Success"
+    "success": "Success",
+    "general": "General"
   },
   "chat": {
     "sendMessage": "Send Message",
@@ -125,8 +126,11 @@
   "mcpServer": {
     "title": "MCP Servers",
     "addServer": "Add Server",
+    "editServer": "Edit Server",
     "serverName": "Server Name",
     "serverNamePlaceholder": "Enter server name",
+    "description": "Description",
+    "descriptionPlaceholder": "Enter server description (optional)",
     "transportType": "Transport Type",
     "serverURL": "Server URL",
     "serverURLPlaceholder": "Enter server URL",
@@ -136,7 +140,23 @@
     "noServers": "No MCP servers configured",
     "addServerPrompt": "Click the 'Add Server' button to create one",
     "cannotEditDefault": "Cannot edit default server",
-    "cannotDeleteDefault": "Cannot delete default server"
+    "cannotDeleteDefault": "Cannot delete default server",
+    "sseOption": "Server-Sent Events (SSE)",
+    "stdioOption": "Standard IO (stdio)",
+    "streamableHttpOption": "Streamable HTTP",
+    "sseDisplay": "SSE",
+    "stdioDisplay": "STDIO",
+    "streamableHttpDisplay": "Streamable HTTP",
+    "connectionSettings": "Connection Settings",
+    "command": "Command",
+    "commandPlaceholder": "Enter command (e.g., python, node)",
+    "args": "Arguments",
+    "argsPlaceholder": "One argument per line",
+    "argsHelp": "Enter each argument on a separate line",
+    "env": "Environment Variables (JSON)",
+    "advancedSettings": "Advanced Settings",
+    "timeout": "Timeout",
+    "seconds": "seconds"
   },
   "settings": {
     "language": "Language",
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index ec41b31..164a147 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -9,7 +9,8 @@
     "submit": "Enviar",
     "loading": "Cargando...",
     "error": "Error",
-    "success": "Éxito"
+    "success": "Éxito",
+    "general": "General"
   },
   "chat": {
     "sendMessage": "Enviar Mensaje",
@@ -39,6 +40,14 @@
     "selectImageProvider": "Seleccionar Proveedor de Imágenes",
     "noImageProvidersAvailable": "No hay proveedores de imágenes disponibles"
   },
+  "tools": {
+    "executing": "Ejecutando herramienta...",
+    "executedSuccessfully": "Ejecución de herramienta completada",
+    "executionFailed": "Fallo en la ejecución de la herramienta",
+    "toolName": "Nombre de la herramienta",
+    "result": "Resultado",
+    "error": "Error"
+  },
   "translation": {
     "title": "Traducción",
     "sourceLanguageWithAutoSelected": "El idioma de origen se detectará automáticamente",
@@ -117,18 +126,37 @@
   "mcpServer": {
     "title": "Servidores MCP",
     "addServer": "Agregar Servidor",
+    "editServer": "Editar Servidor",
     "serverName": "Nombre del Servidor",
-    "serverNamePlaceholder": "Introduce el nombre del servidor",
+    "serverNamePlaceholder": "Ingrese el nombre del servidor",
+    "description": "Descripción",
+    "descriptionPlaceholder": "Ingrese descripción del servidor (opcional)",
     "transportType": "Tipo de Transporte",
     "serverURL": "URL del Servidor",
-    "serverURLPlaceholder": "Introduce la URL del servidor",
-    "headers": "Cabeceras (JSON)",
+    "serverURLPlaceholder": "Ingrese URL del servidor",
+    "headers": "Encabezados (JSON)",
     "default": "Predeterminado",
     "imageGeneration": "Generación de Imágenes",
     "noServers": "No hay servidores MCP configurados",
-    "addServerPrompt": "Haz clic en el botón 'Agregar Servidor' para crear uno",
+    "addServerPrompt": "Haga clic en el botón 'Agregar Servidor' para crear uno",
     "cannotEditDefault": "No se puede editar el servidor predeterminado",
-    "cannotDeleteDefault": "No se puede eliminar el servidor predeterminado"
+    "cannotDeleteDefault": "No se puede eliminar el servidor predeterminado",
+    "sseOption": "Eventos enviados por el servidor (SSE)",
+    "stdioOption": "Entrada/Salida estándar (stdio)",
+    "streamableHttpOption": "HTTP transmisible",
+    "sseDisplay": "SSE",
+    "stdioDisplay": "STDIO",
+    "streamableHttpDisplay": "HTTP Transmisible",
+    "connectionSettings": "Configuración de Conexión",
+    "command": "Comando",
+    "commandPlaceholder": "Ingrese el comando (ej., python, node)",
+    "args": "Argumentos",
+    "argsPlaceholder": "Un argumento por línea",
+    "argsHelp": "Ingrese cada argumento en una línea separada",
+    "env": "Variables de Entorno (JSON)",
+    "advancedSettings": "Configuración Avanzada",
+    "timeout": "Tiempo de espera",
+    "seconds": "segundos"
   },
   "settings": {
     "language": "Idioma",
diff --git a/src/locales/ja/translation.json b/src/locales/ja/translation.json
index edf4c21..76e2ff7 100644
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -9,7 +9,8 @@
     "submit": "送信",
     "loading": "読み込み中...",
     "error": "エラー",
-    "success": "成功"
+    "success": "成功",
+    "general": "一般"
   },
   "chat": {
     "sendMessage": "メッセージを送信",
@@ -39,6 +40,14 @@
     "selectImageProvider": "画像プロバイダーを選択",
     "noImageProvidersAvailable": "利用可能な画像プロバイダーがありません"
   },
+  "tools": {
+    "executing": "ツールを実行中...",
+    "executedSuccessfully": "ツール実行が完了しました",
+    "executionFailed": "ツール実行に失敗しました",
+    "toolName": "ツール名",
+    "result": "結果",
+    "error": "エラー"
+  },
   "translation": {
     "title": "翻訳",
     "sourceLanguageWithAutoSelected": "ソース言語は自動で検出されます",
@@ -117,18 +126,37 @@
   "mcpServer": {
     "title": "MCPサーバー",
     "addServer": "サーバーを追加",
+    "editServer": "サーバーを編集",
     "serverName": "サーバー名",
     "serverNamePlaceholder": "サーバー名を入力",
+    "description": "説明",
+    "descriptionPlaceholder": "サーバーの説明を入力（任意）",
     "transportType": "トランスポートタイプ",
     "serverURL": "サーバーURL",
     "serverURLPlaceholder": "サーバーURLを入力",
-    "headers": "ヘッダー (JSON)",
+    "headers": "ヘッダー（JSON）",
     "default": "デフォルト",
     "imageGeneration": "画像生成",
     "noServers": "MCPサーバーが設定されていません",
-    "addServerPrompt": "'サーバーを追加'ボタンをクリックして作成してください",
+    "addServerPrompt": "「サーバーを追加」ボタンをクリックして作成してください",
     "cannotEditDefault": "デフォルトサーバーは編集できません",
-    "cannotDeleteDefault": "デフォルトサーバーは削除できません"
+    "cannotDeleteDefault": "デフォルトサーバーは削除できません",
+    "sseOption": "サーバー送信イベント（SSE）",
+    "stdioOption": "標準入出力（stdio）",
+    "streamableHttpOption": "ストリーミング可能なHTTP",
+    "sseDisplay": "SSE",
+    "stdioDisplay": "STDIO",
+    "streamableHttpDisplay": "ストリーミングHTTP",
+    "connectionSettings": "接続設定",
+    "command": "コマンド",
+    "commandPlaceholder": "コマンドを入力（例：python、node）",
+    "args": "引数",
+    "argsPlaceholder": "引数を1行に1つずつ入力",
+    "argsHelp": "各引数を別々の行に入力してください",
+    "env": "環境変数（JSON）",
+    "advancedSettings": "詳細設定",
+    "timeout": "タイムアウト",
+    "seconds": "秒"
   },
   "settings": {
     "language": "言語",
@@ -173,7 +201,6 @@
     "webSearch_toggle_label": "ウェブ検索機能を有効にする",
     "webSearch_description": "有効にすると、AIはウェブを検索してより最新の情報を提供できます。注意: ウェブ検索は現在、OpenAIとGeminiモデルでのみサポートされています。また、ウェブ検索が有効な場合、ストリーミング応答（テキストが段階的に表示される）は利用できません。",
 
-    "general": "一般設定",
     "startup": "起動設定",
     "startWithSystem": "システム起動時に起動する",
     "startupToTray": "起動時にトレイに最小化する",
diff --git a/src/locales/ko/translation.json b/src/locales/ko/translation.json
index a816df6..e011ef2 100644
--- a/src/locales/ko/translation.json
+++ b/src/locales/ko/translation.json
@@ -9,7 +9,8 @@
     "submit": "제출",
     "loading": "로딩 중...",
     "error": "오류",
-    "success": "성공"
+    "success": "성공",
+    "general": "일반"
   },
   "chat": {
     "sendMessage": "메시지 보내기",
@@ -39,6 +40,14 @@
     "selectImageProvider": "이미지 제공자 선택",
     "noImageProvidersAvailable": "사용 가능한 이미지 제공자가 없습니다"
   },
+  "tools": {
+    "executing": "도구 실행 중...",
+    "executedSuccessfully": "도구 실행 완료",
+    "executionFailed": "도구 실행 실패",
+    "toolName": "도구 이름",
+    "result": "결과",
+    "error": "오류"
+  },
   "translation": {
     "title": "번역",
     "sourceLanguageWithAutoSelected": "원본 언어는 자동으로 감지됩니다",
@@ -117,8 +126,11 @@
   "mcpServer": {
     "title": "MCP 서버",
     "addServer": "서버 추가",
+    "editServer": "서버 편집",
     "serverName": "서버 이름",
     "serverNamePlaceholder": "서버 이름 입력",
+    "description": "설명",
+    "descriptionPlaceholder": "서버 설명 입력 (선택사항)",
     "transportType": "전송 유형",
     "serverURL": "서버 URL",
     "serverURLPlaceholder": "서버 URL 입력",
@@ -126,9 +138,25 @@
     "default": "기본값",
     "imageGeneration": "이미지 생성",
     "noServers": "구성된 MCP 서버가 없습니다",
-    "addServerPrompt": "'서버 추가' 버튼을 클릭하여 서버를 생성하세요",
+    "addServerPrompt": "'서버 추가' 버튼을 클릭하여 하나 생성하세요",
     "cannotEditDefault": "기본 서버는 편집할 수 없습니다",
-    "cannotDeleteDefault": "기본 서버는 삭제할 수 없습니다"
+    "cannotDeleteDefault": "기본 서버는 삭제할 수 없습니다",
+    "sseOption": "서버 전송 이벤트 (SSE)",
+    "stdioOption": "표준 입출력 (stdio)",
+    "streamableHttpOption": "스트리밍 가능한 HTTP",
+    "sseDisplay": "SSE",
+    "stdioDisplay": "STDIO",
+    "streamableHttpDisplay": "스트리밍 HTTP",
+    "connectionSettings": "연결 설정",
+    "command": "명령어",
+    "commandPlaceholder": "명령어 입력 (예: python, node)",
+    "args": "인수",
+    "argsPlaceholder": "한 줄에 하나의 인수",
+    "argsHelp": "각 인수를 별도의 줄에 입력하세요",
+    "env": "환경 변수 (JSON)",
+    "advancedSettings": "고급 설정",
+    "timeout": "타임아웃",
+    "seconds": "초"
   },
   "settings": {
     "language": "언어",
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index e647e6d..746c41d 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -9,7 +9,8 @@
     "submit": "提交",
     "loading": "加载中...",
     "error": "错误",
-    "success": "成功"
+    "success": "成功",
+    "general": "常规"
   },
   "chat": {
     "sendMessage": "发送消息",
@@ -39,6 +40,14 @@
     "selectImageProvider": "选择图片提供商",
     "noImageProvidersAvailable": "没有可用的图片提供商"
   },
+  "tools": {
+    "executing": "正在执行工具...",
+    "executedSuccessfully": "工具执行完成",
+    "executionFailed": "工具执行失败",
+    "toolName": "工具名称",
+    "result": "结果",
+    "error": "错误"
+  },
   "translation": {
     "title": "翻译",
     "sourceLanguageWithAutoSelected": "源语言将会自动识别",
@@ -117,18 +126,37 @@
   "mcpServer": {
     "title": "MCP 服务器",
     "addServer": "添加服务器",
+    "editServer": "编辑服务器",
     "serverName": "服务器名称",
     "serverNamePlaceholder": "输入服务器名称",
+    "description": "描述",
+    "descriptionPlaceholder": "输入服务器描述（可选）",
     "transportType": "传输类型",
     "serverURL": "服务器 URL",
     "serverURLPlaceholder": "输入服务器 URL",
-    "headers": "头信息 (JSON)",
+    "headers": "请求头 (JSON)",
     "default": "默认",
-    "imageGeneration": "图片生成",
-    "noServers": "尚未配置 MCP 服务器",
+    "imageGeneration": "图像生成",
+    "noServers": "未配置 MCP 服务器",
     "addServerPrompt": "点击\"添加服务器\"按钮创建一个",
     "cannotEditDefault": "无法编辑默认服务器",
-    "cannotDeleteDefault": "无法删除默认服务器"
+    "cannotDeleteDefault": "无法删除默认服务器",
+    "sseOption": "服务器发送事件 (SSE)",
+    "stdioOption": "标准输入/输出 (stdio)",
+    "streamableHttpOption": "可流式传输的 HTTP",
+    "sseDisplay": "SSE",
+    "stdioDisplay": "STDIO",
+    "streamableHttpDisplay": "流式 HTTP",
+    "connectionSettings": "连接设置",
+    "command": "命令",
+    "commandPlaceholder": "输入命令（例如：python, node）",
+    "args": "参数",
+    "argsPlaceholder": "每行一个参数",
+    "argsHelp": "每个参数单独一行输入",
+    "env": "环境变量 (JSON)",
+    "advancedSettings": "高级设置",
+    "timeout": "超时",
+    "seconds": "秒"
   },
   "settings": {
     "language": "语言",
@@ -173,7 +201,6 @@
     "webSearch_toggle_label": "启用网页搜索功能",
     "webSearch_description": "启用后，AI 可以搜索网页以提供更及时的信息。请注意，网页搜索目前仅支持 OpenAI 和 Gemini 模型。此外，启用网页搜索时，流式响应（文本逐步出现）将不可用。",
 
-    "general": "常规设置",
     "startup": "启动设置",
     "startWithSystem": "开机自启动",
     "startupToTray": "启动时最小化到托盘",
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index 62767f4..53409ad 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -9,7 +9,8 @@
     "submit": "提交",
     "loading": "載入中...",
     "error": "錯誤",
-    "success": "成功"
+    "success": "成功",
+    "general": "一般"
   },
   "chat": {
     "sendMessage": "發送訊息",
@@ -39,6 +40,14 @@
     "selectImageProvider": "選擇圖片提供商",
     "noImageProvidersAvailable": "沒有可用的圖片提供商"
   },
+  "tools": {
+    "executing": "正在執行工具...",
+    "executedSuccessfully": "工具執行完成",
+    "executionFailed": "工具執行失敗",
+    "toolName": "工具名稱",
+    "result": "結果",
+    "error": "錯誤"
+  },
   "translation": {
     "title": "翻譯",
     "sourceLanguageWithAutoSelected": "源語言將會自動偵測",
@@ -117,18 +126,37 @@
   "mcpServer": {
     "title": "MCP 伺服器",
     "addServer": "新增伺服器",
+    "editServer": "編輯伺服器",
     "serverName": "伺服器名稱",
     "serverNamePlaceholder": "輸入伺服器名稱",
+    "description": "描述",
+    "descriptionPlaceholder": "輸入伺服器描述（選填）",
     "transportType": "傳輸類型",
     "serverURL": "伺服器 URL",
     "serverURLPlaceholder": "輸入伺服器 URL",
     "headers": "標頭 (JSON)",
     "default": "預設",
-    "imageGeneration": "圖片生成",
-    "noServers": "尚未配置 MCP 伺服器",
+    "imageGeneration": "圖像生成",
+    "noServers": "尚未設定 MCP 伺服器",
     "addServerPrompt": "點擊「新增伺服器」按鈕來建立一個",
     "cannotEditDefault": "無法編輯預設伺服器",
-    "cannotDeleteDefault": "無法刪除預設伺服器"
+    "cannotDeleteDefault": "無法刪除預設伺服器",
+    "sseOption": "伺服器傳送事件 (SSE)",
+    "stdioOption": "標準輸入/輸出 (stdio)",
+    "streamableHttpOption": "可串流的 HTTP",
+    "sseDisplay": "SSE",
+    "stdioDisplay": "STDIO",
+    "streamableHttpDisplay": "串流 HTTP",
+    "connectionSettings": "連線設定",
+    "command": "指令",
+    "commandPlaceholder": "輸入指令（例如：python, node）",
+    "args": "參數",
+    "argsPlaceholder": "每行一個參數",
+    "argsHelp": "每個參數請單獨一行輸入",
+    "env": "環境變數 (JSON)",
+    "advancedSettings": "進階設定",
+    "timeout": "逾時",
+    "seconds": "秒"
   },
   "settings": {
     "language": "語言",
diff --git a/src/services/mcp-service.ts b/src/services/mcp-service.ts
index 2b779cf..9e96b2e 100644
--- a/src/services/mcp-service.ts
+++ b/src/services/mcp-service.ts
@@ -43,17 +43,43 @@ export class MCPService {
 
   /**
    * Create a new MCP server
+   * @param params - Server parameters depending on the type
    */
-  public async createMCPServer(name: string, type: 'sse' | 'stdio' | 'streamableHttp', url: string, headers?: Record<string, string>): Promise<MCPServerSettings> {
+  public async createMCPServer(params: {
+    name: string;
+    type: 'sse' | 'stdio' | 'streamableHttp';
+    description?: string;
+    url?: string;
+    headers?: Record<string, string>;
+    command?: string;
+    args?: string[];
+    env?: Record<string, string>;
+    timeout?: number;
+  }): Promise<MCPServerSettings> {
     const id = uuidv4();
+    
     const server: MCPServerSettings = {
       id,
-      name,
-      type,
-      url,
-      headers,
+      name: params.name,
+      type: params.type,
+      description: params.description,
       isDefault: false
     };
+
+    // Add type-specific parameters
+    if (params.type === 'sse' || params.type === 'streamableHttp') {
+      server.url = params.url;
+      server.headers = params.headers;
+    } else if (params.type === 'stdio') {
+      server.command = params.command;
+      server.args = params.args;
+      server.env = params.env;
+    }
+
+    // Add timeout parameter (common to all types)
+    if (params.timeout) {
+      server.timeout = params.timeout;
+    }
     
     await this.settingsService.addOrUpdateMCPServer(server);
     return server;
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 5e2789b..6a58980 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -53,14 +53,25 @@ export interface ModelSettings {
 }
 
 /**
- * MCP Server settings interface
+ * Base MCP Server settings interface
  */
 export interface MCPServerSettings {
   id: string;
   name: string;
   type: 'sse' | 'stdio' | 'streamableHttp';
-  url: string;
-  headers?: Record<string, string>;
+  description?: string;
   isDefault?: boolean;
   isImageGeneration?: boolean;
+  
+  // Common fields
+  url?: string;   // Used by sse and streamableHttp
+  headers?: Record<string, string>;  // Used by sse and streamableHttp
+  
+  // Stdio specific fields
+  command?: string;  // Used by stdio
+  args?: string[];   // Used by stdio
+  env?: Record<string, string>;  // Used by stdio
+  
+  // Timeout (in seconds)
+  timeout?: number;  // Used by all types
 }

From 4292cc2640a0de41f54d196846047461731e9ae5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sun, 4 May 2025 22:53:57 +0800
Subject: [PATCH 12/27] Fix: Add explore more button

---
 src/components/pages/MCPServerPage.tsx | 25 +++++++++++++++++--------
 src/locales/en/translation.json        |  1 +
 src/locales/es/translation.json        |  1 +
 src/locales/ja/translation.json        |  2 ++
 src/locales/zh-CN/translation.json     |  2 ++
 src/locales/zh-TW/translation.json     |  1 +
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/MCPServerPage.tsx b/src/components/pages/MCPServerPage.tsx
index a2c38e7..2675870 100644
--- a/src/components/pages/MCPServerPage.tsx
+++ b/src/components/pages/MCPServerPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Plus, Edit, Trash2, Server, X } from 'lucide-react';
+import { Plus, Edit, Trash2, Server, X, Globe } from 'lucide-react';
 import { MCPServerSettings } from '../../types/settings';
 import { MCPService } from '../../services/mcp-service';
 import { SETTINGS_CHANGE_EVENT } from '../../services/settings-service';
@@ -379,13 +379,22 @@ export const MCPServerPage: React.FC = () => {
       <div className="w-full p-6 overflow-y-auto">
         <div className="flex items-center justify-between mb-6">
           <h1 className="text-2xl font-semibold">{t('mcpServer.title')}</h1>
-          <button
-            onClick={handleAddServer}
-            className="flex items-center px-4 py-2 text-white rounded-md confirm-btn"
-          >
-            <Plus size={18} className="mr-1" />
-            {t('mcpServer.addServer')}
-          </button>
+          <div className="flex space-x-2">
+            <button
+              onClick={() => {/* Will be implemented later */}}
+              className="flex items-center px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700"
+            >
+              <Globe size={18} className="mr-1" />
+              {t('mcpServer.exploreMore')}
+            </button>
+            <button
+              onClick={handleAddServer}
+              className="flex items-center px-4 py-2 text-white rounded-md confirm-btn"
+            >
+              <Plus size={18} className="mr-1" />
+              {t('mcpServer.addServer')}
+            </button>
+          </div>
         </div>
 
         <div className="space-y-4">
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 2aba8a2..0298bc3 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -127,6 +127,7 @@
     "title": "MCP Servers",
     "addServer": "Add Server",
     "editServer": "Edit Server",
+    "exploreMore": "Explore More",
     "serverName": "Server Name",
     "serverNamePlaceholder": "Enter server name",
     "description": "Description",
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
index 164a147..224821f 100644
--- a/src/locales/es/translation.json
+++ b/src/locales/es/translation.json
@@ -127,6 +127,7 @@
     "title": "Servidores MCP",
     "addServer": "Agregar Servidor",
     "editServer": "Editar Servidor",
+    "exploreMore": "Explorar Más",
     "serverName": "Nombre del Servidor",
     "serverNamePlaceholder": "Ingrese el nombre del servidor",
     "description": "Descripción",
diff --git a/src/locales/ja/translation.json b/src/locales/ja/translation.json
index 76e2ff7..3aca9f0 100644
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -127,6 +127,7 @@
     "title": "MCPサーバー",
     "addServer": "サーバーを追加",
     "editServer": "サーバーを編集",
+    "exploreMore": "もっと探す",
     "serverName": "サーバー名",
     "serverNamePlaceholder": "サーバー名を入力",
     "description": "説明",
@@ -201,6 +202,7 @@
     "webSearch_toggle_label": "ウェブ検索機能を有効にする",
     "webSearch_description": "有効にすると、AIはウェブを検索してより最新の情報を提供できます。注意: ウェブ検索は現在、OpenAIとGeminiモデルでのみサポートされています。また、ウェブ検索が有効な場合、ストリーミング応答（テキストが段階的に表示される）は利用できません。",
 
+    "general": "一般",
     "startup": "起動設定",
     "startWithSystem": "システム起動時に起動する",
     "startupToTray": "起動時にトレイに最小化する",
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 746c41d..416d3d3 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -127,6 +127,7 @@
     "title": "MCP 服务器",
     "addServer": "添加服务器",
     "editServer": "编辑服务器",
+    "exploreMore": "探索更多",
     "serverName": "服务器名称",
     "serverNamePlaceholder": "输入服务器名称",
     "description": "描述",
@@ -201,6 +202,7 @@
     "webSearch_toggle_label": "启用网页搜索功能",
     "webSearch_description": "启用后，AI 可以搜索网页以提供更及时的信息。请注意，网页搜索目前仅支持 OpenAI 和 Gemini 模型。此外，启用网页搜索时，流式响应（文本逐步出现）将不可用。",
 
+    "general": "常规",
     "startup": "启动设置",
     "startWithSystem": "开机自启动",
     "startupToTray": "启动时最小化到托盘",
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index 53409ad..ba3a2c0 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -127,6 +127,7 @@
     "title": "MCP 伺服器",
     "addServer": "新增伺服器",
     "editServer": "編輯伺服器",
+    "exploreMore": "探索更多",
     "serverName": "伺服器名稱",
     "serverNamePlaceholder": "輸入伺服器名稱",
     "description": "描述",

From 58758c689c2613ff755aa2097e413abc5e247113 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Tue, 6 May 2025 16:41:29 +0800
Subject: [PATCH 13/27] Fix: Optimize message sending logic

---
 src/components/chat/ChatMessageArea.tsx       |   8 +-
 src/components/pages/ChatPage.tsx             |  58 +---
 src/services/ai-service.ts                    |  35 ---
 src/services/chat-service.ts                  | 282 +-----------------
 src/services/core/ai-service-provider.ts      |   1 -
 .../providers/common-provider-service.ts      |   6 +
 6 files changed, 33 insertions(+), 357 deletions(-)

diff --git a/src/components/chat/ChatMessageArea.tsx b/src/components/chat/ChatMessageArea.tsx
index 47475b8..f44f0b4 100644
--- a/src/components/chat/ChatMessageArea.tsx
+++ b/src/components/chat/ChatMessageArea.tsx
@@ -19,7 +19,7 @@ interface ChatMessageAreaProps {
   activeConversation: Conversation | null;
   isLoading: boolean;
   error: string | null;
-  onSendMessage: (content: string) => void;
+  onSendMessage: (content: string, files?: File[]) => void;
   onSendMessageWithFiles?: (content: string, files: File[]) => void;
   onStopStreaming?: () => void;
   onRegenerateResponse?: (messageId: string) => void;
@@ -126,10 +126,12 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
     e.preventDefault();
     if (isLoading || isCurrentlyStreaming || !inputValue.trim()) return;
 
-    if (selectedFiles.length > 0 && onSendMessageWithFiles) {
-      onSendMessageWithFiles(inputValue, selectedFiles);
+    if (selectedFiles.length > 0) {
+      // Use the combined method with files parameter
+      onSendMessage(inputValue, selectedFiles);
       setSelectedFiles([]);
     } else {
+      // Use the combined method without files
       onSendMessage(inputValue);
     }
 
diff --git a/src/components/pages/ChatPage.tsx b/src/components/pages/ChatPage.tsx
index 3a22fc9..a5b3e18 100644
--- a/src/components/pages/ChatPage.tsx
+++ b/src/components/pages/ChatPage.tsx
@@ -224,35 +224,22 @@ export const ChatPage = () => {
   };
 
   // Handle sending a message with streaming
-  const handleSendMessage = async (content: string) => {
+  const handleSendMessage = async (content: string, files?: File[]) => {
     if (!activeConversationId || !isServiceInitialized || !chatServiceRef.current) return;
     
     try {
       const chatService = chatServiceRef.current;
       
-      // Check if there are selected MCP servers to use
-      if (selectedMcpServers.length > 0) {
-        // Send message with MCP tools
-        await chatService.sendMessageWithMCPTools(
-          content,
-          activeConversationId,
-          selectedMcpServers,
-          true,
-          (updatedConversation) => {
-            setConversations(updatedConversation);
-          }
-        );
-      } else {
-        // Send regular message
-        await chatService.sendMessage(
-          content, 
-          activeConversationId,
-          true,
-          (updatedConversation) => {
-            setConversations(updatedConversation);
-          }
-        );
-      }
+      // Send message with optional files
+      await chatService.sendMessage(
+        content, 
+        activeConversationId,
+        true,
+        (updatedConversation) => {
+          setConversations(updatedConversation);
+        },
+        files
+      );
     } catch (err) {
       console.error('Error sending streaming message:', err);
     }
@@ -375,27 +362,10 @@ export const ChatPage = () => {
     }
   };
 
-  // Handle sending a message with files
+  // Handle sending a message with files (deprecated - now handled by handleSendMessage)
+  // This method is kept for backward compatibility but delegates to handleSendMessage
   const handleSendMessageWithFiles = async (content: string, files: File[]) => {
-    if (!activeConversationId || !isServiceInitialized || !chatServiceRef.current) return;
-    
-    try {
-      const chatService = chatServiceRef.current;
-
-      // Send user message with files
-      await chatService.sendMessageWithFiles(
-        content, 
-        files,
-        activeConversationId,
-        true,
-        (updatedConversation) => {
-          setConversations(updatedConversation);
-        }
-      );
-      
-    } catch (err) {
-      console.error('Error sending message with files:', err);
-    }
+    await handleSendMessage(content, files);
   };
 
   // Toggle selection of an MCP server
diff --git a/src/services/ai-service.ts b/src/services/ai-service.ts
index 014c907..df2e2d5 100644
--- a/src/services/ai-service.ts
+++ b/src/services/ai-service.ts
@@ -3,9 +3,7 @@ import { ProviderFactory } from './providers/provider-factory';
 import { Message } from '../types/chat';
 import { StreamControlHandler } from './streaming-control';
 import { SETTINGS_CHANGE_EVENT, SettingsService } from './settings-service';
-import { MCPToolAdapter } from './mcp-tool-adapter';
 import { MCPService } from './mcp-service';
-import { AIServiceCapability } from '../types/capabilities';
 
 export interface ModelOption {
   id: string;
@@ -188,9 +186,6 @@ export class AIService {
       const modelName = options.model;
       const useStreaming = options.stream;
       
-      // Check if there are any MCP tools to be used
-      const mcpTools = options.mcpTools;
-      
       // Get provider instance
       const provider = this.getProvider(providerName);
 
@@ -200,36 +195,6 @@ export class AIService {
         throw new Error(`Provider ${providerName} not available`);
       }
       
-      // Check if the selected model supports tool calls
-      const modelCapabilities = provider.getModelCapabilities(modelName);
-      const supportsTools = modelCapabilities.includes(AIServiceCapability.ToolUsage) || 
-                            modelCapabilities.includes(AIServiceCapability.FunctionCalling) ||
-                            modelCapabilities.includes(AIServiceCapability.MCPServer);
-      
-      // If MCP tools are specified and model supports tools, get them and add to options
-      if (mcpTools && mcpTools.length > 0 && supportsTools) {
-        const mcpToolAdapter = MCPToolAdapter.getInstance();
-        const allTools: Record<string, unknown> = {};
-        
-        for (const mcpToolId of mcpTools) {
-          try {
-            const tools = await mcpToolAdapter.getToolsForServer(mcpToolId, streamController);
-            Object.assign(allTools, tools);
-          } catch (error) {
-            console.error(`Error loading tools for MCP server ${mcpToolId}:`, error);
-            // Continue with other tools if one fails
-          }
-        }
-        
-        // Add tools to options if any were loaded
-        if (Object.keys(allTools).length > 0) {
-          console.log('Adding tools to request:', Object.keys(allTools));
-          options.tools = allTools;
-        }
-      } else if (mcpTools && mcpTools.length > 0 && !supportsTools) {
-        console.warn(`Model ${modelName} does not support tools, but tools were requested`);
-      }
-      
       const result = await provider.getChatCompletion(
         messages, 
         {
diff --git a/src/services/chat-service.ts b/src/services/chat-service.ts
index 70620fd..fcb24bc 100644
--- a/src/services/chat-service.ts
+++ b/src/services/chat-service.ts
@@ -7,6 +7,7 @@ import { MessageHelper } from './message-helper';
 import { AIServiceCapability } from '../types/capabilities';
 import { FileUploadService } from './file-upload-service';
 import { MCPService } from './mcp-service';
+import { MCPServerSettings } from '../types/settings';
 
 /**
  * Service for managing chat conversations
@@ -132,12 +133,14 @@ export class ChatService {
 
   /**
    * Send a message in the active conversation with streaming support
+   * Optional files parameter allows sending messages with file attachments
    */
   public async sendMessage(
     content: string,
     conversationId: string,
     isStreaming: boolean,
-    conversationUpdate: (conversations: Conversation[]) => void
+    conversationUpdate: (conversations: Conversation[]) => void,
+    files?: File[]
   ): Promise<void> {
     if (!this.dbService) {
       throw new Error('Database service not initialized');
@@ -160,7 +163,9 @@ export class ChatService {
 
       //#region Save user message to database and update title
       // eslint-disable-next-line prefer-const
-      let {conversation: updatedConversation, message: userMessage} = await MessageHelper.addUserMessageToConversation(content, currentConversation);
+      let {conversation: updatedConversation, message: userMessage} = files && files.length > 0 
+        ? await MessageHelper.addUserMessageWithFilesToConversation(content, await FileUploadService.getInstance().processUploadedFiles(files), currentConversation)
+        : await MessageHelper.addUserMessageToConversation(content, currentConversation);
       
       // Update in memory
       this.conversations = this.conversations.map(c => 
@@ -262,134 +267,6 @@ export class ChatService {
     }
   }
 
-  /**
-   * Send a message with files in the active conversation
-   */
-  public async sendMessageWithFiles(
-    content: string,
-    files: File[],
-    conversationId: string,
-    isStreaming: boolean,
-    conversationUpdate: (conversations: Conversation[]) => void
-  ): Promise<void> {
-    if (!this.dbService) {
-      throw new Error('Database service not initialized');
-    }
-
-    const currentConversation = this.conversations.find(c => c.conversationId === conversationId);
-    if (currentConversation === undefined) {
-      throw new Error('Active conversation not found');
-    }
-    
-    try {
-      const settingsService = SettingsService.getInstance();
-      const provider = settingsService.getSelectedProvider();
-      const model = settingsService.getSelectedModel();
-
-      // Process uploaded files
-      const fileUploadService = FileUploadService.getInstance();
-      const fileContents = await fileUploadService.processUploadedFiles(files);
-
-      //#region Save user message with files to database and update title
-      // eslint-disable-next-line prefer-const
-      let {conversation: updatedConversation, message: userMessage} = await MessageHelper.addUserMessageWithFilesToConversation(
-        content,
-        fileContents,
-        currentConversation
-      );
-      
-      // Update in memory
-      this.conversations = this.conversations.map(c => 
-        c.conversationId === conversationId ? updatedConversation : c
-      );
-
-      conversationUpdate(this.conversations);
-      //#endregion
-
-      // Map messages to messages array
-      const messages = MessageHelper.mapMessagesTreeToList(updatedConversation, false);
-
-      //#region Streaming Special Message Handling
-      // Create a placeholder for the streaming message
-      const placeholderMessage: Message = MessageHelper.getPlaceholderMessage(model, provider, conversationId);
-
-      userMessage.childrenMessageIds.push(placeholderMessage.messageId);
-      userMessage.preferIndex = userMessage.childrenMessageIds.length - 1;
-
-      // Add placeholder to conversation and update UI
-      const messagesWithPlaceholder = new Map(updatedConversation.messages);
-      messagesWithPlaceholder.set(placeholderMessage.messageId, placeholderMessage);
-
-      updatedConversation = {
-        ...updatedConversation,
-        messages: messagesWithPlaceholder,
-        updatedAt: new Date()
-      };
-
-      this.conversations = this.conversations.map(c => 
-        c.conversationId === conversationId ? updatedConversation : c
-      );
-
-      conversationUpdate(this.conversations);
-      //#endregion
-
-      //#region Send Chat Message to AI with streaming
-
-      // Create a new abort controller for this request
-      const streamController = new StreamControlHandler(
-        updatedConversation, 
-        placeholderMessage,
-        // ---- On chunk callback ----
-        (updated: Conversation) => {  
-          this.conversations = this.conversations.map(c => 
-            c.conversationId === conversationId ? updated : c
-          );
-          conversationUpdate(this.conversations);
-        }, 
-        // ---- On finish callback ----
-        async (aiResponse: Message | null) => { 
-
-          console.log(aiResponse);
-
-          if (aiResponse === null) return;
-
-          const finalConversation = await MessageHelper.insertAssistantMessageToConversation(userMessage, aiResponse, updatedConversation);
-
-          // Update in memory
-          this.conversations = this.conversations.map(c => 
-            c.conversationId === conversationId ? finalConversation : c
-          );
-
-          conversationUpdate(this.conversations);
-
-          this.streamControllerMap.delete(conversationId);
-        }
-      );
-
-      this.streamControllerMap.set(conversationId, streamController);
-
-      console.log('Messages:', messages);
-
-      // Send Chat Message to AI with streaming
-      await this.aiService.getChatCompletion(
-        messages, 
-        {
-          model: model,
-          provider: provider,
-          stream: isStreaming
-        },
-        streamController
-      );
-
-      conversationUpdate(this.conversations);
-      
-      //#endregion
-    } catch (error) {
-      console.error('Failed to send message with files:', error);
-      throw error;
-    }
-  }
-
   /**
    * Edit a message in a conversation
    */
@@ -900,7 +777,7 @@ export class ChatService {
   /**
    * Get available MCP servers
    */
-  public getAvailableMCPServers(): Record<string, unknown> {
+  public getAvailableMCPServers(): Record<string, MCPServerSettings> {
     return MCPService.getInstance().getMCPServers();
   }
 
@@ -919,147 +796,4 @@ export class ChatService {
            capabilities.includes(AIServiceCapability.FunctionCalling) ||
            capabilities.includes(AIServiceCapability.MCPServer);
   }
-
-  /**
-   * Send a message with MCP tools
-   */
-  public async sendMessageWithMCPTools(
-    content: string,
-    conversationId: string,
-    mcpTools: string[],
-    isStreaming: boolean,
-    conversationUpdate: (conversations: Conversation[]) => void
-  ): Promise<void> {
-    if (!this.dbService) {
-      throw new Error('Database service not initialized');
-    }
-
-    const currentConversation = this.conversations.find(c => c.conversationId === conversationId);
-    if (currentConversation === undefined) {
-      throw new Error('Active conversation not found');
-    }
-    
-    try {
-      const settingsService = SettingsService.getInstance();
-      const provider = settingsService.getSelectedProvider();
-      const model = settingsService.getSelectedModel();
-
-      // Check if any of the selected MCP servers is for image generation
-      const mcpService = MCPService.getInstance();
-      const selectedMcpServers = mcpTools.map(id => mcpService.getMCPServer(id)).filter(Boolean);
-      const hasImageGenerationTool = selectedMcpServers.some(server => server?.isImageGeneration);
-
-      // Check if the message content starts with image generation command
-      const isImageGenerationRequest = content.toLowerCase().startsWith('/image')
-        || content.toLowerCase().includes('generate an image')
-        || content.toLowerCase().includes('create an image');
-
-      // If user is requesting image generation but hasn't selected the image tool, add it automatically
-      if (isImageGenerationRequest && !hasImageGenerationTool) {
-        // Find the default image generation server
-        const imageServer = Object.values(mcpService.getMCPServers())
-          .find(server => server.isImageGeneration);
-          
-        if (imageServer) {
-          console.log('Adding image generation tool automatically');
-          mcpTools.push(imageServer.id);
-        }
-      }
-
-      //#region Save user message to database and update title
-      // eslint-disable-next-line prefer-const
-      let {conversation: updatedConversation, message: userMessage} = await MessageHelper.addUserMessageToConversation(content, currentConversation);
-      
-      // Update in memory
-      this.conversations = this.conversations.map(c => 
-        c.conversationId === conversationId ? updatedConversation : c
-      );
-
-      conversationUpdate(this.conversations);
-      //#endregion
-
-      //#region Map messages to messages array
-      const messages = MessageHelper.mapMessagesTreeToList(updatedConversation, false);
-      //#endregion
-
-      //#region Streaming Special Message Handling
-      // Create a placeholder for the streaming message
-      const placeholderMessage: Message = MessageHelper.getPlaceholderMessage(model, provider, conversationId);
-
-      userMessage.childrenMessageIds.push(placeholderMessage.messageId);
-      userMessage.preferIndex = userMessage.childrenMessageIds.length - 1;
-
-      // Add placeholder to conversation and update UI
-      const messagesWithPlaceholder = new Map(updatedConversation.messages);
-      messagesWithPlaceholder.set(placeholderMessage.messageId, placeholderMessage);
-
-      updatedConversation = {
-        ...updatedConversation,
-        messages: messagesWithPlaceholder,
-        updatedAt: new Date()
-      };
-
-      this.conversations = this.conversations.map(c => 
-        c.conversationId === conversationId ? updatedConversation : c
-      );
-
-      conversationUpdate(this.conversations);
-      //#endregion
-
-      //#region Send Chat Message to AI with streaming
-      // Create a new abort controller for this request
-      const streamController = new StreamControlHandler(
-        updatedConversation, 
-        placeholderMessage,
-        // ---- On chunk callback ----
-        (updated: Conversation) => {  
-          this.conversations = this.conversations.map(c => 
-            c.conversationId === conversationId ? updated : c
-          );
-          conversationUpdate(this.conversations);
-        }, 
-        // ---- On finish callback ----
-        async (aiResponse: Message | null) => { 
-          if (aiResponse === null) return;
-
-          const finalConversation = await MessageHelper.insertAssistantMessageToConversation(userMessage, aiResponse, updatedConversation);
-
-          // Update in memory
-          this.conversations = this.conversations.map(c => 
-            c.conversationId === conversationId ? finalConversation : c
-          );
-
-          conversationUpdate(this.conversations);
-
-          this.streamControllerMap.delete(conversationId);
-        }
-      );
-
-      this.streamControllerMap.set(conversationId, streamController);
-
-      // Send Chat Message to AI with streaming and MCP tools
-      await this.aiService.getChatCompletion(
-        messages, 
-        {
-          model,
-          provider,
-          stream: isStreaming,
-          mcpTools
-        },
-        streamController
-      );
-
-      conversationUpdate(this.conversations);
-      //#endregion
-    } catch (err) {
-      console.error('Error sending message with MCP tools:', err);
-      
-      // Don't throw the error if it was an abort error
-      const error = err as Error;
-      if (error.name === 'AbortError') {
-        return;
-      }
-      throw error;
-    }
-  }
 }
diff --git a/src/services/core/ai-service-provider.ts b/src/services/core/ai-service-provider.ts
index 52065f1..10b6b63 100644
--- a/src/services/core/ai-service-provider.ts
+++ b/src/services/core/ai-service-provider.ts
@@ -25,7 +25,6 @@ export interface CompletionOptions {
   user?: string;
   stream?: boolean; // Whether to stream the response
   signal?: AbortSignal; // AbortSignal for cancellation
-  mcpTools?: string[]; // IDs of MCP servers to use as tools
   tools?: Record<string, unknown>; // Pre-configured tools for the AI
   toolChoice?: Record<string, unknown>; // Pre-configured tool Choice for the AI
 }
diff --git a/src/services/providers/common-provider-service.ts b/src/services/providers/common-provider-service.ts
index 37ee4b4..0d238d7 100644
--- a/src/services/providers/common-provider-service.ts
+++ b/src/services/providers/common-provider-service.ts
@@ -170,6 +170,10 @@ export class CommonProviderHelper implements AiServiceProvider {
       // Build ToolSet & ToolChoice for getChatCompletionByModel API
       const rawTools = options.tools;
       
+      const err = new Error('test');
+      console.log('rawTools: ', rawTools);
+      console.log('err track trace: ', err);
+
       // Convert raw tools to AI SDK format
       const formattedTools: ToolSet = {};
       
@@ -178,6 +182,8 @@ export class CommonProviderHelper implements AiServiceProvider {
           if (toolConfig && typeof toolConfig === 'object') {
             // Special case for image generation
             if (toolName === 'generate_image') {
+              console.log('toolName: ', toolName);
+              console.log('toolConfig: ', toolConfig);
               formattedTools[toolName] = tool({
                 description: 'Generate an image from a text prompt',
                 parameters: z.object({

From ea68c3f05e01d108e36faca87f6ed5421dd7ca4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Wed, 7 May 2025 15:50:22 +0800
Subject: [PATCH 14/27] Function: Image Generation History

---
 src/services/database-integration.ts | 12 ++++++++++++
 src/services/database.ts             | 22 +++++++++++++++++++++-
 src/types/chat.ts                    | 13 -------------
 src/types/image.ts                   | 14 ++++++++++++++
 4 files changed, 47 insertions(+), 14 deletions(-)
 create mode 100644 src/types/image.ts

diff --git a/src/services/database-integration.ts b/src/services/database-integration.ts
index e358f3b..d30dc19 100644
--- a/src/services/database-integration.ts
+++ b/src/services/database-integration.ts
@@ -3,6 +3,7 @@ import { SettingsService } from './settings-service';
 import { Conversation, Message, ConversationFolder, MessageContent, MessageContentType, FileJsonData } from '../types/chat';
 import { v4 as uuidv4 } from 'uuid';
 import { FileData } from '../types/file';
+import { ImageGenerationResult } from '../types/image';
 
 const SYSTEM_MESSAGE_CONTENT: MessageContent[] = [
     {
@@ -350,6 +351,17 @@ export class DatabaseIntegrationService {
         };
     }
 
+    public async saveImageGenerationResult(imageResult: ImageGenerationResult){
+        try {
+            const resultID = await this.dbService.saveImageGenerationResult(imageResult);
+            return resultID;
+        } catch (error) {
+            console.error('Error getting files:', error);
+            return null;
+        }
+    }
+
+
     public async saveFile(fileData: FileJsonData, arrayBuffer: ArrayBuffer): Promise<string> {
         const fileId = uuidv4();
         const file: FileData = {
diff --git a/src/services/database.ts b/src/services/database.ts
index 9e43ea9..51a049e 100644
--- a/src/services/database.ts
+++ b/src/services/database.ts
@@ -3,12 +3,13 @@ import { Conversation, Message, ConversationFolder } from '../types/chat';
 import { v4 as uuidv4 } from 'uuid';
 import { UserSettings } from '../types/settings';
 import { FileData } from '../types/file';
+import { ImageGenerationResult } from '../types/image';
 
 // database.ts
 export class DatabaseService {
     private db: IDBDatabase | null = null;
     private readonly DB_NAME = 'tensorblock_db';
-    private readonly DB_VERSION = 3; // Increase version to trigger upgrade
+    private readonly DB_VERSION = 4; // Increase version to trigger upgrade
     private readonly ENCRYPTION_KEY = 'your-secure-encryption-key'; // In production, use a secure key management system
 
     private isInitialized: boolean = false;
@@ -70,6 +71,12 @@ export class DatabaseService {
                     chatStore.createIndex('messageId', 'messageId');
                 }
 
+                // Create image generation results store
+                if (!db.objectStoreNames.contains('imageGenerationResults')) {
+                    db.createObjectStore('imageGenerationResults', {
+                        keyPath: 'imageResultId'
+                    });
+                }
                 // Create API settings store
                 if (!db.objectStoreNames.contains('apiSettings')) {
                     db.createObjectStore('apiSettings', {
@@ -547,6 +554,19 @@ export class DatabaseService {
         });
     }
 
+    public async saveImageGenerationResult(imageGenerationResult: ImageGenerationResult): Promise<string> {
+        return new Promise((resolve, reject) => {
+            if (!this.db) throw new Error('Database not initialized');
+
+            const transaction = this.db.transaction('imageGenerationResults', 'readwrite');
+            const store = transaction.objectStore('imageGenerationResults');
+            const request = store.add(imageGenerationResult);
+
+            request.onsuccess = () => resolve(request.result as string);
+            request.onerror = () => reject(request.error);
+        });
+    }
+
     /**
      * Get all files from the database
      * @returns List of files
diff --git a/src/types/chat.ts b/src/types/chat.ts
index ca592d7..1978575 100644
--- a/src/types/chat.ts
+++ b/src/types/chat.ts
@@ -53,16 +53,3 @@ export interface ConversationFolder{
   updatedAt: Date;
   colorFlag: string;
 }
-
-export interface ImageGenerationResult {
-  id: string;
-  prompt: string;
-  negativePrompt: string;
-  seed: string;
-  number: number;
-  status: string;
-  aspectRatio: string;
-  provider: string;
-  model: string;
-  images: MessageContent[];
-}
diff --git a/src/types/image.ts b/src/types/image.ts
new file mode 100644
index 0000000..b248684
--- /dev/null
+++ b/src/types/image.ts
@@ -0,0 +1,14 @@
+import { MessageContent } from "./chat";
+
+export interface ImageGenerationResult {
+    imageResultId: string;
+    prompt: string;
+    negativePrompt: string;
+    seed: string;
+    number: number;
+    status: string;
+    aspectRatio: string;
+    provider: string;
+    model: string;
+    images: MessageContent[];
+}
\ No newline at end of file

From d0bc0ab1547b3704d79ef40cf0c95f9c58e378fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Wed, 7 May 2025 16:42:41 +0800
Subject: [PATCH 15/27] Fix: Image generation page layout

---
 src/components/image/ImageGenerateResult.tsx | 19 +++++++
 src/components/pages/ImageGenerationPage.tsx | 60 +++++++++++---------
 src/locales/zh-CN/translation.json           |  1 +
 3 files changed, 53 insertions(+), 27 deletions(-)
 create mode 100644 src/components/image/ImageGenerateResult.tsx

diff --git a/src/components/image/ImageGenerateResult.tsx b/src/components/image/ImageGenerateResult.tsx
new file mode 100644
index 0000000..35fa90e
--- /dev/null
+++ b/src/components/image/ImageGenerateResult.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { ImageGenerationResult } from '../../types/image';
+import { useTranslation } from 'react-i18next';
+
+interface ImageGenerateResultProps {
+  imageResult: ImageGenerationResult;
+}
+
+const ImageGenerateResult: React.FC<ImageGenerateResultProps> = ({ 
+    imageResult,
+}) => { 
+  const { t } = useTranslation();
+  
+  return (
+    <></>
+  );
+};
+
+export default ImageGenerateResult; 
\ No newline at end of file
diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
index 91058dd..3b6fb0f 100644
--- a/src/components/pages/ImageGenerationPage.tsx
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -3,7 +3,7 @@ import {
   SettingsService,
   SETTINGS_CHANGE_EVENT,
 } from "../../services/settings-service";
-import { ChevronDown, RefreshCw } from "lucide-react";
+import { ChevronDown, RefreshCw, Settings, Zap } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { AIService } from "../../services/ai-service";
 import { OPENAI_PROVIDER_NAME } from "../../services/providers/openai-service";
@@ -101,38 +101,44 @@ export const ImageGenerationPage = () => {
         </div>
       )}
 
-      <div className="flex flex-row h-full">
+      <div className="flex flex-row justify-center h-full">
         {/* Left side - Controls */}
-        <div className="flex-1 p-6 overflow-y-auto frame-right-border">
-          <h1 className="mb-6 text-2xl font-semibold">
-            {t("imageGeneration.title")}
-          </h1>
-
+        <div className="flex-1 max-w-5xl p-6 overflow-y-auto">
           {/* Prompt input */}
           <div className="mb-6">
             <label className="block mb-2 text-sm font-medium text-gray-700">
               {t("imageGeneration.prompt")}
             </label>
-            <textarea
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              placeholder={t("imageGeneration.promptPlaceholder")}
-              className="w-full p-3 input-box min-h-14"
-              rows={4}
-            />
-          </div>
+            <div className="flex flex-row gap-2">
+              <textarea
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder={t("imageGeneration.promptPlaceholder")}
+                className="w-full p-3 input-box min-h-14"
+                rows={1}
+              />
 
-          {/* Generation button */}
-          <div className="flex justify-center mb-6">
-            <button
-              onClick={handleGenerateImage}
-              disabled={isGenerating || !prompt.trim() || isApiKeyMissing}
-              className="px-8 py-2.5 text-white confirm-btn"
-            >
-              {isGenerating
-                ? t("imageGeneration.generating")
-                : t("imageGeneration.generateButton")}
-            </button>
+              <div className="flex flex-row gap-2 p-2 border border-gray-300 rounded-lg shadow-sm">
+                <button
+                  onClick={handleGenerateImage}
+                  disabled={isGenerating || !prompt.trim() || isApiKeyMissing}
+                  className="px-4 py-2.5 text-nowrap flex flex-row gap-1 text-white text-center confirm-btn"
+                >
+                  <Settings></Settings>
+                  {t("imageGeneration.settingsButton")}
+                </button>
+                <button
+                  onClick={handleGenerateImage}
+                  disabled={isGenerating || !prompt.trim() || isApiKeyMissing}
+                  className="px-4 py-2.5 text-nowrap flex flex-row gap-1 text-white text-center confirm-btn"
+                >
+                  <Zap></Zap>
+                  {isGenerating
+                    ? t("imageGeneration.generating")
+                    : t("imageGeneration.generateButton")}
+                </button>
+              </div>
+            </div>
           </div>
 
           <div className="flex items-center mb-4">
@@ -186,7 +192,7 @@ export const ImageGenerationPage = () => {
         </div>
 
         {/* Right side - Results */}
-        <div className="w-[420px] h-full p-6 overflow-y-auto">
+        <div className="hidden w-[420px] h-full p-6 overflow-y-auto">
           {/* Provider selection */}
           <div className="mb-6">
             <label className="block mb-2 text-sm font-medium text-gray-700">
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 416d3d3..675dbd9 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -113,6 +113,7 @@
     "randomSeed": "随机种子",
     "generateButton": "生成",
     "generating": "正在生成图像...",
+    "settingsButton": "设置",
     "creatingImage": "AI正在创建您的图像",
     "generationFailed": "图像生成失败",
     "generatedImage": "生成的图像",

From e51152e987ad067082a2479426daf5ffd8950d83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Wed, 7 May 2025 21:36:56 +0800
Subject: [PATCH 16/27] Update TranslationPage.tsx

---
 src/components/pages/TranslationPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/TranslationPage.tsx b/src/components/pages/TranslationPage.tsx
index d4bba85..f13ab22 100644
--- a/src/components/pages/TranslationPage.tsx
+++ b/src/components/pages/TranslationPage.tsx
@@ -266,7 +266,7 @@ export const TranslationPage: React.FC = () => {
             )}
 
             {/* Translation result */}
-            <div className="relative flex-1 p-3 overflow-auto form-textarea-border major-area-bg-color">
+            <div className="relative flex-1 p-3 overflow-auto rounded-lg form-textarea-border major-area-bg-color">
               {isTranslating ? (
                 <div className="flex items-center justify-center h-full">
                   <div className="w-8 h-8 border-4 rounded-full border-primary-300 border-t-primary-600 animate-spin"></div>

From 1c32b8f6fffc5da6c5010e12d1389af5e0e284f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Wed, 7 May 2025 22:42:13 +0800
Subject: [PATCH 17/27] Function: Change Image Generation Page Layout

---
 .../image/ImageGenerateHistoryItem.tsx        |  87 +++++++++
 src/components/image/ImageGenerateResult.tsx  |  19 --
 src/components/pages/ImageGenerationPage.tsx  | 161 ++++++++++++-----
 src/services/image-generation-handler.ts      | 167 ++++++++++++++++++
 4 files changed, 366 insertions(+), 68 deletions(-)
 create mode 100644 src/components/image/ImageGenerateHistoryItem.tsx
 delete mode 100644 src/components/image/ImageGenerateResult.tsx
 create mode 100644 src/services/image-generation-handler.ts

diff --git a/src/components/image/ImageGenerateHistoryItem.tsx b/src/components/image/ImageGenerateHistoryItem.tsx
new file mode 100644
index 0000000..08eb044
--- /dev/null
+++ b/src/components/image/ImageGenerateHistoryItem.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { ImageGenerationResult } from '../../types/image';
+import { MessageContent } from '../../types/chat';
+
+interface ImageGenerateHistoryItemProps {
+  imageResult: ImageGenerationResult;
+}
+
+const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({ 
+  imageResult,
+}) => { 
+
+  // Function to render image grid based on number of images and aspect ratio
+  const renderImageGrid = (images: MessageContent[]) => {
+    if (images.length === 0) return null;
+
+    // Convert aspect ratio string (e.g. "16:9") to calculate best layout
+    const [widthRatio, heightRatio] = imageResult.aspectRatio.split(':').map(Number);
+    const isWide = widthRatio > heightRatio;
+    
+    // Grid layout classes based on number of images
+    let gridClass = "grid-cols-1";
+    
+    if (images.length === 2) {
+      gridClass = isWide ? "grid-cols-2" : "grid-cols-1 grid-rows-2";
+    } else if (images.length === 3) {
+      gridClass = "grid-cols-3";
+    } else if (images.length === 4) {
+      gridClass = "grid-cols-2 grid-rows-2";
+    }
+    
+    return (
+      <div className={`grid gap-2 ${gridClass}`}>
+        {images.map((image, index) => (
+          <div 
+            key={index} 
+            className="overflow-hidden rounded-lg"
+            style={{
+              aspectRatio: imageResult.aspectRatio.replace(':', '/'),
+            }}
+          >
+            <img 
+              src={image.content} 
+              alt={`${imageResult.prompt} (${index + 1})`}
+              className="object-cover w-full h-full"
+            />
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="mb-6 overflow-hidden border rounded-lg shadow-sm image-result-item">
+      <div className="image-result-container">
+        {renderImageGrid(imageResult.images)}
+      </div>
+      
+      <div className="p-4 border-t bg-gray-50">
+        <div className="mb-2">
+          <div className="flex items-start justify-between">
+            <div className="flex-1 mr-4">
+              <p className="mb-1 text-sm font-medium text-gray-900 truncate">{imageResult.prompt}</p>
+              
+              <div className="flex flex-wrap gap-2 mt-2">
+                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                  {imageResult.model}
+                </span>
+                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                  {imageResult.provider}
+                </span>
+                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                  {imageResult.aspectRatio}
+                </span>
+                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                  Seed: {imageResult.seed}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageGenerateHistoryItem; 
\ No newline at end of file
diff --git a/src/components/image/ImageGenerateResult.tsx b/src/components/image/ImageGenerateResult.tsx
deleted file mode 100644
index 35fa90e..0000000
--- a/src/components/image/ImageGenerateResult.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { ImageGenerationResult } from '../../types/image';
-import { useTranslation } from 'react-i18next';
-
-interface ImageGenerateResultProps {
-  imageResult: ImageGenerationResult;
-}
-
-const ImageGenerateResult: React.FC<ImageGenerateResultProps> = ({ 
-    imageResult,
-}) => { 
-  const { t } = useTranslation();
-  
-  return (
-    <></>
-  );
-};
-
-export default ImageGenerateResult; 
\ No newline at end of file
diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
index 3b6fb0f..91b4aba 100644
--- a/src/components/pages/ImageGenerationPage.tsx
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -7,12 +7,14 @@ import { ChevronDown, RefreshCw, Settings, Zap } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { AIService } from "../../services/ai-service";
 import { OPENAI_PROVIDER_NAME } from "../../services/providers/openai-service";
+import { ImageGenerationManager, ImageGenerationStatus, ImageGenerationHandler } from "../../services/image-generation-handler";
+import { DatabaseIntegrationService } from "../../services/database-integration";
+import { ImageGenerationResult } from "../../types/image";
+import ImageGenerateHistoryItem from "../image/ImageGenerateHistoryItem";
 
 export const ImageGenerationPage = () => {
   const { t } = useTranslation();
   const [prompt, setPrompt] = useState("");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [imageResult, setImageResult] = useState<string | null>(null);
   const [error, setError] = useState<Error | null>(null);
   const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
   const [aspectRatio, setAspectRatio] = useState("1:1");
@@ -20,6 +22,37 @@ export const ImageGenerationPage = () => {
   const [randomSeed, setRandomSeed] = useState(
     Math.floor(Math.random() * 1000000).toString()
   );
+  const [generationResults, setGenerationResults] = useState<Map<string, ImageGenerationHandler>>(
+    new Map()
+  );
+  const [historyResults, setHistoryResults] = useState<ImageGenerationResult[]>([]);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(true);
+
+  // Initialize image generation manager
+  useEffect(() => {
+    const imageManager = ImageGenerationManager.getInstance();
+    
+    // Register for updates on generation status changes
+    imageManager.setUpdateCallback((handlers) => {
+      setGenerationResults(new Map(handlers));
+    });
+    
+    // Load history from database
+    const loadHistoryResults = async () => {
+      try {
+        setIsLoadingHistory(true);
+        const dbService = DatabaseIntegrationService.getInstance();
+        await dbService.initialize();
+        // TODO: Implement loading image history from database when available
+        setIsLoadingHistory(false);
+      } catch (error) {
+        console.error('Error loading image history:', error);
+        setIsLoadingHistory(false);
+      }
+    };
+    
+    loadHistoryResults();
+  }, []);
 
   // Check if API key is available
   useEffect(() => {
@@ -40,7 +73,6 @@ export const ImageGenerationPage = () => {
   const handleGenerateImage = async () => {
     if (!prompt.trim()) return;
 
-    setIsGenerating(true);
     setError(null);
 
     try {
@@ -51,6 +83,20 @@ export const ImageGenerationPage = () => {
         throw new Error("OpenAI service not available");
       }
 
+      // Create a new generation handler
+      const imageManager = ImageGenerationManager.getInstance();
+      const handler = imageManager.createHandler({
+        prompt: prompt,
+        seed: randomSeed,
+        number: imageCount,
+        aspectRatio: aspectRatio,
+        provider: OPENAI_PROVIDER_NAME,
+        model: "dall-e-3",
+      });
+      
+      // Set status to generating
+      handler.setGenerating();
+
       // Map aspect ratio to size dimensions
       const sizeMap: Record<string, `${number}x${number}`> = {
         "1:1": "1024x1024",
@@ -68,23 +114,28 @@ export const ImageGenerationPage = () => {
         style: "vivid"
       });
       
-      // Set the result image
+      // Process the result
       if (images && images.length > 0) {
-        // Check if the image is already a full data URL
-        const base64Data = images[0] as string;
-        if (base64Data.startsWith('data:image')) {
-          setImageResult(base64Data);
-        } else {
-          // If it's just a base64 string without the data URI prefix, add it
-          setImageResult(`data:image/png;base64,${base64Data}`);
-        }
+        // Convert image data to full URLs if needed
+        const processedImages = images.map(img => {
+          const base64Data = img as string;
+          if (base64Data.startsWith('data:image')) {
+            return base64Data;
+          } else {
+            return `data:image/png;base64,${base64Data}`;
+          }
+        });
+        
+        // Update the handler with successful results
+        handler.setSuccess(processedImages);
+        
+        // Generate new seed for next generation
+        generateNewSeed();
       } else {
         throw new Error("No images generated");
       }
     } catch (err) {
       setError(err as Error);
-    } finally {
-      setIsGenerating(false);
     }
   };
 
@@ -93,6 +144,25 @@ export const ImageGenerationPage = () => {
     setRandomSeed(Math.floor(Math.random() * 1000000).toString());
   };
 
+  // Get all results to display in order (active generations first, then history)
+  const getAllResults = () => {
+    const handlerResults = Array.from(generationResults.values())
+      .map(handler => handler.getResult())
+      .sort((a, b) => {
+        // Prioritize active generations first
+        if (a.status === ImageGenerationStatus.GENERATING && b.status !== ImageGenerationStatus.GENERATING) {
+          return -1;
+        }
+        if (b.status === ImageGenerationStatus.GENERATING && a.status !== ImageGenerationStatus.GENERATING) {
+          return 1;
+        }
+        // Then sort by most recent first (assuming imageResultId is a UUID with timestamp components)
+        return b.imageResultId.localeCompare(a.imageResultId);
+      });
+    
+    return [...handlerResults, ...historyResults];
+  };
+
   return (
     <div className="flex flex-col w-full h-full bg-white">
       {isApiKeyMissing && (
@@ -121,7 +191,7 @@ export const ImageGenerationPage = () => {
               <div className="flex flex-row gap-2 p-2 border border-gray-300 rounded-lg shadow-sm">
                 <button
                   onClick={handleGenerateImage}
-                  disabled={isGenerating || !prompt.trim() || isApiKeyMissing}
+                  disabled={!prompt.trim() || isApiKeyMissing}
                   className="px-4 py-2.5 text-nowrap flex flex-row gap-1 text-white text-center confirm-btn"
                 >
                   <Settings></Settings>
@@ -129,11 +199,11 @@ export const ImageGenerationPage = () => {
                 </button>
                 <button
                   onClick={handleGenerateImage}
-                  disabled={isGenerating || !prompt.trim() || isApiKeyMissing}
+                  disabled={!prompt.trim() || isApiKeyMissing}
                   className="px-4 py-2.5 text-nowrap flex flex-row gap-1 text-white text-center confirm-btn"
                 >
                   <Zap></Zap>
-                  {isGenerating
+                  {Array.from(generationResults.values()).some(h => h.getStatus() === ImageGenerationStatus.GENERATING)
                     ? t("imageGeneration.generating")
                     : t("imageGeneration.generateButton")}
                 </button>
@@ -154,41 +224,34 @@ export const ImageGenerationPage = () => {
             </div>
           )}
 
-          {/* Loading indicator */}
-          {isGenerating && (
-            <div className="flex items-center justify-center h-64 rounded-lg bg-gray-50">
-              <div className="flex flex-col items-center">
-                <div className="w-10 h-10 border-4 rounded-full border-primary-300 border-t-primary-600 animate-spin"></div>
-                <p className="mt-4 text-gray-600">
-                  {t("imageGeneration.generating")}
-                </p>
-              </div>
-            </div>
-          )}
-
           {/* Results display */}
-          {imageResult && !isGenerating && (
-            <div className="grid grid-cols-1 gap-4">
-              <div className="overflow-hidden border rounded-lg image-result-area">
-                <img
-                  src={imageResult}
-                  alt="Generated from AI"
-                  className="object-contain w-full"
-                />
+          <div className="grid grid-cols-1 gap-4">
+            {/* Active generations and history */}
+            {getAllResults().map(result => (
+              <ImageGenerateHistoryItem 
+                key={result.imageResultId} 
+                imageResult={result} 
+              />
+            ))}
+            
+            {/* Loading indicator for history */}
+            {isLoadingHistory && (
+              <div className="flex items-center justify-center h-24 rounded-lg bg-gray-50">
+                <div className="w-8 h-8 border-4 rounded-full border-primary-300 border-t-primary-600 animate-spin"></div>
               </div>
-            </div>
-          )}
-
-          {/* Placeholder when no results */}
-          {!imageResult && !isGenerating && (
-            <div className="flex items-center justify-center h-64 rounded-lg image-generation-result-placeholder">
-              <div className="text-center">
-                <p className="text-gray-500">
-                  {t("imageGeneration.placeholderText")}
-                </p>
+            )}
+            
+            {/* Placeholder when no results */}
+            {getAllResults().length === 0 && !isLoadingHistory && (
+              <div className="flex items-center justify-center h-64 rounded-lg image-generation-result-placeholder">
+                <div className="text-center">
+                  <p className="text-gray-500">
+                    {t("imageGeneration.placeholderText")}
+                  </p>
+                </div>
               </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
 
         {/* Right side - Results */}
diff --git a/src/services/image-generation-handler.ts b/src/services/image-generation-handler.ts
new file mode 100644
index 0000000..e0b1d6e
--- /dev/null
+++ b/src/services/image-generation-handler.ts
@@ -0,0 +1,167 @@
+import { v4 as uuidv4 } from 'uuid';
+import { ImageGenerationResult } from '../types/image';
+import { MessageContent, MessageContentType } from '../types/chat';
+import { DatabaseIntegrationService } from './database-integration';
+
+export enum ImageGenerationStatus {
+  PENDING = 'pending',
+  GENERATING = 'generating',
+  SUCCESS = 'success',
+  FAILED = 'failed'
+}
+
+export interface ImageGenerationOptions {
+  prompt: string;
+  negativePrompt?: string;
+  seed: string;
+  aspectRatio: string;
+  provider: string;
+  model: string;
+  number: number;
+}
+
+export class ImageGenerationHandler {
+  private imageResultId: string;
+  private status: ImageGenerationStatus;
+  private options: ImageGenerationOptions;
+  private images: MessageContent[] = [];
+  private errorMessage: string | null = null;
+  private onStatusChangeCallback: (handler: ImageGenerationHandler) => void;
+  private dbService: DatabaseIntegrationService;
+
+  constructor(
+    options: ImageGenerationOptions,
+    onStatusChangeCallback: (handler: ImageGenerationHandler) => void
+  ) {
+    this.imageResultId = uuidv4();
+    this.options = options;
+    this.status = ImageGenerationStatus.PENDING;
+    this.onStatusChangeCallback = onStatusChangeCallback;
+    this.dbService = DatabaseIntegrationService.getInstance();
+  }
+
+  public getId(): string {
+    return this.imageResultId;
+  }
+
+  public getStatus(): ImageGenerationStatus {
+    return this.status;
+  }
+
+  public getOptions(): ImageGenerationOptions {
+    return this.options;
+  }
+
+  public getImages(): MessageContent[] {
+    return this.images;
+  }
+
+  public getError(): string | null {
+    return this.errorMessage;
+  }
+
+  public getResult(): ImageGenerationResult {
+    return {
+      imageResultId: this.imageResultId,
+      prompt: this.options.prompt,
+      negativePrompt: this.options.negativePrompt || '',
+      seed: this.options.seed,
+      number: this.options.number,
+      status: this.status,
+      aspectRatio: this.options.aspectRatio,
+      provider: this.options.provider,
+      model: this.options.model,
+      images: this.images
+    };
+  }
+
+  public setGenerating(): void {
+    this.status = ImageGenerationStatus.GENERATING;
+    this.notifyStatusChange();
+  }
+
+  public setSuccess(imageUrls: string[]): void {
+    this.status = ImageGenerationStatus.SUCCESS;
+    this.images = imageUrls.map(url => ({
+      type: MessageContentType.Image,
+      content: url,
+      dataJson: ''
+    }));
+    
+    // Save to database
+    this.saveToDatabase();
+    this.notifyStatusChange();
+  }
+
+  public setFailed(error: Error): void {
+    this.status = ImageGenerationStatus.FAILED;
+    this.errorMessage = error.message;
+    this.notifyStatusChange();
+  }
+
+  private notifyStatusChange(): void {
+    if (this.onStatusChangeCallback) {
+      this.onStatusChangeCallback(this);
+    }
+  }
+
+  private async saveToDatabase(): Promise<void> {
+    try {
+      await this.dbService.saveImageGenerationResult(this.getResult());
+    } catch (error) {
+      console.error('Failed to save image generation result to database:', error);
+    }
+  }
+}
+
+export class ImageGenerationManager {
+  private static instance: ImageGenerationManager;
+  private handlers: Map<string, ImageGenerationHandler> = new Map();
+  private onUpdateCallback: (handlers: Map<string, ImageGenerationHandler>) => void = () => {};
+
+  private constructor() {}
+
+  public static getInstance(): ImageGenerationManager {
+    if (!ImageGenerationManager.instance) {
+      ImageGenerationManager.instance = new ImageGenerationManager();
+    }
+    return ImageGenerationManager.instance;
+  }
+
+  public createHandler(
+    options: ImageGenerationOptions
+  ): ImageGenerationHandler {
+    const handler = new ImageGenerationHandler(
+      options,
+      (updatedHandler) => this.onHandlerUpdate(updatedHandler)
+    );
+    
+    this.handlers.set(handler.getId(), handler);
+    this.notifyUpdate();
+    
+    return handler;
+  }
+
+  public getHandler(id: string): ImageGenerationHandler | undefined {
+    return this.handlers.get(id);
+  }
+
+  public getAllHandlers(): Map<string, ImageGenerationHandler> {
+    return this.handlers;
+  }
+
+  public setUpdateCallback(callback: (handlers: Map<string, ImageGenerationHandler>) => void): void {
+    this.onUpdateCallback = callback;
+  }
+
+  private onHandlerUpdate(handler: ImageGenerationHandler): void {
+    this.handlers.set(handler.getId(), handler);
+    this.notifyUpdate();
+  }
+
+  private notifyUpdate(): void {
+    if (this.onUpdateCallback) {
+      this.onUpdateCallback(this.handlers);
+    }
+  }
+} 
\ No newline at end of file

From 451a7017b6ce32b319722347756fb850dd6ffd31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Wed, 14 May 2025 17:23:23 +0800
Subject: [PATCH 18/27] Fix: image generation page loading history

---
 src/components/pages/ImageGenerationPage.tsx | 74 +++++++++++++++-----
 src/locales/en/translation.json              |  3 +-
 src/services/database-integration.ts         | 11 +++
 src/services/database.ts                     | 16 +++++
 4 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
index 91b4aba..7b6b8d7 100644
--- a/src/components/pages/ImageGenerationPage.tsx
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import {
   SettingsService,
   SETTINGS_CHANGE_EVENT,
@@ -28,31 +28,52 @@ export const ImageGenerationPage = () => {
   const [historyResults, setHistoryResults] = useState<ImageGenerationResult[]>([]);
   const [isLoadingHistory, setIsLoadingHistory] = useState(true);
 
+  // Load image generation history from database
+  const refreshImageHistory = useCallback(async () => {
+    try {
+      const dbService = DatabaseIntegrationService.getInstance();
+      const results = await dbService.getImageGenerationResults();
+      if (results && results.length > 0) {
+        // Sort by most recent first
+        const sortedResults = results.sort((a, b) => 
+          b.imageResultId.localeCompare(a.imageResultId)
+        );
+        setHistoryResults(sortedResults);
+      }
+    } catch (error) {
+      console.error('Error refreshing image history:', error);
+    }
+  }, []);
+
   // Initialize image generation manager
   useEffect(() => {
-    const imageManager = ImageGenerationManager.getInstance();
-    
-    // Register for updates on generation status changes
-    imageManager.setUpdateCallback((handlers) => {
-      setGenerationResults(new Map(handlers));
-    });
-    
-    // Load history from database
-    const loadHistoryResults = async () => {
+    const initialize = async () => {
+      // Initialize image generation manager
+      const imageManager = ImageGenerationManager.getInstance();
+      
+      // Register for updates on generation status changes
+      imageManager.setUpdateCallback((handlers) => {
+        setGenerationResults(new Map(handlers));
+      });
+      
+      // Initialize database and load history
       try {
         setIsLoadingHistory(true);
         const dbService = DatabaseIntegrationService.getInstance();
         await dbService.initialize();
-        // TODO: Implement loading image history from database when available
+        
+        // Load image generation history from database
+        await refreshImageHistory();
+        
         setIsLoadingHistory(false);
       } catch (error) {
-        console.error('Error loading image history:', error);
+        console.error('Error initializing database or loading image history:', error);
         setIsLoadingHistory(false);
       }
     };
     
-    loadHistoryResults();
-  }, []);
+    initialize();
+  }, [refreshImageHistory]);
 
   // Check if API key is available
   useEffect(() => {
@@ -129,6 +150,9 @@ export const ImageGenerationPage = () => {
         // Update the handler with successful results
         handler.setSuccess(processedImages);
         
+        // Refresh history to include the new generation
+        refreshImageHistory();
+        
         // Generate new seed for next generation
         generateNewSeed();
       } else {
@@ -146,6 +170,7 @@ export const ImageGenerationPage = () => {
 
   // Get all results to display in order (active generations first, then history)
   const getAllResults = () => {
+    // Get results from active generation handlers
     const handlerResults = Array.from(generationResults.values())
       .map(handler => handler.getResult())
       .sort((a, b) => {
@@ -160,9 +185,17 @@ export const ImageGenerationPage = () => {
         return b.imageResultId.localeCompare(a.imageResultId);
       });
     
+    // Combine with historical results
     return [...handlerResults, ...historyResults];
   };
 
+  // Check if any images are currently generating
+  const isAnyImageGenerating = () => {
+    return Array.from(generationResults.values()).some(
+      h => h.getStatus() === ImageGenerationStatus.GENERATING
+    );
+  };
+
   return (
     <div className="flex flex-col w-full h-full bg-white">
       {isApiKeyMissing && (
@@ -191,7 +224,7 @@ export const ImageGenerationPage = () => {
               <div className="flex flex-row gap-2 p-2 border border-gray-300 rounded-lg shadow-sm">
                 <button
                   onClick={handleGenerateImage}
-                  disabled={!prompt.trim() || isApiKeyMissing}
+                  disabled={!prompt.trim() || isApiKeyMissing || isAnyImageGenerating()}
                   className="px-4 py-2.5 text-nowrap flex flex-row gap-1 text-white text-center confirm-btn"
                 >
                   <Settings></Settings>
@@ -199,11 +232,11 @@ export const ImageGenerationPage = () => {
                 </button>
                 <button
                   onClick={handleGenerateImage}
-                  disabled={!prompt.trim() || isApiKeyMissing}
+                  disabled={!prompt.trim() || isApiKeyMissing || isAnyImageGenerating()}
                   className="px-4 py-2.5 text-nowrap flex flex-row gap-1 text-white text-center confirm-btn"
                 >
                   <Zap></Zap>
-                  {Array.from(generationResults.values()).some(h => h.getStatus() === ImageGenerationStatus.GENERATING)
+                  {isAnyImageGenerating()
                     ? t("imageGeneration.generating")
                     : t("imageGeneration.generateButton")}
                 </button>
@@ -237,7 +270,12 @@ export const ImageGenerationPage = () => {
             {/* Loading indicator for history */}
             {isLoadingHistory && (
               <div className="flex items-center justify-center h-24 rounded-lg bg-gray-50">
-                <div className="w-8 h-8 border-4 rounded-full border-primary-300 border-t-primary-600 animate-spin"></div>
+                <div className="flex flex-col items-center">
+                  <div className="w-8 h-8 border-4 rounded-full border-primary-300 border-t-primary-600 animate-spin"></div>
+                  <p className="mt-2 text-sm text-gray-600">
+                    {t("imageGeneration.loading")}
+                  </p>
+                </div>
               </div>
             )}
             
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 0298bc3..4c39ac2 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -121,7 +121,8 @@
     "results": "Generated Results",
     "placeholderText": "Enter a prompt and click generate to create images",
     "apiKeyMissing": "Please set your API key for the selected provider in the settings.",
-    "seedHelp": "Seed for reproducible results"
+    "seedHelp": "Seed for reproducible results",
+    "loading": "Loading image history..."
   },
   "mcpServer": {
     "title": "MCP Servers",
diff --git a/src/services/database-integration.ts b/src/services/database-integration.ts
index d30dc19..92263db 100644
--- a/src/services/database-integration.ts
+++ b/src/services/database-integration.ts
@@ -361,6 +361,17 @@ export class DatabaseIntegrationService {
         }
     }
 
+    /**
+     * Get all image generation results from the database
+     */
+    public async getImageGenerationResults(): Promise<ImageGenerationResult[]> {
+        try {
+            return await this.dbService.getImageGenerationResults();
+        } catch (error) {
+            console.error('Error getting image generation results:', error);
+            return [];
+        }
+    }
 
     public async saveFile(fileData: FileJsonData, arrayBuffer: ArrayBuffer): Promise<string> {
         const fileId = uuidv4();
diff --git a/src/services/database.ts b/src/services/database.ts
index 51a049e..92207d9 100644
--- a/src/services/database.ts
+++ b/src/services/database.ts
@@ -567,6 +567,22 @@ export class DatabaseService {
         });
     }
 
+    /**
+     * Get all image generation results from the database
+     */
+    public async getImageGenerationResults(): Promise<ImageGenerationResult[]> {
+        return new Promise((resolve, reject) => {
+            if (!this.db) throw new Error('Database not initialized');
+
+            const transaction = this.db.transaction('imageGenerationResults', 'readonly');
+            const store = transaction.objectStore('imageGenerationResults');
+            const request = store.getAll();
+
+            request.onsuccess = () => resolve(request.result);
+            request.onerror = () => reject(request.error);
+        });
+    }
+
     /**
      * Get all files from the database
      * @returns List of files

From 1b1efa2354381d49564f5246cd074836d8f6bcda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Wed, 14 May 2025 17:33:27 +0800
Subject: [PATCH 19/27] Function: Add settings page

---
 src/components/pages/ImageGenerationPage.tsx | 321 ++++++++++---------
 1 file changed, 167 insertions(+), 154 deletions(-)

diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
index 7b6b8d7..ef8c92e 100644
--- a/src/components/pages/ImageGenerationPage.tsx
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import {
   SettingsService,
   SETTINGS_CHANGE_EVENT,
@@ -18,6 +18,7 @@ export const ImageGenerationPage = () => {
   const [error, setError] = useState<Error | null>(null);
   const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
   const [aspectRatio, setAspectRatio] = useState("1:1");
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [imageCount, setImageCount] = useState(1);
   const [randomSeed, setRandomSeed] = useState(
     Math.floor(Math.random() * 1000000).toString()
@@ -27,6 +28,10 @@ export const ImageGenerationPage = () => {
   );
   const [historyResults, setHistoryResults] = useState<ImageGenerationResult[]>([]);
   const [isLoadingHistory, setIsLoadingHistory] = useState(true);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  
+  const settingsButtonRef = useRef<HTMLButtonElement>(null);
+  const settingsPopupRef = useRef<HTMLDivElement>(null);
 
   // Load image generation history from database
   const refreshImageHistory = useCallback(async () => {
@@ -90,6 +95,25 @@ export const ImageGenerationPage = () => {
     };
   }, []);
 
+  // Handle clicks outside the settings popup
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        settingsPopupRef.current && 
+        !settingsPopupRef.current.contains(event.target as Node) &&
+        settingsButtonRef.current && 
+        !settingsButtonRef.current.contains(event.target as Node)
+      ) {
+        setIsSettingsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   // Handle generating an image using OpenAI's DALL-E 3
   const handleGenerateImage = async () => {
     if (!prompt.trim()) return;
@@ -196,6 +220,11 @@ export const ImageGenerationPage = () => {
     );
   };
 
+  // Toggle settings popup
+  const toggleSettings = () => {
+    setIsSettingsOpen(!isSettingsOpen);
+  };
+
   return (
     <div className="flex flex-col w-full h-full bg-white">
       {isApiKeyMissing && (
@@ -223,8 +252,8 @@ export const ImageGenerationPage = () => {
 
               <div className="flex flex-row gap-2 p-2 border border-gray-300 rounded-lg shadow-sm">
                 <button
-                  onClick={handleGenerateImage}
-                  disabled={!prompt.trim() || isApiKeyMissing || isAnyImageGenerating()}
+                  ref={settingsButtonRef}
+                  onClick={toggleSettings}
                   className="px-4 py-2.5 text-nowrap flex flex-row gap-1 text-white text-center confirm-btn"
                 >
                   <Settings></Settings>
@@ -292,167 +321,151 @@ export const ImageGenerationPage = () => {
           </div>
         </div>
 
-        {/* Right side - Results */}
-        <div className="hidden w-[420px] h-full p-6 overflow-y-auto">
-          {/* Provider selection */}
-          <div className="mb-6">
-            <label className="block mb-2 text-sm font-medium text-gray-700">
-              {t("imageGeneration.provider")}
-            </label>
-            <div className="relative">
-              <button
-                className="flex items-center justify-between w-full p-3 text-left input-box"
-                disabled={true}
-              >
-                <span>OpenAI</span>
-                <ChevronDown size={18} className="text-gray-500" />
-              </button>
-            </div>
-          </div>
-
-          {/* Model selection */}
-          <div className="mb-6">
-            <label className="block mb-2 text-sm font-medium text-gray-700">
-              {t("imageGeneration.model")}
-            </label>
-            <div className="relative">
-              <button
-                className="flex items-center justify-between w-full p-3 text-left input-box"
-                disabled={true}
-              >
-                <span>DALL-E 3</span>
-                <ChevronDown size={18} className="text-gray-500" />
-              </button>
+        {/* Settings popup */}
+        {isSettingsOpen && (
+          <div 
+            ref={settingsPopupRef}
+            className="absolute z-10 p-4 bg-white border border-gray-300 rounded-lg shadow-lg image-generation-settings-popup"
+            style={{ 
+              top: settingsButtonRef.current ? 
+                settingsButtonRef.current.getBoundingClientRect().top + 5 : 100,
+              left: settingsButtonRef.current ? 
+                settingsButtonRef.current.getBoundingClientRect().left - 130 : 100,
+              width: '320px'
+            }}
+          >
+            <div className="mb-4">
+              <h3 className="mb-2 text-base font-medium text-gray-800">
+                {t("imageGeneration.imageSize")}
+              </h3>
+              <div className="grid grid-cols-3 gap-2">
+                <button
+                  onClick={() => setAspectRatio("1:1")}
+                  className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                    aspectRatio === "1:1" ? "active" : ""
+                  }`}
+                >
+                  <div className="flex justify-center mb-1">
+                    <div className="w-6 h-6 border border-gray-500 rounded-sm"></div>
+                  </div>
+                  <span className="text-xs">1:1</span>
+                </button>
+                <button
+                  onClick={() => setAspectRatio("3:2")}
+                  className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                    aspectRatio === "3:2" ? "active" : ""
+                  }`}
+                >
+                  <div className="flex justify-center mb-1">
+                    <div className="w-6 h-4 border border-gray-500 rounded-sm"></div>
+                  </div>
+                  <span className="text-xs">3:2</span>
+                </button>
+                <button
+                  onClick={() => setAspectRatio("16:9")}
+                  className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                    aspectRatio === "16:9" ? "active" : ""
+                  }`}
+                >
+                  <div className="flex justify-center mb-1">
+                    <div className="w-6 h-3.5 border border-gray-500 rounded-sm"></div>
+                  </div>
+                  <span className="text-xs">16:9</span>
+                </button>
+                <button
+                  onClick={() => setAspectRatio("1:2")}
+                  className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                    aspectRatio === "1:2" ? "active" : ""
+                  }`}
+                >
+                  <div className="flex justify-center mb-1">
+                    <div className="w-4 h-6 border border-gray-500 rounded-sm"></div>
+                  </div>
+                  <span className="text-xs">1:2</span>
+                </button>
+                <button
+                  onClick={() => setAspectRatio("3:4")}
+                  className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                    aspectRatio === "3:4" ? "active" : ""
+                  }`}
+                >
+                  <div className="flex justify-center mb-1">
+                    <div className="w-[1rem] h-[1.5rem] border border-gray-500 rounded-sm"></div>
+                  </div>
+                  <span className="text-xs">3:4</span>
+                </button>
+                <button
+                  onClick={() => setAspectRatio("9:16")}
+                  className={`p-2 text-center border rounded-lg aspect-ratio-button ${
+                    aspectRatio === "9:16" ? "active" : ""
+                  }`}
+                >
+                  <div className="flex justify-center mb-1">
+                    <div className="w-3.5 h-6 border border-gray-500 rounded-sm"></div>
+                  </div>
+                  <span className="text-xs">9:16</span>
+                </button>
+              </div>
             </div>
-          </div>
 
-          {/* Aspect ratio selection */}
-          <div className="mb-6">
-            <label className="block mb-2 text-sm font-medium text-gray-700">
-              {t("imageGeneration.imageSize")}
-            </label>
-            <div className="grid grid-cols-6 gap-1">
-              <button
-                onClick={() => setAspectRatio("1:1")}
-                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
-                  aspectRatio === "1:1" ? "active" : ""
-                }`}
-              >
-                <div className="flex justify-center mb-1">
-                  <div className="w-6 h-6 border border-gray-500 rounded-sm"></div>
-                </div>
-                <span className="text-xs">1:1</span>
-              </button>
-              <button
-                onClick={() => setAspectRatio("1:2")}
-                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
-                  aspectRatio === "1:2" ? "active" : ""
-                }`}
-              >
-                <div className="flex justify-center mb-1">
-                  <div className="w-4 h-6 border border-gray-500 rounded-sm"></div>
-                </div>
-                <span className="text-xs">1:2</span>
-              </button>
-              <button
-                onClick={() => setAspectRatio("3:2")}
-                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
-                  aspectRatio === "3:2" ? "active" : ""
-                }`}
-              >
-                <div className="flex justify-center mb-1">
-                  <div className="w-6 h-4 border border-gray-500 rounded-sm"></div>
-                </div>
-                <span className="text-xs">3:2</span>
-              </button>
-              <button
-                onClick={() => setAspectRatio("3:4")}
-                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
-                  aspectRatio === "3:4" ? "active" : ""
-                }`}
-              >
-                <div className="flex justify-center mb-1">
-                  <div className="w-[1rem] h-[1.5rem] border border-gray-500 rounded-sm"></div>
-                </div>
-                <span className="text-xs">3:4</span>
-              </button>
-              <button
-                onClick={() => setAspectRatio("16:9")}
-                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
-                  aspectRatio === "16:9" ? "active" : ""
-                }`}
-              >
-                <div className="flex justify-center mb-1">
-                  <div className="w-6 h-3.5 border border-gray-500 rounded-sm"></div>
-                </div>
-                <span className="text-xs">16:9</span>
-              </button>
-              <button
-                onClick={() => setAspectRatio("9:16")}
-                className={`p-2 text-center border rounded-lg aspect-ratio-button ${
-                  aspectRatio === "9:16" ? "active" : ""
-                }`}
-              >
-                <div className="flex justify-center mb-1">
-                  <div className="w-3.5 h-6 border border-gray-500 rounded-sm"></div>
+            <div className="mb-4">
+              <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
+                {t("imageGeneration.randomSeed")}
+                <div
+                  className="flex items-center justify-center w-4 h-4 ml-1 text-xs text-gray-500 bg-gray-200 rounded-full cursor-help"
+                  title={t("imageGeneration.seedHelp")}
+                >
+                  ?
                 </div>
-                <span className="text-xs">9:16</span>
-              </button>
+              </label>
+              <div className="flex">
+                <input
+                  type="text"
+                  value={randomSeed}
+                  onChange={(e) => setRandomSeed(e.target.value)}
+                  className="flex-grow p-3 mr-2 input-box"
+                />
+                <button
+                  onClick={generateNewSeed}
+                  className="p-2 rounded-lg image-generation-refresh-button"
+                  title={t("imageGeneration.randomSeed")}
+                >
+                  <RefreshCw size={20} />
+                </button>
+              </div>
             </div>
-          </div>
 
-          {/* Image count */}
-          <div className="mb-6">
-            <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
-              {t("imageGeneration.generationCount")}
-              <div
-                className="flex items-center justify-center w-4 h-4 ml-1 text-xs text-gray-500 bg-gray-200 rounded-full cursor-help"
-                title={t("imageGeneration.generationCount")}
-              >
-                ?
+            <div className="mb-4">
+              <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
+                {t("imageGeneration.provider")}
+              </label>
+              <div className="relative">
+                <button
+                  className="flex items-center justify-between w-full p-3 text-left input-box"
+                  disabled={true}
+                >
+                  <span>OpenAI</span>
+                  <ChevronDown size={18} className="text-gray-500" />
+                </button>
               </div>
-            </label>
-            <input
-              type="number"
-              value={imageCount}
-              onChange={(e) => setImageCount(parseInt(e.target.value) || 1)}
-              min="1"
-              max="4"
-              className="w-full p-3 input-box"
-              disabled={true}
-            />
-          </div>
+            </div>
 
-          {/* Random seed */}
-          <div className="mb-6">
-            <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
-              {t("imageGeneration.randomSeed")}
-              <div
-                className="flex items-center justify-center w-4 h-4 ml-1 text-xs text-gray-500 bg-gray-200 rounded-full cursor-help"
-                title={t("imageGeneration.seedHelp")}
-              >
-                ?
+            <div className="mb-4">
+              <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
+                {t("imageGeneration.model")}
+              </label>
+              <div className="relative">
+                <button
+                  className="flex items-center justify-between w-full p-3 text-left input-box"
+                  disabled={true}
+                >
+                  <span>DALL-E 3</span>
+                  <ChevronDown size={18} className="text-gray-500" />
+                </button>
               </div>
-            </label>
-            <div className="flex">
-              <input
-                type="text"
-                value={randomSeed}
-                onChange={(e) => setRandomSeed(e.target.value)}
-                className="flex-grow p-3 mr-2 input-box"
-                disabled={true}
-              />
-              <button
-                onClick={generateNewSeed}
-                className="p-2 rounded-lg image-generation-refresh-button"
-                title={t("imageGeneration.randomSeed")}
-                disabled={true}
-              >
-                <RefreshCw size={20} />
-              </button>
             </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );

From cf88b55fd66347c2071a9f300e7cf5288b3b8b1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Wed, 14 May 2025 18:05:37 +0800
Subject: [PATCH 20/27] Function: Add tensorBlock Image Generation Support

---
 src/components/pages/ImageGenerationPage.tsx | 106 ++++++++++++++++---
 src/services/providers/forge-service.ts      |  24 ++++-
 src/services/settings-service.ts             |  42 +++++---
 3 files changed, 137 insertions(+), 35 deletions(-)

diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
index ef8c92e..1b77fa0 100644
--- a/src/components/pages/ImageGenerationPage.tsx
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -7,6 +7,7 @@ import { ChevronDown, RefreshCw, Settings, Zap } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { AIService } from "../../services/ai-service";
 import { OPENAI_PROVIDER_NAME } from "../../services/providers/openai-service";
+import { FORGE_PROVIDER_NAME as TENSORBLOCK_PROVIDER_NAME } from "../../services/providers/forge-service";
 import { ImageGenerationManager, ImageGenerationStatus, ImageGenerationHandler } from "../../services/image-generation-handler";
 import { DatabaseIntegrationService } from "../../services/database-integration";
 import { ImageGenerationResult } from "../../types/image";
@@ -29,9 +30,12 @@ export const ImageGenerationPage = () => {
   const [historyResults, setHistoryResults] = useState<ImageGenerationResult[]>([]);
   const [isLoadingHistory, setIsLoadingHistory] = useState(true);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [selectedProvider, setSelectedProvider] = useState(OPENAI_PROVIDER_NAME);
   
   const settingsButtonRef = useRef<HTMLButtonElement>(null);
   const settingsPopupRef = useRef<HTMLDivElement>(null);
+  const providerDropdownRef = useRef<HTMLDivElement>(null);
+  const [isProviderDropdownOpen, setIsProviderDropdownOpen] = useState(false);
 
   // Load image generation history from database
   const refreshImageHistory = useCallback(async () => {
@@ -50,7 +54,7 @@ export const ImageGenerationPage = () => {
     }
   }, []);
 
-  // Initialize image generation manager
+  // Initialize image generation manager and load settings
   useEffect(() => {
     const initialize = async () => {
       // Initialize image generation manager
@@ -67,6 +71,16 @@ export const ImageGenerationPage = () => {
         const dbService = DatabaseIntegrationService.getInstance();
         await dbService.initialize();
         
+        // Load settings
+        const settingsService = SettingsService.getInstance();
+        await settingsService.initialize();
+        
+        // Load saved provider preference
+        const settings = settingsService.getSettings();
+        if (settings.imageGenerationProvider) {
+          setSelectedProvider(settings.imageGenerationProvider);
+        }
+        
         // Load image generation history from database
         await refreshImageHistory();
         
@@ -82,10 +96,16 @@ export const ImageGenerationPage = () => {
 
   // Check if API key is available
   useEffect(() => {
-    setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
+    const checkApiKey = () => {
+      // Check if the selected provider has an API key
+      const hasApiKey = !!SettingsService.getInstance().getApiKey(selectedProvider);
+      setIsApiKeyMissing(!hasApiKey);
+    };
+    
+    checkApiKey();
 
     const handleSettingsChange = () => {
-      setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
+      checkApiKey();
     };
 
     window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
@@ -93,7 +113,7 @@ export const ImageGenerationPage = () => {
     return () => {
       window.removeEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
     };
-  }, []);
+  }, [selectedProvider]);
 
   // Handle clicks outside the settings popup
   useEffect(() => {
@@ -105,6 +125,14 @@ export const ImageGenerationPage = () => {
         !settingsButtonRef.current.contains(event.target as Node)
       ) {
         setIsSettingsOpen(false);
+        setIsProviderDropdownOpen(false);
+      } else if (
+        providerDropdownRef.current &&
+        !providerDropdownRef.current.contains(event.target as Node) &&
+        event.target instanceof Element &&
+        !event.target.closest('.provider-dropdown-toggle')
+      ) {
+        setIsProviderDropdownOpen(false);
       }
     };
 
@@ -114,18 +142,24 @@ export const ImageGenerationPage = () => {
     };
   }, []);
 
-  // Handle generating an image using OpenAI's DALL-E 3
+  // Handle generating an image using selected provider
   const handleGenerateImage = async () => {
     if (!prompt.trim()) return;
 
     setError(null);
 
     try {
-      // Get the OpenAI service from AIService
-      const openaiService = AIService.getInstance().getProvider(OPENAI_PROVIDER_NAME);
+      let providerService;
+      
+      // Get the appropriate service based on selected provider
+      if (selectedProvider === TENSORBLOCK_PROVIDER_NAME) {
+        providerService = AIService.getInstance().getProvider(TENSORBLOCK_PROVIDER_NAME);
+      } else {
+        providerService = AIService.getInstance().getProvider(OPENAI_PROVIDER_NAME);
+      }
       
-      if (!openaiService) {
-        throw new Error("OpenAI service not available");
+      if (!providerService) {
+        throw new Error(`${selectedProvider} service not available`);
       }
 
       // Create a new generation handler
@@ -135,7 +169,7 @@ export const ImageGenerationPage = () => {
         seed: randomSeed,
         number: imageCount,
         aspectRatio: aspectRatio,
-        provider: OPENAI_PROVIDER_NAME,
+        provider: selectedProvider,
         model: "dall-e-3",
       });
       
@@ -153,7 +187,7 @@ export const ImageGenerationPage = () => {
       };
       
       // Generate the image
-      const images = await openaiService.getImageGeneration(prompt, {
+      const images = await providerService.getImageGeneration(prompt, {
         size: sizeMap[aspectRatio] || "1024x1024",
         aspectRatio: aspectRatio as `${number}:${number}`,
         style: "vivid"
@@ -223,6 +257,24 @@ export const ImageGenerationPage = () => {
   // Toggle settings popup
   const toggleSettings = () => {
     setIsSettingsOpen(!isSettingsOpen);
+    setIsProviderDropdownOpen(false);
+  };
+
+  // Toggle provider dropdown
+  const toggleProviderDropdown = () => {
+    setIsProviderDropdownOpen(!isProviderDropdownOpen);
+  };
+
+  // Handle provider selection
+  const handleProviderSelect = async (provider: string) => {
+    setSelectedProvider(provider);
+    setIsProviderDropdownOpen(false);
+    
+    // Save provider preference to settings
+    const settingsService = SettingsService.getInstance();
+    await settingsService.updateSettings({
+      imageGenerationProvider: provider
+    });
   };
 
   return (
@@ -441,12 +493,38 @@ export const ImageGenerationPage = () => {
               </label>
               <div className="relative">
                 <button
-                  className="flex items-center justify-between w-full p-3 text-left input-box"
-                  disabled={true}
+                  className="flex items-center justify-between w-full p-3 text-left provider-dropdown-toggle input-box"
+                  onClick={toggleProviderDropdown}
                 >
-                  <span>OpenAI</span>
+                  <span>{selectedProvider}</span>
                   <ChevronDown size={18} className="text-gray-500" />
                 </button>
+                
+                {isProviderDropdownOpen && (
+                  <div 
+                    ref={providerDropdownRef}
+                    className="absolute z-20 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg"
+                  >
+                    <ul className="py-1">
+                      <li 
+                        className={`px-3 py-2 cursor-pointer hover:bg-gray-100 ${
+                          selectedProvider === OPENAI_PROVIDER_NAME ? 'bg-gray-50 font-medium' : ''
+                        }`}
+                        onClick={() => handleProviderSelect(OPENAI_PROVIDER_NAME)}
+                      >
+                        OpenAI
+                      </li>
+                      <li 
+                        className={`px-3 py-2 cursor-pointer hover:bg-gray-100 ${
+                          selectedProvider === TENSORBLOCK_PROVIDER_NAME ? 'bg-gray-50 font-medium' : ''
+                        }`}
+                        onClick={() => handleProviderSelect(TENSORBLOCK_PROVIDER_NAME)}
+                      >
+                        TensorBlock
+                      </li>
+                    </ul>
+                  </div>
+                )}
               </div>
             </div>
 
diff --git a/src/services/providers/forge-service.ts b/src/services/providers/forge-service.ts
index bb2cbe4..c83496a 100644
--- a/src/services/providers/forge-service.ts
+++ b/src/services/providers/forge-service.ts
@@ -118,13 +118,29 @@ export class ForgeService implements AiServiceProvider {
    */
   public async getImageGeneration(
     prompt: string,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     options: {
       size?: `${number}x${number}`;
+      aspectRatio?: `${number}:${number}`;
       style?: string;
       quality?: string;
-    } = {}
-  ): Promise<string[]> {
-    throw new Error('Not implemented');
+    }
+  ): Promise<string[] | Uint8Array<ArrayBufferLike>[]> {
+
+    const imageModel = this.commonProviderHelper.ProviderInstance.imageModel('dall-e-3');
+
+    const result = await imageModel.doGenerate({
+      prompt: prompt,
+      n: 1,
+      size: options.size || '1024x1024',
+      aspectRatio: options.aspectRatio || '1:1',
+      seed: 42,
+      providerOptions: {
+        "openai": {
+          "style": options.style || 'vivid'
+        }
+      }
+    });
+
+    return result.images;
   }
 } 
\ No newline at end of file
diff --git a/src/services/settings-service.ts b/src/services/settings-service.ts
index 390e9bb..2d20e53 100644
--- a/src/services/settings-service.ts
+++ b/src/services/settings-service.ts
@@ -9,23 +9,31 @@ import { v4 as uuidv4 } from 'uuid';
  */
 const DEFAULT_SETTINGS: UserSettings = {
   providers: {
-    // ['TensorBlock']: {
-    //   providerId: 'TensorBlock',
-    //   providerName: 'TensorBlock',
-    //   apiKey: '',
-    //   baseUrl: 'http://54.177.123.202:8000/v1',
-    //   customProvider: false,
-    //   models:[
-    //     {
-    //       modelName: 'GPT-4o',
-    //       modelId: 'gpt-4o',
-    //       modelCategory: 'GPT 4',
-    //       modelDescription: 'GPT-4o is the latest and most powerful model from OpenAI.',
-    //       modelCapabilities: [AIServiceCapability.TextCompletion, AIServiceCapability.WebSearch],
-    //       modelRefUUID: uuidv4(),
-    //     },
-    //   ]
-    // },
+    ['TensorBlock']: {
+      providerId: 'TensorBlock',
+      providerName: 'TensorBlock',
+      apiKey: '',
+      baseUrl: 'http://54.177.123.202:8000/v1',
+      customProvider: false,
+      models:[
+        {
+          modelName: 'GPT-4o',
+          modelId: 'gpt-4o',
+          modelCategory: 'GPT 4',
+          modelDescription: 'GPT-4o is the latest and most powerful model from OpenAI.',
+          modelCapabilities: [AIServiceCapability.TextCompletion, AIServiceCapability.WebSearch],
+          modelRefUUID: uuidv4(),
+        },
+        {
+          modelName: 'DALL-E 3',
+          modelId: 'dall-e-3',
+          modelCategory: 'Image Generation',
+          modelDescription: 'DALL-E 3 is OpenAI\'s advanced image generation model.',
+          modelCapabilities: [AIServiceCapability.ImageGeneration],
+          modelRefUUID: uuidv4(),
+        },
+      ]
+    },
     ['OpenAI']: {
       providerId: 'OpenAI',
       providerName: 'OpenAI',

From 850b981eb3798bfc3117ff623bfc7e9f7bc85b1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Wed, 14 May 2025 18:20:01 +0800
Subject: [PATCH 21/27] Fix: Add image generation UI hint & date storage

---
 .../image/ImageGenerateHistoryItem.tsx        | 45 +++++++++++--
 src/components/pages/ImageGenerationPage.tsx  | 67 ++++++++++++-------
 src/services/image-generation-handler.ts      | 19 +++++-
 src/types/image.ts                            |  1 +
 4 files changed, 98 insertions(+), 34 deletions(-)

diff --git a/src/components/image/ImageGenerateHistoryItem.tsx b/src/components/image/ImageGenerateHistoryItem.tsx
index 08eb044..24d0a4c 100644
--- a/src/components/image/ImageGenerateHistoryItem.tsx
+++ b/src/components/image/ImageGenerateHistoryItem.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { ImageGenerationResult } from '../../types/image';
 import { MessageContent } from '../../types/chat';
+import { Loader } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 interface ImageGenerateHistoryItemProps {
   imageResult: ImageGenerationResult;
@@ -9,10 +11,13 @@ interface ImageGenerateHistoryItemProps {
 const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({ 
   imageResult,
 }) => { 
+  const { t } = useTranslation();
+  const isGenerating = imageResult.status === 'generating';
+  const isFailed = imageResult.status === 'failed';
 
   // Function to render image grid based on number of images and aspect ratio
   const renderImageGrid = (images: MessageContent[]) => {
-    if (images.length === 0) return null;
+    if (images.length === 0 && !isGenerating) return null;
 
     // Convert aspect ratio string (e.g. "16:9") to calculate best layout
     const [widthRatio, heightRatio] = imageResult.aspectRatio.split(':').map(Number);
@@ -29,6 +34,29 @@ const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({
       gridClass = "grid-cols-2 grid-rows-2";
     }
     
+    // If still generating, show a loading indicator
+    if (isGenerating) {
+      return (
+        <div className="flex items-center justify-center h-64 bg-gray-50" style={{ aspectRatio: imageResult.aspectRatio.replace(':', '/') }}>
+          <div className="flex flex-col items-center">
+            <Loader size={40} className="text-primary-500 animate-spin" />
+            <p className="mt-4 text-sm text-gray-600">{t('imageGeneration.creatingImage')}</p>
+          </div>
+        </div>
+      );
+    }
+    
+    // Show error message if generation failed
+    if (isFailed) {
+      return (
+        <div className="flex items-center justify-center h-64 bg-red-50" style={{ aspectRatio: imageResult.aspectRatio.replace(':', '/') }}>
+          <div className="flex flex-col items-center">
+            <p className="text-red-600">{t('imageGeneration.generationFailed')}</p>
+          </div>
+        </div>
+      );
+    }
+    
     return (
       <div className={`grid gap-2 ${gridClass}`}>
         {images.map((image, index) => (
@@ -51,7 +79,7 @@ const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({
   };
 
   return (
-    <div className="mb-6 overflow-hidden border rounded-lg shadow-sm image-result-item">
+    <div className={`mb-6 overflow-hidden border rounded-lg shadow-sm image-result-item ${isGenerating ? 'border-primary-300' : ''}`}>
       <div className="image-result-container">
         {renderImageGrid(imageResult.images)}
       </div>
@@ -63,18 +91,23 @@ const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({
               <p className="mb-1 text-sm font-medium text-gray-900 truncate">{imageResult.prompt}</p>
               
               <div className="flex flex-wrap gap-2 mt-2">
-                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
                   {imageResult.model}
                 </span>
-                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
                   {imageResult.provider}
                 </span>
-                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
                   {imageResult.aspectRatio}
                 </span>
-                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
                   Seed: {imageResult.seed}
                 </span>
+                {isGenerating && (
+                  <span className="px-2 py-1 text-xs text-white rounded-full bg-primary-500 animate-pulse">
+                    {t('imageGeneration.generating')}
+                  </span>
+                )}
               </div>
             </div>
           </div>
diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
index 1b77fa0..687196f 100644
--- a/src/components/pages/ImageGenerationPage.tsx
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -43,11 +43,17 @@ export const ImageGenerationPage = () => {
       const dbService = DatabaseIntegrationService.getInstance();
       const results = await dbService.getImageGenerationResults();
       if (results && results.length > 0) {
-        // Sort by most recent first
-        const sortedResults = results.sort((a, b) => 
-          b.imageResultId.localeCompare(a.imageResultId)
-        );
+        // Sort by most recent first using updatedAt timestamp
+        const sortedResults = results.sort((a, b) => {
+          // Convert string dates to Date objects if necessary
+          const dateA = a.updatedAt instanceof Date ? a.updatedAt : new Date(a.updatedAt);
+          const dateB = b.updatedAt instanceof Date ? b.updatedAt : new Date(b.updatedAt);
+          // Sort newest first
+          return dateB.getTime() - dateA.getTime();
+        });
         setHistoryResults(sortedResults);
+      } else {
+        setHistoryResults([]);
       }
     } catch (error) {
       console.error('Error refreshing image history:', error);
@@ -142,6 +148,32 @@ export const ImageGenerationPage = () => {
     };
   }, []);
 
+  // Process and update the result after generation
+  const processGenerationResult = async (handler: ImageGenerationHandler, images: string[]) => {
+    // Convert image data to full URLs if needed
+    const processedImages = images.map(img => {
+      const base64Data = img as string;
+      if (base64Data.startsWith('data:image')) {
+        return base64Data;
+      } else {
+        return `data:image/png;base64,${base64Data}`;
+      }
+    });
+    
+    // Update the handler with successful results
+    await handler.setSuccess(processedImages);
+    
+    // Refresh history to include the new generation
+    await refreshImageHistory();
+    
+    // Remove the handler to prevent duplication with database results
+    const imageManager = ImageGenerationManager.getInstance();
+    imageManager.removeHandler(handler.getId());
+    
+    // Generate new seed for next generation
+    generateNewSeed();
+  };
+
   // Handle generating an image using selected provider
   const handleGenerateImage = async () => {
     if (!prompt.trim()) return;
@@ -195,24 +227,7 @@ export const ImageGenerationPage = () => {
       
       // Process the result
       if (images && images.length > 0) {
-        // Convert image data to full URLs if needed
-        const processedImages = images.map(img => {
-          const base64Data = img as string;
-          if (base64Data.startsWith('data:image')) {
-            return base64Data;
-          } else {
-            return `data:image/png;base64,${base64Data}`;
-          }
-        });
-        
-        // Update the handler with successful results
-        handler.setSuccess(processedImages);
-        
-        // Refresh history to include the new generation
-        refreshImageHistory();
-        
-        // Generate new seed for next generation
-        generateNewSeed();
+        await processGenerationResult(handler, images as string[]);
       } else {
         throw new Error("No images generated");
       }
@@ -239,11 +254,13 @@ export const ImageGenerationPage = () => {
         if (b.status === ImageGenerationStatus.GENERATING && a.status !== ImageGenerationStatus.GENERATING) {
           return 1;
         }
-        // Then sort by most recent first (assuming imageResultId is a UUID with timestamp components)
-        return b.imageResultId.localeCompare(a.imageResultId);
+        // Then sort by most recent first using updatedAt timestamp
+        const dateA = a.updatedAt instanceof Date ? a.updatedAt : new Date(a.updatedAt);
+        const dateB = b.updatedAt instanceof Date ? b.updatedAt : new Date(b.updatedAt);
+        return dateB.getTime() - dateA.getTime();
       });
     
-    // Combine with historical results
+    // Combine with historical results and ensure newest is first
     return [...handlerResults, ...historyResults];
   };
 
diff --git a/src/services/image-generation-handler.ts b/src/services/image-generation-handler.ts
index e0b1d6e..06ded76 100644
--- a/src/services/image-generation-handler.ts
+++ b/src/services/image-generation-handler.ts
@@ -28,6 +28,7 @@ export class ImageGenerationHandler {
   private errorMessage: string | null = null;
   private onStatusChangeCallback: (handler: ImageGenerationHandler) => void;
   private dbService: DatabaseIntegrationService;
+  private updatedAt: Date;
 
   constructor(
     options: ImageGenerationOptions,
@@ -38,6 +39,7 @@ export class ImageGenerationHandler {
     this.status = ImageGenerationStatus.PENDING;
     this.onStatusChangeCallback = onStatusChangeCallback;
     this.dbService = DatabaseIntegrationService.getInstance();
+    this.updatedAt = new Date();
   }
 
   public getId(): string {
@@ -71,17 +73,20 @@ export class ImageGenerationHandler {
       aspectRatio: this.options.aspectRatio,
       provider: this.options.provider,
       model: this.options.model,
-      images: this.images
+      images: this.images,
+      updatedAt: this.updatedAt
     };
   }
 
   public setGenerating(): void {
     this.status = ImageGenerationStatus.GENERATING;
+    this.updatedAt = new Date();
     this.notifyStatusChange();
   }
 
-  public setSuccess(imageUrls: string[]): void {
+  public async setSuccess(imageUrls: string[]): Promise<void> {
     this.status = ImageGenerationStatus.SUCCESS;
+    this.updatedAt = new Date();
     this.images = imageUrls.map(url => ({
       type: MessageContentType.Image,
       content: url,
@@ -89,12 +94,13 @@ export class ImageGenerationHandler {
     }));
     
     // Save to database
-    this.saveToDatabase();
+    await this.saveToDatabase();
     this.notifyStatusChange();
   }
 
   public setFailed(error: Error): void {
     this.status = ImageGenerationStatus.FAILED;
+    this.updatedAt = new Date();
     this.errorMessage = error.message;
     this.notifyStatusChange();
   }
@@ -146,6 +152,13 @@ export class ImageGenerationManager {
     return this.handlers.get(id);
   }
 
+  public removeHandler(id: string): void {
+    if (this.handlers.has(id)) {
+      this.handlers.delete(id);
+      this.notifyUpdate();
+    }
+  }
+
   public getAllHandlers(): Map<string, ImageGenerationHandler> {
     return this.handlers;
   }
diff --git a/src/types/image.ts b/src/types/image.ts
index b248684..51c52a0 100644
--- a/src/types/image.ts
+++ b/src/types/image.ts
@@ -11,4 +11,5 @@ export interface ImageGenerationResult {
     provider: string;
     model: string;
     images: MessageContent[];
+    updatedAt: Date;
 }
\ No newline at end of file

From e4a0bdc06c5166cd6d32d9449afe2c3e6c3c4a41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Fri, 16 May 2025 23:53:44 +0800
Subject: [PATCH 22/27] Fix: Custom Provider Support Image Generation

---
 src/components/settings/ApiManagement.tsx | 39 ++++++++--------
 src/services/providers/custom-service.ts  | 24 ++++++++--
 src/services/settings-service.ts          | 54 ++++++++++++-----------
 3 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/src/components/settings/ApiManagement.tsx b/src/components/settings/ApiManagement.tsx
index d766c74..3556c5c 100644
--- a/src/components/settings/ApiManagement.tsx
+++ b/src/components/settings/ApiManagement.tsx
@@ -166,24 +166,24 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
   };
 
   // Handle capability change
-  // const handleCapabilityChange = (capability: AIServiceCapability, isChecked: boolean) => {
-  //   if (!currentEditModel) return;
+  const handleCapabilityChange = (capability: AIServiceCapability, isChecked: boolean) => {
+    if (!currentEditModel) return;
     
-  //   let updatedCapabilities = [...currentEditModel.modelCapabilities];
+    let updatedCapabilities = [...currentEditModel.modelCapabilities];
     
-  //   if (isChecked) {
-  //     if (!updatedCapabilities.includes(capability)) {
-  //       updatedCapabilities.push(capability);
-  //     }
-  //   } else {
-  //     updatedCapabilities = updatedCapabilities.filter(cap => cap !== capability);
-  //   }
+    if (isChecked) {
+      if (!updatedCapabilities.includes(capability)) {
+        updatedCapabilities.push(capability);
+      }
+    } else {
+      updatedCapabilities = updatedCapabilities.filter(cap => cap !== capability);
+    }
     
-  //   setCurrentEditModel({
-  //     ...currentEditModel,
-  //     modelCapabilities: updatedCapabilities
-  //   });
-  // };
+    setCurrentEditModel({
+      ...currentEditModel,
+      modelCapabilities: updatedCapabilities
+    });
+  };
 
   // Get capability icon
   const getCapabilityIcon = (capability: AIServiceCapability) => {
@@ -288,17 +288,14 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
               ></textarea>
             </div> */}
             
-            {/* <div>
+            <div>
               <label className="block mb-2 text-sm font-medium text-gray-700">
                 Capabilities
               </label>
               <div className="space-y-2">
                 {[
                   {capability: AIServiceCapability.TextCompletion, label: 'Text Completion'},
-                  {capability: AIServiceCapability.Reasoning, label: 'Reasoning'},
-                  {capability: AIServiceCapability.VisionAnalysis, label: 'Vision'},
-                  {capability: AIServiceCapability.ToolUsage, label: 'Tool Usage'},
-                  {capability: AIServiceCapability.Embedding, label: 'Embedding'}
+                  {capability: AIServiceCapability.ImageGeneration, label: 'Image Generation'},
                 ].map(({capability, label}) => (
                   <div key={capability} className="flex items-center">
                     <input
@@ -317,7 +314,7 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
                   </div>
                 ))}
               </div>
-            </div> */}
+            </div>
           </div>
           
           <div className="flex justify-end mt-6 space-x-2">
diff --git a/src/services/providers/custom-service.ts b/src/services/providers/custom-service.ts
index a7569b7..471c653 100644
--- a/src/services/providers/custom-service.ts
+++ b/src/services/providers/custom-service.ts
@@ -143,13 +143,29 @@ export class CustomService implements AiServiceProvider {
    */
   public async getImageGeneration(
     prompt: string,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     options: {
       size?: `${number}x${number}`;
+      aspectRatio?: `${number}:${number}`;
       style?: string;
       quality?: string;
-    } = {}
-  ): Promise<string[]> {
-    throw new Error('Not implemented');
+    }
+  ): Promise<string[] | Uint8Array<ArrayBufferLike>[]> {
+
+    const imageModel = this.openAIProvider.imageModel('dall-e-3');
+
+    const result = await imageModel.doGenerate({
+      prompt: prompt,
+      n: 1,
+      size: options.size || '1024x1024',
+      aspectRatio: options.aspectRatio || '1:1',
+      seed: 42,
+      providerOptions: {
+        "openai": {
+          "style": options.style || 'vivid'
+        }
+      }
+    });
+
+    return result.images;
   }
 } 
\ No newline at end of file
diff --git a/src/services/settings-service.ts b/src/services/settings-service.ts
index 2d20e53..e3495b6 100644
--- a/src/services/settings-service.ts
+++ b/src/services/settings-service.ts
@@ -9,31 +9,31 @@ import { v4 as uuidv4 } from 'uuid';
  */
 const DEFAULT_SETTINGS: UserSettings = {
   providers: {
-    ['TensorBlock']: {
-      providerId: 'TensorBlock',
-      providerName: 'TensorBlock',
-      apiKey: '',
-      baseUrl: 'http://54.177.123.202:8000/v1',
-      customProvider: false,
-      models:[
-        {
-          modelName: 'GPT-4o',
-          modelId: 'gpt-4o',
-          modelCategory: 'GPT 4',
-          modelDescription: 'GPT-4o is the latest and most powerful model from OpenAI.',
-          modelCapabilities: [AIServiceCapability.TextCompletion, AIServiceCapability.WebSearch],
-          modelRefUUID: uuidv4(),
-        },
-        {
-          modelName: 'DALL-E 3',
-          modelId: 'dall-e-3',
-          modelCategory: 'Image Generation',
-          modelDescription: 'DALL-E 3 is OpenAI\'s advanced image generation model.',
-          modelCapabilities: [AIServiceCapability.ImageGeneration],
-          modelRefUUID: uuidv4(),
-        },
-      ]
-    },
+    // ['TensorBlock']: {
+    //   providerId: 'TensorBlock',
+    //   providerName: 'TensorBlock',
+    //   apiKey: '',
+    //   baseUrl: 'http://54.177.123.202:8000/v1',
+    //   customProvider: false,
+    //   models:[
+    //     {
+    //       modelName: 'GPT-4o',
+    //       modelId: 'gpt-4o',
+    //       modelCategory: 'GPT 4',
+    //       modelDescription: 'GPT-4o is the latest and most powerful model from OpenAI.',
+    //       modelCapabilities: [AIServiceCapability.TextCompletion, AIServiceCapability.WebSearch],
+    //       modelRefUUID: uuidv4(),
+    //     },
+    //     {
+    //       modelName: 'DALL-E 3',
+    //       modelId: 'dall-e-3',
+    //       modelCategory: 'Image Generation',
+    //       modelDescription: 'DALL-E 3 is OpenAI\'s advanced image generation model.',
+    //       modelCapabilities: [AIServiceCapability.ImageGeneration],
+    //       modelRefUUID: uuidv4(),
+    //     },
+    //   ]
+    // },
     ['OpenAI']: {
       providerId: 'OpenAI',
       providerName: 'OpenAI',
@@ -348,6 +348,10 @@ export class SettingsService {
           });
         }
       }
+      else if(provider === 'TensorBlock'){
+        // Remove Default TensorBlock provider
+        delete this.settings.providers[provider];
+      }
     }
   }
 

From 9c74b4ae623d198023cc67bd46481bf301094678 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sat, 17 May 2025 00:21:51 +0800
Subject: [PATCH 23/27] Fix: Add custom image generation capabilities edit

---
 src/components/pages/ImageGenerationPage.tsx  |   2 +
 src/services/ai-service.ts                    | 122 ++++++++++++------
 src/services/core/ai-service-provider.ts      |   2 +-
 src/services/providers/anthropic-service.ts   |  14 +-
 .../providers/common-provider-service.ts      |  14 +-
 src/services/providers/custom-service.ts      |  24 ++--
 src/services/providers/fireworks-service.ts   |  19 ++-
 src/services/providers/forge-service.ts       |  19 ++-
 src/services/providers/gemini-service.ts      |  17 ++-
 src/services/providers/openai-service.ts      |  19 ++-
 src/services/providers/openrouter-service.ts  |  17 ++-
 src/services/providers/together-service.ts    |  19 ++-
 12 files changed, 198 insertions(+), 90 deletions(-)

diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
index 687196f..0d54207 100644
--- a/src/components/pages/ImageGenerationPage.tsx
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -12,6 +12,8 @@ import { ImageGenerationManager, ImageGenerationStatus, ImageGenerationHandler }
 import { DatabaseIntegrationService } from "../../services/database-integration";
 import { ImageGenerationResult } from "../../types/image";
 import ImageGenerateHistoryItem from "../image/ImageGenerateHistoryItem";
+import { AiServiceProvider } from "../../types/ai-service";
+import { AiServiceCapability } from "../../types/ai-service";
 
 export const ImageGenerationPage = () => {
   const { t } = useTranslation();
diff --git a/src/services/ai-service.ts b/src/services/ai-service.ts
index df2e2d5..246f44d 100644
--- a/src/services/ai-service.ts
+++ b/src/services/ai-service.ts
@@ -4,6 +4,7 @@ import { Message } from '../types/chat';
 import { StreamControlHandler } from './streaming-control';
 import { SETTINGS_CHANGE_EVENT, SettingsService } from './settings-service';
 import { MCPService } from './mcp-service';
+import { AIServiceCapability } from '../types/capabilities';
 
 export interface ModelOption {
   id: string;
@@ -35,7 +36,7 @@ export class AIService {
   private state: AIState = {
     status: 'idle',
     error: null,
-    isCachingModels: false
+    isCachingModels: false,
   };
   private listeners: Set<() => void> = new Set();
   private modelCache: Map<string, ModelOption[]> = new Map();
@@ -68,11 +69,17 @@ export class AIService {
     for (const providerID of Object.keys(settings.providers)) {
       const providerSettings = settings.providers[providerID];
 
-      if(this.providers.has(providerID)) {
+      if (this.providers.has(providerID)) {
         this.providers.delete(providerID);
-        this.providers.set(providerID, ProviderFactory.getNewProvider(providerID));
-      }
-      else if (providerSettings && providerSettings.apiKey && providerSettings.apiKey.length > 0) {
+        this.providers.set(
+          providerID,
+          ProviderFactory.getNewProvider(providerID)
+        );
+      } else if (
+        providerSettings &&
+        providerSettings.apiKey &&
+        providerSettings.apiKey.length > 0
+      ) {
         const providerInstance = ProviderFactory.getNewProvider(providerID);
         if (providerInstance) {
           this.providers.set(providerID, providerInstance);
@@ -90,7 +97,7 @@ export class AIService {
       // Refresh models when settings change
       this.refreshModels();
     };
-    
+
     window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
   }
 
@@ -108,7 +115,7 @@ export class AIService {
    * Notify all listeners of state changes
    */
   private notifyListeners(): void {
-    this.listeners.forEach(listener => listener());
+    this.listeners.forEach((listener) => listener());
   }
 
   /**
@@ -125,7 +132,7 @@ export class AIService {
   private handleSuccess(): void {
     this.setState({
       status: 'success',
-      error: null
+      error: null,
     });
   }
 
@@ -136,7 +143,7 @@ export class AIService {
     console.error('AI request error:', error);
     this.setState({
       status: 'error',
-      error
+      error,
     });
   }
 
@@ -154,14 +161,14 @@ export class AIService {
     if (this.providers.has(name)) {
       return this.providers.get(name);
     }
-    
+
     // If provider not in cache, try to create it
     const provider = ProviderFactory.getNewProvider(name);
     if (provider) {
       this.providers.set(name, provider);
       return provider;
     }
-    
+
     return undefined;
   }
 
@@ -172,11 +179,26 @@ export class AIService {
     return Array.from(this.providers.values());
   }
 
+  /**
+   * Get all providers that support image generation
+   */
+  public getImageGenerationProviders(): AiServiceProvider[] {
+    const providers = this.getAllProviders();
+    return providers.filter((provider) => {
+      // Check if the provider has any models with image generation capability
+      const models = provider.availableModels || [];
+      return models.some((model) => {
+        const capabilities = provider.getModelCapabilities(model.modelId);
+        return capabilities.includes(AIServiceCapability.ImageGeneration);
+      });
+    });
+  }
+
   /**
    * Get a streaming chat completion from the AI
    */
   public async getChatCompletion(
-    messages: Message[], 
+    messages: Message[],
     options: CompletionOptions,
     streamController: StreamControlHandler
   ): Promise<Message | null> {
@@ -185,18 +207,25 @@ export class AIService {
       const providerName = options.provider;
       const modelName = options.model;
       const useStreaming = options.stream;
-      
+
       // Get provider instance
       const provider = this.getProvider(providerName);
 
-      console.log('Provider: ', providerName, ' Model: ', modelName, ' Use streaming: ', useStreaming);
-      
+      console.log(
+        'Provider: ',
+        providerName,
+        ' Model: ',
+        modelName,
+        ' Use streaming: ',
+        useStreaming
+      );
+
       if (!provider) {
         throw new Error(`Provider ${providerName} not available`);
       }
-      
+
       const result = await provider.getChatCompletion(
-        messages, 
+        messages,
         {
           model: modelName,
           provider: providerName,
@@ -212,7 +241,6 @@ export class AIService {
         },
         streamController
       );
-      
 
       return result;
     } catch (e) {
@@ -221,8 +249,11 @@ export class AIService {
         this.handleSuccess();
         return null;
       }
-      
-      const error = e instanceof Error ? e : new Error('Unknown error during streaming chat completion');
+
+      const error =
+        e instanceof Error
+          ? e
+          : new Error('Unknown error during streaming chat completion');
       this.handleError(error);
       return null;
     }
@@ -244,20 +275,20 @@ export class AIService {
     throw new Error('Not implemented');
 
     // this.startRequest();
-    
+
     // try {
     //   const provider = this.getImageGenerationProvider();
-      
+
     //   if (!provider) {
     //     throw new Error('No image generation provider available');
     //   }
-      
+
     //   if (!provider.generateImage) {
     //     throw new Error(`Provider ${provider.name} does not support image generation`);
     //   }
-      
+
     //   const result = await provider.generateImage(prompt, options);
-      
+
     //   this.handleSuccess();
     //   return result;
     // } catch (e) {
@@ -317,62 +348,67 @@ export class AIService {
     const cacheKey = 'all_providers';
     const cachedTime = this.lastFetchTime.get(cacheKey) || 0;
     const now = Date.now();
-    
+
     // Return cached models if they're still valid
     if (this.modelCache.has(cacheKey) && now - cachedTime < this.CACHE_TTL) {
       return this.modelCache.get(cacheKey) || [];
     }
-    
+
     // Otherwise, collect models from all providers
     const allModels: ModelOption[] = [];
     const providerPromises = [];
-    
+
     for (const provider of this.getAllProviders()) {
       providerPromises.push(this.getModelsForProvider(provider.id));
     }
-    
+
     const results = await Promise.all(providerPromises);
-    
+
     // Flatten results and filter out duplicates
-    results.forEach(models => {
+    results.forEach((models) => {
       allModels.push(...models);
     });
-    
+
     // Cache and return results
     this.modelCache.set(cacheKey, allModels);
     this.lastFetchTime.set(cacheKey, now);
-    
+
     return allModels;
   }
 
   /**
    * Get models for a specific provider
    */
-  public async getModelsForProvider(providerName: string): Promise<ModelOption[]> {
+  public async getModelsForProvider(
+    providerName: string
+  ): Promise<ModelOption[]> {
     // Check if we already have a cached result
     const cachedTime = this.lastFetchTime.get(providerName) || 0;
     const now = Date.now();
-    
+
     // Return cached models if they're still valid
-    if (this.modelCache.has(providerName) && now - cachedTime < this.CACHE_TTL) {
+    if (
+      this.modelCache.has(providerName) &&
+      now - cachedTime < this.CACHE_TTL
+    ) {
       return this.modelCache.get(providerName) || [];
     }
-    
+
     // Get provider instance
     const provider = this.getProvider(providerName);
     if (!provider) {
       console.warn(`Provider ${providerName} not available`);
       return [];
     }
-    
+
     this.setState({ isCachingModels: true });
-    
+
     try {
       // Fetch models from provider
       const models = await provider.fetchAvailableModels();
-      
+
       // Convert to ModelOption format
-      const modelOptions: ModelOption[] = models.map(model => ({
+      const modelOptions: ModelOption[] = models.map((model) => ({
         id: model.modelId,
         name: model.modelName,
         provider: providerName,
@@ -381,7 +417,7 @@ export class AIService {
       // Cache results
       this.modelCache.set(providerName, modelOptions);
       this.lastFetchTime.set(providerName, now);
-      
+
       this.setState({ isCachingModels: false });
       return modelOptions;
     } catch (error) {
@@ -398,7 +434,7 @@ export class AIService {
     // Clear cache
     this.modelCache.clear();
     this.lastFetchTime.clear();
-    
+
     this.refreshProviders();
 
     // Re-fetch all models
diff --git a/src/services/core/ai-service-provider.ts b/src/services/core/ai-service-provider.ts
index 10b6b63..d8685ed 100644
--- a/src/services/core/ai-service-provider.ts
+++ b/src/services/core/ai-service-provider.ts
@@ -51,7 +51,7 @@ export interface AiServiceProvider {
   /**
    * Get the capabilities of a model with this provider
    */
-  getModelCapabilities(model: string): AIServiceCapability[];
+  getModelCapabilities(modelId: string): AIServiceCapability[];
 
   /**
    * Fetch available models from the provider API
diff --git a/src/services/providers/anthropic-service.ts b/src/services/providers/anthropic-service.ts
index 911dabb..6650631 100644
--- a/src/services/providers/anthropic-service.ts
+++ b/src/services/providers/anthropic-service.ts
@@ -76,10 +76,18 @@ export class AnthropicService implements AiServiceProvider {
   /**
    * Get the capabilities of a model with this provider
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getModelCapabilities(model: string): AIServiceCapability[] {
+  getModelCapabilities(modelId: string): AIServiceCapability[] {
+    // Get model data by modelId
+    const models = this.settingsService.getModels(this.name);
+    const modelData = models.find(x => x.modelId === modelId);
+    let hasImageGeneration = false;
+
+    if(modelData?.modelCapabilities.findIndex(x => x === AIServiceCapability.ImageGeneration) !== -1){
+      hasImageGeneration = true;
+    }
+
     return mapModelCapabilities(
-      false,
+      hasImageGeneration,
       false,
       false,
       false,
diff --git a/src/services/providers/common-provider-service.ts b/src/services/providers/common-provider-service.ts
index 0d238d7..4802439 100644
--- a/src/services/providers/common-provider-service.ts
+++ b/src/services/providers/common-provider-service.ts
@@ -104,10 +104,18 @@ export class CommonProviderHelper implements AiServiceProvider {
   /**
    * Get the capabilities of a model with this provider
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getModelCapabilities(model: string): AIServiceCapability[] {
+  getModelCapabilities(modelId: string): AIServiceCapability[] {
+    // Get model data by modelId
+    const models = this.settingsService.getModels(this.providerID);
+    const modelData = models.find(x => x.modelId === modelId);
+    let hasImageGeneration = false;
+
+    if(modelData?.modelCapabilities.findIndex(x => x === AIServiceCapability.ImageGeneration) !== -1){
+      hasImageGeneration = true;
+    }
+
     return mapModelCapabilities(
-      false,
+      hasImageGeneration,
       false,
       false,
       false,
diff --git a/src/services/providers/custom-service.ts b/src/services/providers/custom-service.ts
index 471c653..8eb743d 100644
--- a/src/services/providers/custom-service.ts
+++ b/src/services/providers/custom-service.ts
@@ -13,6 +13,7 @@ import { CommonProviderHelper } from './common-provider-service';
  */
 export class CustomService implements AiServiceProvider {
 
+  private settingsService: SettingsService;
   private openAIProvider: OpenAIProvider;
   private apiModels: ModelSettings[] = [];
 
@@ -29,8 +30,8 @@ export class CustomService implements AiServiceProvider {
   constructor(providerID: string) {
     this.providerID = providerID;
     
-    const settingsService = SettingsService.getInstance();
-    const providerSettings = settingsService.getProviderSettings(this.providerID);
+    this.settingsService = SettingsService.getInstance();
+    const providerSettings = this.settingsService.getProviderSettings(this.providerID);
     const apiKey = providerSettings.apiKey;
     const baseURL = providerSettings.baseUrl;
 
@@ -49,8 +50,7 @@ export class CustomService implements AiServiceProvider {
    * Get the name of the service provider
    */
   get name(): string {
-    const settingsService = SettingsService.getInstance();
-    const providerSettings = settingsService.getProviderSettings(this.providerID);
+    const providerSettings = this.settingsService.getProviderSettings(this.providerID);
     const error = new Error('Custom provider settings: ' + JSON.stringify(providerSettings));
     console.log(error);
     console.log('Provider Name: ', providerSettings.providerName);
@@ -75,8 +75,7 @@ export class CustomService implements AiServiceProvider {
    * Fetch the list of available models from Forge
    */
   public async fetchAvailableModels(): Promise<ModelSettings[]> {
-    const settingsService = SettingsService.getInstance();
-    const models = settingsService.getModels(this.providerID);
+    const models = this.settingsService.getModels(this.providerID);
 
     this.apiModels = models;
 
@@ -87,9 +86,18 @@ export class CustomService implements AiServiceProvider {
    * Get the capabilities of a model with this provider
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getModelCapabilities(model: string): AIServiceCapability[] {
+  getModelCapabilities(modelId: string): AIServiceCapability[] {
+    // Get model data by modelId
+    const models = this.settingsService.getModels(this.providerID);
+    const modelData = models.find(x => x.modelId === modelId);
+    let hasImageGeneration = false;
+
+    if(modelData?.modelCapabilities.findIndex(x => x === AIServiceCapability.ImageGeneration) !== -1){
+      hasImageGeneration = true;
+    }
+    
     return mapModelCapabilities(
-      false,
+      hasImageGeneration,
       false,
       false,
       false,
diff --git a/src/services/providers/fireworks-service.ts b/src/services/providers/fireworks-service.ts
index 46740f6..3206809 100644
--- a/src/services/providers/fireworks-service.ts
+++ b/src/services/providers/fireworks-service.ts
@@ -15,6 +15,7 @@ export const FIREWORKS_PROVIDER_NAME = 'Fireworks.ai';
  */
 export class FireworksService implements AiServiceProvider {
 
+  private settingsService: SettingsService;
   private commonProviderHelper: CommonProviderHelper;
   private apiModels: ModelSettings[] = [];
 
@@ -22,6 +23,7 @@ export class FireworksService implements AiServiceProvider {
    * Create a new OpenAI service provider
    */
   constructor() {
+    this.settingsService = SettingsService.getInstance();
     this.commonProviderHelper = new CommonProviderHelper(FIREWORKS_PROVIDER_NAME, this.createClient);
   }
 
@@ -55,8 +57,7 @@ export class FireworksService implements AiServiceProvider {
    * Fetch the list of available models from OpenAI
    */
   public async fetchAvailableModels(): Promise<ModelSettings[]> {
-    const settingsService = SettingsService.getInstance();
-    const models = settingsService.getModels(FIREWORKS_PROVIDER_NAME);
+    const models = this.settingsService.getModels(FIREWORKS_PROVIDER_NAME);
 
     this.apiModels = models;
 
@@ -66,10 +67,18 @@ export class FireworksService implements AiServiceProvider {
   /**
    * Get the capabilities of a model with this provider
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getModelCapabilities(model: string): AIServiceCapability[] {
+  getModelCapabilities(modelId: string): AIServiceCapability[] {
+    // Get model data by modelId
+    const models = this.settingsService.getModels(this.name);
+    const modelData = models.find(x => x.modelId === modelId);
+    let hasImageGeneration = false;
+
+    if(modelData?.modelCapabilities.findIndex(x => x === AIServiceCapability.ImageGeneration) !== -1){
+      hasImageGeneration = true;
+    }
+
     return mapModelCapabilities(
-      false,
+      hasImageGeneration,
       false,
       false,
       false,
diff --git a/src/services/providers/forge-service.ts b/src/services/providers/forge-service.ts
index c83496a..bdb5de7 100644
--- a/src/services/providers/forge-service.ts
+++ b/src/services/providers/forge-service.ts
@@ -17,11 +17,13 @@ export class ForgeService implements AiServiceProvider {
 
   private commonProviderHelper: CommonProviderHelper;
   private apiModels: ModelSettings[] = [];
+  private settingsService: SettingsService;
 
   /**
    * Create a new Forge service provider
    */
   constructor() {
+    this.settingsService = SettingsService.getInstance();
     this.commonProviderHelper = new CommonProviderHelper(FORGE_PROVIDER_NAME, this.createClient);
   }
 
@@ -59,8 +61,7 @@ export class ForgeService implements AiServiceProvider {
    * Fetch the list of available models from Forge
    */
   public async fetchAvailableModels(): Promise<ModelSettings[]> {
-    const settingsService = SettingsService.getInstance();
-    const models = settingsService.getModels(FORGE_PROVIDER_NAME);
+    const models = this.settingsService.getModels(FORGE_PROVIDER_NAME);
 
     this.apiModels = models;
 
@@ -70,10 +71,18 @@ export class ForgeService implements AiServiceProvider {
   /**
    * Get the capabilities of a model with this provider
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getModelCapabilities(model: string): AIServiceCapability[] {
+  getModelCapabilities(modelId: string): AIServiceCapability[] {
+    // Get model data by modelId
+    const models = this.settingsService.getModels(this.name);
+    const modelData = models.find(x => x.modelId === modelId);
+    let hasImageGeneration = false;
+
+    if(modelData?.modelCapabilities.findIndex(x => x === AIServiceCapability.ImageGeneration) !== -1){
+      hasImageGeneration = true;
+    }
+
     return mapModelCapabilities(
-      false,
+      hasImageGeneration,
       false,
       false,
       false,
diff --git a/src/services/providers/gemini-service.ts b/src/services/providers/gemini-service.ts
index 7fe2050..5579a79 100644
--- a/src/services/providers/gemini-service.ts
+++ b/src/services/providers/gemini-service.ts
@@ -60,8 +60,7 @@ export class GeminiService implements AiServiceProvider {
    * Fetch the list of available models from OpenAI
    */
   public async fetchAvailableModels(): Promise<ModelSettings[]> {
-    const settingsService = SettingsService.getInstance();
-    const models = settingsService.getModels(GEMINI_PROVIDER_NAME);
+    const models = this.settingsService.getModels(GEMINI_PROVIDER_NAME);
 
     this.apiModels = models;
 
@@ -71,10 +70,18 @@ export class GeminiService implements AiServiceProvider {
   /**
    * Get the capabilities of a model with this provider
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getModelCapabilities(model: string): AIServiceCapability[] {
+  getModelCapabilities(modelId: string): AIServiceCapability[] {
+    // Get model data by modelId
+    const models = this.settingsService.getModels(this.name);
+    const modelData = models.find(x => x.modelId === modelId);
+    let hasImageGeneration = false;
+
+    if(modelData?.modelCapabilities.findIndex(x => x === AIServiceCapability.ImageGeneration) !== -1){
+      hasImageGeneration = true;
+    }
+
     return mapModelCapabilities(
-      false,
+      hasImageGeneration,
       false,
       false,
       false,
diff --git a/src/services/providers/openai-service.ts b/src/services/providers/openai-service.ts
index 2045ceb..027860d 100644
--- a/src/services/providers/openai-service.ts
+++ b/src/services/providers/openai-service.ts
@@ -17,11 +17,13 @@ export class OpenAIService implements AiServiceProvider {
 
   private commonProviderHelper: CommonProviderHelper;
   private apiModels: ModelSettings[] = [];
+  private settingsService: SettingsService;
 
   /**
    * Create a new OpenAI service provider
    */
   constructor() {
+    this.settingsService = SettingsService.getInstance();
     this.commonProviderHelper = new CommonProviderHelper(OPENAI_PROVIDER_NAME, this.createClient);
   }
 
@@ -58,8 +60,7 @@ export class OpenAIService implements AiServiceProvider {
    * Fetch the list of available models from OpenAI
    */
   public async fetchAvailableModels(): Promise<ModelSettings[]> {
-    const settingsService = SettingsService.getInstance();
-    const models = settingsService.getModels(OPENAI_PROVIDER_NAME);
+    const models = this.settingsService.getModels(OPENAI_PROVIDER_NAME);
 
     this.apiModels = models;
 
@@ -70,15 +71,19 @@ export class OpenAIService implements AiServiceProvider {
    * Get the capabilities of a model with this provider
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getModelCapabilities(model: string): AIServiceCapability[] {
-    // Add image generation capability for DALL-E 3
-    if (model === 'dall-e-3') {
-      return [AIServiceCapability.ImageGeneration];
+  getModelCapabilities(modelId: string): AIServiceCapability[] {
+    // Get model data by modelId
+    const models = this.settingsService.getModels(this.name);
+    const modelData = models.find(x => x.modelId === modelId);
+    let hasImageGeneration = false;
+
+    if(modelData?.modelCapabilities.findIndex(x => x === AIServiceCapability.ImageGeneration) !== -1){
+      hasImageGeneration = true;
     }
     
     // Default capabilities for chat models
     return mapModelCapabilities(
-      false,
+      hasImageGeneration,
       false,
       false,
       false,
diff --git a/src/services/providers/openrouter-service.ts b/src/services/providers/openrouter-service.ts
index eba39ca..22df980 100644
--- a/src/services/providers/openrouter-service.ts
+++ b/src/services/providers/openrouter-service.ts
@@ -58,8 +58,7 @@ export class OpenRouterService implements AiServiceProvider {
    * Fetch the list of available models from OpenAI
    */
   public async fetchAvailableModels(): Promise<ModelSettings[]> {
-    const settingsService = SettingsService.getInstance();
-    const models = settingsService.getModels(OPENROUTER_PROVIDER_NAME);
+    const models = this.settingsService.getModels(OPENROUTER_PROVIDER_NAME);
 
     this.apiModels = models;
 
@@ -69,10 +68,18 @@ export class OpenRouterService implements AiServiceProvider {
   /**
    * Get the capabilities of a model with this provider
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getModelCapabilities(model: string): AIServiceCapability[] {
+  getModelCapabilities(modelId: string): AIServiceCapability[] {
+    // Get model data by modelId
+    const models = this.settingsService.getModels(this.name);
+    const modelData = models.find(x => x.modelId === modelId);
+    let hasImageGeneration = false;
+
+    if(modelData?.modelCapabilities.findIndex(x => x === AIServiceCapability.ImageGeneration) !== -1){
+      hasImageGeneration = true;
+    }
+
     return mapModelCapabilities(
-      false,
+      hasImageGeneration,
       false,
       false,
       false,
diff --git a/src/services/providers/together-service.ts b/src/services/providers/together-service.ts
index 84a00b8..8fcb463 100644
--- a/src/services/providers/together-service.ts
+++ b/src/services/providers/together-service.ts
@@ -17,11 +17,13 @@ export class TogetherService implements AiServiceProvider {
 
   private commonProviderHelper: CommonProviderHelper;
   private apiModels: ModelSettings[] = [];
+  private settingsService: SettingsService;
 
   /**
    * Create a new OpenAI service provider
    */
   constructor() {
+    this.settingsService = SettingsService.getInstance();
     this.commonProviderHelper = new CommonProviderHelper(TOGETHER_PROVIDER_NAME, this.createClient);
   }
 
@@ -56,8 +58,7 @@ export class TogetherService implements AiServiceProvider {
    * Fetch the list of available models from OpenAI
    */
   public async fetchAvailableModels(): Promise<ModelSettings[]> {
-    const settingsService = SettingsService.getInstance();
-    const models = settingsService.getModels(TOGETHER_PROVIDER_NAME);
+    const models = this.settingsService.getModels(TOGETHER_PROVIDER_NAME);
 
     this.apiModels = models;
 
@@ -67,10 +68,18 @@ export class TogetherService implements AiServiceProvider {
   /**
    * Get the capabilities of a model with this provider
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getModelCapabilities(model: string): AIServiceCapability[] {
+  getModelCapabilities(modelId: string): AIServiceCapability[] {
+    // Get model data by modelId
+    const models = this.settingsService.getModels(this.name);
+    const modelData = models.find(x => x.modelId === modelId);
+    let hasImageGeneration = false;
+
+    if(modelData?.modelCapabilities.findIndex(x => x === AIServiceCapability.ImageGeneration) !== -1){
+      hasImageGeneration = true;
+    }
+
     return mapModelCapabilities(
-      false,
+      hasImageGeneration,
       false,
       false,
       false,

From 01bb14a7e7149a2d1eaa9a3c31349deb901f1cb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sat, 17 May 2025 00:49:53 +0800
Subject: [PATCH 24/27] Fix: Custom Provider Image Generation

---
 src/components/pages/ImageGenerationPage.tsx  | 105 ++++++++++++------
 src/services/providers/anthropic-service.ts   |   2 +
 .../providers/common-provider-service.ts      |   4 +-
 src/services/providers/custom-service.ts      |   8 +-
 src/services/providers/fireworks-service.ts   |   1 +
 src/services/providers/forge-service.ts       |   1 +
 src/services/providers/gemini-service.ts      |   1 +
 src/services/providers/openai-service.ts      |   1 +
 src/services/providers/openrouter-service.ts  |   1 +
 src/services/providers/together-service.ts    |   1 +
 src/types/capabilities.ts                     |   2 +-
 11 files changed, 87 insertions(+), 40 deletions(-)

diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
index 0d54207..8c41add 100644
--- a/src/components/pages/ImageGenerationPage.tsx
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -7,13 +7,11 @@ import { ChevronDown, RefreshCw, Settings, Zap } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { AIService } from "../../services/ai-service";
 import { OPENAI_PROVIDER_NAME } from "../../services/providers/openai-service";
-import { FORGE_PROVIDER_NAME as TENSORBLOCK_PROVIDER_NAME } from "../../services/providers/forge-service";
 import { ImageGenerationManager, ImageGenerationStatus, ImageGenerationHandler } from "../../services/image-generation-handler";
 import { DatabaseIntegrationService } from "../../services/database-integration";
 import { ImageGenerationResult } from "../../types/image";
 import ImageGenerateHistoryItem from "../image/ImageGenerateHistoryItem";
-import { AiServiceProvider } from "../../types/ai-service";
-import { AiServiceCapability } from "../../types/ai-service";
+
 
 export const ImageGenerationPage = () => {
   const { t } = useTranslation();
@@ -33,6 +31,8 @@ export const ImageGenerationPage = () => {
   const [isLoadingHistory, setIsLoadingHistory] = useState(true);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [selectedProvider, setSelectedProvider] = useState(OPENAI_PROVIDER_NAME);
+  const [selectedModel, setSelectedModel] = useState("dall-e-3");
+  const [availableProviders, setAvailableProviders] = useState<{id: string, name: string}[]>([]);
   
   const settingsButtonRef = useRef<HTMLButtonElement>(null);
   const settingsPopupRef = useRef<HTMLDivElement>(null);
@@ -62,6 +62,31 @@ export const ImageGenerationPage = () => {
     }
   }, []);
 
+  // Load available image generation providers
+  const loadImageGenerationProviders = useCallback(async () => {
+    const aiService = AIService.getInstance();
+    const providers = aiService.getImageGenerationProviders();
+    
+    const providerOptions = providers.map(provider => ({
+      id: provider.id,
+      name: provider.name || provider.id
+    }));
+    
+    setAvailableProviders(providerOptions);
+    
+    // Set default provider if none is selected or current one isn't available
+    if (!selectedProvider || !providerOptions.some(p => p.id === selectedProvider)) {
+      if (providerOptions.length > 0) {
+        setSelectedProvider(providerOptions[0].id);
+      }
+    }
+  }, [selectedProvider]);
+
+  const handleGetProviderNameById = (id: string) => {
+    const provider = availableProviders.find(p => p.id === id);
+    return provider ? provider.name : id;
+  }
+
   // Initialize image generation manager and load settings
   useEffect(() => {
     const initialize = async () => {
@@ -88,6 +113,12 @@ export const ImageGenerationPage = () => {
         if (settings.imageGenerationProvider) {
           setSelectedProvider(settings.imageGenerationProvider);
         }
+        if (settings.imageGenerationModel) {
+          setSelectedModel(settings.imageGenerationModel);
+        }
+        
+        // Load available providers
+        await loadImageGenerationProviders();
         
         // Load image generation history from database
         await refreshImageHistory();
@@ -100,7 +131,19 @@ export const ImageGenerationPage = () => {
     };
     
     initialize();
-  }, [refreshImageHistory]);
+  }, [refreshImageHistory, loadImageGenerationProviders]);
+
+  // Listen for settings changes
+  useEffect(() => {
+    const handleSettingsChange = () => {
+      loadImageGenerationProviders();
+    };
+
+    window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+    return () => {
+      window.removeEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
+    };
+  }, [loadImageGenerationProviders]);
 
   // Check if API key is available
   useEffect(() => {
@@ -183,14 +226,9 @@ export const ImageGenerationPage = () => {
     setError(null);
 
     try {
-      let providerService;
-      
       // Get the appropriate service based on selected provider
-      if (selectedProvider === TENSORBLOCK_PROVIDER_NAME) {
-        providerService = AIService.getInstance().getProvider(TENSORBLOCK_PROVIDER_NAME);
-      } else {
-        providerService = AIService.getInstance().getProvider(OPENAI_PROVIDER_NAME);
-      }
+      const aiService = AIService.getInstance();
+      const providerService = aiService.getProvider(selectedProvider);
       
       if (!providerService) {
         throw new Error(`${selectedProvider} service not available`);
@@ -201,10 +239,10 @@ export const ImageGenerationPage = () => {
       const handler = imageManager.createHandler({
         prompt: prompt,
         seed: randomSeed,
-        number: imageCount,
+        number: 1,
         aspectRatio: aspectRatio,
         provider: selectedProvider,
-        model: "dall-e-3",
+        model: selectedModel,
       });
       
       // Set status to generating
@@ -480,7 +518,7 @@ export const ImageGenerationPage = () => {
             </div>
 
             <div className="mb-4">
-              <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
+              <label className="flex items-center mb-2 text-sm font-medium text-gray-700">
                 {t("imageGeneration.randomSeed")}
                 <div
                   className="flex items-center justify-center w-4 h-4 ml-1 text-xs text-gray-500 bg-gray-200 rounded-full cursor-help"
@@ -507,7 +545,7 @@ export const ImageGenerationPage = () => {
             </div>
 
             <div className="mb-4">
-              <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
+              <label className="flex items-center mb-2 text-sm font-medium text-gray-700">
                 {t("imageGeneration.provider")}
               </label>
               <div className="relative">
@@ -515,7 +553,7 @@ export const ImageGenerationPage = () => {
                   className="flex items-center justify-between w-full p-3 text-left provider-dropdown-toggle input-box"
                   onClick={toggleProviderDropdown}
                 >
-                  <span>{selectedProvider}</span>
+                  <span>{handleGetProviderNameById(selectedProvider)}</span>
                   <ChevronDown size={18} className="text-gray-500" />
                 </button>
                 
@@ -525,22 +563,23 @@ export const ImageGenerationPage = () => {
                     className="absolute z-20 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg"
                   >
                     <ul className="py-1">
-                      <li 
-                        className={`px-3 py-2 cursor-pointer hover:bg-gray-100 ${
-                          selectedProvider === OPENAI_PROVIDER_NAME ? 'bg-gray-50 font-medium' : ''
-                        }`}
-                        onClick={() => handleProviderSelect(OPENAI_PROVIDER_NAME)}
-                      >
-                        OpenAI
-                      </li>
-                      <li 
-                        className={`px-3 py-2 cursor-pointer hover:bg-gray-100 ${
-                          selectedProvider === TENSORBLOCK_PROVIDER_NAME ? 'bg-gray-50 font-medium' : ''
-                        }`}
-                        onClick={() => handleProviderSelect(TENSORBLOCK_PROVIDER_NAME)}
-                      >
-                        TensorBlock
-                      </li>
+                      {availableProviders.length > 0 ? (
+                        availableProviders.map(provider => (
+                          <li 
+                            key={provider.id}
+                            className={`px-3 py-2 cursor-pointer hover:bg-gray-100 ${
+                              selectedProvider === provider.id ? 'bg-gray-50 font-medium' : ''
+                            }`}
+                            onClick={() => handleProviderSelect(provider.id)}
+                          >
+                            {provider.name}
+                          </li>
+                        ))
+                      ) : (
+                        <li className="px-3 py-2 text-gray-500">
+                          {t("chat.noImageProvidersAvailable")}
+                        </li>
+                      )}
                     </ul>
                   </div>
                 )}
@@ -548,7 +587,7 @@ export const ImageGenerationPage = () => {
             </div>
 
             <div className="mb-4">
-              <label className="flex items-center block mb-2 text-sm font-medium text-gray-700">
+              <label className="flex items-center mb-2 text-sm font-medium text-gray-700">
                 {t("imageGeneration.model")}
               </label>
               <div className="relative">
diff --git a/src/services/providers/anthropic-service.ts b/src/services/providers/anthropic-service.ts
index 6650631..cee15ea 100644
--- a/src/services/providers/anthropic-service.ts
+++ b/src/services/providers/anthropic-service.ts
@@ -29,6 +29,8 @@ export class AnthropicService implements AiServiceProvider {
     this.settingsService = SettingsService.getInstance();
     const providerSettings = this.settingsService.getProviderSettings(ANTHROPIC_PROVIDER_NAME);
     
+    this.apiModels = this.settingsService.getModels(ANTHROPIC_PROVIDER_NAME);
+
     this._apiKey = providerSettings.apiKey || '';
 
     this.anthropic = new Anthropic({
diff --git a/src/services/providers/common-provider-service.ts b/src/services/providers/common-provider-service.ts
index 4802439..57903d0 100644
--- a/src/services/providers/common-provider-service.ts
+++ b/src/services/providers/common-provider-service.ts
@@ -55,6 +55,8 @@ export class CommonProviderHelper implements AiServiceProvider {
     
     this._apiKey = providerSettings.apiKey || '';
     
+    this.apiModels = this.settingsService.getModels(providerName);
+
     this.ProviderInstance = this.createClient();
   }
 
@@ -106,7 +108,7 @@ export class CommonProviderHelper implements AiServiceProvider {
    */
   getModelCapabilities(modelId: string): AIServiceCapability[] {
     // Get model data by modelId
-    const models = this.settingsService.getModels(this.providerID);
+    const models = this.settingsService.getModels(this.providerName);
     const modelData = models.find(x => x.modelId === modelId);
     let hasImageGeneration = false;
 
diff --git a/src/services/providers/custom-service.ts b/src/services/providers/custom-service.ts
index 8eb743d..484f57b 100644
--- a/src/services/providers/custom-service.ts
+++ b/src/services/providers/custom-service.ts
@@ -38,6 +38,8 @@ export class CustomService implements AiServiceProvider {
     this.baseURL = `${baseURL}/${this.apiVersion}`;
     this.apiKey = apiKey;
 
+    this.apiModels = this.settingsService.getModels(this.providerID);
+
     this.openAIProvider = createOpenAI({
       apiKey: this.apiKey,
       compatibility: 'compatible',
@@ -51,9 +53,6 @@ export class CustomService implements AiServiceProvider {
    */
   get name(): string {
     const providerSettings = this.settingsService.getProviderSettings(this.providerID);
-    const error = new Error('Custom provider settings: ' + JSON.stringify(providerSettings));
-    console.log(error);
-    console.log('Provider Name: ', providerSettings.providerName);
     return providerSettings.providerName;
   }
 
@@ -88,8 +87,7 @@ export class CustomService implements AiServiceProvider {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   getModelCapabilities(modelId: string): AIServiceCapability[] {
     // Get model data by modelId
-    const models = this.settingsService.getModels(this.providerID);
-    const modelData = models.find(x => x.modelId === modelId);
+    const modelData = this.apiModels.find(x => x.modelId === modelId);
     let hasImageGeneration = false;
 
     if(modelData?.modelCapabilities.findIndex(x => x === AIServiceCapability.ImageGeneration) !== -1){
diff --git a/src/services/providers/fireworks-service.ts b/src/services/providers/fireworks-service.ts
index 3206809..28d53d5 100644
--- a/src/services/providers/fireworks-service.ts
+++ b/src/services/providers/fireworks-service.ts
@@ -24,6 +24,7 @@ export class FireworksService implements AiServiceProvider {
    */
   constructor() {
     this.settingsService = SettingsService.getInstance();
+    this.apiModels = this.settingsService.getModels(FIREWORKS_PROVIDER_NAME);
     this.commonProviderHelper = new CommonProviderHelper(FIREWORKS_PROVIDER_NAME, this.createClient);
   }
 
diff --git a/src/services/providers/forge-service.ts b/src/services/providers/forge-service.ts
index bdb5de7..48bbfad 100644
--- a/src/services/providers/forge-service.ts
+++ b/src/services/providers/forge-service.ts
@@ -24,6 +24,7 @@ export class ForgeService implements AiServiceProvider {
    */
   constructor() {
     this.settingsService = SettingsService.getInstance();
+    this.apiModels = this.settingsService.getModels(FORGE_PROVIDER_NAME);
     this.commonProviderHelper = new CommonProviderHelper(FORGE_PROVIDER_NAME, this.createClient);
   }
 
diff --git a/src/services/providers/gemini-service.ts b/src/services/providers/gemini-service.ts
index 5579a79..9144076 100644
--- a/src/services/providers/gemini-service.ts
+++ b/src/services/providers/gemini-service.ts
@@ -26,6 +26,7 @@ export class GeminiService implements AiServiceProvider {
    */
   constructor() {
     this.settingsService = SettingsService.getInstance();
+    this.apiModels = this.settingsService.getModels(GEMINI_PROVIDER_NAME);
     const providerSettings = this.settingsService.getProviderSettings(GEMINI_PROVIDER_NAME);
     
     this._apiKey = providerSettings.apiKey || '';
diff --git a/src/services/providers/openai-service.ts b/src/services/providers/openai-service.ts
index 027860d..7a12b62 100644
--- a/src/services/providers/openai-service.ts
+++ b/src/services/providers/openai-service.ts
@@ -24,6 +24,7 @@ export class OpenAIService implements AiServiceProvider {
    */
   constructor() {
     this.settingsService = SettingsService.getInstance();
+    this.apiModels = this.settingsService.getModels(OPENAI_PROVIDER_NAME);
     this.commonProviderHelper = new CommonProviderHelper(OPENAI_PROVIDER_NAME, this.createClient);
   }
 
diff --git a/src/services/providers/openrouter-service.ts b/src/services/providers/openrouter-service.ts
index 22df980..f637654 100644
--- a/src/services/providers/openrouter-service.ts
+++ b/src/services/providers/openrouter-service.ts
@@ -25,6 +25,7 @@ export class OpenRouterService implements AiServiceProvider {
    */
   constructor() {
     this.settingsService = SettingsService.getInstance();
+    this.apiModels = this.settingsService.getModels(OPENROUTER_PROVIDER_NAME);
     const providerSettings = this.settingsService.getProviderSettings(OPENROUTER_PROVIDER_NAME);
     
     this._apiKey = providerSettings.apiKey || '';
diff --git a/src/services/providers/together-service.ts b/src/services/providers/together-service.ts
index 8fcb463..578b102 100644
--- a/src/services/providers/together-service.ts
+++ b/src/services/providers/together-service.ts
@@ -24,6 +24,7 @@ export class TogetherService implements AiServiceProvider {
    */
   constructor() {
     this.settingsService = SettingsService.getInstance();
+    this.apiModels = this.settingsService.getModels(TOGETHER_PROVIDER_NAME);
     this.commonProviderHelper = new CommonProviderHelper(TOGETHER_PROVIDER_NAME, this.createClient);
   }
 
diff --git a/src/types/capabilities.ts b/src/types/capabilities.ts
index 7f8f34a..8bfe60c 100644
--- a/src/types/capabilities.ts
+++ b/src/types/capabilities.ts
@@ -37,7 +37,7 @@ export const mapModelCapabilities = (
   ];
 
   if (supportsImages) {
-    capabilities.push(AIServiceCapability.VisionAnalysis);
+    capabilities.push(AIServiceCapability.ImageGeneration);
   }
 
   if (supportsAudio) {

From b908b775cc5454d235bdea36f16e7a938a754f74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sat, 17 May 2025 10:58:25 +0800
Subject: [PATCH 25/27] Fix: fix image generation method calling depth

---
 src/components/image/ImageGenerateHistoryItem.tsx | 8 +++++++-
 src/components/pages/ImageGenerationPage.tsx      | 3 ++-
 src/services/image-generation-handler.ts          | 2 ++
 src/types/image.ts                                | 3 ++-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/image/ImageGenerateHistoryItem.tsx b/src/components/image/ImageGenerateHistoryItem.tsx
index 24d0a4c..3e6edea 100644
--- a/src/components/image/ImageGenerateHistoryItem.tsx
+++ b/src/components/image/ImageGenerateHistoryItem.tsx
@@ -3,6 +3,7 @@ import { ImageGenerationResult } from '../../types/image';
 import { MessageContent } from '../../types/chat';
 import { Loader } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { AIService } from '../../services/ai-service';
 
 interface ImageGenerateHistoryItemProps {
   imageResult: ImageGenerationResult;
@@ -78,6 +79,11 @@ const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({
     );
   };
 
+  const getProviderName = (providerId: string, providerName: string) => {
+    const providerService = AIService.getInstance().getProvider(providerId);
+    return providerService?.name || providerName || providerId;
+  }
+
   return (
     <div className={`mb-6 overflow-hidden border rounded-lg shadow-sm image-result-item ${isGenerating ? 'border-primary-300' : ''}`}>
       <div className="image-result-container">
@@ -95,7 +101,7 @@ const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({
                   {imageResult.model}
                 </span>
                 <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
-                  {imageResult.provider}
+                  {getProviderName(imageResult.provider, imageResult.providerName)}
                 </span>
                 <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
                   {imageResult.aspectRatio}
diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
index 8c41add..459b91a 100644
--- a/src/components/pages/ImageGenerationPage.tsx
+++ b/src/components/pages/ImageGenerationPage.tsx
@@ -131,7 +131,7 @@ export const ImageGenerationPage = () => {
     };
     
     initialize();
-  }, [refreshImageHistory, loadImageGenerationProviders]);
+  }, [setSelectedProvider, setSelectedModel, refreshImageHistory, loadImageGenerationProviders]);
 
   // Listen for settings changes
   useEffect(() => {
@@ -242,6 +242,7 @@ export const ImageGenerationPage = () => {
         number: 1,
         aspectRatio: aspectRatio,
         provider: selectedProvider,
+        providerName: handleGetProviderNameById(selectedProvider),
         model: selectedModel,
       });
       
diff --git a/src/services/image-generation-handler.ts b/src/services/image-generation-handler.ts
index 06ded76..397c443 100644
--- a/src/services/image-generation-handler.ts
+++ b/src/services/image-generation-handler.ts
@@ -16,6 +16,7 @@ export interface ImageGenerationOptions {
   seed: string;
   aspectRatio: string;
   provider: string;
+  providerName: string;
   model: string;
   number: number;
 }
@@ -72,6 +73,7 @@ export class ImageGenerationHandler {
       status: this.status,
       aspectRatio: this.options.aspectRatio,
       provider: this.options.provider,
+      providerName: this.options.providerName,
       model: this.options.model,
       images: this.images,
       updatedAt: this.updatedAt
diff --git a/src/types/image.ts b/src/types/image.ts
index 51c52a0..ca65eb3 100644
--- a/src/types/image.ts
+++ b/src/types/image.ts
@@ -8,7 +8,8 @@ export interface ImageGenerationResult {
     number: number;
     status: string;
     aspectRatio: string;
-    provider: string;
+    provider: string; // provider id
+    providerName: string; // provider name
     model: string;
     images: MessageContent[];
     updatedAt: Date;

From c5a0495eb0693b114173c566e5d7b3efdef120f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sat, 17 May 2025 11:46:25 +0800
Subject: [PATCH 26/27] Fix: Hide MCP Server for now

---
 src/components/chat/ChatMessageArea.tsx | 60 +++++++++++++------------
 src/components/layout/Sidebar.tsx       |  8 ++--
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/components/chat/ChatMessageArea.tsx b/src/components/chat/ChatMessageArea.tsx
index f44f0b4..0e84431 100644
--- a/src/components/chat/ChatMessageArea.tsx
+++ b/src/components/chat/ChatMessageArea.tsx
@@ -1,7 +1,9 @@
 import React, { useState, FormEvent, useRef, useEffect } from 'react';
 import { Conversation, Message } from '../../types/chat';
 import { MCPServerSettings } from '../../types/settings';
-import { Send, Square, Copy, Pencil, Loader2, Globe, RefreshCw, Check, X, ServerCog } from 'lucide-react';
+import { Send, Square, Copy, Pencil, Loader2, Globe, RefreshCw, Check, X, 
+  // ServerCog 
+} from 'lucide-react';
 import MarkdownContent from './MarkdownContent';
 import MessageToolboxMenu, { ToolboxAction } from '../ui/MessageToolboxMenu';
 import { MessageHelper } from '../../services/message-helper';
@@ -13,7 +15,7 @@ import ProviderIcon from '../ui/ProviderIcon';
 import { useTranslation } from '../../hooks/useTranslation';
 import FileUploadButton from './FileUploadButton';
 import FileAttachmentDisplay from './FileAttachmentDisplay';
-import ImageGenerationButton from './ImageGenerationButton';
+// import ImageGenerationButton from './ImageGenerationButton';
 
 interface ChatMessageAreaProps {
   activeConversation: Conversation | null;
@@ -44,9 +46,9 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   isCurrentlyStreaming = false,
   selectedProvider,
   selectedModel,
-  mcpServers,
-  selectedMcpServers,
-  onToggleMcpServer,
+  // mcpServers,
+  // selectedMcpServers,
+  // onToggleMcpServer,
 }) => {
   const { t } = useTranslation();
   const [inputValue, setInput] = useState('');
@@ -61,9 +63,9 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   const [webSearchActive, setWebSearchActive] = useState(false);
   const [isWebSearchPreviewEnabled, setIsWebSearchPreviewEnabled] = useState(false);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-  const [mcpPopupOpen, setMcpPopupOpen] = useState(false);
-  const mcpButtonRef = useRef<HTMLButtonElement>(null);
-  const mcpPopupRef = useRef<HTMLDivElement>(null);
+  // const [mcpPopupOpen, setMcpPopupOpen] = useState(false);
+  // const mcpButtonRef = useRef<HTMLButtonElement>(null);
+  // const mcpPopupRef = useRef<HTMLDivElement>(null);
   
   // Scroll to bottom when messages change
   useEffect(() => {
@@ -291,23 +293,23 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   }
 
   // Add useEffect to handle click outside for MCP popup
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        mcpPopupRef.current && 
-        !mcpPopupRef.current.contains(event.target as Node) &&
-        mcpButtonRef.current && 
-        !mcpButtonRef.current.contains(event.target as Node)
-      ) {
-        setMcpPopupOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+  // useEffect(() => {
+  //   const handleClickOutside = (event: MouseEvent) => {
+  //     if (
+  //       mcpPopupRef.current && 
+  //       !mcpPopupRef.current.contains(event.target as Node) &&
+  //       mcpButtonRef.current && 
+  //       !mcpButtonRef.current.contains(event.target as Node)
+  //     ) {
+  //       setMcpPopupOpen(false);
+  //     }
+  //   };
+
+  //   document.addEventListener('mousedown', handleClickOutside);
+  //   return () => {
+  //     document.removeEventListener('mousedown', handleClickOutside);
+  //   };
+  // }, []);
 
   // If no active conversation is selected
   if (!activeConversation) {
@@ -566,7 +568,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
             )}
             
             {/* Image generation button */}
-            <ImageGenerationButton 
+            {/* <ImageGenerationButton 
               disabled={isLoading || isCurrentlyStreaming}
               onImageGenerate={(prompt, provider, model) => {
                 // Set special message for image generation
@@ -575,7 +577,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                 // Focus the input
                 inputRef.current?.focus();
               }}
-            />
+            /> */}
           </div>
 
           {/* Web search element */}
@@ -584,7 +586,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
           }
 
           {/* MCP Servers dropdown */}
-          {mcpServers && Object.keys(mcpServers).length > 0 && (
+          {/* {mcpServers && Object.keys(mcpServers).length > 0 && (
             <div className="relative">
               <button
                 type="button"
@@ -645,7 +647,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                 </div>
               )}
             </div>
-          )}
+          )} */}
 
           <span className={`flex-1 hidden text-xs text-center pt-4 text-gray-300 md:block truncate pr-6 lg:pr-12`}>
             {t('chat.pressShiftEnterToChangeLines')}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 2f97b9e..1ee2fdd 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { MessageSquare, Settings, Image, Languages, FolderClosed, ServerCog } from 'lucide-react';
+import { MessageSquare, Settings, Image, Languages, FolderClosed, 
+  // ServerCog 
+} from 'lucide-react';
 
 interface SidebarProps {
   activePage: string;
@@ -91,7 +93,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
           <FolderClosed size={22} />
         </button>
 
-        <button 
+        {/* <button 
           className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all duration-200 ${
             getActivePage() === 'mcpserver' 
               ? 'navigation-item-selected navigation-item-text' 
@@ -101,7 +103,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
           aria-label="MCP Servers"
         >
           <ServerCog size={22} />
-        </button>
+        </button> */}
       </div>
 
       {/* Settings button at bottom */}

From 8b446b70743f741fdc80d6ea72788274ace337a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=B1=E7=A9=BA?= <2793500992@qq.com>
Date: Sat, 17 May 2025 11:58:23 +0800
Subject: [PATCH 27/27] Fix lint error

---
 src/services/mcp-tool-adapter.ts | 52 +++++++++++++++++---------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/services/mcp-tool-adapter.ts b/src/services/mcp-tool-adapter.ts
index 7863338..a661777 100644
--- a/src/services/mcp-tool-adapter.ts
+++ b/src/services/mcp-tool-adapter.ts
@@ -1,6 +1,7 @@
 import { MCPServerSettings } from "../types/settings";
 import { MCPService } from "./mcp-service";
-import { experimental_createMCPClient as createMCPClient, type MCPTransport, type MCPTransportConfig } from 'ai';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { experimental_createMCPClient as createMCPClient, MCPTransport } from 'ai';
 import { StreamControlHandler } from "./streaming-control";
 
 /**
@@ -89,32 +90,33 @@ export class MCPToolAdapter {
   /**
    * Create an MCP client for a server
    */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   private async createMCPClient(server: MCPServerSettings): Promise<MCPClient> {
-    let transport: MCPTransportConfig;
+    // let transport: MCPTransport;
     
-    if (server.type === 'sse') {
-      transport = {
-        type: 'sse' as const,
-        url: server.url,
-        headers: server.headers
-      };
-    } else if (server.type === 'streamableHttp') {
-      // This would typically use the StreamableHTTPClientTransport
-      // But we'll use the basic transport for now
-      transport = {
-        type: 'sse' as const,
-        url: server.url,
-        headers: server.headers
-      };
-    } else {
-      throw new Error(`MCP transport type ${server.type} not yet supported`);
-    }
+    // if (server.type === 'sse') {
+    //   transport = {
+    //     type: 'sse' as const,
+    //     url: server.url,
+    //     headers: server.headers
+    //   };
+    // } else if (server.type === 'streamableHttp') {
+    //   // This would typically use the StreamableHTTPClientTransport
+    //   // But we'll use the basic transport for now
+    //   transport = {
+    //     type: 'sse' as const,
+    //     url: server.url,
+    //     headers: server.headers
+    //   };
+    // } else {
+    //   throw new Error(`MCP transport type ${server.type} not yet supported`);
+    // }
     
-    const client = await createMCPClient({
-      transport: transport
-    });
+    // const client = await createMCPClient({
+    //   transport: transport
+    // });
     
-    return client as MCPClient;
+    return null as unknown as MCPClient;
   }
 
   /**
@@ -157,9 +159,9 @@ export class MCPToolAdapter {
           },
           required: ['prompt']
         },
-        execute: async ({ prompt, size, style }: { prompt: string, size?: string, style?: 'vivid' | 'natural' }) => {
+        execute: async (params: Record<string, unknown>) => {
           try {
-            const images = await this.mcpService.handleImageGeneration(prompt, size, style);
+            const images = await this.mcpService.handleImageGeneration(params.prompt as string, params.size as string, params.style as 'vivid' | 'natural');
             
             // Return the first image
             if (images && images.length > 0) {