forked from lobehub/lobe-chat
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request lobehub#138 from lobehub/plugin-dx
插件开发体验优化
- Loading branch information
Showing
19 changed files
with
397 additions
and
232 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,96 +1,160 @@ | ||
| import { pluginManifestSchema } from '@lobehub/chat-plugin-sdk'; | ||
| import { Form, FormItemProps, Input, Tooltip } from '@lobehub/ui'; | ||
| import { FormInstance, Radio } from 'antd'; | ||
| import { memo } from 'react'; | ||
| import { LobeChatPluginManifest, pluginManifestSchema } from '@lobehub/chat-plugin-sdk'; | ||
| import { ActionIcon, Form, FormItemProps, Highlighter, Input, Tooltip } from '@lobehub/ui'; | ||
| import { FormInstance, Popover, Radio } from 'antd'; | ||
| import { FileCode, RotateCwIcon } from 'lucide-react'; | ||
| import { memo, useState } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { Flexbox } from 'react-layout-kit'; | ||
|
|
||
| const ManifestForm = memo<{ form: FormInstance; mode: 'url' | 'local' }>(({ form, mode }) => { | ||
| const { t } = useTranslation('plugin'); | ||
| const ManifestForm = memo<{ form: FormInstance; mode?: 'url' | 'local' }>( | ||
| ({ form, mode = 'url' }) => { | ||
| const { t } = useTranslation('plugin'); | ||
|
|
||
| const isUrl = mode === 'url'; | ||
| const [manifest, setManifest] = useState<LobeChatPluginManifest>(); | ||
|
|
||
| const configItem: FormItemProps[] = isUrl | ||
| ? [ | ||
| { | ||
| children: <Input placeholder={'http://localhost/manifest.json'} />, | ||
| desc: t('dev.meta.manifest.desc'), | ||
| hasFeedback: true, | ||
| label: t('dev.meta.manifest.label'), | ||
| name: 'manifest', | ||
| required: true, | ||
| rules: [ | ||
| { required: true }, | ||
| { | ||
| message: t('dev.meta.manifest.urlError'), | ||
| pattern: /^https?:\/\/.*/, | ||
| }, | ||
| { | ||
| message: t('dev.meta.manifest.invalid'), | ||
| validator: async (_, value) => { | ||
| const res = await fetch(value); | ||
| if (!res.ok) return true; | ||
| const isUrl = mode === 'url'; | ||
|
|
||
| const json = await res.json(); | ||
| pluginManifestSchema.parse(json); | ||
| const configItem: FormItemProps[] = isUrl | ||
| ? [ | ||
| { | ||
| children: ( | ||
| <Input | ||
| placeholder={'http://localhost:3400/manifest-dev.json'} | ||
| suffix={ | ||
| manifest && ( | ||
| <ActionIcon | ||
| icon={RotateCwIcon} | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| form.validateFields(['manifest']); | ||
| }} | ||
| size={'small'} | ||
| title={t('dev.meta.manifest.refresh')} | ||
| /> | ||
| ) | ||
| } | ||
| /> | ||
| ), | ||
| extra: ( | ||
| <Flexbox horizontal justify={'space-between'} style={{ marginTop: 8 }}> | ||
| {t('dev.meta.manifest.desc')} | ||
| {manifest && ( | ||
| <Popover | ||
| arrow={false} | ||
| content={ | ||
| <Highlighter language={'json'}> | ||
| {JSON.stringify(manifest, null, 2)} | ||
| </Highlighter> | ||
| } | ||
| placement={'right'} | ||
| style={{ width: 400 }} | ||
| title={'Manifest JSON'} | ||
| trigger={'click'} | ||
| > | ||
| <ActionIcon | ||
| icon={FileCode} | ||
| size={'small'} | ||
| title={t('dev.meta.manifest.preview')} | ||
| /> | ||
| </Popover> | ||
| )} | ||
| </Flexbox> | ||
| ), | ||
| // extra: <div>123</div>, | ||
| hasFeedback: true, | ||
| label: t('dev.meta.manifest.label'), | ||
| name: 'manifest', | ||
| required: true, | ||
| rules: [ | ||
| { required: true }, | ||
| { | ||
| message: t('dev.meta.manifest.urlError'), | ||
| pattern: /^https?:\/\/.*/, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ] | ||
| : // TODO: 后续做成本地配置模式 | ||
| [ | ||
| { | ||
| children: <Input placeholder={'searchEngine'} />, | ||
| desc: t('dev.meta.identifier.desc'), | ||
| label: t('dev.meta.identifier.label'), | ||
| name: 'name', | ||
| required: true, | ||
| }, | ||
| { | ||
| // message: t('dev.meta.manifest.invalid'), | ||
| validator: async (_, value) => { | ||
| if (!value) return true; | ||
|
|
||
| { | ||
| children: <Input placeholder={t('dev.meta.description.placeholder')} />, | ||
| desc: t('dev.meta.description.desc'), | ||
| label: t('dev.meta.description.label'), | ||
| name: 'description', | ||
| required: true, | ||
| }, | ||
| { | ||
| children: <Input placeholder={'searchEngine'} />, | ||
| desc: t('dev.meta.identifier.desc'), | ||
| label: t('dev.meta.identifier.label'), | ||
| name: 'identifier', | ||
| required: true, | ||
| }, | ||
| ]; | ||
| let res: Response; | ||
|
|
||
| return ( | ||
| <Form | ||
| form={form} | ||
| items={[ | ||
| { | ||
| children: configItem, | ||
| extra: ( | ||
| <Radio.Group | ||
| onChange={(v) => { | ||
| form.setFieldValue('manifestMode', v.target.value); | ||
| }} | ||
| size={'small'} | ||
| value={mode} | ||
| > | ||
| <Radio.Button value={'url'}>{t('dev.manifest.mode.url')}</Radio.Button> | ||
| <Tooltip title={t('dev.manifest.mode.local-tooltip')}> | ||
| <Radio.Button disabled value={'local'}> | ||
| {t('dev.manifest.mode.local')} | ||
| </Radio.Button> | ||
| </Tooltip> | ||
| </Radio.Group> | ||
| ), | ||
| title: t('dev.tabs.manifest'), | ||
| }, | ||
| ]} | ||
| layout={isUrl ? 'vertical' : undefined} | ||
| /> | ||
| ); | ||
| }); | ||
| try { | ||
| res = await fetch(value); | ||
| } catch { | ||
| throw t('dev.meta.manifest.requestError'); | ||
| } | ||
|
|
||
| const json = await res.json().catch(() => { | ||
| throw t('dev.meta.manifest.urlError'); | ||
| }); | ||
|
|
||
| const valid = pluginManifestSchema.safeParse(json); | ||
| if (!valid.success) { | ||
| throw t('dev.meta.manifest.jsonInvalid', { error: valid.error }); | ||
| } | ||
|
|
||
| setManifest(json); | ||
| form.setFieldValue('identifier', valid.data.identifier); | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ] | ||
| : // TODO: 后续做成本地配置模式 | ||
| [ | ||
| { | ||
| children: <Input placeholder={'searchEngine'} />, | ||
| desc: t('dev.meta.identifier.desc'), | ||
| label: t('dev.meta.identifier.label'), | ||
| name: 'name', | ||
| required: true, | ||
| }, | ||
|
|
||
| { | ||
| children: <Input placeholder={t('dev.meta.description.placeholder')} />, | ||
| desc: t('dev.meta.description.desc'), | ||
| label: t('dev.meta.description.label'), | ||
| name: 'description', | ||
| required: true, | ||
| }, | ||
| { | ||
| children: <Input placeholder={'searchEngine'} />, | ||
| desc: t('dev.meta.identifier.desc'), | ||
| label: t('dev.meta.identifier.label'), | ||
| name: 'identifier', | ||
| required: true, | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <Form | ||
| form={form} | ||
| items={[ | ||
| { | ||
| children: configItem, | ||
| extra: ( | ||
| <Radio.Group | ||
| onChange={(v) => { | ||
| form.setFieldValue('manifestMode', v.target.value); | ||
| }} | ||
| size={'small'} | ||
| value={mode} | ||
| > | ||
| <Radio.Button value={'url'}>{t('dev.manifest.mode.url')}</Radio.Button> | ||
| <Tooltip title={t('dev.manifest.mode.local-tooltip')}> | ||
| <Radio.Button disabled value={'local'}> | ||
| {t('dev.manifest.mode.local')} | ||
| </Radio.Button> | ||
| </Tooltip> | ||
| </Radio.Group> | ||
| ), | ||
| title: t('dev.tabs.manifest'), | ||
| }, | ||
| ]} | ||
| layout={isUrl ? 'vertical' : undefined} | ||
| /> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| export default ManifestForm; |
Oops, something went wrong.