E-300 (#19726)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: Hash Brown <hi@xzd.me>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: GareArc <chen4851@purdue.edu>
Co-authored-by: Byron.wang <byron@dify.ai>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: Garfield Dai <dai.hai@foxmail.com>
Co-authored-by: KVOJJJin <jzongcode@gmail.com>
Co-authored-by: Alexi.F <654973939@qq.com>
Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com>
Co-authored-by: kautsar_masuara <61046989+izon-masuara@users.noreply.github.com>
Co-authored-by: achmad-kautsar <achmad.kautsar@insignia.co.id>
Co-authored-by: Xin Zhang <sjhpzx@gmail.com>
Co-authored-by: kelvintsim <83445753+kelvintsim@users.noreply.github.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com>

web/app/components/app/app-access-control/access-control-dialog.tsx

@@ -0,0 +1,61 @@
+import { Fragment, useCallback } from 'react'
+import type { ReactNode } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { RiCloseLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+
+type DialogProps = {
+  className?: string
+  children: ReactNode
+  show: boolean
+  onClose?: () => void
+}
+
+const AccessControlDialog = ({
+  className,
+  children,
+  show,
+  onClose,
+}: DialogProps) => {
+  const close = useCallback(() => {
+    onClose?.()
+  }, [onClose])
+  return (
+    <Transition appear show={show} as={Fragment}>
+      <Dialog as="div" open={true} className="relative z-20" onClose={() => null}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-background-overlay bg-opacity-25" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 flex items-center justify-center">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <Dialog.Panel className={cn('relative h-auto min-h-[323px] w-[600px] overflow-y-auto rounded-2xl bg-components-panel-bg p-0 shadow-xl transition-all', className)}>
+              <div onClick={() => close()} className="absolute right-5 top-5 z-10 flex h-8 w-8 cursor-pointer items-center justify-center">
+                <RiCloseLine className='h-5 w-5' />
+              </div>
+              {children}
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition >
+  )
+}
+
+export default AccessControlDialog

web/app/components/app/app-access-control/access-control-item.tsx

@@ -0,0 +1,30 @@
+'use client'
+import type { FC, PropsWithChildren } from 'react'
+import useAccessControlStore from '../../../../context/access-control-store'
+import type { AccessMode } from '@/models/access-control'
+
+type AccessControlItemProps = PropsWithChildren<{
+  type: AccessMode
+}>
+
+const AccessControlItem: FC<AccessControlItemProps> = ({ type, children }) => {
+  const { currentMenu, setCurrentMenu } = useAccessControlStore(s => ({ currentMenu: s.currentMenu, setCurrentMenu: s.setCurrentMenu }))
+  if (currentMenu !== type) {
+    return <div
+      className="cursor-pointer rounded-[10px] border-[1px]
+      border-components-option-card-option-border bg-components-option-card-option-bg
+      hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover"
+      onClick={() => setCurrentMenu(type)} >
+      {children}
+    </div>
+  }
+
+  return <div className="rounded-[10px] border-[1.5px]
+  border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-sm">
+    {children}
+  </div>
+}
+
+AccessControlItem.displayName = 'AccessControlItem'
+
+export default AccessControlItem

web/app/components/app/app-access-control/add-member-or-group-pop.tsx

@@ -0,0 +1,204 @@
+'use client'
+import { RiAddCircleFill, RiArrowRightSLine, RiOrganizationChart } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useDebounce } from 'ahooks'
+import { FloatingOverlay } from '@floating-ui/react'
+import Avatar from '../../base/avatar'
+import Button from '../../base/button'
+import Checkbox from '../../base/checkbox'
+import Input from '../../base/input'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
+import Loading from '../../base/loading'
+import useAccessControlStore from '../../../../context/access-control-store'
+import classNames from '@/utils/classnames'
+import { useSearchForWhiteListCandidates } from '@/service/access-control'
+import type { AccessControlAccount, AccessControlGroup, Subject, SubjectAccount, SubjectGroup } from '@/models/access-control'
+import { SubjectType } from '@/models/access-control'
+import { useSelector } from '@/context/app-context'
+
+export default function AddMemberOrGroupDialog() {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const [keyword, setKeyword] = useState('')
+  const selectedGroupsForBreadcrumb = useAccessControlStore(s => s.selectedGroupsForBreadcrumb)
+  const debouncedKeyword = useDebounce(keyword, { wait: 500 })
+
+  const lastAvailableGroup = selectedGroupsForBreadcrumb[selectedGroupsForBreadcrumb.length - 1]
+  const { isLoading, isFetchingNextPage, fetchNextPage, data } = useSearchForWhiteListCandidates({ keyword: debouncedKeyword, groupId: lastAvailableGroup?.id, resultsPerPage: 10 }, open)
+  const handleKeywordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setKeyword(e.target.value)
+  }
+
+  const anchorRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const hasMore = data?.pages?.[0].hasMore ?? false
+    let observer: IntersectionObserver | undefined
+    if (anchorRef.current) {
+      observer = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && !isLoading && hasMore)
+          fetchNextPage()
+      }, { rootMargin: '20px' })
+      observer.observe(anchorRef.current)
+    }
+    return () => observer?.disconnect()
+  }, [isLoading, fetchNextPage, anchorRef, data])
+
+  return <PortalToFollowElem open={open} onOpenChange={setOpen} offset={{ crossAxis: 300 }} placement='bottom-end'>
+    <PortalToFollowElemTrigger asChild>
+      <Button variant='ghost-accent' size='small' className='flex shrink-0 items-center gap-x-0.5' onClick={() => setOpen(!open)}>
+        <RiAddCircleFill className='h-4 w-4' />
+        <span>{t('common.operation.add')}</span>
+      </Button>
+    </PortalToFollowElemTrigger>
+    {open && <FloatingOverlay />}
+    <PortalToFollowElemContent className='z-[25]'>
+      <div className='relative flex max-h-[400px] w-[400px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
+        <div className='sticky top-0 z-10 bg-components-panel-bg-blur p-2 pb-0.5 backdrop-blur-[5px]'>
+          <Input value={keyword} onChange={handleKeywordChange} showLeftIcon placeholder={t('app.accessControlDialog.operateGroupAndMember.searchPlaceholder') as string} />
+        </div>
+        {
+          isLoading
+            ? <div className='p-1'><Loading /></div>
+            : (data?.pages?.length ?? 0) > 0
+              ? <>
+                <div className='flex h-7 items-center px-2 py-0.5'>
+                  <SelectedGroupsBreadCrumb />
+                </div>
+                <div className='p-1'>
+                  {renderGroupOrMember(data?.pages ?? [])}
+                  {isFetchingNextPage && <Loading />}
+                </div>
+                <div ref={anchorRef} className='h-0'> </div>
+              </>
+              : <div className='flex h-7 items-center justify-center px-2 py-0.5'>
+                <span className='system-xs-regular text-text-tertiary'>{t('app.accessControlDialog.operateGroupAndMember.noResult')}</span>
+              </div>
+        }
+      </div>
+    </PortalToFollowElemContent>
+  </PortalToFollowElem>
+}
+
+type GroupOrMemberData = { subjects: Subject[]; currPage: number }[]
+function renderGroupOrMember(data: GroupOrMemberData) {
+  return data?.map((page) => {
+    return <div key={`search_group_member_page_${page.currPage}`}>
+      {page.subjects?.map((item, index) => {
+        if (item.subjectType === SubjectType.GROUP)
+          return <GroupItem key={index} group={(item as SubjectGroup).groupData} />
+        return <MemberItem key={index} member={(item as SubjectAccount).accountData} />
+      })}
+    </div>
+  }) ?? null
+}
+
+function SelectedGroupsBreadCrumb() {
+  const selectedGroupsForBreadcrumb = useAccessControlStore(s => s.selectedGroupsForBreadcrumb)
+  const setSelectedGroupsForBreadcrumb = useAccessControlStore(s => s.setSelectedGroupsForBreadcrumb)
+  const { t } = useTranslation()
+
+  const handleBreadCrumbClick = useCallback((index: number) => {
+    const newGroups = selectedGroupsForBreadcrumb.slice(0, index + 1)
+    setSelectedGroupsForBreadcrumb(newGroups)
+  }, [setSelectedGroupsForBreadcrumb, selectedGroupsForBreadcrumb])
+  const handleReset = useCallback(() => {
+    setSelectedGroupsForBreadcrumb([])
+  }, [setSelectedGroupsForBreadcrumb])
+  return <div className='flex h-7 items-center gap-x-0.5 px-2 py-0.5'>
+    <span className={classNames('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'text-text-accent cursor-pointer')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}</span>
+    {selectedGroupsForBreadcrumb.map((group, index) => {
+      return <div key={index} className='system-xs-regular flex items-center gap-x-0.5 text-text-tertiary'>
+        <span>/</span>
+        <span className={index === selectedGroupsForBreadcrumb.length - 1 ? '' : 'cursor-pointer text-text-accent'} onClick={() => handleBreadCrumbClick(index)}>{group.name}</span>
+      </div>
+    })}
+  </div>
+}
+
+type GroupItemProps = {
+  group: AccessControlGroup
+}
+function GroupItem({ group }: GroupItemProps) {
+  const { t } = useTranslation()
+  const specificGroups = useAccessControlStore(s => s.specificGroups)
+  const setSpecificGroups = useAccessControlStore(s => s.setSpecificGroups)
+  const selectedGroupsForBreadcrumb = useAccessControlStore(s => s.selectedGroupsForBreadcrumb)
+  const setSelectedGroupsForBreadcrumb = useAccessControlStore(s => s.setSelectedGroupsForBreadcrumb)
+  const isChecked = specificGroups.some(g => g.id === group.id)
+  const handleCheckChange = useCallback(() => {
+    if (!isChecked) {
+      const newGroups = [...specificGroups, group]
+      setSpecificGroups(newGroups)
+    }
+    else {
+      const newGroups = specificGroups.filter(g => g.id !== group.id)
+      setSpecificGroups(newGroups)
+    }
+  }, [specificGroups, setSpecificGroups, group, isChecked])
+
+  const handleExpandClick = useCallback(() => {
+    setSelectedGroupsForBreadcrumb([...selectedGroupsForBreadcrumb, group])
+  }, [selectedGroupsForBreadcrumb, setSelectedGroupsForBreadcrumb, group])
+  return <BaseItem>
+    <Checkbox checked={isChecked} className='h-4 w-4 shrink-0' onCheck={handleCheckChange} />
+    <div className='item-center flex grow'>
+      <div className='mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid'>
+        <div className='bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center'>
+          <RiOrganizationChart className='h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0' />
+        </div>
+      </div>
+      <p className='system-sm-medium mr-1 text-text-secondary'>{group.name}</p>
+      <p className='system-xs-regular text-text-tertiary'>{group.groupSize}</p>
+    </div>
+    <Button size="small" disabled={isChecked} variant='ghost-accent'
+      className='flex shrink-0 items-center justify-between px-1.5 py-1' onClick={handleExpandClick}>
+      <span className='px-[3px]'>{t('app.accessControlDialog.operateGroupAndMember.expand')}</span>
+      <RiArrowRightSLine className='h-4 w-4' />
+    </Button>
+  </BaseItem>
+}
+
+type MemberItemProps = {
+  member: AccessControlAccount
+}
+function MemberItem({ member }: MemberItemProps) {
+  const currentUser = useSelector(s => s.userProfile)
+  const { t } = useTranslation()
+  const specificMembers = useAccessControlStore(s => s.specificMembers)
+  const setSpecificMembers = useAccessControlStore(s => s.setSpecificMembers)
+  const isChecked = specificMembers.some(m => m.id === member.id)
+  const handleCheckChange = useCallback(() => {
+    if (!isChecked) {
+      const newMembers = [...specificMembers, member]
+      setSpecificMembers(newMembers)
+    }
+    else {
+      const newMembers = specificMembers.filter(m => m.id !== member.id)
+      setSpecificMembers(newMembers)
+    }
+  }, [specificMembers, setSpecificMembers, member, isChecked])
+  return <BaseItem className='pr-3'>
+    <Checkbox checked={isChecked} className='h-4 w-4 shrink-0' onCheck={handleCheckChange} />
+    <div className='flex grow items-center'>
+      <div className='mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid'>
+        <div className='bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center'>
+          <Avatar className='h-[14px] w-[14px]' textClassName='text-[12px]' avatar={null} name={member.name} />
+        </div>
+      </div>
+      <p className='system-sm-medium mr-1 text-text-secondary'>{member.name}</p>
+      {currentUser.email === member.email && <p className='system-xs-regular text-text-tertiary'>({t('common.you')})</p>}
+    </div>
+    <p className='system-xs-regular text-text-quaternary'>{member.email}</p>
+  </BaseItem>
+}
+
+type BaseItemProps = {
+  className?: string
+  children: React.ReactNode
+}
+function BaseItem({ children, className }: BaseItemProps) {
+  return <div className={classNames('p-1 pl-2 flex items-center space-x-2 hover:rounded-lg hover:bg-state-base-hover cursor-pointer', className)}>
+    {children}
+  </div>
+}

web/app/components/app/app-access-control/index.tsx

@@ -0,0 +1,102 @@
+'use client'
+import { Dialog } from '@headlessui/react'
+import { RiBuildingLine, RiGlobalLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useEffect } from 'react'
+import Button from '../../base/button'
+import Toast from '../../base/toast'
+import useAccessControlStore from '../../../../context/access-control-store'
+import AccessControlDialog from './access-control-dialog'
+import AccessControlItem from './access-control-item'
+import SpecificGroupsOrMembers, { WebAppSSONotEnabledTip } from './specific-groups-or-members'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import type { App } from '@/types/app'
+import type { Subject } from '@/models/access-control'
+import { AccessMode, SubjectType } from '@/models/access-control'
+import { useUpdateAccessMode } from '@/service/access-control'
+
+type AccessControlProps = {
+  app: App
+  onClose: () => void
+  onConfirm?: () => void
+}
+
+export default function AccessControl(props: AccessControlProps) {
+  const { app, onClose, onConfirm } = props
+  const { t } = useTranslation()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const setAppId = useAccessControlStore(s => s.setAppId)
+  const specificGroups = useAccessControlStore(s => s.specificGroups)
+  const specificMembers = useAccessControlStore(s => s.specificMembers)
+  const currentMenu = useAccessControlStore(s => s.currentMenu)
+  const setCurrentMenu = useAccessControlStore(s => s.setCurrentMenu)
+  const hideTip = systemFeatures.webapp_auth.enabled
+    && (systemFeatures.webapp_auth.allow_sso
+      || systemFeatures.webapp_auth.allow_email_password_login
+      || systemFeatures.webapp_auth.allow_email_code_login)
+
+  useEffect(() => {
+    setAppId(app.id)
+    setCurrentMenu(app.access_mode ?? AccessMode.SPECIFIC_GROUPS_MEMBERS)
+  }, [app, setAppId, setCurrentMenu])
+
+  const { isPending, mutateAsync: updateAccessMode } = useUpdateAccessMode()
+  const handleConfirm = useCallback(async () => {
+    const submitData: {
+      appId: string
+      accessMode: AccessMode
+      subjects?: Pick<Subject, 'subjectId' | 'subjectType'>[]
+    } = { appId: app.id, accessMode: currentMenu }
+    if (currentMenu === AccessMode.SPECIFIC_GROUPS_MEMBERS) {
+      const subjects: Pick<Subject, 'subjectId' | 'subjectType'>[] = []
+      specificGroups.forEach((group) => {
+        subjects.push({ subjectId: group.id, subjectType: SubjectType.GROUP })
+      })
+      specificMembers.forEach((member) => {
+        subjects.push({
+          subjectId: member.id,
+          subjectType: SubjectType.ACCOUNT,
+        })
+      })
+      submitData.subjects = subjects
+    }
+    await updateAccessMode(submitData)
+    Toast.notify({ type: 'success', message: t('app.accessControlDialog.updateSuccess') })
+    onConfirm?.()
+  }, [updateAccessMode, app, specificGroups, specificMembers, t, onConfirm, currentMenu])
+  return <AccessControlDialog show onClose={onClose}>
+    <div className='flex flex-col gap-y-3'>
+      <div className='pb-3 pl-6 pr-14 pt-6'>
+        <Dialog.Title className='title-2xl-semi-bold text-text-primary'>{t('app.accessControlDialog.title')}</Dialog.Title>
+        <Dialog.Description className='system-xs-regular mt-1 text-text-tertiary'>{t('app.accessControlDialog.description')}</Dialog.Description>
+      </div>
+      <div className='flex flex-col gap-y-1 px-6 pb-3'>
+        <div className='leading-6'>
+          <p className='system-sm-medium'>{t('app.accessControlDialog.accessLabel')}</p>
+        </div>
+        <AccessControlItem type={AccessMode.ORGANIZATION}>
+          <div className='flex items-center p-3'>
+            <div className='flex grow items-center gap-x-2'>
+              <RiBuildingLine className='h-4 w-4 text-text-primary' />
+              <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.organization')}</p>
+            </div>
+            {!hideTip && <WebAppSSONotEnabledTip />}
+          </div>
+        </AccessControlItem>
+        <AccessControlItem type={AccessMode.SPECIFIC_GROUPS_MEMBERS}>
+          <SpecificGroupsOrMembers />
+        </AccessControlItem>
+        <AccessControlItem type={AccessMode.PUBLIC}>
+          <div className='flex items-center gap-x-2 p-3'>
+            <RiGlobalLine className='h-4 w-4 text-text-primary' />
+            <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.anyone')}</p>
+          </div>
+        </AccessControlItem>
+      </div>
+      <div className='flex items-center justify-end gap-x-2 p-6 pt-5'>
+        <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button disabled={isPending} loading={isPending} variant='primary' onClick={handleConfirm}>{t('common.operation.confirm')}</Button>
+      </div>
+    </div>
+  </AccessControlDialog>
+}

web/app/components/app/app-access-control/specific-groups-or-members.tsx

@@ -0,0 +1,139 @@
+'use client'
+import { RiAlertFill, RiCloseCircleFill, RiLockLine, RiOrganizationChart } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useEffect } from 'react'
+import Avatar from '../../base/avatar'
+import Divider from '../../base/divider'
+import Tooltip from '../../base/tooltip'
+import Loading from '../../base/loading'
+import useAccessControlStore from '../../../../context/access-control-store'
+import AddMemberOrGroupDialog from './add-member-or-group-pop'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import type { AccessControlAccount, AccessControlGroup } from '@/models/access-control'
+import { AccessMode } from '@/models/access-control'
+import { useAppWhiteListSubjects } from '@/service/access-control'
+
+export default function SpecificGroupsOrMembers() {
+  const currentMenu = useAccessControlStore(s => s.currentMenu)
+  const appId = useAccessControlStore(s => s.appId)
+  const setSpecificGroups = useAccessControlStore(s => s.setSpecificGroups)
+  const setSpecificMembers = useAccessControlStore(s => s.setSpecificMembers)
+  const { t } = useTranslation()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const hideTip = systemFeatures.webapp_auth.enabled
+    && (systemFeatures.webapp_auth.allow_sso
+      || systemFeatures.webapp_auth.allow_email_password_login
+      || systemFeatures.webapp_auth.allow_email_code_login)
+
+  const { isPending, data } = useAppWhiteListSubjects(appId, Boolean(appId) && currentMenu === AccessMode.SPECIFIC_GROUPS_MEMBERS)
+  useEffect(() => {
+    setSpecificGroups(data?.groups ?? [])
+    setSpecificMembers(data?.members ?? [])
+  }, [data, setSpecificGroups, setSpecificMembers])
+
+  if (currentMenu !== AccessMode.SPECIFIC_GROUPS_MEMBERS) {
+    return <div className='flex items-center p-3'>
+      <div className='flex grow items-center gap-x-2'>
+        <RiLockLine className='h-4 w-4 text-text-primary' />
+        <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.specific')}</p>
+      </div>
+      {!hideTip && <WebAppSSONotEnabledTip />}
+    </div>
+  }
+
+  return <div>
+    <div className='flex items-center gap-x-1 p-3'>
+      <div className='flex grow items-center gap-x-1'>
+        <RiLockLine className='h-4 w-4 text-text-primary' />
+        <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.specific')}</p>
+      </div>
+      <div className='flex items-center gap-x-1'>
+        {!hideTip && <>
+          <WebAppSSONotEnabledTip />
+          <Divider className='ml-2 mr-0 h-[14px]' type="vertical" />
+        </>}
+        <AddMemberOrGroupDialog />
+      </div>
+    </div>
+    <div className='px-1 pb-1'>
+      <div className='flex max-h-[400px] flex-col gap-y-2 overflow-y-auto rounded-lg bg-background-section p-2'>
+        {isPending ? <Loading /> : <RenderGroupsAndMembers />}
+      </div>
+    </div>
+  </div >
+}
+
+function RenderGroupsAndMembers() {
+  const { t } = useTranslation()
+  const specificGroups = useAccessControlStore(s => s.specificGroups)
+  const specificMembers = useAccessControlStore(s => s.specificMembers)
+  if (specificGroups.length <= 0 && specificMembers.length <= 0)
+    return <div className='px-2 pb-1.5 pt-5'><p className='system-xs-regular text-center text-text-tertiary'>{t('app.accessControlDialog.noGroupsOrMembers')}</p></div>
+  return <>
+    <p className='system-2xs-medium-uppercase sticky top-0 text-text-tertiary'>{t('app.accessControlDialog.groups', { count: specificGroups.length ?? 0 })}</p>
+    <div className='flex flex-row flex-wrap gap-1'>
+      {specificGroups.map((group, index) => <GroupItem key={index} group={group} />)}
+    </div>
+    <p className='system-2xs-medium-uppercase sticky top-0 text-text-tertiary'>{t('app.accessControlDialog.members', { count: specificMembers.length ?? 0 })}</p>
+    <div className='flex flex-row flex-wrap gap-1'>
+      {specificMembers.map((member, index) => <MemberItem key={index} member={member} />)}
+    </div>
+  </>
+}
+
+type GroupItemProps = {
+  group: AccessControlGroup
+}
+function GroupItem({ group }: GroupItemProps) {
+  const specificGroups = useAccessControlStore(s => s.specificGroups)
+  const setSpecificGroups = useAccessControlStore(s => s.setSpecificGroups)
+  const handleRemoveGroup = useCallback(() => {
+    setSpecificGroups(specificGroups.filter(g => g.id !== group.id))
+  }, [group, setSpecificGroups, specificGroups])
+  return <BaseItem icon={<RiOrganizationChart className='h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0' />}
+    onRemove={handleRemoveGroup}>
+    <p className='system-xs-regular text-text-primary'>{group.name}</p>
+    <p className='system-xs-regular text-text-tertiary'>{group.groupSize}</p>
+  </BaseItem>
+}
+
+type MemberItemProps = {
+  member: AccessControlAccount
+}
+function MemberItem({ member }: MemberItemProps) {
+  const specificMembers = useAccessControlStore(s => s.specificMembers)
+  const setSpecificMembers = useAccessControlStore(s => s.setSpecificMembers)
+  const handleRemoveMember = useCallback(() => {
+    setSpecificMembers(specificMembers.filter(m => m.id !== member.id))
+  }, [member, setSpecificMembers, specificMembers])
+  return <BaseItem icon={<Avatar className='h-[14px] w-[14px]' textClassName='text-[12px]' avatar={null} name={member.name} />}
+    onRemove={handleRemoveMember}>
+    <p className='system-xs-regular text-text-primary'>{member.name}</p>
+  </BaseItem>
+}
+
+type BaseItemProps = {
+  icon: React.ReactNode
+  children: React.ReactNode
+  onRemove?: () => void
+}
+function BaseItem({ icon, onRemove, children }: BaseItemProps) {
+  return <div className='group flex flex-row items-center gap-x-1 rounded-full border-[0.5px] bg-components-badge-white-to-dark p-1 pr-1.5 shadow-xs'>
+    <div className='h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid'>
+      <div className='bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center'>
+        {icon}
+      </div>
+    </div>
+    {children}
+    <div className='flex h-4 w-4 cursor-pointer items-center justify-center' onClick={onRemove}>
+      <RiCloseCircleFill className='h-[14px] w-[14px] text-text-quaternary' />
+    </div>
+  </div>
+}
+
+export function WebAppSSONotEnabledTip() {
+  const { t } = useTranslation()
+  return <Tooltip asChild={false} popupContent={t('app.accessControlDialog.webAppSSONotEnabledTip')}>
+    <RiAlertFill className='h-4 w-4 shrink-0 text-text-warning-secondary' />
+  </Tooltip>
+}

web/app/components/app/app-publisher/index.tsx

@@ -1,21 +1,28 @@
 import {
   memo,
   useCallback,
+  useEffect,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import dayjs from 'dayjs'
 import {
   RiArrowDownSLine,
+  RiArrowRightSLine,
+  RiLockLine,
   RiPlanetLine,
   RiPlayCircleLine,
   RiPlayList2Line,
   RiTerminalBoxLine,
 } from '@remixicon/react'
 import { useKeyPress } from 'ahooks'
+import { getKeyboardKeyCodeBySystem } from '../../workflow/utils'
 import Toast from '../../base/toast'
 import type { ModelAndParameter } from '../configuration/debug/types'
-import { getKeyboardKeyCodeBySystem } from '../../workflow/utils'
+import Divider from '../../base/divider'
+import AccessControl from '../app-access-control'
+import Loading from '../../base/loading'
+import Tooltip from '../../base/tooltip'
 import SuggestedAction from './suggested-action'
 import PublishWithMultipleModel from './publish-with-multiple-model'
 import Button from '@/app/components/base/button'
@@ -34,6 +41,10 @@ import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/co
 import type { InputVar } from '@/app/components/workflow/types'
 import { appDefaultIconBackground } from '@/config'
 import type { PublishWorkflowParams } from '@/types/workflow'
+import { useAppWhiteListSubjects, useGetUserCanAccessApp } from '@/service/access-control'
+import { AccessMode } from '@/models/access-control'
+import { fetchAppDetail } from '@/service/apps'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export type AppPublisherProps = {
   disabled?: boolean
@@ -74,11 +85,33 @@ const AppPublisher = ({
   const [published, setPublished] = useState(false)
   const [open, setOpen] = useState(false)
   const appDetail = useAppStore(state => state.appDetail)
+  const setAppDetail = useAppStore(s => s.setAppDetail)
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
   const appMode = (appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow') ? 'chat' : appDetail.mode
   const appURL = `${appBaseURL}${basePath}/${appMode}/${accessToken}`
   const isChatApp = ['chat', 'agent-chat', 'completion'].includes(appDetail?.mode || '')
+  const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
+  const { data: appAccessSubjects, isLoading: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open && systemFeatures.webapp_auth.enabled && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
 
+  useEffect(() => {
+    if (systemFeatures.webapp_auth.enabled && open && appDetail)
+      refetch()
+  }, [open, appDetail, refetch, systemFeatures])
+
+  const [showAppAccessControl, setShowAppAccessControl] = useState(false)
+  const [isAppAccessSet, setIsAppAccessSet] = useState(true)
+  useEffect(() => {
+    if (appDetail && appAccessSubjects) {
+      if (appDetail.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && appAccessSubjects.groups?.length === 0 && appAccessSubjects.members?.length === 0)
+        setIsAppAccessSet(false)
+      else
+        setIsAppAccessSet(true)
+    }
+    else {
+      setIsAppAccessSet(true)
+    }
+  }, [appAccessSubjects, appDetail])
   const language = useGetLanguage()
   const formatTimeFromNow = useCallback((time: number) => {
     return dayjs(time).locale(language === 'zh_Hans' ? 'zh-cn' : language.replace('_', '-')).fromNow()
@@ -99,7 +132,7 @@ const AppPublisher = ({
       await onRestore?.()
       setOpen(false)
     }
-    catch {}
+    catch { }
   }, [onRestore])
 
   const handleTrigger = useCallback(() => {
@@ -130,6 +163,13 @@ const AppPublisher = ({
     }
   }, [appDetail?.id])
 
+  const handleAccessControlUpdate = useCallback(() => {
+    fetchAppDetail({ url: '/apps', id: appDetail!.id }).then((res) => {
+      setAppDetail(res)
+      setShowAppAccessControl(false)
+    })
+  }, [appDetail, setAppDetail])
+
   const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false)
 
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
@@ -138,7 +178,7 @@ const AppPublisher = ({
       return
     handlePublish()
   },
-  { exactMatch: true, useCapture: true })
+    { exactMatch: true, useCapture: true })
 
   return (
     <>
@@ -223,70 +263,105 @@ const AppPublisher = ({
                 )
               }
             </div>
-            <div className='border-t-[0.5px] border-t-divider-regular p-4 pt-3'>
-              <SuggestedAction
-                disabled={!publishedAt}
-                link={appURL}
-                icon={<RiPlayCircleLine className='h-4 w-4' />}
-              >
-                {t('workflow.common.runApp')}
-              </SuggestedAction>
-              {appDetail?.mode === 'workflow' || appDetail?.mode === 'completion'
-                ? (
-                  <SuggestedAction
-                    disabled={!publishedAt}
-                    link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
-                    icon={<RiPlayList2Line className='h-4 w-4' />}
-                  >
-                    {t('workflow.common.batchRunApp')}
-                  </SuggestedAction>
-                )
-                : (
-                  <SuggestedAction
+            {(systemFeatures.webapp_auth.enabled && (isGettingUserCanAccessApp || isGettingAppWhiteListSubjects))
+              ? <div className='py-2'><Loading /></div>
+              : <>
+                <Divider className='my-0' />
+                {systemFeatures.webapp_auth.enabled && <div className='p-4 pt-3'>
+                  <div className='flex h-6 items-center'>
+                    <p className='system-xs-medium text-text-tertiary'>{t('app.publishApp.title')}</p>
+                  </div>
+                  <div className='flex h-8 cursor-pointer items-center gap-x-0.5  rounded-lg bg-components-input-bg-normal py-1 pl-2.5 pr-2 hover:bg-primary-50 hover:text-text-accent'
                     onClick={() => {
-                      setEmbeddingModalOpen(true)
-                      handleTrigger()
-                    }}
+                      setShowAppAccessControl(true)
+                    }}>
+                    <div className='flex grow items-center gap-x-1.5 pr-1'>
+                      <RiLockLine className='h-4 w-4 shrink-0 text-text-secondary' />
+                      {appDetail?.access_mode === AccessMode.ORGANIZATION && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.organization')}</p>}
+                      {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.specific')}</p>}
+                      {appDetail?.access_mode === AccessMode.PUBLIC && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.anyone')}</p>}
+                    </div>
+                    {!isAppAccessSet && <p className='system-xs-regular shrink-0 text-text-tertiary'>{t('app.publishApp.notSet')}</p>}
+                    <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
+                      <RiArrowRightSLine className='h-4 w-4 text-text-quaternary' />
+                    </div>
+                  </div>
+                  {!isAppAccessSet && <p className='system-xs-regular mt-1 text-text-warning'>{t('app.publishApp.notSetDesc')}</p>}
+                </div>}
+                <div className='flex flex-col gap-y-1 border-t-[0.5px] border-t-divider-regular p-4 pt-3'>
+                  <Tooltip triggerClassName='flex' disabled={!systemFeatures.webapp_auth.enabled || userCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                    <SuggestedAction
+                      className='flex-1'
+                      disabled={!publishedAt || (systemFeatures.webapp_auth.enabled && !userCanAccessApp?.result)}
+                      link={appURL}
+                      icon={<RiPlayCircleLine className='h-4 w-4' />}
+                    >
+                      {t('workflow.common.runApp')}
+                    </SuggestedAction>
+                  </Tooltip>
+                  {appDetail?.mode === 'workflow' || appDetail?.mode === 'completion'
+                    ? (
+                      <Tooltip triggerClassName='flex' disabled={!systemFeatures.webapp_auth.enabled || userCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                        <SuggestedAction
+                          className='flex-1'
+                          disabled={!publishedAt || (systemFeatures.webapp_auth.enabled && !userCanAccessApp?.result)}
+                          link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
+                          icon={<RiPlayList2Line className='h-4 w-4' />}
+                        >
+                          {t('workflow.common.batchRunApp')}
+                        </SuggestedAction>
+                      </Tooltip>
+                    )
+                    : (
+                      <SuggestedAction
+                        onClick={() => {
+                          setEmbeddingModalOpen(true)
+                          handleTrigger()
+                        }}
+                        disabled={!publishedAt}
+                        icon={<CodeBrowser className='h-4 w-4' />}
+                      >
+                        {t('workflow.common.embedIntoSite')}
+                      </SuggestedAction>
+                    )}
+                  <Tooltip triggerClassName='flex' disabled={!systemFeatures.webapp_auth.enabled || userCanAccessApp?.result} popupContent={t('app.noAccessPermission')} asChild={false}>
+                    <SuggestedAction
+                      className='flex-1'
+                      onClick={() => {
+                        publishedAt && handleOpenInExplore()
+                      }}
+                      disabled={!publishedAt || (systemFeatures.webapp_auth.enabled && !userCanAccessApp?.result)}
+                      icon={<RiPlanetLine className='h-4 w-4' />}
+                    >
+                      {t('workflow.common.openInExplore')}
+                    </SuggestedAction>
+                  </Tooltip>
+                  <SuggestedAction
                     disabled={!publishedAt}
-                    icon={<CodeBrowser className='h-4 w-4' />}
+                    link='./develop'
+                    icon={<RiTerminalBoxLine className='h-4 w-4' />}
                   >
-                    {t('workflow.common.embedIntoSite')}
+                    {t('workflow.common.accessAPIReference')}
                   </SuggestedAction>
-                )}
-              <SuggestedAction
-                onClick={() => {
-                  publishedAt && handleOpenInExplore()
-                }}
-                disabled={!publishedAt}
-                icon={<RiPlanetLine className='h-4 w-4' />}
-              >
-                {t('workflow.common.openInExplore')}
-              </SuggestedAction>
-              <SuggestedAction
-                disabled={!publishedAt}
-                link='./develop'
-                icon={<RiTerminalBoxLine className='h-4 w-4' />}
-              >
-                {t('workflow.common.accessAPIReference')}
-              </SuggestedAction>
-              {appDetail?.mode === 'workflow' && (
-                <WorkflowToolConfigureButton
-                  disabled={!publishedAt}
-                  published={!!toolPublished}
-                  detailNeedUpdate={!!toolPublished && published}
-                  workflowAppId={appDetail?.id}
-                  icon={{
-                    content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
-                    background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
-                  }}
-                  name={appDetail?.name}
-                  description={appDetail?.description}
-                  inputs={inputs}
-                  handlePublish={handlePublish}
-                  onRefreshData={onRefreshData}
-                />
-              )}
-            </div>
+                  {appDetail?.mode === 'workflow' && (
+                    <WorkflowToolConfigureButton
+                      disabled={!publishedAt}
+                      published={!!toolPublished}
+                      detailNeedUpdate={!!toolPublished && published}
+                      workflowAppId={appDetail?.id}
+                      icon={{
+                        content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
+                        background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
+                      }}
+                      name={appDetail?.name}
+                      description={appDetail?.description}
+                      inputs={inputs}
+                      handlePublish={handlePublish}
+                      onRefreshData={onRefreshData}
+                    />
+                  )}
+                </div>
+              </>}
           </div>
         </PortalToFollowElemContent>
         <EmbeddedModal
@@ -296,9 +371,9 @@ const AppPublisher = ({
           appBaseUrl={appBaseURL}
           accessToken={accessToken}
         />
+        {showAppAccessControl && <AccessControl app={appDetail!} onConfirm={handleAccessControlUpdate} onClose={() => { setShowAppAccessControl(false) }} />}
       </PortalToFollowElem >
-    </>
-  )
+    </>)
 }
 
 export default memo(AppPublisher)

web/app/components/app/app-publisher/suggested-action.tsx

@@ -8,22 +8,30 @@ export type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement
   disabled?: boolean
 }>
 
-const SuggestedAction = ({ icon, link, disabled, children, className, ...props }: SuggestedActionProps) => (
-  <a
-    href={disabled ? undefined : link}
-    target='_blank'
-    rel='noreferrer'
-    className={classNames(
-      'flex justify-start items-center gap-2 py-2 px-2.5 bg-background-section-burn rounded-lg text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
-      disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'hover:bg-state-accent-hover hover:text-text-accent cursor-pointer',
-      className,
-    )}
-    {...props}
-  >
-    <div className='relative h-4 w-4'>{icon}</div>
-    <div className='system-sm-medium shrink grow basis-0'>{children}</div>
-    <RiArrowRightUpLine className='h-3.5 w-3.5' />
-  </a>
-)
+const SuggestedAction = ({ icon, link, disabled, children, className, onClick, ...props }: SuggestedActionProps) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (disabled)
+      return
+    onClick?.(e)
+  }
+  return (
+    <a
+      href={disabled ? undefined : link}
+      target='_blank'
+      rel='noreferrer'
+      className={classNames(
+        'flex justify-start items-center gap-2 py-2 px-2.5 bg-background-section-burn rounded-lg text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
+        disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'text-text-secondary hover:bg-state-accent-hover hover:text-text-accent cursor-pointer',
+        className,
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      <div className='relative h-4 w-4'>{icon}</div>
+      <div className='system-sm-medium shrink grow basis-0'>{children}</div>
+      <RiArrowRightUpLine className='h-3.5 w-3.5' />
+    </a>
+  )
+}
 
 export default SuggestedAction

web/app/components/app/overview/appCard.tsx

@@ -1,11 +1,13 @@
 'use client'
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { usePathname, useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import {
+  RiArrowRightSLine,
   RiBookOpenLine,
   RiEqualizer2Line,
   RiExternalLinkLine,
+  RiLockLine,
   RiPaintBrushLine,
   RiWindowLine,
 } from '@remixicon/react'
@@ -18,6 +20,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import AppBasic from '@/app/components/app-sidebar/basic'
 import { asyncRunSafe, randomString } from '@/utils'
 import { basePath } from '@/utils/var'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import Button from '@/app/components/base/button'
 import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
@@ -29,6 +32,11 @@ import type { AppDetailResponse } from '@/models/app'
 import { useAppContext } from '@/context/app-context'
 import type { AppSSO } from '@/types/app'
 import Indicator from '@/app/components/header/indicator'
+import { fetchAppDetail } from '@/service/apps'
+import { AccessMode } from '@/models/access-control'
+import AccessControl from '../app-access-control'
+import { useAppWhiteListSubjects } from '@/service/access-control'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export type IAppCardProps = {
   className?: string
@@ -54,13 +62,17 @@ function AppCard({
   const router = useRouter()
   const pathname = usePathname()
   const { isCurrentWorkspaceManager, isCurrentWorkspaceEditor } = useAppContext()
+  const appDetail = useAppStore(state => state.appDetail)
+  const setAppDetail = useAppStore(state => state.setAppDetail)
   const [showSettingsModal, setShowSettingsModal] = useState(false)
   const [showEmbedded, setShowEmbedded] = useState(false)
   const [showCustomizeModal, setShowCustomizeModal] = useState(false)
   const [genLoading, setGenLoading] = useState(false)
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
-
+  const [showAccessControl, setShowAccessControl] = useState<boolean>(false)
   const { t } = useTranslation()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const { data: appAccessSubjects } = useAppWhiteListSubjects(appDetail?.id, systemFeatures.webapp_auth.enabled && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
 
   const OPERATIONS_MAP = useMemo(() => {
     const operationsMap = {
@@ -128,6 +140,31 @@ function AppCard({
     }
   }
 
+  const [isAppAccessSet, setIsAppAccessSet] = useState(true)
+  useEffect(() => {
+    if (appDetail && appAccessSubjects) {
+      if (appDetail.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && appAccessSubjects.groups?.length === 0 && appAccessSubjects.members?.length === 0)
+        setIsAppAccessSet(false)
+      else
+        setIsAppAccessSet(true)
+    }
+    else {
+      setIsAppAccessSet(true)
+    }
+  }, [appAccessSubjects, appDetail])
+
+  const handleClickAccessControl = useCallback(() => {
+    if (!appDetail)
+      return
+    setShowAccessControl(true)
+  }, [appDetail])
+  const handleAccessControlUpdate = useCallback(() => {
+    fetchAppDetail({ url: '/apps', id: appDetail!.id }).then((res) => {
+      setAppDetail(res)
+      setShowAccessControl(false)
+    })
+  }, [appDetail, setAppDetail])
+
   return (
     <div
       className={
@@ -206,6 +243,22 @@ function AppCard({
               )}
             </div>
           </div>
+          {isApp && systemFeatures.webapp_auth.enabled && appDetail && <div className='flex flex-col items-start justify-center self-stretch'>
+            <div className="system-xs-medium pb-1 text-text-tertiary">{t('app.publishApp.title')}</div>
+            <div className='flex h-9 w-full cursor-pointer items-center gap-x-0.5  rounded-lg bg-components-input-bg-normal py-1 pl-2.5 pr-2'
+              onClick={handleClickAccessControl}>
+              <div className='flex grow items-center gap-x-1.5 pr-1'>
+                <RiLockLine className='h-4 w-4 shrink-0 text-text-secondary' />
+                {appDetail?.access_mode === AccessMode.ORGANIZATION && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.organization')}</p>}
+                {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.specific')}</p>}
+                {appDetail?.access_mode === AccessMode.PUBLIC && <p className='system-sm-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.anyone')}</p>}
+              </div>
+              {!isAppAccessSet && <p className='system-xs-regular shrink-0 text-text-tertiary'>{t('app.publishApp.notSet')}</p>}
+              <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
+                <RiArrowRightSLine className='h-4 w-4 text-text-quaternary' />
+              </div>
+            </div>
+          </div>}
         </div>
         <div className={'flex items-center gap-1 self-stretch p-3'}>
           {!isApp && <SecretKeyButton appId={appInfo.id} />}
@@ -264,6 +317,11 @@ function AppCard({
               api_base_url={appInfo.api_base_url}
               mode={appInfo.mode}
             />
+            {
+              showAccessControl && <AccessControl app={appDetail!}
+                onConfirm={handleAccessControlUpdate}
+                onClose={() => { setShowAccessControl(false) }} />
+            }
           </>
         )
         : null}

web/app/components/app/overview/settings/index.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { RiArrowRightSLine, RiCloseLine } from '@remixicon/react'
 import Link from 'next/link'
 import { Trans, useTranslation } from 'react-i18next'
-import { useContext, useContextSelector } from 'use-context-selector'
+import { useContext } from 'use-context-selector'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import Modal from '@/app/components/base/modal'
 import ActionButton from '@/app/components/base/action-button'
@@ -21,7 +21,6 @@ import type { AppIconType, AppSSO, Language } from '@/types/app'
 import { useToastContext } from '@/app/components/base/toast'
 import { LanguagesSupported, languages } from '@/i18n/language'
 import Tooltip from '@/app/components/base/tooltip'
-import AppContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
@@ -65,8 +64,6 @@ const SettingsModal: FC<ISettingsModalProps> = ({
   onClose,
   onSave,
 }) => {
-  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
-  const { isCurrentWorkspaceEditor } = useAppContext()
   const { notify } = useToastContext()
   const [isShowMore, setIsShowMore] = useState(false)
   const {
@@ -110,7 +107,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
       : { type: 'emoji', icon, background: icon_background! },
   )
 
-  const { enableBilling, plan } = useProviderContext()
+  const { enableBilling, plan, webappCopyrightEnabled } = useProviderContext()
   const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
   const isFreePlan = plan.type === 'sandbox'
   const handlePlanClick = useCallback(() => {
@@ -138,7 +135,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
     setAppIcon(icon_type === 'image'
       ? { type: 'image', url: icon_url!, fileId: icon }
       : { type: 'emoji', icon, background: icon_background! })
-  }, [appInfo])
+  }, [appInfo, chat_color_theme, chat_color_theme_inverted, copyright, custom_disclaimer, default_language, description, icon, icon_background, icon_type, icon_url, privacy_policy, show_workflow_steps, title, use_icon_as_answer_icon])
 
   const onHide = () => {
     onClose()
@@ -188,7 +185,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
       chat_color_theme: inputInfo.chatColorTheme,
       chat_color_theme_inverted: inputInfo.chatColorThemeInverted,
       prompt_public: false,
-      copyright: isFreePlan
+      copyright: !webappCopyrightEnabled
         ? ''
         : inputInfo.copyrightSwitchValue
           ? inputInfo.copyright
@@ -336,28 +333,6 @@ const SettingsModal: FC<ISettingsModalProps> = ({
             </div>
             <p className='body-xs-regular pb-0.5 text-text-tertiary'>{t(`${prefixSettings}.workflow.showDesc`)}</p>
           </div>
-          {/* SSO */}
-          {systemFeatures.enable_web_sso_switch_component && (
-            <>
-              <Divider className="my-0 h-px" />
-              <div className='w-full'>
-                <p className='system-xs-medium-uppercase mb-1 text-text-tertiary'>{t(`${prefixSettings}.sso.label`)}</p>
-                <div className='flex items-center justify-between'>
-                  <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.sso.title`)}</div>
-                  <Tooltip
-                    disabled={systemFeatures.sso_enforced_for_web}
-                    popupContent={
-                      <div className='w-[180px]'>{t(`${prefixSettings}.sso.tooltip`)}</div>
-                    }
-                    asChild={false}
-                  >
-                    <Switch disabled={!systemFeatures.sso_enforced_for_web || !isCurrentWorkspaceEditor} defaultValue={systemFeatures.sso_enforced_for_web && inputInfo.enable_sso} onChange={v => setInputInfo({ ...inputInfo, enable_sso: v })}></Switch>
-                  </Tooltip>
-                </div>
-                <p className='body-xs-regular pb-0.5 text-text-tertiary'>{t(`${prefixSettings}.sso.description`)}</p>
-              </div>
-            </>
-          )}
           {/* more settings switch */}
           <Divider className="my-0 h-px" />
           {!isShowMore && (
@@ -392,14 +367,14 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                     )}
                   </div>
                   <Tooltip
-                    disabled={!isFreePlan}
+                    disabled={webappCopyrightEnabled}
                     popupContent={
-                      <div className='w-[260px]'>{t(`${prefixSettings}.more.copyrightTooltip`)}</div>
+                      <div className='w-[180px]'>{t(`${prefixSettings}.more.copyrightTooltip`)}</div>
                     }
                     asChild={false}
                   >
                     <Switch
-                      disabled={isFreePlan}
+                      disabled={!webappCopyrightEnabled}
                       defaultValue={inputInfo.copyrightSwitchValue}
                       onChange={v => setInputInfo({ ...inputInfo, copyrightSwitchValue: v })}
                     />
@@ -450,7 +425,6 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           <Button className='mr-2' onClick={onHide}>{t('common.operation.cancel')}</Button>
           <Button variant='primary' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
         </div>
-
         {showAppIconPicker && (
           <div onClick={e => e.stopPropagation()}>
             <AppIconPicker