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/header/account-setting/members-page/index.tsx

@@ -25,6 +25,7 @@ import { LanguagesSupported } from '@/i18n/language'
 import cn from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import { RiPencilLine } from '@remixicon/react'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 dayjs.extend(relativeTime)
 
 const MembersPage = () => {
@@ -38,7 +39,7 @@ const MembersPage = () => {
   }
   const { locale } = useContext(I18n)
 
-  const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager, systemFeatures } = useAppContext()
+  const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager } = useAppContext()
   const { data, mutate } = useSWR(
     {
       url: '/workspaces/current/members',
@@ -46,6 +47,7 @@ const MembersPage = () => {
     },
     fetchMembers,
   )
+  const { systemFeatures } = useGlobalPublicStore()
   const [inviteModalVisible, setInviteModalVisible] = useState(false)
   const [invitationResults, setInvitationResults] = useState<InvitationResult[]>([])
   const [invitedModalVisible, setInvitedModalVisible] = useState(false)

web/app/components/header/account-setting/members-page/invite-modal/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
@@ -18,6 +18,7 @@ import I18n from '@/context/i18n'
 import 'react-multi-email/dist/style.css'
 import { noop } from 'lodash-es'
 
+import { useProviderContextSelector } from '@/context/provider-context'
 type IInviteModalProps = {
   isEmailSetup: boolean
   onCancel: () => void
@@ -30,13 +31,27 @@ const InviteModal = ({
   onSend,
 }: IInviteModalProps) => {
   const { t } = useTranslation()
+  const licenseLimit = useProviderContextSelector(s => s.licenseLimit)
+  const refreshLicenseLimit = useProviderContextSelector(s => s.refreshLicenseLimit)
   const [emails, setEmails] = useState<string[]>([])
   const { notify } = useContext(ToastContext)
+  const [isLimited, setIsLimited] = useState(false)
+  const [isLimitExceeded, setIsLimitExceeded] = useState(false)
+  const [usedSize, setUsedSize] = useState(licenseLimit.workspace_members.size ?? 0)
+  useEffect(() => {
+    const limited = licenseLimit.workspace_members.limit > 0
+    const used = emails.length + licenseLimit.workspace_members.size
+    setIsLimited(limited)
+    setUsedSize(used)
+    setIsLimitExceeded(limited && (used > licenseLimit.workspace_members.limit))
+  }, [licenseLimit, emails])
 
   const { locale } = useContext(I18n)
   const [role, setRole] = useState<string>('normal')
 
   const handleSend = useCallback(async () => {
+    if (isLimitExceeded)
+      return
     if (emails.map((email: string) => emailRegex.test(email)).every(Boolean)) {
       try {
         const { result, invitation_results } = await inviteMember({
@@ -45,6 +60,7 @@ const InviteModal = ({
         })
 
         if (result === 'success') {
+          refreshLicenseLimit()
           onCancel()
           onSend(invitation_results)
         }
@@ -54,7 +70,7 @@ const InviteModal = ({
     else {
       notify({ type: 'error', message: t('common.members.emailInvalid') })
     }
-  }, [role, emails, notify, onCancel, onSend, t])
+  }, [isLimitExceeded, emails, role, locale, onCancel, onSend, notify, t])
 
   return (
     <div className={cn(s.wrap)}>
@@ -82,7 +98,7 @@ const InviteModal = ({
 
         <div>
           <div className='mb-2 text-sm font-medium text-text-primary'>{t('common.members.email')}</div>
-          <div className='mb-8 flex h-36 items-stretch'>
+          <div className='mb-8 flex h-36 flex-col items-stretch'>
             <ReactMultiEmail
               className={cn('w-full border-components-input-border-active !bg-components-input-bg-normal px-3 pt-2 outline-none',
                 'appearance-none overflow-y-auto rounded-lg text-sm !text-text-primary',
@@ -101,6 +117,14 @@ const InviteModal = ({
               }
               placeholder={t('common.members.emailPlaceholder') || ''}
             />
+            <div className={
+              cn('system-xs-regular flex items-center justify-end text-text-tertiary',
+                (isLimited && usedSize > licenseLimit.workspace_members.limit) ? 'text-text-destructive' : '')}
+            >
+              <span>{usedSize}</span>
+              <span>/</span>
+              <span>{isLimited ? licenseLimit.workspace_members.limit : t('common.license.unlimited')}</span>
+            </div>
           </div>
           <div className='mb-6'>
             <RoleSelector value={role} onChange={setRole} />
@@ -109,7 +133,7 @@ const InviteModal = ({
             tabIndex={0}
             className='w-full'
             onClick={handleSend}
-            disabled={!emails.length}
+            disabled={!emails.length || isLimitExceeded}
             variant='primary'
           >
             {t('common.members.sendInvite')}

web/app/components/header/account-setting/model-provider-page/index.tsx

@@ -23,7 +23,7 @@ import {
 import InstallFromMarketplace from './install-from-marketplace'
 import { useProviderContext } from '@/context/provider-context'
 import cn from '@/utils/classnames'
-import { useSelector as useAppContextSelector } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 type Props = {
   searchText: string
@@ -40,7 +40,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
   const { data: speech2textDefaultModel } = useDefaultModel(ModelTypeEnum.speech2text)
   const { data: ttsDefaultModel } = useDefaultModel(ModelTypeEnum.tts)
   const { modelProviders: providers } = useProviderContext()
-  const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
+  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
   const defaultModelNotConfigured = !textGenerationDefaultModel && !embeddingsDefaultModel && !speech2textDefaultModel && !rerankDefaultModel && !ttsDefaultModel
   const [configuredProviders, notConfiguredProviders] = useMemo(() => {
     const configuredProviders: ModelProvider[] = []