| @@ -12,7 +12,6 @@ import { | |||
| RiFileUploadLine, | |||
| } from '@remixicon/react' | |||
| import AppIcon from '../base/app-icon' | |||
| import cn from '@/utils/classnames' | |||
| import { useStore as useAppStore } from '@/app/components/app/store' | |||
| import { ToastContext } from '@/app/components/base/toast' | |||
| import { useAppContext } from '@/context/app-context' | |||
| @@ -31,6 +30,7 @@ import Divider from '../base/divider' | |||
| import type { Operation } from './app-operations' | |||
| import AppOperations from './app-operations' | |||
| import dynamic from 'next/dynamic' | |||
| import cn from '@/utils/classnames' | |||
| const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), { | |||
| ssr: false, | |||
| @@ -256,32 +256,40 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx | |||
| }} | |||
| className='block w-full' | |||
| > | |||
| <div className={cn('flex rounded-lg', expand ? 'flex-col gap-2 p-2 pb-2.5' : 'items-start justify-center gap-1 p-1', open && 'bg-state-base-hover', isCurrentWorkspaceEditor && 'cursor-pointer hover:bg-state-base-hover')}> | |||
| <div className={`flex items-center self-stretch ${expand ? 'justify-between' : 'flex-col gap-1'}`}> | |||
| <AppIcon | |||
| size={expand ? 'large' : 'small'} | |||
| iconType={appDetail.icon_type} | |||
| icon={appDetail.icon} | |||
| background={appDetail.icon_background} | |||
| imageUrl={appDetail.icon_url} | |||
| /> | |||
| <div className='flex items-center justify-center rounded-md p-0.5'> | |||
| <div className='flex h-5 w-5 items-center justify-center'> | |||
| <div className='flex flex-col gap-2 rounded-lg p-1 hover:bg-state-base-hover'> | |||
| <div className='flex items-center gap-1'> | |||
| <div className={cn(!expand && 'ml-1')}> | |||
| <AppIcon | |||
| size={expand ? 'large' : 'small'} | |||
| iconType={appDetail.icon_type} | |||
| icon={appDetail.icon} | |||
| background={appDetail.icon_background} | |||
| imageUrl={appDetail.icon_url} | |||
| /> | |||
| </div> | |||
| {expand && ( | |||
| <div className='ml-auto flex items-center justify-center rounded-md p-0.5'> | |||
| <div className='flex h-5 w-5 items-center justify-center'> | |||
| <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' /> | |||
| </div> | |||
| </div> | |||
| )} | |||
| </div> | |||
| {!expand && ( | |||
| <div className='flex items-center justify-center'> | |||
| <div className='flex h-5 w-5 items-center justify-center rounded-md p-0.5'> | |||
| <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div className={cn( | |||
| 'flex flex-col items-start gap-1 transition-all duration-200 ease-in-out', | |||
| expand | |||
| ? 'w-auto opacity-100' | |||
| : 'pointer-events-none w-0 overflow-hidden opacity-0', | |||
| )}> | |||
| <div className='flex w-full'> | |||
| <div className='system-md-semibold truncate whitespace-nowrap text-text-secondary'>{appDetail.name}</div> | |||
| )} | |||
| {expand && ( | |||
| <div className='flex flex-col items-start gap-1'> | |||
| <div className='flex w-full'> | |||
| <div className='system-md-semibold truncate whitespace-nowrap text-text-secondary'>{appDetail.name}</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 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> | |||
| </button> | |||
| )} | |||