plugin-ai-api 1.0.20 → 1.0.21

package/src/client-v2/components/AiApiRolePermissions.tsx

@@ -0,0 +1,173 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { useApp } from '@nocobase/client-v2';
+import { Card, Switch, Select, Space, Typography, Spin, Divider } from 'antd';
+import { useT } from '../locale';
+
+const { Text } = Typography;
+
+interface AiEmployee {
+  username: string;
+  nickname: string;
+}
+
+interface RolePermRecord {
+  id?: number;
+  roleName: string;
+  enabled: boolean;
+  allowAllEmployees: boolean;
+  allowedEmployees: string[];
+}
+
+/**
+ * Permission tab shown in Settings → Users & Permissions → [Role] → "AI API" tab.
+ * Lets admins control whether a role can use the AI API and which AI Employees it may access.
+ */
+export function AiApiRolePermissions({ role }: { role?: { name?: string } | null }) {
+  const api = useApp().apiClient;
+  const t = useT();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [employees, setEmployees] = useState<AiEmployee[]>([]);
+  const [record, setRecord] = useState<RolePermRecord | null>(null);
+
+  const roleName = role?.name;
+
+  const loadData = useCallback(
+    async (name: string) => {
+      setLoading(true);
+      try {
+        const [permRes, empRes] = await Promise.all([
+          api.request({
+            url: 'aiApiRolePermissions',
+            params: { filter: { roleName: name }, paginate: false },
+          }),
+          api.request({ url: 'aiEmployees:list', params: { paginate: false } }),
+        ]);
+
+        const existing = permRes?.data?.data?.[0];
+        setRecord(
+          existing
+            ? {
+                id: existing.id,
+                roleName: existing.roleName,
+                enabled: !!existing.enabled,
+                allowAllEmployees: existing.allowAllEmployees !== false,
+                allowedEmployees: existing.allowedEmployees || [],
+              }
+            : {
+                roleName: name,
+                enabled: false,
+                allowAllEmployees: true,
+                allowedEmployees: [],
+              },
+        );
+
+        setEmployees(
+          (empRes?.data?.data || []).map((employee: AiEmployee) => ({
+            username: employee.username,
+            nickname: employee.nickname || employee.username,
+          })),
+        );
+      } catch (err) {
+        console.error('Failed to load AI API role permissions:', err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [api],
+  );
+
+  useEffect(() => {
+    if (!roleName) return;
+    loadData(roleName);
+  }, [roleName, loadData]);
+
+  const save = async (patch: Partial<RolePermRecord>) => {
+    if (!record) return;
+    const next = { ...record, ...patch };
+    setRecord(next);
+    setSaving(true);
+    try {
+      if (next.id) {
+        await api.request({
+          url: `aiApiRolePermissions/${next.id}`,
+          method: 'PUT',
+          data: next,
+        });
+      } else {
+        const res = await api.request({
+          url: 'aiApiRolePermissions',
+          method: 'POST',
+          data: next,
+        });
+        const created = res?.data?.data;
+        if (created?.id) {
+          setRecord({ ...next, id: created.id });
+        }
+      }
+    } catch (err) {
+      console.error('Failed to save AI API role permissions:', err);
+      // Revert on error
+      setRecord(record);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <Spin />;
+
+  return (
+    <Card bordered={false}>
+      <Space direction="vertical" style={{ width: '100%' }} size="middle">
+        <Space>
+          <Switch checked={!!record?.enabled} loading={saving} onChange={(checked) => save({ enabled: checked })} />
+          <Text strong>{t('Allow this role to use the AI API')}</Text>
+        </Space>
+
+        {record?.enabled && (
+          <>
+            <Divider style={{ margin: '8px 0' }} />
+            <Space>
+              <Switch
+                checked={!!record?.allowAllEmployees}
+                loading={saving}
+                onChange={(checked) => save({ allowAllEmployees: checked })}
+              />
+              <Text>{t('Allow all AI Employees')}</Text>
+            </Space>
+
+            {!record?.allowAllEmployees && (
+              <div>
+                <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
+                  {t('Select which AI Employees this role may use:')}
+                </Text>
+                <Select
+                  mode="multiple"
+                  allowClear
+                  style={{ width: '100%', maxWidth: 480 }}
+                  placeholder={t('Select allowed AI Employees')}
+                  value={record?.allowedEmployees || []}
+                  options={employees.map((employee) => ({
+                    label: `${employee.nickname} (${employee.username})`,
+                    value: employee.username,
+                  }))}
+                  onChange={(vals) => save({ allowedEmployees: vals })}
+                  disabled={saving}
+                />
+              </div>
+            )}
+          </>
+        )}
+      </Space>
+    </Card>
+  );
+}

package/src/client-v2/locale.ts

@@ -1 +1,21 @@
-export { tExpr, useT } from '../client/locale';
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { tExpr as _tExpr, useFlowEngine } from '@nocobase/flow-engine';
+// @ts-ignore
+import pkg from './../../package.json';
+
+export function useT() {
+  const engine = useFlowEngine();
+  return (str: string) => engine.context.t(str, { ns: [pkg.name, 'client'] });
+}
+
+export function tExpr(key: string) {
+  return _tExpr(key, { ns: [pkg.name, 'client'] });
+}

package/src/client-v2/pages/GeneralPage.tsx

@@ -10,6 +10,7 @@ interface GeneralSettings {
   defaultLlmService?: string;
   enabledLlmServices: string[];
   rateLimitPerMinute: number;
+  maxRequestBodyMb: number;
   quotaEnabled: boolean;
   defaultReservationOutputTokens: number;
 }
@@ -28,10 +29,14 @@ const defaults: GeneralSettings = {
   mode: 'llm',
   enabledLlmServices: [],
   rateLimitPerMinute: 60,
+  maxRequestBodyMb: 10,
   quotaEnabled: false,
   defaultReservationOutputTokens: 4096,
 };
 
+/** Mirrors MAX_REQUEST_BODY_MB_LIMIT in server/routes/router.ts, which rejects anything higher. */
+const MAX_REQUEST_BODY_MB = 100;
+
 export default function GeneralPage() {
   const ctx = useFlowContext();
   const t = useT();
@@ -121,6 +126,14 @@ export default function GeneralPage() {
         <Form.Item name="rateLimitPerMinute" label={t('Rate Limit')} rules={[{ required: true }]}>
           <InputNumber min={1} style={{ width: '100%' }} />
         </Form.Item>
+        <Form.Item
+          name="maxRequestBodyMb"
+          label={t('Max request body size (MB)')}
+          extra={t('Raise this to accept inline base64 images. Base64 adds about 33% to the original file size.')}
+          rules={[{ required: true }]}
+        >
+          <InputNumber min={1} max={MAX_REQUEST_BODY_MB} precision={0} style={{ width: '100%' }} />
+        </Form.Item>
         <Form.Item name="quotaEnabled" label={t('Enable user quotas')} valuePropName="checked">
           <Switch />
         </Form.Item>

package/src/client-v2/pages/ModelMetadataPage.tsx

@@ -0,0 +1,280 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Popconfirm,
+  Select,
+  Space,
+  Switch,
+  Table,
+  Tag,
+  message,
+} from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { useFlowContext } from '@nocobase/flow-engine';
+import { useT } from '../locale';
+import { errorMessage, unwrapData } from './api';
+
+interface ModelMetadata {
+  id: string | number;
+  llmService: string;
+  model: string;
+  contextWindow?: number | null;
+  maxCompletionTokens?: number | null;
+  ownedByOverride?: string | null;
+  displayName?: string | null;
+  description?: string | null;
+  enabled: boolean;
+}
+
+type MetadataFormValues = Omit<ModelMetadata, 'id'>;
+
+interface LlmService {
+  name: string;
+  title?: string;
+  provider: string;
+}
+
+interface LlmModel {
+  id: string;
+}
+
+export default function ModelMetadataPage() {
+  const ctx = useFlowContext();
+  const t = useT();
+  const [form] = Form.useForm<MetadataFormValues>();
+  const selectedService = Form.useWatch('llmService', form);
+  const [rows, setRows] = useState<ModelMetadata[]>([]);
+  const [services, setServices] = useState<LlmService[]>([]);
+  const [models, setModels] = useState<LlmModel[]>([]);
+  const [modelsLoading, setModelsLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [editing, setEditing] = useState<ModelMetadata>();
+  const [open, setOpen] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [metadataResponse, servicesResponse] = await Promise.all([
+        ctx.api.request({
+          url: 'aiApiModelMetadata:list',
+          method: 'get',
+          params: { pageSize: 200, sort: 'llmService' },
+        }),
+        ctx.api.request({ url: 'ai:listLLMServices', method: 'get' }),
+      ]);
+      setRows(unwrapData<ModelMetadata[]>(metadataResponse, []));
+      setServices(unwrapData<LlmService[]>(servicesResponse, []));
+    } catch (error) {
+      message.error(errorMessage(error));
+    } finally {
+      setLoading(false);
+    }
+  }, [ctx.api]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const loadModels = useCallback(
+    async (llmService: string, currentModel?: string) => {
+      setModelsLoading(true);
+      try {
+        const response = await ctx.api.request({
+          url: 'ai:listModels',
+          method: 'get',
+          params: { llmService },
+        });
+        const loadedModels = unwrapData<LlmModel[]>(response, []);
+        setModels(
+          currentModel && !loadedModels.some((item) => item.id === currentModel)
+            ? [{ id: currentModel }, ...loadedModels]
+            : loadedModels,
+        );
+      } catch (error) {
+        setModels(currentModel ? [{ id: currentModel }] : []);
+        message.error(`${t('Failed to load models')}: ${errorMessage(error)}`);
+      } finally {
+        setModelsLoading(false);
+      }
+    },
+    [ctx.api, t],
+  );
+
+  const showCreate = () => {
+    setEditing(undefined);
+    setModels([]);
+    form.resetFields();
+    form.setFieldsValue({ enabled: true } as MetadataFormValues);
+    setOpen(true);
+  };
+
+  const showEdit = (record: ModelMetadata) => {
+    setEditing(record);
+    form.setFieldsValue({ ...record });
+    setOpen(true);
+    loadModels(record.llmService, record.model);
+  };
+
+  const changeService = (llmService: string) => {
+    form.setFieldValue('model', undefined);
+    setModels([]);
+    loadModels(llmService);
+  };
+
+  const save = async () => {
+    const values = await form.validateFields();
+    const data = {
+      ...values,
+      contextWindow: values.contextWindow ?? null,
+      maxCompletionTokens: values.maxCompletionTokens ?? null,
+      ownedByOverride: values.ownedByOverride?.trim() || null,
+      displayName: values.displayName?.trim() || null,
+      description: values.description?.trim() || null,
+    };
+    setSaving(true);
+    try {
+      await ctx.api.request({
+        url: editing ? `aiApiModelMetadata:update/${editing.id}` : 'aiApiModelMetadata:create',
+        method: 'post',
+        data,
+      });
+      message.success(t('Saved successfully'));
+      setOpen(false);
+      await load();
+    } catch (error) {
+      message.error(errorMessage(error));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async (id: string | number) => {
+    try {
+      await ctx.api.request({ url: `aiApiModelMetadata:destroy/${id}`, method: 'post' });
+      message.success(t('Deleted successfully'));
+      await load();
+    } catch (error) {
+      message.error(errorMessage(error));
+    }
+  };
+
+  const columns: ColumnsType<ModelMetadata> = [
+    { title: t('LLM service'), dataIndex: 'llmService', key: 'llmService', width: 160 },
+    { title: t('Model'), dataIndex: 'model', key: 'model', width: 180 },
+    { title: t('Context window'), dataIndex: 'contextWindow', key: 'contextWindow', width: 140 },
+    { title: t('Max completion tokens'), dataIndex: 'maxCompletionTokens', key: 'maxCompletionTokens', width: 170 },
+    { title: t('Owned by'), dataIndex: 'ownedByOverride', key: 'ownedByOverride', width: 140 },
+    { title: t('Display name'), dataIndex: 'displayName', key: 'displayName', width: 160 },
+    {
+      title: t('Status'),
+      dataIndex: 'enabled',
+      key: 'enabled',
+      width: 100,
+      render: (enabled: boolean) => (
+        <Tag color={enabled ? 'green' : 'default'}>{enabled ? t('Enabled') : t('Disabled')}</Tag>
+      ),
+    },
+    {
+      title: t('Actions'),
+      key: 'actions',
+      fixed: 'right',
+      width: 150,
+      render: (_, record) => (
+        <Space>
+          <Button type="link" onClick={() => showEdit(record)}>
+            {t('Edit')}
+          </Button>
+          <Popconfirm title={t('Delete this override?')} onConfirm={() => remove(record.id)}>
+            <Button type="link" danger>
+              {t('Delete')}
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Card
+      title={t('Model metadata')}
+      extra={
+        <Button type="primary" onClick={showCreate}>
+          {t('Add override')}
+        </Button>
+      }
+    >
+      <Table rowKey="id" columns={columns} dataSource={rows} loading={loading} scroll={{ x: 1200 }} />
+      <Modal
+        title={editing ? t('Edit override') : t('Add override')}
+        open={open}
+        onCancel={() => setOpen(false)}
+        onOk={save}
+        confirmLoading={saving}
+        destroyOnClose
+      >
+        <Form form={form} layout="vertical" preserve={false}>
+          <Form.Item name="llmService" label={t('LLM service')} rules={[{ required: true }]}>
+            <Select
+              showSearch
+              optionFilterProp="label"
+              onChange={changeService}
+              options={services.map((service) => ({ label: service.title || service.name, value: service.name }))}
+            />
+          </Form.Item>
+          <Form.Item name="model" label={t('Model')} rules={[{ required: true }]}>
+            <Select
+              showSearch
+              optionFilterProp="label"
+              loading={modelsLoading}
+              disabled={!selectedService}
+              placeholder={t('Select a model')}
+              options={models.map((model) => ({ label: model.id, value: model.id }))}
+            />
+          </Form.Item>
+          <Form.Item
+            name="contextWindow"
+            label={t('Context window')}
+            tooltip={t('Total input + output token capacity reported to clients.')}
+          >
+            <InputNumber
+              min={1}
+              precision={0}
+              style={{ width: '100%' }}
+              placeholder={t('Leave empty to not override')}
+            />
+          </Form.Item>
+          <Form.Item
+            name="maxCompletionTokens"
+            label={t('Max completion tokens')}
+            tooltip={t('Maximum output tokens reported to clients.')}
+          >
+            <InputNumber
+              min={1}
+              precision={0}
+              style={{ width: '100%' }}
+              placeholder={t('Leave empty to not override')}
+            />
+          </Form.Item>
+          <Form.Item name="ownedByOverride" label={t('Owned by')}>
+            <Input placeholder={t('Leave empty to not override')} />
+          </Form.Item>
+          <Form.Item name="displayName" label={t('Display name')}>
+            <Input placeholder={t('Leave empty to not override')} />
+          </Form.Item>
+          <Form.Item name="description" label={t('Description')}>
+            <Input.TextArea rows={3} />
+          </Form.Item>
+          <Form.Item name="enabled" label={t('Enabled')} valuePropName="checked">
+            <Switch />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </Card>
+  );
+}

package/src/client-v2/pages/RolePermissionsTab.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { AiApiRolePermissions } from '../components/AiApiRolePermissions';
+
+/**
+ * v2 ACL permission tab wrapper.
+ *
+ * The v2 `settingsUI.addPermissionsTab` loads a component via `componentLoader` and
+ * passes it `PermissionTabProps` ({ activeRole, ... }), whereas AiApiRolePermissions
+ * takes { role }. This wrapper bridges the prop shape so the shared component can be
+ * reused unchanged across both client runtimes.
+ */
+export default function RolePermissionsTab({ activeRole }: { activeRole?: { name?: string } | null }) {
+  return <AiApiRolePermissions role={activeRole} />;
+}

package/src/client-v2/plugin.tsx

@@ -1,4 +1,19 @@
+import React from 'react';
 import { Plugin, Application } from '@nocobase/client-v2';
+import { AI_API_ACL_SNIPPET } from '../constants';
+
+interface PermissionTabOptions {
+  key: string;
+  label: string;
+  sort?: number;
+  componentLoader: () => Promise<{ default: React.ComponentType<{ activeRole?: { name?: string } | null }> }>;
+}
+
+interface AclPluginV2Compat {
+  settingsUI?: {
+    addPermissionsTab?: (options: PermissionTabOptions) => void;
+  };
+}
 
 export class PluginAiApiClient extends Plugin<Record<string, never>, Application> {
   async load() {
@@ -6,13 +21,15 @@ export class PluginAiApiClient extends Plugin<Record<string, never>, Application
       key: 'ai-api',
       title: this.t('AI API Gateway'),
       icon: 'ApiOutlined',
-      aclSnippet: 'pm.ai-api.configuration',
+      aclSnippet: AI_API_ACL_SNIPPET,
     });
 
     this.pluginSettingsManager.addPageTabItem({
       menuKey: 'ai-api',
       key: 'index',
       title: this.t('Configuration'),
+      aclSnippet: AI_API_ACL_SNIPPET,
+      sort: 1,
       componentLoader: () => import('./pages/GeneralPage'),
     });
 
@@ -20,13 +37,26 @@ export class PluginAiApiClient extends Plugin<Record<string, never>, Application
       menuKey: 'ai-api',
       key: 'model-pricing',
       title: this.t('Model pricing'),
+      aclSnippet: AI_API_ACL_SNIPPET,
+      sort: 2,
       componentLoader: () => import('./pages/ModelPricingPage'),
     });
 
+    this.pluginSettingsManager.addPageTabItem({
+      menuKey: 'ai-api',
+      key: 'model-metadata',
+      title: this.t('Model metadata'),
+      aclSnippet: AI_API_ACL_SNIPPET,
+      sort: 3,
+      componentLoader: () => import('./pages/ModelMetadataPage'),
+    });
+
     this.pluginSettingsManager.addPageTabItem({
       menuKey: 'ai-api',
       key: 'user-quotas',
       title: this.t('User quotas'),
+      aclSnippet: AI_API_ACL_SNIPPET,
+      sort: 4,
       componentLoader: () => import('./pages/UserQuotasPage'),
     });
 
@@ -34,8 +64,18 @@ export class PluginAiApiClient extends Plugin<Record<string, never>, Application
       menuKey: 'ai-api',
       key: 'usage',
       title: this.t('Usage'),
+      aclSnippet: AI_API_ACL_SNIPPET,
+      sort: 5,
       componentLoader: () => import('./pages/UsagePage'),
     });
+
+    const aclPlugin = this.app.pm.get('@nocobase/plugin-acl') as AclPluginV2Compat | undefined;
+    aclPlugin?.settingsUI?.addPermissionsTab?.({
+      key: 'aiApi',
+      label: this.t('AI API'),
+      sort: 25,
+      componentLoader: () => import('./pages/RolePermissionsTab'),
+    });
   }
 }
 

package/src/constants.ts

@@ -0,0 +1,21 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+/**
+ * The single admin snippet the server registers as `pm.${this.name}.configuration`.
+ *
+ * `this.name` is the plugin's package name with only `@nocobase/plugin-` or
+ * `@nocobase/preset-` stripped (see utils/plugin-package `getPluginNameFromPackageName`),
+ * so for this unscoped package it stays `plugin-ai-api` — verified against the running
+ * app, which reports `name: "plugin-ai-api"`. Spelling it `pm.ai-api.configuration` on the
+ * client names a snippet no role can ever hold.
+ *
+ * Shared by both client runtimes so a rename cannot silently desynchronise them.
+ */
+export const AI_API_ACL_SNIPPET = 'pm.plugin-ai-api.configuration';

package/src/locale/en-US.json

@@ -1,11 +1,11 @@
-{
-  "AI API Gateway": "AI API Gateway",
-  "Configuration": "Configuration",
-  "Default AI Employee": "Default AI Employee",
-  "Enabled LLM Services": "Enabled LLM Services",
-  "Rate Limit": "Rate Limit",
-  "Save Configuration": "Save Configuration",
-  "Configuration saved": "Configuration saved",
+{
+  "AI API Gateway": "AI API Gateway",
+  "Configuration": "Configuration",
+  "Default AI Employee": "Default AI Employee",
+  "Enabled LLM Services": "Enabled LLM Services",
+  "Rate Limit": "Rate Limit",
+  "Save Configuration": "Save Configuration",
+  "Configuration saved": "Configuration saved",
   "Failed to save configuration": "Failed to save configuration",
   "API mode": "API mode",
   "Direct LLM": "Direct LLM",
@@ -82,5 +82,24 @@
   "Reset": "Reset",
   "Requests": "Requests",
   "Total cost": "Total cost",
-  "Usage records": "Usage records"
+  "Usage records": "Usage records",
+  "Model metadata": "Model metadata",
+  "Add override": "Add override",
+  "Edit override": "Edit override",
+  "Delete this override?": "Delete this override?",
+  "Context window": "Context window",
+  "Max completion tokens": "Max completion tokens",
+  "Owned by": "Owned by",
+  "Display name": "Display name",
+  "Description": "Description",
+  "Leave empty to not override": "Leave empty to not override",
+  "Total input + output token capacity reported to clients.": "Total input + output token capacity reported to clients.",
+  "Maximum output tokens reported to clients.": "Maximum output tokens reported to clients.",
+  "AI API": "AI API",
+  "Allow this role to use the AI API": "Allow this role to use the AI API",
+  "Allow all AI Employees": "Allow all AI Employees",
+  "Select which AI Employees this role may use:": "Select which AI Employees this role may use:",
+  "Select allowed AI Employees": "Select allowed AI Employees",
+  "Max request body size (MB)": "Max request body size (MB)",
+  "Raise this to accept inline base64 images. Base64 adds about 33% to the original file size.": "Raise this to accept inline base64 images. Base64 adds about 33% to the original file size."
 }