@lobehub/chat 1.96.20 → 1.97.1

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;

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

@@ -0,0 +1,85 @@
+import { DraggablePanel } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+import { LobeToolType } from '@/types/tool/tool';
+
+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();
+
+  const [identifier] = useToolStore((s) => [s.activePluginIdentifier]);
+  const isEmpty = useToolStore((s) => pluginSelectors.installedPluginMetaList(s).length === 0);
+
+  if (isEmpty)
+    return (
+      <Center height={'75vh'} paddingBlock={40}>
+        <Empty description={t('store.empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+
+  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
+          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')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        </Center>
+      )}
+    </Flexbox>
+  );
+});
+
+export default PluginList;

package/src/features/PluginStore/Loading.tsx

@@ -4,8 +4,8 @@ import { Flexbox } from 'react-layout-kit';
 
 const Loading = memo(() => {
   return (
-    <Flexbox>
-      <Skeleton paragraph={{ rows: 8 }} />
+    <Flexbox padding={16}>
+      <Skeleton active paragraph={{ rows: 8 }} title={false} />
     </Flexbox>
   );
 });

package/src/features/PluginStore/McpList/Detail/Loading.tsx

@@ -0,0 +1,44 @@
+import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const DetailsLoading = memo(() => {
+  const theme = useTheme();
+  return (
+    <Flexbox gap={24}>
+      <Flexbox gap={12}>
+        <Flexbox align={'center'} gap={16} horizontal width={'100%'}>
+          <Skeleton.Avatar active size={64} />
+          <Skeleton.Button active style={{ height: 36, width: 200 }} />
+        </Flexbox>
+        <Skeleton.Button active size={'small'} style={{ width: 200 }} />
+      </Flexbox>
+      <Flexbox
+        gap={12}
+        height={54}
+        horizontal
+        style={{
+          borderBottom: `1px solid ${theme.colorBorder}`,
+        }}
+      >
+        <Skeleton.Button />
+        <Skeleton.Button />
+      </Flexbox>
+      <Flexbox
+        flex={1}
+        gap={16}
+        style={{
+          overflow: 'hidden',
+        }}
+        width={'100%'}
+      >
+        <Skeleton paragraph={{ rows: 3 }} title={false} />
+        <Skeleton paragraph={{ rows: 8 }} title={false} />
+        <Skeleton paragraph={{ rows: 8 }} title={false} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default DetailsLoading;