|
|
@@ -0,0 +1,1409 @@
|
|
|
+/*
|
|
|
+Copyright (C) 2025 QuantumNous
|
|
|
+
|
|
|
+This program is free software: you can redistribute it and/or modify
|
|
|
+it under the terms of the GNU Affero General Public License as
|
|
|
+published by the Free Software Foundation, either version 3 of the
|
|
|
+License, or (at your option) any later version.
|
|
|
+
|
|
|
+This program is distributed in the hope that it will be useful,
|
|
|
+but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
+GNU Affero General Public License for more details.
|
|
|
+
|
|
|
+You should have received a copy of the GNU Affero General Public License
|
|
|
+along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
+
|
|
|
+For commercial licensing, please contact support@quantumnous.com
|
|
|
+*/
|
|
|
+
|
|
|
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
|
+import MonacoEditor from '@monaco-editor/react';
|
|
|
+import { useTranslation } from 'react-i18next';
|
|
|
+import {
|
|
|
+ Banner,
|
|
|
+ Button,
|
|
|
+ Card,
|
|
|
+ Col,
|
|
|
+ Input,
|
|
|
+ Modal,
|
|
|
+ Row,
|
|
|
+ Select,
|
|
|
+ Space,
|
|
|
+ Switch,
|
|
|
+ Tag,
|
|
|
+ Typography,
|
|
|
+} from '@douyinfe/semi-ui';
|
|
|
+import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
|
|
|
+import { showError, verifyJSON } from '../../../../helpers';
|
|
|
+import JSONEditor from '../../../common/ui/JSONEditor';
|
|
|
+
|
|
|
+const { Text } = Typography;
|
|
|
+
|
|
|
+const OPERATION_MODE_OPTIONS = [
|
|
|
+ { label: 'JSON · set', value: 'set' },
|
|
|
+ { label: 'JSON · delete', value: 'delete' },
|
|
|
+ { label: 'JSON · append', value: 'append' },
|
|
|
+ { label: 'JSON · prepend', value: 'prepend' },
|
|
|
+ { label: 'JSON · copy', value: 'copy' },
|
|
|
+ { label: 'JSON · move', value: 'move' },
|
|
|
+ { label: 'JSON · replace', value: 'replace' },
|
|
|
+ { label: 'JSON · regex_replace', value: 'regex_replace' },
|
|
|
+ { label: 'JSON · trim_prefix', value: 'trim_prefix' },
|
|
|
+ { label: 'JSON · trim_suffix', value: 'trim_suffix' },
|
|
|
+ { label: 'JSON · ensure_prefix', value: 'ensure_prefix' },
|
|
|
+ { label: 'JSON · ensure_suffix', value: 'ensure_suffix' },
|
|
|
+ { label: 'JSON · trim_space', value: 'trim_space' },
|
|
|
+ { label: 'JSON · to_lower', value: 'to_lower' },
|
|
|
+ { label: 'JSON · to_upper', value: 'to_upper' },
|
|
|
+ { label: 'Control · return_error', value: 'return_error' },
|
|
|
+ { label: 'Control · prune_objects', value: 'prune_objects' },
|
|
|
+ { label: 'Header · set_header', value: 'set_header' },
|
|
|
+ { label: 'Header · delete_header', value: 'delete_header' },
|
|
|
+ { label: 'Header · copy_header', value: 'copy_header' },
|
|
|
+ { label: 'Header · move_header', value: 'move_header' },
|
|
|
+];
|
|
|
+
|
|
|
+const OPERATION_MODE_VALUES = new Set(
|
|
|
+ OPERATION_MODE_OPTIONS.map((item) => item.value),
|
|
|
+);
|
|
|
+
|
|
|
+const CONDITION_MODE_OPTIONS = [
|
|
|
+ { label: 'full', value: 'full' },
|
|
|
+ { label: 'prefix', value: 'prefix' },
|
|
|
+ { label: 'suffix', value: 'suffix' },
|
|
|
+ { label: 'contains', value: 'contains' },
|
|
|
+ { label: 'gt', value: 'gt' },
|
|
|
+ { label: 'gte', value: 'gte' },
|
|
|
+ { label: 'lt', value: 'lt' },
|
|
|
+ { label: 'lte', value: 'lte' },
|
|
|
+];
|
|
|
+
|
|
|
+const CONDITION_MODE_VALUES = new Set(
|
|
|
+ CONDITION_MODE_OPTIONS.map((item) => item.value),
|
|
|
+);
|
|
|
+
|
|
|
+const MODE_META = {
|
|
|
+ delete: { path: true },
|
|
|
+ set: { path: true, value: true, keepOrigin: true },
|
|
|
+ append: { path: true, value: true, keepOrigin: true },
|
|
|
+ prepend: { path: true, value: true, keepOrigin: true },
|
|
|
+ copy: { from: true, to: true },
|
|
|
+ move: { from: true, to: true },
|
|
|
+ replace: { path: true, from: true, to: false },
|
|
|
+ regex_replace: { path: true, from: true, to: false },
|
|
|
+ trim_prefix: { path: true, value: true },
|
|
|
+ trim_suffix: { path: true, value: true },
|
|
|
+ ensure_prefix: { path: true, value: true },
|
|
|
+ ensure_suffix: { path: true, value: true },
|
|
|
+ trim_space: { path: true },
|
|
|
+ to_lower: { path: true },
|
|
|
+ to_upper: { path: true },
|
|
|
+ return_error: { value: true },
|
|
|
+ prune_objects: { pathOptional: true, value: true },
|
|
|
+ set_header: { path: true, value: true, keepOrigin: true },
|
|
|
+ delete_header: { path: true },
|
|
|
+ copy_header: { from: true, to: true, keepOrigin: true, pathAlias: true },
|
|
|
+ move_header: { from: true, to: true, keepOrigin: true, pathAlias: true },
|
|
|
+};
|
|
|
+
|
|
|
+const VALUE_REQUIRED_MODES = new Set([
|
|
|
+ 'trim_prefix',
|
|
|
+ 'trim_suffix',
|
|
|
+ 'ensure_prefix',
|
|
|
+ 'ensure_suffix',
|
|
|
+ 'set_header',
|
|
|
+ 'return_error',
|
|
|
+ 'prune_objects',
|
|
|
+]);
|
|
|
+
|
|
|
+const FROM_REQUIRED_MODES = new Set([
|
|
|
+ 'copy',
|
|
|
+ 'move',
|
|
|
+ 'replace',
|
|
|
+ 'regex_replace',
|
|
|
+ 'copy_header',
|
|
|
+ 'move_header',
|
|
|
+]);
|
|
|
+
|
|
|
+const TO_REQUIRED_MODES = new Set(['copy', 'move', 'copy_header', 'move_header']);
|
|
|
+
|
|
|
+const MODE_DESCRIPTIONS = {
|
|
|
+ set: 'Set JSON value at path',
|
|
|
+ delete: 'Delete JSON field at path',
|
|
|
+ append: 'Append value to array/string/object',
|
|
|
+ prepend: 'Prepend value to array/string/object',
|
|
|
+ copy: 'Copy JSON value from from -> to',
|
|
|
+ move: 'Move JSON value from from -> to',
|
|
|
+ replace: 'String replace on target path',
|
|
|
+ regex_replace: 'Regex replace on target path',
|
|
|
+ trim_prefix: 'Trim prefix on string value',
|
|
|
+ trim_suffix: 'Trim suffix on string value',
|
|
|
+ ensure_prefix: 'Ensure string starts with prefix',
|
|
|
+ ensure_suffix: 'Ensure string ends with suffix',
|
|
|
+ trim_space: 'Trim spaces/newlines on string value',
|
|
|
+ to_lower: 'Convert string to lower case',
|
|
|
+ to_upper: 'Convert string to upper case',
|
|
|
+ return_error: 'Stop processing and return custom error',
|
|
|
+ prune_objects: 'Remove objects matching conditions',
|
|
|
+ set_header: 'Set runtime override header',
|
|
|
+ delete_header: 'Delete runtime override header',
|
|
|
+ copy_header: 'Copy header from from -> to',
|
|
|
+ move_header: 'Move header from from -> to',
|
|
|
+};
|
|
|
+
|
|
|
+const OPERATION_PATH_SUGGESTIONS = [
|
|
|
+ 'model',
|
|
|
+ 'temperature',
|
|
|
+ 'max_tokens',
|
|
|
+ 'messages.-1.content',
|
|
|
+ 'metadata.conversation_id',
|
|
|
+];
|
|
|
+
|
|
|
+const CONDITION_PATH_SUGGESTIONS = [
|
|
|
+ 'model',
|
|
|
+ 'retry.is_retry',
|
|
|
+ 'last_error.code',
|
|
|
+ 'request_headers.authorization',
|
|
|
+ 'header_override_normalized.x_debug_mode',
|
|
|
+];
|
|
|
+
|
|
|
+const LEGACY_TEMPLATE = {
|
|
|
+ temperature: 0,
|
|
|
+ max_tokens: 1000,
|
|
|
+};
|
|
|
+
|
|
|
+const OPERATION_TEMPLATE = {
|
|
|
+ operations: [
|
|
|
+ {
|
|
|
+ path: 'temperature',
|
|
|
+ mode: 'set',
|
|
|
+ value: 0.7,
|
|
|
+ conditions: [
|
|
|
+ {
|
|
|
+ path: 'model',
|
|
|
+ mode: 'prefix',
|
|
|
+ value: 'gpt',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ logic: 'AND',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+};
|
|
|
+
|
|
|
+const MONACO_SCHEMA_URI = 'https://new-api.local/schemas/param-override.schema.json';
|
|
|
+const MONACO_MODEL_URI = 'inmemory://new-api/param-override.json';
|
|
|
+
|
|
|
+const JSON_SCALAR_SCHEMA = {
|
|
|
+ oneOf: [
|
|
|
+ { type: 'string' },
|
|
|
+ { type: 'number' },
|
|
|
+ { type: 'boolean' },
|
|
|
+ { type: 'null' },
|
|
|
+ { type: 'array' },
|
|
|
+ { type: 'object' },
|
|
|
+ ],
|
|
|
+};
|
|
|
+
|
|
|
+const PARAM_OVERRIDE_JSON_SCHEMA = {
|
|
|
+ $schema: 'http://json-schema.org/draft-07/schema#',
|
|
|
+ type: 'object',
|
|
|
+ properties: {
|
|
|
+ operations: {
|
|
|
+ type: 'array',
|
|
|
+ description: 'Operation pipeline for new param override format.',
|
|
|
+ items: {
|
|
|
+ type: 'object',
|
|
|
+ properties: {
|
|
|
+ mode: {
|
|
|
+ type: 'string',
|
|
|
+ enum: OPERATION_MODE_OPTIONS.map((item) => item.value),
|
|
|
+ },
|
|
|
+ path: { type: 'string' },
|
|
|
+ from: { type: 'string' },
|
|
|
+ to: { type: 'string' },
|
|
|
+ keep_origin: { type: 'boolean' },
|
|
|
+ value: JSON_SCALAR_SCHEMA,
|
|
|
+ logic: { type: 'string', enum: ['AND', 'OR'] },
|
|
|
+ conditions: {
|
|
|
+ oneOf: [
|
|
|
+ {
|
|
|
+ type: 'array',
|
|
|
+ items: {
|
|
|
+ type: 'object',
|
|
|
+ properties: {
|
|
|
+ path: { type: 'string' },
|
|
|
+ mode: {
|
|
|
+ type: 'string',
|
|
|
+ enum: CONDITION_MODE_OPTIONS.map((item) => item.value),
|
|
|
+ },
|
|
|
+ value: JSON_SCALAR_SCHEMA,
|
|
|
+ invert: { type: 'boolean' },
|
|
|
+ pass_missing_key: { type: 'boolean' },
|
|
|
+ },
|
|
|
+ required: ['path', 'mode'],
|
|
|
+ additionalProperties: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'object',
|
|
|
+ additionalProperties: JSON_SCALAR_SCHEMA,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ required: ['mode'],
|
|
|
+ additionalProperties: false,
|
|
|
+ allOf: [
|
|
|
+ {
|
|
|
+ if: { properties: { mode: { const: 'set' } }, required: ['mode'] },
|
|
|
+ then: { required: ['path'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: { properties: { mode: { const: 'delete' } }, required: ['mode'] },
|
|
|
+ then: { required: ['path'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: { properties: { mode: { const: 'append' } }, required: ['mode'] },
|
|
|
+ then: { required: ['path'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: { properties: { mode: { const: 'prepend' } }, required: ['mode'] },
|
|
|
+ then: { required: ['path'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: { properties: { mode: { const: 'copy' } }, required: ['mode'] },
|
|
|
+ then: { required: ['from', 'to'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: { properties: { mode: { const: 'move' } }, required: ['mode'] },
|
|
|
+ then: { required: ['from', 'to'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: { properties: { mode: { const: 'replace' } }, required: ['mode'] },
|
|
|
+ then: { required: ['path', 'from'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'regex_replace' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['path', 'from'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'trim_prefix' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['path', 'value'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'trim_suffix' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['path', 'value'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'ensure_prefix' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['path', 'value'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'ensure_suffix' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['path', 'value'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'trim_space' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['path'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'to_lower' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['path'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'to_upper' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['path'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'return_error' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['value'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'prune_objects' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['value'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'set_header' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['path', 'value'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'delete_header' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: { required: ['path'] },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'copy_header' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: {
|
|
|
+ anyOf: [{ required: ['path'] }, { required: ['from', 'to'] }],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ if: {
|
|
|
+ properties: { mode: { const: 'move_header' } },
|
|
|
+ required: ['mode'],
|
|
|
+ },
|
|
|
+ then: {
|
|
|
+ anyOf: [{ required: ['path'] }, { required: ['from', 'to'] }],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ additionalProperties: true,
|
|
|
+};
|
|
|
+
|
|
|
+let localIdSeed = 0;
|
|
|
+const nextLocalId = () => `param_override_${Date.now()}_${localIdSeed++}`;
|
|
|
+
|
|
|
+const toValueText = (value) => {
|
|
|
+ if (value === undefined) return '';
|
|
|
+ if (typeof value === 'string') return value;
|
|
|
+ try {
|
|
|
+ return JSON.stringify(value);
|
|
|
+ } catch (error) {
|
|
|
+ return String(value);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const parseLooseValue = (valueText) => {
|
|
|
+ const raw = String(valueText ?? '');
|
|
|
+ if (raw.trim() === '') return '';
|
|
|
+ try {
|
|
|
+ return JSON.parse(raw);
|
|
|
+ } catch (error) {
|
|
|
+ return raw;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const normalizeCondition = (condition = {}) => ({
|
|
|
+ id: nextLocalId(),
|
|
|
+ path: typeof condition.path === 'string' ? condition.path : '',
|
|
|
+ mode: CONDITION_MODE_VALUES.has(condition.mode) ? condition.mode : 'full',
|
|
|
+ value_text: toValueText(condition.value),
|
|
|
+ invert: condition.invert === true,
|
|
|
+ pass_missing_key: condition.pass_missing_key === true,
|
|
|
+});
|
|
|
+
|
|
|
+const createDefaultCondition = () => normalizeCondition({});
|
|
|
+
|
|
|
+const normalizeOperation = (operation = {}) => ({
|
|
|
+ id: nextLocalId(),
|
|
|
+ path: typeof operation.path === 'string' ? operation.path : '',
|
|
|
+ mode: OPERATION_MODE_VALUES.has(operation.mode) ? operation.mode : 'set',
|
|
|
+ value_text: toValueText(operation.value),
|
|
|
+ keep_origin: operation.keep_origin === true,
|
|
|
+ from: typeof operation.from === 'string' ? operation.from : '',
|
|
|
+ to: typeof operation.to === 'string' ? operation.to : '',
|
|
|
+ logic: String(operation.logic || 'OR').toUpperCase() === 'AND' ? 'AND' : 'OR',
|
|
|
+ conditions: Array.isArray(operation.conditions)
|
|
|
+ ? operation.conditions.map(normalizeCondition)
|
|
|
+ : [],
|
|
|
+});
|
|
|
+
|
|
|
+const createDefaultOperation = () => normalizeOperation({ mode: 'set' });
|
|
|
+
|
|
|
+const parseInitialState = (rawValue) => {
|
|
|
+ const text = typeof rawValue === 'string' ? rawValue : '';
|
|
|
+ const trimmed = text.trim();
|
|
|
+ if (!trimmed) {
|
|
|
+ return {
|
|
|
+ editMode: 'visual',
|
|
|
+ visualMode: 'operations',
|
|
|
+ legacyValue: '',
|
|
|
+ operations: [createDefaultOperation()],
|
|
|
+ jsonText: '',
|
|
|
+ jsonError: '',
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!verifyJSON(trimmed)) {
|
|
|
+ return {
|
|
|
+ editMode: 'json',
|
|
|
+ visualMode: 'operations',
|
|
|
+ legacyValue: '',
|
|
|
+ operations: [createDefaultOperation()],
|
|
|
+ jsonText: text,
|
|
|
+ jsonError: 'JSON format is invalid',
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ const parsed = JSON.parse(trimmed);
|
|
|
+ const pretty = JSON.stringify(parsed, null, 2);
|
|
|
+
|
|
|
+ if (
|
|
|
+ parsed &&
|
|
|
+ typeof parsed === 'object' &&
|
|
|
+ !Array.isArray(parsed) &&
|
|
|
+ Array.isArray(parsed.operations)
|
|
|
+ ) {
|
|
|
+ return {
|
|
|
+ editMode: 'visual',
|
|
|
+ visualMode: 'operations',
|
|
|
+ legacyValue: '',
|
|
|
+ operations:
|
|
|
+ parsed.operations.length > 0
|
|
|
+ ? parsed.operations.map(normalizeOperation)
|
|
|
+ : [createDefaultOperation()],
|
|
|
+ jsonText: pretty,
|
|
|
+ jsonError: '',
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
|
|
|
+ return {
|
|
|
+ editMode: 'visual',
|
|
|
+ visualMode: 'legacy',
|
|
|
+ legacyValue: pretty,
|
|
|
+ operations: [createDefaultOperation()],
|
|
|
+ jsonText: pretty,
|
|
|
+ jsonError: '',
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ editMode: 'json',
|
|
|
+ visualMode: 'operations',
|
|
|
+ legacyValue: '',
|
|
|
+ operations: [createDefaultOperation()],
|
|
|
+ jsonText: pretty,
|
|
|
+ jsonError: '',
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+const isOperationBlank = (operation) => {
|
|
|
+ const hasCondition = (operation.conditions || []).some(
|
|
|
+ (condition) =>
|
|
|
+ condition.path.trim() ||
|
|
|
+ String(condition.value_text ?? '').trim() ||
|
|
|
+ condition.mode !== 'full' ||
|
|
|
+ condition.invert ||
|
|
|
+ condition.pass_missing_key,
|
|
|
+ );
|
|
|
+ return (
|
|
|
+ operation.mode === 'set' &&
|
|
|
+ !operation.path.trim() &&
|
|
|
+ !operation.from.trim() &&
|
|
|
+ !operation.to.trim() &&
|
|
|
+ String(operation.value_text ?? '').trim() === '' &&
|
|
|
+ !operation.keep_origin &&
|
|
|
+ !hasCondition
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+const buildConditionPayload = (condition) => {
|
|
|
+ const path = condition.path.trim();
|
|
|
+ if (!path) return null;
|
|
|
+ const payload = {
|
|
|
+ path,
|
|
|
+ mode: condition.mode || 'full',
|
|
|
+ value: parseLooseValue(condition.value_text),
|
|
|
+ };
|
|
|
+ if (condition.invert) payload.invert = true;
|
|
|
+ if (condition.pass_missing_key) payload.pass_missing_key = true;
|
|
|
+ return payload;
|
|
|
+};
|
|
|
+
|
|
|
+const validateOperations = (operations, t) => {
|
|
|
+ for (let i = 0; i < operations.length; i++) {
|
|
|
+ const op = operations[i];
|
|
|
+ const mode = op.mode || 'set';
|
|
|
+ const meta = MODE_META[mode] || MODE_META.set;
|
|
|
+ const line = i + 1;
|
|
|
+ const pathValue = op.path.trim();
|
|
|
+ const fromValue = op.from.trim();
|
|
|
+ const toValue = op.to.trim();
|
|
|
+
|
|
|
+ if (meta.path && !pathValue) {
|
|
|
+ return t('第 {{line}} 条操作缺少 path', { line });
|
|
|
+ }
|
|
|
+ if (FROM_REQUIRED_MODES.has(mode) && !fromValue) {
|
|
|
+ if (!(meta.pathAlias && pathValue)) {
|
|
|
+ return t('第 {{line}} 条操作缺少 from', { line });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (TO_REQUIRED_MODES.has(mode) && !toValue) {
|
|
|
+ if (!(meta.pathAlias && pathValue)) {
|
|
|
+ return t('第 {{line}} 条操作缺少 to', { line });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (meta.from && !fromValue) {
|
|
|
+ return t('第 {{line}} 条操作缺少 from', { line });
|
|
|
+ }
|
|
|
+ if (meta.to && !toValue) {
|
|
|
+ return t('第 {{line}} 条操作缺少 to', { line });
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ VALUE_REQUIRED_MODES.has(mode) &&
|
|
|
+ String(op.value_text ?? '').trim() === ''
|
|
|
+ ) {
|
|
|
+ return t('第 {{line}} 条操作缺少 value', { line });
|
|
|
+ }
|
|
|
+ if (mode === 'return_error') {
|
|
|
+ const raw = String(op.value_text ?? '').trim();
|
|
|
+ if (!raw) {
|
|
|
+ return t('第 {{line}} 条操作缺少 value', { line });
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ const parsed = JSON.parse(raw);
|
|
|
+ if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
|
|
|
+ if (!String(parsed.message || '').trim()) {
|
|
|
+ return t('第 {{line}} 条 return_error 需要 message', { line });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ // plain string value is allowed
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+};
|
|
|
+
|
|
|
+const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
|
|
|
+ const { t } = useTranslation();
|
|
|
+
|
|
|
+ const [editMode, setEditMode] = useState('visual');
|
|
|
+ const [visualMode, setVisualMode] = useState('operations');
|
|
|
+ const [legacyValue, setLegacyValue] = useState('');
|
|
|
+ const [operations, setOperations] = useState([createDefaultOperation()]);
|
|
|
+ const [jsonText, setJsonText] = useState('');
|
|
|
+ const [jsonError, setJsonError] = useState('');
|
|
|
+ const monacoConfiguredRef = useRef(false);
|
|
|
+
|
|
|
+ const configureMonaco = useCallback((monaco) => {
|
|
|
+ if (monacoConfiguredRef.current) return;
|
|
|
+ monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
|
|
|
+ validate: true,
|
|
|
+ allowComments: false,
|
|
|
+ enableSchemaRequest: false,
|
|
|
+ schemas: [
|
|
|
+ {
|
|
|
+ uri: MONACO_SCHEMA_URI,
|
|
|
+ fileMatch: [MONACO_MODEL_URI, '*param-override*.json'],
|
|
|
+ schema: PARAM_OVERRIDE_JSON_SCHEMA,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ monacoConfiguredRef.current = true;
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (!visible) return;
|
|
|
+ const nextState = parseInitialState(value);
|
|
|
+ setEditMode(nextState.editMode);
|
|
|
+ setVisualMode(nextState.visualMode);
|
|
|
+ setLegacyValue(nextState.legacyValue);
|
|
|
+ setOperations(nextState.operations);
|
|
|
+ setJsonText(nextState.jsonText);
|
|
|
+ setJsonError(nextState.jsonError);
|
|
|
+ }, [visible, value]);
|
|
|
+
|
|
|
+ const operationCount = useMemo(
|
|
|
+ () => operations.filter((item) => !isOperationBlank(item)).length,
|
|
|
+ [operations],
|
|
|
+ );
|
|
|
+
|
|
|
+ const buildVisualJson = useCallback(() => {
|
|
|
+ if (visualMode === 'legacy') {
|
|
|
+ const trimmed = legacyValue.trim();
|
|
|
+ if (!trimmed) return '';
|
|
|
+ if (!verifyJSON(trimmed)) {
|
|
|
+ throw new Error(t('参数覆盖必须是合法的 JSON 格式！'));
|
|
|
+ }
|
|
|
+ const parsed = JSON.parse(trimmed);
|
|
|
+ if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
|
|
|
+ throw new Error(t('旧格式必须是 JSON 对象'));
|
|
|
+ }
|
|
|
+ return JSON.stringify(parsed, null, 2);
|
|
|
+ }
|
|
|
+
|
|
|
+ const filteredOps = operations.filter((item) => !isOperationBlank(item));
|
|
|
+ if (filteredOps.length === 0) return '';
|
|
|
+
|
|
|
+ const message = validateOperations(filteredOps, t);
|
|
|
+ if (message) {
|
|
|
+ throw new Error(message);
|
|
|
+ }
|
|
|
+
|
|
|
+ const payloadOps = filteredOps.map((operation) => {
|
|
|
+ const mode = operation.mode || 'set';
|
|
|
+ const meta = MODE_META[mode] || MODE_META.set;
|
|
|
+ const pathValue = operation.path.trim();
|
|
|
+ const fromValue = operation.from.trim();
|
|
|
+ const toValue = operation.to.trim();
|
|
|
+ const payload = { mode };
|
|
|
+ if (meta.path) {
|
|
|
+ payload.path = pathValue;
|
|
|
+ }
|
|
|
+ if (meta.pathOptional && pathValue) {
|
|
|
+ payload.path = pathValue;
|
|
|
+ }
|
|
|
+ if (meta.value) {
|
|
|
+ payload.value = parseLooseValue(operation.value_text);
|
|
|
+ }
|
|
|
+ if (meta.keepOrigin && operation.keep_origin) {
|
|
|
+ payload.keep_origin = true;
|
|
|
+ }
|
|
|
+ if (meta.from) {
|
|
|
+ payload.from = fromValue;
|
|
|
+ }
|
|
|
+ if (!meta.to && operation.to.trim()) {
|
|
|
+ payload.to = toValue;
|
|
|
+ }
|
|
|
+ if (meta.to) {
|
|
|
+ payload.to = toValue;
|
|
|
+ }
|
|
|
+ if (meta.pathAlias) {
|
|
|
+ if (!payload.from && pathValue) {
|
|
|
+ payload.from = pathValue;
|
|
|
+ }
|
|
|
+ if (!payload.to && pathValue) {
|
|
|
+ payload.to = pathValue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const conditions = (operation.conditions || [])
|
|
|
+ .map(buildConditionPayload)
|
|
|
+ .filter(Boolean);
|
|
|
+
|
|
|
+ if (conditions.length > 0) {
|
|
|
+ payload.conditions = conditions;
|
|
|
+ payload.logic = operation.logic === 'AND' ? 'AND' : 'OR';
|
|
|
+ }
|
|
|
+
|
|
|
+ return payload;
|
|
|
+ });
|
|
|
+
|
|
|
+ return JSON.stringify({ operations: payloadOps }, null, 2);
|
|
|
+ }, [legacyValue, operations, t, visualMode]);
|
|
|
+
|
|
|
+ const switchToJsonMode = () => {
|
|
|
+ if (editMode === 'json') return;
|
|
|
+ try {
|
|
|
+ setJsonText(buildVisualJson());
|
|
|
+ setJsonError('');
|
|
|
+ setEditMode('json');
|
|
|
+ } catch (error) {
|
|
|
+ showError(error.message);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const switchToVisualMode = () => {
|
|
|
+ if (editMode === 'visual') return;
|
|
|
+ const trimmed = jsonText.trim();
|
|
|
+ if (!trimmed) {
|
|
|
+ setVisualMode('operations');
|
|
|
+ setOperations([createDefaultOperation()]);
|
|
|
+ setLegacyValue('');
|
|
|
+ setJsonError('');
|
|
|
+ setEditMode('visual');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!verifyJSON(trimmed)) {
|
|
|
+ showError(t('参数覆盖必须是合法的 JSON 格式！'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const parsed = JSON.parse(trimmed);
|
|
|
+ if (
|
|
|
+ parsed &&
|
|
|
+ typeof parsed === 'object' &&
|
|
|
+ !Array.isArray(parsed) &&
|
|
|
+ Array.isArray(parsed.operations)
|
|
|
+ ) {
|
|
|
+ setVisualMode('operations');
|
|
|
+ setOperations(
|
|
|
+ parsed.operations.length > 0
|
|
|
+ ? parsed.operations.map(normalizeOperation)
|
|
|
+ : [createDefaultOperation()],
|
|
|
+ );
|
|
|
+ setLegacyValue('');
|
|
|
+ setJsonError('');
|
|
|
+ setEditMode('visual');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
|
|
|
+ setVisualMode('legacy');
|
|
|
+ setLegacyValue(JSON.stringify(parsed, null, 2));
|
|
|
+ setOperations([createDefaultOperation()]);
|
|
|
+ setJsonError('');
|
|
|
+ setEditMode('visual');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ showError(t('参数覆盖必须是合法的 JSON 对象'));
|
|
|
+ };
|
|
|
+
|
|
|
+ const setOldTemplate = () => {
|
|
|
+ const text = JSON.stringify(LEGACY_TEMPLATE, null, 2);
|
|
|
+ setVisualMode('legacy');
|
|
|
+ setLegacyValue(text);
|
|
|
+ setJsonText(text);
|
|
|
+ setJsonError('');
|
|
|
+ setEditMode('visual');
|
|
|
+ };
|
|
|
+
|
|
|
+ const setNewTemplate = () => {
|
|
|
+ setVisualMode('operations');
|
|
|
+ setOperations(OPERATION_TEMPLATE.operations.map(normalizeOperation));
|
|
|
+ setJsonText(JSON.stringify(OPERATION_TEMPLATE, null, 2));
|
|
|
+ setJsonError('');
|
|
|
+ setEditMode('visual');
|
|
|
+ };
|
|
|
+
|
|
|
+ const clearValue = () => {
|
|
|
+ setVisualMode('operations');
|
|
|
+ setLegacyValue('');
|
|
|
+ setOperations([createDefaultOperation()]);
|
|
|
+ setJsonText('');
|
|
|
+ setJsonError('');
|
|
|
+ };
|
|
|
+
|
|
|
+ const updateOperation = (operationId, patch) => {
|
|
|
+ setOperations((prev) =>
|
|
|
+ prev.map((item) =>
|
|
|
+ item.id === operationId ? { ...item, ...patch } : item,
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const addOperation = () => {
|
|
|
+ setOperations((prev) => [...prev, createDefaultOperation()]);
|
|
|
+ };
|
|
|
+
|
|
|
+ const duplicateOperation = (operationId) => {
|
|
|
+ setOperations((prev) => {
|
|
|
+ const index = prev.findIndex((item) => item.id === operationId);
|
|
|
+ if (index < 0) return prev;
|
|
|
+ const source = prev[index];
|
|
|
+ const cloned = normalizeOperation({
|
|
|
+ path: source.path,
|
|
|
+ mode: source.mode,
|
|
|
+ value: parseLooseValue(source.value_text),
|
|
|
+ keep_origin: source.keep_origin,
|
|
|
+ from: source.from,
|
|
|
+ to: source.to,
|
|
|
+ logic: source.logic,
|
|
|
+ conditions: (source.conditions || []).map((condition) => ({
|
|
|
+ path: condition.path,
|
|
|
+ mode: condition.mode,
|
|
|
+ value: parseLooseValue(condition.value_text),
|
|
|
+ invert: condition.invert,
|
|
|
+ pass_missing_key: condition.pass_missing_key,
|
|
|
+ })),
|
|
|
+ });
|
|
|
+ const next = [...prev];
|
|
|
+ next.splice(index + 1, 0, cloned);
|
|
|
+ return next;
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const removeOperation = (operationId) => {
|
|
|
+ setOperations((prev) => {
|
|
|
+ if (prev.length <= 1) return [createDefaultOperation()];
|
|
|
+ return prev.filter((item) => item.id !== operationId);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const addCondition = (operationId) => {
|
|
|
+ setOperations((prev) =>
|
|
|
+ prev.map((operation) =>
|
|
|
+ operation.id === operationId
|
|
|
+ ? {
|
|
|
+ ...operation,
|
|
|
+ conditions: [...(operation.conditions || []), createDefaultCondition()],
|
|
|
+ }
|
|
|
+ : operation,
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const updateCondition = (operationId, conditionId, patch) => {
|
|
|
+ setOperations((prev) =>
|
|
|
+ prev.map((operation) => {
|
|
|
+ if (operation.id !== operationId) return operation;
|
|
|
+ return {
|
|
|
+ ...operation,
|
|
|
+ conditions: (operation.conditions || []).map((condition) =>
|
|
|
+ condition.id === conditionId
|
|
|
+ ? { ...condition, ...patch }
|
|
|
+ : condition,
|
|
|
+ ),
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const removeCondition = (operationId, conditionId) => {
|
|
|
+ setOperations((prev) =>
|
|
|
+ prev.map((operation) => {
|
|
|
+ if (operation.id !== operationId) return operation;
|
|
|
+ return {
|
|
|
+ ...operation,
|
|
|
+ conditions: (operation.conditions || []).filter(
|
|
|
+ (condition) => condition.id !== conditionId,
|
|
|
+ ),
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleJsonChange = (nextValue) => {
|
|
|
+ setJsonText(nextValue);
|
|
|
+ const trimmed = String(nextValue || '').trim();
|
|
|
+ if (!trimmed) {
|
|
|
+ setJsonError('');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!verifyJSON(trimmed)) {
|
|
|
+ setJsonError(t('JSON格式错误'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ setJsonError('');
|
|
|
+ };
|
|
|
+
|
|
|
+ const formatJson = () => {
|
|
|
+ const trimmed = jsonText.trim();
|
|
|
+ if (!trimmed) return;
|
|
|
+ if (!verifyJSON(trimmed)) {
|
|
|
+ showError(t('参数覆盖必须是合法的 JSON 格式！'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ setJsonText(JSON.stringify(JSON.parse(trimmed), null, 2));
|
|
|
+ setJsonError('');
|
|
|
+ };
|
|
|
+
|
|
|
+ const visualPreview = useMemo(() => {
|
|
|
+ if (editMode !== 'visual' || visualMode !== 'operations') {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ return buildVisualJson() || '';
|
|
|
+ } catch (error) {
|
|
|
+ return `// ${error.message}`;
|
|
|
+ }
|
|
|
+ }, [buildVisualJson, editMode, visualMode]);
|
|
|
+
|
|
|
+ const handleSave = () => {
|
|
|
+ try {
|
|
|
+ let result = '';
|
|
|
+ if (editMode === 'json') {
|
|
|
+ const trimmed = jsonText.trim();
|
|
|
+ if (!trimmed) {
|
|
|
+ result = '';
|
|
|
+ } else {
|
|
|
+ if (!verifyJSON(trimmed)) {
|
|
|
+ throw new Error(t('参数覆盖必须是合法的 JSON 格式！'));
|
|
|
+ }
|
|
|
+ result = JSON.stringify(JSON.parse(trimmed), null, 2);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ result = buildVisualJson();
|
|
|
+ }
|
|
|
+ onSave?.(result);
|
|
|
+ } catch (error) {
|
|
|
+ showError(error.message);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Modal
|
|
|
+ title={t('参数覆盖')}
|
|
|
+ visible={visible}
|
|
|
+ width={980}
|
|
|
+ onCancel={onCancel}
|
|
|
+ onOk={handleSave}
|
|
|
+ okText={t('保存')}
|
|
|
+ cancelText={t('取消')}
|
|
|
+ >
|
|
|
+ <Space vertical align='start' spacing={12} style={{ width: '100%' }}>
|
|
|
+ <Banner
|
|
|
+ fullMode={false}
|
|
|
+ type='info'
|
|
|
+ description={t(
|
|
|
+ '支持旧格式直接覆盖，也支持新格式 operations 条件编辑；可在可视化和 JSON 之间双向切换。',
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <Space wrap>
|
|
|
+ <Button
|
|
|
+ type={editMode === 'visual' ? 'primary' : 'tertiary'}
|
|
|
+ onClick={switchToVisualMode}
|
|
|
+ >
|
|
|
+ {t('可视化')}
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ type={editMode === 'json' ? 'primary' : 'tertiary'}
|
|
|
+ onClick={switchToJsonMode}
|
|
|
+ >
|
|
|
+ {t('JSON 模式')}
|
|
|
+ </Button>
|
|
|
+ <Button onClick={setOldTemplate}>{t('旧格式模板')}</Button>
|
|
|
+ <Button onClick={setNewTemplate}>{t('新格式模板')}</Button>
|
|
|
+ <Button onClick={clearValue}>{t('不更改')}</Button>
|
|
|
+ </Space>
|
|
|
+
|
|
|
+ {editMode === 'visual' ? (
|
|
|
+ <div style={{ width: '100%' }}>
|
|
|
+ <Space wrap style={{ marginBottom: 12 }}>
|
|
|
+ <Button
|
|
|
+ type={visualMode === 'operations' ? 'primary' : 'tertiary'}
|
|
|
+ onClick={() => setVisualMode('operations')}
|
|
|
+ >
|
|
|
+ {t('新格式模板')}
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ type={visualMode === 'legacy' ? 'primary' : 'tertiary'}
|
|
|
+ onClick={() => setVisualMode('legacy')}
|
|
|
+ >
|
|
|
+ {t('旧格式模板')}
|
|
|
+ </Button>
|
|
|
+ </Space>
|
|
|
+
|
|
|
+ {visualMode === 'legacy' ? (
|
|
|
+ <JSONEditor
|
|
|
+ field='param_override_legacy'
|
|
|
+ label={t('旧格式（直接覆盖）：')}
|
|
|
+ placeholder={JSON.stringify(LEGACY_TEMPLATE, null, 2)}
|
|
|
+ value={legacyValue}
|
|
|
+ onChange={setLegacyValue}
|
|
|
+ template={LEGACY_TEMPLATE}
|
|
|
+ templateLabel={t('填入模板')}
|
|
|
+ editorType='keyValue'
|
|
|
+ showClear
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <div>
|
|
|
+ <div className='flex items-center justify-between mb-3'>
|
|
|
+ <Space>
|
|
|
+ <Text>{t('新格式（支持条件判断与json自定义）：')}</Text>
|
|
|
+ <Tag color='cyan'>
|
|
|
+ {`${t('规则')}: ${operationCount}`}
|
|
|
+ </Tag>
|
|
|
+ </Space>
|
|
|
+ <Button icon={<IconPlus />} onClick={addOperation}>
|
|
|
+ {t('新增规则')}
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Space vertical spacing={8} style={{ width: '100%' }}>
|
|
|
+ {operations.map((operation, index) => {
|
|
|
+ const mode = operation.mode || 'set';
|
|
|
+ const meta = MODE_META[mode] || MODE_META.set;
|
|
|
+ const conditions = operation.conditions || [];
|
|
|
+ return (
|
|
|
+ <Card key={operation.id} className='!rounded-xl border'>
|
|
|
+ <div className='flex items-center justify-between mb-2'>
|
|
|
+ <Space>
|
|
|
+ <Tag>{`#${index + 1}`}</Tag>
|
|
|
+ <Text>{mode}</Text>
|
|
|
+ </Space>
|
|
|
+ <Space>
|
|
|
+ <Button
|
|
|
+ size='small'
|
|
|
+ type='tertiary'
|
|
|
+ onClick={() => duplicateOperation(operation.id)}
|
|
|
+ >
|
|
|
+ {t('复制')}
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ theme='borderless'
|
|
|
+ type='danger'
|
|
|
+ icon={<IconDelete />}
|
|
|
+ onClick={() => removeOperation(operation.id)}
|
|
|
+ />
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Row gutter={12}>
|
|
|
+ <Col xs={24} md={8}>
|
|
|
+ <Text type='tertiary' size='small'>
|
|
|
+ mode
|
|
|
+ </Text>
|
|
|
+ <Select
|
|
|
+ value={mode}
|
|
|
+ optionList={OPERATION_MODE_OPTIONS}
|
|
|
+ onChange={(nextMode) =>
|
|
|
+ updateOperation(operation.id, { mode: nextMode })
|
|
|
+ }
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ {meta.path || meta.pathOptional ? (
|
|
|
+ <Col xs={24} md={16}>
|
|
|
+ <Text type='tertiary' size='small'>
|
|
|
+ {meta.pathOptional ? 'path (optional)' : 'path'}
|
|
|
+ </Text>
|
|
|
+ <Input
|
|
|
+ value={operation.path}
|
|
|
+ placeholder={
|
|
|
+ mode.includes('header')
|
|
|
+ ? 'X-Debug-Mode'
|
|
|
+ : mode === 'prune_objects'
|
|
|
+ ? 'messages (optional)'
|
|
|
+ : 'temperature'
|
|
|
+ }
|
|
|
+ onChange={(nextValue) =>
|
|
|
+ updateOperation(operation.id, {
|
|
|
+ path: nextValue,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <Space wrap style={{ marginTop: 6 }}>
|
|
|
+ {OPERATION_PATH_SUGGESTIONS.map((pathItem) => (
|
|
|
+ <Tag
|
|
|
+ key={`${operation.id}_${pathItem}`}
|
|
|
+ size='small'
|
|
|
+ color='grey'
|
|
|
+ className='cursor-pointer'
|
|
|
+ onClick={() =>
|
|
|
+ updateOperation(operation.id, {
|
|
|
+ path: pathItem,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ >
|
|
|
+ {pathItem}
|
|
|
+ </Tag>
|
|
|
+ ))}
|
|
|
+ </Space>
|
|
|
+ </Col>
|
|
|
+ ) : null}
|
|
|
+ </Row>
|
|
|
+ <Text type='tertiary' size='small' className='mt-1 block'>
|
|
|
+ {MODE_DESCRIPTIONS[mode] || ''}
|
|
|
+ </Text>
|
|
|
+
|
|
|
+ {meta.value ? (
|
|
|
+ <div className='mt-2'>
|
|
|
+ <Text type='tertiary' size='small'>
|
|
|
+ value (JSON or plain text)
|
|
|
+ </Text>
|
|
|
+ <Input.TextArea
|
|
|
+ value={operation.value_text}
|
|
|
+ autosize={{ minRows: 1, maxRows: 4 }}
|
|
|
+ placeholder='0.7'
|
|
|
+ onChange={(nextValue) =>
|
|
|
+ updateOperation(operation.id, {
|
|
|
+ value_text: nextValue,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
+
|
|
|
+ {meta.keepOrigin ? (
|
|
|
+ <div className='mt-2'>
|
|
|
+ <Switch
|
|
|
+ checked={operation.keep_origin}
|
|
|
+ checkedText={t('开')}
|
|
|
+ uncheckedText={t('关')}
|
|
|
+ onChange={(nextValue) =>
|
|
|
+ updateOperation(operation.id, {
|
|
|
+ keep_origin: nextValue,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <Text type='tertiary' size='small' className='ml-2'>
|
|
|
+ keep_origin
|
|
|
+ </Text>
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
+
|
|
|
+ {meta.from || meta.to === false || meta.to ? (
|
|
|
+ <Row gutter={12} style={{ marginTop: 8 }}>
|
|
|
+ {meta.from || meta.to === false ? (
|
|
|
+ <Col xs={24} md={12}>
|
|
|
+ <Text type='tertiary' size='small'>
|
|
|
+ from
|
|
|
+ </Text>
|
|
|
+ <Input
|
|
|
+ value={operation.from}
|
|
|
+ placeholder={
|
|
|
+ mode.includes('header')
|
|
|
+ ? 'Authorization'
|
|
|
+ : 'model'
|
|
|
+ }
|
|
|
+ onChange={(nextValue) =>
|
|
|
+ updateOperation(operation.id, {
|
|
|
+ from: nextValue,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ ) : null}
|
|
|
+ {meta.to || meta.to === false ? (
|
|
|
+ <Col xs={24} md={12}>
|
|
|
+ <Text type='tertiary' size='small'>
|
|
|
+ to
|
|
|
+ </Text>
|
|
|
+ <Input
|
|
|
+ value={operation.to}
|
|
|
+ placeholder={
|
|
|
+ mode.includes('header')
|
|
|
+ ? 'X-Upstream-Auth'
|
|
|
+ : 'original_model'
|
|
|
+ }
|
|
|
+ onChange={(nextValue) =>
|
|
|
+ updateOperation(operation.id, { to: nextValue })
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ ) : null}
|
|
|
+ </Row>
|
|
|
+ ) : null}
|
|
|
+
|
|
|
+ <div className='mt-3 border rounded-lg p-2'>
|
|
|
+ <div className='flex items-center justify-between mb-2'>
|
|
|
+ <Space>
|
|
|
+ <Text>{t('条件')}</Text>
|
|
|
+ <Select
|
|
|
+ value={operation.logic || 'OR'}
|
|
|
+ optionList={[
|
|
|
+ { label: 'OR', value: 'OR' },
|
|
|
+ { label: 'AND', value: 'AND' },
|
|
|
+ ]}
|
|
|
+ style={{ width: 96 }}
|
|
|
+ onChange={(nextValue) =>
|
|
|
+ updateOperation(operation.id, {
|
|
|
+ logic: nextValue,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </Space>
|
|
|
+ <Button
|
|
|
+ icon={<IconPlus />}
|
|
|
+ size='small'
|
|
|
+ onClick={() => addCondition(operation.id)}
|
|
|
+ >
|
|
|
+ {t('新增条件')}
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {conditions.length === 0 ? (
|
|
|
+ <Text type='tertiary' size='small'>
|
|
|
+ {t('没有条件时，默认总是执行该操作。')}
|
|
|
+ </Text>
|
|
|
+ ) : (
|
|
|
+ <Space vertical spacing={8} style={{ width: '100%' }}>
|
|
|
+ {conditions.map((condition, conditionIndex) => (
|
|
|
+ <Card
|
|
|
+ key={condition.id}
|
|
|
+ bodyStyle={{ padding: 10 }}
|
|
|
+ className='!rounded-lg'
|
|
|
+ >
|
|
|
+ <div className='flex items-center justify-between mb-2'>
|
|
|
+ <Tag size='small'>{`C${conditionIndex + 1}`}</Tag>
|
|
|
+ <Button
|
|
|
+ theme='borderless'
|
|
|
+ type='danger'
|
|
|
+ icon={<IconDelete />}
|
|
|
+ size='small'
|
|
|
+ onClick={() =>
|
|
|
+ removeCondition(operation.id, condition.id)
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <Row gutter={12}>
|
|
|
+ <Col xs={24} md={10}>
|
|
|
+ <Text type='tertiary' size='small'>
|
|
|
+ path
|
|
|
+ </Text>
|
|
|
+ <Input
|
|
|
+ value={condition.path}
|
|
|
+ placeholder='model'
|
|
|
+ onChange={(nextValue) =>
|
|
|
+ updateCondition(
|
|
|
+ operation.id,
|
|
|
+ condition.id,
|
|
|
+ { path: nextValue },
|
|
|
+ )
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <Space wrap style={{ marginTop: 6 }}>
|
|
|
+ {CONDITION_PATH_SUGGESTIONS.map(
|
|
|
+ (pathItem) => (
|
|
|
+ <Tag
|
|
|
+ key={`${condition.id}_${pathItem}`}
|
|
|
+ size='small'
|
|
|
+ color='grey'
|
|
|
+ className='cursor-pointer'
|
|
|
+ onClick={() =>
|
|
|
+ updateCondition(
|
|
|
+ operation.id,
|
|
|
+ condition.id,
|
|
|
+ { path: pathItem },
|
|
|
+ )
|
|
|
+ }
|
|
|
+ >
|
|
|
+ {pathItem}
|
|
|
+ </Tag>
|
|
|
+ ),
|
|
|
+ )}
|
|
|
+ </Space>
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} md={8}>
|
|
|
+ <Text type='tertiary' size='small'>
|
|
|
+ mode
|
|
|
+ </Text>
|
|
|
+ <Select
|
|
|
+ value={condition.mode}
|
|
|
+ optionList={CONDITION_MODE_OPTIONS}
|
|
|
+ onChange={(nextValue) =>
|
|
|
+ updateCondition(
|
|
|
+ operation.id,
|
|
|
+ condition.id,
|
|
|
+ { mode: nextValue },
|
|
|
+ )
|
|
|
+ }
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ <Col xs={24} md={6}>
|
|
|
+ <Text type='tertiary' size='small'>
|
|
|
+ value
|
|
|
+ </Text>
|
|
|
+ <Input
|
|
|
+ value={condition.value_text}
|
|
|
+ placeholder='gpt'
|
|
|
+ onChange={(nextValue) =>
|
|
|
+ updateCondition(
|
|
|
+ operation.id,
|
|
|
+ condition.id,
|
|
|
+ { value_text: nextValue },
|
|
|
+ )
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Space style={{ marginTop: 8 }}>
|
|
|
+ <Switch
|
|
|
+ checked={condition.invert}
|
|
|
+ checkedText={t('开')}
|
|
|
+ uncheckedText={t('关')}
|
|
|
+ onChange={(nextValue) =>
|
|
|
+ updateCondition(
|
|
|
+ operation.id,
|
|
|
+ condition.id,
|
|
|
+ { invert: nextValue },
|
|
|
+ )
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <Text type='tertiary' size='small'>
|
|
|
+ invert
|
|
|
+ </Text>
|
|
|
+ <Switch
|
|
|
+ checked={condition.pass_missing_key}
|
|
|
+ checkedText={t('开')}
|
|
|
+ uncheckedText={t('关')}
|
|
|
+ onChange={(nextValue) =>
|
|
|
+ updateCondition(
|
|
|
+ operation.id,
|
|
|
+ condition.id,
|
|
|
+ { pass_missing_key: nextValue },
|
|
|
+ )
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <Text type='tertiary' size='small'>
|
|
|
+ pass_missing_key
|
|
|
+ </Text>
|
|
|
+ </Space>
|
|
|
+ </Card>
|
|
|
+ ))}
|
|
|
+ </Space>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </Space>
|
|
|
+ <Card className='!rounded-xl border mt-3'>
|
|
|
+ <div className='flex items-center justify-between mb-2'>
|
|
|
+ <Text>{t('实时 JSON 预览')}</Text>
|
|
|
+ <Tag color='grey'>{t('预览')}</Tag>
|
|
|
+ </div>
|
|
|
+ <pre className='mb-0 text-xs leading-5 whitespace-pre-wrap break-all max-h-64 overflow-auto'>
|
|
|
+ {visualPreview || '{}'}
|
|
|
+ </pre>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <div style={{ width: '100%' }}>
|
|
|
+ <Space style={{ marginBottom: 8 }} wrap>
|
|
|
+ <Button onClick={formatJson}>{t('格式化')}</Button>
|
|
|
+ <Tag color='cyan'>{t('JSON 智能提示')}</Tag>
|
|
|
+ </Space>
|
|
|
+ <div className='border rounded-lg overflow-hidden'>
|
|
|
+ <MonacoEditor
|
|
|
+ beforeMount={configureMonaco}
|
|
|
+ path={MONACO_MODEL_URI}
|
|
|
+ language='json'
|
|
|
+ value={jsonText}
|
|
|
+ onChange={(nextValue) => handleJsonChange(nextValue ?? '')}
|
|
|
+ height='460px'
|
|
|
+ options={{
|
|
|
+ minimap: { enabled: false },
|
|
|
+ fontSize: 13,
|
|
|
+ lineNumbers: 'on',
|
|
|
+ automaticLayout: true,
|
|
|
+ scrollBeyondLastLine: false,
|
|
|
+ tabSize: 2,
|
|
|
+ insertSpaces: true,
|
|
|
+ wordWrap: 'on',
|
|
|
+ formatOnPaste: true,
|
|
|
+ formatOnType: true,
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <Text type='tertiary' size='small' className='mt-2 block'>
|
|
|
+ {t('支持 mode/conditions 字段补全与 JSON Schema 校验')}
|
|
|
+ </Text>
|
|
|
+ {jsonError ? (
|
|
|
+ <Text className='text-red-500 text-xs mt-2'>{jsonError}</Text>
|
|
|
+ ) : null}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </Space>
|
|
|
+ </Modal>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default ParamOverrideEditorModal;
|
Seefs