feat(chat): 更新聊天组件，支持模板选择和更本地化的体验

app/components/chat/BaseChat.tsx

@@ -1,5 +1,5 @@
 import type { Message } from 'ai';
-import React, { type RefCallback } from 'react';
+import React, { type RefCallback, useState } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
 import { Menu } from '~/components/sidebar/Menu.client';
 import { IconButton } from '~/components/ui/IconButton';
@@ -7,6 +7,8 @@ import { Workbench } from '~/components/workbench/Workbench.client';
 import { classNames } from '~/utils/classNames';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
+import { TemplateSelector } from '~/components/workbench/TemplateSelector';
+import { type TemplateName } from '~/utils/templates';
 
 import styles from './BaseChat.module.scss';
 
@@ -28,11 +30,11 @@ interface BaseChatProps {
 }
 
 const EXAMPLE_PROMPTS = [
-  { text: 'Build a todo app in React using Tailwind' },
-  { text: 'Build a simple blog using Astro' },
-  { text: 'Create a cookie consent form using Material UI' },
-  { text: 'Make a space invaders game' },
-  { text: 'How do I center a div?' },
+  { text: '使用 React 和 Tailwind 构建一个待办事项应用' },
+  { text: '使用 Astro 构建一个简单的博客' },
+  { text: '使用 Material UI 创建一个 cookie 同意表单' },
+  { text: '制作一个太空入侵者游戏' },
+  { text: '如何让一个 div 居中？' },
 ];
 
 const TEXTAREA_MIN_HEIGHT = 76;
@@ -58,6 +60,18 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     ref,
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
+    const [selectedTemplate, setSelectedTemplate] = useState<TemplateName>('basic');
+
+    const handleTemplateChange = async (templateName: TemplateName) => {
+      setSelectedTemplate(templateName);
+      try {
+        console.log('templateName', templateName);
+        // await workbenchStore.changeTemplate(templateName);
+      } catch (error) {
+        console.error('Failed to change template:', error);
+        // 可以在这里添加错误处理,比如显示一个错误提示
+      }
+    };
 
     return (
       <div
@@ -74,11 +88,17 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
             {!chatStarted && (
               <div id="intro" className="mt-[26vh] max-w-chat mx-auto">
                 <h1 className="text-5xl text-center font-bold text-bolt-elements-textPrimary mb-2">
-                  Where ideas begin
+                  创意的起点
                 </h1>
                 <p className="mb-4 text-center text-bolt-elements-textSecondary">
-                  Bring ideas to life in seconds or get help on existing projects.
+                  在几秒钟内将想法变为现实，或获取现有项目的帮助。
                 </p>
+                <TemplateSelector
+                  className="w-full mb-4"
+                  value={selectedTemplate}
+                  onChange={handleTemplateChange}
+                />
+                <ClientOnly>{() => <div>123</div>}</ClientOnly>
               </div>
             )}
             <div
@@ -130,7 +150,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       minHeight: TEXTAREA_MIN_HEIGHT,
                       maxHeight: TEXTAREA_MAX_HEIGHT,
                     }}
-                    placeholder="How can Bolt help you today?"
+                    placeholder="Bolt 今天能为您做些什么？"
                     translate="no"
                   />
                   <ClientOnly>
@@ -152,7 +172,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   <div className="flex justify-between text-sm p-4 pt-2">
                     <div className="flex gap-1 items-center">
                       <IconButton
-                        title="Enhance prompt"
+                        title="增强提示"
                         disabled={input.length === 0 || enhancingPrompt}
                         className={classNames({
                           'opacity-100!': enhancingPrompt,
@@ -164,24 +184,24 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         {enhancingPrompt ? (
                           <>
                             <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl"></div>
-                            <div className="ml-1.5">Enhancing prompt...</div>
+                            <div className="ml-1.5">正在增强提示...</div>
                           </>
                         ) : (
                           <>
                             <div className="i-bolt:stars text-xl"></div>
-                            {promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
+                            {promptEnhanced && <div className="ml-1.5">提示已增强</div>}
                           </>
                         )}
                       </IconButton>
                     </div>
                     {input.length > 3 ? (
                       <div className="text-xs text-bolt-elements-textTertiary">
-                        Use <kbd className="kdb">Shift</kbd> + <kbd className="kdb">Return</kbd> for a new line
+                        使用 <kbd className="kdb">Shift</kbd> + <kbd className="kdb">回车</kbd> 换行
                       </div>
                     ) : null}
                   </div>
                 </div>
-                <div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
+                <div className="bg-bolt-elements-background-depth-1 pb-6">{/* 幽灵元素 */}</div>
               </div>
             </div>
             {!chatStarted && (