@lobehub/lobehub 2.0.0-next.367 → 2.0.0-next.369

package/src/features/ProfileEditor/PluginTag.tsx

@@ -9,7 +9,7 @@ import {
 import { Avatar, Icon, Tag } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { AlertCircle, X } from 'lucide-react';
+import { AlertCircle, Loader2, X } from 'lucide-react';
 import React, { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -51,6 +51,21 @@ const LobehubSkillIcon = memo<Pick<LobehubSkillProviderType, 'icon' | 'label'>>(
 );
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
+  loadingIcon: css`
+    flex-shrink: 0;
+    color: ${cssVar.colorTextSecondary};
+    animation: spin 1s linear infinite;
+
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `,
   notInstalledTag: css`
     border-color: ${cssVar.colorWarningBorder};
     background: ${cssVar.colorWarningBg};
@@ -196,11 +211,18 @@ const PluginTag = memo<PluginTagProps>(
       type: 'plugin' as const,
     };
 
-    const displayTitle = isLoading ? 'Loading...' : meta.title;
+    // Use identifier as title when loading, otherwise use meta.title
+    const displayTitle = meta.title;
     const isDesktopOnly = showDesktopOnlyLabel && !meta.availableInWeb;
 
     // Render icon based on type
     const renderIcon = () => {
+      // Show loading spinner when loading
+      if (isLoading) {
+        return <Loader2 className={styles.loadingIcon} size={14} />;
+      }
+
+      // Show warning icon when not installed
       if (!meta.isInstalled) {
         return <AlertCircle className={styles.warningIcon} size={14} />;
       }
@@ -234,24 +256,28 @@ const PluginTag = memo<PluginTagProps>(
       if (isDesktopOnly) {
         text += ` (${t('tools.desktopOnly', { defaultValue: 'Desktop Only' })})`;
       }
-      if (!meta.isInstalled) {
+      // Don't show "Not Installed" when loading
+      if (!meta.isInstalled && !isLoading) {
         text += ` (${t('tools.notInstalled', { defaultValue: 'Not Installed' })})`;
       }
       return text;
     };
 
+    // Only show error state when not installed and not loading
+    const showErrorState = !meta.isInstalled && !isLoading;
+
     return (
       <Tag
         className={styles.tag}
         closable
         closeIcon={<X size={12} />}
-        color={meta.isInstalled ? undefined : 'error'}
+        color={showErrorState ? 'error' : undefined}
         icon={renderIcon()}
         onClose={onRemove}
         title={
-          meta.isInstalled
-            ? undefined
-            : t('tools.notInstalledWarning', { defaultValue: 'This tool is not installed' })
+          showErrorState
+            ? t('tools.notInstalledWarning', { defaultValue: 'This tool is not installed' })
+            : undefined
         }
         variant={isDarkMode ? 'filled' : 'outlined'}
       >

package/src/features/ProfileEditor/PopoverContent.tsx

@@ -0,0 +1,142 @@
+import { Flexbox, Icon, type ItemType, Segmented } from '@lobehub/ui';
+import { createStaticStyles, cssVar } from 'antd-style';
+import { ArrowRight, ExternalLink, Settings, Store } from 'lucide-react';
+import { type ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import Empty from './Empty';
+
+type TabType = 'all' | 'installed';
+
+const prefixCls = 'ant';
+
+const styles = createStaticStyles(({ css }) => ({
+  dropdown: css`
+    overflow: hidden;
+    width: 100%;
+
+    .${prefixCls}-dropdown-menu {
+      border-radius: 0 !important;
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+  `,
+  footerItem: css`
+    cursor: pointer;
+
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    padding-block: 8px;
+    padding-inline: 12px;
+    border-radius: 6px;
+
+    transition: background-color 0.2s;
+
+    &:hover {
+      background: ${cssVar.colorFillTertiary};
+    }
+  `,
+  footerItemContent: css`
+    flex: 1;
+    min-width: 0;
+  `,
+  footerItemIcon: css`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 24px;
+    height: 24px;
+  `,
+  header: css`
+    padding: ${cssVar.paddingXS};
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+    background: transparent;
+  `,
+  scroller: css`
+    overflow: hidden auto;
+  `,
+  trailingIcon: css`
+    opacity: 0.5;
+  `,
+}));
+
+interface PopoverContentProps {
+  activeTab: TabType;
+  installedTabItems: ItemType[];
+  menu: ReactNode;
+  onClose?: () => void;
+  onOpenStore: () => void;
+  onTabChange: (tab: TabType) => void;
+}
+
+const PopoverContent = memo<PopoverContentProps>(
+  ({ menu, activeTab, onTabChange, installedTabItems, onOpenStore, onClose }) => {
+    const { t } = useTranslation('setting');
+    const navigate = useNavigate();
+
+    return (
+      <Flexbox className={styles.dropdown} style={{ maxHeight: 500 }}>
+        {/* stopPropagation prevents dropdown's onClick from calling preventDefault on Segmented */}
+        <div className={styles.header} onClick={(e) => e.stopPropagation()}>
+          <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>
+        <div className={styles.scroller} style={{ flex: 1 }}>
+          {activeTab === 'installed' && installedTabItems.length === 0 ? <Empty /> : menu}
+        </div>
+        <div
+          style={{
+            borderBlockStart: `1px solid ${cssVar.colorBorderSecondary}`,
+            padding: 4,
+          }}
+        >
+          <div className={styles.footerItem} onClick={onOpenStore} role="button" tabIndex={0}>
+            <div className={styles.footerItemIcon}>
+              <Icon icon={Store} size={20} />
+            </div>
+            <div className={styles.footerItemContent}>{t('skillStore.title')}</div>
+            <Icon className={styles.trailingIcon} icon={ArrowRight} size={16} />
+          </div>
+          <div
+            className={styles.footerItem}
+            onClick={() => {
+              onClose?.();
+              navigate('/settings/skill');
+            }}
+            role="button"
+            tabIndex={0}
+          >
+            <div className={styles.footerItemIcon}>
+              <Icon icon={Settings} size={20} />
+            </div>
+            <div className={styles.footerItemContent}>{t('tools.plugins.management')}</div>
+            <Icon className={styles.trailingIcon} icon={ExternalLink} size={16} />
+          </div>
+        </div>
+      </Flexbox>
+    );
+  },
+);
+
+PopoverContent.displayName = 'PopoverContent';
+
+export default PopoverContent;

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

@@ -4,12 +4,13 @@ import { ActionIcon, Block, DropdownMenu, Flexbox, Icon, Modal } from '@lobehub/
 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 React, { Suspense, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PluginAvatar from '@/components/Plugins/PluginAvatar';
 import McpDetail from '@/features/MCP/MCPDetail';
 import MCPInstallProgress from '@/features/MCP/MCPInstallProgress';
+import McpDetailLoading from '@/features/MCP/MCPDetail/Loading';
 import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
@@ -148,7 +149,9 @@ const Item = memo<DiscoverMcpItem>(({ name, description, icon, identifier }) =>
         title={t('dev.title.skillDetails')}
         width={800}
       >
-        <McpDetail identifier={identifier} noSettings />
+        <Suspense fallback={<McpDetailLoading />}>
+          <McpDetail identifier={identifier} noSettings />
+        </Suspense>
       </Modal>
     </>
   );

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

@@ -0,0 +1,149 @@
+'use client';
+
+import { ActionIcon, Block, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
+import { App } from 'antd';
+import { createStaticStyles, cssVar } from 'antd-style';
+import { MoreVerticalIcon, PackageSearch, Trash2 } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import PluginDetailModal from '@/features/PluginDetailModal';
+import DevModal from '@/features/PluginDevModal';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+import { itemStyles } from '../style';
+
+const styles = createStaticStyles(({ css }) => ({
+  title: css`
+    cursor: pointer;
+
+    overflow: hidden;
+
+    font-size: 14px;
+    font-weight: 500;
+    color: ${cssVar.colorText};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:hover {
+      color: ${cssVar.colorPrimary};
+    }
+  `,
+}));
+
+interface ItemProps {
+  avatar?: string;
+  description?: string;
+  identifier: string;
+  title?: string;
+}
+
+const Item = memo<ItemProps>(({ identifier, title, description, avatar }) => {
+  const { t } = useTranslation('plugin');
+  const { modal } = App.useApp();
+  const [configOpen, setConfigOpen] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  const [customPlugin, uninstallPlugin, updateCustomPlugin, pluginManifest] = useToolStore((s) => [
+    pluginSelectors.getCustomPluginById(identifier)(s),
+    s.uninstallPlugin,
+    s.updateCustomPlugin,
+    pluginSelectors.getToolManifestById(identifier)(s),
+  ]);
+
+  const [togglePlugin, isPluginEnabledInAgent] = useAgentStore((s) => [
+    s.togglePlugin,
+    agentSelectors.currentAgentPlugins(s).includes(identifier),
+  ]);
+
+  const handleDelete = () => {
+    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',
+    });
+  };
+
+  return (
+    <>
+      <Flexbox className={itemStyles.container} gap={0}>
+        <Block
+          align={'center'}
+          gap={12}
+          horizontal
+          paddingBlock={12}
+          paddingInline={12}
+          variant={'filled'}
+        >
+          <PluginAvatar avatar={avatar} size={40} />
+          <Flexbox flex={1} gap={4} style={{ minWidth: 0, overflow: 'hidden' }}>
+            <span className={styles.title} onClick={() => setDetailOpen(true)}>
+              {title || identifier}
+            </span>
+            {description && <span className={itemStyles.description}>{description}</span>}
+          </Flexbox>
+          <Flexbox horizontal>
+            <ActionIcon
+              icon={PackageSearch}
+              onClick={() => setConfigOpen(true)}
+              title={t('store.actions.manifest')}
+            />
+            <DropdownMenu
+              items={[
+                {
+                  danger: true,
+                  icon: <Icon icon={Trash2} />,
+                  key: 'uninstall',
+                  label: t('store.actions.uninstall'),
+                  onClick: handleDelete,
+                },
+              ]}
+              placement="bottomRight"
+            >
+              <ActionIcon icon={MoreVerticalIcon} />
+            </DropdownMenu>
+          </Flexbox>
+        </Block>
+      </Flexbox>
+      {customPlugin && (
+        <DevModal
+          mode="edit"
+          onDelete={async () => {
+            if (isPluginEnabledInAgent) {
+              await togglePlugin(identifier, false);
+            }
+            await uninstallPlugin(identifier);
+          }}
+          onOpenChange={setConfigOpen}
+          onSave={async (value) => {
+            await updateCustomPlugin(identifier, value);
+          }}
+          open={configOpen}
+          value={customPlugin}
+        />
+      )}
+      <PluginDetailModal
+        id={identifier}
+        onClose={() => setDetailOpen(false)}
+        open={detailOpen}
+        schema={pluginManifest?.settings}
+        tab="info"
+      />
+    </>
+  );
+});
+
+Item.displayName = 'CustomListItem';
+
+export default Item;

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

@@ -0,0 +1,71 @@
+'use client';
+
+import { createStaticStyles, responsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo, useMemo } from 'react';
+
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+import Empty from '../Empty';
+import Item from './Item';
+
+const styles = createStaticStyles(({ css }) => ({
+  container: css`
+    min-height: 50vh;
+  `,
+  grid: css`
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+
+    padding-block-end: 16px;
+    padding-inline: 16px;
+
+    ${responsive.sm} {
+      grid-template-columns: 1fr;
+    }
+  `,
+}));
+
+export const CustomList = memo(() => {
+  const customPlugins = useToolStore(pluginSelectors.installedCustomPluginMetaList, isEqual);
+  const searchKeywords = useToolStore((s) => s.customPluginSearchKeywords || '');
+
+  const filteredItems = useMemo(() => {
+    const lowerKeywords = searchKeywords.toLowerCase().trim();
+    if (!lowerKeywords) return customPlugins;
+
+    return customPlugins.filter((plugin) => {
+      const title = plugin.title?.toLowerCase() || '';
+      const identifier = plugin.identifier?.toLowerCase() || '';
+      return title.includes(lowerKeywords) || identifier.includes(lowerKeywords);
+    });
+  }, [customPlugins, searchKeywords]);
+
+  const hasSearchKeywords = Boolean(searchKeywords && searchKeywords.trim());
+
+  if (filteredItems.length === 0) {
+    return <Empty search={hasSearchKeywords} />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.grid}>
+        {filteredItems.map((plugin) => (
+          <Item
+            avatar={plugin.avatar}
+            description={plugin.description}
+            identifier={plugin.identifier}
+            key={plugin.identifier}
+            title={plugin.title}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+CustomList.displayName = 'CustomList';
+
+export default CustomList;

package/src/features/SkillStore/Empty.tsx

@@ -3,6 +3,8 @@ import { Plug2 } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import AddSkillButton from './AddSkillButton';
+
 interface SkillEmptyProps extends Omit<EmptyProps, 'icon'> {
   search?: boolean;
 }
@@ -13,6 +15,7 @@ const Empty = memo<SkillEmptyProps>(({ search, ...rest }) => {
   return (
     <Center height="100%" style={{ minHeight: '50vh' }} width="100%">
       <EmptyComponent
+        action={!search && <AddSkillButton />}
         description={search ? t('skillStore.emptySearch') : t('skillStore.empty')}
         descriptionProps={{
           fontSize: 14,

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

@@ -17,6 +17,8 @@ export const Search = memo<SearchProps>(({ activeTab, onLobeHubSearch }) => {
   const { t } = useTranslation('setting');
   const mcpKeywords = useToolStore((s) => s.mcpSearchKeywords);
 
+  const isCustomTab = activeTab === SkillStoreTab.Custom;
+
   const keywords = activeTab === SkillStoreTab.Community ? mcpKeywords : '';
 
   return (
@@ -28,11 +30,14 @@ export const Search = memo<SearchProps>(({ activeTab, onLobeHubSearch }) => {
           onSearch={(keywords: string) => {
             if (activeTab === SkillStoreTab.Community) {
               useToolStore.setState({ mcpSearchKeywords: keywords, searchLoading: true });
+            } else if (isCustomTab) {
+              useToolStore.setState({ customPluginSearchKeywords: keywords });
             } else {
               onLobeHubSearch(keywords);
             }
           }}
           placeholder={t('skillStore.search')}
+          variant="filled"
         />
       </Flexbox>
     </Flexbox>

package/src/features/SkillStore/SkillStoreContent.tsx

@@ -7,11 +7,13 @@ import { useTranslation } from 'react-i18next';
 
 import AddSkillButton from './AddSkillButton';
 import CommunityList from './CommunityList';
+import CustomList from './CustomList';
 import LobeHubList from './LobeHubList';
 import Search from './Search';
 
 export enum SkillStoreTab {
   Community = 'community',
+  Custom = 'custom',
   LobeHub = 'lobehub',
 }
 
@@ -23,14 +25,17 @@ export const SkillStoreContent = () => {
   const options: SegmentedOptions = [
     { label: t('skillStore.tabs.lobehub'), value: SkillStoreTab.LobeHub },
     { label: t('skillStore.tabs.community'), value: SkillStoreTab.Community },
+    { label: t('skillStore.tabs.custom'), value: SkillStoreTab.Custom },
   ];
 
   const isLobeHub = activeTab === SkillStoreTab.LobeHub;
+  const isCommunity = activeTab === SkillStoreTab.Community;
+  const isCustom = activeTab === SkillStoreTab.Custom;
 
   return (
     <Flexbox gap={8} style={{ maxHeight: '75vh' }} width={'100%'}>
       <Flexbox gap={8} paddingInline={16}>
-        <Flexbox align="center" gap={8} horizontal>
+        <Flexbox align={'center'} gap={8} horizontal>
           <Segmented
             block
             onChange={(v) => setActiveTab(v as SkillStoreTab)}
@@ -46,9 +51,12 @@ export const SkillStoreContent = () => {
       <Flexbox flex={1} style={{ display: isLobeHub ? 'flex' : 'none', overflow: 'auto' }}>
         <LobeHubList keywords={lobehubKeywords} />
       </Flexbox>
-      <Flexbox flex={1} style={{ display: !isLobeHub ? 'flex' : 'none', overflow: 'auto' }}>
+      <Flexbox flex={1} style={{ display: isCommunity ? 'flex' : 'none', overflow: 'auto' }}>
         <CommunityList />
       </Flexbox>
+      <Flexbox flex={1} style={{ display: isCustom ? 'flex' : 'none', overflow: 'auto' }}>
+        <CustomList />
+      </Flexbox>
     </Flexbox>
   );
 };

package/src/features/SkillStore/index.tsx

@@ -3,12 +3,19 @@
 import { createModal } from '@lobehub/ui';
 import { t } from 'i18next';
 
+import { isDesktop } from '@/const/version';
+import { MarketAuthProvider } from '@/layout/AuthProvider/MarketAuth';
+
 import { SkillStoreContent } from './SkillStoreContent';
 
 export const createSkillStoreModal = () =>
   createModal({
     allowFullscreen: true,
-    children: <SkillStoreContent />,
+    children: (
+      <MarketAuthProvider isDesktop={isDesktop}>
+        <SkillStoreContent />
+      </MarketAuthProvider>
+    ),
     destroyOnHidden: false,
     footer: null,
     styles: {

package/src/libs/trpc/lambda/middleware/marketUserInfo.ts

@@ -6,6 +6,7 @@ import type { TrustedClientUserInfo } from '@/libs/trusted-client';
 import { trpc } from '../init';
 
 interface ContextWithServerDB {
+  marketAccessToken?: string;
   serverDB?: LobeChatDatabase;
   userId?: string | null;
 }
@@ -39,8 +40,19 @@ export const marketUserInfo = trpc.middleware(async (opts) => {
       userId: ctx.userId,
     };
 
+    // Fetch market access token from user_settings.market
+    const userModel = new UserModel(ctx.serverDB, ctx.userId);
+    const userSettings = await userModel.getUserSettings();
+    const marketTokenFromDB = (userSettings?.market as any)?.accessToken;
+
+    // Prioritize database token over cookie token
+    const marketAccessToken = marketTokenFromDB || ctx.marketAccessToken;
+
     return opts.next({
-      ctx: { marketUserInfo },
+      ctx: {
+        marketAccessToken,
+        marketUserInfo,
+      },
     });
   } catch {
     // If fetching user info fails, continue without it

package/src/locales/default/setting.ts

@@ -563,6 +563,7 @@ export default {
   'skillStore.networkError': 'Network error, please try again',
   'skillStore.search': 'Search skills by name or keyword, press Enter to search…',
   'skillStore.tabs.community': 'Community',
+  'skillStore.tabs.custom': 'Custom',
   'skillStore.tabs.lobehub': 'LobeHub',
   'skillStore.title': 'Skill Store',
   'startConversation': 'Start Conversation',

package/src/services/marketApi.ts

@@ -45,7 +45,7 @@ export class MarketApiService {
   }
 
   // Get agent detail by identifier
-  async getAgentDetail(identifier: string): Promise<AgentItemDetail> {
+  async getAgentDetail(identifier: string): Promise<AgentItemDetail & { forkedFromAgentId?: string }> {
     return lambdaClient.market.agent.getAgentDetail.query({
       identifier,
     }) as Promise<AgentItemDetail>;

package/src/store/agentGroup/selectors/byId.ts

@@ -22,6 +22,7 @@ const groupMeta = (groupId: string) => (s: ChatGroupStore) => {
     avatar: group?.avatar || undefined,
     backgroundColor: group?.backgroundColor || undefined,
     description: group?.description || '',
+    marketIdentifier: group?.marketIdentifier || undefined,
     title: group?.title || '',
   });
 };

package/src/store/tool/slices/customPlugin/initialState.ts

@@ -1,6 +1,7 @@
 import { type LobeToolCustomPlugin } from '@/types/tool/plugin';
 
 export interface CustomPluginState {
+  customPluginSearchKeywords?: string;
   newCustomPlugin: Partial<LobeToolCustomPlugin>;
 }
 export const defaultCustomPlugin: Partial<LobeToolCustomPlugin> = {
@@ -13,5 +14,6 @@ export const defaultCustomPlugin: Partial<LobeToolCustomPlugin> = {
 };
 
 export const initialCustomPluginState: CustomPluginState = {
+  customPluginSearchKeywords: '',
   newCustomPlugin: defaultCustomPlugin,
 };

package/src/store/tool/slices/mcpStore/action.ts

@@ -731,6 +731,7 @@ export const createMCPPluginStoreSlice: StateCreator<
         draft.mcpPluginItems = [];
         draft.currentPage = 1;
         draft.mcpSearchKeywords = keywords;
+        draft.isMcpListInit = false;
       }),
       false,
       n('resetMCPPluginList'),