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

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

@@ -1,130 +0,0 @@
-'use client';
-
-import { Github } from '@lobehub/icons';
-import { ActionIcon, Avatar, Collapse, Flexbox, Icon, Text } from '@lobehub/ui';
-import { createStaticStyles, cssVar, useResponsive } from 'antd-style';
-import { DotIcon } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import urlJoin from 'url-join';
-
-import PublishedTime from '@/components/PublishedTime';
-
-import { useDetailContext } from './DetailProvider';
-import TagList from './TagList';
-
-const styles = createStaticStyles(({ css }) => {
-  return {
-    desc: css`
-      color: ${cssVar.colorTextSecondary};
-    `,
-    time: css`
-      font-size: 12px;
-      color: ${cssVar.colorTextDescription};
-    `,
-    version: css`
-      font-family: ${cssVar.fontFamilyCode};
-      font-size: 13px;
-    `,
-  };
-});
-
-const Header = memo<{ inModal?: boolean; mobile?: boolean }>(({ mobile: isMobile, inModal }) => {
-  const { author, identifier, createdAt, avatar, title, tags, description } = useDetailContext();
-  const { mobile = isMobile } = useResponsive();
-  const { t } = useTranslation('discover');
-
-  return (
-    <Flexbox gap={24}>
-      <Flexbox align={'flex-start'} gap={16} horizontal width={'100%'}>
-        <Avatar avatar={avatar} shape={'square'} 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>
-                <a
-                  href={urlJoin(
-                    'https://github.com/lobehub/lobe-chat-agents/tree/main/locales',
-                    identifier,
-                  )}
-                  onClick={(e) => e.stopPropagation()}
-                  rel="noreferrer"
-                  target="_blank"
-                >
-                  <ActionIcon fill={cssVar.colorTextDescription} icon={Github} />
-                </a>
-              </Flexbox>
-            )}
-          </Flexbox>
-          <Flexbox horizontal justify={'space-between'}>
-            <Flexbox>
-              <Flexbox align={'center'} gap={4} horizontal>
-                {author && (
-                  <a href={urlJoin('https://github.com', author)} rel="noreferrer" target="_blank">
-                    {author}
-                  </a>
-                )}
-                <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']}
-        expandIconPlacement={'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

@@ -1,73 +0,0 @@
-'use client';
-
-import { Flexbox, Icon, Tabs, type TabsProps } from '@lobehub/ui';
-import { createStaticStyles } from 'antd-style';
-import { BookOpenIcon, HammerIcon } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useToolStore } from '@/store/tool';
-import { pluginSelectors } from '@/store/tool/selectors';
-import { PluginNavKey } from '@/types/discover';
-
-const styles = createStaticStyles(({ css, cssVar }) => {
-  return {
-    link: css`
-      color: ${cssVar.colorTextDescription};
-
-      &:hover {
-        color: ${cssVar.colorInfo};
-      }
-    `,
-    nav: css`
-      border-block-end: 1px solid ${cssVar.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 [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

@@ -1,19 +0,0 @@
-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

@@ -1,111 +0,0 @@
-import { Block, Collapse, Empty, Highlighter, Markdown, Tag } from '@lobehub/ui';
-import { isString } from 'es-toolkit/compat';
-import { Wrench } from 'lucide-react';
-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)/community/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')}
-          descriptionProps={{ fontSize: 14 }}
-          icon={Wrench}
-          style={{ maxWidth: 400 }}
-        />
-      </Block>
-    );
-
-  return (
-    <Collapse
-      activeKey={activeKey}
-      expandIconPlacement={'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

@@ -1,24 +0,0 @@
-import { Flexbox } from '@lobehub/ui';
-import { memo, useState } from 'react';
-
-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;

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

@@ -1,42 +0,0 @@
-import { Flexbox, Skeleton } from '@lobehub/ui';
-import { cssVar } from 'antd-style';
-import { memo } from 'react';
-
-const DetailsLoading = memo(() => {
-  return (
-    <Flexbox gap={24}>
-      <Flexbox gap={12}>
-        <Flexbox align={'center'} gap={16} horizontal width={'100%'}>
-          <Skeleton.Avatar active shape={'square'} 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 ${cssVar.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

@@ -1,35 +0,0 @@
-'use client';
-
-import { Flexbox, Tag } from '@lobehub/ui';
-import { createStaticStyles } from 'antd-style';
-import { memo } from 'react';
-
-const styles = createStaticStyles(({ css, cssVar }) => {
-  return {
-    tag: css`
-      margin: 0;
-      padding-block: 4px;
-      padding-inline: 12px;
-      border-radius: 16px;
-
-      color: ${cssVar.colorTextSecondary};
-    `,
-  };
-});
-
-const TagList = memo<{ tags: string[] }>(({ tags }) => {
-  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

@@ -1,39 +0,0 @@
-import { Flexbox } from '@lobehub/ui';
-import { memo } from 'react';
-
-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

@@ -1,76 +0,0 @@
-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

@@ -1,78 +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 { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
-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, isPluginEnabledInAgent] = useAgentStore((s) => [
-    s.togglePlugin,
-    agentSelectors.currentAgentPlugins(s).includes(identifier),
-  ]);
-  const { modal } = App.useApp();
-
-  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} />
-        </DropdownMenu>
-      ) : (
-        <Button
-          loading={installing}
-          onClick={async () => {
-            await installPlugin(identifier);
-            await togglePlugin(identifier);
-          }}
-          variant={'filled'}
-        >
-          {t('store.actions.install')}
-        </Button>
-      )}
-    </Flexbox>
-  );
-});
-
-export default Actions;