fix: check user access permission when visit at explore page

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

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

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

@@ -15,12 +15,16 @@ import type {
   AppMeta,
   ConversationItem,
 } from '@/models/share'
+import { AccessMode } from '@/models/access-control'
 
 export type ChatWithHistoryContextValue = {
+  isFromExplore: boolean
   appInfoError?: any
   appInfoLoading?: boolean
   appMeta?: AppMeta
   appData?: AppData
+  accessMode?: AccessMode
+  userCanAccess?: boolean
   appParams?: ChatConfig
   appChatListDataLoading?: boolean
   currentConversationId: string
@@ -52,6 +56,9 @@ export type ChatWithHistoryContextValue = {
 }
 
 export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>({
+  isFromExplore: false,
+  accessMode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+  userCanAccess: false,
   currentConversationId: '',
   appPrevChatTree: [],
   pinnedConversationList: [],
@@ -59,21 +66,21 @@ export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>
   showConfigPanelBeforeChat: false,
   newConversationInputs: {},
   newConversationInputsRef: { current: {} },
-  handleNewConversationInputsChange: () => {},
+  handleNewConversationInputsChange: () => { },
   inputsForms: [],
-  handleNewConversation: () => {},
-  handleStartChat: () => {},
-  handleChangeConversation: () => {},
-  handlePinConversation: () => {},
-  handleUnpinConversation: () => {},
-  handleDeleteConversation: () => {},
+  handleNewConversation: () => { },
+  handleStartChat: () => { },
+  handleChangeConversation: () => { },
+  handlePinConversation: () => { },
+  handleUnpinConversation: () => { },
+  handleDeleteConversation: () => { },
   conversationRenaming: false,
-  handleRenameConversation: () => {},
-  handleNewConversationCompleted: () => {},
+  handleRenameConversation: () => { },
+  handleNewConversationCompleted: () => { },
   chatShouldReloadKey: '',
   isMobile: false,
   isInstalledApp: false,
-  handleFeedback: () => {},
-  currentChatInstanceRef: { current: { handleStop: () => {} } },
+  handleFeedback: () => { },
+  currentChatInstanceRef: { current: { handleStop: () => { } } },
 })
 export const useChatWithHistoryContext = () => useContext(ChatWithHistoryContext)

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

@@ -42,6 +42,7 @@ import { changeLanguage } from '@/i18n/i18next-config'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
 import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
+import { useGetAppAccessMode, useGetUserCanAccessApp } from '@/service/access-control'
 
 function getFormattedChatList(messages: any[]) {
   const newChatList: ChatItem[] = []
@@ -72,6 +73,8 @@ function getFormattedChatList(messages: any[]) {
 export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
   const isInstalledApp = useMemo(() => !!installedAppInfo, [installedAppInfo])
   const { data: appInfo, isLoading: appInfoLoading, error: appInfoError } = useSWR(installedAppInfo ? null : 'appInfo', fetchAppInfo)
+  const { isPending: isGettingAccessMode, data: appAccessMode } = useGetAppAccessMode(installedAppInfo?.app.id || appInfo?.app_id)
+  const { isPending: isCheckingPermission, data: userCanAccessResult } = useGetUserCanAccessApp(installedAppInfo?.app.id || appInfo?.app_id)
 
   useAppFavicon({
     enable: !installedAppInfo,
@@ -418,7 +421,9 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
 
   return {
     appInfoError,
-    appInfoLoading,
+    appInfoLoading: appInfoLoading || isGettingAccessMode || isCheckingPermission,
+    accessMode: appAccessMode?.accessMode,
+    userCanAccess: userCanAccessResult?.result,
     isInstalledApp,
     appId,
     currentConversationId,

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

@@ -27,6 +27,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
   className,
 }) => {
   const {
+    userCanAccess,
     appInfoError,
     appData,
     appInfoLoading,
@@ -57,6 +58,8 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
       <Loading type='app' />
     )
   }
+  if (!userCanAccess)
+    return <AppUnavailable code={403} unknownReason='no permission.' />
 
   if (appInfoError) {
     return (
@@ -102,10 +105,12 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
 export type ChatWithHistoryWrapProps = {
   installedAppInfo?: InstalledApp
   className?: string
+  isFromExplore?: boolean
 }
 const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
   installedAppInfo,
   className,
+  isFromExplore,
 }) => {
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
@@ -114,6 +119,8 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
   const {
     appInfoError,
     appInfoLoading,
+    accessMode,
+    userCanAccess,
     appData,
     appParams,
     appMeta,
@@ -146,9 +153,12 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
 
   return (
     <ChatWithHistoryContext.Provider value={{
+      isFromExplore: !!isFromExplore,
       appInfoError,
       appInfoLoading,
       appData,
+      accessMode,
+      userCanAccess,
       appParams,
       appMeta,
       appChatListDataLoading,
@@ -187,6 +197,7 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
 const ChatWithHistoryWrapWithCheckToken: FC<ChatWithHistoryWrapProps> = ({
   installedAppInfo,
   className,
+  isFromExplore = false,
 }) => {
   const [initialized, setInitialized] = useState(false)
   const [appUnavailable, setAppUnavailable] = useState<boolean>(false)
@@ -222,6 +233,7 @@ const ChatWithHistoryWrapWithCheckToken: FC<ChatWithHistoryWrapProps> = ({
     <ChatWithHistoryWrap
       installedAppInfo={installedAppInfo}
       className={className}
+      isFromExplore={isFromExplore}
     />
   )
 }

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

@@ -12,10 +12,13 @@ import type { ConversationItem } from '@/models/share'
 import Confirm from '@/app/components/base/confirm'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
+import { AccessMode } from '@/models/access-control'
 
 const Sidebar = () => {
   const { t } = useTranslation()
   const {
+    isFromExplore,
+    accessMode,
     appData,
     pinnedConversationList,
     conversationList,
@@ -117,7 +120,7 @@ const Sidebar = () => {
         }
       </div>
       <div className='flex items-center justify-between px-4 pb-4 '>
-        <MenuDropdown placement='top-start' data={appData?.site} />
+        <MenuDropdown hideLogout={isFromExplore || accessMode === AccessMode.PUBLIC} placement='top-start' data={appData?.site} />
         {appData?.site.copyright && (
           <div className='text-xs text-gray-400 truncate'>
             © {(new Date()).getFullYear()} {appData?.site.copyright}

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

@@ -14,8 +14,12 @@ import type {
   AppMeta,
   ConversationItem,
 } from '@/models/share'
+import { AccessMode } from '@/models/access-control'
 
 export type EmbeddedChatbotContextValue = {
+  isFromExplore: boolean
+  accessMode?: AccessMode
+  userCanAccess?: boolean
   appInfoError?: any
   appInfoLoading?: boolean
   appMeta?: AppMeta
@@ -46,6 +50,9 @@ export type EmbeddedChatbotContextValue = {
 }
 
 export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>({
+  isFromExplore: false,
+  userCanAccess: false,
+  accessMode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
   currentConversationId: '',
   appPrevChatList: [],
   pinnedConversationList: [],
@@ -53,16 +60,16 @@ export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>
   showConfigPanelBeforeChat: false,
   newConversationInputs: {},
   newConversationInputsRef: { current: {} },
-  handleNewConversationInputsChange: () => {},
+  handleNewConversationInputsChange: () => { },
   inputsForms: [],
-  handleNewConversation: () => {},
-  handleStartChat: () => {},
-  handleChangeConversation: () => {},
-  handleNewConversationCompleted: () => {},
+  handleNewConversation: () => { },
+  handleStartChat: () => { },
+  handleChangeConversation: () => { },
+  handleNewConversationCompleted: () => { },
   chatShouldReloadKey: '',
   isMobile: false,
   isInstalledApp: false,
-  handleFeedback: () => {},
-  currentChatInstanceRef: { current: { handleStop: () => {} } },
+  handleFeedback: () => { },
+  currentChatInstanceRef: { current: { handleStop: () => { } } },
 })
 export const useEmbeddedChatbotContext = () => useContext(EmbeddedChatbotContext)

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

@@ -35,6 +35,7 @@ import { changeLanguage } from '@/i18n/i18next-config'
 import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
+import { useGetAppAccessMode, useGetUserCanAccessApp } from '@/service/access-control'
 
 function getFormattedChatList(messages: any[]) {
   const newChatList: ChatItem[] = []
@@ -65,6 +66,8 @@ function getFormattedChatList(messages: any[]) {
 export const useEmbeddedChatbot = () => {
   const isInstalledApp = false
   const { data: appInfo, isLoading: appInfoLoading, error: appInfoError } = useSWR('appInfo', fetchAppInfo)
+  const { isPending: isGettingAccessMode, data: appAccessMode } = useGetAppAccessMode(appInfo?.app_id)
+  const { isPending: isCheckingPermission, data: userCanAccessResult } = useGetUserCanAccessApp(appInfo?.app_id)
 
   const appData = useMemo(() => {
     return appInfo
@@ -319,7 +322,9 @@ export const useEmbeddedChatbot = () => {
 
   return {
     appInfoError,
-    appInfoLoading,
+    appInfoLoading: appInfoLoading || isGettingAccessMode || isCheckingPermission,
+    accessMode: appAccessMode?.accessMode,
+    userCanAccess: userCanAccessResult?.result,
     isInstalledApp,
     appId,
     currentConversationId,

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

@@ -26,6 +26,8 @@ import Tooltip from '@/app/components/base/tooltip'
 const Chatbot = () => {
   const { t } = useTranslation()
   const {
+    isFromExplore,
+    userCanAccess,
     isMobile,
     appInfoError,
     appInfoLoading,
@@ -59,6 +61,9 @@ const Chatbot = () => {
     )
   }
 
+  if (!userCanAccess)
+    return <AppUnavailable code={403} unknownReason='no permission.' />
+
   if (appInfoError) {
     return (
       <AppUnavailable />
@@ -91,7 +96,7 @@ const Chatbot = () => {
                     popupContent={t('share.chat.resetChat')}
                   >
                     <div className='p-1.5 bg-white border-[0.5px] border-gray-100 rounded-lg shadow-md cursor-pointer' onClick={handleNewConversation}>
-                      <RiLoopLeftLine className="h-4 w-4 text-gray-500"/>
+                      <RiLoopLeftLine className="h-4 w-4 text-gray-500" />
                     </div>
                   </Tooltip>
                 </div>
@@ -105,7 +110,11 @@ const Chatbot = () => {
   )
 }
 
-const EmbeddedChatbotWrapper = () => {
+type EmbeddedChatbotProps = {
+  isFromExplore?: boolean
+}
+
+const EmbeddedChatbotWrapper = ({ isFromExplore }: EmbeddedChatbotProps) => {
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
   const themeBuilder = useThemeContext()
@@ -114,6 +123,8 @@ const EmbeddedChatbotWrapper = () => {
     appInfoError,
     appInfoLoading,
     appData,
+    accessMode,
+    userCanAccess,
     appParams,
     appMeta,
     appChatListDataLoading,
@@ -139,6 +150,9 @@ const EmbeddedChatbotWrapper = () => {
   } = useEmbeddedChatbot()
 
   return <EmbeddedChatbotContext.Provider value={{
+    isFromExplore: !!isFromExplore,
+    userCanAccess,
+    accessMode,
     appInfoError,
     appInfoLoading,
     appData,
@@ -171,7 +185,7 @@ const EmbeddedChatbotWrapper = () => {
   </EmbeddedChatbotContext.Provider>
 }
 
-const EmbeddedChatbot = () => {
+const EmbeddedChatbot = ({ isFromExplore = false }: EmbeddedChatbotProps) => {
   const [initialized, setInitialized] = useState(false)
   const [appUnavailable, setAppUnavailable] = useState<boolean>(false)
   const [isUnknownReason, setIsUnknownReason] = useState<boolean>(false)
@@ -200,7 +214,7 @@ const EmbeddedChatbot = () => {
   if (appUnavailable)
     return <AppUnavailable isUnknownReason={isUnknownReason} />
 
-  return <EmbeddedChatbotWrapper />
+  return <EmbeddedChatbotWrapper isFromExplore={isFromExplore} />
 }
 
 export default EmbeddedChatbot

web/app/components/explore/installed-app/index.tsx

@@ -26,15 +26,15 @@ const InstalledApp: FC<IInstalledAppProps> = ({
   }
 
   return (
-    <div className='h-full py-2 pl-0 pr-2 sm:p-2'>
+    <div className='h-full py-2 pl-0 pr-2 sm:p-2 bg-background-default'>
       {installedApp.app.mode !== 'completion' && installedApp.app.mode !== 'workflow' && (
-        <ChatWithHistory installedAppInfo={installedApp} className='rounded-2xl shadow-md overflow-hidden' />
+        <ChatWithHistory isFromExplore installedAppInfo={installedApp} className='rounded-2xl shadow-md overflow-hidden' />
       )}
       {installedApp.app.mode === 'completion' && (
-        <TextGenerationApp isInstalledApp installedAppInfo={installedApp}/>
+        <TextGenerationApp isFromExplore isInstalledApp installedAppInfo={installedApp} />
       )}
       {installedApp.app.mode === 'workflow' && (
-        <TextGenerationApp isWorkflow isInstalledApp installedAppInfo={installedApp}/>
+        <TextGenerationApp isFromExplore isWorkflow isInstalledApp installedAppInfo={installedApp} />
       )}
     </div>
   )

web/app/components/share/text-generation/index.tsx

@@ -11,6 +11,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import TabHeader from '../../base/tab-header'
 import Button from '../../base/button'
 import { checkOrSetAccessToken } from '../utils'
+import AppUnavailable from '../../base/app-unavailable'
 import s from './style.module.css'
 import RunBatch from './run-batch'
 import ResDownload from './run-batch/res-download'
@@ -38,6 +39,8 @@ import Toast from '@/app/components/base/toast'
 import type { VisionFile, VisionSettings } from '@/types/app'
 import { Resolution, TransferMethod } from '@/types/app'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
+import { useGetAppAccessMode, useGetUserCanAccessApp } from '@/service/access-control'
+import { AccessMode } from '@/models/access-control'
 
 const GROUP_SIZE = 5 // to avoid RPM(Request per minute) limit. The group task finished then the next group.
 enum TaskStatus {
@@ -61,12 +64,14 @@ export type IMainProps = {
   isInstalledApp?: boolean
   installedAppInfo?: InstalledApp
   isWorkflow?: boolean
+  isFromExplore?: boolean
 }
 
 const TextGeneration: FC<IMainProps> = ({
   isInstalledApp = false,
   installedAppInfo,
   isWorkflow = false,
+  isFromExplore = false,
 }) => {
   const { notify } = Toast
 
@@ -107,6 +112,9 @@ const TextGeneration: FC<IMainProps> = ({
   const [moreLikeThisConfig, setMoreLikeThisConfig] = useState<MoreLikeThisConfig | null>(null)
   const [textToSpeechConfig, setTextToSpeechConfig] = useState<TextToSpeechConfig | null>(null)
 
+  const { isPending: isGettingAccessMode, data: appAccessMode } = useGetAppAccessMode(appId)
+  const { isPending: isCheckingPermission, data: userCanAccessResult } = useGetUserCanAccessApp(appId)
+
   // save message
   const [savedMessages, setSavedMessages] = useState<SavedMessage[]>([])
   const fetchSavedMessage = async () => {
@@ -538,12 +546,14 @@ const TextGeneration: FC<IMainProps> = ({
     </div>
   )
 
-  if (!appId || !siteInfo || !promptConfig) {
+  if (!appId || !siteInfo || !promptConfig || isGettingAccessMode || isCheckingPermission) {
     return (
       <div className='flex items-center h-screen'>
         <Loading type='app' />
       </div>)
   }
+  if (!userCanAccessResult?.result)
+    return <AppUnavailable code={403} unknownReason='no permission.' />
 
   return (
     <>
@@ -571,7 +581,7 @@ const TextGeneration: FC<IMainProps> = ({
                   />
                   <div className='text-lg font-semibold text-gray-800'>{siteInfo.title}</div>
                 </div>
-                <MenuDropdown />
+                <MenuDropdown hideLogout={isFromExplore || appAccessMode?.accessMode === AccessMode.PUBLIC} />
               </div>
               {!isPC && (
                 <Button

web/app/components/share/text-generation/menu-dropdown.tsx

@@ -22,11 +22,13 @@ import cn from '@/utils/classnames'
 type Props = {
   data?: SiteInfo
   placement?: Placement
+  hideLogout?: boolean
 }
 
 const MenuDropdown: FC<Props> = ({
   data,
   placement,
+  hideLogout,
 }) => {
   const router = useRouter()
   const { t } = useTranslation()
@@ -44,7 +46,7 @@ const MenuDropdown: FC<Props> = ({
   const handleLogout = useCallback(() => {
     removeAccessToken()
     router.replace(`/webapp-signin?redirect_url=${window.location.href}`)
-  }, [])
+  }, [router])
 
   const [show, setShow] = useState(false)
 
@@ -81,13 +83,17 @@ const MenuDropdown: FC<Props> = ({
                 }}
                 className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'
               >{t('common.userProfile.about')}</div>
-              <Divider />
-              <div
-                onClick={() => {
-                  handleLogout()
-                }}
-                className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-destructive hover:bg-state-base-hover'
-              >{t('common.userProfile.logout')}</div>
+              {!hideLogout && (
+                <>
+                  <Divider />
+                  <div
+                    onClick={() => {
+                      handleLogout()
+                    }}
+                    className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-destructive hover:bg-state-base-hover'
+                  >{t('common.userProfile.logout')}</div>
+                </>
+              )}
             </div>
           </div>
         </PortalToFollowElemContent>

web/hooks/use-document-title.ts

@@ -9,7 +9,8 @@ export default function useDocumentTitle(title: string) {
     if (systemFeatures.branding.enabled) {
       document.title = `${prefix}${systemFeatures.branding.application_title}`
       const faviconEle = document.querySelector('link[rel*=\'icon\']') as HTMLLinkElement
-      faviconEle.href = systemFeatures.branding.favicon
+      if (faviconEle)
+        faviconEle.href = systemFeatures.branding.favicon
     }
     else {
       document.title = `${prefix}Dify`

web/service/access-control.ts

@@ -63,3 +63,19 @@ export const useUpdateAccessMode = () => {
     },
   })
 }
+
+export const useGetAppAccessMode = (appId?: string) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'app-access-mode', appId],
+    queryFn: () => get<{ accessMode: AccessMode }>(`/enterprise/webapp/app/access-mode?appId=${appId}`),
+    enabled: !!appId,
+  })
+}
+
+export const useGetUserCanAccessApp = (appId?: string) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'user-can-access-app', appId],
+    queryFn: () => get<{ result: boolean }>(`/enterprise/webapp/permission?appId=${appId}`),
+    enabled: !!appId,
+  })
+}