@lobehub/chat 0.153.1 → 0.154.1

package/src/config/auth.ts

@@ -0,0 +1,146 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix , typescript-sort-keys/interface */
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace NodeJS {
+    interface ProcessEnv {
+      // ===== Clerk ===== //
+      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY?: string;
+      CLERK_SECRET_KEY?: string;
+      CLERK_WEBHOOK_SECRET?: string;
+
+      // ===== Next Auth ===== //
+      /**
+       * @deprecated
+       */
+      ENABLE_OAUTH_SSO?: string;
+      NEXT_AUTH_SECRET?: string;
+      /**
+       * @deprecated
+       */
+      SSO_PROVIDERS?: string;
+      NEXT_AUTH_SSO_PROVIDERS?: string;
+
+      AUTH0_CLIENT_ID?: string;
+      AUTH0_CLIENT_SECRET?: string;
+      AUTH0_ISSUER?: string;
+
+      // Github
+      GITHUB_CLIENT_ID?: string;
+      GITHUB_CLIENT_SECRET?: string;
+
+      // Azure AD
+      AZURE_AD_CLIENT_ID?: string;
+      AZURE_AD_CLIENT_SECRET?: string;
+      AZURE_AD_TENANT_ID?: string;
+
+      // AUTHENTIK
+      AUTHENTIK_CLIENT_ID?: string;
+      AUTHENTIK_CLIENT_SECRET?: string;
+      AUTHENTIK_ISSUER?: string;
+
+      // ZITADEL
+      ZITADEL_CLIENT_ID?: string;
+      ZITADEL_CLIENT_SECRET?: string;
+      ZITADEL_ISSUER?: string;
+    }
+  }
+}
+
+export const getAuthConfig = () => {
+  if (process.env.ENABLE_OAUTH_SSO) {
+    console.warn(
+      '`ENABLE_OAUTH_SSO` is deprecated and will be removed in LobeChat 1.0. just set `NEXT_AUTH_SECRET` enough',
+    );
+  }
+
+  if (process.env.SSO_PROVIDERS) {
+    console.warn(
+      '`SSO_PROVIDERS` is deprecated and will be removed in LobeChat 1.0. Please replace with `NEXT_AUTH_SSO_PROVIDERS`',
+    );
+  }
+
+  return createEnv({
+    client: {
+      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().optional(),
+      /**
+       * whether to enabled clerk
+       */
+      NEXT_PUBLIC_ENABLE_CLERK_AUTH: z.boolean().optional(),
+
+      NEXT_PUBLIC_ENABLE_NEXT_AUTH: z.boolean().optional(),
+    },
+    server: {
+      // Clerk
+      CLERK_SECRET_KEY: z.string().optional(),
+
+      // NEXT-AUTH
+      NEXT_AUTH_SECRET: z.string().optional(),
+      NEXT_AUTH_SSO_PROVIDERS: z.string().optional().default('auth0'),
+
+      // Auth0
+      AUTH0_CLIENT_ID: z.string().optional(),
+      AUTH0_CLIENT_SECRET: z.string().optional(),
+      AUTH0_ISSUER: z.string().optional(),
+
+      // Github
+      GITHUB_CLIENT_ID: z.string().optional(),
+      GITHUB_CLIENT_SECRET: z.string().optional(),
+
+      // Azure AD
+      AZURE_AD_CLIENT_ID: z.string().optional(),
+      AZURE_AD_CLIENT_SECRET: z.string().optional(),
+      AZURE_AD_TENANT_ID: z.string().optional(),
+
+      // AUTHENTIK
+      AUTHENTIK_CLIENT_ID: z.string().optional(),
+      AUTHENTIK_CLIENT_SECRET: z.string().optional(),
+      AUTHENTIK_ISSUER: z.string().optional(),
+
+      // ZITADEL
+      ZITADEL_CLIENT_ID: z.string().optional(),
+      ZITADEL_CLIENT_SECRET: z.string().optional(),
+      ZITADEL_ISSUER: z.string().optional(),
+    },
+
+    runtimeEnv: {
+      // Clerk
+      NEXT_PUBLIC_ENABLE_CLERK_AUTH: !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+      CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
+
+      // Next Auth
+      NEXT_PUBLIC_ENABLE_NEXT_AUTH: !!process.env.NEXT_AUTH_SECRET || process.env.ENABLE_OAUTH_SSO,
+      NEXT_AUTH_SSO_PROVIDERS: process.env.NEXT_AUTH_SSO_PROVIDERS || process.env.SSO_PROVIDERS,
+      NEXT_AUTH_SECRET: process.env.NEXT_AUTH_SECRET,
+
+      // Auth0
+      AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID,
+      AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET,
+      AUTH0_ISSUER: process.env.AUTH0_ISSUER,
+
+      // Github
+      GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
+      GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET,
+
+      // Azure AD
+      AZURE_AD_CLIENT_ID: process.env.AZURE_AD_CLIENT_ID,
+      AZURE_AD_CLIENT_SECRET: process.env.AZURE_AD_CLIENT_SECRET,
+      AZURE_AD_TENANT_ID: process.env.AZURE_AD_TENANT_ID,
+
+      // AUTHENTIK
+      AUTHENTIK_CLIENT_ID: process.env.AUTHENTIK_CLIENT_ID,
+      AUTHENTIK_CLIENT_SECRET: process.env.AUTHENTIK_CLIENT_SECRET,
+      AUTHENTIK_ISSUER: process.env.AUTHENTIK_ISSUER,
+
+      // ZITADEL
+      ZITADEL_CLIENT_ID: process.env.ZITADEL_CLIENT_ID,
+      ZITADEL_CLIENT_SECRET: process.env.ZITADEL_CLIENT_SECRET,
+      ZITADEL_ISSUER: process.env.ZITADEL_ISSUER,
+    },
+  });
+};
+
+export const authEnv = getAuthConfig();

package/src/config/server/index.ts

@@ -1,6 +1,5 @@
 import { getAnalyticsConfig } from './analytics';
 import { getAppConfig } from './app';
-import { getAuthConfig } from './auth';
 import { getProviderConfig } from './provider';
 
 export const getServerConfig = () => {
@@ -10,8 +9,7 @@ export const getServerConfig = () => {
 
   const provider = getProviderConfig();
   const app = getAppConfig();
-  const auth = getAuthConfig();
   const analytics = getAnalyticsConfig();
 
-  return { ...provider, ...app, ...analytics, ...auth };
+  return { ...provider, ...app, ...analytics };
 };

package/src/const/auth.ts

@@ -1,3 +1,10 @@
+import { authEnv } from '@/config/auth';
+
+export const enableClerk = authEnv.NEXT_PUBLIC_ENABLE_CLERK_AUTH;
+export const enableNextAuth = authEnv.NEXT_PUBLIC_ENABLE_NEXT_AUTH;
+export const enableAuth =
+  authEnv.NEXT_PUBLIC_ENABLE_CLERK_AUTH || authEnv.NEXT_PUBLIC_ENABLE_NEXT_AUTH;
+
 export const LOBE_CHAT_AUTH_HEADER = 'X-lobe-chat-auth';
 
 export const OAUTH_AUTHORIZED = 'X-oauth-authorized';

package/src/features/AgentSetting/AgentMeta/AutoGenerateInput.tsx

@@ -5,7 +5,6 @@ import { Wand2 } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-
 export interface AutoGenerateInputProps extends InputProps {
   canAutoGenerate?: boolean;
   loading?: boolean;
@@ -32,7 +31,7 @@ const AutoGenerateInput = memo<AutoGenerateInputProps>(
                 color: theme.colorInfo,
                 marginRight: -4,
               }}
-              title={t('autoGenerate')}
+              title={!canAutoGenerate ? t('autoGenerateTooltipDisabled') : t('autoGenerate')}
             />
           )
         }

package/src/features/AgentSetting/AgentMeta/AutoGenerateSelect.tsx

@@ -35,7 +35,7 @@ const AutoGenerateSelect = memo<AutoGenerateInputProps>(
                 color: theme.colorInfo,
                 marginRight: -4,
               }}
-              title={t('autoGenerate')}
+              title={!canAutoGenerate ? t('autoGenerateTooltipDisabled') : t('autoGenerate')}
             />
           )
         }

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -64,7 +64,6 @@ const AgentMeta = memo(() => {
       children: (
         <AutoGenerate
           canAutoGenerate={hasSystemRole}
-          disabled={!hasSystemRole}
           loading={loading[item.key as keyof SessionLoadingState]}
           onChange={item.onChange}
           onGenerate={() => {
@@ -106,7 +105,13 @@ const AgentMeta = memo(() => {
         ...autocompleteItems,
       ],
       extra: (
-        <Tooltip title={t('autoGenerateTooltip', { ns: 'common' })}>
+        <Tooltip
+          title={
+            !hasSystemRole
+              ? t('autoGenerateTooltipDisabled', { ns: 'common' })
+              : t('autoGenerateTooltip', { ns: 'common' })
+          }
+        >
           <Button
             disabled={!hasSystemRole}
             icon={<Icon icon={Wand2} />}

package/src/features/Conversation/Error/ClerkLogin/index.tsx

@@ -0,0 +1,47 @@
+import { Button } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import UserLoginOrSignup from '@/features/User/UserLoginOrSignup';
+import { useGreeting } from '@/hooks/useGreeting';
+import { useChatStore } from '@/store/chat';
+import { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/selectors';
+
+import { ErrorActionContainer, FormAction } from '../style';
+
+const ClerkLogin = memo<{ id: string }>(({ id }) => {
+  const { t } = useTranslation('error');
+  const [openSignIn, isSignedIn] = useUserStore((s) => [s.openLogin, s.isSignedIn]);
+  const greeting = useGreeting();
+  const nickName = useUserStore(userProfileSelectors.nickName);
+  const [resend, deleteMessage] = useChatStore((s) => [s.internalResendMessage, s.deleteMessage]);
+
+  return (
+    <ErrorActionContainer>
+      {isSignedIn ? (
+        <FormAction
+          avatar={'🌟'}
+          description={t('clerkAuth.loginSuccess.desc', { greeting })}
+          title={t('clerkAuth.loginSuccess.title', { nickName })}
+        >
+          <Button
+            block
+            onClick={() => {
+              resend(id);
+              deleteMessage(id);
+            }}
+            size={'large'}
+            type={'primary'}
+          >
+            {t('clerkAuth.loginSuccess.action')}
+          </Button>
+        </FormAction>
+      ) : (
+        <UserLoginOrSignup onClick={openSignIn} />
+      )}
+    </ErrorActionContainer>
+  );
+});
+
+export default ClerkLogin;

package/src/features/Conversation/Error/index.tsx

@@ -6,6 +6,7 @@ import { AgentRuntimeErrorType, ILobeAgentRuntimeErrorType } from '@/libs/agent-
 import { ChatErrorType, ErrorType } from '@/types/fetch';
 import { ChatMessage, ChatMessageError } from '@/types/message';
 
+import ClerkLogin from './ClerkLogin';
 import ErrorJsonViewer from './ErrorJsonViewer';
 import InvalidAPIKey from './InvalidAPIKey';
 import InvalidAccessCode from './InvalidAccessCode';
@@ -63,6 +64,10 @@ const ErrorMessageExtra = memo<{ data: ChatMessage }>(({ data }) => {
       return <OllamaBizError {...data} />;
     }
 
+    case ChatErrorType.InvalidClerkUser: {
+      return <ClerkLogin id={data.id} />;
+    }
+
     case ChatErrorType.InvalidAccessCode: {
       return <InvalidAccessCode id={data.id} provider={data.error?.body?.provider} />;
     }

package/src/features/Conversation/components/InboxWelcome/index.tsx

@@ -2,10 +2,11 @@
 
 import { FluentEmoji, Markdown } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import { useGreeting } from '@/hooks/useGreeting';
 import { useIsMobile } from '@/hooks/useIsMobile';
 
 import AgentsSuggest from './AgentsSuggest';
@@ -40,30 +41,16 @@ const useStyles = createStyles(({ css, responsive }) => ({
 
 const InboxWelcome = memo(() => {
   const { t } = useTranslation('welcome');
-  const [greeting, setGreeting] = useState<'morning' | 'noon' | 'afternoon' | 'night'>();
   const { styles } = useStyles();
   const mobile = useIsMobile();
-  useEffect(() => {
-    const now = new Date();
-    const hours = now.getHours();
-
-    if (hours >= 4 && hours < 11) {
-      setGreeting('morning');
-    } else if (hours >= 11 && hours < 14) {
-      setGreeting('noon');
-    } else if (hours >= 14 && hours < 18) {
-      setGreeting('afternoon');
-    } else {
-      setGreeting('night');
-    }
-  }, []);
+  const greeting = useGreeting();
 
   return (
     <Center padding={16} width={'100%'}>
       <Flexbox className={styles.container} gap={16} style={{ maxWidth: 800 }} width={'100%'}>
         <Flexbox align={'center'} gap={8} horizontal>
           <FluentEmoji emoji={'👋'} size={40} type={'anim'} />
-          <h1 className={styles.title}>{greeting && t(`guide.welcome.${greeting}`)}</h1>
+          <h1 className={styles.title}>{greeting}</h1>
         </Flexbox>
         <Markdown className={styles.desc} variant={'chat'}>
           {t('guide.defaultMessage')}

package/src/features/DataImporter/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon } from '@lobehub/ui';
 import { Button, Result, Table, Upload } from 'antd';
 import { createStyles } from 'antd-style';

package/src/features/User/UserAvatar.tsx

@@ -6,7 +6,7 @@ import { memo } from 'react';
 
 import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
 import { useUserStore } from '@/store/user';
-import { userProfileSelectors } from '@/store/user/selectors';
+import { authSelectors, userProfileSelectors } from '@/store/user/selectors';
 
 const useStyles = createStyles(({ css, token }) => ({
   clickable: css`
@@ -47,12 +47,18 @@ export interface UserAvatarProps extends AvatarProps {
 const UserAvatar = memo<UserAvatarProps>(
   ({ size = 40, background, clickable, className, ...rest }) => {
     const { styles, cx } = useStyles();
-    const avatar = useUserStore(userProfileSelectors.userAvatar);
+    const [avatar, username] = useUserStore((s) => [
+      userProfileSelectors.userAvatar(s),
+      userProfileSelectors.username(s),
+    ]);
+
+    const isSignedIn = useUserStore(authSelectors.isLogin);
+
     return (
       <Avatar
-        alt={avatar ? 'UserAvatar' : 'LobeChat'}
-        avatar={avatar || DEFAULT_USER_AVATAR_URL}
-        background={avatar ? background : undefined}
+        alt={isSignedIn ? (username as string) : 'LobeChat'}
+        avatar={isSignedIn ? avatar || DEFAULT_USER_AVATAR_URL : DEFAULT_USER_AVATAR_URL}
+        background={isSignedIn && avatar ? background : undefined}
         className={cx(clickable && styles.clickable, className)}
         size={size}
         unoptimized

package/src/features/User/UserInfo.tsx

@@ -2,15 +2,14 @@
 
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import PlanTag from '@/features/User/PlanTag';
+import { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/selectors';
 
 import UserAvatar, { type UserAvatarProps } from './UserAvatar';
 
-const DEFAULT_USERNAME = 'LobeChat';
-
 const useStyles = createStyles(({ css, token }) => ({
   nickname: css`
     font-size: 16px;
@@ -28,10 +27,12 @@ export interface UserInfoProps extends FlexboxProps {
 }
 
 const UserInfo = memo<UserInfoProps>(({ avatarProps, ...rest }) => {
-  const { t } = useTranslation('common');
   const { styles, theme } = useStyles();
 
-  const DEFAULT_NICKNAME = t('userPanel.defaultNickname');
+  const [nickname, username] = useUserStore((s) => [
+    userProfileSelectors.nickName(s),
+    userProfileSelectors.username(s),
+  ]);
 
   return (
     <Flexbox
@@ -46,8 +47,8 @@ const UserInfo = memo<UserInfoProps>(({ avatarProps, ...rest }) => {
       <Flexbox align={'center'} gap={12} horizontal>
         <UserAvatar background={theme.colorFill} size={48} {...avatarProps} />
         <Flexbox flex={1} gap={6}>
-          <div className={styles.nickname}>{DEFAULT_NICKNAME}</div>
-          <div className={styles.username}>{DEFAULT_USERNAME}</div>
+          <div className={styles.nickname}>{nickname}</div>
+          <div className={styles.username}>{username}</div>
         </Flexbox>
       </Flexbox>
       <PlanTag />

package/src/features/User/UserLoginOrSignup.tsx

@@ -0,0 +1,23 @@
+import { Button } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import UserInfo from '@/features/User/UserInfo';
+
+const UserLoginOrSignup = memo<{ onClick: () => void }>(({ onClick }) => {
+  const { t } = useTranslation('auth');
+
+  return (
+    <>
+      <UserInfo />
+      <Flexbox paddingBlock={'0 12px'} paddingInline={16} width={'100%'}>
+        <Button block onClick={onClick} type={'primary'}>
+          {t('loginOrSignup')}
+        </Button>
+      </Flexbox>
+    </>
+  );
+});
+
+export default UserLoginOrSignup;

package/src/features/User/UserPanel/PanelContent.tsx

@@ -0,0 +1,74 @@
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import BrandWatermark from '@/components/BrandWatermark';
+import Menu from '@/components/Menu';
+import { enableAuth } from '@/const/auth';
+import { useUserStore } from '@/store/user';
+import { authSelectors } from '@/store/user/selectors';
+
+import UserInfo from '../UserInfo';
+import UserLoginOrSignup from '../UserLoginOrSignup';
+import LangButton from './LangButton';
+import ThemeButton from './ThemeButton';
+import { useMenu } from './useMenu';
+
+const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
+  const router = useRouter();
+  const isLoginWithAuth = useUserStore(authSelectors.isLoginWithAuth);
+  const [openSignIn, signOut, openUserProfile] = useUserStore((s) => [
+    s.openLogin,
+    s.logout,
+    s.openUserProfile,
+  ]);
+  const { mainItems, logoutItems } = useMenu();
+
+  const handleOpenProfile = () => {
+    if (!enableAuth) return;
+    openUserProfile();
+    closePopover();
+  };
+
+  const handleSignIn = () => {
+    openSignIn();
+    closePopover();
+  };
+
+  const handleSignOut = () => {
+    signOut();
+    closePopover();
+    router.push('/login');
+  };
+
+  return (
+    <Flexbox gap={2} style={{ minWidth: 300 }}>
+      {!enableAuth ? (
+        <UserInfo />
+      ) : isLoginWithAuth ? (
+        <UserInfo onClick={handleOpenProfile} />
+      ) : (
+        <UserLoginOrSignup onClick={handleSignIn} />
+      )}
+      <Menu items={mainItems} onClick={closePopover} />
+      <Flexbox
+        align={'center'}
+        horizontal
+        justify={'space-between'}
+        style={isLoginWithAuth ? { paddingRight: 6 } : { padding: '6px 6px 6px 16px' }}
+      >
+        {isLoginWithAuth ? (
+          <Menu items={logoutItems} onClick={handleSignOut} />
+        ) : (
+          <BrandWatermark />
+        )}
+        <Flexbox align={'center'} flex={'none'} gap={6} horizontal>
+          <LangButton />
+          <ThemeButton />
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default PanelContent;

package/src/features/User/UserPanel/UpgradeBadge.tsx

@@ -0,0 +1,19 @@
+import { Badge, ConfigProvider } from 'antd';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const UpgradeBadge = memo(({ children, showBadge }: PropsWithChildren<{ showBadge?: boolean }>) => {
+  if (!showBadge) return children;
+
+  return (
+    <Flexbox>
+      <ConfigProvider theme={{ components: { Badge: { dotSize: 8 } } }}>
+        <Badge dot offset={[-4, 4]}>
+          {children}
+        </Badge>
+      </ConfigProvider>
+    </Flexbox>
+  );
+});
+
+export default UpgradeBadge;

package/src/features/User/UserPanel/index.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { Badge, ConfigProvider, Popover } from 'antd';
+import { Popover } from 'antd';
 import { createStyles } from 'antd-style';
-import { PropsWithChildren, memo, useCallback, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { PropsWithChildren, memo, useState } from 'react';
 
-import PopoverContent from './Popover';
+import PanelContent from './PanelContent';
+import UpgradeBadge from './UpgradeBadge';
 import { useNewVersion } from './useNewVersion';
 
 const useStyles = createStyles(({ css }) => ({
@@ -20,40 +20,21 @@ const UserPanel = memo<PropsWithChildren>(({ children }) => {
   const [open, setOpen] = useState(false);
   const { styles } = useStyles();
 
-  const AvatarBadge = useCallback(
-    ({ children: badgeChildren, showBadge }: PropsWithChildren<{ showBadge?: boolean }>) => {
-      if (!showBadge) return badgeChildren;
-
-      return (
-        <Flexbox>
-          <ConfigProvider theme={{ components: { Badge: { dotSize: 8 } } }}>
-            <Badge dot offset={[-4, 4]}>
-              {badgeChildren}
-            </Badge>
-          </ConfigProvider>
-        </Flexbox>
-      );
-    },
-    [],
-  );
-
   return (
-    <AvatarBadge showBadge={hasNewVersion}>
+    <UpgradeBadge showBadge={hasNewVersion}>
       <Popover
         arrow={false}
-        content={<PopoverContent closePopover={() => setOpen(false)} />}
+        content={<PanelContent closePopover={() => setOpen(false)} />}
         onOpenChange={setOpen}
         open={open}
-        overlayInnerStyle={{
-          padding: 0,
-        }}
+        overlayInnerStyle={{ padding: 0 }}
         placement={'topRight'}
         rootClassName={styles.popover}
         trigger={['click']}
       >
         {children}
       </Popover>
-    </AvatarBadge>
+    </UpgradeBadge>
   );
 });