Fix: Add translation copy button & fix dalle3 model duplicate

Author: ShenKSPZ

src/components/pages/SettingsPage.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Server, MessageSquare, Languages } from 'lucide-react';
 import { SettingsService } from '../../services/settings-service';
 import { ProviderSettings } from '../../types/settings';
-import { ApiManagement, ModelManagement, ChatSettings, LanguageSettings } from '../settings';
+import { ApiManagement, ChatSettings, LanguageSettings } from '../settings';
 import { DatabaseIntegrationService } from '../../services/database-integration';
 import { AIService } from '../../services/ai-service';
 import { v4 as uuidv4 } from 'uuid';
@@ -21,7 +21,6 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
   const [activeTab, setActiveTab] = useState<SettingsTab>('api');
   const [selectedProvider, setSelectedProvider] = useState<string>('TensorBlock');
   const [providerSettings, setProviderSettings] = useState<Record<string, ProviderSettings>>({});
-  const [selectedModel, setSelectedModel] = useState('');
   const [useWebSearch, setUseWebSearch] = useState(true);
   const [isDbInitialized, setIsDbInitialized] = useState(false);
   const [hasApiKeyChanged, setHasApiKeyChanged] = useState(false);
@@ -55,7 +54,6 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
       const settings = settingsService.getSettings();
       setSelectedProvider(settings.selectedProvider);
       setProviderSettings(settings.providers);
-      setSelectedModel(settings.selectedModel);
       setUseWebSearch(settings.enableWebSearch_Preview);
       setHasApiKeyChanged(false);
       lastOpenedSettings.current = true;
@@ -73,11 +71,6 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
     setSelectedProvider(provider);
   };
 
-  // Handle model selection change
-  const handleModelChange = (modelId: string) => {
-    setSelectedModel(modelId);
-  };
-  
   // Handle web search setting change
   const handleWebSearchChange = (enabled: boolean) => {
     console.log('Web search setting changed to: ', enabled);
@@ -308,14 +301,6 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
                 <LanguageSettings />
               </div>
             )}
-            
-            {/* Model Management Tab */}
-            {activeTab === 'models' && (
-              <ModelManagement
-                selectedModel={selectedModel}
-                onModelChange={handleModelChange}
-              />
-            )}
           </div>
         </div>
       </div>

src/components/pages/TranslationPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { SettingsService, SETTINGS_CHANGE_EVENT } from '../../services/settings-service';
-import { Orbit, Languages, ArrowRight } from 'lucide-react';
+import { Orbit, Languages, ArrowRight, Copy, Check } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
 import { Message, MessageRole } from '../../types/chat';
@@ -16,6 +16,7 @@ export const TranslationPage: React.FC = () => {
   const [targetLanguage, setTargetLanguage] = useState('en');
   const [error, setError] = useState<Error | null>(null);
   const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
+  const [isCopied, setIsCopied] = useState(false);
 
   // Check if API key is available
   useEffect(() => {
@@ -32,6 +33,20 @@ export const TranslationPage: React.FC = () => {
     };
   }, []);
 
+  // Handle copy to clipboard
+  const handleCopy = () => {
+    if (!translatedText) return;
+    
+    navigator.clipboard.writeText(translatedText)
+      .then(() => {
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+      })
+      .catch(err => {
+        console.error('Failed to copy text: ', err);
+      });
+  };
+
   // Handle translation
   const handleTranslate = async () => {
     if (!sourceText.trim()) return;
@@ -216,27 +231,6 @@ export const TranslationPage: React.FC = () => {
               className="flex-1 w-full p-3 mb-4 form-textarea-border input-box"
               style={{ minHeight: '200px', resize: 'none' }}
             />
-
-            {/* Translation button */}
-            {/* <div className="flex justify-center">
-              <button
-                onClick={handleTranslate}
-                disabled={isTranslating || !sourceText.trim() || isApiKeyMissing}
-                className="px-8 py-2.5 text-white confirm-btn flex items-center"
-              >
-                {isTranslating ? (
-                  <>
-                    <Orbit size={18} className="mr-2 animate-spin" />
-                    {t('translation.translating')}
-                  </>
-                ) : (
-                  <>
-                    <Languages size={18} className="mr-2" />
-                    {t('translation.translateButton')}
-                  </>
-                )}
-              </button>
-            </div> */}
           </div>
         </div>
 
@@ -272,15 +266,29 @@ export const TranslationPage: React.FC = () => {
             )}
 
             {/* Translation result */}
-            <div className="flex-1 p-3 overflow-auto form-textarea-border major-area-bg-color">
+            <div className="relative flex-1 p-3 overflow-auto 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>
                 </div>
               ) : (
                 <div className="h-full">
                   {translatedText ? (
-                    <p className="text-primary-800">{translatedText}</p>
+                    <>
+                      <p className="pr-10 text-primary-800">{translatedText}</p>
+                      <button 
+                        onClick={handleCopy}
+                        disabled={!translatedText}
+                        className="absolute p-2 transition-colors rounded-md top-3 right-3 hover:bg-surface-100"
+                        title={t('translation.copy')}
+                      >
+                        {isCopied ? (
+                          <Check size={18} className="text-green-600" />
+                        ) : (
+                          <Copy size={18} className="text-surface-600" />
+                        )}
+                      </button>
+                    </>
                   ) : (
                     <div className="flex items-center justify-center h-full">
                       <p className="text-surface-400">{t('translation.resultPlaceholder')}</p>

src/components/settings/index.ts

@@ -1,4 +1,3 @@
 export * from './ApiManagement';
-export * from './ModelManagement';
 export * from './ChatSettings';
 export * from './LanguageSettings';

src/locales/en/translation.json

@@ -40,6 +40,7 @@
     "translating": "Translating...",
     "inputPlaceholder": "Enter text to translate...",
     "resultPlaceholder": "Translation will appear here",
+    "copy": "Copy",
     "apiKeyMissing": "Please set your API key for the selected provider in the settings.",
     "autoDetect": "Auto-detect",
     "english": "English",

src/locales/es/translation.json

@@ -40,6 +40,7 @@
     "translating": "Traduciendo...",
     "inputPlaceholder": "Introduce el texto a traducir...",
     "resultPlaceholder": "La traducción aparecerá aquí",
+    "copy": "Copiar",
     "apiKeyMissing": "Por favor, configura tu clave API para el proveedor seleccionado en la configuración.",
     "autoDetect": "Detección automática",
     "english": "Inglés",

src/locales/ja/translation.json

@@ -40,6 +40,7 @@
     "translating": "翻訳中...",
     "inputPlaceholder": "翻訳するテキストを入力...",
     "resultPlaceholder": "翻訳結果がここに表示されます",
+    "copy": "コピー",
     "apiKeyMissing": "選択したプロバイダーのAPIキーを設定で設定してください。",
     "autoDetect": "自動検出",
     "english": "英語",

src/locales/ko/translation.json

@@ -40,6 +40,7 @@
     "translating": "번역 중...",
     "inputPlaceholder": "번역할 텍스트를 입력하세요...",
     "resultPlaceholder": "번역 결과가 여기에 표시됩니다",
+    "copy": "복사",
     "apiKeyMissing": "선택한 제공자의 API 키를 설정에서 설정하세요.",
     "autoDetect": "자동 감지",
     "english": "영어",

src/locales/zh-CN/translation.json

@@ -40,6 +40,7 @@
     "translating": "翻译中...",
     "inputPlaceholder": "输入要翻译的文本...",
     "resultPlaceholder": "翻译结果将显示在这里",
+    "copy": "复制",
     "apiKeyMissing": "请在设置中为所选提供商设置您的 API 密钥。",
     "autoDetect": "自动检测",
     "english": "英语",

src/locales/zh-TW/translation.json

@@ -40,6 +40,7 @@
     "translating": "翻譯中...",
     "inputPlaceholder": "輸入要翻譯的文字...",
     "resultPlaceholder": "翻譯結果將顯示在這裡",
+    "copy": "複製",
     "apiKeyMissing": "請在設定中為所選提供商設置您的 API 金鑰。",
     "autoDetect": "自動偵測",
     "english": "英文",

src/services/settings-service.ts

@@ -312,15 +312,16 @@ export class SettingsService {
       }
 
       if(provider === 'OpenAI') {
-
-        this.settings.providers[provider].models!.push({
-          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(),
-        });
+        if(!this.settings.providers[provider].models!.find(model => model.modelId === 'dall-e-3')) {
+          this.settings.providers[provider].models!.push({
+            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(),
+          });
+        }
       }
     }
   }