| import { useTranslation } from 'react-i18next' | import { useTranslation } from 'react-i18next' | ||||
| import { useRouter } from 'next/navigation' | import { useRouter } from 'next/navigation' | ||||
| import { useContext } from 'use-context-selector' | import { useContext } from 'use-context-selector' | ||||
| import React, { useCallback, useEffect, useState } from 'react' | |||||
| import React, { useCallback, useState } from 'react' | |||||
| import { | import { | ||||
| RiDeleteBinLine, | RiDeleteBinLine, | ||||
| RiEditLine, | RiEditLine, | ||||
| import { useAppContext } from '@/context/app-context' | import { useAppContext } from '@/context/app-context' | ||||
| import { useProviderContext } from '@/context/provider-context' | import { useProviderContext } from '@/context/provider-context' | ||||
| import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps' | import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps' | ||||
| import type { Tag } from '@/app/components/base/tag-management/constant' | |||||
| import TagSelector from '@/app/components/base/tag-management/selector' | |||||
| import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal' | import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal' | ||||
| import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal' | import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal' | ||||
| import { NEED_REFRESH_APP_LIST_KEY } from '@/config' | import { NEED_REFRESH_APP_LIST_KEY } from '@/config' | ||||
| const [showImportDSLModal, setShowImportDSLModal] = useState<boolean>(false) | const [showImportDSLModal, setShowImportDSLModal] = useState<boolean>(false) | ||||
| const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([]) | const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([]) | ||||
| const [tags, setTags] = useState<Tag[]>(appDetail?.tags || []) | |||||
| useEffect(() => { | |||||
| setTags(appDetail?.tags || []) | |||||
| }, [appDetail?.tags]) | |||||
| const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({ | const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({ | ||||
| name, | name, | ||||
| icon_type, | icon_type, | ||||
| imageUrl={appDetail.icon_url} | imageUrl={appDetail.icon_url} | ||||
| /> | /> | ||||
| <div className='flex w-full grow flex-col items-start justify-center'> | <div className='flex w-full grow flex-col items-start justify-center'> | ||||
| <div className='flex w-full items-center justify-between'> | |||||
| <div className='flex min-w-0 flex-1 flex-col'> | |||||
| <div className='flex items-center gap-2'> | |||||
| <div className='system-md-semibold truncate text-text-secondary'>{appDetail.name}</div> | |||||
| {isCurrentWorkspaceEditor && ( | |||||
| <div className='flex w-0 grow items-center' onClick={(e) => { | |||||
| e.stopPropagation() | |||||
| e.preventDefault() | |||||
| }}> | |||||
| <div className='w-full'> | |||||
| <TagSelector | |||||
| position='br' | |||||
| type='app' | |||||
| targetID={appDetail.id} | |||||
| value={tags.map(tag => tag.id)} | |||||
| selectedTags={tags} | |||||
| onCacheUpdate={setTags} | |||||
| onChange={() => { | |||||
| // Optional: could trigger a refresh if needed | |||||
| }} | |||||
| minWidth='true' | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| )} | |||||
| </div> | |||||
| <div className='system-2xs-medium-uppercase whitespace-nowrap text-text-tertiary'>{appDetail.mode === 'advanced-chat' ? t('app.types.advanced') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div> | |||||
| </div> | |||||
| </div> | |||||
| <div className='system-md-semibold w-full truncate text-text-secondary'>{appDetail.name}</div> | |||||
| <div className='system-2xs-medium-uppercase text-text-tertiary'>{appDetail.mode === 'advanced-chat' ? t('app.types.advanced') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| {/* description */} | {/* description */} |