mirror of
https://gitee.com/dify_ai/dify.git
synced 2024-11-30 02:08:37 +08:00
fix: default to allcategories when search params is not from recommended (#2653)
This commit is contained in:
Rozstone
GitHub
parent
444aba55dd
commit
2001483659
@ -26,7 +26,8 @@ const Apps: FC = () => {
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
const router = useRouter()
|
||||
const { hasEditPermission } = useContext(ExploreContext)
|
||||
const allCategoriesEn = t('explore.apps.allCategories')
|
||||
const allCategoriesEn = t('explore.apps.allCategories', { lng: 'en' })
|
||||
|
||||
const [currCategory, setCurrCategory] = useTabSearchParams({
|
||||
defaultTab: allCategoriesEn,
|
||||
})
|
||||
@ -47,11 +48,10 @@ const Apps: FC = () => {
|
||||
},
|
||||
)
|
||||
|
||||
const currList = (() => {
|
||||
if (currCategory === allCategoriesEn)
|
||||
return allList
|
||||
return allList.filter(item => item.category === currCategory)
|
||||
})()
|
||||
const currList
|
||||
= currCategory === allCategoriesEn
|
||||
? allList
|
||||
: allList.filter(item => item.category === currCategory)
|
||||
|
||||
const [currApp, setCurrApp] = React.useState<App | null>(null)
|
||||
const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
|
||||
@ -112,6 +112,7 @@ const Apps: FC = () => {
|
||||
list={categories}
|
||||
value={currCategory}
|
||||
onChange={setCurrCategory}
|
||||
allCategoriesEn={allCategoriesEn}
|
||||
/>
|
||||
<div className="relative flex flex-1 mt-6 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow">
|
||||
<nav
|
||||
|
||||
@ -12,7 +12,11 @@ export type ICategoryProps = {
|
||||
className?: string
|
||||
list: AppCategory[]
|
||||
value: string
|
||||
onChange: (value: AppCategory | '') => void
|
||||
onChange: (value: AppCategory | string) => void
|
||||
/**
|
||||
* default value for searchparam 'category' in en
|
||||
*/
|
||||
allCategoriesEn: string
|
||||
}
|
||||
|
||||
const Category: FC<ICategoryProps> = ({
|
||||
@ -20,17 +24,24 @@ const Category: FC<ICategoryProps> = ({
|
||||
list,
|
||||
value,
|
||||
onChange,
|
||||
allCategoriesEn,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const isAllCategories = !list.includes(value)
|
||||
|
||||
const itemClassName = (isSelected: boolean) =>
|
||||
cn(
|
||||
isSelected
|
||||
? 'bg-white text-primary-600 border-gray-200 font-semibold shadow-[0px_1px_2px_rgba(16,24,40,0.05)]'
|
||||
: 'border-transparent font-medium',
|
||||
'flex items-center h-7 px-3 border cursor-pointer rounded-lg',
|
||||
)
|
||||
|
||||
const itemClassName = (isSelected: boolean) => cn(isSelected ? 'bg-white text-primary-600 border-gray-200 font-semibold' : 'border-transparent font-medium', 'flex items-center h-7 px-3 border cursor-pointer rounded-lg')
|
||||
const itemStyle = (isSelected: boolean) => isSelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}
|
||||
return (
|
||||
<div className={cn(className, 'flex space-x-1 text-[13px] flex-wrap')}>
|
||||
<div
|
||||
className={itemClassName(value === '')}
|
||||
style={itemStyle(value === '')}
|
||||
onClick={() => onChange('')}
|
||||
className={itemClassName(isAllCategories)}
|
||||
onClick={() => onChange(allCategoriesEn)}
|
||||
>
|
||||
{t('explore.apps.allCategories')}
|
||||
</div>
|
||||
@ -38,7 +49,6 @@ const Category: FC<ICategoryProps> = ({
|
||||
<div
|
||||
key={name}
|
||||
className={itemClassName(name === value)}
|
||||
style={itemStyle(name === value)}
|
||||
onClick={() => onChange(name)}
|
||||
>
|
||||
{categoryI18n[name] ? t(`explore.category.${name}`) : name}
|
||||
@ -47,4 +57,5 @@ const Category: FC<ICategoryProps> = ({
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Category)
|
||||
|
||||
@ -23,9 +23,9 @@ export const AppInfo: FC<{ siteInfo: SiteInfo }> = ({ siteInfo }) => {
|
||||
export const PromptTemplate: FC<{ html: string }> = ({ html }) => {
|
||||
return (
|
||||
<div
|
||||
className={' box-border text-sm text-gray-700'}
|
||||
className={'box-border text-sm text-gray-700'}
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
></div>
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
322
web/test/mocks/categories.ts
Normal file
322
web/test/mocks/categories.ts
Normal file
@ -0,0 +1,322 @@
|
||||
// TODO: maybe use faker.js to randomize the data
|
||||
export const mockApps = {
|
||||
recommended_apps: [
|
||||
{
|
||||
app: {
|
||||
id: 'b82da4c0-2887-48cc-a7d6-7edc0bdd6002',
|
||||
name: 'AI 前端面试官',
|
||||
mode: 'chat',
|
||||
icon: '🤖',
|
||||
icon_background: null,
|
||||
},
|
||||
app_id: 'b82da4c0-2887-48cc-a7d6-7edc0bdd6002',
|
||||
description:
|
||||
'一个模拟的前端面试官，通过提问的方式对前端开发的技能水平进行检验。',
|
||||
copyright: null,
|
||||
privacy_policy: null,
|
||||
category: 'HR',
|
||||
position: 20,
|
||||
is_listed: true,
|
||||
install_count: 0,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: false,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: '1fa25f89-2883-41ac-877e-c372274020a4',
|
||||
name: '扁平风插画生成',
|
||||
mode: 'chat',
|
||||
icon: '🖼️',
|
||||
icon_background: '#D5F5F6',
|
||||
},
|
||||
app_id: '1fa25f89-2883-41ac-877e-c372274020a4',
|
||||
description: '输入相关元素，为你生成扁平插画风格的封面图片',
|
||||
copyright: null,
|
||||
privacy_policy: null,
|
||||
category: '绘画',
|
||||
position: 10,
|
||||
is_listed: true,
|
||||
install_count: 0,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: true,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: '94b509ad-4225-4924-8b50-5c25c2bd7e3c',
|
||||
name: '文章翻译助理 ',
|
||||
mode: 'completion',
|
||||
icon: '🤖',
|
||||
icon_background: null,
|
||||
},
|
||||
app_id: '94b509ad-4225-4924-8b50-5c25c2bd7e3c',
|
||||
description:
|
||||
'一个多语言翻译器，提供多种语言翻译能力，输入你需要翻译的文本，选择目标语言即可。提示词来自宝玉。',
|
||||
copyright: null,
|
||||
privacy_policy: null,
|
||||
category: 'Assistant',
|
||||
position: 10,
|
||||
is_listed: true,
|
||||
install_count: 0,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: false,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: 'c8003ab3-9bb7-4693-9249-e603d48e58a6',
|
||||
name: 'SQL 生成器',
|
||||
mode: 'completion',
|
||||
icon: '🤖',
|
||||
icon_background: null,
|
||||
},
|
||||
app_id: 'c8003ab3-9bb7-4693-9249-e603d48e58a6',
|
||||
description:
|
||||
'我将帮助你把自然语言转化成指定的数据库查询 SQL 语句，请在下方输入你需要查询的条件，并选择目标数据库类型。',
|
||||
copyright: null,
|
||||
privacy_policy: null,
|
||||
category: 'Programming',
|
||||
position: 12,
|
||||
is_listed: true,
|
||||
install_count: 3142,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: false,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: 'dad6a1e0-0fe9-47e1-91a9-e16de48f1276',
|
||||
name: '代码解释器',
|
||||
mode: 'chat',
|
||||
icon: 'eye-in-speech-bubble',
|
||||
icon_background: '#FFEAD5',
|
||||
},
|
||||
app_id: 'dad6a1e0-0fe9-47e1-91a9-e16de48f1276',
|
||||
description: '阐明代码的语法和语义。',
|
||||
copyright: 'Copyright 2023 Dify',
|
||||
privacy_policy: 'https://dify.ai',
|
||||
category: 'Programming',
|
||||
position: 2,
|
||||
is_listed: true,
|
||||
install_count: 2344,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: false,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: 'fae3e7ac-8ccc-4d43-8986-7c61d2bdde4f',
|
||||
name: '赛博朋克插画生成',
|
||||
mode: 'chat',
|
||||
icon: '🖼️',
|
||||
icon_background: '#FFEAD5',
|
||||
},
|
||||
app_id: 'fae3e7ac-8ccc-4d43-8986-7c61d2bdde4f',
|
||||
description: '输入相关元素，为你生成赛博朋克风格的插画',
|
||||
copyright: null,
|
||||
privacy_policy: null,
|
||||
category: '绘画',
|
||||
position: 10,
|
||||
is_listed: true,
|
||||
install_count: 0,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: true,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: '4e57bc83-ab95-4f8a-a955-70796b4804a0',
|
||||
name: 'SEO 文章生成专家',
|
||||
mode: 'completion',
|
||||
icon: '🤖',
|
||||
icon_background: '#FFEAD5',
|
||||
},
|
||||
app_id: '4e57bc83-ab95-4f8a-a955-70796b4804a0',
|
||||
description:
|
||||
'我是一名SEO专家，可以根据您提供的标题、关键词、相关信息来批量生成SEO文章。',
|
||||
copyright: null,
|
||||
privacy_policy: null,
|
||||
category: 'Assistant',
|
||||
position: 10,
|
||||
is_listed: true,
|
||||
install_count: 0,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: false,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: '6786ce62-fa85-4ea7-a4d1-5dbe3e3ff59f',
|
||||
name: '会议纪要',
|
||||
mode: 'chat',
|
||||
icon: 'clipboard',
|
||||
icon_background: '#D1E0FF',
|
||||
},
|
||||
app_id: '6786ce62-fa85-4ea7-a4d1-5dbe3e3ff59f',
|
||||
description: '帮你重新组织和输出混乱复杂的会议纪要。',
|
||||
copyright: 'Copyright 2023 Dify',
|
||||
privacy_policy: 'https://dify.ai',
|
||||
category: 'Writing',
|
||||
position: 6,
|
||||
is_listed: true,
|
||||
install_count: 1542,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: false,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: '73dd96bb-49b7-4791-acbd-9ef2ef506900',
|
||||
name: '美股投资分析助手',
|
||||
mode: 'chat',
|
||||
icon: '🤑',
|
||||
icon_background: '#E4FBCC',
|
||||
},
|
||||
app_id: '73dd96bb-49b7-4791-acbd-9ef2ef506900',
|
||||
description:
|
||||
'欢迎使用您的个性化美股投资分析助手，在这里我们深入的进行股票分析，为您提供全面的洞察。',
|
||||
copyright: 'Dify.AI',
|
||||
privacy_policy: null,
|
||||
category: '智能助理',
|
||||
position: 0,
|
||||
is_listed: true,
|
||||
install_count: 2,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: true,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: '93ca3c2c-3a47-4658-b230-d5a6cc61ff01',
|
||||
name: 'SVG Logo 设计',
|
||||
mode: 'chat',
|
||||
icon: '🎨',
|
||||
icon_background: '#E4FBCC',
|
||||
},
|
||||
app_id: '93ca3c2c-3a47-4658-b230-d5a6cc61ff01',
|
||||
description:
|
||||
'您好，我是您的创意伙伴，将帮助您将想法生动地实现！我可以协助您利用DALL·E 3的能力创造出令人惊叹的设计。',
|
||||
copyright: 'Dify.AI',
|
||||
privacy_policy: null,
|
||||
category: '智能助理',
|
||||
position: 4,
|
||||
is_listed: true,
|
||||
install_count: 6,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: true,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: '59924f26-963f-4b4b-90cf-978bbfcddc49',
|
||||
name: '中英文互译',
|
||||
mode: 'chat',
|
||||
icon: 'speaking_head_in_silhouette',
|
||||
icon_background: '#FBE8FF',
|
||||
},
|
||||
app_id: '59924f26-963f-4b4b-90cf-978bbfcddc49',
|
||||
description: '翻译专家：提供中英文互译',
|
||||
copyright: 'Copyright 2023 Dify',
|
||||
privacy_policy: 'https://dify.ai',
|
||||
category: 'Translate',
|
||||
position: 4,
|
||||
is_listed: true,
|
||||
install_count: 1662,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: false,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: '89ad1e65-6711-4c80-b469-a71a434e2dbd',
|
||||
name: '个人学习导师',
|
||||
mode: 'chat',
|
||||
icon: '🤖',
|
||||
icon_background: '#FFEAD5',
|
||||
},
|
||||
app_id: '89ad1e65-6711-4c80-b469-a71a434e2dbd',
|
||||
description: '您的私人学习导师，帮您制定学习计划并辅导',
|
||||
copyright: 'Copyright 2023 Dify',
|
||||
privacy_policy: 'https://dify.ai',
|
||||
category: 'Assistant',
|
||||
position: 26,
|
||||
is_listed: true,
|
||||
install_count: 1441,
|
||||
installed: true,
|
||||
editable: true,
|
||||
is_agent: false,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: 'ff551444-a3ff-4fd8-b297-f38581c98b4a',
|
||||
name: '文献综述写作',
|
||||
mode: 'completion',
|
||||
icon: 'female-student',
|
||||
icon_background: '#FBE8FF',
|
||||
},
|
||||
app_id: 'ff551444-a3ff-4fd8-b297-f38581c98b4a',
|
||||
description: '帮你撰写论文文献综述',
|
||||
copyright: 'Copyright 2023 Dify',
|
||||
privacy_policy: 'https://dify.ai',
|
||||
category: 'Writing',
|
||||
position: 7,
|
||||
is_listed: true,
|
||||
install_count: 1651,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: false,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: '79227a52-11f1-4cf9-8c49-0bd86f9be813',
|
||||
name: 'Youtube 频道数据分析',
|
||||
mode: 'chat',
|
||||
icon: '🔢',
|
||||
icon_background: '#E4FBCC',
|
||||
},
|
||||
app_id: '79227a52-11f1-4cf9-8c49-0bd86f9be813',
|
||||
description:
|
||||
'你好，告诉我您想分析的 YouTube 频道，我将为您整理一份完整的数据分析报告。',
|
||||
copyright: null,
|
||||
privacy_policy: null,
|
||||
category: '智能助理',
|
||||
position: 0,
|
||||
is_listed: true,
|
||||
install_count: 2,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: true,
|
||||
},
|
||||
{
|
||||
app: {
|
||||
id: '609f4a7f-36f7-4791-96a7-4ccbe6f8dfbb',
|
||||
name: '旅行规划助手',
|
||||
mode: 'chat',
|
||||
icon: '✈️',
|
||||
icon_background: '#E4FBCC',
|
||||
},
|
||||
app_id: '609f4a7f-36f7-4791-96a7-4ccbe6f8dfbb',
|
||||
description:
|
||||
'欢迎使用您的个性化旅行服务顾问！🌍✈️ 准备好踏上一段充满冒险与放松的旅程了吗？让我们一起深入打造您难忘的旅行体验吧。',
|
||||
copyright: null,
|
||||
privacy_policy: null,
|
||||
category: '智能助理',
|
||||
position: 0,
|
||||
is_listed: true,
|
||||
install_count: 3,
|
||||
installed: false,
|
||||
editable: true,
|
||||
is_agent: true,
|
||||
},
|
||||
],
|
||||
categories: [
|
||||
'绘画',
|
||||
'HR',
|
||||
'Programming',
|
||||
'Translate',
|
||||
'Assistant',
|
||||
'Writing',
|
||||
'智能助理',
|
||||
],
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user