@lobehub/lobehub 2.0.0-next.2 → 2.0.0-next.20

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx

@@ -8,7 +8,7 @@ import { isDesktop } from '@/const/version';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
@@ -33,7 +33,9 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const openSessionInNewWindow = useGlobalStore((s) => s.openSessionInNewWindow);
 
   const [active] = useSessionStore((s) => [s.activeId === id]);
-  const [loading] = useChatStore((s) => [chatSelectors.isAIGenerating(s) && id === s.activeId]);
+  const [loading] = useChatStore((s) => [
+    messageStateSelectors.isAIGenerating(s) && id === s.activeId,
+  ]);
 
   const [pin, title, avatar, avatarBackground, updateAt, members, model, group, sessionType] =
     useSessionStore((s) => {

package/src/app/[variants]/(main)/chat/_layout/Desktop/index.tsx

@@ -2,7 +2,6 @@ import { Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { isDesktop } from '@/const/version';
-import InitClientDB from '@/features/InitClientDB';
 import ProtocolUrlHandler from '@/features/ProtocolUrlHandler';
 
 import { LayoutProps } from '../type';
@@ -22,7 +21,6 @@ const Layout = ({ children, session }: LayoutProps) => {
         <SessionPanel>{session}</SessionPanel>
         <Workspace>{children}</Workspace>
       </Flexbox>
-      {!isDesktop && <InitClientDB bottom={60} />}
       {/* ↓ cloud slot ↓ */}
 
       {/* ↑ cloud slot ↑ */}

package/src/app/[variants]/(main)/chat/_layout/Mobile.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import { createStyles } from 'antd-style';
-import { Suspense, memo } from 'react';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { withSuspense } from '@/components/withSuspense';
-import InitClientDB from '@/features/InitClientDB';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 
 import { LayoutProps } from './type';
@@ -40,9 +39,6 @@ const Layout = memo<LayoutProps>(({ children, session }) => {
       >
         {children}
       </Flexbox>
-      <Suspense>
-        <InitClientDB bottom={100} />
-      </Suspense>
     </>
   );
 });

package/src/app/[variants]/(main)/chat/settings/features/HeaderContent.tsx

@@ -1,69 +1,9 @@
-import { ActionIcon, Button, Dropdown, type MenuProps } from '@lobehub/ui';
-import { HardDriveDownload } from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import { isServerMode } from '@/const/version';
-import { configService } from '@/services/config';
-import { useServerConfigStore } from '@/store/serverConfig';
-import { useSessionStore } from '@/store/session';
+import { memo } from 'react';
 
 import SubmitAgentButton from './SubmitAgentButton';
 
 export const HeaderContent = memo<{ mobile?: boolean; modal?: boolean }>(({ modal }) => {
-  const { t } = useTranslation('setting');
-  const id = useSessionStore((s) => s.activeId);
-
-  const mobile = useServerConfigStore((s) => s.isMobile);
-
-  const items = useMemo<MenuProps['items']>(
-    () =>
-      isServerMode
-        ? []
-        : [
-            {
-              key: 'agent',
-              label: <div>{t('exportType.agent', { ns: 'common' })}</div>,
-              onClick: () => {
-                if (!id) return;
-
-                configService.exportSingleAgent(id);
-              },
-            },
-            {
-              key: 'agentWithMessage',
-              label: <div>{t('exportType.agentWithMessage', { ns: 'common' })}</div>,
-              onClick: () => {
-                if (!id) return;
-
-                configService.exportSingleSession(id);
-              },
-            },
-          ],
-    [],
-  );
-
-  return (
-    <>
-      <SubmitAgentButton modal={modal} />
-      {!isServerMode && (
-        <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-          {modal ? (
-            <Button block icon={HardDriveDownload} variant={'filled'}>
-              {t('export', { ns: 'common' })}
-            </Button>
-          ) : (
-            <ActionIcon
-              icon={HardDriveDownload}
-              size={HEADER_ICON_SIZE(mobile)}
-              title={t('export', { ns: 'common' })}
-            />
-          )}
-        </Dropdown>
-      )}
-    </>
-  );
+  return <SubmitAgentButton modal={modal} />;
 });
 
 export default HeaderContent;

package/src/app/[variants]/(main)/discover/(list)/features/Pagination.tsx

@@ -52,6 +52,7 @@ const Pagination = memo<PaginationProps>(({ tab, currentPage, total, pageSize })
     <Page
       className={styles.page}
       current={page ? Number(page) : currentPage}
+      data-testid="pagination"
       onChange={handlePageChange}
       pageSize={pageSize}
       showSizeChanger={false}

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

@@ -174,7 +174,7 @@ const SortButton = memo(() => {
       }}
       trigger={['click', 'hover']}
     >
-      <Button icon={<Icon icon={ArrowDownWideNarrow} />} type={'text'}>
+      <Button data-testid="sort-dropdown" icon={<Icon icon={ArrowDownWideNarrow} />} type={'text'}>
         {activeItem.label}
         <Icon icon={ChevronDown} />
       </Button>

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

@@ -82,6 +82,7 @@ const McpItem = memo<DiscoverMcpItem>(
     return (
       <Block
         clickable
+        data-testid="mcp-item"
         height={'100%'}
         onClick={() => {
           navigate(link);

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

@@ -61,6 +61,7 @@ const ModelItem = memo<DiscoverModelItem>(
     return (
       <Block
         clickable
+        data-testid="model-item"
         height={'100%'}
         onClick={() => {
           navigate(link);

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

@@ -54,6 +54,7 @@ const ProviderItem = memo<DiscoverProviderItem>(
     return (
       <Block
         clickable
+        data-testid="provider-item"
         height={'100%'}
         onClick={() => {
           navigate(link);

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

@@ -31,7 +31,15 @@ const useStyles = createStyles(({ css, prefixCls }) => {
 const CategoryMenu = memo<MenuProps>(({ style, ...rest }) => {
   const { styles } = useStyles();
 
-  return <Menu className={styles.menu} mode="inline" style={style} {...rest} />;
+  return (
+    <Menu
+      className={styles.menu}
+      data-testid="category-menu"
+      mode="inline"
+      style={style}
+      {...rest}
+    />
+  );
 });
 
 export default CategoryMenu;

package/src/app/[variants]/(main)/image/@topic/features/Topics/TopicList.tsx

@@ -34,6 +34,7 @@ const TopicsList = memo(() => {
     <Flexbox
       align="center"
       gap={12}
+      padding={12}
       ref={ref}
       style={{
         maxHeight: '100%',

package/src/app/[variants]/(main)/image/features/PromptInput/index.tsx

@@ -73,7 +73,7 @@ const PromptInput = ({ showTitle = false }: PromptInputProps) => {
   };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault();
       if (!isCreating && value.trim()) {
         handleGenerate();

package/src/app/[variants]/(main)/image/page.tsx

@@ -2,7 +2,6 @@ import { Suspense } from 'react';
 
 import StructuredData from '@/components/StructuredData';
 import { BRANDING_NAME } from '@/const/branding';
-import InitClientDB from '@/features/InitClientDB';
 import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
@@ -34,7 +33,6 @@ const AiImage = async (props: DynamicLayoutProps) => {
   return (
     <>
       <StructuredData ld={ld} />
-      <InitClientDB bottom={100} />
       <Suspense fallback={<SkeletonList />}>
         <ImageWorkspace />
       </Suspense>

package/src/app/[variants]/(main)/labs/components/LabCard.tsx

@@ -71,7 +71,9 @@ const LabCard = memo<PropsWithChildren<LabCardProps>>(
         <div className={styles.card}>
           <div className={styles.row}>
             <div className={styles.thumb}>
-              {cover && <Image alt={title} fill src={cover} style={{ objectFit: 'cover' }} />}
+              {cover && (
+                <Image alt={title} fill src={cover} style={{ objectFit: 'cover' }} unoptimized />
+              )}
             </div>
             <Flexbox gap={6}>
               <div className={styles.title}>{title}</div>

package/src/app/[variants]/(main)/profile/_layout/Desktop/index.tsx

@@ -5,7 +5,6 @@ import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 import SettingContainer from '@/features/Setting/SettingContainer';
 import { useActiveProfileKey } from '@/hooks/useActiveTabKey';
@@ -21,30 +20,30 @@ const Layout = memo<LayoutProps>(({ children, category }) => {
   const activeKey = useActiveProfileKey();
 
   return (
-    <>
-      <Flexbox
-        height={'100%'}
-        horizontal={md}
-        ref={ref}
-        style={{ position: 'relative' }}
-        width={'100%'}
+    <Flexbox
+      height={'100%'}
+      horizontal={md}
+      ref={ref}
+      style={{ position: 'relative' }}
+      width={'100%'}
+    >
+      {md ? (
+        <SideBar>{category}</SideBar>
+      ) : (
+        <Header getContainer={() => ref.current} title={<>{t(`tab.${activeKey}`)}</>}>
+          {category}
+        </Header>
+      )}
+      <SettingContainer
+        addonAfter={<Footer />}
+        style={{
+          paddingBlock: 24,
+          paddingInline: 32,
+        }}
       >
-        {md ? (
-          <SideBar>{category}</SideBar>
-        ) : (
-          <Header getContainer={() => ref.current} title={<>{t(`tab.${activeKey}`)}</>}>
-            {category}
-          </Header>
-        )}
-        <SettingContainer
-          addonAfter={<Footer />}
-          style={{
-            paddingBlock: 24,
-            paddingInline: 32,
-          }}>{children}</SettingContainer>
-      </Flexbox>
-      <InitClientDB />
-    </>
+        {children}
+      </SettingContainer>
+    </Flexbox>
   );
 });
 

package/src/app/[variants]/(main)/profile/_layout/Mobile/index.tsx

@@ -1,5 +1,4 @@
 import MobileContentLayout from '@/components/server/MobileNavLayout';
-import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 
 import { LayoutProps } from '../type';
@@ -7,14 +6,11 @@ import Header from './Header';
 
 const Layout = ({ children }: LayoutProps) => {
   return (
-    <>
-      <MobileContentLayout header={<Header />}>
-        {children}
-        <div style={{ flex: 1 }} />
-        <Footer />
-      </MobileContentLayout>
-      <InitClientDB />
-    </>
+    <MobileContentLayout header={<Header />}>
+      {children}
+      <div style={{ flex: 1 }} />
+      <Footer />
+    </MobileContentLayout>
   );
 };
 

package/src/app/[variants]/(main)/settings/_layout/Desktop/index.tsx

@@ -5,7 +5,6 @@ import { parseAsStringEnum, useQueryState } from 'nuqs';
 import { memo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import InitClientDB from '@/features/InitClientDB';
 import SettingContainer from '@/features/Setting/SettingContainer';
 import { SettingsTabs } from '@/store/global/initialState';
 
@@ -43,7 +42,6 @@ const Layout = memo<LayoutProps>((props) => {
       <SettingContainer maxWidth={'none'}>
         <SettingsContent activeTab={activeTab} mobile={false} showLLM={showLLM} />
       </SettingContainer>
-      <InitClientDB />
     </Flexbox>
   );
 });

package/src/app/[variants]/(main)/settings/_layout/Mobile/index.tsx

@@ -3,7 +3,6 @@
 import { useQueryState } from 'nuqs';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
-import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 import { SettingsTabs } from '@/store/global/initialState';
 
@@ -19,7 +18,6 @@ const Layout = () => {
     <MobileContentLayout header={<Header />}>
       <SettingsContent activeTab={activeTab} mobile={true} />
       <Footer />
-      <InitClientDB />
     </MobileContentLayout>
   );
 };

package/src/app/[variants]/(main)/settings/_layout/SettingsContent.tsx

@@ -15,9 +15,6 @@ const componentMap = {
   [SettingsTabs.Agent]: dynamic(() => import('../agent'), {
     loading: () => <Loading />,
   }),
-  [SettingsTabs.LLM]: dynamic(() => import('../llm'), {
-    loading: () => <Loading />,
-  }),
   [SettingsTabs.Provider]: dynamic(() => import('../provider'), {
     loading: () => <Loading />,
   }),

package/src/app/[variants]/(main)/settings/provider/(list)/ProviderGrid/Card.tsx

@@ -1,11 +1,11 @@
 import { ProviderCombine, ProviderIcon } from '@lobehub/icons';
 import { Avatar, Text } from '@lobehub/ui';
 import { Divider, Skeleton } from 'antd';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import Link from '@/components/Link';
 import { AiProviderListItem } from '@/types/aiProvider';
 
 import EnableSwitch from './EnableSwitch';

package/src/app/[variants]/(main)/settings/provider/detail/azure/index.tsx

@@ -7,9 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FormInput, FormPassword } from '@/components/FormInput';
 import { AzureProviderCard } from '@/config/modelProviders';
-import { aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
+import { aiModelSelectors, aiProviderSelectors, useAiInfraStore } from '@/store/aiInfra';
 
 import { KeyVaultsConfigKey, LLMProviderApiTokenKey, LLMProviderBaseUrlKey } from '../../const';
 import { SkeletonInput } from '../../features/ProviderConfig';
@@ -35,11 +33,11 @@ const useProviderCard = (): ProviderItem => {
   const { styles } = useStyles();
 
   // Get the first model card's deployment name as the check model
-  const checkModel = useUserStore((s) => {
-    const chatModelCards = modelProviderSelectors.getModelCardsById(providerKey)(s);
+  const checkModel = useAiInfraStore((s) => {
+    const modelList = aiModelSelectors.enabledAiProviderModelList(s);
 
-    if (chatModelCards.length > 0) {
-      return chatModelCards[0].deploymentName;
+    if (modelList.length > 0) {
+      return modelList[0].id;
     }
 
     return 'gpt-35-turbo';

package/src/app/[variants]/layout.tsx

@@ -73,6 +73,7 @@ export const generateViewport = async (props: DynamicLayoutProps): ResolvingView
 
   return {
     ...dynamicScale,
+    colorScheme: null,
     initialScale: 1,
     minimumScale: 1,
     themeColor: [

package/src/app/[variants]/loading/index.tsx

@@ -1,10 +1 @@
-import { isServerMode } from '@/const/version';
-
-import Client from './Client';
-import Server from './Server';
-
-const ScreenLoading = () => (isServerMode ? <Server /> : <Client />);
-
-ScreenLoading.displayName = 'ScreenLoading';
-
-export default ScreenLoading;
+export { default } from './Server';

package/src/app/[variants]/oauth/ResultLayout.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { Card } from 'antd';
+import { createStyles } from 'antd-style';
+import { type ReactNode, memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+interface ResultLayoutProps {
+  children: ReactNode;
+}
+
+const useStyles = createStyles(({ css, responsive }) => ({
+  card: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    min-width: 500px;
+    min-height: 280px;
+
+    ${responsive.mobile} {
+      min-width: auto;
+    }
+  `,
+  container: css`
+    ${responsive.mobile} {
+      justify-content: flex-start;
+      width: 100%;
+      padding-block-start: 64px;
+    }
+  `,
+}));
+
+const ResultLayout = memo<ResultLayoutProps>(({ children }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Center className={styles.container} height="100vh" paddingBlock={24} paddingInline={12}>
+      <Card className={styles.card}>{children}</Card>
+    </Center>
+  );
+});
+
+ResultLayout.displayName = 'ResultLayout';
+
+export default ResultLayout;

package/src/app/[variants]/oauth/callback/error/page.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { Button, Highlighter, Icon } from '@lobehub/ui';
-import { Card, Result } from 'antd';
+import { Result } from 'antd';
 import { ShieldX } from 'lucide-react';
 import Link from 'next/link';
 import { parseAsString, useQueryState } from 'nuqs';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 const FailedPage = memo(() => {
   const { t } = useTranslation('oauth');
@@ -15,38 +15,25 @@ const FailedPage = memo(() => {
   const [errorMessage] = useQueryState<string>('errorMessage', parseAsString);
 
   return (
-    <Center height="100vh">
-      <Card
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          justifyContent: 'center',
-          minHeight: 280,
-          minWidth: 500,
-          width: '100%',
-        }}
-      >
-        <Result
-          extra={
-            <Link href="/">
-              <Button type="primary">{t('error.backToHome')}</Button>
-            </Link>
-          }
-          icon={<Icon icon={ShieldX} />}
-          status="error"
-          subTitle={
-            <Flexbox gap={8}>
-              {t('error.desc', {
-                reason: t(`error.reason.${reason}` as any, { defaultValue: reason }),
-              })}
+    <Result
+      extra={
+        <Link href="/">
+          <Button type="primary">{t('error.backToHome')}</Button>
+        </Link>
+      }
+      icon={<Icon icon={ShieldX} />}
+      status="error"
+      subTitle={
+        <Flexbox gap={8}>
+          {t('error.desc', {
+            reason: t(`error.reason.${reason}` as any, { defaultValue: reason }),
+          })}
 
-              {!!errorMessage && <Highlighter language={'log'}>{errorMessage}</Highlighter>}
-            </Flexbox>
-          }
-          title={t('error.title')}
-        />
-      </Card>
-    </Center>
+          {!!errorMessage && <Highlighter language={'log'}>{errorMessage}</Highlighter>}
+        </Flexbox>
+      }
+      title={t('error.title')}
+    />
   );
 });
 

package/src/app/[variants]/oauth/callback/layout.tsx

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

package/src/app/[variants]/oauth/callback/success/page.tsx

@@ -1,36 +1,22 @@
 'use client';
 
 import { Icon } from '@lobehub/ui';
-import { Card, Result } from 'antd';
+import { Result } from 'antd';
 import { CheckCircle } from 'lucide-react';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
 
 const SuccessPage = memo(() => {
   const { t } = useTranslation('oauth');
 
   return (
-    <Center height="100vh">
-      <Card
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          justifyContent: 'center',
-          minHeight: 280,
-          minWidth: 500,
-          width: '100%',
-        }}
-      >
-        <Result
-          icon={<Icon icon={CheckCircle} />}
-          status="success"
-          style={{ padding: 0 }}
-          subTitle={t('success.subTitle')}
-          title={t('success.title')}
-        />
-      </Card>
-    </Center>
+    <Result
+      icon={<Icon icon={CheckCircle} />}
+      status="success"
+      style={{ padding: 0 }}
+      subTitle={t('success.subTitle')}
+      title={t('success.title')}
+    />
   );
 });
 

package/src/app/[variants]/oauth/consent/[uid]/Consent/BuiltinConsent.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Result } from 'antd';
+import { useTheme } from 'antd-style';
+import { LoaderCircle } from 'lucide-react';
+import { memo, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ResultLayout from '../../../ResultLayout';
+
+interface BuiltinConsentProps {
+  uid: string;
+}
+
+const BuiltinConsent = memo<BuiltinConsentProps>(({ uid }) => {
+  const { t } = useTranslation('oauth');
+  const formRef = useRef<HTMLFormElement>(null);
+
+  useEffect(() => {
+    // Auto-submit on mount
+    formRef.current?.submit();
+  }, []);
+
+  const theme = useTheme();
+  return (
+    <>
+      <ResultLayout>
+        <Result
+          icon={<Icon icon={LoaderCircle} spin style={{ color: theme.colorText }} />}
+          status="success"
+          style={{ padding: 0 }}
+          subTitle={t('consent.redirecting')}
+          title=""
+        />
+      </ResultLayout>
+      <form action="/oidc/consent" method="post" ref={formRef} style={{ display: 'none' }}>
+        <input name="uid" type="hidden" value={uid} />
+        <input name="consent" type="hidden" value="accept" />
+      </form>
+    </>
+  );
+});
+
+BuiltinConsent.displayName = 'BuiltinConsent';
+
+export default BuiltinConsent;