@lobehub/chat 1.96.20 → 1.97.1

package/src/app/[variants]/(main)/discover/(detail)/model/[...slugs]/Client.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { notFound } from 'next/navigation';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { withSuspense } from '@/components/withSuspense';
+import { useDiscoverStore } from '@/store/discover';
+import { DiscoverTab } from '@/types/discover';
+
+import Breadcrumb from '../../features/Breadcrumb';
+import { DetailProvider } from './features/DetailProvider';
+import Details from './features/Details';
+import Header from './features/Header';
+import Loading from './loading';
+
+interface ClientProps {
+  identifier: string;
+  mobile?: boolean;
+}
+
+const Client = memo<ClientProps>(({ identifier, mobile }) => {
+  const useModelDetail = useDiscoverStore((s) => s.useModelDetail);
+  const { data, isLoading } = useModelDetail({ identifier });
+
+  if (isLoading) return <Loading />;
+  if (!data) return notFound();
+
+  return (
+    <DetailProvider config={data}>
+      {!mobile && <Breadcrumb identifier={identifier} tab={DiscoverTab.Models} />}
+      <Flexbox gap={16}>
+        <Header mobile={mobile} />
+        <Details mobile={mobile} />
+      </Flexbox>
+    </DetailProvider>
+  );
+});
+
+export default withSuspense(Client);

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

@@ -0,0 +1,19 @@
+'use client';
+
+import { type ReactNode, createContext, memo, use } from 'react';
+
+import { DiscoverModelDetail } from '@/types/discover';
+
+export type DetailContextConfig = Partial<DiscoverModelDetail>;
+
+export const DetailContext = createContext<DetailContextConfig>({});
+
+export const DetailProvider = memo<{ children: ReactNode; config?: DetailContextConfig }>(
+  ({ children, config = {} }) => {
+    return <DetailContext value={config}>{children}</DetailContext>;
+  },
+);
+
+export const useDetailContext = () => {
+  return use(DetailContext);
+};

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

@@ -0,0 +1,90 @@
+'use client';
+
+import { Icon, Tabs } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { BookOpenIcon, ListIcon, Settings2Icon } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { SOCIAL_URL } from '@/const/branding';
+import { ModelNavKey } from '@/types/discover';
+
+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?: ModelNavKey;
+  mobile?: boolean;
+  setActiveTab?: (tab: ModelNavKey) => void;
+}>(({ mobile, setActiveTab, activeTab = ModelNavKey.Overview }) => {
+  const { t } = useTranslation('discover');
+  const { styles } = useStyles();
+
+  const nav = (
+    <Tabs
+      activeKey={activeTab}
+      compact={mobile}
+      items={[
+        {
+          icon: <Icon icon={BookOpenIcon} size={16} />,
+          key: ModelNavKey.Overview,
+          label: t('models.details.overview.title'),
+        },
+        {
+          icon: <Icon icon={Settings2Icon} size={16} />,
+          key: ModelNavKey.Parameter,
+          label: t('models.parameterList.title'),
+        },
+        {
+          icon: <Icon icon={ListIcon} size={16} />,
+          key: ModelNavKey.Related,
+          label: t('models.details.related.title'),
+        },
+      ]}
+      onChange={(key) => setActiveTab?.(key as ModelNavKey)}
+    />
+  );
+
+  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>
+        <Link
+          className={styles.link}
+          href={'https://github.com/lobehub/lobe-chat/tree/main/src/config/aiModels'}
+          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)/model/[...slugs]/features/Details/Overview/ProviderList/index.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import { ProviderIcon } from '@lobehub/icons';
+import { ActionIcon, Block, Icon, Tooltip } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { BadgeCheck, BookIcon, ChevronRightIcon, KeyIcon } 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 { BASE_PROVIDER_DOC_URL } from '@/const/url';
+import { formatPriceByCurrency, formatTokenNumber } from '@/utils/format';
+
+import { useDetailContext } from '../../../DetailProvider';
+
+const ProviderList = memo(() => {
+  const { providers = [] } = useDetailContext();
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+
+  return (
+    <Block variant={'outlined'}>
+      <InlineTable
+        columns={[
+          {
+            dataIndex: 'id',
+            key: 'provider',
+            render: (_, record) => {
+              return (
+                <Link href={urlJoin('/discover/provider', record.id)} style={{ color: 'inherit' }}>
+                  <Flexbox align="center" gap={8} horizontal>
+                    <ProviderIcon provider={record.id} size={24} type={'avatar'} />
+                    <div style={{ fontWeight: 500 }}>{record.name}</div>
+                  </Flexbox>
+                </Link>
+              );
+            },
+            sorter: (a, b) => a.name.localeCompare(b.name),
+            title: t('tab.provider'),
+            width: 200,
+          },
+          {
+            dataIndex: 'model.abilities',
+            key: 'abilities',
+            render: (_, record) => {
+              if (!record?.model?.abilities) return '--';
+              return <ModelInfoTags {...record?.model?.abilities} />;
+            },
+            title: t('models.abilities'),
+            width: 120,
+          },
+          {
+            dataIndex: 'model.contextLength',
+            key: 'contextLength',
+            render: (_, record) =>
+              record.model?.contextWindowTokens
+                ? formatTokenNumber(record.model.contextWindowTokens)
+                : '--',
+            sorter: (a, b) =>
+              (a.model?.contextWindowTokens || 0) - (b.model?.contextWindowTokens || 0),
+            title: t('models.contentLength'),
+            width: 120,
+          },
+          {
+            dataIndex: 'model.maxOutput',
+            key: 'maxOutput',
+            render: (_, record) =>
+              record.model?.maxOutput
+                ? formatTokenNumber(record.model.maxOutput)
+                : record.model?.maxDimension
+                  ? formatTokenNumber(record.model.maxDimension)
+                  : '--',
+            sorter: (a, b) => {
+              const aValue = a.model?.maxOutput || a.model?.maxDimension || 0;
+              const bValue = b.model?.maxOutput || b.model?.maxDimension || 0;
+              return aValue - bValue;
+            },
+            title: (
+              <Tooltip title={t('models.providerInfo.maxOutputTooltip')}>
+                {t('models.providerInfo.maxOutput')}
+              </Tooltip>
+            ),
+            width: 120,
+          },
+          {
+            dataIndex: 'model.inputPrice',
+            key: 'inputPrice',
+            render: (_, record) =>
+              record.model?.pricing?.input
+                ? '$' +
+                  formatPriceByCurrency(record.model.pricing.input, record.model.pricing?.currency)
+                : '--',
+            sorter: (a, b) => (a.model?.pricing?.input || 0) - (b.model?.pricing?.input || 0),
+            title: (
+              <Tooltip title={t('models.providerInfo.inputTooltip')}>
+                {t('models.providerInfo.input')}
+              </Tooltip>
+            ),
+            width: 100,
+          },
+          {
+            dataIndex: 'model.outputPrice',
+            key: 'outputPrice',
+            render: (_, record) =>
+              record.model?.pricing?.output
+                ? '$' +
+                  formatPriceByCurrency(record.model.pricing.output, record.model.pricing?.currency)
+                : '--',
+            sorter: (a, b) => (a.model?.pricing?.output || 0) - (b.model?.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) => {
+              const isLobeHub = record.id === 'lobehub';
+              return (
+                <Flexbox align="center" gap={4} horizontal justify={'flex-end'}>
+                  {isLobeHub && (
+                    <Tooltip title={t('models.providerInfo.officialTooltip')}>
+                      <ActionIcon
+                        color={theme.colorSuccess}
+                        icon={BadgeCheck}
+                        size={'small'}
+                        variant={'filled'}
+                      />
+                    </Tooltip>
+                  )}
+                  {!isLobeHub && (
+                    <Tooltip title={t('models.providerInfo.apiTooltip')}>
+                      <ActionIcon
+                        icon={<Icon icon={KeyIcon} />}
+                        size={'small'}
+                        variant={'filled'}
+                      />
+                    </Tooltip>
+                  )}
+                  <Tooltip title={t('models.guide')}>
+                    <Link href={urlJoin(BASE_PROVIDER_DOC_URL, record.id)} target={'_blank'}>
+                      <ActionIcon icon={BookIcon} size={'small'} variant={'filled'} />
+                    </Link>
+                  </Tooltip>
+                  <Link
+                    href={urlJoin('/discover/provider', record.id)}
+                    style={{ color: 'inherit' }}
+                  >
+                    <ActionIcon
+                      color={theme.colorTextDescription}
+                      icon={ChevronRightIcon}
+                      size={'small'}
+                      variant={'filled'}
+                    />
+                  </Link>
+                </Flexbox>
+              );
+            },
+            title: '',
+            width: 120,
+          },
+        ]}
+        dataSource={providers}
+        rowKey="id"
+        scroll={{ x: 1000 }}
+      />
+    </Block>
+  );
+});
+
+export default ProviderList;

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

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

package/src/app/[variants]/(main)/discover/(detail)/model/[...slugs]/features/{ParameterList → Details/Parameter}/ParameterItem.tsx

@@ -5,7 +5,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import Statistic from '../../../../../components/Statistic';
+import Statistic from '../../../../../../components/Statistic';
 
 const DEFAULT_DOC_URL = 'https://lobehub.com/docs/usage/agents/model';
 

package/src/app/[variants]/(main)/discover/(detail)/model/[...slugs]/features/{ParameterList → Details/Parameter}/index.tsx

@@ -14,17 +14,12 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { DiscoverModelItem } from '@/types/discover';
+import Title from '@/app/[variants]/(main)/discover/features/Title';
 import { formatTokenNumber } from '@/utils/format';
 
-import Block from '../../../../features/Block';
+import { useDetailContext } from '../../DetailProvider';
 import ParameterItem from './ParameterItem';
 
-interface ParameterListProps {
-  data: DiscoverModelItem;
-  identifier: string;
-}
-
 interface Parameter {
   defaultValue: string | number;
   desc: string;
@@ -35,8 +30,9 @@ interface Parameter {
   type: string;
 }
 
-const ParameterList = memo<ParameterListProps>(({ data }) => {
+const ParameterList = memo(() => {
   const { t } = useTranslation('discover');
+  const data = useDetailContext();
 
   const items: Parameter[] = [
     {
@@ -81,7 +77,9 @@ const ParameterList = memo<ParameterListProps>(({ data }) => {
       icon: MessageSquareText,
       key: 'max_tokens',
       label: t('models.parameterList.max_tokens.title'),
-      range: data?.meta?.maxOutput ? [0, formatTokenNumber(data.meta.maxOutput)] : undefined,
+      range: Boolean(data?.maxOutput || data?.maxDimension)
+        ? [0, formatTokenNumber(data?.maxOutput || data?.maxDimension || 0)]
+        : undefined,
       type: 'int',
     },
     {
@@ -96,7 +94,8 @@ const ParameterList = memo<ParameterListProps>(({ data }) => {
   ];
 
   return (
-    <Block title={t('models.parameterList.title')}>
+    <Flexbox gap={16}>
+      <Title>{t('models.parameterList.title')}</Title>
       <Collapse
         defaultActiveKey={items.map((item) => item.key)}
         expandIconPosition={'end'}
@@ -112,8 +111,9 @@ const ParameterList = memo<ParameterListProps>(({ data }) => {
             </Flexbox>
           ),
         }))}
+        variant={'outlined'}
       />
-    </Block>
+    </Flexbox>
   );
 });
 

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

@@ -0,0 +1,31 @@
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import List from '../../../../../../(list)/model/features/List';
+import Title from '../../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+
+const Related = memo(() => {
+  const { t } = useTranslation('discover');
+  const { related, category } = useDetailContext();
+  return (
+    <Flexbox gap={16}>
+      <Title
+        more={t('assistants.details.related.more')}
+        moreLink={qs.stringifyUrl({
+          query: {
+            category,
+          },
+          url: '/discover/plugin',
+        })}
+      >
+        {t('assistants.details.related.listTitle')}
+      </Title>
+      <List data={related} />
+    </Flexbox>
+  );
+});
+
+export default Related;

package/src/app/[variants]/(main)/discover/(detail)/model/[...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 { ModelNavKey } from '@/types/discover';
+
+import Sidebar from '../Sidebar';
+import Nav from './Nav';
+import Overview from './Overview';
+import Parameter from './Parameter';
+import Related from './Related';
+
+const Details = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
+  const { mobile = isMobile } = useResponsive();
+  const [activeTab, setActiveTab] = useQueryState('activeTab', {
+    clearOnDefault: true,
+    defaultValue: ModelNavKey.Overview,
+  });
+
+  return (
+    <Flexbox gap={24}>
+      <Nav activeTab={activeTab as ModelNavKey} mobile={mobile} setActiveTab={setActiveTab} />
+      <Flexbox
+        gap={48}
+        horizontal={!mobile}
+        style={mobile ? { flexDirection: 'column-reverse' } : undefined}
+      >
+        <Flexbox
+          style={{
+            overflow: 'hidden',
+          }}
+          width={'100%'}
+        >
+          {activeTab === ModelNavKey.Overview && <Overview />}
+          {activeTab === ModelNavKey.Parameter && <Parameter />}
+          {activeTab === ModelNavKey.Related && <Related />}
+        </Flexbox>
+        <Sidebar mobile={mobile} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Details;

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

@@ -1,85 +1,110 @@
 'use client';
 
 import { ModelIcon } from '@lobehub/icons';
-import { Button } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import dayjs from 'dayjs';
-import Link from 'next/link';
+import { Icon, Text } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import { DotIcon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import ModelTypeIcon from '@/app/[variants]/(main)/discover/(list)/model/features/List/ModelTypeIcon';
 import { ModelInfoTags } from '@/components/ModelSelect';
-import { DiscoverModelItem } from '@/types/discover';
 
-import Back from '../../../features/Back';
+import PublishedTime from '../../../../../../../../components/PublishedTime';
+import { useDetailContext } from './DetailProvider';
 
-export const useStyles = createStyles(({ css, token }) => ({
-  tag: css`
-    border: none;
-    color: ${token.colorTextSecondary};
-    background: ${token.colorFillSecondary};
-  `,
-  time: css`
-    display: flex;
-    font-size: 12px;
-    line-height: 22px;
-    color: ${token.colorTextDescription};
-  `,
-  title: css`
-    margin-block: 0;
-    font-size: 18px;
-    font-weight: bold;
-    line-height: 1.2;
-  `,
-}));
-
-interface HeaderProps {
-  data: DiscoverModelItem;
-  identifier: string;
-  mobile?: boolean;
-}
+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<HeaderProps>(({ identifier, data, mobile }) => {
+const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
+  const { identifier, releasedAt, displayName, type, abilities, contextWindowTokens } =
+    useDetailContext();
   const { styles, theme } = useStyles();
-  const { t } = useTranslation(['discover', 'models']);
+  const { mobile = isMobile } = useResponsive();
+  const { t } = useTranslation('models');
 
-  const releasedAt = data.meta.releasedAt;
   return (
-    <Flexbox gap={12} width={'100%'}>
-      {!mobile && <Back href={'/discover/models'} />}
-      <Flexbox align={'center'} gap={8} horizontal justify={'space-between'} width={'100%'}>
-        <Flexbox align={'center'} gap={16} horizontal justify={'flex-start'}>
-          <ModelIcon model={identifier} size={48} type={'avatar'} />
-          <Flexbox gap={2}>
-            <h1 className={styles.title}>{data.meta.title}</h1>
+    <Flexbox gap={12}>
+      <Flexbox align={'flex-start'} gap={16} horizontal width={'100%'}>
+        <ModelIcon model={identifier} 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={{ color: theme.colorTextSecondary }}
+              style={{
+                overflow: 'hidden',
+                position: 'relative',
+              }}
             >
-              <div>{identifier}</div>
-              {releasedAt && (
-                <time className={styles.time} dateTime={dayjs(releasedAt).toISOString()}>
-                  {releasedAt}
-                </time>
-              )}
+              <Text
+                as={'h1'}
+                ellipsis={{ rows: 1 }}
+                style={{ fontSize: mobile ? 18 : 24, margin: 0 }}
+                title={identifier}
+              >
+                {displayName || identifier}
+              </Text>
+            </Flexbox>
+            <Flexbox align={'center'} gap={6} horizontal>
+              {type && <ModelTypeIcon type={type} />}
             </Flexbox>
           </Flexbox>
-        </Flexbox>
-        {!mobile && (
-          <Flexbox align={'center'} gap={4} horizontal justify={'flex-end'}>
-            <Link href={'/discover/models'}>
-              <Button className={styles.tag} shape={'round'} size={'small'}>
-                {t('tab.models')}
-              </Button>
-            </Link>
+          <Flexbox align={'center'} gap={4} horizontal>
+            <span>{identifier}</span>
+            <Icon icon={DotIcon} />
+            <ModelInfoTags
+              contextWindowTokens={contextWindowTokens}
+              directionReverse
+              {...abilities}
+            />
+            <Icon icon={DotIcon} />
+            <PublishedTime
+              className={styles.time}
+              date={releasedAt as string}
+              template={'MMM DD, YYYY'}
+            />
           </Flexbox>
-        )}
+        </Flexbox>
       </Flexbox>
-      {data.meta.description && <div>{t(`${identifier}.description`, { ns: 'models' })}</div>}
-      <ModelInfoTags directionReverse {...data.meta} />
+      <div
+        style={{
+          color: theme.colorTextSecondary,
+        }}
+      >
+        {t(`${identifier}.description`)}
+      </div>
     </Flexbox>
   );
 });