@lobehub/chat 1.96.20 → 1.97.0

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

@@ -0,0 +1,84 @@
+import { Block, Text } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { memo, useEffect, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import MCPInstallProgress from '@/features/MCP/MCPInstallProgress';
+import { useToolStore } from '@/store/tool';
+import { mcpStoreSelectors } from '@/store/tool/selectors';
+import { MCPInstallStep } from '@/store/tool/slices/mcpStore/initialState';
+import { DiscoverMcpItem } from '@/types/discover';
+import { 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

@@ -0,0 +1,97 @@
+import { Icon } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { ServerCrash } from 'lucide-react';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import { Virtuoso } from 'react-virtuoso';
+
+import { useToolStore } from '@/store/tool';
+
+import SearchLoading from '../../Loading';
+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;
+
+  if (isEmpty)
+    return (
+      <Center paddingBlock={40}>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+
+  return (
+    <Virtuoso
+      components={{
+        Footer: isLoading ? VirtuosoLoading : undefined,
+      }}
+      data={allItems}
+      endReached={loadMoreMCPPlugins}
+      itemContent={(_, item) => {
+        return (
+          <Flexbox key={item.identifier} paddingBlock={2} paddingInline={4}>
+            <Item active={identifier === item.identifier} {...item} setIdentifier={setIdentifier} />
+          </Flexbox>
+        );
+      }}
+      overscan={400}
+      style={{ height: '100%', width: '100%' }}
+      totalCount={totalCount || 0}
+    />
+  );
+});
+
+export default List;

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

@@ -0,0 +1,54 @@
+import { DraggablePanel } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import dynamic from 'next/dynamic';
+import { memo, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+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();
+
+  return (
+    <Flexbox
+      height={'75vh'}
+      horizontal
+      style={{
+        borderTop: `1px solid ${theme.colorBorderSecondary}`,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+      width={'100%'}
+    >
+      <DraggablePanel maxWidth={1024} minWidth={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

@@ -0,0 +1,19 @@
+'use client';
+
+import { type ReactNode, createContext, memo, use } from 'react';
+
+import { 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

@@ -0,0 +1,58 @@
+import { Icon, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Puzzle } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding-block: ${token.paddingXL}px;
+padding-inline: ${token.paddingLG}px;
+  `,
+  description: css`
+    max-width: 240px;
+    line-height: 1.5;
+    color: ${token.colorTextSecondary};
+    text-align: center;
+  `,
+  iconWrapper: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 64px;
+    height: 64px;
+    margin-block-end: ${token.marginMD}px;
+    border-radius: 50%;
+
+    background-color: ${token.colorPrimaryBg};
+  `,
+  title: css`
+    margin-block-end: ${token.marginSM}px;
+
+    font-size: ${token.fontSizeLG}px;
+    font-weight: 500;
+    color: ${token.colorText};
+    text-align: center;
+  `,
+}));
+
+const EmptyState = memo(() => {
+  const { styles } = useStyles();
+  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;

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

@@ -0,0 +1,132 @@
+'use client';
+
+import { Github } from '@lobehub/icons';
+import { ActionIcon, Avatar, Collapse, Icon, Text } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import { DotIcon } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import PublishedTime from '@/components/PublishedTime';
+
+import { useDetailContext } from './DetailProvider';
+import TagList from './TagList';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    desc: css`
+      color: ${token.colorTextSecondary};
+    `,
+    time: css`
+      font-size: 12px;
+      color: ${token.colorTextDescription};
+    `,
+    version: css`
+      font-family: ${token.fontFamilyCode};
+      font-size: 13px;
+    `,
+  };
+});
+
+const Header = memo<{ inModal?: boolean; mobile?: boolean }>(({ mobile: isMobile, inModal }) => {
+  const { author, identifier, createdAt, avatar, title, tags, description } = useDetailContext();
+  const { styles, theme } = useStyles();
+  const { mobile = isMobile } = useResponsive();
+  const { t } = useTranslation('discover');
+
+  return (
+    <Flexbox gap={24}>
+      <Flexbox align={'flex-start'} gap={16} horizontal width={'100%'}>
+        <Avatar avatar={avatar} size={mobile ? 48 : 64} />
+        <Flexbox
+          flex={1}
+          gap={4}
+          style={{
+            overflow: 'hidden',
+          }}
+        >
+          <Flexbox
+            align={'center'}
+            gap={8}
+            horizontal
+            justify={'space-between'}
+            style={{
+              overflow: 'hidden',
+              position: 'relative',
+            }}
+          >
+            <Flexbox
+              align={'center'}
+              flex={1}
+              gap={12}
+              horizontal
+              style={{
+                overflow: 'hidden',
+                position: 'relative',
+              }}
+            >
+              <Text
+                as={'h1'}
+                ellipsis
+                style={{ fontSize: inModal ? 20 : mobile ? 18 : 24, margin: 0 }}
+                title={identifier}
+              >
+                {title}
+              </Text>
+            </Flexbox>
+            {identifier && (
+              <Flexbox align={'center'} gap={6} horizontal>
+                <Link
+                  href={urlJoin(
+                    'https://github.com/lobehub/lobe-chat-agents/tree/main/locales',
+                    identifier,
+                  )}
+                  onClick={(e) => e.stopPropagation()}
+                  target={'_blank'}
+                >
+                  <ActionIcon fill={theme.colorTextDescription} icon={Github} />
+                </Link>
+              </Flexbox>
+            )}
+          </Flexbox>
+          <Flexbox horizontal justify={'space-between'}>
+            <Flexbox>
+              <Flexbox align={'center'} gap={4} horizontal>
+                {author && (
+                  <Link href={urlJoin('https://github.com', author)} target={'_blank'}>
+                    {author}
+                  </Link>
+                )}
+                <Icon icon={DotIcon} />
+                <PublishedTime
+                  className={styles.time}
+                  date={createdAt as string}
+                  template={'MMM DD, YYYY'}
+                />
+              </Flexbox>
+              {tags && <TagList tags={tags} />}
+            </Flexbox>
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+
+      <Collapse
+        defaultActiveKey={['summary']}
+        expandIconPosition={'end'}
+        items={[
+          {
+            children: description,
+            key: 'summary',
+            label: t('plugins.details.summary.title'),
+          },
+        ]}
+        variant={'outlined'}
+      />
+    </Flexbox>
+  );
+});
+
+export default Header;

package/src/features/PluginStore/PluginList/Detail/InstallDetail/Nav.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { Icon, Tabs, TabsProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { BookOpenIcon, HammerIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+import { PluginNavKey } from '@/types/discover';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    link: css`
+      color: ${token.colorTextDescription};
+
+      &:hover {
+        color: ${token.colorInfo};
+      }
+    `,
+    nav: css`
+      border-block-end: 1px solid ${token.colorBorder};
+    `,
+  };
+});
+
+interface NavProps {
+  activeTab?: PluginNavKey;
+  mobile?: boolean;
+  setActiveTab?: (tab: PluginNavKey) => void;
+}
+
+const Nav = memo<NavProps>(({ mobile, setActiveTab, activeTab = PluginNavKey.Tools }) => {
+  const { t } = useTranslation('discover');
+  const { styles } = useStyles();
+  const [identifier] = useToolStore((s) => [s.activePluginIdentifier]);
+  const plugin = useToolStore(pluginSelectors.getInstalledPluginById(identifier));
+
+  const hasSettings =
+    plugin?.manifest?.settings && Object.keys(plugin?.manifest?.settings.properties).length > 0;
+
+  const nav = (
+    <Tabs
+      activeKey={activeTab}
+      compact={mobile}
+      items={
+        [
+          {
+            icon: <Icon icon={HammerIcon} size={16} />,
+            key: PluginNavKey.Tools,
+            label: t('plugins.details.tools.title'),
+          },
+          hasSettings && {
+            icon: <Icon icon={BookOpenIcon} size={16} />,
+            key: PluginNavKey.Settings,
+            label: t('plugins.details.settings.title'),
+          },
+        ].filter(Boolean) as TabsProps['items']
+      }
+      onChange={(key) => setActiveTab?.(key as PluginNavKey)}
+    />
+  );
+
+  return mobile ? (
+    nav
+  ) : (
+    <Flexbox align={'center'} className={styles.nav} horizontal justify={'space-between'}>
+      {nav}
+    </Flexbox>
+  );
+});
+
+export default Nav;

package/src/features/PluginStore/PluginList/Detail/InstallDetail/Settings.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+
+import PluginSettingsConfig from '@/features/PluginSettings';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+const Settings = memo(() => {
+  const [identifier] = useToolStore((s) => [s.activePluginIdentifier]);
+  const plugin = useToolStore(pluginSelectors.getInstalledPluginById(identifier));
+  const { manifest } = plugin || {};
+
+  return (
+    manifest?.settings && (
+      <PluginSettingsConfig id={manifest.identifier} schema={manifest.settings} />
+    )
+  );
+});
+
+export default Settings;

package/src/features/PluginStore/PluginList/Detail/InstallDetail/Tools.tsx

@@ -0,0 +1,109 @@
+import { Block, Collapse, Highlighter, Markdown, Tag } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { isString } from 'lodash-es';
+import { markdownToTxt } from 'markdown-to-txt';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import InlineTable from '@/components/InlineTable';
+import CollapseDesc from '@/features/MCPPluginDetail/CollapseDesc';
+import CollapseLayout from '@/features/MCPPluginDetail/CollapseLayout';
+import { ModeType } from '@/features/MCPPluginDetail/Schema/types';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+import Title from '../../../../../app/[variants]/(main)/discover/features/Title';
+
+interface ToolProps {
+  mode?: ModeType;
+}
+
+const Tools = memo<ToolProps>(({ mode }) => {
+  const { t } = useTranslation('discover');
+  const [activeKey, setActiveKey] = useState<string[]>([]);
+  const [identifier] = useToolStore((s) => [s.activePluginIdentifier]);
+  const plugin = useToolStore(pluginSelectors.getInstalledPluginById(identifier));
+  const { manifest } = plugin || {};
+
+  if (!manifest || isString(manifest))
+    return (
+      <Block variant={'outlined'}>
+        <Empty
+          description={t('mcp.details.schema.tools.empty')}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      </Block>
+    );
+
+  return (
+    <Collapse
+      activeKey={activeKey}
+      expandIconPosition={'end'}
+      gap={8}
+      items={manifest.api.map((item) => {
+        const parameters = Object.entries(item.parameters?.properties || {}).map(
+          ([key, value]) => ({
+            name: key,
+            type: value.type,
+          }),
+        );
+        return {
+          children:
+            mode === ModeType.Docs ? (
+              <CollapseLayout
+                items={[
+                  {
+                    children: <Markdown>{item.description || ''}</Markdown>,
+                    key: 'instructions',
+                    title: t('mcp.details.schema.tools.instructions'),
+                  },
+                  {
+                    children: (
+                      <InlineTable
+                        columns={[
+                          {
+                            dataIndex: 'name',
+                            render: (name: string) => <code>{name}</code>,
+                            title: t('plugins.meta.parameter'),
+                          },
+                          {
+                            dataIndex: 'type',
+                            render: (type: string) => <Tag>{type.toUpperCase()}</Tag>,
+                            title: t('plugins.meta.type'),
+                          },
+                        ]}
+                        dataSource={parameters}
+                        pagination={false}
+                        rowKey={'name'}
+                      />
+                    ),
+                    key: 'inputSchema',
+                    title: t('mcp.details.schema.tools.inputSchema'),
+                  },
+                ]}
+              />
+            ) : (
+              <Highlighter language={'json'} style={{ fontSize: 12 }} variant={'borderless'}>
+                {JSON.stringify(item, null, 2)}
+              </Highlighter>
+            ),
+          desc: item.description && (
+            <CollapseDesc hide={activeKey.includes(item.name)}>
+              {markdownToTxt(item.description)}
+            </CollapseDesc>
+          ),
+          key: item.name,
+          label: (
+            <Title id={`tools-${item.name}`} level={3}>
+              {item.name}
+            </Title>
+          ),
+        };
+      })}
+      onChange={setActiveKey}
+      variant={'outlined'}
+    />
+  );
+});
+
+export default Tools;

package/src/features/PluginStore/PluginList/Detail/InstallDetail/index.tsx

@@ -0,0 +1,24 @@
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { PluginNavKey } from '@/types/discover';
+
+import Nav from './Nav';
+import Settings from './Settings';
+import Tools from './Tools';
+
+const InstallDetail = memo(() => {
+  const [activeTab, setActiveTab] = useState(PluginNavKey.Tools);
+
+  return (
+    <Flexbox gap={16}>
+      <Nav activeTab={activeTab as PluginNavKey} setActiveTab={setActiveTab} />
+      <Flexbox>
+        {activeTab === PluginNavKey.Tools && <Tools />}
+        {activeTab === PluginNavKey.Settings && <Settings />}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default InstallDetail;