@lobehub/chat 1.17.7 → 1.18.0

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

@@ -0,0 +1,118 @@
+'use client';
+
+import { ChatHeader } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { DiscoverTab } from '@/types/discover';
+
+import { MAX_WIDTH } from '../../../features/const';
+import { useNav } from '../../../features/useNav';
+import { useScroll } from './useScroll';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  activeNavItem: css`
+    background: ${token.colorFillTertiary};
+  `,
+  container: css`
+    position: absolute;
+    z-index: 9;
+    inset-block-start: 64px;
+    inset-inline: 0 0;
+
+    height: auto;
+    padding-block: 4px;
+
+    border-color: transparent;
+
+    transition: all 0.3s ${token.motionEaseInOut};
+  `,
+  hide: css`
+    transform: translateY(-150%);
+  `,
+  navItem: css`
+    font-weight: 500;
+  `,
+}));
+
+const Nav = memo(() => {
+  const [hide, setHide] = useState(false);
+  const pathname = usePathname();
+  const { cx, styles } = useStyles();
+  const { items, activeKey } = useNav();
+  const router = useQueryRoute();
+
+  useScroll((scroll, delta) => {
+    if (delta < 0) {
+      setHide(false);
+      return;
+    }
+    if (scroll > 600 && delta > 0) {
+      setHide(true);
+    }
+  });
+
+  const isHome = pathname === '/discover';
+  const isProviders = pathname === '/discover/providers';
+
+  const navBar = items
+    .map((item: any) => {
+      const isActive = item.key === activeKey;
+
+      const href = item.key === DiscoverTab.Home ? '/discover' : urlJoin('/discover', item.key);
+
+      return (
+        <Link
+          href={href}
+          key={item.key}
+          onClick={(e) => {
+            e.preventDefault();
+            router.push(href);
+          }}
+        >
+          <Button
+            className={cx(styles.navItem, isActive && styles.activeNavItem)}
+            icon={item.icon}
+            type={'text'}
+          >
+            {item.label}
+          </Button>
+        </Link>
+      );
+    })
+    .filter(Boolean);
+
+  return (
+    <ChatHeader
+      className={cx(styles.container, hide && styles.hide)}
+      styles={{
+        center: {
+          flex: 'none',
+          justifyContent: 'space-between',
+          maxWidth: MAX_WIDTH,
+          width: '100%',
+        },
+        left: { flex: 1 },
+        right: { flex: 1 },
+      }}
+    >
+      <Flexbox align={'center'} gap={4} horizontal>
+        {navBar}
+      </Flexbox>
+      {!isHome && !isProviders && (
+        <Flexbox align={'center'} gap={4} horizontal>
+          {/* ↓ cloud slot ↓ */}
+          {/* ↑ cloud slot ↑ */}
+        </Flexbox>
+      )}
+    </ChatHeader>
+  );
+});
+
+export default Nav;

package/src/app/(main)/discover/(list)/_layout/Desktop/index.tsx

@@ -0,0 +1,37 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Footer from '@/features/Setting/Footer';
+
+import { MAX_WIDTH, SCROLL_PARENT_ID } from '../../../features/const';
+import Nav from './Nav';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <>
+      <Nav />
+      <Flexbox
+        align={'center'}
+        flex={1}
+        id={SCROLL_PARENT_ID}
+        padding={16}
+        style={{ overflowX: 'hidden', overflowY: 'scroll', position: 'relative' }}
+        width={'100%'}
+      >
+        <Flexbox
+          gap={16}
+          style={{ maxWidth: MAX_WIDTH, paddingTop: 64, position: 'relative' }}
+          width={'100%'}
+        >
+          {children}
+          <div />
+          <Footer />
+        </Flexbox>
+      </Flexbox>
+    </>
+  );
+};
+
+Layout.displayName = 'DesktopDiscoverStoreLayout';
+
+export default Layout;

package/src/app/(main)/discover/(list)/_layout/Desktop/useScroll.ts

@@ -0,0 +1,33 @@
+import { throttle } from 'lodash-es';
+import { useEffect, useRef } from 'react';
+
+import { isOnServerSide } from '@/utils/env';
+
+import { SCROLL_PARENT_ID } from '../../../features/const';
+
+export const useScroll = (onScroll: (scroll: number, delta: number) => void) => {
+  const lastScrollTop = useRef(0);
+
+  useEffect(() => {
+    if (isOnServerSide) return;
+
+    const element = document.querySelector(`#${SCROLL_PARENT_ID}`);
+
+    if (!element) return;
+
+    const handleScroll = throttle(() => {
+      const currentScroll = element.scrollTop;
+      const delta = currentScroll - lastScrollTop.current;
+
+      onScroll?.(currentScroll, delta);
+
+      lastScrollTop.current = currentScroll;
+    });
+
+    element.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      element.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+};

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { ActionIcon, MobileNavBar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { SearchIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+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 Nav from './Nav';
+
+const useStyles = createStyles(({ css, token }) => ({
+  search: css`
+    position: absolute;
+    z-index: 10;
+    inset-block-start: 0;
+    inset-inline: 0 0;
+
+    background: ${token.colorBgLayout};
+  `,
+}));
+
+const Header = memo(() => {
+  const { styles } = useStyles();
+  const [showSearch, setShowSearch] = useState(false);
+
+  return (
+    <MobileNavBar
+      center={
+        showSearch && (
+          <Flexbox align={'center'} className={styles.search} paddingBlock={8} paddingInline={16}>
+            <StoreSearchBar mobile onBlur={() => setShowSearch(false)} />
+          </Flexbox>
+        )
+      }
+      contentStyles={{ center: { display: 'none' } }}
+      left={<Nav />}
+      right={
+        showSearch ? (
+          <Flexbox align={'center'} className={styles.search} paddingBlock={8} paddingInline={16}>
+            <StoreSearchBar mobile onBlur={() => setShowSearch(false)} />
+          </Flexbox>
+        ) : (
+          <ActionIcon
+            icon={SearchIcon}
+            onClick={() => setShowSearch(true)}
+            size={MOBILE_HEADER_ICON_SIZE}
+          />
+        )
+      }
+      style={{
+        ...mobileHeaderSticky,
+        overflow: 'unset',
+      }}
+    />
+  );
+});
+
+export default Header;

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

@@ -0,0 +1,94 @@
+'use client';
+
+import { ActionIcon } from '@lobehub/ui';
+import { Drawer } from 'antd';
+import { createStyles } from 'antd-style';
+import { MenuIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import Menu from '@/components/Menu';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { DiscoverTab } from '@/types/discover';
+
+import { useNav } from '../../../features/useNav';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  activeNavItem: css`
+    background: ${token.colorFillTertiary};
+  `,
+  container: css`
+    height: auto;
+    padding-block: 4px;
+    background: ${token.colorBgLayout};
+  `,
+  navItem: css`
+    font-weight: 500;
+  `,
+  title: css`
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.2;
+  `,
+}));
+
+const Nav = memo(() => {
+  const [open, setOpen] = useState(false);
+  const { styles, theme } = useStyles();
+  const { items, activeKey, activeItem } = useNav();
+  const router = useQueryRoute();
+
+  return (
+    <>
+      <Flexbox align={'center'} className={styles.title} gap={4} horizontal>
+        <ActionIcon
+          color={theme.colorText}
+          icon={MenuIcon}
+          onClick={() => setOpen(true)}
+          size={{ blockSize: 32, fontSize: 18 }}
+        />
+        {activeItem?.label}
+      </Flexbox>
+
+      <Drawer
+        bodyStyle={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 20,
+          justifyContent: 'space-between',
+          padding: 16,
+        }}
+        headerStyle={{ display: 'none' }}
+        onClick={() => setOpen(false)}
+        onClose={() => setOpen(false)}
+        open={open}
+        placement={'left'}
+        rootStyle={{ position: 'absolute' }}
+        style={{
+          background: theme.colorBgLayout,
+          borderRight: `1px solid ${theme.colorSplit}`,
+          paddingTop: 44,
+        }}
+        width={260}
+        zIndex={10}
+      >
+        <Menu
+          items={items}
+          onClick={({ key }) => {
+            if (key === DiscoverTab.Home) {
+              router.push('/discover');
+            } else {
+              router.push(urlJoin('/discover', key));
+            }
+          }}
+          selectable
+          selectedKeys={[activeKey]}
+          variant={'compact'}
+        />
+      </Drawer>
+    </>
+  );
+});
+
+export default Nav;

package/src/app/(main)/discover/(list)/_layout/Mobile/index.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+import Footer from '@/features/Setting/Footer';
+
+import { SCROLL_PARENT_ID } from '../../../features/const';
+import Header from './Header';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <MobileContentLayout
+      gap={16}
+      header={<Header />}
+      id={SCROLL_PARENT_ID}
+      style={{ paddingInline: 16, paddingTop: 8 }}
+      withNav
+    >
+      {children}
+      <div />
+      <Footer />
+    </MobileContentLayout>
+  );
+};
+
+Layout.displayName = 'MobileDiscoverLayout';
+
+export default Layout;

package/src/app/(main)/discover/(list)/assistants/[slug]/page.tsx

@@ -0,0 +1,64 @@
+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 { AssistantCategory } from '@/types/discover';
+import { isMobileDevice } from '@/utils/responsive';
+
+import List from '../features/List';
+
+type Props = { params: { slug: AssistantCategory }; searchParams: { hl?: Locales } };
+
+export const generateMetadata = async ({ params, searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const { t: td } = await translation('discover', searchParams?.hl);
+
+  return metadataModule.generate({
+    alternate: true,
+    description: t('discover.assistants.description'),
+    locale,
+    title: [td(`category.assistant.${params.slug}`), t('discover.assistants.title')].join(' · '),
+    url: urlJoin('/discover/assistants', params.slug),
+  });
+};
+
+const Page = async ({ params, searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const { t: td } = await translation('discover', searchParams?.hl);
+  const mobile = isMobileDevice();
+
+  const discoverService = new DiscoverService();
+  const items = await discoverService.getAssistantCategory(locale, params.slug);
+
+  const ld = ldModule.generate({
+    description: t('discover.assistants.description'),
+    title: [td(`category.assistant.${params.slug}`), t('discover.assistants.title')].join(' · '),
+    url: urlJoin('/discover/assistants', params.slug),
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <List category={params.slug} items={items} mobile={mobile} />
+    </>
+  );
+};
+
+export const generateStaticParams = async () => {
+  const cates = Object.values(AssistantCategory);
+  return cates.map((cate) => ({
+    slug: cate,
+  }));
+};
+
+Page.DisplayName = 'DiscoverAssistantsCategory';
+
+export default Page;

package/src/app/(main)/discover/(list)/assistants/_layout/Desktop.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import CategoryContainer from '../../../components/CategoryContainer';
+import Category from '../features/Category';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
+      <CategoryContainer>
+        <Category />
+      </CategoryContainer>
+      <Flexbox flex={1} gap={16}>
+        {children}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+Layout.displayName = 'DesktopDiscoverAssistantsLayout';
+
+export default Layout;

package/src/app/(main)/discover/(list)/assistants/_layout/Mobile.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return children;
+};
+
+Layout.displayName = 'MobileDiscoverAssistantsLayout';
+
+export default Layout;

package/src/app/(main)/discover/(list)/assistants/features/Card.tsx

@@ -0,0 +1,176 @@
+import { Avatar, Tag } from '@lobehub/ui';
+import { Skeleton, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { startCase } from 'lodash-es';
+import dynamic from 'next/dynamic';
+import qs from 'query-string';
+import { memo } from 'react';
+import { Center, Flexbox, FlexboxProps } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { DiscoverAssistantItem } from '@/types/discover';
+
+import CardBanner from '../../../components/CardBanner';
+import GitHubAvatar from '../../../components/GitHubAvatar';
+import { useCategoryItem } from '../../assistants/features/useCategory';
+
+const Link = dynamic(() => import('next/link'), {
+  loading: () => <Skeleton.Button size={'small'} style={{ height: 22 }} />,
+  ssr: false,
+});
+
+const { Paragraph, Title } = 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%;
+    min-height: 162px;
+
+    background: ${token.colorBgContainer};
+    border-radius: ${token.borderRadiusLG}px;
+    box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
+      inset;
+
+    transition: box-shadow 0.2s ${token.motionEaseInOut};
+
+    &:hover {
+      box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillSecondary : token.colorFill} inset;
+    }
+  `,
+  desc: css`
+    min-height: 44px;
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+
+  time: css`
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin-block-end: 0 !important;
+    font-weight: bold;
+  `,
+}));
+
+export interface AssistantCardProps
+  extends Omit<DiscoverAssistantItem, 'suggestions' | 'socialData' | 'config'>,
+    Omit<FlexboxProps, 'children'> {
+  showCategory?: boolean;
+  variant?: 'default' | 'compact';
+}
+
+const AssistantCard = memo<AssistantCardProps>(
+  ({ showCategory, className, meta, createdAt, author, variant, ...rest }) => {
+    const { avatar, title, description, tags = [], category } = meta;
+    const { cx, styles, theme } = useStyles();
+    const categoryItem = useCategoryItem(category, 12);
+    const isCompact = variant === 'compact';
+
+    const user = (
+      <Flexbox
+        align={'center'}
+        gap={6}
+        horizontal
+        style={{ color: theme.colorTextSecondary, fontSize: 12 }}
+      >
+        <GitHubAvatar size={18} username={author} />
+        <span>{author}</span>
+      </Flexbox>
+    );
+
+    return (
+      <Flexbox className={cx(styles.container, className)} gap={24} {...rest}>
+        {!isCompact && <CardBanner avatar={avatar} />}
+        <Flexbox gap={12} padding={16}>
+          <Flexbox
+            align={isCompact ? 'flex-start' : 'flex-end'}
+            gap={16}
+            horizontal
+            justify={'space-between'}
+            style={{ position: 'relative' }}
+            width={'100%'}
+          >
+            <Flexbox
+              gap={8}
+              style={{ overflow: 'hidden', paddingTop: isCompact ? 4 : 0, position: 'relative' }}
+            >
+              <Title
+                className={styles.title}
+                ellipsis={{ rows: 1, tooltip: title }}
+                level={3}
+                style={{ fontSize: isCompact ? 16 : 18 }}
+              >
+                {title}
+              </Title>
+              {isCompact && user}
+            </Flexbox>
+            {isCompact ? (
+              <Avatar avatar={avatar} size={40} style={{ display: 'block' }} title={title} />
+            ) : (
+              <Center
+                flex={'none'}
+                height={64}
+                style={{
+                  background: theme.colorBgContainer,
+                  borderRadius: '50%',
+                  marginTop: -6,
+                  overflow: 'hidden',
+                  zIndex: 2,
+                }}
+                width={64}
+              >
+                <Avatar avatar={avatar} size={56} style={{ display: 'block' }} title={title} />
+              </Center>
+            )}
+          </Flexbox>
+          {!isCompact && (
+            <Flexbox gap={8} horizontal style={{ fontSize: 12 }}>
+              {user}
+              <time className={styles.time} dateTime={new Date(createdAt).toISOString()}>
+                {createdAt}
+              </time>
+            </Flexbox>
+          )}
+          <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+            {description}
+          </Paragraph>
+          <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+            {showCategory && categoryItem ? (
+              <Link href={urlJoin('/discover/assistants', categoryItem.key)}>
+                <Tag icon={categoryItem.icon} style={{ margin: 0 }}>
+                  {categoryItem.label}
+                </Tag>
+              </Link>
+            ) : (
+              tags
+                .slice(0, 4)
+                .filter(Boolean)
+                .map((tag: string, index) => {
+                  const url = qs.stringifyUrl({
+                    query: { q: tag, type: 'assistants' },
+                    url: '/discover/search',
+                  });
+                  return (
+                    <Link href={url} key={index}>
+                      <Tag style={{ margin: 0 }}>{startCase(tag).trim()}</Tag>
+                    </Link>
+                  );
+                })
+            )}
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+export default AssistantCard;

package/src/app/(main)/discover/(list)/assistants/features/Category.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { memo, useMemo } from 'react';
+import urlJoin from 'url-join';
+
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { AssistantCategory } from '@/types/discover';
+
+import CategoryMenu from '../../../components/CategoryMenu';
+import { useCategory } from './useCategory';
+
+const Category = memo(() => {
+  const items = useCategory();
+  const pathname = usePathname();
+  const selectedKey = useMemo(() => {
+    if (pathname.includes('/discover/assistants/')) {
+      return pathname.split('/')[3]?.split('?')[0];
+    }
+    return 'all';
+  }, [pathname]);
+  const router = useQueryRoute();
+
+  return (
+    <CategoryMenu
+      items={items.map((item: any) => ({
+        ...item,
+        label: (
+          <Link
+            href={urlJoin(
+              '/discover/assistants',
+              item.key === AssistantCategory.All ? '' : item.key,
+            )}
+          >
+            {item.label}
+          </Link>
+        ),
+      }))}
+      onSelect={({ key }) => {
+        router.push(urlJoin('/discover/assistants', key === AssistantCategory.All ? '' : key));
+      }}
+      selectedKeys={[selectedKey || 'all']}
+    />
+  );
+});
+
+export default Category;