opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

app creation

This commit is contained in:
JzoNg 2024-03-02 16:47:43 +08:00
parent 93d116a9d0
commit 4c7941adef
15 changed files with 204 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/app/(commonLayout)/apps/AppModeLabel.tsx
View File

@ -2,7 +2,7 @@
import { useTranslation } from 'react-i18next'
import { type AppMode } from '@/types/app'
import { CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
import { AiText, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
import { BubbleText } from '@/app/components/base/icons/src/vender/solid/education'
import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
@ -17,13 +17,19 @@ const AppModeLabel = ({
return (
<>
{mode === 'chat' && (
<div className='inline-flex items-center px-2 h-6 rounded-md bg-indigo-25 border border-indigo-100 text-xs text-indigo-600'>
{mode === 'completion' && (
<div className='inline-flex items-center px-2 h-6 rounded-md bg-gray-50 border border-gray-100 text-xs text-gray-500'>
<AiText className='mr-1 w-3 h-3' />
{t('app.types.completion')}
</div>
)}
{(mode === 'chat' || mode === 'advanced-chat') && (
<div className='inline-flex items-center px-2 h-6 rounded-md bg-blue-25 border border-blue-100 text-xs text-blue-600'>
<BubbleText className='mr-1 w-3 h-3' />
{t('app.types.chatbot')}
</div>
)}
{mode === 'agent' && (
{mode === 'agent-chat' && (
<div className='inline-flex items-center px-2 h-6 rounded-md bg-indigo-25 border border-indigo-100 text-xs text-indigo-600'>
<CuteRobote className='mr-1 w-3 h-3' />
{t('app.types.agent')}

3
web/app/(commonLayout)/apps/Apps.tsx
View File

@ -49,10 +49,11 @@ const Apps = () => {
)
const anchorRef = useRef<HTMLDivElement>(null)
// #TODO# query key ???
const options = [
{ value: 'all', text: t('app.types.all') },
{ value: 'chat', text: t('app.types.chatbot') },
{ value: 'agent', text: t('app.types.agent') },
{ value: 'agent-chat', text: t('app.types.agent') },
{ value: 'workflow', text: t('app.types.workflow') },
]

2
web/app/(commonLayout)/apps/NewAppCard.tsx
View File

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

143
web/app/components/app/create-app-dialog/appForm.tsx
View File

@ -15,9 +15,10 @@ import Button from '@/app/components/base/button'
import AppIcon from '@/app/components/base/app-icon'
import EmojiPicker from '@/app/components/base/emoji-picker'
import AppsFull from '@/app/components/billing/apps-full-in-dialog'
import { BubbleText } from '@/app/components/base/icons/src/vender/solid/education'
import { CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
import { ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/line/communication'
import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
import TooltipPlus from '@/app/components/base/tooltip-plus'
export type AppFormProps = {
onConfirm: () => void
@ -34,7 +35,8 @@ const AppForm = ({
const mutateApps = useContextSelector(AppsContext, state => state.mutateApps)
const [appMode, setAppMode] = useState<AppMode>('chat')
const [appMode, setAppMode] = useState<AppMode>()
const [showChatBotType, setShowChatBotType] = useState<boolean>(false)
const [emoji, setEmoji] = useState({ icon: '🤖', icon_background: '#FFEAD5' })
const [showEmojiPicker, setShowEmojiPicker] = useState(false)
const [name, setName] = useState('')
@ -46,6 +48,10 @@ const AppForm = ({
const isCreatingRef = useRef(false)
const onCreate: MouseEventHandler = useCallback(async () => {
if (!appMode) {
notify({ type: 'error', message: t('app.newApp.appTypeRequired') })
return
}
if (!name.trim()) {
notify({ type: 'error', message: t('app.newApp.nameNotEmpty') })
return
@ -55,17 +61,24 @@ const AppForm = ({
isCreatingRef.current = true
try {
const app = await createApp({
mode: appMode,
name,
description,
icon: emoji.icon,
icon_background: emoji.icon_background,
description,
mode: appMode,
})
notify({ type: 'success', message: t('app.newApp.appCreated') })
onConfirm()
onHide()
mutateApps()
router.push(`/app/${app.id}/${isCurrentWorkspaceManager ? 'configuration' : 'overview'}`)
if (!isCurrentWorkspaceManager) {
router.push(`/app/${app.id}/'overview'`)
}
else {
if (app.mode === 'workflow' || app.mode === 'advanced-chat')
router.push(`/app/${app.id}/'workflow'`)
router.push(`/app/${app.id}/'configuration'`)
}
}
catch (e) {
notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
@ -76,50 +89,96 @@ const AppForm = ({
return (
<div className='overflow-y-auto'>
{/* app type */}
<div className='pt-2 px-8'>
<div className='pt-2 px-8 w-[480px]'>
<div className='py-2 text-sm leading-[20px] font-medium text-gray-900'>{t('app.newApp.captionAppType')}</div>
<div>
<div className='flex gap-2'>
<TooltipPlus
hideArrow
popupContent={
<div className='max-w-[280px] leading-[18px] text-xs text-gray-700'>{t('app.newApp.chatbotDescription')}</div>
}
>
<div
className={cn(
'relative grow w-[133px] px-2 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
showChatBotType && 'bg-white shadow-xs border-[1.5px] border-primary-400 hover:border-[1.5px] hover:border-primary-400',
)}
onClick={() => {
setAppMode('chat')
setShowChatBotType(true)
}}
>
<ChatBot className='w-6 h-6' />
<div className='h-5 text-sm font-medium leading-5'>{t('app.types.chatbot')}</div>
<div className='hidden absolute max-h-[92px] left-[-20px] bottom-[75px] px-3 py-[10px] bg-white rounded-xl shadow-lg border-[0.5px] border-[rgba(0,0,0,0.05)] text-gray-700 text-xs leading-[18px] group-hover:block'>{t('app.newApp.chatbotDescription')}</div>
</div>
</TooltipPlus>
<TooltipPlus
hideArrow
popupContent={
<div className='max-w-[280px] leading-[18px] text-xs text-gray-700'>{t('app.newApp.agentDescription')}</div>
}
>
<div
className={cn(
'relative grow w-[133px] px-2 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
appMode === 'agent-chat' && 'bg-white shadow-xs border-[1.5px] border-primary-400 hover:border-[1.5px] hover:border-primary-400',
)}
onClick={() => {
setAppMode('agent-chat')
setShowChatBotType(false)
}}
>
<CuteRobot className='w-6 h-6' />
<div className='h-5 text-sm font-medium leading-5'>{t('app.types.agent')}</div>
</div>
</TooltipPlus>
<div
className={cn(
'relative mb-2 p-3 pl-[56px] min-h-[84px] bg-gray-25 rounded-xl border-[1.5px] border-gray-100 cursor-pointer hover:border-[#d1e0ff]',
appMode === 'chat' && 'border-primary-400 hover:border-primary-400',
'relative grow flex-[30%] px-2 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
appMode === 'workflow' && 'bg-white shadow-xs border-[1.5px] border-primary-400 hover:border-[1.5px] hover:border-primary-400',
)}
onClick={() => setAppMode('chat')}
onClick={() => {
setAppMode('workflow')
setShowChatBotType(false)
}}
>
<div className='absolute top-3 left-3 w-8 h-8 p-2 bg-indigo-50 rounded-lg'>
<BubbleText className='w-4 h-4 text-indigo-600'/>
</div>
<div className='mb-1 text-sm leading-[20px] font-semibold text-gray-800'>{t('app.types.chatbot')}</div>
<div className='text-xs leading-[18px] text-gray-500'>{t('app.newApp.chatbotDescription')}</div>
</div>
<div
className={cn(
'relative mb-2 p-3 pl-[56px] min-h-[84px] bg-gray-25 rounded-xl border-[1.5px] border-gray-100 cursor-pointer hover:border-[#d1e0ff]',
appMode === 'agent' && 'border-primary-400 hover:border-primary-400',
)}
onClick={() => setAppMode('agent')}
>
<div className='absolute top-3 left-3 w-8 h-8 p-2 bg-indigo-50 rounded-lg'>
<CuteRobote className='w-4 h-4 text-indigo-600'/>
</div>
<div className='mb-1 text-sm leading-[20px] font-semibold text-gray-800'>{t('app.types.agent')}</div>
<div className='text-xs leading-[18px] text-gray-500'>{t('app.newApp.agentDescription')}</div>
</div>
<div
className={cn(
'relative mb-2 p-3 pl-[56px] min-h-[84px] bg-gray-25 rounded-xl border-[1.5px] border-gray-100 cursor-pointer hover:border-[#d1e0ff]',
appMode === 'workflow' && 'border-primary-400 hover:border-primary-400',
)}
onClick={() => setAppMode('workflow')}
>
<div className='absolute top-3 left-3 w-8 h-8 p-2 bg-indigo-50 rounded-lg'>
<Route className='w-4 h-4 text-indigo-600'/>
</div>
<div className='mb-1 text-sm leading-[20px] font-semibold text-gray-800'>{t('app.types.workflow')}</div>
<div className='text-xs leading-[18px] text-gray-500'>{t('app.newApp.workflowDescription')}</div>
<Route className='w-6 h-6' />
<div className='h-5 text-sm font-medium leading-5'>{t('app.types.workflow')}</div>
</div>
</div>
</div>
{showChatBotType && (
<div className='pt-2 px-8 w-[480px]'>
<div className='py-2 text-sm leading-[20px] font-medium text-gray-900'>{t('app.newApp.chatbotType')}</div>
<div className='flex gap-2'>
<div
className={cn(
'relative grow flex-[50%] pl-3 py-2 pr-2 flex justify-between items-center rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
appMode === 'chat' && 'bg-white shadow-xs border-[1.5px] border-primary-400 hover:border-[1.5px] hover:border-primary-400',
)}
onClick={() => {
setAppMode('chat')
}}
>
<div className='h-5 text-sm font-medium leading-5'>{t('app.newApp.basic')}</div>
<HelpCircle className='w-[14px] h-[14px] text-gray-400 hover:text-gray-500' />
</div>
<div
className={cn(
'relative grow flex-[50%] pl-3 py-2 pr-2 flex justify-between items-center rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
appMode === 'advanced-chat' && 'bg-white shadow-xs border-[1.5px] border-primary-400 hover:border-[1.5px] hover:border-primary-400',
)}
onClick={() => {
setAppMode('advanced-chat')
}}
>
<div className='h-5 text-sm font-medium leading-5'>{t('app.newApp.workflow')}</div>
<HelpCircle className='w-[14px] h-[14px] text-gray-400 hover:text-gray-500' />
</div>
</div>
</div>
)}
{/* icon & name */}
<div className='pt-2 px-8'>
<div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.newApp.captionName')}</div>

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

@ -109,7 +109,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose }: CreateFromDSLModalProp
const isAppsFull = (enableBilling && plan.usage.buildApps >= plan.total.buildApps)
const isCreatingRef = useRef(false)
// TODO
// #TODO# use import api
const onCreate: MouseEventHandler = async () => {
if (isCreatingRef.current)
return

5
web/app/components/base/icons/assets/vender/line/communication/cute-robot.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="cute-robot">
<path id="Vector" d="M12 4H7C5.89543 4 5 4.89543 5 6V11C5 12.1046 5.89543 13 7 13H17C18.1046 13 19 12.1046 19 11V6C19 4.89543 18.1046 4 17 4H12ZM12 4V2M6 15L4 17M6 15C6 18.3137 8.68629 21 12 21C15.3137 21 18 18.3137 18 15M6 15V13M18 15L20 17M18 15V13M9 8V9M15 8V9" stroke="#344054" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 478 B

39
web/app/components/base/icons/src/vender/line/communication/CuteRobot.json Normal file
View File

@ -0,0 +1,39 @@
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "24",
"height": "24",
"viewBox": "0 0 24 24",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "g",
"attributes": {
"id": "cute-robot"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"id": "Vector",
"d": "M12 4H7C5.89543 4 5 4.89543 5 6V11C5 12.1046 5.89543 13 7 13H17C18.1046 13 19 12.1046 19 11V6C19 4.89543 18.1046 4 17 4H12ZM12 4V2M6 15L4 17M6 15C6 18.3137 8.68629 21 12 21C15.3137 21 18 18.3137 18 15M6 15V13M18 15L20 17M18 15V13M9 8V9M15 8V9",
"stroke": "currentColor",
"stroke-width": "1.5",
"stroke-linecap": "round",
"stroke-linejoin": "round"
},
"children": []
}
]
}
]
},
"name": "CuteRobot"
}

16
web/app/components/base/icons/src/vender/line/communication/CuteRobot.tsx Normal file
View File

@ -0,0 +1,16 @@
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './CuteRobot.json'
import IconBase from '@/app/components/base/icons/IconBase'
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
props,
ref,
) => <IconBase {...props} ref={ref} data={data as IconData} />)
Icon.displayName = 'CuteRobot'
export default Icon

1
web/app/components/base/icons/src/vender/line/communication/index.ts
View File

@ -1,3 +1,4 @@
export { default as ChatBot } from './ChatBot'
export { default as CuteRobot } from './CuteRobot'
export { default as MessageCheckRemove } from './MessageCheckRemove'
export { default as MessageFastPlus } from './MessageFastPlus'

4
web/app/components/base/tooltip-plus/index.tsx
View File

@ -7,6 +7,7 @@ export type TooltipProps = {
triggerMethod?: 'hover' | 'click'
popupContent: React.ReactNode
children: React.ReactNode
hideArrow?: boolean
}
const arrow = (
@ -18,6 +19,7 @@ const Tooltip: FC<TooltipProps> = ({
triggerMethod = 'hover',
popupContent,
children,
hideArrow,
}) => {
const [open, setOpen] = useState(false)
@ -40,7 +42,7 @@ const Tooltip: FC<TooltipProps> = ({
>
<div className='relative px-3 py-2 text-xs font-normal text-gray-700 bg-white rounded-md shadow-lg'>
{popupContent}
{arrow}
{!hideArrow && arrow}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>

20
web/app/components/explore/app-list/index.tsx
View File

@ -71,11 +71,13 @@ const Apps = ({
name,
icon,
icon_background,
description,
}) => {
const { app_model_config: model_config } = await fetchAppDetail(
currApp?.app.id as string,
)
// #TODO# need yaml config from app detail
// #TODO# use import api
try {
const app = await createApp({
name,
@ -91,10 +93,14 @@ const Apps = ({
message: t('app.newApp.appCreated'),
})
localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
router.push(
`/app/${app.id}/${isCurrentWorkspaceManager ? 'configuration' : 'overview'
}`,
)
if (!isCurrentWorkspaceManager) {
router.push(`/app/${app.id}/'overview'`)
}
else {
if (app.mode === 'workflow' || app.mode === 'advanced-chat')
router.push(`/app/${app.id}/'workflow'`)
router.push(`/app/${app.id}/'configuration'`)
}
}
catch (e) {
Toast.notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
@ -111,8 +117,8 @@ const Apps = ({
return (
<div className={cn(
'flex flex-col border-l border-gray-200',
pageType === PageType.EXPLORE ? 'h-full' : 'h-[calc(100%-76px)]',
'flex flex-col',
pageType === PageType.EXPLORE ? 'h-full border-l border-gray-200' : 'h-[calc(100%-76px)]',
)}>
{pageType === PageType.EXPLORE && (
<div className='shrink-0 pt-6 px-12'>

4
web/app/components/explore/create-app-modal/index.tsx
View File

@ -12,6 +12,7 @@ import { XClose } from '@/app/components/base/icons/src/vender/line/general'
export type CreateAppModalProps = {
appName: string
appDescription?: string
show: boolean
onConfirm: (info: {
name: string
@ -24,6 +25,7 @@ export type CreateAppModalProps = {
const CreateAppModal = ({
appName,
appDescription,
show = false,
onConfirm,
onHide,
@ -33,7 +35,7 @@ const CreateAppModal = ({
const [name, setName] = React.useState(appName)
const [showEmojiPicker, setShowEmojiPicker] = useState(false)
const [emoji, setEmoji] = useState({ icon: '🤖', icon_background: '#FFEAD5' })
const [description, setDescription] = useState('')
const [description, setDescription] = useState(appDescription || '')
const { plan, enableBilling } = useProviderContext()
const isAppsFull = (enableBilling && plan.usage.buildApps >= plan.total.buildApps)

5
web/i18n/en-US/app.ts
View File

@ -24,9 +24,12 @@ const translation = {
startFromBlank: 'Start from a blank app',
startFromTemplate: 'Start from a template',
captionAppType: 'What type of app do you want to create?',
chatbotDescription: 'Build a chat-based assistant using a Large Language Model',
chatbotDescription: 'Build a chat-based application. This app uses a question-and-answer format, allowing for multiple rounds of continuous conversation.',
agentDescription: 'Build an intelligent Agent which can autonomously choose tools to complete the tasks',
workflowDescription: 'Description text here',
chatbotType: 'Chatbot orchestrate method',
basic: 'Basic Orchestrate',
workflow: 'Workflow Orchestrate',
captionName: 'App icon & name',
appNamePlaceholder: 'Give your app a name',
captionDescription: 'Description',

3
web/i18n/zh-Hans/app.ts
View File

@ -26,6 +26,9 @@ const translation = {
chatbotDescription: '使用大型语言模型构建基于聊天的助手',
agentDescription: '构建一个智能Agent，可以自主选择工具来完成任务',
workflowDescription: 'Description text here',
chatbotType: '聊天助手编排方法',
basic: '基础编排',
workflow: '工作流编排',
captionName: '图标 & 名称',
appNamePlaceholder: '给你的应用起个名字',
captionDescription: '描述',

2
web/types/app.ts
View File

@ -278,6 +278,8 @@ export type App = {
id: string
/** Name */
name: string
/** Description */
description: string
/** Icon */
icon: string