update generation link

app/src/assets/chat.less

@@ -13,7 +13,7 @@
 
 .scroll-action {
   position: absolute;
-  z-index: 64;
+  z-index: 12;
   bottom: 112px;
   right: 36px;
   opacity: 0;

app/src/assets/generation.less

@@ -63,7 +63,7 @@
   }
 }
 
-.input-box {
+.generate-box {
   display: flex;
   flex-direction: row;
   width: 80%;

app/src/assets/home.less

@@ -228,6 +228,17 @@
     }
   }
 
+  .chat-product {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    flex-grow: 1;
+    width: 100%;
+    overflow: hidden;
+    justify-content: center;
+    align-items: center;
+  }
+
   .chat-content {
     display: flex;
     flex-direction: column;

app/src/i18n.ts

@@ -144,6 +144,10 @@ const resources = {
         "max-length-prompt":
           "The content has been truncated due to the context length limit",
       },
+      "generate": {
+        "title": "AI Project Generator",
+        "input-placeholder": "generate a python game",
+      }
     },
   },
   cn: {
@@ -275,6 +279,10 @@ const resources = {
         "max-length": "内容过长",
         "max-length-prompt": "由于上下文长度限制，内容已被截取",
       },
+      "generate": {
+        "title": "AI 项目生成器",
+        "input-placeholder": "生成一个python小游戏",
+      }
     },
   },
   ru: {
@@ -416,6 +424,10 @@ const resources = {
         "max-length-prompt":
           "Содержимое было усечено из-за ограничения длины контекста",
       },
+      generate: {
+        title: "Генератор AI проектов",
+        "input-placeholder": "сгенерировать python игру",
+      }
     },
   },
 };

app/src/routes/Generation.tsx

@@ -15,6 +15,7 @@ type WrapperProps = {
 };
 
 function Wrapper(props: WrapperProps) {
+  const { t } = useTranslation();
   const ref = useRef(null);
   const [model, setModel] = useState("GPT-3.5");
 
@@ -45,8 +46,8 @@ function Wrapper(props: WrapperProps) {
         <img src={`/favicon.ico`} alt={""} />
         AI Code Generator
       </div>
-      <div className={`input-box`}>
-        <Input className={`input`} ref={ref} />
+      <div className={`generate-box`}>
+        <Input className={`input`} ref={ref} placeholder={t('generate.input-placeholder')} />
         <Button
           size={`icon`}
           className={`action`}

app/src/routes/Home.tsx

@@ -3,7 +3,7 @@ import "../assets/chat.less";
 import { Input } from "../components/ui/input.tsx";
 import { Toggle } from "../components/ui/toggle.tsx";
 import {
-  ChevronDown,
+  ChevronDown, ChevronRight, FolderKanban,
   Globe,
   LogIn,
   MessageSquare,
@@ -63,6 +63,7 @@ import { useTranslation } from "react-i18next";
 import MessageSegment from "../components/Message.tsx";
 import { setMenu } from "../store/menu.ts";
 import FileProvider, { FileObject } from "../components/FileProvider.tsx";
+import router from "../router.ts";
 
 function SideBar() {
   const { t } = useTranslation();
@@ -282,6 +283,7 @@ function ChatWrapper() {
   const auth = useSelector(selectAuthenticated);
   const gpt4 = useSelector(selectGPT4);
   const web = useSelector(selectWeb);
+  const messages = useSelector(selectMessages);
   const target = useRef(null);
   manager.setDispatch(dispatch);
 
@@ -310,7 +312,17 @@ function ChatWrapper() {
   return (
     <div className={`chat-container`}>
       <div className={`chat-wrapper`}>
-        <ChatInterface />
+        {
+          messages.length > 0 ?
+            <ChatInterface /> :
+            <div className={`chat-product`}>
+              <Button variant={`outline`} onClick={() => router.navigate('/generate')}>
+                <FolderKanban className={`h-4 w-4 mr-1.5`} />
+                { t('generate.title') }
+                <ChevronRight className={`h-4 w-4 ml-2`} />
+              </Button>
+            </div>
+        }
         <div className={`chat-input`}>
           <div className={`input-wrapper`}>
             <TooltipProvider>