@lobehub/lobehub 2.0.0-next.337 → 2.0.0-next.339

package/src/app/[variants]/(main)/settings/skill/index.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { Button, Icon } from '@lobehub/ui';
+import { Store } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SettingHeader from '@/app/[variants]/(main)/settings/features/SettingHeader';
+import SkillStore from '@/features/SkillStore';
+
+import SkillList from './features/SkillList';
+
+const Page = () => {
+  const { t } = useTranslation('setting');
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SettingHeader
+        extra={
+          <Button icon={<Icon icon={Store} />} onClick={() => setOpen(true)}>
+            {t('skillStore.button')}
+          </Button>
+        }
+        title={t('tab.skill')}
+      />
+      <SkillList />
+      <SkillStore open={open} setOpen={setOpen} />
+    </>
+  );
+};
+
+Page.displayName = 'SkillsSetting';
+
+export default Page;

package/src/app/[variants]/(mobile)/router/mobileRouter.config.tsx

@@ -7,6 +7,7 @@ import MobileChatLayout from '@/app/[variants]/(mobile)/chat/_layout';
 import MobileMeHomeLayout from '@/app/[variants]/(mobile)/me/(home)/layout';
 import MobileMeProfileLayout from '@/app/[variants]/(mobile)/me/profile/layout';
 import MobileMeSettingsLayout from '@/app/[variants]/(mobile)/me/settings/layout';
+import MobileSettingsProviderLayout from '@/app/[variants]/(mobile)/settings/provider/_layout';
 import {
   BusinessMobileRoutesWithMainLayout,
   BusinessMobileRoutesWithoutMainLayout,
@@ -174,6 +175,32 @@ export const mobileRoutes: RouteConfig[] = [
             element: dynamicElement(() => import('../settings'), 'Mobile > Settings'),
             index: true,
           },
+          // Provider routes with nested structure
+          {
+            children: [
+              {
+                element: redirectElement('/settings/provider/all'),
+                index: true,
+              },
+              {
+                element: dynamicElement(
+                  () => import('../../(main)/settings/provider').then((m) => m.ProviderDetailPage),
+                  'Mobile > Settings > Provider > Detail',
+                ),
+                path: ':providerId',
+              },
+            ],
+            element: <MobileSettingsProviderLayout />,
+            path: 'provider',
+          },
+          // Other settings tabs (common, agent, memory, tts, about, etc.)
+          {
+            element: dynamicElement(
+              () => import('../../(main)/settings'),
+              'Mobile > Settings > Tab',
+            ),
+            path: ':tab',
+          },
         ],
         element: <MobileSettingsLayout />,
         errorElement: <ErrorBoundary resetPath="/settings" />,

package/src/app/[variants]/(mobile)/settings/_layout/Header.tsx

@@ -4,10 +4,9 @@ import { Flexbox } from '@lobehub/ui';
 import { ChatHeader } from '@lobehub/ui/mobile';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import { enableAuth } from '@/envs/auth';
-import { useQueryState } from '@/hooks/useQueryParam';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { type SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
@@ -17,26 +16,16 @@ const Header = memo(() => {
   const { t } = useTranslation('setting');
   const showMobileWorkspace = useShowMobileWorkspace();
   const navigate = useNavigate();
-  const [activeSettingsKey, setActiveSettingsKey] = useQueryState('active');
-  const [providerName, setProviderName] = useQueryState('provider');
+  const params = useParams<{ providerId?: string, tab?: string; }>();
 
   const isSessionActive = useSessionStore((s) => !!s.activeId);
-  const isProvider = providerName ? true : false;
+  const isProvider = params.providerId && params.providerId !== 'all';
 
   const handleBackClick = () => {
-    console.log(
-      'gobackclick',
-      isSessionActive,
-      showMobileWorkspace,
-      activeSettingsKey,
-      providerName,
-    );
     if (isSessionActive && showMobileWorkspace) {
       navigate('/agent');
-    } else if (activeSettingsKey === 'provider' && providerName) {
-      setProviderName(null);
-      setActiveSettingsKey('provider');
-      navigate(-1);
+    } else if (isProvider) {
+      navigate('/settings/provider/all');
     } else {
       navigate(enableAuth ? '/me/settings' : '/me');
     }
@@ -49,7 +38,9 @@ const Header = memo(() => {
           title={
             <Flexbox align={'center'} gap={8} horizontal>
               <span style={{ lineHeight: 1.2 }}>
-                {isProvider ? providerName : t(`tab.${activeSettingsKey as SettingsTabs}` as any)}
+                {isProvider
+                  ? params.providerId
+                  : t(`tab.${(params.tab || 'all') as SettingsTabs}` as any)}
               </span>
             </Flexbox>
           }

package/src/app/[variants]/(mobile)/settings/_layout/index.tsx

@@ -3,7 +3,10 @@
 import { memo } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
 import SettingsContextProvider from '../../../(main)/settings/_layout/ContextProvider';
+import Header from './Header';
 
 const MobileSettingsWrapper = memo(() => {
   return (
@@ -13,7 +16,9 @@ const MobileSettingsWrapper = memo(() => {
         showOpenAIProxyUrl: true,
       }}
     >
-      <Outlet />
+      <MobileContentLayout header={<Header />}>
+        <Outlet />
+      </MobileContentLayout>
     </SettingsContextProvider>
   );
 });

package/src/app/[variants]/(mobile)/settings/provider/_layout/index.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { Outlet, useNavigate, useParams } from 'react-router-dom';
+
+import ProviderMenu from '../../../../(main)/settings/provider/ProviderMenu';
+
+const Layout = () => {
+  const params = useParams<{ providerId: string }>();
+  const navigate = useNavigate();
+
+  const handleProviderSelect = (providerKey: string) => {
+    navigate(`/settings/provider/${providerKey}`);
+  };
+
+  return params.providerId === 'all' ? (
+    <ProviderMenu mobile={true} onProviderSelect={handleProviderSelect} />
+  ) : (
+    <Outlet />
+  );
+};
+
+export default Layout;

package/src/components/Plugins/PluginTag.tsx

@@ -3,8 +3,6 @@ import { BadgeCheck, CircleUser, Package } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import MCPTag from './MCPTag';
-
 interface PluginTagProps {
   author?: string;
   isMCP?: boolean;
@@ -13,38 +11,28 @@ interface PluginTagProps {
   type: 'builtin' | 'customPlugin' | 'plugin';
 }
 
-const PluginTag = memo<PluginTagProps>(
-  ({ showIcon = true, author, type, showText = true, isMCP }) => {
-    const { t } = useTranslation('plugin');
-    const isCustom = type === 'customPlugin';
-    const isOfficial = author === 'LobeHub';
-
-    const customTag = (
-      <Tag color={'warning'} icon={showIcon && <Icon icon={Package} />} size={'small'}>
-        {t('store.customPlugin')}
-      </Tag>
-    );
-
-    if (isMCP)
-      return (
-        <>
-          <MCPTag showIcon={showIcon} showText={false} />
-          {isCustom && customTag}
-        </>
-      );
-
-    if (isCustom) return customTag;
-
-    return (
-      <Tag
-        color={isOfficial ? 'success' : undefined}
-        icon={showIcon && <Icon icon={isOfficial ? BadgeCheck : CircleUser} />}
-        size={'small'}
-      >
-        {showText && (author || t('store.communityPlugin'))}
-      </Tag>
-    );
-  },
-);
+const PluginTag = memo<PluginTagProps>(({ showIcon = true, author, type, showText = true }) => {
+  const { t } = useTranslation('plugin');
+  const isCustom = type === 'customPlugin';
+  const isOfficial = author === 'LobeHub';
+
+  const customTag = (
+    <Tag color={'warning'} icon={showIcon && <Icon icon={Package} />} size={'small'}>
+      {t('store.customPlugin')}
+    </Tag>
+  );
+
+  if (isCustom) return customTag;
+
+  return (
+    <Tag
+      color={isOfficial ? 'success' : undefined}
+      icon={showIcon && <Icon icon={isOfficial ? BadgeCheck : CircleUser} />}
+      size={'small'}
+    >
+      {showText && (author || t('store.communityPlugin'))}
+    </Tag>
+  );
+});
 
 export default PluginTag;

package/src/components/client/ClientOnly.tsx

@@ -1,15 +1,19 @@
 'use client';
 
+import type React from 'react';
 import { type FC, type PropsWithChildren, useEffect, useState } from 'react';
 
-const ClientOnly: FC<PropsWithChildren> = ({ children }) => {
+const ClientOnly: FC<PropsWithChildren<{ fallback?: React.ReactNode }>> = ({
+  children,
+  fallback = null,
+}) => {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
-  if (!mounted) return null;
+  if (!mounted) return fallback;
 
   return children;
 };

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -12,7 +12,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import PluginAvatar from '@/components/Plugins/PluginAvatar';
 import PluginTag from '@/components/Plugins/PluginTag';
 import { FORM_STYLE } from '@/const/layoutTokens';
-import PluginStore from '@/features/PluginStore';
+import SkillStore from '@/features/SkillStore';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
@@ -170,7 +170,7 @@ const AgentPlugin = memo(() => {
 
   return (
     <>
-      <PluginStore open={showStore} setOpen={setShowStore} />
+      <SkillStore open={showStore} setOpen={setShowStore} />
       <Form items={[plugin]} itemsType={'group'} variant={'borderless'} {...FORM_STYLE} />
     </>
   );

package/src/features/ChatInput/ActionBar/Tools/KlavisServerItem.tsx

@@ -1,5 +1,5 @@
 import { Checkbox, Flexbox, Icon } from '@lobehub/ui';
-import { Loader2, SquareArrowOutUpRight, Unplug } from 'lucide-react';
+import { Loader2, SquareArrowOutUpRight } from 'lucide-react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -42,7 +42,6 @@ const KlavisServerItem = memo<KlavisServerItemProps>(
     const userId = useUserStore(userProfileSelectors.userId);
     const createKlavisServer = useToolStore((s) => s.createKlavisServer);
     const refreshKlavisServerTools = useToolStore((s) => s.refreshKlavisServerTools);
-    const removeKlavisServer = useToolStore((s) => s.removeKlavisServer);
 
     // 清理所有定时器
     const cleanup = useCallback(() => {
@@ -212,18 +211,6 @@ const KlavisServerItem = memo<KlavisServerItemProps>(
       setIsToggling(false);
     };
 
-    const handleDisconnect = async () => {
-      if (!server) return;
-      setIsToggling(true);
-      // 如果当前已启用，先禁用
-      if (checked) {
-        await togglePlugin(pluginId);
-      }
-      // 删除服务器（使用 identifier）
-      await removeKlavisServer(server.identifier);
-      setIsToggling(false);
-    };
-
     // 渲染右侧控件
     const renderRightControl = () => {
       // 正在连接中
@@ -262,24 +249,13 @@ const KlavisServerItem = memo<KlavisServerItemProps>(
             return <Icon icon={Loader2} spin />;
           }
           return (
-            <Flexbox align="center" gap={8} horizontal>
-              <Icon
-                icon={Unplug}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleDisconnect();
-                }}
-                size="small"
-                style={{ cursor: 'pointer', opacity: 0.5 }}
-              />
-              <Checkbox
-                checked={checked}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleToggle();
-                }}
-              />
-            </Flexbox>
+            <Checkbox
+              checked={checked}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleToggle();
+              }}
+            />
           );
         }
         case KlavisServerStatus.PENDING_AUTH: {

package/src/features/ChatInput/ActionBar/Tools/LobehubSkillServerItem.tsx

@@ -1,5 +1,5 @@
 import { Checkbox, Flexbox, Icon } from '@lobehub/ui';
-import { Loader2, SquareArrowOutUpRight, Unplug } from 'lucide-react';
+import { Loader2, SquareArrowOutUpRight } from 'lucide-react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -36,7 +36,6 @@ const LobehubSkillServerItem = memo<LobehubSkillServerItemProps>(({ provider, la
 
   const server = useToolStore(lobehubSkillStoreSelectors.getServerByIdentifier(provider));
   const checkStatus = useToolStore((s) => s.checkLobehubSkillStatus);
-  const revokeConnect = useToolStore((s) => s.revokeLobehubSkill);
   const getAuthorizeUrl = useToolStore((s) => s.getLobehubSkillAuthorizeUrl);
 
   const cleanup = useCallback(() => {
@@ -196,16 +195,6 @@ const LobehubSkillServerItem = memo<LobehubSkillServerItemProps>(({ provider, la
     setIsToggling(false);
   };
 
-  const handleDisconnect = async () => {
-    if (!server) return;
-    setIsToggling(true);
-    if (checked) {
-      await togglePlugin(pluginId);
-    }
-    await revokeConnect(server.identifier);
-    setIsToggling(false);
-  };
-
   const renderRightControl = () => {
     if (isConnecting) {
       return (
@@ -239,24 +228,13 @@ const LobehubSkillServerItem = memo<LobehubSkillServerItemProps>(({ provider, la
           return <Icon icon={Loader2} spin />;
         }
         return (
-          <Flexbox align="center" gap={8} horizontal>
-            <Icon
-              icon={Unplug}
-              onClick={(e) => {
-                e.stopPropagation();
-                handleDisconnect();
-              }}
-              size="small"
-              style={{ cursor: 'pointer', opacity: 0.5 }}
-            />
-            <Checkbox
-              checked={checked}
-              onClick={(e) => {
-                e.stopPropagation();
-                handleToggle();
-              }}
-            />
-          </Flexbox>
+          <Checkbox
+            checked={checked}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleToggle();
+            }}
+          />
         );
       }
       case LobehubSkillStatus.CONNECTING: {

package/src/features/ChatInput/ActionBar/Tools/PopoverContent.tsx

@@ -1,8 +1,9 @@
-import { Flexbox, Icon, type ItemType, Segmented, usePopoverContext } from '@lobehub/ui';
+import { Flexbox, Icon, type ItemType, usePopoverContext } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
-import { ChevronRight, Store } from 'lucide-react';
+import { ChevronRight, Settings, Store } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import ToolsList, { toolsListStyles } from './ToolsList';
 
@@ -11,81 +12,69 @@ const styles = createStaticStyles(({ css }) => ({
     padding: 4px;
     border-block-start: 1px solid ${cssVar.colorBorderSecondary};
   `,
-  header: css`
-    padding: 8px;
-    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
-  `,
   trailingIcon: css`
     opacity: 0.5;
   `,
 }));
 
-type TabType = 'all' | 'installed';
-
 interface PopoverContentProps {
-  activeTab: TabType;
-  currentItems: ItemType[];
   enableKlavis: boolean;
+  items: ItemType[];
   onOpenStore: () => void;
-  onTabChange: (tab: TabType) => void;
 }
 
-const PopoverContent = memo<PopoverContentProps>(
-  ({ activeTab, currentItems, enableKlavis, onTabChange, onOpenStore }) => {
-    const { t } = useTranslation('setting');
+const PopoverContent = memo<PopoverContentProps>(({ items, enableKlavis, onOpenStore }) => {
+  const { t } = useTranslation('setting');
+  const navigate = useNavigate();
 
-    const { close: closePopover } = usePopoverContext();
+  const { close: closePopover } = usePopoverContext();
 
-    return (
-      <Flexbox gap={0}>
-        <div className={styles.header}>
-          <Segmented
-            block
-            onChange={(v) => onTabChange(v as TabType)}
-            options={[
-              {
-                label: t('tools.tabs.all', { defaultValue: 'all' }),
-                value: 'all',
-              },
-              {
-                label: t('tools.tabs.installed', { defaultValue: 'Installed' }),
-                value: 'installed',
-              },
-            ]}
-            size="small"
-            value={activeTab}
-          />
-        </div>
+  return (
+    <Flexbox gap={0}>
+      <div
+        style={{
+          maxHeight: 500,
+          minHeight: enableKlavis ? 500 : undefined,
+          overflowY: 'auto',
+        }}
+      >
+        <ToolsList items={items} />
+      </div>
+      <div className={styles.footer}>
         <div
-          style={{
-            maxHeight: 500,
-            minHeight: enableKlavis ? 500 : undefined,
-            overflowY: 'auto',
+          className={toolsListStyles.item}
+          onClick={() => {
+            closePopover();
+            onOpenStore();
           }}
+          role="button"
+          tabIndex={0}
         >
-          <ToolsList items={currentItems} />
+          <div className={toolsListStyles.itemIcon}>
+            <Icon icon={Store} size={20} />
+          </div>
+          <div className={toolsListStyles.itemContent}>{t('tools.plugins.store')}</div>
+          <Icon className={styles.trailingIcon} icon={ChevronRight} size={16} />
         </div>
-        <div className={styles.footer}>
-          <div
-            className={toolsListStyles.item}
-            onClick={() => {
-              closePopover();
-              onOpenStore();
-            }}
-            role="button"
-            tabIndex={0}
-          >
-            <div className={toolsListStyles.itemIcon}>
-              <Icon icon={Store} size={20} />
-            </div>
-            <div className={toolsListStyles.itemContent}>{t('tools.plugins.store')}</div>
-            <Icon className={styles.trailingIcon} icon={ChevronRight} size={16} />
+        <div
+          className={toolsListStyles.item}
+          onClick={() => {
+            closePopover();
+            navigate('/settings/skill');
+          }}
+          role="button"
+          tabIndex={0}
+        >
+          <div className={toolsListStyles.itemIcon}>
+            <Icon icon={Settings} size={20} />
           </div>
+          <div className={toolsListStyles.itemContent}>{t('tools.plugins.management')}</div>
+          <Icon className={styles.trailingIcon} icon={ChevronRight} size={16} />
         </div>
-      </Flexbox>
-    );
-  },
-);
+      </div>
+    </Flexbox>
+  );
+});
 
 PopoverContent.displayName = 'PopoverContent';
 

package/src/features/ChatInput/ActionBar/Tools/index.tsx

@@ -1,8 +1,8 @@
 import { Blocks } from 'lucide-react';
-import { Suspense, memo, useEffect, useRef, useState } from 'react';
+import { Suspense, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import PluginStore from '@/features/PluginStore';
+import SkillStore from '@/features/SkillStore';
 import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useAgentStore } from '@/store/agent';
 import { agentByIdSelectors } from '@/store/agent/selectors';
@@ -13,27 +13,15 @@ import Action from '../components/Action';
 import PopoverContent from './PopoverContent';
 import { useControls } from './useControls';
 
-type TabType = 'all' | 'installed';
-
 const Tools = memo(() => {
   const { t } = useTranslation('setting');
   const [modalOpen, setModalOpen] = useState(false);
   const [updating, setUpdating] = useState(false);
-  const [activeTab, setActiveTab] = useState<TabType | null>(null);
-  const { marketItems, installedPluginItems } = useControls({
+  const { marketItems } = useControls({
     setUpdating,
   });
 
   const enableKlavis = useServerConfigStore(serverConfigSelectors.enableKlavis);
-  const isInitializedRef = useRef(false);
-
-  // Set default tab based on installed plugins (only on first load)
-  useEffect(() => {
-    if (!isInitializedRef.current && installedPluginItems.length >= 0) {
-      isInitializedRef.current = true;
-      setActiveTab(installedPluginItems.length > 0 ? 'installed' : 'all');
-    }
-  }, [installedPluginItems.length]);
 
   const agentId = useAgentId();
   const model = useAgentStore((s) => agentByIdSelectors.getAgentModelById(agentId)(s));
@@ -44,10 +32,6 @@ const Tools = memo(() => {
   if (!enableFC)
     return <Action disabled icon={Blocks} showTooltip={true} title={t('tools.disabled')} />;
 
-  // Use effective tab for display (default to market while initializing)
-  const effectiveTab = activeTab ?? 'all';
-  const currentItems = effectiveTab === 'all' ? marketItems : installedPluginItems;
-
   return (
     <Suspense fallback={<Action disabled icon={Blocks} title={t('tools.title')} />}>
       <Action
@@ -56,11 +40,9 @@ const Tools = memo(() => {
         popover={{
           content: (
             <PopoverContent
-              activeTab={effectiveTab}
-              currentItems={currentItems}
               enableKlavis={enableKlavis}
+              items={marketItems}
               onOpenStore={() => setModalOpen(true)}
-              onTabChange={setActiveTab}
             />
           ),
           maxWidth: 320,
@@ -74,7 +56,7 @@ const Tools = memo(() => {
         showTooltip={false}
         title={t('tools.title')}
       />
-      <PluginStore open={modalOpen} setOpen={setModalOpen} />
+      <SkillStore open={modalOpen} setOpen={setModalOpen} />
     </Suspense>
   );
 });