endpoint form

2025-07-16 22:01:50 +08:00 · 2024-10-19 17:23:26 +08:00 · 2024-10-19 17:23:26 +08:00 · ebaf8766ef
commit ebaf8766ef
parent d2190e9c3a
8 changed files with 101 additions and 43 deletions
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
@ -1,9 +1,10 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import { RiDeleteBinLine, RiEditLine, RiLoginCircleLine } from '@remixicon/react'
 import type { EndpointListItem } from '../types'
 import EndpointModal from './endpoint-modal'
+import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import ActionButton from '@/app/components/base/action-button'
 import CopyBtn from '@/app/components/base/copy-btn'
 import Confirm from '@/app/components/base/confirm'
@ -86,6 +87,13 @@ const EndpointCard = ({
    setFalse: hideEndpointModalConfirm,
  }] = useBoolean(false)

+  const formSchemas = useMemo(() => {
+    return toolCredentialToFormSchemas(data.declaration.settings)
+  }, [data.declaration.settings])
+  const formValue = useMemo(() => {
+    return addDefaultValue(data.settings, formSchemas)
+  }, [data.settings, formSchemas])
+
  return (
    <div className='p-0.5 bg-background-section-burn rounded-xl'>
      <div className='group p-2.5 pl-3 bg-components-panel-on-panel-item-bg rounded-[10px] border-[0.5px] border-components-panel-border'>
@ -160,6 +168,9 @@ const EndpointCard = ({
      )}
      {isShowEndpointModal && (
        <EndpointModal
+          id={data.id}
+          formSchemas={formSchemas}
+          defaultValues={formValue}
          onCancel={hideEndpointModalConfirm}
        />
      )}
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@ -1,21 +1,36 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
 import { RiAddLine } from '@remixicon/react'
 import type { EndpointListItem, PluginEndpointDeclaration } from '../types'
+import EndpointModal from './endpoint-modal'
 import EndpointCard from './endpoint-card'
+import { toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'

 type Props = {
+  pluginUniqueID: string
  declaration: PluginEndpointDeclaration
  list: EndpointListItem[]
 }

 const EndpointList = ({
+  pluginUniqueID,
  declaration,
  list,
 }: Props) => {
  const { t } = useTranslation()
+
+  const [isShowEndpointModal, {
+    setTrue: showEndpointModal,
+    setFalse: hideEndpointModal,
+  }] = useBoolean(false)
+
+  const formSchemas = useMemo(() => {
+    return toolCredentialToFormSchemas(declaration.settings)
+  }, [declaration.settings])
+
  return (
    <div className='px-4 py-2 border-t border-divider-subtle'>
      <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
@ -27,7 +42,7 @@ const EndpointList = ({
            }
          />
        </div>
-        <ActionButton>
+        <ActionButton onClick={showEndpointModal}>
          <RiAddLine className='w-4 h-4' />
        </ActionButton>
      </div>
@ -42,6 +57,13 @@ const EndpointList = ({
          />
        ))}
      </div>
+      {isShowEndpointModal && (
+        <EndpointModal
+          id={pluginUniqueID}
+          formSchemas={formSchemas}
+          onCancel={hideEndpointModal}
+        />
+      )}
    </div>
  )
 }
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@ -2,27 +2,33 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import Drawer from '@/app/components/base/drawer'
+import { RiArrowRightUpLine, RiCloseLine } from '@remixicon/react'
+import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
+import Drawer from '@/app/components/base/drawer'
+import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 // import Toast from '@/app/components/base/toast'
-// import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
-// import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import cn from '@/utils/classnames'

 type Props = {
+  id: string
+  formSchemas: any
+  defaultValues?: any
  onCancel: () => void
  // onSaved: (value: Record<string, any>) => void
-  onRemove?: () => void
 }

 const EndpointModal: FC<Props> = ({
+  id,
+  formSchemas,
+  defaultValues = {},
  onCancel,
  // onSaved,
-  onRemove = () => { },
 }) => {
  const { t } = useTranslation()
  const language = useLanguage()
+  const [tempCredential, setTempCredential] = React.useState<any>(defaultValues)

  const handleSave = () => {
    // for (const field of credentialSchema) {
@ -45,31 +51,44 @@ const EndpointModal: FC<Props> = ({
      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
    >
      <>
-        {/* <Form
-          value={tempCredential}
-          onChange={(v) => {
-            setTempCredential(v)
-          }}
-          formSchemas={credentialSchema}
-          isEditMode={true}
-          showOnVariableMap={{}}
-          validating={false}
-          inputClassName='!bg-gray-50'
-          fieldMoreInfo={item => item.url
-            ? (<a
-              href={item.url}
-              target='_blank' rel='noopener noreferrer'
-              className='inline-flex items-center text-xs text-primary-600'
-            >
-              {t('tools.howToGet')}
-              <LinkExternal02 className='ml-1 w-3 h-3' />
-            </a>)
-            : null}
-        /> */}
-        <div className={cn('mt-2 flex justify-end')} >
-          < div className='flex space-x-2'>
-            <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
-            <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+        <div className='p-4 pb-2'>
+          <div className='flex items-center justify-between'>
+            <div className='text-text-primary system-xl-semibold'>{t('plugin.detailPanel.endpointModalTitle')}</div>
+            <ActionButton onClick={onCancel}>
+              <RiCloseLine className='w-4 h-4' />
+            </ActionButton>
+          </div>
+          <div className='mt-0.5 text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointModalDesc')}</div>
+        </div>
+        <div className='grow overflow-y-auto'>
+          <div className='px-4 py-2'>
+            <Form
+              value={tempCredential}
+              onChange={(v) => {
+                setTempCredential(v)
+              }}
+              formSchemas={formSchemas}
+              isEditMode={true}
+              showOnVariableMap={{}}
+              validating={false}
+              inputClassName='!bg-gray-50'
+              fieldMoreInfo={item => item.url
+                ? (<a
+                  href={item.url}
+                  target='_blank' rel='noopener noreferrer'
+                  className='inline-flex items-center body-xs-regular text-text-accent-secondary'
+                >
+                  {t('tools.howToGet')}
+                  <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+                </a>)
+                : null}
+            />
+          </div>
+          <div className={cn('p-4 pt-0 flex justify-end')} >
+            <div className='flex gap-2'>
+              <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
+              <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+            </div>
          </div>
        </div>
      </>
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@ -48,6 +48,7 @@ const PluginDetailPanel: FC<Props> = ({
          <div className='grow overflow-y-auto'>
            {!!pluginDetail.declaration.endpoint && (
              <EndpointList
+                pluginUniqueID={pluginDetail.plugin_unique_identifier}
                list={endpointList}
                declaration={pluginDetail.declaration.endpoint}
              />
--- a/web/app/components/plugins/plugin-detail-panel/mock.ts
+++ b/web/app/components/plugins/plugin-detail-panel/mock.ts
@ -33,14 +33,14 @@ export const toolNotion = {
          default: null,
          options: null,
          label: {
-            'en-US': 'API-key',
-            'zh-Hans': 'API-key',
+            en_US: 'API-key',
+            zh_Hans: 'API-key',
          },
          help: null,
          url: null,
          placeholder: {
-            'en-US': 'Please input your API key',
-            'zh-Hans': '请输入你的 API key',
+            en_US: 'Please input your API key',
+            zh_Hans: '请输入你的 API key',
          },
        },
      ],
@ -81,14 +81,14 @@ export const toolNotionEndpoints = [
          default: null,
          options: null,
          label: {
-            'en-US': 'API-key',
-            'zh-Hans': 'API-key',
+            en_US: 'API-key',
+            zh_Hans: 'API-key',
          },
          help: null,
          url: null,
          placeholder: {
-            'en-US': 'Please input your API key',
-            'zh-Hans': '请输入你的 API key',
+            en_US: 'Please input your API key',
+            zh_Hans: '请输入你的 API key',
          },
        },
      ],
--- a/web/app/components/plugins/types.ts
+++ b/web/app/components/plugins/types.ts
@ -1,4 +1,5 @@
 import type { CredentialFormSchemaBase } from '../header/account-setting/model-provider-page/declarations'
+import type { ToolCredential } from '@/app/components/tools/types'
 import type { Locale } from '@/i18n'

 export enum PluginType {
@ -23,11 +24,11 @@ export type PluginToolDeclaration = {
    label: Record<Locale, string>
    tags: string[]
  }
-  credentials_schema: CredentialFormSchemaBase[] // TODO
+  credentials_schema: ToolCredential[] // TODO
 }

 export type PluginEndpointDeclaration = {
-  settings: CredentialFormSchemaBase[]
+  settings: ToolCredential[]
  endpoints: EndpointItem[]
 }

--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@ -25,6 +25,8 @@ const translation = {
    endpointDisableContent: 'Would you like to disable {{name}}? ',
    endpointDeleteTip: 'Remove Endpoint',
    endpointDeleteContent: 'Would you like to remove {{name}}? ',
+    endpointModalTitle: 'Setup endpoint',
+    endpointModalDesc: 'After configuring form, all members within the workspace can use this endpoint when orchestrating applications.',
    serviceOk: 'Service OK',
    disabled: 'Disabled',
    modelNum: '{{num}} MODELS INCLUDED',
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@ -25,6 +25,8 @@ const translation = {
    endpointDisableContent: '是否要停用 {{name}} 的 Endpoint ？',
    endpointDeleteTip: '移除 Endpoint',
    endpointDeleteContent: '是否要移除 {{name}} ？',
+    endpointModalTitle: '设置 Endpoint',
+    endpointModalDesc: '配置表单后，工作区内的所有成员都可以在编排应用时使用此端点。',
    serviceOk: '服务正常',
    disabled: '停用',
    modelNum: '{{num}} 模型已包含',