dify

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

@@ -0,0 +1,221 @@
+'use client'
+
+import React, { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import useSWR from 'swr'
+import { useDebounceFn } from 'ahooks'
+import s from './style.module.css'
+import cn from '@/utils/classnames'
+import ExploreContext from '@/context/explore-context'
+import type { App } from '@/models/explore'
+import Category from '@/app/components/explore/category'
+import AppCard from '@/app/components/explore/app-card'
+import { fetchAppDetail, fetchAppList } from '@/service/explore'
+import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
+import CreateAppModal from '@/app/components/explore/create-app-modal'
+import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
+import Loading from '@/app/components/base/loading'
+import Input from '@/app/components/base/input'
+import {
+  DSLImportMode,
+} from '@/models/app'
+import { useImportDSL } from '@/hooks/use-import-dsl'
+import DSLConfirmModal from '@/app/components/app/create-from-dsl-modal/dsl-confirm-modal'
+
+type AppsProps = {
+  onSuccess?: () => void
+}
+
+export enum PageType {
+  EXPLORE = 'explore',
+  CREATE = 'create',
+}
+
+const Apps = ({
+  onSuccess,
+}: AppsProps) => {
+  const { t } = useTranslation()
+  const { hasEditPermission } = useContext(ExploreContext)
+  const allCategoriesEn = t('explore.apps.allCategories', { lng: 'en' })
+
+  const [keywords, setKeywords] = useState('')
+  const [searchKeywords, setSearchKeywords] = useState('')
+
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchKeywords(keywords)
+  }, { wait: 500 })
+
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+    handleSearch()
+  }
+
+  const [currCategory, setCurrCategory] = useTabSearchParams({
+    defaultTab: allCategoriesEn,
+    disableSearchParams: false,
+  })
+
+  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 = allList.filter(item => currCategory === allCategoriesEn || item.category === currCategory)
+
+  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 {
+    handleImportDSL,
+    handleImportDSLConfirm,
+    versions,
+    isFetching,
+  } = useImportDSL()
+  const [showDSLConfirmModal, setShowDSLConfirmModal] = useState(false)
+  const onCreate: CreateAppModalProps['onConfirm'] = async ({
+    name,
+    icon_type,
+    icon,
+    icon_background,
+    description,
+  }) => {
+    const { export_data } = await fetchAppDetail(
+      currApp?.app.id as string,
+    )
+    const payload = {
+      mode: DSLImportMode.YAML_CONTENT,
+      yaml_content: export_data,
+      name,
+      icon_type,
+      icon,
+      icon_background,
+      description,
+    }
+    await handleImportDSL(payload, {
+      onSuccess: () => {
+        setIsShowCreateModal(false)
+      },
+      onPending: () => {
+        setShowDSLConfirmModal(true)
+      },
+    })
+  }
+
+  const onConfirmDSL = useCallback(async () => {
+    await handleImportDSLConfirm({
+      onSuccess,
+    })
+  }, [handleImportDSLConfirm, onSuccess])
+
+  if (!categories || categories.length === 0) {
+    return (
+      <div className="flex h-full items-center">
+        <Loading type="area" />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn(
+      'flex h-full flex-col border-l-[0.5px] border-divider-regular',
+    )}>
+
+      <div className='shrink-0 px-12 pt-6'>
+        <div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div>
+        <div className='text-sm text-text-tertiary'>{t('explore.apps.description')}</div>
+      </div>
+
+      <div className={cn(
+        'mt-6 flex items-center justify-between px-12',
+      )}>
+        <Category
+          list={categories}
+          value={currCategory}
+          onChange={setCurrCategory}
+          allCategoriesEn={allCategoriesEn}
+        />
+        <Input
+          showLeftIcon
+          showClearIcon
+          wrapperClassName='w-[200px] self-start'
+          value={keywords}
+          onChange={e => handleKeywordsChange(e.target.value)}
+          onClear={() => handleKeywordsChange('')}
+        />
+      </div>
+
+      <div className={cn(
+        'relative mt-4 flex flex-1 shrink-0 grow flex-col overflow-auto pb-6',
+      )}>
+        <nav
+          className={cn(
+            s.appList,
+            'grid shrink-0 content-start gap-4 px-6 sm:px-12',
+          )}>
+          {searchFilteredList.map(app => (
+            <AppCard
+              key={app.app_id}
+              isExplore
+              app={app}
+              canCreate={hasEditPermission}
+              onCreate={() => {
+                setCurrApp(app)
+                setIsShowCreateModal(true)
+              }}
+            />
+          ))}
+        </nav>
+      </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}
+          confirmDisabled={isFetching}
+          onHide={() => setIsShowCreateModal(false)}
+        />
+      )}
+      {
+        showDSLConfirmModal && (
+          <DSLConfirmModal
+            versions={versions}
+            onCancel={() => setShowDSLConfirmModal(false)}
+            onConfirm={onConfirmDSL}
+            confirmDisabled={isFetching}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default React.memo(Apps)

dify/web/app/components/explore/app-list/style.module.css

@@ -0,0 +1,29 @@
+.textGradient {
+  background: linear-gradient(to right, rgba(16, 74, 225, 1) 0, rgba(0, 152, 238, 1) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+.appList {
+  grid-template-columns: repeat(1, minmax(0, 1fr))
+}
+
+@media (min-width: 1624px) {
+  .appList {
+    grid-template-columns: repeat(4, minmax(0, 1fr))
+  }
+}
+
+@media (min-width: 1300px) and (max-width: 1624px) {
+  .appList {
+    grid-template-columns: repeat(3, minmax(0, 1fr))
+  }
+}
+
+@media (min-width: 1025px) and (max-width: 1300px) {
+  .appList {
+    grid-template-columns: repeat(2, minmax(0, 1fr))
+  }
+}