Skip to content

D
dify
Unverified Commit 20014836 authored by Rozstone's avatar Rozstone Committed by GitHub
Browse files
Options

fix: default to allcategories when search params is not from recommended (#2653)

parent 444aba55
Hide whitespace changes
Inline Side-by-side
Showing with 349 additions and 15 deletions
web/app/components/explore/app-list/index.tsx
View file @ 20014836
...@@ -26,7 +26,8 @@ const Apps: FC = () => { ...@@ -26,7 +26,8 @@ const Apps: FC = () => {
const { isCurrentWorkspaceManager } = useAppContext() const { isCurrentWorkspaceManager } = useAppContext()
const router = useRouter() const router = useRouter()
const { hasEditPermission } = useContext(ExploreContext) const { hasEditPermission } = useContext(ExploreContext)
const allCategoriesEn = t('explore.apps.allCategories') const allCategoriesEn = t('explore.apps.allCategories', { lng: 'en' })
const [currCategory, setCurrCategory] = useTabSearchParams({ const [currCategory, setCurrCategory] = useTabSearchParams({
defaultTab: allCategoriesEn, defaultTab: allCategoriesEn,
}) })
...@@ -47,11 +48,10 @@ const Apps: FC = () => { ...@@ -47,11 +48,10 @@ const Apps: FC = () => {
}, },
) )
const currList = (() => { const currList
if (currCategory === allCategoriesEn) = currCategory === allCategoriesEn
return allList ? allList
return allList.filter(item => item.category === currCategory) : allList.filter(item => item.category === currCategory)
})()
const [currApp, setCurrApp] = React.useState<App | null>(null) const [currApp, setCurrApp] = React.useState<App | null>(null)
const [isShowCreateModal, setIsShowCreateModal] = React.useState(false) const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
...@@ -112,6 +112,7 @@ const Apps: FC = () => { ...@@ -112,6 +112,7 @@ const Apps: FC = () => {
list={categories} list={categories}
value={currCategory} value={currCategory}
onChange={setCurrCategory} onChange={setCurrCategory}
allCategoriesEn={allCategoriesEn}
/> />
<div className="relative flex flex-1 mt-6 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow"> <div className="relative flex flex-1 mt-6 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow">
<nav <nav
......
web/app/components/explore/category.tsx
View file @ 20014836
...@@ -12,7 +12,11 @@ export type ICategoryProps = { ...@@ -12,7 +12,11 @@ export type ICategoryProps = {
className?: string className?: string
list: AppCategory[] list: AppCategory[]
value: string value: string
onChange: (value: AppCategory | '') => void onChange: (value: AppCategory | string) => void
/**
* default value for searchparam 'category' in en
*/
allCategoriesEn: string
} }
const Category: FC<ICategoryProps> = ({ const Category: FC<ICategoryProps> = ({
...@@ -20,17 +24,24 @@ const Category: FC<ICategoryProps> = ({ ...@@ -20,17 +24,24 @@ const Category: FC<ICategoryProps> = ({
list, list,
value, value,
onChange, onChange,
allCategoriesEn,
}) => { }) => {
const { t } = useTranslation() 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 ( return (
<div className={cn(className, 'flex space-x-1 text-[13px] flex-wrap')}> <div className={cn(className, 'flex space-x-1 text-[13px] flex-wrap')}>
<div <div
className={itemClassName(value === '')} className={itemClassName(isAllCategories)}
style={itemStyle(value === '')} onClick={() => onChange(allCategoriesEn)}
onClick={() => onChange('')}
> >
{t('explore.apps.allCategories')} {t('explore.apps.allCategories')}
</div> </div>
...@@ -38,7 +49,6 @@ const Category: FC<ICategoryProps> = ({ ...@@ -38,7 +49,6 @@ const Category: FC<ICategoryProps> = ({
<div <div
key={name} key={name}
className={itemClassName(name === value)} className={itemClassName(name === value)}
style={itemStyle(name === value)}
onClick={() => onChange(name)} onClick={() => onChange(name)}
> >
{categoryI18n[name] ? t(`explore.category.${name}`) : name} {categoryI18n[name] ? t(`explore.category.${name}`) : name}
...@@ -47,4 +57,5 @@ const Category: FC<ICategoryProps> = ({ ...@@ -47,4 +57,5 @@ const Category: FC<ICategoryProps> = ({
</div> </div>
) )
} }
export default React.memo(Category) export default React.memo(Category)
web/app/components/share/chat/welcome/massive-component.tsx
View file @ 20014836
...@@ -23,9 +23,9 @@ export const AppInfo: FC<{ siteInfo: SiteInfo }> = ({ siteInfo }) => { ...@@ -23,9 +23,9 @@ export const AppInfo: FC<{ siteInfo: SiteInfo }> = ({ siteInfo }) => {
export const PromptTemplate: FC<{ html: string }> = ({ html }) => { export const PromptTemplate: FC<{ html: string }> = ({ html }) => {
return ( return (
<div <div
className={' box-border text-sm text-gray-700'} className={'box-border text-sm text-gray-700'}
dangerouslySetInnerHTML={{ __html: html }} dangerouslySetInnerHTML={{ __html: html }}
></div> />
) )
} }
......
web/test/mocks/categories.ts 0 → 100644
View file @ 20014836
// 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',
'智能助理',
],
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment