Skip to content

D
dify
Commit 3b190467 authored by JzoNg's avatar JzoNg
Browse files
Options

update i18n and style of creatioin from app template

parent 804a0904
Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 72 deletions
web/app/(commonLayout)/apps/NewAppCard.tsx
View file @ 3b190467
......@@ -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
View file @ 3b190467
......@@ -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
View file @ 3b190467
......@@ -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
View file @ 3b190467
'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 deleted 100644 → 0
View file @ 804a0904
.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;
}
\ No newline at end of file
web/i18n/pt-BR/app.ts
View file @ 3b190467
......@@ -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
View file @ 3b190467
......@@ -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
View file @ 3b190467
......@@ -18,7 +18,6 @@ const translation = {
join: '参与社区',
communityIntro: '与团队成员、贡献者和开发者在不同频道中交流',
roadmap: '产品路线图',
appNamePlaceholder: '请输入应用名称',
newApp: {
startFromBlank: '开始创建新应用',
startFromTemplate: '从应用模版创建',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment