@lobehub/chat 1.96.20 → 1.97.0

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

@@ -0,0 +1,41 @@
+import { ProviderIcon } from '@lobehub/icons';
+import { uniqBy } from 'lodash-es';
+import { LayoutPanelTopIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
+
+export const useCategory = () => {
+  const { t } = useTranslation('discover');
+
+  const items = useMemo(
+    () =>
+      uniqBy(DEFAULT_MODEL_PROVIDER_LIST, (item) => item.id).map((item) => {
+        return {
+          icon: <ProviderIcon provider={item.id} size={18} type={'mono'} />,
+          key: item.id,
+          label: item.name,
+        };
+      }),
+    [],
+  );
+
+  return useMemo(
+    () => [
+      {
+        icon: LayoutPanelTopIcon,
+        key: 'all',
+        label: t('mcp.categories.all.name'),
+      },
+      ...items,
+    ],
+    [t, items],
+  );
+};
+
+export const useCategoryItem = (key?: string) => {
+  const items = useCategory();
+  if (!key) return;
+  return items.find((item) => item.key === key);
+};

package/src/app/[variants]/(main)/discover/(list)/model/features/List/Item.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { ModelIcon, ProviderIcon } from '@lobehub/icons';
+import { Block, Icon, Tag, Text } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import { ClockIcon } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'nextjs-toploader/app';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { ModelInfoTags } from '@/components/ModelSelect';
+import { DiscoverModelItem } from '@/types/discover';
+
+import PublishedTime from '../../../../../../../../components/PublishedTime';
+import ModelTypeIcon from './ModelTypeIcon';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    author: css`
+      color: ${token.colorTextDescription};
+    `,
+    code: css`
+      font-family: ${token.fontFamilyCode};
+    `,
+    desc: css`
+      flex: 1;
+      margin: 0 !important;
+      color: ${token.colorTextSecondary};
+    `,
+    footer: css`
+      margin-block-start: 16px;
+      border-block-start: 1px dashed ${token.colorBorder};
+      background: ${token.colorBgContainerSecondary};
+    `,
+    secondaryDesc: css`
+      font-size: 12px;
+      color: ${token.colorTextDescription};
+    `,
+    title: css`
+      margin: 0 !important;
+      font-size: 16px !important;
+      font-weight: 500 !important;
+
+      &:hover {
+        color: ${token.colorLink};
+      }
+    `,
+  };
+});
+
+const ModelItem = memo<DiscoverModelItem>(
+  ({ identifier, displayName, contextWindowTokens, releasedAt, type, abilities, providers }) => {
+    const { t } = useTranslation(['models', 'discover']);
+    const { styles } = useStyles();
+    const router = useRouter();
+    const link = urlJoin('/discover/model', identifier);
+    return (
+      <Block
+        clickable
+        height={'100%'}
+        onClick={() => {
+          router.push(link);
+        }}
+        style={{
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+        variant={'outlined'}
+        width={'100%'}
+      >
+        <Flexbox
+          align={'flex-start'}
+          gap={16}
+          horizontal
+          justify={'space-between'}
+          padding={16}
+          width={'100%'}
+        >
+          <Flexbox
+            gap={12}
+            horizontal
+            style={{
+              overflow: 'hidden',
+            }}
+            title={identifier}
+          >
+            <ModelIcon model={identifier} size={40} style={{ flex: 'none' }} type={'avatar'} />
+            <Flexbox
+              flex={1}
+              gap={2}
+              style={{
+                overflow: 'hidden',
+              }}
+            >
+              <Flexbox
+                align={'center'}
+                flex={1}
+                gap={8}
+                horizontal
+                style={{
+                  overflow: 'hidden',
+                }}
+              >
+                <Link href={link} style={{ color: 'inherit', overflow: 'hidden' }}>
+                  <Text as={'h2'} className={styles.title} ellipsis>
+                    {displayName}
+                  </Text>
+                </Link>
+              </Flexbox>
+              <div className={styles.author}>{identifier}</div>
+            </Flexbox>
+          </Flexbox>
+          <Flexbox align={'center'} gap={4} horizontal>
+            <ModelTypeIcon type={type} />
+          </Flexbox>
+        </Flexbox>
+        <Flexbox flex={1} gap={12} paddingInline={16}>
+          <ModelInfoTags
+            contextWindowTokens={contextWindowTokens}
+            directionReverse
+            {...abilities}
+          />
+          <Text
+            as={'p'}
+            className={styles.desc}
+            ellipsis={{
+              rows: 3,
+            }}
+          >
+            {t(`${identifier}.description`)}
+          </Text>
+        </Flexbox>
+        <Flexbox
+          align={'center'}
+          className={styles.footer}
+          horizontal
+          justify={'space-between'}
+          padding={16}
+        >
+          <Flexbox
+            align={'center'}
+            className={styles.secondaryDesc}
+            horizontal
+            justify={'space-between'}
+          >
+            <Flexbox align={'center'} gap={4} horizontal>
+              <Icon icon={ClockIcon} size={14} />
+              <PublishedTime
+                className={styles.secondaryDesc}
+                date={releasedAt || dayjs().toISOString()}
+                template={'MMM DD, YYYY'}
+              />
+            </Flexbox>
+            <Popover
+              arrow={false}
+              content={
+                <Flexbox
+                  gap={6}
+                  horizontal
+                  style={{
+                    maxWidth: 175,
+                  }}
+                  wrap={'wrap'}
+                >
+                  {providers.map((item) => (
+                    <ProviderIcon key={item} provider={item} size={24} />
+                  ))}
+                </Flexbox>
+              }
+            >
+              <Flexbox align={'center'} gap={6} horizontal>
+                {providers.slice(0, 6).map((item) => (
+                  <ProviderIcon key={item} provider={item} size={14} type={'mono'} />
+                ))}
+                {providers.length > 6 && <Tag size={'small'}>{providers.length}</Tag>}
+              </Flexbox>
+            </Popover>
+          </Flexbox>
+        </Flexbox>
+      </Block>
+    );
+  },
+);
+
+export default ModelItem;

package/src/app/[variants]/(main)/discover/(list)/model/features/List/ModelTypeIcon.tsx

@@ -0,0 +1,39 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { startCase } from 'lodash-es';
+import {
+  AudioLines,
+  BoltIcon,
+  ImageIcon,
+  LucideIcon,
+  MessageSquareTextIcon,
+  MicIcon,
+  MusicIcon,
+  PhoneIcon,
+  VideoIcon,
+} from 'lucide-react';
+import { memo } from 'react';
+
+import { AiModelType } from '@/types/aiModel';
+
+const icons: Record<AiModelType, LucideIcon> = {
+  chat: MessageSquareTextIcon,
+  embedding: BoltIcon,
+  image: ImageIcon,
+  realtime: PhoneIcon,
+  stt: MicIcon,
+  text2music: MusicIcon,
+  text2video: VideoIcon,
+  tts: AudioLines,
+};
+
+const ModelTypeIcon = memo<{ size?: number; type: AiModelType }>(({ type, size = 20 }) => {
+  const theme = useTheme();
+  return (
+    <Tooltip title={`${startCase(type)} Model`}>
+      <Icon color={theme.colorTextDescription} icon={icons?.[type]} size={size} />
+    </Tooltip>
+  );
+});
+
+export default ModelTypeIcon;

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { Grid } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import { DiscoverModelItem } from '@/types/discover';
+
+import Item from './Item';
+
+interface ModelListProps {
+  data?: DiscoverModelItem[];
+  rows?: number;
+}
+
+const ModelList = memo<ModelListProps>(({ data = [], rows = 3 }) => {
+  if (data.length === 0)
+    return (
+      <Center height={640}>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+  return (
+    <Grid rows={rows} width={'100%'}>
+      {data.map((item, index) => (
+        <Item key={index} {...item} />
+      ))}
+    </Grid>
+  );
+});
+
+export default ModelList;

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

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

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

@@ -0,0 +1,44 @@
+import StructuredData from '@/components/StructuredData';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { DynamicLayoutProps } from '@/types/next';
+import { parsePageMetaProps } from '@/utils/server/pageProps';
+
+import Client from './Client';
+
+export const generateMetadata = async (props: DynamicLayoutProps) => {
+  const { locale, t } = await parsePageMetaProps(props);
+  return metadataModule.generate({
+    alternate: true,
+    description: t('discover.models.description'),
+    locale,
+    title: t('discover.models.title'),
+    url: '/discover/model',
+  });
+};
+
+const Page = async (props: DynamicLayoutProps) => {
+  const { locale, t } = await parsePageMetaProps(props);
+
+  const ld = ldModule.generate({
+    description: t('discover.models.description'),
+    locale,
+    title: t('discover.models.title'),
+    url: '/discover/model',
+    webpage: {
+      enable: true,
+      search: '/discover/model',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <Client />
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverModels';
+
+export default Page;

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

@@ -0,0 +1,43 @@
+'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 { DiscoverTab, ProviderQueryParams } 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, sort, order } = useQuery() as ProviderQueryParams;
+  const useProviderList = useDiscoverStore((s) => s.useProviderList);
+  const { data, isLoading } = useProviderList({
+    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.Providers}
+        total={totalCount}
+      />
+    </Flexbox>
+  );
+});
+
+export default withSuspense(Client);

package/src/app/[variants]/(main)/discover/(list)/provider/features/List/Item.tsx

@@ -0,0 +1,136 @@
+import { Github, ModelTag, ProviderCombine } from '@lobehub/icons';
+import { ActionIcon, Block, MaskShadow, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { GlobeIcon } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'nextjs-toploader/app';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { DiscoverProviderItem } from '@/types/discover';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    author: css`
+      color: ${token.colorTextDescription};
+    `,
+    code: css`
+      font-family: ${token.fontFamilyCode};
+    `,
+    desc: css`
+      flex: none;
+      margin: 0 !important;
+      color: ${token.colorTextSecondary};
+    `,
+    footer: css`
+      margin-block-start: 16px;
+      border-block-start: 1px dashed ${token.colorBorder};
+      background: ${token.colorBgContainerSecondary};
+    `,
+    secondaryDesc: css`
+      font-size: 12px;
+      color: ${token.colorTextDescription};
+    `,
+    title: css`
+      margin: 0 !important;
+      font-size: 16px !important;
+      font-weight: 500 !important;
+
+      &:hover {
+        color: ${token.colorLink};
+      }
+    `,
+  };
+});
+
+const ProviderItem = memo<DiscoverProviderItem>(
+  ({ url, name, description, identifier, models }) => {
+    const { styles, theme } = useStyles();
+    const router = useRouter();
+    const link = urlJoin('/discover/provider', identifier);
+    const { t } = useTranslation(['discover', 'providers']);
+
+    return (
+      <Block
+        clickable
+        height={'100%'}
+        onClick={() => {
+          router.push(link);
+        }}
+        style={{
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+        variant={'outlined'}
+        width={'100%'}
+      >
+        <Flexbox
+          align={'flex-start'}
+          gap={16}
+          horizontal
+          justify={'space-between'}
+          padding={16}
+          width={'100%'}
+        >
+          <Flexbox
+            style={{
+              overflow: 'hidden',
+            }}
+            title={identifier}
+          >
+            <Link href={link} style={{ color: 'inherit', overflow: 'hidden' }}>
+              <ProviderCombine provider={identifier} size={28} style={{ flex: 'none' }} />
+            </Link>
+            <div className={styles.author}>@{name}</div>
+          </Flexbox>
+          <Flexbox align={'center'} horizontal>
+            <Link href={url} onClick={(e) => e.stopPropagation()} target={'_blank'}>
+              <ActionIcon color={theme.colorTextDescription} icon={GlobeIcon} />
+            </Link>
+            <Link
+              href={`https://github.com/lobehub/lobe-chat/blob/main/src/config/modelProviders/${identifier}.ts`}
+              onClick={(e) => e.stopPropagation()}
+              target={'_blank'}
+            >
+              <ActionIcon fill={theme.colorTextDescription} icon={Github} />
+            </Link>
+          </Flexbox>
+        </Flexbox>
+        <Flexbox flex={1} gap={12} paddingInline={16}>
+          {description && (
+            <Text
+              className={styles.desc}
+              ellipsis={{
+                rows: 3,
+              }}
+            >
+              {t(`${identifier}.description`, { ns: 'providers' })}
+            </Text>
+          )}
+        </Flexbox>
+        <Flexbox
+          align={'center'}
+          className={styles.footer}
+          horizontal
+          justify={'space-between'}
+          padding={16}
+        >
+          <MaskShadow gap={6} horizontal position={'right'} size={10} width={'100%'}>
+            {models
+              .slice(0, 6)
+              .filter(Boolean)
+              .map((tag: string) => (
+                <Link href={urlJoin('/discover/model', tag)} key={tag}>
+                  <ModelTag model={tag} style={{ margin: 0 }} />
+                </Link>
+              ))}
+          </MaskShadow>
+        </Flexbox>
+      </Block>
+    );
+  },
+);
+
+export default ProviderItem;

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { Grid } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import { DiscoverProviderItem } from '@/types/discover';
+
+import Item from './Item';
+
+export interface ProvoderListProps {
+  data?: DiscoverProviderItem[];
+  rows?: number;
+}
+
+const ProvoderList = memo<ProvoderListProps>(({ data = [], rows = 3 }) => {
+  if (data.length === 0)
+    return (
+      <Center height={640}>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+  return (
+    <Grid rows={rows} width={'100%'}>
+      {data.map((item, index) => (
+        <Item key={index} {...item} />
+      ))}
+    </Grid>
+  );
+});
+
+export default ProvoderList;

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

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

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

@@ -0,0 +1,44 @@
+import StructuredData from '@/components/StructuredData';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { DynamicLayoutProps } from '@/types/next';
+import { parsePageMetaProps } from '@/utils/server/pageProps';
+
+import Client from './Client';
+
+export const generateMetadata = async (props: DynamicLayoutProps) => {
+  const { locale, t } = await parsePageMetaProps(props);
+  return metadataModule.generate({
+    alternate: true,
+    description: t('discover.providers.description'),
+    locale,
+    title: t('discover.providers.title'),
+    url: '/discover/provider',
+  });
+};
+
+const Page = async (props: DynamicLayoutProps) => {
+  const { locale, t, isMobile } = await parsePageMetaProps(props);
+
+  const ld = ldModule.generate({
+    description: t('discover.providers.description'),
+    locale,
+    title: t('discover.providers.title'),
+    url: '/discover/provider',
+    webpage: {
+      enable: true,
+      search: '/discover/provider',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <Client mobile={isMobile} />
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverProviders';
+
+export default Page;

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

@@ -8,7 +8,7 @@ import { ProductLogo } from '@/components/Branding';
 import { isCustomBranding } from '@/const/version';
 
 import CreateButton from '../../features/CreateButton';
-import StoreSearchBar from '../../features/StoreSearchBar';
+import StoreSearchBar from '../../features/Search';
 
 const Header = memo(() => {
   return (

package/src/app/[variants]/(main)/discover/components/CategoryContainer.tsx

@@ -1,17 +1,19 @@
+import { ScrollShadow } from '@lobehub/ui';
 import { PropsWithChildren, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
-const CategoryContainer = memo<PropsWithChildren<{ top?: number }>>(({ children, top = 52 }) => {
+const CategoryContainer = memo<PropsWithChildren<{ top?: number }>>(({ children, top = 64 }) => {
   return (
-    <Flexbox
+    <ScrollShadow
       as={'aside'}
       flex={'none'}
       height={`calc(100vh - ${top * 2 + 4}px)`}
-      style={{ overflowX: 'hidden', overflowY: 'hidden', position: 'sticky', top }}
+      hideScrollBar
+      size={4}
+      style={{ paddingBottom: 16, position: 'sticky', top }}
       width={220}
     >
       {children}
-    </Flexbox>
+    </ScrollShadow>
   );
 });