update i18n and style of creatioin from app template

web/app/(commonLayout)/apps/NewAppCard.tsx

@@ -17,7 +17,7 @@ const CreateAppCard = forwardRef<HTMLAnchorElement, CreateAppCardProps>(({ onSuc
   const { t } = useTranslation()
   const { onPlanInfoChanged } = useProviderContext()
 
-  const [showNewAppDialog, setShowNewAppDialog] = useState(true)
+  const [showNewAppDialog, setShowNewAppDialog] = useState(false)
   const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
   return (
     <a

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -2,15 +2,12 @@
 
 import type { MouseEventHandler } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
-// import useSWR from 'swr'
 import cn from 'classnames'
 import { useRouter } from 'next/navigation'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-// import Dialog from '@/app/components/base/dialog'
 import Modal from '@/app/components/base/modal'
-// import Input from '@/app/components/base/input'
 // import type { AppMode } from '@/types/app'
 import { ToastContext } from '@/app/components/base/toast'
 // import { createApp, fetchAppTemplates } from '@/service/apps'

web/app/components/explore/app-list/index.tsx

@@ -60,7 +60,7 @@ const Apps = ({
 
   const [currApp, setCurrApp] = React.useState<App | null>(null)
   const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
-  const onCreate: CreateAppModalProps['onConfirm'] = async ({ name, icon, icon_background }) => {
+  const onCreate: CreateAppModalProps['onConfirm'] = async ({ name, icon, icon_background, description }) => {
     const { app_model_config: model_config } = await fetchAppDetail(currApp?.app.id as string)
 
     try {
@@ -69,6 +69,7 @@ const Apps = ({
         icon,
         icon_background,
         mode: currApp?.app.mode as AppMode,
+        description,
         config: model_config,
       })
       setIsShowCreateModal(false)

web/app/components/explore/create-app-modal/index.tsx

@@ -1,8 +1,6 @@
 'use client'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
-import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
@@ -10,6 +8,8 @@ import AppIcon from '@/app/components/base/app-icon'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import { useProviderContext } from '@/context/provider-context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
+
 export type CreateAppModalProps = {
   appName: string
   show: boolean
@@ -17,6 +17,7 @@ export type CreateAppModalProps = {
     name: string
     icon: string
     icon_background: string
+    description: string
   }) => Promise<void>
   onHide: () => void
 }
@@ -30,9 +31,9 @@ const CreateAppModal = ({
   const { t } = useTranslation()
 
   const [name, setName] = React.useState(appName)
-
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const [emoji, setEmoji] = useState({ icon: '🤖', icon_background: '#FFEAD5' })
+  const [description, setDescription] = useState('')
 
   const { plan, enableBilling } = useProviderContext()
   const isAppsFull = (enableBilling && plan.usage.buildApps >= plan.total.buildApps)
@@ -45,6 +46,7 @@ const CreateAppModal = ({
     onConfirm({
       name,
       ...emoji,
+      description,
     })
     onHide()
   }
@@ -53,20 +55,46 @@ const CreateAppModal = ({
     <>
       <Modal
         isShow={show}
-        onClose={() => { }}
+        onClose={() => {}}
         wrapperClassName='z-40'
-        className={cn(s.modal, '!max-w-[480px]', 'px-8')}
+        className='relative !max-w-[480px] px-8'
       >
-        <span className={s.close} onClick={onHide} />
-        <div className={s.title}>{t('explore.appCustomize.title', { name: appName })}</div>
-        <div className={s.content}>
-          <div className={s.subTitle}>{t('explore.appCustomize.subTitle')}</div>
-          <div className='flex items-center justify-between space-x-3'>
-            <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
-            <input
-              value={name}
-              onChange={e => setName(e.target.value)}
-              className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
+        <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>
+          <XClose className='w-4 h-4 text-gray-500' />
+        </div>
+        <div className='mb-9 font-semibold text-xl leading-[30px] text-gray-900'>{t('explore.appCustomize.title', { name: appName })}</div>
+        <div className='mb-9'>
+          {/* icon & name */}
+          <div className='pt-2'>
+            <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.newApp.captionName')}</div>
+            <div className='flex items-center justify-between space-x-3'>
+              <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
+              <input
+                value={name}
+                onChange={e => setName(e.target.value)}
+                placeholder={t('app.newApp.appNamePlaceholder') || ''}
+                className='grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs'
+              />
+            </div>
+            {showEmojiPicker && <EmojiPicker
+              onSelect={(icon, icon_background) => {
+                setEmoji({ icon, icon_background })
+                setShowEmojiPicker(false)
+              }}
+              onClose={() => {
+                setEmoji({ icon: '🤖', icon_background: '#FFEAD5' })
+                setShowEmojiPicker(false)
+              }}
+            />}
+          </div>
+          {/* description */}
+          <div className='pt-2'>
+            <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.newApp.captionDescription')}</div>
+            <textarea
+              className='w-full h-10 px-3 py-2 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs h-[80px] resize-none'
+              placeholder={t('app.newApp.appDescriptionPlaceholder') || ''}
+              value={description}
+              onChange={e => setDescription(e.target.value)}
             />
           </div>
           {isAppsFull && <AppsFull loc='app-explore-create' />}

web/app/components/explore/create-app-modal/style.module.css

@@ -1,36 +0,0 @@
-.modal {
-  position: relative;
-}
-
-.modal .close {
-  position: absolute;
-  right: 16px;
-  top: 25px;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: center no-repeat url(~@/app/components/datasets/create/assets/close.svg);
-  background-size: 16px;
-  cursor: pointer;
-}
-
-.modal .title {
-  @apply mb-9;
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 30px;
-  color: #101828;
-}
-
-.modal .content {
-  @apply mb-9;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: #101828;
-}
-
-.subTitle {
-  margin-bottom: 8px;
-  font-weight: 500;
-}

web/i18n/pt-BR/app.ts

@@ -6,10 +6,6 @@ const translation = {
     agent: 'Agente',
     workflow: 'Fluxo de trabalho',
   },
-  modes: {
-    completion: 'Gerador de Texto',
-    chat: 'Aplicativo de Chat',
-  },
   duplicate: 'Duplicar',
   duplicateTitle: 'Duplicate aplicativo',
   export: 'Exportar DSL',
@@ -23,13 +19,20 @@ const translation = {
   communityIntro:
     'Discuta com membros da equipe, colaboradores e desenvolvedores em diferentes canais.',
   roadmap: 'Veja nosso roteiro',
-  appNamePlaceholder: 'Por favor, digite o nome do aplicativo',
   newApp: {
-    startToCreate: 'Vamos começar com o seu novo aplicativo',
-    captionName: 'Dê um nome ao seu aplicativo',
+    startFromBlank: 'Começar de um aplicativo em branco',
+    startFromTemplate: 'Começar a partir de um modelo',
     captionAppType: 'Que tipo de aplicativo você deseja?',
+    chatbotDescription: 'Construir um assistente baseado em chat usando um Modelo de Linguagem de Grande Escala',
+    agentDescription: 'Construir um Agente inteligente que pode escolher autonomamente ferramentas para completar as tarefas',
+    workflowDescription: 'Description text here',
+    captionName: 'Dê um nome ao seu aplicativo',
+    appNamePlaceholder: 'Dê um nome ao seu aplicativo',
+    captionDescription: 'Descrição',
+    appDescriptionPlaceholder: 'Enter the description of the app',
+    useTemplate: 'Insira a descrição do aplicativo',
     previewDemo: 'Visualizar demonstração',
-    chatApp: 'Aplicativo de Chat',
+    chatApp: 'Usar este modelo',
     chatAppIntro:
       'Quero construir um aplicativo baseado em chat. Este aplicativo usa um formato de pergunta e resposta, permitindo várias rodadas de conversa contínua.',
     agentAssistant: 'Assistente de novo agente',

web/i18n/uk-UA/app.ts

@@ -6,10 +6,6 @@ const translation = { // Add the Ukrainian translation object
     agent: 'Агент',
     workflow: 'Робочий Процес',
   },
-  modes: {
-    completion: 'Генератор тексту',
-    chat: 'Базовий асистент',
-  },
   duplicate: 'Дублювати',
   duplicateTitle: 'Дублювати додаток',
   export: 'Експортувати DSL',
@@ -23,11 +19,18 @@ const translation = { // Add the Ukrainian translation object
   communityIntro:
       'Обговорюйте різні питання з членами команди, учасниками та розробниками на різних каналах.',
   roadmap: 'Ознайомтеся з нашою дорожньою картою',
-  appNamePlaceholder: 'Будь ласка, введіть назву додатка',
   newApp: {
-    startToCreate: 'Давайте створимо Ваш новий додаток',
-    captionName: 'Значок та назва додатка',
+    startFromBlank: 'Розпочати з порожнього додатку',
+    startFromTemplate: 'Розпочати з шаблону',
     captionAppType: 'Який тип додатка Ви бажаєте створити?',
+    chatbotDescription: 'Побудувати чат-асистента, використовуючи Модель Великої Мови',
+    agentDescription: 'Побудувати розумного Агента, який може автономно обирати інструменти для виконання завдань',
+    workflowDescription: 'Description text here',
+    captionName: 'Значок та назва додатка',
+    appNamePlaceholder: 'Назвіть свій додаток',
+    captionDescription: 'Опис',
+    appDescriptionPlaceholder: 'Введіть опис додатку',
+    useTemplate: 'Використати цей шаблон',
     previewDemo: 'Попередній перегляд демо',
     chatApp: 'Асистент',
     chatAppIntro:

web/i18n/zh-Hans/app.ts

@@ -18,7 +18,6 @@ const translation = {
   join: '参与社区',
   communityIntro: '与团队成员、贡献者和开发者在不同频道中交流',
   roadmap: '产品路线图',
-  appNamePlaceholder: '请输入应用名称',
   newApp: {
     startFromBlank: '开始创建新应用',
     startFromTemplate: '从应用模版创建',