♻️ refactor(channels): rebuild channel create/edit drawer with modular sections and improved form UX
Restructure the default-theme channel create/edit experience to align with classic frontend behavior, modern form UX patterns, and the project's Base UI design system. Channel editor architecture: - Split the monolithic channel mutate drawer into focused section components (basic, API access, auth, models, advanced) with shared drawer layout primitives - Extract submission, toast handling, and react-query cache invalidation into `useChannelMutateForm` - Add a dedicated loading skeleton for channel detail fetch during edit mode - Remove the top-level configuration summary block per UX feedback Form validation and data handling: - Strengthen `channel-form` Zod schema with JSON, model mapping, status code mapping, Codex credential, and Vertex AI key refinements - Move type-specific conditional validation into `superRefine` - Normalize base URL formatting and tighten model mapping value validation Model mapping editor: - Add Visual/JSON tabbed editing with inline JSON and duplicate-key feedback - Improve accessibility for icon-only actions and add model suggestion datalists MultiSelect component: - Replace the custom cmdk-based implementation with Base UI Combobox chips - Align focus, border, ring, disabled, and invalid states with standard Input styling via `ComboboxChips` - Preserve existing API (`options`, `selected`, `onChange`, `allowCreate`, `createLabel`) for all current callers - Support inline custom value creation, comma/newline batch input, searchable options, portal-based dropdown positioning, and chip removal Models & groups UX: - Integrate manual custom model entry directly into the model MultiSelect - Remove the separate manual model input/button block - Keep selected-model count and existing model-mapping guardrail behavior i18n: - Add and sync translation keys for new editor sections, validation messages, model mapping UI, and MultiSelect empty/create labels across en, zh, fr, ja, ru, and vi - Remove obsolete keys tied to the deprecated summary and manual model entry UI Affected areas: - `web/default/src/features/channels/components/drawers/` - `web/default/src/features/channels/hooks/use-channel-mutate-form.ts` - `web/default/src/features/channels/lib/channel-form.ts` - `web/default/src/features/channels/lib/model-mapping-validation.ts` - `web/default/src/features/channels/components/model-mapping-editor.tsx` - `web/default/src/components/multi-select.tsx` - `web/default/src/i18n/locales/*.json`
This commit is contained in:
t0ng7u
+246
-59
@@ -17,68 +17,249 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { z } from 'zod'
|
||||
import { CHANNEL_STATUS, MODEL_FETCHABLE_TYPES } from '../constants'
|
||||
import {
|
||||
CHANNEL_STATUS,
|
||||
ERROR_MESSAGES,
|
||||
MODEL_FETCHABLE_TYPES,
|
||||
} from '../constants'
|
||||
import type { Channel } from '../types'
|
||||
|
||||
// ============================================================================
|
||||
// Form Validation Schema
|
||||
// ============================================================================
|
||||
|
||||
export const channelFormSchema = z.object({
|
||||
name: z.string().min(1, 'Channel name is required'),
|
||||
type: z.number().min(0, 'Channel type is required'),
|
||||
base_url: z.string().optional(),
|
||||
key: z.string(),
|
||||
openai_organization: z.string().optional(),
|
||||
models: z.string().min(1, 'At least one model is required'),
|
||||
group: z.array(z.string()).min(1, 'At least one group is required'),
|
||||
model_mapping: z.string().optional(),
|
||||
priority: z.number().optional(),
|
||||
weight: z.number().optional(),
|
||||
test_model: z.string().optional(),
|
||||
auto_ban: z.number().optional(),
|
||||
status: z.number(),
|
||||
status_code_mapping: z.string().optional(),
|
||||
tag: z.string().optional(),
|
||||
remark: z
|
||||
.string()
|
||||
.max(255, 'Remark must be less than 255 characters')
|
||||
.optional(),
|
||||
setting: z.string().optional(),
|
||||
param_override: z.string().optional(),
|
||||
header_override: z.string().optional(),
|
||||
settings: z.string().optional(),
|
||||
other: z.string().optional(),
|
||||
// Multi-key options (not sent to backend directly)
|
||||
multi_key_mode: z.enum(['single', 'batch', 'multi_to_single']).optional(),
|
||||
multi_key_type: z.enum(['random', 'polling']).optional(),
|
||||
batch_add_set_key_prefix_2_name: z.boolean().optional(),
|
||||
key_mode: z.enum(['append', 'replace']).optional(), // For editing multi-key channels
|
||||
// Channel extra settings (stored in setting JSON, not sent directly)
|
||||
force_format: z.boolean().optional(),
|
||||
thinking_to_content: z.boolean().optional(),
|
||||
proxy: z.string().optional(),
|
||||
pass_through_body_enabled: z.boolean().optional(),
|
||||
system_prompt: z.string().optional(),
|
||||
system_prompt_override: z.boolean().optional(),
|
||||
// Type-specific settings (stored in settings JSON)
|
||||
is_enterprise_account: z.boolean().optional(), // OpenRouter specific
|
||||
vertex_key_type: z.enum(['json', 'api_key']).optional(), // Vertex AI specific
|
||||
aws_key_type: z.enum(['ak_sk', 'api_key']).optional(), // AWS specific
|
||||
azure_responses_version: z.string().optional(), // Azure specific
|
||||
// Field passthrough controls (stored in settings JSON)
|
||||
allow_service_tier: z.boolean().optional(), // OpenAI/Anthropic
|
||||
disable_store: z.boolean().optional(), // OpenAI only
|
||||
allow_safety_identifier: z.boolean().optional(), // OpenAI only
|
||||
allow_include_obfuscation: z.boolean().optional(), // OpenAI: include usage obfuscation
|
||||
allow_inference_geo: z.boolean().optional(), // OpenAI/Anthropic: inference geography
|
||||
allow_speed: z.boolean().optional(), // Anthropic: speed mode control
|
||||
claude_beta_query: z.boolean().optional(), // Anthropic: beta query passthrough
|
||||
// Upstream model update settings (stored in settings JSON)
|
||||
upstream_model_update_check_enabled: z.boolean().optional(),
|
||||
upstream_model_update_auto_sync_enabled: z.boolean().optional(),
|
||||
upstream_model_update_ignored_models: z.string().optional(),
|
||||
})
|
||||
function parseOptionalJson(value: string | undefined): unknown {
|
||||
if (!value?.trim()) return undefined
|
||||
return JSON.parse(value)
|
||||
}
|
||||
|
||||
function isJsonObjectValue(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === 'object' && value !== null && !Array.isArray(value)
|
||||
}
|
||||
|
||||
function isOptionalJsonObject(value: string | undefined): boolean {
|
||||
try {
|
||||
const parsed = parseOptionalJson(value)
|
||||
return parsed === undefined || isJsonObjectValue(parsed)
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function isOptionalModelMapping(value: string | undefined): boolean {
|
||||
try {
|
||||
const parsed = parseOptionalJson(value)
|
||||
if (parsed === undefined) return true
|
||||
if (!isJsonObjectValue(parsed)) return false
|
||||
return Object.values(parsed).every((item) => typeof item === 'string')
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function isOptionalStatusCodeMapping(value: string | undefined): boolean {
|
||||
try {
|
||||
const parsed = parseOptionalJson(value)
|
||||
if (parsed === undefined) return true
|
||||
if (!isJsonObjectValue(parsed)) return false
|
||||
return Object.entries(parsed).every(([from, to]) => {
|
||||
const fromCode = Number(from)
|
||||
const toCode = Number(to)
|
||||
return (
|
||||
Number.isInteger(fromCode) &&
|
||||
Number.isInteger(toCode) &&
|
||||
fromCode >= 100 &&
|
||||
fromCode <= 599 &&
|
||||
toCode >= 100 &&
|
||||
toCode <= 599
|
||||
)
|
||||
})
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function isCodexCredential(value: string | undefined): boolean {
|
||||
try {
|
||||
const parsed = parseOptionalJson(value)
|
||||
if (parsed === undefined) return true
|
||||
return (
|
||||
isJsonObjectValue(parsed) &&
|
||||
typeof parsed.access_token === 'string' &&
|
||||
parsed.access_token.trim().length > 0 &&
|
||||
typeof parsed.account_id === 'string' &&
|
||||
parsed.account_id.trim().length > 0
|
||||
)
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function isVertexJsonKey(value: string | undefined): boolean {
|
||||
try {
|
||||
const parsed = parseOptionalJson(value)
|
||||
if (parsed === undefined) return true
|
||||
if (Array.isArray(parsed)) {
|
||||
return parsed.every((item) => isJsonObjectValue(item))
|
||||
}
|
||||
return isJsonObjectValue(parsed)
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function addRequiredIssue(
|
||||
ctx: z.RefinementCtx,
|
||||
path: string,
|
||||
message: string
|
||||
): void {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: [path],
|
||||
message,
|
||||
})
|
||||
}
|
||||
|
||||
export const channelFormSchema = z
|
||||
.object({
|
||||
name: z.string().min(1, ERROR_MESSAGES.REQUIRED_NAME),
|
||||
type: z.number().min(0, ERROR_MESSAGES.REQUIRED_TYPE),
|
||||
base_url: z.string().optional(),
|
||||
key: z.string(),
|
||||
openai_organization: z.string().optional(),
|
||||
models: z.string().min(1, ERROR_MESSAGES.REQUIRED_MODELS),
|
||||
group: z.array(z.string()).min(1, ERROR_MESSAGES.REQUIRED_GROUP),
|
||||
model_mapping: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine(
|
||||
isOptionalModelMapping,
|
||||
'Model mapping must be a JSON object with string values'
|
||||
),
|
||||
priority: z.number().optional(),
|
||||
weight: z.number().optional(),
|
||||
test_model: z.string().optional(),
|
||||
auto_ban: z.number().optional(),
|
||||
status: z.number(),
|
||||
status_code_mapping: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine(
|
||||
isOptionalStatusCodeMapping,
|
||||
'Status code mapping must use valid HTTP status codes'
|
||||
),
|
||||
tag: z.string().optional(),
|
||||
remark: z
|
||||
.string()
|
||||
.max(255, 'Remark must be less than 255 characters')
|
||||
.optional(),
|
||||
setting: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine(isOptionalJsonObject, ERROR_MESSAGES.INVALID_JSON),
|
||||
param_override: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine(isOptionalJsonObject, ERROR_MESSAGES.INVALID_JSON),
|
||||
header_override: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine(isOptionalJsonObject, ERROR_MESSAGES.INVALID_JSON),
|
||||
settings: z
|
||||
.string()
|
||||
.optional()
|
||||
.refine(isOptionalJsonObject, ERROR_MESSAGES.INVALID_JSON),
|
||||
other: z.string().optional(),
|
||||
// Multi-key options (not sent to backend directly)
|
||||
multi_key_mode: z.enum(['single', 'batch', 'multi_to_single']).optional(),
|
||||
multi_key_type: z.enum(['random', 'polling']).optional(),
|
||||
batch_add_set_key_prefix_2_name: z.boolean().optional(),
|
||||
key_mode: z.enum(['append', 'replace']).optional(), // For editing multi-key channels
|
||||
// Channel extra settings (stored in setting JSON, not sent directly)
|
||||
force_format: z.boolean().optional(),
|
||||
thinking_to_content: z.boolean().optional(),
|
||||
proxy: z.string().optional(),
|
||||
pass_through_body_enabled: z.boolean().optional(),
|
||||
system_prompt: z.string().optional(),
|
||||
system_prompt_override: z.boolean().optional(),
|
||||
// Type-specific settings (stored in settings JSON)
|
||||
is_enterprise_account: z.boolean().optional(), // OpenRouter specific
|
||||
vertex_key_type: z.enum(['json', 'api_key']).optional(), // Vertex AI specific
|
||||
aws_key_type: z.enum(['ak_sk', 'api_key']).optional(), // AWS specific
|
||||
azure_responses_version: z.string().optional(), // Azure specific
|
||||
// Field passthrough controls (stored in settings JSON)
|
||||
allow_service_tier: z.boolean().optional(), // OpenAI/Anthropic
|
||||
disable_store: z.boolean().optional(), // OpenAI only
|
||||
allow_safety_identifier: z.boolean().optional(), // OpenAI only
|
||||
allow_include_obfuscation: z.boolean().optional(), // OpenAI: include usage obfuscation
|
||||
allow_inference_geo: z.boolean().optional(), // OpenAI/Anthropic: inference geography
|
||||
allow_speed: z.boolean().optional(), // Anthropic: speed mode control
|
||||
claude_beta_query: z.boolean().optional(), // Anthropic: beta query passthrough
|
||||
// Upstream model update settings (stored in settings JSON)
|
||||
upstream_model_update_check_enabled: z.boolean().optional(),
|
||||
upstream_model_update_auto_sync_enabled: z.boolean().optional(),
|
||||
upstream_model_update_ignored_models: z.string().optional(),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if ([3, 8, 36, 45].includes(data.type) && !data.base_url?.trim()) {
|
||||
addRequiredIssue(
|
||||
ctx,
|
||||
'base_url',
|
||||
'Base URL is required for this channel type'
|
||||
)
|
||||
}
|
||||
|
||||
if ([3, 18, 21, 39, 41, 49].includes(data.type) && !data.other?.trim()) {
|
||||
addRequiredIssue(
|
||||
ctx,
|
||||
'other',
|
||||
'This channel type requires additional configuration'
|
||||
)
|
||||
}
|
||||
|
||||
if (data.type === 57) {
|
||||
if (data.multi_key_mode && data.multi_key_mode !== 'single') {
|
||||
addRequiredIssue(
|
||||
ctx,
|
||||
'multi_key_mode',
|
||||
'Codex channels do not support batch creation'
|
||||
)
|
||||
}
|
||||
if (data.key?.trim() && !isCodexCredential(data.key)) {
|
||||
addRequiredIssue(
|
||||
ctx,
|
||||
'key',
|
||||
'Codex credential must be a JSON object with access_token and account_id'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
data.type === 41 &&
|
||||
data.vertex_key_type === 'json' &&
|
||||
data.key?.trim() &&
|
||||
!isVertexJsonKey(data.key)
|
||||
) {
|
||||
addRequiredIssue(
|
||||
ctx,
|
||||
'key',
|
||||
'Vertex AI service account key must be valid JSON'
|
||||
)
|
||||
}
|
||||
|
||||
if (
|
||||
data.type === 41 &&
|
||||
data.vertex_key_type === 'api_key' &&
|
||||
data.multi_key_mode &&
|
||||
data.multi_key_mode !== 'single'
|
||||
) {
|
||||
addRequiredIssue(
|
||||
ctx,
|
||||
'multi_key_mode',
|
||||
'Vertex AI API Key mode does not support batch creation'
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export type ChannelFormValues = z.infer<typeof channelFormSchema>
|
||||
|
||||
@@ -389,6 +570,12 @@ function buildSettingsJSON(formData: ChannelFormValues): string {
|
||||
return JSON.stringify(settingsObj)
|
||||
}
|
||||
|
||||
function normalizeBaseUrl(value: string | undefined): string {
|
||||
return String(value || '')
|
||||
.trim()
|
||||
.replace(/\/+$/, '')
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform form data to API payload for creating channel
|
||||
*/
|
||||
@@ -403,7 +590,7 @@ export function transformFormDataToCreatePayload(formData: ChannelFormValues): {
|
||||
const channel: Partial<Channel> = {
|
||||
name: formData.name,
|
||||
type: formData.type,
|
||||
base_url: formData.base_url || null,
|
||||
base_url: normalizeBaseUrl(formData.base_url) || null,
|
||||
key: formData.key,
|
||||
openai_organization: formData.openai_organization || null,
|
||||
models: formData.models,
|
||||
@@ -452,7 +639,7 @@ export function transformFormDataToUpdatePayload(
|
||||
id: channelId,
|
||||
name: formData.name,
|
||||
type: formData.type,
|
||||
base_url: formData.base_url || null,
|
||||
base_url: normalizeBaseUrl(formData.base_url) || null,
|
||||
openai_organization: formData.openai_organization || null,
|
||||
models: formData.models,
|
||||
group: formatGroups(formData.group),
|
||||
@@ -485,7 +672,7 @@ export function transformFormDataToUpdatePayload(
|
||||
})
|
||||
|
||||
// Send explicit empty strings for nullable fields so GORM updates can clear them.
|
||||
payload.base_url = formData.base_url || ''
|
||||
payload.base_url = normalizeBaseUrl(formData.base_url) || ''
|
||||
payload.openai_organization = formData.openai_organization || ''
|
||||
payload.test_model = formData.test_model || ''
|
||||
payload.tag = formData.tag || ''
|
||||
|
||||
@@ -179,6 +179,12 @@ export function validateModelMappingJson(modelMapping: string): {
|
||||
error: 'Model mapping must be a valid JSON object',
|
||||
}
|
||||
}
|
||||
if (Object.values(parsed).some((value) => typeof value !== 'string')) {
|
||||
return {
|
||||
valid: false,
|
||||
error: 'Model mapping values must be strings',
|
||||
}
|
||||
}
|
||||
return { valid: true }
|
||||
} catch {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user