feat(web): generate function code with AI prompt (#978)

* refactor(web): new logo

* feat(web): add prompt function code generate

Author: LeezQ

.vscode/settings.json

@@ -92,6 +92,7 @@
     "sealctl",
     "sealos",
     "signin",
+    "Signup",
     "statefulset",
     "storageclass",
     "tailwindcss",

web/public/favicon.ico

@@ -43,7 +43,7 @@
   "Copied": "copied",
   "Copy": "copy",
   "Create": "new application",
-  "CreateNow": "create now",
+  "CreateNow": "Create Now",
   "Custom": "customize",
   "Days": "days",
   "Delete": "Delete ",
@@ -88,7 +88,6 @@
     "DeploySuccess": "Deploy successfully",
     "Description": "Function Description",
     "EditFunction": "Edit Function",
-    "EmptyText": "No function information yet,",
     "Function": "Function",
     "FunctionList": "Function List",
     "FunctionName": "Function Name",
@@ -106,7 +105,9 @@
     "EmptyDebugTip": "No results yet",
     "EmptyFunctionTip": "You have not created the function",
     "UploadButton": "upload",
-    "LeaveFunctionPage": "About to leave the function edit page"
+    "LeaveFunctionPage": "About to leave the function edit page",
+    "PromptDescription": "Use natural language to describe your needs, laf will help you generate code, for example: help me write a hello world, return {hello: 'laf AI'}",
+    "CreateWithAITip": "Create functions with AI assistance"
   },
   "HomePanel": {
     "APP": "Android or iOS app",
@@ -308,10 +309,10 @@
     "PasswordNotMatch": "The two passwords you entered do not match",
     "SmsCodeSendSuccess": "Verification code sent successfully",
     "ValidationCodePlaceholder": "Please input the verification code",
-    "SignupSuccess": "Sign up successfully",
     "ResetPassword": "Reset Password",
     "ResetPasswordSuccess": "Reset password successfully",
-    "NewPassword": "New Password"
+    "NewPassword": "New Password",
+    "SignUpSuccess": "Sign up successfully"
   },
   "Time": "Time",
   "CreateTime": "Created",
@@ -328,6 +329,8 @@
   "payment status": "Payment status",
   "Monthly": "Monthly",
   "CreateFolder": "New Folder",
-  "Or": "or",
-  "BeforeunloadTip": "Are you sure you want to leave the current editing page?"
-}
+  "Or": "Or",
+  "Generating": "Generating",
+  "Start": "Start",
+  "TryLafAI": "Try 🎉 Laf AI !"
+}

web/public/locales/en/translation.json

@@ -88,7 +88,6 @@
     "DeploySuccess": "发布成功",
     "Description": "函数描述",
     "EditFunction": "编辑函数",
-    "EmptyText": "暂无函数信息,",
     "Function": "函数",
     "FunctionList": "函数列表",
     "FunctionName": "函数名",
@@ -106,7 +105,9 @@
     "EmptyDebugTip": "暂无运行结果",
     "EmptyFunctionTip": "您还没有创建函数",
     "UploadButton": "上传",
-    "LeaveFunctionPage": "即将离开函数编辑页面"
+    "LeaveFunctionPage": "即将离开函数编辑页面",
+    "PromptDescription": "使用自然语言描述你的需求, laf 会帮你生成代码, 例如: 写一个 hello world ,返回 {hello: 'laf AI'}",
+    "CreateWithAITip": "使用 AI 辅助创建函数"
   },
   "HomePanel": {
     "APP": "Android or iOS 应用",
@@ -308,10 +309,10 @@
     "PasswordNotMatch": "两次输入的密码不一致",
     "SmsCodeSendSuccess": "验证码发送成功",
     "ValidationCodePlaceholder": "请输入验证码",
-    "SignupSuccess": "注册成功",
     "ResetPassword": "重置密码",
     "ResetPasswordSuccess": "重置密码成功",
-    "NewPassword": "新密码"
+    "NewPassword": "新密码",
+    "SignUpSuccess": "注册成功"
   },
   "Time": "时间",
   "CreateTime": "创建时间",
@@ -329,5 +330,7 @@
   "Monthly": "月",
   "CreateFolder": "新建文件夹",
   "Or": "或",
-  "BeforeunloadTip": "确定要离开当前编辑页面吗?"
-}
+  "Generating": "正在生成",
+  "Start": "开始生成",
+  "TryLafAI": "试试 🎉 Laf AI !"
+}

web/public/locales/zh-CN/translation.json

@@ -88,7 +88,6 @@
     "DeploySuccess": "发布成功",
     "Description": "函数描述",
     "EditFunction": "编辑函数",
-    "EmptyText": "暂无函数信息,",
     "Function": "函数",
     "FunctionList": "函数列表",
     "FunctionName": "函数名",
@@ -106,7 +105,9 @@
     "EmptyDebugTip": "暂无运行结果",
     "EmptyFunctionTip": "您还没有创建函数",
     "UploadButton": "上传",
-    "LeaveFunctionPage": "即将离开函数编辑页面"
+    "LeaveFunctionPage": "即将离开函数编辑页面",
+    "PromptDescription": "使用自然语言描述你的需求, laf 会帮你生成代码, 例如: 写一个 hello world ,返回 {hello: 'laf AI'}",
+    "CreateWithAITip": "使用 AI 辅助创建函数"
   },
   "HomePanel": {
     "APP": "Android or iOS 应用",
@@ -308,10 +309,10 @@
     "PasswordNotMatch": "两次输入的密码不一致",
     "SmsCodeSendSuccess": "验证码发送成功",
     "ValidationCodePlaceholder": "请输入验证码",
-    "SignupSuccess": "注册成功",
     "ResetPassword": "重置密码",
     "ResetPasswordSuccess": "重置密码成功",
-    "NewPassword": "新密码"
+    "NewPassword": "新密码",
+    "SignUpSuccess": "注册成功"
   },
   "Time": "时间",
   "CreateTime": "创建时间",
@@ -329,5 +330,7 @@
   "Monthly": "月",
   "CreateFolder": "新建文件夹",
   "Or": "或",
-  "BeforeunloadTip": "确定要离开当前编辑页面吗?"
-}
+  "Generating": "正在生成",
+  "Start": "开始生成",
+  "TryLafAI": "试试 🎉 Laf AI !"
+}

web/public/locales/zh/translation.json

@@ -88,12 +88,22 @@ const updateModel = (path: string, value: string, editorRef: any) => {
 function FunctionEditor(props: {
   value: string;
   className?: string;
-  onChange: (value: string | undefined) => void;
+  onChange?: (value: string | undefined) => void;
   path: string;
   height?: string;
   colorMode?: string;
+  readOnly?: boolean;
 }) {
-  const { value, onChange, path, height = "100%", className, colorMode = "light" } = props;
+  const {
+    value,
+    onChange,
+    path,
+    height = "100%",
+    className,
+    colorMode = "light",
+    readOnly = false,
+  } = props;
+
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>();
   const subscriptionRef = useRef<monaco.IDisposable | undefined>(undefined);
   const monacoEl = useRef(null);
@@ -104,6 +114,7 @@ function FunctionEditor(props: {
         minimap: {
           enabled: false,
         },
+        readOnly: readOnly,
         language: "typescript",
         automaticLayout: true,
         scrollbar: {
@@ -124,7 +135,7 @@ function FunctionEditor(props: {
     }
 
     return () => {};
-  }, [colorMode, path, value]);
+  }, [colorMode, path, readOnly, value]);
 
   useEffect(() => {
     if (monacoEl && editorRef.current) {

web/public/logo.png

@@ -4,6 +4,7 @@
 
 import { useTranslation } from "react-i18next";
 import { FiGithub } from "react-icons/fi";
+import { useColorMode } from "@chakra-ui/react";
 
 import UserSetting from "./UserSetting";
 
@@ -12,11 +13,17 @@ import useGlobalStore from "@/pages/globalStore";
 export default function Header(props: { size: "sm" | "lg" }) {
   const { userInfo } = useGlobalStore((state) => state);
   const { t } = useTranslation();
+  const { colorMode } = useColorMode();
 
   return (
     <div className="flex justify-between px-10 py-4 h-[60px]">
       <div className="flex items-center">
-        <img src="/logo.png" alt="logo" width={30} className="mr-4" />
+        <img
+          src={colorMode === "dark" ? "/logo_light.png" : "/logo_text.png"}
+          alt="logo"
+          width={80}
+          className="mr-4"
+        />
         <a
           href="https://github.com/labring/laf"
           className="flex items-center ml-2 p-2 py-1 text-base text-gray-700 hover:text-black bg-white rounded-md"

web/public/logo_light.png

@@ -1,6 +1,6 @@
+import { useTranslation } from "react-i18next";
 import { HStack, Input, useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
-import { t } from "i18next";
 
 import CopyText from "@/components/CopyText";
 import FunctionEditor from "@/components/Editor/FunctionEditor";
@@ -11,6 +11,7 @@ import { useFunctionListQuery } from "../../service";
 import useFunctionStore from "../../store";
 import DeployButton from "../DeployButton";
 import CreateModal from "../FunctionPanel/CreateModal";
+import PromptModal from "../FunctionPanel/CreateModal/PromptModal";
 
 import FunctionDetailPopOver from "./FunctionDetailPopOver";
 
@@ -20,6 +21,7 @@ function EditorPanel() {
   const store = useFunctionStore((store) => store);
   const { currentFunction, updateFunctionCode, getFunctionUrl } = store;
   const { colorMode } = useColorMode();
+  const { t } = useTranslation();
   const functionCache = useFunctionCache();
 
   const functionListQuery = useFunctionListQuery();
@@ -33,7 +35,7 @@ function EditorPanel() {
             "border-lafWhite-400": !darkMode,
           })}
         >
-          <HStack maxW={"60%"} spacing={2}>
+          <HStack maxW={"55%"} spacing={2}>
             <CopyText className="font-bold text-xl" text={currentFunction?.name}>
               <span>{currentFunction?.name}</span>
             </CopyText>
@@ -44,15 +46,15 @@ function EditorPanel() {
                 <span className="flex-none inline-block w-2 h-2 rounded-full bg-warn-700"></span>
               )}
             {currentFunction?.desc ? (
-              <span className="text-slate-400 font-normal whitespace-nowrap overflow-hidden">
+              <span className="text-slate-400 font-normal whitespace-nowrap overflow-hidden text-ellipsis">
                 {currentFunction?.desc}
               </span>
             ) : null}
           </HStack>
 
           <HStack spacing={1}>
             <CopyText text={getFunctionUrl()}>
-              <Input minW={"260px"} size="sm" readOnly value={getFunctionUrl()} />
+              <Input w={"240px"} size="sm" readOnly value={getFunctionUrl()} />
             </CopyText>
 
             <DeployButton />
@@ -62,14 +64,23 @@ function EditorPanel() {
 
       {!functionListQuery.isFetching && functionListQuery.data?.data?.length === 0 && (
         <EmptyBox>
-          <div>
-            {t("FunctionPanel.EmptyText")}
-            <CreateModal key="create_modal_new">
-              <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
-                {t("CreateNow")}
-              </span>
-            </CreateModal>
-          </div>
+          <>
+            <div className="flex justify-center items-center">
+              <CreateModal key="create_modal_new">
+                <span className="ml-2 text-primary-600 border-b-2 border-b-transparent hover:border-primary-600 cursor-pointer">
+                  {t("CreateNow")}
+                </span>
+              </CreateModal>
+
+              <p className="mx-2 mb-[2px]">{t("Or")}</p>
+
+              <PromptModal>
+                <span className="text-primary-600 font-bold border-b-2 border-b-transparent hover:border-primary-600  cursor-pointer">
+                  {t("TryLafAI")}
+                </span>
+              </PromptModal>
+            </div>
+          </>
         </EmptyBox>
       )}