@lobehub/chat 0.126.3 → 0.126.4

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 # Changelog
 
+### [Version 0.126.4](https://github.com/lobehub/lobe-chat/compare/v0.126.3...v0.126.4)
+
+<sup>Released on **2024-02-11**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Update Model provider request url.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix auth error in console, fix token tag usage display.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Update Model provider request url ([b64acc0](https://github.com/lobehub/lobe-chat/commit/b64acc0))
+
+#### What's fixed
+
+- **misc**: Fix auth error in console ([8e7ee82](https://github.com/lobehub/lobe-chat/commit/8e7ee82))
+- **misc**: Fix token tag usage display ([6e7134b](https://github.com/lobehub/lobe-chat/commit/6e7134b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.126.3](https://github.com/lobehub/lobe-chat/compare/v0.126.2...v0.126.3)
 
 <sup>Released on **2024-02-09**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.126.3",
+  "version": "0.126.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -73,6 +73,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5",
+    "@auth/core": "^0.26.3",
     "@aws-sdk/client-bedrock-runtime": "^3.503.1",
     "@azure/openai": "^1.0.0-beta.11",
     "@cfworker/json-schema": "^1",

package/src/app/layout.tsx

@@ -4,6 +4,7 @@ import { PropsWithChildren } from 'react';
 import { isRtlLang } from 'rtl-detect';
 
 import Analytics from '@/components/Analytics';
+import { getServerConfig } from '@/config/server';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
 import {
   LOBE_THEME_APPEARANCE,
@@ -14,6 +15,8 @@ import Layout from '@/layout/GlobalLayout';
 
 import StyleRegistry from './StyleRegistry';
 
+const { ENABLE_OAUTH_SSO } = getServerConfig();
+
 const RootLayout = ({ children }: PropsWithChildren) => {
   // get default theme config to use with ssr
   const cookieStore = cookies();
@@ -32,6 +35,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
             defaultLang={lang?.value}
             defaultNeutralColor={neutralColor?.value as any}
             defaultPrimaryColor={primaryColor?.value as any}
+            enableOAuthSSO={ENABLE_OAUTH_SSO}
           >
             {children}
           </Layout>

package/src/app/settings/common/Common.tsx

@@ -2,7 +2,7 @@ import { Form, type ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/u
 import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { AppWindow, Monitor, Moon, Palette, Sun } from 'lucide-react';
-import { signIn, signOut, useSession } from 'next-auth/react';
+import { signIn, signOut } from 'next-auth/react';
 import { memo, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,6 +10,7 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import { imageUrl } from '@/const/url';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
+import { useOAuthSession } from '@/hooks/useOAuthSession';
 import { localeOptions } from '@/locales/resources';
 import { useChatStore } from '@/store/chat';
 import { useFileStore } from '@/store/file';
@@ -32,8 +33,7 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
 
-  const { data: session, status } = useSession();
-  const isOAuthLoggedIn = status === 'authenticated' && session && session.user;
+  const { user, isOAuthLoggedIn } = useOAuthSession();
 
   const [clearSessions, clearSessionGroups] = useSessionStore((s) => [
     s.clearSessions,
@@ -227,7 +227,7 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin
           </Button>
         ),
         desc: isOAuthLoggedIn
-          ? `${session.user?.email} ${t('settingSystem.oauth.info.desc')}`
+          ? `${user?.email} ${t('settingSystem.oauth.info.desc')}`
           : t('settingSystem.oauth.signin.desc'),
         hidden: !showOAuthLogin,
         label: isOAuthLoggedIn

package/src/app/settings/llm/page.tsx

@@ -6,6 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import Footer from '@/app/settings/features/Footer';
 import PageTitle from '@/components/PageTitle';
+import { MORE_MODEL_PROVIDER_REQUEST_URL } from '@/const/url';
 import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
 import { SettingsTabs } from '@/store/global/initialState';
 
@@ -30,11 +31,7 @@ export default memo(() => {
       <Footer>
         <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
           更多模型正在
-          <Link
-            aria-label={'todo'}
-            href="https://github.com/lobehub/lobe-chat/issues/151"
-            target="_blank"
-          >
+          <Link aria-label={'todo'} href={MORE_MODEL_PROVIDER_REQUEST_URL} target="_blank">
             计划接入
           </Link>
           中 ，敬请期待 ✨

package/src/const/url.ts

@@ -15,6 +15,9 @@ export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 
 export const PLUGINS_INDEX_URL = 'https://chat-plugins.lobehub.com';
 
+export const MORE_MODEL_PROVIDER_REQUEST_URL =
+  'https://github.com/lobehub/lobe-chat/discussions/1284';
+
 export const AGENTS_INDEX_GITHUB = 'https://github.com/lobehub/lobe-chat-agents';
 export const AGENTS_INDEX_GITHUB_ISSUE = urlJoin(AGENTS_INDEX_GITHUB, 'issues/new');
 

package/src/features/ChatInput/ActionBar/Token/TokenTag.tsx

@@ -30,10 +30,11 @@ const Token = memo(() => {
     agentSelectors.currentAgentModel(s) as LanguageModel,
   ]);
 
-  const tokens = useGlobalStore(modelProviderSelectors.modelMaxToken(model));
+  const maxTokens = useGlobalStore(modelProviderSelectors.modelMaxToken(model));
 
+  // Tool usage token
+  const canUseTool = useGlobalStore(modelProviderSelectors.modelEnabledFunctionCall(model));
   const plugins = useSessionStore(agentSelectors.currentAgentPlugins);
-
   const toolsString = useToolStore((s) => {
     const pluginSystemRoles = toolSelectors.enabledSystemRoles(plugins)(s);
     const schemaNumber = toolSelectors
@@ -43,13 +44,17 @@ const Token = memo(() => {
 
     return pluginSystemRoles + schemaNumber;
   });
+  const toolsToken = useTokenCount(canUseTool ? toolsString : '');
 
+  // Chat usage token
   const inputTokenCount = useTokenCount(input);
+
   const chatsToken = useTokenCount(messageString) + inputTokenCount;
 
-  const toolsToken = useTokenCount(toolsString);
+  // SystemRole token
   const systemRoleToken = useTokenCount(systemRole);
 
+  // Total token
   const totalToken = systemRoleToken + toolsToken + chatsToken;
   return (
     <Tooltip
@@ -74,18 +79,18 @@ const Token = memo(() => {
           </Flexbox>
           <Flexbox horizontal justify={'space-between'} style={{ marginTop: 8 }}>
             <span>{t('tokenDetails.total')}</span>
-            <span>{format(tokens)}</span>
+            <span>{format(maxTokens)}</span>
           </Flexbox>
           <Flexbox horizontal justify={'space-between'}>
             <span>{t('tokenDetails.rest')}</span>
-            <span>{format(tokens - totalToken)}</span>
+            <span>{format(maxTokens - totalToken)}</span>
           </Flexbox>
         </Flexbox>
       }
     >
       <TokenTag
         displayMode={'used'}
-        maxValue={tokens}
+        maxValue={maxTokens}
         style={{ marginLeft: 8 }}
         text={{
           overload: t('tokenTag.overload'),

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

@@ -1,11 +1,12 @@
 import { Icon } from '@lobehub/ui';
 import { App, Button } from 'antd';
 import { ScanFace } from 'lucide-react';
-import { signIn, signOut, useSession } from 'next-auth/react';
+import { signIn, signOut } from 'next-auth/react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import { useOAuthSession } from '@/hooks/useOAuthSession';
 import { useChatStore } from '@/store/chat';
 
 import { FormAction } from './style';
@@ -13,8 +14,7 @@ import { FormAction } from './style';
 const OAuthForm = memo<{ id: string }>(({ id }) => {
   const { t } = useTranslation('error');
 
-  const { data: session, status } = useSession();
-  const isOAuthLoggedIn = status === 'authenticated' && session && session.user;
+  const { user, isOAuthLoggedIn } = useOAuthSession();
 
   const [resend, deleteMessage] = useChatStore((s) => [s.resendMessage, s.deleteMessage]);
 
@@ -38,7 +38,7 @@ const OAuthForm = memo<{ id: string }>(({ id }) => {
         avatar={isOAuthLoggedIn ? '✅' : '🕵️‍♂️'}
         description={
           isOAuthLoggedIn
-            ? `${t('unlock.oauth.welcome')} ${session?.user?.name}`
+            ? `${t('unlock.oauth.welcome')} ${user?.name}`
             : t('unlock.oauth.description')
         }
         title={isOAuthLoggedIn ? t('unlock.oauth.success') : t('unlock.oauth.title')}

package/src/hooks/useOAuthSession.ts

@@ -0,0 +1,24 @@
+import { User } from '@auth/core/types';
+import { SessionContextValue, useSession } from 'next-auth/react';
+import { useMemo } from 'react';
+
+interface OAuthSession {
+  isOAuthLoggedIn: boolean;
+  user?: User | null;
+}
+
+export const useOAuthSession = () => {
+  let authSession: SessionContextValue | null;
+  try {
+    // refs: https://github.com/lobehub/lobe-chat/pull/1286
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    authSession = useSession();
+  } catch {
+    authSession = null;
+  }
+
+  const { data: session, status } = authSession || {};
+  const isOAuthLoggedIn = (status === 'authenticated' && session && !!session.user) || false;
+
+  return useMemo<OAuthSession>(() => ({ isOAuthLoggedIn, user: session?.user }), [session, status]);
+};

package/src/layout/GlobalLayout/index.tsx

@@ -46,19 +46,29 @@ const Container = memo<PropsWithChildren>(({ children }) => {
 
 interface GlobalLayoutProps extends AppThemeProps {
   defaultLang?: string;
+  enableOAuthSSO?: boolean;
 }
 
-const GlobalLayout = ({ children, defaultLang, ...theme }: GlobalLayoutProps) => {
-  return (
-    <SessionProvider basePath={API_ENDPOINTS.oauth}>
-      <AppTheme {...theme}>
-        <Locale defaultLang={defaultLang}>
-          <StoreHydration />
-          <Container>{children}</Container>
-          <DebugUI />
-        </Locale>
-      </AppTheme>
-    </SessionProvider>
+const GlobalLayout = ({
+  children,
+  defaultLang,
+  enableOAuthSSO = false,
+  ...theme
+}: GlobalLayoutProps) => {
+  const content = (
+    <AppTheme {...theme}>
+      <Locale defaultLang={defaultLang}>
+        <StoreHydration />
+        <Container>{children}</Container>
+        <DebugUI />
+      </Locale>
+    </AppTheme>
+  );
+
+  return enableOAuthSSO ? (
+    <SessionProvider basePath={API_ENDPOINTS.oauth}>{content}</SessionProvider>
+  ) : (
+    content
   );
 };