t0ng7u
3d850d38b6
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`
47 lines
1.4 KiB
TypeScript
Vendored
47 lines
1.4 KiB
TypeScript
Vendored
/*
|
|
Copyright (C) 2023-2026 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 type { ReactNode } from 'react'
|
|
import { Link2 } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
SideDrawerSection,
|
|
SideDrawerSectionHeader,
|
|
} from '@/components/drawer-layout'
|
|
|
|
type ChannelApiAccessSectionProps = {
|
|
children: ReactNode
|
|
}
|
|
|
|
export function ChannelApiAccessSection(props: ChannelApiAccessSectionProps) {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<SideDrawerSection>
|
|
<SideDrawerSectionHeader
|
|
title={t('API Access')}
|
|
description={t(
|
|
'Endpoint, provider-specific settings, and credentials.'
|
|
)}
|
|
icon={<Link2 className='h-4 w-4' aria-hidden='true' />}
|
|
/>
|
|
{props.children}
|
|
</SideDrawerSection>
|
|
)
|
|
}
|