@lobehub/chat 1.17.7 → 1.18.0

package/src/app/(main)/discover/not-found.tsx

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/404'));

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

@@ -0,0 +1,42 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Footer from '@/features/Setting/Footer';
+
+import CategoryContainer from '../../components/CategoryContainer';
+import { MAX_WIDTH, SCROLL_PARENT_ID } from '../../features/const';
+import Category from '../features/Category';
+
+const Layout = async ({ children }: PropsWithChildren) => {
+  return (
+    <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: 32, position: 'relative' }}
+        width={'100%'}
+      >
+        <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
+          <CategoryContainer top={32}>
+            <Category />
+          </CategoryContainer>
+          <Flexbox flex={1} gap={16}>
+            {children}
+          </Flexbox>
+        </Flexbox>
+        <div />
+        <Footer />
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+Layout.displayName = 'DesktopDiscoverSearchLayout';
+
+export default Layout;

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { MobileNavBar } from '@lobehub/ui';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import urlJoin from 'url-join';
+
+import { useQuery } from '@/hooks/useQuery';
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
+
+import StoreSearchBar from '../../../features/StoreSearchBar';
+
+const Header = memo(() => {
+  const router = useRouter();
+  const { type = 'assistants' } = useQuery();
+
+  return (
+    <MobileNavBar
+      contentStyles={{ center: { display: 'none' }, left: { flex: 'none' } }}
+      onBackClick={() => router.push(urlJoin('/discover', type as string))}
+      right={<StoreSearchBar autoFocus={false} mobile style={{ width: '100%' }} />}
+      showBackButton
+      style={{
+        ...mobileHeaderSticky,
+        overflow: 'unset',
+      }}
+    />
+  );
+});
+
+export default Header;

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

@@ -0,0 +1,56 @@
+'use client';
+
+import { TabsNav } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+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 { items, activeKey } = useNav();
+  const router = useQueryRoute();
+
+  return (
+    <Flexbox style={{ paddingInline: 16 }}>
+      <TabsNav
+        activeKey={activeKey}
+        items={items
+          .filter((item: any) => item?.key !== DiscoverTab.Home)
+          .map((item: any) => ({
+            key: item.key,
+            label: (
+              <div onClick={() => router.push('/discover/search', { query: { type: item.key } })}>
+                {item.label}
+              </div>
+            ),
+          }))}
+        variant={'compact'}
+      />
+    </Flexbox>
+  );
+});
+
+export default Nav;

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

@@ -0,0 +1,32 @@
+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';
+import Nav from './Nav';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <MobileContentLayout
+      gap={16}
+      header={
+        <>
+          <Header />
+          <Nav />
+        </>
+      }
+      id={SCROLL_PARENT_ID}
+      style={{ paddingInline: 16 }}
+    >
+      {children}
+      <div />
+      <Footer />
+    </MobileContentLayout>
+  );
+};
+
+Layout.displayName = 'MobileDiscoverSearchLayout';
+
+export default Layout;

package/src/app/(main)/discover/search/features/AssistantsResult.tsx

@@ -0,0 +1,27 @@
+import { Locales } from '@/locales/resources';
+import { DiscoverService } from '@/server/services/discover';
+
+import Back from '../../(detail)/features/Back';
+import List from '../../(list)/assistants/features/List';
+
+const AssistantsResult = async ({
+  locale,
+  q,
+  mobile,
+}: {
+  locale: Locales;
+  mobile?: boolean;
+  q: string;
+}) => {
+  const discoverService = new DiscoverService();
+  const items = await discoverService.searchAssistant(locale, q);
+
+  return (
+    <>
+      {!mobile && <Back href={'/discover/assistants'} style={{ marginBottom: 0 }} />}
+      <List items={items} mobile={mobile} searchKeywords={q} />
+    </>
+  );
+};
+
+export default AssistantsResult;

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

@@ -0,0 +1,41 @@
+'use client';
+
+import Link from 'next/link';
+import qs from 'query-string';
+import { memo } from 'react';
+
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { DiscoverTab } from '@/types/discover';
+
+import CategoryMenu from '../../components/CategoryMenu';
+import { useNav } from '../../features/useNav';
+
+const Category = memo(() => {
+  const router = useQueryRoute();
+
+  const { items, activeKey } = useNav();
+
+  return (
+    <CategoryMenu
+      items={items
+        .filter((item) => item?.key !== DiscoverTab.Home)
+        .map((item: any) => ({
+          ...item,
+          label: (
+            <Link
+              href={qs.stringifyUrl({
+                query: { type: item.key },
+                url: '/discover/search',
+              })}
+            >
+              {item.label}
+            </Link>
+          ),
+        }))}
+      onSelect={({ key }) => router.push('/discover/search', { query: { type: key } })}
+      selectedKeys={[activeKey]}
+    />
+  );
+});
+
+export default Category;

package/src/app/(main)/discover/search/features/ModelsResult.tsx

@@ -0,0 +1,27 @@
+import { Locales } from '@/locales/resources';
+import { DiscoverService } from '@/server/services/discover';
+
+import Back from '../../(detail)/features/Back';
+import List from '../../(list)/models/features/List';
+
+const ModelsResult = async ({
+  locale,
+  q,
+  mobile,
+}: {
+  locale: Locales;
+  mobile?: boolean;
+  q: string;
+}) => {
+  const discoverService = new DiscoverService();
+  const items = await discoverService.searchModel(locale, q);
+
+  return (
+    <>
+      {!mobile && <Back href={'/discover/models'} style={{ marginBottom: 0 }} />}
+      <List items={items} mobile={mobile} searchKeywords={q} />
+    </>
+  );
+};
+
+export default ModelsResult;

package/src/app/(main)/discover/search/features/PluginsResult.tsx

@@ -0,0 +1,27 @@
+import { Locales } from '@/locales/resources';
+import { DiscoverService } from '@/server/services/discover';
+
+import Back from '../../(detail)/features/Back';
+import List from '../../(list)/plugins/features/List';
+
+const PluginsResult = async ({
+  locale,
+  q,
+  mobile,
+}: {
+  locale: Locales;
+  mobile?: boolean;
+  q: string;
+}) => {
+  const discoverService = new DiscoverService();
+  const items = await discoverService.searchPlugin(locale, q);
+
+  return (
+    <>
+      {!mobile && <Back href={'/discover/plugins'} style={{ marginBottom: 0 }} />}
+      <List items={items} mobile={mobile} searchKeywords={q} />
+    </>
+  );
+};
+
+export default PluginsResult;

package/src/app/(main)/discover/search/features/ProvidersResult.tsx

@@ -0,0 +1,26 @@
+import { Locales } from '@/locales/resources';
+import { DiscoverService } from '@/server/services/discover';
+
+import Back from '../../(detail)/features/Back';
+import List from '../../(list)/providers/features/List';
+
+const ProvidersResult = async ({
+  locale,
+  q,
+  mobile,
+}: {
+  locale: Locales;
+  mobile?: boolean;
+  q: string;
+}) => {
+  const discoverService = new DiscoverService();
+  const items = await discoverService.searchProvider(locale, q);
+
+  return (
+    <>
+      {!mobile && <Back href={'/discover/providers'} style={{ marginBottom: 0 }} />}
+      <List items={items} mobile={mobile} searchKeywords={q} />
+    </>
+  );
+};
+export default ProvidersResult;

package/src/app/(main)/discover/search/layout.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const MainLayout = ServerLayout<PropsWithChildren>({ Desktop, Mobile });
+
+MainLayout.displayName = 'DiscoverSearchLayout';
+
+export default MainLayout;

package/src/app/(main)/discover/search/loading.tsx

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

package/src/app/(main)/discover/search/page.tsx

@@ -0,0 +1,78 @@
+import dynamic from 'next/dynamic';
+import { redirect } from 'next/navigation';
+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 { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/responsive';
+
+import { ListLoadingWithoutBanner } from '../components/ListLoading';
+
+const AssistantsResult = dynamic(() => import('./features/AssistantsResult'), {
+  loading: () => <ListLoadingWithoutBanner />,
+});
+const PluginsResult = dynamic(() => import('./features/PluginsResult'), {
+  loading: () => <ListLoadingWithoutBanner />,
+});
+const ModelsResult = dynamic(() => import('./features/ModelsResult'), {
+  loading: () => <ListLoadingWithoutBanner />,
+});
+const ProvidersResult = dynamic(() => import('./features/ProvidersResult'), {
+  loading: () => <ListLoadingWithoutBanner />,
+});
+
+type Props = {
+  searchParams: {
+    hl?: Locales;
+    q?: string;
+    type?: 'assistants' | 'plugins' | 'models' | 'providers';
+  };
+};
+
+export const generateMetadata = async ({ searchParams }: Props) => {
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+
+  return metadataModule.generate({
+    alternate: true,
+    description: t('discover.description'),
+    locale,
+    title: t('discover.search'),
+    url: '/discover/search',
+  });
+};
+
+const Page = async ({ searchParams }: Props) => {
+  const { q, type = 'assistants' } = searchParams;
+  if (!q) redirect(urlJoin(`/discover`, type));
+  const keywords = decodeURIComponent(q);
+
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const mobile = isMobileDevice();
+
+  const ld = ldModule.generate({
+    description: t('discover.description'),
+    title: t('discover.search'),
+    url: '/discover/search',
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      {type === 'assistants' && <AssistantsResult locale={locale} mobile={mobile} q={keywords} />}
+      {type === 'plugins' && <PluginsResult locale={locale} mobile={mobile} q={keywords} />}
+      {type === 'models' && <ModelsResult locale={locale} mobile={mobile} q={keywords} />}
+      {type === 'providers' && <ProvidersResult locale={locale} mobile={mobile} q={keywords} />}
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverSearch';
+
+export default Page;

package/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -80,11 +80,6 @@ const useStyles = createStyles(({ css, prefixCls, responsive, token }) => ({
       background: ${token.colorFill};
     }
   `,
-  safariIconWidthFix: css`
-    svg {
-      width: unset !important;
-    }
-  `,
 }));
 
 export interface ProviderConfigProps extends Omit<ModelProviderCard, 'id' | 'chatModels'> {
@@ -269,7 +264,6 @@ const ProviderConfig = memo<ProviderConfigProps>(
       title: (
         <Flexbox
           align={'center'}
-          className={styles.safariIconWidthFix}
           horizontal
           style={{
             height: 24,

package/src/app/(main)/welcome/features/Actions.tsx

@@ -19,7 +19,7 @@ const Actions = memo<{ mobile?: boolean }>(({ mobile }) => {
   return (
     <Flexbox gap={16} horizontal={!mobile} justify={'center'} width={'100%'} wrap={'wrap'}>
       {showMarket && (
-        <Link href={'/market'}>
+        <Link href={'/discover'}>
           <Button block={mobile} size={'large'} style={{ minWidth: 160 }} type={'default'}>
             {t('button.market')}
           </Button>

package/src/app/@modal/(.)discover/assistant/[slug]/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/discover/(detail)/assistant/[slug]/page';

package/src/app/@modal/(.)discover/layout.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Layout = memo<PropsWithChildren>(({ children }) => {
+  const { xl = true } = useResponsive();
+
+  return (
+    <Flexbox
+      flex={1}
+      gap={16}
+      horizontal={xl}
+      paddingInline={48}
+      style={{
+        overflow: xl ? 'hidden' : 'auto',
+        paddingBottom: xl ? 0 : 24,
+        paddingTop: 48,
+        position: 'relative',
+      }}
+      width={'100%'}
+    >
+      {children}
+    </Flexbox>
+  );
+});
+
+export default Layout;

package/src/app/@modal/(.)discover/loading.tsx

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from '@/app/(main)/discover/(detail)/loading';

package/src/app/@modal/(.)discover/model/[...slugs]/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/discover/(detail)/model/[...slugs]/page';

package/src/app/@modal/(.)discover/plugin/[slug]/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/discover/(detail)/plugin/[slug]/page';

package/src/app/@modal/(.)discover/provider/[slug]/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/discover/(detail)/provider/[slug]/page';

package/src/app/@modal/features/InterceptingContext.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren, createContext, memo } from 'react';
+
+export const InterceptContext = createContext(false);
+
+const InterceptingLayout = memo<PropsWithChildren>(({ children }) => {
+  return <InterceptContext.Provider value={true}>{children}</InterceptContext.Provider>;
+});
+
+export default InterceptingLayout;

package/src/app/@modal/layout.tsx

@@ -2,33 +2,70 @@
 
 import { Modal } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
-import { useRouter } from 'next/navigation';
-import { PropsWithChildren, memo, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { PropsWithChildren, memo, useEffect, useState } from 'react';
 
-const SessionSettingsModal = memo<PropsWithChildren>(({ children }) => {
+import InterceptingLayout from './features/InterceptingContext';
+
+const InterceptingModal = memo<PropsWithChildren>(({ children }) => {
   const [open, setOpen] = useState(true);
   const router = useRouter();
+  const pathname = usePathname();
+  const isDiscover = pathname.startsWith('/discover');
   const theme = useTheme();
 
+  const inModal =
+    pathname.startsWith('/settings') ||
+    pathname.startsWith('/chat/settings') ||
+    pathname.startsWith('/discover/assistant/') ||
+    pathname.startsWith('/discover/model/') ||
+    pathname.startsWith('/discover/plugin/') ||
+    pathname.startsWith('/discover/provider/');
+
+  useEffect(() => {
+    if (!inModal) {
+      setOpen(false);
+    } else {
+      setOpen(true);
+    }
+  }, [inModal, router]);
+
+  if (!inModal) return null;
+
   return (
-    <Modal
-      afterClose={() => {
-        router.back();
-      }}
-      enableResponsive={false}
-      footer={null}
-      onCancel={() => setOpen(false)}
-      open={open}
-      styles={{
-        body: { display: 'flex', minHeight: 'min(75vh, 750px)', overflow: 'hidden', padding: 0 },
-        content: { border: 'none', boxShadow: `0 0 0 1px ${theme.colorBorderSecondary}` },
-      }}
-      title={false}
-      width={1024}
-    >
-      {children}
-    </Modal>
+    <InterceptingLayout>
+      <Modal
+        afterClose={() => {
+          if (inModal) {
+            router.back();
+          } else {
+            router.refresh();
+          }
+        }}
+        enableResponsive={false}
+        footer={null}
+        onCancel={() => {
+          setOpen(false);
+          router.back();
+        }}
+        open={open}
+        styles={{
+          body: {
+            display: 'flex',
+            maxHeight: isDiscover ? '80vh' : undefined,
+            minHeight: 750,
+            overflow: 'hidden',
+            padding: 0,
+          },
+          content: { border: 'none', boxShadow: `0 0 0 1px ${theme.colorBorderSecondary}` },
+        }}
+        title={false}
+        width={isDiscover ? 'min(80vw, 1280px)' : 'min(80vw, 1024px)'}
+      >
+        {children}
+      </Modal>
+    </InterceptingLayout>
   );
 });
 
-export default SessionSettingsModal;
+export default InterceptingModal;

package/src/app/api/{market → assistant}/[id]/route.ts

@@ -1,6 +1,5 @@
 import { DEFAULT_LANG } from '@/const/locale';
-
-import { AgentMarket } from '../AgentMarket';
+import { AssistantStore } from '@/server/modules/AssistantStore';
 
 export const runtime = 'edge';
 
@@ -9,7 +8,7 @@ export const GET = async (req: Request, { params }: { params: { id: string } })
 
   const locale = searchParams.get('locale');
 
-  const market = new AgentMarket();
+  const market = new AssistantStore();
 
   let res: Response;
 

package/src/app/api/{market → assistant/store}/route.ts

@@ -1,15 +1,12 @@
 import { DEFAULT_LANG } from '@/const/locale';
-
-import { AgentMarket } from './AgentMarket';
+import { AssistantStore } from '@/server/modules/AssistantStore';
 
 export const runtime = 'edge';
 
-export const revalidate = 3600; // revalidate at almost every hour
-
 export const GET = async (req: Request) => {
   const locale = new URL(req.url).searchParams.get('locale');
 
-  const market = new AgentMarket();
+  const market = new AssistantStore();
 
   let res: Response;
 

package/src/app/api/plugin/store/route.ts

@@ -1,11 +1,8 @@
 import { DEFAULT_LANG } from '@/const/locale';
-
-import { PluginStore } from './Store';
+import { PluginStore } from '@/server/modules/PluginStore';
 
 export const runtime = 'edge';
 
-export const revalidate = 43_200; // revalidate at almost every 12 hours
-
 export const GET = async (req: Request) => {
   const locale = new URL(req.url).searchParams.get('locale');
 

package/src/app/metadata.ts

@@ -14,6 +14,9 @@ export const generateMetadata = async (): Promise<Metadata> => {
   const { t } = await translation('metadata');
 
   return {
+    alternates: {
+      canonical: OFFICIAL_URL,
+    },
     appleWebApp: {
       statusBarStyle: 'black-translucent',
       title: BRANDING_NAME,