@lobehub/chat 1.96.20 → 1.97.0

package/src/features/PluginDevModal/MCPManifestForm/index.tsx

@@ -1,18 +1,11 @@
-import {
-  SiBun,
-  SiDocker,
-  SiNodedotjs,
-  SiNpm,
-  SiPnpm,
-  SiPython,
-} from '@icons-pack/react-simple-icons';
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
-import { Alert, AutoComplete, FormItem, Input, TextArea } from '@lobehub/ui';
+import { Alert, FormItem, Input, TextArea } from '@lobehub/ui';
 import { Button, Divider, Form, FormInstance } from 'antd';
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import MCPStdioCommandInput from '@/components/MCPStdioCommandInput';
 import { isDesktop } from '@/const/version';
 import { mcpService } from '@/services/mcp';
 import { useToolStore } from '@/store/tool';
@@ -29,25 +22,6 @@ interface MCPManifestFormProps {
   isEditMode?: boolean;
 }
 
-// 定义预设的命令选项
-const STDIO_COMMAND_OPTIONS: {
-  // 假设图标是 React 函数组件
-  color?: string;
-  icon?: FC<{ color?: string; size?: number }>;
-  value: string;
-}[] = [
-  { color: '#CB3837', icon: SiNpm, value: 'npx' },
-  { color: '#CB3837', icon: SiNpm, value: 'npm' },
-  { color: '#F69220', icon: SiPnpm, value: 'pnpm' },
-  { color: '#F69220', icon: SiPnpm, value: 'pnpx' },
-  { color: '#339933', icon: SiNodedotjs, value: 'node' },
-  { color: '#efe2d2', icon: SiBun, value: 'bun' },
-  { color: '#efe2d2', icon: SiBun, value: 'bunx' },
-  { color: '#DE5FE9', icon: SiPython, value: 'uv' },
-  { color: '#3776AB', icon: SiPython, value: 'python' },
-  { color: '#2496ED', icon: SiDocker, value: 'docker' },
-];
-
 const HTTP_URL_KEY = ['customParams', 'mcp', 'url'];
 const STDIO_COMMAND = ['customParams', 'mcp', 'command'];
 const STDIO_ARGS = ['customParams', 'mcp', 'args'];
@@ -324,18 +298,7 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
                 rules={[{ message: t('dev.mcp.command.required'), required: true }]}
                 tag={'command'}
               >
-                <AutoComplete
-                  options={STDIO_COMMAND_OPTIONS.map(({ value, icon: Icon, color }) => ({
-                    label: (
-                      <Flexbox align={'center'} gap={8} horizontal>
-                        {Icon && <Icon color={color} size={16} />}
-                        {value}
-                      </Flexbox>
-                    ),
-                    value: value,
-                  }))}
-                  placeholder={t('dev.mcp.command.placeholder')}
-                />
+                <MCPStdioCommandInput placeholder={t('dev.mcp.command.placeholder')} />
               </FormItem>
               <FormItem
                 desc={t('dev.mcp.args.desc')}

package/src/features/PluginDevModal/PluginPreview/EmptyState.tsx

@@ -1,11 +1,9 @@
-import { Icon } from '@lobehub/ui';
-import { Space, Typography } from 'antd';
+import { Icon, Text } from '@lobehub/ui';
+import { Space } from 'antd';
 import { createStyles } from 'antd-style';
 import { Puzzle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-const { Title, Paragraph } = Typography;
-
 // Create styles using antd-style
 const useStyles = createStyles(({ token, css }) => ({
   container: css`
@@ -63,10 +61,10 @@ export default function PluginEmptyState() {
       <div className={styles.iconWrapper}>
         <Icon icon={Puzzle} size={32} />
       </div>
-      <Title className={styles.title} level={4}>
+      <Text as={'h4'} className={styles.title}>
         {t('dev.preview.empty.title')}
-      </Title>
-      <Paragraph className={styles.description}>{t('dev.preview.empty.desc')}</Paragraph>
+      </Text>
+      <Text className={styles.description}>{t('dev.preview.empty.desc')}</Text>
       <Space align="center" direction="vertical">
         <div className={styles.line} style={{ width: 128 }} />
         <div className={styles.line} style={{ width: 96 }} />

package/src/features/PluginDevModal/PluginPreview/index.tsx

@@ -1,6 +1,6 @@
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
-import { Block, Icon } from '@lobehub/ui';
-import { Form as AForm, Button, FormInstance, Typography } from 'antd';
+import { Block, Icon, Text } from '@lobehub/ui';
+import { Form as AForm, Button, FormInstance } from 'antd';
 import { useTheme } from 'antd-style';
 import { FileCode } from 'lucide-react';
 import { memo } from 'react';
@@ -8,8 +8,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import ManifestPreviewer from '@/components/ManifestPreviewer';
-import PluginAvatar from '@/features/PluginStore/PluginItem/PluginAvatar';
-import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import PluginTag from '@/components/Plugins/PluginTag';
 import { pluginHelpers } from '@/store/tool';
 
 import ApiVisualizer from './ApiVisualizer';
@@ -50,9 +50,9 @@ const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
               {pluginHelpers.getPluginTitle(meta) || 'Plugin Title'}
               <PluginTag type={'customPlugin'} />
             </Flexbox>
-            <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            <Text style={{ fontSize: 12 }} type={'secondary'}>
               {pluginHelpers.getPluginDesc(meta) || 'Plugin Description'}
-            </Typography.Text>
+            </Text>
           </Flexbox>
         </Flexbox>
 

package/src/features/PluginSettings/index.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
-import PluginSettingRender from './PluginSettingRender';
+import ItemRender from '../../components/JSONSchemaConfig/ItemRender';
 
 export const transformPluginSettings = (pluginSettings: PluginSchema) => {
   if (!pluginSettings?.properties) return [];
@@ -68,7 +68,7 @@ const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) =>
       initialValues={pluginSetting}
       items={items.map((item) => ({
         children: (
-          <PluginSettingRender
+          <ItemRender
             enum={item.enum}
             format={item.format}
             maximum={item.maximum}

package/src/features/PluginStore/AddPluginButton.tsx

@@ -39,7 +39,7 @@ const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
         }}
         ref={ref}
       >
-        {t('plugin.addTooltip')}
+        {t('plugin.addMCPPlugin')}
       </Button>
     </div>
   );

package/src/features/PluginStore/Content.tsx

@@ -0,0 +1,59 @@
+import { Segmented } from '@lobehub/ui';
+import { SegmentedOptions } from 'antd/es/segmented';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { isDesktop } from '@/const/version';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { useToolStore } from '@/store/tool';
+import { PluginStoreTabs } from '@/store/tool/slices/oldStore';
+
+import AddPluginButton from './AddPluginButton';
+import InstalledList from './InstalledList';
+import McpList from './McpList';
+import PluginList from './PluginList';
+import Search from './Search';
+
+export const Content = memo(() => {
+  const { t } = useTranslation('plugin');
+  const mobile = useServerConfigStore((s) => s.isMobile);
+  const [listType] = useToolStore((s) => [s.listType]);
+  const [keywords] = useState<string>();
+
+  const options = [
+    isDesktop ? { label: t('store.tabs.mcp'), value: PluginStoreTabs.MCP } : undefined,
+    { label: t('store.tabs.old'), value: PluginStoreTabs.Plugin },
+    { label: t('store.tabs.installed'), value: PluginStoreTabs.Installed },
+  ].filter(Boolean) as SegmentedOptions;
+
+  return (
+    <Flexbox
+      gap={8}
+      style={{ maxHeight: mobile ? '-webkit-fill-available' : 'inherit' }}
+      width={'100%'}
+    >
+      <Flexbox gap={8} paddingInline={16}>
+        <Flexbox gap={8} horizontal>
+          <Segmented
+            block
+            onChange={(v) => {
+              useToolStore.setState({ listType: v as PluginStoreTabs });
+            }}
+            options={options}
+            style={{ flex: 1 }}
+            value={listType}
+            variant={'filled'}
+          />
+          <AddPluginButton />
+        </Flexbox>
+        <Search />
+      </Flexbox>
+      {listType === PluginStoreTabs.MCP && <McpList />}
+      {listType === PluginStoreTabs.Plugin && <PluginList />}
+      {listType === PluginStoreTabs.Installed && <InstalledList keywords={keywords} />}
+    </Flexbox>
+  );
+});
+
+export default Content;

package/src/features/PluginStore/InstalledList/Detail/CustomPluginEmptyState.tsx

@@ -0,0 +1,81 @@
+import { Button, Icon, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Package } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import EditCustomPlugin from '../EditCustomPlugin';
+
+const useStyles = createStyles(({ css, token }) => ({
+  button: css`
+    margin-block-start: ${token.marginLG}px;
+  `,
+  container: css`
+    height: 80%;
+    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;
+  `,
+}));
+
+interface Props {
+  identifier: string;
+}
+
+const CustomPluginEmptyState = memo<Props>(({ identifier }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('plugin');
+
+  const [showModal, setModal] = useState(false);
+
+  return (
+    <Center className={styles.container}>
+      <Flexbox align="center">
+        <div className={styles.iconWrapper}>
+          <Icon icon={Package} size={32} />
+        </div>
+        <Text className={styles.title}>{t('detailModal.customPlugin.title')}</Text>
+        <Text className={styles.description}>{t('detailModal.customPlugin.description')}</Text>
+        <EditCustomPlugin identifier={identifier} onOpenChange={setModal} open={showModal}>
+          <Button
+            className={styles.button}
+            onClick={() => {
+              setModal(true);
+            }}
+            type="primary"
+          >
+            {t('detailModal.customPlugin.editBtn')}
+          </Button>
+        </EditCustomPlugin>
+      </Flexbox>
+    </Center>
+  );
+});
+
+export default CustomPluginEmptyState;

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

@@ -0,0 +1,21 @@
+import { memo } from 'react';
+
+import McpDetail from '../../McpList/Detail';
+import PluginDetail from '../../PluginList/Detail';
+import CustomPluginEmptyState from './CustomPluginEmptyState';
+
+interface DetailProps {
+  identifier: string;
+  runtimeType?: 'mcp' | 'default';
+  type?: 'plugin' | 'customPlugin' | 'builtin';
+}
+
+const Detail = memo<DetailProps>(({ identifier, type, runtimeType }) => {
+  if (type === 'customPlugin') return <CustomPluginEmptyState identifier={identifier} />;
+
+  if (runtimeType === 'mcp') return <McpDetail identifier={identifier} />;
+
+  if (type === 'plugin') return <PluginDetail identifier={identifier} />;
+});
+
+export default Detail;

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

@@ -0,0 +1,52 @@
+import isEqual from 'fast-deep-equal';
+import { ReactNode, memo } from 'react';
+
+import DevModal from '@/features/PluginDevModal';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/slices/plugin/selectors';
+
+interface EditCustomPluginProps {
+  children: ReactNode;
+  identifier: string;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+}
+
+const EditCustomPlugin = memo<EditCustomPluginProps>(
+  ({ identifier, open, onOpenChange, children }) => {
+    const [installCustomPlugin, updateNewDevPlugin, uninstallCustomPlugin] = useToolStore((s) => [
+      s.installCustomPlugin,
+      s.updateNewCustomPlugin,
+      s.uninstallCustomPlugin,
+    ]);
+
+    const customPlugin = useToolStore(pluginSelectors.getCustomPluginById(identifier), isEqual);
+
+    return (
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <DevModal
+          mode={'edit'}
+          onDelete={() => {
+            uninstallCustomPlugin(identifier);
+            onOpenChange(false);
+          }}
+          onOpenChange={onOpenChange}
+          onSave={async (devPlugin) => {
+            await installCustomPlugin(devPlugin);
+            onOpenChange(false);
+          }}
+          onValueChange={updateNewDevPlugin}
+          open={open}
+          value={customPlugin}
+        />
+        {children}
+      </div>
+    );
+  },
+);
+
+export default EditCustomPlugin;

package/src/features/PluginStore/{PluginItem → InstalledList/List/Item}/Action.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Button, Dropdown, Icon } from '@lobehub/ui';
 import { App } from 'antd';
-import { InfoIcon, MoreVerticalIcon, Settings, Trash2 } from 'lucide-react';
+import { InfoIcon, MoreVerticalIcon, PackageSearch, Settings, Trash2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -12,21 +12,25 @@ import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
 import { LobeToolType } from '@/types/tool/tool';
 
-import EditCustomPlugin from './EditCustomPlugin';
+import EditCustomPlugin from '../../EditCustomPlugin';
 
 interface ActionsProps {
   identifier: string;
+  isMCP?: boolean;
   type: LobeToolType;
 }
 
-const Actions = memo<ActionsProps>(({ identifier, type }) => {
+const Actions = memo<ActionsProps>(({ identifier, type, isMCP }) => {
   const mobile = useServerConfigStore((s) => s.isMobile);
-  const [installed, installing, installPlugin, unInstallPlugin] = useToolStore((s) => [
-    pluginSelectors.isPluginInstalled(identifier)(s),
-    pluginStoreSelectors.isPluginInstallLoading(identifier)(s),
-    s.installPlugin,
-    s.uninstallPlugin,
-  ]);
+  const [installed, installing, installPlugin, unInstallPlugin, installMCPPlugin] = useToolStore(
+    (s) => [
+      pluginSelectors.isPluginInstalled(identifier)(s),
+      pluginStoreSelectors.isPluginInstallLoading(identifier)(s),
+      s.installPlugin,
+      s.uninstallPlugin,
+      s.installMCPPlugin,
+    ],
+  );
 
   const isCustomPlugin = type === 'customPlugin';
   const { t } = useTranslation('plugin');
@@ -37,12 +41,24 @@ const Actions = memo<ActionsProps>(({ identifier, type }) => {
   const [tab, setTab] = useState('info');
   const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(plugin?.settings);
 
+  const [showModal, setModal] = useState(false);
+
   return (
     <>
       <Flexbox align={'center'} horizontal>
         {installed ? (
           <>
-            {isCustomPlugin && <EditCustomPlugin identifier={identifier} />}
+            {isCustomPlugin && (
+              <EditCustomPlugin identifier={identifier} onOpenChange={setModal} open={showModal}>
+                <ActionIcon
+                  icon={PackageSearch}
+                  onClick={() => {
+                    setModal(true);
+                  }}
+                  title={t('store.actions.manifest')}
+                />
+              </EditCustomPlugin>
+            )}
             {hasSettings && (
               <ActionIcon
                 icon={Settings}
@@ -92,11 +108,15 @@ const Actions = memo<ActionsProps>(({ identifier, type }) => {
           <Button
             loading={installing}
             onClick={async () => {
-              await installPlugin(identifier);
-              await togglePlugin(identifier);
+              if (isMCP) {
+                await installMCPPlugin(identifier);
+                await togglePlugin(identifier);
+              } else {
+                await installPlugin(identifier);
+                await togglePlugin(identifier);
+              }
             }}
             size={mobile ? 'small' : undefined}
-            type={'primary'}
           >
             {t('store.actions.install')}
           </Button>

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

@@ -0,0 +1,62 @@
+import { Block, Text } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import PluginTag from '@/components/Plugins/PluginTag';
+import { DiscoverPluginItem } from '@/types/discover';
+import { 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

@@ -0,0 +1,77 @@
+import { Empty } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo, useMemo } 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 { pluginSelectors } from '@/store/tool/selectors';
+import { LobeToolType } from '@/types/tool/tool';
+
+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 { t } = useTranslation('plugin');
+  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;
+
+  if (isEmpty)
+    return (
+      <Center paddingBlock={40}>
+        <Empty description={t('store.empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+
+  return (
+    <Virtuoso
+      data={filteredPluginList}
+      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={400}
+      style={{ height: '100%', width: '100%' }}
+      totalCount={filteredPluginList.length}
+    />
+  );
+});
+
+export default List;