Fix/add webapp no permission page (#20819)

web/app/components/base/app-unavailable.tsx

@@ -21,7 +21,7 @@ const AppUnavailable: FC<IAppUnavailableProps> = ({
 
   return (
     <div className={classNames('flex h-screen w-screen items-center justify-center', className)}>
-      <h1 className='mr-5 h-[50px] pr-5 text-[24px] font-medium leading-[50px]'
+      <h1 className='mr-5 h-[50px] shrink-0 pr-5 text-[24px] font-medium leading-[50px]'
         style={{
           borderRight: '1px solid rgba(0,0,0,.3)',
         }}>{code}</h1>

web/app/components/base/chat/chat-with-history/index.tsx

@@ -1,5 +1,7 @@
+'use client'
 import type { FC } from 'react'
 import {
+  useCallback,
   useEffect,
   useState,
 } from 'react'
@@ -17,10 +19,12 @@ import ChatWrapper from './chat-wrapper'
 import type { InstalledApp } from '@/models/explore'
 import Loading from '@/app/components/base/loading'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { checkOrSetAccessToken } from '@/app/components/share/utils'
+import { checkOrSetAccessToken, removeAccessToken } from '@/app/components/share/utils'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import cn from '@/utils/classnames'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { useTranslation } from 'react-i18next'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 
 type ChatWithHistoryProps = {
   className?: string
@@ -38,6 +42,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
     isMobile,
     themeBuilder,
     sidebarCollapseState,
+    isInstalledApp,
   } = useChatWithHistoryContext()
   const isSidebarCollapsed = sidebarCollapseState
   const customConfig = appData?.custom_config
@@ -51,13 +56,34 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
 
   useDocumentTitle(site?.title || 'Chat')
 
+  const { t } = useTranslation()
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+  const getSigninUrl = useCallback(() => {
+    const params = new URLSearchParams(searchParams)
+    params.delete('message')
+    params.set('redirect_url', pathname)
+    return `/webapp-signin?${params.toString()}`
+  }, [searchParams, pathname])
+
+  const backToHome = useCallback(() => {
+    removeAccessToken()
+    const url = getSigninUrl()
+    router.replace(url)
+  }, [getSigninUrl, router])
+
   if (appInfoLoading) {
     return (
       <Loading type='app' />
     )
   }
-  if (!userCanAccess)
-    return <AppUnavailable code={403} unknownReason='no permission.' />
+  if (!userCanAccess) {
+    return <div className='flex h-full flex-col items-center justify-center gap-y-2'>
+      <AppUnavailable className='h-auto w-auto' code={403} unknownReason='no permission.' />
+      {!isInstalledApp && <span className='system-sm-regular cursor-pointer text-text-tertiary' onClick={backToHome}>{t('common.userProfile.logout')}</span>}
+    </div>
+  }
 
   if (appInfoError) {
     return (

web/app/components/base/chat/embedded-chatbot/index.tsx

@@ -1,4 +1,6 @@
+'use client'
 import {
+  useCallback,
   useEffect,
   useState,
 } from 'react'
@@ -12,7 +14,7 @@ import { useEmbeddedChatbot } from './hooks'
 import { isDify } from './utils'
 import { useThemeContext } from './theme/theme-context'
 import { CssTransform } from './theme/utils'
-import { checkOrSetAccessToken } from '@/app/components/share/utils'
+import { checkOrSetAccessToken, removeAccessToken } from '@/app/components/share/utils'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import Loading from '@/app/components/base/loading'
@@ -23,6 +25,7 @@ import DifyLogo from '@/app/components/base/logo/dify-logo'
 import cn from '@/utils/classnames'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 
 const Chatbot = () => {
   const {
@@ -36,6 +39,7 @@ const Chatbot = () => {
     chatShouldReloadKey,
     handleNewConversation,
     themeBuilder,
+    isInstalledApp,
   } = useEmbeddedChatbotContext()
   const { t } = useTranslation()
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
@@ -51,6 +55,22 @@ const Chatbot = () => {
 
   useDocumentTitle(site?.title || 'Chat')
 
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+  const getSigninUrl = useCallback(() => {
+    const params = new URLSearchParams(searchParams)
+    params.delete('message')
+    params.set('redirect_url', pathname)
+    return `/webapp-signin?${params.toString()}`
+  }, [searchParams, pathname])
+
+  const backToHome = useCallback(() => {
+    removeAccessToken()
+    const url = getSigninUrl()
+    router.replace(url)
+  }, [getSigninUrl, router])
+
   if (appInfoLoading) {
     return (
       <>
@@ -66,8 +86,12 @@ const Chatbot = () => {
     )
   }
 
-  if (!userCanAccess)
-    return <AppUnavailable code={403} unknownReason='no permission.' />
+  if (!userCanAccess) {
+    return <div className='flex h-full flex-col items-center justify-center gap-y-2'>
+      <AppUnavailable className='h-auto w-auto' code={403} unknownReason='no permission.' />
+      {!isInstalledApp && <span className='system-sm-regular cursor-pointer text-text-tertiary' onClick={backToHome}>{t('common.userProfile.logout')}</span>}
+    </div>
+  }
 
   if (appInfoError) {
     return (
@@ -141,7 +165,6 @@ const EmbeddedChatbotWrapper = () => {
     appInfoError,
     appInfoLoading,
     appData,
-    accessMode,
     userCanAccess,
     appParams,
     appMeta,
@@ -176,7 +199,6 @@ const EmbeddedChatbotWrapper = () => {
 
   return <EmbeddedChatbotContext.Provider value={{
     userCanAccess,
-    accessMode,
     appInfoError,
     appInfoLoading,
     appData,