@lobehub/chat 1.96.20 → 1.97.0

package/src/features/PluginStore/PluginList/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;

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    tag: css`
+      margin: 0;
+      padding-block: 4px;
+      padding-inline: 12px;
+      border-radius: 16px;
+
+      color: ${token.colorTextSecondary};
+    `,
+  };
+});
+
+const TagList = memo<{ tags: string[] }>(({ tags }) => {
+  const { styles } = useStyles();
+  const showTags = Boolean(tags?.length && tags?.length > 0);
+  return (
+    showTags && (
+      <Flexbox gap={8} horizontal wrap={'wrap'}>
+        {tags.map((tag) => (
+          <Tag className={styles.tag} key={tag}>
+            {tag}
+          </Tag>
+        ))}
+      </Flexbox>
+    )
+  );
+});
+
+export default TagList;

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

@@ -0,0 +1,39 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useDiscoverStore } from '@/store/discover';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+import { DetailProvider } from './DetailProvider';
+import EmptyState from './EmptyState';
+import Header from './Header';
+import InstallDetail from './InstallDetail';
+import DetailsLoading from './Loading';
+
+const Detail = memo<{ identifier?: string }>(({ identifier: defaultIdentifier }) => {
+  const [activeMCPIdentifier, isPluginListInit] = useToolStore((s) => [
+    s.activePluginIdentifier,
+    s.isPluginListInit,
+  ]);
+
+  const identifier = defaultIdentifier ?? activeMCPIdentifier;
+
+  const isPluginInstalled = useToolStore(pluginSelectors.isPluginInstalled(identifier!));
+  const usePluginDetail = useDiscoverStore((s) => s.usePluginDetail);
+
+  const { data, isLoading } = usePluginDetail({ identifier });
+
+  if (!isPluginListInit || isLoading) return <DetailsLoading />;
+
+  return (
+    <DetailProvider config={data}>
+      <Flexbox gap={16}>
+        <Header inModal />
+        {isPluginInstalled ? <InstallDetail /> : <EmptyState />}
+      </Flexbox>
+    </DetailProvider>
+  );
+});
+
+export default Detail;

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

@@ -0,0 +1,76 @@
+import {
+  Gamepad2,
+  ImagePlay,
+  LayoutPanelTop,
+  MicroscopeIcon,
+  PocketKnife,
+  Receipt,
+  ScanSearch,
+  TwitterIcon,
+  Umbrella,
+} from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PluginCategory } from '@/types/discover';
+
+export const useCategory = () => {
+  const { t } = useTranslation('discover');
+
+  return useMemo(
+    () => [
+      {
+        icon: LayoutPanelTop,
+        key: PluginCategory.All,
+        label: t('category.plugin.all'),
+      },
+      {
+        icon: ImagePlay,
+        key: PluginCategory.MediaGenerate,
+        label: t('category.plugin.media-generate'),
+      },
+      {
+        icon: ScanSearch,
+        key: PluginCategory.WebSearch,
+        label: t('category.plugin.web-search'),
+      },
+      {
+        icon: Receipt,
+        key: PluginCategory.StocksFinance,
+        label: t('category.plugin.stocks-finance'),
+      },
+      {
+        icon: PocketKnife,
+        key: PluginCategory.Tools,
+        label: t('category.plugin.tools'),
+      },
+      {
+        icon: Umbrella,
+        key: PluginCategory.LifeStyle,
+        label: t('category.plugin.life-style'),
+      },
+      {
+        icon: MicroscopeIcon,
+        key: PluginCategory.ScienceEducation,
+        label: t('category.plugin.science-education'),
+      },
+      {
+        icon: TwitterIcon,
+        key: PluginCategory.Social,
+        label: t('category.plugin.social'),
+      },
+      {
+        icon: Gamepad2,
+        key: PluginCategory.GamingEntertainment,
+        label: t('category.plugin.gaming-entertainment'),
+      },
+    ],
+    [t],
+  );
+};
+
+export const useCategoryItem = (key?: PluginCategory) => {
+  const items = useCategory();
+  if (!key) return;
+  return items.find((item) => item.key === key);
+};

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

@@ -0,0 +1,72 @@
+import { ActionIcon, Button, Dropdown, Icon } from '@lobehub/ui';
+import { App } from 'antd';
+import { MoreVerticalIcon, Trash2 } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAgentStore } from '@/store/agent';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
+
+interface ActionsProps {
+  identifier: string;
+}
+
+const Actions = memo<ActionsProps>(({ identifier }) => {
+  const [installed, installing, installPlugin, unInstallPlugin] = useToolStore((s) => [
+    pluginSelectors.isPluginInstalled(identifier)(s),
+    pluginStoreSelectors.isOldPluginInInstallProgress(identifier)(s),
+    s.installOldPlugin,
+    s.uninstallPlugin,
+  ]);
+
+  const { t } = useTranslation('plugin');
+  const togglePlugin = useAgentStore((s) => s.togglePlugin);
+  const { modal } = App.useApp();
+
+  return (
+    <Flexbox align={'center'} horizontal>
+      {installed ? (
+        <Dropdown
+          menu={{
+            items: [
+              {
+                danger: true,
+                icon: <Icon icon={Trash2} />,
+                key: 'uninstall',
+                label: t('store.actions.uninstall'),
+                onClick: () => {
+                  modal.confirm({
+                    centered: true,
+                    okButtonProps: { danger: true },
+                    onOk: async () => unInstallPlugin(identifier),
+                    title: t('store.actions.confirmUninstall'),
+                    type: 'error',
+                  });
+                },
+              },
+            ],
+          }}
+          placement="bottomRight"
+          trigger={['click']}
+        >
+          <ActionIcon icon={MoreVerticalIcon} loading={installing} />
+        </Dropdown>
+      ) : (
+        <Button
+          loading={installing}
+          onClick={async () => {
+            await installPlugin(identifier);
+            await togglePlugin(identifier);
+          }}
+          variant={'filled'}
+        >
+          {t('store.actions.install')}
+        </Button>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Actions;

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

@@ -0,0 +1,94 @@
+import { Block, Text } from '@lobehub/ui';
+import { Progress } from 'antd';
+import { useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import PluginTag from '@/components/Plugins/PluginTag';
+import { useToolStore } from '@/store/tool';
+import { pluginStoreSelectors } from '@/store/tool/selectors';
+import { PluginInstallStep } from '@/store/tool/slices/oldStore/initialState';
+import { DiscoverPluginItem } from '@/types/discover';
+import { LobeToolType } from '@/types/tool/tool';
+
+import Actions from './Action';
+
+interface PluginItemProps extends DiscoverPluginItem {
+  active?: boolean;
+  onClick?: () => void;
+  type?: LobeToolType;
+}
+const Item = memo<PluginItemProps>(
+  ({ title, description, avatar, onClick, active, identifier, author }) => {
+    const { t } = useTranslation('plugin');
+    const theme = useTheme();
+    const installProgress = useToolStore(
+      pluginStoreSelectors.getPluginInstallProgress(identifier),
+      isEqual,
+    );
+
+    const stepText = installProgress ? t(`mcpInstall.${installProgress.step}` as any) : undefined;
+    const hasError = installProgress?.step === PluginInstallStep.ERROR;
+
+    return (
+      <Flexbox gap={0}>
+        <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} type={'plugin'} />
+              </Flexbox>
+              <Text ellipsis fontSize={12} type={'secondary'}>
+                {description}
+              </Text>
+            </Flexbox>
+          </Flexbox>
+          <Actions identifier={identifier} />
+        </Block>
+
+        {installProgress && !hasError && (
+          <Flexbox paddingBlock={4} paddingInline={12}>
+            <Progress
+              percent={installProgress.progress}
+              showInfo={false}
+              size="small"
+              status="active"
+              strokeColor={{ '0%': theme.blue, '100%': theme.geekblue }}
+            />
+            {stepText && (
+              <Text fontSize={11} style={{ marginTop: 4 }} type={'secondary'}>
+                ({installProgress.progress}%) {stepText}
+              </Text>
+            )}
+          </Flexbox>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default Item;

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

@@ -0,0 +1,91 @@
+import { Icon } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { ServerCrash } from 'lucide-react';
+import { memo } 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';
+
+export const List = memo(() => {
+  const { t } = useTranslation('plugin');
+
+  const [
+    isPluginListInit,
+    identifier,
+    allItems,
+    totalCount,
+    currentPage,
+    keywords,
+    searchLoading,
+    useFetchPluginList,
+    loadMorePlugins,
+  ] = useToolStore((s) => [
+    s.isPluginListInit,
+    s.activePluginIdentifier,
+    s.oldPluginItems,
+    s.pluginTotalCount,
+    s.currentPluginPage,
+    s.pluginSearchKeywords,
+    s.pluginSearchLoading,
+    s.useFetchPluginList,
+    s.loadMorePlugins,
+  ]);
+
+  const { isLoading, error } = useFetchPluginList({
+    page: currentPage,
+    pageSize: 20,
+    q: keywords,
+  });
+
+  if (searchLoading || !isPluginListInit) 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={loadMorePlugins}
+      itemContent={(_, item) => (
+        <Flexbox
+          key={item.identifier}
+          onClick={() => {
+            useToolStore.setState({ activePluginIdentifier: item.identifier });
+          }}
+          paddingBlock={2}
+          paddingInline={4}
+        >
+          <Item active={identifier === item.identifier} {...item} />
+        </Flexbox>
+      )}
+      overscan={400}
+      style={{ height: '100%', width: '100%' }}
+      totalCount={totalCount || 0}
+    />
+  );
+});
+
+export default List;

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

@@ -0,0 +1,47 @@
+import { DraggablePanel } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Suspense, memo, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Detail from './Detail';
+import DetailLoading from './Detail/Loading';
+import List from './List';
+
+export const PluginList = 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 />
+      </DraggablePanel>
+      <Flexbox
+        height={'100%'}
+        padding={16}
+        ref={ref}
+        style={{
+          background: theme.colorBgContainerSecondary,
+          overflowX: 'hidden',
+          overflowY: 'auto',
+        }}
+        width={'100%'}
+      >
+        <Suspense fallback={<DetailLoading />}>
+          <Detail />
+        </Suspense>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default PluginList;

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

@@ -0,0 +1,29 @@
+import { SearchBar } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+
+export const Search = memo(() => {
+  const { t } = useTranslation('plugin');
+  const [keywords] = useToolStore((s) => [s.mcpSearchKeywords]);
+
+  return (
+    <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
+      <Flexbox flex={1}>
+        <SearchBar
+          allowClear
+          defaultValue={keywords}
+          onSearch={(keywords: string) => {
+            useToolStore.setState({ mcpSearchKeywords: keywords, searchLoading: true });
+          }}
+          placeholder={t('store.placeholder')}
+          variant={'borderless'}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Search;

package/src/features/PluginStore/VirtuosoLoading.tsx

@@ -0,0 +1,16 @@
+import { Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Loader2Icon } from 'lucide-react';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+const VirtuosoLoading = memo(() => {
+  const theme = useTheme();
+  return (
+    <Center padding={16}>
+      <Icon color={theme.colorTextDescription} icon={Loader2Icon} spin />
+    </Center>
+  );
+});
+
+export default VirtuosoLoading;

package/src/features/PluginStore/index.tsx

@@ -1,13 +1,8 @@
-import { Modal, Segmented } from '@lobehub/ui';
+import { Modal } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
-import { useServerConfigStore } from '@/store/serverConfig';
-import { useToolStore } from '@/store/tool';
-
-import InstalledPluginList from './InstalledPluginList';
-import OnlineList from './OnlineList';
+import Content from './Content';
 
 interface PluginStoreProps {
   open?: boolean;
@@ -15,8 +10,6 @@ interface PluginStoreProps {
 }
 export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
   const { t } = useTranslation('plugin');
-  const mobile = useServerConfigStore((s) => s.isMobile);
-  const [listType] = useToolStore((s) => [s.listType]);
 
   return (
     <Modal
@@ -26,30 +19,13 @@ export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
         setOpen(false);
       }}
       open={open}
-      styles={{ body: { overflow: 'hidden' } }}
+      styles={{
+        body: { overflow: 'hidden', padding: 0 },
+      }}
       title={t('store.title')}
-      width={800}
+      width={'min(90%, 1280px)'}
     >
-      <Flexbox
-        gap={mobile ? 8 : 16}
-        style={{ maxHeight: mobile ? '-webkit-fill-available' : 'inherit' }}
-        width={'100%'}
-      >
-        <Segmented
-          block
-          onChange={(v) => {
-            useToolStore.setState({ listType: v as any });
-          }}
-          options={[
-            { label: t('store.tabs.all'), value: 'all' },
-            { label: t('store.tabs.installed'), value: 'installed' },
-          ]}
-          style={{ flex: 1 }}
-          value={listType}
-          variant={'filled'}
-        />
-        {listType === 'all' ? <OnlineList /> : <InstalledPluginList />}
-      </Flexbox>
+      <Content />
     </Modal>
   );
 });

package/src/features/PluginTag/index.tsx

@@ -6,7 +6,7 @@ import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 
-import Avatar from '@/features/PluginStore/PluginItem/PluginAvatar';
+import Avatar from '@/components/Plugins/PluginAvatar';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
@@ -20,14 +20,16 @@ export interface PluginTagProps {
 const PluginTag = memo<PluginTagProps>(({ plugins }) => {
   const { showDalle } = useServerConfigStore(featureFlagsSelectors);
   const list = useToolStore(toolSelectors.metaList(showDalle), isEqual);
+
   const displayPlugin = useToolStore(toolSelectors.getMetaById(plugins[0]), isEqual);
 
   if (plugins.length === 0) return null;
 
   const items: MenuProps['items'] = plugins.map((id) => {
     const item = list.find((i) => i.identifier === id);
-    const isDeprecated = !pluginHelpers.getPluginTitle(item?.meta);
-    const avatar = isDeprecated ? '♻️' : pluginHelpers.getPluginAvatar(item?.meta);
+
+    const isDeprecated = !item;
+    const avatar = isDeprecated ? '♻️' : pluginHelpers.getPluginAvatar(item.meta || item);
 
     return {
       icon: (
@@ -40,7 +42,7 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
         <PluginStatus
           deprecated={isDeprecated}
           id={id}
-          title={pluginHelpers.getPluginTitle(item?.meta)}
+          title={pluginHelpers.getPluginTitle(item?.meta || item)}
         />
       ),
     };

package/src/hooks/useInterceptingRoutes.test.ts

@@ -16,6 +16,12 @@ vi.mock('next/navigation', () => ({
     replace: vi.fn((href) => href),
   })),
 }));
+vi.mock('nextjs-toploader/app', () => ({
+  useRouter: vi.fn(() => ({
+    push: vi.fn((href) => href),
+    replace: vi.fn((href) => href),
+  })),
+}));
 vi.mock('@/hooks/useQuery', () => ({
   useQuery: vi.fn(() => ({})),
 }));