@lobehub/chat 1.82.8 → 1.82.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.82.8",
+  "version": "1.82.9",
   "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",

package/src/app/(backend)/oidc/consent/route.ts

@@ -113,6 +113,18 @@ export async function POST(request: NextRequest) {
     const internalRedirectUrlString = await oidcService.getInteractionResult(uid, result);
     log('OIDC Provider internal redirect URL string: %s', internalRedirectUrlString);
 
+    // // Construct the handoff URL
+    // const handoffUrl = new URL('/oauth/handoff', request.nextUrl.origin);
+    // // Set the original redirect URL as the 'target' query parameter (URL encoded)
+    // handoffUrl.searchParams.set('target', internalRedirectUrlString);
+    //
+    // log('Redirecting to handoff page: %s', handoffUrl.toString());
+    // // Redirect to the handoff page
+    // return NextResponse.redirect(handoffUrl.toString(), {
+    //   headers: request.headers, // Keep original headers if necessary
+    //   status: 303,
+    // });
+
     return NextResponse.redirect(internalRedirectUrlString, {
       headers: request.headers,
       status: 303,

package/src/app/[variants]/oauth/consent/[uid]/{Client.tsx → Consent.tsx}

@@ -1,15 +1,12 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
 import { Button, Card, Divider, Typography } from 'antd';
 import { createStyles } from 'antd-style';
-import { Link2Icon, ServerIcon } from 'lucide-react';
-import Image from 'next/image';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import { ProductLogo } from '@/components/Branding';
+import OAuthApplicationLogo from './components/OAuthApplicationLogo';
 
 interface ClientProps {
   clientId: string;
@@ -129,42 +126,11 @@ const ConsentClient = memo<ClientProps>(
     return (
       <Center className={styles.container} gap={16}>
         <Flexbox gap={40}>
-          {clientMetadata.isFirstParty ? (
-            <Flexbox align={'center'} gap={12} horizontal justify={'center'}>
-              <Image
-                alt={clientDisplayName}
-                height={64}
-                src={clientMetadata.logo!}
-                unoptimized
-                width={64}
-              />
-            </Flexbox>
-          ) : (
-            <Flexbox align={'center'} gap={12} horizontal justify={'center'}>
-              <div className={styles.icon}>
-                {clientMetadata?.logo ? (
-                  <Image
-                    alt={clientDisplayName}
-                    height={56}
-                    src={clientMetadata?.logo}
-                    unoptimized
-                    width={56}
-                  />
-                ) : (
-                  <Icon icon={ServerIcon} />
-                )}
-              </div>
-              <div className={styles.connectorLine} />
-              <Center className={styles.connector}>
-                <Icon icon={Link2Icon} style={{ color: theme.colorTextSecondary, fontSize: 20 }} />
-              </Center>
-              <div className={styles.connectorLine} />
-              <div className={styles.lobeIcon}>
-                <ProductLogo height={48} style={{ objectFit: 'cover' }} width={48} />
-              </div>
-            </Flexbox>
-          )}
-
+          <OAuthApplicationLogo
+            clientDisplayName={clientDisplayName}
+            isFirstParty={clientMetadata.isFirstParty}
+            logoUrl={clientMetadata.logo}
+          />
           <Title className={styles.title} level={3}>
             {t('consent.title', { clientName: clientDisplayName })}
           </Title>

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

@@ -0,0 +1,130 @@
+'use client';
+
+import { Avatar } from '@lobehub/ui';
+import { Button, Card, Skeleton, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/selectors';
+
+import OAuthApplicationLogo from './components/OAuthApplicationLogo';
+
+interface LoginConfirmProps {
+  clientMetadata: {
+    clientName?: string;
+    isFirstParty?: boolean;
+    logo?: string;
+  };
+  uid: string;
+}
+
+const { Title } = Typography;
+
+const useStyles = createStyles(({ css, token }) => ({
+  authButton: css`
+    width: 100%;
+    height: 40px;
+    border-radius: ${token.borderRadius}px;
+    font-weight: 500;
+  `,
+  card: css`
+    width: 100%;
+    max-width: 500px;
+    border-color: ${token.colorBorderSecondary};
+    border-radius: 12px;
+
+    background: ${token.colorBgContainer};
+  `,
+  container: css`
+    width: 100%;
+    min-height: 100vh;
+    color: ${token.colorTextBase};
+    background-color: ${token.colorBgLayout};
+  `,
+  title: css`
+    margin-block-end: ${token.marginLG}px;
+    color: ${token.colorTextBase};
+    text-align: center;
+  `,
+}));
+
+const LoginConfirmClient = memo<LoginConfirmProps>(({ uid, clientMetadata }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('oauth'); // Assuming translations are in 'oauth'
+
+  const clientDisplayName = clientMetadata?.clientName || 'the application';
+
+  const isUserStateInit = useUserStore((s) => s.isUserStateInit);
+  const avatar = useUserStore(userProfileSelectors.userAvatar);
+  const nickName = useUserStore(userProfileSelectors.nickName);
+
+  const titleText = t('login.title', { clientName: clientDisplayName });
+  const descriptionText = t('login.description', { clientName: clientDisplayName });
+  const buttonText = t('login.button'); // Or "Continue"
+
+  return (
+    <Center className={styles.container} gap={16}>
+      <Flexbox align={'center'} gap={40}>
+        {/* Branding section - similar to Consent */}
+        <OAuthApplicationLogo
+          clientDisplayName={clientDisplayName}
+          isFirstParty={clientMetadata.isFirstParty}
+          logoUrl={clientMetadata.logo}
+        />
+      </Flexbox>
+      <Title className={styles.title} level={3}>
+        {titleText}
+      </Title>
+
+      <Card className={styles.card}>
+        <Flexbox gap={64}>
+          {/* Increased gap for better spacing */}
+          <Flexbox gap={24}>
+            <Center horizontal justify={'center'}>
+              {isUserStateInit ? (
+                <Flexbox align={'center'} gap={8} horizontal>
+                  <Avatar alt={nickName || ''} avatar={avatar} size={40} />
+                  <div style={{ fontSize: 20 }}>{nickName}</div>
+                </Flexbox>
+              ) : (
+                <Flexbox gap={8} horizontal>
+                  <Skeleton.Avatar active />
+                  <Skeleton.Button active />
+                </Flexbox>
+              )}
+            </Center>
+            <div style={{ textAlign: 'center' }}>{descriptionText}</div>
+          </Flexbox>
+
+          <Flexbox gap={16}>
+            {/* Form points to the endpoint handling login confirmation */}
+            <form action="/oidc/consent" method="post" style={{ width: '100%' }}>
+              {/* Adjust action URL */}
+              <input name="uid" type="hidden" value={uid} />
+              <input name="choice" type="hidden" value={'accept'} />
+              {/* Single confirmation button */}
+              <Button
+                className={styles.authButton}
+                disabled={!isUserStateInit}
+                htmlType="submit"
+                name="consent"
+                size="large"
+                type="primary"
+                value="accept"
+              >
+                {buttonText}
+              </Button>
+            </form>
+          </Flexbox>
+        </Flexbox>
+      </Card>
+    </Center>
+  );
+});
+
+LoginConfirmClient.displayName = 'LoginConfirmClient';
+
+export default LoginConfirmClient;

package/src/app/[variants]/oauth/consent/[uid]/components/OAuthApplicationLogo.tsx

@@ -0,0 +1,82 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Link2Icon, ServerIcon } from 'lucide-react';
+import Image from 'next/image';
+import React, { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { ProductLogo } from '@/components/Branding';
+
+const useStyles = createStyles(({ css, token }) => ({
+  connector: css`
+    width: 40px;
+    height: 40px;
+  `,
+  connectorLine: css`
+    width: 32px;
+    height: 1px;
+    background-color: ${token.colorBorderSecondary};
+  `,
+  icon: css`
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 64px;
+    height: 64px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 16px;
+
+    background-color: ${token.colorBgElevated};
+  `,
+  lobeIcon: css`
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+
+    background-color: ${token.colorBgElevated};
+  `,
+}));
+
+interface OAuthApplicationLogoProps {
+  clientDisplayName: string;
+  isFirstParty?: boolean;
+  logoUrl?: string;
+}
+
+const OAuthApplicationLogo = memo<OAuthApplicationLogoProps>(
+  ({ isFirstParty, clientDisplayName, logoUrl }) => {
+    const { styles, theme } = useStyles();
+    return isFirstParty ? (
+      <Flexbox align={'center'} gap={12} horizontal justify={'center'}>
+        <Image alt={clientDisplayName} height={64} src={logoUrl!} unoptimized width={64} />
+      </Flexbox>
+    ) : (
+      <Flexbox align={'center'} gap={12} horizontal justify={'center'}>
+        <div className={styles.icon}>
+          {logoUrl ? (
+            <Image alt={clientDisplayName} height={56} src={logoUrl} unoptimized width={56} />
+          ) : (
+            <Icon icon={ServerIcon} />
+          )}
+        </div>
+        <div className={styles.connectorLine} />
+        <Center className={styles.connector}>
+          <Icon icon={Link2Icon} style={{ color: theme.colorTextSecondary, fontSize: 20 }} />
+        </Center>
+        <div className={styles.connectorLine} />
+        <div className={styles.lobeIcon}>
+          <ProductLogo height={48} style={{ objectFit: 'cover' }} width={48} />
+        </div>
+      </Flexbox>
+    );
+  },
+);
+
+export default OAuthApplicationLogo;

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

@@ -4,8 +4,9 @@ import { oidcEnv } from '@/envs/oidc';
 import { defaultClients } from '@/libs/oidc-provider/config';
 import { OIDCService } from '@/server/services/oidc';
 
-import ConsentClient from './Client';
 import ConsentClientError from './ClientError';
+import Consent from './Consent';
+import Login from './Login';
 
 const InteractionPage = async (props: { params: Promise<{ uid: string }> }) => {
   if (!oidcEnv.ENABLE_OIDC) return notFound();
@@ -37,15 +38,19 @@ const InteractionPage = async (props: { params: Promise<{ uid: string }> }) => {
 
     const clientDetail = await oidcService.getClientMetadata(clientId);
 
+    const clientMetadata = {
+      clientName: clientDetail?.client_name,
+      isFirstParty: defaultClients.map((c) => c.client_id).includes(clientId),
+      logo: clientDetail?.logo_uri,
+    };
     // 渲染客户端组件，无论是 login 还是 consent 类型
+    if (details.prompt.name === 'login')
+      return <Login clientMetadata={clientMetadata} uid={params.uid} />;
+
     return (
-      <ConsentClient
+      <Consent
         clientId={clientId}
-        clientMetadata={{
-          clientName: clientDetail?.client_name,
-          isFirstParty: defaultClients.map((c) => c.client_id).includes(clientId),
-          logo: clientDetail?.logo_uri,
-        }}
+        clientMetadata={clientMetadata}
         redirectUri={details.params.redirect_uri as string}
         scopes={scopes}
         uid={params.uid}

package/src/app/[variants]/oauth/handoff/Client.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { Spin, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { useSearchParams } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+const { Title, Paragraph } = Typography;
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    width: 100%;
+    min-height: 100vh;
+    padding-block: 40px;
+    padding-inline: 24px;
+
+    color: ${token.colorTextBase};
+
+    background-color: ${token.colorBgLayout};
+  `,
+  content: css`
+    max-width: 600px;
+    text-align: center;
+  `,
+  message: css`
+    margin-block-end: ${token.marginXL}px;
+    color: ${token.colorTextSecondary};
+  `,
+  title: css`
+    margin-block-end: ${token.marginLG}px;
+  `,
+}));
+
+interface Status {
+  desc: string;
+  status: 'processing' | 'success';
+  title: string;
+}
+const AuthHandoffPage = () => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('oauth'); // Assuming 'oauth' namespace exists
+  const searchParams = useSearchParams();
+
+  const [status, setStatus] = useState<Status>({
+    desc: t('handoff.desc.processing'),
+    status: 'processing',
+    title: t('handoff.title.processing'),
+  });
+
+  const [isError, setIsError] = useState<boolean>(false);
+
+  useEffect(() => {
+    const targetUrl = searchParams.get('target');
+
+    if (targetUrl) {
+      try {
+        const decodedTargetUrl = decodeURIComponent(targetUrl);
+        console.log(`Attempting redirect to: ${decodedTargetUrl}`);
+
+        window.location.href = decodedTargetUrl;
+
+        const url = new URL(decodedTargetUrl);
+        if (!url.pathname.startsWith('/oidc/auth')) {
+          setStatus({
+            desc: t('handoff.desc.success'),
+            status: 'success',
+            title: t('handoff.title.success'),
+          });
+        }
+      } catch (error) {
+        console.error('Error decoding or redirecting:', error);
+        // setMessage(
+        //   t('handoff.error', '无法自动打开桌面应用。请检查链接是否有效或尝试手动打开应用。'),
+        // );
+        setIsError(true);
+      }
+    } else {
+      console.error('Missing target URL for handoff.');
+      setIsError(true);
+    }
+  }, [searchParams]);
+
+  return (
+    <Center className={styles.container} gap={12}>
+      {!isError && <Spin size="large" />}
+      <Flexbox align="center" className={styles.content} gap={16}>
+        <Title className={styles.title} level={3}>
+          {status.title}
+        </Title>
+        <Paragraph className={styles.message}>{status.desc}</Paragraph>
+      </Flexbox>
+    </Center>
+  );
+};
+
+export default AuthHandoffPage;

package/src/app/[variants]/oauth/handoff/page.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import React, { Suspense } from 'react';
+
+import Client from './Client';
+
+const AuthHandoffPage = () => (
+  <Suspense>
+    <Client />
+  </Suspense>
+);
+
+export default AuthHandoffPage;

package/src/locales/default/oauth.ts

@@ -34,6 +34,22 @@ const oauth = {
     subTitle: '您已拒绝授权应用访问您的 LobeChat 账户',
     title: '授权被拒绝',
   },
+  handoff: {
+    desc: {
+      processing: '应用正在处理授权，即将跳转下一个页面...',
+      success: '已尝试打开桌面应用。如果应用未自动打开，请手动切换。您可以稍后关闭此浏览器窗口。',
+    },
+    title: {
+      processing: '授权处理中...',
+      success: '授权已完成',
+    },
+  },
+  login: {
+    button: '确认登录',
+    description: '应用 {{clientName}} 申请使用您的账户进行登录',
+    title: '登录 {{clientName}}',
+    userWelcome: '欢迎回来，',
+  },
   success: {
     subTitle: '您已成功授权应用访问您的 LobeChat 账户，可以关闭该页面了',
     title: '授权成功',

package/src/middleware.ts

@@ -175,6 +175,7 @@ const isProtectedRoute = createRouteMatcher([
   '/settings(.*)',
   '/files(.*)',
   '/onboard(.*)',
+  '/oauth(.*)',
   // ↓ cloud ↓
 ]);