support type fitlering for app template

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

@@ -0,0 +1,128 @@
+import { useTranslation } from 'react-i18next'
+import React, { useState } from 'react'
+import cn from 'classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+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, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
+import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
+export type AppSelectorProps = {
+  value: string
+  onChange: (value: string) => void
+}
+
+const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={() => setOpen(v => !v)}
+          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',
+          )}>
+            {!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]'>
+                  <ChevronDown 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]'>
+                  <CuteRobote 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>
+              </>
+            )}
+          </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)
+            }}>
+              <CuteRobote 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>
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(AppTypeSelector)

web/app/components/base/tab-slider-new/index.tsx

@@ -25,7 +25,7 @@ const TabSliderNew: FC<TabSliderProps> = ({
           key={option.value}
           onClick={() => onChange(option.value)}
           className={cn(
-            'mr-1 px-3 py-[5px] h-[28px] flex items-center rounded-lg border-[0.5px] border-transparent text-gray-700 text-[13px] font-medium leading-[18px] cursor-pointer hover:bg-gray-200',
+            'mr-1 px-3 py-[7px] h-[32px] flex items-center rounded-lg border-[0.5px] border-transparent text-gray-700 text-[13px] font-medium leading-[18px] cursor-pointer hover:bg-gray-200',
             value === option.value && 'bg-white border-gray-200 shadow-xs text-primary-600 hover:bg-white',
           )}
         >

web/app/components/explore/app-list/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { useMemo, useState } from 'react'
 import cn from 'classnames'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
@@ -16,19 +16,12 @@ import { fetchAppDetail, fetchAppList } from '@/service/explore'
 import { importApp } 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 TabSliderNew from '@/app/components/base/tab-slider-new'
-import { DotsGrid } from '@/app/components/base/icons/src/vender/line/general'
-import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
-import {
-  AiText,
-  ChatBot,
-  CuteRobot,
-} from '@/app/components/base/icons/src/vender/line/communication'
 
 type AppsProps = {
   pageType?: PageType
@@ -48,17 +41,11 @@ const Apps = ({
   const { hasEditPermission } = useContext(ExploreContext)
   const allCategoriesEn = t('explore.apps.allCategories', { lng: 'en' })
 
+  const [currentType, setCurrentType] = useState<string>('')
   const [currCategory, setCurrCategory] = useTabSearchParams({
     defaultTab: allCategoriesEn,
     disableSearchParams: pageType !== PageType.EXPLORE,
   })
-  const options = [
-    { value: allCategoriesEn, text: t('app.types.all'), icon: <DotsGrid className='w-[14px] h-[14px] mr-1'/> },
-    { value: 'chat', text: t('app.types.chatbot'), icon: <ChatBot className='w-[14px] h-[14px] mr-1'/> },
-    { value: 'agent-chat', text: t('app.types.agent'), icon: <CuteRobot className='w-[14px] h-[14px] mr-1'/> },
-    { value: 'completion', text: t('app.newApp.completeApp'), icon: <AiText className='w-[14px] h-[14px] mr-1'/> },
-    { value: 'workflow', text: t('app.types.workflow'), icon: <Route className='w-[14px] h-[14px] mr-1'/> },
-  ]
 
   const {
     data: { categories, allList },
@@ -77,17 +64,28 @@ const Apps = ({
     },
   )
 
-  const currList
-    = currCategory === allCategoriesEn
-      ? allList
-      : allList.filter((item) => {
-        if (pageType === PageType.EXPLORE)
-          return item.category === currCategory
-        else if (currCategory === 'chat')
-          return item.app.mode === 'chat' || item.app.mode === 'advanced-chat'
-        else
-          return item.app.mode === currCategory
-      })
+  const filteredList = useMemo(() => {
+    if (currCategory === allCategoriesEn) {
+      if (!currentType)
+        return allList
+      else if (currentType === 'chatbot')
+        return allList.filter(item => (item.app.mode === 'chat' || item.app.mode === 'advanced-chat'))
+      else if (currentType === 'agent')
+        return allList.filter(item => (item.app.mode === 'agent-chat'))
+      else
+        return allList.filter(item => (item.app.mode === 'workflow'))
+    }
+    else {
+      if (!currentType)
+        return allList.filter(item => item.category === currCategory)
+      else if (currentType === 'chatbot')
+        return allList.filter(item => (item.app.mode === 'chat' || item.app.mode === 'advanced-chat') && item.category === currCategory)
+      else if (currentType === 'agent')
+        return allList.filter(item => (item.app.mode === 'agent-chat') && item.category === currCategory)
+      else
+        return allList.filter(item => (item.app.mode === 'workflow') && item.category === currCategory)
+    }
+  }, [currentType, currCategory, allCategoriesEn, allList])
 
   const [currApp, setCurrApp] = React.useState<App | null>(null)
   const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
@@ -140,23 +138,23 @@ const Apps = ({
           <div className='text-gray-500 text-sm'>{t('explore.apps.description')}</div>
         </div>
       )}
-      {pageType === PageType.EXPLORE && (
+      <div className={cn(
+        'flex items-center mt-6',
+        pageType === PageType.EXPLORE ? 'px-12' : 'px-8',
+      )}>
+        {pageType !== PageType.EXPLORE && (
+          <>
+            <AppTypeSelector value={currentType} onChange={setCurrentType} />
+            <div className='mx-2 w-[1px] h-3.5 bg-gray-200'/>
+          </>
+        )}
         <Category
-          className='mt-6 px-12'
           list={categories}
           value={currCategory}
           onChange={setCurrCategory}
           allCategoriesEn={allCategoriesEn}
         />
-      )}
-      {pageType !== PageType.EXPLORE && (
-        <TabSliderNew
-          className='px-8 py-2'
-          value={currCategory}
-          onChange={setCurrCategory}
-          options={options}
-        />
-      )}
+      </div>
       <div className={cn(
         'relative flex flex-1 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow',
         pageType === PageType.EXPLORE ? 'mt-6' : 'mt-0 pt-2',
@@ -167,7 +165,7 @@ const Apps = ({
             'grid content-start shrink-0',
             pageType === PageType.EXPLORE ? 'gap-4 px-6 sm:px-12' : 'gap-3 px-8  sm:!grid-cols-2 md:!grid-cols-3 lg:!grid-cols-4',
           )}>
-          {currList.map(app => (
+          {filteredList.map(app => (
             <AppCard
               key={app.app_id}
               isExplore={pageType === PageType.EXPLORE}

web/app/components/explore/category.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import exploreI18n from '@/i18n/en-US/explore'
 import type { AppCategory } from '@/models/explore'
+import { ThumbsUp } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 
 const categoryI18n = exploreI18n.category
 
@@ -30,7 +31,7 @@ const Category: FC<ICategoryProps> = ({
   const isAllCategories = !list.includes(value)
 
   const itemClassName = (isSelected: boolean) => cn(
-    'px-3 py-[5px] h-[28px] rounded-lg border-[0.5px] border-transparent text-gray-700 font-medium leading-[18px] cursor-pointer hover:bg-gray-200',
+    'flex items-center px-3 py-[7px] h-[32px] rounded-lg border-[0.5px] border-transparent text-gray-700 font-medium leading-[18px] cursor-pointer hover:bg-gray-200',
     isSelected && 'bg-white border-gray-200 shadow-xs text-primary-600 hover:bg-white',
   )
 
@@ -40,6 +41,7 @@ const Category: FC<ICategoryProps> = ({
         className={itemClassName(isAllCategories)}
         onClick={() => onChange(allCategoriesEn)}
       >
+        <ThumbsUp className='mr-1 w-3.5 h-3.5'/>
         {t('explore.apps.allCategories')}
       </div>
       {list.map(name => (

web/i18n/en-US/app.ts

@@ -78,6 +78,13 @@ const translation = {
   switchLabel: 'The app copy to be created',
   removeOriginal: 'Delete the original app',
   switchStart: 'Start swtich',
+  typeSelector: {
+    all: 'ALL Types',
+    chatbot: 'Chatbot',
+    agent: 'Agent',
+    workflow: 'Workflow',
+    completion: 'Completion',
+  },
 }
 
 export default translation

web/i18n/en-US/explore.ts

@@ -18,7 +18,7 @@ const translation = {
   apps: {
     title: 'Explore Apps by Dify',
     description: 'Use these template apps instantly or customize your own apps based on the templates.',
-    allCategories: 'All Categories',
+    allCategories: 'Recommended',
   },
   appCard: {
     addToWorkspace: 'Add to Workspace',

web/i18n/zh-Hans/app.ts

@@ -77,6 +77,13 @@ const translation = {
   switchLabel: '新应用创建为',
   removeOriginal: '删除原应用',
   switchStart: '开始迁移',
+  typeSelector: {
+    all: '所有类型',
+    chatbot: '聊天助手',
+    agent: 'Agent',
+    workflow: '工作流',
+    completion: '文本生成',
+  },
 }
 
 export default translation

web/i18n/zh-Hans/explore.ts

@@ -18,7 +18,7 @@ const translation = {
   apps: {
     title: '探索 Dify 的应用',
     description: '使用这些模板应用程序，或根据模板自定义您自己的应用程序。',
-    allCategories: '所有类别',
+    allCategories: '推荐',
   },
   appCard: {
     addToWorkspace: '添加到工作区',