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

package/src/features/{PluginStore/McpList/Detail/Settings → MCP/MCPSettings}/index.tsx

@@ -1,8 +1,8 @@
 import { Button, Flexbox, Icon, Input, Text } from '@lobehub/ui';
-import { Form as AForm, App, Space } from 'antd';
+import { Form as AForm, App } from 'antd';
 import { createStaticStyles } from 'antd-style';
-import { EditIcon, LinkIcon, SaveIcon, Settings2Icon, TerminalIcon } from 'lucide-react';
-import { memo, useState } from 'react';
+import { EditIcon, LinkIcon, Settings2Icon, TerminalIcon } from 'lucide-react';
+import { forwardRef, useImperativeHandle, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import KeyValueEditor from '@/components/KeyValueEditor';
@@ -148,7 +148,17 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 }));
 
-const Settings = memo<{ identifier: string }>(({ identifier }) => {
+export interface SettingsRef {
+  reset: () => void;
+  save: () => Promise<void>;
+}
+
+interface SettingsProps {
+  hideFooter?: boolean;
+  identifier: string;
+}
+
+const Settings = forwardRef<SettingsRef, SettingsProps>(({ identifier, hideFooter }, ref) => {
   const { t } = useTranslation(['plugin', 'common']);
   const [connectionForm] = AForm.useForm();
   const [envForm] = AForm.useForm();
@@ -162,6 +172,20 @@ const Settings = memo<{ identifier: string }>(({ identifier }) => {
   ]);
   const { message } = App.useApp();
 
+  useImperativeHandle(ref, () => ({
+    reset: () => {
+      connectionForm.resetFields();
+      envForm.resetFields();
+      setIsEditingConnection(false);
+    },
+    save: async () => {
+      if (isEditingConnection) {
+        await connectionForm.submit();
+      }
+      await envForm.submit();
+    },
+  }));
+
   // 获取已安装插件信息
   const installedPlugin = useToolStore(pluginSelectors.getInstalledPluginById(identifier));
   const pluginSettings = useToolStore(pluginSelectors.getPluginSettingsById(identifier));
@@ -305,19 +329,12 @@ const Settings = memo<{ identifier: string }>(({ identifier }) => {
                     </AForm.Item>
                   </>
                 )}
-                <div className={styles.footer}>
-                  <Space>
-                    <Button
-                      htmlType="submit"
-                      icon={<SaveIcon size={12} />}
-                      loading={connectionLoading}
-                      type="primary"
-                    >
-                      {t('common:save')}
-                    </Button>
-                    <Button onClick={handleCancelEdit}>{t('common:cancel')}</Button>
-                  </Space>
-                </div>
+                <Flexbox className={styles.footer} gap={8} horizontal>
+                  <Button htmlType="submit" loading={connectionLoading} type="primary">
+                    {t('common:save')}
+                  </Button>
+                  <Button onClick={handleCancelEdit}>{t('common:cancel')}</Button>
+                </Flexbox>
               </AForm>
             </div>
           )}
@@ -345,19 +362,14 @@ const Settings = memo<{ identifier: string }>(({ identifier }) => {
                   keyPlaceholder="VARIABLE_NAME"
                 />
               </AForm.Item>
-              <div className={styles.footer}>
-                <Space>
-                  <Button
-                    htmlType="submit"
-                    icon={<SaveIcon size={14} />}
-                    loading={loading}
-                    type="primary"
-                  >
+              {!hideFooter && (
+                <Flexbox className={styles.footer} gap={8} horizontal>
+                  <Button htmlType="submit" loading={loading} type="primary">
                     {t('common:save')}
                   </Button>
                   <Button onClick={() => envForm.resetFields()}>{t('common:reset')}</Button>
-                </Space>
-              </div>
+                </Flexbox>
+              )}
             </AForm>
           </Flexbox>
         )}

package/src/features/PluginDetailModal/index.tsx

@@ -42,8 +42,8 @@ const PluginDetailModal = memo<PluginDetailModalProps>(
           onClose();
         }}
         open={open}
-        title={t('detailModal.title')}
-        width={650}
+        title={t('dev.title.skillDetails')}
+        width={800}
       >
         <Meta id={id} />
         <Segmented

package/src/features/PluginDevModal/index.tsx

@@ -1,18 +1,15 @@
 import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
-import { Alert, Button, Drawer, Flexbox, Icon, Segmented, Tag } from '@lobehub/ui';
+import { Button, Drawer, Flexbox, Segmented, Tag } from '@lobehub/ui';
 import { App, Form, Popconfirm } from 'antd';
 import { useResponsive } from 'antd-style';
-import { MoveUpRight } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-import { WIKI_PLUGIN_GUIDE } from '@/const/url';
 import { isDesktop } from '@/const/version';
 import { type LobeToolCustomPlugin } from '@/types/tool/plugin';
 
 import MCPManifestForm from './MCPManifestForm';
 import PluginPreview from './PluginPreview';
-import UrlManifestForm from './UrlManifestForm';
 
 interface DevModalProps {
   mode?: 'edit' | 'create';
@@ -27,7 +24,7 @@ interface DevModalProps {
 const DevModal = memo<DevModalProps>(
   ({ open, mode = 'create', value, onValueChange, onSave, onOpenChange, onDelete }) => {
     const isEditMode = mode === 'edit';
-    const [configMode, setConfigMode] = useState<'url' | 'mcp'>('mcp');
+    const [configMode, setConfigMode] = useState<'mcp' | 'claude'>('mcp');
     const { t } = useTranslation('plugin');
     const { message } = App.useApp();
 
@@ -129,7 +126,7 @@ const DevModal = memo<DevModalProps>(
               height: '100%',
             },
           }}
-          title={t(isEditMode ? 'dev.title.edit' : 'dev.title.create')}
+          title={t(isEditMode ? 'dev.title.skillSettings' : 'dev.title.create')}
           width={mobile ? '100%' : 800}
         >
           <Flexbox
@@ -144,55 +141,34 @@ const DevModal = memo<DevModalProps>(
               <Segmented
                 block
                 onChange={(e) => {
-                  setConfigMode(e as 'url' | 'mcp');
+                  if (e === 'claude') return; // Claude Skill is disabled
+                  setConfigMode(e as 'mcp' | 'claude');
                 }}
                 options={[
                   {
+                    label: t('dev.manifest.mode.mcp'),
+                    value: 'mcp',
+                  },
+                  {
+                    disabled: true,
                     label: (
                       <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
-                        {t('dev.manifest.mode.mcp')}
+                        {t('dev.manifest.mode.claude')}
                         <div>
-                          <Tag color={'warning'} variant={'filled'}>
-                            {t('dev.manifest.mode.mcpExp')}
+                          <Tag variant={'filled'}>
+                            {t('dev.manifest.mode.claudeWip')}
                           </Tag>
                         </div>
                       </Flexbox>
                     ),
-                    value: 'mcp',
-                  },
-                  {
-                    label: t('dev.manifest.mode.url'),
-                    value: 'url',
+                    value: 'claude',
                   },
                 ]}
                 value={configMode}
                 variant={'filled'}
               />
 
-              {configMode === 'url' && (
-                <>
-                  <Alert
-                    showIcon
-                    title={
-                      <Trans i18nKey={'dev.modalDesc'} ns={'plugin'}>
-                        添加自定义插件后，可用于插件开发验证，也可直接在会话中使用。插件开发文档请参考：
-                        <a
-                          href={WIKI_PLUGIN_GUIDE}
-                          rel="noreferrer"
-                          style={{ paddingInline: 8 }}
-                          target={'_blank'}
-                        >
-                          文档
-                        </a>
-                        <Icon icon={MoveUpRight} />
-                      </Trans>
-                    }
-                    type={'info'}
-                  />
-                  <UrlManifestForm form={form} isEditMode={isEditMode} />
-                </>
-              )}
-              {configMode === 'mcp' && <MCPManifestForm form={form} isEditMode={isEditMode} />}
+              <MCPManifestForm form={form} isEditMode={isEditMode} />
             </Flexbox>
             <PluginPreview form={form} />
           </Flexbox>

package/src/features/ProfileEditor/AgentTool.tsx

@@ -18,7 +18,7 @@ import KlavisServerItem from '@/features/ChatInput/ActionBar/Tools/KlavisServerI
 import LobehubSkillServerItem from '@/features/ChatInput/ActionBar/Tools/LobehubSkillServerItem';
 import ToolItem from '@/features/ChatInput/ActionBar/Tools/ToolItem';
 import ActionDropdown from '@/features/ChatInput/ActionBar/components/ActionDropdown';
-import PluginStore from '@/features/PluginStore';
+import SkillStore from '@/features/SkillStore';
 import { useCheckPluginsIsInstalled } from '@/hooks/useCheckPluginsIsInstalled';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { useAgentStore } from '@/store/agent';
@@ -625,7 +625,7 @@ const AgentTool = memo<AgentToolProps>(
         </Flexbox>
 
         {/* PluginStore Modal - rendered outside Flexbox to avoid event interference */}
-        {modalOpen && <PluginStore open={modalOpen} setOpen={setModalOpen} />}
+        {modalOpen && <SkillStore open={modalOpen} setOpen={setModalOpen} />}
       </>
     );
   },

package/src/features/ProtocolUrlHandler/InstallPlugin/OfficialPluginInstallModal/index.tsx

@@ -5,7 +5,7 @@ import { App } from 'antd';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import DetailLoading from '@/features/PluginStore/McpList/Detail/Loading';
+import DetailLoading from '@/features/MCP/MCPDetail/Loading';
 import { useAgentStore } from '@/store/agent';
 import { useDiscoverStore } from '@/store/discover';
 import { useToolStore } from '@/store/tool';

package/src/features/{PluginStore/AddPluginButton.tsx → SkillStore/AddSkillButton.tsx}

@@ -7,7 +7,7 @@ import DevModal from '@/features/PluginDevModal';
 import { useAgentStore } from '@/store/agent';
 import { useToolStore } from '@/store/tool';
 
-const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
+const AddSkillButton = forwardRef<HTMLButtonElement>((props, ref) => {
   const { t } = useTranslation('setting');
   const [showModal, setModal] = useState(false);
 
@@ -39,10 +39,10 @@ const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
         }}
         ref={ref}
       >
-        {t('plugin.addMCPPlugin')}
+        {t('tab.addCustomSkill')}
       </Button>
     </div>
   );
 });
 
-export default AddPluginButton;
+export default AddSkillButton;

package/src/features/SkillStore/CommunityList/Item.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { ActionIcon, Block, DropdownMenu, Flexbox, Icon, Modal } from '@lobehub/ui';
+import { App, Button } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { MoreVerticalIcon, Plus, Trash2 } from 'lucide-react';
+import React, { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import MCPInstallProgress from '@/features/MCP/MCPInstallProgress';
+import McpDetail from '@/features/MCP/MCPDetail';
+import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useToolStore } from '@/store/tool';
+import { mcpStoreSelectors, pluginSelectors } from '@/store/tool/selectors';
+import { type DiscoverMcpItem } from '@/types/discover';
+
+import { useItemStyles } from '../style';
+
+const Item = memo<DiscoverMcpItem>(({ name, description, icon, identifier }) => {
+  const { styles } = useItemStyles();
+  const { t } = useTranslation('plugin');
+  const { modal } = App.useApp();
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  const [installed, installing, installMCPPlugin, cancelInstallMCPPlugin, unInstallPlugin, plugin] =
+    useToolStore((s) => [
+      pluginSelectors.isPluginInstalled(identifier)(s),
+      mcpStoreSelectors.isMCPInstalling(identifier)(s),
+      s.installMCPPlugin,
+      s.cancelInstallMCPPlugin,
+      s.uninstallPlugin,
+      mcpStoreSelectors.getPluginById(identifier)(s),
+    ]);
+
+  const installProgress = useToolStore(
+    mcpStoreSelectors.getMCPInstallProgress(identifier),
+    isEqual,
+  );
+
+  const [togglePlugin, isPluginEnabledInAgent] = useAgentStore((s) => [
+    s.togglePlugin,
+    agentSelectors.currentAgentPlugins(s).includes(identifier),
+  ]);
+  const { isAuthenticated, signIn } = useMarketAuth();
+
+  const isCloudMcp = !!((plugin as any)?.cloudEndPoint || (plugin as any)?.haveCloudEndpoint);
+
+  const handleInstall = async () => {
+    if (isCloudMcp && !isAuthenticated) {
+      try {
+        await signIn();
+      } catch {
+        return;
+      }
+    }
+
+    const isSuccess = await installMCPPlugin(identifier);
+
+    if (isSuccess) {
+      await togglePlugin(identifier);
+    }
+  };
+
+  const handleCancel = async () => {
+    await cancelInstallMCPPlugin(identifier);
+  };
+
+  const renderAction = () => {
+    if (installed) {
+      return (
+        <DropdownMenu
+          items={[
+            {
+              danger: true,
+              icon: <Icon icon={Trash2} />,
+              key: 'uninstall',
+              label: t('store.actions.uninstall'),
+              onClick: () => {
+                modal.confirm({
+                  centered: true,
+                  okButtonProps: { danger: true },
+                  onOk: async () => {
+                    if (isPluginEnabledInAgent) {
+                      await togglePlugin(identifier, false);
+                    }
+                    await unInstallPlugin(identifier);
+                  },
+                  title: t('store.actions.confirmUninstall'),
+                  type: 'error',
+                });
+              },
+            },
+          ]}
+          placement="bottomRight"
+        >
+          <ActionIcon icon={MoreVerticalIcon} />
+        </DropdownMenu>
+      );
+    }
+
+    if (installing) {
+      return (
+        <Button onClick={handleCancel} size="small" variant={'filled'}>
+          {t('store.actions.cancel')}
+        </Button>
+      );
+    }
+
+    return <ActionIcon icon={Plus} onClick={handleInstall} title={t('store.actions.install')} />;
+  };
+
+  return (
+    <>
+      <Flexbox className={styles.container} gap={0}>
+        <Block
+          align={'center'}
+          gap={12}
+          horizontal
+          onClick={() => setDetailOpen(true)}
+          paddingBlock={12}
+          paddingInline={12}
+          style={{ cursor: 'pointer' }}
+          variant={'filled'}
+        >
+          <PluginAvatar avatar={icon} size={40} />
+          <Flexbox flex={1} gap={4} style={{ minWidth: 0, overflow: 'hidden' }}>
+            <span className={styles.title}>{name}</span>
+            {description && <span className={styles.description}>{description}</span>}
+          </Flexbox>
+          <div onClick={(e) => e.stopPropagation()}>{renderAction()}</div>
+        </Block>
+
+        {!!installProgress && (
+          <Flexbox paddingInline={12}>
+            <MCPInstallProgress identifier={identifier} />
+          </Flexbox>
+        )}
+      </Flexbox>
+      <Modal
+        destroyOnHidden
+        footer={null}
+        onCancel={() => setDetailOpen(false)}
+        open={detailOpen}
+        title={t('dev.title.skillDetails')}
+        width={800}
+      >
+        <McpDetail identifier={identifier} noSettings />
+      </Modal>
+    </>
+  );
+});
+
+Item.displayName = 'CommunityListItem';
+
+export default Item;

package/src/features/SkillStore/CommunityList/index.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { Center, Flexbox, Icon, Text } from '@lobehub/ui';
+import { ServerCrash } from 'lucide-react';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
+
+import { useToolStore } from '@/store/tool';
+
+import Empty from '../Empty';
+import Loading from '../Loading';
+import VirtuosoLoading from '../VirtuosoLoading';
+import Item from './Item';
+
+export const CommunityList = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const [
+    keywords,
+    isMcpListInit,
+    allItems,
+    totalCount,
+    currentPage,
+    searchLoading,
+    useFetchMCPPluginList,
+    loadMoreMCPPlugins,
+    resetMCPPluginList,
+  ] = useToolStore((s) => [
+    s.mcpSearchKeywords,
+    s.isMcpListInit,
+    s.mcpPluginItems,
+    s.totalCount,
+    s.currentPage,
+    s.searchLoading,
+    s.useFetchMCPPluginList,
+    s.loadMoreMCPPlugins,
+    s.resetMCPPluginList,
+  ]);
+
+  useEffect(() => {
+    resetMCPPluginList(keywords);
+  }, [keywords, resetMCPPluginList]);
+
+  const { isLoading, error } = useFetchMCPPluginList({
+    page: currentPage,
+    pageSize: 20,
+    q: keywords,
+  });
+
+  const hasSearchKeywords = Boolean(keywords && keywords.trim());
+
+  const renderContent = () => {
+    // Show loading when searching, not initialized, or first page is loading with no items
+    if (searchLoading || !isMcpListInit || (isLoading && allItems.length === 0)) return <Loading />;
+
+    if (error) {
+      return (
+        <Center gap={12} padding={40}>
+          <Icon icon={ServerCrash} size={80} />
+          <Text type={'secondary'}>{t('skillStore.networkError')}</Text>
+        </Center>
+      );
+    }
+
+    if (allItems.length === 0) return <Empty search={hasSearchKeywords} />;
+
+    return (
+      <Virtuoso
+        components={{
+          Footer: isLoading ? VirtuosoLoading : undefined,
+        }}
+        data={allItems}
+        endReached={loadMoreMCPPlugins}
+        increaseViewportBy={typeof window !== 'undefined' ? window.innerHeight : 0}
+        itemContent={(index) => {
+          const item = allItems[index];
+          // Render two items per row
+          if (index % 2 !== 0) return null;
+
+          const nextItem = allItems[index + 1];
+          return (
+            <Flexbox gap={12} horizontal paddingInline={16} style={{ paddingBottom: 12 }}>
+                <Item {...item} />
+                {nextItem && <Item {...nextItem} />}
+              </Flexbox>
+          );
+        }}
+        overscan={24}
+        style={{ height: '60vh', width: '100%' }}
+        totalCount={Math.ceil((totalCount || 0) / 2)}
+      />
+    );
+  };
+
+  return renderContent();
+});
+
+CommunityList.displayName = 'CommunityList';
+
+export default CommunityList;

package/src/features/SkillStore/Content.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { Flexbox, Segmented } from '@lobehub/ui';
+import { type SegmentedOptions } from 'antd/es/segmented';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AddSkillButton from './AddSkillButton';
+
+import CommunityList from './CommunityList';
+import LobeHubList from './LobeHubList';
+import Search from './Search';
+
+export enum SkillStoreTab {
+  Community = 'community',
+  LobeHub = 'lobehub',
+}
+
+export const Content = memo(() => {
+  const { t } = useTranslation('setting');
+  const [activeTab, setActiveTab] = useState<SkillStoreTab>(SkillStoreTab.LobeHub);
+  const [lobehubKeywords, setLobehubKeywords] = useState('');
+
+  const options: SegmentedOptions = [
+    { label: t('skillStore.tabs.lobehub'), value: SkillStoreTab.LobeHub },
+    { label: t('skillStore.tabs.community'), value: SkillStoreTab.Community },
+  ];
+
+  const isLobeHub = activeTab === SkillStoreTab.LobeHub;
+
+  return (
+    <Flexbox gap={8} style={{ maxHeight: '75vh' }} width={'100%'}>
+      <Flexbox gap={8} paddingInline={16}>
+        <Flexbox align="center" gap={8} horizontal>
+          <Segmented
+            block
+            onChange={(v) => setActiveTab(v as SkillStoreTab)}
+            options={options}
+            style={{ flex: 1 }}
+            value={activeTab}
+            variant={'filled'}
+          />
+          <AddSkillButton />
+        </Flexbox>
+        <Search activeTab={activeTab} onLobeHubSearch={setLobehubKeywords} />
+      </Flexbox>
+      <Flexbox flex={1} style={{ display: isLobeHub ? 'flex' : 'none', overflow: 'auto' }}>
+        <LobeHubList keywords={lobehubKeywords} />
+      </Flexbox>
+      <Flexbox flex={1} style={{ display: !isLobeHub ? 'flex' : 'none', overflow: 'auto' }}>
+        <CommunityList />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+Content.displayName = 'SkillStoreContent';
+
+export default Content;

package/src/features/{PluginStore/PluginEmpty.tsx → SkillStore/Empty.tsx}

@@ -1,19 +1,19 @@
-import { Center, Empty, type EmptyProps } from '@lobehub/ui';
+import { Center, Empty as EmptyComponent, type EmptyProps } from '@lobehub/ui';
 import { Plug2 } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-interface PluginEmptyProps extends Omit<EmptyProps, 'icon'> {
+interface SkillEmptyProps extends Omit<EmptyProps, 'icon'> {
   search?: boolean;
 }
 
-const PluginEmpty = memo<PluginEmptyProps>(({ search, ...rest }) => {
-  const { t } = useTranslation('plugin');
+const Empty = memo<SkillEmptyProps>(({ search, ...rest }) => {
+  const { t } = useTranslation('setting');
 
   return (
     <Center height="100%" style={{ minHeight: '50vh' }} width="100%">
-      <Empty
-        description={search ? t('empty.search') : t('empty.description')}
+      <EmptyComponent
+        description={search ? t('skillStore.emptySearch') : t('skillStore.empty')}
         descriptionProps={{
           fontSize: 14,
         }}
@@ -27,6 +27,6 @@ const PluginEmpty = memo<PluginEmptyProps>(({ search, ...rest }) => {
   );
 });
 
-PluginEmpty.displayName = 'PluginEmpty';
+Empty.displayName = 'SkillEmpty';
 
-export default PluginEmpty;
+export default Empty;