feat: add api-based extension & external data tool & moderation (#1459)

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

@@ -7,7 +7,6 @@ import classNames from 'classnames'
 import Link from 'next/link'
 import { Menu, Transition } from '@headlessui/react'
 import Indicator from '../indicator'
-import AccountSetting from '../account-setting'
 import AccountAbout from '../account-about'
 import WorkplaceSelector from './workplace-selector'
 import I18n from '@/context/i18n'
@@ -16,6 +15,7 @@ import { logout } from '@/service/common'
 import { useAppContext } from '@/context/app-context'
 import { ArrowUpRight, ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
+import { useModalContext } from '@/context/modal-context'
 
 export default function AppSelector() {
   const itemClassName = `
@@ -23,12 +23,12 @@ export default function AppSelector() {
     rounded-lg font-normal hover:bg-gray-50 cursor-pointer
   `
   const router = useRouter()
-  const [settingVisible, setSettingVisible] = useState(false)
   const [aboutVisible, setAboutVisible] = useState(false)
 
   const { locale } = useContext(I18n)
   const { t } = useTranslation()
   const { userProfile, langeniusVersionInfo } = useAppContext()
+  const { setShowAccountSettingModal } = useModalContext()
 
   const handleLogout = async () => {
     await logout({
@@ -89,7 +89,7 @@ export default function AppSelector() {
                   </div>
                   <div className="px-1 py-1">
                     <Menu.Item>
-                      <div className={itemClassName} onClick={() => setSettingVisible(true)}>
+                      <div className={itemClassName} onClick={() => setShowAccountSettingModal({ payload: 'account' })}>
                         <div>{t('common.userProfile.settings')}</div>
                       </div>
                     </Menu.Item>
@@ -134,9 +134,6 @@ export default function AppSelector() {
           )
         }
       </Menu>
-      {
-        settingVisible && <AccountSetting onCancel={() => setSettingVisible(false)} />
-      }
       {
         aboutVisible && <AccountAbout onCancel={() => setAboutVisible(false)} langeniusVersionInfo={langeniusVersionInfo} />
       }

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('commosn.apiBasedExtension.title')}</div>
+      <a
+        className='flex items-center mb-2 h-[18px] text-xs text-primary-600'
+        href={t('common.apiBasedExtension.linkUrl') || '/'}
+        target='_blank'
+      >
+        <BookOpen01 className='mr-1 w-3 h-3' />
+        {t('common.apiBasedExtension.link')}
+      </a>
+    </div>
+  )
+}
+
+export default Empty

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

@@ -0,0 +1,53 @@
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+import Item from './item'
+import Empty from './empty'
+import { useModalContext } from '@/context/modal-context'
+import { Plus } from '@/app/components/base/icons/src/vender/line/general'
+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}
+      >
+        <Plus className='mr-2 w-4 h-4' />
+        {t('common.apiBasedExtension.add')}
+      </div>
+    </div>
+  )
+}
+
+export default ApiBasedExtensionPage

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

@@ -0,0 +1,75 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Edit02, Trash03 } 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 ConfirmCommon from '@/app/components/base/confirm/common'
+
+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)}
+        >
+          <Trash03 className='w-4 h-4' />
+        </div>
+      </div>
+      {
+        showDeleteConfirm && (
+          <ConfirmCommon
+            type='danger'
+            isShow={showDeleteConfirm}
+            onCancel={() => setShowDeleteConfirm(false)}
+            title={`${t('common.operation.delete')} “${data.name}”?`}
+            onConfirm={handleDeleteApiBasedExtension}
+            desc={t('common.apiBasedExtension.confirm.desc') || ''}
+            confirmWrapperClassName='!z-30'
+            confirmText={t('common.operation.delete') || ''}
+            confirmBtnClassName='!bg-[#D92D20]'
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default Item

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

@@ -0,0 +1,151 @@
+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={() => {}}
+      wrapperClassName='!z-30'
+      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'
+            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 text-sm font-medium'
+        >
+          {t('common.operation.cancel')}
+        </Button>
+        <Button
+          type='primary'
+          className='text-sm font-medium'
+          disabled={!localeData.name || !localeData.api_endpoint || !localeData.api_key || loading}
+          onClick={handleSave}
+        >
+          {t('common.operation.save')}
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default ApiBasedExtensionModal

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

@@ -0,0 +1,119 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import {
+  ArrowUpRight,
+  ChevronDown,
+} from '@/app/components/base/icons/src/vender/line/arrows'
+import { Plus } from '@/app/components/base/icons/src/vender/line/general'
+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 } = 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>
+                  <ChevronDown 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')}
+                <ChevronDown className={`w-4 h-4 text-gray-700 ${!open && 'opacity-60'}`} />
+              </div>
+            )
+        }
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='w-[576px] z-[11]'>
+        <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={() => 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={() => setShowApiBasedExtensionModal({ payload: {} })}
+            >
+              <Plus className='mr-2 w-4 h-4' />
+              {t('common.operation.add')}
+            </div>
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default ApiBasedExtensionSelector

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

@@ -7,11 +7,16 @@ import MembersPage from './members-page'
 import IntegrationsPage from './Integrations-page'
 import LanguagePage from './language-page'
 import PluginPage from './plugin-page'
+import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page'
 import ModelPage from './model-page'
 import s from './index.module.css'
 import Modal from '@/app/components/base/modal'
-import { Database03, PuzzlePiece01 } from '@/app/components/base/icons/src/vender/line/development'
+import {
+  Database03,
+  PuzzlePiece01,
+  Webhooks,
+} from '@/app/components/base/icons/src/vender/line/development'
 import { Database03 as Database03Solid, PuzzlePiece01 as PuzzlePiece01Solid } from '@/app/components/base/icons/src/vender/solid/development'
 import { User01, Users01 } from '@/app/components/base/icons/src/vender/line/users'
 import { User01 as User01Solid, Users01 as Users01Solid } from '@/app/components/base/icons/src/vender/solid/users'
@@ -66,6 +71,12 @@ export default function AccountSetting({
           icon: <PuzzlePiece01 className={iconClassName} />,
           activeIcon: <PuzzlePiece01Solid className={iconClassName} />,
         },
+        {
+          key: 'api-based-extension',
+          name: t('common.settings.apiBasedExtension'),
+          icon: <Webhooks className={iconClassName} />,
+          activeIcon: <Webhooks className={iconClassName} />,
+        },
       ],
     },
     {
@@ -135,9 +146,11 @@ export default function AccountSetting({
                             flex items-center h-[37px] mb-[2px] text-sm cursor-pointer rounded-lg
                             ${activeMenu === item.key ? 'font-semibold text-primary-600 bg-primary-50' : 'font-light text-gray-700'}
                           `}
+                          title={item.name}
                           onClick={() => setActiveMenu(item.key)}
                         >
-                          {activeMenu === item.key ? item.activeIcon : item.icon}{item.name}
+                          {activeMenu === item.key ? item.activeIcon : item.icon}
+                          <div className='truncate'>{item.name}</div>
                         </div>
                       ))
                     }
@@ -162,6 +175,7 @@ export default function AccountSetting({
             {activeMenu === 'provider' && <ModelPage />}
             {activeMenu === 'data-source' && <DataSourcePage />}
             {activeMenu === 'plugin' && <PluginPage />}
+            {activeMenu === 'api-based-extension' && <ApiBasedExtensionPage /> }
           </div>
         </div>
       </div>

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

@@ -19,7 +19,7 @@ import { useProviderContext } from '@/context/provider-context'
 import ModelModeTypeLabel from '@/app/components/app/configuration/config-model/model-mode-type-label'
 import type { ModelModeType } from '@/types/app'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
-import AccountSetting from '@/app/components/header/account-setting'
+import { useModalContext } from '@/context/modal-context'
 
 type Props = {
   value: {
@@ -59,6 +59,7 @@ const ModelSelector: FC<Props> = ({
   triggerIconSmall,
 }) => {
   const { t } = useTranslation()
+  const { setShowAccountSettingModal } = useModalContext()
   const { textGenerationModelList, embeddingsModelList, speech2textModelList, agentThoughtModelList } = useProviderContext()
   const [search, setSearch] = useState('')
   const modelList = supportAgentThought
@@ -112,8 +113,6 @@ const ModelSelector: FC<Props> = ({
     return res
   })()
 
-  const [showSettingModal, setShowSettingModal] = useState(false)
-
   return (
     <div className=''>
       <Popover className='relative'>
@@ -248,9 +247,7 @@ const ModelSelector: FC<Props> = ({
                   style={{
                     borderColor: 'rgba(0, 0, 0, 0.05)',
                   }}
-                  onClick={() => {
-                    setShowSettingModal(true)
-                  }}
+                  onClick={() => setShowAccountSettingModal({ payload: 'provider' })}
                 >
                   <CubeOutline className='w-4 h-4 mr-2' />
                   <div>{t('common.model.addMoreModel')}</div>
@@ -260,14 +257,6 @@ const ModelSelector: FC<Props> = ({
           </Transition>
         )}
       </Popover>
-
-      {
-        showSettingModal && (
-          <AccountSetting activeTab="provider" onCancel={async () => {
-            setShowSettingModal(false)
-          }} />
-        )
-      }
     </div>
   )
 }