@lobehub/chat 1.96.19 → 1.97.0

package/src/app/[variants]/(main)/discover/(detail)/provider/[...slugs]/features/Details/Nav.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { Icon, Tabs } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { BookOpenIcon, BrainCircuitIcon, ListIcon } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { SOCIAL_URL } from '@/const/branding';
+import { ProviderNavKey } from '@/types/discover';
+
+import { useDetailContext } from '../DetailProvider';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    link: css`
+      color: ${token.colorTextDescription};
+
+      &:hover {
+        color: ${token.colorInfo};
+      }
+    `,
+    nav: css`
+      border-block-end: 1px solid ${token.colorBorder};
+    `,
+  };
+});
+
+const Nav = memo<{
+  activeTab?: ProviderNavKey;
+  mobile?: boolean;
+  setActiveTab?: (tab: ProviderNavKey) => void;
+}>(({ mobile, setActiveTab, activeTab = ProviderNavKey.Overview }) => {
+  const { t } = useTranslation('discover');
+  const { identifier } = useDetailContext();
+  const { styles } = useStyles();
+
+  const nav = (
+    <Tabs
+      activeKey={activeTab}
+      compact={mobile}
+      items={[
+        {
+          icon: <Icon icon={BookOpenIcon} size={16} />,
+          key: ProviderNavKey.Overview,
+          label: t('providers.details.overview.title'),
+        },
+        {
+          icon: <Icon icon={BrainCircuitIcon} size={16} />,
+          key: ProviderNavKey.Guide,
+          label: t('providers.details.guide.title'),
+        },
+        {
+          icon: <Icon icon={ListIcon} size={16} />,
+          key: ProviderNavKey.Related,
+          label: t('providers.details.related.title'),
+        },
+      ]}
+      onChange={(key) => setActiveTab?.(key as ProviderNavKey)}
+    />
+  );
+
+  return mobile ? (
+    nav
+  ) : (
+    <Flexbox align={'center'} className={styles.nav} horizontal justify={'space-between'}>
+      {nav}
+      <Flexbox gap={12} horizontal>
+        <Link className={styles.link} href={SOCIAL_URL.discord} target={'_blank'}>
+          {t('mcp.details.nav.needHelp')}
+        </Link>
+        {identifier && (
+          <Link
+            className={styles.link}
+            href={urlJoin(
+              'https://github.com/lobehub/lobe-chat/tree/main/src/config/modelProviders',
+              `${identifier}.ts`,
+            )}
+            target={'_blank'}
+          >
+            {t('mcp.details.nav.viewSourceCode')}
+          </Link>
+        )}
+        <Link
+          className={styles.link}
+          href={'https://github.com/lobehub/lobe-chat/issues/new/choose'}
+          target={'_blank'}
+        >
+          {t('mcp.details.nav.reportIssue')}
+        </Link>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Nav;

package/src/app/[variants]/(main)/discover/(detail)/provider/[...slugs]/features/Details/Overview/ModelList/index.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { ModelIcon } from '@lobehub/icons';
+import { ActionIcon, Block, Tooltip } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { ChevronRightIcon } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import InlineTable from '@/components/InlineTable';
+import { ModelInfoTags } from '@/components/ModelSelect';
+import { formatPriceByCurrency, formatTokenNumber } from '@/utils/format';
+
+import { useDetailContext } from '../../../DetailProvider';
+
+const ModelList = memo(() => {
+  const { models = [] } = useDetailContext();
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+
+  return (
+    <Block variant={'outlined'}>
+      <InlineTable
+        columns={[
+          {
+            dataIndex: 'id',
+            key: 'model',
+            render: (_, record) => {
+              return (
+                <Link href={urlJoin('/discover/model', record.id)} style={{ color: 'inherit' }}>
+                  <Flexbox align="center" gap={8} horizontal>
+                    <ModelIcon model={record.id} size={24} type={'avatar'} />
+                    <Flexbox style={{ overflow: 'hidden' }}>
+                      <div style={{ fontWeight: 500 }}>{record.displayName}</div>
+                      <div style={{ color: theme.colorTextSecondary, fontSize: 12 }}>
+                        {record.id}
+                      </div>
+                    </Flexbox>
+                  </Flexbox>
+                </Link>
+              );
+            },
+            sorter: (a, b) => a.displayName.localeCompare(b.displayName),
+            title: t('providers.modelName'),
+            width: 200,
+          },
+          {
+            dataIndex: 'abilities',
+            key: 'abilities',
+            render: (_, record) => {
+              if (!record?.abilities || !Object.values(record?.abilities).includes(true))
+                return '--';
+              return <ModelInfoTags {...record?.abilities} />;
+            },
+            title: t('models.abilities'),
+            width: 120,
+          },
+          {
+            dataIndex: 'contextWindowTokens',
+            key: 'contextLength',
+            render: (_, record) =>
+              record.contextWindowTokens ? formatTokenNumber(record.contextWindowTokens) : '--',
+            sorter: (a, b) => (a.contextWindowTokens || 0) - (b.contextWindowTokens || 0),
+            title: t('models.contentLength'),
+            width: 120,
+          },
+          {
+            dataIndex: 'maxOutput',
+            key: 'maxOutput',
+            render: (_, record) => (record.maxOutput ? formatTokenNumber(record.maxOutput) : '--'),
+            sorter: (a, b) => (a.maxOutput || 0) - (b.maxOutput || 0),
+            title: (
+              <Tooltip title={t('models.providerInfo.maxOutputTooltip')}>
+                {t('models.providerInfo.maxOutput')}
+              </Tooltip>
+            ),
+            width: 120,
+          },
+          {
+            dataIndex: 'inputPrice',
+            key: 'inputPrice',
+            render: (_, record) =>
+              record.pricing?.input
+                ? '$' + formatPriceByCurrency(record.pricing.input, record.pricing?.currency)
+                : '--',
+            sorter: (a, b) => (a.pricing?.input || 0) - (b.pricing?.input || 0),
+            title: (
+              <Tooltip title={t('models.providerInfo.inputTooltip')}>
+                {t('models.providerInfo.input')}
+              </Tooltip>
+            ),
+            width: 100,
+          },
+          {
+            dataIndex: 'outputPrice',
+            key: 'outputPrice',
+            render: (_, record) =>
+              record.pricing?.output
+                ? '$' + formatPriceByCurrency(record.pricing.output, record.pricing?.currency)
+                : '--',
+            sorter: (a, b) => (a.pricing?.output || 0) - (b.pricing?.output || 0),
+            title: (
+              <Tooltip title={t('models.providerInfo.outputTooltip')}>
+                {t('models.providerInfo.output')}
+              </Tooltip>
+            ),
+            width: 100,
+          },
+          {
+            align: 'right',
+            dataIndex: 'action',
+            key: 'action',
+            render: (_, record) => {
+              return (
+                <Flexbox align="center" gap={4} horizontal justify={'flex-end'}>
+                  <Link href={urlJoin('/discover/model', record.id)} style={{ color: 'inherit' }}>
+                    <ActionIcon
+                      color={theme.colorTextDescription}
+                      icon={ChevronRightIcon}
+                      size={'small'}
+                      variant={'filled'}
+                    />
+                  </Link>
+                </Flexbox>
+              );
+            },
+            title: '',
+            width: 60,
+          },
+        ]}
+        dataSource={models}
+        rowKey="id"
+        scroll={{ x: 900 }}
+      />
+    </Block>
+  );
+});
+
+export default ModelList;

package/src/app/[variants]/(main)/discover/(detail)/provider/[...slugs]/features/Details/Overview/index.tsx

@@ -0,0 +1,23 @@
+import { Tag } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import Title from '@/app/[variants]/(main)/discover/features/Title';
+
+import { useDetailContext } from '../../DetailProvider';
+import ModelList from './ModelList';
+
+const Overview = memo(() => {
+  const { t } = useTranslation('discover');
+  const { models = [] } = useDetailContext();
+
+  return (
+    <Flexbox gap={16}>
+      <Title tag={<Tag>{models.length}</Tag>}>{t('providers.supportedModels')}</Title>
+      <ModelList />
+    </Flexbox>
+  );
+});
+
+export default Overview;

package/src/app/[variants]/(main)/discover/(detail)/provider/[...slugs]/features/Details/Related/index.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import List from '../../../../../../(list)/provider/features/List';
+import Title from '../../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+
+const Related = memo(() => {
+  const { t } = useTranslation('discover');
+  const { related } = useDetailContext();
+  return (
+    <Flexbox gap={16}>
+      <Title more={t('assistants.details.related.more')} moreLink={'/discover/provider'}>
+        {t('assistants.details.related.listTitle')}
+      </Title>
+      <List data={related} rows={2} />
+    </Flexbox>
+  );
+});
+
+export default Related;

package/src/app/[variants]/(main)/discover/(detail)/provider/[...slugs]/features/Details/index.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { useQueryState } from 'nuqs';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { ProviderNavKey } from '@/types/discover';
+
+import Sidebar from '../Sidebar';
+import Guide from './Guide';
+import Nav from './Nav';
+import Overview from './Overview';
+import Related from './Related';
+
+const Details = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
+  const { mobile = isMobile } = useResponsive();
+  const [activeTab, setActiveTab] = useQueryState('activeTab', {
+    clearOnDefault: true,
+    defaultValue: ProviderNavKey.Overview,
+  });
+
+  return (
+    <Flexbox gap={24}>
+      <Nav activeTab={activeTab as ProviderNavKey} mobile={mobile} setActiveTab={setActiveTab} />
+      <Flexbox
+        gap={48}
+        horizontal={!mobile}
+        style={mobile ? { flexDirection: 'column-reverse' } : undefined}
+      >
+        <Flexbox
+          style={{
+            overflow: 'hidden',
+          }}
+          width={'100%'}
+        >
+          {activeTab === ProviderNavKey.Overview && <Overview />}
+          {activeTab === ProviderNavKey.Guide && <Guide />}
+          {activeTab === ProviderNavKey.Related && <Related />}
+        </Flexbox>
+        <Sidebar mobile={mobile} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Details;

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

@@ -0,0 +1,99 @@
+'use client';
+
+import { Github, ProviderCombine } from '@lobehub/icons';
+import { ActionIcon } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import { GlobeIcon } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { useDetailContext } from './DetailProvider';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    desc: css`
+      color: ${token.colorTextSecondary};
+    `,
+    time: css`
+      font-size: 12px;
+      color: ${token.colorTextDescription};
+    `,
+    version: css`
+      font-family: ${token.fontFamilyCode};
+      font-size: 13px;
+    `,
+  };
+});
+
+const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
+  const { t } = useTranslation('providers');
+  const { identifier, url, modelsUrl, name } = useDetailContext();
+  const { theme } = useStyles();
+  const { mobile = isMobile } = useResponsive();
+
+  return (
+    <Flexbox gap={12}>
+      <Flexbox
+        align={'flex-start'}
+        gap={8}
+        horizontal
+        justify={'space-between'}
+        style={{
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+      >
+        <Flexbox align={'flex-start'} width={'100%'}>
+          <ProviderCombine provider={identifier} size={mobile ? 32 : 48} />
+          <Flexbox align={'center'} gap={4} horizontal>
+            {Boolean(url || modelsUrl) ? (
+              <Link href={url || (modelsUrl as string)} target={'_blank'}>
+                @{name}
+              </Link>
+            ) : (
+              <span>@{name}</span>
+            )}
+          </Flexbox>
+        </Flexbox>
+        <Flexbox align={'center'} horizontal>
+          {Boolean(url || modelsUrl) && (
+            <Link
+              href={(url || modelsUrl) as string}
+              onClick={(e) => e.stopPropagation()}
+              target={'_blank'}
+            >
+              <ActionIcon color={theme.colorTextDescription} icon={GlobeIcon} />
+            </Link>
+          )}
+
+          <Link
+            href={urlJoin(
+              'https://github.com/lobehub/lobe-chat-agents/tree/main/locales',
+              identifier as string,
+            )}
+            onClick={(e) => e.stopPropagation()}
+            target={'_blank'}
+          >
+            <ActionIcon fill={theme.colorTextDescription} icon={Github} />
+          </Link>
+        </Flexbox>
+      </Flexbox>
+
+      <Flexbox
+        align={'center'}
+        gap={mobile ? 12 : 24}
+        horizontal
+        style={{
+          color: theme.colorTextSecondary,
+        }}
+      >
+        {t(`${identifier}.description`)}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Header;

package/src/app/[variants]/(main)/discover/(detail)/provider/{[slug]/features → [...slugs]/features/Sidebar/ActionButton}/ProviderConfig.tsx

@@ -5,13 +5,13 @@ import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import { ChevronDownIcon, SquareArrowOutUpRight } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'nextjs-toploader/app';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FlexboxProps } from 'react-layout-kit';
 
 import { isDeprecatedEdition } from '@/const/version';
-import { DiscoverProviderItem } from '@/types/discover';
+
+import { useDetailContext } from '../../DetailProvider';
 
 const useStyles = createStyles(({ css }) => ({
   button: css`
@@ -21,15 +21,10 @@ const useStyles = createStyles(({ css }) => ({
   `,
 }));
 
-interface ProviderConfigProps extends FlexboxProps {
-  data: DiscoverProviderItem;
-  identifier: string;
-}
-
-const ProviderConfig = memo<ProviderConfigProps>(({ data, identifier }) => {
+const ProviderConfig = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('discover');
-
+  const { url, modelsUrl, identifier } = useDetailContext();
   const router = useRouter();
   const openSettings = () => {
     router.push(isDeprecatedEdition ? '/settings/llm' : `/settings/provider/${identifier}`);
@@ -38,20 +33,20 @@ const ProviderConfig = memo<ProviderConfigProps>(({ data, identifier }) => {
   const icon = <Icon icon={SquareArrowOutUpRight} size={16} />;
 
   const items = [
-    data.meta?.url && {
+    url && {
       icon,
       key: 'officialSite',
       label: (
-        <Link href={data.meta.url} target={'_blank'}>
+        <Link href={url} target={'_blank'}>
           {t('providers.officialSite')}
         </Link>
       ),
     },
-    data.meta?.modelsUrl && {
+    modelsUrl && {
       icon,
       key: 'modelSite',
       label: (
-        <Link href={data.meta.modelsUrl} target={'_blank'}>
+        <Link href={modelsUrl} target={'_blank'}>
           {t('providers.modelSite')}
         </Link>
       ),

package/src/app/[variants]/(main)/discover/(detail)/provider/{[slug]/features/Actions.tsx → [...slugs]/features/Sidebar/ActionButton/index.tsx}

@@ -4,46 +4,42 @@ 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 { Flexbox } 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 ShareButton from '../../../../../features/ShareButton';
+import { useDetailContext } from '../../DetailProvider';
 import ProviderConfig from './ProviderConfig';
 
-interface ModelActionsProps extends FlexboxProps {
-  data: DiscoverProviderItem;
-  identifier: string;
-}
-
-const ProviderActions = memo<ModelActionsProps>(({ identifier, data }) => {
+const ActionButton = memo(() => {
+  const { models = [], identifier, name } = useDetailContext();
   const { t } = useTranslation('providers');
   return (
     <Flexbox align={'center'} gap={8} horizontal width={'100%'}>
-      <ProviderConfig data={data} identifier={identifier} />
+      <ProviderConfig />
       <ShareButton
         meta={{
           avatar: <ProviderIcon provider={identifier} size={64} type={'avatar'} />,
-          desc: data.meta.description && t(`${identifier}.description`),
+          desc: t(`${identifier}.description`),
           tags: (
             <Flexbox align={'center'} gap={4} horizontal justify={'center'} wrap={'wrap'}>
-              {data.models
+              {models
                 .slice(0, 4)
                 .filter(Boolean)
-                .map((tag: string, index) => (
-                  <ModelTag key={index} model={tag} style={{ margin: 0 }} />
+                .map((item) => (
+                  <ModelTag key={item.id} model={item.id} style={{ margin: 0 }} />
                 ))}
-              {data.models.length > 3 && <Tag>+{data.models.length - 3}</Tag>}
+              {models.length > 3 && <Tag>+{models.length - 3}</Tag>}
             </Flexbox>
           ),
-          title: data.meta.title,
-          url: urlJoin(OFFICIAL_URL, '/discover/provider', identifier),
+          title: name,
+          url: urlJoin(OFFICIAL_URL, '/discover/provider', identifier as string),
         }}
       />
     </Flexbox>
   );
 });
 
-export default ProviderActions;
+export default ActionButton;

package/src/app/[variants]/(main)/discover/(detail)/provider/[...slugs]/features/Sidebar/Related/Item.tsx

@@ -0,0 +1,60 @@
+import { ProviderIcon } from '@lobehub/icons';
+import { Block, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { DiscoverProviderItem } from '@/types/discover';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    desc: css`
+      flex: 1;
+      margin: 0 !important;
+      font-size: 14px !important;
+      color: ${token.colorTextSecondary};
+    `,
+    title: css`
+      margin: 0 !important;
+      font-size: 14px !important;
+      font-weight: 500 !important;
+
+      &:hover {
+        color: ${token.colorLink};
+      }
+    `,
+  };
+});
+
+const RelatedItem = memo<DiscoverProviderItem>(({ identifier, name }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('providers');
+  return (
+    <Block gap={12} horizontal key={identifier} padding={12} variant={'outlined'}>
+      <ProviderIcon provider={identifier} size={40} style={{ flex: 'none' }} type={'avatar'} />
+      <Flexbox
+        flex={1}
+        gap={6}
+        style={{
+          overflow: 'hidden',
+        }}
+      >
+        <Text as={'h2'} className={styles.title} ellipsis>
+          {name}
+        </Text>
+        <Text
+          as={'p'}
+          className={styles.desc}
+          ellipsis={{
+            rows: 2,
+          }}
+        >
+          {t(`${identifier}.description`)}
+        </Text>
+      </Flexbox>
+    </Block>
+  );
+});
+
+export default RelatedItem;

package/src/app/[variants]/(main)/discover/(detail)/provider/[...slugs]/features/Sidebar/Related/index.tsx

@@ -0,0 +1,34 @@
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import Title from '../../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+import Item from './Item';
+
+const Related = memo(() => {
+  const { t } = useTranslation('discover');
+  const { related } = useDetailContext();
+
+  return (
+    <Flexbox gap={16}>
+      <Title more={t('providers.details.related.more')} moreLink={'/discover/provider'}>
+        {t('providers.details.related.listTitle')}
+      </Title>
+      <Flexbox gap={8}>
+        {related?.map((item, index) => {
+          const link = urlJoin('/discover/provider', item.identifier);
+          return (
+            <Link href={link} key={index} style={{ color: 'inherit', overflow: 'hidden' }}>
+              <Item {...item} />
+            </Link>
+          );
+        })}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Related;