.

components/utility/profile-settings.tsx

@@ -45,9 +45,15 @@ import { ThemeSwitcher } from "./theme-switcher"
 
 import { usePathname } from "next/navigation" // 导入 usePathname
 
+import { useTranslation } from "react-i18next";  // 引入useTranslation用于国际化
+
+
 interface ProfileSettingsProps {}
 
 export const ProfileSettings: FC<ProfileSettingsProps> = ({}) => {
+
+  const { t } = useTranslation();  // 使用t函数来获取翻译文本
+
   const {
     profile,
     setProfile,
@@ -309,7 +315,8 @@ export const ProfileSettings: FC<ProfileSettingsProps> = ({}) => {
             src={profile.image_url + "?" + new Date().getTime()}
             height={34}
             width={34}
-            alt={"Image"}
+            alt={t("profile.imageAlt")}
+            //alt={"Image"}
           />
         ) : (
           <Button size="icon" variant="ghost">
@@ -326,7 +333,7 @@ export const ProfileSettings: FC<ProfileSettingsProps> = ({}) => {
         <div className="grow overflow-auto">
           <SheetHeader>
             <SheetTitle className="flex items-center justify-between space-x-2">
-              <div>User Settings</div>
+              <div>{t("profile.settingsTitle")}</div>
 
               <Button
                 tabIndex={-1}
@@ -335,28 +342,28 @@ export const ProfileSettings: FC<ProfileSettingsProps> = ({}) => {
                 onClick={handleSignOut}
               >
                 <IconLogout className="mr-1" size={20} />
-                Logout
+                {t("profile.logout")}
               </Button>
             </SheetTitle>
           </SheetHeader>
 
           <Tabs defaultValue="profile">
             <TabsList className="mt-4 grid w-full grid-cols-2">
-              <TabsTrigger value="profile">Profile</TabsTrigger>
+              <TabsTrigger value="profile">{t("profile.profileTab")}</TabsTrigger>
-              <TabsTrigger value="keys">API Keys</TabsTrigger>
+              <TabsTrigger value="keys">{t("profile.apiKeysTab")}</TabsTrigger>
             </TabsList>
 
             <TabsContent className="mt-4 space-y-4" value="profile">
               <div className="space-y-1">
                 <div className="flex items-center space-x-2">
-                  <Label>Username</Label>
+                  <Label>{t("profile.usernameLabel")}</Label>
 
                   <div className="text-xs">
                     {username !== profile.username ? (
                       usernameAvailable ? (
-                        <div className="text-green-500">AVAILABLE</div>
+                        <div className="text-green-500">{t("profile.available")}</div>
                       ) : (
-                        <div className="text-red-500">UNAVAILABLE</div>
+                        <div className="text-red-500">{t("profile.unavailable")}</div>
                       )
                     ) : null}
                   </div>
@@ -365,7 +372,7 @@ export const ProfileSettings: FC<ProfileSettingsProps> = ({}) => {
                 <div className="relative">
                   <Input
                     className="pr-10"
-                    placeholder="Username..."
+                    placeholder={t("profile.usernamePlaceholder")}
                     value={username}
                     onChange={e => {
                       setUsername(e.target.value)
@@ -395,7 +402,7 @@ export const ProfileSettings: FC<ProfileSettingsProps> = ({}) => {
               </div>
 
               <div className="space-y-1">
-                <Label>Profile Image</Label>
+                <Label>{t("profile.profileImageLabel")}</Label>
 
                 <ImagePicker
                   src={profileImageSrc}
@@ -408,10 +415,10 @@ export const ProfileSettings: FC<ProfileSettingsProps> = ({}) => {
               </div>
 
               <div className="space-y-1">
-                <Label>Chat Display Name</Label>
+                <Label>{t("profile.chatDisplayNameLabel")}</Label>
 
                 <Input
-                  placeholder="Chat display name..."
+                  placeholder={t("profile.chatDisplayNamePlaceholder")}
                   value={displayName}
                   onChange={e => setDisplayName(e.target.value)}
                   maxLength={PROFILE_DISPLAY_NAME_MAX}
@@ -420,14 +427,13 @@ export const ProfileSettings: FC<ProfileSettingsProps> = ({}) => {
 
               <div className="space-y-1">
                 <Label className="text-sm">
-                  What would you like the AI to know about you to provide better
+                  {t("profile.instructionsLabel")}
-                  responses?
                 </Label>
 
                 <TextareaAutosize
                   value={profileInstructions}
                   onValueChange={setProfileInstructions}
-                  placeholder="Profile context... (optional)"
+                  placeholder={t("profile.instructionsPlaceholder")}
                   minRows={6}
                   maxRows={10}
                 />
@@ -756,11 +762,11 @@ export const ProfileSettings: FC<ProfileSettingsProps> = ({}) => {
 
           <div className="ml-auto space-x-2">
             <Button variant="ghost" onClick={() => setIsOpen(false)}>
-              Cancel
+              {t("profile.cancel")} {/* 取消按钮 */}
             </Button>
 
             <Button ref={buttonRef} onClick={handleSave}>
-              Save
+            {t("profile.save")} {/* 保存按钮 */}
             </Button>
           </div>
         </div>

public/locales/en/translation.json

@@ -35,5 +35,24 @@
 
   "chat": {
     "defaultChatTitle": "Chat"
-  }
+  },
+
+  "profile": {
+    "settingsTitle": "User Settings",
+    "logout": "Logout",
+    "profileTab": "Profile",
+    "apiKeysTab": "API Keys",
+    "usernameLabel": "Username",
+    "usernamePlaceholder": "Enter username",
+    "available": "AVAILABLE",
+    "unavailable": "UNAVAILABLE",
+    "usernameError": "Username must be letters, numbers, or underscores only - no other characters or spacing allowed.",
+    "chatDisplayName": "Chat Display Name",
+    "chatDisplayNamePlaceholder": "Your Name",
+    "instructionsLabel": "What would you like the AI to know about you to provide better responses?",
+    "instructionsPlaceholder": "Profile context... (optional)",
+    "profileImageLabel": "Profile Image",
+    "cancel": "Cancel",
+    "save": "Save"
+  }  
 }

public/locales/ja/translation.json

@@ -34,6 +34,25 @@
 
     "chat": {
       "defaultChatTitle": "会話"  
-    }
+    },
+
+    "profile": {
+      "settingsTitle": "ユーザー設定",
+      "logout": "ログアウト",
+      "profileTab": "プロフィール",
+      "apiKeysTab": "APIキー",
+      "usernameLabel": "ユーザー名",
+      "usernamePlaceholder": "ユーザー名を入力してください",
+      "available": "利用可能",
+      "unavailable": "利用不可",
+      "usernameError": "ユーザー名は文字、数字、またはアンダースコアのみで、その他の文字やスペースは使用できません。",
+      "chatDisplayName": "チャット表示名",
+      "chatDisplayNamePlaceholder": "あなたの名前",
+      "instructionsLabel": "AIにあなたに関するどのような情報を知ってもらいたいですか？",
+      "instructionsPlaceholder": "プロフィールの説明...（オプション）",
+      "profileImageLabel": "プロフィール画像",
+      "cancel": "キャンセル",
+      "save": "保存"
+    }    
   }
   

public/locales/zh/translation.json

@@ -34,5 +34,24 @@
 
   "chat": {
     "defaultChatTitle": "对话"  
+  },
+
+  "profile": {
+    "settingsTitle": "用户设置",
+    "logout": "注销",
+    "profileTab": "个人资料",
+    "apiKeysTab": "API 密钥",
+    "usernameLabel": "用户名",
+    "usernamePlaceholder": "请输入用户名",
+    "available": "可用",
+    "unavailable": "不可用",
+    "usernameError": "用户名只能包含字母、数字或下划线，不能包含其他字符或空格。",
+    "chatDisplayName": "聊天显示名称",
+    "chatDisplayNamePlaceholder": "您的名称",
+    "instructionsLabel": "你希望 AI 知道关于你的哪些信息以便提供更好的回答？",
+    "instructionsPlaceholder": "个人资料描述...（可选）",
+    "profileImageLabel": "个人资料图片",
+    "cancel": "取消",
+    "save": "保存"
   }
 }