diff --git a/web/locales/en/chat.ts b/web/locales/en/chat.ts
index 215dfc7d1..ee45d3158 100644
--- a/web/locales/en/chat.ts
+++ b/web/locales/en/chat.ts
@@ -116,7 +116,18 @@ export const ChatEn = {
   artifact_type_generic: 'Artifact',
   download: 'Download',
   download_as_zip: 'Download as ZIP',
-  skill_added_success: 'Skill "{{skillName}}" added',
-  added: 'Added',
-  add: 'Add',
+   skill_added_success: 'Skill "{{skillName}}" added',
+   added: 'Added',
+   add: 'Add',
+   add_context: 'Add Context (File, DB, Knowledge)',
+   select_skill: 'Select Skill',
+   skill_selected: 'Skill: {{name}}',
+   select_database: 'Select Database',
+   database_selected: 'Database: {{name}}',
+   select_knowledge: 'Select Knowledge Base',
+   knowledge_selected: 'Knowledge Base: {{name}}',
+   voice_input: 'Voice Input',
+   voice_input_coming_soon: 'Voice input coming soon',
+   expand_panel: 'Expand Panel',
+   search_skill: 'Search skills',
 };
diff --git a/web/locales/zh/chat.ts b/web/locales/zh/chat.ts
index 96e43679e..0895147f1 100644
--- a/web/locales/zh/chat.ts
+++ b/web/locales/zh/chat.ts
@@ -124,7 +124,18 @@ export const ChatZh: Resources['translation'] = {
   artifact_type_generic: '产物',
   download: '下载',
   download_as_zip: '下载为 ZIP',
-  skill_added_success: '技能 "{{skillName}}" 已添加',
-  added: '已添加',
-  add: '添加',
+   skill_added_success: '技能 "{{skillName}}" 已添加',
+   added: '已添加',
+   add: '添加',
+   add_context: '添加上下文（文件、数据库、知识库）',
+   select_skill: '选择技能',
+   skill_selected: '技能：{{name}}',
+   select_database: '选择数据库',
+   database_selected: '数据库：{{name}}',
+   select_knowledge: '选择知识库',
+   knowledge_selected: '知识库：{{name}}',
+   voice_input: '语音输入',
+   voice_input_coming_soon: '语音输入即将上线',
+   expand_panel: '展开面板',
+   search_skill: '搜索技能',
 } as const;
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index f18900ad5..63e4fba92 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -2490,14 +2490,14 @@ const Playground: NextPage = () => {
                               }}
                               trigger={['click']}
                             >
-                              <Tooltip title='Add Context (File, DB, Knowledge)'>
-                                <Button
-                                  type='text'
-                                  shape='circle'
-                                  size='small'
-                                  icon={<PlusOutlined />}
-                                  className='flex items-center justify-center text-gray-500 hover:text-violet-600 bg-gradient-to-b from-white to-gray-50 dark:from-[#2a2b2f] dark:to-[#1e1f24] dark:text-gray-300 border border-gray-200/80 dark:border-white/10 shadow-[0_1px_2px_rgba(0,0,0,0.05),inset_0_1px_0_rgba(255,255,255,1)] dark:shadow-[0_1px_2px_rgba(0,0,0,0.2),inset_0_1px_0_rgba(255,255,255,0.05)] hover:-translate-y-[0.5px] hover:shadow-[0_2px_4px_rgba(0,0,0,0.06),inset_0_1px_0_rgba(255,255,255,1)] dark:hover:border-white/20 transition-all flex-shrink-0'
-                                />
+                               <Tooltip title={t('add_context')}>
+                                 <Button
+                                   type='text'
+                                   shape='circle'
+                                   size='small'
+                                   icon={<PlusOutlined />}
+                                   className='flex items-center justify-center text-gray-500 hover:text-violet-600 bg-gradient-to-b from-white to-gray-50 dark:from-[#2a2b2f] dark:to-[#1e1f24] dark:text-gray-300 border border-gray-200/80 dark:border-white/10 shadow-[0_1px_2px_rgba(0,0,0,0.05),inset_0_1px_0_rgba(255,255,255,1)] dark:shadow-[0_1px_2px_rgba(0,0,0,0.2),inset_0_1px_0_rgba(255,255,255,0.05)] hover:-translate-y-[0.5px] hover:shadow-[0_2px_4px_rgba(0,0,0,0.06),inset_0_1px_0_rgba(255,255,255,1)] dark:hover:border-white/20 transition-all flex-shrink-0'
+                                 />
                               </Tooltip>
                             </Dropdown>
 
@@ -2513,7 +2513,7 @@ const Playground: NextPage = () => {
                                 <div className='w-[320px] bg-white dark:bg-[#2c2d31] rounded-xl shadow-xl overflow-hidden'>
                                   <div className='p-3 border-b border-gray-100 dark:border-gray-700'>
                                     <Input
-                                      placeholder={t('search_skill') || '搜索技能'}
+                                       placeholder={t('search_skill')}
                                       prefix={<SearchOutlined className='text-gray-400' />}
                                       value={skillSearchQuery}
                                       onChange={e => setSkillSearchQuery(e.target.value)}
@@ -2608,7 +2608,7 @@ const Playground: NextPage = () => {
                                 </div>
                               }
                             >
-                              <Tooltip title={selectedSkill ? `技能：${selectedSkill.name}` : '选择技能'}>
+                               <Tooltip title={selectedSkill ? t('skill_selected', { name: selectedSkill.name }) : t('select_skill')}>
                                 <Button
                                   type='text'
                                   shape='circle'
@@ -2661,12 +2661,12 @@ const Playground: NextPage = () => {
 
                           <div className='flex items-center gap-3'>
                             {/* Voice Button */}
-                            <Tooltip title='语音输入'>
+                            <Tooltip title={t('voice_input')}>
                               <Button
                                 type='text'
                                 shape='circle'
                                 icon={<AudioOutlined className='text-gray-500 text-[18px]' />}
-                                onClick={() => message.info('语音输入即将上线')}
+                                onClick={() => message.info(t('voice_input_coming_soon'))}
                                 className='flex-shrink-0 h-9 w-9 transition-all duration-200 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800'
                               />
                             </Tooltip>
@@ -2715,7 +2715,7 @@ const Playground: NextPage = () => {
 
                 {rightPanelCollapsed && (
                   <div className='absolute right-0 top-1/2 -translate-y-1/2 z-10'>
-                    <Tooltip title='展开面板'>
+                    <Tooltip title={t('expand_panel')}>
                       <Button
                         type='text'
                         shape='circle'
@@ -2902,7 +2902,7 @@ const Playground: NextPage = () => {
                             }}
                             trigger={['click']}
                           >
-                            <Tooltip title='添加'>
+                            <Tooltip title={t('add_context')}>
                               <Button
                                 type='text'
                                 shape='circle'
@@ -3020,7 +3020,13 @@ const Playground: NextPage = () => {
                               </div>
                             }
                           >
-                            <Tooltip title={selectedSkill ? `技能：${selectedSkill.name}` : '选择技能'}>
+                              <Tooltip
+                                title={
+                                  selectedSkill
+                                    ? t('skill_selected', { name: selectedSkill.name })
+                                    : t('select_skill')
+                                }
+                              >
                               <Button
                                 type='text'
                                 shape='circle'
@@ -3144,7 +3150,13 @@ const Playground: NextPage = () => {
                               </div>
                             }
                           >
-                            <Tooltip title={selectedDb ? `数据库：${selectedDb.db_name}` : '选择数据库'}>
+                            <Tooltip
+                              title={
+                                selectedDb
+                                  ? t('database_selected', { name: selectedDb.db_name })
+                                  : t('select_database')
+                              }
+                            >
                               <Button
                                 type='text'
                                 shape='circle'
@@ -3263,7 +3275,13 @@ const Playground: NextPage = () => {
                               </div>
                             }
                           >
-                            <Tooltip title={selectedKnowledge ? `知识库：${selectedKnowledge.name}` : '选择知识库'}>
+                            <Tooltip
+                              title={
+                                selectedKnowledge
+                                  ? t('knowledge_selected', { name: selectedKnowledge.name })
+                                  : t('select_knowledge')
+                              }
+                            >
                               <Button
                                 type='text'
                                 shape='circle'