Function: Add support of i18n

Author: ShenKSPZ

package-lock.json

@@ -26,12 +26,15 @@
     "axios": "^1.8.4",
     "dotenv": "^16.4.7",
     "electron-builder": "26.0.12",
+    "i18next": "^24.2.3",
+    "i18next-browser-languagedetector": "^8.0.4",
     "katex": "^0.16.21",
     "lucide-react": "^0.344.0",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^15.4.1",
     "react-markdown": "^10.1.0",
     "rehype-katex": "^7.0.1",
     "rehype-prism-plus": "^2.0.0",

package.json

@@ -3,6 +3,7 @@ import { Conversation, ConversationFolder } from '../../types/chat';
 import { MessageSquare, MoreVertical, Edit, Trash2, ChevronLeft, ChevronRight, AlertTriangle, FolderPlus, Folder, ChevronDown, PlusCircle } from 'lucide-react';
 import ContextMenu, { ContextMenuItem } from '../ui/ContextMenu';
 import ConfirmDialog from '../ui/ConfirmDialog';
+import { useTranslation } from '../../hooks/useTranslation';
 
 interface ChatHistoryListProps {
   conversations: Conversation[];
@@ -36,6 +37,7 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
   onDeleteFolder,
   onMoveConversation,
 }) => {
+  const { t } = useTranslation();
   const [openMenuId, setOpenMenuId] = useState<string | null>(null);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editingType, setEditingType] = useState<'conversation' | 'folder'>('conversation');
@@ -164,12 +166,12 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
     // Show confirmation dialog
     setConfirmDialog({
       isOpen: true,
-      title: `Delete ${type === 'conversation' ? 'Conversation' : 'Folder'}`,
-      message: `Are you sure you want to delete this ${type}? ${type === 'folder' ? 'All conversations will be moved to the root.' : 'This action cannot be undone.'}`,
+      title: `${type === 'conversation' ? t('chat.deleteChat') : t('chat.deleteFolder')}`,
+      message: `${type === 'conversation' ? t('chat.deleteChat_confirm_message') : t('chat.deleteFolder_confirm_message')}`,
       itemId: id,
       itemType: type,
-      confirmText: 'Delete',
-      cancelText: 'Cancel',
+      confirmText: `${type === 'conversation' ? t('chat.deleteChat_delete') : t('chat.deleteFolder_delete')}`,
+      cancelText: `${type === 'conversation' ? t('chat.deleteChat_cancel') : t('chat.deleteFolder_cancel')}`,
       confirmColor: 'red'
     });
   };
@@ -333,14 +335,14 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
     {
       id: 'rename',
       icon: Edit,
-      label: 'Rename',
+      label: t('chat.renameChat'),
       onClick: (e) => handleRenameClick(e, conversation, 'conversation'),
       color: 'text-gray-700'
     },
     {
       id: 'delete',
       icon: Trash2,
-      label: 'Delete',
+      label: t('chat.deleteChat'),
       onClick: (e) => handleDeleteClick(e, conversation.conversationId, 'conversation'),
       color: 'text-red-600'
     }
@@ -351,21 +353,21 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
     {
       id: 'new chat',
       icon: PlusCircle,
-      label: 'New Chat',
+      label: t('chat.newChat'),
       onClick: (e) => handleNewChatClick(e, folder.folderId),
       color: 'text-gray-700'
     },
     {
       id: 'rename',
       icon: Edit,
-      label: 'Rename',
+      label: t('chat.renameFolder'),
       onClick: (e) => handleRenameClick(e, folder, 'folder'),
       color: 'text-gray-700'
     },
     {
       id: 'delete',
       icon: Trash2,
-      label: 'Delete',
+      label: t('chat.deleteFolder'),
       onClick: (e) => handleDeleteClick(e, folder.folderId, 'folder'),
       color: 'text-red-600'
     }

src/components/chat/ChatHistoryList.tsx

@@ -9,6 +9,7 @@ import { SETTINGS_CHANGE_EVENT, SettingsService } from '../../services/settings-
 import { ChatService } from '../../services/chat-service';
 import { AIServiceCapability } from '../../types/capabilities';
 import ProviderIcon from '../ui/ProviderIcon';
+import { useTranslation } from '../../hooks/useTranslation';
 
 interface ChatMessageAreaProps {
   activeConversation: Conversation | null;
@@ -35,6 +36,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   selectedProvider,
   selectedModel,
 }) => {
+  const { t } = useTranslation();
   const [inputValue, setInput] = useState('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -289,21 +291,21 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                 {
                   id: 'edit',
                   icon: Pencil,
-                  label: 'Edit',
+                  label: t('chat.edit'),
                   onClick: () => handleEditMessage(message.messageId, MessageHelper.MessageContentToText(message.content)),
                 },
                 {
                   id: 'copy',
                   icon: Copy,
-                  label: 'Copy',
+                  label: t('chat.copy'),
                   onClick: () => handleCopyMessage(MessageHelper.MessageContentToText(message.content)),
                 }
               ]
             : [
                 {
                   id: 'copy',
                   icon: Copy,
-                  label: 'Copy',
+                  label: t('chat.copy'),
                   onClick: () => handleCopyMessage(MessageHelper.MessageContentToText(message.content)),
                 },
                 // {
@@ -315,7 +317,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                 {
                   id: 'regenerate',
                   icon: RefreshCw,
-                  label: 'Regenerate',
+                  label: t('chat.regenerate'),
                   onClick: () => handleRegenerateResponse(message.messageId),
                 }
               ];
@@ -455,7 +457,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                 handleSubmit(e);
               }
             }}
-            placeholder="Type your message..."
+            placeholder={t('chat.typeMessage')}
             className="flex-1 w-[100%] px-2 pt-1 pb-2 resize-none focus:outline-none"
             disabled={isLoading}
             inputMode='text'
@@ -496,16 +498,16 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
           }
 
           <span className={`flex-1 hidden text-xs text-center pt-4 text-gray-300 md:block truncate ${isWebSearchPreviewEnabled ? 'pr-6 lg:pr-12' : ''}`}>
-            {isWebSearchPreviewEnabled ? 'Press Shift+Enter to change lines' : ''}
+            {isWebSearchPreviewEnabled ? t('chat.pressShiftEnterToChangeLines') : ''}
           </span>
 
           {isCurrentlyStreaming || hasStreamingMessage ? (
             <button
               type="button"
               onClick={handleStopStreaming}
               className="flex items-center justify-center w-10 h-10 transition-all duration-200 rounded-full conversation-stop-button focus:outline-none"
-              aria-label="Stop response"
-              title="Stop response"
+              aria-label={t('chat.stopResponse')}
+              title={t('chat.stopResponse')}
             >
               <Square size={20} fill="currentColor" />
             </button>
@@ -514,8 +516,8 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
               type="submit"
               disabled={isLoading || !inputValue.trim()}
               className="flex items-center justify-center w-10 h-10 transition-all duration-200 rounded-full conversation-send-button focus:outline-none disabled:cursor-not-allowed"
-              aria-label={isLoading || !inputValue.trim() ? 'Cannot send message' : 'Send message'}
-              title={isLoading || !inputValue.trim() ? 'Cannot send message' : 'Send message'}
+              aria-label={isLoading || !inputValue.trim() ? t('chat.cannotSendMessage') : t('chat.sendMessage')}
+              title={isLoading || !inputValue.trim() ? t('chat.cannotSendMessage') : t('chat.sendMessage')}
             >
               <Send className="translate-x-[0px] translate-y-[1px]" size={20} />
             </button>