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

package/src/features/PluginStore/InstalledList/List/Item/index.tsx

@@ -1,61 +0,0 @@
-import { Block, Flexbox, Text } from '@lobehub/ui';
-import { memo } from 'react';
-
-import PluginAvatar from '@/components/Plugins/PluginAvatar';
-import PluginTag from '@/components/Plugins/PluginTag';
-import { type DiscoverPluginItem } from '@/types/discover';
-import { type LobeToolType } from '@/types/tool/tool';
-
-import Actions from './Action';
-
-interface PluginItemProps extends DiscoverPluginItem {
-  active?: boolean;
-  onClick?: () => void;
-  runtimeType?: 'mcp' | 'default' | 'markdown' | 'standalone' | undefined;
-  type: LobeToolType;
-}
-
-const Item = memo<PluginItemProps>(
-  ({ title, description, avatar, onClick, active, identifier, author, runtimeType, type }) => {
-    const isMCP = runtimeType === 'mcp';
-
-    return (
-      <Block
-        align={'center'}
-        clickable
-        gap={8}
-        horizontal
-        justify={'space-between'}
-        onClick={onClick}
-        paddingBlock={8}
-        paddingInline={12}
-        style={{ position: 'relative' }}
-        variant={active ? 'filled' : 'borderless'}
-      >
-        <Flexbox
-          align={'center'}
-          flex={1}
-          gap={8}
-          horizontal
-          style={{ overflow: 'hidden', position: 'relative' }}
-        >
-          <PluginAvatar avatar={avatar} />
-          <Flexbox flex={1} gap={4} style={{ overflow: 'hidden', position: 'relative' }}>
-            <Flexbox align={'center'} gap={4} horizontal>
-              <Text ellipsis strong>
-                {title}
-              </Text>
-              <PluginTag author={author} isMCP={isMCP} type={type!} />
-            </Flexbox>
-            <Text ellipsis fontSize={12} type={'secondary'}>
-              {description}
-            </Text>
-          </Flexbox>
-        </Flexbox>
-        <Actions identifier={identifier} isMCP={isMCP} type={type!} />
-      </Block>
-    );
-  },
-);
-
-export default Item;

package/src/features/PluginStore/InstalledList/List/index.tsx

@@ -1,72 +0,0 @@
-import { Flexbox } from '@lobehub/ui';
-import isEqual from 'fast-deep-equal';
-import { memo, useMemo } from 'react';
-import { Virtuoso } from 'react-virtuoso';
-
-import { useToolStore } from '@/store/tool';
-import { pluginSelectors } from '@/store/tool/selectors';
-import { type LobeToolType } from '@/types/tool/tool';
-
-import PluginEmpty from '../../PluginEmpty';
-import PluginItem from './Item';
-
-interface ListProps {
-  identifier?: string;
-  keywords?: string;
-  setIdentifier?: (props: {
-    identifier?: string;
-    runtimeType: 'mcp' | 'default';
-    type?: LobeToolType;
-  }) => void;
-}
-
-export const List = memo<ListProps>(({ keywords, identifier, setIdentifier }) => {
-  const installedPlugins = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
-
-  const filteredPluginList = useMemo(
-    () =>
-      installedPlugins.filter((item) =>
-        [item?.title, item?.description, item.author, ...(item?.tags || [])]
-          .filter(Boolean)
-          .join('')
-          .toLowerCase()
-          .includes((keywords || '')?.toLowerCase()),
-      ),
-    [installedPlugins, keywords],
-  );
-
-  const isEmpty = installedPlugins.length === 0;
-  const hasSearchKeywords = Boolean(keywords && keywords.trim());
-
-  if (isEmpty) return <PluginEmpty search={hasSearchKeywords} />;
-
-  return (
-    <Virtuoso
-      data={filteredPluginList}
-      increaseViewportBy={typeof window !== 'undefined' ? window.innerHeight : 0}
-      itemContent={(_, item) => {
-        return (
-          <Flexbox
-            key={item.identifier}
-            onClick={() => {
-              setIdentifier?.({
-                identifier: item.identifier,
-                runtimeType: item.runtimeType as any,
-                type: item.type,
-              });
-            }}
-            paddingBlock={2}
-            paddingInline={4}
-          >
-            <PluginItem active={identifier === item.identifier} {...(item as any)} />
-          </Flexbox>
-        );
-      }}
-      overscan={24}
-      style={{ height: '100%', width: '100%' }}
-      totalCount={filteredPluginList.length}
-    />
-  );
-});
-
-export default List;

package/src/features/PluginStore/InstalledList/index.tsx

@@ -1,90 +0,0 @@
-import { Center, DraggablePanel, Empty, Flexbox } from '@lobehub/ui';
-import { cssVar, useTheme } from 'antd-style';
-import { Plug2 } from 'lucide-react';
-import { memo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useToolStore } from '@/store/tool';
-import { pluginSelectors } from '@/store/tool/selectors';
-import { type LobeToolType } from '@/types/tool/tool';
-
-import PluginEmpty from '../PluginEmpty';
-import Detail from './Detail';
-import List from './List';
-
-const PluginList = memo<{ keywords?: string }>(({ keywords }) => {
-  const { t } = useTranslation('plugin');
-  const ref = useRef<HTMLDivElement>(null);
-
-  const [type, setType] = useState<LobeToolType>();
-  const [runtimeType, setRuntimeType] = useState<'mcp' | 'default'>();
-  const theme = useTheme(); // Keep for colorBgContainerSecondary (not in cssVar)
-
-  const [identifier] = useToolStore((s) => [s.activePluginIdentifier]);
-  const isEmpty = useToolStore((s) => pluginSelectors.installedPluginMetaList(s).length === 0);
-
-  if (isEmpty)
-    return (
-      <Center height={'75vh'}>
-        <PluginEmpty />
-      </Center>
-    );
-
-  return (
-    <Flexbox
-      height={'75vh'}
-      horizontal
-      style={{
-        borderTop: `1px solid ${cssVar.colorBorderSecondary}`,
-        overflow: 'hidden',
-        position: 'relative',
-      }}
-      width={'100%'}
-    >
-      <DraggablePanel maxWidth={1024} minWidth={420} placement={'left'}>
-        <List
-          identifier={identifier}
-          keywords={keywords}
-          setIdentifier={({ identifier, type, runtimeType }) => {
-            useToolStore.setState({ activePluginIdentifier: identifier });
-            setType(type);
-            setRuntimeType(runtimeType);
-            ref?.current?.scrollTo({ top: 0 });
-          }}
-        />
-      </DraggablePanel>
-      {identifier ? (
-        <Flexbox
-          height={'100%'}
-          padding={16}
-          ref={ref}
-          style={{
-            background: theme.colorBgContainerSecondary,
-            overflowX: 'hidden',
-            overflowY: 'auto',
-          }}
-          width={'100%'}
-        >
-          <Detail identifier={identifier} runtimeType={runtimeType} type={type} />
-        </Flexbox>
-      ) : (
-        <Center
-          height={'100%'}
-          style={{
-            background: theme.colorBgContainerSecondary,
-          }}
-          width={'100%'}
-        >
-          <Empty
-            description={t('store.emptySelectHint')}
-            descriptionProps={{ fontSize: 14 }}
-            icon={Plug2}
-            style={{ maxWidth: 400 }}
-          />
-        </Center>
-      )}
-    </Flexbox>
-  );
-});
-
-export default PluginList;

package/src/features/PluginStore/McpList/List/Action.tsx

@@ -1,119 +0,0 @@
-import { ActionIcon, Button, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
-import { App } from 'antd';
-import { MoreVerticalIcon, Trash2 } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-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';
-
-interface ActionsProps {
-  identifier: string;
-}
-
-const Actions = memo<ActionsProps>(({ identifier }) => {
-  const [installed, installing, unInstallPlugin, installMCPPlugin, cancelInstallMCPPlugin, plugin] =
-    useToolStore((s) => [
-      pluginSelectors.isPluginInstalled(identifier)(s),
-      mcpStoreSelectors.isMCPInstalling(identifier)(s),
-      s.uninstallPlugin,
-      s.installMCPPlugin,
-      s.cancelInstallMCPPlugin,
-      mcpStoreSelectors.getPluginById(identifier)(s),
-    ]);
-
-  const { t } = useTranslation('plugin');
-  const [togglePlugin, isPluginEnabledInAgent] = useAgentStore((s) => [
-    s.togglePlugin,
-    agentSelectors.currentAgentPlugins(s).includes(identifier),
-  ]);
-  const { modal } = App.useApp();
-  const { isAuthenticated, signIn } = useMarketAuth();
-
-  // Check if this is a cloud MCP plugin
-  const isCloudMcp = !!((plugin as any)?.cloudEndPoint || (plugin as any)?.haveCloudEndpoint);
-
-  return (
-    <Flexbox align={'center'} horizontal>
-      {installed ? (
-        <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 plugin is enabled in current agent, disable it first
-                    if (isPluginEnabledInAgent) {
-                      await togglePlugin(identifier, false);
-                    }
-                    await unInstallPlugin(identifier);
-                  },
-                  title: t('store.actions.confirmUninstall'),
-                  type: 'error',
-                });
-              },
-            },
-          ]}
-          placement="bottomRight"
-        >
-          <ActionIcon
-            icon={MoreVerticalIcon}
-            loading={installing}
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-          />
-        </DropdownMenu>
-      ) : installing ? (
-        <Button
-          onClick={async (e) => {
-            e.stopPropagation();
-            await cancelInstallMCPPlugin(identifier);
-          }}
-          variant={'filled'}
-        >
-          {t('store.actions.cancel')}
-        </Button>
-      ) : (
-        <Button
-          onClick={async (e) => {
-            e.stopPropagation();
-
-            // If this is a cloud MCP and user is not authenticated, request authorization first
-            if (isCloudMcp && !isAuthenticated) {
-              console.log(
-                '[MCPListAction] Cloud MCP detected, user not authenticated, starting authorization',
-              );
-
-              try {
-                await signIn();
-              } catch {
-                return; // Don't proceed with installation if auth fails
-              }
-            }
-
-            const isSuccess = await installMCPPlugin(identifier);
-
-            if (isSuccess) {
-              await togglePlugin(identifier);
-            }
-          }}
-          variant={'filled'}
-        >
-          {t('store.actions.install')}
-        </Button>
-      )}
-    </Flexbox>
-  );
-});
-
-export default Actions;

package/src/features/PluginStore/McpList/List/Item.tsx

@@ -1,83 +0,0 @@
-import { Block, Flexbox, Text } from '@lobehub/ui';
-import isEqual from 'fast-deep-equal';
-import { memo, useEffect, useRef } from 'react';
-
-import PluginAvatar from '@/components/Plugins/PluginAvatar';
-import MCPInstallProgress from '@/features/MCP/MCPInstallProgress';
-import { useToolStore } from '@/store/tool';
-import { mcpStoreSelectors } from '@/store/tool/selectors';
-import { type DiscoverMcpItem } from '@/types/discover';
-import { MCPInstallStep } from '@/types/plugins';
-import { type LobeToolType } from '@/types/tool/tool';
-
-import Actions from './Action';
-
-interface PluginItemProps extends DiscoverMcpItem {
-  active?: boolean;
-  setIdentifier: (identifier?: string) => void;
-  type?: LobeToolType;
-}
-
-const Item = memo<PluginItemProps>(
-  ({ name, description, icon, setIdentifier, active, identifier }) => {
-    const installProgress = useToolStore(
-      mcpStoreSelectors.getMCPInstallProgress(identifier),
-      isEqual,
-    );
-
-    const needsConfig = installProgress?.needsConfig;
-    const needsDependencies = installProgress?.step === MCPInstallStep.DEPENDENCIES_REQUIRED;
-
-    const containerRef = useRef<HTMLButtonElement | null>(null);
-
-    useEffect(() => {
-      if ((!needsConfig && !needsDependencies) || !containerRef.current) return;
-
-      containerRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }, [needsConfig, needsDependencies]);
-
-    return (
-      <Flexbox gap={0} ref={containerRef}>
-        <Block
-          align={'center'}
-          clickable
-          gap={16}
-          horizontal
-          justify={'space-between'}
-          onClick={() => setIdentifier(identifier)}
-          paddingBlock={8}
-          paddingInline={12}
-          style={{ position: 'relative' }}
-          variant={active ? 'filled' : 'borderless'}
-        >
-          <Flexbox
-            align={'center'}
-            flex={1}
-            gap={8}
-            horizontal
-            style={{ overflow: 'hidden', position: 'relative' }}
-          >
-            <PluginAvatar avatar={icon} />
-            <Flexbox flex={1} gap={4} style={{ overflow: 'hidden', position: 'relative' }}>
-              <Text ellipsis strong>
-                {name}
-              </Text>
-              <Text ellipsis fontSize={12} type={'secondary'}>
-                {description}
-              </Text>
-            </Flexbox>
-          </Flexbox>
-          <Actions identifier={identifier} />
-        </Block>
-
-        {!!installProgress && (
-          <Flexbox paddingInline={12}>
-            <MCPInstallProgress identifier={identifier} />
-          </Flexbox>
-        )}
-      </Flexbox>
-    );
-  },
-);
-
-export default Item;

package/src/features/PluginStore/McpList/List/index.tsx

@@ -1,93 +0,0 @@
-import { Center, Flexbox, Icon } 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 SearchLoading from '../../Loading';
-import PluginEmpty from '../../PluginEmpty';
-import VirtuosoLoading from '../../VirtuosoLoading';
-import Item from './Item';
-
-interface ListProps {
-  setIdentifier: (identifier?: string) => void;
-}
-
-export const List = memo<ListProps>(({ setIdentifier }) => {
-  const { t } = useTranslation('plugin');
-
-  const [
-    isMcpListInit,
-    identifier,
-    allItems,
-    totalCount,
-    currentPage,
-    keywords,
-    searchLoading,
-    useFetchMCPPluginList,
-    loadMoreMCPPlugins,
-    resetMCPPluginList,
-  ] = useToolStore((s) => [
-    s.isMcpListInit,
-    s.activeMCPIdentifier,
-    s.mcpPluginItems,
-    s.totalCount,
-    s.currentPage,
-    s.mcpSearchKeywords,
-    s.searchLoading,
-    s.useFetchMCPPluginList,
-    s.loadMoreMCPPlugins,
-    s.resetMCPPluginList,
-  ]);
-
-  // 当 keywords 变化时重置列表
-  useEffect(() => {
-    resetMCPPluginList(keywords);
-  }, [keywords, resetMCPPluginList]);
-
-  const { isLoading, error } = useFetchMCPPluginList({
-    page: currentPage,
-    pageSize: 20,
-    q: keywords,
-  });
-
-  if (searchLoading || !isMcpListInit) return <SearchLoading />;
-
-  if (error)
-    return (
-      <Center gap={12} padding={40}>
-        <Icon icon={ServerCrash} size={80} />
-        {t('store.networkError')}
-      </Center>
-    );
-
-  const isEmpty = allItems.length === 0;
-  const hasSearchKeywords = Boolean(keywords && keywords.trim());
-
-  if (isEmpty) return <PluginEmpty search={hasSearchKeywords} />;
-
-  return (
-    <Virtuoso
-      components={{
-        Footer: isLoading ? VirtuosoLoading : undefined,
-      }}
-      data={allItems}
-      endReached={loadMoreMCPPlugins}
-      increaseViewportBy={typeof window !== 'undefined' ? window.innerHeight : 0}
-      itemContent={(_, item) => {
-        return (
-          <Flexbox key={item.identifier} paddingBlock={2} paddingInline={4}>
-            <Item active={identifier === item.identifier} {...item} setIdentifier={setIdentifier} />
-          </Flexbox>
-        );
-      }}
-      overscan={24}
-      style={{ height: '100%', width: '100%' }}
-      totalCount={totalCount || 0}
-    />
-  );
-});
-
-export default List;

package/src/features/PluginStore/McpList/index.tsx

@@ -1,58 +0,0 @@
-import { DraggablePanel, Flexbox } from '@lobehub/ui';
-import { cssVar, useTheme } from 'antd-style';
-import dynamic from '@/libs/next/dynamic';
-import { memo, useRef } from 'react';
-
-import { useServerConfigStore } from '@/store/serverConfig';
-import { useToolStore } from '@/store/tool';
-
-import DetailLoading from './Detail/Loading';
-import List from './List';
-
-const Detail = dynamic(() => import('./Detail'), { loading: DetailLoading, ssr: false });
-
-export const MCPPluginList = memo(() => {
-  const ref = useRef<HTMLDivElement>(null);
-  const theme = useTheme(); // Keep for colorBgContainerSecondary (not in cssVar)
-
-  const mobile = useServerConfigStore((s) => s.isMobile);
-
-  return (
-    <Flexbox
-      height={'75vh'}
-      horizontal
-      style={{
-        borderTop: `1px solid ${cssVar.colorBorderSecondary}`,
-        overflow: 'hidden',
-        position: 'relative',
-      }}
-      width={'100%'}
-    >
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/* @ts-ignore */}
-      <DraggablePanel maxWidth={1024} minWidth={mobile ? '100vw' : 420} placement={'left'}>
-        <List
-          setIdentifier={(identifier) => {
-            useToolStore.setState({ activeMCPIdentifier: identifier });
-            ref?.current?.scrollTo({ top: 0 });
-          }}
-        />
-      </DraggablePanel>
-      <Flexbox
-        height={'100%'}
-        padding={16}
-        ref={ref}
-        style={{
-          background: theme.colorBgContainerSecondary,
-          overflowX: 'hidden',
-          overflowY: 'auto',
-        }}
-        width={'100%'}
-      >
-        <Detail />
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default MCPPluginList;

package/src/features/PluginStore/PluginList/Detail/DetailProvider.tsx

@@ -1,19 +0,0 @@
-'use client';
-
-import { type ReactNode, createContext, memo, use } from 'react';
-
-import { type DiscoverPluginDetail } from '@/types/discover';
-
-export type DetailContextConfig = Partial<DiscoverPluginDetail>;
-
-export const DetailContext = createContext<DetailContextConfig>({});
-
-export const DetailProvider = memo<{ children: ReactNode; config?: DetailContextConfig }>(
-  ({ children, config = {} }) => {
-    return <DetailContext value={config}>{children}</DetailContext>;
-  },
-);
-
-export const useDetailContext = () => {
-  return use(DetailContext);
-};

package/src/features/PluginStore/PluginList/Detail/EmptyState.tsx

@@ -1,56 +0,0 @@
-import { Center, Flexbox, Icon, Text } from '@lobehub/ui';
-import { createStaticStyles } from 'antd-style';
-import { Puzzle } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const styles = createStaticStyles(({ css, cssVar }) => ({
-  container: css`
-    padding-block: ${cssVar.paddingXL};
-    padding-inline: ${cssVar.paddingLG};
-  `,
-  description: css`
-    max-width: 240px;
-    line-height: 1.5;
-    color: ${cssVar.colorTextSecondary};
-    text-align: center;
-  `,
-  iconWrapper: css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 64px;
-    height: 64px;
-    margin-block-end: ${cssVar.marginMD};
-    border-radius: 50%;
-
-    background-color: ${cssVar.colorPrimaryBg};
-  `,
-  title: css`
-    margin-block-end: ${cssVar.marginSM};
-
-    font-size: ${cssVar.fontSizeLG};
-    font-weight: 500;
-    color: ${cssVar.colorText};
-    text-align: center;
-  `,
-}));
-
-const EmptyState = memo(() => {
-  const { t } = useTranslation('plugin');
-
-  return (
-    <Center className={styles.container}>
-      <Flexbox align="center">
-        <div className={styles.iconWrapper}>
-          <Icon icon={Puzzle} size={32} />
-        </div>
-        <Text className={styles.title}>{t('detailModal.emptyState.title')}</Text>
-        <Text className={styles.description}>{t('detailModal.emptyState.description')}</Text>
-      </Flexbox>
-    </Center>
-  );
-});
-
-export default EmptyState;