plugin-ai-api 1.0.15 → 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

@@ -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.
+ */
+
+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

@@ -0,0 +1,183 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Alert, Button, Card, Form, InputNumber, Select, Space, Switch, Typography, message } from 'antd';
+import { useFlowContext } from '@nocobase/flow-engine';
+import { useT } from '../locale';
+import { errorMessage, unwrapData } from './api';
+
+interface GeneralSettings {
+  mode: 'llm' | 'agent';
+  defaultAiEmployee?: string;
+  defaultLlmService?: string;
+  enabledLlmServices: string[];
+  rateLimitPerMinute: number;
+  maxRequestBodyMb: number;
+  quotaEnabled: boolean;
+  defaultReservationOutputTokens: number;
+}
+
+interface LlmService {
+  name: string;
+  title?: string;
+}
+
+interface AiEmployee {
+  username: string;
+  nickname?: string;
+}
+
+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();
+  const [form] = Form.useForm<GeneralSettings>();
+  const mode = Form.useWatch('mode', form);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [services, setServices] = useState<LlmService[]>([]);
+  const [employees, setEmployees] = useState<AiEmployee[]>([]);
+  const [loadError, setLoadError] = useState<string>();
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setLoadError(undefined);
+    try {
+      const [configResponse, servicesResponse, employeesResponse] = await Promise.all([
+        ctx.api.request({ url: 'aiApiConfig:get', method: 'get' }),
+        ctx.api.request({ url: 'ai:listLLMServices', method: 'get' }),
+        ctx.api.request({ url: 'aiEmployees:list', method: 'get', params: { paginate: false } }),
+      ]);
+      form.setFieldsValue({ ...defaults, ...unwrapData<Partial<GeneralSettings>>(configResponse, {}) });
+      setServices(unwrapData<LlmService[]>(servicesResponse, []));
+      setEmployees(unwrapData<AiEmployee[]>(employeesResponse, []));
+    } catch (error) {
+      setLoadError(errorMessage(error));
+    } finally {
+      setLoading(false);
+    }
+  }, [ctx.api, form]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const save = async () => {
+    const values = await form.validateFields();
+    setSaving(true);
+    try {
+      await ctx.api.request({ url: 'aiApiConfig:save', method: 'post', data: values });
+      message.success(t('Configuration saved'));
+    } catch (error) {
+      message.error(`${t('Failed to save configuration')}: ${errorMessage(error)}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const serviceOptions = services.map((service) => ({
+    label: service.title || service.name,
+    value: service.name,
+  }));
+  const employeeOptions = employees.map((employee) => ({
+    label: employee.nickname ? `${employee.nickname} (${employee.username})` : employee.username,
+    value: employee.username,
+  }));
+  const baseUrl = `${window.location.origin}/api/ai-llm/v1`;
+
+  return (
+    <Card title={t('Configuration')} loading={loading}>
+      {loadError ? <Alert type="error" showIcon message={loadError} style={{ marginBottom: 16 }} /> : null}
+      <Form form={form} layout="vertical" style={{ maxWidth: 720 }} initialValues={defaults}>
+        <Form.Item name="mode" label={t('API mode')} rules={[{ required: true }]}>
+          <Select
+            options={[
+              { label: t('Direct LLM'), value: 'llm' },
+              { label: t('AI Employee agent'), value: 'agent' },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item name="defaultLlmService" label={t('Default LLM service')}>
+          <Select allowClear showSearch optionFilterProp="label" options={serviceOptions} />
+        </Form.Item>
+        <Form.Item name="enabledLlmServices" label={t('Enabled LLM Services')}>
+          <Select mode="multiple" allowClear showSearch optionFilterProp="label" options={serviceOptions} />
+        </Form.Item>
+        {mode === 'agent' ? (
+          <Form.Item name="defaultAiEmployee" label={t('Default AI Employee')}>
+            <Select
+              allowClear
+              showSearch
+              optionFilterProp="label"
+              placeholder={t('Select an AI Employee')}
+              options={employeeOptions}
+            />
+          </Form.Item>
+        ) : null}
+        <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>
+        <Form.Item
+          name="defaultReservationOutputTokens"
+          label={t('Default reserved output tokens')}
+          rules={[{ required: true }]}
+        >
+          <InputNumber min={1} style={{ width: '100%' }} />
+        </Form.Item>
+        <Space>
+          <Button type="primary" loading={saving} onClick={save}>
+            {t('Save Configuration')}
+          </Button>
+          <Button onClick={load}>{t('Refresh')}</Button>
+        </Space>
+      </Form>
+      <Card title={t('Usage guide')} size="small" style={{ marginTop: 24 }}>
+        <Alert
+          type="info"
+          showIcon
+          message={t('OpenAI-compatible endpoint')}
+          description={
+            <Space direction="vertical" size={4}>
+              <Typography.Text>{t('Base URL')}</Typography.Text>
+              <Typography.Text code copyable>
+                {baseUrl}
+              </Typography.Text>
+              <Typography.Text>{t('Use a NocoBase API key as the Bearer token.')}</Typography.Text>
+            </Space>
+          }
+          style={{ marginBottom: 16 }}
+        />
+        <Typography.Paragraph>{t('List available models')}</Typography.Paragraph>
+        <Typography.Paragraph
+          code
+          copyable
+        >{`curl ${baseUrl}/models -H "Authorization: Bearer <your-api-key>"`}</Typography.Paragraph>
+        <Typography.Paragraph>{t('Send a chat completion')}</Typography.Paragraph>
+        <Typography.Paragraph code copyable>{`curl ${baseUrl}/chat/completions \\
+  -H "Authorization: Bearer <your-api-key>" \\
+  -H "Content-Type: application/json" \\
+  -d '{"model":"<service>/<model>","messages":[{"role":"user","content":"Hello"}]}'`}</Typography.Paragraph>
+      </Card>
+    </Card>
+  );
+}

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>
+  );
+}