plugin-document-parser 1.0.1

package/src/client/components/GlobalSettings.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { Card, Form, Radio, Switch, Select, Button, message, Spin, Divider, Alert, Space, Typography } from 'antd';
+import { SaveOutlined } from '@ant-design/icons';
+import { useAPIClient } from '@nocobase/client';
+import { useDocParserTranslation } from '../locale';
+
+const { Text } = Typography;
+
+type Settings = {
+  id?: number;
+  mode: 'default' | 'internal' | 'external';
+  activeProviderId?: number | null;
+  fallbackToDefault: boolean;
+  imagePassThrough: boolean;
+  includedExtnames: string[];
+  useDocpixie: boolean;
+};
+
+type Provider = {
+  id: number;
+  title: string;
+  enabled: boolean;
+};
+
+export const GlobalSettings: React.FC = () => {
+  const { t } = useDocParserTranslation();
+  const api = useAPIClient();
+  const [form] = Form.useForm<Settings>();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [providers, setProviders] = useState<Provider[]>([]);
+  const [mode, setMode] = useState<'default' | 'internal' | 'external'>('default');
+
+  useEffect(() => {
+    Promise.all([
+      api.request({ url: 'docParserSettings:get' }),
+      api.request({ url: 'docParserProviders:list', params: { pageSize: 200 } }),
+    ]).then(([settingsRes, providersRes]) => {
+      const settings: Settings = settingsRes?.data?.data ?? {
+        mode: 'default',
+        fallbackToDefault: true,
+        imagePassThrough: true,
+        includedExtnames: [],
+      };
+      form.setFieldsValue(settings);
+      setMode(settings.mode);
+
+      const list: Provider[] = providersRes?.data?.data ?? [];
+      setProviders(list);
+    }).finally(() => setLoading(false));
+  }, []);
+
+  const handleSave = async () => {
+    const values = await form.validateFields();
+    setSaving(true);
+    try {
+      await api.request({ url: 'docParserSettings:save', method: 'POST', data: values });
+      message.success(t('Settings saved'));
+    } catch (err: any) {
+      message.error(err?.message ?? 'Save failed');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <Spin style={{ display: 'block', margin: '40px auto' }} />;
+
+  const modeDescriptions: Record<string, string> = {
+    default: t('mode_default_desc'),
+    internal: t('mode_internal_desc'),
+    external: t('mode_external_desc'),
+  };
+
+  return (
+    <Card bordered={false}>
+      <Form form={form} layout="vertical" onValuesChange={(changed) => {
+        if (changed.mode) setMode(changed.mode);
+      }}>
+
+        <Form.Item name="mode" label={t('Processing Mode')}>
+          <Radio.Group style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <Radio value="default">
+              <Space direction="vertical" size={0}>
+                <Text strong>{t('Default (plugin-ai built-in)')}</Text>
+                <Text type="secondary" style={{ fontSize: 12 }}>{t('mode_default_desc')}</Text>
+              </Space>
+            </Radio>
+            <Radio value="internal">
+              <Space direction="vertical" size={0}>
+                <Text strong>{t('Internal (built-in document loaders)')}</Text>
+                <Text type="secondary" style={{ fontSize: 12 }}>{t('mode_internal_desc')}</Text>
+              </Space>
+            </Radio>
+            <Radio value="external">
+              <Space direction="vertical" size={0}>
+                <Text strong>{t('External (OCR API provider)')}</Text>
+                <Text type="secondary" style={{ fontSize: 12 }}>{t('mode_external_desc')}</Text>
+              </Space>
+            </Radio>
+          </Radio.Group>
+        </Form.Item>
+
+        {mode === 'external' && (
+          <Form.Item
+            name="activeProviderId"
+            label={t('Active Provider')}
+            rules={[{ required: true, message: t('Please select a provider') }]}
+          >
+            <Select
+              placeholder={t('Please select a provider')}
+              options={providers.filter((p) => p.enabled).map((p) => ({
+                label: p.title,
+                value: p.id,
+              }))}
+              style={{ maxWidth: 400 }}
+            />
+          </Form.Item>
+        )}
+
+        <Divider />
+
+        <Form.Item name="fallbackToDefault" valuePropName="checked" label={t('Fallback to default on error')}>
+          <Switch />
+        </Form.Item>
+
+        <Form.Item name="imagePassThrough" valuePropName="checked" label={t('Pass images through to default')}>
+          <Switch />
+        </Form.Item>
+
+        <Divider />
+
+        <Form.Item
+          name="useDocpixie"
+          valuePropName="checked"
+          label={t('Index with DocPixie (when available)')}
+          help={<Text type="secondary">{t('docpixie_mode_desc')}</Text>}
+        >
+          <Switch />
+        </Form.Item>
+
+        <Divider />
+
+        <Form.Item>
+          <Button type="primary" icon={<SaveOutlined />} onClick={handleSave} loading={saving}>
+            {t('Settings saved').replace('saved', 'Save')}
+          </Button>
+        </Form.Item>
+      </Form>
+    </Card>
+  );
+};

package/src/client/components/ProviderForm.tsx

@@ -0,0 +1,266 @@
+import React, { useEffect } from 'react';
+import {
+  Form, Input, InputNumber, Select, Switch, Button, Space, Divider,
+  Typography, Collapse, Row, Col,
+} from 'antd';
+import { useDocParserTranslation } from '../locale';
+
+const { Text } = Typography;
+const { Panel } = Collapse;
+
+export type ProviderFormValues = {
+  title: string;
+  enabled: boolean;
+  apiEndpoint: string;
+  authType: 'bearer' | 'api-key-header' | 'basic' | 'custom-headers' | 'none';
+  apiKey?: string;
+  authConfig?: {
+    headerName?: string;
+    username?: string;
+    password?: string;
+    customHeaders?: string; // JSON string in UI, parsed on save
+  };
+  requestFormat: 'multipart' | 'json-base64' | 'url';
+  requestConfig?: {
+    fileFieldName?: string;
+    filenameFieldName?: string;
+    mimetypeFieldName?: string;
+    extraFields?: string; // JSON string
+    base64FieldPath?: string;
+    filenameFieldPath?: string;
+    mimetypeFieldPath?: string;
+    extraBody?: string; // JSON string
+    urlFieldPath?: string;
+  };
+  responseTextPath?: string;
+  timeout?: number;
+  supportedMimetypes?: string[];
+};
+
+type Props = {
+  initialValues?: Partial<ProviderFormValues>;
+  onSubmit: (values: ProviderFormValues) => Promise<void>;
+  onCancel: () => void;
+  submitting?: boolean;
+};
+
+export const ProviderForm: React.FC<Props> = ({ initialValues, onSubmit, onCancel, submitting }) => {
+  const { t } = useDocParserTranslation();
+  const [form] = Form.useForm<ProviderFormValues>();
+  const authType = Form.useWatch('authType', form);
+  const requestFormat = Form.useWatch('requestFormat', form);
+
+  useEffect(() => {
+    if (initialValues) {
+      form.setFieldsValue(initialValues);
+    }
+  }, [initialValues]);
+
+  const handleSubmit = async () => {
+    const values = await form.validateFields();
+    await onSubmit(values);
+  };
+
+  return (
+    <Form form={form} layout="vertical" initialValues={{
+      enabled: true,
+      authType: 'bearer',
+      requestFormat: 'multipart',
+      responseTextPath: 'text',
+      timeout: 60000,
+      requestConfig: { fileFieldName: 'file' },
+      ...initialValues,
+    }}>
+
+      {/* ── Basic ──────────────────────────────────────────── */}
+      <Row gutter={16}>
+        <Col span={18}>
+          <Form.Item name="title" label={t('Provider Title')} rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
+          <Form.Item name="enabled" label={t('Enabled')} valuePropName="checked">
+            <Switch />
+          </Form.Item>
+        </Col>
+      </Row>
+
+      <Form.Item name="apiEndpoint" label={t('API Endpoint')} rules={[{ required: true }]}>
+        <Input placeholder="https://api.ocr-provider.com/v1/parse" />
+      </Form.Item>
+
+      {/* ── Auth ───────────────────────────────────────────── */}
+      <Divider orientation="left" plain>{t('Auth Type')}</Divider>
+
+      <Form.Item name="authType" label={t('Auth Type')}>
+        <Select options={[
+          { label: 'None',              value: 'none' },
+          { label: 'Bearer Token',      value: 'bearer' },
+          { label: 'API Key Header',    value: 'api-key-header' },
+          { label: 'Basic Auth',        value: 'basic' },
+          { label: 'Custom Headers',    value: 'custom-headers' },
+        ]} style={{ maxWidth: 260 }} />
+      </Form.Item>
+
+      {(authType === 'bearer' || authType === 'api-key-header') && (
+        <Form.Item name="apiKey" label={t('API Key')}>
+          <Input.Password />
+        </Form.Item>
+      )}
+
+      {authType === 'api-key-header' && (
+        <Form.Item name={['authConfig', 'headerName']} label={t('Header Name')}>
+          <Input placeholder="X-Api-Key" style={{ maxWidth: 300 }} />
+        </Form.Item>
+      )}
+
+      {authType === 'basic' && (
+        <Row gutter={16}>
+          <Col span={12}>
+            <Form.Item name={['authConfig', 'username']} label={t('Username')}>
+              <Input />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item name={['authConfig', 'password']} label={t('Password')}>
+              <Input.Password />
+            </Form.Item>
+          </Col>
+        </Row>
+      )}
+
+      {authType === 'custom-headers' && (
+        <Form.Item
+          name={['authConfig', 'customHeaders']}
+          label={t('Custom Headers')}
+          help={<Text type="secondary">JSON: {'{"X-Tenant": "abc", "X-Secret": "xxx"}'}</Text>}
+        >
+          <Input.TextArea rows={3} placeholder='{"X-Tenant": "abc"}' />
+        </Form.Item>
+      )}
+
+      {/* ── Request format ─────────────────────────────────── */}
+      <Divider orientation="left" plain>{t('Request Format')}</Divider>
+
+      <Form.Item name="requestFormat" label={t('Request Format')}>
+        <Select options={[
+          { label: t('Multipart Form Data'), value: 'multipart' },
+          { label: t('JSON Base64'),         value: 'json-base64' },
+          { label: 'URL (provider fetches)', value: 'url' },
+        ]} style={{ maxWidth: 260 }} />
+      </Form.Item>
+
+      {requestFormat === 'multipart' && (
+        <Row gutter={16}>
+          <Col span={8}>
+            <Form.Item name={['requestConfig', 'fileFieldName']} label={t('Form Field Name')}>
+              <Input placeholder="file" />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item name={['requestConfig', 'filenameFieldName']} label={t('Filename Field Path')}>
+              <Input placeholder="(optional)" />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item name={['requestConfig', 'mimetypeFieldName']} label={t('Mimetype Field Path')}>
+              <Input placeholder="(optional)" />
+            </Form.Item>
+          </Col>
+        </Row>
+      )}
+
+      {requestFormat === 'json-base64' && (
+        <Row gutter={16}>
+          <Col span={8}>
+            <Form.Item name={['requestConfig', 'base64FieldPath']} label={t('Base64 Field Path')}>
+              <Input placeholder="file" />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item name={['requestConfig', 'filenameFieldPath']} label={t('Filename Field Path')}>
+              <Input placeholder="filename" />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <Form.Item name={['requestConfig', 'mimetypeFieldPath']} label={t('Mimetype Field Path')}>
+              <Input placeholder="mimetype" />
+            </Form.Item>
+          </Col>
+        </Row>
+      )}
+
+      {requestFormat === 'url' && (
+        <Form.Item name={['requestConfig', 'urlFieldPath']} label={t('Base64 Field Path').replace('Base64', 'URL')}>
+          <Input placeholder="url" style={{ maxWidth: 300 }} />
+        </Form.Item>
+      )}
+
+      <Collapse ghost>
+        <Panel header={t('Extra Request Body')} key="extra">
+          <Form.Item
+            name={['requestConfig', requestFormat === 'multipart' ? 'extraFields' : 'extraBody']}
+            help={<Text type="secondary">JSON object — merged into request body/fields</Text>}
+          >
+            <Input.TextArea rows={4} placeholder='{"lang": "vie+eng"}' />
+          </Form.Item>
+        </Panel>
+      </Collapse>
+
+      {/* ── Response ───────────────────────────────────────── */}
+      <Divider orientation="left" plain>Response</Divider>
+
+      <Row gutter={16}>
+        <Col span={16}>
+          <Form.Item
+            name="responseTextPath"
+            label={t('Response Text Path')}
+            help={<Text type="secondary">Dot-path, e.g. "data.text" or "result.pages.0.content"</Text>}
+          >
+            <Input placeholder="text" />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item name="timeout" label={t('Timeout (ms)')}>
+            <InputNumber min={1000} step={5000} style={{ width: '100%' }} />
+          </Form.Item>
+        </Col>
+      </Row>
+
+      {/* ── Scope ──────────────────────────────────────────── */}
+      <Divider orientation="left" plain>Scope</Divider>
+
+      <Form.Item
+        name="supportedMimetypes"
+        label={t('Supported MIME Types')}
+        help={t('Leave empty to handle all non-image types')}
+      >
+        <Select
+          mode="tags"
+          tokenSeparators={[',']}
+          placeholder="application/pdf, application/vnd.openxmlformats..."
+          style={{ width: '100%' }}
+          options={[
+            { label: 'PDF',   value: 'application/pdf' },
+            { label: 'DOCX',  value: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' },
+            { label: 'XLSX',  value: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
+            { label: 'PPTX',  value: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' },
+            { label: 'Plain text', value: 'text/plain' },
+            { label: 'HTML',  value: 'text/html' },
+          ]}
+        />
+      </Form.Item>
+
+      {/* ── Actions ────────────────────────────────────────── */}
+      <Form.Item style={{ marginBottom: 0, marginTop: 24 }}>
+        <Space>
+          <Button type="primary" onClick={handleSubmit} loading={submitting}>
+            Save
+          </Button>
+          <Button onClick={onCancel}>Cancel</Button>
+        </Space>
+      </Form.Item>
+    </Form>
+  );
+};

package/src/client/components/ProviderList.tsx

@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button, Table, Tag, Space, Popconfirm, Modal, message, Tooltip, Badge,
+} from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { useAPIClient } from '@nocobase/client';
+import { ProviderForm, ProviderFormValues } from './ProviderForm';
+import { useDocParserTranslation } from '../locale';
+
+type Provider = ProviderFormValues & { id: number };
+
+export const ProviderList: React.FC = () => {
+  const { t } = useDocParserTranslation();
+  const api = useAPIClient();
+  const [providers, setProviders] = useState<Provider[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editing, setEditing] = useState<Provider | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [testingId, setTestingId] = useState<number | null>(null);
+
+  const load = async () => {
+    setLoading(true);
+    try {
+      const res = await api.request({ url: 'docParserProviders:list', params: { pageSize: 200 } });
+      setProviders(res?.data?.data ?? []);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(); }, []);
+
+  const openCreate = () => {
+    setEditing(null);
+    setModalOpen(true);
+  };
+
+  const openEdit = (record: Provider) => {
+    setEditing(record);
+    setModalOpen(true);
+  };
+
+  const handleDelete = async (id: number) => {
+    await api.request({ url: `docParserProviders:destroy`, method: 'DELETE', params: { filterByTk: id } });
+    message.success(t('Provider deleted'));
+    load();
+  };
+
+  const handleSubmit = async (values: ProviderFormValues) => {
+    setSubmitting(true);
+    try {
+      if (editing) {
+        await api.request({
+          url: 'docParserProviders:update',
+          method: 'POST',
+          params: { filterByTk: editing.id },
+          data: values,
+        });
+      } else {
+        await api.request({ url: 'docParserProviders:create', method: 'POST', data: values });
+      }
+      message.success(t('Provider saved'));
+      setModalOpen(false);
+      load();
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleTest = async (record: Provider) => {
+    setTestingId(record.id);
+    try {
+      const res = await api.request({
+        url: 'docParserProviders:testConnection',
+        params: { filterByTk: record.id },
+      });
+      const result = res?.data?.data;
+      if (result?.ok) {
+        message.success(`${t('Connection successful')}${result.status ? ` (HTTP ${result.status})` : ''}`);
+      } else {
+        message.error(`${t('Connection failed')}: ${result?.message ?? 'Unknown error'}`);
+      }
+    } catch (err: any) {
+      message.error(`${t('Connection failed')}: ${err?.message}`);
+    } finally {
+      setTestingId(null);
+    }
+  };
+
+  const columns = [
+    {
+      title: t('Provider Title'),
+      dataIndex: 'title',
+      key: 'title',
+      render: (title: string, record: Provider) => (
+        <Space>
+          <Badge status={record.enabled ? 'success' : 'default'} />
+          {title}
+        </Space>
+      ),
+    },
+    {
+      title: t('API Endpoint'),
+      dataIndex: 'apiEndpoint',
+      key: 'apiEndpoint',
+      ellipsis: true,
+    },
+    {
+      title: t('Auth Type'),
+      dataIndex: 'authType',
+      key: 'authType',
+      render: (v: string) => <Tag>{v}</Tag>,
+    },
+    {
+      title: t('Request Format'),
+      dataIndex: 'requestFormat',
+      key: 'requestFormat',
+      render: (v: string) => <Tag color="blue">{v}</Tag>,
+    },
+    {
+      title: t('Enabled'),
+      dataIndex: 'enabled',
+      key: 'enabled',
+      render: (v: boolean) =>
+        v ? <CheckCircleOutlined style={{ color: '#52c41a' }} /> : <CloseCircleOutlined style={{ color: '#ccc' }} />,
+    },
+    {
+      title: 'Actions',
+      key: 'actions',
+      render: (_: any, record: Provider) => (
+        <Space>
+          <Tooltip title={t('Test Connection')}>
+            <Button
+              size="small"
+              icon={<ApiOutlined />}
+              loading={testingId === record.id}
+              onClick={() => handleTest(record)}
+            />
+          </Tooltip>
+          <Tooltip title={t('Edit Provider')}>
+            <Button size="small" icon={<EditOutlined />} onClick={() => openEdit(record)} />
+          </Tooltip>
+          <Popconfirm
+            title={t('Delete Provider')}
+            description="Are you sure you want to delete this provider?"
+            onConfirm={() => handleDelete(record.id)}
+          >
+            <Tooltip title={t('Delete Provider')}>
+              <Button size="small" danger icon={<DeleteOutlined />} />
+            </Tooltip>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'flex-end' }}>
+        <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+          {t('Add Provider')}
+        </Button>
+      </div>
+
+      <Table
+        rowKey="id"
+        dataSource={providers}
+        columns={columns}
+        loading={loading}
+        pagination={false}
+        locale={{ emptyText: t('No providers configured') }}
+        size="middle"
+      />
+
+      <Modal
+        open={modalOpen}
+        title={editing ? t('Edit Provider') : t('Add Provider')}
+        onCancel={() => setModalOpen(false)}
+        footer={null}
+        width={720}
+        destroyOnClose
+      >
+        <ProviderForm
+          initialValues={editing ?? undefined}
+          onSubmit={handleSubmit}
+          onCancel={() => setModalOpen(false)}
+          submitting={submitting}
+        />
+      </Modal>
+    </>
+  );
+};

package/src/client/components/SettingsPage.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Tabs } from 'antd';
+import { SettingOutlined, ApiOutlined } from '@ant-design/icons';
+import { GlobalSettings } from './GlobalSettings';
+import { ProviderList } from './ProviderList';
+import { useDocParserTranslation } from '../locale';
+
+export const SettingsPage: React.FC = () => {
+  const { t } = useDocParserTranslation();
+
+  const items = [
+    {
+      key: 'global',
+      label: (
+        <span>
+          <SettingOutlined />
+          {t('Global Settings')}
+        </span>
+      ),
+      children: <GlobalSettings />,
+    },
+    {
+      key: 'providers',
+      label: (
+        <span>
+          <ApiOutlined />
+          {t('OCR Providers')}
+        </span>
+      ),
+      children: (
+        <div style={{ padding: '8px 0' }}>
+          <ProviderList />
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div style={{ padding: 24 }}>
+      <Tabs items={items} defaultActiveKey="global" />
+    </div>
+  );
+};

package/src/client/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './plugin';
+export { PluginDocumentParserClient } from './plugin';

package/src/client/locale.ts

@@ -0,0 +1,12 @@
+import { i18n } from '@nocobase/client';
+import { useTranslation } from 'react-i18next';
+
+export const NAMESPACE = 'plugin-document-parser';
+
+export function lang(key: string, options?: any) {
+  return i18n.t(key, { ns: NAMESPACE, ...options });
+}
+
+export function useDocParserTranslation() {
+  return useTranslation(NAMESPACE);
+}