From 2001483659fc27d529be1760bdf55e5694da9566 Mon Sep 17 00:00:00 2001
From: Rozstone <42225395+wststone@users.noreply.github.com>
Date: Sat, 2 Mar 2024 17:11:25 +0800
Subject: [PATCH] fix: default to allcategories when search params is not from
 recommended (#2653)

---
 web/app/components/explore/app-list/index.tsx |  13 +-
 web/app/components/explore/category.tsx       |  25 +-
 .../share/chat/welcome/massive-component.tsx  |   4 +-
 web/test/mocks/categories.ts                  | 322 ++++++++++++++++++
 4 files changed, 349 insertions(+), 15 deletions(-)
 create mode 100644 web/test/mocks/categories.ts

diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 9031bb6299..058aa541c3 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -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
diff --git a/web/app/components/explore/category.tsx b/web/app/components/explore/category.tsx
index a2a11973b5..4f44df34d9 100644
--- a/web/app/components/explore/category.tsx
+++ b/web/app/components/explore/category.tsx
@@ -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)
diff --git a/web/app/components/share/chat/welcome/massive-component.tsx b/web/app/components/share/chat/welcome/massive-component.tsx
index b39cb414cc..55b7e676fc 100644
--- a/web/app/components/share/chat/welcome/massive-component.tsx
+++ b/web/app/components/share/chat/welcome/massive-component.tsx
@@ -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>
+    />
   )
 }
 
diff --git a/web/test/mocks/categories.ts b/web/test/mocks/categories.ts
new file mode 100644
index 0000000000..e69cc69072
--- /dev/null
+++ b/web/test/mocks/categories.ts
@@ -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',
+    '智能助理',
+  ],
+}