@lobehub/chat 1.96.19 → 1.97.0

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

@@ -0,0 +1,60 @@
+import { ModelIcon } 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 { DiscoverProviderDetailModelItem } 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<DiscoverProviderDetailModelItem>(({ id, displayName }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('models');
+  return (
+    <Block gap={12} horizontal key={id} padding={12} variant={'outlined'}>
+      <ModelIcon model={id} size={40} style={{ flex: 'none' }} type={'avatar'} />
+      <Flexbox
+        flex={1}
+        gap={6}
+        style={{
+          overflow: 'hidden',
+        }}
+      >
+        <Text as={'h2'} className={styles.title} ellipsis>
+          {displayName || id}
+        </Text>
+        <Text
+          as={'p'}
+          className={styles.desc}
+          ellipsis={{
+            rows: 2,
+          }}
+        >
+          {t(`${id}.description`)}
+        </Text>
+      </Flexbox>
+    </Block>
+  );
+});
+
+export default RelatedItem;

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

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import qs from 'query-string';
+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 { models = [], identifier } = useDetailContext();
+
+  return (
+    <Flexbox gap={16}>
+      <Title
+        more={t('models.details.related.more')}
+        moreLink={qs.stringifyUrl({
+          query: {
+            category: identifier,
+          },
+          url: '/discover/model',
+        })}
+      >
+        {t('models.details.related.listTitle')}
+      </Title>
+      <Flexbox gap={8}>
+        {models?.slice(0, 6)?.map((item, index) => {
+          const link = urlJoin('/discover/model', item.id);
+          return (
+            <Link href={link} key={index} style={{ color: 'inherit', overflow: 'hidden' }}>
+              <Item {...item} />
+            </Link>
+          );
+        })}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Related;

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

@@ -0,0 +1,44 @@
+import { ScrollShadow } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useQuery } from '@/hooks/useQuery';
+import { ProviderNavKey } from '@/types/discover';
+
+import ActionButton from './ActionButton';
+import Related from './Related';
+import RelatedModels from './RelatedModels';
+
+const Sidebar = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { activeTab = ProviderNavKey.Overview } = useQuery() as { activeTab: ProviderNavKey };
+
+  if (mobile) {
+    return (
+      <Flexbox gap={32}>
+        <ActionButton />
+      </Flexbox>
+    );
+  }
+
+  return (
+    <ScrollShadow
+      flex={'none'}
+      gap={32}
+      hideScrollBar
+      size={4}
+      style={{
+        maxHeight: 'calc(100vh - 76px)',
+        paddingBottom: 24,
+        position: 'sticky',
+        top: 0,
+      }}
+      width={360}
+    >
+      <ActionButton />
+      {activeTab !== ProviderNavKey.Related && <Related />}
+      {activeTab !== ProviderNavKey.Overview && <RelatedModels />}
+    </ScrollShadow>
+  );
+});
+
+export default Sidebar;

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

@@ -0,0 +1 @@
+export { DetailsLoading as default } from '../../../components/ListLoading';

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

@@ -0,0 +1,103 @@
+import { notFound } from 'next/navigation';
+import urlJoin from 'url-join';
+
+import StructuredData from '@/components/StructuredData';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { DiscoverService } from '@/server/services/discover';
+import { translation } from '@/server/translation';
+import { PageProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
+
+import Client from './Client';
+
+type DiscoverPageProps = PageProps<{ slugs: string[]; variants: string }, { version?: string }>;
+
+const getSharedProps = async (props: DiscoverPageProps) => {
+  const [params, { isMobile, locale: hl }] = await Promise.all([
+    props.params,
+    RouteVariants.getVariantsFromProps(props),
+  ]);
+  const { slugs } = params;
+  const identifier = decodeURIComponent(slugs.join('/'));
+  const discoverService = new DiscoverService();
+  const [{ t, locale }, { t: td }, data] = await Promise.all([
+    translation('metadata', hl),
+    translation('providers', hl),
+    discoverService.getProviderDetail({ identifier }),
+  ]);
+  return {
+    data,
+    identifier,
+    isMobile,
+    locale,
+    t,
+    td,
+  };
+};
+
+export const generateMetadata = async (props: DiscoverPageProps) => {
+  const { data, t, td, locale, identifier } = await getSharedProps(props);
+  if (!data) return;
+
+  const { name, models = [] } = data;
+
+  return {
+    authors: [
+      { name: name },
+      { name: 'LobeHub', url: 'https://github.com/lobehub' },
+      { name: 'LobeChat', url: 'https://github.com/lobehub/lobe-chat' },
+    ],
+    ...metadataModule.generate({
+      alternate: true,
+      description: td(`${identifier}.description`) || t('discover.providers.description'),
+      locale,
+      tags: models.map((item) => item.displayName || item.id) || [],
+      title: [name, t('discover.providers.title')].join(' · '),
+      url: urlJoin('/discover/provider', identifier),
+    }),
+    other: {
+      'article:author': name,
+      'article:published_time': new Date().toISOString(),
+      'robots': 'index,follow,max-image-preview:large',
+    },
+  };
+};
+
+export const generateStaticParams = async () => [];
+
+const Page = async (props: DiscoverPageProps) => {
+  const { data, t, td, locale, identifier, isMobile } = await getSharedProps(props);
+  if (!data) return notFound();
+
+  const { models, name } = data;
+
+  const ld = ldModule.generate({
+    article: {
+      author: [name],
+      enable: true,
+      identifier,
+      tags: models.map((item) => item.displayName || item.id) || [],
+    },
+    date: new Date().toISOString(),
+    description: td(`${identifier}.description`) || t('discover.providers.description'),
+    locale,
+    title: [name, t('discover.providers.title')].join(' · '),
+    url: urlJoin('/discover/provider', identifier),
+    webpage: {
+      enable: true,
+      search: true,
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <Client identifier={identifier} mobile={isMobile} />
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverProviderDetail';
+
+export default Page;

package/src/app/[variants]/(main)/discover/(list)/(home)/Client.tsx

@@ -3,38 +3,41 @@
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { DiscoverAssistantItem, DiscoverModelItem, DiscoverPlugintem } from '@/types/discover';
+import { useDiscoverStore } from '@/store/discover';
 
 import Title from '../../components/Title';
-import AssistantList from './features/AssistantList';
-import ModelList from './features/ModelList';
-import PluginList from './features/PluginList';
+import AssistantList from '../assistant/features/List';
+import McpList from '../mcp/features/List';
+import Loading from './loading';
 
-interface ClientProps {
-  assistantList: DiscoverAssistantItem[];
-  modelList: DiscoverModelItem[];
-  pluginList: DiscoverPlugintem[];
-}
-
-const Client = memo<ClientProps>(({ modelList, assistantList, pluginList }) => {
+const Client = memo<{ mobile?: boolean }>(() => {
   const { t } = useTranslation('discover');
+  const useAssistantList = useDiscoverStore((s) => s.useAssistantList);
+  const useMcpList = useDiscoverStore((s) => s.useFetchMcpList);
+
+  const { data: assistantList, isLoading: assistantLoading } = useAssistantList({
+    page: 1,
+    pageSize: 12,
+  });
+
+  const { data: mcpList, isLoading: pluginLoading } = useMcpList({
+    page: 1,
+    pageSize: 12,
+  });
+
+  if (assistantLoading || pluginLoading || !assistantList || !mcpList) return <Loading />;
+
   return (
     <>
-      <Title more={t('home.more')} moreLink={'/discover/assistants'}>
+      <Title more={t('home.more')} moreLink={'/discover/assistant'}>
         {t('home.featuredAssistants')}
       </Title>
-      <AssistantList data={assistantList} />
+      <AssistantList data={assistantList.items} rows={4} />
       <div />
-      <Title more={t('home.more')} moreLink={'/discover/plugins'}>
+      <Title more={t('home.more')} moreLink={'/discover/plugin'}>
         {t('home.featuredTools')}
       </Title>
-      <PluginList data={pluginList} />
-      <div />
-      <Title more={t('home.more')} moreLink={'/discover/models'}>
-        {t('home.featuredModels')}
-      </Title>
-      <div />
-      <ModelList data={modelList} />
+      <McpList data={mcpList.items} rows={4} />
     </>
   );
 });

package/src/app/[variants]/(main)/discover/(list)/(home)/loading.tsx

@@ -1 +1 @@
-export { HomeLoading as default } from '../../components/ListLoading';
+export { default } from '../../components/ListLoading';

package/src/app/[variants]/(main)/discover/(list)/(home)/page.tsx

@@ -1,69 +1,44 @@
 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 { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
+import { parsePageMetaProps } from '@/utils/server/pageProps';
 
 import Client from './Client';
 
-interface DiscoverPageProps extends DynamicLayoutProps {
-  searchParams: Promise<{ hl?: Locales }>;
-}
-
-const getSharedProps = async (props: DiscoverPageProps) => {
-  const searchParams = await props.searchParams;
-  const hl = await RouteVariants.getLocale(props);
-  const { t, locale } = await translation('metadata', searchParams?.hl || hl);
-  return {
-    locale,
-    t,
-  };
-};
-
-export const generateMetadata = async (props: DiscoverPageProps) => {
-  const { locale, t } = await getSharedProps(props);
+export const generateMetadata = async (props: DynamicLayoutProps) => {
+  const { locale, t } = await parsePageMetaProps(props);
   return metadataModule.generate({
     alternate: true,
-    description: t('discover.description'),
+    description: t('discover.home.description'),
     locale,
-    title: t('discover.title'),
+    title: t('discover.home.title'),
     url: '/discover',
   });
 };
 
-const Page = async (props: DiscoverPageProps) => {
-  const { locale, t } = await getSharedProps(props);
+const Page = async (props: DynamicLayoutProps) => {
+  const { locale, t, isMobile } = await parsePageMetaProps(props);
+
   const ld = ldModule.generate({
-    description: t('discover.description'),
+    description: t('discover.home.description'),
     locale,
-    title: t('discover.title'),
+    title: t('discover.home.title'),
     url: '/discover',
     webpage: {
       enable: true,
-      search: '/discover/search',
+      search: true,
     },
   });
 
-  const discoverService = new DiscoverService();
-  const assistantList = await discoverService.getAssistantList(locale);
-  const pluginList = await discoverService.getPluginList(locale);
-  const modelList = await discoverService.getModelList(locale);
-
   return (
     <>
       <StructuredData ld={ld} />
-      <Client
-        assistantList={assistantList.slice(0, 16)}
-        modelList={modelList.slice(0, 8)}
-        pluginList={pluginList.slice(0, 8)}
-      />
+      <Client mobile={isMobile} />
     </>
   );
 };
 
-Page.DisplayName = 'Discover';
+Page.DisplayName = 'DiscoverHome';
 
 export default Page;

package/src/app/[variants]/(main)/discover/(list)/_layout/Desktop/Nav.tsx

@@ -8,11 +8,14 @@ import { memo, useState } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
+import { withSuspense } from '@/components/withSuspense';
+import { useQuery } from '@/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { DiscoverTab } from '@/types/discover';
 
-import { MAX_WIDTH } from '../../../features/const';
+import { MAX_WIDTH, SCROLL_PARENT_ID } from '../../../features/const';
 import { useNav } from '../../../features/useNav';
+import SortButton from '../../features/SortButton';
 import { useScroll } from './useScroll';
 
 export const useStyles = createStyles(({ cx, stylish, css, token }) => ({
@@ -42,6 +45,7 @@ const Nav = memo(() => {
   const pathname = usePathname();
   const { cx, styles } = useStyles();
   const { items, activeKey } = useNav();
+  const { q } = useQuery() as { q?: string };
   const router = useQueryRoute();
 
   useScroll((scroll, delta) => {
@@ -55,11 +59,13 @@ const Nav = memo(() => {
   });
 
   const isHome = pathname === '/discover';
-  const isProviders = pathname === '/discover/providers';
 
   return (
     <Center className={cx(styles.container, hide && styles.hide)} height={46}>
       <Flexbox
+        align={'center'}
+        horizontal
+        justify={'space-between'}
         style={{
           maxWidth: MAX_WIDTH,
           width: '100%',
@@ -72,18 +78,19 @@ const Nav = memo(() => {
             items={items as any}
             onChange={(key) => {
               const href = key === DiscoverTab.Home ? '/discover' : urlJoin('/discover', key);
-              router.push(href);
+              router.push(href, { query: q ? { q } : {}, replace: true });
+              const scrollableElement = document?.querySelector(`#${SCROLL_PARENT_ID}`);
+              if (!scrollableElement) return;
+              scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
             }}
             style={{
               fontWeight: 500,
             }}
           />
         </Flexbox>
-        {!isHome && !isProviders && (
+        {!isHome && (
           <Flexbox align={'center'} gap={4} horizontal>
-            {/* ↓ cloud slot ↓ */}
-
-            {/* ↑ cloud slot ↑ */}
+            <SortButton />
           </Flexbox>
         )}
       </Flexbox>
@@ -91,4 +98,4 @@ const Nav = memo(() => {
   );
 });
 
-export default Nav;
+export default withSuspense(Nav);

package/src/app/[variants]/(main)/discover/(list)/_layout/Mobile/Header.tsx

@@ -10,7 +10,7 @@ import { Flexbox } from 'react-layout-kit';
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
-import StoreSearchBar from '../../../features/StoreSearchBar';
+import StoreSearchBar from '../../../features/Search';
 import Nav from './Nav';
 
 const useStyles = createStyles(({ css, token }) => ({

package/src/app/[variants]/(main)/discover/(list)/_layout/Mobile/Nav.tsx

@@ -9,6 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
 import Menu from '@/components/Menu';
+import { withSuspense } from '@/components/withSuspense';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { DiscoverTab } from '@/types/discover';
 
@@ -91,4 +92,4 @@ const Nav = memo(() => {
   );
 });
 
-export default Nav;
+export default withSuspense(Nav);

package/src/app/[variants]/(main)/discover/(list)/assistant/Client.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { withSuspense } from '@/components/withSuspense';
+import { useQuery } from '@/hooks/useQuery';
+import { useDiscoverStore } from '@/store/discover';
+import { AssistantQueryParams, DiscoverTab } from '@/types/discover';
+
+import Pagination from '../features/Pagination';
+import List from './features/List';
+import Loading from './loading';
+
+const Client = memo<{ mobile?: boolean }>(() => {
+  const { q, page, category, sort, order } = useQuery() as AssistantQueryParams;
+  const useAssistantList = useDiscoverStore((s) => s.useAssistantList);
+  const { data, isLoading } = useAssistantList({
+    category,
+    order,
+    page,
+    pageSize: 21,
+    q,
+    sort,
+  });
+
+  if (isLoading || !data) return <Loading />;
+
+  const { items, currentPage, pageSize, totalCount } = data;
+
+  return (
+    <Flexbox gap={32} width={'100%'}>
+      <List data={items} />
+      <Pagination
+        currentPage={currentPage}
+        pageSize={pageSize}
+        tab={DiscoverTab.Assistants}
+        total={totalCount}
+      />
+    </Flexbox>
+  );
+});
+
+export default withSuspense(Client);

package/src/app/[variants]/(main)/discover/(list)/assistant/features/Category/index.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { Icon, Tag } from '@lobehub/ui';
+import Link from 'next/link';
+import { useRouter } from 'nextjs-toploader/app';
+import qs from 'query-string';
+import { memo, useMemo } from 'react';
+
+import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/discover/features/const';
+import { withSuspense } from '@/components/withSuspense';
+import { useQuery } from '@/hooks/useQuery';
+import { useDiscoverStore } from '@/store/discover';
+import { AssistantCategory } from '@/types/discover';
+
+import CategoryMenu from '../../../../components/CategoryMenu';
+import { useCategory } from './useCategory';
+
+const Category = memo(() => {
+  const useAssistantCategories = useDiscoverStore((s) => s.useAssistantCategories);
+  const { category = 'all', q } = useQuery() as { category?: AssistantCategory; q?: string };
+  const { data: items = [] } = useAssistantCategories({ q });
+  const route = useRouter();
+  const cates = useCategory();
+
+  const genUrl = (key: AssistantCategory) =>
+    qs.stringifyUrl(
+      {
+        query: { category: key === AssistantCategory.All ? null : key, q },
+        url: '/discover/assistant',
+      },
+      { skipNull: true },
+    );
+
+  const handleClick = (key: AssistantCategory) => {
+    route.push(genUrl(key));
+    const scrollableElement = document?.querySelector(`#${SCROLL_PARENT_ID}`);
+    if (!scrollableElement) return;
+    scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
+  };
+
+  const total = useMemo(() => items.reduce((acc, item) => acc + item.count, 0), [items]);
+
+  return (
+    <CategoryMenu
+      items={cates.map((item) => {
+        const itemData = items.find((i) => i.category === item.key);
+        return {
+          extra:
+            item.key === 'all'
+              ? total > 0 && (
+                  <Tag
+                    size={'small'}
+                    style={{
+                      borderRadius: 12,
+                      paddingInline: 6,
+                    }}
+                  >
+                    {total}
+                  </Tag>
+                )
+              : itemData && (
+                  <Tag
+                    size={'small'}
+                    style={{
+                      borderRadius: 12,
+                      paddingInline: 6,
+                    }}
+                  >
+                    {itemData.count}
+                  </Tag>
+                ),
+          ...item,
+          icon: <Icon icon={item.icon} size={18} />,
+          label: <Link href={genUrl(item.key)}>{item.label}</Link>,
+        };
+      })}
+      mode={'inline'}
+      onClick={(v) => handleClick(v.key as AssistantCategory)}
+      selectedKeys={[category]}
+    />
+  );
+});
+
+export default withSuspense(Category);