App template market (#2337)

* feat: add app template market (#2012)

* feat: add app template market

* fix

* fix

* i18n

* fix

* perf: template market ux

* perf: simple mode app ui

* perf: tempalte modal ui

* perf: tempalte market ui

* perf: template position

* feat: create app modal

* regiter default app

* perf: icon

* change templates position (#2331)

* change templates position

* fix

* perf: template market ux

---------

Co-authored-by: heheer <heheer@sealos.io>

packages/web/components/common/Icon/constants.ts

@@ -61,6 +61,7 @@ export const iconPaths = {
   'common/text/t': () => import('./icons/common/text/t.svg'),
   'common/tickFill': () => import('./icons/common/tickFill.svg'),
   'common/trash': () => import('./icons/common/trash.svg'),
+  'common/upRightArrowLight': () => import('./icons/common/upRightArrowLight.svg'),
   'common/uploadFileFill': () => import('./icons/common/uploadFileFill.svg'),
   'common/viewLight': () => import('./icons/common/viewLight.svg'),
   'common/voiceLight': () => import('./icons/common/voiceLight.svg'),

packages/web/components/common/Icon/icons/common/searchLight.svg

@@ -1,8 +1,3 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694224177076"
-    class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3984"
-    xmlns:xlink="http://www.w3.org/1999/xlink" width="64.125" height="64">
-    <path
-        d="M989.365124 873.455175c21.85764 24.973422 33.760499 46.831061 35.714294 65.567202 1.948078 18.730424-5.271103 37.076377-21.661831 55.026425-18.736141 21.075836-39.416072 31.030616-62.055515 29.858625-22.633727-1.171991-44.491366-10.344968-65.567202-27.513213L679.093265 806.715982c-35.128298 22.633727-72.786383 40.197876-112.989976 52.68673-40.197876 12.488855-82.545355 18.730424-127.036721 18.730424-60.882095 0-117.863745-11.512672-170.940663-34.536586-53.078347-23.029631-99.523509-54.446147-139.331197-94.252406-39.811976-39.811976-71.228492-86.25285-94.252406-139.329768C11.512672 556.93603 0 499.950092 0 439.066568c0-60.883524 11.512672-117.863745 34.542303-170.940663 23.023914-53.078347 54.44043-99.523509 94.252406-139.331197 39.807688-39.811976 86.25285-71.228492 139.331197-94.252406 53.076918-23.029631 110.058568-34.542303 170.940663-34.542303 60.883524 0 117.869462 11.512672 170.94638 34.542303 53.078347 23.023914 99.517792 54.44043 139.329768 94.252406 39.807688 39.807688 71.222775 86.25285 94.252406 139.331197 23.023914 53.076918 34.536586 110.057139 34.536586 170.940663 0 46.054974-6.633185 89.764536-19.903844 131.134403s-32.002511 79.619664-56.198417 114.742246l38.639985 38.639985c18.730424 18.730424 38.439889 38.249797 59.124108 58.543829s39.61188 39.416072 56.784413 57.371837C973.754771 857.448917 984.680017 868.771497 989.365124 873.455175L989.365124 873.455175zM443.751675 731.779995c40.588063 0 78.83786-7.609369 114.742246-22.829535 35.904385-15.224454 67.13081-36.105911 93.66641-62.641511 26.541317-26.541317 47.422774-57.762025 62.641511-93.66641 15.218737-35.910102 22.835252-74.154183 22.835252-114.747963 0-40.589492-7.615086-78.832143-22.835252-114.742246-15.218737-35.905815-36.100194-67.125093-62.641511-93.667839-26.5356-26.5356-57.762025-47.415628-93.66641-62.641511-35.904385-15.218737-74.154183-22.828106-114.742246-22.828106-40.589492 0-78.83929 7.609369-114.743675 22.828106-35.904385 15.225883-67.129381 36.105911-93.66641 62.641511-26.541317 26.542747-47.422774 57.762025-62.641511 93.667839-15.218737 35.910102-22.829535 74.152753-22.829535 114.742246 0 40.59378 7.610798 78.83786 22.829535 114.747963 15.218737 35.904385 36.100194 67.125093 62.641511 93.66641 26.53703 26.5356 57.762025 47.417057 93.66641 62.641511C364.912385 724.170627 403.162183 731.779995 443.751675 731.779995L443.751675 731.779995zM443.751675 731.779995"
-        p-id="3985"></path>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16" >
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.98468 2.66665C5.40735 2.66665 3.31801 4.75598 3.31801 7.33331C3.31801 9.91064 5.40735 12 7.98468 12C9.24198 12 10.3831 11.5028 11.2223 10.6942C11.2398 10.6714 11.259 10.6495 11.2799 10.6286C11.3008 10.6077 11.3228 10.5885 11.3456 10.5709C12.1541 9.73178 12.6513 8.59061 12.6513 7.33331C12.6513 4.75598 10.562 2.66665 7.98468 2.66665ZM12.6726 11.0784C13.4937 10.052 13.9847 8.74999 13.9847 7.33331C13.9847 4.0196 11.2984 1.33331 7.98468 1.33331C4.67097 1.33331 1.98468 4.0196 1.98468 7.33331C1.98468 10.647 4.67097 13.3333 7.98468 13.3333C9.40136 13.3333 10.7034 12.8423 11.7298 12.0212L14.1799 14.4714C14.4403 14.7317 14.8624 14.7317 15.1228 14.4714C15.3831 14.211 15.3831 13.7889 15.1228 13.5286L12.6726 11.0784Z" />
 </svg>

packages/web/components/common/Icon/icons/common/upRightArrowLight.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 25 24" >
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.07144 6.34314C9.07144 6.89543 9.51916 7.34315 10.0714 7.34314H16.1425L6.53591 16.9497C6.14539 17.3403 6.14539 17.9734 6.53591 18.364C6.92643 18.7545 7.5596 18.7545 7.95012 18.364L17.5567 8.75736L17.5567 14.8284C17.5567 15.3807 18.0044 15.8284 18.5567 15.8284C19.109 15.8284 19.5567 15.3807 19.5567 14.8284L19.5567 6.34314C19.5567 5.79086 19.109 5.34314 18.5567 5.34315H10.0714C9.51916 5.34314 9.07144 5.79086 9.07144 6.34314Z" />
+</svg>

packages/web/components/common/Input/SearchInput/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { InputGroup, Input, InputProps, Flex } from '@chakra-ui/react';
+import MyIcon from '../../Icon';
+
+const SearchInput = (props: InputProps) => {
+  return (
+    <Flex alignItems={'center'} position={'relative'}>
+      <Input {...props} />
+      <MyIcon name={'common/searchLight'} w={'1rem'} position={'absolute'} left={2} zIndex={10} />
+    </Flex>
+  );
+};
+
+export default SearchInput;

packages/web/components/common/MyMenu/index.tsx

@@ -8,10 +8,10 @@ import {
   MenuButton,
   MenuItemProps
 } from '@chakra-ui/react';
-import MyIcon from '../Icon';
 import MyDivider from '../MyDivider';
 import type { IconNameType } from '../Icon/type';
 import { useSystem } from '../../../hooks/useSystem';
+import Avatar from '../Avatar';
 
 export type MenuItemType = 'primary' | 'danger';
 
@@ -172,7 +172,7 @@ const MyMenu = ({
                     _notLast={{ mb: 0.5 }}
                     {...typeMapStyle[child.type || 'primary']}
                   >
-                    {!!child.icon && <MyIcon name={child.icon as any} w={iconSize} mr={3} />}
+                    {!!child.icon && <Avatar src={child.icon as any} w={iconSize} mr={3} />}
                     <Box>
                       <Box color={child.description ? 'myGray.900' : 'inherit'} fontSize={'sm'}>
                         {child.label}

packages/web/components/common/MyModal/index.tsx

@@ -9,7 +9,6 @@ import {
   Box,
   Image
 } from '@chakra-ui/react';
-import MyIcon from '../Icon';
 import MyBox from '../MyBox';
 import { useSystem } from '../../../hooks/useSystem';
 import Avatar from '../Avatar';

packages/web/components/common/Textarea/PromptEditor/Editor.tsx

@@ -35,7 +35,8 @@ export default function Editor({
   onBlur,
   value,
   placeholder = '',
-  isFlow
+  isFlow,
+  bg = 'white'
 }: {
   h?: number;
   maxLength?: number;
@@ -49,6 +50,7 @@ export default function Editor({
   value?: string;
   placeholder?: string;
   isFlow?: boolean;
+  bg?: string;
 }) {
   const [key, setKey] = useState(getNanoid(6));
   const [_, startSts] = useTransition();
@@ -95,6 +97,7 @@ export default function Editor({
       h={`${height}px`}
       cursor={'text'}
       color={'myGray.700'}
+      bg={focus ? 'white' : bg}
     >
       <LexicalComposer initialConfig={initialConfig} key={key}>
         <PlainTextPlugin

packages/web/components/common/Textarea/PromptEditor/index.module.scss

@@ -5,7 +5,7 @@
   border: 1px solid rgb(232, 235, 240);
   border-radius: var(--chakra-radii-md);
   padding: 8px 12px;
-  background: #fff;
+  // background: #fff;
 
   font-size: var(--chakra-fontSizes-sm);
   overflow-y: auto;
@@ -18,7 +18,7 @@
   border: 1px solid var(--chakra-colors-myGray-200);
   border-radius: var(--chakra-radii-sm);
   padding: 6px 8px;
-  background: #fff;
+  // background: #fff;
   font-size: var(--chakra-fontSizes-sm);
   overflow-y: auto;
 }

packages/web/components/common/Textarea/PromptEditor/index.tsx

@@ -1,4 +1,4 @@
-import { Button, ModalBody, ModalFooter, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, ModalBody, ModalFooter, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 import { editorStateToText } from './utils';
 import Editor from './Editor';
@@ -20,7 +20,8 @@ const PromptEditor = ({
   maxLength,
   placeholder,
   title,
-  isFlow
+  isFlow,
+  bg = 'white'
 }: {
   showOpenModal?: boolean;
   showResize?: boolean;
@@ -34,6 +35,7 @@ const PromptEditor = ({
   placeholder?: string;
   title?: string;
   isFlow?: boolean;
+  bg?: string;
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
@@ -62,6 +64,7 @@ const PromptEditor = ({
         onBlur={onBlurInput}
         placeholder={placeholder}
         isFlow={isFlow}
+        bg={bg}
       />
       <MyModal isOpen={isOpen} onClose={onClose} iconSrc="modal/edit" title={title} w={'full'}>
         <ModalBody>

packages/web/i18n/en/app.json

@@ -18,6 +18,9 @@
   "confirm_delete_folder_tip": "Are you sure to delete this folder? All the following applications and corresponding chat records will be deleted, please confirm!",
   "copy_one_app": "Copy",
   "create_copy_success": "Create copy success",
+  "create_empty_app": "Create default app",
+  "create_empty_plugin": "Create default plugin",
+  "create_empty_workflow": "Create default workflow",
   "cron": {
     "every_day": "Executed every day",
     "every_month": "Executed monthly",
@@ -84,6 +87,22 @@
   "template": {
     "simple_robot": "Simple Robot"
   },
+  "templateMarket": {
+    "Search_template": "Search template",
+    "Template_market": "Template market",
+    "Use": "Use",
+    "no_intro": "No intro~",
+    "templateTags": {
+      "Image_generation": "Image generation",
+      "Office_services": "Office searvices",
+      "Roleplay": "Roleplay",
+      "Web_search": "Web search",
+      "Writing": "Writing"
+    }
+  },
+  "template_market": "Templates",
+  "template_market_description": "Explore more ways to play in the template market, configuration tutorials and usage guides will help you understand and get started with various applications.",
+  "template_market_empty_data": "No suitable template found",
   "time_zone": "Time zone",
   "tool_input_param_tip": "Configure related information before the plugin runs properly",
   "transition_to_workflow": "Transition to workflow",
@@ -91,7 +110,7 @@
   "transition_to_workflow_create_new_tip": "After converting to workflow, it will not be able to convert back to simple mode, please confirm!",
   "type": {
     "All": "All",
-    "Create http plugin tip": "Create plug-ins in batches using OpenAPI schema, compatible with GPTs format.",
+    "Create http plugin tip": "Create plug-ins in batches using OpenAPI schema, compatible with GPTs format",
     "Create one plugin tip": "The input and output workflows can be customized",
     "Create plugin bot": "Create plugin bot",
     "Create simple bot": "Create simple bot",
@@ -101,6 +120,7 @@
     "Http plugin": "Http plugin",
     "Plugin": "Plugin",
     "Simple bot": "Simple bot",
+    "Template": "Create by template",
     "Workflow bot": "Workflow"
   },
   "upload_file_max_amount": "Max files",

packages/web/i18n/en/common.json

@@ -271,6 +271,7 @@
     }
   },
   "confirm_choice": "Confirm selection",
+  "contribute_app_template": "Contribution template",
   "core": {
     "Chat": "Chat",
     "Max Token": "Max token per data",
@@ -1431,5 +1432,6 @@
     },
     "type": "type"
   },
-  "verification": "verify"
+  "verification": "verify",
+  "xx_search_result": "{{key}} Search results"
 }

packages/web/i18n/zh/app.json

@@ -18,6 +18,9 @@
   "confirm_delete_folder_tip": "确认删除该文件夹？将会删除它下面所有应用及对应的聊天记录，请确认！",
   "copy_one_app": "创建副本",
   "create_copy_success": "创建副本成功",
+  "create_empty_app": "创建空白应用",
+  "create_empty_plugin": "创建空白插件",
+  "create_empty_workflow": "创建空白工作流",
   "cron": {
     "every_day": "每天执行",
     "every_month": "每月执行",
@@ -84,6 +87,23 @@
   "template": {
     "simple_robot": "简易机器人"
   },
+  "templateMarket": {
+    "Search_template": "搜索模板",
+    "Template_market": "模板市场",
+    "Use": "使用",
+    "no_intro": "还没有介绍～",
+    "templateTags": {
+      "Image_generation": "图片生成",
+      "Office_services": "办公服务",
+      "Recommendation": "推荐",
+      "Roleplay": "角色扮演",
+      "Web_search": "联网搜索",
+      "Writing": "文本创作"
+    }
+  },
+  "template_market": "模板市场",
+  "template_market_description": "在模板市场探索更多玩法，配置教程与使用引导，带你理解并上手各种应用",
+  "template_market_empty_data": "找不到合适的模板",
   "time_zone": "时区",
   "tool_input_param_tip": "该插件正常运行需要配置相关信息",
   "transition_to_workflow": "转成工作流",
@@ -91,16 +111,18 @@
   "transition_to_workflow_create_new_tip": "转化成工作流后，将无法转化回简易模式，请确认！",
   "type": {
     "All": "全部",
-    "Create http plugin tip": "通过 OpenAPI Schema 批量创建插件，兼容 GPTs 格式。",
+    "Create http plugin tip": "通过 OpenAPI Schema 批量创建插件，兼容 GPTs 格式",
     "Create one plugin tip": "可以自定义输入和输出的工作流，通常用于封装重复使用的工作流",
     "Create plugin bot": "创建插件",
     "Create simple bot": "创建简易应用",
     "Create simple bot tip": "通过填表单形式，创建简单的 AI 应用，适合新手",
+    "Create template tip": "在模板市场探索更多玩法，带你理解并上手各种应用",
     "Create workflow bot": "创建工作流",
     "Create workflow tip": "通过低代码的方式，构建逻辑复杂的多轮对话 AI 应用，推荐高级玩家使用",
     "Http plugin": "HTTP 插件",
     "Plugin": "插件",
     "Simple bot": "简易应用",
+    "Template": "通过模板创建",
     "Workflow bot": "工作流"
   },
   "upload_file_max_amount": "最大文件数量",

packages/web/i18n/zh/common.json

@@ -273,6 +273,7 @@
     }
   },
   "confirm_choice": "确认选择",
+  "contribute_app_template": "贡献模板",
   "core": {
     "Chat": "对话",
     "Max Token": "单条数据上限",
@@ -359,6 +360,14 @@
       "logs": {
         "Source And Time": "来源 & 时间"
       },
+      "more": "查看更多",
+      "navbar": {
+        "External": "外部使用",
+        "Flow mode": "高级编排",
+        "Publish": "发布",
+        "Publish app": "发布应用",
+        "Simple mode": "简易配置"
+      },
       "no_app": "还没有应用，快去创建一个吧！",
       "not_published": "未发布",
       "outLink": {
@@ -598,7 +607,8 @@
             "success": "开始同步"
           }
         },
-        "training": {}
+        "training": {
+        }
       },
       "data": {
         "Auxiliary Data": "辅助数据",
@@ -1437,5 +1447,6 @@
     },
     "type": "类型"
   },
-  "verification": "验证"
+  "verification": "验证",
+  "xx_search_result": "{{key}} 的搜索结果"
 }