Initial commit

dify_0.15.3/web/app/components/header/account-about/index.module.css

@@ -0,0 +1,5 @@
+.modal {
+  max-width: 480px !important;
+  width: 480px !important;
+  padding: 24px 32px !important;
+}

dify_0.15.3/web/app/components/header/account-about/index.tsx

@@ -0,0 +1,88 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
+import dayjs from 'dayjs'
+import { RiCloseLine } from '@remixicon/react'
+import s from './index.module.css'
+import classNames from '@/utils/classnames'
+import Modal from '@/app/components/base/modal'
+import type { LangGeniusVersionResponse } from '@/models/common'
+import { IS_CE_EDITION } from '@/config'
+import LogoSite from '@/app/components/base/logo/logo-site'
+
+type IAccountSettingProps = {
+  langeniusVersionInfo: LangGeniusVersionResponse
+  onCancel: () => void
+}
+const buttonClassName = `
+shrink-0 flex items-center h-8 px-3 rounded-lg border border-gray-200
+text-xs text-gray-800 font-medium
+`
+export default function AccountAbout({
+  langeniusVersionInfo,
+  onCancel,
+}: IAccountSettingProps) {
+  const { t } = useTranslation()
+  const isLatest = langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version
+
+  return (
+    <Modal
+      isShow
+      onClose={() => { }}
+      className={s.modal}
+    >
+      <div className='relative pt-4'>
+        <div className='absolute -top-2 -right-4 flex justify-center items-center w-8 h-8 cursor-pointer' onClick={onCancel}>
+          <RiCloseLine className='w-4 h-4 text-gray-500' />
+        </div>
+        <div>
+          <LogoSite className='mx-auto mb-2' />
+          <div className='mb-3 text-center text-xs font-normal text-gray-500'>Version {langeniusVersionInfo?.current_version}</div>
+          <div className='mb-4 text-center text-xs font-normal text-gray-700'>
+            <div>© {dayjs().year()} LangGenius, Inc., Contributors.</div>
+            <div className='text-[#1C64F2]'>
+              {
+                IS_CE_EDITION
+                  ? <Link href={'https://github.com/langgenius/dify/blob/main/LICENSE'} target='_blank' rel='noopener noreferrer'>Open Source License</Link>
+                  : <>
+                    <Link href='https://dify.ai/privacy' target='_blank' rel='noopener noreferrer'>Privacy Policy</Link>,<span> </span>
+                    <Link href='https://dify.ai/terms' target='_blank' rel='noopener noreferrer'>Terms of Service</Link>
+                  </>
+              }
+            </div>
+          </div>
+        </div>
+        <div className='mb-4 -mx-8 h-[0.5px] bg-gray-200' />
+        <div className='flex justify-between items-center'>
+          <div className='text-xs font-medium text-gray-800'>
+            {
+              isLatest
+                ? t('common.about.latestAvailable', { version: langeniusVersionInfo.latest_version })
+                : t('common.about.nowAvailable', { version: langeniusVersionInfo.latest_version })
+            }
+          </div>
+          <div className='flex items-center'>
+            <Link
+              className={classNames(buttonClassName, 'mr-2')}
+              href={'https://github.com/langgenius/dify/releases'}
+              target='_blank' rel='noopener noreferrer'
+            >
+              {t('common.about.changeLog')}
+            </Link>
+            {
+              !isLatest && !IS_CE_EDITION && (
+                <Link
+                  className={classNames(buttonClassName, 'text-primary-600')}
+                  href={langeniusVersionInfo.release_notes}
+                  target='_blank' rel='noopener noreferrer'
+                >
+                  {t('common.about.updateNow')}
+                </Link>
+              )
+            }
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}

dify_0.15.3/web/app/components/header/account-dropdown/index.tsx

@@ -0,0 +1,221 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { Fragment, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import { RiArrowDownSLine, RiLogoutBoxRLine } from '@remixicon/react'
+import Link from 'next/link'
+import { Menu, Transition } from '@headlessui/react'
+import Indicator from '../indicator'
+import AccountAbout from '../account-about'
+import { mailToSupport } from '../utils/util'
+import WorkplaceSelector from './workplace-selector'
+import classNames from '@/utils/classnames'
+import I18n from '@/context/i18n'
+import Avatar from '@/app/components/base/avatar'
+import { logout } from '@/service/common'
+import { useAppContext } from '@/context/app-context'
+import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import { useModalContext } from '@/context/modal-context'
+import { LanguagesSupported } from '@/i18n/language'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '@/app/components/billing/type'
+
+export type IAppSelector = {
+  isMobile: boolean
+}
+
+export default function AppSelector({ isMobile }: IAppSelector) {
+  const itemClassName = `
+    flex items-center w-full h-9 px-3 text-text-secondary system-md-regular
+    rounded-lg hover:bg-state-base-hover cursor-pointer
+  `
+  const router = useRouter()
+  const [aboutVisible, setAboutVisible] = useState(false)
+
+  const { locale } = useContext(I18n)
+  const { t } = useTranslation()
+  const { userProfile, langeniusVersionInfo } = useAppContext()
+  const { setShowAccountSettingModal } = useModalContext()
+  const { plan } = useProviderContext()
+  const canEmailSupport = plan.type === Plan.professional || plan.type === Plan.team || plan.type === Plan.enterprise
+
+  const handleLogout = async () => {
+    await logout({
+      url: '/logout',
+      params: {},
+    })
+
+    localStorage.removeItem('setup_status')
+    localStorage.removeItem('console_token')
+    localStorage.removeItem('refresh_token')
+
+    router.push('/signin')
+  }
+
+  return (
+    <div className="">
+      <Menu as="div" className="relative inline-block text-left">
+        {
+          ({ open }) => (
+            <>
+              <Menu.Button
+                className={`
+                    inline-flex items-center
+                    rounded-[20px] py-1 pr-2.5 pl-1 text-sm
+                  text-gray-700 hover:bg-gray-200
+                    mobile:px-1
+                    ${open && 'bg-gray-200'}
+                  `}
+              >
+                <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='sm:mr-2 mr-0' size={32} />
+                {!isMobile && <>
+                  {userProfile.name}
+                  <RiArrowDownSLine className="w-3 h-3 ml-1 text-gray-700" />
+                </>}
+              </Menu.Button>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                <Menu.Items
+                  className="
+                    absolute right-0 mt-1.5 w-60 max-w-80
+                    divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
+                    shadow-lg focus:outline-none
+                  "
+                >
+                  <Menu.Item disabled>
+                    <div className='flex flex-nowrap items-center px-4 py-[13px]'>
+                      <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} className='mr-3' />
+                      <div className='grow'>
+                        <div className='system-md-medium text-text-primary break-all'>{userProfile.name}</div>
+                        <div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
+                      </div>
+                    </div>
+                  </Menu.Item>
+                  <div className='px-1 py-1'>
+                    <div className='mt-2 px-3 text-xs font-medium text-text-tertiary'>{t('common.userProfile.workspace')}</div>
+                    <WorkplaceSelector />
+                  </div>
+                  <div className="px-1 py-1">
+                    <Menu.Item>
+                      {({ active }) => <Link
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
+                        href='/account'
+                        target='_self' rel='noopener noreferrer'>
+                        <div>{t('common.account.account')}</div>
+                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                      </Link>}
+                    </Menu.Item>
+                    <Menu.Item>
+                      {({ active }) => <div className={classNames(itemClassName,
+                        active && 'bg-state-base-hover',
+                      )} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
+                        <div>{t('common.userProfile.settings')}</div>
+                      </div>}
+                    </Menu.Item>
+                    {canEmailSupport && <Menu.Item>
+                      {({ active }) => <a
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
+                        href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
+                        target='_blank' rel='noopener noreferrer'>
+                        <div>{t('common.userProfile.emailSupport')}</div>
+                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                      </a>}
+                    </Menu.Item>}
+                    <Menu.Item>
+                      {({ active }) => <Link
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
+                        href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
+                        target='_blank' rel='noopener noreferrer'>
+                        <div>{t('common.userProfile.communityFeedback')}</div>
+                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                      </Link>}
+                    </Menu.Item>
+                    <Menu.Item>
+                      {({ active }) => <Link
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
+                        href='https://discord.gg/5AEfbxcd9k'
+                        target='_blank' rel='noopener noreferrer'>
+                        <div>{t('common.userProfile.community')}</div>
+                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                      </Link>}
+                    </Menu.Item>
+                    <Menu.Item>
+                      {({ active }) => <Link
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
+                        href={
+                          locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
+                        }
+                        target='_blank' rel='noopener noreferrer'>
+                        <div>{t('common.userProfile.helpCenter')}</div>
+                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                      </Link>}
+                    </Menu.Item>
+                    <Menu.Item>
+                      {({ active }) => <Link
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
+                        href='https://roadmap.dify.ai'
+                        target='_blank' rel='noopener noreferrer'>
+                        <div>{t('common.userProfile.roadmap')}</div>
+                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
+                      </Link>}
+                    </Menu.Item>
+                    {
+                      document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
+                        <Menu.Item>
+                          {({ active }) => <div className={classNames(itemClassName, 'justify-between',
+                            active && 'bg-state-base-hover',
+                          )} onClick={() => setAboutVisible(true)}>
+                            <div>{t('common.userProfile.about')}</div>
+                            <div className='flex items-center'>
+                              <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
+                              <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
+                            </div>
+                          </div>}
+                        </Menu.Item>
+                      )
+                    }
+                  </div>
+                  <Menu.Item>
+                    {({ active }) => <div className='p-1' onClick={() => handleLogout()}>
+                      <div
+                        className={
+                          classNames('flex items-center justify-between h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover',
+                            active && 'bg-state-base-hover')}
+                      >
+                        <div className='system-md-regular text-text-secondary'>{t('common.userProfile.logout')}</div>
+                        <RiLogoutBoxRLine className='hidden w-4 h-4 text-text-tertiary group-hover:flex' />
+                      </div>
+                    </div>}
+                  </Menu.Item>
+                </Menu.Items>
+              </Transition>
+            </>
+          )
+        }
+      </Menu>
+      {
+        aboutVisible && <AccountAbout onCancel={() => setAboutVisible(false)} langeniusVersionInfo={langeniusVersionInfo} />
+      }
+    </div >
+  )
+}

dify_0.15.3/web/app/components/header/account-dropdown/workplace-selector/index.module.css

@@ -0,0 +1,5 @@
+.popup {
+  left: 4px;
+  transform: translateX(-100%);
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}

dify_0.15.3/web/app/components/header/account-dropdown/workplace-selector/index.tsx

@@ -0,0 +1,104 @@
+import { Fragment } from 'react'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import { Menu, Transition } from '@headlessui/react'
+import s from './index.module.css'
+import cn from '@/utils/classnames'
+import { switchWorkspace } from '@/service/common'
+import { useWorkspacesContext } from '@/context/workspace-context'
+import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import { Check } from '@/app/components/base/icons/src/vender/line/general'
+import { ToastContext } from '@/app/components/base/toast'
+import classNames from '@/utils/classnames'
+
+const itemClassName = `
+  flex items-center px-3 py-2 h-10 cursor-pointer
+`
+const itemIconClassName = `
+  shrink-0 mr-2 flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600
+`
+const itemNameClassName = `
+  grow mr-2 text-sm text-gray-700 text-left
+`
+const itemCheckClassName = `
+  shrink-0 w-4 h-4 text-primary-600
+`
+
+const WorkplaceSelector = () => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const { workspaces } = useWorkspacesContext()
+  const currentWorkspace = workspaces.find(v => v.current)
+
+  const handleSwitchWorkspace = async (tenant_id: string) => {
+    try {
+      if (currentWorkspace?.id === tenant_id)
+        return
+      await switchWorkspace({ url: '/workspaces/switch', body: { tenant_id } })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      location.assign(`${location.origin}`)
+    }
+    catch (e) {
+      notify({ type: 'error', message: t('common.provider.saveFailed') })
+    }
+  }
+
+  return (
+    <Menu as="div" className="relative w-full h-full">
+      {
+        ({ open }) => (
+          <>
+            <Menu.Button className={cn(
+              `
+                ${itemClassName} w-full
+                group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-lg
+              `,
+            )}>
+              <div className={itemIconClassName}>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
+              <div className={`${itemNameClassName} truncate`}>{currentWorkspace?.name}</div>
+              <ChevronRight className='shrink-0 w-[14px] h-[14px] text-gray-500' />
+            </Menu.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items
+                className={cn(
+                  `
+                    absolute top-[1px] min-w-[200px] max-h-[70vh] overflow-y-scroll z-10 bg-white border-[0.5px] border-gray-200
+                    divide-y divide-gray-100 origin-top-right rounded-xl focus:outline-none
+                  `,
+                  s.popup,
+                )}
+              >
+                <div className="px-1 py-1">
+                  {
+                    workspaces.map(workspace => (
+                      <Menu.Item key={workspace.id}>
+                        {({ active }) => <div className={classNames(itemClassName,
+                          active && 'bg-state-base-hover',
+                        )} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
+                          <div className={itemIconClassName}>{workspace.name[0].toLocaleUpperCase()}</div>
+                          <div className={itemNameClassName}>{workspace.name}</div>
+                          {workspace.current && <Check className={itemCheckClassName} />}
+                        </div>}
+
+                      </Menu.Item>
+                    ))
+                  }
+                </div>
+              </Menu.Items>
+            </Transition>
+          </>
+        )
+      }
+    </Menu>
+  )
+}
+
+export default WorkplaceSelector

dify_0.15.3/web/app/components/header/account-setting/Integrations-page/index.module.css

@@ -0,0 +1,24 @@
+.google-icon {
+  background: url(../../assets/google.svg) center center no-repeat;
+  background-size: 16px 16px;
+}
+
+.github-icon {
+  background: url(../../assets/github.svg) center center no-repeat;
+  background-size: 16px 16px;
+}
+
+.twitter-icon {
+  background: url(../../assets/twitter.svg) center center no-repeat;
+  background-size: 16px 16px;
+}
+
+.bitbucket-icon {
+  background: url(../../assets/bitbucket.svg) center center no-repeat;
+  background-size: 16px 16px;
+}
+
+.salesforce-icon {
+  background: url(../../assets/salesforce.svg) center center no-repeat;
+  background-size: 24px auto;
+}

dify_0.15.3/web/app/components/header/account-setting/Integrations-page/index.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+import Link from 'next/link'
+import s from './index.module.css'
+import classNames from '@/utils/classnames'
+import { fetchAccountIntegrates } from '@/service/common'
+
+const titleClassName = `
+  mb-2 text-sm font-medium text-gray-900
+`
+
+export default function IntegrationsPage() {
+  const { t } = useTranslation()
+
+  const integrateMap = {
+    google: {
+      name: t('common.integrations.google'),
+      description: t('common.integrations.googleAccount'),
+    },
+    github: {
+      name: t('common.integrations.github'),
+      description: t('common.integrations.githubAccount'),
+    },
+  }
+
+  const { data } = useSWR({ url: '/account/integrates' }, fetchAccountIntegrates)
+  const integrates = data?.data?.length ? data.data : []
+
+  return (
+    <>
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.integrations.connected')}</div>
+        {
+          integrates.map(integrate => (
+            <div key={integrate.provider} className='mb-2 flex items-center px-3 py-2 bg-gray-50 border-[0.5px] border-gray-200 rounded-lg'>
+              <div className={classNames('w-8 h-8 mr-3 bg-white rounded-lg border border-gray-100', s[`${integrate.provider}-icon`])} />
+              <div className='grow'>
+                <div className='leading-[21px] text-sm font-medium text-gray-800'>{integrateMap[integrate.provider].name}</div>
+                <div className='leading-[18px] text-xs font-normal text-gray-500'>{integrateMap[integrate.provider].description}</div>
+              </div>
+              {
+                !integrate.is_bound && (
+                  <Link
+                    className='flex items-center h-8 px-[7px] bg-white rounded-lg border border-gray-200 text-xs font-medium text-gray-700 cursor-pointer'
+                    href={integrate.link}
+                    target='_blank' rel='noopener noreferrer'>
+                    {t('common.integrations.connect')}
+                  </Link>
+                )
+              }
+            </div>
+          ))
+        }
+      </div>
+      {/* <div className='mb-8'>
+        <div className={titleClassName}>Add a service </div>
+        {
+          services.map(service => (
+            <div key={service.key} className='mb-2 flex items-center px-3 py-2 bg-gray-50 border-[0.5px] border-gray-200 rounded-lg'>
+              <div className={classNames('w-8 h-8 mr-3 bg-white rounded-lg border border-gray-100', s[`${service.key}-icon`])} />
+              <div className='grow'>
+                <div className='leading-[21px] text-sm font-medium text-gray-800'>{service.name}</div>
+                <div className='leading-[18px] text-xs font-normal text-gray-500'>{service.description}</div>
+              </div>
+              <Button className='text-xs font-medium text-gray-800'>Connect</Button>
+            </div>
+          ))
+        }
+      </div> */}
+    </>
+  )
+}

dify_0.15.3/web/app/components/header/account-setting/api-based-extension-page/empty.tsx

@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next'
+import { Webhooks } from '@/app/components/base/icons/src/vender/line/development'
+import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+
+const Empty = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='mb-2 p-6 rounded-2xl bg-gray-50'>
+      <div className='flex items-center justify-center mb-3 w-12 h-12 rounded-[10px] border border-[#EAECF5]'>
+        <Webhooks className='w-6 h-6 text-gray-500' />
+      </div>
+      <div className='mb-2 text-sm text-gray-600'>{t('common.apiBasedExtension.title')}</div>
+      <a
+        className='flex items-center mb-2 h-[18px] text-xs text-primary-600'
+        href={t('common.apiBasedExtension.linkUrl') || '/'}
+        target='_blank' rel='noopener noreferrer'
+      >
+        <BookOpen01 className='mr-1 w-3 h-3' />
+        {t('common.apiBasedExtension.link')}
+      </a>
+    </div>
+  )
+}
+
+export default Empty

dify_0.15.3/web/app/components/header/account-setting/api-based-extension-page/index.tsx

@@ -0,0 +1,55 @@
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+import {
+  RiAddLine,
+} from '@remixicon/react'
+import Item from './item'
+import Empty from './empty'
+import { useModalContext } from '@/context/modal-context'
+import { fetchApiBasedExtensionList } from '@/service/common'
+
+const ApiBasedExtensionPage = () => {
+  const { t } = useTranslation()
+  const { setShowApiBasedExtensionModal } = useModalContext()
+  const { data, mutate, isLoading } = useSWR(
+    '/api-based-extension',
+    fetchApiBasedExtensionList,
+  )
+
+  const handleOpenApiBasedExtensionModal = () => {
+    setShowApiBasedExtensionModal({
+      payload: {},
+      onSaveCallback: () => mutate(),
+    })
+  }
+
+  return (
+    <div>
+      {
+        !isLoading && !data?.length && (
+          <Empty />
+        )
+      }
+      {
+        !isLoading && !!data?.length && (
+          data.map(item => (
+            <Item
+              key={item.id}
+              data={item}
+              onUpdate={() => mutate()}
+            />
+          ))
+        )
+      }
+      <div
+        className='flex items-center justify-center px-3 h-8 text-[13px] font-medium text-gray-700 rounded-lg bg-gray-50 cursor-pointer'
+        onClick={handleOpenApiBasedExtensionModal}
+      >
+        <RiAddLine className='mr-2 w-4 h-4' />
+        {t('common.apiBasedExtension.add')}
+      </div>
+    </div>
+  )
+}
+
+export default ApiBasedExtensionPage

dify_0.15.3/web/app/components/header/account-setting/api-based-extension-page/item.tsx

@@ -0,0 +1,73 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
+import { Edit02 } from '@/app/components/base/icons/src/vender/line/general'
+import type { ApiBasedExtension } from '@/models/common'
+import { useModalContext } from '@/context/modal-context'
+import { deleteApiBasedExtension } from '@/service/common'
+import Confirm from '@/app/components/base/confirm'
+
+type ItemProps = {
+  data: ApiBasedExtension
+  onUpdate: () => void
+}
+const Item: FC<ItemProps> = ({
+  data,
+  onUpdate,
+}) => {
+  const { t } = useTranslation()
+  const { setShowApiBasedExtensionModal } = useModalContext()
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  const handleOpenApiBasedExtensionModal = () => {
+    setShowApiBasedExtensionModal({
+      payload: data,
+      onSaveCallback: () => onUpdate(),
+    })
+  }
+  const handleDeleteApiBasedExtension = async () => {
+    await deleteApiBasedExtension(`/api-based-extension/${data.id}`)
+
+    setShowDeleteConfirm(false)
+    onUpdate()
+  }
+
+  return (
+    <div className='group flex items-center mb-2 px-4 py-2 border-[0.5px] border-transparent rounded-xl bg-gray-50 hover:border-gray-200 hover:shadow-xs'>
+      <div className='grow'>
+        <div className='mb-0.5 text-[13px] font-medium text-gray-700'>{data.name}</div>
+        <div className='text-xs text-gray-500'>{data.api_endpoint}</div>
+      </div>
+      <div className='hidden group-hover:flex items-center'>
+        <div
+          className='flex items-center mr-1 px-3 h-7 bg-white text-xs font-medium text-gray-700 rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer'
+          onClick={handleOpenApiBasedExtensionModal}
+        >
+          <Edit02 className='mr-[5px] w-3.5 h-3.5' />
+          {t('common.operation.edit')}
+        </div>
+        <div
+          className='flex items-center justify-center w-7 h-7 bg-white text-gray-700 rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer'
+          onClick={() => setShowDeleteConfirm(true)}
+        >
+          <RiDeleteBinLine className='w-4 h-4' />
+        </div>
+      </div>
+      {
+        showDeleteConfirm
+          && <Confirm
+            isShow={showDeleteConfirm}
+            onCancel={() => setShowDeleteConfirm(false)}
+            title={`${t('common.operation.delete')} “${data.name}”?`}
+            onConfirm={handleDeleteApiBasedExtension}
+            confirmText={t('common.operation.delete') || ''}
+          />
+      }
+    </div>
+  )
+}
+
+export default Item

dify_0.15.3/web/app/components/header/account-setting/api-based-extension-page/modal.tsx

@@ -0,0 +1,149 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import type { ApiBasedExtension } from '@/models/common'
+import {
+  addApiBasedExtension,
+  updateApiBasedExtension,
+} from '@/service/common'
+import { useToastContext } from '@/app/components/base/toast'
+
+export type ApiBasedExtensionData = {
+  name?: string
+  apiEndpoint?: string
+  apiKey?: string
+}
+
+type ApiBasedExtensionModalProps = {
+  data: ApiBasedExtension
+  onCancel: () => void
+  onSave?: (newData: ApiBasedExtension) => void
+}
+const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
+  data,
+  onCancel,
+  onSave,
+}) => {
+  const { t } = useTranslation()
+  const [localeData, setLocaleData] = useState(data)
+  const [loading, setLoading] = useState(false)
+  const { notify } = useToastContext()
+  const handleDataChange = (type: string, value: string) => {
+    setLocaleData({ ...localeData, [type]: value })
+  }
+  const handleSave = async () => {
+    setLoading(true)
+
+    if (localeData && localeData.api_key && localeData.api_key?.length < 5) {
+      notify({ type: 'error', message: t('common.apiBasedExtension.modal.apiKey.lengthError') })
+      setLoading(false)
+      return
+    }
+
+    try {
+      let res: ApiBasedExtension = {}
+      if (!data.id) {
+        res = await addApiBasedExtension({
+          url: '/api-based-extension',
+          body: localeData,
+        })
+      }
+      else {
+        res = await updateApiBasedExtension({
+          url: `/api-based-extension/${data.id}`,
+          body: {
+            ...localeData,
+            api_key: data.api_key === localeData.api_key ? '[__HIDDEN__]' : localeData.api_key,
+          },
+        })
+
+        notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      }
+
+      if (onSave)
+        onSave(res)
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Modal
+      isShow
+      onClose={() => { }}
+      className='!p-8 !pb-6 !max-w-none !w-[640px]'
+    >
+      <div className='mb-2 text-xl font-semibold text-gray-900'>
+        {
+          data.name
+            ? t('common.apiBasedExtension.modal.editTitle')
+            : t('common.apiBasedExtension.modal.title')
+        }
+      </div>
+      <div className='py-2'>
+        <div className='leading-9 text-sm font-medium text-gray-900'>
+          {t('common.apiBasedExtension.modal.name.title')}
+        </div>
+        <input
+          value={localeData.name || ''}
+          onChange={e => handleDataChange('name', e.target.value)}
+          className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
+          placeholder={t('common.apiBasedExtension.modal.name.placeholder') || ''}
+        />
+      </div>
+      <div className='py-2'>
+        <div className='flex justify-between items-center h-9 text-sm font-medium text-gray-900'>
+          {t('common.apiBasedExtension.modal.apiEndpoint.title')}
+          <a
+            href={t('common.apiBasedExtension.linkUrl') || '/'}
+            target='_blank' rel='noopener noreferrer'
+            className='group flex items-center text-xs text-gray-500 font-normal hover:text-primary-600'
+          >
+            <BookOpen01 className='mr-1 w-3 h-3 text-gray-500 group-hover:text-primary-600' />
+            {t('common.apiBasedExtension.link')}
+          </a>
+        </div>
+        <input
+          value={localeData.api_endpoint || ''}
+          onChange={e => handleDataChange('api_endpoint', e.target.value)}
+          className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
+          placeholder={t('common.apiBasedExtension.modal.apiEndpoint.placeholder') || ''}
+        />
+      </div>
+      <div className='py-2'>
+        <div className='leading-9 text-sm font-medium text-gray-900'>
+          {t('common.apiBasedExtension.modal.apiKey.title')}
+        </div>
+        <div className='flex items-center'>
+          <input
+            value={localeData.api_key || ''}
+            onChange={e => handleDataChange('api_key', e.target.value)}
+            className='block grow mr-2 px-3 h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
+            placeholder={t('common.apiBasedExtension.modal.apiKey.placeholder') || ''}
+          />
+        </div>
+      </div>
+      <div className='flex items-center justify-end mt-6'>
+        <Button
+          onClick={onCancel}
+          className='mr-2'
+        >
+          {t('common.operation.cancel')}
+        </Button>
+        <Button
+          variant='primary'
+          disabled={!localeData.name || !localeData.api_endpoint || !localeData.api_key || loading}
+          onClick={handleSave}
+        >
+          {t('common.operation.save')}
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default ApiBasedExtensionModal

dify_0.15.3/web/app/components/header/account-setting/api-based-extension-page/selector.tsx

@@ -0,0 +1,127 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+} from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import {
+  ArrowUpRight,
+} from '@/app/components/base/icons/src/vender/line/arrows'
+import { useModalContext } from '@/context/modal-context'
+import { fetchApiBasedExtensionList } from '@/service/common'
+
+type ApiBasedExtensionSelectorProps = {
+  value: string
+  onChange: (value: string) => void
+}
+
+const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const {
+    setShowAccountSettingModal,
+    setShowApiBasedExtensionModal,
+  } = useModalContext()
+  const { data, mutate } = useSWR(
+    '/api-based-extension',
+    fetchApiBasedExtensionList,
+  )
+  const handleSelect = (id: string) => {
+    onChange(id)
+    setOpen(false)
+  }
+
+  const currentItem = data?.find(item => item.id === value)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} className='w-full'>
+        {
+          currentItem
+            ? (
+              <div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-gray-100 rounded-lg cursor-pointer'>
+                <div className='text-sm text-gray-900'>{currentItem.name}</div>
+                <div className='flex items-center'>
+                  <div className='mr-1.5 w-[270px] text-xs text-gray-400 truncate text-right'>
+                    {currentItem.api_endpoint}
+                  </div>
+                  <RiArrowDownSLine className={`w-4 h-4 text-gray-700 ${!open && 'opacity-60'}`} />
+                </div>
+              </div>
+            )
+            : (
+              <div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-gray-100 rounded-lg text-sm text-gray-400 cursor-pointer'>
+                {t('common.apiBasedExtension.selector.placeholder')}
+                <RiArrowDownSLine className={`w-4 h-4 text-gray-700 ${!open && 'opacity-60'}`} />
+              </div>
+            )
+        }
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='w-[calc(100%-32px)] max-w-[576px] z-[102]'>
+        <div className='w-full rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg z-10'>
+          <div className='p-1'>
+            <div className='flex items-center justify-between px-3 pt-2 pb-1'>
+              <div className='text-xs font-medium text-gray-500'>
+                {t('common.apiBasedExtension.selector.title')}
+              </div>
+              <div
+                className='flex items-center text-xs text-primary-600 cursor-pointer'
+                onClick={() => {
+                  setOpen(false)
+                  setShowAccountSettingModal({ payload: 'api-based-extension' })
+                }}
+              >
+                {t('common.apiBasedExtension.selector.manage')}
+                <ArrowUpRight className='ml-0.5 w-3 h-3' />
+              </div>
+            </div>
+            <div className='max-h-[250px] overflow-y-auto'>
+              {
+                data?.map(item => (
+                  <div
+                    key={item.id}
+                    className='px-3 py-1.5 w-full cursor-pointer hover:bg-gray-50 rounded-md text-left'
+                    onClick={() => handleSelect(item.id!)}
+                  >
+                    <div className='text-sm text-gray-900'>{item.name}</div>
+                    <div className='text-xs text-gray-500'>{item.api_endpoint}</div>
+                  </div>
+                ))
+              }
+            </div>
+          </div>
+          <div className='h-[1px] bg-gray-100' />
+          <div className='p-1'>
+            <div
+              className='flex items-center px-3 h-8 text-sm text-primary-600 cursor-pointer'
+              onClick={() => {
+                setOpen(false)
+                setShowApiBasedExtensionModal({ payload: {}, onSaveCallback: () => mutate() })
+              }}
+            >
+              <RiAddLine className='mr-2 w-4 h-4' />
+              {t('common.operation.add')}
+            </div>
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default ApiBasedExtensionSelector

dify_0.15.3/web/app/components/header/account-setting/collapse/index.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react'
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
+import classNames from '@/utils/classnames'
+
+export type IItem = {
+  key: string
+  name: string
+}
+type ICollapse = {
+  title: string | undefined
+  items: IItem[]
+  renderItem: (item: IItem) => React.ReactNode
+  onSelect?: (item: IItem) => void
+  wrapperClassName?: string
+}
+const Collapse = ({
+  title,
+  items,
+  renderItem,
+  onSelect,
+  wrapperClassName,
+}: ICollapse) => {
+  const [open, setOpen] = useState(false)
+
+  const toggle = () => setOpen(!open)
+
+  return (
+    <div className={classNames('bg-background-section-burn rounded-xl', wrapperClassName)}>
+      <div className='flex items-center justify-between leading-[18px] px-3 py-2 text-xs font-medium text-text-secondary cursor-pointer' onClick={toggle}>
+        {title}
+        {
+          open
+            ? <ChevronDownIcon className='w-3 h-3 text-components-button-tertiary-text' />
+            : <ChevronRightIcon className='w-3 h-3 text-components-button-tertiary-text' />
+        }
+      </div>
+      {
+        open && (
+          <div className='py-1 mb-1 mx-1 border-t border-divider-subtle rounded-lg bg-components-panel-on-panel-item-bg'>
+            {
+              items.map(item => (
+                <div key={item.key} onClick={() => onSelect && onSelect(item)}>
+                  {renderItem(item)}
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default Collapse

dify_0.15.3/web/app/components/header/account-setting/data-source-page/data-source-notion/index.tsx

@@ -0,0 +1,84 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import useSWR from 'swr'
+import Panel from '../panel'
+import { DataSourceType } from '../panel/types'
+import type { DataSourceNotion as TDataSourceNotion } from '@/models/common'
+import { useAppContext } from '@/context/app-context'
+import { fetchNotionConnection } from '@/service/common'
+import NotionIcon from '@/app/components/base/notion-icon'
+
+const Icon: FC<{
+  src: string
+  name: string
+  className: string
+}> = ({ src, name, className }) => {
+  return (
+    <NotionIcon
+      src={src}
+      name={name}
+      className={className}
+    />
+  )
+}
+type Props = {
+  workspaces: TDataSourceNotion[]
+}
+
+const DataSourceNotion: FC<Props> = ({
+  workspaces,
+}) => {
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const [canConnectNotion, setCanConnectNotion] = useState(false)
+  const { data } = useSWR(canConnectNotion ? '/oauth/data-source/notion' : null, fetchNotionConnection)
+
+  const connected = !!workspaces.length
+
+  const handleConnectNotion = () => {
+    if (!isCurrentWorkspaceManager)
+      return
+
+    setCanConnectNotion(true)
+  }
+
+  const handleAuthAgain = () => {
+    if (data?.data)
+      window.location.href = data.data
+    else
+      setCanConnectNotion(true)
+  }
+
+  useEffect(() => {
+    if (data?.data)
+      window.location.href = data.data
+  }, [data])
+  return (
+    <Panel
+      type={DataSourceType.notion}
+      isConfigured={connected}
+      onConfigure={handleConnectNotion}
+      readOnly={!isCurrentWorkspaceManager}
+      isSupportList
+      configuredList={workspaces.map(workspace => ({
+        id: workspace.id,
+        logo: ({ className }: { className: string }) => (
+          <Icon
+            src={workspace.source_info.workspace_icon!}
+            name={workspace.source_info.workspace_name}
+            className={className}
+          />),
+        name: workspace.source_info.workspace_name,
+        isActive: workspace.is_bound,
+        notionConfig: {
+          total: workspace.source_info.total || 0,
+        },
+      }))}
+      onRemove={() => { }} // handled in operation/index.tsx
+      notionActions={{
+        onChangeAuthorizedPage: handleAuthAgain,
+      }}
+    />
+  )
+}
+export default React.memo(DataSourceNotion)

dify_0.15.3/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx

@@ -0,0 +1,113 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { Fragment } from 'react'
+import { useSWRConfig } from 'swr'
+import {
+  RiDeleteBinLine,
+  RiLoopLeftLine,
+  RiMoreFill,
+  RiStickyNoteAddLine,
+} from '@remixicon/react'
+import { Menu, Transition } from '@headlessui/react'
+import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common'
+import Toast from '@/app/components/base/toast'
+
+type OperateProps = {
+  payload: {
+    id: string
+    total: number
+  }
+  onAuthAgain: () => void
+}
+export default function Operate({
+  payload,
+  onAuthAgain,
+}: OperateProps) {
+  const itemClassName = `
+    flex px-3 py-2 hover:bg-gray-50 text-sm text-gray-700
+    cursor-pointer
+  `
+  const itemIconClassName = `
+  mr-2 mt-[2px] w-4 h-4 text-gray-500
+  `
+  const { t } = useTranslation()
+  const { mutate } = useSWRConfig()
+
+  const updateIntegrates = () => {
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.success'),
+    })
+    mutate({ url: 'data-source/integrates' })
+  }
+  const handleSync = async () => {
+    await syncDataSourceNotion({ url: `/oauth/data-source/notion/${payload.id}/sync` })
+    updateIntegrates()
+  }
+  const handleRemove = async () => {
+    await updateDataSourceNotionAction({ url: `/data-source/integrates/${payload.id}/disable` })
+    updateIntegrates()
+  }
+
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      {
+        ({ open }) => (
+          <>
+            <Menu.Button className={`flex items-center justify-center w-8 h-8 rounded-lg hover:bg-gray-100 ${open && 'bg-gray-100'}`}>
+              <RiMoreFill className='w-4 h-4' />
+            </Menu.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items
+                className="
+                  absolute right-0 top-9 w-60 max-w-80
+                  divide-y divide-gray-100 origin-top-right rounded-lg bg-white
+                  shadow-lg
+                "
+              >
+                <div className="px-1 py-1">
+                  <Menu.Item>
+                    <div
+                      className={itemClassName}
+                      onClick={onAuthAgain}
+                    >
+                      <RiStickyNoteAddLine className={itemIconClassName} />
+                      <div>
+                        <div className='leading-5'>{t('common.dataSource.notion.changeAuthorizedPages')}</div>
+                        <div className='leading-5 text-xs text-gray-500'>
+                          {payload.total} {t('common.dataSource.notion.pagesAuthorized')}
+                        </div>
+                      </div>
+                    </div>
+                  </Menu.Item>
+                  <Menu.Item>
+                    <div className={itemClassName} onClick={handleSync}>
+                      <RiLoopLeftLine className={itemIconClassName} />
+                      <div className='leading-5'>{t('common.dataSource.notion.sync')}</div>
+                    </div>
+                  </Menu.Item>
+                </div>
+                <Menu.Item>
+                  <div className='p-1'>
+                    <div className={itemClassName} onClick={handleRemove}>
+                      <RiDeleteBinLine className={itemIconClassName} />
+                      <div className='leading-5'>{t('common.dataSource.notion.remove')}</div>
+                    </div>
+                  </div>
+                </Menu.Item>
+              </Menu.Items>
+            </Transition>
+          </>
+        )
+      }
+    </Menu>
+  )
+}

dify_0.15.3/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx

@@ -0,0 +1,161 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+} from '@/app/components/base/portal-to-follow-elem'
+import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import Button from '@/app/components/base/button'
+import type { FirecrawlConfig } from '@/models/common'
+import Field from '@/app/components/datasets/create/website/base/field'
+import Toast from '@/app/components/base/toast'
+import { createDataSourceApiKeyBinding } from '@/service/datasets'
+import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
+type Props = {
+  onCancel: () => void
+  onSaved: () => void
+}
+
+const I18N_PREFIX = 'datasetCreation.firecrawl'
+
+const DEFAULT_BASE_URL = 'https://api.firecrawl.dev'
+
+const ConfigFirecrawlModal: FC<Props> = ({
+  onCancel,
+  onSaved,
+}) => {
+  const { t } = useTranslation()
+  const [isSaving, setIsSaving] = useState(false)
+  const [config, setConfig] = useState<FirecrawlConfig>({
+    api_key: '',
+    base_url: '',
+  })
+
+  const handleConfigChange = useCallback((key: string) => {
+    return (value: string | number) => {
+      setConfig(prev => ({ ...prev, [key]: value as string }))
+    }
+  }, [])
+
+  const handleSave = useCallback(async () => {
+    if (isSaving)
+      return
+    let errorMsg = ''
+    if (config.base_url && !((config.base_url.startsWith('http://') || config.base_url.startsWith('https://'))))
+      errorMsg = t('common.errorMsg.urlError')
+    if (!errorMsg) {
+      if (!config.api_key) {
+        errorMsg = t('common.errorMsg.fieldRequired', {
+          field: 'API Key',
+        })
+      }
+    }
+
+    if (errorMsg) {
+      Toast.notify({
+        type: 'error',
+        message: errorMsg,
+      })
+      return
+    }
+    const postData = {
+      category: 'website',
+      provider: 'firecrawl',
+      credentials: {
+        auth_type: 'bearer',
+        config: {
+          api_key: config.api_key,
+          base_url: config.base_url || DEFAULT_BASE_URL,
+        },
+      },
+    }
+    try {
+      setIsSaving(true)
+      await createDataSourceApiKeyBinding(postData)
+      Toast.notify({
+        type: 'success',
+        message: t('common.api.success'),
+      })
+    }
+    finally {
+      setIsSaving(false)
+    }
+
+    onSaved()
+  }, [config.api_key, config.base_url, onSaved, t, isSaving])
+
+  return (
+    <PortalToFollowElem open>
+      <PortalToFollowElemContent className='w-full h-full z-[60]'>
+        <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
+          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
+            <div className='px-8 pt-8'>
+              <div className='flex justify-between items-center mb-4'>
+                <div className='text-xl font-semibold text-gray-900'>{t(`${I18N_PREFIX}.configFirecrawl`)}</div>
+              </div>
+
+              <div className='space-y-4'>
+                <Field
+                  label='API Key'
+                  labelClassName='!text-sm'
+                  isRequired
+                  value={config.api_key}
+                  onChange={handleConfigChange('api_key')}
+                  placeholder={t(`${I18N_PREFIX}.apiKeyPlaceholder`)!}
+                />
+                <Field
+                  label='Base URL'
+                  labelClassName='!text-sm'
+                  value={config.base_url}
+                  onChange={handleConfigChange('base_url')}
+                  placeholder={DEFAULT_BASE_URL}
+                />
+              </div>
+              <div className='my-8 flex justify-between items-center h-8'>
+                <a className='flex items-center space-x-1 leading-[18px] text-xs font-normal text-[#155EEF]' target='_blank' href='https://www.firecrawl.dev/account'>
+                  <span>{t(`${I18N_PREFIX}.getApiKeyLinkText`)}</span>
+                  <LinkExternal02 className='w-3 h-3' />
+                </a>
+                <div className='flex'>
+                  <Button
+                    size='large'
+                    className='mr-2'
+                    onClick={onCancel}
+                  >
+                    {t('common.operation.cancel')}
+                  </Button>
+                  <Button
+                    variant='primary'
+                    size='large'
+                    onClick={handleSave}
+                    loading={isSaving}
+                  >
+                    {t('common.operation.save')}
+                  </Button>
+                </div>
+
+              </div>
+            </div>
+            <div className='border-t-[0.5px] border-t-black/5'>
+              <div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
+                <Lock01 className='mr-1 w-3 h-3 text-gray-500' />
+                {t('common.modelProvider.encrypted.front')}
+                <a
+                  className='text-primary-600 mx-1'
+                  target='_blank' rel='noopener noreferrer'
+                  href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
+                >
+                  PKCS1_OAEP
+                </a>
+                {t('common.modelProvider.encrypted.back')}
+              </div>
+            </div>
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(ConfigFirecrawlModal)

dify_0.15.3/web/app/components/header/account-setting/data-source-page/data-source-website/config-jina-reader-modal.tsx

@@ -0,0 +1,140 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+} from '@/app/components/base/portal-to-follow-elem'
+import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import Button from '@/app/components/base/button'
+import { DataSourceProvider } from '@/models/common'
+import Field from '@/app/components/datasets/create/website/base/field'
+import Toast from '@/app/components/base/toast'
+import { createDataSourceApiKeyBinding } from '@/service/datasets'
+import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
+type Props = {
+  onCancel: () => void
+  onSaved: () => void
+}
+
+const I18N_PREFIX = 'datasetCreation.jinaReader'
+
+const ConfigJinaReaderModal: FC<Props> = ({
+  onCancel,
+  onSaved,
+}) => {
+  const { t } = useTranslation()
+  const [isSaving, setIsSaving] = useState(false)
+  const [apiKey, setApiKey] = useState('')
+
+  const handleSave = useCallback(async () => {
+    if (isSaving)
+      return
+    let errorMsg = ''
+    if (!errorMsg) {
+      if (!apiKey) {
+        errorMsg = t('common.errorMsg.fieldRequired', {
+          field: 'API Key',
+        })
+      }
+    }
+
+    if (errorMsg) {
+      Toast.notify({
+        type: 'error',
+        message: errorMsg,
+      })
+      return
+    }
+    const postData = {
+      category: 'website',
+      provider: DataSourceProvider.jinaReader,
+      credentials: {
+        auth_type: 'bearer',
+        config: {
+          api_key: apiKey,
+        },
+      },
+    }
+    try {
+      setIsSaving(true)
+      await createDataSourceApiKeyBinding(postData)
+      Toast.notify({
+        type: 'success',
+        message: t('common.api.success'),
+      })
+    }
+    finally {
+      setIsSaving(false)
+    }
+
+    onSaved()
+  }, [apiKey, onSaved, t, isSaving])
+
+  return (
+    <PortalToFollowElem open>
+      <PortalToFollowElemContent className='w-full h-full z-[60]'>
+        <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
+          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
+            <div className='px-8 pt-8'>
+              <div className='flex justify-between items-center mb-4'>
+                <div className='text-xl font-semibold text-gray-900'>{t(`${I18N_PREFIX}.configJinaReader`)}</div>
+              </div>
+
+              <div className='space-y-4'>
+                <Field
+                  label='API Key'
+                  labelClassName='!text-sm'
+                  isRequired
+                  value={apiKey}
+                  onChange={(value: string | number) => setApiKey(value as string)}
+                  placeholder={t(`${I18N_PREFIX}.apiKeyPlaceholder`)!}
+                />
+              </div>
+              <div className='my-8 flex justify-between items-center h-8'>
+                <a className='flex items-center space-x-1 leading-[18px] text-xs font-normal text-[#155EEF]' target='_blank' href='https://jina.ai/reader/'>
+                  <span>{t(`${I18N_PREFIX}.getApiKeyLinkText`)}</span>
+                  <LinkExternal02 className='w-3 h-3' />
+                </a>
+                <div className='flex'>
+                  <Button
+                    size='large'
+                    className='mr-2'
+                    onClick={onCancel}
+                  >
+                    {t('common.operation.cancel')}
+                  </Button>
+                  <Button
+                    variant='primary'
+                    size='large'
+                    onClick={handleSave}
+                    loading={isSaving}
+                  >
+                    {t('common.operation.save')}
+                  </Button>
+                </div>
+
+              </div>
+            </div>
+            <div className='border-t-[0.5px] border-t-black/5'>
+              <div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
+                <Lock01 className='mr-1 w-3 h-3 text-gray-500' />
+                {t('common.modelProvider.encrypted.front')}
+                <a
+                  className='text-primary-600 mx-1'
+                  target='_blank' rel='noopener noreferrer'
+                  href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
+                >
+                  PKCS1_OAEP
+                </a>
+                {t('common.modelProvider.encrypted.back')}
+              </div>
+            </div>
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(ConfigJinaReaderModal)

dify_0.15.3/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx

@@ -0,0 +1,111 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Panel from '../panel'
+import { DataSourceType } from '../panel/types'
+import ConfigFirecrawlModal from './config-firecrawl-modal'
+import ConfigJinaReaderModal from './config-jina-reader-modal'
+import cn from '@/utils/classnames'
+import s from '@/app/components/datasets/create/website/index.module.css'
+import { fetchDataSources, removeDataSourceApiKeyBinding } from '@/service/datasets'
+
+import type {
+  DataSourceItem,
+} from '@/models/common'
+import { useAppContext } from '@/context/app-context'
+
+import {
+  DataSourceProvider,
+} from '@/models/common'
+import Toast from '@/app/components/base/toast'
+
+type Props = {
+  provider: DataSourceProvider
+}
+
+const DataSourceWebsite: FC<Props> = ({ provider }) => {
+  const { t } = useTranslation()
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const [sources, setSources] = useState<DataSourceItem[]>([])
+  const checkSetApiKey = useCallback(async () => {
+    const res = await fetchDataSources() as any
+    const list = res.sources
+    setSources(list)
+  }, [])
+
+  useEffect(() => {
+    checkSetApiKey()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const [configTarget, setConfigTarget] = useState<DataSourceProvider | null>(null)
+  const showConfig = useCallback((provider: DataSourceProvider) => {
+    setConfigTarget(provider)
+  }, [setConfigTarget])
+
+  const hideConfig = useCallback(() => {
+    setConfigTarget(null)
+  }, [setConfigTarget])
+
+  const handleAdded = useCallback(() => {
+    checkSetApiKey()
+    hideConfig()
+  }, [checkSetApiKey, hideConfig])
+
+  const getIdByProvider = (provider: DataSourceProvider): string | undefined => {
+    const source = sources.find(item => item.provider === provider)
+    return source?.id
+  }
+
+  const handleRemove = useCallback((provider: DataSourceProvider) => {
+    return async () => {
+      const dataSourceId = getIdByProvider(provider)
+      if (dataSourceId) {
+        await removeDataSourceApiKeyBinding(dataSourceId)
+        setSources(sources.filter(item => item.provider !== provider))
+        Toast.notify({
+          type: 'success',
+          message: t('common.api.remove'),
+        })
+      }
+    }
+  }, [sources, t])
+
+  return (
+    <>
+      <Panel
+        type={DataSourceType.website}
+        provider={provider}
+        isConfigured={sources.find(item => item.provider === provider) !== undefined}
+        onConfigure={() => showConfig(provider)}
+        readOnly={!isCurrentWorkspaceManager}
+        configuredList={sources.filter(item => item.provider === provider).map(item => ({
+          id: item.id,
+          logo: ({ className }: { className: string }) => (
+            item.provider === DataSourceProvider.fireCrawl
+              ? (
+                <div className={cn(className, 'flex items-center justify-center w-5 h-5 bg-white border border-gray-100 text-xs font-medium text-gray-500 rounded ml-3')}>🔥</div>
+              )
+              : (
+                <div className={cn(className, 'flex items-center justify-center w-5 h-5 bg-white border border-gray-100 text-xs font-medium text-gray-500 rounded ml-3')}>
+                  <span className={s.jinaLogo} />
+                </div>
+              )
+          ),
+          name: item.provider === DataSourceProvider.fireCrawl ? 'Firecrawl' : 'Jina Reader',
+          isActive: true,
+        }))}
+        onRemove={handleRemove(provider)}
+      />
+      {configTarget === DataSourceProvider.fireCrawl && (
+        <ConfigFirecrawlModal onSaved={handleAdded} onCancel={hideConfig} />
+      )}
+      {configTarget === DataSourceProvider.jinaReader && (
+        <ConfigJinaReaderModal onSaved={handleAdded} onCancel={hideConfig} />
+      )}
+    </>
+
+  )
+}
+export default React.memo(DataSourceWebsite)

dify_0.15.3/web/app/components/header/account-setting/data-source-page/index.tsx

@@ -0,0 +1,20 @@
+import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
+import DataSourceNotion from './data-source-notion'
+import DataSourceWebsite from './data-source-website'
+import { fetchDataSource } from '@/service/common'
+import { DataSourceProvider } from '@/models/common'
+
+export default function DataSourcePage() {
+  const { t } = useTranslation()
+  const { data } = useSWR({ url: 'data-source/integrates' }, fetchDataSource)
+  const notionWorkspaces = data?.data.filter(item => item.provider === 'notion') || []
+
+  return (
+    <div className='mb-8'>
+      <DataSourceNotion workspaces={notionWorkspaces} />
+      <DataSourceWebsite provider={DataSourceProvider.jinaReader} />
+      <DataSourceWebsite provider={DataSourceProvider.fireCrawl} />
+    </div>
+  )
+}

dify_0.15.3/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx

@@ -0,0 +1,82 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
+import Indicator from '../../../indicator'
+import Operate from '../data-source-notion/operate'
+import { DataSourceType } from './types'
+import s from './style.module.css'
+import cn from '@/utils/classnames'
+
+export type ConfigItemType = {
+  id: string
+  logo: any
+  name: string
+  isActive: boolean
+  notionConfig?: {
+    total: number
+  }
+}
+
+type Props = {
+  type: DataSourceType
+  payload: ConfigItemType
+  onRemove: () => void
+  notionActions?: {
+    onChangeAuthorizedPage: () => void
+  }
+  readOnly: boolean
+}
+
+const ConfigItem: FC<Props> = ({
+  type,
+  payload,
+  onRemove,
+  notionActions,
+  readOnly,
+}) => {
+  const { t } = useTranslation()
+  const isNotion = type === DataSourceType.notion
+  const isWebsite = type === DataSourceType.website
+  const onChangeAuthorizedPage = notionActions?.onChangeAuthorizedPage || function () { }
+
+  return (
+    <div className={cn(s['workspace-item'], 'flex items-center mb-1 py-1 pr-1 bg-components-panel-on-panel-item-bg rounded-lg')} key={payload.id}>
+      <payload.logo className='ml-3 mr-1.5' />
+      <div className='grow py-[7px] system-sm-medium text-text-secondary truncate' title={payload.name}>{payload.name}</div>
+      {
+        payload.isActive
+          ? <Indicator className='shrink-0 mr-[6px]' color='green' />
+          : <Indicator className='shrink-0 mr-[6px]' color='yellow' />
+      }
+      <div className={`shrink-0 mr-3 text-xs font-medium uppercase ${payload.isActive ? 'text-util-colors-green-green-600' : 'text-util-colors-warning-warning-600'}`}>
+        {
+          payload.isActive
+            ? t(isNotion ? 'common.dataSource.notion.connected' : 'common.dataSource.website.active')
+            : t(isNotion ? 'common.dataSource.notion.disconnected' : 'common.dataSource.website.inactive')
+        }
+      </div>
+      <div className='mr-2 w-[1px] h-3 bg-divider-regular' />
+      {isNotion && (
+        <Operate payload={{
+          id: payload.id,
+          total: payload.notionConfig?.total || 0,
+        }} onAuthAgain={onChangeAuthorizedPage}
+        />
+      )}
+
+      {
+        isWebsite && !readOnly && (
+          <div className='p-2 text-text-tertiary cursor-pointer rounded-md hover:bg-black/5' onClick={onRemove} >
+            <RiDeleteBinLine className='w-4 h-4' />
+          </div>
+        )
+      }
+
+    </div>
+  )
+}
+export default React.memo(ConfigItem)

dify_0.15.3/web/app/components/header/account-setting/data-source-page/panel/index.tsx

@@ -0,0 +1,141 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiAddLine } from '@remixicon/react'
+import type { ConfigItemType } from './config-item'
+import ConfigItem from './config-item'
+
+import s from './style.module.css'
+import { DataSourceType } from './types'
+import { DataSourceProvider } from '@/models/common'
+import cn from '@/utils/classnames'
+
+type Props = {
+  type: DataSourceType
+  provider: DataSourceProvider
+  isConfigured: boolean
+  onConfigure: () => void
+  readOnly: boolean
+  isSupportList?: boolean
+  configuredList: ConfigItemType[]
+  onRemove: () => void
+  notionActions?: {
+    onChangeAuthorizedPage: () => void
+  }
+}
+
+const Panel: FC<Props> = ({
+  type,
+  provider,
+  isConfigured,
+  onConfigure,
+  readOnly,
+  configuredList,
+  isSupportList,
+  onRemove,
+  notionActions,
+}) => {
+  const { t } = useTranslation()
+  const isNotion = type === DataSourceType.notion
+  const isWebsite = type === DataSourceType.website
+
+  return (
+    <div className='mb-2 bg-background-section-burn rounded-xl'>
+      <div className='flex items-center px-3 py-[9px]'>
+        <div className={cn(s[`${type}-icon`], 'w-8 h-8 mr-3 border border-divider-subtle rounded-lg bg-background-default')} />
+        <div className='grow'>
+          <div className='flex items-center h-5'>
+            <div className='text-sm font-medium text-text-primary'>{t(`common.dataSource.${type}.title`)}</div>
+            {isWebsite && (
+              <div className='ml-1 leading-[18px] px-1.5 rounded-md bg-white border border-gray-100 text-xs font-medium text-gray-700'>
+                <span className='text-gray-500'>{t('common.dataSource.website.with')}</span> { provider === DataSourceProvider.fireCrawl ? '🔥 Firecrawl' : 'Jina Reader'}
+              </div>
+            )}
+          </div>
+          {
+            !isConfigured && (
+              <div className='system-xs-medium text-text-tertiary'>
+                {t(`common.dataSource.${type}.description`)}
+              </div>
+            )
+          }
+        </div>
+        {isNotion && (
+          <>
+            {
+              isConfigured
+                ? (
+                  <div
+                    className={
+                      `flex items-center ml-3 px-3 h-7 bg-white border border-gray-200
+                  rounded-md text-xs font-medium text-gray-700
+                  ${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+                    }
+                    onClick={onConfigure}
+                  >
+                    {t('common.dataSource.configure')}
+                  </div>
+                )
+                : (
+                  <>
+                    {isSupportList && <div
+                      className={
+                        `flex items-center px-3 py-1 min-h-7 bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border system-sm-medium text-components-button-secondary-accent-text rounded-md
+                  ${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+                      }
+                      onClick={onConfigure}
+                    >
+                      <RiAddLine className='w-4 h-4 text-components-button-secondary-accent-text mr-[5px]' />
+                      {t('common.dataSource.connect')}
+                    </div>}
+                  </>
+                )
+            }
+          </>
+        )}
+
+        {isWebsite && !isConfigured && (
+          <div
+            className={
+              `flex items-center ml-3 px-3 h-7 bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border
+              rounded-md text-xs font-medium text-components-button-secondary-accent-text
+              ${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+            }
+            onClick={!readOnly ? onConfigure : undefined}
+          >
+            {t('common.dataSource.configure')}
+          </div>
+        )}
+
+      </div>
+      {
+        isConfigured && (
+          <>
+            <div className='flex items-center px-3 h-[18px]'>
+              <div className='system-xs-medium text-text-tertiary'>
+                {isNotion ? t('common.dataSource.notion.connectedWorkspace') : t('common.dataSource.website.configuredCrawlers')}
+              </div>
+              <div className='grow ml-3 border-t border-t-divider-subtle' />
+            </div>
+            <div className='px-3 pt-2 pb-3'>
+              {
+                configuredList.map(item => (
+                  <ConfigItem
+                    key={item.id}
+                    type={type}
+                    payload={item}
+                    onRemove={onRemove}
+                    notionActions={notionActions}
+                    readOnly={readOnly}
+                  />
+                ))
+              }
+            </div>
+          </>
+        )
+      }
+    </div>
+  )
+}
+export default React.memo(Panel)

dify_0.15.3/web/app/components/header/account-setting/data-source-page/panel/style.module.css

@@ -0,0 +1,17 @@
+.notion-icon {
+  background: #ffffff url(../../../assets/notion.svg) center center no-repeat;
+  background-size: 20px 20px;
+}
+
+.website-icon {
+  background: #ffffff url(../../../../datasets/create/assets/web.svg) center center no-repeat;
+  background-size: 20px 20px;
+}
+
+.workspace-item {
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+}
+
+.workspace-item:last-of-type {
+  margin-bottom: 0;
+}

dify_0.15.3/web/app/components/header/account-setting/data-source-page/panel/types.ts

@@ -0,0 +1,4 @@
+export enum DataSourceType {
+  notion = 'notion',
+  website = 'website',
+}

dify_0.15.3/web/app/components/header/account-setting/index.module.css

@@ -0,0 +1,8 @@
+.modal {
+  max-width: 1024px !important;
+  border-radius: 12px !important;
+  margin-top: 60px;
+  margin-bottom: 60px;
+  padding: 0 !important;
+  overflow-y: auto;
+}

dify_0.15.3/web/app/components/header/account-setting/index.tsx

@@ -0,0 +1,214 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { useEffect, useRef, useState } from 'react'
+import {
+  RiBox3Fill,
+  RiBox3Line,
+  RiCloseLine,
+  RiColorFilterFill,
+  RiColorFilterLine,
+  RiDatabase2Fill,
+  RiDatabase2Line,
+  RiGroup2Fill,
+  RiGroup2Line,
+  RiMoneyDollarCircleFill,
+  RiMoneyDollarCircleLine,
+  RiPuzzle2Fill,
+  RiPuzzle2Line,
+  RiTranslate2,
+} from '@remixicon/react'
+import MembersPage from './members-page'
+import LanguagePage from './language-page'
+import ApiBasedExtensionPage from './api-based-extension-page'
+import DataSourcePage from './data-source-page'
+import ModelProviderPage from './model-provider-page'
+import s from './index.module.css'
+import cn from '@/utils/classnames'
+import BillingPage from '@/app/components/billing/billing-page'
+import CustomPage from '@/app/components/custom/custom-page'
+import Modal from '@/app/components/base/modal'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { useProviderContext } from '@/context/provider-context'
+import { useAppContext } from '@/context/app-context'
+
+const iconClassName = `
+  w-4 h-4 ml-3 mr-2
+`
+
+const scrolledClassName = `
+  border-b shadow-xs bg-white/[.98]
+`
+
+type IAccountSettingProps = {
+  onCancel: () => void
+  activeTab?: string
+}
+
+type GroupItem = {
+  key: string
+  name: string
+  description?: string
+  icon: JSX.Element
+  activeIcon: JSX.Element
+}
+
+export default function AccountSetting({
+  onCancel,
+  activeTab = 'members',
+}: IAccountSettingProps) {
+  const [activeMenu, setActiveMenu] = useState(activeTab)
+  const { t } = useTranslation()
+  const { enableBilling, enableReplaceWebAppLogo } = useProviderContext()
+  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+
+  const workplaceGroupItems = (() => {
+    if (isCurrentWorkspaceDatasetOperator)
+      return []
+    return [
+      {
+        key: 'provider',
+        name: t('common.settings.provider'),
+        icon: <RiBox3Line className={iconClassName} />,
+        activeIcon: <RiBox3Fill className={iconClassName} />,
+      },
+      {
+        key: 'members',
+        name: t('common.settings.members'),
+        icon: <RiGroup2Line className={iconClassName} />,
+        activeIcon: <RiGroup2Fill className={iconClassName} />,
+      },
+      {
+        // Use key false to hide this item
+        key: enableBilling ? 'billing' : false,
+        name: t('common.settings.billing'),
+        description: t('billing.plansCommon.receiptInfo'),
+        icon: <RiMoneyDollarCircleLine className={iconClassName} />,
+        activeIcon: <RiMoneyDollarCircleFill className={iconClassName} />,
+      },
+      {
+        key: 'data-source',
+        name: t('common.settings.dataSource'),
+        icon: <RiDatabase2Line className={iconClassName} />,
+        activeIcon: <RiDatabase2Fill className={iconClassName} />,
+      },
+      {
+        key: 'api-based-extension',
+        name: t('common.settings.apiBasedExtension'),
+        icon: <RiPuzzle2Line className={iconClassName} />,
+        activeIcon: <RiPuzzle2Fill className={iconClassName} />,
+      },
+      {
+        key: (enableReplaceWebAppLogo || enableBilling) ? 'custom' : false,
+        name: t('custom.custom'),
+        icon: <RiColorFilterLine className={iconClassName} />,
+        activeIcon: <RiColorFilterFill className={iconClassName} />,
+      },
+    ].filter(item => !!item.key) as GroupItem[]
+  })()
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
+  const menuItems = [
+    {
+      key: 'workspace-group',
+      name: t('common.settings.workplaceGroup'),
+      items: workplaceGroupItems,
+    },
+    {
+      key: 'account-group',
+      name: t('common.settings.accountGroup'),
+      items: [
+        {
+          key: 'language',
+          name: t('common.settings.language'),
+          icon: <RiTranslate2 className={iconClassName} />,
+          activeIcon: <RiTranslate2 className={iconClassName} />,
+        },
+      ],
+    },
+  ]
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [scrolled, setScrolled] = useState(false)
+  useEffect(() => {
+    const targetElement = scrollRef.current
+    const scrollHandle = (e: Event) => {
+      const userScrolled = (e.target as HTMLDivElement).scrollTop > 0
+      setScrolled(userScrolled)
+    }
+    targetElement?.addEventListener('scroll', scrollHandle)
+    return () => {
+      targetElement?.removeEventListener('scroll', scrollHandle)
+    }
+  }, [])
+
+  const activeItem = [...menuItems[0].items, ...menuItems[1].items].find(item => item.key === activeMenu)
+
+  return (
+    <Modal
+      isShow
+      onClose={() => { }}
+      className={s.modal}
+      wrapperClassName='pt-[60px]'
+    >
+      <div className='flex'>
+        <div className='w-[44px] sm:w-[200px] px-[1px] py-4 sm:p-4 border border-divider-burn shrink-0 sm:shrink-1 flex flex-col items-center sm:items-start'>
+          <div className='mb-8 ml-0 sm:ml-2 sm:text-base title-2xl-semi-bold text-text-primary'>{t('common.userProfile.settings')}</div>
+          <div className='w-full'>
+            {
+              menuItems.map(menuItem => (
+                <div key={menuItem.key} className='mb-4'>
+                  {!isCurrentWorkspaceDatasetOperator && (
+                    <div className='px-2 mb-[6px] sm:text-xs system-xs-medium-uppercase text-text-tertiary'>{menuItem.name}</div>
+                  )}
+                  <div>
+                    {
+                      menuItem.items.map(item => (
+                        <div
+                          key={item.key}
+                          className={`
+                            flex items-center h-[37px] mb-[2px] text-sm cursor-pointer rounded-lg
+                            ${activeMenu === item.key ? 'system-sm-semibold text-components-menu-item-text-active bg-state-base-active' : 'system-sm-medium text-components-menu-item-text'}
+                          `}
+                          title={item.name}
+                          onClick={() => setActiveMenu(item.key)}
+                        >
+                          {activeMenu === item.key ? item.activeIcon : item.icon}
+                          {!isMobile && <div className='truncate'>{item.name}</div>}
+                        </div>
+                      ))
+                    }
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+        <div ref={scrollRef} className='relative w-[824px] h-[720px] pb-4 overflow-y-auto'>
+          <div className={cn('sticky top-0 px-6 py-4 flex items-center h-14 mb-4 bg-components-panel-bg title-2xl-semi-bold text-text-primary z-20', scrolled && scrolledClassName)}>
+            <div className='shrink-0'>{activeItem?.name}</div>
+            {
+              activeItem?.description && (
+                <div className='shrink-0 ml-2 text-xs text-gray-600'>{activeItem?.description}</div>
+              )
+            }
+            <div className='grow flex justify-end'>
+              <div className='z-[10] flex items-center justify-center -mr-4 p-2 cursor-pointer rounded-[10px] hover:bg-components-button-tertiary-bg' onClick={onCancel}>
+                <RiCloseLine className='w-5 h-5 text-components-button-tertiary-text' />
+              </div>
+            </div>
+          </div>
+          <div className='px-4 sm:px-8 pt-2'>
+            {activeMenu === 'members' && <MembersPage />}
+            {activeMenu === 'billing' && <BillingPage />}
+            {activeMenu === 'language' && <LanguagePage />}
+            {activeMenu === 'provider' && <ModelProviderPage />}
+            {activeMenu === 'data-source' && <DataSourcePage />}
+            {activeMenu === 'api-based-extension' && <ApiBasedExtensionPage />}
+            {activeMenu === 'custom' && <CustomPage />}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}

dify_0.15.3/web/app/components/header/account-setting/key-validator/KeyInput.tsx

@@ -0,0 +1,77 @@
+import type { ChangeEvent } from 'react'
+import {
+  ValidatedErrorIcon,
+  ValidatedErrorMessage,
+  ValidatedSuccessIcon,
+  ValidatingTip,
+} from './ValidateStatus'
+import { ValidatedStatus } from './declarations'
+import type { ValidatedStatusState } from './declarations'
+
+type KeyInputProps = {
+  value?: string
+  name: string
+  placeholder: string
+  className?: string
+  onChange: (v: string) => void
+  onFocus?: () => void
+  validating: boolean
+  validatedStatusState: ValidatedStatusState
+}
+
+const KeyInput = ({
+  value,
+  name,
+  placeholder,
+  className,
+  onChange,
+  onFocus,
+  validating,
+  validatedStatusState,
+}: KeyInputProps) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value
+    onChange(inputValue)
+  }
+
+  const getValidatedIcon = () => {
+    if (validatedStatusState.status === ValidatedStatus.Error || validatedStatusState.status === ValidatedStatus.Exceed)
+      return <ValidatedErrorIcon />
+
+    if (validatedStatusState.status === ValidatedStatus.Success)
+      return <ValidatedSuccessIcon />
+  }
+  const getValidatedTip = () => {
+    if (validating)
+      return <ValidatingTip />
+
+    if (validatedStatusState.status === ValidatedStatus.Error)
+      return <ValidatedErrorMessage errorMessage={validatedStatusState.message ?? ''} />
+  }
+
+  return (
+    <div className={className}>
+      <div className="mb-2 text-[13px] font-medium text-gray-800">{name}</div>
+      <div className='
+        flex items-center px-3 bg-white rounded-lg
+        shadow-xs
+      '>
+        <input
+          className='
+            w-full py-[9px] mr-2
+            text-xs font-medium text-gray-700 leading-[18px]
+            appearance-none outline-none bg-transparent
+          '
+          value={value}
+          placeholder={placeholder}
+          onChange={handleChange}
+          onFocus={onFocus}
+        />
+        {getValidatedIcon()}
+      </div>
+      {getValidatedTip()}
+    </div>
+  )
+}
+
+export default KeyInput

dify_0.15.3/web/app/components/header/account-setting/key-validator/Operate.tsx

@@ -0,0 +1,87 @@
+import { useTranslation } from 'react-i18next'
+import Indicator from '../../indicator'
+import type { Status } from './declarations'
+
+type OperateProps = {
+  isOpen: boolean
+  status: Status
+  disabled?: boolean
+  onCancel: () => void
+  onSave: () => void
+  onAdd: () => void
+  onEdit: () => void
+}
+
+const Operate = ({
+  isOpen,
+  status,
+  disabled,
+  onCancel,
+  onSave,
+  onAdd,
+  onEdit,
+}: OperateProps) => {
+  const { t } = useTranslation()
+
+  if (isOpen) {
+    return (
+      <div className='flex items-center'>
+        <div className='
+          flex items-center
+          mr-[5px] px-3 h-7 rounded-md cursor-pointer
+          text-xs font-medium text-gray-700
+        ' onClick={onCancel} >
+          {t('common.operation.cancel')}
+        </div>
+        <div className='
+          flex items-center
+          px-3 h-7 rounded-md cursor-pointer bg-primary-700
+          text-xs font-medium text-white
+        ' onClick={onSave}>
+          {t('common.operation.save')}
+        </div>
+      </div>
+    )
+  }
+
+  if (status === 'add') {
+    return (
+      <div className={
+        `px-3 h-[28px] bg-white border border-gray-200 rounded-md cursor-pointer
+        text-xs font-medium text-gray-700 flex items-center ${disabled && 'opacity-50 cursor-default'}}`
+      } onClick={() => !disabled && onAdd()}>
+        {t('common.provider.addKey')}
+      </div>
+    )
+  }
+
+  if (status === 'fail' || status === 'success') {
+    return (
+      <div className='flex items-center'>
+        {
+          status === 'fail' && (
+            <div className='flex items-center mr-4'>
+              <div className='text-xs text-[#D92D20]'>{t('common.provider.invalidApiKey')}</div>
+              <Indicator color='red' className='ml-2' />
+            </div>
+          )
+        }
+        {
+          status === 'success' && (
+            <Indicator color='green' className='mr-4' />
+          )
+        }
+        <div className={
+          `px-3 h-[28px] bg-white border border-gray-200 rounded-md cursor-pointer
+          text-xs font-medium text-gray-700 flex items-center ${disabled && 'opacity-50 cursor-default'}}`
+        } onClick={() => !disabled && onEdit()}>
+          {t('common.provider.editKey')}
+        </div>
+      </div>
+    )
+  }
+
+  return null
+}
+
+export default Operate

dify_0.15.3/web/app/components/header/account-setting/key-validator/ValidateStatus.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from 'react-i18next'
+import {
+  RiErrorWarningFill,
+} from '@remixicon/react'
+import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
+
+export const ValidatedErrorIcon = () => {
+  return <RiErrorWarningFill className='w-4 h-4 text-[#D92D20]' />
+}
+
+export const ValidatedSuccessIcon = () => {
+  return <CheckCircle className='w-4 h-4 text-[#039855]' />
+}
+
+export const ValidatingTip = () => {
+  const { t } = useTranslation()
+  return (
+    <div className={'mt-2 text-primary-600 text-xs font-normal'}>
+      {t('common.provider.validating')}
+    </div>
+  )
+}
+
+export const ValidatedErrorMessage = ({ errorMessage }: { errorMessage: string }) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={'mt-2 text-[#D92D20] text-xs font-normal'}>
+      {t('common.provider.validatedError')}{errorMessage}
+    </div>
+  )
+}

dify_0.15.3/web/app/components/header/account-setting/key-validator/declarations.ts

@@ -0,0 +1,43 @@
+import type { Dispatch, SetStateAction } from 'react'
+
+export enum ValidatedStatus {
+  Success = 'success',
+  Error = 'error',
+  Exceed = 'exceed',
+}
+
+export type ValidatedStatusState = {
+  status?: ValidatedStatus
+  message?: string
+}
+
+export type Status = 'add' | 'fail' | 'success'
+
+export type ValidateValue = Record<string, any>
+
+export type ValidateCallback = {
+  before: (v?: ValidateValue) => boolean | undefined
+  run?: (v?: ValidateValue) => Promise<ValidatedStatusState>
+}
+
+export type Form = {
+  key: string
+  title: string
+  placeholder: string
+  value?: string
+  validate?: ValidateCallback
+  handleFocus?: (v: ValidateValue, dispatch: Dispatch<SetStateAction<ValidateValue>>) => void
+}
+
+export type KeyFrom = {
+  text: string
+  link: string
+}
+
+export type KeyValidatorProps = {
+  type: string
+  title: React.ReactNode
+  status: Status
+  forms: Form[]
+  keyFrom: KeyFrom
+}

dify_0.15.3/web/app/components/header/account-setting/key-validator/hooks.ts

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { useDebounceFn } from 'ahooks'
+import type { DebouncedFunc } from 'lodash-es'
+import { ValidatedStatus } from './declarations'
+import type { ValidateCallback, ValidateValue, ValidatedStatusState } from './declarations'
+
+export const useValidate: (value: ValidateValue) => [DebouncedFunc<(validateCallback: ValidateCallback) => Promise<void>>, boolean, ValidatedStatusState] = (value) => {
+  const [validating, setValidating] = useState(false)
+  const [validatedStatus, setValidatedStatus] = useState<ValidatedStatusState>({})
+
+  const { run } = useDebounceFn(async (validateCallback: ValidateCallback) => {
+    if (!validateCallback.before(value)) {
+      setValidating(false)
+      setValidatedStatus({})
+      return
+    }
+    setValidating(true)
+
+    if (validateCallback.run) {
+      const res = await validateCallback?.run(value)
+      setValidatedStatus(
+        res.status === 'success'
+          ? { status: ValidatedStatus.Success }
+          : { status: ValidatedStatus.Error, message: res.message })
+
+      setValidating(false)
+    }
+  }, { wait: 1000 })
+
+  return [run, validating, validatedStatus]
+}

dify_0.15.3/web/app/components/header/account-setting/key-validator/index.tsx

@@ -0,0 +1,122 @@
+import { useState } from 'react'
+import Operate from './Operate'
+import KeyInput from './KeyInput'
+import { useValidate } from './hooks'
+import type { Form, KeyFrom, Status, ValidateValue } from './declarations'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
+
+export type KeyValidatorProps = {
+  type: string
+  title: React.ReactNode
+  status: Status
+  forms: Form[]
+  keyFrom: KeyFrom
+  onSave: (v: ValidateValue) => Promise<boolean | undefined>
+  disabled?: boolean
+}
+
+const KeyValidator = ({
+  type,
+  title,
+  status,
+  forms,
+  keyFrom,
+  onSave,
+  disabled,
+}: KeyValidatorProps) => {
+  const triggerKey = `plugins/${type}`
+  const { eventEmitter } = useEventEmitterContextContext()
+  const [isOpen, setIsOpen] = useState(false)
+  const prevValue = forms.reduce((prev: ValidateValue, next: Form) => {
+    prev[next.key] = next.value
+    return prev
+  }, {})
+  const [value, setValue] = useState(prevValue)
+  const [validate, validating, validatedStatusState] = useValidate(value)
+
+  eventEmitter?.useSubscription((v) => {
+    if (v !== triggerKey) {
+      setIsOpen(false)
+      setValue(prevValue)
+      validate({ before: () => false })
+    }
+  })
+
+  const handleCancel = () => {
+    eventEmitter?.emit('')
+  }
+
+  const handleSave = async () => {
+    if (await onSave(value))
+      eventEmitter?.emit('')
+  }
+
+  const handleAdd = () => {
+    setIsOpen(true)
+    eventEmitter?.emit(triggerKey)
+  }
+
+  const handleEdit = () => {
+    setIsOpen(true)
+    eventEmitter?.emit(triggerKey)
+  }
+
+  const handleChange = (form: Form, val: string) => {
+    setValue({ ...value, [form.key]: val })
+
+    if (form.validate)
+      validate(form.validate)
+  }
+
+  const handleFocus = (form: Form) => {
+    if (form.handleFocus)
+      form.handleFocus(value, setValue)
+  }
+
+  return (
+    <div className='mb-2 border-[0.5px] border-gray-200 bg-gray-50 rounded-md'>
+      <div className={
+        `flex items-center justify-between px-4 h-[52px] cursor-pointer ${isOpen && 'border-b-[0.5px] border-b-gray-200'}`
+      }>
+        {title}
+        <Operate
+          isOpen={isOpen}
+          status={status}
+          onCancel={handleCancel}
+          onSave={handleSave}
+          onAdd={handleAdd}
+          onEdit={handleEdit}
+          disabled={disabled}
+        />
+      </div>
+      {
+        isOpen && !disabled && (
+          <div className='px-4 py-3'>
+            {
+              forms.map(form => (
+                <KeyInput
+                  key={form.key}
+                  className='mb-4'
+                  name={form.title}
+                  placeholder={form.placeholder}
+                  value={value[form.key] as string || ''}
+                  onChange={v => handleChange(form, v)}
+                  onFocus={() => handleFocus(form)}
+                  validating={validating}
+                  validatedStatusState={validatedStatusState}
+                />
+              ))
+            }
+            <a className="flex items-center text-xs cursor-pointer text-primary-600" href={keyFrom.link} target='_blank' rel='noopener noreferrer'>
+              {keyFrom.text}
+              <LinkExternal02 className='w-3 h-3 ml-1 text-primary-600' />
+            </a>
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default KeyValidator

dify_0.15.3/web/app/components/header/account-setting/language-page/index.module.css

@@ -0,0 +1,24 @@
+.google-icon {
+  background: url(../../assets/google.svg) center center no-repeat;
+  background-size: 16px 16px;
+}
+
+.github-icon {
+  background: url(../../assets/github.svg) center center no-repeat;
+  background-size: 16px 16px;
+}
+
+.twitter-icon {
+  background: url(../../assets/twitter.svg) center center no-repeat;
+  background-size: 16px 16px;
+}
+
+.bitbucket-icon {
+  background: url(../../assets/bitbucket.svg) center center no-repeat;
+  background-size: 16px 16px;
+}
+
+.salesforce-icon {
+  background: url(../../assets/salesforce.svg) center center no-repeat;
+  background-size: 24px auto;
+}

dify_0.15.3/web/app/components/header/account-setting/language-page/index.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { useAppContext } from '@/context/app-context'
+import { SimpleSelect } from '@/app/components/base/select'
+import type { Item } from '@/app/components/base/select'
+import { updateUserProfile } from '@/service/common'
+import { ToastContext } from '@/app/components/base/toast'
+import I18n from '@/context/i18n'
+import { timezones } from '@/utils/timezone'
+import { languages } from '@/i18n/language'
+
+const titleClassName = `
+  mb-2 system-sm-semibold text-text-secondary
+`
+
+export default function LanguagePage() {
+  const { locale, setLocaleOnClient } = useContext(I18n)
+  const { userProfile, mutateUserProfile } = useAppContext()
+  const { notify } = useContext(ToastContext)
+  const [editing, setEditing] = useState(false)
+  const { t } = useTranslation()
+
+  const handleSelectLanguage = async (item: Item) => {
+    const url = '/account/interface-language'
+    const bodyKey = 'interface_language'
+
+    setEditing(true)
+    try {
+      await updateUserProfile({ url, body: { [bodyKey]: item.value } })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+
+      setLocaleOnClient(item.value.toString())
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+    }
+    finally {
+      setEditing(false)
+    }
+  }
+
+  const handleSelectTimezone = async (item: Item) => {
+    const url = '/account/timezone'
+    const bodyKey = 'timezone'
+
+    setEditing(true)
+    try {
+      await updateUserProfile({ url, body: { [bodyKey]: item.value } })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+
+      mutateUserProfile()
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+    }
+    finally {
+      setEditing(false)
+    }
+  }
+
+  return (
+    <>
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.language.displayLanguage')}</div>
+        <SimpleSelect
+          defaultValue={locale || userProfile.interface_language}
+          items={languages.filter(item => item.supported)}
+          onSelect={item => handleSelectLanguage(item)}
+          disabled={editing}
+        />
+      </div>
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.language.timezone')}</div>
+        <SimpleSelect
+          defaultValue={userProfile.timezone}
+          items={timezones}
+          onSelect={item => handleSelectTimezone(item)}
+          disabled={editing}
+        />
+      </div>
+    </>
+  )
+}

dify_0.15.3/web/app/components/header/account-setting/members-page/index.tsx

@@ -0,0 +1,147 @@
+'use client'
+import { useState } from 'react'
+import useSWR from 'swr'
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { useContext } from 'use-context-selector'
+import { RiUserAddLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import InviteModal from './invite-modal'
+import InvitedModal from './invited-modal'
+import Operation from './operation'
+import { fetchMembers } from '@/service/common'
+import I18n from '@/context/i18n'
+import { useAppContext } from '@/context/app-context'
+import Avatar from '@/app/components/base/avatar'
+import type { InvitationResult } from '@/models/common'
+import LogoEmbeddedChatHeader from '@/app/components/base/logo/logo-embedded-chat-header'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '@/app/components/billing/type'
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
+import { NUM_INFINITE } from '@/app/components/billing/config'
+import { LanguagesSupported } from '@/i18n/language'
+dayjs.extend(relativeTime)
+
+const MembersPage = () => {
+  const { t } = useTranslation()
+  const RoleMap = {
+    owner: t('common.members.owner'),
+    admin: t('common.members.admin'),
+    editor: t('common.members.editor'),
+    dataset_operator: t('common.members.datasetOperator'),
+    normal: t('common.members.normal'),
+  }
+  const { locale } = useContext(I18n)
+
+  const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager, systemFeatures } = useAppContext()
+  const { data, mutate } = useSWR({ url: '/workspaces/current/members' }, fetchMembers)
+  const [inviteModalVisible, setInviteModalVisible] = useState(false)
+  const [invitationResults, setInvitationResults] = useState<InvitationResult[]>([])
+  const [invitedModalVisible, setInvitedModalVisible] = useState(false)
+  const accounts = data?.accounts || []
+  const { plan, enableBilling } = useProviderContext()
+  const isNotUnlimitedMemberPlan = enableBilling && plan.type !== Plan.team && plan.type !== Plan.enterprise
+  const isMemberFull = enableBilling && isNotUnlimitedMemberPlan && accounts.length >= plan.total.teamMembers
+
+  return (
+    <>
+      <div className='flex flex-col'>
+        <div className='flex items-center mb-4 p-3 bg-gray-50 rounded-2xl'>
+          <LogoEmbeddedChatHeader className='!w-10 !h-10' />
+          <div className='grow mx-2'>
+            <div className='text-sm font-medium text-gray-900'>{currentWorkspace?.name}</div>
+            {enableBilling && (
+              <div className='text-xs text-gray-500'>
+                {isNotUnlimitedMemberPlan
+                  ? (
+                    <div className='flex space-x-1'>
+                      <div>{t('billing.plansCommon.member')}{locale !== LanguagesSupported[1] && accounts.length > 1 && 's'}</div>
+                      <div className='text-gray-700'>{accounts.length}</div>
+                      <div>/</div>
+                      <div>{plan.total.teamMembers === NUM_INFINITE ? t('billing.plansCommon.unlimited') : plan.total.teamMembers}</div>
+                    </div>
+                  )
+                  : (
+                    <div className='flex space-x-1'>
+                      <div>{accounts.length}</div>
+                      <div>{t('billing.plansCommon.memberAfter')}{locale !== LanguagesSupported[1] && accounts.length > 1 && 's'}</div>
+                    </div>
+                  )}
+              </div>
+            )}
+
+          </div>
+          {isMemberFull && (
+            <UpgradeBtn className='mr-2' loc='member-invite' />
+          )}
+          <div className={
+            `shrink-0 flex items-center py-[7px] px-3 border-[0.5px] border-gray-200
+            text-[13px] font-medium text-primary-600 bg-white
+            shadow-xs rounded-lg ${(isCurrentWorkspaceManager && !isMemberFull) ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+          } onClick={() => (isCurrentWorkspaceManager && !isMemberFull) && setInviteModalVisible(true)}>
+            <RiUserAddLine className='w-4 h-4 mr-2 ' />
+            {t('common.members.invite')}
+          </div>
+        </div>
+        <div className='overflow-visible lg:overflow-visible'>
+          <div className='flex items-center py-[7px] border-b border-divider-regular min-w-[480px]'>
+            <div className='grow px-3 system-xs-medium-uppercase text-text-tertiary'>{t('common.members.name')}</div>
+            <div className='shrink-0 w-[104px] system-xs-medium-uppercase text-text-tertiary'>{t('common.members.lastActive')}</div>
+            <div className='shrink-0 w-[96px] px-3 system-xs-medium-uppercase text-text-tertiary'>{t('common.members.role')}</div>
+          </div>
+          <div className='min-w-[480px] relative'>
+            {
+              accounts.map(account => (
+                <div key={account.id} className='flex border-b border-divider-subtle'>
+                  <div className='grow flex items-center py-2 px-3'>
+                    <Avatar avatar={account.avatar_url} size={24} className='mr-2' name={account.name} />
+                    <div className=''>
+                      <div className='text-text-secondary system-sm-medium'>
+                        {account.name}
+                        {account.status === 'pending' && <span className='ml-1 system-xs-regular text-[#DC6803]'>{t('common.members.pending')}</span>}
+                        {userProfile.email === account.email && <span className='system-xs-regular text-text-tertiary'>{t('common.members.you')}</span>}
+                      </div>
+                      <div className='text-text-tertiary system-xs-regular'>{account.email}</div>
+                    </div>
+                  </div>
+                  <div className='shrink-0 flex items-center w-[104px] py-2 system-xs-regular text-text-secondary'>{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}</div>
+                  <div className='shrink-0 w-[96px] flex items-center'>
+                    {
+                      ((isCurrentWorkspaceOwner && account.role !== 'owner') || (isCurrentWorkspaceManager && !['owner', 'admin'].includes(account.role)))
+                        ? <Operation member={account} operatorRole={currentWorkspace.role} onOperate={mutate} />
+                        : <div className='px-3 system-xs-regular text-text-secondary'>{RoleMap[account.role] || RoleMap.normal}</div>
+                    }
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+      {
+        inviteModalVisible && (
+          <InviteModal
+            isEmailSetup={systemFeatures.is_email_setup}
+            onCancel={() => setInviteModalVisible(false)}
+            onSend={(invitationResults) => {
+              setInvitedModalVisible(true)
+              setInvitationResults(invitationResults)
+              mutate()
+            }}
+          />
+        )
+      }
+      {
+        invitedModalVisible && (
+          <InvitedModal
+            invitationResults={invitationResults}
+            onCancel={() => setInvitedModalVisible(false)}
+          />
+        )
+      }
+    </>
+  )
+}
+
+export default MembersPage

dify_0.15.3/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;
+}

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

@@ -0,0 +1,123 @@
+'use client'
+import { useCallback, useState } from 'react'
+import { useContext } from 'use-context-selector'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+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'
+type IInviteModalProps = {
+  isEmailSetup: boolean
+  onCancel: () => void
+  onSend: (invitationResults: InvitationResult[]) => void
+}
+
+const InviteModal = ({
+  isEmailSetup,
+  onCancel,
+  onSend,
+}: IInviteModalProps) => {
+  const { t } = useTranslation()
+  const [emails, setEmails] = useState<string[]>([])
+  const { notify } = useContext(ToastContext)
+
+  const { locale } = useContext(I18n)
+  const [role, setRole] = useState<string>('normal')
+
+  const handleSend = useCallback(async () => {
+    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') {
+          onCancel()
+          onSend(invitation_results)
+        }
+      }
+      catch (e) { }
+    }
+    else {
+      notify({ type: 'error', message: t('common.members.emailInvalid') })
+    }
+  }, [role, emails, notify, onCancel, onSend, t])
+
+  return (
+    <div className={cn(s.wrap)}>
+      <Modal overflowVisible isShow onClose={() => { }} className={cn(s.modal)}>
+        <div className='flex justify-between mb-2'>
+          <div className='text-xl font-semibold text-gray-900'>{t('common.members.inviteTeamMember')}</div>
+          <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
+        </div>
+        <div className='mb-3 text-[13px] text-gray-500'>{t('common.members.inviteTeamMemberTip')}</div>
+        {!isEmailSetup && (
+          <div className='grow basis-0 overflow-y-auto pb-4'>
+            <div className='relative mb-1 p-2 rounded-xl border border-components-panel-border shadow-xs'>
+              <div className='absolute top-0 left-0 w-full h-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 items-start w-full h-full'>
+                <div className='shrink-0 mr-0.5 p-0.5'>
+                  <RiErrorWarningFill className='w-5 h-5 text-text-warning' />
+                </div>
+                <div className='text-text-primary system-xs-medium'>
+                  <span>{t('common.members.emailNotSetup')}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div>
+          <div className='mb-2 text-sm font-medium text-gray-900'>{t('common.members.email')}</div>
+          <div className='mb-8 h-36 flex items-stretch'>
+            <ReactMultiEmail
+              className={cn('w-full pt-2 px-3 outline-none border-none',
+                'appearance-none text-sm text-gray-900 rounded-lg overflow-y-auto',
+                s.emailsInput,
+              )}
+              autoFocus
+              emails={emails}
+              inputClassName='bg-transparent'
+              onChange={setEmails}
+              getLabel={(email, index, removeEmail) =>
+                <div data-tag key={index} className={cn(s.emailBackground)}>
+                  <div data-tag-item>{email}</div>
+                  <span data-tag-handle onClick={() => removeEmail(index)}>
+                    ×
+                  </span>
+                </div>
+              }
+              placeholder={t('common.members.emailPlaceholder') || ''}
+            />
+          </div>
+          <div className='mb-6'>
+            <RoleSelector value={role} onChange={setRole} />
+          </div>
+          <Button
+            tabIndex={0}
+            className='w-full'
+            onClick={handleSend}
+            disabled={!emails.length}
+            variant='primary'
+          >
+            {t('common.members.sendInvite')}
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default InviteModal

dify_0.15.3/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 items-center px-3 py-2 rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
+            <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('common.members.invitedAsRole', { role: t(`common.members.${toHump(value)}`) })}</div>
+            <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1002]'>
+          <div className='relative w-[336px] bg-white rounded-lg border-[0.5px] bg-gray-200 shadow-lg'>
+            <div className='p-1'>
+              <div className='p-2 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+                onChange('normal')
+                setOpen(false)
+              }}>
+                <div className='relative pl-5'>
+                  <div className='text-gray-700 text-sm leading-5'>{t('common.members.normal')}</div>
+                  <div className='text-gray-500 text-xs leading-[18px]'>{t('common.members.normalTip')}</div>
+                  {value === 'normal' && <Check className='absolute top-0.5 left-0 w-4 h-4 text-primary-600'/>}
+                </div>
+              </div>
+              <div className='p-2 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+                onChange('editor')
+                setOpen(false)
+              }}>
+                <div className='relative pl-5'>
+                  <div className='text-gray-700 text-sm leading-5'>{t('common.members.editor')}</div>
+                  <div className='text-gray-500 text-xs leading-[18px]'>{t('common.members.editorTip')}</div>
+                  {value === 'editor' && <Check className='absolute top-0.5 left-0 w-4 h-4 text-primary-600'/>}
+                </div>
+              </div>
+              <div className='p-2 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+                onChange('admin')
+                setOpen(false)
+              }}>
+                <div className='relative pl-5'>
+                  <div className='text-gray-700 text-sm leading-5'>{t('common.members.admin')}</div>
+                  <div className='text-gray-500 text-xs leading-[18px]'>{t('common.members.adminTip')}</div>
+                  {value === 'admin' && <Check className='absolute top-0.5 left-0 w-4 h-4 text-primary-600'/>}
+                </div>
+              </div>
+              {datasetOperatorEnabled && (
+                <div className='p-2 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+                  onChange('dataset_operator')
+                  setOpen(false)
+                }}>
+                  <div className='relative pl-5'>
+                    <div className='text-gray-700 text-sm leading-5'>{t('common.members.datasetOperator')}</div>
+                    <div className='text-gray-500 text-xs leading-[18px]'>{t('common.members.datasetOperatorTip')}</div>
+                    {value === 'dataset_operator' && <Check className='absolute top-0.5 left-0 w-4 h-4 text-primary-600'/>}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default RoleSelector

dify_0.15.3/web/app/components/header/account-setting/members-page/invited-modal/assets/copied.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.6665 2.66683C11.2865 2.66683 11.5965 2.66683 11.8508 2.73498C12.541 2.91991 13.0801 3.45901 13.265 4.14919C13.3332 4.40352 13.3332 4.71352 13.3332 5.3335V11.4668C13.3332 12.5869 13.3332 13.147 13.1152 13.5748C12.9234 13.9511 12.6175 14.2571 12.2412 14.4488C11.8133 14.6668 11.2533 14.6668 10.1332 14.6668H5.8665C4.7464 14.6668 4.18635 14.6668 3.75852 14.4488C3.3822 14.2571 3.07624 13.9511 2.88449 13.5748C2.6665 13.147 2.6665 12.5869 2.6665 11.4668V5.3335C2.6665 4.71352 2.6665 4.40352 2.73465 4.14919C2.91959 3.45901 3.45868 2.91991 4.14887 2.73498C4.4032 2.66683 4.71319 2.66683 5.33317 2.66683M5.99984 10.0002L7.33317 11.3335L10.3332 8.3335M6.39984 4.00016H9.59984C9.9732 4.00016 10.1599 4.00016 10.3025 3.9275C10.4279 3.86359 10.5299 3.7616 10.5938 3.63616C10.6665 3.49355 10.6665 3.30686 10.6665 2.9335V2.40016C10.6665 2.02679 10.6665 1.84011 10.5938 1.6975C10.5299 1.57206 10.4279 1.47007 10.3025 1.40616C10.1599 1.3335 9.97321 1.3335 9.59984 1.3335H6.39984C6.02647 1.3335 5.83978 1.3335 5.69718 1.40616C5.57174 1.47007 5.46975 1.57206 5.40583 1.6975C5.33317 1.84011 5.33317 2.02679 5.33317 2.40016V2.9335C5.33317 3.30686 5.33317 3.49355 5.40583 3.63616C5.46975 3.7616 5.57174 3.86359 5.69718 3.9275C5.83978 4.00016 6.02647 4.00016 6.39984 4.00016Z" stroke="#1D2939" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dify_0.15.3/web/app/components/header/account-setting/members-page/invited-modal/assets/copy-hover.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.6665 2.66634H11.9998C12.3535 2.66634 12.6926 2.80682 12.9426 3.05687C13.1927 3.30691 13.3332 3.64605 13.3332 3.99967V13.333C13.3332 13.6866 13.1927 14.0258 12.9426 14.2758C12.6926 14.5259 12.3535 14.6663 11.9998 14.6663H3.99984C3.64622 14.6663 3.30708 14.5259 3.05703 14.2758C2.80698 14.0258 2.6665 13.6866 2.6665 13.333V3.99967C2.6665 3.64605 2.80698 3.30691 3.05703 3.05687C3.30708 2.80682 3.64622 2.66634 3.99984 2.66634H5.33317M5.99984 1.33301H9.99984C10.368 1.33301 10.6665 1.63148 10.6665 1.99967V3.33301C10.6665 3.7012 10.368 3.99967 9.99984 3.99967H5.99984C5.63165 3.99967 5.33317 3.7012 5.33317 3.33301V1.99967C5.33317 1.63148 5.63165 1.33301 5.99984 1.33301Z" stroke="#1D2939" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dify_0.15.3/web/app/components/header/account-setting/members-page/invited-modal/assets/copy.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.6665 2.66634H11.9998C12.3535 2.66634 12.6926 2.80682 12.9426 3.05687C13.1927 3.30691 13.3332 3.64605 13.3332 3.99967V13.333C13.3332 13.6866 13.1927 14.0258 12.9426 14.2758C12.6926 14.5259 12.3535 14.6663 11.9998 14.6663H3.99984C3.64622 14.6663 3.30708 14.5259 3.05703 14.2758C2.80698 14.0258 2.6665 13.6866 2.6665 13.333V3.99967C2.6665 3.64605 2.80698 3.30691 3.05703 3.05687C3.30708 2.80682 3.64622 2.66634 3.99984 2.66634H5.33317M5.99984 1.33301H9.99984C10.368 1.33301 10.6665 1.63148 10.6665 1.99967V3.33301C10.6665 3.7012 10.368 3.99967 9.99984 3.99967H5.99984C5.63165 3.99967 5.33317 3.7012 5.33317 3.33301V1.99967C5.33317 1.63148 5.63165 1.33301 5.99984 1.33301Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dify_0.15.3/web/app/components/header/account-setting/members-page/invited-modal/index.module.css

@@ -0,0 +1,21 @@
+.modal {
+  padding: 32px !important;
+  width: 480px !important;
+  background: linear-gradient(180deg, rgba(3, 152, 85, 0.05) 0%, rgba(3, 152, 85, 0) 22.44%), #F9FAFB !important;
+}
+
+.copyIcon {
+  background-image: url(./assets/copy.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.copyIcon:hover {
+  background-image: url(./assets/copy-hover.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.copyIcon.copied {
+  background-image: url(./assets/copied.svg);
+}

dify_0.15.3/web/app/components/header/account-setting/members-page/invited-modal/index.tsx

@@ -0,0 +1,98 @@
+import { CheckCircleIcon } from '@heroicons/react/24/solid'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import { RiQuestionLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useMemo } from 'react'
+import InvitationLink from './invitation-link'
+import s from './index.module.css'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import { IS_CE_EDITION } from '@/config'
+import type { InvitationResult } from '@/models/common'
+import Tooltip from '@/app/components/base/tooltip'
+
+export type SuccessInvitationResult = Extract<InvitationResult, { status: 'success' }>
+export type FailedInvitationResult = Extract<InvitationResult, { status: 'failed' }>
+
+type IInvitedModalProps = {
+  invitationResults: InvitationResult[]
+  onCancel: () => void
+}
+const InvitedModal = ({
+  invitationResults,
+  onCancel,
+}: IInvitedModalProps) => {
+  const { t } = useTranslation()
+
+  const successInvitationResults = useMemo<SuccessInvitationResult[]>(() => invitationResults?.filter(item => item.status === 'success') as SuccessInvitationResult[], [invitationResults])
+  const failedInvitationResults = useMemo<FailedInvitationResult[]>(() => invitationResults?.filter(item => item.status !== 'success') as FailedInvitationResult[], [invitationResults])
+
+  return (
+    <div className={s.wrap}>
+      <Modal isShow onClose={() => {}} className={s.modal}>
+        <div className='flex justify-between mb-3'>
+          <div className='
+            w-12 h-12 flex items-center justify-center rounded-xl
+            bg-white border-[0.5px] border-gray-100
+            shadow-xl
+          '>
+            <CheckCircleIcon className='w-[22px] h-[22px] text-[#039855]' />
+          </div>
+          <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
+        </div>
+        <div className='mb-1 text-xl font-semibold text-gray-900'>{t('common.members.invitationSent')}</div>
+        {!IS_CE_EDITION && (
+          <div className='mb-10 text-sm text-gray-500'>{t('common.members.invitationSentTip')}</div>
+        )}
+        {IS_CE_EDITION && (
+          <>
+            <div className='mb-5 text-sm text-gray-500'>{t('common.members.invitationSentTip')}</div>
+            <div className='flex flex-col gap-2 mb-9'>
+              {
+                !!successInvitationResults.length
+                && <>
+                  <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.invitationLink')}</div>
+                  {successInvitationResults.map(item =>
+                    <InvitationLink key={item.email} value={item} />)}
+                </>
+              }
+              {
+                !!failedInvitationResults.length
+                && <>
+                  <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.failedInvitationEmails')}</div>
+                  <div className='flex flex-wrap justify-between gap-y-1'>
+                    {
+                      failedInvitationResults.map(item =>
+                        <div key={item.email} className='flex justify-center border border-red-300 rounded-md px-1 bg-orange-50'>
+                          <Tooltip
+                            popupContent={item.message}
+                          >
+                            <div className='flex justify-center items-center text-sm gap-1'>
+                              {item.email}
+                              <RiQuestionLine className='w-4 h-4 text-red-300' />
+                            </div>
+                          </Tooltip>
+                        </div>,
+                      )
+                    }
+                  </div>
+                </>
+              }
+            </div>
+          </>
+        )}
+        <div className='flex justify-end'>
+          <Button
+            className='w-[96px]'
+            onClick={onCancel}
+            variant='primary'
+          >
+            {t('common.members.ok')}
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default InvitedModal

dify_0.15.3/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx

@@ -0,0 +1,61 @@
+'use client'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { t } from 'i18next'
+import copy from 'copy-to-clipboard'
+import s from './index.module.css'
+import type { SuccessInvitationResult } from '.'
+import Tooltip from '@/app/components/base/tooltip'
+import { randomString } from '@/utils'
+
+type IInvitationLinkProps = {
+  value: SuccessInvitationResult
+}
+
+const InvitationLink = ({
+  value,
+}: IInvitationLinkProps) => {
+  const [isCopied, setIsCopied] = useState(false)
+  const selector = useRef(`invite-link-${randomString(4)}`)
+
+  const copyHandle = useCallback(() => {
+    copy(`${!value.url.startsWith('http') ? window.location.origin : ''}${value.url}`)
+    setIsCopied(true)
+  }, [value])
+
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => {
+        setIsCopied(false)
+      }, 1000)
+
+      return () => {
+        clearTimeout(timeout)
+      }
+    }
+  }, [isCopied])
+
+  return (
+    <div className='flex rounded-lg bg-gray-100 hover:bg-gray-100 border border-gray-200 py-2 items-center'>
+      <div className="flex items-center flex-grow h-5">
+        <div className='flex-grow bg-gray-100 text-[13px] relative h-full'>
+          <Tooltip
+            popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
+          >
+            <div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={copyHandle}>{value.url}</div>
+          </Tooltip>
+        </div>
+        <div className="flex-shrink-0 h-4 bg-gray-200 border" />
+        <Tooltip
+          popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
+        >
+          <div className="px-0.5 flex-shrink-0">
+            <div className={`box-border w-[30px] h-[30px] flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={copyHandle}>
+            </div>
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default InvitationLink

dify_0.15.3/web/app/components/header/account-setting/members-page/operation/index.module.css

@@ -0,0 +1,3 @@
+.popup {
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}

dify_0.15.3/web/app/components/header/account-setting/members-page/operation/index.tsx

@@ -0,0 +1,160 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { Fragment, useMemo } from 'react'
+import { useContext } from 'use-context-selector'
+import { Menu, Transition } from '@headlessui/react'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
+import s from './index.module.css'
+import { useProviderContext } from '@/context/provider-context'
+import cn from '@/utils/classnames'
+import type { Member } from '@/models/common'
+import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
+import { ToastContext } from '@/app/components/base/toast'
+
+const itemClassName = `
+  flex px-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg
+`
+const itemIconClassName = `
+  w-4 h-4 mt-[2px] mr-1 text-primary-600
+`
+const itemTitleClassName = `
+  leading-[20px] text-sm text-gray-700 whitespace-nowrap
+`
+const itemDescClassName = `
+  leading-[18px] text-xs text-gray-500 whitespace-nowrap
+`
+
+type IOperationProps = {
+  member: Member
+  operatorRole: string
+  onOperate: () => void
+}
+
+const Operation = ({
+  member,
+  operatorRole,
+  onOperate,
+}: IOperationProps) => {
+  const { t } = useTranslation()
+  const { datasetOperatorEnabled } = useProviderContext()
+  const RoleMap = {
+    owner: t('common.members.owner'),
+    admin: t('common.members.admin'),
+    editor: t('common.members.editor'),
+    normal: t('common.members.normal'),
+    dataset_operator: t('common.members.datasetOperator'),
+  }
+  const roleList = useMemo(() => {
+    if (operatorRole === 'owner') {
+      return [
+        ...['admin', 'editor', 'normal'],
+        ...(datasetOperatorEnabled ? ['dataset_operator'] : []),
+      ]
+    }
+    if (operatorRole === 'admin') {
+      return [
+        ...['editor', 'normal'],
+        ...(datasetOperatorEnabled ? ['dataset_operator'] : []),
+      ]
+    }
+    return []
+  }, [operatorRole, datasetOperatorEnabled])
+  const { notify } = useContext(ToastContext)
+  const toHump = (name: string) => name.replace(/_(\w)/g, (all, letter) => letter.toUpperCase())
+  const handleDeleteMemberOrCancelInvitation = async () => {
+    try {
+      await deleteMemberOrCancelInvitation({ url: `/workspaces/current/members/${member.id}` })
+      onOperate()
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+    }
+    catch (e) {
+
+    }
+  }
+  const handleUpdateMemberRole = async (role: string) => {
+    try {
+      await updateMemberRole({
+        url: `/workspaces/current/members/${member.id}/update-role`,
+        body: { role },
+      })
+      onOperate()
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+    }
+    catch (e) {
+
+    }
+  }
+
+  return (
+    <Menu as="div" className="relative w-full h-full">
+      {
+        ({ open }) => (
+          <>
+            <Menu.Button className={cn(
+              `
+                  group flex items-center justify-between w-full h-full
+                  hover:bg-gray-100 cursor-pointer ${open && 'bg-gray-100'}
+                  text-[13px] text-gray-700 px-3
+                `,
+            )}>
+              {RoleMap[member.role] || RoleMap.normal}
+              <ChevronDownIcon className={`w-4 h-4 group-hover:block ${open ? 'block' : 'hidden'}`} />
+            </Menu.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items
+                className={cn(
+                  `
+                      absolute right-0 top-[52px] z-10 bg-white border-[0.5px] border-gray-200
+                      divide-y divide-gray-100 origin-top-right rounded-lg
+                    `,
+                  s.popup,
+                )}
+              >
+                <div className="px-1 py-1">
+                  {
+                    roleList.map(role => (
+                      <Menu.Item key={role}>
+                        <div className={itemClassName} onClick={() => handleUpdateMemberRole(role)}>
+                          {
+                            role === member.role
+                              ? <CheckIcon className={itemIconClassName} />
+                              : <div className={itemIconClassName} />
+                          }
+                          <div>
+                            <div className={itemTitleClassName}>{t(`common.members.${toHump(role)}`)}</div>
+                            <div className={itemDescClassName}>{t(`common.members.${toHump(role)}Tip`)}</div>
+                          </div>
+                        </div>
+                      </Menu.Item>
+                    ))
+                  }
+                </div>
+                <Menu.Item>
+                  <div className='px-1 py-1'>
+                    <div className={itemClassName} onClick={handleDeleteMemberOrCancelInvitation}>
+                      <div className={itemIconClassName} />
+                      <div>
+                        <div className={itemTitleClassName}>{t('common.members.removeFromTeam')}</div>
+                        <div className={itemDescClassName}>{t('common.members.removeFromTeamTip')}</div>
+                      </div>
+                    </div>
+                  </div>
+                </Menu.Item>
+              </Menu.Items>
+            </Transition>
+          </>
+        )
+      }
+    </Menu>
+  )
+}
+
+export default Operation

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/declarations.ts

@@ -0,0 +1,255 @@
+export type FormValue = Record<string, any>
+
+export type TypeWithI18N<T = string> = {
+  en_US: T
+  zh_Hans: T
+  [key: string]: T
+}
+
+export enum FormTypeEnum {
+  textInput = 'text-input',
+  textNumber = 'number-input',
+  secretInput = 'secret-input',
+  select = 'select',
+  radio = 'radio',
+  boolean = 'boolean',
+  files = 'files',
+  file = 'file',
+}
+
+export type FormOption = {
+  label: TypeWithI18N
+  value: string
+  show_on: FormShowOnObject[]
+}
+
+export enum ModelTypeEnum {
+  textGeneration = 'llm',
+  textEmbedding = 'text-embedding',
+  rerank = 'rerank',
+  speech2text = 'speech2text',
+  moderation = 'moderation',
+  tts = 'tts',
+}
+
+export const MODEL_TYPE_TEXT = {
+  [ModelTypeEnum.textGeneration]: 'LLM',
+  [ModelTypeEnum.textEmbedding]: 'Text Embedding',
+  [ModelTypeEnum.rerank]: 'Rerank',
+  [ModelTypeEnum.speech2text]: 'Speech2text',
+  [ModelTypeEnum.moderation]: 'Moderation',
+  [ModelTypeEnum.tts]: 'TTS',
+}
+
+export enum ConfigurationMethodEnum {
+  predefinedModel = 'predefined-model',
+  customizableModel = 'customizable-model',
+  fetchFromRemote = 'fetch-from-remote',
+}
+
+export enum ModelFeatureEnum {
+  toolCall = 'tool-call',
+  multiToolCall = 'multi-tool-call',
+  agentThought = 'agent-thought',
+  vision = 'vision',
+  video = 'video',
+  document = 'document',
+  audio = 'audio',
+}
+
+export enum ModelFeatureTextEnum {
+  toolCall = 'Tool Call',
+  multiToolCall = 'Multi Tool Call',
+  agentThought = 'Agent Thought',
+  vision = 'Vision',
+  video = 'Video',
+  document = 'Document',
+  audio = 'Audio',
+}
+
+export enum ModelStatusEnum {
+  active = 'active',
+  noConfigure = 'no-configure',
+  quotaExceeded = 'quota-exceeded',
+  noPermission = 'no-permission',
+  disabled = 'disabled',
+}
+
+export const MODEL_STATUS_TEXT: { [k: string]: TypeWithI18N } = {
+  'no-configure': {
+    en_US: 'No Configure',
+    zh_Hans: '未配置凭据',
+  },
+  'quota-exceeded': {
+    en_US: 'Quota Exceeded',
+    zh_Hans: '额度不足',
+  },
+  'no-permission': {
+    en_US: 'No Permission',
+    zh_Hans: '无使用权限',
+  },
+}
+
+export enum CustomConfigurationStatusEnum {
+  active = 'active',
+  noConfigure = 'no-configure',
+}
+
+export type FormShowOnObject = {
+  variable: string
+  value: string
+}
+
+export type CredentialFormSchemaBase = {
+  variable: string
+  label: TypeWithI18N
+  type: FormTypeEnum
+  required: boolean
+  default?: string
+  tooltip?: TypeWithI18N
+  show_on: FormShowOnObject[]
+  url?: string
+}
+
+export type CredentialFormSchemaTextInput = CredentialFormSchemaBase & { max_length?: number; placeholder?: TypeWithI18N }
+export type CredentialFormSchemaNumberInput = CredentialFormSchemaBase & { min?: number; max?: number; placeholder?: TypeWithI18N }
+export type CredentialFormSchemaSelect = CredentialFormSchemaBase & { options: FormOption[]; placeholder?: TypeWithI18N }
+export type CredentialFormSchemaRadio = CredentialFormSchemaBase & { options: FormOption[] }
+export type CredentialFormSchemaSecretInput = CredentialFormSchemaBase & { placeholder?: TypeWithI18N }
+export type CredentialFormSchema = CredentialFormSchemaTextInput | CredentialFormSchemaSelect | CredentialFormSchemaRadio | CredentialFormSchemaSecretInput
+
+export type ModelItem = {
+  model: string
+  label: TypeWithI18N
+  model_type: ModelTypeEnum
+  features?: ModelFeatureEnum[]
+  fetch_from: ConfigurationMethodEnum
+  status: ModelStatusEnum
+  model_properties: Record<string, string | number>
+  load_balancing_enabled: boolean
+  deprecated?: boolean
+}
+
+export enum PreferredProviderTypeEnum {
+  system = 'system',
+  custom = 'custom',
+}
+
+export enum CurrentSystemQuotaTypeEnum {
+  trial = 'trial',
+  free = 'free',
+  paid = 'paid',
+}
+
+export enum QuotaUnitEnum {
+  times = 'times',
+  tokens = 'tokens',
+  credits = 'credits',
+}
+
+export type QuotaConfiguration = {
+  quota_type: CurrentSystemQuotaTypeEnum
+  quota_unit: QuotaUnitEnum
+  quota_limit: number
+  quota_used: number
+  last_used: number
+  is_valid: boolean
+}
+
+export type ModelProvider = {
+  provider: string
+  label: TypeWithI18N
+  description?: TypeWithI18N
+  help: {
+    title: TypeWithI18N
+    url: TypeWithI18N
+  }
+  icon_small: TypeWithI18N
+  icon_large: TypeWithI18N
+  background?: string
+  supported_model_types: ModelTypeEnum[]
+  configurate_methods: ConfigurationMethodEnum[]
+  provider_credential_schema: {
+    credential_form_schemas: CredentialFormSchema[]
+  }
+  model_credential_schema: {
+    model: {
+      label: TypeWithI18N
+      placeholder: TypeWithI18N
+    }
+    credential_form_schemas: CredentialFormSchema[]
+  }
+  preferred_provider_type: PreferredProviderTypeEnum
+  custom_configuration: {
+    status: CustomConfigurationStatusEnum
+  }
+  system_configuration: {
+    enabled: boolean
+    current_quota_type: CurrentSystemQuotaTypeEnum
+    quota_configurations: QuotaConfiguration[]
+  }
+}
+
+export type Model = {
+  provider: string
+  icon_large: TypeWithI18N
+  icon_small: TypeWithI18N
+  label: TypeWithI18N
+  models: ModelItem[]
+  status: ModelStatusEnum
+}
+
+export type DefaultModelResponse = {
+  model: string
+  model_type: ModelTypeEnum
+  provider: {
+    provider: string
+    icon_large: TypeWithI18N
+    icon_small: TypeWithI18N
+  }
+}
+
+export type DefaultModel = {
+  provider: string
+  model: string
+}
+
+export type CustomConfigurationModelFixedFields = {
+  __model_name: string
+  __model_type: ModelTypeEnum
+}
+
+export type ModelParameterRule = {
+  default?: number | string | boolean | string[]
+  help?: TypeWithI18N
+  label: TypeWithI18N
+  min?: number
+  max?: number
+  name: string
+  precision?: number
+  required: false
+  type: string
+  use_template?: string
+  options?: string[]
+  tagPlaceholder?: TypeWithI18N
+}
+
+export type ModelLoadBalancingConfigEntry = {
+  /** model balancing config entry id */
+  id?: string
+  /** is config entry enabled */
+  enabled?: boolean
+  /** config entry name */
+  name: string
+  /** model balancing credential */
+  credentials: Record<string, string | undefined | boolean>
+  /** is config entry currently removed from Round-robin queue */
+  in_cooldown?: boolean
+  /** cooldown time (in seconds) */
+  ttl?: number
+}
+
+export type ModelLoadBalancingConfig = {
+  enabled: boolean
+  configs: ModelLoadBalancingConfigEntry[]
+}

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/hooks.ts

@@ -0,0 +1,235 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import useSWR, { useSWRConfig } from 'swr'
+import { useContext } from 'use-context-selector'
+import type {
+  CustomConfigurationModelFixedFields,
+  DefaultModel,
+  DefaultModelResponse,
+  Model,
+  ModelTypeEnum,
+} from './declarations'
+import {
+  ConfigurationMethodEnum,
+  ModelStatusEnum,
+} from './declarations'
+import I18n from '@/context/i18n'
+import {
+  fetchDefaultModal,
+  fetchModelList,
+  fetchModelProviderCredentials,
+  fetchModelProviders,
+  getPayUrl,
+} from '@/service/common'
+import { useProviderContext } from '@/context/provider-context'
+
+type UseDefaultModelAndModelList = (
+  defaultModel: DefaultModelResponse | undefined,
+  modelList: Model[],
+) => [DefaultModel | undefined, (model: DefaultModel) => void]
+export const useSystemDefaultModelAndModelList: UseDefaultModelAndModelList = (
+  defaultModel,
+  modelList,
+) => {
+  const currentDefaultModel = useMemo(() => {
+    const currentProvider = modelList.find(provider => provider.provider === defaultModel?.provider.provider)
+    const currentModel = currentProvider?.models.find(model => model.model === defaultModel?.model)
+    const currentDefaultModel = currentProvider && currentModel && {
+      model: currentModel.model,
+      provider: currentProvider.provider,
+    }
+
+    return currentDefaultModel
+  }, [defaultModel, modelList])
+  const [defaultModelState, setDefaultModelState] = useState<DefaultModel | undefined>(currentDefaultModel)
+  const handleDefaultModelChange = useCallback((model: DefaultModel) => {
+    setDefaultModelState(model)
+  }, [])
+  useEffect(() => {
+    setDefaultModelState(currentDefaultModel)
+  }, [currentDefaultModel])
+
+  return [defaultModelState, handleDefaultModelChange]
+}
+
+export const useLanguage = () => {
+  const { locale } = useContext(I18n)
+  return locale.replace('-', '_')
+}
+
+export const useProviderCredentialsAndLoadBalancing = (
+  provider: string,
+  configurationMethod: ConfigurationMethodEnum,
+  configured?: boolean,
+  currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
+) => {
+  const { data: predefinedFormSchemasValue, mutate: mutatePredefined } = useSWR(
+    (configurationMethod === ConfigurationMethodEnum.predefinedModel && configured)
+      ? `/workspaces/current/model-providers/${provider}/credentials`
+      : null,
+    fetchModelProviderCredentials,
+  )
+  const { data: customFormSchemasValue, mutate: mutateCustomized } = useSWR(
+    (configurationMethod === ConfigurationMethodEnum.customizableModel && currentCustomConfigurationModelFixedFields)
+      ? `/workspaces/current/model-providers/${provider}/models/credentials?model=${currentCustomConfigurationModelFixedFields?.__model_name}&model_type=${currentCustomConfigurationModelFixedFields?.__model_type}`
+      : null,
+    fetchModelProviderCredentials,
+  )
+
+  const credentials = useMemo(() => {
+    return configurationMethod === ConfigurationMethodEnum.predefinedModel
+      ? predefinedFormSchemasValue?.credentials
+      : customFormSchemasValue?.credentials
+        ? {
+          ...customFormSchemasValue?.credentials,
+          ...currentCustomConfigurationModelFixedFields,
+        }
+        : undefined
+  }, [
+    configurationMethod,
+    currentCustomConfigurationModelFixedFields,
+    customFormSchemasValue?.credentials,
+    predefinedFormSchemasValue?.credentials,
+  ])
+
+  const mutate = useMemo(() => () => {
+    mutatePredefined()
+    mutateCustomized()
+  }, [mutateCustomized, mutatePredefined])
+
+  return {
+    credentials,
+    loadBalancing: (configurationMethod === ConfigurationMethodEnum.predefinedModel
+      ? predefinedFormSchemasValue
+      : customFormSchemasValue
+    )?.load_balancing,
+    mutate,
+  }
+  // as ([Record<string, string | boolean | undefined> | undefined, ModelLoadBalancingConfig | undefined])
+}
+
+export const useModelList = (type: ModelTypeEnum) => {
+  const { data, mutate, isLoading } = useSWR(`/workspaces/current/models/model-types/${type}`, fetchModelList)
+
+  return {
+    data: data?.data || [],
+    mutate,
+    isLoading,
+  }
+}
+
+export const useDefaultModel = (type: ModelTypeEnum) => {
+  const { data, mutate, isLoading } = useSWR(`/workspaces/current/default-model?model_type=${type}`, fetchDefaultModal)
+
+  return {
+    data: data?.data,
+    mutate,
+    isLoading,
+  }
+}
+
+export const useCurrentProviderAndModel = (modelList: Model[], defaultModel?: DefaultModel) => {
+  const currentProvider = modelList.find(provider => provider.provider === defaultModel?.provider)
+  const currentModel = currentProvider?.models.find(model => model.model === defaultModel?.model)
+
+  return {
+    currentProvider,
+    currentModel,
+  }
+}
+
+export const useTextGenerationCurrentProviderAndModelAndModelList = (defaultModel?: DefaultModel) => {
+  const { textGenerationModelList } = useProviderContext()
+  const activeTextGenerationModelList = textGenerationModelList.filter(model => model.status === ModelStatusEnum.active)
+  const {
+    currentProvider,
+    currentModel,
+  } = useCurrentProviderAndModel(textGenerationModelList, defaultModel)
+
+  return {
+    currentProvider,
+    currentModel,
+    textGenerationModelList,
+    activeTextGenerationModelList,
+  }
+}
+
+export const useModelListAndDefaultModel = (type: ModelTypeEnum) => {
+  const { data: modelList } = useModelList(type)
+  const { data: defaultModel } = useDefaultModel(type)
+
+  return {
+    modelList,
+    defaultModel,
+  }
+}
+
+export const useModelListAndDefaultModelAndCurrentProviderAndModel = (type: ModelTypeEnum) => {
+  const { modelList, defaultModel } = useModelListAndDefaultModel(type)
+  const { currentProvider, currentModel } = useCurrentProviderAndModel(
+    modelList,
+    { provider: defaultModel?.provider.provider || '', model: defaultModel?.model || '' },
+  )
+
+  return {
+    modelList,
+    defaultModel,
+    currentProvider,
+    currentModel,
+  }
+}
+
+export const useUpdateModelList = () => {
+  const { mutate } = useSWRConfig()
+
+  const updateModelList = useCallback((type: ModelTypeEnum) => {
+    mutate(`/workspaces/current/models/model-types/${type}`)
+  }, [mutate])
+
+  return updateModelList
+}
+
+export const useAnthropicBuyQuota = () => {
+  const [loading, setLoading] = useState(false)
+
+  const handleGetPayUrl = async () => {
+    if (loading)
+      return
+
+    setLoading(true)
+    try {
+      const res = await getPayUrl('/workspaces/current/model-providers/anthropic/checkout-url')
+
+      window.location.href = res.url
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+
+  return handleGetPayUrl
+}
+
+export const useModelProviders = () => {
+  const { data: providersData, mutate, isLoading } = useSWR('/workspaces/current/model-providers', fetchModelProviders)
+
+  return {
+    data: providersData?.data || [],
+    mutate,
+    isLoading,
+  }
+}
+
+export const useUpdateModelProviders = () => {
+  const { mutate } = useSWRConfig()
+
+  const updateModelProviders = useCallback(() => {
+    mutate('/workspaces/current/model-providers')
+  }, [mutate])
+
+  return updateModelProviders
+}

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

@@ -0,0 +1,152 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import SystemModelSelector from './system-model-selector'
+import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
+import ProviderCard from './provider-card'
+import type {
+  CustomConfigurationModelFixedFields,
+  ModelProvider,
+} from './declarations'
+import {
+  ConfigurationMethodEnum,
+  CustomConfigurationStatusEnum,
+  ModelTypeEnum,
+} from './declarations'
+import {
+  useDefaultModel,
+  useUpdateModelList,
+  useUpdateModelProviders,
+} from './hooks'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import { useProviderContext } from '@/context/provider-context'
+import { useModalContextSelector } from '@/context/modal-context'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+
+const ModelProviderPage = () => {
+  const { t } = useTranslation()
+  const { eventEmitter } = useEventEmitterContextContext()
+  const updateModelProviders = useUpdateModelProviders()
+  const updateModelList = useUpdateModelList()
+  const { data: textGenerationDefaultModel } = useDefaultModel(ModelTypeEnum.textGeneration)
+  const { data: embeddingsDefaultModel } = useDefaultModel(ModelTypeEnum.textEmbedding)
+  const { data: rerankDefaultModel } = useDefaultModel(ModelTypeEnum.rerank)
+  const { data: speech2textDefaultModel } = useDefaultModel(ModelTypeEnum.speech2text)
+  const { data: ttsDefaultModel } = useDefaultModel(ModelTypeEnum.tts)
+  const { modelProviders: providers } = useProviderContext()
+  const setShowModelModal = useModalContextSelector(state => state.setShowModelModal)
+  const defaultModelNotConfigured = !textGenerationDefaultModel && !embeddingsDefaultModel && !speech2textDefaultModel && !rerankDefaultModel && !ttsDefaultModel
+  const [configuredProviders, notConfiguredProviders] = useMemo(() => {
+    const configuredProviders: ModelProvider[] = []
+    const notConfiguredProviders: ModelProvider[] = []
+
+    providers.forEach((provider) => {
+      if (
+        provider.custom_configuration.status === CustomConfigurationStatusEnum.active
+        || (
+          provider.system_configuration.enabled === true
+          && provider.system_configuration.quota_configurations.find(item => item.quota_type === provider.system_configuration.current_quota_type)
+        )
+      )
+        configuredProviders.push(provider)
+      else
+        notConfiguredProviders.push(provider)
+    })
+
+    return [configuredProviders, notConfiguredProviders]
+  }, [providers])
+
+  const handleOpenModal = (
+    provider: ModelProvider,
+    configurateMethod: ConfigurationMethodEnum,
+    CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
+  ) => {
+    setShowModelModal({
+      payload: {
+        currentProvider: provider,
+        currentConfigurationMethod: configurateMethod,
+        currentCustomConfigurationModelFixedFields: CustomConfigurationModelFixedFields,
+      },
+      onSaveCallback: () => {
+        updateModelProviders()
+
+        if (configurateMethod === ConfigurationMethodEnum.predefinedModel) {
+          provider.supported_model_types.forEach((type) => {
+            updateModelList(type)
+          })
+        }
+
+        if (configurateMethod === ConfigurationMethodEnum.customizableModel && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
+          eventEmitter?.emit({
+            type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
+            payload: provider.provider,
+          } as any)
+
+          if (CustomConfigurationModelFixedFields?.__model_type)
+            updateModelList(CustomConfigurationModelFixedFields?.__model_type)
+        }
+      },
+    })
+  }
+
+  return (
+    <div className='relative pt-1 -mt-2'>
+      <div className={`flex items-center justify-between mb-2 h-8 ${defaultModelNotConfigured && 'px-3 bg-[#FFFAEB] rounded-lg border border-[#FEF0C7]'}`}>
+        {
+          defaultModelNotConfigured
+            ? (
+              <div className='flex items-center text-xs font-medium text-gray-700'>
+                <AlertTriangle className='mr-1 w-3 h-3 text-[#F79009]' />
+                {t('common.modelProvider.notConfigured')}
+              </div>
+            )
+            : <div className='text-sm font-medium text-gray-800'>{t('common.modelProvider.models')}</div>
+        }
+        <SystemModelSelector
+          textGenerationDefaultModel={textGenerationDefaultModel}
+          embeddingsDefaultModel={embeddingsDefaultModel}
+          rerankDefaultModel={rerankDefaultModel}
+          speech2textDefaultModel={speech2textDefaultModel}
+          ttsDefaultModel={ttsDefaultModel}
+        />
+      </div>
+      {
+        !!configuredProviders?.length && (
+          <div className='pb-3'>
+            {
+              configuredProviders?.map(provider => (
+                <ProviderAddedCard
+                  key={provider.provider}
+                  provider={provider}
+                  onOpenModal={(configurateMethod: ConfigurationMethodEnum, currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields) => handleOpenModal(provider, configurateMethod, currentCustomConfigurationModelFixedFields)}
+                />
+              ))
+            }
+          </div>
+        )
+      }
+      {
+        !!notConfiguredProviders?.length && (
+          <>
+            <div className='flex items-center mb-2 text-xs font-semibold text-gray-500'>
+              + {t('common.modelProvider.addMoreModelProvider')}
+              <span className='grow ml-3 h-[1px] bg-gradient-to-r from-[#f3f4f6]' />
+            </div>
+            <div className='grid grid-cols-3 gap-2'>
+              {
+                notConfiguredProviders?.map(provider => (
+                  <ProviderCard
+                    key={provider.provider}
+                    provider={provider}
+                    onOpenModal={(configurateMethod: ConfigurationMethodEnum) => handleOpenModal(provider, configurateMethod)}
+                  />
+                ))
+              }
+            </div>
+          </>
+        )
+      }
+    </div>
+  )
+}
+
+export default ModelProviderPage

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

@@ -0,0 +1,22 @@
+import type { FC, ReactNode } from 'react'
+import classNames from '@/utils/classnames'
+
+type ModelBadgeProps = {
+  className?: string
+  children?: ReactNode
+}
+const ModelBadge: FC<ModelBadgeProps> = ({
+  className,
+  children,
+}) => {
+  return (
+    <div className={classNames(
+      'flex items-center px-1 h-[18px] rounded-[5px] border border-divider-deep system-2xs-medium-uppercase text-text-tertiary cursor-default',
+      className,
+    )}>
+      {children}
+    </div>
+  )
+}
+
+export default ModelBadge

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

@@ -0,0 +1,45 @@
+import type { FC } from 'react'
+import type {
+  Model,
+  ModelProvider,
+} from '../declarations'
+import { useLanguage } from '../hooks'
+import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
+import { OpenaiViolet } from '@/app/components/base/icons/src/public/llm'
+
+type ModelIconProps = {
+  provider?: Model | ModelProvider
+  modelName?: string
+  className?: string
+}
+const ModelIcon: FC<ModelIconProps> = ({
+  provider,
+  className,
+  modelName,
+}) => {
+  const language = useLanguage()
+
+  if (provider?.provider === 'openai' && (modelName?.startsWith('gpt-4') || modelName?.includes('4o')))
+    return <OpenaiViolet className={`w-4 h-4 ${className}`}/>
+
+  if (provider?.icon_small) {
+    return (
+      <img
+        alt='model-icon'
+        src={`${provider.icon_small[language] || provider.icon_small.en_US}`}
+        className={`w-4 h-4 ${className}`}
+      />
+    )
+  }
+
+  return (
+    <div className={`
+      flex items-center justify-center w-6 h-6 rounded border-[0.5px] border-black/5 bg-gray-50
+      ${className}
+    `}>
+      <CubeOutline className='w-4 h-4 text-gray-400' />
+    </div>
+  )
+}
+
+export default ModelIcon

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx

@@ -0,0 +1,270 @@
+import { useState } from 'react'
+import type { FC } from 'react'
+import { ValidatingTip } from '../../key-validator/ValidateStatus'
+import type {
+  CredentialFormSchema,
+  CredentialFormSchemaNumberInput,
+  CredentialFormSchemaRadio,
+  CredentialFormSchemaSecretInput,
+  CredentialFormSchemaSelect,
+  CredentialFormSchemaTextInput,
+  FormValue,
+} from '../declarations'
+import { FormTypeEnum } from '../declarations'
+import { useLanguage } from '../hooks'
+import Input from './Input'
+import cn from '@/utils/classnames'
+import { SimpleSelect } from '@/app/components/base/select'
+import Tooltip from '@/app/components/base/tooltip'
+import Radio from '@/app/components/base/radio'
+type FormProps = {
+  className?: string
+  itemClassName?: string
+  fieldLabelClassName?: string
+  value: FormValue
+  onChange: (val: FormValue) => void
+  formSchemas: CredentialFormSchema[]
+  validating: boolean
+  validatedSuccess?: boolean
+  showOnVariableMap: Record<string, string[]>
+  isEditMode: boolean
+  readonly?: boolean
+  inputClassName?: string
+  isShowDefaultValue?: boolean
+  fieldMoreInfo?: (payload: CredentialFormSchema) => JSX.Element | null
+}
+
+const Form: FC<FormProps> = ({
+  className,
+  itemClassName,
+  fieldLabelClassName,
+  value,
+  onChange,
+  formSchemas,
+  validating,
+  validatedSuccess,
+  showOnVariableMap,
+  isEditMode,
+  readonly,
+  inputClassName,
+  isShowDefaultValue = false,
+  fieldMoreInfo,
+}) => {
+  const language = useLanguage()
+  const [changeKey, setChangeKey] = useState('')
+
+  const handleFormChange = (key: string, val: string | boolean) => {
+    if (isEditMode && (key === '__model_type' || key === '__model_name'))
+      return
+
+    setChangeKey(key)
+    const shouldClearVariable: Record<string, string | undefined> = {}
+    if (showOnVariableMap[key]?.length) {
+      showOnVariableMap[key].forEach((clearVariable) => {
+        shouldClearVariable[clearVariable] = undefined
+      })
+    }
+    onChange({ ...value, [key]: val, ...shouldClearVariable })
+  }
+
+  const renderField = (formSchema: CredentialFormSchema) => {
+    const tooltip = formSchema.tooltip
+    const tooltipContent = (tooltip && (
+      <Tooltip
+        popupContent={
+          <div className='w-[200px]'>
+            {tooltip[language] || tooltip.en_US}
+          </div>}
+        triggerClassName='ml-1 w-4 h-4'
+        asChild={false}
+      />
+    ))
+    if (formSchema.type === FormTypeEnum.textInput || formSchema.type === FormTypeEnum.secretInput || formSchema.type === FormTypeEnum.textNumber) {
+      const {
+        variable,
+        label,
+        placeholder,
+        required,
+        show_on,
+      } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
+
+      if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
+        return null
+
+      const disabled = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
+            {label[language] || label.en_US}
+            {
+              required && (
+                <span className='ml-1 text-red-500'>*</span>
+              )
+            }
+            {tooltipContent}
+          </div>
+          <Input
+            className={cn(inputClassName, `${disabled && 'cursor-not-allowed opacity-60'}`)}
+            value={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]}
+            onChange={val => handleFormChange(variable, val)}
+            validated={validatedSuccess}
+            placeholder={placeholder?.[language] || placeholder?.en_US}
+            disabled={disabled}
+            type={formSchema.type === FormTypeEnum.textNumber ? 'number' : 'text'}
+            {...(formSchema.type === FormTypeEnum.textNumber ? { min: (formSchema as CredentialFormSchemaNumberInput).min, max: (formSchema as CredentialFormSchemaNumberInput).max } : {})}
+          />
+          {fieldMoreInfo?.(formSchema)}
+          {validating && changeKey === variable && <ValidatingTip />}
+        </div>
+      )
+    }
+
+    if (formSchema.type === FormTypeEnum.radio) {
+      const {
+        options,
+        variable,
+        label,
+        show_on,
+        required,
+      } = formSchema as CredentialFormSchemaRadio
+
+      if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
+        return null
+
+      const disabled = isEditMode && (variable === '__model_type' || variable === '__model_name')
+
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
+            {label[language] || label.en_US}
+            {
+              required && (
+                <span className='ml-1 text-red-500'>*</span>
+              )
+            }
+            {tooltipContent}
+          </div>
+          <div className={`grid grid-cols-${options?.length} gap-3`}>
+            {
+              options.filter((option) => {
+                if (option.show_on.length)
+                  return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
+
+                return true
+              }).map(option => (
+                <div
+                  className={`
+                    flex items-center px-3 py-2 rounded-lg border border-gray-100 bg-gray-25 cursor-pointer
+                    ${value[variable] === option.value && 'bg-white border-[1.5px] border-primary-400 shadow-sm'}
+                    ${disabled && '!cursor-not-allowed opacity-60'}
+                  `}
+                  onClick={() => handleFormChange(variable, option.value)}
+                  key={`${variable}-${option.value}`}
+                >
+                  <div className={`
+                    flex justify-center items-center mr-2 w-4 h-4 border border-gray-300 rounded-full
+                    ${value[variable] === option.value && 'border-[5px] border-primary-600'}
+                  `} />
+                  <div className='text-sm text-gray-900'>{option.label[language] || option.label.en_US}</div>
+                </div>
+              ))
+            }
+          </div>
+          {fieldMoreInfo?.(formSchema)}
+          {validating && changeKey === variable && <ValidatingTip />}
+        </div>
+      )
+    }
+
+    if (formSchema.type === 'select') {
+      const {
+        options,
+        variable,
+        label,
+        show_on,
+        required,
+        placeholder,
+      } = formSchema as CredentialFormSchemaSelect
+
+      if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
+        return null
+
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
+            {label[language] || label.en_US}
+
+            {
+              required && (
+                <span className='ml-1 text-red-500'>*</span>
+              )
+            }
+            {tooltipContent}
+          </div>
+          <SimpleSelect
+            className={cn(inputClassName)}
+            disabled={readonly}
+            defaultValue={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]}
+            items={options.filter((option) => {
+              if (option.show_on.length)
+                return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
+
+              return true
+            }).map(option => ({ value: option.value, name: option.label[language] || option.label.en_US }))}
+            onSelect={item => handleFormChange(variable, item.value as string)}
+            placeholder={placeholder?.[language] || placeholder?.en_US}
+          />
+          {fieldMoreInfo?.(formSchema)}
+          {validating && changeKey === variable && <ValidatingTip />}
+        </div>
+      )
+    }
+
+    if (formSchema.type === 'boolean') {
+      const {
+        variable,
+        label,
+        show_on,
+        required,
+      } = formSchema as CredentialFormSchemaRadio
+
+      if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
+        return null
+
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className='flex items-center justify-between py-2 text-sm text-gray-900'>
+            <div className='flex items-center space-x-2'>
+              <span className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>{label[language] || label.en_US}</span>
+              {
+                required && (
+                  <span className='ml-1 text-red-500'>*</span>
+                )
+              }
+              {tooltipContent}
+            </div>
+            <Radio.Group
+              className='flex items-center'
+              value={value[variable] === null ? undefined : (value[variable] ? 1 : 0)}
+              onChange={val => handleFormChange(variable, val === 1)}
+            >
+              <Radio value={1} className='!mr-1'>True</Radio>
+              <Radio value={0}>False</Radio>
+            </Radio.Group>
+          </div>
+          {fieldMoreInfo?.(formSchema)}
+        </div>
+      )
+    }
+  }
+
+  return (
+    <div className={className}>
+      {
+        formSchemas.map(formSchema => renderField(formSchema))
+      }
+    </div>
+  )
+}
+
+export default Form

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx

@@ -0,0 +1,73 @@
+import type { FC } from 'react'
+import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
+
+type InputProps = {
+  value?: string
+  onChange: (v: string) => void
+  onFocus?: () => void
+  placeholder?: string
+  validated?: boolean
+  className?: string
+  disabled?: boolean
+  type?: string
+  min?: number
+  max?: number
+}
+const Input: FC<InputProps> = ({
+  value,
+  onChange,
+  onFocus,
+  placeholder,
+  validated,
+  className,
+  disabled,
+  type = 'text',
+  min,
+  max,
+}) => {
+  const toLimit = (v: string) => {
+    const minNum = parseFloat(`${min}`)
+    const maxNum = parseFloat(`${max}`)
+    if (!isNaN(minNum) && parseFloat(v) < minNum) {
+      onChange(`${min}`)
+      return
+    }
+
+    if (!isNaN(maxNum) && parseFloat(v) > maxNum)
+      onChange(`${max}`)
+  }
+  return (
+    <div className='relative'>
+      <input
+        tabIndex={0}
+        className={`
+          block px-3 w-full h-9 bg-gray-100 text-sm rounded-lg border border-transparent
+          appearance-none outline-none caret-primary-600
+          hover:border-[rgba(0,0,0,0.08)] hover:bg-gray-50
+          focus:bg-white focus:border-gray-300 focus:shadow-xs
+          placeholder:text-sm placeholder:text-gray-400
+          ${validated && 'pr-[30px]'}
+          ${className}
+        `}
+        placeholder={placeholder || ''}
+        onChange={e => onChange(e.target.value)}
+        onBlur={e => toLimit(e.target.value)}
+        onFocus={onFocus}
+        value={value}
+        disabled={disabled}
+        type={type}
+        min={min}
+        max={max}
+      />
+      {
+        validated && (
+          <div className='absolute top-2.5 right-2.5'>
+            <CheckCircle className='w-4 h-4 text-[#039855]' />
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default Input

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

@@ -0,0 +1,402 @@
+import type { FC } from 'react'
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiErrorWarningFill,
+} from '@remixicon/react'
+import type {
+  CredentialFormSchema,
+  CredentialFormSchemaRadio,
+  CredentialFormSchemaSelect,
+  CustomConfigurationModelFixedFields,
+  FormValue,
+  ModelLoadBalancingConfig,
+  ModelLoadBalancingConfigEntry,
+  ModelProvider,
+} from '../declarations'
+import {
+  ConfigurationMethodEnum,
+  CustomConfigurationStatusEnum,
+  FormTypeEnum,
+} from '../declarations'
+import {
+  genModelNameFormSchema,
+  genModelTypeFormSchema,
+  removeCredentials,
+  saveCredentials,
+} from '../utils'
+import {
+  useLanguage,
+  useProviderCredentialsAndLoadBalancing,
+} from '../hooks'
+import ProviderIcon from '../provider-icon'
+import { useValidate } from '../../key-validator/hooks'
+import { ValidatedStatus } from '../../key-validator/declarations'
+import ModelLoadBalancingConfigs from '../provider-added-card/model-load-balancing-configs'
+import Form from './Form'
+import Button from '@/app/components/base/button'
+import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+} from '@/app/components/base/portal-to-follow-elem'
+import { useToastContext } from '@/app/components/base/toast'
+import Confirm from '@/app/components/base/confirm'
+import { useAppContext } from '@/context/app-context'
+
+type ModelModalProps = {
+  provider: ModelProvider
+  configurateMethod: ConfigurationMethodEnum
+  currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields
+  onCancel: () => void
+  onSave: () => void
+}
+
+const ModelModal: FC<ModelModalProps> = ({
+  provider,
+  configurateMethod,
+  currentCustomConfigurationModelFixedFields,
+  onCancel,
+  onSave,
+}) => {
+  const providerFormSchemaPredefined = configurateMethod === ConfigurationMethodEnum.predefinedModel
+  const {
+    credentials: formSchemasValue,
+    loadBalancing: originalConfig,
+    mutate,
+  } = useProviderCredentialsAndLoadBalancing(
+    provider.provider,
+    configurateMethod,
+    providerFormSchemaPredefined && provider.custom_configuration.status === CustomConfigurationStatusEnum.active,
+    currentCustomConfigurationModelFixedFields,
+  )
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const isEditMode = !!formSchemasValue && isCurrentWorkspaceManager
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const language = useLanguage()
+  const [loading, setLoading] = useState(false)
+  const [showConfirm, setShowConfirm] = useState(false)
+
+  const [draftConfig, setDraftConfig] = useState<ModelLoadBalancingConfig>()
+  const originalConfigMap = useMemo(() => {
+    if (!originalConfig)
+      return {}
+    return originalConfig?.configs.reduce((prev, config) => {
+      if (config.id)
+        prev[config.id] = config
+      return prev
+    }, {} as Record<string, ModelLoadBalancingConfigEntry>)
+  }, [originalConfig])
+  useEffect(() => {
+    if (originalConfig && !draftConfig)
+      setDraftConfig(originalConfig)
+  }, [draftConfig, originalConfig])
+
+  const formSchemas = useMemo(() => {
+    return providerFormSchemaPredefined
+      ? provider.provider_credential_schema.credential_form_schemas
+      : [
+        genModelTypeFormSchema(provider.supported_model_types),
+        genModelNameFormSchema(provider.model_credential_schema?.model),
+        ...(draftConfig?.enabled ? [] : provider.model_credential_schema.credential_form_schemas),
+      ]
+  }, [
+    providerFormSchemaPredefined,
+    provider.provider_credential_schema?.credential_form_schemas,
+    provider.supported_model_types,
+    provider.model_credential_schema?.credential_form_schemas,
+    provider.model_credential_schema?.model,
+    draftConfig?.enabled,
+  ])
+  const [
+    requiredFormSchemas,
+    defaultFormSchemaValue,
+    showOnVariableMap,
+  ] = useMemo(() => {
+    const requiredFormSchemas: CredentialFormSchema[] = []
+    const defaultFormSchemaValue: Record<string, string | number> = {}
+    const showOnVariableMap: Record<string, string[]> = {}
+
+    formSchemas.forEach((formSchema) => {
+      if (formSchema.required)
+        requiredFormSchemas.push(formSchema)
+
+      if (formSchema.default)
+        defaultFormSchemaValue[formSchema.variable] = formSchema.default
+
+      if (formSchema.show_on.length) {
+        formSchema.show_on.forEach((showOnItem) => {
+          if (!showOnVariableMap[showOnItem.variable])
+            showOnVariableMap[showOnItem.variable] = []
+
+          if (!showOnVariableMap[showOnItem.variable].includes(formSchema.variable))
+            showOnVariableMap[showOnItem.variable].push(formSchema.variable)
+        })
+      }
+
+      if (formSchema.type === FormTypeEnum.select || formSchema.type === FormTypeEnum.radio) {
+        (formSchema as (CredentialFormSchemaRadio | CredentialFormSchemaSelect)).options.forEach((option) => {
+          if (option.show_on.length) {
+            option.show_on.forEach((showOnItem) => {
+              if (!showOnVariableMap[showOnItem.variable])
+                showOnVariableMap[showOnItem.variable] = []
+
+              if (!showOnVariableMap[showOnItem.variable].includes(formSchema.variable))
+                showOnVariableMap[showOnItem.variable].push(formSchema.variable)
+            })
+          }
+        })
+      }
+    })
+
+    return [
+      requiredFormSchemas,
+      defaultFormSchemaValue,
+      showOnVariableMap,
+    ]
+  }, [formSchemas])
+  const initialFormSchemasValue: Record<string, string | number> = useMemo(() => {
+    return {
+      ...defaultFormSchemaValue,
+      ...formSchemasValue,
+    } as unknown as Record<string, string | number>
+  }, [formSchemasValue, defaultFormSchemaValue])
+  const [value, setValue] = useState(initialFormSchemasValue)
+  useEffect(() => {
+    setValue(initialFormSchemasValue)
+  }, [initialFormSchemasValue])
+  const [_, validating, validatedStatusState] = useValidate(value)
+  const filteredRequiredFormSchemas = requiredFormSchemas.filter((requiredFormSchema) => {
+    if (requiredFormSchema.show_on.length && requiredFormSchema.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
+      return true
+
+    if (!requiredFormSchema.show_on.length)
+      return true
+
+    return false
+  })
+
+  const handleValueChange = (v: FormValue) => {
+    setValue(v)
+  }
+
+  const extendedSecretFormSchemas = useMemo(
+    () =>
+      (providerFormSchemaPredefined
+        ? provider.provider_credential_schema.credential_form_schemas
+        : [
+          genModelTypeFormSchema(provider.supported_model_types),
+          genModelNameFormSchema(provider.model_credential_schema?.model),
+          ...provider.model_credential_schema.credential_form_schemas,
+        ]).filter(({ type }) => type === FormTypeEnum.secretInput),
+    [
+      provider.model_credential_schema?.credential_form_schemas,
+      provider.model_credential_schema?.model,
+      provider.provider_credential_schema?.credential_form_schemas,
+      provider.supported_model_types,
+      providerFormSchemaPredefined,
+    ],
+  )
+
+  const encodeSecretValues = useCallback((v: FormValue) => {
+    const result = { ...v }
+    extendedSecretFormSchemas.forEach(({ variable }) => {
+      if (result[variable] === formSchemasValue?.[variable] && result[variable] !== undefined)
+        result[variable] = '[__HIDDEN__]'
+    })
+    return result
+  }, [extendedSecretFormSchemas, formSchemasValue])
+
+  const encodeConfigEntrySecretValues = useCallback((entry: ModelLoadBalancingConfigEntry) => {
+    const result = { ...entry }
+    extendedSecretFormSchemas.forEach(({ variable }) => {
+      if (entry.id && result.credentials[variable] === originalConfigMap[entry.id]?.credentials?.[variable])
+        result.credentials[variable] = '[__HIDDEN__]'
+    })
+    return result
+  }, [extendedSecretFormSchemas, originalConfigMap])
+
+  const handleSave = async () => {
+    try {
+      setLoading(true)
+      const res = await saveCredentials(
+        providerFormSchemaPredefined,
+        provider.provider,
+        encodeSecretValues(value),
+        {
+          ...draftConfig,
+          enabled: Boolean(draftConfig?.enabled),
+          configs: draftConfig?.configs.map(encodeConfigEntrySecretValues) || [],
+        },
+      )
+      if (res.result === 'success') {
+        notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+        mutate()
+        onSave()
+        onCancel()
+      }
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+
+  const handleRemove = async () => {
+    try {
+      setLoading(true)
+
+      const res = await removeCredentials(
+        providerFormSchemaPredefined,
+        provider.provider,
+        value,
+      )
+      if (res.result === 'success') {
+        notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+        mutate()
+        onSave()
+        onCancel()
+      }
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+
+  const renderTitlePrefix = () => {
+    const prefix = configurateMethod === ConfigurationMethodEnum.customizableModel ? t('common.operation.add') : t('common.operation.setup')
+
+    return `${prefix} ${provider.label[language] || provider.label.en_US}`
+  }
+
+  return (
+    <PortalToFollowElem open>
+      <PortalToFollowElemContent className='w-full h-full z-[60]'>
+        <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
+          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
+            <div className='px-8 pt-8'>
+              <div className='flex justify-between items-center mb-2'>
+                <div className='text-xl font-semibold text-gray-900'>{renderTitlePrefix()}</div>
+                <ProviderIcon provider={provider} />
+              </div>
+
+              <Form
+                value={value}
+                onChange={handleValueChange}
+                formSchemas={formSchemas}
+                validating={validating}
+                validatedSuccess={validatedStatusState.status === ValidatedStatus.Success}
+                showOnVariableMap={showOnVariableMap}
+                isEditMode={isEditMode}
+              />
+
+              <div className='mt-1 mb-4 border-t-[0.5px] border-t-gray-100' />
+              <ModelLoadBalancingConfigs withSwitch {...{
+                draftConfig,
+                setDraftConfig,
+                provider,
+                currentCustomConfigurationModelFixedFields,
+                configurationMethod: configurateMethod,
+              }} />
+
+              <div className='sticky bottom-0 flex justify-between items-center mt-2 -mx-2 pt-4 px-2 pb-6 flex-wrap gap-y-2 bg-white'>
+                {
+                  (provider.help && (provider.help.title || provider.help.url))
+                    ? (
+                      <a
+                        href={provider.help?.url[language] || provider.help?.url.en_US}
+                        target='_blank' rel='noopener noreferrer'
+                        className='inline-flex items-center text-xs text-primary-600'
+                        onClick={e => !provider.help.url && e.preventDefault()}
+                      >
+                        {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
+                        <LinkExternal02 className='ml-1 w-3 h-3' />
+                      </a>
+                    )
+                    : <div />
+                }
+                <div>
+                  {
+                    isEditMode && (
+                      <Button
+                        size='large'
+                        className='mr-2 text-[#D92D20]'
+                        onClick={() => setShowConfirm(true)}
+                      >
+                        {t('common.operation.remove')}
+                      </Button>
+                    )
+                  }
+                  <Button
+                    size='large'
+                    className='mr-2'
+                    onClick={onCancel}
+                  >
+                    {t('common.operation.cancel')}
+                  </Button>
+                  <Button
+                    size='large'
+                    variant='primary'
+                    onClick={handleSave}
+                    disabled={
+                      loading
+                      || filteredRequiredFormSchemas.some(item => value[item.variable] === undefined)
+                      || (draftConfig?.enabled && (draftConfig?.configs.filter(config => config.enabled).length ?? 0) < 2)
+                    }
+
+                  >
+                    {t('common.operation.save')}
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className='border-t-[0.5px] border-t-black/5'>
+              {
+                (validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
+                  ? (
+                    <div className='flex px-[10px] py-3 bg-[#FEF3F2] text-xs text-[#D92D20]'>
+                      <RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' />
+                      {validatedStatusState.message}
+                    </div>
+                  )
+                  : (
+                    <div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
+                      <Lock01 className='mr-1 w-3 h-3 text-gray-500' />
+                      {t('common.modelProvider.encrypted.front')}
+                      <a
+                        className='text-primary-600 mx-1'
+                        target='_blank' rel='noopener noreferrer'
+                        href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
+                      >
+                        PKCS1_OAEP
+                      </a>
+                      {t('common.modelProvider.encrypted.back')}
+                    </div>
+                  )
+              }
+            </div>
+          </div>
+          {
+            showConfirm && (
+              <Confirm
+                title={t('common.modelProvider.confirmDelete')}
+                isShow={showConfirm}
+                onCancel={() => setShowConfirm(false)}
+                onConfirm={handleRemove}
+              />
+            )
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(ModelModal)

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx

@@ -0,0 +1,348 @@
+import type { FC } from 'react'
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiErrorWarningFill,
+} from '@remixicon/react'
+import type {
+  CredentialFormSchema,
+  CredentialFormSchemaRadio,
+  CredentialFormSchemaSelect,
+  CredentialFormSchemaTextInput,
+  CustomConfigurationModelFixedFields,
+  FormValue,
+  ModelLoadBalancingConfigEntry,
+  ModelProvider,
+} from '../declarations'
+import {
+  ConfigurationMethodEnum,
+  FormTypeEnum,
+} from '../declarations'
+
+import {
+  useLanguage,
+} from '../hooks'
+import { useValidate } from '../../key-validator/hooks'
+import { ValidatedStatus } from '../../key-validator/declarations'
+import { validateLoadBalancingCredentials } from '../utils'
+import Form from './Form'
+import Button from '@/app/components/base/button'
+import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+} from '@/app/components/base/portal-to-follow-elem'
+import { useToastContext } from '@/app/components/base/toast'
+import Confirm from '@/app/components/base/confirm'
+
+type ModelModalProps = {
+  provider: ModelProvider
+  configurationMethod: ConfigurationMethodEnum
+  currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields
+  entry?: ModelLoadBalancingConfigEntry
+  onCancel: () => void
+  onSave: (entry: ModelLoadBalancingConfigEntry) => void
+  onRemove: () => void
+}
+
+const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
+  provider,
+  configurationMethod,
+  currentCustomConfigurationModelFixedFields,
+  entry,
+  onCancel,
+  onSave,
+  onRemove,
+}) => {
+  const providerFormSchemaPredefined = configurationMethod === ConfigurationMethodEnum.predefinedModel
+  // const { credentials: formSchemasValue } = useProviderCredentialsAndLoadBalancing(
+  //   provider.provider,
+  //   configurationMethod,
+  //   providerFormSchemaPredefined && provider.custom_configuration.status === CustomConfigurationStatusEnum.active,
+  //   currentCustomConfigurationModelFixedFields,
+  // )
+  const isEditMode = !!entry
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const language = useLanguage()
+  const [loading, setLoading] = useState(false)
+  const [showConfirm, setShowConfirm] = useState(false)
+  const formSchemas = useMemo(() => {
+    return [
+      {
+        type: FormTypeEnum.textInput,
+        label: {
+          en_US: 'Config Name',
+          zh_Hans: '配置名称',
+        },
+        variable: 'name',
+        required: true,
+        show_on: [],
+        placeholder: {
+          en_US: 'Enter your Config Name here',
+          zh_Hans: '输入配置名称',
+        },
+      } as CredentialFormSchemaTextInput,
+      ...(
+        providerFormSchemaPredefined
+          ? provider.provider_credential_schema.credential_form_schemas
+          : provider.model_credential_schema.credential_form_schemas
+      ),
+    ]
+  }, [
+    providerFormSchemaPredefined,
+    provider.provider_credential_schema?.credential_form_schemas,
+    provider.model_credential_schema?.credential_form_schemas,
+  ])
+
+  const [
+    requiredFormSchemas,
+    secretFormSchemas,
+    defaultFormSchemaValue,
+    showOnVariableMap,
+  ] = useMemo(() => {
+    const requiredFormSchemas: CredentialFormSchema[] = []
+    const secretFormSchemas: CredentialFormSchema[] = []
+    const defaultFormSchemaValue: Record<string, string | number> = {}
+    const showOnVariableMap: Record<string, string[]> = {}
+
+    formSchemas.forEach((formSchema) => {
+      if (formSchema.required)
+        requiredFormSchemas.push(formSchema)
+
+      if (formSchema.type === FormTypeEnum.secretInput)
+        secretFormSchemas.push(formSchema)
+
+      if (formSchema.default)
+        defaultFormSchemaValue[formSchema.variable] = formSchema.default
+
+      if (formSchema.show_on.length) {
+        formSchema.show_on.forEach((showOnItem) => {
+          if (!showOnVariableMap[showOnItem.variable])
+            showOnVariableMap[showOnItem.variable] = []
+
+          if (!showOnVariableMap[showOnItem.variable].includes(formSchema.variable))
+            showOnVariableMap[showOnItem.variable].push(formSchema.variable)
+        })
+      }
+
+      if (formSchema.type === FormTypeEnum.select || formSchema.type === FormTypeEnum.radio) {
+        (formSchema as (CredentialFormSchemaRadio | CredentialFormSchemaSelect)).options.forEach((option) => {
+          if (option.show_on.length) {
+            option.show_on.forEach((showOnItem) => {
+              if (!showOnVariableMap[showOnItem.variable])
+                showOnVariableMap[showOnItem.variable] = []
+
+              if (!showOnVariableMap[showOnItem.variable].includes(formSchema.variable))
+                showOnVariableMap[showOnItem.variable].push(formSchema.variable)
+            })
+          }
+        })
+      }
+    })
+
+    return [
+      requiredFormSchemas,
+      secretFormSchemas,
+      defaultFormSchemaValue,
+      showOnVariableMap,
+    ]
+  }, [formSchemas])
+  const [initialValue, setInitialValue] = useState<ModelLoadBalancingConfigEntry['credentials']>()
+  useEffect(() => {
+    if (entry && !initialValue) {
+      setInitialValue({
+        ...defaultFormSchemaValue,
+        ...entry.credentials,
+        id: entry.id,
+        name: entry.name,
+      } as Record<string, string | undefined | boolean>)
+    }
+  }, [entry, defaultFormSchemaValue, initialValue])
+  const formSchemasValue = useMemo(() => ({
+    ...currentCustomConfigurationModelFixedFields,
+    ...initialValue,
+  }), [currentCustomConfigurationModelFixedFields, initialValue])
+  const initialFormSchemasValue: Record<string, string | number> = useMemo(() => {
+    return {
+      ...defaultFormSchemaValue,
+      ...formSchemasValue,
+    } as Record<string, string | number>
+  }, [formSchemasValue, defaultFormSchemaValue])
+  const [value, setValue] = useState(initialFormSchemasValue)
+  useEffect(() => {
+    setValue(initialFormSchemasValue)
+  }, [initialFormSchemasValue])
+  const [_, validating, validatedStatusState] = useValidate(value)
+  const filteredRequiredFormSchemas = requiredFormSchemas.filter((requiredFormSchema) => {
+    if (requiredFormSchema.show_on.length && requiredFormSchema.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
+      return true
+
+    if (!requiredFormSchema.show_on.length)
+      return true
+
+    return false
+  })
+  const getSecretValues = useCallback((v: FormValue) => {
+    return secretFormSchemas.reduce((prev, next) => {
+      if (isEditMode && v[next.variable] && v[next.variable] === initialFormSchemasValue[next.variable])
+        prev[next.variable] = '[__HIDDEN__]'
+
+      return prev
+    }, {} as Record<string, string>)
+  }, [initialFormSchemasValue, isEditMode, secretFormSchemas])
+
+  // const handleValueChange = ({ __model_type, __model_name, ...v }: FormValue) => {
+  const handleValueChange = (v: FormValue) => {
+    setValue(v)
+  }
+  const handleSave = async () => {
+    try {
+      setLoading(true)
+
+      const res = await validateLoadBalancingCredentials(
+        providerFormSchemaPredefined,
+        provider.provider,
+        {
+          ...value,
+          ...getSecretValues(value),
+        },
+        entry?.id,
+      )
+      if (res.status === ValidatedStatus.Success) {
+        // notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+        const { __model_type, __model_name, name, ...credentials } = value
+        onSave({
+          ...(entry || {}),
+          name: name as string,
+          credentials: credentials as Record<string, string | boolean | undefined>,
+        })
+        //   onCancel()
+      }
+      else {
+        notify({ type: 'error', message: res.message || '' })
+      }
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+
+  const handleRemove = () => {
+    onRemove?.()
+  }
+
+  return (
+    <PortalToFollowElem open>
+      <PortalToFollowElemContent className='w-full h-full z-[60]'>
+        <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
+          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
+            <div className='px-8 pt-8'>
+              <div className='flex justify-between items-center mb-2'>
+                <div className='text-xl font-semibold text-gray-900'>{t(isEditMode ? 'common.modelProvider.editConfig' : 'common.modelProvider.addConfig')}</div>
+              </div>
+              <Form
+                value={value}
+                onChange={handleValueChange}
+                formSchemas={formSchemas}
+                validating={validating}
+                validatedSuccess={validatedStatusState.status === ValidatedStatus.Success}
+                showOnVariableMap={showOnVariableMap}
+                isEditMode={isEditMode}
+              />
+              <div className='sticky bottom-0 flex justify-between items-center py-6 flex-wrap gap-y-2 bg-white'>
+                {
+                  (provider.help && (provider.help.title || provider.help.url))
+                    ? (
+                      <a
+                        href={provider.help?.url[language] || provider.help?.url.en_US}
+                        target='_blank' rel='noopener noreferrer'
+                        className='inline-flex items-center text-xs text-primary-600'
+                        onClick={e => !provider.help.url && e.preventDefault()}
+                      >
+                        {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
+                        <LinkExternal02 className='ml-1 w-3 h-3' />
+                      </a>
+                    )
+                    : <div />
+                }
+                <div>
+                  {
+                    isEditMode && (
+                      <Button
+                        size='large'
+                        className='mr-2 text-[#D92D20]'
+                        onClick={() => setShowConfirm(true)}
+                      >
+                        {t('common.operation.remove')}
+                      </Button>
+                    )
+                  }
+                  <Button
+                    size='large'
+                    className='mr-2'
+                    onClick={onCancel}
+                  >
+                    {t('common.operation.cancel')}
+                  </Button>
+                  <Button
+                    size='large'
+                    variant='primary'
+                    onClick={handleSave}
+                    disabled={loading || filteredRequiredFormSchemas.some(item => value[item.variable] === undefined)}
+                  >
+                    {t('common.operation.save')}
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className='border-t-[0.5px] border-t-black/5'>
+              {
+                (validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
+                  ? (
+                    <div className='flex px-[10px] py-3 bg-[#FEF3F2] text-xs text-[#D92D20]'>
+                      <RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' />
+                      {validatedStatusState.message}
+                    </div>
+                  )
+                  : (
+                    <div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
+                      <Lock01 className='mr-1 w-3 h-3 text-gray-500' />
+                      {t('common.modelProvider.encrypted.front')}
+                      <a
+                        className='text-primary-600 mx-1'
+                        target='_blank' rel='noopener noreferrer'
+                        href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
+                      >
+                        PKCS1_OAEP
+                      </a>
+                      {t('common.modelProvider.encrypted.back')}
+                    </div>
+                  )
+              }
+            </div>
+          </div>
+          {
+            showConfirm && (
+              <Confirm
+                title={t('common.modelProvider.confirmDelete')}
+                isShow={showConfirm}
+                onCancel={() => setShowConfirm(false)}
+                onConfirm={handleRemove}
+              />
+            )
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(ModelLoadBalancingEntryModal)

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

@@ -0,0 +1,82 @@
+import type { FC, PropsWithChildren } from 'react'
+import {
+  modelTypeFormat,
+  sizeFormat,
+} from '../utils'
+import { useLanguage } from '../hooks'
+import type { ModelItem } from '../declarations'
+import ModelBadge from '../model-badge'
+import FeatureIcon from '../model-selector/feature-icon'
+import cn from '@/utils/classnames'
+
+type ModelNameProps = PropsWithChildren<{
+  modelItem: ModelItem
+  className?: string
+  showModelType?: boolean
+  modelTypeClassName?: string
+  showMode?: boolean
+  modeClassName?: string
+  showFeatures?: boolean
+  featuresClassName?: string
+  showContextSize?: boolean
+}>
+const ModelName: FC<ModelNameProps> = ({
+  modelItem,
+  className,
+  showModelType,
+  modelTypeClassName,
+  showMode,
+  modeClassName,
+  showFeatures,
+  featuresClassName,
+  showContextSize,
+  children,
+}) => {
+  const language = useLanguage()
+
+  if (!modelItem)
+    return null
+  return (
+    <div className={cn('flex items-center truncate text-components-input-text-filled system-sm-regular', className)}>
+      <div
+        className='truncate'
+        title={modelItem.label[language] || modelItem.label.en_US}
+      >
+        {modelItem.label[language] || modelItem.label.en_US}
+      </div>
+      {
+        showModelType && modelItem.model_type && (
+          <ModelBadge className={cn('ml-1', modelTypeClassName)}>
+            {modelTypeFormat(modelItem.model_type)}
+          </ModelBadge>
+        )
+      }
+      {
+        modelItem.model_properties.mode && showMode && (
+          <ModelBadge className={cn('ml-1', modeClassName)}>
+            {(modelItem.model_properties.mode as string).toLocaleUpperCase()}
+          </ModelBadge>
+        )
+      }
+      {
+        showFeatures && modelItem.features?.map(feature => (
+          <FeatureIcon
+            key={feature}
+            feature={feature}
+            className={featuresClassName}
+          />
+        ))
+      }
+      {
+        showContextSize && modelItem.model_properties.context_size && (
+          <ModelBadge className='ml-1'>
+            {sizeFormat(modelItem.model_properties.context_size as number)}
+          </ModelBadge>
+        )
+      }
+      {children}
+    </div>
+  )
+}
+
+export default ModelName

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx

@@ -0,0 +1,271 @@
+import type {
+  FC,
+  ReactNode,
+} from 'react'
+import { useMemo, useState } from 'react'
+import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
+import type {
+  DefaultModel,
+  FormValue,
+  ModelParameterRule,
+} from '../declarations'
+import { ModelStatusEnum } from '../declarations'
+import ModelSelector from '../model-selector'
+import {
+  useTextGenerationCurrentProviderAndModelAndModelList,
+} from '../hooks'
+import ParameterItem from './parameter-item'
+import type { ParameterValue } from './parameter-item'
+import Trigger from './trigger'
+import type { TriggerProps } from './trigger'
+import PresetsParameter from './presets-parameter'
+import cn from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { fetchModelParameterRules } from '@/service/common'
+import Loading from '@/app/components/base/loading'
+import { useProviderContext } from '@/context/provider-context'
+import { TONE_LIST } from '@/config'
+import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
+
+export type ModelParameterModalProps = {
+  popupClassName?: string
+  portalToFollowElemContentClassName?: string
+  isAdvancedMode: boolean
+  mode: string
+  modelId: string
+  provider: string
+  setModel: (model: { modelId: string; provider: string; mode?: string; features?: string[] }) => void
+  completionParams: FormValue
+  onCompletionParamsChange: (newParams: FormValue) => void
+  hideDebugWithMultipleModel?: boolean
+  debugWithMultipleModel?: boolean
+  onDebugWithMultipleModelChange?: () => void
+  renderTrigger?: (v: TriggerProps) => ReactNode
+  readonly?: boolean
+  isInWorkflow?: boolean
+}
+const stopParameterRule: ModelParameterRule = {
+  default: [],
+  help: {
+    en_US: 'Up to four sequences where the API will stop generating further tokens. The returned text will not contain the stop sequence.',
+    zh_Hans: '最多四个序列，API 将停止生成更多的 token。返回的文本将不包含停止序列。',
+  },
+  label: {
+    en_US: 'Stop sequences',
+    zh_Hans: '停止序列',
+  },
+  name: 'stop',
+  required: false,
+  type: 'tag',
+  tagPlaceholder: {
+    en_US: 'Enter sequence and press Tab',
+    zh_Hans: '输入序列并按 Tab 键',
+  },
+}
+
+const PROVIDER_WITH_PRESET_TONE = ['openai', 'azure_openai']
+const ModelParameterModal: FC<ModelParameterModalProps> = ({
+  popupClassName,
+  portalToFollowElemContentClassName,
+  isAdvancedMode,
+  modelId,
+  provider,
+  setModel,
+  completionParams,
+  onCompletionParamsChange,
+  hideDebugWithMultipleModel,
+  debugWithMultipleModel,
+  onDebugWithMultipleModelChange,
+  renderTrigger,
+  readonly,
+  isInWorkflow,
+}) => {
+  const { t } = useTranslation()
+  const { isAPIKeySet } = useProviderContext()
+  const [open, setOpen] = useState(false)
+  const { data: parameterRulesData, isLoading } = useSWR((provider && modelId) ? `/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}` : null, fetchModelParameterRules)
+  const {
+    currentProvider,
+    currentModel,
+    activeTextGenerationModelList,
+  } = useTextGenerationCurrentProviderAndModelAndModelList(
+    { provider, model: modelId },
+  )
+
+  const hasDeprecated = !currentProvider || !currentModel
+  const modelDisabled = currentModel?.status !== ModelStatusEnum.active
+  const disabled = !isAPIKeySet || hasDeprecated || modelDisabled
+
+  const parameterRules: ModelParameterRule[] = useMemo(() => {
+    return parameterRulesData?.data || []
+  }, [parameterRulesData])
+
+  const handleParamChange = (key: string, value: ParameterValue) => {
+    onCompletionParamsChange({
+      ...completionParams,
+      [key]: value,
+    })
+  }
+
+  const handleChangeModel = ({ provider, model }: DefaultModel) => {
+    const targetProvider = activeTextGenerationModelList.find(modelItem => modelItem.provider === provider)
+    const targetModelItem = targetProvider?.models.find(modelItem => modelItem.model === model)
+    setModel({
+      modelId: model,
+      provider,
+      mode: targetModelItem?.model_properties.mode as string,
+      features: targetModelItem?.features || [],
+    })
+  }
+
+  const handleSwitch = (key: string, value: boolean, assignValue: ParameterValue) => {
+    if (!value) {
+      const newCompletionParams = { ...completionParams }
+      delete newCompletionParams[key]
+
+      onCompletionParamsChange(newCompletionParams)
+    }
+    if (value) {
+      onCompletionParamsChange({
+        ...completionParams,
+        [key]: assignValue,
+      })
+    }
+  }
+
+  const handleSelectPresetParameter = (toneId: number) => {
+    const tone = TONE_LIST.find(tone => tone.id === toneId)
+    if (tone) {
+      onCompletionParamsChange({
+        ...completionParams,
+        ...tone.config,
+      })
+    }
+  }
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement={isInWorkflow ? 'left' : 'bottom-end'}
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={() => {
+            if (readonly)
+              return
+            setOpen(v => !v)
+          }}
+          className='block'
+        >
+          {
+            renderTrigger
+              ? renderTrigger({
+                open,
+                disabled,
+                modelDisabled,
+                hasDeprecated,
+                currentProvider,
+                currentModel,
+                providerName: provider,
+                modelId,
+              })
+              : (
+                <Trigger
+                  disabled={disabled}
+                  isInWorkflow={isInWorkflow}
+                  modelDisabled={modelDisabled}
+                  hasDeprecated={hasDeprecated}
+                  currentProvider={currentProvider}
+                  currentModel={currentModel}
+                  providerName={provider}
+                  modelId={modelId}
+                />
+              )
+          }
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className={cn(portalToFollowElemContentClassName, 'z-[60]')}>
+          <div className={cn(popupClassName, 'w-[496px] rounded-xl border border-gray-100 bg-white shadow-xl')}>
+            <div className={cn(
+              'max-h-[480px]  overflow-y-auto',
+              !isInWorkflow && 'px-10 pt-6 pb-8',
+              isInWorkflow && 'p-4')}>
+              <div className='flex items-center justify-between h-8'>
+                <div className={cn('font-semibold text-gray-900 shrink-0', isInWorkflow && 'text-[13px]')}>
+                  {t('common.modelProvider.model').toLocaleUpperCase()}
+                </div>
+                <ModelSelector
+                  defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
+                  modelList={activeTextGenerationModelList}
+                  onSelect={handleChangeModel}
+                  triggerClassName='max-w-[295px]'
+                />
+              </div>
+              {
+                !!parameterRules.length && (
+                  <div className='my-5 h-[1px] bg-gray-100' />
+                )
+              }
+              {
+                isLoading && (
+                  <div className='mt-5'><Loading /></div>
+                )
+              }
+              {
+                !isLoading && !!parameterRules.length && (
+                  <div className='flex items-center justify-between mb-4'>
+                    <div className={cn('font-semibold text-gray-900', isInWorkflow && 'text-[13px]')}>{t('common.modelProvider.parameters')}</div>
+                    {
+                      PROVIDER_WITH_PRESET_TONE.includes(provider) && (
+                        <PresetsParameter onSelect={handleSelectPresetParameter} />
+                      )
+                    }
+                  </div>
+                )
+              }
+              {
+                !isLoading && !!parameterRules.length && (
+                  [
+                    ...parameterRules,
+                    ...(isAdvancedMode ? [stopParameterRule] : []),
+                  ].map(parameter => (
+                    <ParameterItem
+                      key={`${modelId}-${parameter.name}`}
+                      className='mb-4'
+                      parameterRule={parameter}
+                      value={completionParams?.[parameter.name]}
+                      onChange={v => handleParamChange(parameter.name, v)}
+                      onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
+                      isInWorkflow={isInWorkflow}
+                    />
+                  ))
+                )
+              }
+            </div>
+            {!hideDebugWithMultipleModel && (
+              <div
+                className='flex items-center justify-between px-6 h-[50px] bg-gray-50 border-t border-t-gray-100 text-xs font-medium text-primary-600 cursor-pointer rounded-b-xl'
+                onClick={() => onDebugWithMultipleModelChange?.()}
+              >
+                {
+                  debugWithMultipleModel
+                    ? t('appDebug.debugAsSingleModel')
+                    : t('appDebug.debugAsMultipleModel')
+                }
+                <ArrowNarrowLeft className='w-3 h-3 rotate-180' />
+              </div>
+            )}
+          </div>
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default ModelParameterModal

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx

@@ -0,0 +1,296 @@
+import type { FC } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import type { ModelParameterRule } from '../declarations'
+import { useLanguage } from '../hooks'
+import { isNullOrUndefined } from '../utils'
+import cn from '@/utils/classnames'
+import Switch from '@/app/components/base/switch'
+import Tooltip from '@/app/components/base/tooltip'
+import Slider from '@/app/components/base/slider'
+import Radio from '@/app/components/base/radio'
+import { SimpleSelect } from '@/app/components/base/select'
+import TagInput from '@/app/components/base/tag-input'
+
+export type ParameterValue = number | string | string[] | boolean | undefined
+
+type ParameterItemProps = {
+  parameterRule: ModelParameterRule
+  value?: ParameterValue
+  onChange?: (value: ParameterValue) => void
+  className?: string
+  onSwitch?: (checked: boolean, assignValue: ParameterValue) => void
+  isInWorkflow?: boolean
+}
+const ParameterItem: FC<ParameterItemProps> = ({
+  parameterRule,
+  value,
+  onChange,
+  className,
+  onSwitch,
+  isInWorkflow,
+}) => {
+  const language = useLanguage()
+  const [localValue, setLocalValue] = useState(value)
+  const numberInputRef = useRef<HTMLInputElement>(null)
+
+  const getDefaultValue = () => {
+    let defaultValue: ParameterValue
+
+    if (parameterRule.type === 'int' || parameterRule.type === 'float')
+      defaultValue = isNullOrUndefined(parameterRule.default) ? (parameterRule.min || 0) : parameterRule.default
+    else if (parameterRule.type === 'string' || parameterRule.type === 'text')
+      defaultValue = parameterRule.options?.length ? (parameterRule.default || '') : (parameterRule.default || '')
+    else if (parameterRule.type === 'boolean')
+      defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false
+    else if (parameterRule.type === 'tag')
+      defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : []
+
+    return defaultValue
+  }
+
+  const renderValue = value ?? localValue ?? getDefaultValue()
+
+  const handleInputChange = (newValue: ParameterValue) => {
+    setLocalValue(newValue)
+
+    if (onChange && (parameterRule.name === 'stop' || !isNullOrUndefined(value) || parameterRule.required))
+      onChange(newValue)
+  }
+
+  const handleNumberInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let num = +e.target.value
+
+    if (!isNullOrUndefined(parameterRule.max) && num > parameterRule.max!) {
+      num = parameterRule.max as number
+      numberInputRef.current!.value = `${num}`
+    }
+
+    if (!isNullOrUndefined(parameterRule.min) && num < parameterRule.min!)
+      num = parameterRule.min as number
+
+    handleInputChange(num)
+  }
+
+  const handleNumberInputBlur = () => {
+    if (numberInputRef.current)
+      numberInputRef.current.value = renderValue as string
+  }
+
+  const handleSlideChange = (num: number) => {
+    if (!isNullOrUndefined(parameterRule.max) && num > parameterRule.max!) {
+      handleInputChange(parameterRule.max)
+      numberInputRef.current!.value = `${parameterRule.max}`
+      return
+    }
+
+    if (!isNullOrUndefined(parameterRule.min) && num < parameterRule.min!) {
+      handleInputChange(parameterRule.min)
+      numberInputRef.current!.value = `${parameterRule.min}`
+      return
+    }
+
+    handleInputChange(num)
+    numberInputRef.current!.value = `${num}`
+  }
+
+  const handleRadioChange = (v: number) => {
+    handleInputChange(v === 1)
+  }
+
+  const handleStringInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    handleInputChange(e.target.value)
+  }
+
+  const handleSelect = (option: { value: string | number; name: string }) => {
+    handleInputChange(option.value)
+  }
+
+  const handleTagChange = (newSequences: string[]) => {
+    handleInputChange(newSequences)
+  }
+
+  const handleSwitch = (checked: boolean) => {
+    if (onSwitch) {
+      const assignValue: ParameterValue = localValue || getDefaultValue()
+
+      onSwitch(checked, assignValue)
+    }
+  }
+
+  useEffect(() => {
+    if ((parameterRule.type === 'int' || parameterRule.type === 'float') && numberInputRef.current)
+      numberInputRef.current.value = `${renderValue}`
+  }, [value])
+
+  const renderInput = () => {
+    const numberInputWithSlide = (parameterRule.type === 'int' || parameterRule.type === 'float')
+      && !isNullOrUndefined(parameterRule.min)
+      && !isNullOrUndefined(parameterRule.max)
+
+    if (parameterRule.type === 'int') {
+      let step = 100
+      if (parameterRule.max) {
+        if (parameterRule.max < 100)
+          step = 1
+        else if (parameterRule.max < 1000)
+          step = 10
+        else if (parameterRule.max < 10000)
+          step = 100
+      }
+
+      return (
+        <>
+          {numberInputWithSlide && <Slider
+            className='w-[120px]'
+            value={renderValue as number}
+            min={parameterRule.min}
+            max={parameterRule.max}
+            step={step}
+            onChange={handleSlideChange}
+          />}
+          <input
+            ref={numberInputRef}
+            className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
+            type='number'
+            max={parameterRule.max}
+            min={parameterRule.min}
+            step={numberInputWithSlide ? step : +`0.${parameterRule.precision || 0}`}
+            onChange={handleNumberInputChange}
+            onBlur={handleNumberInputBlur}
+          />
+        </>
+      )
+    }
+
+    if (parameterRule.type === 'float') {
+      return (
+        <>
+          {numberInputWithSlide && <Slider
+            className='w-[120px]'
+            value={renderValue as number}
+            min={parameterRule.min}
+            max={parameterRule.max}
+            step={0.1}
+            onChange={handleSlideChange}
+          />}
+          <input
+            ref={numberInputRef}
+            className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
+            type='number'
+            max={parameterRule.max}
+            min={parameterRule.min}
+            step={numberInputWithSlide ? 0.1 : +`0.${parameterRule.precision || 0}`}
+            onChange={handleNumberInputChange}
+            onBlur={handleNumberInputBlur}
+          />
+        </>
+      )
+    }
+
+    if (parameterRule.type === 'boolean') {
+      return (
+        <Radio.Group
+          className='w-[200px] flex items-center'
+          value={renderValue ? 1 : 0}
+          onChange={handleRadioChange}
+        >
+          <Radio value={1} className='!mr-1 w-[94px]'>True</Radio>
+          <Radio value={0} className='w-[94px]'>False</Radio>
+        </Radio.Group>
+      )
+    }
+
+    if (parameterRule.type === 'string' && !parameterRule.options?.length) {
+      return (
+        <input
+          className={cn(isInWorkflow ? 'w-[200px]' : 'w-full', 'ml-4 flex items-center px-3 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900')}
+          value={renderValue as string}
+          onChange={handleStringInputChange}
+        />
+      )
+    }
+
+    if (parameterRule.type === 'text') {
+      return (
+        <textarea
+          className='w-full h-20 ml-4 px-1 rounded-lg bg-gray-100 outline-none text-[12px] text-gray-900'
+          value={renderValue as string}
+          onChange={handleStringInputChange}
+        />
+      )
+    }
+
+    if (parameterRule.type === 'string' && !!parameterRule?.options?.length) {
+      return (
+        <SimpleSelect
+          className='!py-0'
+          wrapperClassName={cn(isInWorkflow ? '!w-[200px]' : 'w-full', 'ml-4 !h-8')}
+          defaultValue={renderValue as string}
+          onSelect={handleSelect}
+          items={parameterRule.options.map(option => ({ value: option, name: option }))}
+        />
+      )
+    }
+
+    if (parameterRule.type === 'tag') {
+      return (
+        <div className={cn(isInWorkflow ? 'w-[200px]' : 'w-full', 'ml-4')}>
+          <TagInput
+            items={renderValue as string[]}
+            onChange={handleTagChange}
+            customizedConfirmKey='Tab'
+            isInWorkflow={isInWorkflow}
+          />
+        </div>
+      )
+    }
+
+    return null
+  }
+
+  return (
+    <div className={`flex items-center justify-between ${className}`}>
+      <div>
+        <div className={cn(isInWorkflow ? 'w-[140px]' : 'w-full', 'ml-4 shrink-0 flex items-center')}>
+          <div
+            className='mr-0.5 text-[13px] font-medium text-gray-700 truncate'
+            title={parameterRule.label[language] || parameterRule.label.en_US}
+          >
+            {parameterRule.label[language] || parameterRule.label.en_US}
+          </div>
+          {
+            parameterRule.help && (
+              <Tooltip
+                popupContent={(
+                  <div className='w-[200px] whitespace-pre-wrap'>{parameterRule.help[language] || parameterRule.help.en_US}</div>
+                )}
+                popupClassName='mr-1'
+                triggerClassName='mr-1 w-4 h-4 shrink-0'
+              />
+            )
+          }
+          {
+            !parameterRule.required && parameterRule.name !== 'stop' && (
+              <Switch
+                className='mr-1'
+                defaultValue={!isNullOrUndefined(value)}
+                onChange={handleSwitch}
+                size='md'
+              />
+            )
+          }
+        </div>
+        {
+          parameterRule.type === 'tag' && (
+            <div className={cn(!isInWorkflow && 'w-[200px]', 'text-gray-400 text-xs font-normal')}>
+              {parameterRule?.tagPlaceholder?.[language]}
+            </div>
+          )
+        }
+      </div>
+      {renderInput()}
+    </div>
+  )
+}
+
+export default ParameterItem

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx

@@ -0,0 +1,65 @@
+import type { FC } from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
+import Dropdown from '@/app/components/base/dropdown'
+import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
+import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
+import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
+import { TONE_LIST } from '@/config'
+
+type PresetsParameterProps = {
+  onSelect: (toneId: number) => void
+}
+const PresetsParameter: FC<PresetsParameterProps> = ({
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+  const renderTrigger = useCallback((open: boolean) => {
+    return (
+      <div
+        className={`
+          flex items-center px-[7px] h-7 rounded-md border-[0.5px] border-gray-200 shadow-xs
+          text-xs font-medium text-gray-700 cursor-pointer
+          ${open && 'bg-gray-100'}
+        `}
+      >
+        <SlidersH className='mr-[5px] w-3.5 h-3.5 text-gray-500' />
+        {t('common.modelProvider.loadPresets')}
+        <RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5 text-gray-500' />
+      </div>
+    )
+  }, [])
+  const getToneIcon = (toneId: number) => {
+    const className = 'mr-2 w-[14px] h-[14px]'
+    const res = ({
+      1: <Brush01 className={`${className} text-[#6938EF]`} />,
+      2: <Scales02 className={`${className} text-indigo-600`} />,
+      3: <Target04 className={`${className} text-[#107569]`} />,
+    })[toneId]
+    return res
+  }
+  const options = TONE_LIST.slice(0, 3).map((tone) => {
+    return {
+      value: tone.id,
+      text: (
+        <div className='flex items-center h-full'>
+          {getToneIcon(tone.id)}
+          {t(`common.model.tone.${tone.name}`) as string}
+        </div>
+      ),
+    }
+  })
+
+  return (
+    <Dropdown
+      renderTrigger={renderTrigger}
+      items={options}
+      onSelect={item => onSelect(item.value as number)}
+      popupClassName='z-[1003]'
+    />
+  )
+}
+
+export default PresetsParameter

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx

@@ -0,0 +1,114 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
+import type {
+  Model,
+  ModelItem,
+  ModelProvider,
+} from '../declarations'
+import { MODEL_STATUS_TEXT } from '../declarations'
+import { useLanguage } from '../hooks'
+import ModelIcon from '../model-icon'
+import ModelName from '../model-name'
+import cn from '@/utils/classnames'
+import { useProviderContext } from '@/context/provider-context'
+import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import Tooltip from '@/app/components/base/tooltip'
+
+export type TriggerProps = {
+  open?: boolean
+  disabled?: boolean
+  currentProvider?: ModelProvider | Model
+  currentModel?: ModelItem
+  providerName?: string
+  modelId?: string
+  hasDeprecated?: boolean
+  modelDisabled?: boolean
+  isInWorkflow?: boolean
+}
+const Trigger: FC<TriggerProps> = ({
+  disabled,
+  currentProvider,
+  currentModel,
+  providerName,
+  modelId,
+  hasDeprecated,
+  modelDisabled,
+  isInWorkflow,
+}) => {
+  const { t } = useTranslation()
+  const language = useLanguage()
+  const { modelProviders } = useProviderContext()
+
+  return (
+    <div
+      className={cn(
+        'relative flex items-center px-2 h-8 rounded-lg  cursor-pointer',
+        !isInWorkflow && 'border hover:border-[1.5px]',
+        !isInWorkflow && (disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'),
+        isInWorkflow && 'pr-[30px] bg-gray-100 border border-gray-100  hover:border-gray-200',
+      )}
+    >
+      {
+        currentProvider && (
+          <ModelIcon
+            className='mr-1.5 !w-5 !h-5'
+            provider={currentProvider}
+            modelName={currentModel?.model}
+          />
+        )
+      }
+      {
+        !currentProvider && (
+          <ModelIcon
+            className='mr-1.5 !w-5 !h-5'
+            provider={modelProviders.find(item => item.provider === providerName)}
+            modelName={modelId}
+          />
+        )
+      }
+      {
+        currentModel && (
+          <ModelName
+            className='mr-1.5 text-gray-900'
+            modelItem={currentModel}
+            showMode
+            modeClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
+            showFeatures
+            featuresClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
+          />
+        )
+      }
+      {
+        !currentModel && (
+          <div className='mr-1 text-[13px] font-medium text-gray-900 truncate'>
+            {modelId}
+          </div>
+        )
+      }
+      {
+        disabled
+          ? (
+            <Tooltip
+              popupContent={
+                hasDeprecated
+                  ? t('common.modelProvider.deprecated')
+                  : (modelDisabled && currentModel)
+                    ? MODEL_STATUS_TEXT[currentModel.status as string][language]
+                    : ''
+              }
+            >
+              <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+            </Tooltip>
+          )
+          : (
+            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-gray-500', 'shrink-0 w-4 h-4')} />
+          )
+      }
+      {isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-gray-500' />)}
+    </div>
+  )
+}
+
+export default Trigger

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx

@@ -0,0 +1,46 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import ModelIcon from '../model-icon'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import { useProviderContext } from '@/context/provider-context'
+import Tooltip from '@/app/components/base/tooltip'
+
+type ModelTriggerProps = {
+  modelName: string
+  providerName: string
+  className?: string
+}
+const ModelTrigger: FC<ModelTriggerProps> = ({
+  modelName,
+  providerName,
+  className,
+}) => {
+  const { t } = useTranslation()
+  const { modelProviders } = useProviderContext()
+  const currentProvider = modelProviders.find(provider => provider.provider === providerName)
+
+  return (
+    <div
+      className={`
+        group flex items-center px-2 h-8 rounded-lg bg-[#FFFAEB] cursor-pointer
+        ${className}
+      `}
+    >
+      <ModelIcon
+        className='shrink-0 mr-1.5'
+        provider={currentProvider}
+        modelName={modelName}
+      />
+      <div className='mr-1 text-[13px] font-medium text-gray-800 truncate'>
+        {modelName}
+      </div>
+      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+        <Tooltip popupContent={t('common.modelProvider.deprecated')}>
+          <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default ModelTrigger

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx

@@ -0,0 +1,39 @@
+import type { FC } from 'react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
+
+type ModelTriggerProps = {
+  open: boolean
+  className?: string
+}
+const ModelTrigger: FC<ModelTriggerProps> = ({
+  open,
+  className,
+}) => {
+  return (
+    <div
+      className={`
+        flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
+        ${className}
+        ${open && '!bg-gray-200'}
+      `}
+    >
+      <div className='grow flex items-center'>
+        <div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border border-dashed border-black/5'>
+          <CubeOutline className='w-3 h-3 text-gray-400' />
+        </div>
+        <div
+          className='text-[13px] text-gray-500 truncate'
+          title='Select model'
+        >
+          Select model
+        </div>
+      </div>
+      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+        <RiArrowDownSLine className='w-3.5 h-3.5 text-gray-500' />
+      </div>
+    </div>
+  )
+}
+
+export default ModelTrigger

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx

@@ -0,0 +1,79 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import ModelBadge from '../model-badge'
+import {
+  ModelFeatureEnum,
+  ModelFeatureTextEnum,
+} from '../declarations'
+import {
+  // MagicBox,
+  MagicEyes,
+  // MagicWand,
+  // Robot,
+} from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
+import Tooltip from '@/app/components/base/tooltip'
+
+type FeatureIconProps = {
+  feature: ModelFeatureEnum
+  className?: string
+}
+const FeatureIcon: FC<FeatureIconProps> = ({
+  className,
+  feature,
+}) => {
+  const { t } = useTranslation()
+
+  // if (feature === ModelFeatureEnum.agentThought) {
+  //   return (
+  //     <Tooltip
+  //       popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.agentThought })}
+  //     >
+  //       <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+  //         <Robot className='w-3 h-3' />
+  //       </ModelBadge>
+  //     </Tooltip>
+  //   )
+  // }
+
+  // if (feature === ModelFeatureEnum.toolCall) {
+  //   return (
+  //     <Tooltip
+  //       popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.toolCall })}
+  //     >
+  //       <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+  //         <MagicWand className='w-3 h-3' />
+  //       </ModelBadge>
+  //     </Tooltip>
+  //   )
+  // }
+
+  // if (feature === ModelFeatureEnum.multiToolCall) {
+  //   return (
+  //     <Tooltip
+  //       popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.multiToolCall })}
+  //     >
+  //       <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+  //         <MagicBox className='w-3 h-3' />
+  //       </ModelBadge>
+  //     </Tooltip>
+  //   )
+  // }
+
+  if (feature === ModelFeatureEnum.vision) {
+    return (
+      <Tooltip
+        popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.vision })}
+      >
+        <div className='inline-block cursor-help'>
+          <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+            <MagicEyes className='w-3 h-3' />
+          </ModelBadge>
+        </div>
+      </Tooltip>
+    )
+  }
+
+  return null
+}
+
+export default FeatureIcon

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

@@ -0,0 +1,111 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import type {
+  DefaultModel,
+  Model,
+  ModelItem,
+} from '../declarations'
+import { useCurrentProviderAndModel } from '../hooks'
+import ModelTrigger from './model-trigger'
+import EmptyTrigger from './empty-trigger'
+import DeprecatedModelTrigger from './deprecated-model-trigger'
+import Popup from './popup'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+type ModelSelectorProps = {
+  defaultModel?: DefaultModel
+  modelList: Model[]
+  triggerClassName?: string
+  popupClassName?: string
+  onSelect?: (model: DefaultModel) => void
+  readonly?: boolean
+}
+const ModelSelector: FC<ModelSelectorProps> = ({
+  defaultModel,
+  modelList,
+  triggerClassName,
+  popupClassName,
+  onSelect,
+  readonly,
+}) => {
+  const [open, setOpen] = useState(false)
+  const {
+    currentProvider,
+    currentModel,
+  } = useCurrentProviderAndModel(
+    modelList,
+    defaultModel,
+  )
+
+  const handleSelect = (provider: string, model: ModelItem) => {
+    setOpen(false)
+
+    if (onSelect)
+      onSelect({ provider, model: model.model })
+  }
+
+  const handleToggle = () => {
+    if (readonly)
+      return
+
+    setOpen(v => !v)
+  }
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={handleToggle}
+          className='block'
+        >
+          {
+            currentModel && currentProvider && (
+              <ModelTrigger
+                open={open}
+                provider={currentProvider}
+                model={currentModel}
+                className={triggerClassName}
+                readonly={readonly}
+              />
+            )
+          }
+          {
+            !currentModel && defaultModel && (
+              <DeprecatedModelTrigger
+                modelName={defaultModel?.model || ''}
+                providerName={defaultModel?.provider || ''}
+                className={triggerClassName}
+              />
+            )
+          }
+          {
+            !defaultModel && (
+              <EmptyTrigger
+                open={open}
+                className={triggerClassName}
+              />
+            )
+          }
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className={`z-[1002] ${popupClassName}`}>
+          <Popup
+            defaultModel={defaultModel}
+            modelList={modelList}
+            onSelect={handleSelect}
+          />
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default ModelSelector

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx

@@ -0,0 +1,76 @@
+import type { FC } from 'react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import type {
+  Model,
+  ModelItem,
+} from '../declarations'
+import {
+  MODEL_STATUS_TEXT,
+  ModelStatusEnum,
+} from '../declarations'
+import { useLanguage } from '../hooks'
+import ModelIcon from '../model-icon'
+import ModelName from '../model-name'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import Tooltip from '@/app/components/base/tooltip'
+import classNames from '@/utils/classnames'
+
+type ModelTriggerProps = {
+  open: boolean
+  provider: Model
+  model: ModelItem
+  className?: string
+  readonly?: boolean
+}
+const ModelTrigger: FC<ModelTriggerProps> = ({
+  open,
+  provider,
+  model,
+  className,
+  readonly,
+}) => {
+  const language = useLanguage()
+
+  return (
+    <div
+      className={classNames(
+        'group flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal',
+        !readonly && 'hover:bg-components-input-bg-hover cursor-pointer',
+        className,
+        open && '!bg-components-input-bg-hover',
+        model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]',
+      )}
+    >
+      <ModelIcon
+        className='shrink-0 mr-1.5'
+        provider={provider}
+        modelName={model.model}
+      />
+      <ModelName
+        className='grow'
+        modelItem={model}
+        showMode
+        showFeatures
+      />
+      {!readonly && (
+        <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+          {
+            model.status !== ModelStatusEnum.active
+              ? (
+                <Tooltip popupContent={MODEL_STATUS_TEXT[model.status][language]}>
+                  <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+                </Tooltip>
+              )
+              : (
+                <RiArrowDownSLine
+                  className='w-3.5 h-3.5 text-gray-500'
+                />
+              )
+          }
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ModelTrigger

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx

@@ -0,0 +1,125 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import type {
+  DefaultModel,
+  Model,
+  ModelItem,
+} from '../declarations'
+import {
+  useLanguage,
+  useUpdateModelList,
+  useUpdateModelProviders,
+} from '../hooks'
+import ModelIcon from '../model-icon'
+import ModelName from '../model-name'
+import {
+  ConfigurationMethodEnum,
+  MODEL_STATUS_TEXT,
+  ModelStatusEnum,
+} from '../declarations'
+import { Check } from '@/app/components/base/icons/src/vender/line/general'
+import { useModalContext } from '@/context/modal-context'
+import { useProviderContext } from '@/context/provider-context'
+import Tooltip from '@/app/components/base/tooltip'
+
+type PopupItemProps = {
+  defaultModel?: DefaultModel
+  model: Model
+  onSelect: (provider: string, model: ModelItem) => void
+}
+const PopupItem: FC<PopupItemProps> = ({
+  defaultModel,
+  model,
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+  const language = useLanguage()
+  const { setShowModelModal } = useModalContext()
+  const { modelProviders } = useProviderContext()
+  const updateModelList = useUpdateModelList()
+  const updateModelProviders = useUpdateModelProviders()
+  const currentProvider = modelProviders.find(provider => provider.provider === model.provider)!
+  const handleSelect = (provider: string, modelItem: ModelItem) => {
+    if (modelItem.status !== ModelStatusEnum.active)
+      return
+
+    onSelect(provider, modelItem)
+  }
+  const handleOpenModelModal = () => {
+    setShowModelModal({
+      payload: {
+        currentProvider,
+        currentConfigurationMethod: ConfigurationMethodEnum.predefinedModel,
+      },
+      onSaveCallback: () => {
+        updateModelProviders()
+
+        const modelType = model.models[0].model_type
+
+        if (modelType)
+          updateModelList(modelType)
+      },
+    })
+  }
+
+  return (
+    <div className='mb-1'>
+      <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>
+        {model.label[language] || model.label.en_US}
+      </div>
+      {
+        model.models.map(modelItem => (
+          <Tooltip
+            key={modelItem.model}
+            popupContent={modelItem.status !== ModelStatusEnum.active ? MODEL_STATUS_TEXT[modelItem.status][language] : undefined}
+            position='right'
+          >
+            <div
+              key={modelItem.model}
+              className={`
+                group relative flex items-center px-3 py-1.5 h-8 rounded-lg
+                ${modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-gray-50' : 'cursor-not-allowed hover:bg-gray-50/60'}
+              `}
+              onClick={() => handleSelect(model.provider, modelItem)}
+            >
+              <ModelIcon
+                className={`
+                  shrink-0 mr-2 w-4 h-4
+                  ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
+                `}
+                provider={model}
+                modelName={modelItem.model}
+              />
+              <ModelName
+                className={`
+                  grow text-sm font-normal text-gray-900
+                  ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
+                `}
+                modelItem={modelItem}
+                showMode
+                showFeatures
+              />
+              {
+                defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
+                  <Check className='shrink-0 w-4 h-4 text-primary-600' />
+                )
+              }
+              {
+                modelItem.status === ModelStatusEnum.noConfigure && (
+                  <div
+                    className='hidden group-hover:block text-xs font-medium text-primary-600 cursor-pointer'
+                    onClick={handleOpenModelModal}
+                  >
+                    {t('common.operation.add').toLocaleUpperCase()}
+                  </div>
+                )
+              }
+            </div>
+          </Tooltip>
+        ))
+      }
+    </div>
+  )
+}
+
+export default PopupItem

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx

@@ -0,0 +1,93 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import {
+  RiSearchLine,
+} from '@remixicon/react'
+import type {
+  DefaultModel,
+  Model,
+  ModelItem,
+} from '../declarations'
+import { useLanguage } from '../hooks'
+import PopupItem from './popup-item'
+import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+
+type PopupProps = {
+  defaultModel?: DefaultModel
+  modelList: Model[]
+  onSelect: (provider: string, model: ModelItem) => void
+}
+const Popup: FC<PopupProps> = ({
+  defaultModel,
+  modelList,
+  onSelect,
+}) => {
+  const language = useLanguage()
+  const [searchText, setSearchText] = useState('')
+
+  const filteredModelList = modelList.map((model) => {
+    const filteredModels = model.models.filter((modelItem) => {
+      if (modelItem.label[language] !== undefined)
+        return modelItem.label[language].toLowerCase().includes(searchText.toLowerCase())
+
+      return Object.values(modelItem.label).some(label =>
+        label.toLowerCase().includes(searchText.toLowerCase()),
+      )
+    })
+
+    return { ...model, models: filteredModels }
+  }).filter(model => model.models.length > 0)
+
+  return (
+    <div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg overflow-y-auto'>
+      <div className='sticky top-0 pl-3 pt-3 pr-2 pb-1 bg-white z-10'>
+        <div className={`
+          flex items-center pl-[9px] pr-[10px] h-8 rounded-lg border
+          ${searchText ? 'bg-white border-gray-300 shadow-xs' : 'bg-gray-100 border-transparent'}
+        `}>
+          <RiSearchLine
+            className={`
+              shrink-0 mr-[7px] w-[14px] h-[14px]
+              ${searchText ? 'text-gray-500' : 'text-gray-400'}
+            `}
+          />
+          <input
+            className='block grow h-[18px] text-[13px] appearance-none outline-none bg-transparent'
+            placeholder='Search model'
+            value={searchText}
+            onChange={e => setSearchText(e.target.value)}
+          />
+          {
+            searchText && (
+              <XCircle
+                className='shrink-0 ml-1.5 w-[14px] h-[14px] text-gray-400 cursor-pointer'
+                onClick={() => setSearchText('')}
+              />
+            )
+          }
+        </div>
+      </div>
+      <div className='p-1'>
+        {
+          filteredModelList.map(model => (
+            <PopupItem
+              key={model.provider}
+              defaultModel={defaultModel}
+              model={model}
+              onSelect={onSelect}
+            />
+          ))
+        }
+        {
+          !filteredModelList.length && (
+            <div className='px-3 py-1.5 leading-[18px] text-center text-xs text-gray-500 break-all'>
+              {`No model found for “${searchText}”`}
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export default Popup

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/model-selector/rerank-trigger.tsx

@@ -0,0 +1,27 @@
+import {
+  RiExternalLinkLine,
+} from '@remixicon/react'
+import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
+
+const ModelTrigger = () => {
+  return (
+    <div className='flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer'>
+      <div className='grow flex items-center'>
+        <div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border-dashed border-black/5'>
+          <CubeOutline className='w-[11px] h-[11px] text-gray-400' />
+        </div>
+        <div
+          className='text-[13px] text-gray-500 truncate'
+          title='Select model'
+        >
+          Please setup the Rerank model
+        </div>
+      </div>
+      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+        <RiExternalLinkLine className='w-3.5 h-3.5 text-gray-500' />
+      </div>
+    </div>
+  )
+}
+
+export default ModelTrigger

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PlusCircle } from '@/app/components/base/icons/src/vender/solid/general'
+
+type AddModelButtonProps = {
+  className?: string
+  onClick: () => void
+}
+const AddModelButton: FC<AddModelButtonProps> = ({
+  className,
+  onClick,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <span
+      className={`
+        shrink-0 flex items-center px-1.5 h-6 text-xs font-medium text-gray-500 cursor-pointer
+      hover:bg-primary-50 hover:text-primary-600 rounded-md ${className}
+      `}
+      onClick={onClick}
+    >
+      <PlusCircle className='mr-1 w-3 h-3' />
+      {t('common.modelProvider.addModel')}
+    </span>
+  )
+}
+
+export default AddModelButton

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx

@@ -0,0 +1,64 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLatest } from 'ahooks'
+import SimplePieChart from '@/app/components/base/simple-pie-chart'
+import Tooltip from '@/app/components/base/tooltip'
+
+export type CooldownTimerProps = {
+  secondsRemaining?: number
+  onFinish?: () => void
+}
+
+const CooldownTimer = ({ secondsRemaining, onFinish }: CooldownTimerProps) => {
+  const { t } = useTranslation()
+
+  const targetTime = useRef<number>(Date.now())
+  const [currentTime, setCurrentTime] = useState(targetTime.current)
+  const displayTime = useMemo(
+    () => Math.ceil((targetTime.current - currentTime) / 1000),
+    [currentTime],
+  )
+
+  const countdownTimeout = useRef<NodeJS.Timeout>()
+  const clearCountdown = useCallback(() => {
+    if (countdownTimeout.current) {
+      clearTimeout(countdownTimeout.current)
+      countdownTimeout.current = undefined
+    }
+  }, [])
+
+  const onFinishRef = useLatest(onFinish)
+
+  const countdown = useCallback(() => {
+    clearCountdown()
+    countdownTimeout.current = setTimeout(() => {
+      const now = Date.now()
+      if (now <= targetTime.current) {
+        setCurrentTime(Date.now())
+        countdown()
+      }
+      else {
+        onFinishRef.current?.()
+        clearCountdown()
+      }
+    }, 1000)
+  }, [clearCountdown, onFinishRef])
+
+  useEffect(() => {
+    const now = Date.now()
+    targetTime.current = now + (secondsRemaining ?? 0) * 1000
+    setCurrentTime(now)
+    countdown()
+    return clearCountdown
+  }, [clearCountdown, countdown, secondsRemaining])
+
+  return displayTime
+    ? (
+      <Tooltip popupContent={t('common.modelProvider.apiKeyRateLimit', { seconds: displayTime })}>
+        <SimplePieChart percentage={Math.round(displayTime / 60 * 100)} className='w-3 h-3' />
+      </Tooltip>
+    )
+    : null
+}
+
+export default memo(CooldownTimer)

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx

@@ -0,0 +1,114 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { ModelProvider } from '../declarations'
+import {
+  ConfigurationMethodEnum,
+  CustomConfigurationStatusEnum,
+  PreferredProviderTypeEnum,
+} from '../declarations'
+import {
+  useUpdateModelList,
+  useUpdateModelProviders,
+} from '../hooks'
+import PrioritySelector from './priority-selector'
+import PriorityUseTip from './priority-use-tip'
+import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './index'
+import Indicator from '@/app/components/header/indicator'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import Button from '@/app/components/base/button'
+import { changeModelProviderPriority } from '@/service/common'
+import { useToastContext } from '@/app/components/base/toast'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+
+type CredentialPanelProps = {
+  provider: ModelProvider
+  onSetup: () => void
+}
+const CredentialPanel: FC<CredentialPanelProps> = ({
+  provider,
+  onSetup,
+}) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const { eventEmitter } = useEventEmitterContextContext()
+  const updateModelList = useUpdateModelList()
+  const updateModelProviders = useUpdateModelProviders()
+  const customConfig = provider.custom_configuration
+  const systemConfig = provider.system_configuration
+  const priorityUseType = provider.preferred_provider_type
+  const isCustomConfigured = customConfig.status === CustomConfigurationStatusEnum.active
+  const configurateMethods = provider.configurate_methods
+
+  const handleChangePriority = async (key: PreferredProviderTypeEnum) => {
+    const res = await changeModelProviderPriority({
+      url: `/workspaces/current/model-providers/${provider.provider}/preferred-provider-type`,
+      body: {
+        preferred_provider_type: key,
+      },
+    })
+    if (res.result === 'success') {
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      updateModelProviders()
+
+      configurateMethods.forEach((method) => {
+        if (method === ConfigurationMethodEnum.predefinedModel)
+          provider.supported_model_types.forEach(modelType => updateModelList(modelType))
+      })
+
+      eventEmitter?.emit({
+        type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
+        payload: provider.provider,
+      } as any)
+    }
+  }
+
+  return (
+    <>
+      {
+        provider.provider_credential_schema && (
+          <div className='shrink-0 relative ml-1 p-1 w-[112px] rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
+            <div className='flex items-center justify-between mb-1 pt-1 pl-2 pr-[7px] h-5 text-xs font-medium text-gray-500'>
+              API-KEY
+              <Indicator color={isCustomConfigured ? 'green' : 'gray'} />
+            </div>
+            <div className='flex items-center gap-0.5'>
+              <Button
+                className='grow'
+                size='small'
+                onClick={onSetup}
+              >
+                <Settings01 className='mr-1 w-3 h-3' />
+                {t('common.operation.setup')}
+              </Button>
+              {
+                systemConfig.enabled && isCustomConfigured && (
+                  <PrioritySelector
+                    value={priorityUseType}
+                    onSelect={handleChangePriority}
+                  />
+                )
+              }
+            </div>
+            {
+              priorityUseType === PreferredProviderTypeEnum.custom && systemConfig.enabled && (
+                <PriorityUseTip />
+              )
+            }
+          </div>
+        )
+      }
+      {
+        systemConfig.enabled && isCustomConfigured && !provider.provider_credential_schema && (
+          <div className='ml-1'>
+            <PrioritySelector
+              value={priorityUseType}
+              onSelect={handleChangePriority}
+            />
+          </div>
+        )
+      }
+    </>
+  )
+}
+
+export default CredentialPanel

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx

@@ -0,0 +1,168 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiLoader2Line,
+} from '@remixicon/react'
+import type {
+  CustomConfigurationModelFixedFields,
+  ModelItem,
+  ModelProvider,
+} from '../declarations'
+import { ConfigurationMethodEnum } from '../declarations'
+import {
+  DEFAULT_BACKGROUND_COLOR,
+  MODEL_PROVIDER_QUOTA_GET_PAID,
+  modelTypeFormat,
+} from '../utils'
+import ProviderIcon from '../provider-icon'
+import ModelBadge from '../model-badge'
+import CredentialPanel from './credential-panel'
+import QuotaPanel from './quota-panel'
+import ModelList from './model-list'
+import AddModelButton from './add-model-button'
+import { ChevronDownDouble } from '@/app/components/base/icons/src/vender/line/arrows'
+import { fetchModelProviderModelList } from '@/service/common'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { IS_CE_EDITION } from '@/config'
+import { useAppContext } from '@/context/app-context'
+
+export const UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST = 'UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST'
+type ProviderAddedCardProps = {
+  provider: ModelProvider
+  onOpenModal: (configurationMethod: ConfigurationMethodEnum, currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields) => void
+}
+const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
+  provider,
+  onOpenModal,
+}) => {
+  const { t } = useTranslation()
+  const { eventEmitter } = useEventEmitterContextContext()
+  const [fetched, setFetched] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [collapsed, setCollapsed] = useState(true)
+  const [modelList, setModelList] = useState<ModelItem[]>([])
+  const configurationMethods = provider.configurate_methods.filter(method => method !== ConfigurationMethodEnum.fetchFromRemote)
+  const systemConfig = provider.system_configuration
+  const hasModelList = fetched && !!modelList.length
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const showQuota = systemConfig.enabled && [...MODEL_PROVIDER_QUOTA_GET_PAID].includes(provider.provider) && !IS_CE_EDITION
+
+  const getModelList = async (providerName: string) => {
+    if (loading)
+      return
+    try {
+      setLoading(true)
+      const modelsData = await fetchModelProviderModelList(`/workspaces/current/model-providers/${providerName}/models`)
+      setModelList(modelsData.data)
+      setCollapsed(false)
+      setFetched(true)
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+  const handleOpenModelList = () => {
+    if (fetched) {
+      setCollapsed(false)
+      return
+    }
+
+    getModelList(provider.provider)
+  }
+
+  eventEmitter?.useSubscription((v: any) => {
+    if (v?.type === UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST && v.payload === provider.provider)
+      getModelList(v.payload)
+  })
+
+  return (
+    <div
+      className='mb-2 rounded-xl border-[0.5px] border-black/5 shadow-xs'
+      style={{ background: provider.background || DEFAULT_BACKGROUND_COLOR }}
+    >
+      <div className='flex pl-3 py-2 pr-2 rounded-t-xl'>
+        <div className='grow px-1 pt-1 pb-0.5'>
+          <ProviderIcon
+            className='mb-2'
+            provider={provider}
+          />
+          <div className='flex gap-0.5'>
+            {
+              provider.supported_model_types.map(modelType => (
+                <ModelBadge key={modelType}>
+                  {modelTypeFormat(modelType)}
+                </ModelBadge>
+              ))
+            }
+          </div>
+        </div>
+        {
+          showQuota && (
+            <QuotaPanel
+              provider={provider}
+            />
+          )
+        }
+        {
+          configurationMethods.includes(ConfigurationMethodEnum.predefinedModel) && isCurrentWorkspaceManager && (
+            <CredentialPanel
+              onSetup={() => onOpenModal(ConfigurationMethodEnum.predefinedModel)}
+              provider={provider}
+            />
+          )
+        }
+      </div>
+      {
+        collapsed && (
+          <div className='group flex items-center justify-between pl-2 py-1.5 pr-[11px] border-t border-t-black/5 bg-white/30 text-xs font-medium text-gray-500'>
+            <div className='group-hover:hidden pl-1 pr-1.5 h-6 leading-6'>
+              {
+                hasModelList
+                  ? t('common.modelProvider.modelsNum', { num: modelList.length })
+                  : t('common.modelProvider.showModels')
+              }
+            </div>
+            <div
+              className='hidden group-hover:flex items-center pl-1 pr-1.5 h-6 rounded-lg hover:bg-white cursor-pointer'
+              onClick={handleOpenModelList}
+            >
+              <ChevronDownDouble className='mr-0.5 w-3 h-3' />
+              {
+                hasModelList
+                  ? t('common.modelProvider.showModelsNum', { num: modelList.length })
+                  : t('common.modelProvider.showModels')
+              }
+              {
+                loading && (
+                  <RiLoader2Line className='ml-0.5 animate-spin w-3 h-3' />
+                )
+              }
+            </div>
+            {
+              configurationMethods.includes(ConfigurationMethodEnum.customizableModel) && isCurrentWorkspaceManager && (
+                <AddModelButton
+                  onClick={() => onOpenModal(ConfigurationMethodEnum.customizableModel)}
+                  className='hidden group-hover:flex group-hover:text-primary-600'
+                />
+              )
+            }
+          </div>
+        )
+      }
+      {
+        !collapsed && (
+          <ModelList
+            provider={provider}
+            models={modelList}
+            onCollapse={() => setCollapsed(true)}
+            onConfig={currentCustomConfigurationModelFixedFields => onOpenModal(ConfigurationMethodEnum.customizableModel, currentCustomConfigurationModelFixedFields)}
+            onChange={(provider: string) => getModelList(provider)}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default ProviderAddedCard

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx

@@ -0,0 +1,126 @@
+import { memo, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDebounceFn } from 'ahooks'
+import type { CustomConfigurationModelFixedFields, ModelItem, ModelProvider } from '../declarations'
+import { ConfigurationMethodEnum, ModelStatusEnum } from '../declarations'
+import ModelBadge from '../model-badge'
+import ModelIcon from '../model-icon'
+import ModelName from '../model-name'
+import classNames from '@/utils/classnames'
+import Button from '@/app/components/base/button'
+import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import Switch from '@/app/components/base/switch'
+import Tooltip from '@/app/components/base/tooltip'
+import { useProviderContext, useProviderContextSelector } from '@/context/provider-context'
+import { disableModel, enableModel } from '@/service/common'
+import { Plan } from '@/app/components/billing/type'
+import { useAppContext } from '@/context/app-context'
+
+export type ModelListItemProps = {
+  model: ModelItem
+  provider: ModelProvider
+  isConfigurable: boolean
+  onConfig: (currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields) => void
+  onModifyLoadBalancing?: (model: ModelItem) => void
+}
+
+const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoadBalancing }: ModelListItemProps) => {
+  const { t } = useTranslation()
+  const { plan } = useProviderContext()
+  const modelLoadBalancingEnabled = useProviderContextSelector(state => state.modelLoadBalancingEnabled)
+  const { isCurrentWorkspaceManager } = useAppContext()
+
+  const toggleModelEnablingStatus = useCallback(async (enabled: boolean) => {
+    if (enabled)
+      await enableModel(`/workspaces/current/model-providers/${provider.provider}/models/enable`, { model: model.model, model_type: model.model_type })
+    else
+      await disableModel(`/workspaces/current/model-providers/${provider.provider}/models/disable`, { model: model.model, model_type: model.model_type })
+  }, [model.model, model.model_type, provider.provider])
+
+  const { run: debouncedToggleModelEnablingStatus } = useDebounceFn(toggleModelEnablingStatus, { wait: 500 })
+
+  const onEnablingStateChange = useCallback(async (value: boolean) => {
+    debouncedToggleModelEnablingStatus(value)
+  }, [debouncedToggleModelEnablingStatus])
+
+  return (
+    <div
+      key={model.model}
+      className={classNames(
+        'group flex items-center pl-2 pr-2.5 h-8 rounded-lg',
+        isConfigurable && 'hover:bg-gray-50',
+        model.deprecated && 'opacity-60',
+      )}
+    >
+      <ModelIcon
+        className='shrink-0 mr-2'
+        provider={provider}
+        modelName={model.model}
+      />
+      <ModelName
+        className='grow text-sm font-normal text-gray-900'
+        modelItem={model}
+        showModelType
+        showMode
+        showContextSize
+      >
+        {modelLoadBalancingEnabled && !model.deprecated && model.load_balancing_enabled && (
+          <ModelBadge className='ml-1 uppercase text-indigo-600 border-indigo-300'>
+            <Balance className='w-3 h-3 mr-0.5' />
+            {t('common.modelProvider.loadBalancingHeadline')}
+          </ModelBadge>
+        )}
+      </ModelName>
+      <div className='shrink-0 flex items-center'>
+        {
+          model.fetch_from === ConfigurationMethodEnum.customizableModel
+            ? (isCurrentWorkspaceManager && (
+              <Button
+                className='hidden group-hover:flex h-7'
+                onClick={() => onConfig({ __model_name: model.model, __model_type: model.model_type })}
+              >
+                <Settings01 className='mr-[5px] w-3.5 h-3.5' />
+                {t('common.modelProvider.config')}
+              </Button>
+            ))
+            : (isCurrentWorkspaceManager && (modelLoadBalancingEnabled || plan.type === Plan.sandbox) && !model.deprecated && [ModelStatusEnum.active, ModelStatusEnum.disabled].includes(model.status))
+              ? (
+                <Button
+                  className='opacity-0 group-hover:opacity-100 h-[28px] transition-opacity'
+                  onClick={() => onModifyLoadBalancing?.(model)}
+                >
+                  <Balance className='mr-1 w-[14px] h-[14px]' />
+                  {t('common.modelProvider.configLoadBalancing')}
+                </Button>
+              )
+              : null
+        }
+        {
+          model.deprecated
+            ? (
+              <Tooltip
+                popupContent={
+                  <span className='font-semibold'>{t('common.modelProvider.modelHasBeenDeprecated')}</span>} offset={{ mainAxis: 4 }
+                }
+                needsDelay
+              >
+                <Switch defaultValue={false} disabled size='md' />
+              </Tooltip>
+            )
+            : (isCurrentWorkspaceManager && (
+              <Switch
+                className='ml-2'
+                defaultValue={model?.status === ModelStatusEnum.active}
+                disabled={![ModelStatusEnum.active, ModelStatusEnum.disabled].includes(model.status)}
+                size='md'
+                onChange={onEnablingStateChange}
+              />
+            ))
+        }
+      </div>
+    </div>
+  )
+}
+
+export default memo(ModelListItem)

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx

@@ -0,0 +1,99 @@
+import type { FC } from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import type {
+  CustomConfigurationModelFixedFields,
+  ModelItem,
+  ModelProvider,
+} from '../declarations'
+import {
+  ConfigurationMethodEnum,
+} from '../declarations'
+// import Tab from './tab'
+import AddModelButton from './add-model-button'
+import ModelListItem from './model-list-item'
+import { ChevronDownDouble } from '@/app/components/base/icons/src/vender/line/arrows'
+import { useModalContextSelector } from '@/context/modal-context'
+import { useAppContext } from '@/context/app-context'
+
+type ModelListProps = {
+  provider: ModelProvider
+  models: ModelItem[]
+  onCollapse: () => void
+  onConfig: (currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields) => void
+  onChange?: (provider: string) => void
+}
+const ModelList: FC<ModelListProps> = ({
+  provider,
+  models,
+  onCollapse,
+  onConfig,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const configurativeMethods = provider.configurate_methods.filter(method => method !== ConfigurationMethodEnum.fetchFromRemote)
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const isConfigurable = configurativeMethods.includes(ConfigurationMethodEnum.customizableModel)
+
+  const setShowModelLoadBalancingModal = useModalContextSelector(state => state.setShowModelLoadBalancingModal)
+  const onModifyLoadBalancing = useCallback((model: ModelItem) => {
+    setShowModelLoadBalancingModal({
+      provider,
+      model: model!,
+      open: !!model,
+      onClose: () => setShowModelLoadBalancingModal(null),
+      onSave: onChange,
+    })
+  }, [onChange, provider, setShowModelLoadBalancingModal])
+
+  return (
+    <div className='px-2 pb-2 rounded-b-xl'>
+      <div className='py-1 bg-white rounded-lg'>
+        <div className='flex items-center pl-1 pr-[3px]'>
+          <span className='group shrink-0 flex items-center mr-2'>
+            <span className='group-hover:hidden pl-1 pr-1.5 h-6 leading-6 text-xs font-medium text-gray-500'>
+              {t('common.modelProvider.modelsNum', { num: models.length })}
+            </span>
+            <span
+              className='hidden group-hover:inline-flex items-center pl-1 pr-1.5 h-6 text-xs font-medium text-gray-500 bg-gray-50 cursor-pointer rounded-lg'
+              onClick={() => onCollapse()}
+            >
+              <ChevronDownDouble className='mr-0.5 w-3 h-3 rotate-180' />
+              {t('common.modelProvider.collapse')}
+            </span>
+          </span>
+          {/* {
+            isConfigurable && canSystemConfig && (
+              <span className='flex items-center'>
+                <Tab active='all' onSelect={() => {}} />
+              </span>
+            )
+          } */}
+          {
+            isConfigurable && isCurrentWorkspaceManager && (
+              <div className='grow flex justify-end'>
+                <AddModelButton onClick={() => onConfig()} />
+              </div>
+            )
+          }
+        </div>
+        {
+          models.map(model => (
+            <ModelListItem
+              key={model.model}
+              {...{
+                model,
+                provider,
+                isConfigurable,
+                onConfig,
+                onModifyLoadBalancing,
+              }}
+            />
+          ))
+        }
+      </div>
+    </div>
+  )
+}
+
+export default ModelList

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx

@@ -0,0 +1,274 @@
+import type { Dispatch, SetStateAction } from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
+import type { ConfigurationMethodEnum, CustomConfigurationModelFixedFields, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
+import Indicator from '../../../indicator'
+import CooldownTimer from './cooldown-timer'
+import classNames from '@/utils/classnames'
+import Tooltip from '@/app/components/base/tooltip'
+import Switch from '@/app/components/base/switch'
+import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
+import { Edit02, Plus02 } from '@/app/components/base/icons/src/vender/line/general'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import { useModalContextSelector } from '@/context/modal-context'
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
+import s from '@/app/components/custom/style.module.css'
+import GridMask from '@/app/components/base/grid-mask'
+import { useProviderContextSelector } from '@/context/provider-context'
+import { IS_CE_EDITION } from '@/config'
+
+export type ModelLoadBalancingConfigsProps = {
+  draftConfig?: ModelLoadBalancingConfig
+  setDraftConfig: Dispatch<SetStateAction<ModelLoadBalancingConfig | undefined>>
+  provider: ModelProvider
+  configurationMethod: ConfigurationMethodEnum
+  currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields
+  withSwitch?: boolean
+  className?: string
+}
+
+const ModelLoadBalancingConfigs = ({
+  draftConfig,
+  setDraftConfig,
+  provider,
+  configurationMethod,
+  currentCustomConfigurationModelFixedFields,
+  withSwitch = false,
+  className,
+}: ModelLoadBalancingConfigsProps) => {
+  const { t } = useTranslation()
+  const modelLoadBalancingEnabled = useProviderContextSelector(state => state.modelLoadBalancingEnabled)
+
+  const updateConfigEntry = useCallback(
+    (
+      index: number,
+      modifier: (entry: ModelLoadBalancingConfigEntry) => ModelLoadBalancingConfigEntry | undefined,
+    ) => {
+      setDraftConfig((prev) => {
+        if (!prev)
+          return prev
+        const newConfigs = [...prev.configs]
+        const modifiedConfig = modifier(newConfigs[index])
+        if (modifiedConfig)
+          newConfigs[index] = modifiedConfig
+        else
+          newConfigs.splice(index, 1)
+        return {
+          ...prev,
+          configs: newConfigs,
+        }
+      })
+    },
+    [setDraftConfig],
+  )
+
+  const toggleModalBalancing = useCallback((enabled: boolean) => {
+    if ((modelLoadBalancingEnabled || !enabled) && draftConfig) {
+      setDraftConfig({
+        ...draftConfig,
+        enabled,
+      })
+    }
+  }, [draftConfig, modelLoadBalancingEnabled, setDraftConfig])
+
+  const toggleConfigEntryEnabled = useCallback((index: number, state?: boolean) => {
+    updateConfigEntry(index, entry => ({
+      ...entry,
+      enabled: typeof state === 'boolean' ? state : !entry.enabled,
+    }))
+  }, [updateConfigEntry])
+
+  const setShowModelLoadBalancingEntryModal = useModalContextSelector(state => state.setShowModelLoadBalancingEntryModal)
+
+  const toggleEntryModal = useCallback((index?: number, entry?: ModelLoadBalancingConfigEntry) => {
+    setShowModelLoadBalancingEntryModal({
+      payload: {
+        currentProvider: provider,
+        currentConfigurationMethod: configurationMethod,
+        currentCustomConfigurationModelFixedFields,
+        entry,
+        index,
+      },
+      onSaveCallback: ({ entry: result }) => {
+        if (entry) {
+          // edit
+          setDraftConfig(prev => ({
+            ...prev,
+            enabled: !!prev?.enabled,
+            configs: prev?.configs.map((config, i) => i === index ? result! : config) || [],
+          }))
+        }
+        else {
+          // add
+          setDraftConfig(prev => ({
+            ...prev,
+            enabled: !!prev?.enabled,
+            configs: (prev?.configs || []).concat([{ ...result!, enabled: true }]),
+          }))
+        }
+      },
+      onRemoveCallback: ({ index }) => {
+        if (index !== undefined && (draftConfig?.configs?.length ?? 0) > index) {
+          setDraftConfig(prev => ({
+            ...prev,
+            enabled: !!prev?.enabled,
+            configs: prev?.configs.filter((_, i) => i !== index) || [],
+          }))
+        }
+      },
+    })
+  }, [
+    configurationMethod,
+    currentCustomConfigurationModelFixedFields,
+    draftConfig?.configs?.length,
+    provider,
+    setDraftConfig,
+    setShowModelLoadBalancingEntryModal,
+  ])
+
+  const clearCountdown = useCallback((index: number) => {
+    updateConfigEntry(index, ({ ttl: _, ...entry }) => {
+      return {
+        ...entry,
+        in_cooldown: false,
+      }
+    })
+  }, [updateConfigEntry])
+
+  if (!draftConfig)
+    return null
+
+  return (
+    <>
+      <div
+        className={classNames(
+          'min-h-16 bg-gray-50 border rounded-xl transition-colors',
+          (withSwitch || !draftConfig.enabled) ? 'border-gray-200' : 'border-primary-400',
+          (withSwitch || draftConfig.enabled) ? 'cursor-default' : 'cursor-pointer',
+          className,
+        )}
+        onClick={(!withSwitch && !draftConfig.enabled) ? () => toggleModalBalancing(true) : undefined}
+      >
+        <div className='flex items-center px-[15px] py-3 gap-2 select-none'>
+          <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 text-primary-600 bg-indigo-50 border border-indigo-100 rounded-lg'>
+            <Balance className='w-4 h-4' />
+          </div>
+          <div className='grow'>
+            <div className='flex items-center gap-1 text-sm'>
+              {t('common.modelProvider.loadBalancing')}
+              <Tooltip
+                popupContent={t('common.modelProvider.loadBalancingInfo')}
+                popupClassName='max-w-[300px]'
+                triggerClassName='w-3 h-3'
+              />
+            </div>
+            <div className='text-xs text-gray-500'>{t('common.modelProvider.loadBalancingDescription')}</div>
+          </div>
+          {
+            withSwitch && (
+              <Switch
+                defaultValue={Boolean(draftConfig.enabled)}
+                size='l'
+                className='ml-3 justify-self-end'
+                disabled={!modelLoadBalancingEnabled && !draftConfig.enabled}
+                onChange={value => toggleModalBalancing(value)}
+              />
+            )
+          }
+        </div>
+        {draftConfig.enabled && (
+          <div className='flex flex-col gap-1 px-3 pb-3'>
+            {draftConfig.configs.map((config, index) => {
+              const isProviderManaged = config.name === '__inherit__'
+              return (
+                <div key={config.id || index} className='group flex items-center px-3 h-10 bg-white border border-gray-200 rounded-lg shadow-xs'>
+                  <div className='grow flex items-center'>
+                    <div className='flex items-center justify-center mr-2 w-3 h-3'>
+                      {(config.in_cooldown && Boolean(config.ttl))
+                        ? (
+                          <CooldownTimer secondsRemaining={config.ttl} onFinish={() => clearCountdown(index)} />
+                        )
+                        : (
+                          <Tooltip popupContent={t('common.modelProvider.apiKeyStatusNormal')}>
+                            <Indicator color='green' />
+                          </Tooltip>
+                        )}
+                    </div>
+                    <div className='text-[13px] mr-1'>
+                      {isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name}
+                    </div>
+                    {isProviderManaged && (
+                      <span className='px-1 text-2xs uppercase text-gray-500 border border-black/8 rounded-[5px]'>{t('common.modelProvider.providerManaged')}</span>
+                    )}
+                  </div>
+                  <div className='flex items-center gap-1'>
+                    {!isProviderManaged && (
+                      <>
+                        <div className='flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
+                          <span
+                            className='flex items-center justify-center w-8 h-8 text-gray-500 bg-white rounded-lg transition-colors cursor-pointer hover:bg-black/5'
+                            onClick={() => toggleEntryModal(index, config)}
+                          >
+                            <Edit02 className='w-4 h-4' />
+                          </span>
+                          <span
+                            className='flex items-center justify-center w-8 h-8 text-gray-500 bg-white rounded-lg transition-colors cursor-pointer hover:bg-black/5'
+                            onClick={() => updateConfigEntry(index, () => undefined)}
+                          >
+                            <RiDeleteBinLine className='w-4 h-4' />
+                          </span>
+                          <span className='mr-2 h-3 border-r border-r-gray-100' />
+                        </div>
+                      </>
+                    )}
+                    <Switch
+                      defaultValue={Boolean(config.enabled)}
+                      size='md'
+                      className='justify-self-end'
+                      onChange={value => toggleConfigEntryEnabled(index, value)}
+                    />
+                  </div>
+                </div>
+              )
+            })}
+
+            <div
+              className='flex items-center px-3 mt-1 h-8 text-[13px] font-medium text-primary-600'
+              onClick={() => toggleEntryModal()}
+            >
+              <div className='flex items-center cursor-pointer'>
+                <Plus02 className='mr-2 w-3 h-3' />{t('common.modelProvider.addConfig')}
+              </div>
+            </div>
+          </div>
+        )}
+        {
+          draftConfig.enabled && draftConfig.configs.length < 2 && (
+            <div className='flex items-center px-6 h-[34px] text-xs text-gray-700 bg-black/2 border-t border-t-black/5'>
+              <AlertTriangle className='mr-1 w-3 h-3 text-[#f79009]' />
+              {t('common.modelProvider.loadBalancingLeastKeyWarning')}
+            </div>
+          )
+        }
+      </div>
+
+      {!modelLoadBalancingEnabled && !IS_CE_EDITION && (
+        <GridMask canvasClassName='!rounded-xl'>
+          <div className='flex items-center justify-between mt-2 px-4 h-14 border-[0.5px] border-gray-200 rounded-xl shadow-md'>
+            <div
+              className={classNames('text-sm font-semibold leading-tight text-gradient', s.textGradient)}
+            >
+              {t('common.modelProvider.upgradeForLoadBalancing')}
+            </div>
+            <UpgradeBtn />
+          </div>
+        </GridMask>
+      )}
+    </>
+  )
+}
+
+export default ModelLoadBalancingConfigs

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx

@@ -0,0 +1,189 @@
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+import type { ModelItem, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
+import { FormTypeEnum } from '../declarations'
+import ModelIcon from '../model-icon'
+import ModelName from '../model-name'
+import { savePredefinedLoadBalancingConfig } from '../utils'
+import ModelLoadBalancingConfigs from './model-load-balancing-configs'
+import classNames from '@/utils/classnames'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import { fetchModelLoadBalancingConfig } from '@/service/common'
+import Loading from '@/app/components/base/loading'
+import { useToastContext } from '@/app/components/base/toast'
+
+export type ModelLoadBalancingModalProps = {
+  provider: ModelProvider
+  model: ModelItem
+  open?: boolean
+  onClose?: () => void
+  onSave?: (provider: string) => void
+}
+
+// model balancing config modal
+const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSave }: ModelLoadBalancingModalProps) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+
+  const [loading, setLoading] = useState(false)
+
+  const { data, mutate } = useSWR(
+    `/workspaces/current/model-providers/${provider.provider}/models/credentials?model=${model.model}&model_type=${model.model_type}`,
+    fetchModelLoadBalancingConfig,
+  )
+
+  const originalConfig = data?.load_balancing
+  const [draftConfig, setDraftConfig] = useState<ModelLoadBalancingConfig>()
+  const originalConfigMap = useMemo(() => {
+    if (!originalConfig)
+      return {}
+    return originalConfig?.configs.reduce((prev, config) => {
+      if (config.id)
+        prev[config.id] = config
+      return prev
+    }, {} as Record<string, ModelLoadBalancingConfigEntry>)
+  }, [originalConfig])
+  useEffect(() => {
+    if (originalConfig)
+      setDraftConfig(originalConfig)
+  }, [originalConfig])
+
+  const toggleModalBalancing = useCallback((enabled: boolean) => {
+    if (draftConfig) {
+      setDraftConfig({
+        ...draftConfig,
+        enabled,
+      })
+    }
+  }, [draftConfig])
+
+  const extendedSecretFormSchemas = useMemo(
+    () => provider.provider_credential_schema.credential_form_schemas.filter(
+      ({ type }) => type === FormTypeEnum.secretInput,
+    ),
+    [provider.provider_credential_schema.credential_form_schemas],
+  )
+
+  const encodeConfigEntrySecretValues = useCallback((entry: ModelLoadBalancingConfigEntry) => {
+    const result = { ...entry }
+    extendedSecretFormSchemas.forEach(({ variable }) => {
+      if (entry.id && result.credentials[variable] === originalConfigMap[entry.id]?.credentials?.[variable])
+        result.credentials[variable] = '[__HIDDEN__]'
+    })
+    return result
+  }, [extendedSecretFormSchemas, originalConfigMap])
+
+  const handleSave = async () => {
+    try {
+      setLoading(true)
+      const res = await savePredefinedLoadBalancingConfig(
+        provider.provider,
+        ({
+          ...(data?.credentials ?? {}),
+          __model_type: model.model_type,
+          __model_name: model.model,
+        }),
+        {
+          ...draftConfig,
+          enabled: Boolean(draftConfig?.enabled),
+          configs: draftConfig!.configs.map(encodeConfigEntrySecretValues),
+        },
+      )
+      if (res.result === 'success') {
+        notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+        mutate()
+        onSave?.(provider.provider)
+        onClose?.()
+      }
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Modal
+      isShow={Boolean(model) && open}
+      onClose={onClose}
+      className='max-w-none pt-8 px-8 w-[640px]'
+      title={
+        <div className='pb-3 font-semibold'>
+          <div className='h-[30px]'>{t('common.modelProvider.configLoadBalancing')}</div>
+          {Boolean(model) && (
+            <div className='flex items-center h-5'>
+              <ModelIcon
+                className='shrink-0 mr-2'
+                provider={provider}
+                modelName={model!.model}
+              />
+              <ModelName
+                className='grow text-sm font-normal text-gray-900'
+                modelItem={model!}
+                showModelType
+                showMode
+                showContextSize
+              />
+            </div>
+          )}
+        </div>
+      }
+    >
+      {!draftConfig
+        ? <Loading type='area' />
+        : (
+          <>
+            <div className='py-2'>
+              <div
+                className={classNames(
+                  'min-h-16 bg-gray-50 border rounded-xl transition-colors',
+                  draftConfig.enabled ? 'border-gray-200 cursor-pointer' : 'border-primary-400 cursor-default',
+                )}
+                onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
+              >
+                <div className='flex items-center px-[15px] py-3 gap-2 select-none'>
+                  <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 bg-white border rounded-lg'>
+                    {Boolean(model) && (
+                      <ModelIcon className='shrink-0' provider={provider} modelName={model!.model} />
+                    )}
+                  </div>
+                  <div className='grow'>
+                    <div className='text-sm'>{t('common.modelProvider.providerManaged')}</div>
+                    <div className='text-xs text-gray-500'>{t('common.modelProvider.providerManagedDescription')}</div>
+                  </div>
+                </div>
+              </div>
+
+              <ModelLoadBalancingConfigs {...{
+                draftConfig,
+                setDraftConfig,
+                provider,
+                currentCustomConfigurationModelFixedFields: {
+                  __model_name: model.model,
+                  __model_type: model.model_type,
+                },
+                configurationMethod: model.fetch_from,
+                className: 'mt-2',
+              }} />
+            </div>
+
+            <div className='flex items-center justify-end gap-2 mt-6'>
+              <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
+              <Button
+                variant='primary'
+                onClick={handleSave}
+                disabled={
+                  loading
+                  || (draftConfig?.enabled && (draftConfig?.configs.filter(config => config.enabled).length ?? 0) < 2)
+                }
+              >{t('common.operation.save')}</Button>
+            </div>
+          </>
+        )
+      }
+    </Modal >
+  )
+}
+
+export default memo(ModelLoadBalancingModal)

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx

@@ -0,0 +1,75 @@
+import { Fragment } from 'react'
+import type { FC } from 'react'
+import { Popover, Transition } from '@headlessui/react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiCheckLine,
+  RiMoreFill,
+} from '@remixicon/react'
+import { PreferredProviderTypeEnum } from '../declarations'
+import Button from '@/app/components/base/button'
+
+type SelectorProps = {
+  value?: string
+  onSelect: (key: PreferredProviderTypeEnum) => void
+}
+const Selector: FC<SelectorProps> = ({
+  value,
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+  const options = [
+    {
+      key: PreferredProviderTypeEnum.custom,
+      text: t('common.modelProvider.apiKey'),
+    },
+    {
+      key: PreferredProviderTypeEnum.system,
+      text: t('common.modelProvider.quota'),
+    },
+  ]
+
+  return (
+    <Popover className='relative'>
+      <Popover.Button>
+        {
+          ({ open }) => (
+            <Button className={`
+              px-0 w-6 h-6 bg-white rounded-md
+              ${open && '!bg-gray-100'}
+            `}>
+              <RiMoreFill className='w-3 h-3 text-gray-700' />
+            </Button>
+          )
+        }
+      </Popover.Button>
+      <Transition
+        as={Fragment}
+        leave='transition ease-in duration-100'
+        leaveFrom='opacity-100'
+        leaveTo='opacity-0'
+      >
+        <Popover.Panel className='absolute top-7 right-0 w-[144px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg z-10'>
+          <div className='p-1'>
+            <div className='px-3 pt-2 pb-1 text-sm font-medium text-gray-700'>{t('common.modelProvider.card.priorityUse')}</div>
+            {
+              options.map(option => (
+                <Popover.Button as={Fragment} key={option.key}>
+                  <div
+                    className='flex items-center justify-between px-3 h-9 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
+                    onClick={() => onSelect(option.key)}
+                  >
+                    <div className='grow'>{option.text}</div>
+                    {value === option.key && <RiCheckLine className='w-4 h-4 text-primary-600' />}
+                  </div>
+                </Popover.Button>
+              ))
+            }
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  )
+}
+
+export default Selector

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next'
+import { ChevronDownDouble } from '@/app/components/base/icons/src/vender/line/arrows'
+import Tooltip from '@/app/components/base/tooltip'
+
+const PriorityUseTip = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Tooltip
+      popupContent={t('common.modelProvider.priorityUsing') || ''}
+    >
+      <div className='absolute -right-[5px] -top-[5px] bg-indigo-50 rounded-[5px] border-[0.5px] border-indigo-100 cursor-pointer'>
+        <ChevronDownDouble className='rotate-180 w-3 h-3 text-indigo-600' />
+      </div>
+    </Tooltip>
+  )
+}
+
+export default PriorityUseTip

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx

@@ -0,0 +1,66 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { ModelProvider } from '../declarations'
+import {
+  CustomConfigurationStatusEnum,
+  PreferredProviderTypeEnum,
+  QuotaUnitEnum,
+} from '../declarations'
+import {
+  MODEL_PROVIDER_QUOTA_GET_PAID,
+} from '../utils'
+import PriorityUseTip from './priority-use-tip'
+import Tooltip from '@/app/components/base/tooltip'
+import { formatNumber } from '@/utils/format'
+
+type QuotaPanelProps = {
+  provider: ModelProvider
+}
+const QuotaPanel: FC<QuotaPanelProps> = ({
+  provider,
+}) => {
+  const { t } = useTranslation()
+
+  const customConfig = provider.custom_configuration
+  const priorityUseType = provider.preferred_provider_type
+  const systemConfig = provider.system_configuration
+  const currentQuota = systemConfig.enabled && systemConfig.quota_configurations.find(item => item.quota_type === systemConfig.current_quota_type)
+  const openaiOrAnthropic = MODEL_PROVIDER_QUOTA_GET_PAID.includes(provider.provider)
+
+  return (
+    <div className='group relative shrink-0 min-w-[112px] px-3 py-2 rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
+      <div className='flex items-center mb-2 h-4 text-xs font-medium text-gray-500'>
+        {t('common.modelProvider.quota')}
+        <Tooltip popupContent={
+          openaiOrAnthropic
+            ? t('common.modelProvider.card.tip')
+            : t('common.modelProvider.quotaTip')
+        }
+        />
+      </div>
+      {
+        currentQuota && (
+          <div className='flex items-center h-4 text-xs text-gray-500'>
+            <span className='mr-0.5 text-sm font-semibold text-gray-700'>{formatNumber((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0))}</span>
+            {
+              currentQuota?.quota_unit === QuotaUnitEnum.tokens && 'Tokens'
+            }
+            {
+              currentQuota?.quota_unit === QuotaUnitEnum.times && t('common.modelProvider.callTimes')
+            }
+            {
+              currentQuota?.quota_unit === QuotaUnitEnum.credits && t('common.modelProvider.credits')
+            }
+          </div>
+        )
+      }
+      {
+        priorityUseType === PreferredProviderTypeEnum.system && customConfig.status === CustomConfigurationStatusEnum.active && (
+          <PriorityUseTip />
+        )
+      }
+    </div>
+  )
+}
+
+export default QuotaPanel

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-added-card/tab.tsx

@@ -0,0 +1,45 @@
+import type { FC } from 'react'
+
+type TabProps = {
+  active: string
+  onSelect: (active: string) => void
+}
+const Tab: FC<TabProps> = ({
+  active,
+  onSelect,
+}) => {
+  const tabs = [
+    {
+      key: 'all',
+      text: 'All',
+    },
+    {
+      key: 'added',
+      text: 'Added',
+    },
+    {
+      key: 'build-in',
+      text: 'Build-in',
+    },
+  ]
+  return (
+    <div className='flex items-center'>
+      {
+        tabs.map(tab => (
+          <div
+            key={tab.key}
+            className={`
+              flex items-center mr-1 px-[5px] h-[18px] rounded-md text-xs cursor-pointer
+              ${active === tab.key ? 'bg-gray-200 font-medium text-gray-900' : 'text-gray-500 font-normal'}
+            `}
+            onClick={() => onSelect(tab.key)}
+          >
+            {tab.text}
+          </div>
+        ))
+      }
+    </div>
+  )
+}
+
+export default Tab

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/provider-card/index.module.css

@@ -0,0 +1,4 @@
+.vender {
+  background: linear-gradient(131deg, #2250F2 0%, #0EBCF3 100%);
+  background-clip: text;
+}

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

@@ -0,0 +1,103 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+} from '@remixicon/react'
+import type {
+  ModelProvider,
+} from '../declarations'
+import { ConfigurationMethodEnum } from '../declarations'
+import {
+  DEFAULT_BACKGROUND_COLOR,
+  modelTypeFormat,
+} from '../utils'
+import {
+  useLanguage,
+} from '../hooks'
+import ModelBadge from '../model-badge'
+import ProviderIcon from '../provider-icon'
+import s from './index.module.css'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import Button from '@/app/components/base/button'
+import { useAppContext } from '@/context/app-context'
+
+type ProviderCardProps = {
+  provider: ModelProvider
+  onOpenModal: (configurateMethod: ConfigurationMethodEnum) => void
+}
+
+const ProviderCard: FC<ProviderCardProps> = ({
+  provider,
+  onOpenModal,
+}) => {
+  const { t } = useTranslation()
+  const language = useLanguage()
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const configurateMethods = provider.configurate_methods.filter(method => method !== ConfigurationMethodEnum.fetchFromRemote)
+
+  return (
+    <div
+      className='group relative flex flex-col px-4 py-3 h-[148px] border-[0.5px] border-black/5 rounded-xl shadow-xs hover:shadow-lg'
+      style={{ background: provider.background || DEFAULT_BACKGROUND_COLOR }}
+    >
+      <div className='grow h-0'>
+        <div className='py-0.5'>
+          <ProviderIcon provider={provider} />
+        </div>
+        {
+          provider.description && (
+            <div
+              className='mt-1 leading-4 text-xs text-black/[48] line-clamp-4'
+              title={provider.description[language] || provider.description.en_US}
+            >
+              {provider.description[language] || provider.description.en_US}
+            </div>
+          )
+        }
+      </div>
+      <div className='shrink-0'>
+        <div className={'flex flex-wrap group-hover:hidden gap-0.5'}>
+          {
+            provider.supported_model_types.map(modelType => (
+              <ModelBadge key={modelType}>
+                {modelTypeFormat(modelType)}
+              </ModelBadge>
+            ))
+          }
+        </div>
+        <div className={`hidden group-hover:grid grid-cols-${configurateMethods.length} gap-1`}>
+          {
+            configurateMethods.map((method) => {
+              if (method === ConfigurationMethodEnum.predefinedModel) {
+                return (
+                  <Button
+                    key={method}
+                    className={'h-7 text-xs shrink-0'}
+                    onClick={() => onOpenModal(method)}
+                    disabled={!isCurrentWorkspaceManager}
+                  >
+                    <Settings01 className={`mr-[5px] w-3.5 h-3.5 ${s.icon}`} />
+                    <span className='text-xs inline-flex items-center justify-center overflow-ellipsis shrink-0'>{t('common.operation.setup')}</span>
+                  </Button>
+                )
+              }
+              return (
+                <Button
+                  key={method}
+                  className='px-0 h-7 text-xs'
+                  onClick={() => onOpenModal(method)}
+                  disabled={!isCurrentWorkspaceManager}
+                >
+                  <RiAddLine className='mr-[5px] w-3.5 h-3.5' />
+                  {t('common.modelProvider.addModel')}
+                </Button>
+              )
+            })
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ProviderCard

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

@@ -0,0 +1,34 @@
+import type { FC } from 'react'
+import type { ModelProvider } from '../declarations'
+import { useLanguage } from '../hooks'
+
+type ProviderIconProps = {
+  provider: ModelProvider
+  className?: string
+}
+const ProviderIcon: FC<ProviderIconProps> = ({
+  provider,
+  className,
+}) => {
+  const language = useLanguage()
+
+  if (provider.icon_large) {
+    return (
+      <img
+        alt='provider-icon'
+        src={`${provider.icon_large[language] || provider.icon_large.en_US}`}
+        className={`w-auto h-6 ${className}`}
+      />
+    )
+  }
+
+  return (
+    <div className={`inline-flex items-center ${className}`}>
+      <div className='text-xs font-semibold text-black'>
+        {provider.label[language] || provider.label.en_US}
+      </div>
+    </div>
+  )
+}
+
+export default ProviderIcon

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx

@@ -0,0 +1,263 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ModelSelector from '../model-selector'
+import {
+  useModelList,
+  useSystemDefaultModelAndModelList,
+  useUpdateModelList,
+} from '../hooks'
+import type {
+  DefaultModel,
+  DefaultModelResponse,
+} from '../declarations'
+import { ModelTypeEnum } from '../declarations'
+import Tooltip from '@/app/components/base/tooltip'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Button from '@/app/components/base/button'
+import { useProviderContext } from '@/context/provider-context'
+import { updateDefaultModel } from '@/service/common'
+import { useToastContext } from '@/app/components/base/toast'
+import { useAppContext } from '@/context/app-context'
+
+type SystemModelSelectorProps = {
+  textGenerationDefaultModel: DefaultModelResponse | undefined
+  embeddingsDefaultModel: DefaultModelResponse | undefined
+  rerankDefaultModel: DefaultModelResponse | undefined
+  speech2textDefaultModel: DefaultModelResponse | undefined
+  ttsDefaultModel: DefaultModelResponse | undefined
+}
+const SystemModel: FC<SystemModelSelectorProps> = ({
+  textGenerationDefaultModel,
+  embeddingsDefaultModel,
+  rerankDefaultModel,
+  speech2textDefaultModel,
+  ttsDefaultModel,
+}) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const { textGenerationModelList } = useProviderContext()
+  const updateModelList = useUpdateModelList()
+  const { data: embeddingModelList } = useModelList(ModelTypeEnum.textEmbedding)
+  const { data: rerankModelList } = useModelList(ModelTypeEnum.rerank)
+  const { data: speech2textModelList } = useModelList(ModelTypeEnum.speech2text)
+  const { data: ttsModelList } = useModelList(ModelTypeEnum.tts)
+  const [changedModelTypes, setChangedModelTypes] = useState<ModelTypeEnum[]>([])
+  const [currentTextGenerationDefaultModel, changeCurrentTextGenerationDefaultModel] = useSystemDefaultModelAndModelList(textGenerationDefaultModel, textGenerationModelList)
+  const [currentEmbeddingsDefaultModel, changeCurrentEmbeddingsDefaultModel] = useSystemDefaultModelAndModelList(embeddingsDefaultModel, embeddingModelList)
+  const [currentRerankDefaultModel, changeCurrentRerankDefaultModel] = useSystemDefaultModelAndModelList(rerankDefaultModel, rerankModelList)
+  const [currentSpeech2textDefaultModel, changeCurrentSpeech2textDefaultModel] = useSystemDefaultModelAndModelList(speech2textDefaultModel, speech2textModelList)
+  const [currentTTSDefaultModel, changeCurrentTTSDefaultModel] = useSystemDefaultModelAndModelList(ttsDefaultModel, ttsModelList)
+  const [open, setOpen] = useState(false)
+
+  const getCurrentDefaultModelByModelType = (modelType: ModelTypeEnum) => {
+    if (modelType === ModelTypeEnum.textGeneration)
+      return currentTextGenerationDefaultModel
+    else if (modelType === ModelTypeEnum.textEmbedding)
+      return currentEmbeddingsDefaultModel
+    else if (modelType === ModelTypeEnum.rerank)
+      return currentRerankDefaultModel
+    else if (modelType === ModelTypeEnum.speech2text)
+      return currentSpeech2textDefaultModel
+    else if (modelType === ModelTypeEnum.tts)
+      return currentTTSDefaultModel
+
+    return undefined
+  }
+  const handleChangeDefaultModel = (modelType: ModelTypeEnum, model: DefaultModel) => {
+    if (modelType === ModelTypeEnum.textGeneration)
+      changeCurrentTextGenerationDefaultModel(model)
+    else if (modelType === ModelTypeEnum.textEmbedding)
+      changeCurrentEmbeddingsDefaultModel(model)
+    else if (modelType === ModelTypeEnum.rerank)
+      changeCurrentRerankDefaultModel(model)
+    else if (modelType === ModelTypeEnum.speech2text)
+      changeCurrentSpeech2textDefaultModel(model)
+    else if (modelType === ModelTypeEnum.tts)
+      changeCurrentTTSDefaultModel(model)
+
+    if (!changedModelTypes.includes(modelType))
+      setChangedModelTypes([...changedModelTypes, modelType])
+  }
+  const handleSave = async () => {
+    const res = await updateDefaultModel({
+      url: '/workspaces/current/default-model',
+      body: {
+        model_settings: [ModelTypeEnum.textGeneration, ModelTypeEnum.textEmbedding, ModelTypeEnum.rerank, ModelTypeEnum.speech2text, ModelTypeEnum.tts].map((modelType) => {
+          return {
+            model_type: modelType,
+            provider: getCurrentDefaultModelByModelType(modelType)?.provider,
+            model: getCurrentDefaultModelByModelType(modelType)?.model,
+          }
+        }),
+      },
+    })
+    if (res.result === 'success') {
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      setOpen(false)
+
+      changedModelTypes.forEach((modelType) => {
+        if (modelType === ModelTypeEnum.textGeneration)
+          updateModelList(modelType)
+        else if (modelType === ModelTypeEnum.textEmbedding)
+          updateModelList(modelType)
+        else if (modelType === ModelTypeEnum.rerank)
+          updateModelList(modelType)
+        else if (modelType === ModelTypeEnum.speech2text)
+          updateModelList(modelType)
+        else if (modelType === ModelTypeEnum.tts)
+          updateModelList(modelType)
+      })
+    }
+  }
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: 4,
+        crossAxis: 8,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div className={`
+          flex items-center px-2 h-6 text-xs text-gray-700 cursor-pointer bg-white rounded-md border-[0.5px] border-gray-200 shadow-xs
+          hover:bg-gray-100 hover:shadow-none
+          ${open && 'bg-gray-100 shadow-none'}
+        `}>
+          <Settings01 className='mr-1 w-3 h-3 text-gray-500' />
+          {t('common.modelProvider.systemModelSettings')}
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-50'>
+        <div className='pt-4 w-[360px] rounded-xl border-[0.5px] border-black/5 bg-white shadow-xl'>
+          <div className='px-6 py-1'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+              {t('common.modelProvider.systemReasoningModel.key')}
+              <Tooltip
+                popupContent={
+                  <div className='w-[261px] text-gray-500'>
+                    {t('common.modelProvider.systemReasoningModel.tip')}
+                  </div>
+                }
+                triggerClassName='ml-0.5 w-4 h-4 shrink-0'
+              />
+            </div>
+            <div>
+              <ModelSelector
+                defaultModel={currentTextGenerationDefaultModel}
+                modelList={textGenerationModelList}
+                onSelect={model => handleChangeDefaultModel(ModelTypeEnum.textGeneration, model)}
+              />
+            </div>
+          </div>
+          <div className='px-6 py-1'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+              {t('common.modelProvider.embeddingModel.key')}
+              <Tooltip
+                popupContent={
+                  <div className='w-[261px] text-gray-500'>
+                    {t('common.modelProvider.embeddingModel.tip')}
+                  </div>
+                }
+                triggerClassName='ml-0.5 w-4 h-4 shrink-0'
+              />
+            </div>
+            <div>
+              <ModelSelector
+                defaultModel={currentEmbeddingsDefaultModel}
+                modelList={embeddingModelList}
+                onSelect={model => handleChangeDefaultModel(ModelTypeEnum.textEmbedding, model)}
+              />
+            </div>
+          </div>
+          <div className='px-6 py-1'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+              {t('common.modelProvider.rerankModel.key')}
+              <Tooltip
+                popupContent={
+                  <div className='w-[261px] text-gray-500'>
+                    {t('common.modelProvider.rerankModel.tip')}
+                  </div>
+                }
+                triggerClassName='ml-0.5 w-4 h-4 shrink-0'
+              />
+            </div>
+            <div>
+              <ModelSelector
+                defaultModel={currentRerankDefaultModel}
+                modelList={rerankModelList}
+                onSelect={model => handleChangeDefaultModel(ModelTypeEnum.rerank, model)}
+              />
+            </div>
+          </div>
+          <div className='px-6 py-1'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+              {t('common.modelProvider.speechToTextModel.key')}
+              <Tooltip
+                popupContent={
+                  <div className='w-[261px] text-gray-500'>
+                    {t('common.modelProvider.speechToTextModel.tip')}
+                  </div>
+                }
+                triggerClassName='ml-0.5 w-4 h-4 shrink-0'
+              />
+            </div>
+            <div>
+              <ModelSelector
+                defaultModel={currentSpeech2textDefaultModel}
+                modelList={speech2textModelList}
+                onSelect={model => handleChangeDefaultModel(ModelTypeEnum.speech2text, model)}
+              />
+            </div>
+          </div>
+          <div className='px-6 py-1'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+              {t('common.modelProvider.ttsModel.key')}
+              <Tooltip
+                popupContent={
+                  <div className='w-[261px] text-gray-500'>
+                    {t('common.modelProvider.ttsModel.tip')}
+                  </div>
+                }
+                triggerClassName='ml-0.5 w-4 h-4 shrink-0'
+              />
+            </div>
+            <div>
+              <ModelSelector
+                defaultModel={currentTTSDefaultModel}
+                modelList={ttsModelList}
+                onSelect={model => handleChangeDefaultModel(ModelTypeEnum.tts, model)}
+              />
+            </div>
+          </div>
+          <div className='flex items-center justify-end px-6 py-4'>
+            <Button
+              onClick={() => setOpen(false)}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+            <Button
+              className='ml-2'
+              variant='primary'
+              onClick={handleSave}
+              disabled={!isCurrentWorkspaceManager}
+            >
+              {t('common.operation.save')}
+            </Button>
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default SystemModel

dify_0.15.3/web/app/components/header/account-setting/model-provider-page/utils.ts

@@ -0,0 +1,197 @@
+import { ValidatedStatus } from '../key-validator/declarations'
+import type {
+  CredentialFormSchemaRadio,
+  CredentialFormSchemaTextInput,
+  FormValue,
+  ModelLoadBalancingConfig,
+} from './declarations'
+import {
+  ConfigurationMethodEnum,
+  FormTypeEnum,
+  MODEL_TYPE_TEXT,
+  ModelTypeEnum,
+} from './declarations'
+import {
+  deleteModelProvider,
+  setModelProvider,
+  validateModelLoadBalancingCredentials,
+  validateModelProvider,
+} from '@/service/common'
+
+export const MODEL_PROVIDER_QUOTA_GET_PAID = ['anthropic', 'openai', 'azure_openai']
+
+export const DEFAULT_BACKGROUND_COLOR = '#F3F4F6'
+
+export const isNullOrUndefined = (value: any) => {
+  return value === undefined || value === null
+}
+
+export const validateCredentials = async (predefined: boolean, provider: string, v: FormValue) => {
+  let body, url
+
+  if (predefined) {
+    body = {
+      credentials: v,
+    }
+    url = `/workspaces/current/model-providers/${provider}/credentials/validate`
+  }
+  else {
+    const { __model_name, __model_type, ...credentials } = v
+    body = {
+      model: __model_name,
+      model_type: __model_type,
+      credentials,
+    }
+    url = `/workspaces/current/model-providers/${provider}/models/credentials/validate`
+  }
+  try {
+    const res = await validateModelProvider({ url, body })
+    if (res.result === 'success')
+      return Promise.resolve({ status: ValidatedStatus.Success })
+    else
+      return Promise.resolve({ status: ValidatedStatus.Error, message: res.error || 'error' })
+  }
+  catch (e: any) {
+    return Promise.resolve({ status: ValidatedStatus.Error, message: e.message })
+  }
+}
+
+export const validateLoadBalancingCredentials = async (predefined: boolean, provider: string, v: FormValue, id?: string): Promise<{
+  status: ValidatedStatus
+  message?: string
+}> => {
+  const { __model_name, __model_type, ...credentials } = v
+  try {
+    const res = await validateModelLoadBalancingCredentials({
+      url: `/workspaces/current/model-providers/${provider}/models/load-balancing-configs/${id ? `${id}/` : ''}credentials-validate`,
+      body: {
+        model: __model_name,
+        model_type: __model_type,
+        credentials,
+      },
+    })
+    if (res.result === 'success')
+      return Promise.resolve({ status: ValidatedStatus.Success })
+    else
+      return Promise.resolve({ status: ValidatedStatus.Error, message: res.error || 'error' })
+  }
+  catch (e: any) {
+    return Promise.resolve({ status: ValidatedStatus.Error, message: e.message })
+  }
+}
+
+export const saveCredentials = async (predefined: boolean, provider: string, v: FormValue, loadBalancing?: ModelLoadBalancingConfig) => {
+  let body, url
+
+  if (predefined) {
+    body = {
+      config_from: ConfigurationMethodEnum.predefinedModel,
+      credentials: v,
+      load_balancing: loadBalancing,
+    }
+    url = `/workspaces/current/model-providers/${provider}`
+  }
+  else {
+    const { __model_name, __model_type, ...credentials } = v
+    body = {
+      model: __model_name,
+      model_type: __model_type,
+      credentials,
+      load_balancing: loadBalancing,
+    }
+    url = `/workspaces/current/model-providers/${provider}/models`
+  }
+
+  return setModelProvider({ url, body })
+}
+
+export const savePredefinedLoadBalancingConfig = async (provider: string, v: FormValue, loadBalancing?: ModelLoadBalancingConfig) => {
+  const { __model_name, __model_type, ...credentials } = v
+  const body = {
+    config_from: ConfigurationMethodEnum.predefinedModel,
+    model: __model_name,
+    model_type: __model_type,
+    credentials,
+    load_balancing: loadBalancing,
+  }
+  const url = `/workspaces/current/model-providers/${provider}/models`
+
+  return setModelProvider({ url, body })
+}
+
+export const removeCredentials = async (predefined: boolean, provider: string, v: FormValue) => {
+  let url = ''
+  let body
+
+  if (predefined) {
+    url = `/workspaces/current/model-providers/${provider}`
+  }
+  else {
+    if (v) {
+      const { __model_name, __model_type } = v
+      body = {
+        model: __model_name,
+        model_type: __model_type,
+      }
+      url = `/workspaces/current/model-providers/${provider}/models`
+    }
+  }
+
+  return deleteModelProvider({ url, body })
+}
+
+export const sizeFormat = (size: number) => {
+  const remainder = Math.floor(size / 1000)
+  if (remainder < 1)
+    return `${size}`
+  else
+    return `${remainder}K`
+}
+
+export const modelTypeFormat = (modelType: ModelTypeEnum) => {
+  if (modelType === ModelTypeEnum.textEmbedding)
+    return 'TEXT EMBEDDING'
+
+  return modelType.toLocaleUpperCase()
+}
+
+export const genModelTypeFormSchema = (modelTypes: ModelTypeEnum[]) => {
+  return {
+    type: FormTypeEnum.radio,
+    label: {
+      zh_Hans: '模型类型',
+      en_US: 'Model Type',
+    },
+    variable: '__model_type',
+    default: modelTypes[0],
+    required: true,
+    show_on: [],
+    options: modelTypes.map((modelType: ModelTypeEnum) => {
+      return {
+        value: modelType,
+        label: {
+          zh_Hans: MODEL_TYPE_TEXT[modelType],
+          en_US: MODEL_TYPE_TEXT[modelType],
+        },
+        show_on: [],
+      }
+    }),
+  } as CredentialFormSchemaRadio
+}
+
+export const genModelNameFormSchema = (model?: Pick<CredentialFormSchemaTextInput, 'label' | 'placeholder'>) => {
+  return {
+    type: FormTypeEnum.textInput,
+    label: model?.label || {
+      zh_Hans: '模型名称',
+      en_US: 'Model Name',
+    },
+    variable: '__model_name',
+    required: true,
+    show_on: [],
+    placeholder: model?.placeholder || {
+      zh_Hans: '请输入模型名称',
+      en_US: 'Please enter model name',
+    },
+  } as CredentialFormSchemaTextInput
+}

dify_0.15.3/web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx

@@ -0,0 +1,80 @@
+import { useTranslation } from 'react-i18next'
+import Image from 'next/image'
+import SerpapiLogo from '../../assets/serpapi.png'
+import KeyValidator from '../key-validator'
+import type { Form, ValidateValue } from '../key-validator/declarations'
+import { updatePluginKey, validatePluginKey } from './utils'
+import { useToastContext } from '@/app/components/base/toast'
+import type { PluginProvider } from '@/models/common'
+import { useAppContext } from '@/context/app-context'
+
+type SerpapiPluginProps = {
+  plugin: PluginProvider
+  onUpdate: () => void
+}
+const SerpapiPlugin = ({
+  plugin,
+  onUpdate,
+}: SerpapiPluginProps) => {
+  const { t } = useTranslation()
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const { notify } = useToastContext()
+
+  const forms: Form[] = [{
+    key: 'api_key',
+    title: t('common.plugin.serpapi.apiKey'),
+    placeholder: t('common.plugin.serpapi.apiKeyPlaceholder'),
+    value: plugin.credentials?.api_key,
+    validate: {
+      before: (v) => {
+        if (v?.api_key)
+          return true
+      },
+      run: async (v) => {
+        return validatePluginKey('serpapi', {
+          credentials: {
+            api_key: v?.api_key,
+          },
+        })
+      },
+    },
+    handleFocus: (v, dispatch) => {
+      if (v.api_key === plugin.credentials?.api_key)
+        dispatch({ ...v, api_key: '' })
+    },
+  }]
+
+  const handleSave = async (v: ValidateValue) => {
+    if (!v?.api_key || v?.api_key === plugin.credentials?.api_key)
+      return
+
+    const res = await updatePluginKey('serpapi', {
+      credentials: {
+        api_key: v?.api_key,
+      },
+    })
+
+    if (res.status === 'success') {
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      onUpdate()
+      return true
+    }
+  }
+
+  return (
+    <KeyValidator
+      type='serpapi'
+      title={<Image alt='serpapi logo' src={SerpapiLogo} width={64} />}
+      status={plugin.credentials?.api_key ? 'success' : 'add'}
+      forms={forms}
+      keyFrom={{
+        text: t('common.plugin.serpapi.keyFrom'),
+        link: 'https://serpapi.com/manage-api-key',
+      }}
+      onSave={handleSave}
+      disabled={!isCurrentWorkspaceManager}
+    />
+  )
+}
+
+export default SerpapiPlugin

dify_0.15.3/web/app/components/header/account-setting/plugin-page/index.tsx

@@ -0,0 +1,38 @@
+import useSWR from 'swr'
+import { LockClosedIcon } from '@heroicons/react/24/solid'
+import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
+import SerpapiPlugin from './SerpapiPlugin'
+import { fetchPluginProviders } from '@/service/common'
+import type { PluginProvider } from '@/models/common'
+
+const PluginPage = () => {
+  const { t } = useTranslation()
+  const { data: plugins, mutate } = useSWR('/workspaces/current/tool-providers', fetchPluginProviders)
+
+  const Plugin_MAP: Record<string, (plugin: PluginProvider) => JSX.Element> = {
+    serpapi: (plugin: PluginProvider) => <SerpapiPlugin key='serpapi' plugin={plugin} onUpdate={() => mutate()} />,
+  }
+
+  return (
+    <div className='pb-7'>
+      <div>
+        {plugins?.map(plugin => Plugin_MAP[plugin.tool_name](plugin))}
+      </div>
+      <div className='fixed bottom-0 w-[472px] h-[42px] flex items-center bg-white text-xs text-gray-500'>
+        <LockClosedIcon className='w-3 h-3 mr-1' />
+        {t('common.provider.encrypted.front')}
+        <Link
+          className='text-primary-600 mx-1'
+          target='_blank' rel='noopener noreferrer'
+          href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
+        >
+          PKCS1_OAEP
+        </Link>
+        {t('common.provider.encrypted.back')}
+      </div>
+    </div>
+  )
+}
+
+export default PluginPage

dify_0.15.3/web/app/components/header/account-setting/plugin-page/utils.ts

@@ -0,0 +1,34 @@
+import { ValidatedStatus } from '../key-validator/declarations'
+import { updatePluginProviderAIKey, validatePluginProviderKey } from '@/service/common'
+
+export const validatePluginKey = async (pluginType: string, body: any) => {
+  try {
+    const res = await validatePluginProviderKey({
+      url: `/workspaces/current/tool-providers/${pluginType}/credentials-validate`,
+      body,
+    })
+    if (res.result === 'success')
+      return Promise.resolve({ status: ValidatedStatus.Success })
+    else
+      return Promise.resolve({ status: ValidatedStatus.Error, message: res.error })
+  }
+  catch (e: any) {
+    return Promise.resolve({ status: ValidatedStatus.Error, message: e.message })
+  }
+}
+
+export const updatePluginKey = async (pluginType: string, body: any) => {
+  try {
+    const res = await updatePluginProviderAIKey({
+      url: `/workspaces/current/tool-providers/${pluginType}/credentials`,
+      body,
+    })
+    if (res.result === 'success')
+      return Promise.resolve({ status: ValidatedStatus.Success })
+    else
+      return Promise.resolve({ status: ValidatedStatus.Error, message: res.error })
+  }
+  catch (e: any) {
+    return Promise.resolve({ status: ValidatedStatus.Error, message: e.message })
+  }
+}

dify_0.15.3/web/app/components/header/app-back/index.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ArrowLeftIcon, Squares2X2Icon } from '@heroicons/react/24/solid'
+import classNames from '@/utils/classnames'
+import type { AppDetailResponse } from '@/models/app'
+
+type IAppBackProps = {
+  curApp: AppDetailResponse
+}
+export default function AppBack({ curApp }: IAppBackProps) {
+  const { t } = useTranslation()
+
+  const [hovered, setHovered] = useState(false)
+
+  return (
+    <div
+      className={classNames(`
+        flex items-center h-7 pl-2.5 pr-2
+        text-[#1C64F2] font-semibold cursor-pointer
+        rounded-[10px]
+        ${curApp && 'hover:bg-[#EBF5FF]'}
+      `)}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {
+        (hovered && curApp)
+          ? <ArrowLeftIcon className='mr-1 w-[18px] h-[18px]' />
+          : <Squares2X2Icon className='mr-1 w-[18px] h-[18px]' />
+      }
+      {t('common.menus.apps')}
+    </div>
+  )
+}

dify_0.15.3/web/app/components/header/app-nav/index.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'next/navigation'
+import useSWRInfinite from 'swr/infinite'
+import { flatten } from 'lodash-es'
+import produce from 'immer'
+import {
+  RiRobot2Fill,
+  RiRobot2Line,
+} from '@remixicon/react'
+import Nav from '../nav'
+import { type NavItem } from '../nav/nav-selector'
+import { fetchAppList } from '@/service/apps'
+import CreateAppTemplateDialog from '@/app/components/app/create-app-dialog'
+import CreateAppModal from '@/app/components/app/create-app-modal'
+import CreateFromDSLModal from '@/app/components/app/create-from-dsl-modal'
+import type { AppListResponse } from '@/models/app'
+import { useAppContext } from '@/context/app-context'
+import { useStore as useAppStore } from '@/app/components/app/store'
+
+const getKey = (
+  pageIndex: number,
+  previousPageData: AppListResponse,
+  activeTab: string,
+  keywords: string,
+) => {
+  if (!pageIndex || previousPageData.has_more) {
+    const params: any = { url: 'apps', params: { page: pageIndex + 1, limit: 30, name: keywords } }
+
+    if (activeTab !== 'all')
+      params.params.mode = activeTab
+    else
+      delete params.params.mode
+
+    return params
+  }
+  return null
+}
+
+const AppNav = () => {
+  const { t } = useTranslation()
+  const { appId } = useParams()
+  const { isCurrentWorkspaceEditor } = useAppContext()
+  const appDetail = useAppStore(state => state.appDetail)
+  const [showNewAppDialog, setShowNewAppDialog] = useState(false)
+  const [showNewAppTemplateDialog, setShowNewAppTemplateDialog] = useState(false)
+  const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
+  const [navItems, setNavItems] = useState<NavItem[]>([])
+
+  const { data: appsData, setSize, mutate } = useSWRInfinite(
+    appId
+      ? (pageIndex: number, previousPageData: AppListResponse) => getKey(pageIndex, previousPageData, 'all', '')
+      : () => null,
+    fetchAppList,
+    { revalidateFirstPage: false },
+  )
+
+  const handleLoadmore = useCallback(() => {
+    setSize(size => size + 1)
+  }, [setSize])
+
+  const openModal = (state: string) => {
+    if (state === 'blank')
+      setShowNewAppDialog(true)
+    if (state === 'template')
+      setShowNewAppTemplateDialog(true)
+    if (state === 'dsl')
+      setShowCreateFromDSLModal(true)
+  }
+
+  useEffect(() => {
+    if (appsData) {
+      const appItems = flatten(appsData?.map(appData => appData.data))
+      const navItems = appItems.map((app) => {
+        const link = ((isCurrentWorkspaceEditor, app) => {
+          if (!isCurrentWorkspaceEditor) {
+            return `/app/${app.id}/overview`
+          }
+          else {
+            if (app.mode === 'workflow' || app.mode === 'advanced-chat')
+              return `/app/${app.id}/workflow`
+            else
+              return `/app/${app.id}/configuration`
+          }
+        })(isCurrentWorkspaceEditor, app)
+        return {
+          id: app.id,
+          icon_type: app.icon_type,
+          icon: app.icon,
+          icon_background: app.icon_background,
+          icon_url: app.icon_url,
+          name: app.name,
+          mode: app.mode,
+          link,
+        }
+      })
+      setNavItems(navItems)
+    }
+  }, [appsData, isCurrentWorkspaceEditor, setNavItems])
+
+  // update current app name
+  useEffect(() => {
+    if (appDetail) {
+      const newNavItems = produce(navItems, (draft: NavItem[]) => {
+        navItems.forEach((app, index) => {
+          if (app.id === appDetail.id)
+            draft[index].name = appDetail.name
+        })
+      })
+      setNavItems(newNavItems)
+    }
+  }, [appDetail, navItems])
+
+  return (
+    <>
+      <Nav
+        isApp
+        icon={<RiRobot2Line className='w-4 h-4' />}
+        activeIcon={<RiRobot2Fill className='w-4 h-4' />}
+        text={t('common.menus.apps')}
+        activeSegment={['apps', 'app']}
+        link='/apps'
+        curNav={appDetail}
+        navs={navItems}
+        createText={t('common.menus.newApp')}
+        onCreate={openModal}
+        onLoadmore={handleLoadmore}
+      />
+      <CreateAppModal
+        show={showNewAppDialog}
+        onClose={() => setShowNewAppDialog(false)}
+        onSuccess={() => mutate()}
+      />
+      <CreateAppTemplateDialog
+        show={showNewAppTemplateDialog}
+        onClose={() => setShowNewAppTemplateDialog(false)}
+        onSuccess={() => mutate()}
+      />
+      <CreateFromDSLModal
+        show={showCreateFromDSLModal}
+        onClose={() => setShowCreateFromDSLModal(false)}
+        onSuccess={() => mutate()}
+      />
+    </>
+  )
+}
+
+export default AppNav

dify_0.15.3/web/app/components/header/app-selector/index.tsx

@@ -0,0 +1,111 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { Fragment, useState } from 'react'
+import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid'
+import { Menu, Transition } from '@headlessui/react'
+import { useRouter } from 'next/navigation'
+import Indicator from '../indicator'
+import type { AppDetailResponse } from '@/models/app'
+import CreateAppDialog from '@/app/components/app/create-app-dialog'
+import AppIcon from '@/app/components/base/app-icon'
+import { useAppContext } from '@/context/app-context'
+
+type IAppSelectorProps = {
+  appItems: AppDetailResponse[]
+  curApp: AppDetailResponse
+}
+
+export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
+  const router = useRouter()
+  const { isCurrentWorkspaceEditor } = useAppContext()
+  const [showNewAppDialog, setShowNewAppDialog] = useState(false)
+  const { t } = useTranslation()
+
+  const itemClassName = `
+    flex items-center w-full h-10 px-3 text-gray-700 text-[14px]
+    rounded-lg font-normal hover:bg-gray-100 cursor-pointer
+  `
+
+  return (
+    <div className="">
+      <Menu as="div" className="relative inline-block text-left">
+        <div>
+          <Menu.Button
+            className="
+              inline-flex items-center w-full h-7 justify-center
+              rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold
+              text-[#1C64F2] hover:bg-[#EBF5FF]
+            "
+          >
+            {curApp?.name}
+            <ChevronDownIcon
+              className="w-3 h-3 ml-1"
+              aria-hidden="true"
+            />
+          </Menu.Button>
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items
+            className="
+              absolute -left-11 right-0 mt-1.5 w-60 max-w-80
+              divide-y divide-gray-100 origin-top-right rounded-lg bg-white
+              shadow-lg
+            "
+          >
+            {!!appItems.length && (<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }}>
+              {
+                appItems.map((app: AppDetailResponse) => (
+                  <Menu.Item key={app.id}>
+                    <div className={itemClassName} onClick={() =>
+                      router.push(`/app/${app.id}/${isCurrentWorkspaceEditor ? 'configuration' : 'overview'}`)
+                    }>
+                      <div className='relative w-6 h-6 mr-2 bg-[#D5F5F6] rounded-[6px]'>
+                        <AppIcon size='tiny' />
+                        <div className='flex justify-center items-center absolute -right-0.5 -bottom-0.5 w-2.5 h-2.5 bg-white rounded'>
+                          <Indicator />
+                        </div>
+                      </div>
+                      {app.name}
+                    </div>
+                  </Menu.Item>
+                ))
+              }
+            </div>)}
+            {isCurrentWorkspaceEditor && <Menu.Item>
+              <div className='p-1' onClick={() => setShowNewAppDialog(true)}>
+                <div
+                  className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100'
+                >
+                  <div
+                    className='
+                      flex justify-center items-center
+                      ml-4 mr-2 w-6 h-6 bg-gray-100 rounded-[6px]
+                      border-[0.5px] border-gray-200 border-dashed
+                    '
+                  >
+                    <PlusIcon className='w-4 h-4 text-gray-500' />
+                  </div>
+                  <div className='font-normal text-[14px] text-gray-700'>{t('common.menus.newApp')}</div>
+                </div>
+              </div>
+            </Menu.Item>
+            }
+          </Menu.Items>
+        </Transition>
+      </Menu>
+      <CreateAppDialog
+        show={showNewAppDialog}
+        onClose={() => setShowNewAppDialog(false)}
+        onSuccess={() => {}}
+      />
+    </div>
+  )
+}

dify_0.15.3/web/app/components/header/assets/alpha.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 5.24975C5.58579 5.24975 5.25 5.58554 5.25 5.99975C5.25 6.41396 5.58579 6.74975 6 6.74975C6.41421 6.74975 6.75 6.41396 6.75 5.99975C6.75 5.58554 6.41421 5.24975 6 5.24975Z" fill="#344054"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.55961 1.2874C7.06059 1.49287 6.53398 1.7771 5.99996 2.13007C5.46595 1.77712 4.93936 1.4929 4.44036 1.28743C3.8603 1.04858 3.29372 0.906291 2.7826 0.902457C2.269 0.898605 1.77103 1.03634 1.40379 1.40358C1.03655 1.77082 0.89882 2.26879 0.902672 2.78238C0.906505 3.2935 1.0488 3.86008 1.28765 4.44015C1.49312 4.93915 1.77733 5.46574 2.13029 5.99975C1.77733 6.53376 1.49311 7.06036 1.28764 7.55936C1.04879 8.13942 0.9065 8.706 0.902666 9.21712C0.898814 9.73072 1.03655 10.2287 1.40379 10.5959C1.77103 10.9632 2.269 11.1009 2.78259 11.097C3.29371 11.0932 3.86029 10.9509 4.44035 10.7121C4.93935 10.5066 5.46595 10.2224 5.99996 9.86944C6.53398 10.2224 7.06059 10.5066 7.55961 10.7121C8.13967 10.951 8.70625 11.0933 9.21737 11.0971C9.73097 11.1009 10.2289 10.9632 10.5962 10.596C10.9634 10.2287 11.1012 9.73075 11.0973 9.21716C11.0935 8.70604 10.9512 8.13946 10.7123 7.5594C10.5068 7.06038 10.2226 6.53377 9.86966 5.99975C10.2226 5.46573 10.5068 4.93912 10.7123 4.44011C10.9512 3.86005 11.0935 3.29347 11.0973 2.78235C11.1011 2.26875 10.9634 1.77078 10.5962 1.40354C10.2289 1.0363 9.73096 0.89857 9.21737 0.902422C8.70625 0.906256 8.13967 1.04855 7.55961 1.2874ZM7.94035 2.21207C7.60184 2.35146 7.2419 2.53581 6.87023 2.7619C7.29274 3.09639 7.71306 3.47021 8.12131 3.87845C8.52954 4.28668 8.90334 4.70698 9.23781 5.12947C9.46391 4.75781 9.64826 4.39787 9.78764 4.05936C9.99666 3.55175 10.0948 3.11609 10.0973 2.77485C10.0999 2.43608 10.01 2.23156 9.88907 2.11065C9.76815 1.98973 9.56364 1.89985 9.22487 1.90239C8.88362 1.90495 8.44796 2.00306 7.94035 2.21207ZM2.21232 4.0594C2.35171 4.39789 2.53604 4.75782 2.76213 5.12947C3.09661 4.70697 3.47042 4.28665 3.87866 3.87842C4.28689 3.47019 4.70719 3.09639 5.12968 2.76191C4.75803 2.53582 4.3981 2.35149 4.05961 2.21211C3.552 2.00309 3.11634 1.90499 2.7751 1.90243C2.43633 1.89989 2.23181 1.98977 2.1109 2.11068C1.98998 2.2316 1.9001 2.43611 1.90264 2.77488C1.9052 3.11613 2.00331 3.55179 2.21232 4.0594ZM4.58577 4.58552C4.11988 5.05141 3.70722 5.5288 3.35371 5.99975C3.70722 6.4707 4.11988 6.94809 4.58577 7.41398C5.05165 7.87986 5.52902 8.29251 5.99996 8.64601C6.47091 8.2925 6.9483 7.87984 7.41419 7.41395C7.88007 6.94807 8.29272 6.47069 8.64623 5.99975C8.29272 5.52881 7.88008 5.05143 7.4142 4.58556C6.94831 4.11966 6.47091 3.70701 5.99996 3.35349C5.52902 3.707 5.05164 4.11965 4.58577 4.58552ZM2.21232 7.94011C2.3517 7.60161 2.53604 7.24168 2.76213 6.87003C3.09661 7.29253 3.47042 7.71285 3.87866 8.12109C4.28689 8.52932 4.70719 8.90312 5.12968 9.23759C4.75803 9.46368 4.3981 9.64802 4.05961 9.7874C3.552 9.99641 3.11634 10.0945 2.77509 10.0971C2.43632 10.0996 2.23181 10.0097 2.11089 9.88882C1.98998 9.76791 1.9001 9.5634 1.90264 9.22462C1.9052 8.88338 2.0033 8.44772 2.21232 7.94011ZM7.94036 9.78743C7.60185 9.64804 7.2419 9.4637 6.87023 9.2376C7.29274 8.90311 7.71306 8.5293 8.1213 8.12106C8.52953 7.71282 8.90334 7.29252 9.23782 6.87003C9.46392 7.24169 9.64826 7.60163 9.78765 7.94015C9.99666 8.44775 10.0948 8.88342 10.0973 9.22466C10.0999 9.56343 10.01 9.76794 9.88907 9.88886C9.76816 10.0098 9.56364 10.0997 9.22487 10.0971C8.88363 10.0946 8.44797 9.99645 7.94036 9.78743Z" fill="#344054"/>
+</svg>

dify_0.15.3/web/app/components/header/assets/anthropic.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="6" fill="#CA9F7B"/>
+<g clip-path="url(#clip0_3907_39360)">
+<path d="M14.9613 7.13043H12.8476L16.7022 16.8696H18.8159L14.9613 7.13043ZM8.85457 7.13043L5 16.8696H7.15539L7.94365 14.8243H11.9763L12.7645 16.8696H14.9199L11.0653 7.13043H8.85457ZM8.64091 13.0156L9.95996 9.59291L11.279 13.0156H8.64091Z" fill="#191918"/>
+</g>
+<defs>
+<clipPath id="clip0_3907_39360">
+<rect width="14" height="9.73913" fill="white" transform="translate(5 7.13043)"/>
+</clipPath>
+</defs>
+</svg>

dify_0.15.3/web/app/components/header/assets/bitbucket.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_660_1978)">
+<path d="M16.1064 1.77422C16.1184 1.7048 16.115 1.63359 16.0965 1.56561C16.078 1.49763 16.0448 1.43453 15.9993 1.38074C15.9538 1.32696 15.8971 1.2838 15.8331 1.25431C15.7691 1.22481 15.6994 1.20969 15.629 1.21001H0.602662C0.531806 1.20898 0.461593 1.22358 0.397019 1.25276C0.332445 1.28195 0.275097 1.32501 0.229055 1.37888C0.183014 1.43275 0.14941 1.4961 0.130636 1.56443C0.111861 1.63276 0.108377 1.70439 0.120432 1.77422L2.31458 15.2285C2.33294 15.3417 2.3911 15.4448 2.47861 15.519C2.56611 15.5933 2.67723 15.6339 2.79199 15.6335H13.4493C13.6904 15.6335 13.8929 15.4648 13.9315 15.2285L16.1064 1.77422ZM9.78916 10.7823H6.4473L5.54553 6.05643H10.5993L9.78916 10.7823Z" fill="#2684FF"/>
+</g>
+<defs>
+<clipPath id="clip0_660_1978">
+<rect width="16" height="16" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

dify_0.15.3/web/app/components/header/assets/file.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3333 6.99992V4.53325C13.3333 3.41315 13.3333 2.85309 13.1153 2.42527C12.9236 2.04895 12.6176 1.74299 12.2413 1.55124C11.8135 1.33325 11.2534 1.33325 10.1333 1.33325H5.86666C4.74655 1.33325 4.1865 1.33325 3.75868 1.55124C3.38235 1.74299 3.07639 2.04895 2.88464 2.42527C2.66666 2.85309 2.66666 3.41315 2.66666 4.53325V11.4666C2.66666 12.5867 2.66666 13.1467 2.88464 13.5746C3.07639 13.9509 3.38235 14.2569 3.75868 14.4486C4.1865 14.6666 4.74655 14.6666 5.86666 14.6666H7.99999M9.33332 7.33325H5.33332M6.66666 9.99992H5.33332M10.6667 4.66659H5.33332M12 13.9999V9.99992M9.99999 11.9999H14" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dify_0.15.3/web/app/components/header/assets/github.svg

@@ -0,0 +1,17 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_131_1011)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0003 0.5C9.15149 0.501478 6.39613 1.51046 4.22687 3.34652C2.05761 5.18259 0.615903 7.72601 0.159545 10.522C-0.296814 13.318 0.261927 16.1842 1.73587 18.6082C3.20981 21.0321 5.50284 22.8558 8.20493 23.753C8.80105 23.8636 9.0256 23.4941 9.0256 23.18C9.0256 22.8658 9.01367 21.955 9.0097 20.9592C5.6714 21.6804 4.96599 19.5505 4.96599 19.5505C4.42152 18.1674 3.63464 17.8039 3.63464 17.8039C2.54571 17.065 3.71611 17.0788 3.71611 17.0788C4.92227 17.1637 5.55616 18.3097 5.55616 18.3097C6.62521 20.1333 8.36389 19.6058 9.04745 19.2976C9.15475 18.5251 9.46673 17.9995 9.8105 17.7012C7.14383 17.4008 4.34204 16.3774 4.34204 11.8054C4.32551 10.6197 4.76802 9.47305 5.57801 8.60268C5.45481 8.30236 5.04348 7.08923 5.69524 5.44143C5.69524 5.44143 6.7027 5.12135 8.9958 6.66444C10.9627 6.12962 13.0379 6.12962 15.0047 6.66444C17.2958 5.12135 18.3013 5.44143 18.3013 5.44143C18.9551 7.08528 18.5437 8.29841 18.4205 8.60268C19.2331 9.47319 19.6765 10.6218 19.6585 11.8094C19.6585 16.3912 16.8507 17.4008 14.1801 17.6952C14.6093 18.0667 14.9928 18.7918 14.9928 19.9061C14.9928 21.5026 14.9789 22.7868 14.9789 23.18C14.9789 23.4981 15.1955 23.8695 15.8035 23.753C18.5059 22.8557 20.7992 21.0317 22.2731 18.6073C23.747 16.183 24.3055 13.3163 23.8486 10.5201C23.3917 7.7238 21.9493 5.18035 19.7793 3.34461C17.6093 1.50886 14.8533 0.500541 12.0042 0.5H12.0003Z" fill="#191717"/>
+<path d="M4.54444 17.6321C4.5186 17.6914 4.42322 17.7092 4.34573 17.6677C4.26823 17.6262 4.21061 17.5491 4.23843 17.4879C4.26625 17.4266 4.35964 17.4108 4.43714 17.4523C4.51463 17.4938 4.57424 17.5729 4.54444 17.6321Z" fill="#191717"/>
+<path d="M5.03123 18.1714C4.99008 18.192 4.943 18.1978 4.89805 18.1877C4.8531 18.1776 4.81308 18.1523 4.78483 18.1161C4.70734 18.0331 4.69143 17.9185 4.75104 17.8671C4.81066 17.8157 4.91797 17.8395 4.99546 17.9224C5.07296 18.0054 5.09084 18.12 5.03123 18.1714Z" fill="#191717"/>
+<path d="M5.50425 18.857C5.43072 18.9084 5.30553 18.857 5.23598 18.7543C5.21675 18.7359 5.20146 18.7138 5.19101 18.6893C5.18056 18.6649 5.17517 18.6386 5.17517 18.612C5.17517 18.5855 5.18056 18.5592 5.19101 18.5347C5.20146 18.5103 5.21675 18.4882 5.23598 18.4698C5.3095 18.4204 5.4347 18.4698 5.50425 18.5705C5.57379 18.6713 5.57578 18.8057 5.50425 18.857V18.857Z" fill="#191717"/>
+<path d="M6.14612 19.5207C6.08054 19.5939 5.94741 19.5741 5.83812 19.4753C5.72883 19.3765 5.70299 19.2422 5.76857 19.171C5.83414 19.0999 5.96727 19.1197 6.08054 19.2165C6.1938 19.3133 6.21566 19.4496 6.14612 19.5207V19.5207Z" fill="#191717"/>
+<path d="M7.04617 19.9081C7.01637 20.001 6.88124 20.0425 6.74612 20.003C6.611 19.9635 6.52158 19.8528 6.54741 19.758C6.57325 19.6631 6.71036 19.6197 6.84747 19.6631C6.98457 19.7066 7.07201 19.8113 7.04617 19.9081Z" fill="#191717"/>
+<path d="M8.02783 19.9752C8.02783 20.072 7.91656 20.155 7.77349 20.1569C7.63042 20.1589 7.51318 20.0799 7.51318 19.9831C7.51318 19.8863 7.62445 19.8033 7.76752 19.8013C7.91059 19.7993 8.02783 19.8764 8.02783 19.9752Z" fill="#191717"/>
+<path d="M8.9419 19.8232C8.95978 19.92 8.86042 20.0207 8.71735 20.0445C8.57428 20.0682 8.4491 20.0109 8.43121 19.916C8.41333 19.8212 8.51666 19.7185 8.65576 19.6928C8.79485 19.6671 8.92401 19.7264 8.9419 19.8232Z" fill="#191717"/>
+</g>
+<defs>
+<clipPath id="clip0_131_1011">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

dify_0.15.3/web/app/components/header/assets/google.svg

@@ -0,0 +1,13 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_729_2080)">
+<path d="M20.3052 10.2302C20.3052 9.55044 20.2501 8.86699 20.1325 8.19824H10.7002V12.0491H16.1016C15.8775 13.291 15.1573 14.3897 14.1027 15.0878V17.5864H17.3252C19.2176 15.8448 20.3052 13.2726 20.3052 10.2302Z" fill="#4285F4"/>
+<path d="M10.6999 20.0008C13.397 20.0008 15.6714 19.1152 17.3286 17.5867L14.1061 15.088C13.2096 15.698 12.0521 16.0434 10.7036 16.0434C8.09474 16.0434 5.88272 14.2833 5.08904 11.917H1.76367V14.4928C3.46127 17.8696 6.91892 20.0008 10.6999 20.0008Z" fill="#34A853"/>
+<path d="M5.08564 11.9172C4.66676 10.6753 4.66676 9.33044 5.08564 8.08848V5.5127H1.76395C0.345611 8.33834 0.345611 11.6674 1.76395 14.493L5.08564 11.9172Z" fill="#FBBC04"/>
+<path d="M10.6999 3.95805C12.1256 3.936 13.5035 4.47247 14.536 5.45722L17.3911 2.60218C15.5833 0.904587 13.1838 -0.0287217 10.6999 0.000673888C6.91892 0.000673888 3.46126 2.13185 1.76367 5.51234L5.08537 8.08813C5.87537 5.71811 8.09106 3.95805 10.6999 3.95805Z" fill="#EA4335"/>
+</g>
+<defs>
+<clipPath id="clip0_729_2080">
+<rect width="20" height="20" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>