Skip to content

D
dify
Commit 446932e0 authored by JzoNg's avatar JzoNg
Browse files
Options

update style of app creation

parent 0469edcc
Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 58 deletions
web/app/components/app/create-app-dialog/appForm.tsx
View file @ 446932e0
......@@ -15,8 +15,9 @@ 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 { ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/line/communication'
import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/line/communication'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import { HelpCircle, InfoCircle } 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'
import { getRedirection } from '@/utils/app-redirection'
......@@ -85,9 +86,9 @@ const AppForm = ({
return (
<div className='overflow-y-auto'>
{/* app type */}
<div className='py-2 px-8 w-[480px]'>
<div className='py-2 px-8 w-[520px]'>
<div className='py-2 text-sm leading-[20px] font-medium text-gray-900'>{t('app.newApp.captionAppType')}</div>
<div className='flex gap-2'>
<div className='flex justify-between'>
<TooltipPlus
hideArrow
popupContent={
......@@ -96,7 +97,7 @@ const AppForm = ({
>
<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',
'relative grow w-[110px] px-0.5 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={() => {
......@@ -109,6 +110,33 @@ const AppForm = ({
<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='flex flex-col max-w-[320px] leading-[18px] text-xs'>
<div className='text-gray-700'>{t('app.newApp.completionDescription')}</div>
<div className='w-[298px] h-[0.5px] my-2 bg-[rgba(0,0,0,0.05)]'></div>
<div className='flex items-center text-[#dc6803]'>
<AlertTriangle className='w-3 h-3 mr-1'/>
<div>{t('app.newApp.completionWarning')}</div>
</div>
</div>
}
>
<div
className={cn(
'relative grow w-[110px] px-0.5 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('completion')
setShowChatBotType(false)
}}
>
<AiText className='w-6 h-6' />
<div className='h-5 text-sm font-medium leading-5'>{t('app.newApp.completeApp')}</div>
</div>
</TooltipPlus>
<TooltipPlus
hideArrow
popupContent={
......@@ -117,7 +145,7 @@ const AppForm = ({
>
<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',
'relative grow w-[110px] px-0.5 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={() => {
......@@ -129,19 +157,33 @@ const AppForm = ({
<div className='h-5 text-sm font-medium leading-5'>{t('app.types.agent')}</div>
</div>
</TooltipPlus>
<div
className={cn(
'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('workflow')
setShowChatBotType(false)
}}
<TooltipPlus
hideArrow
popupContent={
<div className='flex flex-col max-w-[320px] leading-[18px] text-xs'>
<div className='text-gray-700'>{t('app.newApp.workflowDescription')}</div>
<div className='w-[298px] h-[0.5px] my-2 bg-[rgba(0,0,0,0.05)]'></div>
<div className='flex items-center text-indigo-600'>
<InfoCircle className='w-3 h-3 mr-1'/>
<div>{t('app.newApp.completionWarning')}</div>
</div>
</div>
}
>
<Route className='w-6 h-6' />
<div className='h-5 text-sm font-medium leading-5'>{t('app.types.workflow')}</div>
</div>
<div
className={cn(
'relative grow w-[110px] px-0.5 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('workflow')
setShowChatBotType(false)
}}
>
<Route className='w-6 h-6' />
<div className='h-5 text-sm font-medium leading-5'>{t('app.types.workflow')}</div>
</div>
</TooltipPlus>
</div>
</div>
{showChatBotType && (
......
web/app/components/app/create-app-dialog/index.tsx
View file @ 446932e0
......@@ -25,7 +25,7 @@ const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) =>
onClose={() => {}}
>
{/* blank form */}
<div className='shrink-0 flex flex-col max-w-[480px] h-full bg-white'>
<div className='shrink-0 flex flex-col max-w-[520px] h-full bg-white'>
{/* Heading */}
<div className='shrink-0 pl-8 pr-6 pt-6 pb-3 bg-white rounded-ss-xl text-xl leading-[30px] font-semibold text-gray-900 z-10'>{t('app.newApp.startFromBlank')}</div>
{/* app form */}
......
web/app/components/base/icons/assets/vender/line/communication/ai-text.svg 0 → 100644
View file @ 446932e0
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="ai-text">
<path id="Vector" d="M4 18H7M4 12H9M4 6H20M17 10L18.5 13.5L22 15L18.5 16.5L17 20L15.5 16.5L12 15L15.5 13.5L17 10Z" stroke="#344054" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
web/app/components/base/icons/assets/vender/solid/communication/chat-bot.svg 0 → 100644
View file @ 446932e0
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="chat-bot">
<path id="Vector" d="M4.20913 2.76912L4.09542 2.83543L3.98172 2.76912C3.90566 2.72476 3.86328 2.64979 3.86328 2.57101C3.86328 2.44347 3.96789 2.33887 4.09542 2.33887C4.22296 2.33887 4.32757 2.44347 4.32757 2.57101C4.32757 2.64979 4.28519 2.72476 4.20913 2.76912Z" fill="#1570EF" stroke="#1570EF" stroke-width="1.25"/>
<path id="Vector_2" d="M10.0174 6.00058C10.0123 5.98686 10.0097 5.97229 10.0046 5.95858C9.81684 5.48158 9.35398 5.14258 8.81056 5.14258H8.66784L7.52484 5.99972C7.33713 6.14029 7.11556 6.21444 6.88284 6.21444C6.29184 6.21444 5.81056 5.73358 5.81056 5.14258H2.81013C2.10127 5.14258 1.52441 5.71944 1.52441 6.42829V9.85686C1.52441 10.5657 2.10127 11.1426 2.81013 11.1426H8.81013C9.51899 11.1426 10.0958 10.5657 10.0958 9.85686V6.42829C10.0958 6.34386 10.0868 6.26158 10.071 6.18186C10.0586 6.11886 10.0384 6.05972 10.0174 6.00058ZM3.88156 8.57115C3.52713 8.57115 3.2387 8.28272 3.2387 7.92829C3.2387 7.57386 3.52713 7.28544 3.88156 7.28544C4.23599 7.28544 4.52441 7.57386 4.52441 7.92829C4.52441 8.28272 4.23599 8.57115 3.88156 8.57115ZM7.7387 8.57115C7.38427 8.57115 7.09584 8.28272 7.09584 7.92829C7.09584 7.57386 7.38427 7.28544 7.7387 7.28544C8.09313 7.28544 8.38156 7.57386 8.38156 7.92829C8.38156 8.28272 8.09313 8.57115 7.7387 8.57115Z" fill="#1570EF"/>
<path id="Vector_3" d="M6.66699 5.14314V1.71456C6.66699 1.24099 7.05056 0.857422 7.52413 0.857422H10.9527C11.4263 0.857422 11.8098 1.24099 11.8098 1.71456V3.42885C11.8098 3.90242 11.4263 4.28599 10.9527 4.28599H8.38128L7.00985 5.31456C6.86842 5.42042 6.66699 5.31971 6.66699 5.14314Z" fill="#1570EF"/>
</g>
</svg>
web/app/components/base/icons/src/vender/line/communication/AiText.json 0 → 100644
View file @ 446932e0
{
"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": "ai-text"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"id": "Vector",
"d": "M4 18H7M4 12H9M4 6H20M17 10L18.5 13.5L22 15L18.5 16.5L17 20L15.5 16.5L12 15L15.5 13.5L17 10Z",
"stroke": "currentColor",
"stroke-width": "1.5",
"stroke-linecap": "round",
"stroke-linejoin": "round"
},
"children": []
}
]
}
]
},
"name": "AiText"
}
\ No newline at end of file
web/app/components/base/icons/src/vender/line/communication/AiText.tsx 0 → 100644
View file @ 446932e0
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './AiText.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 = 'AiText'
export default Icon
web/app/components/base/icons/src/vender/line/communication/index.ts
View file @ 446932e0
export { default as AiText } from './AiText'
export { default as ChatBot } from './ChatBot'
export { default as CuteRobot } from './CuteRobot'
export { default as MessageCheckRemove } from './MessageCheckRemove'
......
web/app/components/base/icons/src/vender/solid/communication/ChatBot.json 0 → 100644
View file @ 446932e0
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "13",
"height": "12",
"viewBox": "0 0 13 12",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "g",
"attributes": {
"id": "chat-bot"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"id": "Vector",
"d": "M4.20913 2.76912L4.09542 2.83543L3.98172 2.76912C3.90566 2.72476 3.86328 2.64979 3.86328 2.57101C3.86328 2.44347 3.96789 2.33887 4.09542 2.33887C4.22296 2.33887 4.32757 2.44347 4.32757 2.57101C4.32757 2.64979 4.28519 2.72476 4.20913 2.76912Z",
"fill": "currentColor",
"stroke": "currentColor",
"stroke-width": "1.25"
},
"children": []
},
{
"type": "element",
"name": "path",
"attributes": {
"id": "Vector_2",
"d": "M10.0174 6.00058C10.0123 5.98686 10.0097 5.97229 10.0046 5.95858C9.81684 5.48158 9.35398 5.14258 8.81056 5.14258H8.66784L7.52484 5.99972C7.33713 6.14029 7.11556 6.21444 6.88284 6.21444C6.29184 6.21444 5.81056 5.73358 5.81056 5.14258H2.81013C2.10127 5.14258 1.52441 5.71944 1.52441 6.42829V9.85686C1.52441 10.5657 2.10127 11.1426 2.81013 11.1426H8.81013C9.51899 11.1426 10.0958 10.5657 10.0958 9.85686V6.42829C10.0958 6.34386 10.0868 6.26158 10.071 6.18186C10.0586 6.11886 10.0384 6.05972 10.0174 6.00058ZM3.88156 8.57115C3.52713 8.57115 3.2387 8.28272 3.2387 7.92829C3.2387 7.57386 3.52713 7.28544 3.88156 7.28544C4.23599 7.28544 4.52441 7.57386 4.52441 7.92829C4.52441 8.28272 4.23599 8.57115 3.88156 8.57115ZM7.7387 8.57115C7.38427 8.57115 7.09584 8.28272 7.09584 7.92829C7.09584 7.57386 7.38427 7.28544 7.7387 7.28544C8.09313 7.28544 8.38156 7.57386 8.38156 7.92829C8.38156 8.28272 8.09313 8.57115 7.7387 8.57115Z",
"fill": "currentColor"
},
"children": []
},
{
"type": "element",
"name": "path",
"attributes": {
"id": "Vector_3",
"d": "M6.66699 5.14314V1.71456C6.66699 1.24099 7.05056 0.857422 7.52413 0.857422H10.9527C11.4263 0.857422 11.8098 1.24099 11.8098 1.71456V3.42885C11.8098 3.90242 11.4263 4.28599 10.9527 4.28599H8.38128L7.00985 5.31456C6.86842 5.42042 6.66699 5.31971 6.66699 5.14314Z",
"fill": "currentColor"
},
"children": []
}
]
}
]
},
"name": "ChatBot"
}
\ No newline at end of file
web/app/components/base/icons/src/vender/solid/communication/ChatBot.tsx 0 → 100644
View file @ 446932e0
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './ChatBot.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 = 'ChatBot'
export default Icon
web/app/components/base/icons/src/vender/solid/communication/index.ts
View file @ 446932e0
export { default as AiText } from './AiText'
export { default as ChatBot } from './ChatBot'
export { default as CuteRobote } from './CuteRobote'
export { default as EditList } from './EditList'
export { default as MessageDotsCircle } from './MessageDotsCircle'
......
web/app/components/explore/app-card/index.tsx
View file @ 446932e0
......@@ -3,11 +3,10 @@ import cn from 'classnames'
import { useTranslation } from 'react-i18next'
import { PlusIcon } from '@heroicons/react/20/solid'
import Button from '../../base/button'
import s from './style.module.css'
import type { App } from '@/models/explore'
import AppModeLabel from '@/app/(commonLayout)/apps/AppModeLabel'
import AppIcon from '@/app/components/base/app-icon'
import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
export type AppCardProps = {
app: App
canCreate: boolean
......@@ -24,35 +23,72 @@ const AppCard = ({
const { t } = useTranslation()
const { app: appBasicInfo } = app
return (
<div className={cn(s.wrap, 'col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
<div className={cn('group flex col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
<AppIcon size='small' icon={app.app.icon} background={app.app.icon_background} />
<div className='relative h-8 text-sm font-medium leading-8 grow'>
<div className='absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap'>{appBasicInfo.name}</div>
<div className='relative shrink-0'>
<AppIcon size='large' icon={app.app.icon} background={app.app.icon_background} />
<span className='absolute bottom-[-3px] right-[-3px] w-4 h-4 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm'>
{appBasicInfo.mode === 'advanced-chat' && (
<ChatBot className='w-3 h-3 text-blue-600' />
)}
{appBasicInfo.mode === 'agent-chat' && (
<CuteRobote className='w-3 h-3 text-indigo-600' />
)}
{appBasicInfo.mode === 'chat' && (
<ChatBot className='w-3 h-3 text-blue-600' />
)}
{appBasicInfo.mode === 'completion' && (
<AiText className='w-3 h-3 text-gray-500' />
)}
{appBasicInfo.mode === 'workflow' && (
<Route className='w-3 h-3 text-[#f79009]' />
)}
</span>
</div>
</div>
<div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.description}</div>
<div className='flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px]'>
<div className={s.mode}>
<AppModeLabel mode={appBasicInfo.mode} />
<div className='grow w-0'>
<div className='flex items-center text-sm leading-5 font-semibold text-gray-800'>
<div className='truncate' title={appBasicInfo.name}>{appBasicInfo.name}</div>
</div>
<div className='flex items-center text-[10px] leading-[18px] text-gray-500'>
{appBasicInfo.mode === 'advanced-chat' && (
<div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>
)}
{appBasicInfo.mode === 'agent-chat' && (
<div className='truncate'>{t('app.types.agent').toUpperCase()}</div>
)}
{appBasicInfo.mode === 'chat' && (
<div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>
)}
{appBasicInfo.mode === 'completion' && (
<div className='truncate'>{t('app.types.completion').toUpperCase()}</div>
)}
{appBasicInfo.mode === 'workflow' && (
<div className='truncate'>{t('app.types.workflow').toUpperCase()}</div>
)}
</div>
</div>
{isExplore && canCreate && (
<div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
</div>
<div className='mb-1 px-[14px] text-xs leading-normal text-gray-500 line-clamp-4 group-hover:line-clamp-2 group-hover:h-9'>{app.description}</div>
{isExplore && canCreate && (
<div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
<div className={cn('flex items-center w-full space-x-2')}>
<Button type='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
<PlusIcon className='w-4 h-4 mr-1' />
<span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
</Button>
</div>
)}
{!isExplore && (
<div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
</div>
)}
{!isExplore && (
<div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
<div className={cn('flex items-center w-full space-x-2')}>
<Button type='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
<PlusIcon className='w-4 h-4 mr-1' />
<span className='text-xs'>{t('app.newApp.useTemplate')}</span>
</Button>
</div>
)}
</div>
</div>
)}
</div>
)
}
......
web/app/components/explore/app-card/style.module.css deleted 100644 → 0
View file @ 0469edcc
.wrap {
display: flex;
}
.mode {
display: flex;
height: 28px;
}
.opWrap {
display: none;
}
.wrap:hover .mode {
display: none;
}
.wrap:hover .opWrap {
display: flex;
}
\ No newline at end of file
web/i18n/en-US/app.ts
View file @ 446932e0
......@@ -26,6 +26,8 @@ const translation = {
startFromTemplate: 'Start from a template',
captionAppType: 'What type of app do you want to create?',
chatbotDescription: 'Build a chat-based application. This app uses a question-and-answer format, allowing for multiple rounds of continuous conversation.',
completionDescription: 'Build an application that generates high-quality text based on prompts, such as generating articles, summaries, translations, and more.',
completionWarning: 'This type of app will no longer be supported.',
agentDescription: 'Build an intelligent Agent which can autonomously choose tools to complete the tasks',
workflowDescription: 'Description text here',
chatbotType: 'Chatbot orchestrate method',
......
web/i18n/zh-Hans/app.ts
View file @ 446932e0
......@@ -25,6 +25,8 @@ const translation = {
startFromTemplate: '从应用模版创建',
captionAppType: '想要哪种应用类型？',
chatbotDescription: '使用大型语言模型构建基于聊天的助手',
completionDescription: '构建一个根据提示生成高质量文本的应用程序，例如生成文章、摘要、翻译等。',
completionWarning: '该类型不久后将不再支持创建',
agentDescription: '构建一个智能Agent，可以自主选择工具来完成任务',
workflowDescription: 'Description text here',
chatbotType: '聊天助手编排方法',
......
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