@lobehub/chat 1.17.7 → 1.18.0

package/src/app/(main)/discover/(detail)/plugin/[slug]/features/InstallPlugin.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { App, Button, Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
+
+const useStyles = createStyles(({ css }) => ({
+  button: css`
+    button {
+      width: 100%;
+    }
+  `,
+}));
+
+const InstallPlugin = memo<{ identifier: string }>(({ identifier }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation(['discover', 'plugin']);
+  const [loading, setLoading] = useState(false);
+  const { modal } = App.useApp();
+  const [
+    useFetchPluginStore,
+    useFetchInstalledPlugins,
+    installed,
+    installing,
+    installPlugin,
+    unInstallPlugin,
+  ] = useToolStore((s) => [
+    s.useFetchPluginStore,
+    s.useFetchInstalledPlugins,
+    pluginSelectors.isPluginInstalled(identifier)(s),
+    pluginStoreSelectors.isPluginInstallLoading(identifier)(s),
+    s.installPlugin,
+    s.uninstallPlugin,
+  ]);
+
+  const { isLoading } = useFetchPluginStore();
+  const { isLoading: installedPluginLoading } = useFetchInstalledPlugins();
+  const loadingState = installedPluginLoading || loading;
+
+  const handleInstall = async () => {
+    setLoading(true);
+    await installPlugin(identifier);
+    setLoading(false);
+  };
+
+  const handleUninstall = async () => {
+    modal.confirm({
+      centered: true,
+      okButtonProps: { danger: true },
+      onOk: async () => {
+        setLoading(true);
+        await unInstallPlugin(identifier);
+        setLoading(false);
+      },
+      title: t('store.actions.confirmUninstall', { ns: 'plugin' }),
+      type: 'error',
+    });
+  };
+
+  if (isLoading) return <Skeleton.Button block size={'large'} />;
+
+  return (
+    <Button
+      className={styles.button}
+      loading={loadingState}
+      onClick={() => {
+        if (loading || installing) return;
+        if (installed) {
+          handleUninstall();
+        } else {
+          handleInstall();
+        }
+      }}
+      size={'large'}
+      style={{ flex: 1, width: 'unset' }}
+      type={installed ? 'default' : 'primary'}
+    >
+      {t(installed ? 'plugins.installed' : 'plugins.install')}
+    </Button>
+  );
+});
+
+export default InstallPlugin;

package/src/app/(main)/discover/(detail)/plugin/[slug]/features/ParameterList.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { TabsNav, Tag } from '@lobehub/ui';
+import { Empty, Skeleton, Table } from 'antd';
+import { useTheme } from 'antd-style';
+import { PuzzleIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+import { DiscoverPlugintem } from '@/types/discover';
+
+import HighlightBlock from '../../../features/HighlightBlock';
+
+interface ParameterListProps extends FlexboxProps {
+  data?: DiscoverPlugintem;
+}
+
+const ParameterList = memo<ParameterListProps>(({ data }) => {
+  const { t } = useTranslation('discover');
+  const [active, setActive] = useState<number>(0);
+  const theme = useTheme();
+  if (!data) return <Skeleton active />;
+
+  let content;
+
+  if (!data.manifest?.api) {
+    content = <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+  } else {
+    const api = data.manifest?.api;
+    const parameters = Object.entries(api[active]?.parameters?.properties || {}).map(
+      ([key, value]) => ({
+        name: key,
+        type: value.type,
+      }),
+    );
+
+    content = (
+      <>
+        <TabsNav
+          activeKey={active as any}
+          items={api.map((item, index) => ({
+            key: index as any,
+            label: item.name,
+          }))}
+          onChange={(key) => setActive(key as any)}
+          variant={'compact'}
+        />
+        <Flexbox
+          padding={16}
+          style={{
+            border: `1px solid ${theme.colorBorderSecondary}`,
+            borderRadius: theme.borderRadiusLG,
+          }}
+        >
+          {api[active].description}
+        </Flexbox>
+        <Table
+          bordered
+          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'}
+          tableLayout="fixed"
+        />
+      </>
+    );
+  }
+
+  return (
+    <HighlightBlock
+      avatar={data?.meta?.avatar}
+      icon={PuzzleIcon}
+      style={{ background: theme.colorBgContainer }}
+      title={t('plugins.meta.title')}
+    >
+      <Flexbox gap={24} padding={16} width={'100%'}>
+        {content}
+      </Flexbox>
+    </HighlightBlock>
+  );
+});
+
+export default ParameterList;

package/src/app/(main)/discover/(detail)/plugin/[slug]/features/Schema.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Highlighter } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+
+import Block from '../../../features/Block';
+
+const Schema = memo<{ children?: string }>(({ children }) => {
+  return (
+    <Block title={'JSON Schema'}>
+      {children ? (
+        <Highlighter allowChangeLanguage={false} fullFeatured language={'json'}>
+          {children}
+        </Highlighter>
+      ) : (
+        <Skeleton paragraph={{ rows: 4 }} title={false} />
+      )}
+    </Block>
+  );
+});
+
+export default Schema;

package/src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx

@@ -0,0 +1,103 @@
+import { notFound } from 'next/navigation';
+import urlJoin from 'url-join';
+
+import StructuredData from '@/components/StructuredData';
+import { Locales } from '@/locales/resources';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { DiscoverService } from '@/server/services/discover';
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/responsive';
+
+import DetailLayout from '../../features/DetailLayout';
+import Actions from './features/Actions';
+import Header from './features/Header';
+import InfoSidebar from './features/InfoSidebar';
+import ParameterList from './features/ParameterList';
+import Schema from './features/Schema';
+
+type Props = { params: { slug: string }; searchParams: { hl?: Locales } };
+
+export const generateMetadata = async ({ params, searchParams }: Props) => {
+  const { slug: identifier } = params;
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+
+  const discoverService = new DiscoverService();
+  const data = await discoverService.getPluginById(locale, identifier);
+  if (!data) return notFound();
+
+  const { meta, createdAt, homepage, author } = data;
+
+  return {
+    authors: [
+      { name: author, url: homepage },
+      { name: 'LobeHub', url: 'https://github.com/lobehub' },
+      { name: 'LobeChat', url: 'https://github.com/lobehub/lobe-chat' },
+    ],
+    keywords: meta.tags,
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+    ...metadataModule.generate({
+      alternate: true,
+      description: meta.description,
+      locale,
+      tags: meta.tags,
+      title: [meta.title, t('discover.plugins.title')].join(' · '),
+      url: urlJoin('/discover/plugin', identifier),
+    }),
+    other: {
+      'article:author': author,
+      'article:published_time': createdAt
+        ? new Date(createdAt).toISOString()
+        : new Date().toISOString(),
+      'robots': 'index,follow,max-image-preview:large',
+    },
+  };
+};
+
+const Page = async ({ params, searchParams }: Props) => {
+  const { slug: identifier } = params;
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const mobile = isMobileDevice();
+
+  const discoverService = new DiscoverService();
+  const data = await discoverService.getPluginById(locale, identifier, true);
+  if (!data) return notFound();
+
+  const { meta, createdAt, author } = data;
+  const ld = ldModule.generate({
+    article: {
+      author: [author],
+      enable: true,
+      identifier,
+      tags: meta.tags,
+    },
+    date: createdAt ? new Date(createdAt).toISOString() : new Date().toISOString(),
+    description: meta.description || t('discover.plugins.description'),
+    title: [meta.title, t('discover.plugins.title')].join(' · '),
+    url: urlJoin('/discover/plugin', identifier),
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <DetailLayout
+        actions={<Actions data={data} identifier={identifier} />}
+        header={<Header data={data} identifier={identifier} mobile={mobile} />}
+        mobile={mobile}
+        sidebar={<InfoSidebar data={data} identifier={identifier} mobile={mobile} />}
+        /* ↓ cloud slot ↓ */
+        /* ↑ cloud slot ↑ */
+      >
+        <ParameterList data={data} />
+        <Schema>{JSON.stringify(data.manifest.api, null, 2)}</Schema>
+      </DetailLayout>
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverToolsDetail';
+
+export default Page;

package/src/app/(main)/discover/(detail)/provider/[slug]/features/Actions.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { ModelTag, ProviderIcon } from '@lobehub/icons';
+import { Tag } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { OFFICIAL_URL } from '@/const/url';
+import { DiscoverProviderItem } from '@/types/discover';
+
+import ShareButton from '../../../features/ShareButton';
+import ProviderConfig from './ProviderConfig';
+
+interface ModelActionsProps extends FlexboxProps {
+  data: DiscoverProviderItem;
+  identifier: string;
+}
+
+const ProviderActions = memo<ModelActionsProps>(({ identifier, data }) => {
+  const { t } = useTranslation('providers');
+  return (
+    <Flexbox align={'center'} gap={8} horizontal width={'100%'}>
+      <ProviderConfig data={data} identifier={identifier} />
+      <ShareButton
+        meta={{
+          avatar: <ProviderIcon provider={identifier} size={64} type={'avatar'} />,
+          desc: data.meta.description && t(`${identifier}.description`),
+          tags: (
+            <Flexbox align={'center'} gap={4} horizontal justify={'center'} wrap={'wrap'}>
+              {data.models
+                .slice(0, 4)
+                .filter(Boolean)
+                .map((tag: string, index) => (
+                  <ModelTag key={index} model={tag} style={{ margin: 0 }} />
+                ))}
+              {data.models.length > 3 && <Tag>+{data.models.length - 3}</Tag>}
+            </Flexbox>
+          ),
+          title: data.meta.title,
+          url: urlJoin(OFFICIAL_URL, '/discover/provider', identifier),
+        }}
+      />
+    </Flexbox>
+  );
+});
+
+export default ProviderActions;

package/src/app/(main)/discover/(detail)/provider/[slug]/features/Header.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { ProviderCombine } from '@lobehub/icons';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { DiscoverProviderItem } from '@/types/discover';
+
+import Back from '../../../features/Back';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  tag: css`
+    color: ${token.colorTextSecondary};
+    background: ${token.colorFillSecondary};
+    border: none;
+  `,
+  time: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin-block: 0;
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 1.2;
+  `,
+}));
+
+interface HeaderProps {
+  data: DiscoverProviderItem;
+  identifier: string;
+  mobile?: boolean;
+}
+
+const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
+  const { styles, theme } = useStyles();
+  const { t } = useTranslation(['discover', 'providers']);
+
+  return (
+    <Flexbox gap={12} width={'100%'}>
+      {!mobile && <Back href={'/discover/providers'} />}
+      <Flexbox align={'center'} gap={8} horizontal justify={'space-between'} width={'100%'}>
+        <Flexbox align={'flex-start'} gap={4} justify={'flex-start'}>
+          <ProviderCombine provider={identifier} size={40} />
+          <Flexbox gap={8} horizontal>
+            <Link href={data.meta.url} target={'_blank'}>
+              @{data.meta.title}
+            </Link>
+            <div style={{ color: theme.colorTextDescription }}>
+              {t('providers.modelCount', { count: data.models.length })}
+            </div>
+          </Flexbox>
+        </Flexbox>
+        {!mobile && (
+          <Flexbox align={'center'} gap={4} horizontal justify={'flex-end'}>
+            <Link href={'/discover/providers'}>
+              <Button className={styles.tag} shape={'round'} size={'small'}>
+                {t('tab.providers')}
+              </Button>
+            </Link>
+          </Flexbox>
+        )}
+      </Flexbox>
+      {data.meta.description && <div> {t(`${identifier}.description`, { ns: 'providers' })}</div>}
+    </Flexbox>
+  );
+});
+
+export default Header;

package/src/app/(main)/discover/(detail)/provider/[slug]/features/InfoSidebar/SuggestionItem.tsx

@@ -0,0 +1,75 @@
+import { ProviderCombine } from '@lobehub/icons';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+import { DiscoverProviderItem } from '@/types/discover';
+
+const { Paragraph } = Typography;
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  banner: css`
+    opacity: ${isDarkMode ? 0.9 : 0.4};
+  `,
+  container: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    height: 100%;
+
+    color: ${token.colorText};
+  `,
+  desc: css`
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  id: css`
+    margin-block-end: 0 !important;
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+  `,
+  title: css`
+    margin-block-end: 0 !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+  `,
+  token: css`
+    font-family: ${token.fontFamilyCode};
+  `,
+}));
+
+export interface SuggestionItemProps
+  extends Omit<DiscoverProviderItem, 'suggestions' | 'socialData'>,
+    FlexboxProps {}
+
+const SuggestionItem = memo<SuggestionItemProps>(
+  ({ className, meta, identifier, models, ...rest }) => {
+    const { title, description } = meta;
+    const { t } = useTranslation(['discover', 'providers']);
+    const { cx, styles, theme } = useStyles();
+
+    return (
+      <Flexbox className={cx(styles.container, className)} gap={12} key={identifier} {...rest}>
+        <ProviderCombine provider={identifier} size={24} title={title} />
+        <Flexbox gap={8} horizontal style={{ fontSize: 12, marginTop: -8 }}>
+          <div style={{ color: theme.colorTextSecondary }}>@{meta.title}</div>
+          <div style={{ color: theme.colorTextDescription }}>
+            {t('providers.modelCount', { count: models.length })}
+          </div>
+        </Flexbox>
+        {description && (
+          <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+            {t(`${identifier}.description`, { ns: 'providers' })}
+          </Paragraph>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default SuggestionItem;

package/src/app/(main)/discover/(detail)/provider/[slug]/features/InfoSidebar/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import InterceptingLink from '@/components/InterceptingLink';
+import { DiscoverProviderItem } from '@/types/discover';
+
+import Block from '../../../../features/Block';
+import SuggestionItem from './SuggestionItem';
+
+interface InfoSidebarProps extends FlexboxProps {
+  data: DiscoverProviderItem;
+  identifier: string;
+  mobile?: boolean;
+}
+
+const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
+  const { t } = useTranslation('discover');
+
+  return (
+    <Flexbox gap={48} style={{ position: 'relative' }} width={'100%'} {...rest}>
+      <Block
+        gap={24}
+        more={t('providers.more')}
+        moreLink={'/discover/providers'}
+        title={t('providers.suggestions')}
+      >
+        {data?.suggestions?.length > 0 ? (
+          data?.suggestions.map((item) => (
+            <InterceptingLink
+              href={urlJoin('/discover/provider', item.identifier)}
+              key={item.identifier}
+            >
+              <SuggestionItem {...item} />
+            </InterceptingLink>
+          ))
+        ) : (
+          <Skeleton active paragraph={{ rows: 5 }} title={false} />
+        )}
+      </Block>
+    </Flexbox>
+  );
+});
+
+export default InfoSidebar;