feat(frontend): add model settings button to model selector dropdown (#200)

- Add settings link at bottom of model selector dropdown
- Navigate to settings page with models tab selected
- Add 'manage' translation key for both en and zh-CN locales
- Add models path configuration in paths.ts

Co-authored-by: qdaxb <[email protected]>

Author: qdaxb

frontend/src/config/paths.ts

@@ -40,5 +40,8 @@ export const paths = {
         team: {
             getHref: () => '/settings?tab=team',
         },
+        models: {
+            getHref: () => '/settings?tab=models',
+        },
     },
 } as const;

frontend/src/features/tasks/components/ModelSelector.tsx

@@ -5,15 +5,17 @@
 'use client';
 
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
-import { CpuChipIcon } from '@heroicons/react/24/outline';
+import { CpuChipIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';
 import { Check } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Team, BotSummary } from '@/types/api';
 import { modelApis, UnifiedModel, ModelTypeEnum } from '@/apis/models';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { Tag } from '@/components/ui/tag';
 import { cn } from '@/lib/utils';
+import { paths } from '@/config/paths';
 import {
   Command,
   CommandEmpty,
@@ -99,6 +101,7 @@ export default function ModelSelector({
   isLoading: externalLoading,
 }: ModelSelectorProps) {
   const { t } = useTranslation('common');
+  const router = useRouter();
   const isMobile = useMediaQuery('(max-width: 767px)');
   const [models, setModels] = useState<Model[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -410,6 +413,22 @@ export default function ModelSelector({
                     </label>
                   </div>
                 )}
+                {/* Model Settings Link */}
+                <div
+                  className="border-t border-border bg-base cursor-pointer group flex items-center space-x-2 px-2.5 py-2 text-xs text-text-secondary hover:bg-muted transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary w-full"
+                  onClick={() => router.push(paths.settings.models.getHref())}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      router.push(paths.settings.models.getHref());
+                    }
+                  }}
+                >
+                  <Cog6ToothIcon className="w-4 h-4 text-text-secondary group-hover:text-text-primary" />
+                  <span className="font-medium group-hover:text-text-primary">{t('models.manage', '模型设置')}</span>
+                </div>
               </Command>
             </PopoverContent>
           </Popover>

frontend/src/i18n/locales/en/common.json

@@ -477,6 +477,7 @@
     "title": "Model Management",
     "description": "Manage your AI model configurations",
     "public": "Public",
+    "manage": "Model settings",
     "create": "Create Model",
     "edit": "Edit Model",
     "delete": "Delete Model",

frontend/src/i18n/locales/zh-CN/common.json

@@ -478,6 +478,7 @@
     "title": "模型管理",
     "description": "管理您的 AI 模型配置",
     "public": "公共",
+    "manage": "模型设置",
     "create": "创建模型",
     "edit": "编辑模型",
     "delete": "删除模型",