diff --git a/web/app/components/explore/__tests__/category.spec.tsx b/web/app/components/explore/__tests__/category.spec.tsx index f99b28da71..dafb5f1192 100644 --- a/web/app/components/explore/__tests__/category.spec.tsx +++ b/web/app/components/explore/__tests__/category.spec.tsx @@ -58,7 +58,7 @@ describe('Category', () => { renderComponent({ value: 'Unknown' }) const allCategoriesItem = screen.getByText('explore.apps.allCategories') - expect(allCategoriesItem.className).toContain('bg-components-main-nav-nav-button-bg-active') + expect(allCategoriesItem.className).toContain('bg-background-default') }) it('should render raw category name when i18n key does not exist', () => { diff --git a/web/app/components/explore/app-list/__tests__/index.spec.tsx b/web/app/components/explore/app-list/__tests__/index.spec.tsx index f619b532ac..78c32b88d1 100644 --- a/web/app/components/explore/app-list/__tests__/index.spec.tsx +++ b/web/app/components/explore/app-list/__tests__/index.spec.tsx @@ -201,6 +201,7 @@ describe('AppList', () => { expect(screen.getByText('Alpha')).toBeInTheDocument() expect(screen.getByText('Beta')).toBeInTheDocument() + expect(screen.getByText('explore.apps.description')).toBeInTheDocument() }) it('should render continue work placeholders', () => { diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx index e5f7a4f13f..85329d0bfe 100644 --- a/web/app/components/explore/app-list/index.tsx +++ b/web/app/components/explore/app-list/index.tsx @@ -3,7 +3,6 @@ import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal' import type { App } from '@/models/explore' import type { TryAppSelection } from '@/types/try-app' -import { Button } from '@langgenius/dify-ui/button' import { cn } from '@langgenius/dify-ui/cn' import { useSuspenseQuery } from '@tanstack/react-query' import { useDebounceFn } from 'ahooks' @@ -197,36 +196,35 @@ const Apps = ({
-
-
-
{!hasFilterCondition ? t('apps.title', { ns: 'explore' }) : t('apps.resultNum', { num: searchFilteredList.length, ns: 'explore' })}
- {hasFilterCondition && ( - <> -
- - - )} +
+
+
+
{!hasFilterCondition ? t('apps.title', { ns: 'explore' }) : t('apps.resultNum', { num: searchFilteredList.length, ns: 'explore' })}
+
+

+ {t('apps.description', { ns: 'explore' })} +

- handleKeywordsChange(e.target.value)} - onClear={() => handleKeywordsChange('')} - />
-
+
+
+ handleKeywordsChange(e.target.value)} + onClear={handleResetFilter} + /> +
diff --git a/web/app/components/explore/category.tsx b/web/app/components/explore/category.tsx index ef7ac13cd5..4e9765657d 100644 --- a/web/app/components/explore/category.tsx +++ b/web/app/components/explore/category.tsx @@ -4,7 +4,6 @@ import type { AppCategory } from '@/models/explore' import { cn } from '@langgenius/dify-ui/cn' import * as React from 'react' import { useTranslation } from 'react-i18next' -import { ThumbsUp } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback' import exploreI18n from '@/i18n/en-US/explore.json' type ICategoryProps = { @@ -29,8 +28,8 @@ const Category: FC = ({ const isAllCategories = !list.includes(value as AppCategory) || value === allCategoriesEn const itemClassName = (isSelected: boolean) => cn( - 'flex h-7 cursor-pointer items-center rounded-lg border border-transparent px-3 system-sm-medium text-text-tertiary hover:bg-components-main-nav-nav-button-bg-active', - isSelected && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text-active shadow-xs', + 'flex h-7 cursor-pointer items-center justify-center gap-0.5 rounded-lg border-[0.5px] border-transparent px-2 py-1 system-sm-medium text-text-secondary hover:bg-state-base-hover-alt', + isSelected && 'border-components-main-nav-nav-button-border bg-background-default text-text-accent-light-mode-only shadow-xs hover:bg-background-default', ) const renderCategoryName = (name: AppCategory) => { @@ -39,23 +38,36 @@ const Category: FC = ({ } return ( -
-
onChange(allCategoriesEn)} - > - - {t('apps.allCategories', { ns: 'explore' })} -
- {list.filter(name => name !== allCategoriesEn).map(name => ( -
onChange(name)} - > - {renderCategoryName(name)} -
- ))} +
+ {[ + { name: allCategoriesEn, label: t('apps.allCategories', { ns: 'explore' }), isAll: true }, + ...list.filter(name => name !== allCategoriesEn).map(name => ({ + name, + label: renderCategoryName(name), + isAll: false, + })), + ].map((item, index, items) => { + const isSelected = item.isAll ? isAllCategories : item.name === value + const nextItem = items[index + 1] + const isNextSelected = nextItem + ? nextItem.isAll ? isAllCategories : nextItem.name === value + : false + + return ( +
+
onChange(item.name)} + > + {item.isAll && } + {item.label} +
+ {!isSelected && !isNextSelected && index < items.length - 1 && ( +
+ )} +
+ ) + })}
) } diff --git a/web/i18n/ar-TN/explore.json b/web/i18n/ar-TN/explore.json index 07b9176086..1b31cb3b3a 100644 --- a/web/i18n/ar-TN/explore.json +++ b/web/i18n/ar-TN/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "أيقونة التطبيق واسمه", "appCustomize.title": "إنشاء تطبيق من {{name}}", "apps.allCategories": "موصى به", + "apps.description": "قوالب جاهزة للاستخدام من المجتمع وفريق Dify.", "apps.resetFilter": "مسح الفلتر", "apps.resultNum": "{{num}} نتائج", "apps.title": "قوالب", diff --git a/web/i18n/de-DE/explore.json b/web/i18n/de-DE/explore.json index 9a51daa3b3..1827b72074 100644 --- a/web/i18n/de-DE/explore.json +++ b/web/i18n/de-DE/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "App-Symbol & Name", "appCustomize.title": "App aus {{name}} erstellen", "apps.allCategories": "Alle", + "apps.description": "Sofort nutzbare Vorlagen aus der Community und vom Dify-Team.", "apps.resetFilter": "Filter löschen", "apps.resultNum": "{{num}} Ergebnisse", "apps.title": "Vorlagen", diff --git a/web/i18n/en-US/explore.json b/web/i18n/en-US/explore.json index 257084323c..e3b966df39 100644 --- a/web/i18n/en-US/explore.json +++ b/web/i18n/en-US/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "App icon & name", "appCustomize.title": "Create app from {{name}}", "apps.allCategories": "All", + "apps.description": "Ready-to-use templates from the community and Dify team.", "apps.resetFilter": "Clear filter", "apps.resultNum": "{{num}} results", "apps.title": "Templates", diff --git a/web/i18n/es-ES/explore.json b/web/i18n/es-ES/explore.json index 367bb61356..79b8d90eff 100644 --- a/web/i18n/es-ES/explore.json +++ b/web/i18n/es-ES/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Icono y nombre de la aplicación", "appCustomize.title": "Crear aplicación a partir de {{name}}", "apps.allCategories": "Todos", + "apps.description": "Plantillas listas para usar de la comunidad y el equipo de Dify.", "apps.resetFilter": "Limpiar filtro", "apps.resultNum": "{{num}} resultados", "apps.title": "Plantillas", diff --git a/web/i18n/fa-IR/explore.json b/web/i18n/fa-IR/explore.json index 760ffe76b4..0ab3efe3d9 100644 --- a/web/i18n/fa-IR/explore.json +++ b/web/i18n/fa-IR/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "آیکون و نام برنامه", "appCustomize.title": "ایجاد برنامه از {{name}}", "apps.allCategories": "همه", + "apps.description": "الگوهای آماده استفاده از جامعه و تیم Dify.", "apps.resetFilter": "پاک کردن فیلتر", "apps.resultNum": "{{num}} نتیجه", "apps.title": "الگوها", diff --git a/web/i18n/fr-FR/explore.json b/web/i18n/fr-FR/explore.json index dab38e34f9..8b90a1e3cc 100644 --- a/web/i18n/fr-FR/explore.json +++ b/web/i18n/fr-FR/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Icône de l'application & nom", "appCustomize.title": "Créer une application à partir de {{name}}", "apps.allCategories": "Tous", + "apps.description": "Des modèles prêts à l'emploi créés par la communauté et l'équipe Dify.", "apps.resetFilter": "Effacer le filtre", "apps.resultNum": "{{num}} résultats", "apps.title": "Modèles", diff --git a/web/i18n/hi-IN/explore.json b/web/i18n/hi-IN/explore.json index b9786162f0..5f4275017b 100644 --- a/web/i18n/hi-IN/explore.json +++ b/web/i18n/hi-IN/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "ऐप आइकन और नाम", "appCustomize.title": "{{name}} से ऐप बनाएँ", "apps.allCategories": "सभी", + "apps.description": "समुदाय और Dify टीम के उपयोग के लिए तैयार टेम्पलेट।", "apps.resetFilter": "फ़िल्टर साफ़ करें", "apps.resultNum": "{{num}} परिणाम", "apps.title": "टेम्पलेट", diff --git a/web/i18n/id-ID/explore.json b/web/i18n/id-ID/explore.json index de88970c9e..d46b606834 100644 --- a/web/i18n/id-ID/explore.json +++ b/web/i18n/id-ID/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Ikon & nama aplikasi", "appCustomize.title": "Buat aplikasi dari {{name}}", "apps.allCategories": "Semua", + "apps.description": "Templat siap pakai dari komunitas dan tim Dify.", "apps.resetFilter": "Hapus filter", "apps.resultNum": "{{num}} hasil", "apps.title": "Templat", diff --git a/web/i18n/it-IT/explore.json b/web/i18n/it-IT/explore.json index add6278f7f..142ce5396b 100644 --- a/web/i18n/it-IT/explore.json +++ b/web/i18n/it-IT/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Icona & nome dell'app", "appCustomize.title": "Crea app da {{name}}", "apps.allCategories": "Tutti", + "apps.description": "Modelli pronti all'uso dalla community e dal team Dify.", "apps.resetFilter": "Cancella filtro", "apps.resultNum": "{{num}} risultati", "apps.title": "Modelli", diff --git a/web/i18n/ja-JP/explore.json b/web/i18n/ja-JP/explore.json index bdcb72c544..ff96610e7a 100644 --- a/web/i18n/ja-JP/explore.json +++ b/web/i18n/ja-JP/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "アプリアイコンと名前", "appCustomize.title": "{{name}}からアプリを作成", "apps.allCategories": "全て", + "apps.description": "コミュニティと Dify チームによる、すぐに使えるテンプレート。", "apps.resetFilter": "クリア", "apps.resultNum": "{{num}}件の結果", "apps.title": "テンプレート", diff --git a/web/i18n/ko-KR/explore.json b/web/i18n/ko-KR/explore.json index 428a168b98..9221b8ecbf 100644 --- a/web/i18n/ko-KR/explore.json +++ b/web/i18n/ko-KR/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "앱 아이콘 및 이름", "appCustomize.title": "{{name}}으로 앱 만들기", "apps.allCategories": "전체", + "apps.description": "커뮤니티와 Dify 팀이 만든 바로 사용할 수 있는 템플릿입니다.", "apps.resetFilter": "필터 지우기", "apps.resultNum": "{{num}}개 결과", "apps.title": "템플릿", diff --git a/web/i18n/nl-NL/explore.json b/web/i18n/nl-NL/explore.json index d5980781c4..84b48d6ff4 100644 --- a/web/i18n/nl-NL/explore.json +++ b/web/i18n/nl-NL/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "App icon & name", "appCustomize.title": "Create app from {{name}}", "apps.allCategories": "All", + "apps.description": "Gebruiksklare sjablonen van de community en het Dify-team.", "apps.resetFilter": "Clear filter", "apps.resultNum": "{{num}} results", "apps.title": "Sjablonen", diff --git a/web/i18n/pl-PL/explore.json b/web/i18n/pl-PL/explore.json index 7ed5ff861e..37b2918157 100644 --- a/web/i18n/pl-PL/explore.json +++ b/web/i18n/pl-PL/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Ikona i nazwa aplikacji", "appCustomize.title": "Utwórz aplikację z {{name}}", "apps.allCategories": "Wszystkie", + "apps.description": "Gotowe do użycia szablony od społeczności i zespołu Dify.", "apps.resetFilter": "Wyczyść filtr", "apps.resultNum": "{{num}} wyników", "apps.title": "Szablony", diff --git a/web/i18n/pt-BR/explore.json b/web/i18n/pt-BR/explore.json index 2bf6546020..3d4e2d24e9 100644 --- a/web/i18n/pt-BR/explore.json +++ b/web/i18n/pt-BR/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Ícone e nome do aplicativo", "appCustomize.title": "Criar aplicativo a partir de {{name}}", "apps.allCategories": "Todos", + "apps.description": "Modelos prontos para uso da comunidade e da equipe Dify.", "apps.resetFilter": "Limpar filtro", "apps.resultNum": "{{num}} resultados", "apps.title": "Modelos", diff --git a/web/i18n/ro-RO/explore.json b/web/i18n/ro-RO/explore.json index 5d994e30e2..c9938773ad 100644 --- a/web/i18n/ro-RO/explore.json +++ b/web/i18n/ro-RO/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Pictogramă și nume aplicație", "appCustomize.title": "Creați o aplicație din {{name}}", "apps.allCategories": "Toate", + "apps.description": "Șabloane gata de utilizare de la comunitate și echipa Dify.", "apps.resetFilter": "Șterge filtrul", "apps.resultNum": "{{num}} rezultate", "apps.title": "Șabloane", diff --git a/web/i18n/ru-RU/explore.json b/web/i18n/ru-RU/explore.json index 6cc325e2fd..dd8f591a24 100644 --- a/web/i18n/ru-RU/explore.json +++ b/web/i18n/ru-RU/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Значок и название приложения", "appCustomize.title": "Создать приложение из {{name}}", "apps.allCategories": "Все", + "apps.description": "Готовые к использованию шаблоны от сообщества и команды Dify.", "apps.resetFilter": "Очистить фильтр", "apps.resultNum": "{{num}} результатов", "apps.title": "Шаблоны", diff --git a/web/i18n/sl-SI/explore.json b/web/i18n/sl-SI/explore.json index 3b6023b5a5..1243464d34 100644 --- a/web/i18n/sl-SI/explore.json +++ b/web/i18n/sl-SI/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Ikona aplikacije & ime", "appCustomize.title": "Ustvari aplikacijo iz {{name}}", "apps.allCategories": "Vse", + "apps.description": "Predloge, pripravljene za uporabo, iz skupnosti in ekipe Dify.", "apps.resetFilter": "Počisti filter", "apps.resultNum": "{{num}} rezultatov", "apps.title": "Predloge", diff --git a/web/i18n/th-TH/explore.json b/web/i18n/th-TH/explore.json index 9f158eae72..d4404058ec 100644 --- a/web/i18n/th-TH/explore.json +++ b/web/i18n/th-TH/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "ไอคอนและชื่อแอป", "appCustomize.title": "สร้างแอปจาก {{name}}", "apps.allCategories": "ทั้งหมด", + "apps.description": "เทมเพลตพร้อมใช้งานจากชุมชนและทีม Dify", "apps.resetFilter": "ล้างตัวกรอง", "apps.resultNum": "{{num}} ผลลัพธ์", "apps.title": "เทมเพลต", diff --git a/web/i18n/tr-TR/explore.json b/web/i18n/tr-TR/explore.json index 8ef7abeb34..6c9cb8b6b9 100644 --- a/web/i18n/tr-TR/explore.json +++ b/web/i18n/tr-TR/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Uygulama simgesi ve ismi", "appCustomize.title": "{{name}} uygulamasından uygulama oluştur", "apps.allCategories": "Tümü", + "apps.description": "Topluluk ve Dify ekibinden kullanıma hazır şablonlar.", "apps.resetFilter": "Filtreyi temizle", "apps.resultNum": "{{num}} sonuç", "apps.title": "Şablonlar", diff --git a/web/i18n/uk-UA/explore.json b/web/i18n/uk-UA/explore.json index d057007384..a4af0ea3cb 100644 --- a/web/i18n/uk-UA/explore.json +++ b/web/i18n/uk-UA/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Значок програми та назва", "appCustomize.title": "Створити додаток з {{name}}", "apps.allCategories": "Всі", + "apps.description": "Готові до використання шаблони від спільноти та команди Dify.", "apps.resetFilter": "Очистити фільтр", "apps.resultNum": "{{num}} результатів", "apps.title": "Шаблони", diff --git a/web/i18n/vi-VN/explore.json b/web/i18n/vi-VN/explore.json index 76226bd256..2f0e7febae 100644 --- a/web/i18n/vi-VN/explore.json +++ b/web/i18n/vi-VN/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "Biểu tượng và tên ứng dụng", "appCustomize.title": "Tạo ứng dụng từ {{name}}", "apps.allCategories": "Tất cả", + "apps.description": "Các mẫu sẵn sàng sử dụng từ cộng đồng và đội ngũ Dify.", "apps.resetFilter": "Xóa bộ lọc", "apps.resultNum": "{{num}} kết quả", "apps.title": "Mẫu", diff --git a/web/i18n/zh-Hans/explore.json b/web/i18n/zh-Hans/explore.json index 99354ebee6..7ed75ef42d 100644 --- a/web/i18n/zh-Hans/explore.json +++ b/web/i18n/zh-Hans/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "应用程序图标和名称", "appCustomize.title": "从 {{name}} 创建应用程序", "apps.allCategories": "所有", + "apps.description": "来自社区和 Dify 团队的开箱即用模板。", "apps.resetFilter": "清除筛选", "apps.resultNum": "{{num}} 个结果", "apps.title": "模板", diff --git a/web/i18n/zh-Hant/explore.json b/web/i18n/zh-Hant/explore.json index cae667e88e..a798e89a6c 100644 --- a/web/i18n/zh-Hant/explore.json +++ b/web/i18n/zh-Hant/explore.json @@ -5,6 +5,7 @@ "appCustomize.subTitle": "應用程式圖示和名稱", "appCustomize.title": "從 {{name}} 建立應用程式", "apps.allCategories": "全部", + "apps.description": "來自社群和 Dify 團隊的即用範本。", "apps.resetFilter": "清除篩選", "apps.resultNum": "{{num}} 個結果", "apps.title": "範本",