dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/header/account-setting/members-page/invite-modal/index.module.css
+++ b/dify/web/app/components/header/account-setting/members-page/invite-modal/index.module.css
@@ -0,0 +1,12 @@
+.modal {
+  padding: 24px 32px !important;
+  width: 400px !important;
+}
+
+.emailsInput {
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important;
+}
+
+.emailBackground {
+  background-color: white !important;
+}
--- a/dify/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/dify/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -0,0 +1,155 @@
+'use client'
+import { useCallback, useEffect, useState } from 'react'
+import { useContext } from 'use-context-selector'
+import { RiCloseLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { ReactMultiEmail } from 'react-multi-email'
+import { RiErrorWarningFill } from '@remixicon/react'
+import RoleSelector from './role-selector'
+import s from './index.module.css'
+import cn from '@/utils/classnames'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import { inviteMember } from '@/service/common'
+import { emailRegex } from '@/config'
+import { ToastContext } from '@/app/components/base/toast'
+import type { InvitationResult } from '@/models/common'
+import I18n from '@/context/i18n'
+import 'react-multi-email/dist/style.css'
+import { noop } from 'lodash-es'
+import { useProviderContextSelector } from '@/context/provider-context'
+import { useBoolean } from 'ahooks'
+
+type IInviteModalProps = {
+  isEmailSetup: boolean
+  onCancel: () => void
+  onSend: (invitationResults: InvitationResult[]) => void
+}
+
+const InviteModal = ({
+  isEmailSetup,
+  onCancel,
+  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 [isSubmitting, {
+    setTrue: setIsSubmitting,
+    setFalse: setIsSubmitted,
+  }] = useBoolean(false)
+
+  const handleSend = useCallback(async () => {
+    if (isLimitExceeded || isSubmitting)
+      return
+    setIsSubmitting()
+    if (emails.map((email: string) => emailRegex.test(email)).every(Boolean)) {
+      try {
+        const { result, invitation_results } = await inviteMember({
+          url: '/workspaces/current/members/invite-email',
+          body: { emails, role, language: locale },
+        })
+
+        if (result === 'success') {
+          refreshLicenseLimit()
+          onCancel()
+          onSend(invitation_results)
+        }
+      }
+      catch { }
+    }
+    else {
+      notify({ type: 'error', message: t('common.members.emailInvalid') })
+    }
+    setIsSubmitted()
+  }, [isLimitExceeded, emails, role, locale, onCancel, onSend, notify, t, isSubmitting])
+
+  return (
+    <div className={cn(s.wrap)}>
+      <Modal overflowVisible isShow onClose={noop} className={cn(s.modal)}>
+        <div className='mb-2 flex justify-between'>
+          <div className='text-xl font-semibold text-text-primary'>{t('common.members.inviteTeamMember')}</div>
+          <RiCloseLine className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={onCancel} />
+        </div>
+        <div className='mb-3 text-[13px] text-text-tertiary'>{t('common.members.inviteTeamMemberTip')}</div>
+        {!isEmailSetup && (
+          <div className='grow basis-0 overflow-y-auto pb-4'>
+            <div className='relative mb-1 rounded-xl border border-components-panel-border p-2 shadow-xs'>
+              <div className='absolute left-0 top-0 h-full w-full rounded-xl opacity-40' style={{ background: 'linear-gradient(92deg, rgba(255, 171, 0, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
+              <div className='relative flex h-full w-full items-start'>
+                <div className='mr-0.5 shrink-0 p-0.5'>
+                  <RiErrorWarningFill className='h-5 w-5 text-text-warning' />
+                </div>
+                <div className='system-xs-medium text-text-primary'>
+                  <span>{t('common.members.emailNotSetup')}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div>
+          <div className='mb-2 text-sm font-medium text-text-primary'>{t('common.members.email')}</div>
+          <div className='mb-8 flex h-36 flex-col items-stretch'>
+            <ReactMultiEmail
+              className={cn('h-full 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',
+              )}
+              autoFocus
+              emails={emails}
+              inputClassName='bg-transparent'
+              onChange={setEmails}
+              getLabel={(email, index, removeEmail) =>
+                <div data-tag key={index} className={cn('bg-components-button-secondary-bg')}>
+                  <div data-tag-item>{email}</div>
+                  <span data-tag-handle onClick={() => removeEmail(index)}>
+                    ×
+                  </span>
+                </div>
+              }
+              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} />
+          </div>
+          <Button
+            tabIndex={0}
+            className='w-full'
+            onClick={handleSend}
+            disabled={!emails.length || isLimitExceeded || isSubmitting}
+            variant='primary'
+          >
+            {t('common.members.sendInvite')}
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default InviteModal
--- a/dify/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
+++ b/dify/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
@@ -0,0 +1,95 @@
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import React, { useState } from 'react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { useProviderContext } from '@/context/provider-context'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { Check } from '@/app/components/base/icons/src/vender/line/general'
+
+export type RoleSelectorProps = {
+  value: string
+  onChange: (role: string) => void
+}
+
+const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const { datasetOperatorEnabled } = useProviderContext()
+
+  const toHump = (name: string) => name.replace(/_(\w)/g, (all, letter) => letter.toUpperCase())
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={() => setOpen(v => !v)}
+          className='block'
+        >
+          <div className={cn('flex cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-3 py-2 hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+            <div className='mr-2 grow text-sm leading-5 text-text-primary'>{t('common.members.invitedAsRole', { role: t(`common.members.${toHump(value)}`) })}</div>
+            <RiArrowDownSLine className='h-4 w-4 shrink-0 text-text-secondary' />
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1002]'>
+          <div className='relative w-[336px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'>
+            <div className='p-1'>
+              <div className='cursor-pointer rounded-lg p-2 hover:bg-state-base-hover' onClick={() => {
+                onChange('normal')
+                setOpen(false)
+              }}>
+                <div className='relative pl-5'>
+                  <div className='text-sm leading-5 text-text-secondary'>{t('common.members.normal')}</div>
+                  <div className='text-xs leading-[18px] text-text-tertiary'>{t('common.members.normalTip')}</div>
+                  {value === 'normal' && <Check className='absolute left-0 top-0.5 h-4 w-4 text-text-accent'/>}
+                </div>
+              </div>
+              <div className='cursor-pointer rounded-lg p-2 hover:bg-state-base-hover' onClick={() => {
+                onChange('editor')
+                setOpen(false)
+              }}>
+                <div className='relative pl-5'>
+                  <div className='text-sm leading-5 text-text-secondary'>{t('common.members.editor')}</div>
+                  <div className='text-xs leading-[18px] text-text-tertiary'>{t('common.members.editorTip')}</div>
+                  {value === 'editor' && <Check className='absolute left-0 top-0.5 h-4 w-4 text-text-accent'/>}
+                </div>
+              </div>
+              <div className='cursor-pointer rounded-lg p-2 hover:bg-state-base-hover' onClick={() => {
+                onChange('admin')
+                setOpen(false)
+              }}>
+                <div className='relative pl-5'>
+                  <div className='text-sm leading-5 text-text-secondary'>{t('common.members.admin')}</div>
+                  <div className='text-xs leading-[18px] text-text-tertiary'>{t('common.members.adminTip')}</div>
+                  {value === 'admin' && <Check className='absolute left-0 top-0.5 h-4 w-4 text-text-accent'/>}
+                </div>
+              </div>
+              {datasetOperatorEnabled && (
+                <div className='cursor-pointer rounded-lg p-2 hover:bg-state-base-hover' onClick={() => {
+                  onChange('dataset_operator')
+                  setOpen(false)
+                }}>
+                  <div className='relative pl-5'>
+                    <div className='text-sm leading-5 text-text-secondary'>{t('common.members.datasetOperator')}</div>
+                    <div className='text-xs leading-[18px] text-text-tertiary'>{t('common.members.datasetOperatorTip')}</div>
+                    {value === 'dataset_operator' && <Check className='absolute left-0 top-0.5 h-4 w-4 text-text-accent'/>}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default RoleSelector