hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-09 10:56:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

FEAT: NEW WORKFLOW ENGINE (#3160)

Browse Source 
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>
This commit is contained in:
takatost
2024-04-08 18:51:46 +08:00
committed by GitHub
parent 2fb9850af5
commit 7753ba2d37
1161 changed files with 103836 additions and 10327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
View File

@@ -19,6 +19,9 @@ import Tooltip from '@/app/components/base/tooltip-plus'
import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
import Radio from '@/app/components/base/radio'
type FormProps = {
className?: string
itemClassName?: string
fieldLabelClassName?: string
value: FormValue
onChange: (val: FormValue) => void
formSchemas: CredentialFormSchema[]
@@ -33,6 +36,9 @@ type FormProps = {
}
const Form: FC<FormProps> = ({
className,
itemClassName,
fieldLabelClassName,
value,
onChange,
formSchemas,
@@ -89,8 +95,8 @@ const Form: FC<FormProps> = ({
const disabed = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
return (
<div key={variable} className='py-3'>
<div className='py-2 text-sm text-gray-900'>
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
{label[language] || label.en_US}
{
required && (
@@ -130,8 +136,8 @@ const Form: FC<FormProps> = ({
const disabed = isEditMode && (variable === '__model_type' || variable === '__model_name')
return (
<div key={variable} className='py-3'>
<div className='py-2 text-sm text-gray-900'>
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
{label[language] || label.en_US}
{
required && (
@@ -186,8 +192,8 @@ const Form: FC<FormProps> = ({
return null
return (
<div key={variable} className='py-3'>
<div className='py-2 text-sm text-gray-900'>
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
{label[language] || label.en_US}
{
@@ -227,7 +233,7 @@ const Form: FC<FormProps> = ({
return null
return (
<div key={variable} className='py-3'>
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className='flex items-center justify-between py-2 text-sm text-gray-900'>
<div className='flex items-center space-x-2'>
<span>{label[language] || label.en_US}</span>
@@ -249,7 +255,7 @@ const Form: FC<FormProps> = ({
}
return (
<div>
<div className={className}>
{
formSchemas.map(formSchema => renderField(formSchema))
}

60
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
View File

@@ -5,6 +5,7 @@ import type {
import { useEffect, useMemo, useState } from 'react'
import useSWR from 'swr'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import type {
DefaultModel,
FormValue,
@@ -33,6 +34,8 @@ import { TONE_LIST } from '@/config'
import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
export type ModelParameterModalProps = {
popupClassName?: string
portalToFollowElemContentClassName?: string
isAdvancedMode: boolean
mode: string
modelId: string
@@ -40,9 +43,12 @@ export type ModelParameterModalProps = {
setModel: (model: { modelId: string; provider: string; mode?: string; features?: string[] }) => void
completionParams: FormValue
onCompletionParamsChange: (newParams: FormValue) => void
debugWithMultipleModel: boolean
onDebugWithMultipleModelChange: () => void
hideDebugWithMultipleModel?: boolean
debugWithMultipleModel?: boolean
onDebugWithMultipleModelChange?: () => void
renderTrigger?: (v: TriggerProps) => ReactNode
readonly?: boolean
isInWorkflow?: boolean
}
const stopParameerRule: ModelParameterRule = {
default: [],
@@ -65,15 +71,20 @@ const stopParameerRule: ModelParameterRule = {
const PROVIDER_WITH_PRESET_TONE = ['openai', 'azure_openai']
const ModelParameterModal: FC<ModelParameterModalProps> = ({
popupClassName,
portalToFollowElemContentClassName,
isAdvancedMode,
modelId,
provider,
setModel,
completionParams,
onCompletionParamsChange,
hideDebugWithMultipleModel,
debugWithMultipleModel,
onDebugWithMultipleModelChange,
renderTrigger,
readonly,
isInWorkflow,
}) => {
const { t } = useTranslation()
const { hasSettedApiKey } = useProviderContext()
@@ -167,7 +178,11 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
>
<div className='relative'>
<PortalToFollowElemTrigger
onClick={() => setOpen(v => !v)}
onClick={() => {
if (readonly)
return
setOpen(v => !v)
}}
className='block'
>
{
@@ -185,6 +200,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
: (
<Trigger
disabled={disabled}
isInWorkflow={isInWorkflow}
modelDisabled={modelDisabled}
hasDeprecated={hasDeprecated}
currentProvider={currentProvider}
@@ -195,11 +211,14 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[60]'>
<div className='w-[496px] rounded-xl border border-gray-100 bg-white shadow-xl'>
<div className='max-h-[480px] px-10 pt-6 pb-8 overflow-y-auto'>
<PortalToFollowElemContent className={cn(portalToFollowElemContentClassName, 'z-[60]')}>
<div className={cn(popupClassName, 'w-[496px] rounded-xl border border-gray-100 bg-white shadow-xl')}>
<div className={cn(
'max-h-[480px] overflow-y-auto',
!isInWorkflow && 'px-10 pt-6 pb-8',
isInWorkflow && 'p-4')}>
<div className='flex items-center justify-between h-8'>
<div className='font-semibold text-gray-900'>
<div className={cn('font-semibold text-gray-900', isInWorkflow && 'text-[13px]')}>
{t('common.modelProvider.model').toLocaleUpperCase()}
</div>
<ModelSelector
@@ -221,7 +240,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
{
!isLoading && !!parameterRules.length && (
<div className='flex items-center justify-between mb-4'>
<div className='text-gray-900 font-semibold'>{t('common.modelProvider.parameters')}</div>
<div className={cn('font-semibold text-gray-900', isInWorkflow && 'text-[13px]')}>{t('common.modelProvider.parameters')}</div>
{
PROVIDER_WITH_PRESET_TONE.includes(provider) && (
<PresetsParameter onSelect={handleSelectPresetParameter} />
@@ -243,22 +262,25 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
value={completionParams[parameter.name]}
onChange={v => handleParamChange(parameter.name, v)}
onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
isInWorkflow={isInWorkflow}
/>
))
)
}
</div>
<div
className='flex items-center justify-between px-6 h-[50px] bg-gray-50 border-t border-t-gray-100 text-xs font-medium text-primary-600 cursor-pointer rounded-b-xl'
onClick={() => onDebugWithMultipleModelChange()}
>
{
debugWithMultipleModel
? t('appDebug.debugAsSingleModel')
: t('appDebug.debugAsMultipleModel')
}
<ArrowNarrowLeft className='w-3 h-3 rotate-180' />
</div>
{!hideDebugWithMultipleModel && (
<div
className='flex items-center justify-between px-6 h-[50px] bg-gray-50 border-t border-t-gray-100 text-xs font-medium text-primary-600 cursor-pointer rounded-b-xl'
onClick={() => onDebugWithMultipleModelChange?.()}
>
{
debugWithMultipleModel
? t('appDebug.debugAsSingleModel')
: t('appDebug.debugAsMultipleModel')
}
<ArrowNarrowLeft className='w-3 h-3 rotate-180' />
</div>
)}
</div>
</PortalToFollowElemContent>
</div>

18
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
View File

@@ -1,5 +1,6 @@
import type { FC } from 'react'
import { useEffect, useRef, useState } from 'react'
import cn from 'classnames'
import type { ModelParameterRule } from '../declarations'
import { useLanguage } from '../hooks'
import { isNullOrUndefined } from '../utils'
@@ -19,6 +20,7 @@ type ParameterItemProps = {
onChange?: (value: ParameterValue) => void
className?: string
onSwitch?: (checked: boolean, assignValue: ParameterValue) => void
isInWorkflow?: boolean
}
const ParameterItem: FC<ParameterItemProps> = ({
parameterRule,
@@ -26,6 +28,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
onChange,
className,
onSwitch,
isInWorkflow,
}) => {
const language = useLanguage()
const [localValue, setLocalValue] = useState(value)
@@ -122,8 +125,8 @@ const ParameterItem: FC<ParameterItemProps> = ({
const renderInput = () => {
const numberInputWithSlide = (parameterRule.type === 'int' || parameterRule.type === 'float')
&& !isNullOrUndefined(parameterRule.min)
&& !isNullOrUndefined(parameterRule.max)
&& !isNullOrUndefined(parameterRule.min)
&& !isNullOrUndefined(parameterRule.max)
if (parameterRule.type === 'int' || parameterRule.type === 'float') {
let step = 100
@@ -178,7 +181,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
if (parameterRule.type === 'string' && !parameterRule.options?.length) {
return (
<input
className='flex items-center px-3 w-[200px] h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
className={cn(isInWorkflow ? 'w-[200px]' : 'w-full', 'flex items-center px-3 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900')}
value={renderValue as string}
onChange={handleStringInputChange}
/>
@@ -189,7 +192,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
return (
<SimpleSelect
className='!py-0'
wrapperClassName='!w-[200px] !h-8'
wrapperClassName={cn(isInWorkflow ? '!w-[200px]' : 'w-full', '!h-8')}
defaultValue={renderValue as string}
onSelect={handleSelect}
items={parameterRule.options.map(option => ({ value: option, name: option }))}
@@ -199,11 +202,12 @@ const ParameterItem: FC<ParameterItemProps> = ({
if (parameterRule.type === 'tag') {
return (
<div className='w-[200px]'>
<div className={isInWorkflow ? 'w-[200px]' : 'w-full'}>
<TagInput
items={renderValue as string[]}
onChange={handleTagChange}
customizedConfirmKey='Tab'
isInWorkflow={isInWorkflow}
/>
</div>
)
@@ -215,7 +219,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
return (
<div className={`flex items-center justify-between ${className}`}>
<div>
<div className='shrink-0 flex items-center w-[200px]'>
<div className={cn(isInWorkflow ? 'w-[140px]' : 'w-full', 'shrink-0 flex items-center')}>
<div
className='mr-0.5 text-[13px] font-medium text-gray-700 truncate'
title={parameterRule.label[language] || parameterRule.label.en_US}
@@ -246,7 +250,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
</div>
{
parameterRule.type === 'tag' && (
<div className='w-[200px] text-gray-400 text-xs font-normal'>
<div className={cn(!isInWorkflow && 'w-[200px]', ' text-gray-400 text-xs font-normal')}>
{parameterRule?.tagPlaceholder?.[language]}
</div>
)

2
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
View File

@@ -57,7 +57,7 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
renderTrigger={renderTrigger}
items={options}
onSelect={item => onSelect(item.value as number)}
popupClassName='z-[70]'
popupClassName='z-[1003]'
/>
)
}

21
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
View File

@@ -1,5 +1,6 @@
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import type {
Model,
ModelItem,
@@ -13,6 +14,7 @@ import { useProviderContext } from '@/context/provider-context'
import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
export type TriggerProps = {
open?: boolean
@@ -23,6 +25,7 @@ export type TriggerProps = {
modelId?: string
hasDeprecated?: boolean
modelDisabled?: boolean
isInWorkflow?: boolean
}
const Trigger: FC<TriggerProps> = ({
disabled,
@@ -32,6 +35,7 @@ const Trigger: FC<TriggerProps> = ({
modelId,
hasDeprecated,
modelDisabled,
isInWorkflow,
}) => {
const { t } = useTranslation()
const language = useLanguage()
@@ -39,10 +43,12 @@ const Trigger: FC<TriggerProps> = ({
return (
<div
className={`
flex items-center px-2 h-8 rounded-lg border cursor-pointer hover:border-[1.5px]
${disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'}
`}
className={cn(
'relative flex items-center px-2 h-8 rounded-lg cursor-pointer',
!isInWorkflow && 'border hover:border-[1.5px]',
!isInWorkflow && (disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'),
isInWorkflow && 'bg-gray-100 border border-gray-100 hover:border-gray-200',
)}
>
{
currentProvider && (
@@ -68,9 +74,9 @@ const Trigger: FC<TriggerProps> = ({
className='mr-1.5 text-gray-900'
modelItem={currentModel}
showMode
modeClassName='!text-[#444CE7] !border-[#A4BCFD]'
modeClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
showFeatures
featuresClassName='!text-[#444CE7] !border-[#A4BCFD]'
featuresClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
/>
)
}
@@ -97,9 +103,10 @@ const Trigger: FC<TriggerProps> = ({
</TooltipPlus>
)
: (
<SlidersH className='w-4 h-4 text-indigo-600' />
<SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-gray-500', 'w-4 h-4')} />
)
}
{isInWorkflow && (<ChevronDown className='absolute top-[9px] right-2 w-3.5 h-3.5 text-gray-500' />)}
</div>
)
}

3
web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
View File

@@ -74,6 +74,7 @@ const ModelSelector: FC<ModelSelectorProps> = ({
provider={currentProvider}
model={currentModel}
className={triggerClassName}
readonly={readonly}
/>
)
}
@@ -95,7 +96,7 @@ const ModelSelector: FC<ModelSelectorProps> = ({
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className={`z-[60] ${popupClassName}`}>
<PortalToFollowElemContent className={`z-[1002] ${popupClassName}`}>
<Popup
defaultModel={defaultModel}
modelList={modelList}

38
web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
View File

@@ -19,19 +19,22 @@ type ModelTriggerProps = {
provider: Model
model: ModelItem
className?: string
readonly?: boolean
}
const ModelTrigger: FC<ModelTriggerProps> = ({
open,
provider,
model,
className,
readonly,
}) => {
const language = useLanguage()
return (
<div
className={`
group flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
group flex items-center px-2 h-8 rounded-lg bg-gray-100
${!readonly && 'hover:bg-gray-200 cursor-pointer'}
${className}
${open && '!bg-gray-200'}
${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
@@ -48,21 +51,24 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
showMode
showFeatures
/>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
{
model.status !== ModelStatusEnum.active
? (
<TooltipPlus popupContent={MODEL_STATUS_TEXT[model.status][language]}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
)
: (
<ChevronDown
className='w-3.5 h-3.5 text-gray-500'
/>
)
}
</div>
{!readonly && (
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
{
model.status !== ModelStatusEnum.active
? (
<TooltipPlus popupContent={MODEL_STATUS_TEXT[model.status][language]}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
)
: (
<ChevronDown
className='w-3.5 h-3.5 text-gray-500'
/>
)
}
</div>
)}
</div>
)
}

133
web/app/components/header/app-nav/index.tsx
View File

@@ -1,60 +1,143 @@
'use client'
import { useCallback, useState } from 'react'
import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams, usePathname } from 'next/navigation'
import useSWR from 'swr'
import { useParams } from 'next/navigation'
import useSWRInfinite from 'swr/infinite'
import { flatten } from 'lodash-es'
import produce from 'immer'
import Nav from '../nav'
import { type NavItem } from '../nav/nav-selector'
import { Robot, RobotActive } from '../../base/icons/src/public/header-nav/studio'
import { fetchAppDetail, fetchAppList } from '@/service/apps'
import NewAppDialog from '@/app/(commonLayout)/apps/NewAppDialog'
import { fetchAppList } from '@/service/apps'
import CreateAppTemplateDialog from '@/app/components/app/create-app-dialog'
import CreateAppModal from '@/app/components/app/create-app-modal'
import CreateFromDSLModal from '@/app/components/app/create-from-dsl-modal'
import type { AppListResponse } from '@/models/app'
import { useAppContext } from '@/context/app-context'
import { useStore as useAppStore } from '@/app/components/app/store'
const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
if (!pageIndex || previousPageData.has_more)
return { url: 'apps', params: { page: pageIndex + 1, limit: 30 } }
const getKey = (
pageIndex: number,
previousPageData: AppListResponse,
activeTab: string,
keywords: string,
) => {
if (!pageIndex || previousPageData.has_more) {
const params: any = { url: 'apps', params: { page: pageIndex + 1, limit: 30, name: keywords } }
if (activeTab !== 'all')
params.params.mode = activeTab
else
delete params.params.mode
return params
}
return null
}
const AppNav = () => {
const { t } = useTranslation()
const { isCurrentWorkspaceManager } = useAppContext()
const [showNewAppDialog, setShowNewAppDialog] = useState(false)
const { appId } = useParams()
const isAppDetailPage = usePathname().split('/').includes('app')
const { data: currentApp } = useSWR((appId && isAppDetailPage) ? { url: '/apps', id: appId } : null, fetchAppDetail)
const { data: appsData, setSize } = useSWRInfinite(appId ? getKey : () => null, fetchAppList, { revalidateFirstPage: false })
const appItems = flatten(appsData?.map(appData => appData.data))
const { isCurrentWorkspaceManager } = useAppContext()
const { appDetail } = useAppStore()
const [showNewAppDialog, setShowNewAppDialog] = useState(false)
const [showNewAppTemplateDialog, setShowNewAppTemplateDialog] = useState(false)
const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
const [navItems, setNavItems] = useState<NavItem[]>([])
const { data: appsData, setSize, mutate } = useSWRInfinite(
appId
? (pageIndex: number, previousPageData: AppListResponse) => getKey(pageIndex, previousPageData, 'all', '')
: () => null,
fetchAppList,
{ revalidateFirstPage: false },
)
const handleLoadmore = useCallback(() => {
setSize(size => size + 1)
}, [setSize])
const openModal = (state: string) => {
if (state === 'blank')
setShowNewAppDialog(true)
if (state === 'template')
setShowNewAppTemplateDialog(true)
if (state === 'dsl')
setShowCreateFromDSLModal(true)
}
useEffect(() => {
if (appsData) {
const appItems = flatten(appsData?.map(appData => appData.data))
const navItems = appItems.map((app) => {
const link = ((isCurrentWorkspaceManager, app) => {
if (!isCurrentWorkspaceManager) {
return `/app/${app.id}/overview`
}
else {
if (app.mode === 'workflow' || app.mode === 'advanced-chat')
return `/app/${app.id}/workflow`
else
return `/app/${app.id}/configuration`
}
})(isCurrentWorkspaceManager, app)
return {
id: app.id,
icon: app.icon,
icon_background: app.icon_background,
name: app.name,
mode: app.mode,
link,
}
})
setNavItems(navItems)
}
}, [appsData, isCurrentWorkspaceManager, setNavItems])
// update current app name
useEffect(() => {
if (appDetail) {
const newNavItems = produce(navItems, (draft: NavItem[]) => {
navItems.forEach((app, index) => {
if (app.id === appDetail.id)
draft[index].name = appDetail.name
})
})
setNavItems(newNavItems)
}
}, [appDetail, navItems])
return (
<>
<Nav
isApp
icon={<Robot className='w-4 h-4' />}
activeIcon={<RobotActive className='w-4 h-4' />}
text={t('common.menus.apps')}
activeSegment={['apps', 'app']}
link='/apps'
curNav={currentApp}
navs={appItems.map(item => ({
id: item.id,
name: item.name,
link: `/app/${item.id}/${isCurrentWorkspaceManager ? 'configuration' : 'overview'}`,
icon: item.icon,
icon_background: item.icon_background,
}))}
curNav={appDetail}
navs={navItems}
createText={t('common.menus.newApp')}
onCreate={() => setShowNewAppDialog(true)}
onCreate={openModal}
onLoadmore={handleLoadmore}
/>
<NewAppDialog show={showNewAppDialog} onClose={() => setShowNewAppDialog(false)} />
<CreateAppModal
show={showNewAppDialog}
onClose={() => setShowNewAppDialog(false)}
onSuccess={() => mutate()}
/>
<CreateAppTemplateDialog
show={showNewAppTemplateDialog}
onClose={() => setShowNewAppTemplateDialog(false)}
onSuccess={() => mutate()}
/>
<CreateFromDSLModal
show={showCreateFromDSLModal}
onClose={() => setShowCreateFromDSLModal(false)}
onSuccess={() => mutate()}
/>
</>
)
}

8
web/app/components/header/app-selector/index.tsx
View File

@@ -6,7 +6,7 @@ import { Menu, Transition } from '@headlessui/react'
import { useRouter } from 'next/navigation'
import Indicator from '../indicator'
import type { AppDetailResponse } from '@/models/app'
import NewAppDialog from '@/app/(commonLayout)/apps/NewAppDialog'
import CreateAppDialog from '@/app/components/app/create-app-dialog'
import AppIcon from '@/app/components/base/app-icon'
import { useAppContext } from '@/context/app-context'
@@ -101,7 +101,11 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
</Menu.Items>
</Transition>
</Menu>
<NewAppDialog show={showNewAppDialog} onClose={() => setShowNewAppDialog(false)} />
<CreateAppDialog
show={showNewAppDialog}
onClose={() => setShowNewAppDialog(false)}
onSuccess={() => {}}
/>
</div>
)
}

6
web/app/components/header/nav/index.tsx
View File

@@ -7,6 +7,7 @@ import classNames from 'classnames'
import type { INavSelectorProps } from './nav-selector'
import NavSelector from './nav-selector'
import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
import { useStore as useAppStore } from '@/app/components/app/store'
type INavProps = {
icon: React.ReactNode
@@ -14,6 +15,7 @@ type INavProps = {
text: string
activeSegment: string | string[]
link: string
isApp: boolean
} & INavSelectorProps
const Nav = ({
@@ -27,7 +29,9 @@ const Nav = ({
createText,
onCreate,
onLoadmore,
isApp,
}: INavProps) => {
const { setAppDetail } = useAppStore()
const [hovered, setHovered] = useState(false)
const segment = useSelectedLayoutSegment()
const isActived = Array.isArray(activeSegment) ? activeSegment.includes(segment!) : segment === activeSegment
@@ -40,6 +44,7 @@ const Nav = ({
`}>
<Link href={link}>
<div
onClick={() => setAppDetail()}
className={classNames(`
flex items-center h-7 px-2.5 cursor-pointer rounded-[10px]
${isActived ? 'text-primary-600' : 'text-gray-500'}
@@ -65,6 +70,7 @@ const Nav = ({
<>
<div className='font-light text-gray-300 '>/</div>
<NavSelector
isApp={isApp}
curNav={curNav}
navs={navs}
createText={createText}

209
web/app/components/header/nav/nav-selector/index.tsx
View File

@@ -1,36 +1,41 @@
'use client'
import { useCallback } from 'react'
import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid'
import { Menu } from '@headlessui/react'
import { useTranslation } from 'react-i18next'
import { Fragment, useCallback } from 'react'
import cn from 'classnames'
import { Menu, Transition } from '@headlessui/react'
import { useRouter } from 'next/navigation'
import { debounce } from 'lodash-es'
import Indicator from '../../indicator'
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/solid/mapsAndTravel'
import { useAppContext } from '@/context/app-context'
import { useStore as useAppStore } from '@/app/components/app/store'
import { ChevronDown, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
import { Plus } from '@/app/components/base/icons/src/vender/line/general'
type NavItem = {
export type NavItem = {
id: string
name: string
link: string
icon: string
icon_background: string
mode: string
}
export type INavSelectorProps = {
navs: NavItem[]
curNav?: Omit<NavItem, 'link'>
createText: string
onCreate: () => void
isApp: boolean
onCreate: (state: string) => void
onLoadmore?: () => void
}
const itemClassName = `
flex items-center w-full h-10 px-3 text-gray-700 text-[14px]
rounded-lg font-normal hover:bg-gray-100 cursor-pointer truncate
`
const NavSelector = ({ curNav, navs, createText, onCreate, onLoadmore }: INavSelectorProps) => {
const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }: INavSelectorProps) => {
const { t } = useTranslation()
const router = useRouter()
const { isCurrentWorkspaceManager } = useAppContext()
const { setAppDetail } = useAppStore()
const handleScroll = useCallback(debounce((e) => {
if (typeof onLoadmore === 'function') {
@@ -44,66 +49,130 @@ const NavSelector = ({ curNav, navs, createText, onCreate, onLoadmore }: INavSel
return (
<div className="">
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button
className="
inline-flex items-center w-full h-7 justify-center
rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold
text-[#1C64F2] hover:bg-[#EBF5FF]
"
>
<div className='max-w-[180px] truncate' title={curNav?.name}>{curNav?.name}</div>
<ChevronDownIcon
className="shrink-0 w-3 h-3 ml-1"
aria-hidden="true"
/>
</Menu.Button>
</div>
<Menu.Items
className="
absolute -left-11 right-0 mt-1.5 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white
shadow-lg
"
>
<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
{
navs.map(nav => (
<Menu.Item key={nav.id}>
<div className={itemClassName} onClick={() => router.push(nav.link)} title={nav.name}>
<div className='relative w-6 h-6 mr-2 bg-[#D5F5F6] rounded-[6px]'>
<AppIcon size='tiny' icon={nav.icon} background={nav.icon_background}/>
<div className='flex justify-center items-center absolute -right-0.5 -bottom-0.5 w-2.5 h-2.5 bg-white rounded'>
<Indicator />
{({ open }) => (
<>
<Menu.Button className={cn(
'group inline-flex items-center w-full h-7 justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-primary-600 hover:bg-primary-50',
open && 'bg-primary-50',
)}>
<div className='max-w-[180px] truncate' title={curNav?.name}>{curNav?.name}</div>
<ChevronDown
className={cn('shrink-0 w-3 h-3 ml-1 opacity-50 group-hover:opacity-100', open && '!opacity-100')}
aria-hidden="true"
/>
</Menu.Button>
<Menu.Items
className="
absolute -left-11 right-0 mt-1.5 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white
shadow-lg
"
>
<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
{
navs.map(nav => (
<Menu.Item key={nav.id}>
<div className='flex items-center w-full px-3 py-[6px] text-gray-700 text-[14px] rounded-lg font-normal hover:bg-gray-100 cursor-pointer truncate' onClick={() => {
setAppDetail()
router.push(nav.link)
}} title={nav.name}>
<div className='relative w-6 h-6 mr-2 rounded-md'>
<AppIcon size='tiny' icon={nav.icon} background={nav.icon_background}/>
{!!nav.mode && (
<span className={cn(
'absolute w-3.5 h-3.5 -bottom-0.5 -right-0.5 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm',
)}>
{nav.mode === 'advanced-chat' && (
<ChatBot className='w-2.5 h-2.5 text-[#1570EF]' />
)}
{nav.mode === 'agent-chat' && (
<CuteRobote className='w-2.5 h-2.5 text-indigo-600' />
)}
{nav.mode === 'chat' && (
<ChatBot className='w-2.5 h-2.5 text-[#1570EF]' />
)}
{nav.mode === 'completion' && (
<AiText className='w-2.5 h-2.5 text-[#0E9384]' />
)}
{nav.mode === 'workflow' && (
<Route className='w-2.5 h-2.5 text-[#f79009]' />
)}
</span>
)}
</div>
<div className='truncate'>
{nav.name}
</div>
</div>
</div>
<div className='truncate'>
{nav.name}
</div>
</div>
</Menu.Item>
))
}
</div>
{isCurrentWorkspaceManager && <Menu.Item>
<div className='p-1' onClick={onCreate}>
<div
className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100'
>
<div
className='
flex justify-center items-center
ml-4 mr-2 w-6 h-6 bg-gray-100 rounded-[6px]
border-[0.5px] border-gray-200 border-dashed
'
>
<PlusIcon className='w-4 h-4 text-gray-500' />
</div>
<div className='font-normal text-[14px] text-gray-700'>{createText}</div>
</Menu.Item>
))
}
</div>
</div>
</Menu.Item>}
</Menu.Items>
{!isApp && (
<Menu.Button className='p-1 w-full'>
<div onClick={() => onCreate('')} className={cn(
'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100',
)}>
<div className='shrink-0 flex justify-center items-center w-6 h-6 bg-gray-50 rounded-[6px] border-[0.5px] border-gray-200 border'>
<Plus className='w-4 h-4 text-gray-500' />
</div>
<div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
</div>
</Menu.Button>
)}
{isApp && isCurrentWorkspaceManager && (
<Menu as="div" className="relative w-full h-full">
{({ open }) => (
<>
<Menu.Button className='p-1 w-full'>
<div className={cn(
'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100',
open && '!bg-gray-100',
)}>
<div className='shrink-0 flex justify-center items-center w-6 h-6 bg-gray-50 rounded-[6px] border-[0.5px] border-gray-200 border'>
<Plus className='w-4 h-4 text-gray-500' />
</div>
<div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
<ChevronRight className='shrink-0 w-3.5 h-3.5 text-gray-500'/>
</div>
</Menu.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className={cn(
'absolute top-[3px] right-[-198px] min-w-[200px] z-10 bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg',
)}>
<div className='p-1'>
<div className={cn('flex items-center px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100 text-gray-700 font-normal')} onClick={() => onCreate('blank')}>
<FilePlus01 className='shrink-0 mr-2 w-4 h-4 text-gray-600' />
{t('app.newApp.startFromBlank')}
</div>
<div className={cn('flex items-center px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100 text-gray-700 font-normal')} onClick={() => onCreate('template')}>
<FilePlus02 className='shrink-0 mr-2 w-4 h-4 text-gray-600' />
{t('app.newApp.startFromTemplate')}
</div>
</div>
<div className='p-1 border-t border-gray-100'>
<div className={cn('flex items-center px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100 text-gray-700 font-normal')} onClick={() => onCreate('dsl')}>
<FileArrow01 className='shrink-0 mr-2 w-4 h-4 text-gray-600' />
{t('app.importDSL')}
</div>
</div>
</Menu.Items>
</Transition>
</>
)}
</Menu>
)}
</Menu.Items>
</>
)}
</Menu>
</div>
)