Feat: new entry point for app creation (#10847)

web/app/components/app/create-app-dialog/app-card/index.tsx

@@ -0,0 +1,60 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { PlusIcon } from '@heroicons/react/20/solid'
+import { AppTypeIcon, AppTypeLabel } from '../../type-selector'
+import Button from '@/app/components/base/button'
+import cn from '@/utils/classnames'
+import type { App } from '@/models/explore'
+import AppIcon from '@/app/components/base/app-icon'
+
+export type AppCardProps = {
+  app: App
+  canCreate: boolean
+  onCreate: () => void
+}
+
+const AppCard = ({
+  app,
+  onCreate,
+}: AppCardProps) => {
+  const { t } = useTranslation()
+  const { app: appBasicInfo } = app
+  return (
+    <div className={cn('p-4 h-[132px] relative overflow-hidden flex flex-col group bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xs  hover:shadow-lg cursor-pointer')}>
+      <div className='flex items-center gap-3 pb-2 grow-0 shrink-0'>
+        <div className='relative shrink-0'>
+          <AppIcon
+            size='large'
+            iconType={app.app.icon_type}
+            icon={app.app.icon}
+            background={app.app.icon_background}
+            imageUrl={app.app.icon_url}
+          />
+          <AppTypeIcon wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[4px] border border-divider-regular outline outline-components-panel-on-panel-item-bg'
+            className='w-3 h-3' type={appBasicInfo.mode} />
+        </div>
+        <div className='grow flex flex-col gap-1'>
+          <div className='line-clamp-1'>
+            <span className='system-md-semibold text-text-secondary' title={appBasicInfo.name}>{appBasicInfo.name}</span>
+          </div>
+          <AppTypeLabel className='system-2xs-medium-uppercase text-text-tertiary' type={app.app.mode} />
+        </div>
+      </div>
+      <div className="py-1 system-xs-regular text-text-tertiary">
+        <div className='line-clamp-3'>
+          {app.description}
+        </div>
+      </div>
+      <div className={cn('hidden absolute bottom-0 left-0 right-0 p-4 pt-8 group-hover:flex bg-gradient-to-t from-[60.27%] from-components-panel-gradient-2 to-transparent')}>
+        <div className={cn('flex items-center w-full space-x-2 h-8')}>
+          <Button variant='primary' className='grow' onClick={() => onCreate()}>
+            <PlusIcon className='w-4 h-4 mr-1' />
+            <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AppCard

web/app/components/app/create-app-dialog/app-list/index.tsx

@@ -0,0 +1,247 @@
+'use client'
+
+import React, { useMemo, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import useSWR from 'swr'
+import { useDebounceFn } from 'ahooks'
+import { RiRobot2Line } from '@remixicon/react'
+import AppCard from '../app-card'
+import Sidebar, { AppCategories, AppCategoryLabel } from './sidebar'
+import Toast from '@/app/components/base/toast'
+import Divider from '@/app/components/base/divider'
+import cn from '@/utils/classnames'
+import ExploreContext from '@/context/explore-context'
+import type { App } from '@/models/explore'
+import { fetchAppDetail, fetchAppList } from '@/service/explore'
+import { importDSL } from '@/service/apps'
+import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
+import CreateAppModal from '@/app/components/explore/create-app-modal'
+import AppTypeSelector from '@/app/components/app/type-selector'
+import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
+import Loading from '@/app/components/base/loading'
+import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
+import { useAppContext } from '@/context/app-context'
+import { getRedirection } from '@/utils/app-redirection'
+import Input from '@/app/components/base/input'
+import type { AppMode } from '@/types/app'
+import { DSLImportMode } from '@/models/app'
+
+type AppsProps = {
+  onSuccess?: () => void
+  onCreateFromBlank?: () => void
+}
+
+// export enum PageType {
+//   EXPLORE = 'explore',
+//   CREATE = 'create',
+// }
+
+const Apps = ({
+  onSuccess,
+  onCreateFromBlank,
+}: AppsProps) => {
+  const { t } = useTranslation()
+  const { isCurrentWorkspaceEditor } = useAppContext()
+  const { push } = useRouter()
+  const { hasEditPermission } = useContext(ExploreContext)
+  const allCategoriesEn = AppCategories.RECOMMENDED
+
+  const [keywords, setKeywords] = useState('')
+  const [searchKeywords, setSearchKeywords] = useState('')
+
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchKeywords(keywords)
+  }, { wait: 500 })
+
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+    handleSearch()
+  }
+
+  const [currentType, setCurrentType] = useState<AppMode[]>([])
+  const [currCategory, setCurrCategory] = useTabSearchParams({
+    defaultTab: allCategoriesEn,
+    disableSearchParams: true,
+  })
+
+  const {
+    data: { categories, allList },
+  } = useSWR(
+    ['/explore/apps'],
+    () =>
+      fetchAppList().then(({ categories, recommended_apps }) => ({
+        categories,
+        allList: recommended_apps.sort((a, b) => a.position - b.position),
+      })),
+    {
+      fallbackData: {
+        categories: [],
+        allList: [],
+      },
+    },
+  )
+
+  const filteredList = useMemo(() => {
+    const filteredByCategory = allList.filter((item) => {
+      if (currCategory === allCategoriesEn)
+        return true
+      return item.category === currCategory
+    })
+    if (currentType.length === 0)
+      return filteredByCategory
+    return filteredByCategory.filter((item) => {
+      if (currentType.includes('chat') && item.app.mode === 'chat')
+        return true
+      if (currentType.includes('advanced-chat') && item.app.mode === 'advanced-chat')
+        return true
+      if (currentType.includes('agent-chat') && item.app.mode === 'agent-chat')
+        return true
+      if (currentType.includes('completion') && item.app.mode === 'completion')
+        return true
+      if (currentType.includes('workflow') && item.app.mode === 'workflow')
+        return true
+      return false
+    })
+  }, [currentType, currCategory, allCategoriesEn, allList])
+
+  const searchFilteredList = useMemo(() => {
+    if (!searchKeywords || !filteredList || filteredList.length === 0)
+      return filteredList
+
+    const lowerCaseSearchKeywords = searchKeywords.toLowerCase()
+
+    return filteredList.filter(item =>
+      item.app && item.app.name && item.app.name.toLowerCase().includes(lowerCaseSearchKeywords),
+    )
+  }, [searchKeywords, filteredList])
+
+  const [currApp, setCurrApp] = React.useState<App | null>(null)
+  const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
+  const onCreate: CreateAppModalProps['onConfirm'] = async ({
+    name,
+    icon_type,
+    icon,
+    icon_background,
+    description,
+  }) => {
+    const { export_data } = await fetchAppDetail(
+      currApp?.app.id as string,
+    )
+    try {
+      const app = await importDSL({
+        mode: DSLImportMode.YAML_CONTENT,
+        yaml_content: export_data,
+        name,
+        icon_type,
+        icon,
+        icon_background,
+        description,
+      })
+      setIsShowCreateModal(false)
+      Toast.notify({
+        type: 'success',
+        message: t('app.newApp.appCreated'),
+      })
+      if (onSuccess)
+        onSuccess()
+      localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
+      getRedirection(isCurrentWorkspaceEditor, app, push)
+    }
+    catch (e) {
+      Toast.notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
+    }
+  }
+
+  if (!categories || categories.length === 0) {
+    return (
+      <div className="flex h-full items-center">
+        <Loading type="area" />
+      </div>
+    )
+  }
+
+  return (
+    <div className='h-full flex flex-col'>
+      <div className='flex justify-between items-center py-3 border-b border-divider-burn'>
+        <div className='min-w-[180px] pl-5'>
+          <span className='title-xl-semi-bold text-text-primary'>{t('app.newApp.startFromTemplate')}</span>
+        </div>
+        <div className='flex-1 max-w-[548px] p-1.5 flex items-center rounded-xl shadow-md bg-components-panel-bg-blur border border-components-panel-border'>
+          <AppTypeSelector value={currentType} onChange={setCurrentType} />
+          <div className='h-[14px]'>
+            <Divider type='vertical' />
+          </div>
+          <Input
+            showClearIcon
+            wrapperClassName='w-full flex-1'
+            className='bg-transparent hover:bg-transparent focus:bg-transparent hover:border-transparent focus:border-transparent focus:shadow-none'
+            placeholder={t('app.newAppFromTemplate.searchAllTemplate') as string}
+            value={keywords}
+            onChange={e => handleKeywordsChange(e.target.value)}
+            onClear={() => handleKeywordsChange('')}
+          />
+        </div>
+        <div className='w-[180px] h-8'></div>
+      </div>
+      <div className='relative flex flex-1 overflow-y-auto'>
+        {!searchKeywords && <div className='w-[200px] h-full p-4'>
+          <Sidebar current={currCategory as AppCategories} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
+        </div>}
+        <div className='flex-1 h-full overflow-auto shrink-0 grow p-6 pt-2 border-l border-divider-burn'>
+          {searchFilteredList && searchFilteredList.length > 0 && <>
+            <div className='pt-4 pb-1'>
+              {searchKeywords
+                ? <p className='title-md-semi-bold text-text-tertiary'>{searchFilteredList.length > 1 ? t('app.newApp.foundResults', { count: searchFilteredList.length }) : t('app.newApp.foundResult', { count: searchFilteredList.length })}</p>
+                : <AppCategoryLabel category={currCategory as AppCategories} className='title-md-semi-bold text-text-primary' />}
+            </div>
+            <div
+              className={cn(
+                'grid content-start shrink-0 gap-3 grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6',
+              )}>
+              {searchFilteredList.map(app => (
+                <AppCard
+                  key={app.app_id}
+                  app={app}
+                  canCreate={hasEditPermission}
+                  onCreate={() => {
+                    setCurrApp(app)
+                    setIsShowCreateModal(true)
+                  }}
+                />
+              ))}
+            </div>
+          </>}
+          {(!searchFilteredList || searchFilteredList.length === 0) && <NoTemplateFound />}
+        </div>
+      </div>
+      {isShowCreateModal && (
+        <CreateAppModal
+          appIconType={currApp?.app.icon_type || 'emoji'}
+          appIcon={currApp?.app.icon || ''}
+          appIconBackground={currApp?.app.icon_background || ''}
+          appIconUrl={currApp?.app.icon_url}
+          appName={currApp?.app.name || ''}
+          appDescription={currApp?.app.description || ''}
+          show={isShowCreateModal}
+          onConfirm={onCreate}
+          onHide={() => setIsShowCreateModal(false)}
+        />
+      )}
+    </div>
+  )
+}
+
+export default React.memo(Apps)
+
+function NoTemplateFound() {
+  const { t } = useTranslation()
+  return <div className='p-4 rounded-lg w-full bg-workflow-process-bg'>
+    <div className='w-8 h-8 rounded-lg inline-flex items-center justify-center mb-2 shadow-lg bg-components-card-bg'>
+      <RiRobot2Line className='w-5 h-5 text-text-tertiary' />
+    </div>
+    <p className='title-md-semi-bold text-text-primary'>{t('app.newApp.noTemplateFound')}</p>
+    <p className='system-sm-regular text-text-tertiary'>{t('app.newApp.noTemplateFoundTip')}</p>
+  </div>
+}

web/app/components/app/create-app-dialog/app-list/sidebar.tsx

@@ -0,0 +1,91 @@
+'use client'
+import { RiAppsFill, RiChatSmileAiFill, RiExchange2Fill, RiPassPendingFill, RiQuillPenAiFill, RiSpeakAiFill, RiStickyNoteAddLine, RiTerminalBoxFill, RiThumbUpFill } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import classNames from '@/utils/classnames'
+import Divider from '@/app/components/base/divider'
+
+export enum AppCategories {
+  RECOMMENDED = 'Recommended',
+  ASSISTANT = 'Assistant',
+  AGENT = 'Agent',
+  HR = 'HR',
+  PROGRAMMING = 'Programming',
+  WORKFLOW = 'Workflow',
+  WRITING = 'Writing',
+}
+
+type SidebarProps = {
+  current: AppCategories
+  onClick?: (category: AppCategories) => void
+  onCreateFromBlank?: () => void
+}
+
+export default function Sidebar({ current, onClick, onCreateFromBlank }: SidebarProps) {
+  const { t } = useTranslation()
+  return <div className="w-full h-full flex flex-col">
+    <ul>
+      <CategoryItem category={AppCategories.RECOMMENDED} active={current === AppCategories.RECOMMENDED} onClick={onClick} />
+    </ul>
+    <div className='px-3 pt-2 pb-1 system-xs-medium-uppercase text-text-tertiary'>{t('app.newAppFromTemplate.byCategories')}</div>
+    <ul className='flex-grow flex flex-col gap-0.5'>
+      <CategoryItem category={AppCategories.ASSISTANT} active={current === AppCategories.ASSISTANT} onClick={onClick} />
+      <CategoryItem category={AppCategories.AGENT} active={current === AppCategories.AGENT} onClick={onClick} />
+      <CategoryItem category={AppCategories.HR} active={current === AppCategories.HR} onClick={onClick} />
+      <CategoryItem category={AppCategories.PROGRAMMING} active={current === AppCategories.PROGRAMMING} onClick={onClick} />
+      <CategoryItem category={AppCategories.WORKFLOW} active={current === AppCategories.WORKFLOW} onClick={onClick} />
+      <CategoryItem category={AppCategories.WRITING} active={current === AppCategories.WRITING} onClick={onClick} />
+    </ul>
+    <Divider bgStyle='gradient' />
+    <div className='px-3 py-1 flex items-center gap-1 text-text-tertiary cursor-pointer' onClick={onCreateFromBlank}>
+      <RiStickyNoteAddLine className='w-3.5 h-3.5' />
+      <span className='system-xs-regular'>{t('app.newApp.startFromBlank')}</span>
+    </div>
+  </div>
+}
+
+type CategoryItemProps = {
+  active: boolean
+  category: AppCategories
+  onClick?: (category: AppCategories) => void
+}
+function CategoryItem({ category, active, onClick }: CategoryItemProps) {
+  return <li
+    className={classNames('p-1 pl-3 rounded-lg flex items-center gap-2 group cursor-pointer hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
+    onClick={() => { onClick?.(category) }}>
+    <div className='w-5 h-5 inline-flex items-center justify-center rounded-md border border-divider-regular bg-components-icon-bg-midnight-solid group-[.active]:bg-components-icon-bg-blue-solid'>
+      <AppCategoryIcon category={category} />
+    </div>
+    <AppCategoryLabel category={category}
+      className={classNames('system-sm-medium text-components-menu-item-text group-[.active]:text-components-menu-item-text-active group-hover:text-components-menu-item-text-hover', active && 'system-sm-semibold')} />
+  </li >
+}
+
+type AppCategoryLabelProps = {
+  category: AppCategories
+  className?: string
+}
+export function AppCategoryLabel({ category, className }: AppCategoryLabelProps) {
+  const { t } = useTranslation()
+  return <span className={className}>{t(`app.newAppFromTemplate.sidebar.${category}`)}</span>
+}
+
+type AppCategoryIconProps = {
+  category: AppCategories
+}
+function AppCategoryIcon({ category }: AppCategoryIconProps) {
+  if (category === AppCategories.AGENT)
+    return <RiSpeakAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+  if (category === AppCategories.ASSISTANT)
+    return <RiChatSmileAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+  if (category === AppCategories.HR)
+    return <RiPassPendingFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+  if (category === AppCategories.PROGRAMMING)
+    return <RiTerminalBoxFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+  if (category === AppCategories.RECOMMENDED)
+    return <RiThumbUpFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+  if (category === AppCategories.WRITING)
+    return <RiQuillPenAiFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+  if (category === AppCategories.WORKFLOW)
+    return <RiExchange2Fill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+  return <RiAppsFill className='w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100' />
+}

web/app/components/app/create-app-dialog/index.tsx

@@ -1,36 +1,26 @@
 'use client'
-import { useTranslation } from 'react-i18next'
-import { RiCloseLine } from '@remixicon/react'
-import NewAppDialog from './newAppDialog'
-import AppList, { PageType } from '@/app/components/explore/app-list'
+import AppList from './app-list'
+import FullScreenModal from '@/app/components/base/fullscreen-modal'
 
 type CreateAppDialogProps = {
   show: boolean
   onSuccess: () => void
   onClose: () => void
+  onCreateFromBlank?: () => void
 }
 
-const CreateAppTemplateDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
-  const { t } = useTranslation()
-
+const CreateAppTemplateDialog = ({ show, onSuccess, onClose, onCreateFromBlank }: CreateAppDialogProps) => {
   return (
-    <NewAppDialog
-      className='flex'
-      show={show}
-      onClose={() => {}}
+    <FullScreenModal
+      open={show}
+      closable
+      onClose={onClose}
     >
-      {/* template list */}
-      <div className='grow flex flex-col h-full bg-gray-100'>
-        <div className='shrink-0 pl-8 pr-6 pt-6 pb-3 bg-gray-100 rounded-se-xl text-xl leading-[30px] font-semibold text-gray-900 z-10'>{t('app.newApp.startFromTemplate')}</div>
-        <AppList onSuccess={() => {
-          onSuccess()
-          onClose()
-        }} pageType={PageType.CREATE} />
-      </div>
-      <div className='absolute right-6 top-6 p-2 cursor-pointer z-20' onClick={onClose}>
-        <RiCloseLine className='w-4 h-4 text-gray-500' />
-      </div>
-    </NewAppDialog>
+      <AppList onCreateFromBlank={onCreateFromBlank} onSuccess={() => {
+        onSuccess()
+        onClose()
+      }} />
+    </FullScreenModal>
   )
 }
 

web/app/components/app/create-app-modal/grid-bg-chat.svg

@@ -1,16 +0,0 @@
-<svg width="125" height="74" viewBox="0 0 125 74" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Grid BG">
-<mask id="mask0_3169_30051" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="125" height="74">
-<rect id="Mask" width="125" height="74" fill="url(#paint0_linear_3169_30051)"/>
-</mask>
-<g mask="url(#mask0_3169_30051)">
-<path id="Grid" d="M7 -3H-1V5M7 -3V5M7 -3H15M7 5H-1M7 5H15M7 5V13M-1 5V13M15 -3V5M15 -3H23M15 5H23M15 5V13M23 -3V5M23 -3H31M23 5H31M23 5V13M31 -3V5M31 -3H39M31 5H39M31 5V13M39 -3V5M39 -3H47M39 5H47M39 5V13M47 -3V5M47 -3H55M47 5H55M47 5V13M55 -3V5M55 -3H63M55 5H63M55 5V13M63 -3V5M63 -3H71M63 5H71M63 5V13M71 -3V5M71 -3H79M71 5H79M71 5V13M79 -3V5M79 -3H87M79 5H87M79 5V13M87 -3V5M87 -3H95M87 5H95M87 5V13M95 -3V5M95 -3H103M95 5H103M95 5V13M103 -3V5M103 -3H111M103 5H111M103 5V13M111 -3V5M111 -3H119M111 5H119M111 5V13M119 -3V5M119 -3H127V5M119 5H127M119 5V13M127 5V13M7 13H-1M7 13H15M7 13V21M-1 13V21M15 13H23M15 13V21M23 13H31M23 13V21M31 13H39M31 13V21M39 13H47M39 13V21M47 13H55M47 13V21M55 13H63M55 13V21M63 13H71M63 13V21M71 13H79M71 13V21M79 13H87M79 13V21M87 13H95M87 13V21M95 13H103M95 13V21M103 13H111M103 13V21M111 13H119M111 13V21M119 13H127M119 13V21M127 13V21M7 21H-1M7 21H15M7 21V29M-1 21V29M15 21H23M15 21V29M23 21H31M23 21V29M31 21H39M31 21V29M39 21H47M39 21V29M47 21H55M47 21V29M55 21H63M55 21V29M63 21H71M63 21V29M71 21H79M71 21V29M79 21H87M79 21V29M87 21H95M87 21V29M95 21H103M95 21V29M103 21H111M103 21V29M111 21H119M111 21V29M119 21H127M119 21V29M127 21V29M7 29H-1M7 29H15M7 29V37M-1 29V37M15 29H23M15 29V37M23 29H31M23 29V37M31 29H39M31 29V37M39 29H47M39 29V37M47 29H55M47 29V37M55 29H63M55 29V37M63 29H71M63 29V37M71 29H79M71 29V37M79 29H87M79 29V37M87 29H95M87 29V37M95 29H103M95 29V37M103 29H111M103 29V37M111 29H119M111 29V37M119 29H127M119 29V37M127 29V37M7 37H-1M7 37H15M7 37V45M-1 37V45M15 37H23M15 37V45M23 37H31M23 37V45M31 37H39M31 37V45M39 37H47M39 37V45M47 37H55M47 37V45M55 37H63M55 37V45M63 37H71M63 37V45M71 37H79M71 37V45M79 37H87M79 37V45M87 37H95M87 37V45M95 37H103M95 37V45M103 37H111M103 37V45M111 37H119M111 37V45M119 37H127M119 37V45M127 37V45M7 45H-1M7 45H15M7 45V53M-1 45V53M15 45H23M15 45V53M23 45H31M23 45V53M31 45H39M31 45V53M39 45H47M39 45V53M47 45H55M47 45V53M55 45H63M55 45V53M63 45H71M63 45V53M71 45H79M71 45V53M79 45H87M79 45V53M87 45H95M87 45V53M95 45H103M95 45V53M103 45H111M103 45V53M111 45H119M111 45V53M119 45H127M119 45V53M127 45V53M7 53H-1M7 53H15M7 53V61M-1 53V61M15 53H23M15 53V61M23 53H31M23 53V61M31 53H39M31 53V61M39 53H47M39 53V61M47 53H55M47 53V61M55 53H63M55 53V61M63 53H71M63 53V61M71 53H79M71 53V61M79 53H87M79 53V61M87 53H95M87 53V61M95 53H103M95 53V61M103 53H111M103 53V61M111 53H119M111 53V61M119 53H127M119 53V61M127 53V61M7 61H-1M7 61H15M7 61V69M-1 61V69M15 61H23M15 61V69M23 61H31M23 61V69M31 61H39M31 61V69M39 61H47M39 61V69M47 61H55M47 61V69M55 61H63M55 61V69M63 61H71M63 61V69M71 61H79M71 61V69M79 61H87M79 61V69M87 61H95M87 61V69M95 61H103M95 61V69M103 61H111M103 61V69M111 61H119M111 61V69M119 61H127M119 61V69M127 61V69M7 69H-1M7 69H15M7 69V77M-1 69V77H7M15 69H23M15 69V77M23 69H31M23 69V77M31 69H39M31 69V77M39 69H47M39 69V77M47 69H55M47 69V77M55 69H63M55 69V77M63 69H71M63 69V77M71 69H79M71 69V77M79 69H87M79 69V77M87 69H95M87 69V77M95 69H103M95 69V77M103 69H111M103 69V77M111 69H119M111 69V77M119 69H127M119 69V77M127 69V77H119M7 77H15M15 77H23M23 77H31M31 77H39M39 77H47M47 77H55M55 77H63M63 77H71M71 77H79M79 77H87M87 77H95M95 77H103M103 77H111M111 77H119" stroke="#1570EF" stroke-width="0.5"/>
-</g>
-</g>
-<defs>
-<linearGradient id="paint0_linear_3169_30051" x1="62.5" y1="0" x2="62.5" y2="74" gradientUnits="userSpaceOnUse">
-<stop stop-color="#D9D9D9" stop-opacity="0.08"/>
-<stop offset="1" stop-color="#737373" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>

web/app/components/app/create-app-modal/index.tsx

@@ -1,48 +1,46 @@
 'use client'
-import type { MouseEventHandler } from 'react'
+
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  RiCloseLine,
-  RiQuestionLine,
-} from '@remixicon/react'
+
 import { useRouter } from 'next/navigation'
 import { useContext, useContextSelector } from 'use-context-selector'
+import { RiArrowRightLine, RiCommandLine, RiCornerDownLeftLine, RiExchange2Fill } from '@remixicon/react'
+import Link from 'next/link'
+import { useDebounceFn, useKeyPress } from 'ahooks'
+import Image from 'next/image'
 import AppIconPicker from '../../base/app-icon-picker'
 import type { AppIconSelection } from '../../base/app-icon-picker'
-import s from './style.module.css'
+import Button from '@/app/components/base/button'
+import Divider from '@/app/components/base/divider'
 import cn from '@/utils/classnames'
 import AppsContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { ToastContext } from '@/app/components/base/toast'
 import type { AppMode } from '@/types/app'
 import { createApp } from '@/service/apps'
-import Modal from '@/app/components/base/modal'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import AppIcon from '@/app/components/base/app-icon'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
-import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
-import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
-import Tooltip from '@/app/components/base/tooltip'
+import { BubbleTextMod, ChatBot, ListSparkle, Logic } from '@/app/components/base/icons/src/vender/solid/communication'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
+import FullScreenModal from '@/app/components/base/fullscreen-modal'
 
-type CreateAppDialogProps = {
-  show: boolean
+type CreateAppProps = {
   onSuccess: () => void
   onClose: () => void
+  onCreateFromTemplate?: () => void
 }
 
-const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
+function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps) {
   const { t } = useTranslation()
   const { push } = useRouter()
   const { notify } = useContext(ToastContext)
   const mutateApps = useContextSelector(AppsContext, state => state.mutateApps)
 
   const [appMode, setAppMode] = useState<AppMode>('chat')
-  const [showChatBotType, setShowChatBotType] = useState<boolean>(true)
   const [appIcon, setAppIcon] = useState<AppIconSelection>({ type: 'emoji', icon: '🤖', background: '#FFEAD5' })
   const [showAppIconPicker, setShowAppIconPicker] = useState(false)
   const [name, setName] = useState('')
@@ -53,7 +51,8 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
   const { isCurrentWorkspaceEditor } = useAppContext()
 
   const isCreatingRef = useRef(false)
-  const onCreate: MouseEventHandler = useCallback(async () => {
+
+  const onCreate = useCallback(async () => {
     if (!appMode) {
       notify({ type: 'error', message: t('app.newApp.appTypeRequired') })
       return
@@ -87,237 +86,281 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
     isCreatingRef.current = false
   }, [name, notify, t, appMode, appIcon, description, onSuccess, onClose, mutateApps, push, isCurrentWorkspaceEditor])
 
-  return (
-    <Modal
-      overflowVisible
-      className='!p-0 !max-w-[720px] !w-[720px] rounded-xl'
-      isShow={show}
-      onClose={() => { }}
-    >
-      {/* Heading */}
-      <div className='shrink-0 flex flex-col h-full bg-white rounded-t-xl'>
-        <div className='shrink-0 pl-8 pr-6 pt-6 pb-3 bg-white text-xl rounded-t-xl leading-[30px] font-semibold text-gray-900 z-10'>{t('app.newApp.startFromBlank')}</div>
-      </div>
-      {/* app type */}
-      <div className='py-2 px-8'>
-        <div className='py-2 text-sm leading-[20px] font-medium text-gray-900'>{t('app.newApp.captionAppType')}</div>
-        <div className='flex'>
-          <Tooltip
-            popupContent={
-              <div className='max-w-[280px] leading-[18px] text-xs text-gray-700'>{t('app.newApp.chatbotDescription')}</div>
-            }
-          >
-            <div
-              className={cn(
-                'relative grow box-border w-[158px] mr-2 px-0.5 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 bg-white text-gray-700 cursor-pointer shadow-xs hover:border-gray-300',
-                showChatBotType && 'border-[1.5px] border-primary-400 hover:border-[1.5px] hover:border-primary-400',
-                s['grid-bg-chat'],
-              )}
-              onClick={() => {
-                setAppMode('chat')
-                setShowChatBotType(true)
-              }}
-            >
-              <ChatBot className='w-6 h-6 text-[#1570EF]' />
-              <div className='h-5 text-[13px] font-medium leading-[18px]'>{t('app.types.chatbot')}</div>
-            </div>
-          </Tooltip>
-          <Tooltip
-            popupContent={
-              <div className='flex flex-col max-w-[320px] leading-[18px] text-xs'>
-                <div className='text-gray-700'>{t('app.newApp.completionDescription')}</div>
+  const { run: handleCreateApp } = useDebounceFn(onCreate, { wait: 300 })
+  useKeyPress(['meta.enter', 'ctrl.enter'], () => {
+    if (isAppsFull)
+      return
+    handleCreateApp()
+  })
+  return <>
+    <div className='flex justify-center h-full overflow-y-auto overflow-x-hidden'>
+      <div className='flex-1 shrink-0 flex justify-end'>
+        <div className='px-10'>
+          <div className='w-full h-6 2xl:h-[139px]' />
+          <div className='pt-1 pb-6'>
+            <span className='title-2xl-semi-bold text-text-primary'>{t('app.newApp.startFromBlank')}</span>
+          </div>
+          <div className='leading-6 mb-2'>
+            <span className='system-sm-semibold text-text-secondary'>{t('app.newApp.chooseAppType')}</span>
+          </div>
+          <div className='flex flex-col w-[660px] gap-4'>
+            <div>
+              <div className='mb-2'>
+                <span className='system-2xs-medium-uppercase text-text-tertiary'>{t('app.newApp.forBeginners')}</span>
               </div>
-            }
-          >
-            <div
-              className={cn(
-                'relative grow box-border w-[158px] mr-2 px-0.5 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 text-gray-700 cursor-pointer bg-white shadow-xs hover:border-gray-300',
-                s['grid-bg-completion'],
-                appMode === 'completion' && '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 text-[#0E9384]' />
-              <div className='h-5 text-[13px] font-medium leading-[18px]'>{t('app.newApp.completeApp')}</div>
-            </div>
-          </Tooltip>
-          <Tooltip
-            popupContent={
-              <div className='max-w-[280px] leading-[18px] text-xs text-gray-700'>{t('app.newApp.agentDescription')}</div>
-            }
-          >
-            <div
-              className={cn(
-                'relative grow box-border w-[158px] mr-2 px-0.5 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 text-gray-700 cursor-pointer bg-white shadow-xs hover:border-gray-300',
-                s['grid-bg-agent-chat'],
-                appMode === 'agent-chat' && '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 text-indigo-600' />
-              <div className='h-5 text-[13px] font-medium leading-[18px]'>{t('app.types.agent')}</div>
-            </div>
-          </Tooltip>
-          <Tooltip
-            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='flex flex-row gap-2'>
+                <AppTypeCard
+                  active={appMode === 'chat'}
+                  title={t('app.types.chatbot')}
+                  description={t('app.newApp.chatbotShortDescription')}
+                  icon={<div className='w-6 h-6 bg-components-icon-bg-blue-solid rounded-md flex items-center justify-center'>
+                    <ChatBot className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
+                  </div>}
+                  onClick={() => {
+                    setAppMode('chat')
+                  }} />
+                <AppTypeCard
+                  active={appMode === 'agent-chat'}
+                  title={t('app.types.agent')}
+                  description={t('app.newApp.agentShortDescription')}
+                  icon={<div className='w-6 h-6 bg-components-icon-bg-violet-solid rounded-md flex items-center justify-center'>
+                    <Logic className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
+                  </div>}
+                  onClick={() => {
+                    setAppMode('agent-chat')
+                  }} />
+                <AppTypeCard
+                  active={appMode === 'completion'}
+                  title={t('app.newApp.completeApp')}
+                  description={t('app.newApp.completionShortDescription')}
+                  icon={<div className='w-6 h-6 bg-components-icon-bg-teal-solid rounded-md flex items-center justify-center'>
+                    <ListSparkle className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
+                  </div>}
+                  onClick={() => {
+                    setAppMode('completion')
+                  }} />
               </div>
-            }
-          >
-            <div
-              className={cn(
-                'relative grow box-border w-[158px] px-0.5 pt-3 pb-2 flex flex-col items-center justify-center gap-1 rounded-lg border border-gray-100 text-gray-700 cursor-pointer bg-white shadow-xs hover:border-gray-300',
-                s['grid-bg-workflow'],
-                appMode === 'workflow' && '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 text-[#f79009]' />
-              <div className='h-5 text-[13px] font-medium leading-[18px]'>{t('app.types.workflow')}</div>
-              <span className='absolute top-[-3px] right-[-3px] px-1 rounded-[5px] bg-white border border-black/8 text-gray-500 text-[10px] leading-[18px] font-medium'>BETA</span>
             </div>
-          </Tooltip>
-        </div>
-      </div>
-      {showChatBotType && (
-        <div className='py-2 px-8'>
-          <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-4 py-[10px] pr-[10px] 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='flex items-center justify-between'>
-                <div className='h-5 text-sm font-medium leading-5'>{t('app.newApp.basic')}</div>
-                <div className='group'>
-                  <RiQuestionLine className='w-[14px] h-[14px] text-gray-400 hover:text-gray-500' />
-                  <div
-                    className={cn(
-                      'hidden z-20 absolute left-[327px] top-[-158px] w-[376px] rounded-xl bg-white border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-lg group-hover:block',
-                    )}
-                  >
-                    <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.basicPic)} />
-                    <div className='px-4 pb-2'>
-                      <div className='flex items-center justify-between'>
-                        <div className='text-gray-700 text-md leading-6 font-semibold'>{t('app.newApp.basic')}</div>
-                        <div className='text-orange-500 text-xs leading-[18px] font-medium'>{t('app.newApp.basicFor')}</div>
-                      </div>
-                      <div className='mt-1 text-gray-500 text-sm leading-5'>{t('app.newApp.basicDescription')}</div>
-                    </div>
-                  </div>
+            <div>
+              <div className='mb-2'>
+                <span className='system-2xs-medium-uppercase text-text-tertiary'>{t('app.newApp.forAdvanced')}</span>
+              </div>
+              <div className='flex flex-row gap-2'>
+                <AppTypeCard
+                  beta
+                  active={appMode === 'advanced-chat'}
+                  title={t('app.types.advanced')}
+                  description={t('app.newApp.advancedShortDescription')}
+                  icon={<div className='w-6 h-6 bg-components-icon-bg-blue-light-solid rounded-md flex items-center justify-center'>
+                    <BubbleTextMod className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
+                  </div>}
+                  onClick={() => {
+                    setAppMode('advanced-chat')
+                  }} />
+                <AppTypeCard
+                  beta
+                  active={appMode === 'workflow'}
+                  title={t('app.types.workflow')}
+                  description={t('app.newApp.workflowShortDescription')}
+                  icon={<div className='w-6 h-6 bg-components-icon-bg-indigo-solid rounded-md flex items-center justify-center'>
+                    <RiExchange2Fill className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
+                  </div>}
+                  onClick={() => {
+                    setAppMode('workflow')
+                  }} />
+              </div>
+            </div>
+            <Divider style={{ margin: 0 }} />
+            <div className='flex space-x-3 items-center'>
+              <div className='flex-1'>
+                <div className='h-6 flex items-center mb-1'>
+                  <label className='system-sm-semibold text-text-secondary'>{t('app.newApp.captionName')}</label>
                 </div>
+                <Input
+                  value={name}
+                  onChange={e => setName(e.target.value)}
+                  placeholder={t('app.newApp.appNamePlaceholder') || ''}
+                />
               </div>
-              <div className='mt-[2px] text-gray-500 text-xs leading-[18px]'>{t('app.newApp.basicTip')}</div>
+              <AppIcon
+                iconType={appIcon.type}
+                icon={appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId}
+                background={appIcon.type === 'emoji' ? appIcon.background : undefined}
+                imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
+                size='xxl' className='cursor-pointer rounded-2xl'
+                onClick={() => { setShowAppIconPicker(true) }}
+              />
+              {showAppIconPicker && <AppIconPicker
+                onSelect={(payload) => {
+                  setAppIcon(payload)
+                  setShowAppIconPicker(false)
+                }}
+                onClose={() => {
+                  setShowAppIconPicker(false)
+                }}
+              />}
             </div>
-            <div
-              className={cn(
-                'relative grow flex-[50%] pl-3 py-2 pr-2 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='flex items-center justify-between'>
-                <div className='flex items-center'>
-                  <div className='mr-1 h-5 text-sm font-medium leading-5'>{t('app.newApp.advanced')}</div>
-                  <span className='px-1 rounded-[5px] bg-white border border-black/8 text-gray-500 text-[10px] leading-[18px] font-medium'>BETA</span>
-                </div>
-                <div className='group'>
-                  <RiQuestionLine className='w-[14px] h-[14px] text-gray-400 hover:text-gray-500' />
-                  <div
-                    className={cn(
-                      'hidden z-20 absolute right-[26px] top-[-158px] w-[376px] rounded-xl bg-white border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-lg group-hover:block',
-                    )}
-                  >
-                    <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.advancedPic)} />
-                    <div className='px-4 pb-2'>
-                      <div className='flex items-center justify-between'>
-                        <div className='flex items-center'>
-                          <div className='mr-1 text-gray-700 text-md leading-6 font-semibold'>{t('app.newApp.advanced')}</div>
-                          <span className='px-1 rounded-[5px] bg-white border border-black/8 text-gray-500 text-[10px] leading-[18px] font-medium'>BETA</span>
-                        </div>
-                        <div className='text-orange-500 text-xs leading-[18px] font-medium'>{t('app.newApp.advancedFor').toLocaleUpperCase()}</div>
-                      </div>
-                      <div className='mt-1 text-gray-500 text-sm leading-5'>{t('app.newApp.advancedDescription')}</div>
-                    </div>
-                  </div>
-                </div>
+            <div>
+              <div className='h-6 flex items-center mb-1'>
+                <label className='system-sm-semibold text-text-secondary'>{t('app.newApp.captionDescription')}</label>
+                <span className='system-xs-regular text-text-tertiary ml-1'>({t('app.newApp.optional')})</span>
               </div>
-              <div className='mt-[2px] text-gray-500 text-xs leading-[18px]'>{t('app.newApp.advancedFor')}</div>
+              <Textarea
+                className='resize-none'
+                placeholder={t('app.newApp.appDescriptionPlaceholder') || ''}
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+              />
+            </div>
+          </div>
+          <div className='pt-5 pb-10 flex justify-between items-center'>
+            <div className='flex gap-1 items-center system-xs-regular text-text-tertiary cursor-pointer' onClick={onCreateFromTemplate}>
+              <span>{t('app.newApp.noIdeaTip')}</span>
+              <div className='p-[1px]'>
+                <RiArrowRightLine className='w-3.5 h-3.5' />
+              </div>
+            </div>
+            <div className='flex gap-2'>
+              <Button onClick={onClose}>{t('app.newApp.Cancel')}</Button>
+              <Button disabled={isAppsFull || !name} className='gap-1' variant="primary" onClick={handleCreateApp}>
+                <span>{t('app.newApp.Create')}</span>
+                <div className='flex gap-0.5'>
+                  <RiCommandLine size={14} className='p-0.5 system-kbd bg-components-kbd-bg-white rounded-sm' />
+                  <RiCornerDownLeftLine size={14} className='p-0.5 system-kbd bg-components-kbd-bg-white rounded-sm' />
+                </div>
+              </Button>
             </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>
-        <div className='flex items-center justify-between space-x-2'>
-          <AppIcon
-            iconType={appIcon.type}
-            icon={appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId}
-            background={appIcon.type === 'emoji' ? appIcon.background : undefined}
-            imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
-            size='large' className='cursor-pointer'
-            onClick={() => { setShowAppIconPicker(true) }}
-          />
-          <Input
-            value={name}
-            onChange={e => setName(e.target.value)}
-            placeholder={t('app.newApp.appNamePlaceholder') || ''}
-            className='grow h-10'
-          />
+      </div>
+      <div className='flex-1 shrink h-full flex justify-start relative overflow-hidden'>
+        <div className='h-6 2xl:h-[139px] absolute left-0 top-0 right-0 border-b border-b-divider-subtle'></div>
+        <div className='max-w-[760px] border-x border-x-divider-subtle'>
+          <div className='h-6 2xl:h-[139px]' />
+          <AppPreview mode={appMode} />
+          <div className='absolute left-0 right-0 border-b border-b-divider-subtle'></div>
+          <div className='w-[664px] h-[448px] flex items-center justify-center' style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
+            <AppScreenShot show={appMode === 'chat'} mode='chat' />
+            <AppScreenShot show={appMode === 'advanced-chat'} mode='advanced-chat' />
+            <AppScreenShot show={appMode === 'agent-chat'} mode='agent-chat' />
+            <AppScreenShot show={appMode === 'completion'} mode='completion' />
+            <AppScreenShot show={appMode === 'workflow'} mode='workflow' />
+          </div>
+          <div className='absolute left-0 right-0 border-b border-b-divider-subtle'></div>
         </div>
-        {showAppIconPicker && <AppIconPicker
-          onSelect={(payload) => {
-            setAppIcon(payload)
-            setShowAppIconPicker(false)
-          }}
-          onClose={() => {
-            setShowAppIconPicker(false)
-          }}
-        />}
       </div>
-      {/* description */}
-      <div className='pt-2 px-8'>
-        <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.newApp.captionDescription')}</div>
-        <Textarea
-          className='resize-none'
-          placeholder={t('app.newApp.appDescriptionPlaceholder') || ''}
-          value={description}
-          onChange={e => setDescription(e.target.value)}
-        />
-      </div>
-      {isAppsFull && (
+    </div>
+    {
+      isAppsFull && (
         <div className='px-8 py-2'>
           <AppsFull loc='app-create' />
         </div>
-      )}
-      <div className='px-8 py-6 flex justify-end'>
-        <Button className='mr-2' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
-        <Button disabled={isAppsFull || !name} variant="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
-      </div>
-      <div className='absolute right-6 top-6 p-2 cursor-pointer z-20' onClick={onClose}>
-        <RiCloseLine className='w-4 h-4 text-gray-500' />
-      </div>
-    </Modal>
+      )
+    }
+  </>
+}
+type CreateAppDialogProps = CreateAppProps & {
+  show: boolean
+}
+const CreateAppModal = ({ show, onClose, onSuccess, onCreateFromTemplate }: CreateAppDialogProps) => {
+  return (
+    <FullScreenModal
+      overflowVisible
+      closable
+      open={show}
+      onClose={onClose}
+    >
+      <CreateApp onClose={onClose} onSuccess={onSuccess} onCreateFromTemplate={onCreateFromTemplate} />
+    </FullScreenModal>
   )
 }
 
 export default CreateAppModal
+
+type AppTypeCardProps = {
+  icon: JSX.Element
+  beta?: boolean
+  title: string
+  description: string
+  active: boolean
+  onClick: () => void
+}
+function AppTypeCard({ icon, title, beta = false, description, active, onClick }: AppTypeCardProps) {
+  const { t } = useTranslation()
+  return <div
+    className={
+      cn(`w-[191px] h-[84px] p-3 border-[0.5px] relative box-content
+      rounded-xl border-components-option-card-option-border
+      bg-components-panel-on-panel-item-bg shadow-xs cursor-pointer hover:shadow-md`, active
+        ? 'outline outline-[1.5px] outline-components-option-card-option-selected-border shadow-md'
+        : '')
+    }
+    onClick={onClick}
+  >
+    {beta && <div className='px-[5px] py-[3px]
+      rounded-[5px] min-w-[18px] absolute top-3 right-3
+      border border-divider-deep system-2xs-medium-uppercase text-text-tertiary'>{t('common.menus.status')}</div>}
+    {icon}
+    <div className='system-sm-semibold text-text-secondary mt-2 mb-0.5'>{title}</div>
+    <div className='system-xs-regular text-text-tertiary'>{description}</div>
+  </div>
+}
+
+function AppPreview({ mode }: { mode: AppMode }) {
+  const { t } = useTranslation()
+  const modeToPreviewInfoMap = {
+    'chat': {
+      title: t('app.types.chatbot'),
+      description: t('app.newApp.chatbotUserDescription'),
+      link: 'https://docs.dify.ai/guides/application-orchestrate/conversation-application?fallback=true',
+    },
+    'advanced-chat': {
+      title: t('app.types.advanced'),
+      description: t('app.newApp.advancedUserDescription'),
+      link: 'https://docs.dify.ai/guides/workflow',
+    },
+    'agent-chat': {
+      title: t('app.types.agent'),
+      description: t('app.newApp.agentUserDescription'),
+      link: 'https://docs.dify.ai/guides/application-orchestrate/agent',
+    },
+    'completion': {
+      title: t('app.newApp.completeApp'),
+      description: t('app.newApp.completionUserDescription'),
+      link: null,
+    },
+    'workflow': {
+      title: t('app.types.workflow'),
+      description: t('app.newApp.workflowUserDescription'),
+      link: 'https://docs.dify.ai/guides/workflow',
+    },
+  }
+  const previewInfo = modeToPreviewInfoMap[mode]
+  return <div className='px-8 py-4'>
+    <h4 className='system-sm-semibold-uppercase text-text-secondary'>{previewInfo.title}</h4>
+    <div className='mt-1 system-xs-regular text-text-tertiary max-w-96 min-h-8'>
+      <span>{previewInfo.description}</span>
+      {previewInfo.link && <Link target='_blank' href={previewInfo.link} className='text-text-accent ml-1'>{t('app.newApp.learnMore')}</Link>}
+    </div>
+  </div>
+}
+
+function AppScreenShot({ mode, show }: { mode: AppMode; show: boolean }) {
+  const theme = useContextSelector(AppsContext, state => state.theme)
+  const modeToImageMap = {
+    'chat': 'Chatbot',
+    'advanced-chat': 'Chatflow',
+    'agent-chat': 'Agent',
+    'completion': 'TextGenerator',
+    'workflow': 'Workflow',
+  }
+  return <picture>
+    <source media="(resolution: 1x)" srcSet={`/screenshots/${theme}/${modeToImageMap[mode]}.png`} />
+    <source media="(resolution: 2x)" srcSet={`/screenshots/${theme}/${modeToImageMap[mode]}@2x.png`} />
+    <source media="(resolution: 3x)" srcSet={`/screenshots/${theme}/${modeToImageMap[mode]}@3x.png`} />
+    <Image className={show ? '' : 'hidden'}
+      src={`/screenshots/${theme}/${modeToImageMap[mode]}.png`}
+      alt='App Screen Shot'
+      width={664} height={448} />
+  </picture>
+}

web/app/components/app/create-app-modal/style.module.css

@@ -1,23 +0,0 @@
-.grid-bg-chat {
-  background-image: url('./grid-bg-chat.svg');
-  background-repeat: repeat-x;
-}
-.grid-bg-completion {
-  background-image: url('./grid-bg-completion.svg');
-  background-repeat: repeat-x;
-}
-.grid-bg-agent-chat {
-  background-image: url('./grid-bg-agent-chat.svg');
-  background-repeat: repeat-x;
-}
-.grid-bg-workflow {
-  background-image: url('./grid-bg-workflow.svg');
-  background-repeat: repeat-x;
-}
-.basicPic {
-  background-image: url('./basic.png')
-}
-
-.advancedPic {
-  background-image: url('./advanced.png')
-}

web/app/components/app/type-selector/index.tsx

@@ -1,23 +1,23 @@
 import { useTranslation } from 'react-i18next'
 import React, { useState } from 'react'
-import { RiArrowDownSLine } from '@remixicon/react'
+import { RiArrowDownSLine, RiCloseCircleFill, RiExchange2Fill, RiFilter3Line } from '@remixicon/react'
+import Checkbox from '../../base/checkbox'
 import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { Check, DotsGrid } from '@/app/components/base/icons/src/vender/line/general'
-import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
-import { ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
-import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
+import { BubbleTextMod, ChatBot, ListSparkle, Logic } from '@/app/components/base/icons/src/vender/solid/communication'
+import { type AppMode } from '@/types/app'
 export type AppSelectorProps = {
-  value: string
-  onChange: (value: string) => void
+  value: Array<AppMode>
+  onChange: (value: AppSelectorProps['value']) => void
 }
 
+const allTypes: AppMode[] = ['chat', 'agent-chat', 'completion', 'advanced-chat', 'workflow']
+
 const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
-  const { t } = useTranslation()
   const [open, setOpen] = useState(false)
 
   return (
@@ -33,96 +33,136 @@ const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
           className='block'
         >
           <div className={cn(
-            'flex items-center gap-1 h-8 text-gray-700 text-[13px] leading-[18px] cursor-pointer px-2 rounded-lg bg-white shadow-xs hover:bg-gray-200',
-            open && !value && '!bg-gray-200 hover:!bg-gray-200',
-            !!value && '!bg-white hover:!bg-white',
+            'flex items-center justify-between rounded-md cursor-pointer px-2 space-x-1 hover:bg-state-base-hover',
           )}>
-            {!value && (
-              <>
-                <div className='w-4 h-4 p-[1px]'>
-                  <DotsGrid className='w-3.5 h-3.5' />
-                </div>
-                <div className=''>{t('app.typeSelector.all')}</div>
-                <div className='w-4 h-4 p-[1px]'>
-                  <RiArrowDownSLine className='w-3.5 h-3.5' />
-                </div>
-              </>
-            )}
-            {value === 'chatbot' && (
-              <>
-                <div className='w-4 h-4 p-[1px]'>
-                  <ChatBot className='w-3.5 h-3.5 text-[#1570EF]' />
-                </div>
-                <div className=''>{t('app.typeSelector.chatbot')}</div>
-                <div className='w-4 h-4 p-[1px]' onClick={(e) => {
-                  e.stopPropagation()
-                  onChange('')
-                }}>
-                  <XCircle className='w-3.5 h-3.5 text-gray-400 cursor-pointer  hover:text-gray-600' />
-                </div>
-              </>
-            )}
-            {value === 'agent' && (
-              <>
-                <div className='w-4 h-4 p-[1px]'>
-                  <CuteRobot className='w-3.5 h-3.5 text-indigo-600' />
-                </div>
-                <div className=''>{t('app.typeSelector.agent')}</div>
-                <div className='w-4 h-4 p-[1px]' onClick={(e) => {
-                  e.stopPropagation()
-                  onChange('')
-                }}>
-                  <XCircle className='w-3.5 h-3.5 text-gray-400 cursor-pointer  hover:text-gray-600' />
-                </div>
-              </>
-            )}
-            {value === 'workflow' && (
-              <>
-                <div className='w-4 h-4 p-[1px]'>
-                  <Route className='w-3.5 h-3.5 text-[#F79009]' />
-                </div>
-                <div className=''>{t('app.typeSelector.workflow')}</div>
-                <div className='w-4 h-4 p-[1px]' onClick={(e) => {
-                  e.stopPropagation()
-                  onChange('')
-                }}>
-                  <XCircle className='w-3.5 h-3.5 text-gray-400 cursor-pointer  hover:text-gray-600' />
-                </div>
-              </>
-            )}
+            <AppTypeSelectTrigger values={value} />
+            {value && value.length > 0 && <div className='w-4 h-4' onClick={(e) => {
+              e.stopPropagation()
+              onChange([])
+            }}>
+              <RiCloseCircleFill className='w-3.5 h-3.5 text-text-quaternary hover:text-text-tertiary cursor-pointer' />
+            </div>}
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>
-          <div className='relative p-1 w-[180px] bg-white rounded-lg shadow-xl'>
-            <div className='flex items-center pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-50' onClick={() => {
-              onChange('chatbot')
-              setOpen(false)
-            }}>
-              <ChatBot className='mr-2 w-4 h-4 text-[#1570EF]' />
-              <div className='grow text-gray-700 text-[13px] font-medium leading-[18px]'>{t('app.typeSelector.chatbot')}</div>
-              {value === 'chatbot' && <Check className='w-4 h-4 text-primary-600' />}
-            </div>
-            <div className='flex items-center pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-50' onClick={() => {
-              onChange('agent')
-              setOpen(false)
-            }}>
-              <CuteRobot className='mr-2 w-4 h-4 text-indigo-600' />
-              <div className='grow text-gray-700 text-[13px] font-medium leading-[18px]'>{t('app.typeSelector.agent')}</div>
-              {value === 'agent' && <Check className='w-4 h-4 text-primary-600' />}
-            </div>
-            <div className='flex items-center pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-50' onClick={() => {
-              onChange('workflow')
-              setOpen(false)
-            }}>
-              <Route className='mr-2 w-4 h-4 text-[#F79009]' />
-              <div className='grow text-gray-700 text-[13px] font-medium leading-[18px]'>{t('app.typeSelector.workflow')}</div>
-              {value === 'workflow' && <Check className='w-4 h-4 text-primary-600' />}
-            </div>
-          </div>
+          <ul className='relative p-1 w-[240px] bg-components-panel-bg-blur backdrop-blur-[5px] rounded-xl shadow-lg border border-components-panel-border'>
+            {allTypes.map(mode => (
+              <AppTypeSelectorItem key={mode} type={mode}
+                checked={Boolean(value.length > 0 && value?.indexOf(mode) !== -1)}
+                onClick={() => {
+                  if (value?.indexOf(mode) !== -1)
+                    onChange(value?.filter(v => v !== mode) ?? [])
+                  else
+                    onChange([...(value || []), mode])
+                }} />
+            ))}
+          </ul>
         </PortalToFollowElemContent>
-      </div>
-    </PortalToFollowElem>
+      </div >
+    </PortalToFollowElem >
   )
 }
 
-export default React.memo(AppTypeSelector)
+export default AppTypeSelector
+
+function AppTypeSelectTrigger({ values }: { values: AppSelectorProps['value'] }) {
+  const { t } = useTranslation()
+  if (!values || values.length === 0) {
+    return <div className={cn(
+      'flex items-center justify-between gap-1 h-8',
+    )}>
+      <RiFilter3Line className='w-4 h-4 text-text-tertiary' />
+      <div className='grow min-w-[65px] text-center system-sm-medium text-text-tertiary'>{t('app.typeSelector.all')}</div>
+      <RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
+    </div>
+  }
+  if (values.length === 1) {
+    return <div className={cn(
+      'flex items-center justify-between gap-1 h-8 flex-nowrap',
+    )}>
+      <AppTypeIcon type={values[0]} />
+      <div className='flex flex-1 items-center text-center line-clamp-1'>
+        <AppTypeLabel type={values[0]} className="system-sm-medium text-components-menu-item-text" />
+      </div>
+    </div>
+  }
+  return <div className={cn(
+    'flex items-center justify-between h-8 -space-x-2 relative',
+  )}>
+    {values.map((mode, index) => (<AppTypeIcon key={mode} type={mode} wrapperClassName='border border-components-panel-on-panel-item-bg' style={{ zIndex: 5 - index }} />))}
+  </div>
+}
+
+type AppTypeSelectorItemProps = {
+  checked: boolean
+  type: AppMode
+  onClick: () => void
+}
+function AppTypeSelectorItem({ checked, type, onClick }: AppTypeSelectorItemProps) {
+  return <li className='flex items-center space-x-2 pl-2 py-1 pr-1 rounded-lg cursor-pointer hover:bg-state-base-hover' onClick={onClick}>
+    <Checkbox checked={checked} />
+    <AppTypeIcon type={type} />
+    <div className='grow p-1 pl-0'>
+      <AppTypeLabel type={type} className="system-sm-medium text-components-menu-item-text" />
+    </div>
+  </li>
+}
+
+type AppTypeIconProps = {
+  type: AppMode
+  style?: React.CSSProperties
+  className?: string
+  wrapperClassName?: string
+}
+
+export function AppTypeIcon({ type, className, wrapperClassName, style }: AppTypeIconProps) {
+  const wrapperClassNames = cn('w-5 h-5 inline-flex items-center justify-center rounded-md border border-divider-regular', wrapperClassName)
+  const iconClassNames = cn('w-3.5 h-3.5 text-components-avatar-shape-fill-stop-100', className)
+  if (type === 'chat') {
+    return <div style={style} className={cn(wrapperClassNames, 'bg-components-icon-bg-blue-solid')}>
+      <ChatBot className={iconClassNames} />
+    </div>
+  }
+  if (type === 'agent-chat') {
+    return <div style={style} className={cn(wrapperClassNames, 'bg-components-icon-bg-violet-solid')}>
+      <Logic className={iconClassNames} />
+    </div>
+  }
+  if (type === 'advanced-chat') {
+    return <div style={style} className={cn(wrapperClassNames, 'bg-components-icon-bg-blue-light-solid')}>
+      <BubbleTextMod className={iconClassNames} />
+    </div>
+  }
+  if (type === 'workflow') {
+    return <div style={style} className={cn(wrapperClassNames, 'bg-components-icon-bg-indigo-solid')}>
+      <RiExchange2Fill className={iconClassNames} />
+    </div>
+  }
+  if (type === 'completion') {
+    return <div style={style} className={cn(wrapperClassNames, 'bg-components-icon-bg-teal-solid')}>
+      <ListSparkle className={iconClassNames} />
+    </div>
+  }
+  return null
+}
+
+type AppTypeLabelProps = {
+  type: AppMode
+  className?: string
+}
+export function AppTypeLabel({ type, className }: AppTypeLabelProps) {
+  const { t } = useTranslation()
+  let label = ''
+  if (type === 'chat')
+    label = t('app.typeSelector.chatbot')
+  if (type === 'agent-chat')
+    label = t('app.typeSelector.agent')
+  if (type === 'completion')
+    label = t('app.typeSelector.completion')
+  if (type === 'advanced-chat')
+    label = t('app.typeSelector.advanced')
+  if (type === 'workflow')
+    label = t('app.typeSelector.workflow')
+
+  return <span className={className}>{label}</span>
+}